/**
 * Mộc Lan Education — art direction "Imperial Ocean".
 *
 * Tổ chức file:
 *   1. Nền tảng & token cầu nối     7. Kiểu block lõi
 *   2. Ngôn ngữ hình khối           8. Blog & bài viết
 *   3. Header                       9. Footer
 *   4. Hero                        10. Trang phụ & tiện ích
 *   5. Nhịp section                11. Hệ chuyển động
 *   6. Typography có cá tính       12. Giảm chuyển động & in ấn
 *
 * Nguyên tắc màu: xanh sâu là không gian, vàng là NGUỒN SÁNG (glow/hairline/
 * gradient chữ), bạc là highlight lạnh, kem/ngọc trai là vùng nghỉ.
 *
 * Lưu ý kỹ thuật: WordPress đặt "margin-left:auto !important" cho con của layout
 * constrained; các khối tự canh của theme dùng .ml-shell nên không phụ thuộc
 * lớp layout tự sinh (bài học từ docs/KIEM-THU.md mục 8).
 */

/* =====================================================================
   1. NỀN TẢNG & TOKEN CẦU NỐI
   ===================================================================== */

:root {
	/* Màu — luôn có giá trị dự phòng để chạy với theme khác. */
	--ml-ink: var(--wp--preset--color--ink, #06111f);
	--ml-ink-soft: var(--wp--preset--color--ink-soft, #0a1828);
	--ml-o900: var(--wp--preset--color--ocean-900, #03182f);
	--ml-o800: var(--wp--preset--color--ocean-800, #052a4a);
	--ml-o700: var(--wp--preset--color--ocean-700, #073b63);
	--ml-o600: var(--wp--preset--color--ocean-600, #075985);
	--ml-o500: var(--wp--preset--color--ocean-500, #087ea4);
	--ml-o400: var(--wp--preset--color--ocean-400, #16a6c7);
	--ml-gold: var(--wp--preset--color--gold, #d4af37);
	--ml-gold-light: var(--wp--preset--color--gold-light, #e5c45c);
	--ml-gold-pale: var(--wp--preset--color--gold-pale, #f4dc8c);
	--ml-gold-deep: var(--wp--preset--color--gold-deep, #8a6414);
	--ml-gold-mid: var(--wp--preset--color--gold-mid, #a67c1c);
	/* Vàng đủ đậm để làm màu liên kết trên nền ngọc trai sáng nhất (AA ≥ 4.5). */
	--ml-gold-ink: #6f4f0e;
	--ml-silver: var(--wp--preset--color--silver, #bfcad6);
	--ml-silver-light: var(--wp--preset--color--silver-light, #d8e0e8);
	--ml-silver-pale: var(--wp--preset--color--silver-pale, #eef3f7);
	--ml-pearl: var(--wp--preset--color--pearl, #fff8e7);
	--ml-pearl-deep: var(--wp--preset--color--pearl-deep, #f8f1df);
	--ml-seal: var(--wp--preset--color--seal, #8c1c2b);
	--ml-line: var(--wp--preset--color--line, #dcd3c1);

	/* Vai trò màu theo ngữ cảnh nền — mỗi section ghi đè 5 biến này. */
	--ml-fg: var(--ml-pearl);
	--ml-fg-soft: rgba(222, 230, 238, .92);
	--ml-fg-faint: rgba(203, 214, 225, .88);
	--ml-rule: rgba(216, 224, 232, .18);
	--ml-panel: rgba(255, 255, 255, .045);

	--ml-radius-xs: var(--wp--custom--radius--xs, 6px);
	--ml-radius-sm: var(--wp--custom--radius--sm, 10px);
	--ml-radius-md: var(--wp--custom--radius--md, 16px);
	--ml-radius-lg: var(--wp--custom--radius--lg, 24px);
	--ml-radius-xl: var(--wp--custom--radius--xl, 34px);
	--ml-radius-pill: var(--wp--custom--radius--pill, 999px);

	--ml-cut-sm: var(--wp--custom--cut--sm, 14px);
	--ml-cut-md: var(--wp--custom--cut--md, 26px);
	--ml-cut-lg: var(--wp--custom--cut--lg, 44px);

	--ml-shadow-sm: var(--wp--custom--shadow--sm, 0 2px 6px rgba(3, 24, 47, .30));
	--ml-shadow-md: var(--wp--custom--shadow--md, 0 10px 28px rgba(3, 24, 47, .34));
	--ml-shadow-lg: var(--wp--custom--shadow--lg, 0 28px 64px rgba(3, 24, 47, .42));
	--ml-shadow-xl: var(--wp--custom--shadow--xl, 0 48px 110px rgba(2, 15, 30, .55));
	--ml-shadow-light: var(--wp--custom--shadow--light, 0 12px 32px rgba(6, 42, 74, .10));
	--ml-shadow-focus: var(--wp--custom--shadow--focus, 0 0 0 3px rgba(212, 175, 55, .55));

	--ml-glow-gold: var(--wp--custom--glow--gold, 0 0 0 1px rgba(212, 175, 55, .34), 0 0 32px rgba(212, 175, 55, .22));
	--ml-glow-gold-strong: var(--wp--custom--glow--gold-strong, 0 0 0 1px rgba(212, 175, 55, .55), 0 0 60px rgba(212, 175, 55, .32));
	--ml-glow-silver: var(--wp--custom--glow--silver, 0 0 0 1px rgba(216, 224, 232, .30), 0 0 24px rgba(191, 202, 214, .16));

	--ml-hair-gold: var(--wp--custom--metal--gold-hairline, 1px solid rgba(212, 175, 55, .42));
	--ml-line-gold: var(--wp--custom--metal--gold-line, 1px solid rgba(212, 175, 55, .70));
	--ml-hair-silver: var(--wp--custom--metal--silver-hairline, 1px solid rgba(216, 224, 232, .24));
	--ml-line-silver: var(--wp--custom--metal--silver-line, 1px solid rgba(216, 224, 232, .46));

	--ml-t-fast: var(--wp--custom--transition--fast, 140ms);
	--ml-t-base: var(--wp--custom--transition--base, 260ms);
	--ml-t-slow: var(--wp--custom--transition--slow, 520ms);
	--ml-t-cinema: var(--wp--custom--transition--cinema, 900ms);
	--ml-ease: var(--wp--custom--transition--ease, cubic-bezier(.16, 1, .3, 1));
	--ml-ease-out: var(--wp--custom--transition--ease-out, cubic-bezier(.22, .61, .36, 1));

	--ml-z-sticky: var(--wp--custom--z--sticky, 40);
	--ml-z-header: var(--wp--custom--z--header, 60);
	--ml-z-cta: var(--wp--custom--z--cta, 70);
	--ml-z-modal: var(--wp--custom--z--modal, 90);

	--ml-wide: var(--wp--custom--container--wide, 1280px);
	--ml-content: var(--wp--custom--container--content, 760px);
	--ml-narrow: var(--wp--custom--container--narrow, 660px);
	--ml-gutter: clamp(1.125rem, 4vw, 2.5rem);

	--ml-sec-sm: var(--wp--custom--section--sm, clamp(2.5rem, 6vw, 4rem));
	--ml-sec-md: var(--wp--custom--section--md, clamp(4rem, 8vw, 6.5rem));
	--ml-sec-lg: var(--wp--custom--section--lg, clamp(5.5rem, 11vw, 9.5rem));

	/* Cao 104px để chứa logo 84px cùng khoảng thở trên dưới. */
	--ml-header-h: 104px;

	--ml-magnolia: url("../img/magnolia.svg");
	--ml-orbit: url("../img/orbit.svg");
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ml-header-h) + 1rem);
	background: var(--ml-o900);
}

/* KHÔNG đặt overflow-x trên html/body: "clip" ở gốc chặn cuộn, "hidden" ở body
   phá position:sticky. Phần tử nào có họa tiết tràn thì tự cắt tại chính nó. */
body {
	background: var(--ml-o900);
	color: var(--ml-fg-soft);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { max-width: 100%; height: auto; }

::selection { background: rgba(212, 175, 55, .30); color: var(--ml-pearl); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ml-gold);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip-link:focus {
	background: var(--ml-pearl);
	color: var(--ml-o900);
	padding: .75rem 1.25rem;
	z-index: 10000;
}

/* Khung canh giữa dùng chung, không phụ thuộc lớp layout WordPress tự sinh. */
.ml-shell {
	width: 100%;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-shell--narrow { max-width: calc(var(--ml-content) + var(--ml-gutter) * 2); }

/* =====================================================================
   2. NGÔN NGỮ HÌNH KHỐI
   ===================================================================== */

/* -- Royal frame: viền vàng mảnh + góc xử lý riêng + highlight bạc -------- */
.ml-frame {
	position: relative;
	border: var(--ml-hair-gold);
	background: linear-gradient(158deg, rgba(7, 59, 99, .55), rgba(3, 24, 47, .86));
	box-shadow: var(--ml-shadow-lg);
}

.ml-frame::before,
.ml-frame::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	border: 0 solid var(--ml-gold);
	pointer-events: none;
}

.ml-frame::before {
	inset-block-start: -1px;
	inset-inline-start: -1px;
	border-block-start-width: 2px;
	border-inline-start-width: 2px;
}

.ml-frame::after {
	inset-block-end: -1px;
	inset-inline-end: -1px;
	border-block-end-width: 2px;
	border-inline-end-width: 2px;
}

/* -- Ocean panel: xanh sâu, radial glow, inner border -------------------- */
.ml-panel-ocean {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(8, 126, 164, .22), transparent 62%),
		linear-gradient(158deg, var(--ml-o800), var(--ml-o900) 72%);
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--ml-shadow-md);
}

/* -- Pearl panel: vùng nghỉ ---------------------------------------------- */
.ml-panel-pearl {
	position: relative;
	background: linear-gradient(172deg, var(--ml-pearl), var(--ml-pearl-deep) 62%, var(--ml-silver-pale));
	border: 1px solid rgba(138, 100, 20, .18);
	border-radius: var(--ml-radius-lg);
	box-shadow: var(--ml-shadow-light);
	color: var(--ml-o900);
}

/* -- Seal: con dấu vuông tiết chế ---------------------------------------- */
.ml-seal {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1.5px solid currentColor;
	border-radius: var(--ml-radius-xs);
	font-family: var(--wp--preset--font-family--hanzi);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ml-gold);
	opacity: .85;
}

.ml-seal--red { color: var(--ml-seal); }

/* -- Đường cong bạc: quỹ đạo & sóng -------------------------------------- */
.ml-orbit {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--ml-silver-light);
	-webkit-mask-image: var(--ml-orbit);
	mask-image: var(--ml-orbit);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: .16;
}

/* -- Magnolia line art (dùng mask nên đổi màu được) ----------------------- */
.ml-magnolia {
	position: absolute;
	pointer-events: none;
	background: currentColor;
	-webkit-mask-image: var(--ml-magnolia);
	mask-image: var(--ml-magnolia);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	color: var(--ml-gold);
	opacity: .22;
}

/* -- Chữ Hán làm texture nền (luôn aria-hidden trong markup) -------------- */
.ml-hanzi {
	position: absolute;
	pointer-events: none;
	font-family: var(--wp--preset--font-family--hanzi);
	font-weight: 600;
	line-height: .8;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .22);
	user-select: none;
}

.ml-hanzi--fill {
	-webkit-text-stroke: 0;
	color: rgba(212, 175, 55, .07);
}

/* -- Đường kẻ hairline có nhấn vàng -------------------------------------- */
.ml-rule {
	block-size: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .55) 18%, rgba(216, 224, 232, .26) 52%, transparent);
}

/* =====================================================================
   3. HEADER
   ===================================================================== */

.ml-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--ml-z-header);
	inline-size: 100%;
	background: transparent;
	border-block-end: 1px solid transparent;
	transition:
		background var(--ml-t-base) var(--ml-ease),
		border-color var(--ml-t-base) var(--ml-ease),
		backdrop-filter var(--ml-t-base) var(--ml-ease);
}

.ml-header::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .55), transparent);
	opacity: 0;
	transition: opacity var(--ml-t-base) var(--ml-ease);
}

.ml-header.is-scrolled {
	background: rgba(3, 24, 47, .88);
	-webkit-backdrop-filter: blur(var(--wp--custom--blur--glass, 18px)) saturate(1.3);
	backdrop-filter: blur(var(--wp--custom--blur--glass, 18px)) saturate(1.3);
	border-block-end-color: rgba(216, 224, 232, .10);
}

.ml-header.is-scrolled::after { opacity: 1; }

.ml-header__inner { inline-size: 100%; }

.ml-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(.75rem, 2vw, 2rem);
	flex-wrap: nowrap;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
	block-size: var(--ml-header-h);
	transition: block-size var(--ml-t-base) var(--ml-ease);
}

.ml-header.is-scrolled .ml-header__row { block-size: 84px; }

/* Khối thương hiệu không được co — phần co lại là menu. */
.ml-header__brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 0 0 auto;
	text-decoration: none;
}

.ml-header__brand .wp-block-site-logo img,
.ml-header__brand img {
	display: block;
	/* Tăng tiếp 35% (48–62px → 65–84px). */
	inline-size: clamp(65px, 6.5vw, 84px);
	block-size: auto;
	/* Glow sáng hơn bản trước (0 2px 10px / 28% → hai lớp, 55% và 30%) để logo
	   tách khỏi nền ocean rất tối mà không cần đĩa nền. */
	filter:
		drop-shadow(0 3px 16px rgba(212, 175, 55, .55))
		drop-shadow(0 0 3px rgba(255, 244, 214, .30));
	transition: inline-size var(--ml-t-base) var(--ml-ease);
}

.ml-header.is-scrolled .ml-header__brand img { inline-size: 62px; }

.ml-header__names .wp-block-site-title,
.ml-header__names h1,
.ml-header__names p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(.95rem, 1.35vw, 1.15rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .005em;
	white-space: nowrap;
}

.ml-header__names a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	color: var(--ml-pearl);
	text-decoration: none;
}
.ml-header__names a:hover { color: var(--ml-gold-pale); }

.ml-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.4vw, 1.25rem);
	min-inline-size: 0;
}

/* Menu ngang */
.ml-header .wp-block-navigation {
	font-size: .95rem;
	font-weight: 500;
}

.ml-header .wp-block-navigation .wp-block-navigation__container {
	gap: clamp(.6rem, 1.5vw, 1.6rem);
	flex-wrap: nowrap;
}

.ml-header .wp-block-navigation a {
	position: relative;
	color: var(--ml-silver-light);
	text-decoration: none;
	white-space: nowrap;
	padding-block: .35rem;
	transition: color var(--ml-t-fast) var(--ml-ease);
}

.ml-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 1px;
	background: linear-gradient(90deg, var(--ml-gold), var(--ml-gold-pale));
	transition: inline-size var(--ml-t-base) var(--ml-ease);
}

.ml-header .wp-block-navigation a:hover { color: var(--ml-pearl); }
.ml-header .wp-block-navigation a:hover::after { inline-size: 100%; }

.ml-header__nav > * { flex: 0 0 auto; margin: 0; }
.ml-header__phone .ml-actions { flex-wrap: nowrap; gap: .5rem; }
.ml-header__nav .ml-btn { white-space: nowrap; padding-inline: 1.15rem; }
.ml-header__nav .ml-block { margin-block: 0; }

/* Menu được phép co lại; khối thương hiệu và nút thì không. */
.ml-header .wp-block-navigation { min-inline-size: 0; }
.ml-header__cta .ml-btn { box-shadow: 0 4px 18px rgba(212, 175, 55, .32); }

/* Thu gọn header theo từng ngưỡng để menu không bao giờ xuống dòng.
   Thứ tự hy sinh: số hotline → tên trung tâm → cỡ chữ menu → nút CTA
   (dưới 782px đã có thanh CTA cố định ở đáy màn hình). */
/* Nhóm hotline + Zalo chỉ hiện khi hàng header thật sự đủ chỗ.
   Đo thực tế: logo 306 + menu 666 + nhóm liên hệ 306 + nút CTA 159 + khoảng
   cách 72 = 1509px. Hàng header mặc định chỉ rộng 1280px (contentSize) nên
   dưới 1600px phải ẩn nhóm liên hệ, nếu không nút CTA bị đẩy ra ngoài màn hình. */
@media (max-width: 1679px) {
	.ml-header__phone { display: none; }
}

/* Từ 1600px: nới riêng hàng header rộng hơn phần nội dung để chứa đủ ba nút.
   Phải nới đúng .ml-header__row — đây mới là phần tử bị WordPress khóa ở
   contentSize 1280px. Nới .ml-header__inner không có tác dụng vì hàng bên
   trong vẫn giữ nguyên 1280px và nút CTA tràn ra ngoài hàng.
   Dùng 100% (bề rộng thật của header, không tính thanh cuộn) thay cho 100vw:
   100vw có tính thanh cuộn nên ở đúng 1600px hàng sẽ rộng hơn vùng nhìn thấy. */
@media (min-width: 1680px) {
	.ml-header__row { max-width: min(1600px, 100%); }
}

/* Tên trung tâm chỉ hiện từ 1300px (trước là 1200px): logo lớn hơn nên ở 1200px
   hàng header vừa đúng hết chỗ và nút CTA bị đẩy ra ngoài. */
@media (max-width: 1299px) {
	.ml-header__names { display: none; }
}

/* Giữ menu ở dạng thu gọn đến 999px. Logo nay rộng 79px kể cả đĩa nền, và mọi
   ngưỡng phải chừa thêm bề rộng thanh cuộn (~15px): media query tính theo 100vw
   có tính thanh cuộn, còn chỗ thật của hàng header thì không. */
@media (max-width: 999px) {
	.ml-header__nav { gap: .55rem; }
	.ml-header__nav .ml-btn { padding-inline: .8rem; font-size: .82rem; }
}

@media (max-width: 781px) {
	.ml-header__cta { display: none; }
	.ml-header__names { display: block; }
}

/* Máy rất hẹp (320–429px): chỉ còn logo và nút mở menu. */
@media (max-width: 429px) {
	.ml-header__names { display: none; }
}

/* Khử margin âm của .alignfull.
   WordPress gắn "margin-inline: calc(root-padding * -1)" cho mọi .alignfull nằm
   trong khối .has-global-padding. Theme này lại đặt padding của
   .wp-block-post-content về 0 (mỗi section tự lo padding riêng), nên margin âm
   không còn gì để bù: mỗi section thò ra 36px mỗi bên và sinh cuộn ngang. */
.ml-main .has-global-padding > .alignfull,
.ml-main > .alignfull {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* Ngưỡng menu ngang.
   Block Điều hướng đặt overlayMenu = "always" nên WordPress luôn dựng nút
   hamburger và tự lo phần đóng/mở bằng JavaScript của chính nó. Từ 1000px trở
   lên ta trả lại menu ngang bằng CSS.
   Lý do không dùng "mobile": WordPress đổi sang menu ngang ngay từ 600px, trong
   khi tới 781px theme vẫn hiện tên trung tâm, nên 6 mục menu bị chen và tràn
   ngang trên iPad nhỏ hoặc điện thoại xoay ngang.
   Ngưỡng nâng từ 900px lên 1000px sau khi logo phóng to: ở 900px, logo 79px
   cộng menu ngang 747px cộng khoảng cách và padding vượt chỗ thật của hàng
   (885px sau khi trừ thanh cuộn) đúng 5px, đủ để đẩy nút CTA ra ngoài. */
@media (min-width: 1000px) {
	.ml-header .wp-block-navigation__responsive-container-open.always-shown { display: none; }

	.ml-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		background-color: transparent;
		display: flex;
		padding: 0;
		position: static;
		inline-size: auto;
		z-index: auto;
	}

	.ml-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.ml-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
		max-inline-size: none;
		padding: 0;
		inline-size: auto;
	}

	.ml-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}

/* Overlay menu mobile: xanh sâu, chữ lớn */
.ml-header .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(168deg, var(--ml-o900) 0%, var(--ml-ink) 100%) !important;
	color: var(--ml-pearl) !important;
	padding: clamp(1.25rem, 5vw, 2.5rem);
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "语";
	position: absolute;
	inset-block-end: -.12em;
	inset-inline-end: .04em;
	font-family: var(--wp--preset--font-family--hanzi);
	font-size: 46vw;
	line-height: .78;
	color: rgba(212, 175, 55, .06);
	pointer-events: none;
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	position: relative;
	padding-block-start: 2rem;
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	inline-size: 100%;
	align-items: stretch;
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid rgba(216, 224, 232, .12);
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open a {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 56px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 7vw, 2.25rem);
	font-weight: 500;
	color: var(--ml-pearl);
}

.ml-header .wp-block-navigation__responsive-container.is-menu-open a::after { display: none; }
.ml-header .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--ml-gold-pale); }

.ml-header .wp-block-navigation__responsive-container-open,
.ml-header .wp-block-navigation__responsive-container-close {
	color: var(--ml-pearl);
	min-inline-size: 44px;
	min-block-size: 44px;
}

.ml-header .wp-block-navigation__responsive-container-close { color: var(--ml-pearl); }

/* =====================================================================
   4. HERO
   ===================================================================== */

.ml-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block-start: calc(var(--ml-header-h) * -1);
	padding-block: calc(var(--ml-header-h) + clamp(2.5rem, 7vw, 5rem)) clamp(6rem, 12vw, 9rem);
	min-block-size: min(92vh, 980px);
	display: flex;
	align-items: center;
	color: var(--ml-pearl);
	background:
		radial-gradient(78% 58% at 78% 8%, rgba(8, 126, 164, .30), transparent 64%),
		radial-gradient(56% 46% at 12% 92%, rgba(212, 175, 55, .16), transparent 68%),
		radial-gradient(120% 100% at 50% 0%, rgba(7, 59, 99, .70), transparent 70%),
		linear-gradient(172deg, var(--ml-o900) 0%, var(--ml-ink) 78%);
}

/* Trang trí hero dựng hoàn toàn bằng pseudo-element: không cần thêm DOM nên
   website đang chạy cũng nhận được bố cục mới mà không phải nhập lại nội dung. */

/* Lớp aurora + gold glow, chuyển động rất chậm. */
.ml-hero::before {
	content: "";
	position: absolute;
	inset: -18% -12% 22% -12%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 24% 44%, rgba(22, 166, 199, .30), transparent 70%),
		radial-gradient(34% 42% at 70% 28%, rgba(8, 89, 133, .38), transparent 72%),
		radial-gradient(26% 34% at 88% 12%, rgba(212, 175, 55, .30), transparent 68%);
	filter: blur(30px);
	animation: ml-aurora 26s var(--ml-ease-out) infinite alternate;
}

/* Quỹ đạo bạc. */
.ml-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	inline-size: min(58rem, 96vw);
	aspect-ratio: 1;
	inset-block-start: -14%;
	inset-inline-end: -16%;
	pointer-events: none;
	background: var(--ml-silver-light);
	-webkit-mask-image: var(--ml-orbit);
	mask-image: var(--ml-orbit);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: .12;
	animation: ml-spin 130s linear infinite;
}

@keyframes ml-aurora {
	0%   { transform: translate3d(-3%, 0, 0) scale(1); }
	50%  { transform: translate3d(4%, 2%, 0) scale(1.07); }
	100% { transform: translate3d(-2%, -2%, 0) scale(1.02); }
}

@keyframes ml-spin { to { transform: rotate(360deg); } }

@keyframes ml-breathe {
	from { opacity: .55; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1.05); }
}

.ml-hero__grid {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.ml-hero__grid {
		/* Bất đối xứng có chủ đích: cột chữ rộng hơn cột ảnh. */
		grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
		align-items: center;
	}
}

.ml-hero__grid::before {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: min(24rem, 42vw);
	aspect-ratio: 1;
	inset-block-end: -34%;
	inset-inline-start: -21%;
	pointer-events: none;
	background: var(--ml-gold);
	-webkit-mask-image: var(--ml-magnolia);
	mask-image: var(--ml-magnolia);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: .10;
	animation: ml-breathe 14s ease-in-out infinite alternate;
}

/* Chữ Hán 语 (ngôn ngữ) làm texture — chỉ trang trí nên aria-hidden bằng
   cách dùng pseudo-element, trình đọc màn hình không đọc. */
.ml-hero__grid::after {
	content: "语";
	position: absolute;
	z-index: -1;
	inset-block-start: -6%;
	inset-inline-end: 4%;
	font-family: var(--wp--preset--font-family--hanzi);
	font-size: clamp(14rem, 30vw, 30rem);
	font-weight: 600;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .09);
	pointer-events: none;
	user-select: none;
}

.ml-hero__col--text { position: relative; }

.ml-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	font-size: var(--wp--preset--font-size--eyebrow, .78rem);
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ml-gold-pale);
}

.ml-hero__eyebrow::before {
	content: "";
	inline-size: clamp(1.75rem, 4vw, 3.25rem);
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--ml-gold));
}

.ml-hero__title {
	margin: 0 0 clamp(1.1rem, 2.4vw, 1.75rem) !important;
	/* WordPress đặt margin-left:auto !important cho con của layout constrained;
	   phải ghi đè bằng !important để tất cả dòng cùng canh mép trái. */
	margin-inline-start: 0 !important;
	max-inline-size: 16ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--hero, clamp(2.75rem, 7vw, 5.75rem));
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.028em;
	color: var(--ml-pearl);
	text-wrap: balance;
}

.ml-hero__title .ml-mark {
	position: relative;
	display: inline-block;
	font-style: italic;
	background: linear-gradient(102deg, var(--ml-gold-deep) 0%, var(--ml-gold) 30%, var(--ml-gold-pale) 56%, var(--ml-gold-mid) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	padding-inline-end: .06em;
}

.ml-hero__title .ml-outline {
	color: transparent;
	-webkit-text-stroke: 1px rgba(216, 224, 232, .62);
}

.ml-hero__lead {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem) !important;
	margin-inline-start: 0 !important;
	max-inline-size: 46ch;
	font-size: var(--wp--preset--font-size--lead, clamp(1.125rem, 1.6vw, 1.5rem));
	line-height: 1.58;
	color: rgba(224, 232, 240, .93);
}

/* Bám thêm .wp-block-group để thắng luật bố cục của WordPress:
   .wp-block-group-is-layout-flex đặt display:flex + flex-wrap:wrap, cùng độ ưu
   tiên nhưng đứng sau trong cascade nên nếu chỉ viết .ml-hero__cta thì grid
   không bao giờ có hiệu lực. */
.ml-hero__cta.wp-block-group {
	/* Ba nút hero luôn bằng nhau và luôn thẳng hàng — không bao giờ 1 nút một
	   hàng còn 2 nút hàng dưới. Dùng grid thay cho flex-wrap: mỗi nút là một ô
	   1fr nên bề rộng bằng nhau tự động, không cần đặt bề rộng cố định. */
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: .85rem;
	max-inline-size: 22rem;
	margin-inline-start: 0 !important;
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/* Ba nút nằm sâu trong hai lớp div bọc của block (.ml-block--cta và
   .ml-block--actions > .ml-actions). Phải cho cả ba lớp bọc display: contents
   thì ba nút mới trở thành ô lưới trực tiếp; bỏ sót một lớp là cả cụm chỉ chiếm
   một ô và ba nút không thể bằng nhau. */
.ml-hero__cta .ml-block--cta,
.ml-hero__cta .ml-block--actions,
.ml-hero__cta .ml-actions { display: contents; }

.ml-hero__cta .ml-btn {
	inline-size: 100%;
	min-inline-size: 0;
	white-space: nowrap;
}

/* Một hàng ngang chỉ đủ chỗ từ 1280px. Đo thực tế: nhãn dài nhất ("Đăng ký học
   thử miễn phí") rộng 189px, nên mỗi ô cần 189 + 2×8 = 205px, ba ô cộng hai
   khoảng cách = 642px; cột chữ của hero rộng 675–693px từ 1280px trở lên (đã
   trừ thanh cuộn) nên mỗi ô nhận 219–222px, dư 14px phòng khi trình duyệt còn
   đang dùng phông dự phòng. Ở 1200px cột chỉ còn 637px nên không thể xếp ngang
   — dưới ngưỡng này ba nút thành một cột dọc, vẫn bằng nhau và vẫn thẳng hàng. */
@media (min-width: 1280px) {
	.ml-hero__cta.wp-block-group {
		grid-template-columns: repeat(3, 1fr);
		max-inline-size: none;
	}
	/* Chỉ là mức tối thiểu để chữ không bị ép; nút rộng 219px còn chữ 189px nên
	   khoảng trắng thực mỗi bên vẫn là 15px. */
	.ml-hero__cta .ml-btn { padding-inline: .5rem; }
}

.ml-hero__points {
	list-style: none;
	margin: 0 !important;
	margin-inline-start: 0 !important;
	padding: 0;
	display: grid;
	gap: .55rem;
	max-inline-size: 44ch;
	font-size: .95rem;
	color: rgba(210, 220, 230, .92);
}

.ml-hero__points li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.ml-hero__points li::before {
	content: "";
	position: absolute;
	inset-block-start: .62em;
	inset-inline-start: 0;
	inline-size: .95rem;
	block-size: 1px;
	background: var(--ml-gold);
}

/* -- Cột media: royal frame + góc cắt ------------------------------------ */
.ml-hero__media-wrap {
	position: relative;
	margin-inline: 0 !important;
}

.ml-hero__media {
	position: relative;
	aspect-ratio: var(--wp--custom--ratio--hero, 4 / 5);
	overflow: hidden;
	border: var(--ml-line-gold);
	border-radius: 2px;
	clip-path: polygon(var(--ml-cut-lg) 0, 100% 0, 100% calc(100% - var(--ml-cut-lg)), calc(100% - var(--ml-cut-lg)) 100%, 0 100%, 0 var(--ml-cut-lg));
	box-shadow: var(--ml-shadow-xl);
	background:
		radial-gradient(90% 70% at 20% 12%, rgba(8, 126, 164, .34), transparent 66%),
		linear-gradient(162deg, var(--ml-o800), var(--ml-ink));
}

.ml-hero__media .ml-hero__img,
.ml-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 32%;
	display: block;
}

.ml-hero__media.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(178deg, rgba(3, 24, 47, .18) 0%, rgba(3, 24, 47, .58) 78%, rgba(6, 17, 31, .78) 100%);
	pointer-events: none;
}

/* Bố cục thay ảnh khi chưa có ảnh thật: chữ Hán lớn + thư pháp + quỹ đạo. */
.ml-hero__plate {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ml-hero__plate-texture {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .30;
	filter: grayscale(1) contrast(1.25) brightness(1.1);
	mix-blend-mode: screen;
}

/* Vân sáng chéo cho tấm plate không bị phẳng. */
.ml-hero__plate::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(64% 48% at 24% 14%, rgba(22, 166, 199, .30), transparent 66%),
		linear-gradient(190deg, transparent 40%, rgba(3, 24, 47, .72) 100%);
	pointer-events: none;
}

.ml-hero__plate-hanzi {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--hanzi);
	font-size: clamp(7rem, 17vw, 13rem);
	line-height: .82;
	font-weight: 600;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .46);
	text-shadow: 0 0 70px rgba(212, 175, 55, .28);
}

.ml-hero__plate-caption {
	position: absolute;
	z-index: 1;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.5rem;
	margin: 0;
	max-inline-size: 60%;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(214, 224, 234, .90);
}

/* Badge nhiều tầng sâu, chồng lên khung ảnh. */
.ml-hero__badge {
	position: absolute;
	z-index: 3;
	margin: 0;
	display: grid;
	gap: .12rem;
	padding: .75rem 1.05rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ml-pearl);
	background: rgba(5, 42, 74, .78);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-sm);
	box-shadow: var(--ml-shadow-lg);
	max-inline-size: 13rem;
}

.ml-hero__badge span {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ml-gold-pale);
}

.ml-hero__badge--a {
	inset-block-end: 8%;
	inset-inline-start: -6%;
}

.ml-hero__badge--b {
	inset-block-start: 6%;
	inset-inline-end: -7%;
}

@media (max-width: 899px) {
	.ml-hero { min-block-size: auto; }
	.ml-hero__media { aspect-ratio: 3 / 2; }

	/* Badge không đè lên ảnh nữa mà xuống thành hai ô dưới khung ảnh:
	   trên màn hẹp, chồng lớp làm chữ khó đọc. */
	.ml-hero__media-wrap {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .6rem;
	}

	.ml-hero__media-wrap > .ml-block--hero-media { grid-column: 1 / -1; margin-block: 0; }

	.ml-hero__badge {
		position: static;
		max-inline-size: none;
		font-size: .82rem;
		padding: .6rem .85rem;
	}
}

@media (max-width: 599px) {
	.ml-hero__plate-caption { font-size: .66rem; letter-spacing: .16em; inset-block-end: .9rem; inset-inline-start: 1rem; }
}

/* =====================================================================
   5. NHỊP SECTION
   ===================================================================== */

.ml-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--ml-sec-md);
	color: var(--ml-fg-soft);
}

.ml-section > * { position: relative; z-index: 1; }

.ml-section__inner,
.ml-section > .wp-block-group,
.ml-section > .ml-block,
.ml-section > .wp-block-heading,
.ml-section > p,
.ml-section > .wp-block-list,
.ml-section > .wp-block-columns {
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-section--tight { padding-block: var(--ml-sec-sm); }

/* Dải sáng có khối đè lên từ section tối phía trên: chừa chỗ ở mép trên. */
.ml-section--overlap-top { padding-block-start: clamp(7rem, 10vw, 10rem); }
.ml-section--tall { padding-block: var(--ml-sec-lg); }
.ml-section--flush-top { padding-block-start: 0; }

/* -- Tông nền ------------------------------------------------------------ */

/* Ocean: nền mặc định, vẫn có chiều sâu nhờ radial. */
.ml-section--ocean {
	background:
		radial-gradient(90% 60% at 82% 0%, rgba(8, 89, 133, .26), transparent 66%),
		linear-gradient(180deg, var(--ml-o900), var(--ml-ink));
}

.ml-section--deep {
	background:
		radial-gradient(70% 50% at 14% 4%, rgba(8, 126, 164, .22), transparent 62%),
		radial-gradient(60% 60% at 88% 96%, rgba(212, 175, 55, .12), transparent 64%),
		linear-gradient(168deg, var(--ml-o800), var(--ml-o900) 68%);
}

.ml-section--night {
	background:
		radial-gradient(58% 46% at 50% 6%, rgba(212, 175, 55, .16), transparent 62%),
		linear-gradient(180deg, var(--ml-ink), #030b16);
}

/* Pearl & silver: vùng nghỉ — đảo toàn bộ vai trò màu. */
.ml-section--pearl,
.ml-section--silver {
	--ml-fg: var(--ml-o900);
	--ml-fg-soft: #26364a;
	--ml-fg-faint: #4a5563;
	--ml-rule: rgba(6, 42, 74, .14);
	--ml-panel: #ffffff;
	color: var(--ml-fg-soft);
}

.ml-section--pearl {
	background:
		radial-gradient(72% 52% at 88% 4%, rgba(212, 175, 55, .13), transparent 62%),
		linear-gradient(172deg, var(--ml-pearl) 0%, var(--ml-pearl-deep) 62%, #f2ece0 100%);
}

.ml-section--silver {
	background:
		radial-gradient(66% 48% at 10% 0%, rgba(22, 166, 199, .10), transparent 60%),
		linear-gradient(174deg, var(--ml-silver-pale), #e4ebf2);
}

.ml-section--pearl :is(h1, h2, h3, h4, h5, h6),
.ml-section--silver :is(h1, h2, h3, h4, h5, h6) { color: var(--ml-o900); }

.ml-section--pearl a:not(.ml-btn),
.ml-section--silver a:not(.ml-btn) { color: var(--ml-gold-deep); }

.ml-section--pearl a:not(.ml-btn):hover,
.ml-section--silver a:not(.ml-btn):hover { color: var(--ml-seal); }

/* Đường phân cách vàng ở đầu/cuối một số dải. */
.ml-section--edge-top::before,
.ml-section--edge-bottom::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .55) 30%, rgba(212, 175, 55, .55) 70%, transparent);
	z-index: 2;
}

.ml-section--edge-top::before { inset-block-start: 0; }
.ml-section--edge-bottom::after { inset-block-end: 0; }

/* -- Đầu mục section ----------------------------------------------------- */

.ml-section__head {
	position: relative;
	margin-block-end: clamp(2rem, 4vw, 3.25rem);
	max-inline-size: var(--ml-wide);
}

.ml-section__head--split {
	display: grid;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: end;
}

@media (min-width: 900px) {
	.ml-section__head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.ml-eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .85rem;
	font-size: var(--wp--preset--font-size--eyebrow, .78rem);
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

.ml-section--pearl .ml-eyebrow,
.ml-section--silver .ml-eyebrow { color: var(--ml-gold-deep); }

.ml-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentColor;
	flex: 0 0 auto;
	opacity: .8;
}

.ml-section__head h2 {
	margin: 0;
	max-inline-size: 20ch;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2rem, 4vw, 3.5rem));
	line-height: 1.06;
	letter-spacing: -.024em;
	text-wrap: balance;
}

.ml-section__head p {
	margin: 1rem 0 0;
	max-inline-size: 56ch;
	font-size: 1.0625rem;
	color: var(--ml-fg-faint);
}

.ml-section--pearl .ml-section__head p,
.ml-section--silver .ml-section__head p { color: #4e5a68; }

/* Đầu section căn giữa.
   Ba section 03 "Lịch khai giảng gần nhất", 05 "Ba điểm trên trục Bắc – Nam"
   và 06 "Đọc trước khi bắt đầu" dùng class .ml-section__head--center do trình
   nhập dữ liệu sinh ra (tham số thứ năm của $head trong data/pages.php).
   Hai section dưới đây căn giữa theo class sẵn có của chính section:
   section 01 "Bạn đang cần gì?" (.ml-section--overlap-top)
   và section 04 "Ứng dụng học tiếng Trung vào công việc?" (.ml-section--edge-top).
   Cả hai đứng trên một lưới ô cân đối nên căn trái làm chữ dồn hẳn về mép.
   Các section còn lại vẫn căn trái. Dựa vào class sẵn có nên không phải sửa
   nội dung trang trong database. */
.ml-section--overlap-top .ml-section__head,
.ml-section--edge-top .ml-section__head,
.ml-section__head--center { text-align: center; }

.ml-section--overlap-top .ml-section__head .ml-eyebrow,
.ml-section--edge-top .ml-section__head .ml-eyebrow,
.ml-section__head--center .ml-eyebrow { justify-content: center; }

/* Gạch trang trí vốn chỉ có một bên trái; khi căn giữa phải có cả hai bên,
   nếu không nhãn vẫn lệch đúng bằng bề rộng gạch. */
.ml-section--overlap-top .ml-section__head .ml-eyebrow::after,
.ml-section--edge-top .ml-section__head .ml-eyebrow::after,
.ml-section__head--center .ml-eyebrow::after {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentColor;
	flex: 0 0 auto;
	opacity: .8;
}

/* h2 và p bị giới hạn 20ch / 56ch nên phải tự căn giữa trong khối. */
.ml-section--overlap-top .ml-section__head h2,
.ml-section--overlap-top .ml-section__head p,
.ml-section--edge-top .ml-section__head h2,
.ml-section--edge-top .ml-section__head p,
.ml-section__head--center h2,
.ml-section__head--center p { margin-inline: auto; }

/* Nhãn dọc bên mép section. */
.ml-vlabel {
	position: absolute;
	inset-block-start: var(--ml-sec-md);
	inset-inline-start: .5rem;
	writing-mode: vertical-rl;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, .45);
	pointer-events: none;
}

@media (max-width: 1439px) { .ml-vlabel { display: none; } }

/* Liên kết "xem tất cả" */
.ml-more {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
}

.ml-more a {
	display: inline-flex;
	align-items: center;
	min-block-size: 28px;
	gap: .55rem;
	padding-block-end: .3rem;
	border-block-end: 1px solid rgba(212, 175, 55, .4);
	text-decoration: none;
	transition: gap var(--ml-t-base) var(--ml-ease), border-color var(--ml-t-base) var(--ml-ease);
}

.ml-more a:hover { gap: .95rem; border-block-end-color: var(--ml-gold); }

/* =====================================================================
   6. TYPOGRAPHY CÓ CÁ TÍNH
   ===================================================================== */

.ml-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.026em;
}

.ml-gold-text {
	background: linear-gradient(104deg, var(--ml-gold-deep), var(--ml-gold) 34%, var(--ml-gold-pale) 60%, var(--ml-gold-mid));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ml-outline-text {
	color: transparent;
	-webkit-text-stroke: 1px rgba(216, 224, 232, .55);
}

.ml-section--pearl .ml-outline-text,
.ml-section--silver .ml-outline-text { -webkit-text-stroke-color: rgba(6, 42, 74, .38); }

.ml-italic { font-style: italic; }

/* Nhấn cụm từ trong tiêu đề, dùng chung cho H1/H2 nội dung. */
.ml-mark {
	font-style: italic;
	background: linear-gradient(102deg, var(--ml-gold-deep), var(--ml-gold) 34%, var(--ml-gold-pale) 62%, var(--ml-gold-mid));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* =====================================================================
   7. KIỂU BLOCK LÕI
   ===================================================================== */

.wp-block-group.is-style-ml-card,
.is-style-ml-card {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--ml-panel);
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
}

.wp-block-group.is-style-ml-tinted,
.is-style-ml-tinted {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: linear-gradient(150deg, rgba(212, 175, 55, .10), rgba(8, 126, 164, .08));
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-md);
}

.wp-block-heading.is-style-ml-underline,
.is-style-ml-underline {
	position: relative;
	padding-block-end: .55rem;
}

.is-style-ml-underline::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 2px;
	background: linear-gradient(90deg, var(--ml-gold), transparent);
}

.wp-block-list.is-style-ml-check,
.is-style-ml-check {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: .6rem;
}

.is-style-ml-check li {
	position: relative;
	padding-inline-start: 1.85rem;
}

.is-style-ml-check li::before {
	content: "";
	position: absolute;
	inset-block-start: .48em;
	inset-inline-start: 0;
	inline-size: .72rem;
	block-size: .38rem;
	border-inline-start: 1.5px solid var(--ml-gold);
	border-block-end: 1.5px solid var(--ml-gold);
	transform: rotate(-45deg);
}

/* Chi tiết (FAQ) */
.wp-block-details {
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
	background: var(--ml-panel);
	padding: 1rem 1.35rem;
	transition: border-color var(--ml-t-base) var(--ml-ease), background var(--ml-t-base) var(--ml-ease);
}

.wp-block-details[open] {
	border-color: rgba(212, 175, 55, .40);
	background: linear-gradient(150deg, rgba(212, 175, 55, .08), transparent);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ml-fg);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 32px;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "";
	inline-size: .6rem;
	block-size: .6rem;
	flex: 0 0 auto;
	border-inline-end: 1.5px solid var(--ml-gold);
	border-block-end: 1.5px solid var(--ml-gold);
	transform: rotate(45deg);
	transition: transform var(--ml-t-base) var(--ml-ease);
}

.wp-block-details[open] summary::after { transform: rotate(-135deg); }

.ml-section--pearl .wp-block-details,
.ml-section--silver .wp-block-details {
	background: #fff;
	border-color: rgba(6, 42, 74, .12);
}

/* Cột */
.wp-block-columns { gap: clamp(1.5rem, 3vw, 2.75rem); }

/* Trích dẫn */
.wp-block-quote {
	border-inline-start: 2px solid var(--ml-gold);
	padding-inline-start: 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--ml-fg);
}

/* Bảng */
.wp-block-table table { border-collapse: collapse; inline-size: 100%; }
.wp-block-table :is(th, td) { border: 1px solid var(--ml-rule); padding: .7rem .9rem; }
.wp-block-table th { background: var(--ml-panel); color: var(--ml-fg); }

/* =====================================================================
   8. BLOG & BÀI VIẾT
   ===================================================================== */

.ml-bloghead {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}

.ml-bloghead h1 {
	font-size: var(--wp--preset--font-size--display, clamp(2.375rem, 6vw, 4.25rem));
	margin-block-end: 1rem;
}

.ml-bloghead__cats {
	margin-block: 1.5rem 0;
}

.ml-bloghead__cats ul,
.wp-block-categories-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ml-bloghead__cats li a,
.wp-block-categories-list li a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	padding: .3rem 1rem;
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-pill);
	font-size: .875rem;
	text-decoration: none;
	color: var(--ml-fg-soft);
	transition: border-color var(--ml-t-base) var(--ml-ease), color var(--ml-t-base) var(--ml-ease);
}

.ml-bloghead__cats li a:hover,
.wp-block-categories-list li a:hover {
	border-color: rgba(212, 175, 55, .55);
	color: var(--ml-gold-pale);
}

/* Danh sách bài dạng lưới (trang blog, bài liên quan) */
.ml-postlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 700px) { .ml-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ml-postlist > li { margin: 0; }

.ml-postlist .wp-block-post-title { font-size: 1.25rem; line-height: 1.28; margin-block: .5rem .4rem; }
.ml-postlist .wp-block-post-title a { text-decoration: none; color: var(--ml-fg); }
.ml-postlist .wp-block-post-title a:hover { color: var(--ml-gold-pale); }
.ml-postlist .wp-block-post-featured-image img { border-radius: var(--ml-radius-sm); }
.ml-postlist .wp-block-post-date { color: var(--ml-fg-faint); font-size: .85rem; }
.ml-postlist .taxonomy-category { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-gold); }
.ml-postlist .taxonomy-category a { text-decoration: none; }

/* Phân trang */
.wp-block-query-pagination {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--ml-rule);
	gap: 1rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	text-decoration: none;
	padding: .35rem .7rem;
	border-radius: var(--ml-radius-xs);
}

.wp-block-query-pagination .current { background: rgba(212, 175, 55, .18); color: var(--ml-gold-pale); }

/* -- Bài viết đơn --------------------------------------------------------- */

.ml-article-head {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

.ml-article-head .wp-block-post-title {
	margin-block: .75rem 1rem;
	max-inline-size: 22ch;
	line-height: 1.05;
}

.ml-article-head .taxonomy-category {
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

.ml-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	color: var(--ml-fg-faint);
	font-size: .9rem;
}

/* Thân bài đọc trên nền ngọc trai để dễ đọc dài. */
.ml-article-body {
	--ml-fg: var(--ml-o900);
	--ml-fg-soft: #26364a;
	--ml-fg-faint: #4a5563;
	--ml-rule: rgba(6, 42, 74, .14);
	--ml-panel: #fff;
	position: relative;
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	background: linear-gradient(172deg, var(--ml-pearl), var(--ml-pearl-deep) 70%, #f2ece0);
	color: var(--ml-fg-soft);
	border-block: 1px solid rgba(138, 100, 20, .22);
}

.ml-article-body :is(h2, h3, h4) { color: var(--ml-o900); }
.ml-article-body a { color: var(--ml-gold-deep); }
.ml-article-body a:hover { color: var(--ml-seal); }

.ml-article-foot { padding-block: clamp(2rem, 4vw, 3rem); }

/* -- Dải CTA cuối: hai vùng, nội dung + form ------------------------------ */

.ml-section--cta-final { position: relative; overflow: hidden; }

.ml-section--cta-final::before {
	content: "";
	position: absolute;
	z-index: 0;
	inline-size: min(40rem, 80vw);
	aspect-ratio: 1;
	inset-block-start: -30%;
	inset-inline-start: -10%;
	pointer-events: none;
	background: var(--ml-gold);
	-webkit-mask-image: var(--ml-magnolia);
	mask-image: var(--ml-magnolia);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: .10;
}

.ml-section--cta-final::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-end: -40%;
	inset-inline-end: -14%;
	inline-size: min(38rem, 76vw);
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(212, 175, 55, .26), transparent 66%);
	filter: blur(10px);
}

.ml-cta-band {
	position: relative;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 920px) {
	.ml-cta-band { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
}

.ml-cta-band__title {
	margin-block: 0 1rem;
	max-inline-size: 15ch;
	font-size: var(--wp--preset--font-size--display, clamp(2.375rem, 5vw, 4.25rem));
	line-height: 1.02;
}

.ml-cta-band__text > p { max-inline-size: 48ch; color: rgba(222, 230, 238, .92); }
.ml-cta-band__text .ml-actions { margin-block-start: 1.75rem; }

/* Form nằm trong tấm pearl glass. */
.ml-cta-band__form .ml-form {
	--ml-fg: var(--ml-o900);
	--ml-fg-soft: #26364a;
	--ml-fg-faint: #4a5563;
	--ml-rule: rgba(6, 42, 74, .16);
	background: linear-gradient(168deg, rgba(255, 248, 231, .96), rgba(248, 241, 223, .93));
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-color: rgba(138, 100, 20, .34);
	color: var(--ml-fg-soft);
	box-shadow: var(--ml-shadow-xl);
}

.ml-cta-band__form .ml-form .ml-field :is(input, select, textarea) { background: rgba(255, 255, 255, .88); }
.ml-cta-band__form .ml-form .ml-field__req { color: var(--ml-seal); }
.ml-cta-band__form .ml-form__alt a { color: var(--ml-gold-ink); }

/* Sứ mệnh / tầm nhìn dưới khối outcome. */
.ml-eco__mission {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
	border-block-start: 1px solid rgba(212, 175, 55, .30);
	max-inline-size: 72ch;
	font-size: 1.0625rem;
	color: rgba(222, 230, 238, .92);
}

.ml-eco__mission strong { color: var(--ml-gold-pale); font-weight: 700; }

/* Section cảm nhận tự thu lại khi block trả về rỗng. */
.ml-section--quotes:not(:has(.ml-block--testimonials)) { display: none; }

/* =====================================================================
   9. FOOTER
   ===================================================================== */

.ml-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6rem) 0;
	background: linear-gradient(180deg, var(--ml-ink) 0%, #020a13 100%);
	color: rgba(222, 230, 238, .92);
}

.ml-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .6) 22%, rgba(212, 175, 55, .6) 78%, transparent);
}

.ml-footer__magnolia {
	inline-size: min(28rem, 60vw);
	aspect-ratio: 1;
	inset-block-start: -18%;
	inset-inline-end: -6%;
	color: var(--ml-o500);
	opacity: .12;
}

.ml-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-footer__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 860px) {
	.ml-footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

.ml-footer__brand,
.ml-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	margin-block: 0 .5rem;
}

.ml-footer__brand a,
.ml-footer .wp-block-site-title a { color: var(--ml-pearl); text-decoration: none; }

.ml-footer__logo img {
	inline-size: 90px;
	block-size: auto;
	margin-block-end: .85rem;
	filter:
		drop-shadow(0 3px 16px rgba(212, 175, 55, .50))
		drop-shadow(0 0 3px rgba(255, 244, 214, .26));
}

.ml-footer__tagline { color: rgba(203, 214, 225, .88); margin-block-end: 1.25rem; }

.ml-footer__heading {
	margin-block: 0 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ml-gold-pale);
}

.ml-footer__links,
.ml-footer .wp-block-page-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .55rem;
}

.ml-footer a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	color: rgba(226, 233, 240, .94);
	text-decoration: none;
}
.ml-footer a:hover { color: var(--ml-gold-pale); }

/* Cột cơ sở ở footer là danh sách gọn, không phải lưới thẻ. */
.ml-footer__branches .ml-grid { grid-template-columns: 1fr; gap: 1.1rem; }

.ml-footer__branches .ml-card--branch {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.ml-footer__branches .ml-card__body { padding: 0; gap: .2rem; }
.ml-footer__branches .ml-card__title { font-size: 1rem; padding-inline-end: 0; }
.ml-footer__branches .ml-card__address { font-size: .85rem; color: rgba(191, 202, 214, .62); }
.ml-footer__branches .ml-card__actions { padding: .35rem 0 0; gap: 1rem; justify-content: flex-start; }

.ml-footer__bottom {
	position: relative;
	z-index: 1;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding: 1.25rem var(--ml-gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid rgba(216, 224, 232, .10);
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	align-items: center;
	justify-content: space-between;
	font-size: .85rem;
	color: rgba(203, 214, 225, .88);
}

.ml-footer__copy { margin: 0; }

/* Footer nằm trên thanh CTA mobile. */
body.ml-has-sticky-cta .ml-footer__bottom { padding-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 782px) {
	body.ml-has-sticky-cta .ml-footer__bottom { padding-block-end: 1.5rem; }
}

/* =====================================================================
   10. TRANG PHỤ & TIỆN ÍCH
   ===================================================================== */

.ml-main { display: block; }
.ml-main--front { padding-inline: 0; }

.ml-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--ml-header-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(2.5rem, 6vw, 4rem);
	margin-block-start: calc(var(--ml-header-h) * -1);
	/* Nền trong suốt để nối liền với thân trang phía dưới (body đã là ocean-900);
	   chỉ chồng thêm ánh sáng, không đổ màu nền riêng → không có đường nối. */
	background:
		radial-gradient(72% 62% at 84% 0%, rgba(8, 126, 164, .26), transparent 64%),
		radial-gradient(52% 52% at 4% 96%, rgba(212, 175, 55, .13), transparent 66%);
	color: var(--ml-pearl);
}

/* Thân trang "toàn chiều rộng": các khối không phải section vẫn được canh giữa.
   WordPress bọc nội dung trong .wp-block-post-content nên phải nhắm cả hai cấp
   (trình soạn thảo và bản xem trước có cấu trúc khác nhau một chút). */
.ml-page-body,
.ml-page-body > .wp-block-post-content { position: relative; }

.ml-page-body { padding-block-end: var(--ml-sec-md); }

.ml-page-body > *:not(.ml-section):not(.wp-block-post-content),
.ml-page-body > .wp-block-post-content > *:not(.ml-section) {
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-page-body h1,
.ml-page-body > .wp-block-post-content > .wp-block-heading:first-child {
	margin-block: 0 1rem;
	max-inline-size: 20ch;
	font-size: var(--wp--preset--font-size--display, clamp(2.375rem, 5vw, 4.25rem));
	line-height: 1.04;
}

.ml-page-body h1 + p {
	max-inline-size: 54ch;
	font-size: var(--wp--preset--font-size--lead, 1.25rem);
	color: rgba(222, 230, 238, .92);
}

.ml-page-body .ml-block--actions { margin-block: 1.75rem clamp(2rem, 5vw, 3.5rem); }

/* Trang chủ: nội dung là các dải tràn viền, không cần khung canh giữa. */
.ml-main--front .ml-page-body,
.ml-main--front > .wp-block-post-content { padding: 0; }

.ml-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ml-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-page-hero h1,
.ml-page-title {
	margin-block: .5rem 1rem;
	max-inline-size: 20ch;
	line-height: 1.05;
}

.ml-page-hero__hanzi {
	inset-block-end: -20%;
	inset-inline-end: 2%;
	font-size: clamp(11rem, 26vw, 24rem);
}

.ml-empty,
.ml-pending {
	color: var(--ml-fg-faint);
	font-size: .95rem;
}

/* Breadcrumb */
.ml-breadcrumb {
	font-size: .8rem;
	letter-spacing: .06em;
	color: rgba(208, 219, 230, .92);
}

.ml-breadcrumb li,
.ml-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}

.ml-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0;
	padding: 0;
}

.ml-breadcrumb a { color: inherit; text-decoration: none; }
.ml-breadcrumb a:hover { color: var(--ml-gold-pale); }
.ml-breadcrumb li + li::before { content: "/"; margin-inline-end: .45rem; opacity: .45; }

/* Tìm kiếm */
.wp-block-search__inside-wrapper {
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-pill);
	background: var(--ml-panel);
	padding: .25rem .25rem .25rem 1rem;
}

.wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--ml-fg);
	min-block-size: 40px;
}

.wp-block-search__input::placeholder { color: var(--ml-fg-faint); }

.wp-block-search__button {
	border-radius: var(--ml-radius-pill);
	background: var(--ml-gold);
	color: var(--ml-ink);
	border: 0;
	font-weight: 600;
	padding-inline: 1.15rem;
	min-block-size: 40px;
	cursor: pointer;
}

/* -- Hero trang phụ ------------------------------------------------------ */

/* Chữ Hán texture cho mọi hero trang phụ, không cần thêm DOM. */
.ml-page-hero::after {
	content: "学";
	position: absolute;
	z-index: 0;
	inset-block-end: -.30em;
	inset-inline-end: 1.5%;
	font-family: var(--wp--preset--font-family--hanzi);
	font-size: clamp(11rem, 26vw, 24rem);
	font-weight: 600;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .10);
	pointer-events: none;
	user-select: none;
}

.ml-main--blog .ml-page-hero::after { content: "文"; }
.ml-main--course .ml-page-hero::after { content: "课"; }
.ml-main--single .ml-page-hero::after { content: "书"; }
.ml-404 .ml-page-hero::after { content: "迷"; }

.ml-page-hero__lead {
	max-inline-size: 54ch;
	font-size: var(--wp--preset--font-size--lead, 1.25rem);
	color: rgba(222, 230, 238, .92);
}

.ml-page-hero .wp-block-search { margin-block-start: 1.5rem; max-inline-size: 26rem; }

/* Trang khóa học: hero hai cột lệch. */
.ml-course-hero__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.ml-course-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.ml-course-hero__level {
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

.ml-course-hero__level a { color: inherit; text-decoration: none; }

.ml-course-hero__text .wp-block-post-excerpt {
	max-inline-size: 46ch;
	font-size: 1.125rem;
	color: rgba(216, 224, 232, .8);
}

.ml-course-hero__media .wp-block-post-featured-image {
	overflow: hidden;
	border: var(--ml-line-gold);
	border-radius: 2px;
	clip-path: polygon(var(--ml-cut-md) 0, 100% 0, 100% calc(100% - var(--ml-cut-md)), calc(100% - var(--ml-cut-md)) 100%, 0 100%, 0 var(--ml-cut-md));
	box-shadow: var(--ml-shadow-xl);
	margin: 0;
}

.ml-course-hero__media img { display: block; inline-size: 100%; }

/* Ảnh bìa bài viết trong hero. */
.ml-article-cover {
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
	overflow: hidden;
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-md);
	box-shadow: var(--ml-shadow-lg);
}

.ml-related__title { margin-block: clamp(2rem, 4vw, 3rem) 1.5rem; }

.ml-postlist--3 { grid-template-columns: 1fr; }

@media (min-width: 760px) { .ml-postlist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Trang 404 */
.ml-404__code {
	margin: 0 0 -.35em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--colossal, clamp(4rem, 12vw, 12rem));
	font-weight: 500;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .40);
}

.ml-404__links {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	display: grid;
	gap: .6rem;
	max-inline-size: 26rem;
}

.ml-404__links a {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding-block-end: .35rem;
	border-block-end: 1px solid var(--ml-rule);
	text-decoration: none;
}

/* =====================================================================
   11. HỆ CHUYỂN ĐỘNG
   ===================================================================== */

/* Trạng thái ban đầu chỉ được gắn bằng JavaScript (data-ml-reveal), nên khi
   JavaScript lỗi hoặc bị chặn thì nội dung vẫn hiện đầy đủ. */

[data-ml-reveal] {
	opacity: 0;
	transition:
		opacity var(--ml-t-slow) var(--ml-ease) var(--ml-reveal-delay, 0ms),
		transform var(--ml-t-slow) var(--ml-ease) var(--ml-reveal-delay, 0ms),
		clip-path var(--ml-t-cinema) var(--ml-ease) var(--ml-reveal-delay, 0ms),
		filter var(--ml-t-slow) var(--ml-ease) var(--ml-reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-ml-reveal="rise"] { transform: translate3d(0, 26px, 0); }
[data-ml-reveal="slide"] { transform: translate3d(-28px, 0, 0); }
[data-ml-reveal="slide-end"] { transform: translate3d(28px, 0, 0); }
[data-ml-reveal="scale"] { transform: scale(.965); }
[data-ml-reveal="mask"] { clip-path: inset(0 0 100% 0); transform: scale(1.03); }
[data-ml-reveal="mask-side"] { clip-path: inset(0 100% 0 0); }
[data-ml-reveal="blur"] { filter: blur(10px); transform: translate3d(0, 14px, 0); }

[data-ml-reveal].is-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
	filter: none;
	will-change: auto;
}

/* Reveal theo dòng cho tiêu đề lớn (JS bọc từng dòng vào span). */
.ml-word { display: inline-block; }
.ml-line-mask { display: block; overflow: hidden; padding-block-end: .04em; }

.ml-line-mask > span {
	display: block;
	transform: translate3d(0, 105%, 0);
	transition: transform var(--ml-t-cinema) var(--ml-ease) var(--ml-line-delay, 0ms);
}

.is-revealed .ml-line-mask > span,
.ml-line-mask.is-revealed > span { transform: none; }

/* Đường kẻ tự vẽ khi vào viewport. */
.ml-draw {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--ml-t-cinema) var(--ml-ease) var(--ml-reveal-delay, 0ms);
}

.ml-draw.is-revealed { transform: scaleX(1); }

/* Parallax rất nhỏ, chỉ chạy khi phần tử trong viewport. */
[data-ml-parallax] { will-change: transform; }

/* Mũi tên "đi" khi hover */
.ml-arrow {
	display: inline-block;
	transition: transform var(--ml-t-base) var(--ml-ease);
}

:is(a, button):hover .ml-arrow { transform: translateX(.3rem); }

/* Ánh vàng lướt qua khi hover (dùng cho card, panel). */
.ml-sheen { position: relative; overflow: hidden; }

.ml-sheen::after {
	content: "";
	position: absolute;
	inset-block: -60%;
	inline-size: 45%;
	inset-inline-start: -70%;
	background: linear-gradient(96deg, transparent, rgba(244, 220, 140, .18), transparent);
	transform: skewX(-16deg);
	pointer-events: none;
	opacity: 0;
	transition: none;
}

.ml-sheen:hover::after,
.ml-sheen:focus-within::after {
	opacity: 1;
	animation: ml-sheen-run 900ms var(--ml-ease-out) 1;
}

@keyframes ml-sheen-run {
	from { inset-inline-start: -70%; }
	to   { inset-inline-start: 130%; }
}

/* =====================================================================
   12. GIẢM CHUYỂN ĐỘNG & IN ẤN
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	/* Nội dung phải hiện đầy đủ, không phụ thuộc JavaScript. */
	[data-ml-reveal],
	.ml-draw,
	.ml-line-mask > span {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		filter: none !important;
	}

	.ml-hero__aurora,
	.ml-hero__glow,
	.ml-hero__orbit { animation: none !important; }
}

@media print {
	.ml-header, .ml-sticky-cta, .ml-modal { display: none !important; }
	body { background: #fff; color: #111; }
}