/**
 * Mộc Lan Core — thành phần do plugin cung cấp, art direction "Imperial Ocean".
 *
 * Tổ chức file:
 *   1. Token cầu nối      6. Bento nhu cầu     11. Bảng so sánh
 *   2. Tiện ích           7. Lộ trình sticky   12. Biểu mẫu
 *   3. Nút & nhãn         8. Bảng lịch         13. Modal
 *   4. Khung ảnh          9. Outcome & bản đồ  14. Thanh CTA, cookie, bản đồ
 *   5. Thẻ khóa học      10. Cảm nhận & blog   15. Breadcrumb, mục lục
 *
 * Dùng token của theme khi có, luôn kèm giá trị dự phòng để chạy được với theme
 * khác. Không hard-code lặp lại mã màu.
 */

/* =====================================================================
   1. TOKEN CẦU NỐI
   ===================================================================== */

:root {
	--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-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-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-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-ease: var(--wp--custom--transition--ease, cubic-bezier(.16, 1, .3, 1));

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

	--ml-gap: clamp(1rem, 2.2vw, 1.75rem);
	--ml-tap: 44px;
	--ml-hanzi-font: var(--wp--preset--font-family--hanzi, "Noto Serif SC", "Songti SC", serif);
	--ml-display-font: var(--wp--preset--font-family--display, Georgia, serif);
}

/* Vùng nghỉ sáng: đảo vai trò màu cho mọi thành phần bên trong. */
.ml-section--pearl,
.ml-section--silver,
.ml-on-light {
	--ml-fg: var(--ml-o900);
	--ml-fg-soft: #26364a;
	--ml-fg-faint: #4a5563;
	--ml-rule: rgba(6, 42, 74, .14);
	--ml-panel: #ffffff;
}

/* =====================================================================
   2. TIỆN ÍCH
   ===================================================================== */

.ml-block { margin-block: clamp(1.25rem, 3vw, 2rem); }
.ml-block:first-child { margin-block-start: 0; }

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

.ml-empty {
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--ml-rule);
	border-radius: var(--ml-radius-md);
	background: var(--ml-panel);
}

.ml-textlink {
	display: inline-flex;
	align-items: center;
	/* Vùng bấm tối thiểu 24px theo WCAG 2.2. */
	min-block-size: 24px;
	gap: .4rem;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	color: var(--ml-gold-light);
	transition: color var(--ml-t-fast) var(--ml-ease);
}

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

.ml-textlink:hover { color: var(--ml-gold-pale); }
.ml-section--pearl .ml-textlink:hover,
.ml-section--silver .ml-textlink:hover { color: var(--ml-seal); }

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =====================================================================
   3. NÚT & NHÃN
   ===================================================================== */

.ml-btn {
	position: relative;
	/* Bắt buộc: nút CTA là <button> (mặc định border-box) còn nút hotline/Zalo là
	   <a> (mặc định content-box). Không khai báo thì min-block-size 44px cộng
	   thêm padding ở thẻ <a>, làm hai nút đó cao 70px trong khi nút CTA chỉ 44px. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-block-size: var(--ml-tap);
	padding: .8rem 1.65rem;
	border: 0;
	border-radius: var(--ml-radius-pill);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition:
		transform var(--ml-t-fast) var(--ml-ease),
		box-shadow var(--ml-t-base) var(--ml-ease),
		background var(--ml-t-base) var(--ml-ease),
		color var(--ml-t-base) var(--ml-ease),
		border-color var(--ml-t-base) var(--ml-ease);
}

.ml-btn:active { transform: translateY(1px); }

.ml-btn__icon { display: inline-flex; }
.ml-btn__icon svg { inline-size: 1.15em; block-size: 1.15em; }

/* Nút chính: vàng là nguồn sáng. */
.ml-btn--primary {
	color: var(--ml-ink);
	background: linear-gradient(112deg, var(--ml-gold-mid) 0%, var(--ml-gold) 34%, var(--ml-gold-pale) 62%, var(--ml-gold) 100%);
	background-size: 180% 100%;
	background-position: 0% 50%;
	box-shadow: 0 6px 22px rgba(212, 175, 55, .28), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.ml-btn--primary:hover {
	background-position: 100% 50%;
	box-shadow: 0 10px 34px rgba(212, 175, 55, .42), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Nút phụ: viền bạc trên nền tối, không cạnh tranh với nút chính. */
.ml-btn--ghost {
	color: var(--ml-fg);
	background: rgba(255, 255, 255, .04);
	border: var(--ml-line-silver);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ml-btn--ghost:hover {
	border-color: rgba(212, 175, 55, .7);
	color: var(--ml-gold-pale);
}

.ml-section--pearl .ml-btn--ghost,
.ml-section--silver .ml-btn--ghost,
.ml-on-light .ml-btn--ghost {
	color: var(--ml-o900);
	background: rgba(3, 24, 47, .03);
	border-color: rgba(6, 42, 74, .22);
}

.ml-btn--zalo {
	color: var(--ml-pearl);
	background: linear-gradient(140deg, var(--ml-o600), var(--ml-o500));
	box-shadow: 0 6px 20px rgba(8, 126, 164, .30);
}

.ml-btn--zalo:hover { background: linear-gradient(140deg, var(--ml-o500), var(--ml-o400)); }

.ml-btn--sm { padding: .6rem 1.15rem; font-size: .875rem; min-block-size: 40px; }
.ml-btn--block { inline-size: 100%; }

.ml-btn[disabled], .ml-btn.is-loading { opacity: .72; cursor: progress; }

.ml-btn__spinner { display: none; }

.ml-btn.is-loading .ml-btn__spinner {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ml-spin 700ms linear infinite;
}

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

.ml-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
}

/* -- Nhãn ---------------------------------------------------------------- */

.ml-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .28rem .75rem;
	border-radius: var(--ml-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}

.ml-badge--neutral { color: var(--ml-fg-soft); border: var(--ml-hair-silver); }

/* Badge trình độ: highlight lạnh của bạc. */
.ml-badge--silver {
	color: var(--ml-silver-pale);
	background: linear-gradient(140deg, rgba(216, 224, 232, .16), rgba(191, 202, 214, .06));
	border: var(--ml-line-silver);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.ml-section--pearl .ml-badge--silver,
.ml-section--silver .ml-badge--silver,
.ml-on-light .ml-badge--silver {
	color: var(--ml-o700);
	background: linear-gradient(140deg, #fff, #e7eef4);
	border-color: rgba(6, 42, 74, .18);
}

.ml-badge--gold {
	color: var(--ml-ink);
	background: linear-gradient(112deg, var(--ml-gold-mid), var(--ml-gold-pale));
	box-shadow: 0 2px 12px rgba(212, 175, 55, .32);
}

.ml-badge--accent {
	color: var(--ml-o400);
	border: 1px solid rgba(22, 166, 199, .5);
	background: rgba(22, 166, 199, .10);
}

.ml-section--pearl .ml-badge--accent,
.ml-section--silver .ml-badge--accent { color: var(--ml-o600); }

.ml-badge--primary {
	color: var(--ml-pearl);
	background: var(--ml-seal);
}

/* Nhãn trạng thái lịch */
.ml-tag {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ml-tag::before {
	content: "";
	inline-size: .45rem;
	block-size: .45rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.ml-tag--open { color: var(--ml-o400); }
.ml-tag--soon { color: var(--ml-gold); }
.ml-tag--closed { color: var(--ml-fg-faint); }

/* Trên vùng nghỉ sáng phải đổi sang sắc đậm mới đạt tương phản AA. */
.ml-section--pearl .ml-tag--open,
.ml-section--silver .ml-tag--open,
.ml-on-light .ml-tag--open { color: var(--ml-o600); }

.ml-section--pearl .ml-tag--soon,
.ml-section--silver .ml-tag--soon,
.ml-on-light .ml-tag--soon { color: var(--ml-gold-deep); }

/* =====================================================================
   4. KHUNG ẢNH
   ===================================================================== */

.ml-media {
	position: relative;
	overflow: hidden;
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--wp--custom--ratio--card, 16 / 9);
	background: linear-gradient(158deg, var(--ml-o800), var(--ml-o900));
	border-radius: var(--ml-radius-sm);
	isolation: isolate;
}

.ml-media--hero { aspect-ratio: var(--wp--custom--ratio--hero, 4 / 5); }
.ml-media--portrait { aspect-ratio: var(--wp--custom--ratio--portrait, 4 / 5); }
.ml-media--square { aspect-ratio: 1; border-radius: 50%; }
.ml-media--wide { aspect-ratio: var(--wp--custom--ratio--wide, 21 / 9); }

/* Góc cắt — ngôn ngữ hình khối riêng, không phải card bo tròn đều. */
.ml-media--clip {
	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));
}

.ml-media__img,
.ml-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--ml-t-slow) var(--ml-ease), filter var(--ml-t-slow) var(--ml-ease);
}

/* Phủ mực để chữ trên ảnh luôn đọc được và ảnh hòa vào hệ màu. */
.ml-media.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(178deg, rgba(3, 24, 47, .06) 0%, rgba(3, 24, 47, .42) 72%, rgba(6, 17, 31, .66) 100%);
	pointer-events: none;
	transition: opacity var(--ml-t-base) var(--ml-ease);
}

/* Khung vàng mảnh viền ngoài ảnh. */
.ml-media--framed { border: var(--ml-hair-gold); }

/* Placeholder cao cấp: mỗi biến thể một sắc + một chữ Hán đúng nghĩa.
   Không ghi chữ "placeholder", không dùng ô xám. */
.ml-media.is-placeholder {
	display: grid;
	place-items: center;
	border: var(--ml-hair-gold);
}

.ml-media.is-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(74% 60% at 26% 12%, rgba(255, 255, 255, .10), transparent 62%),
		var(--ml-ph-bg, linear-gradient(152deg, var(--ml-o700), var(--ml-o900)));
}

.ml-media.is-placeholder::after {
	content: "";
	position: absolute;
	inset: .55rem;
	border: 1px solid rgba(212, 175, 55, .26);
	border-radius: 2px;
	pointer-events: none;
}

.ml-media--v1 { --ml-ph-bg: linear-gradient(152deg, #073b63, #03182f); }
.ml-media--v2 { --ml-ph-bg: linear-gradient(152deg, #075985, #052a4a); }
.ml-media--v3 { --ml-ph-bg: linear-gradient(152deg, #0a1828, #073b63); }
.ml-media--v4 { --ml-ph-bg: linear-gradient(152deg, #052a4a, #06111f); }
.ml-media--v5 { --ml-ph-bg: linear-gradient(152deg, #087ea4, #052a4a); }

.ml-media__motif {
	position: relative;
	z-index: 1;
	font-family: var(--ml-hanzi-font);
	font-size: clamp(2.75rem, 8vw, 4.5rem);
	font-weight: 600;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .62);
	text-shadow: 0 0 42px rgba(212, 175, 55, .26);
}

.ml-media--square .ml-media__motif { font-size: 1.75rem; }

/* =====================================================================
   5. THẺ KHÓA HỌC & SHOWCASE
   ===================================================================== */

.ml-showcase {
	display: grid;
	gap: var(--ml-gap);
}

/* Editorial: một khóa lớn bên trái, hai khóa phụ xếp dọc bên phải. */
@media (min-width: 900px) {
	.ml-showcase--editorial {
		grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
		grid-template-rows: auto auto;
	}

	.ml-showcase--editorial > .ml-card--feature {
		grid-row: 1 / 3;
	}
}

.ml-grid {
	display: grid;
	gap: var(--ml-gap);
	grid-template-columns: 1fr;
}

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

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

.ml-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(7, 59, 99, .40), rgba(3, 24, 47, .72));
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
	box-shadow: var(--ml-shadow-md);
	transition:
		transform var(--ml-t-base) var(--ml-ease),
		border-color var(--ml-t-base) var(--ml-ease),
		box-shadow var(--ml-t-base) var(--ml-ease);
}

.ml-section--pearl .ml-card,
.ml-section--silver .ml-card,
.ml-on-light .ml-card {
	background: #fff;
	border-color: rgba(6, 42, 74, .12);
	box-shadow: var(--ml-shadow-light);
}

.ml-card:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, .55);
	box-shadow: var(--ml-shadow-lg);
}

.ml-card:hover .ml-media img { transform: scale(1.04); }

.ml-card__media-link { display: block; text-decoration: none; }

.ml-card__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	flex: 1 1 auto;
}

.ml-card__eyebrow {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

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

.ml-card__title {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.012em;
	color: var(--ml-fg);
	/* chừa chỗ cho số thứ tự ở góc trên bên phải */
	padding-inline-end: 3.25rem;
}

.ml-card--feature .ml-card__title { padding-inline-end: 5rem; }

.ml-card__title a { color: inherit; text-decoration: none; }
.ml-card__title a:hover { color: var(--ml-gold-pale); }

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

.ml-card__sub {
	margin: 0;
	font-size: .95rem;
	color: var(--ml-fg-faint);
}

.ml-card__index {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: 1rem;
	z-index: 2;
	font-family: var(--ml-display-font);
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .55);
	pointer-events: none;
}

.ml-card--feature .ml-card__index { font-size: 4.5rem; }
.ml-card--compact .ml-card__index { font-size: 2rem; inset-block-start: .95rem; }

.ml-card__badges {
	position: absolute;
	inset-block-start: .85rem;
	inset-inline-start: .85rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.ml-card__meta {
	margin: .35rem 0 0;
	display: grid;
	gap: .35rem;
	font-size: .875rem;
	border-block-start: 1px solid var(--ml-rule);
	padding-block-start: .8rem;
}

.ml-card__meta > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.ml-card__meta dt { color: var(--ml-fg-faint); font-weight: 500; margin: 0; }
.ml-card__meta dd { margin: 0; color: var(--ml-fg); font-weight: 600; text-align: end; }
.ml-card__price dd { color: var(--ml-gold-light); }

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

.ml-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 0 clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.6rem);
}

.ml-card__address { font-style: normal; margin: 0; font-size: .95rem; color: var(--ml-fg-soft); }
.ml-card__hours { margin: 0; font-size: .875rem; color: var(--ml-fg-faint); }
.ml-card__note { padding-inline: clamp(1.1rem, 2vw, 1.6rem); padding-block-end: 1rem; }

/* Khóa nổi bật: khung lớn, ảnh cao, chữ to hơn. */
.ml-card--feature .ml-media { aspect-ratio: 4 / 3; }
.ml-card--feature .ml-card__title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.ml-card--feature .ml-card__sub { font-size: 1.0625rem; }

@media (min-width: 900px) {
	.ml-card--feature .ml-media { aspect-ratio: 16 / 11; }
}

/* Khóa phụ: bố cục ngang, ảnh nhỏ bên trái. */
@media (min-width: 900px) {
	.ml-card--compact {
		flex-direction: row;
		align-items: stretch;
	}

	.ml-card--compact .ml-card__media-link {
		position: relative;
		flex: 0 0 36%;
		align-self: stretch;
	}

	/* Ảnh lấp đầy cột trái: dùng position tuyệt đối để không rơi vào vòng lặp
	   "chiều cao phụ thuộc ảnh, ảnh phụ thuộc chiều cao". */
	.ml-card--compact .ml-media {
		position: absolute;
		inset: 0;
		block-size: 100%;
		aspect-ratio: auto;
		border-radius: 0;
	}
	/* Cột chữ phải có khoảng thở với mép ảnh. Trước đây đặt
	   padding-inline-start: 0 nên chữ dán sát vào ảnh — chỉ đúng khi ảnh nằm
	   trên đầu thẻ, sai khi ảnh chuyển sang cột trái. */
	.ml-card--compact .ml-card__wrap { padding-inline-start: clamp(1.1rem, 2vw, 1.6rem); }
	.ml-card--compact .ml-card__actions,
	.ml-card--compact .ml-card__body { padding-inline-start: 0; }
}

/* Thẻ tài liệu: không có ảnh, dùng con dấu thay ảnh. */
.ml-card--resource { padding: clamp(1.25rem, 2.4vw, 1.85rem); gap: .6rem; }
.ml-card--resource .ml-card__title { font-size: 1.15rem; }

/* Bọc phần chữ để biến thể "compact" xếp ngang được. */
.ml-card__wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* =====================================================================
   5b. DẢI GIÁ TRỊ (TRUST STRIP)
   ===================================================================== */

/* Khối đè lên đáy hero: ocean glass, viền vàng, chia ô bằng đường bạc. */
.ml-block--trust {
	position: relative;
	z-index: 3;
	margin-block: clamp(-13rem, -14vw, -6rem) clamp(2.5rem, 5vw, 4rem);
}

.ml-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(216, 224, 232, .16);
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-md);
	overflow: hidden;
	box-shadow: var(--ml-shadow-lg);
}

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

.ml-trust__item {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	background: rgba(5, 42, 74, .90);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: background var(--ml-t-base) var(--ml-ease);
}

.ml-trust__item:hover { background: rgba(7, 59, 99, .95); }

.ml-trust__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-xs);
	color: var(--ml-gold);
	transition: transform var(--ml-t-base) var(--ml-ease), color var(--ml-t-base) var(--ml-ease);
}

.ml-trust__item:hover .ml-trust__icon { transform: rotate(-6deg) scale(1.06); color: var(--ml-gold-pale); }

.ml-trust__label {
	margin: 0 0 .2rem;
	font-family: var(--ml-display-font);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ml-pearl);
}

.ml-trust__desc {
	margin: 0;
	font-size: .875rem;
	line-height: 1.45;
	color: rgba(207, 217, 227, .92);
}

/* Bản cũ (HTML tĩnh trong nội dung trang, chưa có icon) vẫn hiển thị đúng. */
.ml-trust__item > div:only-child,
.ml-trust__item > .ml-trust__label:first-child { flex: 1 1 auto; }

/* =====================================================================
   6. BENTO NHU CẦU
   ===================================================================== */

.ml-needs {
	display: grid;
	gap: clamp(.75rem, 1.4vw, 1.15rem);
	grid-template-columns: 1fr;
}

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

@media (min-width: 1000px) {
	.ml-needs {
		/* Lưới đều 3 cột × 2 hàng: ô 1-2-3 hàng trên, ô 4-5-6 hàng dưới.
		   grid-auto-rows: 1fr ép hai hàng cao bằng nhau, nên cả sáu ô có diện
		   tích bằng nhau kể cả khi nội dung dài ngắn khác nhau. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}
}

.ml-need {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	min-block-size: 12rem;
	padding: clamp(1.15rem, 2.2vw, 1.85rem);
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
	background: linear-gradient(158deg, rgba(7, 59, 99, .34), rgba(3, 24, 47, .62));
	transition:
		border-color var(--ml-t-base) var(--ml-ease),
		transform var(--ml-t-base) var(--ml-ease),
		box-shadow var(--ml-t-base) var(--ml-ease);
}

.ml-section--pearl .ml-need,
.ml-section--silver .ml-need,
.ml-on-light .ml-need {
	background: #fff;
	border-color: rgba(6, 42, 74, .12);
	box-shadow: var(--ml-shadow-light);
}

/* Ba ô chính có nền nhấn riêng + glow vàng, ô phụ trầm hơn. */
.ml-need.is-primary {
	background:
		radial-gradient(78% 62% at 88% 6%, rgba(212, 175, 55, .18), transparent 64%),
		linear-gradient(152deg, rgba(8, 89, 133, .55), rgba(3, 24, 47, .80));
	border-color: rgba(212, 175, 55, .34);
}

.ml-section--pearl .ml-need.is-primary,
.ml-section--silver .ml-need.is-primary,
.ml-on-light .ml-need.is-primary {
	background:
		radial-gradient(84% 68% at 90% 2%, rgba(212, 175, 55, .34), transparent 62%),
		linear-gradient(152deg, #fffaea, #ffefcb);
	border-color: rgba(212, 175, 55, .55);
	box-shadow: 0 14px 34px rgba(138, 100, 20, .14);
}

/* Vạch vàng ở mép trên phân biệt ô chính với ô phụ. */
.ml-need.is-primary::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background: linear-gradient(90deg, var(--ml-gold), var(--ml-gold-pale), transparent);
}

/* Chữ Hán texture riêng cho từng ô, lấy từ data-motif. */
.ml-need::after {
	content: attr(data-motif);
	position: absolute;
	inset-block-end: -.28em;
	inset-inline-end: -.04em;
	z-index: -1;
	font-family: var(--ml-hanzi-font);
	font-size: 8.5rem;
	font-weight: 600;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .16);
	pointer-events: none;
	transition: transform var(--ml-t-slow) var(--ml-ease), opacity var(--ml-t-slow) var(--ml-ease);
}

.ml-need:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 175, 55, .72);
	box-shadow: var(--ml-glow-gold);
}

.ml-need:hover::after { transform: scale(1.08) translate(-.04em, -.06em); }

.ml-need__num {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--ml-gold);
}

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

.ml-need__icon {
	color: var(--ml-gold-light);
	margin-block-end: .15rem;
}

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

.ml-need__title {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.24;
	color: var(--ml-fg);
}

.ml-need.is-primary .ml-need__title { font-size: clamp(1.3rem, 2vw, 1.6rem); }

.ml-need__btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	/* Vùng bấm thực tế là cả ô (nhờ .ml-need__stretch), nhưng hộp của chính
	   <button> cũng phải đạt tối thiểu 24px theo WCAG 2.2. */
	min-block-size: 1.75rem;
	display: flex;
	align-items: center;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}

/* Cả ô là vùng bấm, nhưng phần tử ngữ nghĩa vẫn là <button>. */
.ml-need__stretch { position: absolute; inset: 0; z-index: 2; }

.ml-need__desc {
	margin: 0;
	font-size: .95rem;
	color: var(--ml-fg-faint);
	flex: 1 1 auto;
}

.ml-need__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ml-gold-light);
	transition: gap var(--ml-t-base) var(--ml-ease);
}

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

.ml-need:hover .ml-need__cta { gap: .85rem; }

/* =====================================================================
   7. LỘ TRÌNH — STICKY SCROLL
   ===================================================================== */

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

@media (min-width: 1000px) {
	.ml-roadmap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
}

.ml-roadmap__aside { position: relative; }

@media (min-width: 1000px) {
	.ml-roadmap__aside {
		position: sticky;
		inset-block-start: calc(var(--ml-header-h, 84px) + 3rem);
	}
}

.ml-roadmap__heading {
	margin: 0 0 .75rem;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.08;
	color: var(--ml-fg);
}

.ml-roadmap__note {
	margin: 0;
	max-inline-size: 34ch;
	font-size: .98rem;
	color: var(--ml-fg-faint);
}

.ml-roadmap__progress {
	position: relative;
	margin-block-start: 1.75rem;
	block-size: 3px;
	border-radius: var(--ml-radius-pill);
	background: var(--ml-rule);
	overflow: hidden;
}

.ml-roadmap__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--ml-progress, 0%);
	background: linear-gradient(90deg, var(--ml-gold-deep), var(--ml-gold), var(--ml-gold-pale));
	box-shadow: 0 0 14px rgba(212, 175, 55, .5);
	transition: inline-size var(--ml-t-base) var(--ml-ease);
}

.ml-roadmap__count {
	margin-block-start: .75rem;
	font-size: .85rem;
	letter-spacing: .1em;
	color: var(--ml-fg-faint);
}

.ml-roadmap__count b { color: var(--ml-gold); font-size: 1.15rem; }

.ml-timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 clamp(2.25rem, 5vw, 3.25rem);
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.5rem);
}

/* Đường dẫn dọc nối các bước. */
.ml-timeline::before {
	content: "";
	position: absolute;
	inset-block: 1.6rem;
	inset-inline-start: clamp(1rem, 2.4vw, 1.55rem);
	inline-size: 1px;
	background: linear-gradient(180deg, rgba(212, 175, 55, .1), rgba(212, 175, 55, .55), rgba(212, 175, 55, .1));
}

.ml-timeline__item { position: relative; margin: 0; }

.ml-timeline__marker {
	position: absolute;
	inset-block-start: 1.35rem;
	inset-inline-start: calc(clamp(2.25rem, 5vw, 3.25rem) * -1 + clamp(1rem, 2.4vw, 1.55rem) - 1.05rem);
	inline-size: 2.1rem;
	block-size: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ml-o900);
	border: var(--ml-line-gold);
	color: var(--ml-gold-pale);
	font-family: var(--ml-display-font);
	font-size: .95rem;
	font-weight: 600;
	box-shadow: 0 0 0 6px rgba(212, 175, 55, .10);
	transition: box-shadow var(--ml-t-base) var(--ml-ease), background var(--ml-t-base) var(--ml-ease);
}

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

.ml-timeline__item.is-active .ml-timeline__marker {
	box-shadow: 0 0 0 8px rgba(212, 175, 55, .20), 0 0 26px rgba(212, 175, 55, .45);
	background: linear-gradient(140deg, var(--ml-gold), var(--ml-gold-pale));
	color: var(--ml-ink);
}

.ml-timeline__card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(1.15rem, 2.2vw, 1.85rem);
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
	background: linear-gradient(150deg, rgba(7, 59, 99, .30), rgba(3, 24, 47, .58));
	transition: border-color var(--ml-t-base) var(--ml-ease), transform var(--ml-t-base) var(--ml-ease);
}

.ml-section--pearl .ml-timeline__card,
.ml-section--silver .ml-timeline__card {
	background: #fff;
	border-color: rgba(6, 42, 74, .12);
	box-shadow: var(--ml-shadow-light);
}

.ml-timeline__item.is-active .ml-timeline__card { border-color: rgba(212, 175, 55, .55); }

/* Số bước rất lớn nằm chìm phía sau. */
.ml-timeline__bignum {
	position: absolute;
	inset-block-start: -.22em;
	inset-inline-end: .04em;
	font-family: var(--ml-display-font);
	font-size: 6.5rem;
	font-weight: 500;
	line-height: .82;
	color: transparent;
	-webkit-text-stroke: 1px rgba(212, 175, 55, .18);
	pointer-events: none;
}

.ml-timeline__step {
	margin: 0 0 .35rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

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

.ml-timeline__level {
	letter-spacing: .1em;
	color: var(--ml-fg-faint);
	font-weight: 600;
}

.ml-timeline__title {
	margin: 0 0 .4rem;
	font-family: var(--ml-display-font);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.22;
	color: var(--ml-fg);
}

.ml-timeline__title a { color: inherit; text-decoration: none; }
.ml-timeline__title a:hover { color: var(--ml-gold-pale); }
.ml-section--pearl .ml-timeline__title a:hover { color: var(--ml-seal); }

.ml-timeline__desc { margin: 0; font-size: .95rem; color: var(--ml-fg-faint); }

.ml-timeline__out {
	margin: .7rem 0 0;
	padding-inline-start: .85rem;
	border-inline-start: 2px solid rgba(212, 175, 55, .5);
	font-size: .9rem;
	color: var(--ml-fg-soft);
}

/* =====================================================================
   8. BẢNG LỊCH — BOARDING CARD
   ===================================================================== */

.ml-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}

.ml-event {
	position: relative;
	display: grid;
	gap: .85rem clamp(1rem, 2.4vw, 2rem);
	grid-template-columns: 1fr;
	align-items: center;
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.75rem);
	background: linear-gradient(100deg, rgba(8, 89, 133, .26), rgba(3, 24, 47, .58));
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-sm);
	transition: border-color var(--ml-t-base) var(--ml-ease), background var(--ml-t-base) var(--ml-ease);
}

@media (min-width: 760px) {
	.ml-event { grid-template-columns: 7.5rem 1fr auto; }
}

.ml-event:hover { border-color: rgba(212, 175, 55, .55); }

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

/* Đường bạc đục lỗ như vé máy bay. */
.ml-event__date {
	position: relative;
	text-align: center;
	padding-inline-end: clamp(1rem, 2.4vw, 2rem);
}

@media (min-width: 760px) {
	.ml-event__date::after {
		content: "";
		position: absolute;
		inset-block: -.6rem;
		inset-inline-end: 0;
		inline-size: 1px;
		background: repeating-linear-gradient(180deg, rgba(216, 224, 232, .45) 0 5px, transparent 5px 11px);
	}
}

.ml-event__date time { display: grid; gap: .05rem; }

.ml-event__day {
	font-family: var(--ml-display-font);
	font-size: clamp(2.4rem, 4.5vw, 3.4rem);
	font-weight: 500;
	line-height: .92;
	color: var(--ml-gold-pale);
	letter-spacing: -.03em;
}

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

.ml-event__month {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ml-fg-soft);
}

.ml-event__year { font-size: .72rem; color: var(--ml-fg-faint); letter-spacing: .14em; }

.ml-event__title {
	margin: 0 0 .35rem;
	font-family: var(--ml-display-font);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ml-fg);
}

.ml-event__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .9rem;
	font-size: .875rem;
	color: var(--ml-fg-faint);
}

.ml-event__meta li { position: relative; }

.ml-event__meta li + li::before {
	content: "";
	position: absolute;
	inset-block-start: .55em;
	inset-inline-start: -.5rem;
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
}

.ml-event__fee, .ml-event__seats { margin: .4rem 0 0; font-size: .875rem; }
.ml-event__seats { color: var(--ml-gold-light); font-weight: 600; }

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

.ml-event__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
}

@media (min-width: 760px) {
	.ml-event__action { flex-direction: column; align-items: flex-end; }
}

/* =====================================================================
   9. OUTCOME IMMERSIVE & BẢN ĐỒ CƠ SỞ
   ===================================================================== */

.ml-outcome {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.35rem);
	grid-template-columns: 1fr;
}

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

.ml-outcome__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Dự án không có reset box-sizing toàn cục. Thiếu dòng này thì
	   min-block-size bị cộng thêm padding và viền, ô cao 309px thay vì 264px. */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* Ô cao bằng nửa bản trước: bỏ khoảng rỗng lớn giữa số và tiêu đề, số nay
	   nằm cùng hàng với tiêu đề nên không chiếm riêng một dòng. */
	gap: .55rem;
	min-block-size: clamp(8.5rem, 12vw, 10.5rem);
	padding: clamp(1.05rem, 1.7vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.45rem);
	border: var(--ml-hair-silver);
	border-radius: var(--ml-radius-md);
	background: linear-gradient(168deg, rgba(8, 89, 133, .30), rgba(3, 24, 47, .82));
	transition: border-color var(--ml-t-slow) var(--ml-ease), flex-grow var(--ml-t-slow) var(--ml-ease);
}

/* Chiều cao đích bằng đúng một nửa bản trước (528px → 264px ở 1600px, 514px →
   257px ở 1280px). Đặt bằng min-block-size chứ không bằng padding: nội dung tự
   dàn đều nhờ .ml-outcome__desc { flex: 1 } nên tiêu đề bám mép trên, liên kết
   bám mép dưới, không dồn cục.
   Khối này phải nằm SAU khai báo .ml-outcome__panel ở trên: cùng độ ưu tiên
   nên luật đứng sau mới thắng. */
@media (min-width: 900px) {
	.ml-outcome__panel { min-block-size: clamp(13rem, 20vw, 16.5rem); }
}

/* Ánh sáng riêng cho từng panel — không panel nào giống panel nào. */
.ml-outcome__panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 130%;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(28px);
	opacity: .55;
	transition: opacity var(--ml-t-slow) var(--ml-ease), transform var(--ml-t-slow) var(--ml-ease);
}

.ml-outcome__panel:nth-child(1)::before {
	inset-block-start: -46%;
	inset-inline-start: -34%;
	background: radial-gradient(circle, rgba(212, 175, 55, .40), transparent 62%);
}

.ml-outcome__panel:nth-child(2)::before {
	inset-block-end: -50%;
	inset-inline-end: -30%;
	background: radial-gradient(circle, rgba(22, 166, 199, .40), transparent 62%);
}

.ml-outcome__panel:nth-child(3)::before {
	inset-block-start: -40%;
	inset-inline-end: -38%;
	background: radial-gradient(circle, rgba(140, 28, 43, .38), transparent 62%);
}

.ml-outcome__panel:hover,
.ml-outcome__panel:focus-within {
	border-color: rgba(212, 175, 55, .62);
}

.ml-outcome__panel:hover::before { opacity: .95; transform: scale(1.12); }

/* Số La Mã đứng cạnh tiêu đề, canh theo đường chân chữ để hai phần thẳng hàng. */
.ml-outcome__head {
	display: flex;
	align-items: baseline;
	gap: .7rem;
}

.ml-outcome__num {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--ml-display-font);
	font-size: clamp(1.5rem, 2.1vw, 1.9rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .55);
}

.ml-outcome__title {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ml-pearl);
}

.ml-outcome__desc {
	margin: 0;
	flex: 1 1 auto;
	font-size: .94rem;
	color: rgba(222, 230, 238, .92);
}

.ml-outcome__line {
	block-size: 1px;
	border: 0;
	margin: .25rem 0;
	background: linear-gradient(90deg, rgba(212, 175, 55, .7), transparent);
	transform-origin: left center;
}

.ml-outcome__hanzi {
	position: absolute;
	z-index: -1;
	inset-block-end: -.24em;
	inset-inline-end: -.02em;
	font-family: var(--ml-hanzi-font);
	/* Ô thấp đi một nửa nên chữ Hán 9rem sẽ lấn hết nền; 5,5rem giữ đúng vai trò
	   họa tiết góc. */
	font-size: 5.5rem;
	font-weight: 600;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .14);
	pointer-events: none;
}

/* -- Bản đồ trừu tượng ba cơ sở ------------------------------------------ */

.ml-branchmap {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 960px) {
	/* Hai cột bằng nhau. Trước là .9fr/1.1fr và bản đồ còn bị chặn ở 26rem nên
	   cột trái chỉ dùng hết 416px trong khi danh sách bên phải cao gấp ba lần —
	   nhìn rất lệch trên màn hình máy tính. */
	.ml-branchmap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ml-branchmap__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	/* Rộng hết cột, chỉ chặn lại ở 36rem hoặc theo chiều cao màn hình (nhân .75
	   vì khung cao 4 phần trên 3 phần rộng) để bản đồ luôn nằm trọn trong một
	   màn khi dính. */
	inline-size: min(100%, 36rem, calc((100svh - 10rem) * .75));
	justify-self: center;
}

/* Bản đồ dính lại khi cuộn qua danh sách dài, nếu không nó trôi khỏi màn hình
   ngay từ cơ sở thứ hai và cột trái thành khoảng trống.
   Khối này phải nằm SAU khai báo .ml-branchmap__figure ở trên: cùng độ ưu tiên
   nên luật đứng sau mới thắng (đặt trong @media không làm tăng độ ưu tiên). */
@media (min-width: 960px) {
	.ml-branchmap__figure {
		position: sticky;
		inset-block-start: calc(var(--ml-header-h, 104px) + 2rem);
		align-self: start;
	}
}

.ml-branchmap__svg { inline-size: 100%; block-size: 100%; overflow: visible; }

.ml-branchmap__country {
	fill: rgba(8, 126, 164, .10);
	stroke: rgba(212, 175, 55, .55);
	stroke-width: 1.1;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 8px rgba(212, 175, 55, .18));
}

.ml-branchmap__isle { fill: var(--ml-gold); }
.ml-branchmap__islet { fill: rgba(212, 175, 55, .8); }

.ml-branchmap__islandlabel {
	fill: rgba(212, 175, 55, .85);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ml-branchmap__route {
	fill: none;
	stroke: rgba(216, 224, 232, .45);
	stroke-width: 1;
	stroke-dasharray: 5 7;
	animation: ml-route 22s linear infinite;
}

@keyframes ml-route { to { stroke-dashoffset: -240; } }

.ml-branchmap__glowline {
	fill: none;
	stroke: rgba(212, 175, 55, .5);
	stroke-width: 1.5;
	filter: drop-shadow(0 0 6px rgba(212, 175, 55, .55));
}

.ml-branchmap__dot { fill: var(--ml-gold); }
.ml-branchmap__halo { fill: rgba(212, 175, 55, .18); animation: ml-pulse 4s ease-in-out infinite; }
.ml-branchmap__halo--b { animation-delay: 1.3s; }
.ml-branchmap__halo--c { animation-delay: 2.6s; }

@keyframes ml-pulse {
	0%, 100% { opacity: .35; transform: scale(.9); transform-origin: center; }
	50% { opacity: .9; transform: scale(1.18); }
}

.ml-branchmap__label {
	fill: var(--ml-silver-light);
	font-family: var(--ml-display-font);
	font-size: 13px;
	font-weight: 600;
}

.ml-branchmap__coord {
	fill: rgba(191, 202, 214, .55);
	font-size: 9px;
	letter-spacing: .12em;
}

.ml-branchmap__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .85rem;
}

.ml-branchmap__item {
	display: grid;
	gap: .3rem;
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.6rem);
	border: var(--ml-hair-silver);
	border-inline-start: 2px solid rgba(212, 175, 55, .55);
	border-radius: 0 var(--ml-radius-sm) var(--ml-radius-sm) 0;
	background: linear-gradient(100deg, rgba(8, 89, 133, .22), transparent);
	transition: border-color var(--ml-t-base) var(--ml-ease), background var(--ml-t-base) var(--ml-ease);
}

.ml-branchmap__item:hover { background: linear-gradient(100deg, rgba(212, 175, 55, .14), transparent); }

.ml-branchmap__name {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ml-fg);
}

.ml-branchmap__role {
	margin: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-gold);
}

.ml-branchmap__addr { margin: 0; font-style: normal; font-size: .95rem; color: var(--ml-fg-faint); }

.ml-branchmap__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: .35rem; }

/* Ô ảnh thật của cơ sở, dựng sẵn để chỉ cần gắn ảnh đại diện là hiện. */
.ml-branchmap__item .ml-media { margin-block-start: .6rem; }

/* =====================================================================
   10. CẢM NHẬN & BLOG EDITORIAL
   ===================================================================== */

.ml-quotes {
	display: grid;
	gap: var(--ml-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.ml-quotes:not(.is-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ml-quote {
	position: relative;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-md);
	background: linear-gradient(158deg, rgba(212, 175, 55, .07), rgba(3, 24, 47, .5));
}

.ml-section--pearl .ml-quote,
.ml-section--silver .ml-quote { background: #fff; box-shadow: var(--ml-shadow-light); }

.ml-quote__mark {
	position: absolute;
	inset-block-start: .1rem;
	inset-inline-end: 1rem;
	font-family: var(--ml-display-font);
	font-size: 5rem;
	line-height: 1;
	color: rgba(212, 175, 55, .28);
	pointer-events: none;
}

.ml-quote__text {
	margin: 0 0 1.25rem;
	font-family: var(--ml-display-font);
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--ml-fg);
	border: 0;
	padding: 0;
}

.ml-quote__by { display: flex; align-items: center; gap: .9rem; }
.ml-quote__by .ml-media { inline-size: 3.25rem; flex: 0 0 auto; }
.ml-quote__who { display: grid; gap: .12rem; font-size: .9rem; }
.ml-quote__who strong { color: var(--ml-fg); }
.ml-quote__who span { color: var(--ml-fg-faint); }
.ml-quote__who .ml-badge { justify-self: start; margin-block-start: .25rem; }

/* -- Blog editorial: 1 bài lớn + 2 bài phụ ------------------------------- */

.ml-postlist--editorial {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 2.6vw, 2rem);
}

@media (min-width: 900px) {
	.ml-postlist--editorial {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	}

	.ml-postlist--editorial .is-featured { grid-row: 1 / 3; }
}

.ml-postcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin: 0;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--ml-rule);
	transition: border-color var(--ml-t-base) var(--ml-ease);
}

.ml-postcard:hover { border-block-end-color: rgba(212, 175, 55, .55); }

.ml-postcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--ml-radius-sm);
	background: linear-gradient(152deg, var(--ml-o700), var(--ml-o900));
}

.ml-postcard__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ml-t-slow) var(--ml-ease);
}

.ml-postcard:hover .ml-postcard__media img { transform: scale(1.04); }

.ml-postcard.is-featured .ml-postcard__media { aspect-ratio: 4 / 3; }

.ml-postcard__motif {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ml-hanzi-font);
	font-size: clamp(2.5rem, 7vw, 4rem);
	font-weight: 600;
	color: transparent;
	-webkit-text-stroke: 1px rgba(244, 220, 140, .5);
}

.ml-postcard__body { display: flex; flex-direction: column; gap: .5rem; }

.ml-postcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-fg-faint);
}

.ml-postcard__cat { color: var(--ml-gold); font-weight: 700; }
.ml-section--pearl .ml-postcard__cat, .ml-section--silver .ml-postcard__cat { color: var(--ml-gold-deep); }

.ml-postcard__title {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.24;
	color: var(--ml-fg);
}

.ml-postcard.is-featured .ml-postcard__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.ml-postcard__title a { color: inherit; text-decoration: none; }
.ml-postcard__title a:hover { color: var(--ml-gold-pale); }
.ml-section--pearl .ml-postcard__title a:hover { color: var(--ml-seal); }

.ml-postcard__excerpt { margin: 0; font-size: .95rem; color: var(--ml-fg-faint); }

.ml-postcard__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ml-gold-light);
}

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

@media (min-width: 900px) {
	.ml-postcard:not(.is-featured) { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
	.ml-postcard:not(.is-featured) .ml-postcard__media { flex: 0 0 38%; aspect-ratio: 4 / 3; }
	.ml-postcard:not(.is-featured) .ml-postcard__excerpt { display: none; }
}

/* =====================================================================
   11. BẢNG SO SÁNH
   ===================================================================== */

.ml-compare { overflow-x: auto; border-radius: var(--ml-radius-md); }

.ml-compare__table {
	inline-size: 100%;
	border-collapse: collapse;
	min-inline-size: 46rem;
	font-size: .92rem;
}

.ml-compare__table :is(th, td) {
	padding: .85rem 1rem;
	border: 1px solid var(--ml-rule);
	vertical-align: top;
	text-align: start;
}

.ml-compare__table thead th {
	background: linear-gradient(160deg, rgba(8, 89, 133, .34), rgba(3, 24, 47, .6));
	color: var(--ml-fg);
	font-family: var(--ml-display-font);
	font-size: 1rem;
}

.ml-compare__table tbody th {
	color: var(--ml-gold);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	inline-size: 10rem;
}

.ml-compare__table ul { margin: 0; padding-inline-start: 1.1rem; }

@media (max-width: 760px) {
	.ml-compare__table { min-inline-size: 0; }
	.ml-compare__table thead { display: none; }
	.ml-compare__table :is(tr, td, th) { display: block; inline-size: auto; }
	.ml-compare__table tbody th { border-block-end: 0; }
	.ml-compare__table td::before {
		content: attr(data-label) " · ";
		font-weight: 700;
		color: var(--ml-fg-faint);
	}
}

/* =====================================================================
   12. BIỂU MẪU
   ===================================================================== */

.ml-form-wrap { position: relative; }

.ml-form {
	position: relative;
	display: grid;
	gap: 1rem;
	padding: clamp(1.35rem, 2.6vw, 2.25rem);
	border-radius: var(--ml-radius-lg);
	border: var(--ml-hair-gold);
	background:
		radial-gradient(90% 70% at 88% 0%, rgba(212, 175, 55, .12), transparent 60%),
		linear-gradient(162deg, rgba(8, 89, 133, .30), rgba(3, 24, 47, .78));
	box-shadow: var(--ml-shadow-lg);
	color: var(--ml-fg-soft);
}

/* Pearl glass: form trong dải CTA cuối và trên nền sáng. */
.ml-form--pearl,
.ml-section--pearl .ml-form,
.ml-section--silver .ml-form,
.ml-on-light .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, .92));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-color: rgba(138, 100, 20, .32);
	color: var(--ml-fg-soft);
}

.ml-form__title {
	margin: 0;
	font-family: var(--ml-display-font);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.18;
	color: var(--ml-fg);
}

.ml-form__desc { margin: 0; font-size: .95rem; color: var(--ml-fg-faint); }

.ml-form__grid {
	display: grid;
	gap: .9rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.ml-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ml-field--full, .ml-form__more { grid-column: 1 / -1; }
}

/* align-content: start là bắt buộc. Hai trường cùng hàng bị kéo cao bằng nhau,
   mà trường "Số điện thoại" có thêm dòng gợi ý nên cao hơn; nếu để mặc định
   (stretch) thì các hàng bên trong trường "Họ và tên" giãn đều ra và ô nhập bị
   đẩy xuống 27px so với ô bên cạnh. */
.ml-field { display: grid; gap: .35rem; min-inline-size: 0; align-content: start; }

.ml-field__label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--ml-fg);
}

.ml-field__req { color: var(--ml-gold); margin-inline-start: .15rem; }
.ml-section--pearl .ml-field__req, .ml-form--pearl .ml-field__req { color: var(--ml-seal); }

.ml-field :is(input, select, textarea) {
	inline-size: 100%;
	min-inline-size: 0;
	box-sizing: border-box;
	min-block-size: var(--ml-tap);
	/* Ô nhập không "kéo dài" theo chiều cao hàng lưới khi ô bên cạnh có ghi chú. */
	align-self: start;
	padding: .7rem .95rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ml-fg);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius-sm);
	transition: border-color var(--ml-t-fast) var(--ml-ease), box-shadow var(--ml-t-fast) var(--ml-ease);
}

.ml-form--pearl .ml-field :is(input, select, textarea),
.ml-section--pearl .ml-field :is(input, select, textarea),
.ml-section--silver .ml-field :is(input, select, textarea) {
	background: rgba(255, 255, 255, .85);
}

.ml-field :is(input, select, textarea)::placeholder { color: var(--ml-fg-faint); }

.ml-field :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--ml-gold);
	box-shadow: var(--ml-shadow-focus);
}

.ml-field textarea { min-block-size: 7rem; resize: vertical; align-self: stretch; }

.ml-field__hint { font-size: .8rem; color: var(--ml-fg-faint); }

.ml-field__error {
	font-size: .82rem;
	font-weight: 600;
	color: #ff9d9d;
}

.ml-form--pearl .ml-field__error,
.ml-section--pearl .ml-field__error { color: var(--ml-seal); }

.ml-field.has-error :is(input, select, textarea) { border-color: #ff9d9d; }
.ml-form--pearl .ml-field.has-error :is(input, select, textarea) { border-color: var(--ml-seal); }

/* Nhóm mở rộng: form học thử chỉ hỏi 3 thông tin ở bước đầu. */
.ml-form__more {
	border: 1px dashed var(--ml-rule);
	border-radius: var(--ml-radius-sm);
	padding: .65rem .9rem;
}

.ml-form__more summary {
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ml-fg-soft);
	min-block-size: 28px;
	display: flex;
	align-items: center;
}

.ml-form__more-inner { display: grid; gap: .9rem; margin-block-start: .85rem; }

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

.ml-checkgrid { display: grid; gap: .5rem; }

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

.ml-checkgrid__item,
.ml-consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .9rem;
	min-block-size: 28px;
	cursor: pointer;
}

/* Ô tick không được co dưới 24px kể cả khi nhãn dài. */
.ml-checkgrid__item input,
.ml-consent input {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-block-start: .05rem;
	accent-color: var(--ml-gold);
}

.ml-field--consent { display: grid; gap: .35rem; }

.ml-form__actions { display: grid; gap: .7rem; }

.ml-form__alt { margin: 0; font-size: .875rem; text-align: center; color: var(--ml-fg-faint); }
.ml-form__alt a { font-weight: 700; color: var(--ml-gold-pale); text-decoration: none; }

/* Mọi liên kết trong form nền ngọc trai phải dùng vàng mực: nền kính ở dải CTA
   sáng hơn dải pearl thường nên vàng sâu chỉ đạt 4.38, chưa qua ngưỡng AA. */
.ml-form--pearl a,
.ml-section--pearl .ml-form a,
.ml-section--silver .ml-form a,
.ml-cta-band__form .ml-form a { color: var(--ml-gold-ink); text-decoration: underline; }

.ml-form--pearl a:hover,
.ml-section--pearl .ml-form a:hover,
.ml-section--silver .ml-form a:hover,
.ml-cta-band__form .ml-form a:hover { color: var(--ml-seal); }

.ml-form__alert {
	padding: .75rem 1rem;
	border-radius: var(--ml-radius-sm);
	font-size: .9rem;
	font-weight: 600;
}

.ml-form__alert.is-error { background: rgba(255, 107, 107, .14); color: #ffb4b4; border: 1px solid rgba(255, 107, 107, .4); }
.ml-form__alert.is-success { background: rgba(22, 166, 199, .14); color: var(--ml-o400); border: 1px solid rgba(22, 166, 199, .4); }

.ml-form--pearl .ml-form__alert.is-error,
.ml-section--pearl .ml-form__alert.is-error { background: rgba(140, 28, 43, .08); color: var(--ml-seal); border-color: rgba(140, 28, 43, .3); }

.ml-form-success {
	display: grid;
	gap: .75rem;
	padding: clamp(1.35rem, 2.6vw, 2.25rem);
	border-radius: var(--ml-radius-lg);
	border: var(--ml-line-gold);
	background: linear-gradient(158deg, rgba(212, 175, 55, .16), rgba(3, 24, 47, .6));
	box-shadow: var(--ml-glow-gold);
	color: var(--ml-fg);
}

.ml-form-success p { margin: 0; }

.ml-form__legal { margin: 0; font-size: .78rem; color: var(--ml-fg-faint); }

/* Honeypot: ẩn khỏi cả người dùng lẫn trình đọc màn hình. */
.ml-hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* =====================================================================
   13. MODAL
   ===================================================================== */

.ml-modal {
	position: fixed;
	inset: 0;
	z-index: var(--ml-z-modal);
	display: grid;
	place-items: center;
	padding: clamp(.75rem, 3vw, 2rem);
}

.ml-modal[hidden] { display: none; }

.ml-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 10, 20, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: ml-fade 220ms ease-out;
}

@keyframes ml-fade { from { opacity: 0; } to { opacity: 1; } }

.ml-modal__dialog {
	position: relative;
	inline-size: min(40rem, 100%);
	max-block-size: 92vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--ml-radius-lg);
	animation: ml-modal-in 320ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes ml-modal-in {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to { opacity: 1; transform: none; }
}

.ml-modal__close {
	position: absolute;
	inset-block-start: .6rem;
	inset-inline-end: .6rem;
	z-index: 3;
	inline-size: var(--ml-tap);
	block-size: var(--ml-tap);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(3, 24, 47, .55);
	color: var(--ml-pearl);
	cursor: pointer;
	transition: background var(--ml-t-fast) var(--ml-ease);
}

.ml-modal__close:hover { background: rgba(212, 175, 55, .85); color: var(--ml-ink); }

.ml-modal__body .ml-form { box-shadow: var(--ml-shadow-lg); }

/* =====================================================================
   14. THANH CTA MOBILE, COOKIE, BẢN ĐỒ
   ===================================================================== */

.ml-sticky-cta {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: var(--ml-z-cta);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1px;
	padding-block-end: env(safe-area-inset-bottom, 0px);
	background: rgba(216, 224, 232, .12);
	border-block-start: 1px solid rgba(212, 175, 55, .35);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (min-width: 782px) { .ml-sticky-cta { display: none; } }

.ml-sticky-cta__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-block-size: 58px;
	padding: .4rem;
	border: 0;
	font: inherit;
	font-size: .74rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ml-silver-light);
	background: rgba(3, 24, 47, .92);
	cursor: pointer;
}

.ml-sticky-cta__item svg { inline-size: 1.15rem; block-size: 1.15rem; }

.ml-sticky-cta__item--primary {
	color: var(--ml-ink);
	background: linear-gradient(112deg, var(--ml-gold-mid), var(--ml-gold) 40%, var(--ml-gold-pale));
}

body.ml-has-sticky-cta { padding-block-end: 0; }

/* Banner đồng ý cookie */
.ml-consent-bar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: calc(var(--ml-z-cta) + 1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .9rem 1.5rem;
	padding: 1rem clamp(1rem, 4vw, 2rem);
	background: rgba(3, 24, 47, .96);
	border-block-start: var(--ml-hair-gold);
	color: var(--ml-silver-light);
	font-size: .9rem;
}

body.ml-has-sticky-cta .ml-consent-bar { inset-block-end: calc(58px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 782px) {
	body.ml-has-sticky-cta .ml-consent-bar { inset-block-end: 0; }
}

.ml-consent-bar__actions { display: flex; gap: .6rem; }

/* Bản đồ chỉ tải khi người dùng bấm */
.ml-map {
	margin: 1rem clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.6rem);
	border: 1px dashed var(--ml-rule);
	border-radius: var(--ml-radius-sm);
	padding: .85rem;
	text-align: center;
}

.ml-map iframe {
	inline-size: 100%;
	block-size: 260px;
	border: 0;
	border-radius: var(--ml-radius-xs);
}

.ml-map__load {
	appearance: none;
	border: var(--ml-line-silver);
	background: transparent;
	color: var(--ml-fg-soft);
	border-radius: var(--ml-radius-pill);
	padding: .5rem 1.1rem;
	min-block-size: 40px;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.ml-map__load:hover { border-color: rgba(212, 175, 55, .7); color: var(--ml-gold-pale); }

/* =====================================================================
   15. BREADCRUMB, MỤC LỤC, THÔNG TIN LIÊN HỆ
   ===================================================================== */

.ml-siteinfo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: .93rem;
}

.ml-siteinfo__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-gold-pale);
	margin-inline-end: .35rem;
}

.ml-siteinfo a { display: inline-flex; align-items: center; min-block-size: 24px; }
.ml-siteinfo__social { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-block-start: .35rem; }
.ml-siteinfo__legal { font-size: .82rem; color: var(--ml-fg-faint); }

.ml-toc {
	margin-block: 1.5rem 2rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	border: var(--ml-hair-gold);
	border-radius: var(--ml-radius-md);
	background: rgba(212, 175, 55, .06);
}

.ml-toc__title {
	margin: 0 0 .75rem;
	font-family: var(--ml-display-font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.ml-toc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; font-size: .95rem; }
.ml-toc a { display: inline-flex; align-items: center; min-block-size: 24px; text-decoration: none; }
.ml-toc a:hover { text-decoration: underline; }

/* =====================================================================
   16. GIẢM CHUYỂN ĐỘNG
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.ml-branchmap__route,
	.ml-branchmap__halo { animation: none !important; }
}