/**
 * Ulannii — site-wide styling.
 *
 * This file is the Customizer's "CSS bổ sung" box, moved into the theme. It was
 * written there first, which meant it lived only in the database: invisible to
 * version control, impossible to review, and needing to be copied out by hand
 * every time anything here had to change. Everything below is what that box
 * held, plus the header refinements that prompted the move.
 *
 * The Additional CSS box should now be EMPTY. While both exist the box wins —
 * WordPress prints it after every stylesheet — so nothing breaks during the
 * changeover, but the two will disagree until the box is cleared.
 *
 * Loaded after Astra's own stylesheet so it keeps the precedence it had as
 * inline CSS. The `!important` flags are inherited from the original and are
 * aimed at Astra's menu and button rules, not at each other.
 */

/* ==========================================================================
   Header
   ========================================================================== */

/* Measured directly off minhtrithanh.com rather than eyeballed: Mulish at 16px
   and weight 400, not the 500 this carried before. Be Vietnam Pro draws a
   heavier stroke than Mulish at the same weight, so the two together were what
   made the navigation read as blunt beside the reference. */
.main-header-menu,
.main-header-menu a,
.ast-mobile-header-wrap .main-header-menu a {
	font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	letter-spacing: normal !important;
}

/* Every item except the two buttons — without the exclusion this rule
   outweighs their own colours (three parts to two) and paints both
   labels near-black. */
.main-header-menu > li:not(.btn-dangky):not(.btn-dangnhap) > a {
	/* 12px a side puts 24px between labels — the reference's spacing.
	   Astra ships 16px, and the extra 8px each way is what made three
	   items read as scattered rather than as one group. */
	padding-right: 12px !important;
	padding-left: 12px !important;
	color: #0b1c2a !important;
}

/* Both buttons: 48px tall, 24px radius, 16px Mulish — the reference's numbers.
   The 24px radius is half the height, so they read as true pills. */
.main-header-menu .btn-dangky > a,
.main-header-menu .btn-dangnhap > a {
	display: flex !important;
	align-items: center !important;
	min-height: 48px !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	border-radius: 24px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	height: auto !important;
}

.main-header-menu li.btn-dangky,
.main-header-menu li.btn-dangnhap {
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}

/* The rule between the tools and the two buttons, measured off the reference:
   1px wide, 37px tall, #DFDFE0, with 12px of air either side.
 *
 * Drawn as a pseudo-element rather than a border on the item, for two reasons:
 * a border runs the full height of what it edges, and the reference's rule is
 * shorter than the buttons it separates; and the item's own padding is set to
 * zero just above, which is what defeated the first attempt at this — that rule
 * and this one carried equal weight, and site.css loads after header-search.css,
 * so `padding: 0` won and the line ended up flush against the button.
 *
 * It lives on the first button, so a signed-in header — where both buttons are
 * hidden — cannot be left with a rule separating nothing. */
.main-header-menu li.btn-dangky {
	position: relative;
	margin-left: 25px !important;
}

.main-header-menu li.btn-dangky::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -13px;
	width: 1px;
	height: 37px;
	background: #dfdfe0;
	transform: translateY(-50%);
}

/* Signed in the buttons are gone and the account icon follows the tools, so the
   rule belongs in front of that instead. */
#ast-desktop-header .ast-header-account {
	position: relative;
	margin-left: 25px;
}

#ast-desktop-header .ast-header-account::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -13px;
	width: 1px;
	height: 37px;
	background: #dfdfe0;
	transform: translateY(-50%);
}

/* 12px between the pair, as measured. */
.main-header-menu li.btn-dangky {
	margin-right: 12px !important;
}

/* The reference draws the border a shade lighter than the label, which stops
   the outline button shouting louder than the solid one beside it. Ulannii
   already has that pair — #e2650f deep, #f0871e light — so the relationship is
   kept while the colours stay Ulannii's own. */
.btn-dangky > a {
	border: 0.8px solid #f0871e !important;
	color: #e2650f !important;
	background: #fef3eb !important;
}

.btn-dangky > a:hover {
	background: #fde5d3 !important;
	border-color: #e2650f !important;
}

.btn-dangnhap > a {
	background: #1257bd !important;
	color: #fff !important;
	border: 0.8px solid #1257bd !important;
}

.btn-dangnhap > a:hover {
	background: #0f4699 !important;
	border-color: #0f4699 !important;
}


/* The reference bar stands 110px tall against this one's 94px. The height
   goes on the grid row rather than the bar around it: the row already
   centres what it holds, so the logo and the menu sit in the middle of
   the new height instead of the extra space all collecting underneath
   them, which is what happened when the bar carried it.
 *
 * This overrules Astra's own header-height setting. Change the number
 * here, not there. */
#ast-desktop-header .ast-builder-grid-row {
	min-height: 110px !important;
}

.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;
	width: 100% !important;
}

/* Astra stacks the mobile header's rows flush against one another. */
.ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile {
	gap: 12px;
	padding-bottom: 24px;
}

/* ==========================================================================
   Front page — the `u-` design system
   ========================================================================== */

.u-sec,
.u-cta {
	--u-orange: #f0871e;
	--u-orange-deep: #e2650f;
	--u-ink: #26303b;
	--u-muted: #6b7280;
	font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.u-sec {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5rem 1.5rem;
}

.u-sec > * {
	width: 100%;
	max-width: 1140px;
}

.u-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #fff;
	opacity: 0.92;
}

.u-eyebrow--center {
	text-align: center;
	color: var(--u-orange-deep);
	opacity: 1;
}

.u-sec__title {
	margin: 0.3rem 0 0.8rem;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	font-weight: 800;
	color: var(--u-ink);
}

.u-sec__lead {
	max-width: 640px;
	margin: 0 auto 1rem;
	color: var(--u-muted);
	font-size: 1.05rem;
}

/* ---- Hero ---- */

.u-hero {
	background: linear-gradient(140deg, #fbb96f 0%, #f5923b 46%, #ea6a1c 100%);
	text-align: center;
	padding-block: 6.5rem;
}

.u-hero__title {
	max-width: 900px;
	margin: 0 auto 1.2rem;
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	font-weight: 800;
	line-height: 1.12;
	color: #fff;
}

.u-hero__sub {
	max-width: 640px;
	margin: 0 auto 2.2rem;
	font-size: 1.15rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.94);
}

.u-hero__cta {
	justify-content: center;
	gap: 1rem;
}

/* ---- Buttons ---- */

.u-btn-primary .wp-block-button__link,
.u-btn-white .wp-block-button__link {
	background: #fff;
	color: var(--u-orange-deep);
	border-radius: 999px;
	padding: 0.95rem 2.4rem;
	font-weight: 700;
	box-shadow: 0 10px 24px rgba(120, 45, 5, 0.18);
}

.u-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	padding: 0.85rem 2.3rem;
	font-weight: 700;
}

.u-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
}

.u-btn-link .wp-block-button__link {
	background: transparent;
	color: var(--u-orange-deep);
	padding: 0;
	font-weight: 700;
}

/* ---- Stats ---- */

.u-stats {
	background: #fff5ec;
	padding-block: 3.5rem;
}

.u-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.u-stat__num {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--u-orange-deep);
}

.u-stat__label {
	margin: 0.3rem 0 0;
	color: var(--u-muted);
}

/* ---- Card grids ---- */

.u-cards {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

/* Group blocks add flow margins to non-first children; grids use gap, so drop
   them (otherwise items 2+ get pushed down and misalign the row). */
.u-cards > *,
.u-stats__grid > * {
	margin-block: 0;
}

.u-cards-3 {
	grid-template-columns: repeat(3, 1fr);
}

.u-cards-4 {
	grid-template-columns: repeat(4, 1fr);
}

.u-courses .u-cards {
	grid-template-columns: repeat(3, 1fr);
}

.u-card,
.u-feature,
.u-quote {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}

/* ---- Course card ---- */

.u-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.u-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(226, 101, 15, 0.15);
}

.u-card__img {
	margin: 0;
}

.u-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.u-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem;
}

.u-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--u-ink);
}

.u-card__text {
	margin: 0 0 1.2rem;
	color: var(--u-muted);
	font-size: 0.98rem;
	line-height: 1.6;
}

.u-card__body .wp-block-buttons {
	margin-top: auto;
}

/* ---- Why us — value cards with gradient icon badges ---- */

.u-why {
	background: #fafbfc;
}

.u-feature {
	padding: 2.75rem 1.75rem;
	text-align: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.u-feature:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(226, 101, 15, 0.14);
}

.u-feature::before {
	content: "\f339";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: 0 auto 1.4rem;
	border-radius: 18px;
	background: linear-gradient(135deg, #fbb36a, #e2650f);
	color: #fff;
	font-family: dashicons;
	font-size: 32px;
	box-shadow: 0 8px 20px rgba(226, 101, 15, 0.25);
}

.u-why .u-feature:nth-child(1)::before { content: "\f339"; } /* lightbulb */
.u-why .u-feature:nth-child(2)::before { content: "\f469"; } /* clock */
.u-why .u-feature:nth-child(3)::before { content: "\f313"; } /* awards */
.u-why .u-feature:nth-child(4)::before { content: "\f307"; } /* groups */

.u-feature__title {
	margin: 0 0 0.7rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--u-ink);
}

.u-feature .u-card__text {
	margin-bottom: 0;
	font-size: 0.98rem;
	line-height: 1.7;
}

/* ---- Steps ---- */

.u-step {
	padding: 1.5rem;
	text-align: center;
}

.u-step__num {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #fbb36a, #e2650f);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 56px;
}

.u-step__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--u-ink);
}

.u-step .u-card__text {
	margin-bottom: 0;
}

/* ---- Testimonials ---- */

.u-testi {
	background: #fff5ec;
}

.u-quote {
	padding: 2rem;
}

.u-quote__text {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.6;
	color: #374151;
}

.u-quote__author {
	margin: 0;
	font-weight: 700;
	color: var(--u-orange-deep);
}

/* ---- Final CTA ---- */

.u-cta {
	background: linear-gradient(140deg, #fbb96f 0%, #f5923b 46%, #ea6a1c 100%);
	text-align: center;
	padding-block: 5rem;
}

.u-cta__title {
	margin: 0 0 0.8rem;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	color: #fff;
}

.u-cta__sub {
	max-width: 560px;
	margin: 0 auto 2rem;
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.1rem;
}

/* ---- Responsive ---- */

@media (max-width: 980px) {
	.u-cards-3,
	.u-cards-4,
	.u-stats__grid,
	.u-courses .u-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.u-cards-3,
	.u-cards-4,
	.u-stats__grid,
	.u-courses .u-cards {
		grid-template-columns: 1fr;
	}

	.u-sec {
		padding: 3.5rem 1.25rem;
	}

	.u-hero {
		padding-block: 4.5rem;
	}
}

/* ==========================================================================
   Focus rings
   ========================================================================== */

/* Astra draws a dotted outline on `:focus`, which browsers fire on mouse clicks
   as well as on keyboard moves — so pressing anything in the header leaves a
   dotted box sitting around it afterwards.
 *
 * The ring is not deleted, only moved to `:focus-visible`, which fires only
 * when the browser judges a keyboard was used. Someone tabbing through the
 * header still sees exactly where they are; someone clicking sees nothing.
 * Removing it outright would leave keyboard users navigating blind, which is a
 * worse bargain than a stray dotted box.
 *
 * Scoped to the header, where the complaint was — the rest of the site keeps
 * whatever Astra does. */
.main-header-menu a:focus,
.main-header-menu button:focus,
.ast-header-account-link:focus,
.ast-mobile-header-wrap .menu-toggle:focus,
.main-header-menu-toggle:focus,
.u-search__toggle:focus,
.u-search__go:focus,
.u-search__field:focus {
	outline: none !important;
	box-shadow: none !important;
}

.main-header-menu a:focus-visible,
.main-header-menu button:focus-visible,
.ast-header-account-link:focus-visible,
.ast-mobile-header-wrap .menu-toggle:focus-visible,
.main-header-menu-toggle:focus-visible,
.u-search__toggle:focus-visible,
.u-search__go:focus-visible,
.u-search__field:focus-visible {
	outline: 2px solid #e2650f !important;
	outline-offset: 3px !important;
	border-radius: 6px;
}

/* The two pills and the round buttons keep their own shape when the ring lands
   on them, rather than picking up the 6px above. */
.main-header-menu .btn-dangky > a:focus-visible,
.main-header-menu .btn-dangnhap > a:focus-visible,
.u-search__toggle:focus-visible,
.u-search__go:focus-visible,
.ast-header-account-link:focus-visible {
	border-radius: 999px;
}