/**
 * Ulannii — full-screen split auth pages (login / register).
 *
 * Orange "Xin Chào!" gradient panel beside a clean form. Brand-warm, matches
 * the Ulannii beauty-academy identity. Presentation only.
 */

.ulannii-auth {
	--u-orange: #f0871e;
	--u-orange-deep: #e2650f;
	--u-orange-soft: #fbb36a;
	--u-ink: #26303b;
	--u-muted: #6b7280;
	--u-field: #f5f7fa;
	--u-field-border: #e5e9f0;
	--u-line: #e2e6eb;

	margin: 0;
	min-height: 100dvh;
	background: #fff;
	color: var(--u-ink);
	font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---- Split shell ------------------------------------------------------- */
.auth-split {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.auth-form-side {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
}

.auth-card {
	width: 100%;
	max-width: 420px;
}

.auth-card--register {
	max-width: 480px;
	text-align: center;
}

.auth-card--register .auth-title,
.auth-card--register .auth-sub {
	text-align: center;
}

/* Register page: Mulish typeface, plus the palette and measurements taken off
   the approved design — a lighter peach hero gradient and a #f5822c orange for
   the title and submit button, rather than the deeper brand orange the login
   page uses. Register-only tokens live here so the login page is unaffected. */
.ulannii-auth--register {
	--u-reg-orange: #f5822c;
	--u-reg-orange-hover: #e5741f;
	--u-reg-line: #e2e6eb;
	--u-reg-label: #33383f;
	--u-reg-danger: #e5443b;

	font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ulannii-auth--register .auth-title {
	font-size: clamp(2.25rem, 6vw, 3.125rem); /* ~50px on desktop */
	color: var(--u-reg-orange);
}

.ulannii-auth--register .auth-sub {
	margin-bottom: 1.875rem;
	font-size: 1.0625rem; /* ~17px */
	line-height: 1.6;
	color: #4a5058;
	text-wrap: balance; /* two even lines when it can't fit on one */
}

/* The sentence needs ~520px and the form column is 480px, so on a wide enough
   window let this one paragraph run past the column and stay centred on it,
   rather than wrapping. Narrower windows fall back to the balanced two lines. */
@media (min-width: 1200px) {
	.ulannii-auth--register .auth-sub {
		width: max-content;
		max-width: 34rem;
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

.auth-card--register form {
	text-align: left;
}

/* ---- Headings ---------------------------------------------------------- */
.auth-title {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 800;
	color: var(--u-orange);
}

.auth-sub {
	margin: 0 0 2rem;
	color: var(--u-muted);
	font-size: 1rem;
}

.ulannii-auth .learndash-wrapper label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #374151;
}

/* ======================================================================== */
/* ---- Login page -------------------------------------------------------- */
/* ======================================================================== */
/* Mirrors the registration page: form on the left, orange panel on the right,
   same peach palette. Measurements taken off the reference design, where the
   login controls run slightly larger than the registration form's. */
.ulannii-auth--login {
	--u-log-orange: #f5822c;
	--u-log-orange-hover: #e5741f;
	--u-log-line: #e2e6eb;
	--u-log-label: #33383f;
	--u-log-danger: #e5443b;

	font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ulannii-auth--login .auth-form-side {
	position: relative; /* anchors the logo pinned to this column's corner */
	padding-top: 6.5rem;
}

.ulannii-auth--login .auth-hero-brand .custom-logo {
	display: block;
	width: 180px;
	max-width: 100%;
	max-height: none;
	height: auto;
}

.auth-card--login {
	max-width: 440px;
	text-align: left;
}

.ulannii-auth--login .auth-title {
	font-size: clamp(2.125rem, 5vw, 2.875rem); /* ~46px */
	color: var(--u-log-orange);
	text-align: center;
}

.ulannii-auth--login .auth-sub {
	margin-bottom: 1.875rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #4a5058;
	text-align: center;
	text-wrap: balance;
}

/* ---- Phone / email tabs ------------------------------------------------ */
.auth-tabs {
	display: flex;
	gap: 1.875rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--u-log-line);
}

.auth-tab {
	position: relative;
	appearance: none;
	margin: 0;
	padding: 0 2px 0.6875rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--u-muted);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none; /* clicking a tab was highlighting its text */
	transition: color 0.15s ease;
}

/* The active marker is drawn as an overlay rather than a bottom border on the
   tab itself: a transparent 2px border would sit on top of the row's own 1px
   rule and punch a visible gap in it under every inactive tab. */
.auth-tab::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: transparent;
	transition: background 0.15s ease;
}

.auth-tab:hover {
	color: var(--u-ink);
}

.auth-tab.is-active {
	color: var(--u-log-orange);
}

.auth-tab.is-active::after {
	background: var(--u-log-orange);
}

.auth-tab:focus-visible {
	outline: 2px solid var(--u-log-orange);
	outline-offset: 3px;
}

/* ---- Fields ------------------------------------------------------------ */
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.auth-field {
	display: flex;
	flex-direction: column;
}

/* The browser's own rule for [hidden] is display:none at zero specificity, so
   the `display: flex` above would out-rank it and the inactive tab's field
   would stay on screen. */
.ulannii-auth [hidden] {
	display: none;
}

.auth-field label {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--u-log-label);
}

.auth-control {
	display: flex;
	align-items: stretch;
	height: 56px;
	background: #fff;
	border: 1px solid var(--u-log-line);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-control:focus-within {
	border-color: var(--u-log-orange);
	box-shadow: 0 0 0 4px rgba(245, 130, 44, 0.15);
}

/* Astra styles every input with `input[type=password], input[type=text], …`,
   which ties on specificity with a plain `.auth-control input` and then wins or
   loses on stylesheet order. It sets a border, a 2px radius, a grey text colour
   and `margin: 10px auto` — the border showing up as a stray rule beside the
   password eye. Out-rank it and undo each one. */
.ulannii-auth .auth-control input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: 100%; /* fills the box, so the text centres against the +84 badge */
	margin: 0;
	padding: 0 1rem;
	font: inherit;
	font-size: 0.9375rem;
	line-height: normal;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	border-radius: 8px;
}

.ulannii-auth .auth-control input::placeholder {
	color: var(--u-muted);
}

.ulannii-auth .auth-control input:focus {
	outline: none;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* ---- Password reveal --------------------------------------------------- */
.auth-eye {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	padding: 0;
	font-size: 0;
	color: var(--u-muted);
	background: transparent;
	border: 0;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.auth-eye::before {
	font-family: dashicons;
	content: "\f177"; /* dashicons-visibility (eye) — password hidden */
	font-size: 1.3rem;
	line-height: 1;
}

.auth-eye.is-revealed::before {
	content: "\f530"; /* dashicons-hidden (eye-slash) — password visible */
}

.auth-eye:hover {
	color: var(--u-log-orange);
}

.auth-eye:focus-visible {
	outline: 2px solid var(--u-log-orange);
	outline-offset: -2px;
}

/* ---- Remember, forgot, submit ------------------------------------------ */
.auth-remember {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	font-size: 0.875rem;
	color: #5b626b;
	cursor: pointer;
}

/* Drawn by hand rather than left to `accent-color`. Chrome picks the tick's
   colour from the accent for contrast, and against an orange this light it
   picks near-black — which reads as a smudge in the box rather than a tick. */
.auth-remember input[type="checkbox"] {
	width: 1.0625rem;
	height: 1.0625rem;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	border: 1.5px solid var(--u-log-line);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth-remember input[type="checkbox"]:checked {
	background-color: var(--u-log-orange);
	border-color: var(--u-log-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.3 8.5 11 1.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}

.auth-remember input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--u-log-orange);
	outline-offset: 2px;
}

.auth-forgot {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--u-log-orange);
	text-align: center;
	text-decoration: none;
}

.auth-forgot:hover {
	text-decoration: underline;
}

.auth-forgot-rule {
	display: block;
	width: 150px;
	height: 1px;
	margin: 0.875rem auto 0;
	background: var(--u-log-line);
}

.auth-submit {
	display: block;
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	height: 56px;
	margin: 0.5rem auto 0;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: var(--u-log-orange);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(245, 130, 44, 0.3);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-submit:hover {
	transform: translateY(-1px);
	background: var(--u-log-orange-hover);
	box-shadow: 0 14px 28px rgba(245, 130, 44, 0.36);
}

.auth-submit:focus-visible {
	outline: 3px solid var(--u-log-orange);
	outline-offset: 3px;
}

/* ---- Failed sign-in notice --------------------------------------------- */
.auth-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 1.375rem;
	padding: 14px 16px;
	background: #fdeeec;
	border: 1px solid #f3c3bd;
	border-radius: 8px;
	text-align: left;
}

.auth-alert__icon {
	position: relative;
	flex: none;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	background: var(--u-log-danger);
	border-radius: 50%;
}

.auth-alert__icon::before,
.auth-alert__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	background: #fff;
	transform: translateX(-50%);
}

.auth-alert__icon::before {
	top: 5px;
	height: 8px;
	border-radius: 1px;
}

.auth-alert__icon::after {
	bottom: 4px;
	height: 2px;
	border-radius: 50%;
}

.auth-alert__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #9e2f27;
}

/* ---- Login hero panel -------------------------------------------------- */
.ulannii-auth--login .auth-hero-side {
	display: none;
	background: linear-gradient(215deg, #fcd0ab 0%, #f9ac76 46%, #f38f52 100%);
}

.ulannii-auth--login .auth-hero-content {
	max-width: 30rem;
	text-align: center;
}

.ulannii-auth--login .auth-hero-title {
	margin-bottom: 1.625rem;
	font-size: clamp(2.5rem, 4.6vw, 4.125rem); /* ~66px */
}

.ulannii-auth--login .auth-hero-text {
	margin: 0 0 1.875rem;
	max-width: none;
	font-size: 1.125rem;
	line-height: 1.75;
	color: #fff;
	text-wrap: balance;
}

.ulannii-auth--login .auth-hero-btn {
	min-width: 300px;
	height: 56px;
	padding: 0 2.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.ulannii-auth--login .auth-hero-btn:hover {
	color: #f38f52;
}

/* ---- LearnDash registration form cleanup ------------------------------- */
.auth-card--register .learndash-wrapper {
	margin: 0;
}

/* Hide LearnDash's default headings, embedded login form, and "already have an
   account" link — our template heading and the hero "Đăng nhập" button already
   cover those, so the page shows only the registration form. */
.auth-card--register .ld-registration__heading,
.auth-card--register .ld-registration__login,
.auth-card--register .ld-registration__login-link,
.auth-card--register .ld-registration__p {
	display: none;
}

/* Registration failures. LearnDash renders these through its generic "warning"
   alert — a yellow panel with a black icon — which reads as a system error
   dropped into the page rather than part of it. Selectors carry the body class
   as well so they outrank LearnDash's own .learndash-wrapper .ld-alert rules
   whichever order the two stylesheets happen to load in. */
.ulannii-auth--register .auth-card--register .ld-alert {
	margin: 0 0 1.25rem;
	padding: 14px 16px;
	background: #fdeeec;
	border: 1px solid #f3c3bd;
	border-radius: 8px;
	text-align: left;
	box-shadow: none;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-messages {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #9e2f27;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-messages p {
	margin: 0;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-messages p + p {
	margin-top: 0.25rem;
}

/* Drawn here rather than recoloured: LearnDash's icon is a two-tone glyph from
   its own icon font, so `color` alone can't bring it into the palette.
 *
 * Every property LearnDash sets is reset explicitly, and the `.ld-icon-alert`
 * class is chained on so this out-ranks its own `.learndash-wrapper .ld-alert
 * .ld-alert-icon.ld-icon-alert` rule. Without that the icon keeps LearnDash's
 * `position: absolute` and 42px font size and lands on top of the message
 * instead of beside it. */
.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon,
.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon.ld-icon-alert {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	flex: none;
	box-sizing: border-box;
	width: 21px;
	height: 21px;
	margin: 2px 0 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	background-color: var(--u-reg-danger);
	border-radius: 50%;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon::before,
.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	background: #fff;
	transform: translateX(-50%);
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon::before {
	top: 5px;
	height: 8px;
	border-radius: 1px;
}

.ulannii-auth--register .auth-card--register .ld-alert .ld-alert-icon::after {
	bottom: 4px;
	height: 2px;
	border-radius: 50%;
}

/* Single-column field stack — only Họ/Tên (first + last name) pair up side
   by side, matching the reference layout's proportions. */
.auth-card--register .ld-registration__register-form {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.25rem;
	row-gap: 15px; /* measured off the reference: ~27px from one input's base to the next label, of which ~12px is the label's own leading */
}

@media (min-width: 480px) {
	.auth-card--register .ld-registration__register-form {
		grid-template-columns: 1fr 1fr;
	}

	/* Same specificity as .ld-form__field-outer-wrapper below (two classes each),
	   so on its own this loses the cascade since that rule comes later in the
	   file — chaining both classes on one selector raises specificity enough
	   to reliably win regardless of source order. */
	.auth-card--register .ld-form__field-outer-wrapper.learndash-registration-field-first_name,
	.auth-card--register .ld-form__field-outer-wrapper.learndash-registration-field-last_name {
		grid-column: auto;
	}
}

.auth-card--register .ld-form__field-outer-wrapper {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}

/* A tight line-height and small margin keep each label visually attached to its
   own field: LearnDash's body line-height leaves so much air under the text
   that the label reads as sitting between two fields rather than above one. */
.auth-card--register .learndash-wrapper label {
	margin-bottom: 0.4rem;
	font-size: 0.9375rem; /* 15px */
	font-weight: 600;
	line-height: 1.35;
	color: var(--u-reg-label);
}

/* LearnDash wraps every input in a .ld-form__field-wrapper, so that wrapper —
   not the input — carries the border and the 52px height. The password eye
   toggle and the +84 prefix then sit inside the same outline as their input,
   instead of each field type needing its own box. Listed by field type on
   purpose: checkbox wrappers (LearnDash's terms/privacy consents) share the
   base class but must not become 52px bordered boxes. */
/* LearnDash gives every field wrapper a bottom margin (--ld-spacer-4), which
   stacks on top of the grid's row-gap and pushes the fields much further apart
   than the design. The gap comes from row-gap alone. */
.auth-card--register .ld-form__field-wrapper {
	margin-bottom: 0;
}

.auth-card--register .ld-form__field-wrapper--type-text,
.auth-card--register .ld-form__field-wrapper--type-email,
.auth-card--register .ld-form__field-wrapper--type-password,
.auth-card--register .ld-form__field-wrapper--type-tel,
.auth-card--register .ld-form__field-wrapper--type-select {
	display: flex;
	align-items: stretch;
	height: 48px; /* the reference's inputs measure ~46px */
	background: #fff;
	border: 1px solid var(--u-reg-line);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card--register .ld-form__field-wrapper--type-text:focus-within,
.auth-card--register .ld-form__field-wrapper--type-email:focus-within,
.auth-card--register .ld-form__field-wrapper--type-password:focus-within,
.auth-card--register .ld-form__field-wrapper--type-tel:focus-within,
.auth-card--register .ld-form__field-wrapper--type-select:focus-within {
	border-color: var(--u-reg-orange);
	box-shadow: 0 0 0 4px rgba(245, 130, 44, 0.15);
}

.auth-card--register .learndash-wrapper input[type="text"],
.auth-card--register .learndash-wrapper input[type="email"],
.auth-card--register .learndash-wrapper input[type="password"],
.auth-card--register .learndash-wrapper input[type="tel"] {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: 100%; /* fills the box, so the text centres against the +84 badge */
	margin: 0; /* Astra sets `margin: 10px auto` on password inputs specifically */
	padding: 0 1rem;
	font-family: inherit; /* form controls don't inherit type on their own */
	font-size: 0.9375rem;
	line-height: normal;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	border-radius: 8px;
}

.auth-card--register .learndash-wrapper input[type="text"]:focus,
.auth-card--register .learndash-wrapper input[type="email"]:focus,
.auth-card--register .learndash-wrapper input[type="password"]:focus,
.auth-card--register .learndash-wrapper input[type="tel"]:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* The Chức vụ picker is the register card's only <select>. It sits in the same
   48px box as the inputs above it, so the native arrow is dropped and redrawn:
   left alone, every browser draws its own at its own size and this field stops
   lining up with the ones around it. */
.auth-card--register .learndash-wrapper select.ld-form__field--type-select {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 2.5rem 0 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: normal;
	color: var(--u-ink);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	border: 0;
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.auth-card--register .learndash-wrapper select.ld-form__field--type-select:focus {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* The field is required and the first option carries an empty value, so :invalid
   is exactly "nothing picked yet" — the placeholder then reads as placeholder
   text rather than as an answer the member has already given. */
.auth-card--register .learndash-wrapper select.ld-form__field--type-select:invalid {
	color: var(--u-muted);
}

/* Field order: Tên đăng nhập, Họ/Tên, Số điện thoại, Chức vụ, Email, Mật khẩu,
   Nhập lại mật khẩu, Mã giới thiệu, rồi nút Tạo Tài Khoản — matching the
   reference form's reading order regardless of the DOM order LearnDash and
   our added fields happen to render in. LearnDash's last_name is "Họ" and
   first_name is "Tên", so last_name comes first: Vietnamese names read
   family-name-first. */
.auth-card--register .learndash-registration-field-username { order: 1; }
.auth-card--register .learndash-registration-field-last_name { order: 2; }
.auth-card--register .learndash-registration-field-first_name { order: 3; }
.auth-card--register .learndash-registration-field-phone { order: 4; }
.auth-card--register .learndash-registration-field-academy_position { order: 5; }
.auth-card--register .learndash-registration-field-email { order: 6; }
.auth-card--register .learndash-registration-field-password { order: 7; }
.auth-card--register .ld-password-strength__hint { order: 8; }
.auth-card--register .learndash-registration-field-confirm_password { order: 9; }
.auth-card--register .learndash-registration-field-referral_code { order: 10; }
.auth-card--register .ld-registration__register-submit-wrapper { order: 11; }

/* The strength hint and submit button aren't wrapped in a field-outer div,
   so they need their own full-width rule. */
.auth-card--register .ld-password-strength__hint,
.auth-card--register .ld-registration__register-submit-wrapper {
	grid-column: 1 / -1;
}

/* LearnDash's default paragraph margin on the hint stacks on top of the grid
   row-gap, inflating the gap around it well past the 16-20px target. Set
   smaller and lighter than the labels so it reads as guidance attached to the
   password field, not as a third field in the stack. */
.auth-card--register .ld-password-strength__hint {
	margin: 0;
	font-size: 0.8125rem; /* 13px */
	line-height: 1.5;
	text-align: left;
	color: var(--u-muted);
}

/* Register submit → a fixed 240px orange button centred under the form, as in
   the reference (the login page keeps its own full-width pill).
 *
 * The wrapper is a <p>, so its default bottom margin stacks under the button
 * and opens a gap before the "Đăng nhập" button that follows on phones. */
.auth-card--register .ld-registration__register-submit-wrapper {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.auth-card--register .ld-registration__register-submit-wrapper input[type="submit"],
.auth-card--register .ld-registration__register-submit-wrapper button {
	box-sizing: border-box; /* otherwise the horizontal padding widens it past 240px */
	width: 240px;
	max-width: 100%;
	height: 48px; /* same as the input boxes */
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: var(--u-reg-orange);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(245, 130, 44, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.auth-card--register .ld-registration__register-submit-wrapper input[type="submit"]:hover,
.auth-card--register .ld-registration__register-submit-wrapper button:hover {
	transform: translateY(-1px);
	background: var(--u-reg-orange-hover);
	box-shadow: 0 14px 28px rgba(245, 130, 44, 0.36);
}

/* Password show/hide toggle → eye icon (hide the "Show"/"Hide" text). The box
   around it comes from the shared .ld-form__field-wrapper rule above.
 *
 * Astra gives every <button> a border and a grey fill, which on a control this
 * narrow shows up as a rule between the input and the icon. Reset explicitly
 * on both toggles rather than relying on the shorthand below to cover it. */
.auth-card--register .learndash-wrapper .ld-button__password-visibility-toggle,
.ulannii-auth .auth-control .auth-eye {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.auth-card--register .ld-button__password-visibility-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 0 0.9rem;
	font-size: 0;
	color: var(--u-muted);
	background: transparent;
	border: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.auth-card--register .ld-button__password-visibility-toggle::before {
	font-family: dashicons;
	content: "\f177"; /* dashicons-visibility (eye) — password hidden */
	font-size: 1.3rem;
	line-height: 1;
}

/* When LearnDash reveals the password it flips the input to type="text";
   swap the eye for an eye-slash so the icon reflects the current state. */
.auth-card--register .ld-form__field-wrapper input[type="text"] ~ .ld-button__password-visibility-toggle::before {
	content: "\f530"; /* dashicons-hidden (eye-slash) — password visible */
}

.auth-card--register .ld-button__password-visibility-toggle:hover {
	color: var(--u-reg-orange);
}

/* Required-field marker → a single red asterisk instead of the "(bắt buộc)"
   text, matching the reference. The source text stays for screen readers. */
.auth-card--register .required {
	position: relative;
	color: var(--u-reg-danger);
	font-size: 0;
}

.auth-card--register .required::before {
	content: "*";
	font-size: 1rem;
	line-height: 1;
}

/* Fixed "+84" (Vietnam) prefix badge, shared by the registration form's phone
   fields and the login page's phone tab. The bordered box around it belongs to
   whichever field wrapper it sits in; only the badge itself is styled here. */
.ulannii-auth .u-field-prefix {
	display: inline-flex;
	align-items: center;
	gap: 0.44rem;
	padding: 0 0.75rem 0 0.875rem;
	border-right: 1px solid var(--u-line);
	color: var(--u-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.ulannii-auth .u-field-prefix__flag {
	font-size: 1.05rem;
	line-height: 1;
}

/* ---- Searchable country picker ----------------------------------------- */
/* auth-country.js draws this over the real <select>, which stays in the form
   and keeps its value. Everything below styles the replacement; the select's
   own rules further down are the no-JavaScript fallback. */
.ulannii-auth .u-country {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: none;
}

.ulannii-auth .u-country__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 0 0.75rem 0 0.875rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: normal;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	border-right: 1px solid var(--u-line);
	border-radius: 8px 0 0 8px;
	cursor: pointer;
	white-space: nowrap;
}

.ulannii-auth .u-country__button:focus-visible {
	outline: 2px solid var(--u-log-orange, #f5822c);
	outline-offset: -2px;
}

.ulannii-auth .u-country__flag {
	font-size: 1.05rem;
	line-height: 1;
}

.ulannii-auth .u-country__caret {
	width: 13px;
	height: 13px;
	color: #6d747c;
	flex: none;
}

.ulannii-auth .u-country__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	width: 22rem;
	max-width: 78vw;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--u-line);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(60, 40, 20, 0.16);
}

/* A filled, bordered row with a magnifier — without it the placeholder reads
   as loose text floating at the top of the panel rather than a field. */
.ulannii-auth .u-country__searchwrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	height: 42px;
	margin: 0 0 0.5rem;
	padding: 0 0.75rem;
	background: #f4f5f7;
	border: 1px solid #dfe3e8;
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ulannii-auth .u-country__searchwrap:focus-within {
	background: #fff;
	border-color: var(--u-log-orange, #f5822c);
	box-shadow: 0 0 0 3px rgba(245, 130, 44, 0.15);
}

.ulannii-auth .u-country__searchicon {
	width: 17px;
	height: 17px;
	flex: none;
	color: #8b929b;
}

.ulannii-auth .u-country__search {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: normal;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ulannii-auth .u-country__search:focus {
	outline: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.ulannii-auth .u-country__list {
	margin: 0;
	padding: 0;
	max-height: 17rem;
	overflow-y: auto;
	list-style: none;
}

.ulannii-auth .u-country__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0.5rem 0.625rem;
	font-size: 0.9375rem;
	color: var(--u-ink);
	border-radius: 6px;
	cursor: pointer;
}

.ulannii-auth .u-country__item:hover,
.ulannii-auth .u-country__item.is-active {
	background: #fdeee2;
}

.ulannii-auth .u-country__item-flag {
	font-size: 1.15rem;
	line-height: 1;
	flex: none;
}

.ulannii-auth .u-country__item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ulannii-auth .u-country__item-dial {
	flex: none;
	color: var(--u-muted);
	font-variant-numeric: tabular-nums;
}

.ulannii-auth .u-country__empty {
	margin: 0;
	padding: 0.75rem 0.625rem;
	font-size: 0.9375rem;
	color: var(--u-muted);
}

/* Once enhanced the real select is only there to carry the value. */
.ulannii-auth .u-field-country.is-enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* No-JavaScript fallback: the plain select, narrow enough to sit beside the
   number because each option leads with its flag and dialling code. */
.ulannii-auth .u-field-country {
	flex: none;
	box-sizing: border-box;
	width: 6.5rem;
	height: 100%;
	margin: 0;
	padding: 0 0.5rem 0 0.875rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: normal;
	color: var(--u-ink);
	background: transparent;
	border: 0;
	border-right: 1px solid var(--u-line);
	border-radius: 8px 0 0 8px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ulannii-auth .u-field-country:focus {
	outline: none;
}

.ulannii-auth .u-field-country:focus-visible {
	outline: 2px solid var(--u-reg-orange, #f5822c);
	outline-offset: -2px;
}

/* The dropdown itself is drawn by the operating system, which ignores the
   transparent background above — give the options a readable ground. */
.ulannii-auth .u-field-country option {
	color: var(--u-ink);
	background: #fff;
}

/* ---- Hero "Xin Chào!" panel -------------------------------------------- */
.auth-hero-side {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40vh;
	padding: 3rem 2rem;
	background: linear-gradient(140deg, #fbb96f 0%, #f5923b 46%, #ea6a1c 100%);
	isolation: isolate;
}

.auth-hero-content {
	position: relative;
	z-index: 2;
	max-width: 30rem;
	text-align: center;
	color: #fff;
}

.auth-hero-content .auth-brand {
	margin-bottom: 1.5rem;
	align-items: center;
}

/* Register page: logo pinned to the top-left corner, greeting block centred in
   the panel beneath it — matches the reference. */
.auth-hero-brand {
	position: absolute;
	top: 2.25rem;
	left: 2.5rem;
	z-index: 3;
}

/* Real Site Identity logo (astra_logo() output) sized for the banner corner,
   plus a light-colored fallback in case the site falls back to text
   site-title/tagline (no image logo set in the Customizer). */
.ulannii-auth--register .auth-hero-brand .custom-logo {
	display: block;
	width: 154px;
	max-width: 100%;
	max-height: none;
	height: auto;
}

.ulannii-auth--register .auth-hero-brand .site-title,
.ulannii-auth--register .auth-hero-brand .site-description {
	color: #fff;
}

.ulannii-auth--register .auth-hero-brand .site-title {
	display: block;
	margin: 0;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
}

.ulannii-auth--register .auth-hero-brand .site-title a {
	color: inherit;
	text-decoration: none;
}

.ulannii-auth--register .auth-hero-brand .site-description {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-style: italic;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
}

.ulannii-auth--register .auth-hero-content {
	max-width: 30rem;
	text-align: center;
}

.ulannii-auth--register .auth-hero-text {
	margin: 0 0 1.375rem;
	max-width: none;
	font-size: 1.125rem; /* ~18px */
	line-height: 1.75;
	color: #fff;
	text-wrap: balance;
}

.ulannii-auth--register .auth-hero-title {
	margin-bottom: 1.625rem;
	font-size: clamp(2.5rem, 4.6vw, 4.125rem); /* ~66px */
}

.ulannii-auth--register .auth-hero-btn {
	min-width: 240px;
	height: 50px;
	margin-top: 0.875rem;
	padding: 0 2.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.ulannii-auth--register .auth-hero-btn:hover {
	color: #f38f52;
}

/* Decorative rounded triangles behind the greeting. Sits under the logo and
   the greeting block, above the gradient. Shared by both auth pages. */
.ulannii-auth .auth-hero-deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Mobile: hide the hero column entirely, show only the form (spec). Desktop
   split re-enables it below. */
.ulannii-auth--register .auth-hero-side {
	display: none;
	background: linear-gradient(145deg, #fcd0ab 0%, #f9ac76 46%, #f38f52 100%);
}

/* The form runs past one screen, so it starts at the top of the column rather
   than being centred in it. */
.ulannii-auth--register .auth-form-side {
	align-items: flex-start;
}

/* ======================================================================== */
/* ---- Narrow screens ---------------------------------------------------- */
/* ======================================================================== */
/* Below the split the orange panel is gone, taking the branding and the link
   to the other page with it. Both come back inside the form: the logo above
   the heading, and the crossing link as a full-width outlined button under a
   short rule — the arrangement the reference design uses. */

.auth-mobile-brand {
	margin: 0 0 1.75rem;
	text-align: center;
}

.auth-mobile-brand .custom-logo {
	display: inline-block;
	width: 220px;
	max-width: 68%;
	max-height: none;
	height: auto;
}

.auth-alt {
	margin-top: 1.5rem;
}

.auth-alt__rule {
	display: block;
	width: 150px;
	height: 1px;
	margin: 0 auto 1.25rem;
	background: var(--u-line);
}

.auth-alt__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--u-reg-orange, #f5822c);
	text-decoration: none;
	background: #fef6f0;
	border: 1px solid var(--u-reg-orange, #f5822c);
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

.auth-alt__btn:hover {
	color: #fff;
	background: var(--u-reg-orange, #f5822c);
}

.auth-alt__btn:focus-visible {
	outline: 3px solid var(--u-reg-orange, #f5822c);
	outline-offset: 3px;
}

/* The primary button fills the column rather than sitting at a fixed width,
   so it and the outlined one below read as a pair. */
@media (max-width: 979px) {
	.auth-card--register .ld-registration__register-submit-wrapper input[type="submit"],
	.auth-card--register .ld-registration__register-submit-wrapper button,
	.ulannii-auth--login .auth-submit {
		width: 100%;
	}

	/* The logo moves out of the absent panel and above the heading, so the
	   column stacks rather than laying the two side by side. */
	.ulannii-auth--login .auth-form-side {
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 2.5rem;
	}

	.ulannii-auth--login .auth-hero-brand {
		position: static;
		margin-bottom: 1.75rem;
		text-align: center;
	}

	.ulannii-auth--login .auth-hero-brand .custom-logo {
		display: inline-block;
		width: 220px;
		max-width: 68%;
	}

	/* The panel is anchored to the country picker, which is only as wide as the
	   flag and code — left to itself it sits noticeably narrower than the field
	   above it. The page gutter is 1.5rem either side, so this lines the panel
	   up with the field's own edges. */
	.ulannii-auth .u-country__panel {
		width: calc(100vw - 3rem);
		max-width: none;
	}

	/* Leaves room for the on-screen keyboard, which covers about half the
	   screen once the search field takes focus. */
	.ulannii-auth .u-country__list {
		max-height: 40vh;
	}
}

.auth-hero-title {
	margin: 0 0 1rem;
	font-size: clamp(2.75rem, 6vw, 4.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 6px 20px rgba(146, 58, 5, 0.25);
}

.auth-hero-text {
	margin: 0 auto 2rem;
	max-width: 26ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.94);
}

.auth-hero-btn {
	display: inline-block;
	padding: 0.9rem 2.6rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	transition: background 0.18s ease, color 0.18s ease;
}

.auth-hero-btn:hover {
	background: #fff;
	color: var(--u-orange-deep);
}

/* Floating decorative shapes. */
.auth-shape {
	position: absolute;
	z-index: 1;
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	background: rgba(255, 255, 255, 0.16);
	filter: blur(2px);
	animation: auth-float 9s ease-in-out infinite;
}

.auth-shape--1 {
	width: 220px;
	height: 220px;
	top: -60px;
	right: -40px;
}

.auth-shape--2 {
	width: 150px;
	height: 150px;
	bottom: 8%;
	left: -30px;
	background: rgba(255, 255, 255, 0.12);
	animation-delay: -3s;
}

.auth-shape--3 {
	width: 90px;
	height: 90px;
	bottom: 22%;
	right: 14%;
	background: rgba(255, 255, 255, 0.2);
	animation-delay: -5.5s;
}

@keyframes auth-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-18px) rotate(8deg); }
}

/* ---- Desktop split ----------------------------------------------------- */
@media (min-width: 980px) {
	.auth-split {
		flex-direction: row;
	}

	.auth-form-side {
		padding: 3rem 4rem;
	}

	.auth-hero-side {
		min-height: 100dvh;
	}

	/* The orange panel is back, carrying the branding and the crossing link, so
	   the in-form stand-ins step aside. */
	.auth-mobile-brand,
	.auth-alt {
		display: none;
	}

	/* Login is the mirror of register: form 7/12 on the left, panel 5/12 on the
	   right, pinned at one screen tall while the form scrolls past it. */
	.ulannii-auth--login .auth-hero-side {
		display: flex;
		flex: 0 0 41.6667%;
		align-self: flex-start;
		position: sticky;
		top: 0;
		height: 100vh;
		border-top-left-radius: 48px;
		border-bottom-left-radius: 48px;
	}

	.ulannii-auth--login .auth-form-side {
		flex: 1 1 58.3333%;
	}

	.ulannii-auth--register .auth-hero-side {
		border-top-right-radius: 48px;
		border-bottom-right-radius: 48px;
	}

	/* ~5/12 : 7/12 split, matching the reference's measured proportions. Sticky
	   + a fixed viewport height (opting out of the row's stretch alignment via
	   align-self) keeps the banner pinned at exactly one screen tall even
	   though the real form (8 fields) runs much longer than the hero panel. */
	.ulannii-auth--register .auth-hero-side {
		display: flex;
		flex: 0 0 41.6667%;
		align-self: flex-start;
		position: sticky;
		top: 0;
		height: 100vh;
	}

	.ulannii-auth--register .auth-form-side {
		flex: 1 1 58.3333%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-shape {
		animation: none;
	}
}

/* ---- The blue block behind a tab --------------------------------------- */

/* Astra paints selections site-wide with its own accent, #046bd2 — the one
   colour nothing else on these pages uses, which is why a blue block behind a
   tab label is so loud.
 *
 * `!important` here is deliberate. We are overriding a theme rule we do not
 * own, on two page templates that are entirely ours, and a plain override of
 * higher specificity did not settle it. Narrow scope is what makes it safe:
 * nothing outside `.ulannii-auth` is touched.
 *
 * Both possible sources are covered, because from a screenshot the two look
 * identical — a highlighted range, and a background painted on the control
 * itself while it is focused or pressed. */
.auth-tab::selection,
.auth-tab *::selection {
	background: transparent !important;
	color: inherit !important;
}

.auth-tab::-moz-selection,
.auth-tab *::-moz-selection {
	background: transparent !important;
	color: inherit !important;
}

.auth-tab,
.auth-tab:hover,
.auth-tab:focus,
.auth-tab:active,
.auth-tab.is-active {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* The keyboard outline is the one thing that must survive all of the above —
   without it there is no way to see where you are when tabbing through. */
.auth-tab:focus-visible {
	outline: 2px solid var(--u-log-orange);
	outline-offset: 3px;
}

/* Elsewhere on these pages selecting text still works, in the brand's orange
   rather than Astra's blue, keeping the text its own colour so a phone number
   stays readable while it is being copied. */
.ulannii-auth ::selection {
	background: rgba(245, 130, 44, 0.28);
	color: inherit;
}

.ulannii-auth ::-moz-selection {
	background: rgba(245, 130, 44, 0.28);
	color: inherit;
}