/*! Mandala Design System v1.1.0 — Đại Bảo Tháp Mandala Tây Thiên. File sinh tự động từ tokens/tokens.json, KHÔNG sửa tay. */
:root {
  /* ── Nguyên thủy ── */
  --m-stone-0: #FFFFFF;
  --m-stone-25: #FCFBF8;
  --m-stone-50: #F8F6F1;
  --m-stone-100: #F1EDE5;
  --m-stone-200: #E5DFD4;
  --m-stone-300: #D2CABC;
  --m-stone-400: #ADA393;
  --m-stone-500: #877D6E;
  --m-stone-600: #6B6255;
  --m-stone-700: #524B41;
  --m-stone-800: #39342D;
  --m-stone-900: #25211C;
  --m-stone-950: #161410;
  --m-lapis-50: #F1F5FB;
  --m-lapis-100: #E2E9F5;
  --m-lapis-200: #C5D3EA;
  --m-lapis-300: #9CB3D8;
  --m-lapis-400: #6D8DC1;
  --m-lapis-500: #4A6CA6;
  --m-lapis-600: #35568C;
  --m-lapis-700: #264476;
  --m-lapis-800: #183665;
  --m-lapis-900: #112950;
  --m-lapis-950: #0A1931;
  --m-kasaya-50: #FCF3F3;
  --m-kasaya-100: #F9E3E4;
  --m-kasaya-200: #F2C6C9;
  --m-kasaya-300: #E69BA1;
  --m-kasaya-400: #D6676F;
  --m-kasaya-500: #C43E49;
  --m-kasaya-600: #B11B2B;
  --m-kasaya-700: #921624;
  --m-kasaya-800: #73131E;
  --m-kasaya-900: #551017;
  --m-kasaya-950: #340A0E;
  --m-gold-50: #FBF7ED;
  --m-gold-100: #F5EBD2;
  --m-gold-200: #EAD6A4;
  --m-gold-300: #DDBE73;
  --m-gold-400: #CDA54E;
  --m-gold-500: #B68B35;
  --m-gold-600: #96712A;
  --m-gold-700: #775823;
  --m-gold-800: #5A431C;
  --m-gold-900: #3D2E14;
  --m-gold-950: #241B0B;
  --m-jade-50: #EFF7F2;
  --m-jade-100: #D9EEE2;
  --m-jade-200: #B2DBC5;
  --m-jade-300: #80C0A0;
  --m-jade-400: #50A07B;
  --m-jade-500: #30855F;
  --m-jade-600: #236C4C;
  --m-jade-700: #1D573E;
  --m-jade-800: #184433;
  --m-jade-900: #123327;
  --m-jade-950: #0A1F17;
  --m-five-white: #8F8778;
  --m-five-blue: #3F64A6;
  --m-five-yellow: #C1932F;
  --m-five-red: #B5404A;
  --m-five-green: #2F8462;
  --m-device-mobile: 0px;
  --m-device-tablet: 768px;
  --m-device-tablet-landscape: 992px;
  --m-device-desktop: 1200px;
  --m-font-display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
  --m-font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --m-font-serif: "Literata", "Noto Serif", Georgia, serif;
  --m-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --m-weight-regular: 400;
  --m-weight-medium: 500;
  --m-weight-semibold: 600;
  --m-weight-bold: 700;
  --m-text-xs: 0.8125rem;
  --m-text-sm: 0.875rem;
  --m-text-md: 1rem;
  --m-text-lg: 1.125rem;
  --m-text-xl: 1.25rem;
  --m-text-2xl: 1.25rem;
  --m-text-3xl: 1.5rem;
  --m-text-4xl: 1.75rem;
  --m-text-5xl: 2rem;
  --m-text-6xl: 2.25rem;
  --m-text-reading: 1.125rem;
  --m-text-lead: 1.125rem;
  --m-leading-tight: 1.15;
  --m-leading-heading: 1.25;
  --m-leading-snug: 1.4;
  --m-leading-normal: 1.55;
  --m-leading-reading: 1.75;
  --m-tracking-display: -0.015em;
  --m-tracking-normal: 0;
  --m-tracking-caps: 0.08em;
  --m-space-0: 0;
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 20px;
  --m-space-6: 24px;
  --m-space-8: 32px;
  --m-space-10: 40px;
  --m-space-12: 48px;
  --m-space-16: 64px;
  --m-space-20: 80px;
  --m-space-24: 96px;
  --m-space-32: 128px;
  --m-space-px: 1px;
  --m-space-0-5: 2px;
  --m-space-1-5: 6px;
  --m-space-gutter: var(--m-margin);
  --m-space-section: 48px;
  --m-columns: 4;
  --m-margin: 16px;
  --m-gutter: 16px;
  --m-header-h: 60px;
  --m-tabbar-h: 60px;
  --m-size-control-sm: 36px;
  --m-size-control-md: 44px;
  --m-size-control-lg: 52px;
  --m-size-icon-sm: 16px;
  --m-size-icon-md: 20px;
  --m-size-icon-lg: 24px;
  --m-size-reading: 42.5rem;
  --m-size-content: 72rem;
  --m-size-wide: 86rem;
  --m-size-touch: 44px;
  --m-size-touch-comfort: 48px;
  --m-radius-xs: 4px;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-radius-xl: 24px;
  --m-radius-2xl: 32px;
  --m-radius-full: 999px;
  --m-border-thin: 1px;
  --m-border-thick: 2px;
  --m-border-focus: 3px;
  --m-duration-instant: 80ms;
  --m-duration-fast: 150ms;
  --m-duration-base: 240ms;
  --m-duration-slow: 400ms;
  --m-duration-breath: 700ms;
  --m-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --m-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --m-z-base: 0;
  --m-z-raised: 10;
  --m-z-dropdown: 100;
  --m-z-sticky: 200;
  --m-z-header: 300;
  --m-z-overlay: 400;
  --m-z-modal: 500;
  --m-z-toast: 600;
  --m-z-tooltip: 700;
  --m-bp-sm: 576px;
  --m-bp-md: 768px;
  --m-bp-lg: 992px;
  --m-bp-xl: 1200px;
  --m-bp-2xl: 1400px;
}

/* ── Ngữ nghĩa (sáng, mặc định). [data-theme] đặt được trên <html> hoặc bất kỳ phần tử nào. ── */
:root, [data-theme="light"] {
  --m-bg: var(--m-stone-25);
  --m-surface: var(--m-stone-0);
  --m-surface-sunken: var(--m-stone-50);
  --m-surface-muted: var(--m-stone-100);
  --m-surface-inverse: var(--m-lapis-950);
  --m-overlay: rgb(22 20 16 / 0.52);
  --m-text: var(--m-stone-900);
  --m-text-secondary: var(--m-stone-700);
  --m-text-muted: var(--m-stone-600);
  --m-text-disabled: var(--m-stone-400);
  --m-text-inverse: var(--m-stone-25);
  --m-text-on-action: #FFFFFF;
  --m-heading: var(--m-stone-950);
  --m-border: var(--m-stone-200);
  --m-border-strong: var(--m-stone-300);
  --m-border-input: var(--m-stone-500);
  --m-action: var(--m-lapis-800);
  --m-action-hover: var(--m-lapis-900);
  --m-action-pressed: var(--m-lapis-950);
  --m-action-subtle: var(--m-lapis-50);
  --m-action-subtle-hover: var(--m-lapis-100);
  --m-action-subtle-text: var(--m-lapis-800);
  --m-brand: var(--m-kasaya-600);
  --m-brand-hover: var(--m-kasaya-700);
  --m-brand-subtle: var(--m-kasaya-50);
  --m-brand-text: var(--m-kasaya-700);
  --m-ornament: var(--m-gold-500);
  --m-ornament-subtle: var(--m-gold-100);
  --m-ornament-text: var(--m-gold-700);
  --m-link: var(--m-lapis-700);
  --m-link-hover: var(--m-lapis-900);
  --m-link-visited: var(--m-lapis-600);
  --m-focus: var(--m-lapis-500);
  --m-selection: var(--m-gold-200);
  --m-highlight: var(--m-gold-100);
  --m-info-bg: var(--m-lapis-50);
  --m-info-border: var(--m-lapis-200);
  --m-info-text: var(--m-lapis-800);
  --m-info-icon: var(--m-lapis-600);
  --m-success-bg: var(--m-jade-50);
  --m-success-border: var(--m-jade-200);
  --m-success-text: var(--m-jade-800);
  --m-success-icon: var(--m-jade-600);
  --m-warning-bg: var(--m-gold-50);
  --m-warning-border: var(--m-gold-300);
  --m-warning-text: var(--m-gold-800);
  --m-warning-icon: var(--m-gold-600);
  --m-danger-bg: var(--m-kasaya-50);
  --m-danger-border: var(--m-kasaya-200);
  --m-danger-text: var(--m-kasaya-800);
  --m-danger-icon: var(--m-kasaya-600);
  --m-practice-bg: #FBF6EA;
  --m-practice-border: var(--m-gold-300);
  --m-shadow-color: 37 33 28;
  --m-skeleton: var(--m-stone-100);
  --m-skeleton-shine: var(--m-stone-50);
  --m-img-dim: 1;

  /* ── Thành phần dùng chung ── */
  --m-reading-scale: 1;
  --m-shadow-xs: 0 1px 2px rgb(var(--m-shadow-color) / 0.06);
  --m-shadow-sm: 0 1px 2px rgb(var(--m-shadow-color) / 0.05), 0 2px 8px -2px rgb(var(--m-shadow-color) / 0.08);
  --m-shadow-md: 0 2px 4px rgb(var(--m-shadow-color) / 0.04), 0 10px 24px -6px rgb(var(--m-shadow-color) / 0.12);
  --m-shadow-lg: 0 4px 10px rgb(var(--m-shadow-color) / 0.05), 0 24px 48px -12px rgb(var(--m-shadow-color) / 0.2);
  --m-ring: 0 0 0 var(--m-border-focus) color-mix(in srgb, var(--m-focus) 40%, transparent);
  color-scheme: light;
}

[data-theme="paper"] {
  --m-bg: #F4EEDF;
  --m-surface: #FAF5EA;
  --m-surface-sunken: #EFE7D4;
  --m-surface-muted: #E9E0CB;
  --m-surface-inverse: var(--m-lapis-950);
  --m-overlay: rgb(22 20 16 / 0.52);
  --m-text: #2C261D;
  --m-text-secondary: #4E4537;
  --m-text-muted: #665B49;
  --m-text-disabled: var(--m-stone-400);
  --m-text-inverse: var(--m-stone-25);
  --m-text-on-action: #FFFFFF;
  --m-heading: #1F1A13;
  --m-border: #DDD2BA;
  --m-border-strong: #CBBE9F;
  --m-border-input: #8E7F63;
  --m-action: var(--m-lapis-800);
  --m-action-hover: var(--m-lapis-900);
  --m-action-pressed: var(--m-lapis-950);
  --m-action-subtle: var(--m-lapis-50);
  --m-action-subtle-hover: var(--m-lapis-100);
  --m-action-subtle-text: var(--m-lapis-800);
  --m-brand: var(--m-kasaya-600);
  --m-brand-hover: var(--m-kasaya-700);
  --m-brand-subtle: var(--m-kasaya-50);
  --m-brand-text: var(--m-kasaya-700);
  --m-ornament: var(--m-gold-500);
  --m-ornament-subtle: var(--m-gold-100);
  --m-ornament-text: var(--m-gold-700);
  --m-link: var(--m-lapis-700);
  --m-link-hover: var(--m-lapis-900);
  --m-link-visited: var(--m-lapis-600);
  --m-focus: var(--m-lapis-500);
  --m-selection: var(--m-gold-200);
  --m-highlight: var(--m-gold-100);
  --m-info-bg: var(--m-lapis-50);
  --m-info-border: var(--m-lapis-200);
  --m-info-text: var(--m-lapis-800);
  --m-info-icon: var(--m-lapis-600);
  --m-success-bg: var(--m-jade-50);
  --m-success-border: var(--m-jade-200);
  --m-success-text: var(--m-jade-800);
  --m-success-icon: var(--m-jade-600);
  --m-warning-bg: var(--m-gold-50);
  --m-warning-border: var(--m-gold-300);
  --m-warning-text: var(--m-gold-800);
  --m-warning-icon: var(--m-gold-600);
  --m-danger-bg: var(--m-kasaya-50);
  --m-danger-border: var(--m-kasaya-200);
  --m-danger-text: var(--m-kasaya-800);
  --m-danger-icon: var(--m-kasaya-600);
  --m-practice-bg: #F1E6CC;
  --m-practice-border: var(--m-gold-300);
  --m-shadow-color: 37 33 28;
  --m-skeleton: #EAE1CC;
  --m-skeleton-shine: #F3ECDC;
  --m-img-dim: 1;
  color-scheme: light;
}

[data-theme="dark"] {
  --m-bg: #0D1220;
  --m-surface: #141A2A;
  --m-surface-sunken: #0A0F1A;
  --m-surface-muted: #1C2336;
  --m-surface-inverse: var(--m-stone-50);
  --m-overlay: rgb(3 6 14 / 0.66);
  --m-text: #E9E4D9;
  --m-text-secondary: #C9C2B4;
  --m-text-muted: #A39C8E;
  --m-text-disabled: #6B665E;
  --m-text-inverse: var(--m-stone-900);
  --m-text-on-action: var(--m-lapis-950);
  --m-heading: #F6F1E6;
  --m-border: #262E44;
  --m-border-strong: #353F59;
  --m-border-input: #6A7491;
  --m-action: var(--m-lapis-300);
  --m-action-hover: var(--m-lapis-200);
  --m-action-pressed: var(--m-lapis-100);
  --m-action-subtle: #1B2540;
  --m-action-subtle-hover: #24304F;
  --m-action-subtle-text: var(--m-lapis-200);
  --m-brand: var(--m-kasaya-400);
  --m-brand-hover: var(--m-kasaya-300);
  --m-brand-subtle: #2A1820;
  --m-brand-text: var(--m-kasaya-300);
  --m-ornament: var(--m-gold-400);
  --m-ornament-subtle: #2A2416;
  --m-ornament-text: var(--m-gold-300);
  --m-link: var(--m-lapis-300);
  --m-link-hover: var(--m-lapis-200);
  --m-link-visited: var(--m-lapis-400);
  --m-focus: var(--m-gold-300);
  --m-selection: #4A3F22;
  --m-highlight: #3A3220;
  --m-info-bg: #152039;
  --m-info-border: #2A3B63;
  --m-info-text: var(--m-lapis-200);
  --m-info-icon: var(--m-lapis-300);
  --m-success-bg: #112620;
  --m-success-border: #1F4537;
  --m-success-text: var(--m-jade-200);
  --m-success-icon: var(--m-jade-300);
  --m-warning-bg: #272012;
  --m-warning-border: #4D3E1C;
  --m-warning-text: var(--m-gold-200);
  --m-warning-icon: var(--m-gold-300);
  --m-danger-bg: #2A1419;
  --m-danger-border: #52232C;
  --m-danger-text: var(--m-kasaya-200);
  --m-danger-icon: var(--m-kasaya-300);
  --m-practice-bg: #1D1A14;
  --m-practice-border: #5A4A24;
  --m-shadow-color: 0 0 0;
  --m-skeleton: #1C2336;
  --m-skeleton-shine: #242C42;
  --m-img-dim: 0.92;
  color-scheme: dark;
}

/* ── tablet · từ 768px ── */
@media (min-width: 768px) {
  :root {
    --m-text-2xl: 1.375rem;
    --m-text-3xl: 1.75rem;
    --m-text-4xl: 2rem;
    --m-text-5xl: 2.5rem;
    --m-text-6xl: 3rem;
    --m-text-reading: 1.1875rem;
    --m-text-lead: 1.25rem;
    --m-space-section: 72px;
    --m-columns: 8;
    --m-margin: 32px;
    --m-gutter: 24px;
    --m-header-h: 64px;
    --m-tabbar-h: 64px;
  }
}

/* ── tablet-landscape · từ 992px ── */
@media (min-width: 992px) {
  :root {
    --m-text-2xl: 1.5rem;
    --m-text-3xl: 1.875rem;
    --m-text-4xl: 2.25rem;
    --m-text-5xl: 2.75rem;
    --m-text-6xl: 3.5rem;
    --m-text-reading: 1.25rem;
    --m-space-section: 80px;
    --m-columns: 12;
    --m-margin: 40px;
    --m-header-h: 72px;
    --m-tabbar-h: 0px;
  }
}

/* ── desktop · từ 1200px ── */
@media (min-width: 1200px) {
  :root {
    --m-text-4xl: 2.375rem;
    --m-text-5xl: 3rem;
    --m-text-6xl: 3.875rem;
    --m-space-section: 96px;
    --m-gutter: 32px;
    --m-header-h: 76px;
  }
}

/* Theme đặt cục bộ trên một vùng (vd. xem trước) cần tự đặt lại màu chữ */
[data-theme]:not(html) { color: var(--m-text); }

/* data-theme="auto" → theo cài đặt hệ điều hành */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --m-bg: #0D1220;
    --m-surface: #141A2A;
    --m-surface-sunken: #0A0F1A;
    --m-surface-muted: #1C2336;
    --m-surface-inverse: var(--m-stone-50);
    --m-overlay: rgb(3 6 14 / 0.66);
    --m-text: #E9E4D9;
    --m-text-secondary: #C9C2B4;
    --m-text-muted: #A39C8E;
    --m-text-disabled: #6B665E;
    --m-text-inverse: var(--m-stone-900);
    --m-text-on-action: var(--m-lapis-950);
    --m-heading: #F6F1E6;
    --m-border: #262E44;
    --m-border-strong: #353F59;
    --m-border-input: #6A7491;
    --m-action: var(--m-lapis-300);
    --m-action-hover: var(--m-lapis-200);
    --m-action-pressed: var(--m-lapis-100);
    --m-action-subtle: #1B2540;
    --m-action-subtle-hover: #24304F;
    --m-action-subtle-text: var(--m-lapis-200);
    --m-brand: var(--m-kasaya-400);
    --m-brand-hover: var(--m-kasaya-300);
    --m-brand-subtle: #2A1820;
    --m-brand-text: var(--m-kasaya-300);
    --m-ornament: var(--m-gold-400);
    --m-ornament-subtle: #2A2416;
    --m-ornament-text: var(--m-gold-300);
    --m-link: var(--m-lapis-300);
    --m-link-hover: var(--m-lapis-200);
    --m-link-visited: var(--m-lapis-400);
    --m-focus: var(--m-gold-300);
    --m-selection: #4A3F22;
    --m-highlight: #3A3220;
    --m-info-bg: #152039;
    --m-info-border: #2A3B63;
    --m-info-text: var(--m-lapis-200);
    --m-info-icon: var(--m-lapis-300);
    --m-success-bg: #112620;
    --m-success-border: #1F4537;
    --m-success-text: var(--m-jade-200);
    --m-success-icon: var(--m-jade-300);
    --m-warning-bg: #272012;
    --m-warning-border: #4D3E1C;
    --m-warning-text: var(--m-gold-200);
    --m-warning-icon: var(--m-gold-300);
    --m-danger-bg: #2A1419;
    --m-danger-border: #52232C;
    --m-danger-text: var(--m-kasaya-200);
    --m-danger-icon: var(--m-kasaya-300);
    --m-practice-bg: #1D1A14;
    --m-practice-border: #5A4A24;
    --m-shadow-color: 0 0 0;
    --m-skeleton: #1C2336;
    --m-skeleton-shine: #242C42;
    --m-img-dim: 0.92;
    color-scheme: dark;
  }
}


/* ═══════════ base.css ═══════════ */
/* Reset tối giản + mặc định toàn trang. Mọi màu lấy từ token ngữ nghĩa. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--m-header-h, 64px) + 16px);
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-sans);
  font-size: var(--m-text-md);
  line-height: var(--m-leading-normal);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
p, li, figcaption, blockquote, dd { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-bold);
  line-height: var(--m-leading-heading);
  letter-spacing: var(--m-tracking-display);
  color: var(--m-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
}
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--m-border); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
[hidden] { display: none !important; }

a {
  color: var(--m-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--m-duration-fast) var(--m-ease-standard), text-decoration-color var(--m-duration-fast);
}
a:hover { color: var(--m-link-hover); text-decoration-color: currentColor; }

::selection { background: var(--m-selection); color: var(--m-text); }

/* Vòng focus: chỉ hiện khi dùng bàn phím. Không bao giờ tắt outline mà không thay thế. */
:focus-visible {
  outline: var(--m-border-focus) solid var(--m-focus);
  outline-offset: 2px;
  border-radius: var(--m-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Liên kết "bỏ qua tới nội dung" — phần tử đầu tiên trong <body> */
.m-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--m-z-tooltip);
  padding: 10px 16px; border-radius: var(--m-radius-sm);
  background: var(--m-action); color: var(--m-text-on-action);
  font-weight: var(--m-weight-semibold); text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--m-duration-fast) var(--m-ease-out);
}
.m-skip-link:focus { transform: none; color: var(--m-text-on-action); }

/* Giảm chuyển động: tôn trọng cài đặt hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Chế độ tương phản cao của Windows */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

/* In ấn: chữ đen trên nền trắng, hiện URL liên kết trong bài */
@media print {
  :root { --m-bg: #fff; --m-surface: #fff; --m-text: #000; --m-heading: #000; }
  .m-no-print, .m-header, .m-tabbar, .m-footer, .m-reader-tools, .m-toast-region { display: none !important; }
  .m-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* ═══════════ layout.css ═══════════ */
/* Bố cục: container, stack, cluster, grid, lưới cột, split, section, hiện/ẩn theo thiết bị.
   Mọi khoảng cách bố cục lấy từ token theo thiết bị (tokens.json → layout, $extensions["mandala.responsive"]):
     --m-columns  4 · 8 · 12        (điện thoại · máy tính bảng · từ 992px)
     --m-margin   16 · 32 · 40px    lề trang
     --m-gutter   16 · 24 · 32px    khoảng giữa cột / thẻ
   Mốc: điện thoại < 768 ≤ máy tính bảng dọc < 992 ≤ máy tính bảng ngang < 1200 ≤ máy tính. */

.m-container {
  width: 100%;
  max-width: calc(var(--m-size-content) + 2 * var(--m-margin));
  margin-inline: auto;
  /* Lề trang, nhưng không nhỏ hơn vùng an toàn của tai thỏ khi điện thoại xoay ngang */
  padding-inline: max(var(--m-margin), env(safe-area-inset-left)) max(var(--m-margin), env(safe-area-inset-right));
}
.m-container--wide    { max-width: calc(var(--m-size-wide) + 2 * var(--m-margin)); }
.m-container--reading { max-width: calc(var(--m-size-reading) + 2 * var(--m-margin)); }

/* Tràn ra mép màn hình trên điện thoại (ảnh lớn, dải cuộn) — bỏ lề trang hai bên */
@media (max-width: 767.98px) {
  .m-bleed-mobile { margin-inline: calc(var(--m-margin) * -1); border-radius: 0 !important; }
  .m-bleed-mobile > img, .m-bleed-mobile img:only-child { border-radius: 0 !important; }
}

/* Stack: xếp dọc với khoảng cách đều. Đổi khoảng cách: style="--m-gap: var(--m-space-8)" hoặc lớp bổ trợ */
.m-stack { display: flex; flex-direction: column; gap: var(--m-gap, var(--m-space-4)); }
.m-stack > * { min-width: 0; }
.m-gap-1 { --m-gap: var(--m-space-1); } .m-gap-2 { --m-gap: var(--m-space-2); } .m-gap-3 { --m-gap: var(--m-space-3); }
.m-gap-4 { --m-gap: var(--m-space-4); } .m-gap-5 { --m-gap: var(--m-space-5); } .m-gap-6 { --m-gap: var(--m-space-6); }
.m-gap-8 { --m-gap: var(--m-space-8); } .m-gap-10 { --m-gap: var(--m-space-10); } .m-gap-12 { --m-gap: var(--m-space-12); }
.m-gap-16 { --m-gap: var(--m-space-16); }
.m-gap-gutter { --m-gap: var(--m-gutter); }

/* Cluster: xếp ngang, tự xuống dòng */
.m-cluster {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--m-gap, var(--m-space-3));
}
.m-cluster--between { justify-content: space-between; }
.m-cluster--end { justify-content: flex-end; }
.m-cluster--start { align-items: flex-start; }
.m-cluster--nowrap { flex-wrap: nowrap; }
/* Trên điện thoại: các nút trong cluster giãn đều hết hàng (vd. cặp nút "Hủy / Gửi") */
@media (max-width: 575.98px) { .m-cluster--fill-mobile > * { flex: 1 1 0; } }

/* ── Khoảng cách lưới thẻ theo thiết bị: hàng 24 · 32 · 40px, cột = --m-gutter ── */
:root { --m-grid-gap: calc(var(--m-gutter) + var(--m-space-2)) var(--m-gutter); }

/* Grid tự co: số cột tự tính theo độ rộng tối thiểu --m-min */
.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--m-min, 260px), 100%), 1fr));
  gap: var(--m-gap, var(--m-grid-gap));
}
/* --fit: các ô giãn ra lấp đầy hàng (ít ô thì ô to hơn), thay vì chừa cột trống */
.m-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--m-min, 260px), 100%), 1fr)); }

/* Grid số cột cố định — số cột trên từng thiết bị:
                   điện thoại   ≥576   máy tính bảng ≥768   ≥992
   .m-grid-2           1          2           2               2
   .m-grid-3           1          1           3               3
   .m-grid-4           1          2           2               4
   .m-grid-2-mobile    2          2           2               2      */
.m-grid-2, .m-grid-3, .m-grid-4 { display: grid; gap: var(--m-gap, var(--m-grid-gap)); grid-template-columns: minmax(0, 1fr); }
.m-grid-2-mobile { display: grid; gap: var(--m-gap, var(--m-gutter)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .m-grid-2, .m-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .m-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .m-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m-span-full { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────────────
   LƯỚI CỘT 4 · 8 · 12 — khi cần căn đúng cột như bản thiết kế
   <div class="m-layout">
     <div class="m-col-md-5 m-col-lg-8">Nội dung</div>
     <aside class="m-col-md-3 m-col-lg-4">Cột phụ</aside>
   </div>
   Mặc định mỗi phần tử chiếm hết hàng. Hậu tố: (không) = điện thoại 4 cột · md = máy tính bảng 8 cột ·
   lg = từ 992px 12 cột · xl = máy tính 12 cột.
   ───────────────────────────────────────────────────── */
.m-layout {
  display: grid;
  grid-template-columns: repeat(var(--m-columns), minmax(0, 1fr));
  column-gap: var(--m-gutter);
  row-gap: var(--m-gap, var(--m-gutter));
}
.m-layout > * { grid-column: 1 / -1; min-width: 0; }
.m-layout > .m-col-1 { grid-column: span 1; } .m-layout > .m-col-2 { grid-column: span 2; }
.m-layout > .m-col-3 { grid-column: span 3; } .m-layout > .m-col-4 { grid-column: span 4; }
@media (min-width: 768px) {
  .m-layout > .m-col-md-1 { grid-column: span 1; } .m-layout > .m-col-md-2 { grid-column: span 2; }
  .m-layout > .m-col-md-3 { grid-column: span 3; } .m-layout > .m-col-md-4 { grid-column: span 4; }
  .m-layout > .m-col-md-5 { grid-column: span 5; } .m-layout > .m-col-md-6 { grid-column: span 6; }
  .m-layout > .m-col-md-7 { grid-column: span 7; } .m-layout > .m-col-md-8 { grid-column: span 8; }
  .m-layout > .m-col-md-full { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .m-layout > .m-col-lg-1 { grid-column: span 1; } .m-layout > .m-col-lg-2 { grid-column: span 2; }
  .m-layout > .m-col-lg-3 { grid-column: span 3; } .m-layout > .m-col-lg-4 { grid-column: span 4; }
  .m-layout > .m-col-lg-5 { grid-column: span 5; } .m-layout > .m-col-lg-6 { grid-column: span 6; }
  .m-layout > .m-col-lg-7 { grid-column: span 7; } .m-layout > .m-col-lg-8 { grid-column: span 8; }
  .m-layout > .m-col-lg-9 { grid-column: span 9; } .m-layout > .m-col-lg-10 { grid-column: span 10; }
  .m-layout > .m-col-lg-11 { grid-column: span 11; } .m-layout > .m-col-lg-12, .m-layout > .m-col-lg-full { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .m-layout > .m-col-xl-2 { grid-column: span 2; } .m-layout > .m-col-xl-3 { grid-column: span 3; }
  .m-layout > .m-col-xl-4 { grid-column: span 4; } .m-layout > .m-col-xl-5 { grid-column: span 5; }
  .m-layout > .m-col-xl-6 { grid-column: span 6; } .m-layout > .m-col-xl-7 { grid-column: span 7; }
  .m-layout > .m-col-xl-8 { grid-column: span 8; } .m-layout > .m-col-xl-9 { grid-column: span 9; }
  .m-layout > .m-col-xl-full { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────────────
   SPLIT: nội dung chính + cột phụ.
   Mặc định tách 2 cột từ 992px (máy tính bảng ngang). Dưới mốc đó cột phụ xuống dưới
   (hoặc lên trên với .m-split__aside--first).
   .m-split--tablet: tách ngay từ 768px — dùng khi cột phụ hẹp (bộ lọc, mục lục ngắn).
   Độ rộng cột phụ: --m-aside (mặc định 320px; trên máy tính bảng dọc tự thu còn --m-aside-tablet, mặc định 220px).
   ───────────────────────────────────────────────────── */
.m-split {
  display: grid; gap: var(--m-gap, calc(var(--m-gutter) * 2));
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .m-split--tablet { grid-template-columns: minmax(0, 1fr) var(--m-aside-tablet, 220px); }
  .m-split--tablet.m-split--left { grid-template-columns: var(--m-aside-tablet, 220px) minmax(0, 1fr); }
  .m-split--tablet .m-split__aside--sticky { position: sticky; top: calc(var(--m-header-h) + var(--m-space-6)); align-self: start; }
}
@media (min-width: 992px) {
  .m-split { grid-template-columns: minmax(0, 1fr) var(--m-aside, 320px); }
  .m-split--left, .m-split--tablet.m-split--left { grid-template-columns: var(--m-aside, 260px) minmax(0, 1fr); }
  .m-split--tablet { grid-template-columns: minmax(0, 1fr) var(--m-aside, 320px); }
  .m-split__aside--sticky { position: sticky; top: calc(var(--m-header-h) + var(--m-space-6)); align-self: start; }
}
/* Cột phụ lên trước khi xếp dọc (vd. thẻ đăng ký sự kiện) */
@media (max-width: 991.98px) { .m-split:not(.m-split--tablet) > .m-split__aside--first { order: -1; } }
@media (max-width: 767.98px) { .m-split--tablet > .m-split__aside--first { order: -1; } }

/* ── Section: khoảng cách khối lớn 48 · 72 · 80 · 96px (token --m-space-section) ── */
.m-section { padding-block: var(--m-space-section); }
.m-section--tight { padding-block: calc(var(--m-space-section) * 0.6); }
.m-section--sunken { background: var(--m-surface-sunken); }
/* Hai khối nền giống nhau liền kề: không nhân đôi khoảng cách */
.m-section:not(.m-section--sunken):not(.m-section--inverse) + .m-section:not(.m-section--sunken):not(.m-section--inverse) { padding-top: 0; }
.m-section--sunken + .m-section--sunken { padding-top: 0; }
.m-section--inverse { background: var(--m-surface-inverse); color: var(--m-text-inverse); }
.m-section--inverse :is(h1, h2, h3, h4) { color: var(--m-text-inverse); }

.m-center { margin-inline: auto; text-align: center; }
.m-measure { max-width: 62ch; }

/* Tỉ lệ khung hình: 16:9 mặc định. Ví dụ: style="--m-ratio: 4/3" */
.m-ratio { aspect-ratio: var(--m-ratio, 16 / 9); overflow: hidden; }
.m-ratio > :is(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; }

/* Chỉ hiển thị với trình đọc màn hình */
.m-sr-only, .m-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────
   HIỆN / ẨN THEO THIẾT BỊ
   .m-show-mobile   chỉ điện thoại (< 768)          .m-hide-on-mobile   ẩn trên điện thoại
   .m-show-tablet   chỉ máy tính bảng (768–1199)    .m-hide-on-tablet   ẩn trên máy tính bảng
   .m-show-desktop  chỉ máy tính (≥ 1200)           .m-hide-on-desktop  ẩn trên máy tính
   .m-show-compact  khi dùng thanh tab (< 992)      .m-show-expanded    khi có menu ngang (≥ 992)
   (Tương thích bản 1.0: .m-hide-mobile = .m-show-expanded · .m-hide-desktop = .m-show-compact)
   ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) { .m-show-tablet, .m-show-desktop, .m-hide-on-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .m-show-mobile, .m-show-desktop, .m-hide-on-tablet { display: none !important; } }
@media (min-width: 1200px) { .m-show-mobile, .m-show-tablet, .m-hide-on-desktop { display: none !important; } }
@media (max-width: 991.98px) { .m-show-expanded, .m-hide-mobile { display: none !important; } }
@media (min-width: 992px) { .m-show-compact, .m-hide-desktop { display: none !important; } }

/* ═══════════ typography.css ═══════════ */
/* Kiểu chữ — 9 kiểu, đặt tên theo VAI TRÒ, không theo cỡ. Dùng lớp này thay vì h1…h6 khi cần tách ngữ nghĩa khỏi hình thức. */

.m-display, .m-h1, .m-h2, .m-h3, .m-h4, .m-title {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-bold);
  letter-spacing: var(--m-tracking-display);
  line-height: var(--m-leading-heading);
  color: var(--m-heading);
  text-wrap: balance;
}
.m-display { font-size: var(--m-text-6xl); font-weight: var(--m-weight-semibold); line-height: 1.18; letter-spacing: -0.02em; }
.m-h1      { font-size: var(--m-text-5xl); }
.m-h2      { font-size: var(--m-text-4xl); }
.m-h3      { font-size: var(--m-text-2xl); }
.m-h4      { font-size: var(--m-text-xl); }
.m-title   { font-size: var(--m-text-lg); line-height: 1.32; }     /* tiêu đề thẻ */

.m-lead    { font-size: var(--m-text-lead); line-height: 1.5; color: var(--m-text-secondary); text-wrap: pretty; }
.m-body    { font-size: var(--m-text-md); line-height: var(--m-leading-normal); }
.m-body-sm { font-size: var(--m-text-sm); line-height: var(--m-leading-normal); }
.m-caption { font-size: var(--m-text-sm); line-height: var(--m-leading-snug); color: var(--m-text-muted); }
.m-overline {
  font-family: var(--m-font-sans);
  font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold);
  letter-spacing: var(--m-tracking-caps); text-transform: uppercase;
  line-height: 1.4; color: var(--m-ornament-text);
}
.m-numeral { font-family: var(--m-font-display); font-variant-numeric: tabular-nums lining-nums; line-height: 1; letter-spacing: -0.02em; }
.m-serif   { font-family: var(--m-font-serif); }
.m-muted   { color: var(--m-text-muted); }
.m-secondary { color: var(--m-text-secondary); }
.m-tabular { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   PROSE — thân bài đọc dài (bài viết, pháp thoại, chương sách).
   Bọc nội dung từ CKEditor/Drupal trong <div class="m-prose">.
   Cỡ chữ = token reading × --m-reading-scale (do Thanh công cụ đọc điều khiển).
   ───────────────────────────────────────────────────────────── */
.m-prose {
  --m-prose-size: calc(var(--m-text-reading) * var(--m-reading-scale, 1));
  font-family: var(--m-reading-font, var(--m-font-sans));
  font-size: var(--m-prose-size);
  line-height: var(--m-leading-reading);
  color: var(--m-text);
  max-width: var(--m-size-reading);
}
.m-prose--serif { --m-reading-font: var(--m-font-serif); }
[data-reading-font="serif"] .m-prose { --m-reading-font: var(--m-font-serif); }

.m-prose > * + * { margin-top: 1.1em; }
.m-prose > :first-child { margin-top: 0; }

.m-prose :is(h2, h3, h4) { scroll-margin-top: calc(var(--m-header-h, 64px) + 24px); }
.m-prose h2 { font-size: 1.4em; margin-top: 2em; }
.m-prose h3 { font-size: 1.18em; margin-top: 1.75em; }
.m-prose h4 { font-size: 1em; margin-top: 1.5em; font-family: var(--m-font-sans); letter-spacing: 0; }
.m-prose :is(h2, h3, h4) + * { margin-top: 0.6em; }

.m-prose .m-prose__lead, .m-prose > .lead {
  font-size: 1.12em; line-height: 1.6; color: var(--m-text-secondary);
}
.m-prose strong, .m-prose b { font-weight: var(--m-weight-semibold); color: var(--m-heading); }
.m-prose a:not(.m-btn):not(.m-tag) { color: var(--m-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.m-prose a:not(.m-btn):not(.m-tag):visited { color: var(--m-link-visited); }

.m-prose :is(ul, ol) { padding-left: 1.4em; }
.m-prose li + li { margin-top: 0.4em; }
.m-prose li::marker { color: var(--m-ornament); }
.m-prose ol > li::marker { font-weight: var(--m-weight-semibold); color: var(--m-text-muted); font-variant-numeric: tabular-nums; }

.m-prose blockquote {
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid var(--m-ornament);
  color: var(--m-text-secondary);
  font-family: var(--m-font-serif);
  font-style: italic;
}
.m-prose blockquote cite, .m-prose blockquote footer {
  display: block; margin-top: 0.6em;
  font: normal var(--m-weight-medium) 0.8em/1.4 var(--m-font-sans); color: var(--m-text-muted);
}
.m-prose blockquote cite::before, .m-prose blockquote footer::before { content: "— "; }

.m-prose figure { margin-block: 1.75em; }
.m-prose img { border-radius: var(--m-radius-lg); filter: brightness(var(--m-img-dim)); }
.m-prose figcaption {
  margin-top: 0.7em; padding-left: 0.85em;
  border-left: 2px solid var(--m-border-strong);
  font-size: var(--m-text-sm); line-height: 1.5; color: var(--m-text-muted);
}
.m-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--m-radius-lg); }

.m-prose hr {
  margin-block: 2.25em; border: 0; height: 14px;
  background: var(--m-ornament);
  -webkit-mask: var(--m-ornament-divider) center / auto 14px no-repeat;
          mask: var(--m-ornament-divider) center / auto 14px no-repeat;
}

.m-prose table { width: 100%; font-size: 0.88em; line-height: 1.5; }
.m-prose th, .m-prose td { padding: 0.6em 0.75em; border-bottom: 1px solid var(--m-border); text-align: left; vertical-align: top; }
.m-prose th { font-weight: var(--m-weight-semibold); color: var(--m-heading); border-bottom-width: 2px; }

.m-prose :is(dfn, .m-term) {
  font-style: normal;
  text-decoration: underline dotted color-mix(in srgb, var(--m-ornament) 80%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  cursor: help;
}
.m-prose mark { background: var(--m-highlight); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.m-prose sup a { text-decoration: none; font-weight: var(--m-weight-semibold); padding-inline: 0.15em; }
.m-prose small, .m-prose .m-footnotes { font-size: 0.82em; color: var(--m-text-muted); }

/* Đoạn văn được đọc to (Nghe bài) */
.m-prose .is-speaking {
  background: var(--m-highlight);
  box-shadow: 0 0 0 0.35em var(--m-highlight);
  border-radius: 2px;
  transition: background var(--m-duration-base);
}

/* Biểu tượng hoa văn dùng chung (mask, tô màu bằng background) */
:root {
  --m-ornament-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14' viewBox='0 0 132 14'%3E%3Cpath d='M0 7h48M84 7h48' stroke='black' stroke-width='1'/%3E%3Ccircle cx='52' cy='7' r='1.3'/%3E%3Ccircle cx='80' cy='7' r='1.3'/%3E%3Cpath d='M66 1.5c2.2 2 3.3 3.8 3.3 5.5S68.2 10.5 66 12.5c-2.2-2-3.3-3.8-3.3-5.5S63.8 3.5 66 1.5z' fill='none' stroke='black' stroke-width='1.1'/%3E%3Cpath d='M62.6 5.2c-1.6-.4-3-.2-3.9.2.2 2.8 2.2 4.8 5.6 5.3M69.4 5.2c1.6-.4 3-.2 3.9.2-.2 2.8-2.2 4.8-5.6 5.3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
  --m-ornament-mandala: url("../img/mandala-b276e0e26853.svg");
}

/* ═══════════ components/01-icon-button.css ═══════════ */
/* ── Icon ─────────────────────────────────────────────
   <svg class="m-icon" aria-hidden="true"><use href="/path/dist/icons.svg#i-search"/></svg>
   Cỡ: mặc định 1.25em theo chữ xung quanh; --sm 16 · --md 20 · --lg 24 · --xl 32 */
.m-icon {
  display: inline-block; flex: none;
  width: var(--m-icon-size, 1.25em); height: var(--m-icon-size, 1.25em);
  vertical-align: -0.25em;
  stroke-width: var(--m-icon-stroke, 1.75);
}
.m-icon--sm { --m-icon-size: 16px; --m-icon-stroke: 2; }
.m-icon--md { --m-icon-size: 20px; }
.m-icon--lg { --m-icon-size: 24px; }
.m-icon--xl { --m-icon-size: 32px; --m-icon-stroke: 1.5; }
.m-icon--2xl { --m-icon-size: 48px; --m-icon-stroke: 1.25; }

/* Huy hiệu biểu tượng: biểu tượng trong ô tròn nền nhạt */
.m-icon-badge {
  display: inline-grid; place-items: center; flex: none;
  width: var(--m-icon-badge, 44px); height: var(--m-icon-badge, 44px);
  border-radius: var(--m-radius-full);
  background: var(--m-ornament-subtle); color: var(--m-ornament-text);
}
.m-icon-badge--lapis { background: var(--m-action-subtle); color: var(--m-action-subtle-text); }
.m-icon-badge--brand { background: var(--m-brand-subtle); color: var(--m-brand-text); }
.m-icon-badge--lg { --m-icon-badge: 56px; }
.m-icon-badge .m-icon { --m-icon-size: calc(var(--m-icon-badge, 44px) * 0.5); }

/* ── Button ────────────────────────────────────────────
   Thứ bậc: primary (1 nút/khối) → secondary → subtle → ghost → link.
   brand (đỏ) chỉ cho hành động mang tính nghi lễ/sự kiện nổi bật, tối đa 1 nút/màn hình. */
.m-btn {
  --m-btn-h: var(--m-size-control-md);
  --m-btn-px: 20px;
  --m-btn-bg: var(--m-action);
  --m-btn-fg: var(--m-text-on-action);
  --m-btn-bd: transparent;
  --m-btn-bg-hover: var(--m-action-hover);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--m-btn-h);
  padding: 0 var(--m-btn-px);
  border: 1px solid var(--m-btn-bd);
  border-radius: var(--m-radius-full);
  background: var(--m-btn-bg); color: var(--m-btn-fg);
  font-family: var(--m-font-sans); font-size: var(--m-text-md); font-weight: var(--m-weight-semibold);
  line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--m-duration-fast) var(--m-ease-standard),
              border-color var(--m-duration-fast) var(--m-ease-standard),
              color var(--m-duration-fast) var(--m-ease-standard),
              transform var(--m-duration-instant) var(--m-ease-standard);
}
.m-btn:hover { background: var(--m-btn-bg-hover); color: var(--m-btn-fg); }
.m-btn:active { transform: scale(0.98); }
.m-btn:focus-visible { outline-offset: 3px; border-radius: var(--m-radius-full); }
.m-btn .m-icon { --m-icon-size: 1.15em; margin-inline: -2px; }

.m-btn--secondary {
  --m-btn-bg: var(--m-surface); --m-btn-fg: var(--m-heading);
  --m-btn-bd: var(--m-border-strong); --m-btn-bg-hover: var(--m-surface-sunken);
}
.m-btn--secondary:hover { border-color: var(--m-border-input); }
.m-btn--subtle {
  --m-btn-bg: var(--m-action-subtle); --m-btn-fg: var(--m-action-subtle-text);
  --m-btn-bg-hover: var(--m-action-subtle-hover);
}
.m-btn--ghost {
  --m-btn-bg: transparent; --m-btn-fg: var(--m-text-secondary);
  --m-btn-bg-hover: var(--m-surface-muted);
}
.m-btn--ghost:hover { color: var(--m-heading); }
.m-btn--brand { --m-btn-bg: var(--m-brand); --m-btn-fg: #fff; --m-btn-bg-hover: var(--m-brand-hover); }
[data-theme="dark"] .m-btn--brand { --m-btn-fg: var(--m-kasaya-950); }
.m-btn--danger {
  --m-btn-bg: var(--m-surface); --m-btn-fg: var(--m-danger-text);
  --m-btn-bd: var(--m-danger-border); --m-btn-bg-hover: var(--m-danger-bg);
}
.m-btn--inverse { --m-btn-bg: #fff; --m-btn-fg: var(--m-lapis-900); --m-btn-bg-hover: var(--m-stone-100); }
.m-btn--on-image {
  --m-btn-bg: rgb(255 255 255 / 0.16); --m-btn-fg: #fff; --m-btn-bd: rgb(255 255 255 / 0.5);
  --m-btn-bg-hover: rgb(255 255 255 / 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.m-btn--sm { --m-btn-h: var(--m-size-control-sm); --m-btn-px: 14px; font-size: var(--m-text-sm); gap: 6px; }
.m-btn--lg { --m-btn-h: var(--m-size-control-lg); --m-btn-px: 28px; font-size: var(--m-text-lg); }
.m-btn--block { display: flex; width: 100%; }
.m-btn--icon { --m-btn-px: 0; width: var(--m-btn-h); }
.m-btn--icon .m-icon { --m-icon-size: 20px; margin: 0; }

.m-btn:disabled, .m-btn[aria-disabled="true"] {
  --m-btn-bg: var(--m-surface-muted); --m-btn-fg: var(--m-text-disabled); --m-btn-bd: transparent;
  --m-btn-bg-hover: var(--m-surface-muted);
  cursor: not-allowed; transform: none;
}
/* Đang xử lý: <button class="m-btn" aria-busy="true"> */
.m-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.m-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  border: 2px solid var(--m-btn-fg); border-right-color: transparent;
  animation: m-spin 0.8s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* Nhóm nút */
.m-btn-group { display: flex; flex-wrap: wrap; gap: var(--m-space-3); align-items: center; }

/* ── Link có mũi tên ("Xem tất cả →") ── */
.m-link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--m-weight-semibold); font-size: var(--m-text-md);
  color: var(--m-link); text-decoration: none;
  padding-block: 6px;  /* tăng vùng chạm */
}
.m-link-arrow .m-icon { --m-icon-size: 1.1em; transition: transform var(--m-duration-base) var(--m-ease-out); }
.m-link-arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.m-link-arrow:hover .m-icon { transform: translateX(3px); }

/* Liên kết phủ toàn thẻ: đặt .m-stretched trên <a> chính; phần tử bấm khác trong thẻ cần position:relative; z-index:1 */
.m-stretched::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }

/* ═══════════ components/02-badge-tag-chip.css ═══════════ */
/* ── Badge: trạng thái ngắn (1–3 từ). Không bấm được. ──
   <span class="m-badge m-badge--success">Đang mở đăng ký</span> */
.m-badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 10px;
  border-radius: var(--m-radius-full);
  background: var(--m-surface-muted); color: var(--m-text-secondary);
  font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); line-height: 1.3;
  white-space: nowrap; vertical-align: middle;
  width: fit-content; /* không bị kéo giãn trong cột flex */
}
.m-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.m-badge--info    { background: var(--m-info-bg); color: var(--m-info-text); }
.m-badge--success { background: var(--m-success-bg); color: var(--m-success-text); }
.m-badge--warning { background: var(--m-warning-bg); color: var(--m-warning-text); }
.m-badge--danger  { background: var(--m-danger-bg); color: var(--m-danger-text); }
.m-badge--gold    { background: var(--m-ornament-subtle); color: var(--m-ornament-text); }
.m-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--m-border-strong); }
.m-badge--on-image { background: rgb(15 18 28 / 0.62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m-badge .m-icon { --m-icon-size: 14px; --m-icon-stroke: 2; }

/* ── Tag: chủ đề / phân loại, là liên kết ── */
.m-tag {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); line-height: 1.4;
  color: var(--m-brand-text); text-decoration: none;
}
a.m-tag:hover { text-decoration: underline; text-underline-offset: 0.2em; color: var(--m-brand-hover); }
.m-tag--pill {
  padding: 4px 12px; border-radius: var(--m-radius-full);
  background: var(--m-surface-sunken); color: var(--m-text-secondary);
  box-shadow: inset 0 0 0 1px var(--m-border);
}
a.m-tag--pill:hover { background: var(--m-surface-muted); color: var(--m-heading); text-decoration: none; }

/* ── Chip: lọc / chọn nhanh, có trạng thái bật-tắt ──
   <button class="m-chip" aria-pressed="false">Pháp thoại</button> */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--m-border-strong); border-radius: var(--m-radius-full);
  background: var(--m-surface); color: var(--m-text-secondary);
  font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--m-duration-fast), border-color var(--m-duration-fast), color var(--m-duration-fast);
}
.m-chip:hover { border-color: var(--m-border-input); color: var(--m-heading); }
.m-chip[aria-pressed="true"], .m-chip[aria-selected="true"], .m-chip[aria-current], .m-chip.is-active {
  background: var(--m-action); border-color: var(--m-action); color: var(--m-text-on-action);
}
.m-chip[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; margin-left: -4px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-chip__count { font-variant-numeric: tabular-nums; color: var(--m-text-muted); font-weight: var(--m-weight-regular); }
.m-chip[aria-pressed="true"] .m-chip__count, .m-chip.is-active .m-chip__count { color: inherit; }
.m-chip .m-icon { --m-icon-size: 16px; }

/* Hàng chip cuộn ngang trên điện thoại (một hàng, tràn ra mép phải màn hình), tự xuống dòng từ 768px.
   Mép mờ "còn nữa" do JS thêm (.is-overflow-start/-end) — chỉ hiện khi thật sự còn chip bị khuất. */
.m-chip-row { display: flex; gap: var(--m-space-2); flex-wrap: wrap; }
@media (max-width: 767.98px) {
  .m-chip-row--scroll {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--m-margin) * -1); padding-inline: var(--m-margin);
    scroll-padding-inline: var(--m-margin);
  }
  .m-chip-row--scroll::-webkit-scrollbar { display: none; }
  .m-chip-row--scroll > * { flex: none; }
  /* Đặt cạnh một nút (vd. "Lọc") — chỉ tràn ra mép phải */
  .m-cluster > .m-chip-row--scroll { flex: 1; min-width: 0; margin-left: 0; padding-left: 0; }
}

/* ── Meta: dòng thông tin phụ cách nhau bằng dấu chấm giữa ──
   <div class="m-meta"><a class="m-tag">Pháp thoại</a><span>5 phút đọc</span></div> */
.m-meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 2px;
  font-size: var(--m-text-sm); line-height: 1.45; color: var(--m-text-muted);
}
.m-meta > * + *::before {
  content: "·"; display: inline-block; margin-inline: 8px; color: var(--m-text-disabled); font-weight: var(--m-weight-bold);
}
.m-meta > .m-meta__break { flex-basis: 100%; height: 0; }
.m-meta > .m-meta__break + *::before, .m-meta > .m-meta__break::before { content: none; }
.m-meta .m-icon { --m-icon-size: 15px; margin-right: 4px; vertical-align: -0.2em; }
.m-meta time { font-variant-numeric: tabular-nums; }

/* ═══════════ components/03-form.css ═══════════ */
/* ── Form ──────────────────────────────────────────────
   Cấu trúc trường:
   <div class="m-field">
     <label class="m-label" for="ten">Họ và tên <span class="m-label__req">bắt buộc</span></label>
     <p class="m-hint" id="ten-hint">Ghi đúng như trên CCCD để Ban tổ chức xác nhận.</p>
     <input class="m-input" id="ten" aria-describedby="ten-hint">
     <p class="m-error" id="ten-err">…</p>   ← thêm aria-invalid="true" + aria-describedby khi lỗi
   </div>
   Nhãn luôn hiển thị (không dùng placeholder thay nhãn). Ô cao 48px cho người lớn tuổi. */

.m-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-field + .m-field { margin-top: var(--m-space-5); }
.m-label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: var(--m-text-md); font-weight: var(--m-weight-semibold); line-height: 1.4;
  color: var(--m-heading);
}
.m-label__req, .m-label__opt { font-size: var(--m-text-xs); font-weight: var(--m-weight-medium); color: var(--m-text-muted); }
.m-label__req { color: var(--m-brand-text); }
.m-hint { font-size: var(--m-text-sm); line-height: 1.5; color: var(--m-text-muted); }
.m-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); line-height: 1.45; color: var(--m-danger-text);
}
.m-error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--m-danger-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.m-input, .m-select, .m-textarea {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--m-border-input); border-radius: var(--m-radius-md);
  background: var(--m-surface); color: var(--m-text);
  font-size: var(--m-text-md); line-height: 1.5;
  transition: border-color var(--m-duration-fast), box-shadow var(--m-duration-fast), background-color var(--m-duration-fast);
  appearance: none; -webkit-appearance: none;
}
.m-textarea { min-height: 120px; resize: vertical; }
.m-input::placeholder, .m-textarea::placeholder { color: var(--m-text-muted); opacity: 0.85; }
.m-input:hover, .m-select:hover, .m-textarea:hover { border-color: var(--m-text-muted); }
.m-input:focus, .m-select:focus, .m-textarea:focus {
  outline: none; border-color: var(--m-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-focus) 28%, transparent);
}
.m-input[aria-invalid="true"], .m-select[aria-invalid="true"], .m-textarea[aria-invalid="true"] {
  border-color: var(--m-danger-icon);
  box-shadow: 0 0 0 1px var(--m-danger-icon);
}
.m-input:disabled, .m-select:disabled, .m-textarea:disabled {
  background: var(--m-surface-sunken); color: var(--m-text-disabled); border-color: var(--m-border); cursor: not-allowed;
}
.m-input[readonly] { background: var(--m-surface-sunken); }
.m-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6255' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
[data-theme="dark"] .m-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A39C8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.m-input--sm, .m-select--sm { min-height: 40px; padding-block: 7px; font-size: var(--m-text-sm); }

/* Ô có biểu tượng hoặc nút ở trong */
.m-input-group { position: relative; display: flex; align-items: center; }
.m-input-group > .m-icon {
  position: absolute; left: 14px; pointer-events: none; color: var(--m-text-muted); --m-icon-size: 20px;
}
.m-input-group > .m-icon ~ .m-input { padding-left: 44px; }
.m-input-group > .m-input-group__end { position: absolute; right: 4px; }
.m-input-group > .m-input-group__end ~ .m-input, .m-input-group:has(.m-input-group__end) .m-input { padding-right: 52px; }

/* Ô tìm kiếm lớn */
.m-search { position: relative; display: flex; align-items: center; }
.m-search .m-input {
  min-height: 52px; padding-left: 48px; padding-right: 112px;
  border-radius: var(--m-radius-full); font-size: var(--m-text-lg);
}
.m-search > .m-icon { position: absolute; left: 18px; --m-icon-size: 22px; color: var(--m-text-muted); pointer-events: none; }
.m-search .m-btn { position: absolute; right: 5px; --m-btn-h: 42px; }
.m-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Checkbox & Radio ──
   <label class="m-check"><input type="checkbox"> <span>Tôi đồng ý…</span></label> */
.m-check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding-block: 10px;
  font-size: var(--m-text-md); line-height: 1.45; color: var(--m-text); cursor: pointer;
}
.m-check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0; margin-top: 0.05em;
  border: 1.5px solid var(--m-border-input); border-radius: 6px;
  background: var(--m-surface) center / 16px no-repeat;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--m-duration-fast), border-color var(--m-duration-fast);
}
.m-check input[type="radio"] { border-radius: 50%; }
.m-check:hover input:not(:disabled) { border-color: var(--m-action); }
.m-check input:checked { background-color: var(--m-action); border-color: var(--m-action); }
.m-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.m-check input[type="radio"]:checked { box-shadow: inset 0 0 0 5px var(--m-surface); }
[data-theme="dark"] .m-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1931' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.m-check input:focus-visible { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 2px; }
.m-check input:disabled + * { color: var(--m-text-disabled); }
.m-check__desc { display: block; font-size: var(--m-text-sm); color: var(--m-text-muted); margin-top: 2px; }

/* Lựa chọn dạng thẻ (radio lớn): <label class="m-choice"><input type="radio" name="x"><span>…</span></label> */
.m-choice {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--m-border-strong); border-radius: var(--m-radius-lg);
  background: var(--m-surface); cursor: pointer;
  transition: border-color var(--m-duration-fast), background-color var(--m-duration-fast), box-shadow var(--m-duration-fast);
}
.m-choice:hover { border-color: var(--m-border-input); }
.m-choice:has(input:checked) { border-color: var(--m-action); background: var(--m-action-subtle); box-shadow: inset 0 0 0 1px var(--m-action); }
.m-choice:has(input:focus-visible) { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 2px; }
.m-choice input { position: absolute; opacity: 0; pointer-events: none; }
.m-choice__title { display: block; font-weight: var(--m-weight-semibold); color: var(--m-heading); }
.m-choice__desc { display: block; font-size: var(--m-text-sm); color: var(--m-text-muted); margin-top: 2px; }

/* ── Switch ──
   <label class="m-switch"><input type="checkbox" role="switch"> <span>Dịu mắt</span></label> */
.m-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: var(--m-text-md); }
.m-switch input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: var(--m-border-input); cursor: pointer;
  transition: background-color var(--m-duration-base) var(--m-ease-standard);
}
.m-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform var(--m-duration-base) var(--m-ease-out);
}
.m-switch input:checked { background: var(--m-action); }
.m-switch input:checked::after { transform: translateX(18px); }
.m-switch input:focus-visible { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 2px; }

/* Nhóm trường (fieldset) */
.m-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.m-fieldset > legend { padding: 0; margin-bottom: 8px; font-weight: var(--m-weight-semibold); color: var(--m-heading); font-size: var(--m-text-md); }
.m-form-row { display: grid; gap: var(--m-space-5); }
@media (min-width: 768px) { .m-form-row { grid-template-columns: repeat(var(--m-cols, 2), minmax(0, 1fr)); } }
.m-form-row > .m-field + .m-field { margin-top: 0; }

/* ═══════════ components/04-card.css ═══════════ */
/* ── Card (khung chung) ── */
.m-card {
  position: relative;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  padding: var(--m-card-p, var(--m-space-6));
}
.m-card--sunken { background: var(--m-surface-sunken); border-color: transparent; }
.m-card--elevated { border-color: transparent; box-shadow: var(--m-shadow-md); }
.m-card--flush { padding: 0; overflow: hidden; }
.m-card--interactive { transition: border-color var(--m-duration-fast), box-shadow var(--m-duration-base) var(--m-ease-out); }
.m-card--interactive:hover { border-color: var(--m-border-strong); box-shadow: var(--m-shadow-sm); }
.m-card--interactive:has(.m-stretched:focus-visible) { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 2px; }
.m-card--interactive .m-stretched:focus-visible { outline: none; }
.m-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--m-space-4); }
.m-card__title { font-family: var(--m-font-display); font-size: var(--m-text-xl); font-weight: var(--m-weight-bold); color: var(--m-heading); line-height: 1.3; }
.m-card__footer { margin-top: var(--m-space-5); padding-top: var(--m-space-4); border-top: 1px solid var(--m-border); }

/* ─────────────────────────────────────────────────────
   POST — thẻ bài viết. Một liên kết chính phủ cả thẻ (.m-stretched), chủ đề vẫn bấm riêng.
   Không phóng to ảnh khi hover (giữ tĩnh); chỉ gạch chân tiêu đề.
   Ảnh ngang LUÔN 3:2 ở mọi biến thể và mọi cỡ màn hình — biên tập chỉ cần
   chuẩn bị MỘT ảnh 1200×800 (hoặc 960×640) cho mỗi bài. Không đổi --m-post-ratio.
   ───────────────────────────────────────────────────── */
.m-post {
  position: relative;
  display: flex; flex-direction: column; gap: var(--m-space-4);
  min-width: 0;
}
.m-post__media {
  position: relative; overflow: hidden;
  aspect-ratio: var(--m-post-ratio, 3 / 2);
  border-radius: var(--m-radius-lg);
  background: var(--m-surface-muted);
}
.m-post__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--m-img-dim)); transition: filter var(--m-duration-slow) var(--m-ease-out); }
.m-post:hover .m-post__media img { filter: brightness(calc(var(--m-img-dim) * 0.94)); }
.m-post__media > .m-badge { position: absolute; left: 10px; bottom: 10px; }
.m-post__media > .m-post__play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 0.92); color: var(--m-lapis-900);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  transition: transform var(--m-duration-base) var(--m-ease-out);
}
.m-post__media > .m-post__play .m-icon { --m-icon-size: 22px; margin-left: 3px; fill: currentColor; }
.m-post:hover .m-post__play { transform: scale(1.06); }

.m-post__body { display: flex; flex-direction: column; gap: var(--m-space-2); flex: 1; min-width: 0; }
.m-post__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-post__title {
  font-family: var(--m-font-display); font-weight: var(--m-weight-bold);
  font-size: var(--m-post-title, var(--m-text-lg)); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--m-heading); text-wrap: balance;
}
.m-post__title a { color: inherit; text-decoration: none; }
.m-post:hover .m-post__title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.m-post__title a:focus-visible { outline: none; }
.m-post:has(.m-post__title a:focus-visible) { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 6px; border-radius: var(--m-radius-lg); }
.m-post__excerpt {
  font-size: var(--m-text-md); line-height: 1.55; color: var(--m-text-secondary);
  display: -webkit-box; -webkit-line-clamp: var(--m-excerpt-lines, 3); -webkit-box-orient: vertical; overflow: hidden;
}
.m-post__body > .m-meta { margin-top: auto; padding-top: 4px; }
.m-post .m-tag, .m-post .m-meta a { position: relative; z-index: 1; }

/* Ngang: ảnh trái, chữ phải */
.m-post--row { flex-direction: row; gap: var(--m-space-4); align-items: flex-start; }
.m-post--row .m-post__media { flex: 0 0 var(--m-post-media-w, 38%); border-radius: var(--m-radius-md); }
.m-post--row .m-post__excerpt { --m-excerpt-lines: 2; }
@media (max-width: 575.98px) {
  .m-post--row { --m-post-media-w: 128px; --m-post-title: var(--m-text-md); }
  .m-post--row .m-post__excerpt { display: none; }
}

/* Ngang chỉ trên điện thoại (lưới thẻ dọc trên máy tính) */
@media (max-width: 575.98px) {
  .m-post--row-mobile { flex-direction: row; gap: var(--m-space-4); align-items: flex-start; --m-post-title: var(--m-text-md); }
  .m-post--row-mobile .m-post__media { flex: 0 0 128px; border-radius: var(--m-radius-md); }
  .m-post--row-mobile .m-post__excerpt { display: none; }
}

/* Nổi bật: thẻ đầu trang */
.m-post--feature { --m-post-title: var(--m-text-3xl); --m-excerpt-lines: 4; }
.m-post--feature .m-post__media { border-radius: var(--m-radius-xl); }
.m-post--feature .m-post__excerpt { font-size: var(--m-text-lg); }
@media (max-width: 767.98px) { .m-post--feature { --m-excerpt-lines: 3; } .m-post--feature .m-post__excerpt { font-size: var(--m-text-md); } }
/* Ảnh cạnh chữ ngay từ máy tính bảng dọc (768px) — không để ảnh 3:2 chiếm cả màn hình */
@media (min-width: 768px) {
  .m-post--feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-gutter); align-items: center; }
}
@media (min-width: 992px) {
  .m-post--feature { grid-template-columns: 1.15fr 1fr; gap: var(--m-space-8); }
}

/* Chỉ chữ: danh sách dày, phân tách bằng đường kẻ */
.m-post--text { gap: 0; padding-block: var(--m-space-4); border-bottom: 1px solid var(--m-border); }
.m-post--text:first-child { padding-top: 0; }
.m-post--text .m-post__media { display: none; }

/* Chữ trên ảnh (dùng cho banner chuyên đề). Ảnh phải đủ tối ở 1/3 dưới. */
.m-post--overlay { isolation: isolate; color: #fff; background: var(--m-lapis-950); /* nền dự phòng khi ảnh chưa tải */ border-radius: var(--m-radius-xl); overflow: hidden; justify-content: flex-end; min-height: var(--m-overlay-h, 360px); padding: var(--m-space-6); }
.m-post--overlay .m-post__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; }
.m-post--overlay .m-post__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 14 24 / 0) 30%, rgb(10 14 24 / 0.55) 62%, rgb(10 14 24 / 0.86) 100%); }
.m-post--overlay .m-post__body { flex: none; }
.m-post--overlay :is(.m-post__title, .m-post__excerpt, .m-meta, .m-tag) { color: #fff; }
.m-post--overlay .m-post__excerpt { color: rgb(255 255 255 / 0.86); }
.m-post--overlay .m-meta { color: rgb(255 255 255 / 0.8); }
.m-post--overlay .m-meta > * + *::before { color: rgb(255 255 255 / 0.5); }
.m-post--overlay .m-overline { color: var(--m-gold-200); }

/* Có khung (đặt trên nền sunken) */
.m-post--boxed { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); padding: var(--m-space-3); gap: var(--m-space-3); }
.m-post--boxed .m-post__media { border-radius: var(--m-radius-md); }
.m-post--boxed .m-post__body { padding: 0 var(--m-space-2) var(--m-space-2); }

/* ─────────────────────────────────────────────────────
   TILE — ô điều hướng có biểu tượng ("Bắt đầu từ đây", "Chiêm bái")
   ───────────────────────────────────────────────────── */
.m-tile {
  position: relative;
  display: flex; gap: var(--m-space-4); align-items: flex-start;
  padding: var(--m-space-5);
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  color: var(--m-text); text-decoration: none;
  transition: border-color var(--m-duration-fast), box-shadow var(--m-duration-base) var(--m-ease-out), transform var(--m-duration-base) var(--m-ease-out);
}
.m-tile:hover { border-color: var(--m-border-strong); box-shadow: var(--m-shadow-sm); color: var(--m-text); }
.m-tile__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.m-tile__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); line-height: 1.3; color: var(--m-heading); }
.m-tile__desc { font-size: var(--m-text-sm); line-height: 1.5; color: var(--m-text-muted); }
.m-tile__arrow { flex: none; align-self: center; color: var(--m-text-muted); transition: transform var(--m-duration-base) var(--m-ease-out), color var(--m-duration-fast); }
.m-tile:hover .m-tile__arrow { transform: translateX(3px); color: var(--m-action); }
.m-tile--stack { flex-direction: column; }
.m-tile--stack .m-tile__arrow { position: absolute; top: var(--m-space-5); right: var(--m-space-5); }
.m-tile--center { flex-direction: column; align-items: center; text-align: center; }

/* ─────────────────────────────────────────────────────
   BOOK — sách / chuyên đề. Bìa 2:3, gáy sách bằng gradient nhẹ.
   ───────────────────────────────────────────────────── */
.m-book { position: relative; display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }
.m-book__cover {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 4px 10px 10px 4px;
  background: var(--m-surface-muted);
  box-shadow: 0 1px 2px rgb(var(--m-shadow-color) / 0.12), 0 12px 24px -10px rgb(var(--m-shadow-color) / 0.35);
  transition: transform var(--m-duration-base) var(--m-ease-out), box-shadow var(--m-duration-base) var(--m-ease-out);
}
.m-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.m-book__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.22) 0, rgb(255 255 255 / 0.14) 3%, rgb(0 0 0 / 0.06) 6%, transparent 10%);
}
.m-book:hover .m-book__cover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(var(--m-shadow-color) / 0.12), 0 18px 32px -12px rgb(var(--m-shadow-color) / 0.4); }
/* Bìa chữ (khi chưa có ảnh bìa) */
.m-book__cover--text {
  display: flex; flex-direction: column; justify-content: space-between; padding: 14% 12%;
  background: var(--m-lapis-800); color: var(--m-gold-200);
}
.m-book__cover--text::before {
  content: ""; position: absolute; inset: auto -30% -30% auto; width: 90%; aspect-ratio: 1; opacity: 0.18; background: currentColor;
  -webkit-mask: var(--m-ornament-mandala) center / contain no-repeat; mask: var(--m-ornament-mandala) center / contain no-repeat;
}
.m-book__cover--text strong { font-family: var(--m-font-display); font-size: clamp(1rem, 0.8rem + 1vw, 1.35rem); line-height: 1.2; color: #fff; text-wrap: balance; }
.m-book__cover--text span { font-size: var(--m-text-xs); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; }
.m-book__cover--kasaya { background: var(--m-kasaya-800); }
.m-book__cover--gold { background: var(--m-gold-800); }
.m-book__cover--jade { background: var(--m-jade-800); }
.m-book__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-md); line-height: 1.3; color: var(--m-heading); }
.m-book__title a { color: inherit; text-decoration: none; }
.m-book:hover .m-book__title a { text-decoration: underline; text-underline-offset: 0.18em; }
.m-book__meta { font-size: var(--m-text-sm); color: var(--m-text-muted); }
.m-book__progress { height: 4px; border-radius: 4px; background: var(--m-surface-muted); overflow: hidden; }
.m-book__progress > span { display: block; height: 100%; width: var(--m-value, 0%); background: var(--m-ornament); border-radius: inherit; }

/* ─────────────────────────────────────────────────────
   PERSON — Thượng sư / người giảng
   ───────────────────────────────────────────────────── */
.m-avatar {
  flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: var(--m-avatar, 44px); height: var(--m-avatar, 44px); border-radius: 50%;
  background: var(--m-ornament-subtle); color: var(--m-ornament-text);
  font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: calc(var(--m-avatar, 44px) * 0.4);
  box-shadow: 0 0 0 2px var(--m-surface), 0 0 0 3px var(--m-ornament-subtle);
}
.m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m-avatar--sm { --m-avatar: 32px; } .m-avatar--lg { --m-avatar: 64px; } .m-avatar--xl { --m-avatar: 96px; }
.m-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m-person__name { font-weight: var(--m-weight-semibold); color: var(--m-heading); line-height: 1.3; }
.m-person__role { font-size: var(--m-text-sm); color: var(--m-text-muted); line-height: 1.4; }

/* Lưới sách: 2 cột (điện thoại) → 3 → 5 cột (máy tính) */
.m-book-grid { display: grid; gap: var(--m-space-6) var(--m-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) { .m-book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .m-book-grid { grid-template-columns: repeat(var(--m-book-cols, 5), minmax(0, 1fr)); gap: var(--m-space-8) var(--m-gutter); } }

/* Khung kết quả: lưới thẻ ↔ danh sách (thêm .is-list) */
.m-results { display: grid; gap: var(--m-space-8) var(--m-space-6); grid-template-columns: repeat(auto-fill, minmax(min(var(--m-min, 250px), 100%), 1fr)); }
.m-results > [hidden] { display: none; }
.m-results.is-list { grid-template-columns: minmax(0, 1fr); gap: var(--m-space-6); }
.m-results.is-list > .m-post { flex-direction: row; gap: var(--m-space-5); align-items: flex-start; }
.m-results.is-list > .m-post .m-post__media { flex: 0 0 min(34%, 260px); border-radius: var(--m-radius-md); }
.m-results.is-list > .m-post .m-post__excerpt { display: -webkit-box; --m-excerpt-lines: 2; }
@media (max-width: 575.98px) {
  .m-results.is-list > .m-post { --m-post-title: var(--m-text-md); gap: var(--m-space-4); }
  .m-results.is-list > .m-post .m-post__media { flex-basis: 128px; }
  .m-results.is-list > .m-post .m-post__excerpt { display: none; }
}
.m-results:not(.is-list) .m-post__excerpt { display: none; }

/* ═══════════ components/05-date-event.css ═══════════ */
/* ── Datebox: ô ngày (dương lịch lớn + âm lịch nhỏ) ──
   <time class="m-datebox" datetime="2026-10-26">
     <span class="m-datebox__month">Th 10</span><span class="m-datebox__day">26</span>
     <span class="m-datebox__lunar">8/9 ÂL</span>
   </time> */
.m-datebox {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--m-datebox, 72px); padding: 8px 4px 9px;
  border-radius: var(--m-radius-md);
  background: var(--m-surface); border: 1px solid var(--m-border);
  text-align: center; line-height: 1;
}
.m-datebox__month { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--m-brand-text); }
.m-datebox__day { font-family: var(--m-font-display); font-size: 1.875rem; font-weight: var(--m-weight-bold); color: var(--m-heading); margin-block: 3px 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.m-datebox__lunar { font-size: 11px; font-weight: var(--m-weight-medium); color: var(--m-ornament-text); white-space: nowrap; }
.m-datebox--lg { --m-datebox: 92px; }
.m-datebox--lg .m-datebox__day { font-size: 2.5rem; }
.m-datebox--accent { background: var(--m-action); border-color: var(--m-action); }
.m-datebox--accent :is(.m-datebox__month, .m-datebox__day, .m-datebox__lunar) { color: var(--m-text-on-action); }
.m-datebox--accent .m-datebox__lunar { opacity: 0.85; }

/* ── Lunar: nhãn âm lịch nội dòng ── */
.m-lunar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); color: var(--m-ornament-text);
}
.m-lunar::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 14.6A8 8 0 1 1 9.4 4.5a6.5 6.5 0 0 0 10.1 10.1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 14.6A8 8 0 1 1 9.4 4.5a6.5 6.5 0 0 0 10.1 10.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ─────────────────────────────────────────────────────
   EVENT — thẻ sự kiện / khóa tu / pháp hội
   ───────────────────────────────────────────────────── */
.m-event {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--m-space-4);
  align-items: start;
  padding: var(--m-space-5);
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  transition: border-color var(--m-duration-fast), box-shadow var(--m-duration-base) var(--m-ease-out);
}
.m-event:hover { border-color: var(--m-border-strong); box-shadow: var(--m-shadow-sm); }
.m-event:has(.m-stretched:focus-visible) { outline: var(--m-border-focus) solid var(--m-focus); outline-offset: 2px; }
.m-event .m-stretched:focus-visible { outline: none; }
.m-event__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-event__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); line-height: 1.3; color: var(--m-heading); text-wrap: balance; }
.m-event__title a { color: inherit; text-decoration: none; }
.m-event:hover .m-event__title a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
.m-event__info { display: flex; flex-direction: column; gap: 4px; font-size: var(--m-text-sm); color: var(--m-text-secondary); }
.m-event__info > span { display: flex; align-items: flex-start; gap: 8px; }
.m-event__info .m-icon { --m-icon-size: 16px; margin-top: 2px; color: var(--m-text-muted); }
.m-event__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
@media (min-width: 768px) {
  .m-event--wide { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .m-event--wide .m-event__actions { grid-column: auto; }
}
@media (max-width: 575.98px) {
  .m-event { padding: var(--m-space-4); gap: var(--m-space-3) var(--m-space-4); --m-datebox: 64px; }
  .m-event__actions .m-btn { flex: 1 1 auto; }       /* nút giãn hết hàng, dễ chạm bằng ngón cái */
}
.m-event.is-past { background: var(--m-surface-sunken); }
.m-event.is-past :is(.m-event__title, .m-datebox__day) { color: var(--m-text-secondary); }

/* ─────────────────────────────────────────────────────
   DAY — Lịch vũ trụ (một ngày). Đọc theo thứ tự: ngày → ý nghĩa → giờ tốt → nên/không nên.
   ───────────────────────────────────────────────────── */
.m-day {
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  overflow: hidden;
}
.m-day__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m-space-4); padding: var(--m-space-5); align-items: start; }
.m-day__weekday { font-size: var(--m-text-sm); font-weight: var(--m-weight-semibold); color: var(--m-brand-text); }
.m-day__date { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: 3rem; line-height: 1; letter-spacing: -0.03em; color: var(--m-heading); font-variant-numeric: tabular-nums; margin-block: 4px 8px; }
.m-day__date small { font-size: 0.42em; color: var(--m-text-muted); letter-spacing: 0; font-weight: var(--m-weight-semibold); margin-left: 4px; }
.m-day__lunar { font-size: var(--m-text-sm); line-height: 1.5; color: var(--m-text-secondary); }
.m-day__lunar strong { color: var(--m-ornament-text); font-weight: var(--m-weight-semibold); }
.m-day__symbol { width: 88px; aspect-ratio: 1; border-radius: var(--m-radius-md); overflow: hidden; background: var(--m-ornament-subtle); }
.m-day__symbol img { width: 100%; height: 100%; object-fit: cover; }
.m-day__section { padding: var(--m-space-4) var(--m-space-5); border-top: 1px solid var(--m-border); }
.m-day__label { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); margin-bottom: 10px; }
.m-day__hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.m-day__hours > * {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: var(--m-radius-sm); background: var(--m-surface-sunken);
  font-size: var(--m-text-xs); color: var(--m-text-muted); font-variant-numeric: tabular-nums;
}
.m-day__hours strong { font-size: var(--m-text-sm); color: var(--m-heading); font-weight: var(--m-weight-semibold); }
.m-day__dos { display: grid; gap: 10px; font-size: var(--m-text-sm); line-height: 1.5; }
.m-day__dos > div { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.m-day__dos .m-icon { --m-icon-size: 18px; margin-top: 1px; }
.m-day__dos .is-do .m-icon { color: var(--m-success-icon); }
.m-day__dos .is-dont .m-icon { color: var(--m-danger-icon); }
.m-day__foot { padding: var(--m-space-4) var(--m-space-5); border-top: 1px solid var(--m-border); background: var(--m-surface-sunken); }
/* Tự chia 2 cột khi khối đủ rộng (≥ 680px — vd. đặt hết bề ngang trên máy tính bảng dọc):
   trái = ngày & âm lịch, phải = giờ tốt / nên–không nên, chân trải hết. Tính theo bề rộng CỦA KHỐI, không theo màn hình. */
.m-day { container: m-day / inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.m-day__head { grid-row: span 2; }
.m-day__foot { grid-column: 1 / -1; }
@container m-day (min-width: 680px) {
  .m-day__head { align-self: stretch; }
  .m-day__date { font-size: 3.5rem; }
  .m-day__section { border-top: 0; border-left: 1px solid var(--m-border); }
  .m-day__section + .m-day__section { border-top: 1px solid var(--m-border); }
}

/* ─────────────────────────────────────────────────────
   TIMELINE — lịch sử hình thành, lịch trình khóa tu
   ───────────────────────────────────────────────────── */
.m-timeline { list-style: none; padding: 0; position: relative; display: flex; flex-direction: column; }
.m-timeline > li { position: relative; display: grid; grid-template-columns: var(--m-tl-label, 88px) 24px minmax(0, 1fr); gap: 0 var(--m-space-3); padding-bottom: var(--m-space-8); }
.m-timeline > li:last-child { padding-bottom: 0; }
.m-timeline__label { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); color: var(--m-ornament-text); text-align: right; line-height: 1.5; font-variant-numeric: tabular-nums; }
.m-timeline__node { position: relative; display: flex; justify-content: center; }
.m-timeline__node::before { content: ""; position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 7px; border-radius: 50%; background: var(--m-surface); border: 2px solid var(--m-ornament); }
.m-timeline > li:not(:last-child) .m-timeline__node::after { content: ""; position: absolute; top: 20px; bottom: calc(var(--m-space-8) * -1 + 0px); width: 1px; background: var(--m-border-strong); }
.m-timeline > li.is-current .m-timeline__node::before { background: var(--m-ornament); box-shadow: 0 0 0 4px var(--m-ornament-subtle); }
.m-timeline__body { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.m-timeline__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); color: var(--m-heading); line-height: 1.35; }
.m-timeline__text { color: var(--m-text-secondary); line-height: 1.6; }
.m-timeline--compact { --m-tl-label: 56px; }
.m-timeline--compact .m-timeline__label { font-size: var(--m-text-sm); font-family: var(--m-font-sans); font-weight: var(--m-weight-semibold); color: var(--m-text-muted); }
.m-timeline--compact > li { padding-bottom: var(--m-space-5); }
.m-timeline--compact > li:not(:last-child) .m-timeline__node::after { bottom: calc(var(--m-space-5) * -1); }
.m-timeline--compact .m-timeline__title { font-size: var(--m-text-md); font-family: var(--m-font-sans); font-weight: var(--m-weight-semibold); }
@media (max-width: 575.98px) {
  .m-timeline:not(.m-timeline--compact) > li { grid-template-columns: 24px minmax(0, 1fr); }
  .m-timeline:not(.m-timeline--compact) .m-timeline__label { grid-column: 2; text-align: left; font-size: var(--m-text-md); }
  .m-timeline:not(.m-timeline--compact) .m-timeline__node { grid-row: 1 / span 2; grid-column: 1; }
  .m-timeline:not(.m-timeline--compact) .m-timeline__body { grid-column: 2; }
}

/* ── Countdown: "Còn 6 ngày" ── */
.m-countdown { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--m-text-sm); color: var(--m-text-secondary); }
.m-countdown strong { font-family: var(--m-font-display); font-size: var(--m-text-2xl); color: var(--m-heading); font-variant-numeric: tabular-nums; }

/* ── Mini calendar (lưới tháng) ── */
.m-calendar { width: 100%; table-layout: fixed; font-size: var(--m-text-sm); }
.m-calendar caption { text-align: left; font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); color: var(--m-heading); padding-bottom: 12px; }
.m-calendar th { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); color: var(--m-text-muted); padding: 6px 0; text-transform: uppercase; letter-spacing: 0.05em; }
.m-calendar td { padding: 2px; text-align: center; vertical-align: top; }
.m-calendar td > * {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; max-height: 56px; border-radius: var(--m-radius-sm);
  color: var(--m-text); text-decoration: none; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.m-calendar td small { font-size: 10px; color: var(--m-text-muted); margin-top: 2px; }
.m-calendar td a:hover { background: var(--m-surface-muted); }
.m-calendar td.is-outside > * { color: var(--m-text-muted); font-weight: var(--m-weight-regular); }
.m-calendar td.is-outside small { color: inherit; }
.m-calendar td.is-today > * { box-shadow: inset 0 0 0 1.5px var(--m-action); font-weight: var(--m-weight-bold); }
.m-calendar td.is-selected > * { background: var(--m-action); color: var(--m-text-on-action); }
.m-calendar td.is-selected small { color: inherit; opacity: 0.85; }
.m-calendar td.has-event > *::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--m-brand); }
.m-calendar td.is-holy small { color: var(--m-ornament-text); font-weight: var(--m-weight-semibold); }

/* ═══════════ components/06-navigation.css ═══════════ */
/* ─────────────────────────────────────────────────────
   HEADER — dính đầu trang. Desktop: logo + 6 mục + tìm kiếm + nút Chỉ đường.
   Mobile: logo + tìm kiếm + nút menu (mở .m-drawer); điều hướng chính ở .m-tabbar dưới đáy.
   ───────────────────────────────────────────────────── */
/* Chiều cao header theo thiết bị: token --m-header-h (60 · 64 · 72 · 76px) */

.m-header {
  position: sticky; top: 0; z-index: var(--m-z-header);
  background: color-mix(in srgb, var(--m-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m-duration-base), box-shadow var(--m-duration-base);
}
.m-header.is-scrolled, .m-header--bordered { border-bottom-color: var(--m-border); }
.m-header__inner { display: flex; align-items: center; gap: var(--m-space-4); height: var(--m-header-h); }
/* Tai thỏ khi xoay ngang: không để logo/nút chui vào vùng khuất */
.m-header { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.m-header__actions { display: flex; align-items: center; gap: var(--m-space-2); margin-left: auto; }
.m-header--transparent:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Header nằm trên ảnh hero: chữ trắng cho tới khi cuộn. Hero đặt margin-top âm bằng --m-header-h. */
.m-header--on-image:not(.is-scrolled) {
  background: linear-gradient(180deg, rgb(8 12 22 / 0.5), rgb(8 12 22 / 0));
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
.m-header--on-image:not(.is-scrolled) :is(.m-brand, .m-brand__name small, .m-nav__link, .m-header__actions > .m-btn--ghost) { color: #fff; }
.m-header--on-image:not(.is-scrolled) :is(.m-nav__link:hover, .m-nav__link[aria-expanded="true"], .m-header__actions > .m-btn--ghost:hover) { background: rgb(255 255 255 / 0.14); color: #fff; }
.m-header--on-image:not(.is-scrolled) .m-nav__link[aria-current="page"]::after { background: #fff; }
.m-header--on-image:not(.is-scrolled) .m-header__cta { --m-btn-bg: rgb(255 255 255 / 0.14); --m-btn-fg: #fff; --m-btn-bd: rgb(255 255 255 / 0.5); --m-btn-bg-hover: rgb(255 255 255 / 0.26); }
.m-header--on-image:not(.is-scrolled) :focus-visible { outline-color: #fff; }

/* Logo */
.m-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--m-brand-text); }
.m-brand:hover { color: var(--m-brand-text); }
.m-brand__mark { width: auto; height: 44px; }
.m-brand__name { display: flex; flex-direction: column; font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: 1.0625rem; line-height: 1.1; letter-spacing: -0.01em; }
.m-brand__name small { font-size: 0.8em; font-weight: var(--m-weight-semibold); color: var(--m-text-secondary); letter-spacing: 0; margin-top: 2px; }
@media (min-width: 992px) { .m-brand__mark { height: 52px; } .m-brand__name { font-size: 1.1875rem; } }

/* Điều hướng chính (desktop). Header co theo bề rộng CỦA CHÍNH NÓ (container query),
   nên đặt trong khung hẹp (vd. trang tài liệu) vẫn không tràn. */
.m-header { container: m-header / inline-size; }
.m-nav { display: none; }
.m-header__cta { display: none; }
.m-header__menu-btn { display: inline-flex; }
@container m-header (min-width: 940px) {
  .m-nav { display: block; margin-left: var(--m-space-4); }
  .m-header__menu-btn { display: none; }
}
@container m-header (min-width: 1180px) {
  .m-header__cta { display: inline-flex; }
  .m-nav { margin-left: var(--m-space-6); }
}
@container m-header (min-width: 940px) and (max-width: 1099.98px) {
  .m-nav__link { padding: 0 8px; font-size: 0.9375rem; }
  .m-brand__name small { display: none; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 992px) { .m-nav { display: block; margin-left: var(--m-space-4); } .m-header__menu-btn { display: none; } }
  @media (min-width: 1200px) { .m-header__cta { display: inline-flex; } }
}
.m-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.m-nav__item { position: relative; }
.m-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 44px; padding: 0 12px; border: 0; border-radius: var(--m-radius-sm); background: none;
  font-size: var(--m-text-md); font-weight: var(--m-weight-medium); color: var(--m-text-secondary);
  text-decoration: none; white-space: nowrap;
  transition: color var(--m-duration-fast), background-color var(--m-duration-fast);
}
.m-nav__link:hover, .m-nav__link[aria-expanded="true"] { color: var(--m-heading); background: var(--m-surface-muted); }
.m-nav__link .m-icon { --m-icon-size: 16px; transition: transform var(--m-duration-base) var(--m-ease-out); }
.m-nav__link[aria-expanded="true"] .m-icon { transform: rotate(180deg); }
.m-nav__link[aria-current="page"], .m-nav__link.is-active { color: var(--m-heading); font-weight: var(--m-weight-semibold); }
.m-nav__link[aria-current="page"]::after, .m-nav__link.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--m-brand);
}

/* Bảng thả xuống của mục chính */
/* Bảng thả: khi đóng KHÔNG chiếm chỗ (display: none) — tránh tràn ngang trang ở 992–1100px.
   JS thêm .m-nav__panel--end khi bảng chạm mép phải màn hình. */
.m-nav__panel {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: var(--m-z-dropdown);
  width: min(560px, calc(100vw - 2 * var(--m-margin))); padding: var(--m-space-3);
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-lg);
  display: none; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--m-duration-fast) var(--m-ease-standard), transform var(--m-duration-base) var(--m-ease-out), display var(--m-duration-fast) allow-discrete;
}
.m-nav__panel--end { left: auto; right: -12px; }
.m-nav__link[aria-expanded="true"] + .m-nav__panel { display: grid; opacity: 1; transform: none; }
@starting-style { .m-nav__link[aria-expanded="true"] + .m-nav__panel { opacity: 0; transform: translateY(-4px); } }
.m-nav__panel a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--m-radius-md); text-decoration: none; color: var(--m-heading); font-weight: var(--m-weight-semibold); font-size: var(--m-text-md); line-height: 1.35; }
.m-nav__panel a span { font-weight: var(--m-weight-regular); font-size: var(--m-text-sm); color: var(--m-text-muted); }
.m-nav__panel a:hover { background: var(--m-surface-sunken); color: var(--m-heading); }
.m-nav__panel-foot { grid-column: 1 / -1; margin-top: 6px; padding: 12px; border-top: 1px solid var(--m-border); }

/* ── Drawer (menu mobile, bảng bên) — dùng <dialog class="m-drawer"> ── */
.m-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; z-index: var(--m-z-modal);
  width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--m-surface); color: var(--m-text);
  box-shadow: var(--m-shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--m-duration-slow) var(--m-ease-out), overlay var(--m-duration-slow) allow-discrete, display var(--m-duration-slow) allow-discrete;
}
.m-drawer:not([open]) { display: none; }
.m-drawer[open] { transform: none; }
@starting-style { .m-drawer[open] { transform: translateX(100%); } }
.m-drawer--left { inset: 0 auto 0 0; transform: translateX(-100%); }
@starting-style { .m-drawer--left[open] { transform: translateX(-100%); } }
.m-drawer::backdrop { background: var(--m-overlay); opacity: 0; transition: opacity var(--m-duration-slow), overlay var(--m-duration-slow) allow-discrete, display var(--m-duration-slow) allow-discrete; }
.m-drawer[open]::backdrop { opacity: 1; }
@starting-style { .m-drawer[open]::backdrop { opacity: 0; } }
.m-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--m-header-h); padding: 0 var(--m-space-3) 0 var(--m-space-5); border-bottom: 1px solid var(--m-border); flex: none; }
.m-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--m-space-3) var(--m-space-5) var(--m-space-8); }
.m-drawer__foot { flex: none; padding: var(--m-space-4) var(--m-space-5) calc(var(--m-space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--m-border); }

/* Danh sách menu trong drawer (dùng <details> cho nhóm) */
.m-menu-list { list-style: none; padding: 0; }
.m-menu-list > li { border-bottom: 1px solid var(--m-border); }
.m-menu-list a, .m-menu-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 8px 0;
  font-size: var(--m-text-lg); font-weight: var(--m-weight-semibold); color: var(--m-heading); text-decoration: none;
  cursor: pointer; list-style: none;
}
.m-menu-list summary::-webkit-details-marker { display: none; }
.m-menu-list summary .m-icon { color: var(--m-text-muted); transition: transform var(--m-duration-base) var(--m-ease-out); }
.m-menu-list details[open] > summary .m-icon { transform: rotate(180deg); }
.m-menu-list ul { list-style: none; padding: 0 0 12px; }
.m-menu-list ul a { min-height: 44px; font-size: var(--m-text-md); font-weight: var(--m-weight-regular); color: var(--m-text-secondary); padding-left: 14px; border-left: 2px solid var(--m-border); }
.m-menu-list ul a[aria-current="page"] { color: var(--m-heading); font-weight: var(--m-weight-semibold); border-left-color: var(--m-brand); }

/* ── Tabbar: thanh tab đáy (điện thoại & máy tính bảng dọc, tối đa 5 mục) ──
   Điện thoại: biểu tượng trên, nhãn dưới; mục đang chọn có "viên" nền sau biểu tượng.
   Máy tính bảng dọc (≥ 600px): biểu tượng cạnh nhãn, gom vào giữa — không trải 5 mục ra 820px.
   Ẩn từ 992px (menu ngang thay thế). Chiều cao: token --m-tabbar-h. */
.m-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--m-z-sticky);
  display: grid; grid-template-columns: repeat(var(--m-tabs, 5), minmax(0, 1fr));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: color-mix(in srgb, var(--m-surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--m-border);
  transition: transform var(--m-duration-base) var(--m-ease-out);
}
@media (min-width: 992px) { .m-tabbar { display: none; } }
.m-tabbar a, .m-tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--m-tabbar-h); padding: 6px 2px; border: 0; background: none;
  font-size: 12px; font-weight: var(--m-weight-medium); line-height: 1.2; color: var(--m-text-muted);
  text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.m-tabbar .m-icon {
  --m-icon-size: 24px; box-sizing: content-box; padding: 3px 16px; border-radius: var(--m-radius-full);
  transition: background-color var(--m-duration-base) var(--m-ease-out);
}
.m-tabbar [aria-current="page"] { color: var(--m-brand-text); font-weight: var(--m-weight-semibold); }
.m-tabbar [aria-current="page"] .m-icon { stroke-width: 2.1; background: var(--m-brand-subtle); }
.m-tabbar :is(a, button):active .m-icon { background: var(--m-surface-muted); }
@media (min-width: 600px) {
  .m-tabbar { grid-template-columns: repeat(var(--m-tabs, 5), minmax(0, 148px)); justify-content: center; gap: 4px; }
  .m-tabbar a, .m-tabbar button { flex-direction: row; gap: 8px; font-size: var(--m-text-sm); }
  .m-tabbar :is(a, button) { padding-inline: 10px; }
  .m-tabbar .m-icon { padding: 0; background: none !important; }
  .m-tabbar [aria-current="page"] { position: relative; }
  .m-tabbar [aria-current="page"]::before { content: ""; position: absolute; inset: 10px 4px; z-index: -1; border-radius: var(--m-radius-full); background: var(--m-brand-subtle); }
}
.m-has-tabbar { padding-bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom)); }
/* Ẩn thanh tab khi đang gõ phím trên điện thoại (bàn phím ảo che màn hình) — JS thêm .is-typing vào <html> */
.is-typing .m-tabbar { transform: translateY(110%); }

/* ── Breadcrumb ── */
.m-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; font-size: var(--m-text-sm); line-height: 1.4; }
.m-breadcrumb li { display: inline-flex; align-items: center; }
.m-breadcrumb li + li::before {
  content: ""; width: 14px; height: 14px; margin-inline: 6px; background: var(--m-text-disabled);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-breadcrumb a { color: var(--m-text-muted); text-decoration: none; padding-block: 8px; }
.m-breadcrumb a:hover { color: var(--m-heading); text-decoration: underline; text-underline-offset: 0.2em; }
.m-breadcrumb [aria-current="page"] { color: var(--m-text-secondary); font-weight: var(--m-weight-medium); }
/* Mobile: chỉ hiện "← cấp cha" để không chiếm 2 dòng */
@media (max-width: 575.98px) {
  .m-breadcrumb--collapse li:not(:nth-last-child(2)) { display: none; }
  .m-breadcrumb--collapse li:nth-last-child(2)::before { content: none; }
  .m-breadcrumb--collapse li:nth-last-child(2) a::before { content: "← "; }
}

/* ── Tabs (ARIA tablist) ── */
.m-tabs { display: flex; gap: var(--m-space-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--m-border); }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px; border: 0; background: none;
  font-size: var(--m-text-md); font-weight: var(--m-weight-medium); color: var(--m-text-muted);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--m-duration-fast);
}
.m-tab:hover { color: var(--m-heading); }
.m-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--m-duration-fast); }
.m-tab[aria-selected="true"], .m-tab[aria-current="page"] { color: var(--m-heading); font-weight: var(--m-weight-semibold); }
.m-tab[aria-selected="true"]::after, .m-tab[aria-current="page"]::after { background: var(--m-action); }
.m-tab:focus-visible { outline-offset: -3px; }
.m-tab__count { font-size: var(--m-text-xs); padding: 1px 7px; border-radius: 999px; background: var(--m-surface-muted); color: var(--m-text-muted); font-variant-numeric: tabular-nums; }
.m-tabpanel { padding-top: var(--m-space-6); }
.m-tabpanel:focus-visible { outline-offset: 4px; }

/* ── Segmented control ── */
.m-segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  border-radius: var(--m-radius-full); background: var(--m-surface-muted);
}
.m-segmented button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--m-radius-full); background: transparent;
  font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); color: var(--m-text-secondary);
  transition: background-color var(--m-duration-fast), color var(--m-duration-fast), box-shadow var(--m-duration-fast);
}
.m-segmented button:hover { color: var(--m-heading); }
.m-segmented button[aria-pressed="true"], .m-segmented button[aria-checked="true"] {
  background: var(--m-surface); color: var(--m-heading); font-weight: var(--m-weight-semibold); box-shadow: var(--m-shadow-xs), 0 0 0 1px var(--m-border);
}
.m-segmented .m-icon { --m-icon-size: 16px; }
.m-segmented--block { display: flex; } .m-segmented--block button { flex: 1; }

/* ── Pagination ── */
.m-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.m-pagination a, .m-pagination span {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: var(--m-radius-full); font-weight: var(--m-weight-medium); color: var(--m-text-secondary);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.m-pagination a:hover { background: var(--m-surface-muted); color: var(--m-heading); }
.m-pagination [aria-current="page"] { background: var(--m-action); color: var(--m-text-on-action); font-weight: var(--m-weight-semibold); }
.m-pagination .m-pagination__step { display: inline-flex; gap: 6px; padding: 0 16px; border: 1px solid var(--m-border-strong); }
.m-pagination .m-pagination__gap { min-width: 24px; color: var(--m-text-disabled); }
@media (max-width: 575.98px) { .m-pagination > a:not(.m-pagination__step):not([aria-current]), .m-pagination__gap { display: none; } }

/* ── Sidenav: điều hướng dọc theo nhóm ── */
.m-sidenav { display: flex; flex-direction: column; gap: var(--m-space-6); font-size: var(--m-text-sm); }
.m-sidenav__title { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); margin-bottom: 6px; padding-left: 12px; }
.m-sidenav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.m-sidenav a {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px;
  border-radius: var(--m-radius-sm); color: var(--m-text-secondary); text-decoration: none; line-height: 1.35;
}
.m-sidenav a:hover { background: var(--m-surface-muted); color: var(--m-heading); }
.m-sidenav a[aria-current="page"], .m-sidenav a[aria-current="true"], .m-sidenav a.is-active {
  background: var(--m-action-subtle); color: var(--m-action-subtle-text); font-weight: var(--m-weight-semibold);
}
.m-sidenav .m-icon { --m-icon-size: 18px; }

/* ── TOC: mục lục bài viết (JS đánh dấu mục đang đọc) ── */
.m-toc { font-size: var(--m-text-sm); }
.m-toc__title { display: flex; align-items: center; gap: 8px; font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); margin-bottom: 10px; }
.m-toc ol { list-style: none; padding: 0; border-left: 1px solid var(--m-border); counter-reset: toc; }
.m-toc li { counter-increment: toc; }
.m-toc a {
  display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  color: var(--m-text-muted); text-decoration: none; line-height: 1.45;
  transition: color var(--m-duration-fast), border-color var(--m-duration-fast);
}
.m-toc a:hover { color: var(--m-heading); }
.m-toc a[aria-current="true"] { color: var(--m-heading); font-weight: var(--m-weight-semibold); border-left-color: var(--m-ornament); }
.m-toc ol ol { border: 0; } .m-toc ol ol a { padding-left: 28px; }
/* Mục lục thu gọn (mobile, trong thân bài) */
.m-toc--inline { padding: var(--m-space-4) var(--m-space-5); border-radius: var(--m-radius-lg); background: var(--m-surface-sunken); }
.m-toc--inline > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; cursor: pointer; list-style: none; font-weight: var(--m-weight-semibold); color: var(--m-heading); font-size: var(--m-text-md); }
.m-toc--inline > summary::-webkit-details-marker { display: none; }
.m-toc--inline > summary .m-icon { color: var(--m-text-muted); transition: transform var(--m-duration-base); }
.m-toc--inline[open] > summary .m-icon { transform: rotate(180deg); }
.m-toc--inline ol { margin-top: 12px; }

/* ─────────────────────────────────────────────────────
   SERIES — chuỗi bài / chuyên đề (thay #dieuhuongsach)
   ───────────────────────────────────────────────────── */
.m-series { border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); overflow: hidden; }
.m-series > summary, .m-series__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: var(--m-space-4) var(--m-space-5); cursor: pointer; list-style: none;
}
.m-series > summary::-webkit-details-marker { display: none; }
.m-series > summary:hover { background: var(--m-surface-sunken); }
.m-series__icon { grid-row: span 2; }
.m-series__label { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-ornament-text); }
.m-series__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); line-height: 1.3; color: var(--m-heading); grid-column: 2; }
.m-series__toggle { grid-row: 1 / span 2; grid-column: 3; display: inline-flex; align-items: center; gap: 6px; font-size: var(--m-text-sm); font-weight: var(--m-weight-semibold); color: var(--m-link); white-space: nowrap; }
.m-series__toggle .m-icon { transition: transform var(--m-duration-base) var(--m-ease-out); }
.m-series[open] .m-series__toggle .m-icon { transform: rotate(180deg); }
.m-series__progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--m-text-sm); color: var(--m-text-muted); font-variant-numeric: tabular-nums; }
.m-series__bar { flex: 1; height: 4px; border-radius: 4px; background: var(--m-surface-muted); overflow: hidden; }
.m-series__bar > span { display: block; height: 100%; width: var(--m-value, 0%); background: var(--m-ornament); border-radius: inherit; }
.m-series__list { list-style: none; padding: 4px 0 8px; margin: 0; border-top: 1px solid var(--m-border); counter-reset: part; }
.m-series__list li { counter-increment: part; }
.m-series__list a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 48px; padding: 8px var(--m-space-5);
  color: var(--m-text-secondary); text-decoration: none; line-height: 1.4;
}
.m-series__list a::before {
  content: counter(part); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--m-border-strong); font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); color: var(--m-text-muted); font-variant-numeric: tabular-nums;
}
.m-series__list a:hover { background: var(--m-surface-sunken); color: var(--m-heading); }
.m-series__list .is-done a::before { content: "✓"; background: var(--m-success-bg); border-color: var(--m-success-border); color: var(--m-success-text); }
.m-series__list [aria-current="step"] a, .m-series__list a[aria-current="page"] { color: var(--m-heading); font-weight: var(--m-weight-semibold); background: var(--m-action-subtle); }
.m-series__list [aria-current="step"] a::before, .m-series__list a[aria-current="page"]::before { background: var(--m-action); border-color: var(--m-action); color: var(--m-text-on-action); }
.m-series__list small { font-size: var(--m-text-xs); color: var(--m-text-muted); font-weight: var(--m-weight-regular); white-space: nowrap; }

/* ── Pager: Bài trước / Bài tiếp ── */
.m-pager { display: grid; gap: var(--m-space-3); grid-template-columns: 1fr; }
@media (min-width: 576px) { .m-pager { grid-template-columns: 1fr 1fr; } }
.m-pager a {
  display: flex; flex-direction: column; gap: 4px; padding: var(--m-space-4) var(--m-space-5);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface);
  text-decoration: none; transition: border-color var(--m-duration-fast), box-shadow var(--m-duration-base);
}
.m-pager a:hover { border-color: var(--m-border-strong); box-shadow: var(--m-shadow-sm); }
.m-pager small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--m-text-sm); color: var(--m-text-muted); }
.m-pager strong { font-family: var(--m-font-display); font-size: var(--m-text-lg); line-height: 1.3; color: var(--m-heading); }
.m-pager .m-pager__next { text-align: right; align-items: flex-end; }
.m-pager .m-pager__next:only-child { grid-column: 1 / -1; }
@media (min-width: 576px) { .m-pager .m-pager__next:only-child { grid-column: 2; } }
.m-pager .m-pager__next--primary { background: var(--m-action); border-color: var(--m-action); }
.m-pager .m-pager__next--primary :is(small, strong) { color: var(--m-text-on-action); }
.m-pager .m-pager__next--primary small { opacity: 0.85; }

/* ── Bảng bộ lọc (cột trái trên máy tính, thu gọn trên điện thoại) ── */
.m-filters { border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); }
.m-filters > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 var(--m-space-4); cursor: pointer; list-style: none; font-weight: var(--m-weight-semibold); color: var(--m-heading); }
.m-filters > summary::-webkit-details-marker { display: none; }
.m-filters > summary .m-icon { color: var(--m-text-muted); transition: transform var(--m-duration-base); }
.m-filters[open] > summary .m-icon { transform: rotate(180deg); }
.m-filters__body { display: flex; flex-direction: column; gap: var(--m-space-6); padding: var(--m-space-2) var(--m-space-4) var(--m-space-5); }
.m-filters__group > p { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); margin-bottom: 4px; }
.m-filters__body .m-check { min-height: 44px; padding-block: 10px; font-size: var(--m-text-md); }
@media (min-width: 768px) { .m-filters__body .m-check { min-height: 40px; padding-block: 8px; font-size: var(--m-text-sm); } }
@media (min-width: 768px) { .m-filters__body .m-check input { width: 20px; height: 20px; } }
@media (min-width: 992px) {
  .m-filters { border: 0; background: none; }
  .m-filters > summary { display: none; }
  .m-filters__body { padding: 0; }
}

/* Điện thoại rất hẹp (< 360px, vd. iPhone SE đời đầu): thu gọn logo để header không tràn */
@media (max-width: 359.98px) {
  .m-header__inner { gap: var(--m-space-2); }
  .m-brand { gap: 8px; }
  .m-brand__mark { height: 36px; }
  .m-brand__name { font-size: 0.9375rem; }
  .m-brand__name small { display: none; }
  .m-header__actions { gap: 0; }
  .m-tabbar a, .m-tabbar button { font-size: 11px; }
  .m-tabbar .m-icon { padding-inline: 12px; }
}
/* Mục menu bắt đầu bằng biểu tượng (vd. danh sách trong bảng chia sẻ): biểu tượng cạnh chữ, không đẩy sang hai mép */
.m-menu-list :is(a, summary):has(> .m-icon:first-child) { justify-content: flex-start; gap: 14px; }

/* ═══════════ components/07-feedback-overlay.css ═══════════ */
/* ─────────────────────────────────────────────────────
   CALLOUT — khối thông báo trong trang
   ───────────────────────────────────────────────────── */
.m-callout {
  --m-c-bg: var(--m-info-bg); --m-c-bd: var(--m-info-border); --m-c-fg: var(--m-info-text); --m-c-ic: var(--m-info-icon);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
  padding: var(--m-space-4) var(--m-space-5);
  border: 1px solid var(--m-c-bd); border-radius: var(--m-radius-lg);
  background: var(--m-c-bg); color: var(--m-text);
  font-size: var(--m-text-md); line-height: 1.55;
}
.m-callout > .m-icon { grid-row: span 3; color: var(--m-c-ic); --m-icon-size: 22px; margin-top: 1px; }
.m-callout__title { font-weight: var(--m-weight-semibold); color: var(--m-c-fg); }
.m-callout__body { color: var(--m-text-secondary); }
.m-callout__body > * + * { margin-top: 0.5em; }
.m-callout__actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.m-callout--success { --m-c-bg: var(--m-success-bg); --m-c-bd: var(--m-success-border); --m-c-fg: var(--m-success-text); --m-c-ic: var(--m-success-icon); }
.m-callout--warning { --m-c-bg: var(--m-warning-bg); --m-c-bd: var(--m-warning-border); --m-c-fg: var(--m-warning-text); --m-c-ic: var(--m-warning-icon); }
.m-callout--danger  { --m-c-bg: var(--m-danger-bg);  --m-c-bd: var(--m-danger-border);  --m-c-fg: var(--m-danger-text);  --m-c-ic: var(--m-danger-icon); }
.m-callout--neutral { --m-c-bg: var(--m-surface-sunken); --m-c-bd: var(--m-border); --m-c-fg: var(--m-heading); --m-c-ic: var(--m-text-muted); }
.m-callout--compact { padding: var(--m-space-3) var(--m-space-4); font-size: var(--m-text-sm); }
.m-callout--compact > .m-icon { --m-icon-size: 18px; }

/* Banner toàn trang (thông báo khẩn, lịch thay đổi) */
.m-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px var(--m-space-gutter); background: var(--m-lapis-900); color: #fff; font-size: var(--m-text-sm); text-align: center; }
.m-banner a:not(.m-btn) { color: var(--m-gold-200); font-weight: var(--m-weight-semibold); }
.m-banner--gold { background: var(--m-ornament-subtle); color: var(--m-ornament-text); }
.m-banner--gold a:not(.m-btn) { color: var(--m-heading); }

/* ─────────────────────────────────────────────────────
   TOAST — thông báo tạm thời. Gọi bằng JS: Mandala.toast('Đã lưu bài', { action: … })
   ───────────────────────────────────────────────────── */
.m-toast-region {
  position: fixed; z-index: var(--m-z-toast); left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(480px, calc(100vw - 32px));
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.m-has-tabbar .m-toast-region { bottom: calc(var(--m-tabbar-h) + 16px + env(safe-area-inset-bottom)); }
.m-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 18px; min-height: 52px;
  border-radius: var(--m-radius-md); background: var(--m-surface-inverse); color: var(--m-text-inverse);
  box-shadow: var(--m-shadow-lg); font-size: var(--m-text-md); line-height: 1.4;
  animation: m-toast-in var(--m-duration-slow) var(--m-ease-out);
}
.m-toast.is-leaving { animation: m-toast-out var(--m-duration-base) var(--m-ease-standard) forwards; }
.m-toast__msg { flex: 1; }
.m-toast .m-icon { color: var(--m-gold-300); --m-icon-size: 20px; }
[data-theme="dark"] .m-toast .m-icon { color: var(--m-gold-700); }
.m-toast__action { flex: none; padding: 8px 12px; border: 0; border-radius: var(--m-radius-sm); background: rgb(255 255 255 / 0.12); color: inherit; font-weight: var(--m-weight-semibold); font-size: var(--m-text-sm); }
.m-toast__action:hover { background: rgb(255 255 255 / 0.2); }
[data-theme="dark"] .m-toast__action { background: rgb(0 0 0 / 0.08); }
.m-toast__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.7; }
.m-toast__close:hover { opacity: 1; background: rgb(255 255 255 / 0.1); }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes m-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ─────────────────────────────────────────────────────
   EMPTY STATE — không có kết quả / chưa có nội dung
   ───────────────────────────────────────────────────── */
.m-empty {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: var(--m-space-3);
  padding: var(--m-space-12) var(--m-space-6); text-align: center;
  border: 1px dashed var(--m-border-strong); border-radius: var(--m-radius-xl);
}
.m-empty::before {
  content: ""; position: absolute; z-index: -1; width: 280px; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--m-ornament); opacity: 0.08;
  -webkit-mask: var(--m-ornament-mandala) center / contain no-repeat; mask: var(--m-ornament-mandala) center / contain no-repeat;
}
.m-empty__title { font-family: var(--m-font-display); font-size: var(--m-text-xl); font-weight: var(--m-weight-bold); color: var(--m-heading); }
.m-empty__text { max-width: 44ch; color: var(--m-text-secondary); }
.m-empty .m-btn-group { justify-content: center; margin-top: var(--m-space-2); }

/* ── Skeleton: khung chờ khi tải ── */
.m-skeleton {
  display: block; border-radius: var(--m-radius-sm);
  background: linear-gradient(90deg, var(--m-skeleton) 0%, var(--m-skeleton-shine) 50%, var(--m-skeleton) 100%) 0 0 / 200% 100%;
  animation: m-shimmer 1.6s ease-in-out infinite;
}
.m-skeleton--text { height: 0.9em; margin-block: 0.35em; }
.m-skeleton--title { height: 1.3em; width: 80%; }
.m-skeleton--media { aspect-ratio: 3 / 2; border-radius: var(--m-radius-lg); }
.m-skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes m-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Progress ── */
.m-progress { height: 6px; border-radius: 6px; background: var(--m-surface-muted); overflow: hidden; }
.m-progress > span { display: block; height: 100%; width: var(--m-value, 0%); border-radius: inherit; background: var(--m-action); transition: width var(--m-duration-slow) var(--m-ease-out); }
.m-progress--gold > span { background: var(--m-ornament); }
.m-progress--indeterminate > span { width: 35%; animation: m-indeterminate 1.4s var(--m-ease-in-out) infinite; }
@keyframes m-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ── Spinner: pháp luân quay chậm ── */
.m-spinner {
  display: inline-block; width: var(--m-spinner, 28px); height: var(--m-spinner, 28px); color: var(--m-ornament);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 4.5V10M12 14v5.5M4.5 12H10M14 12h5.5M6.7 6.7l3.9 3.9M13.4 13.4l3.9 3.9M17.3 6.7l-3.9 3.9M10.6 13.4l-3.9 3.9M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 4.5V10M12 14v5.5M4.5 12H10M14 12h5.5M6.7 6.7l3.9 3.9M13.4 13.4l3.9 3.9M17.3 6.7l-3.9 3.9M10.6 13.4l-3.9 3.9M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: m-spin 2.4s linear infinite;
}

/* ─────────────────────────────────────────────────────
   DIALOG — <dialog class="m-dialog"> (native, có sẵn bẫy focus & phím Esc)
   Trên mobile thành bottom sheet.
   ───────────────────────────────────────────────────── */
.m-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 760px);
  margin: auto; /* base.css đặt * { margin: 0 } — trả lại căn giữa của <dialog> */
  padding: 0; border: 0; border-radius: var(--m-radius-xl);
  background: var(--m-surface); color: var(--m-text); box-shadow: var(--m-shadow-lg);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity var(--m-duration-base) var(--m-ease-standard), transform var(--m-duration-slow) var(--m-ease-out), overlay var(--m-duration-base) allow-discrete, display var(--m-duration-base) allow-discrete;
}
.m-dialog[open] { opacity: 1; transform: none; display: flex; flex-direction: column; }
@starting-style { .m-dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); } }
.m-dialog::backdrop { background: var(--m-overlay); opacity: 0; transition: opacity var(--m-duration-base), overlay var(--m-duration-base) allow-discrete, display var(--m-duration-base) allow-discrete; }
.m-dialog[open]::backdrop { opacity: 1; }
@starting-style { .m-dialog[open]::backdrop { opacity: 0; } }
.m-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: var(--m-space-6) var(--m-space-6) 0; }
.m-dialog__title { font-family: var(--m-font-display); font-size: var(--m-text-2xl); font-weight: var(--m-weight-bold); color: var(--m-heading); line-height: 1.25; }
.m-dialog__head .m-btn--icon { margin: -8px -8px 0 0; }
.m-dialog__body { padding: var(--m-space-4) var(--m-space-6); overflow-y: auto; color: var(--m-text-secondary); }
.m-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: var(--m-space-4) var(--m-space-6) var(--m-space-6); }
@media (max-width: 575.98px) {
  .m-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom); }
  @starting-style { .m-dialog[open] { transform: translateY(40px); } }
  .m-dialog__foot { flex-direction: column-reverse; } .m-dialog__foot .m-btn { width: 100%; }
  .m-dialog::before { content: ""; align-self: center; width: 40px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--m-border-strong); flex: none; }
}

/* ─────────────────────────────────────────────────────
   TOOLTIP & POPOVER — dùng cho chú giải thuật ngữ trong bài
   <button class="m-term" data-m-popover="tt-quy-y">Quy y</button>
   <div class="m-popover" id="tt-quy-y" role="tooltip" hidden>…</div>
   ───────────────────────────────────────────────────── */
.m-tooltip {
  position: absolute; z-index: var(--m-z-tooltip);
  max-width: 260px; padding: 6px 10px; border-radius: var(--m-radius-sm);
  background: var(--m-surface-inverse); color: var(--m-text-inverse);
  font-size: var(--m-text-sm); line-height: 1.4; pointer-events: none;
  animation: m-fade-in var(--m-duration-fast) var(--m-ease-standard);
}
.m-popover {
  position: absolute; z-index: var(--m-z-tooltip);
  width: min(340px, calc(100vw - 32px)); padding: var(--m-space-4) var(--m-space-5);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  background: var(--m-surface); color: var(--m-text); box-shadow: var(--m-shadow-lg);
  font-family: var(--m-font-sans); font-size: var(--m-text-md); line-height: 1.55; font-style: normal;
  animation: m-fade-in var(--m-duration-base) var(--m-ease-out);
}
.m-popover__term { display: block; font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); color: var(--m-heading); }
.m-popover__alt { display: block; font-size: var(--m-text-sm); color: var(--m-ornament-text); margin-bottom: 6px; font-style: italic; }
.m-popover__text { color: var(--m-text-secondary); font-size: var(--m-text-md); }
.m-popover__more { display: inline-block; margin-top: 8px; font-size: var(--m-text-sm); font-weight: var(--m-weight-semibold); }
button.m-term {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--m-ornament) 80%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
}
button.m-term:hover, button.m-term[aria-expanded="true"] { background: var(--m-highlight); border-radius: 2px; }
@keyframes m-fade-in { from { opacity: 0; transform: translateY(4px); } }

/* ── Dropdown menu ── */
.m-dropdown { position: relative; display: inline-block; }
.m-dropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--m-z-dropdown);
  min-width: 220px; padding: 6px; list-style: none;
  border: 1px solid var(--m-border); border-radius: var(--m-radius-md);
  background: var(--m-surface); box-shadow: var(--m-shadow-lg);
  animation: m-fade-in var(--m-duration-fast) var(--m-ease-out);
}
.m-dropdown__menu[hidden] { display: none; }
.m-dropdown__menu :is(a, button) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: var(--m-radius-sm); background: none; text-align: left;
  font-size: var(--m-text-sm); color: var(--m-text); text-decoration: none;
}
.m-dropdown__menu :is(a, button):hover, .m-dropdown__menu :is(a, button):focus-visible { background: var(--m-surface-muted); outline: none; }
.m-dropdown__menu .m-icon { --m-icon-size: 18px; color: var(--m-text-muted); }
.m-dropdown__menu hr { margin: 6px 0; }

/* ─────────────────────────────────────────────────────
   ACCORDION — dùng <details>; hỏi đáp, hướng dẫn
   ───────────────────────────────────────────────────── */
.m-accordion { border-top: 1px solid var(--m-border); }
.m-accordion > details { border-bottom: 1px solid var(--m-border); }
.m-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--m-font-display); font-weight: var(--m-weight-semibold); font-size: var(--m-text-lg); line-height: 1.35; color: var(--m-heading);
}
.m-accordion summary::-webkit-details-marker { display: none; }
.m-accordion summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--m-surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6255' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--m-duration-base) var(--m-ease-out), background-color var(--m-duration-fast);
}
[data-theme="dark"] .m-accordion summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C2B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E"); }
.m-accordion details[open] > summary::after { transform: rotate(45deg); }
.m-accordion summary:hover::after { background-color: var(--m-border); }
.m-accordion summary:focus-visible { outline-offset: 4px; }
.m-accordion__body { padding: 0 44px var(--m-space-5) 0; color: var(--m-text-secondary); line-height: 1.65; }
.m-accordion__body > * + * { margin-top: 0.75em; }
@supports (interpolate-size: allow-keywords) {
  .m-accordion { interpolate-size: allow-keywords; }
  .m-accordion details::details-content { height: 0; overflow: clip; transition: height var(--m-duration-slow) var(--m-ease-out), content-visibility var(--m-duration-slow) allow-discrete; }
  .m-accordion details[open]::details-content { height: auto; }
}
.m-accordion--boxed { border: 0; display: flex; flex-direction: column; gap: 8px; }
.m-accordion--boxed > details { border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); padding-inline: var(--m-space-5); }

/* ═══════════ components/08-content-blocks.css ═══════════ */
/* ─────────────────────────────────────────────────────
   SECTION HEAD — tiêu đề khối trên trang chủ / trang tổng hợp
   <div class="m-section-head"><div><p class="m-overline">Thư viện</p><h2 class="m-h2">Pháp thoại mới</h2></div><a class="m-link-arrow">Xem tất cả</a></div>
   ───────────────────────────────────────────────────── */
.m-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m-space-4) var(--m-space-6); flex-wrap: wrap; margin-bottom: var(--m-space-6); }
.m-section-head > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 60ch; }
.m-section-head > :is(.m-cluster, .m-rail-nav) { flex-direction: row; align-items: center; max-width: none; } /* nhóm nút bên phải vẫn nằm ngang */
.m-section-head p:not(.m-overline) { color: var(--m-text-secondary); }
.m-section-head--center { flex-direction: column; align-items: center; text-align: center; }
.m-section-head--center > div { align-items: center; }
.m-section-head--center .m-overline::before, .m-section-head--center .m-overline::after { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; opacity: 0.6; vertical-align: middle; margin-inline: 10px; }

/* ── Divider ── */
.m-divider { border: 0; height: 1px; background: var(--m-border); margin-block: var(--m-space-8); }
.m-divider--ornament {
  height: 14px; background: var(--m-ornament);
  -webkit-mask: var(--m-ornament-divider) center / auto 14px no-repeat; mask: var(--m-ornament-divider) center / auto 14px no-repeat;
}

/* ── Họa tiết mandala làm nền (luôn mờ, không cản chữ) ──
   <div class="m-mandala-bg" style="--m-mandala-size: 520px; --m-mandala-x: 85%; --m-mandala-y: 20%"> */
.m-mandala-bg { position: relative; isolation: isolate; overflow: hidden; }
.m-mandala-bg::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--m-mandala-size, 560px); aspect-ratio: 1;
  left: var(--m-mandala-x, 100%); top: var(--m-mandala-y, 50%); transform: translate(-50%, -50%);
  background: var(--m-mandala-color, var(--m-ornament)); opacity: var(--m-mandala-opacity, 0.1);
  -webkit-mask: var(--m-ornament-mandala) center / contain no-repeat; mask: var(--m-ornament-mandala) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .m-mandala-bg--turn::before { animation: m-turn 240s linear infinite; }
}
@keyframes m-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Ngũ sắc trang trí ──
   Mandala vốn nhiều màu: năm màu của năm gia đình Phật, xếp theo bốn phương của cung điện mandala
   (Tây đỏ ở trên · Bắc lục bên phải · Đông lam ở dưới · Nam vàng bên trái · trung tâm trắng).
   Quy tắc để không cản việc đọc:
   1. Màu chỉ nằm trong NÉT họa tiết, dải viền hoặc quầng sáng ở góc — không bao giờ tô chữ hay làm nền ngay sau đoạn văn.
   2. Chữ dài luôn đặt trên mặt phẳng đặc (thẻ, khung); họa tiết ở rìa, lệch khỏi vùng chữ.
   3. Mỗi màn hình tối đa một họa tiết ngũ sắc lớn. Người đọc bật "tăng tương phản" thì tự ẩn. */
:root {
  --m-five-conic: radial-gradient(circle, var(--m-five-white) 0 21%, transparent 21.5%),
    conic-gradient(from -45deg, var(--m-five-red) 0 25%, var(--m-five-green) 0 50%, var(--m-five-blue) 0 75%, var(--m-five-yellow) 0);
  --m-five-stripe: linear-gradient(90deg, var(--m-five-blue) 0 20%, var(--m-five-white) 0 40%, var(--m-five-red) 0 60%, var(--m-five-green) 0 80%, var(--m-five-yellow) 0);
  --m-five-glow: 8%;
}
[data-theme="dark"] { --m-five-glow: 14%; }

/* Mandala ngũ sắc: thêm vào .m-mandala-bg. Nền sáng 12–18%, nền tối 22–32%. */
.m-mandala-bg--five { --m-mandala-opacity: 0.16; }
.m-mandala-bg--five::before { background: var(--m-five-conic); }
/* Quầng màu mềm phía sau nét vẽ — để năm sắc hiện ra cả khi nét mảnh nhìn từ xa */
.m-mandala-bg--five::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  width: calc(var(--m-mandala-size, 560px) * 0.7); aspect-ratio: 1; border-radius: 50%;
  left: var(--m-mandala-x, 100%); top: var(--m-mandala-y, 50%); transform: translate(-50%, -50%);
  background: var(--m-five-conic); opacity: var(--m-five-halo, 0.12); filter: blur(32px);
}

/* Dấu mandala ngũ sắc: họa tiết đủ màu ở kích thước nhỏ (40–96px), đặt cạnh tiêu đề — nơi không có chữ chạy qua.
   <span class="m-mandala-mark" aria-hidden="true"></span> */
.m-mandala-mark {
  display: inline-block; flex: none; width: var(--m-mark-size, 64px); aspect-ratio: 1;
  background: var(--m-five-conic);
  -webkit-mask: var(--m-ornament-mandala) center / contain no-repeat; mask: var(--m-ornament-mandala) center / contain no-repeat;
}

/* Dải ngũ sắc (thứ tự cờ phướn: lam · trắng · đỏ · lục · vàng) — vạch mảnh ở mép trên một khung.
   .m-five-band là vạch rời; .m-five-top đặt vạch lên mép trên của chính phần tử (giữ được bo góc). */
.m-five-band { height: 4px; border: 0; border-radius: 2px; background: var(--m-five-stripe); }
.m-five-top { background-image: var(--m-five-stripe); background-size: 100% var(--m-five-top, 3px); background-repeat: no-repeat; background-position: top; }

/* Quầng ngũ sắc: bốn góc ửng nhẹ màu bốn phương, giữa để trống cho chữ. Dùng cho khối nền lõm lớn. */
.m-five-aura {
  background-image:
    radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--m-five-blue) var(--m-five-glow), transparent), transparent 70%),
    radial-gradient(50% 55% at 100% 0%, color-mix(in srgb, var(--m-five-red) var(--m-five-glow), transparent), transparent 70%),
    radial-gradient(55% 55% at 100% 100%, color-mix(in srgb, var(--m-five-green) var(--m-five-glow), transparent), transparent 70%),
    radial-gradient(55% 60% at 0% 100%, color-mix(in srgb, var(--m-five-yellow) var(--m-five-glow), transparent), transparent 70%);
}
@media (prefers-contrast: more) {
  .m-mandala-bg--five::before, .m-mandala-bg--five::after { display: none; }
  .m-five-aura { background-image: none; }
}

/* ─────────────────────────────────────────────────────
   VERSE — kệ / kinh văn. Căn giữa, chữ có chân, mỗi câu một dòng.
   <figure class="m-verse"><blockquote><p>Ai sống trong đời này<br>Ái dục được hàng phục</p></blockquote><figcaption>Kinh Pháp Cú, kệ 336</figcaption></figure>
   ───────────────────────────────────────────────────── */
.m-verse {
  position: relative; margin-block: 2em; padding: var(--m-space-8) var(--m-space-6);
  text-align: center; border-radius: var(--m-radius-lg);
  background: var(--m-practice-bg);
}
.m-verse::before, .m-verse::after {
  content: ""; position: absolute; left: 50%; width: 132px; height: 14px; transform: translateX(-50%);
  background: var(--m-ornament);
  -webkit-mask: var(--m-ornament-divider) center / contain no-repeat; mask: var(--m-ornament-divider) center / contain no-repeat;
}
.m-verse::before { top: 14px; } .m-verse::after { bottom: 14px; }
.m-verse blockquote, .m-prose .m-verse blockquote { border: 0; padding: 0; margin: 0; font-family: var(--m-font-serif); font-style: italic; font-size: 1.08em; line-height: 1.85; color: var(--m-heading); }
.m-verse figcaption, .m-prose .m-verse figcaption { margin-top: 1em; padding: 0; border: 0; font-family: var(--m-font-sans); font-style: normal; font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); color: var(--m-ornament-text); }
.m-verse--plain { background: none; padding-inline: 0; }

/* ─────────────────────────────────────────────────────
   MANTRA — chân ngôn: phiên âm lớn, nghĩa nhỏ, số biến tụng
   ───────────────────────────────────────────────────── */
.m-mantra {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block: 2em; padding: var(--m-space-8) var(--m-space-6);
  border-radius: var(--m-radius-xl); text-align: center;
  background: var(--m-lapis-900); color: var(--m-stone-50);
}
.m-mantra::before {
  content: ""; position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--m-gold-400); opacity: 0.13;
  -webkit-mask: var(--m-ornament-mandala) center / contain no-repeat; mask: var(--m-ornament-mandala) center / contain no-repeat;
}
.m-mantra__label { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-gold-300); }
.m-mantra__text { margin-top: 12px; font-family: var(--m-font-display); font-weight: var(--m-weight-semibold); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.3; letter-spacing: 0.01em; color: #fff; text-wrap: balance; }
.m-mantra__meaning { max-width: 46ch; margin: 12px auto 0; font-size: var(--m-text-md); line-height: 1.6; color: rgb(255 255 255 / 0.78); }
.m-mantra__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: var(--m-space-5); }
.m-mantra__count { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--m-space-4); font-size: var(--m-text-sm); color: var(--m-gold-200); }
[data-theme="dark"] .m-mantra { background: #18213A; }

/* ─────────────────────────────────────────────────────
   PRACTICE — khối "Thực hành" trong bài (thay blockquote cũ)
   ───────────────────────────────────────────────────── */
.m-practice {
  margin-block: 2em; padding: var(--m-space-6);
  border: 1px solid var(--m-practice-border); border-radius: var(--m-radius-lg);
  background: var(--m-practice-bg);
  font-size: 0.95em;
}
.m-practice__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--m-space-4); }
.m-practice__label { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-ornament-text); }
.m-practice__title, .m-prose .m-practice__title { margin: 0; font-family: var(--m-font-display); font-size: 1.15em; font-weight: var(--m-weight-bold); color: var(--m-heading); line-height: 1.3; }
.m-practice__meta { margin-left: auto; font-size: var(--m-text-sm); color: var(--m-text-muted); white-space: nowrap; }
.m-practice ol { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.m-practice ol > li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin: 0; }
.m-practice ol > li::before {
  content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-surface); border: 1px solid var(--m-practice-border);
  font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: 0.85rem; color: var(--m-ornament-text);
}
.m-practice ol > li strong { display: block; color: var(--m-heading); }
.m-practice > p + ol, .m-practice > ol + p { margin-top: 1em; }

/* ── Steps: các bước (hướng dẫn chiêm bái, đăng ký) ── */
.m-steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--m-space-6); }
@media (min-width: 768px) { .m-steps--row { grid-template-columns: repeat(var(--m-cols, 3), minmax(0, 1fr)); } }
.m-steps > li { counter-increment: step; display: flex; flex-direction: column; gap: 6px; padding-top: var(--m-space-4); border-top: 2px solid var(--m-border); }
.m-steps > li::before { content: "Bước " counter(step); font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-ornament-text); }
.m-steps > li.is-current { border-top-color: var(--m-action); }
.m-steps > li.is-done { border-top-color: var(--m-success-icon); }
.m-steps__title { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-lg); color: var(--m-heading); line-height: 1.3; }
.m-steps__text { color: var(--m-text-secondary); font-size: var(--m-text-md); }

/* ── Pull quote ── */
.m-pullquote {
  margin-block: 2em; padding-block: var(--m-space-6);
  border-block: 1px solid var(--m-border);
  font-family: var(--m-font-display); font-weight: var(--m-weight-semibold); font-size: 1.35em; line-height: 1.4; color: var(--m-heading); text-wrap: balance;
}
.m-pullquote::before { content: "“"; display: block; height: 0.55em; font-family: var(--m-font-serif); font-size: 2.6em; line-height: 1; color: var(--m-ornament); }
.m-pullquote cite { display: block; margin-top: 12px; font: var(--m-weight-medium) var(--m-text-sm)/1.4 var(--m-font-sans); font-style: normal; color: var(--m-text-muted); }

/* ── Stat: con số ── */
.m-stat { display: flex; flex-direction: column; gap: 4px; }
.m-stat__value { font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-4xl); line-height: 1.05; letter-spacing: -0.02em; color: var(--m-heading); font-variant-numeric: tabular-nums; }
.m-stat__value small { font-size: 0.45em; color: var(--m-text-muted); letter-spacing: 0; margin-left: 4px; }
.m-stat__label { font-size: var(--m-text-sm); color: var(--m-text-muted); line-height: 1.45; }
.m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--m-space-6); }
.m-stats > .m-stat { padding-left: var(--m-space-4); border-left: 2px solid var(--m-ornament-subtle); }

/* ── Danh sách thông tin (key – value): thông tin sự kiện, giờ mở cửa ── */
.m-dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 0; font-size: var(--m-text-md); }
.m-dl > dt, .m-dl > dd { padding-block: 12px; border-bottom: 1px solid var(--m-border); line-height: 1.5; }
.m-dl > dt { display: flex; gap: 10px; align-items: flex-start; padding-right: var(--m-space-5); color: var(--m-text-muted); font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); padding-top: 14px; }
.m-dl > dt .m-icon { --m-icon-size: 18px; margin-top: 0; }
.m-dl > dd { margin: 0; color: var(--m-heading); }
.m-dl > dd small { display: block; color: var(--m-text-muted); font-size: var(--m-text-sm); }
.m-dl > :nth-last-child(-n + 2) { border-bottom: 0; }
@media (max-width: 479.98px) {
  .m-dl { grid-template-columns: 1fr; }
  .m-dl > dt { padding-bottom: 0; border: 0; }
  .m-dl > dd { padding-top: 4px; }
}

/* ── Bảng dữ liệu (cuộn ngang trên mobile) ── */
.m-table-wrap { overflow-x: auto; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); }
.m-table { width: 100%; font-size: var(--m-text-sm); line-height: 1.5; }
.m-table th, .m-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--m-border); }
.m-table thead th { background: var(--m-surface-sunken); font-weight: var(--m-weight-semibold); color: var(--m-text-secondary); white-space: nowrap; font-size: var(--m-text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.m-table tbody tr:last-child td { border-bottom: 0; }
.m-table tbody tr:hover { background: var(--m-surface-sunken); }
.m-table td.is-num, .m-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.m-table code { font-family: var(--m-font-mono); font-size: 0.92em; }

/* ── Quote card (lời dạy ngắn của Thượng sư) ── */
.m-teaching { display: flex; flex-direction: column; gap: var(--m-space-4); padding: var(--m-space-8); border-radius: var(--m-radius-xl); background: var(--m-surface-sunken); }
.m-teaching blockquote { font-family: var(--m-font-serif); font-size: var(--m-text-2xl); line-height: 1.5; color: var(--m-heading); text-wrap: pretty; }
.m-teaching blockquote::before { content: "“"; color: var(--m-ornament); }
.m-teaching blockquote::after { content: "”"; color: var(--m-ornament); }

/* ── Notice: thông báo có hạn (tự chuyển "Đã kết thúc") ── */
.m-notice { display: flex; gap: var(--m-space-4); align-items: flex-start; padding: var(--m-space-4) 0; border-bottom: 1px solid var(--m-border); }
.m-notice__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.m-notice__title { font-weight: var(--m-weight-semibold); color: var(--m-heading); line-height: 1.4; }
.m-notice__title a { color: inherit; text-decoration: none; }
.m-notice__title a:hover { text-decoration: underline; }
.m-notice.is-expired .m-notice__title { color: var(--m-text-muted); }

/* ═══════════ components/09-media-reader.css ═══════════ */
/* ─────────────────────────────────────────────────────
   FIGURE & VIDEO
   ───────────────────────────────────────────────────── */
.m-figure { display: flex; flex-direction: column; gap: 10px; }
.m-figure img { width: 100%; border-radius: var(--m-radius-lg); filter: brightness(var(--m-img-dim)); }
.m-figure figcaption { font-size: var(--m-text-sm); line-height: 1.5; color: var(--m-text-muted); padding-left: 12px; border-left: 2px solid var(--m-border-strong); }
.m-figure--wide { margin-inline: calc(var(--m-space-gutter) * -1); }
.m-figure--wide img { border-radius: 0; }
@media (min-width: 992px) { .m-figure--wide { margin-inline: -80px; } .m-figure--wide img { border-radius: var(--m-radius-xl); } }

/* Video "mặt nạ": chỉ tải iframe YouTube khi người dùng bấm phát (nhanh hơn ~1MB/trang)
   <div class="m-video" data-m-video="nJson1_wyb4"><img src="…jpg" alt=""><button class="m-video__play" aria-label="Phát video: …"></button></div> */
.m-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--m-radius-lg); background: #000; }
.m-video img, .m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.m-video img { transition: opacity var(--m-duration-base); }
.m-video__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.94); color: var(--m-lapis-900);
  display: grid; place-items: center; box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);
  transition: transform var(--m-duration-base) var(--m-ease-out), background-color var(--m-duration-fast);
}
.m-video__play::before { content: ""; width: 26px; height: 26px; margin-left: 5px; background: currentColor; clip-path: polygon(15% 5%, 95% 50%, 15% 95%); border-radius: 2px; }
.m-video:hover .m-video__play { transform: scale(1.06); }
.m-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.m-video__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); color: #fff; font-size: var(--m-text-sm); font-weight: var(--m-weight-medium); pointer-events: none; }
.m-video.is-playing :is(img, .m-video__play, .m-video__caption) { display: none; }

/* Gallery: ảnh đầu lớn, còn lại lưới */
.m-gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .m-gallery { grid-template-columns: repeat(4, 1fr); } .m-gallery > :first-child { grid-column: span 2; grid-row: span 2; } }
.m-gallery a, .m-gallery > figure { position: relative; display: block; overflow: hidden; border-radius: var(--m-radius-md); aspect-ratio: 1; background: var(--m-surface-muted); }
.m-gallery img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--m-duration-slow); }
.m-gallery a:hover img { filter: brightness(0.9); }
.m-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(10 14 24 / 0.55); color: #fff; font-family: var(--m-font-display); font-weight: var(--m-weight-bold); font-size: var(--m-text-2xl); }

/* Carousel ngang (cuộn chạm, không tự chạy) */
.m-rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--m-rail-item, min(78%, 300px)); gap: var(--m-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
.m-rail::-webkit-scrollbar { display: none; }
.m-rail > * { scroll-snap-align: start; }
@media (max-width: 767.98px) { .m-rail { margin-inline: calc(var(--m-space-gutter) * -1); padding-inline: var(--m-space-gutter); scroll-padding-inline: var(--m-space-gutter); } }
.m-rail-nav { display: flex; gap: 8px; }
.m-rail-nav .m-btn:disabled { opacity: 0.45; }

/* ─────────────────────────────────────────────────────
   AUDIO — trình phát pháp âm
   ───────────────────────────────────────────────────── */
.m-audio {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center;
  padding: var(--m-space-4) var(--m-space-5);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface);
}
.m-audio__play {
  grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--m-action); color: var(--m-text-on-action);
  transition: background-color var(--m-duration-fast), transform var(--m-duration-instant);
}
.m-audio__play:hover { background: var(--m-action-hover); }
.m-audio__play:active { transform: scale(0.96); }
.m-audio__play .m-icon { --m-icon-size: 24px; }
.m-audio__play .m-icon--play { margin-left: 3px; fill: currentColor; }
.m-audio__play .m-icon--pause { display: none; }
.m-audio.is-playing .m-audio__play .m-icon--play { display: none; }
.m-audio.is-playing .m-audio__play .m-icon--pause { display: block; }
.m-audio__title { font-weight: var(--m-weight-semibold); color: var(--m-heading); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-audio__sub { font-size: var(--m-text-sm); color: var(--m-text-muted); }
.m-audio__track { grid-column: 2; display: flex; align-items: center; gap: 12px; font-size: var(--m-text-xs); color: var(--m-text-muted); font-variant-numeric: tabular-nums; }
.m-audio__seek { flex: 1; -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; --m-value: 0%; }
.m-audio__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--m-action) var(--m-value), var(--m-surface-muted) var(--m-value)); }
.m-audio__seek::-moz-range-track { height: 4px; border-radius: 4px; background: var(--m-surface-muted); }
.m-audio__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--m-action); }
.m-audio__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--m-action); border: 2px solid var(--m-surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.m-audio__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--m-action); border: 2px solid var(--m-surface); }
.m-audio__seek:focus-visible { outline: none; }
.m-audio__seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-focus) 40%, transparent); }
.m-audio__tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; justify-content: space-between; border-top: 1px solid var(--m-border); padding-top: 10px; margin-top: 2px; }
.m-audio__tools .m-btn { --m-btn-h: 36px; font-size: var(--m-text-sm); }
.m-audio audio { display: none; }

/* ─────────────────────────────────────────────────────
   READER — công cụ đọc: thanh tiến độ, thanh công cụ, đọc tiếp
   ───────────────────────────────────────────────────── */
.m-read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--m-z-header) + 1); height: 3px; pointer-events: none; }
.m-read-progress > span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--m-progress, 0)); background: var(--m-ornament); }

.m-reader-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 6px; border: 1px solid var(--m-border); border-radius: var(--m-radius-full);
  background: var(--m-surface); width: fit-content; max-width: 100%;
}
.m-reader-tools .m-btn { --m-btn-h: 38px; --m-btn-px: 12px; font-size: var(--m-text-sm); }
.m-reader-tools .m-btn--icon { --m-btn-px: 0; }
.m-reader-tools__sep { width: 1px; height: 22px; background: var(--m-border); margin-inline: 2px; }
.m-reader-tools__scale { min-width: 3.2em; text-align: center; font-size: var(--m-text-sm); color: var(--m-text-muted); font-variant-numeric: tabular-nums; }
.m-reader-tools [aria-pressed="true"] { --m-btn-bg: var(--m-action-subtle); --m-btn-fg: var(--m-action-subtle-text); --m-btn-bg-hover: var(--m-action-subtle-hover); }

/* Bảng tùy chỉnh đọc (trong dropdown / sheet) */
.m-reader-panel { display: flex; flex-direction: column; gap: var(--m-space-5); padding: var(--m-space-4); min-width: 280px; }
.m-reader-panel__label { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); margin-bottom: 8px; }
.m-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-theme-swatches button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border: 1.5px solid var(--m-border); border-radius: var(--m-radius-md); background: var(--m-surface); font-size: var(--m-text-sm); color: var(--m-text-secondary);
}
.m-theme-swatches button::before { content: "Aa"; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--m-font-serif); font-size: 15px; border: 1px solid rgb(0 0 0 / 0.1); }
.m-theme-swatches [data-set-theme="light"]::before { background: #FCFBF8; color: #25211C; }
.m-theme-swatches [data-set-theme="paper"]::before { background: #F4EEDF; color: #2C261D; }
.m-theme-swatches [data-set-theme="dark"]::before  { background: #0D1220; color: #E9E4D9; }
.m-theme-swatches [aria-pressed="true"] { border-color: var(--m-action); color: var(--m-heading); font-weight: var(--m-weight-semibold); }

/* Thông tin đầu bài */
.m-article-head { display: flex; flex-direction: column; gap: var(--m-space-4); }
.m-article-head__title { font-size: var(--m-text-5xl); }
.m-article-head .m-lead { max-width: 60ch; }
.m-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-block: var(--m-space-4); border-block: 1px solid var(--m-border); }
.m-byline .m-meta { font-size: var(--m-text-sm); }
.m-byline__tools { margin-left: auto; }
@media (max-width: 767.98px) { .m-byline__tools { margin-left: 0; width: 100%; } }
@media (max-width: 575.98px) {
  .m-reader-tools { width: 100%; justify-content: space-between; border-radius: var(--m-radius-lg); flex-wrap: nowrap; }
  .m-reader-tools .m-btn { --m-btn-px: 10px; }
}
@media (max-width: 399.98px) {
  .m-reader-tools__scale, .m-reader-tools__sep { display: none; }
  /* Màn hình rất hẹp: nhãn chữ chỉ còn cho trình đọc màn hình, nút còn biểu tượng */
  .m-reader-tools__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .m-reader-tools .m-btn:has(.m-reader-tools__label) { --m-btn-px: 0; width: var(--m-btn-h); }
}
/* Trình phát trên điện thoại hẹp: thanh tua trải hết bề ngang (dưới nút phát) để kéo bằng ngón cái dễ hơn */
.m-audio__seek { min-width: 0; }
@media (max-width: 479.98px) {
  .m-audio { padding: var(--m-space-4); gap: 10px 14px; }
  .m-audio__play { grid-row: auto; width: 52px; height: 52px; }
  .m-audio__track { grid-column: 1 / -1; }
  .m-audio__seek { height: 32px; }
}

/* ═══════════ components/10-hero-footer.css ═══════════ */
/* ─────────────────────────────────────────────────────
   HERO — ảnh lớn đầu trang chủ / trang chuyên đề.
   Chữ luôn nằm trên vùng tối của gradient; ảnh không tự chuyển (không slider).
   ───────────────────────────────────────────────────── */
.m-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: var(--m-hero-h, min(78vh, 720px));
  min-height: var(--m-hero-h, min(78svh, 720px)); /* svh: không nhảy khi thanh địa chỉ điện thoại co giãn */
  color: #fff; background: var(--m-lapis-950); /* nền dự phòng khi ảnh chưa tải */
}
.m-hero__media { position: absolute; inset: 0; z-index: -2; }
.m-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--m-hero-focus, 50% 40%); }
.m-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(8 12 22 / 0.28) 0%, rgb(8 12 22 / 0) 26%),
    linear-gradient(0deg, rgb(8 12 22 / 0.84) 0%, rgb(8 12 22 / 0.55) 38%, rgb(8 12 22 / 0.12) 72%, rgb(8 12 22 / 0) 100%);
}
.m-hero__content { display: flex; flex-direction: column; gap: var(--m-space-5); padding-block: calc(var(--m-header-h) + var(--m-space-8)) var(--m-space-10); max-width: 46rem; }
@media (min-width: 768px) { .m-hero__content { padding-bottom: var(--m-space-12); } }
@media (max-width: 575.98px) { .m-hero__content { gap: var(--m-space-4); } .m-hero .m-btn-group > .m-btn { flex: 1 1 100%; } }
.m-hero__title { font-family: var(--m-font-display); font-size: var(--m-text-6xl); font-weight: var(--m-weight-semibold); line-height: 1.12; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.m-hero__lead { font-size: var(--m-text-lead); line-height: 1.55; color: rgb(255 255 255 / 0.88); max-width: 38rem; text-wrap: pretty; }
.m-hero .m-overline { color: #fff; opacity: 0.92; }
.m-hero :is(.m-hero__title, .m-hero__lead, .m-overline) { text-shadow: 0 1px 18px rgb(0 0 0 / 0.28); }
@media (max-width: 767.98px) { .m-hero::before { background: linear-gradient(0deg, rgb(8 12 22 / 0.86) 0%, rgb(8 12 22 / 0.62) 50%, rgb(8 12 22 / 0.3) 100%); } }
.m-hero__credit { position: absolute; right: var(--m-space-gutter); bottom: 12px; font-size: 11px; color: rgb(255 255 255 / 0.6); }
.m-hero--short { --m-hero-h: min(52svh, 480px); }
/* Điện thoại xoay ngang (thấp < 500px): bỏ chiều cao tối thiểu, để nội dung tự quyết */
@media (max-height: 499.98px) and (orientation: landscape) {
  .m-hero, .m-hero--short { --m-hero-h: auto; }
  .m-hero__content { padding-block: calc(var(--m-header-h) + var(--m-space-6)) var(--m-space-6); }
}

/* Hero tách đôi: chữ trái, ảnh phải (không đè chữ lên ảnh) */
.m-hero-split { display: grid; gap: var(--m-space-8); align-items: center; padding-block: var(--m-space-12); }
@media (min-width: 768px) { .m-hero-split { grid-template-columns: 1fr 1fr; gap: var(--m-space-10); } }
@media (min-width: 992px) { .m-hero-split { grid-template-columns: 1fr 1.1fr; gap: var(--m-space-12); padding-block: var(--m-space-16); } }
@media (max-width: 767.98px) { .m-hero-split__media { aspect-ratio: 3 / 2; border-radius: var(--m-radius-xl); } }
.m-hero-split__media { position: relative; border-radius: var(--m-radius-2xl); overflow: hidden; aspect-ratio: 5 / 4; }
.m-hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ─────────────────────────────────────────────────────
   PAGE HEAD — đầu trang cấp 2/3 (tiêu đề + mô tả + breadcrumb)
   ───────────────────────────────────────────────────── */
.m-page-head { --m-mandala-size: 520px; --m-mandala-x: 92%; --m-mandala-y: 40%; --m-mandala-opacity: 0.09; padding-block: var(--m-space-6) var(--m-space-8); border-bottom: 1px solid var(--m-border); background: var(--m-surface); }
.m-page-head__inner { display: flex; flex-direction: column; gap: var(--m-space-4); }
.m-page-head h1 { font-size: var(--m-text-5xl); max-width: 26ch; }
.m-page-head .m-lead { max-width: 58ch; }
@media (min-width: 768px) { .m-page-head { padding-block: var(--m-space-8) var(--m-space-10); } }
@media (min-width: 992px) { .m-page-head { padding-block: var(--m-space-10) var(--m-space-12); } }
/* Điện thoại: họa tiết mandala nhỏ lại và lùi về góc để không nằm sau tiêu đề */
@media (max-width: 767.98px) { .m-page-head { --m-mandala-size: 340px; --m-mandala-x: 100%; --m-mandala-y: 0%; } }

/* ─────────────────────────────────────────────────────
   FOOTER — nền lam thẫm, họa tiết mandala vàng kim (giữ tinh thần footer hiện tại)
   ───────────────────────────────────────────────────── */
.m-footer {
  --m-mandala-size: 720px; --m-mandala-x: 50%; --m-mandala-y: 108%; --m-mandala-opacity: 0.22; --m-mandala-color: var(--m-gold-400);
  background: var(--m-lapis-950); color: rgb(255 255 255 / 0.78);
  font-size: var(--m-text-sm);
}
.m-footer a:not(.m-btn) { color: rgb(255 255 255 / 0.86); text-decoration: none; }
.m-footer a:not(.m-btn):hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.m-footer :focus-visible { outline-color: var(--m-gold-300); }
.m-footer__top {
  display: grid; gap: var(--m-space-10) var(--m-gutter); padding-block: var(--m-space-12) var(--m-space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));      /* điện thoại: 2 cột liên kết */
}
.m-footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .m-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--m-space-16) var(--m-space-12); } }
@media (min-width: 992px) { .m-footer__top { grid-template-columns: 1.3fr repeat(3, 1fr); } .m-footer__brand { grid-column: auto; } }
.m-footer__brand { display: flex; flex-direction: column; gap: var(--m-space-4); max-width: 30ch; }
.m-footer__brand .m-brand { color: #fff; }
.m-footer__brand .m-brand__name small { color: var(--m-gold-200); }
.m-footer__title { font-size: var(--m-text-xs); font-weight: var(--m-weight-semibold); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-gold-300); margin-bottom: 14px; }
.m-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m-footer ul a { display: inline-block; padding-block: 5px; }
.m-footer__address { font-style: normal; line-height: 1.6; }
.m-footer__social { display: flex; gap: 8px; }
.m-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: #fff; }
.m-footer__social a:hover { background: rgb(255 255 255 / 0.16); text-decoration: none; }
.m-footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: var(--m-space-5) var(--m-space-6); border-radius: var(--m-radius-lg); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); }
.m-footer__cta strong { color: #fff; font-family: var(--m-font-display); font-size: var(--m-text-lg); }
.m-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: var(--m-space-6) calc(var(--m-space-6) + env(safe-area-inset-bottom)); border-top: 1px solid rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.6); font-size: var(--m-text-xs); }
.m-footer__bottom ul { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.m-footer__bottom a:not(.m-btn) { color: rgb(255 255 255 / 0.7); }

/* Đường dẫn trang đặt trên ảnh hero */
.m-hero .m-breadcrumb a { color: rgb(255 255 255 / 0.85); }
.m-hero .m-breadcrumb a:hover { color: #fff; }
.m-hero .m-breadcrumb [aria-current="page"] { color: #fff; }
.m-hero .m-breadcrumb li + li::before { background: rgb(255 255 255 / 0.6); }
@media (max-width: 575.98px) {
  .m-footer__cta { flex-direction: column; align-items: stretch; padding: var(--m-space-5); }
  .m-footer__cta .m-btn { width: 100%; }
  .m-footer__bottom { flex-direction: column; }
}

/* ═══════════ components/11-mobile-touch.css ═══════════ */
/* ═════════════════════════════════════════════════════
   ĐIỆN THOẠI & MÁY TÍNH BẢNG — thành phần và quy tắc cho màn hình cảm ứng.
   Phân biệt hai trục độc lập:
   • KÍCH THƯỚC màn hình  → token theo thiết bị (--m-columns, --m-margin, --m-header-h…)
   • CÁCH NHẬP (chuột hay ngón tay) → @media (pointer: coarse) / (hover: none)
   Một iPad có bàn phím + trackpad là "máy tính bảng" nhưng dùng con trỏ — nên không gộp hai trục làm một.
   ═════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   BOTTOM SHEET — bảng trượt từ đáy (bộ lọc, chia sẻ, tùy chọn).
   <dialog class="m-sheet" id="loc" aria-labelledby="loc-t">
     <div class="m-sheet__handle" aria-hidden="true"></div>
     <div class="m-sheet__head"><h2 class="m-sheet__title" id="loc-t">Bộ lọc</h2> <button data-m-close …></div>
     <div class="m-sheet__body">…</div>
     <div class="m-sheet__foot"><button class="m-btn m-btn--block" data-m-close>Xem 12 kết quả</button></div>
   </dialog>
   Vuốt xuống trên tay cầm hoặc đầu bảng để đóng. Trên máy tính bảng/máy tính, bảng tự thành hộp thoại giữa màn hình.
   .m-sheet--inline-md / --inline-lg: từ 768 / 992px KHÔNG còn là bảng nổi mà nằm luôn trong trang
   (vd. cột bộ lọc) — viết nội dung MỘT lần, dùng cho cả hai.
   ───────────────────────────────────────────────────── */
.m-sheet {
  position: fixed; inset: auto 0 0 0; z-index: var(--m-z-modal);
  width: 100%; max-width: 100%; max-height: 88dvh; margin: 0;
  padding: 0 0 env(safe-area-inset-bottom); border: 0;
  border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
  background: var(--m-surface); color: var(--m-text); box-shadow: var(--m-shadow-lg);
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--m-duration-slow) var(--m-ease-out), overlay var(--m-duration-slow) allow-discrete, display var(--m-duration-slow) allow-discrete;
}
.m-sheet[open] { display: flex; transform: translateY(var(--m-drag, 0px)); }
@starting-style { .m-sheet[open] { transform: translateY(100%); } }
.m-sheet.is-dragging { transition: none; }
.m-sheet::backdrop { background: var(--m-overlay); opacity: 0; transition: opacity var(--m-duration-slow), overlay var(--m-duration-slow) allow-discrete, display var(--m-duration-slow) allow-discrete; }
.m-sheet[open]::backdrop { opacity: 1; }
@starting-style { .m-sheet[open]::backdrop { opacity: 0; } }
.m-sheet__handle { flex: none; align-self: center; width: 44px; height: 5px; margin: 10px 0 2px; border-radius: 5px; background: var(--m-border-strong); cursor: grab; touch-action: none; }
.m-sheet__handle::before { content: ""; display: block; margin: -14px -24px; height: 33px; } /* vùng chạm lớn hơn nét vẽ */
.m-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--m-space-2) var(--m-space-3) var(--m-space-2) var(--m-space-5); touch-action: none; }
.m-sheet__title { font-family: var(--m-font-display); font-size: var(--m-text-xl); font-weight: var(--m-weight-bold); color: var(--m-heading); line-height: 1.3; }
.m-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--m-space-2) var(--m-space-5) var(--m-space-5); }
.m-sheet__foot { flex: none; display: flex; gap: var(--m-space-3); padding: var(--m-space-3) var(--m-space-5) var(--m-space-4); border-top: 1px solid var(--m-border); background: var(--m-surface); }
.m-sheet__foot > .m-btn { flex: 1; }
/* Máy tính bảng trở lên: hộp thoại giữa màn hình (không còn trượt từ đáy) */
@media (min-width: 768px) {
  .m-sheet:not([class*="m-sheet--inline"]) {
    inset: 0; margin: auto; width: min(560px, calc(100vw - 64px)); height: fit-content; max-height: min(86dvh, 760px);
    padding: 0; border-radius: var(--m-radius-xl); transform: translateY(8px) scale(0.98); opacity: 0;
  }
  .m-sheet:not([class*="m-sheet--inline"])[open] { transform: none; opacity: 1; }
  @starting-style { .m-sheet:not([class*="m-sheet--inline"])[open] { transform: translateY(8px) scale(0.98); opacity: 0; } }
  .m-sheet:not([class*="m-sheet--inline"]) .m-sheet__handle { display: none; }
  .m-sheet:not([class*="m-sheet--inline"]) .m-sheet__head { padding-top: var(--m-space-5); }
}
/* Nằm trong trang từ mốc chỉ định: hiện như một khối bình thường, ẩn tay cầm, nút đóng, chân bảng */
@media (min-width: 768px) {
  dialog.m-sheet--inline-md { display: block; position: static; inset: auto; z-index: auto; width: auto; max-height: none; transform: none; padding: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
  .m-sheet--inline-md :is(.m-sheet__handle, .m-sheet__foot, [data-m-close]) { display: none; }
  .m-sheet--inline-md .m-sheet__head, .m-sheet--inline-md .m-sheet__body { padding: 0; overflow: visible; }
  .m-sheet--inline-md .m-sheet__head { margin-bottom: var(--m-space-4); }
  .m-sheet--inline-md .m-sheet__title { font-size: var(--m-text-xs); font-family: var(--m-font-sans); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); }
}
@media (min-width: 992px) {
  dialog.m-sheet--inline-lg { display: block; position: static; inset: auto; z-index: auto; width: auto; max-height: none; transform: none; padding: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
  .m-sheet--inline-lg :is(.m-sheet__handle, .m-sheet__foot, [data-m-close]) { display: none; }
  .m-sheet--inline-lg .m-sheet__head, .m-sheet--inline-lg .m-sheet__body { padding: 0; overflow: visible; }
  .m-sheet--inline-lg .m-sheet__head { margin-bottom: var(--m-space-4); }
  .m-sheet--inline-lg .m-sheet__title { font-size: var(--m-text-xs); font-family: var(--m-font-sans); letter-spacing: var(--m-tracking-caps); text-transform: uppercase; color: var(--m-text-muted); }
}

/* ─────────────────────────────────────────────────────
   ACTION BAR — thanh hành động dính đáy (điện thoại & máy tính bảng dọc).
   Giữ hành động chính trong tầm ngón cái khi trang dài (vd. "Đăng ký tham dự").
   Tự ẩn khi phần tử đích (data-m-hide-when) đã hiện trên màn hình, và từ 992px.
   <div class="m-action-bar" data-m-action-bar data-m-hide-when="#dang-ky">
     <div class="m-action-bar__info"><strong>Thứ Hai, 16/11</strong><span>Còn 12 chỗ</span></div>
     <a class="m-btn" href="#dang-ky">Đăng ký</a>
   </div>
   ───────────────────────────────────────────────────── */
:root { --m-action-bar-h: 68px; }
.m-action-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom)); z-index: calc(var(--m-z-sticky) - 1);
  display: flex; align-items: center; gap: var(--m-space-3);
  min-height: var(--m-action-bar-h);
  padding: var(--m-space-3) max(var(--m-margin), env(safe-area-inset-right)) var(--m-space-3) max(var(--m-margin), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--m-surface) 96%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--m-border);
  box-shadow: 0 -8px 24px -12px rgb(var(--m-shadow-color) / 0.18);
  transition: transform var(--m-duration-base) var(--m-ease-out), opacity var(--m-duration-base);
}
body:not(.m-has-tabbar) .m-action-bar { bottom: 0; padding-bottom: calc(var(--m-space-3) + env(safe-area-inset-bottom)); }
.m-action-bar.is-hidden { transform: translateY(calc(100% + var(--m-tabbar-h))); opacity: 0; pointer-events: none; }
.m-action-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.m-action-bar__info strong { font-weight: var(--m-weight-semibold); color: var(--m-heading); font-size: var(--m-text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-action-bar__info span { font-size: var(--m-text-sm); color: var(--m-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-action-bar > .m-btn { flex: none; min-height: var(--m-size-touch-comfort); }
@media (min-width: 768px) { .m-action-bar { justify-content: center; } .m-action-bar__info { flex: 0 1 auto; margin-right: var(--m-space-6); } }
@media (min-width: 992px) { .m-action-bar:not(.m-action-bar--always) { display: none; } }
/* Chừa chỗ ở cuối trang để thanh không che nội dung */
.m-has-action-bar { --m-bottom-extra: var(--m-action-bar-h); }
@media (max-width: 991.98px) { .m-has-tabbar.m-has-action-bar { padding-bottom: calc(var(--m-tabbar-h) + var(--m-action-bar-h) + env(safe-area-inset-bottom)); } }

/* ── Về đầu trang: hiện sau khi cuộn ~2 màn hình ── */
.m-to-top {
  position: fixed; z-index: calc(var(--m-z-sticky) - 2);
  right: max(var(--m-margin), env(safe-area-inset-right));
  bottom: calc(var(--m-tabbar-h) + var(--m-bottom-extra, 0px) + env(safe-area-inset-bottom) + var(--m-space-4));
  display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--m-border); border-radius: 50%;
  background: var(--m-surface); color: var(--m-heading); box-shadow: var(--m-shadow-md); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--m-duration-base), transform var(--m-duration-base) var(--m-ease-out);
}
.m-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.m-to-top .m-icon { --m-icon-size: 22px; }
@media (min-width: 992px) { .m-to-top { bottom: var(--m-space-8); right: var(--m-space-8); } }

/* ── Header tự ẩn khi cuộn xuống để đọc, hiện lại khi cuộn lên (chỉ < 992px) ──
   <header class="m-header" data-m-autohide> */
@media (max-width: 991.98px) {
  .m-header[data-m-autohide] { transition: transform var(--m-duration-base) var(--m-ease-out), border-color var(--m-duration-base); }
  .m-header[data-m-autohide].is-hidden { transform: translateY(-100%); }
}

/* ── Thanh dính ngay dưới header (hàng chip lọc, mục lục rút gọn) ──
   Bám theo header: khi header tự ẩn, thanh trượt lên sát mép trên. */
.m-sticky-bar {
  position: sticky; top: var(--m-header-offset, var(--m-header-h)); z-index: calc(var(--m-z-sticky) - 3);
  margin-inline: calc(var(--m-margin) * -1); padding: var(--m-space-3) var(--m-margin);
  background: color-mix(in srgb, var(--m-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: top var(--m-duration-base) var(--m-ease-out), box-shadow var(--m-duration-base);
}
.m-sticky-bar.is-stuck { box-shadow: 0 1px 0 var(--m-border); }
@media (min-width: 992px) { .m-sticky-bar--compact-only { position: static; margin-inline: 0; padding-inline: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── Mép mờ cho vùng cuộn ngang (tab, chip, dải thẻ): báo "còn nữa" ──
   JS gắn .is-overflow-start / .is-overflow-end; không có JS thì vẫn cuộn được bình thường. */
.is-overflow-end:not(.is-overflow-start) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.is-overflow-start:not(.is-overflow-end) { -webkit-mask: linear-gradient(90deg, transparent, #000 48px); mask: linear-gradient(90deg, transparent, #000 48px); }
.is-overflow-start.is-overflow-end { -webkit-mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

/* ═════════════════════════════════════════════════════
   NHẬP BẰNG NGÓN TAY (pointer: coarse) — vùng chạm ≥ 44px, chữ ô nhập ≥ 16px
   ═════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  :root { --m-size-control-sm: 40px; }
  .m-chip { min-height: var(--m-size-touch); }
  .m-segmented button { min-height: 40px; }
  .m-reader-tools .m-btn, .m-audio__tools .m-btn { --m-btn-h: var(--m-size-touch); }
  /* iOS tự phóng to trang khi chạm ô nhập có chữ < 16px — giữ tối thiểu 16px */
  .m-input, .m-select, .m-textarea, .m-input--sm, .m-select--sm { font-size: max(16px, 1rem); }
  .m-input--sm, .m-select--sm { min-height: var(--m-size-touch); }
  /* Liên kết chữ nhỏ (chủ đề, đường dẫn trang, mục lục): nới vùng chạm mà không xô lệch bố cục */
  .m-tag:not(.m-tag--pill), .m-meta a { padding-block: 10px; margin-block: -10px; }
  .m-breadcrumb a { padding-block: 12px; }
  .m-toc a { padding-block: 10px; }
  .m-footer ul a { padding-block: 10px; }
  .m-sidenav a { min-height: var(--m-size-touch); }
  .m-dropdown__menu :is(a, button) { min-height: var(--m-size-touch); }
  .m-calendar td > * { min-height: 44px; }
}

/* Không có chuột (màn hình cảm ứng): bỏ hiệu ứng trỏ chuột — trên cảm ứng chúng "dính" sau khi chạm —
   và thay bằng phản hồi khi nhấn (:active). */
@media (hover: none) {
  .m-post:hover .m-post__media img { filter: brightness(var(--m-img-dim)); }
  .m-post:hover .m-post__title a { text-decoration: none; }
  .m-post:hover .m-post__play, .m-video:hover .m-video__play { transform: none; }
  .m-tile:hover, .m-event:hover, .m-card--interactive:hover, .m-pager a:hover { box-shadow: none; border-color: var(--m-border); }
  .m-tile:hover .m-tile__arrow, .m-link-arrow:hover .m-icon { transform: none; }
  .m-book:hover .m-book__cover { transform: none; box-shadow: 0 1px 2px rgb(var(--m-shadow-color) / 0.12), 0 12px 24px -10px rgb(var(--m-shadow-color) / 0.35); }
  .m-book:hover .m-book__title a, .m-event:hover .m-event__title a { text-decoration: none; }

  :is(.m-post, .m-tile, .m-event, .m-book, .m-card--interactive, .m-pager a, .m-series__list a, .m-menu-list a) { -webkit-tap-highlight-color: transparent; }
  .m-post:active .m-post__media img { filter: brightness(calc(var(--m-img-dim) * 0.9)); }
  .m-post:active .m-post__title a { text-decoration: underline; text-underline-offset: 0.18em; }
  :is(.m-tile, .m-event, .m-card--interactive, .m-pager a):active { background: var(--m-surface-sunken); transform: scale(0.99); }
  .m-book:active .m-book__cover { transform: scale(0.98); }
  :is(.m-tile, .m-event, .m-card--interactive, .m-pager a, .m-book__cover) { transition-property: transform, background-color, box-shadow, border-color; transition-duration: var(--m-duration-instant); }
}

/* ═════════════════════════════════════════════════════
   ĐIỆN THOẠI XOAY NGANG (thấp dưới 500px): thu gọn thanh trên & dưới để còn chỗ đọc
   ═════════════════════════════════════════════════════ */
@media (max-height: 499.98px) and (orientation: landscape) and (max-width: 991.98px) {
  :root { --m-header-h: 52px; --m-tabbar-h: 48px; --m-action-bar-h: 56px; }
  .m-tabbar a, .m-tabbar button { flex-direction: row; gap: 8px; font-size: var(--m-text-sm); }
  .m-tabbar .m-icon { --m-icon-size: 20px; padding: 0; background: none !important; }
  .m-brand__mark { height: 36px; }
  .m-brand__name small { display: none; }
  .m-sheet, .m-dialog { max-height: 94dvh; }
}
.is-typing .m-action-bar { transform: translateY(calc(100% + var(--m-tabbar-h))); opacity: 0; pointer-events: none; }

/* ═══════════ utilities.css ═══════════ */
/* Tiện ích — tập nhỏ, chỉ những gì hay cần khi ghép trang. Ưu tiên component; dùng tiện ích để tinh chỉnh. */

.m-mt-0 { margin-top: 0 !important; }   .m-mb-0 { margin-bottom: 0 !important; }
.m-mt-2 { margin-top: var(--m-space-2) !important; } .m-mb-2 { margin-bottom: var(--m-space-2) !important; }
.m-mt-4 { margin-top: var(--m-space-4) !important; } .m-mb-4 { margin-bottom: var(--m-space-4) !important; }
.m-mt-6 { margin-top: var(--m-space-6) !important; } .m-mb-6 { margin-bottom: var(--m-space-6) !important; }
.m-mt-8 { margin-top: var(--m-space-8) !important; } .m-mb-8 { margin-bottom: var(--m-space-8) !important; }
.m-mt-12 { margin-top: var(--m-space-12) !important; } .m-mb-12 { margin-bottom: var(--m-space-12) !important; }
.m-mt-auto { margin-top: auto !important; } .m-ml-auto { margin-left: auto !important; }

.m-text-center { text-align: center; } .m-text-right { text-align: right; }
.m-text-sm { font-size: var(--m-text-sm); } .m-text-xs { font-size: var(--m-text-xs); } .m-text-lg { font-size: var(--m-text-lg); }
.m-text-brand { color: var(--m-brand-text); } .m-text-gold { color: var(--m-ornament-text); } .m-text-action { color: var(--m-action); }
.m-font-display { font-family: var(--m-font-display); }
.m-semibold { font-weight: var(--m-weight-semibold); } .m-bold { font-weight: var(--m-weight-bold); }
.m-nowrap { white-space: nowrap; }
.m-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-clamp-2, .m-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.m-clamp-2 { -webkit-line-clamp: 2; } .m-clamp-3 { -webkit-line-clamp: 3; }

.m-bg-surface { background: var(--m-surface); } .m-bg-sunken { background: var(--m-surface-sunken); }
.m-rounded { border-radius: var(--m-radius-lg); } .m-rounded-xl { border-radius: var(--m-radius-xl); }
.m-border { border: 1px solid var(--m-border); }
.m-w-full { width: 100%; }
.m-relative { position: relative; }
.m-flex-1 { flex: 1; min-width: 0; }