/* ──────────────────────────────────────────────────────────────────
   theme.css — shared styles cho mọi trang nội dung site/<slug>/
   Edit 1 lần ở đây = mọi trang đẹp lên.
   Homepage (site/index.html) có CSS riêng, KHÔNG dùng file này.
   ────────────────────────────────────────────────────────────── */

/* ── Theme variables ──────────────────────────────────────────────
   Palette Claude.ai "Academic Journal on Vellum":
     DARK (default): Ink Black #141413 + Onyx surfaces + Graphite borders.
     LIGHT: Vellum White #faf9f5 + Snow card + Parchment borders.
   Accent UI core: Terra Cotta #d97757 (cả 2 theme).
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Claude.ai palette tokens (đặt 1 lần dùng chung 2 theme) */
  --color-vellum-white: #faf9f5;
  --color-ink-black:    #141413;
  --color-onyx:         #1f1e1d;
  --color-graphite:     #3d3d3a;
  --color-dusty-gray:   #73726c;
  --color-stone:        #9c9a92;
  --color-parchment:    #dedcd1;
  --color-snow-white:   #ffffff;
  --color-pale-azure:   #ccdbe8;
  --color-terra-cotta:  #d97757;

  /* Font tokens */
  --font-sans:  'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Dark theme (default) — Ink Black surfaces */
  --c-bg:   20  20  19;       /* #141413 — Ink Black */
  --c-bg-1: 31  30  29;       /* #1f1e1d — Onyx surface */
  --c-bg-2: 31  30  29;       /* #1f1e1d — card surface */
  --c-bg-3: 61  61  58;       /* #3d3d3a — Graphite borders */
  --c-bg-4: 115 114 108;      /* #73726c — Dusty Gray strong borders */

  --c-txt-1: 250 249 245;     /* #faf9f5 — Vellum White primary */
  --c-txt-2: 156 154 146;     /* #9c9a92 — Stone secondary */
  --c-txt-3: 115 114 108;     /* #73726c — Dusty Gray tertiary */
  --c-txt-4: 61  61  58;      /* #3d3d3a — Graphite disabled */

  /* Accent colors — Terra Cotta thay coral; 4 màu phụ giữ semantic cho 12 tag */
  --c-coral:  217 119 87;     /* #d97757 — Terra Cotta */
  --c-amber:  245 166 35;
  --c-teal:   78  201 192;
  --c-purple: 163 116 232;
  --c-green:  93  201 122;
  --c-azure:  204 219 232;    /* #ccdbe8 — Pale Azure (subtle highlight) */

  --c-navbar: 20 20 19;
  --c-shadow: 0 0 0;
}
:root[data-theme="light"] {
  --c-bg:   250 249 245;      /* #faf9f5 — Vellum White */
  --c-bg-1: 255 255 255;      /* #ffffff — Snow */
  --c-bg-2: 255 255 255;      /* #ffffff — card */
  --c-bg-3: 222 220 209;      /* #dedcd1 — Parchment border */
  --c-bg-4: 156 154 146;      /* #9c9a92 — Stone strong border */

  --c-txt-1: 20  20  19;      /* Ink Black */
  --c-txt-2: 61  61  58;      /* Graphite */
  --c-txt-3: 115 114 108;     /* Dusty Gray */
  --c-txt-4: 156 154 146;     /* Stone */

  --c-navbar: 250 249 245;
  --c-shadow: 0 0 0;
}

/* ── Base ─────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
body {
  font-family: var(--font-sans);
  background: rgb(var(--c-bg));
  color: rgb(var(--c-txt-1));
  margin: 0;
  line-height: 1.6;
  transition: background-color .2s, color .2s;
}
h1, h2, h3, h4 { margin-top: 0; }

img { max-width: 100%; height: auto; }

/* ── Scroll progress bar — Terra Cotta single ───────────────── */
#progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: rgb(var(--c-coral));
  z-index: 9999;
  transition: width 0.1s;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-bg-4)); border-radius: 3px; }

/* ── Tags + utility ───────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.code-tag {
  background: rgb(var(--c-bg-2));
  border: 1px solid rgb(var(--c-bg-4));
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: rgb(var(--c-coral));
}
.sec-divider { border: none; border-top: 1px solid rgb(var(--c-bg-3)); margin: 0; }

/* ── Accent text — single tone (Claude.ai "controlled burst of warmth") ── */
.grad-coral {
  color: rgb(var(--c-coral));
  -webkit-text-fill-color: rgb(var(--c-coral));
}
.grad-teal {
  color: rgb(var(--c-teal));
  -webkit-text-fill-color: rgb(var(--c-teal));
}

/* ── Timestamp deep-link chip ─────────────────────────────────── */
.ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: rgb(var(--c-txt-3));
  background: rgb(var(--c-bg-2));
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
a.ts:hover { color: rgb(var(--c-coral)); background: rgb(var(--c-bg-3)); }

/* ── YouTube link (icon + text) ───────────────────────────────── */
.yt-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgb(var(--c-txt-3));
  font-size: 0.7rem;
  transition: color 0.15s;
  text-decoration: none;
}
.yt-link:hover { color: rgb(var(--c-coral)); }
.yt-link svg { width: 12px; height: 12px; }

/* ── Hover card (block trong section) ─────────────────────────── */
.hover-card { transition: transform 0.2s, border-color 0.2s, background-color 0.2s; }
.hover-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--c-coral)) !important;
}

/* ── Sticky navbar ────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(var(--c-navbar) / 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(var(--c-bg-3));
}

/* ── Hide scrollbar trên các overflow horizontal ──────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ── Theme toggle button (sun/moon, fixed góc trên-phải) ──────── */
#theme-toggle {
  position: fixed;
  top: .625rem;
  right: .75rem;
  z-index: 60;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgb(var(--c-bg-2));
  border: 1px solid rgb(var(--c-bg-4));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background-color .2s;
  box-shadow: 0 4px 12px rgba(var(--c-shadow) / .15);
}
#theme-toggle:hover { transform: scale(1.1); border-color: rgb(var(--c-coral)); }
#theme-toggle svg { width: 1.1rem; height: 1.1rem; }

/* ── Print + reduced motion ───────────────────────────────────── */
@media print { nav, #progress, #back-top, #theme-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   VISUAL UPGRADES — micro-interaction · hero · divider · drop-cap
   Tất cả CSS-only, auto áp dụng cho mọi trang content.

   Tuning vars (đổi 1 chỗ → toàn site đổi theo):
     --mesh-{coral,amber,purple,teal}-a  : intensity gradient blob
     --mesh-duration                      : tốc độ animation mesh
     --glow-color                         : màu glow shadow card hover
     --glow-blur, --glow-strength         : kích thước + độ đậm glow
     --card-lift                          : khoảng dịch lên khi hover
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Mesh palette — Claude.ai vellum: warm Terra Cotta + Pale Azure dominant,
     mềm hơn vì nền Ink Black đã ấm sẵn. */
  --mesh-coral-a:  .08;
  --mesh-amber-a:  .04;
  --mesh-teal-a:   .06;
  --mesh-purple-a: .08;
  --mesh-duration: 55s;

  /* Glow + lift — subtle, đúng tinh thần "no harsh shadows" của Claude.ai */
  --glow-blur: 16px;
  --glow-strength: .10;
  --card-lift: -2px;
  --card-scale: 1.005;

  /* Hairline border alpha — chỉ dùng nhẹ ở dark */
  --hairline-a: .03;
}
:root[data-theme="light"] {
  /* Light theme vellum: blob phải opacity cao hơn để thấy được trên cream */
  --mesh-coral-a:  .14;
  --mesh-amber-a:  .10;
  --mesh-teal-a:   .10;
  --mesh-purple-a: .12;
  --mesh-duration: 45s;

  --glow-blur: 18px;
  --glow-strength: .14;
  --card-lift: -3px;
  --card-scale: 1.008;
  --hairline-a: 0;
}


/* ─── 1. MICRO-INTERACTION ───────────────────────────────────── */

/* Card hover: lift rõ hơn + warm glow gradient (coral→amber subtle) */
.hover-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              border-color .22s,
              background-color .22s,
              box-shadow .28s ease;
}
.hover-card:hover {
  transform: translateY(var(--card-lift)) scale(var(--card-scale));
  border-color: rgb(var(--c-coral)) !important;
  /* Vercel-style multi-layer shadow:
     1) inner top hairline highlight (subtle white, nâng cảm giác "ánh sáng từ trên") — chỉ trong dark
     2) outer warm coral glow (subtle)
     3) base ambient shadow */
  box-shadow:
    inset 0 1px 0 rgb(var(--c-txt-1) / var(--hairline-a)),
    0 var(--glow-blur) calc(var(--glow-blur) * 1.4) rgb(var(--c-coral) / var(--glow-strength)),
    0 4px 10px rgb(var(--c-shadow) / .12);
}

/* Timestamp: thicker animated underline với subtle gradient */
a.ts {
  position: relative;
  isolation: isolate;
}
a.ts::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: 1px;
  height: 1.5px;
  background: linear-gradient(90deg,
    rgb(var(--c-coral)),
    rgb(var(--c-amber)));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
a.ts:hover::after { transform: scaleX(1); }

/* Tag chip clickable — soft lift + tactile press */
.tag-clickable {
  position: relative;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.tag-clickable:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgb(var(--c-shadow) / .14);
}
.tag-clickable:active { transform: translateY(0) scale(.94); }

/* Section icon (w-10 h-10 rounded-xl với emoji) — quay nhẹ + scale khi hover hàng */
section[id]:not(#hero):not(#overview):not(#summary):not(#quiz) > div > div.flex > div.rounded-xl:first-child {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
section[id] > div > div.flex:hover > div.rounded-xl:first-child {
  transform: rotate(-8deg) scale(1.1);
}


/* ─── 2. HERO RICHER (mesh + glassmorphism + load shimmer) ───── */

/* Animated gradient mesh background — 4 màu, xoay siêu chậm */
#hero {
  position: relative;
  overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 18% 22%, rgb(var(--c-coral)  / var(--mesh-coral-a))  0%, transparent 38%),
    radial-gradient(circle at 82% 78%, rgb(var(--c-purple) / var(--mesh-purple-a)) 0%, transparent 42%),
    radial-gradient(circle at 65% 30%, rgb(var(--c-amber)  / var(--mesh-amber-a))  0%, transparent 36%),
    radial-gradient(circle at 30% 75%, rgb(var(--c-teal)   / var(--mesh-teal-a))   0%, transparent 44%);
  animation: heroMeshDrift var(--mesh-duration) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
@keyframes heroMeshDrift {
  0%, 100% { transform: rotate(0deg)   scale(1)     translate(0, 0);     }
  25%      { transform: rotate(90deg)  scale(1.06)  translate(2%, -1%);  }
  50%      { transform: rotate(180deg) scale(1.1)   translate(0, 2%);    }
  75%      { transform: rotate(270deg) scale(.94)   translate(-2%, 0);   }
}
#hero > * { position: relative; z-index: 1; }

/* One-time shimmer sweep on load — subtle warm wash chạy 1 lần qua hero */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgb(var(--c-coral) / .08) 50%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: heroShimmer 1.6s cubic-bezier(.2,.8,.2,1) .3s 1 forwards;
  transform: translateX(-100%);
}
@keyframes heroShimmer {
  to { transform: translateX(100%); }
}

/* Stat boxes glassmorphism — blur mạnh hơn, frost rõ hơn */
#hero .grid-cols-3 > div {
  background: rgb(var(--c-bg-2) / .58) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-color: rgb(var(--c-bg-4) / .55) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              border-color .28s, background-color .28s,
              box-shadow .28s;
}
#hero .grid-cols-3 > div:hover {
  transform: translateY(-4px);
  background: rgb(var(--c-bg-2) / .8) !important;
  border-color: rgb(var(--c-coral) / .55) !important;
  box-shadow:
    0 16px 36px rgb(var(--c-coral) / .15),
    0 4px 10px rgb(var(--c-shadow) / .1);
}

/* Hero thumbnail — soft zoom on hover */
#hero a[href*="youtube.com"] img,
#hero a[href*="youtu.be"] img {
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
#hero a[href*="youtube.com"]:hover img,
#hero a[href*="youtu.be"]:hover img {
  transform: scale(1.05);
}


/* ─── 3. SECTION DIVIDER MỀM ─────────────────────────────────── */

/* Gradient fade 2 đầu + diamond xoay khi hover */
.sec-divider {
  border: none !important;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(var(--c-bg-3)) 28%,
    rgb(var(--c-bg-3)) 72%,
    transparent 100%);
  margin: 0;
  position: relative;
  overflow: visible;
}
.sec-divider::after {
  content: '◇';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: rgb(var(--c-bg));
  color: rgb(var(--c-bg-4));
  padding: 0 14px;
  font-size: .85rem;
  letter-spacing: 0;
  pointer-events: none;
  transition: color .35s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.sec-divider:hover::after {
  color: rgb(var(--c-coral));
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ─── 4. READING DELIGHT (drop-cap) ──────────────────────────── */

/* Drop-cap cho đoạn intro của #overview — Be Vietnam Pro 800 + Terra Cotta */
#overview > div > p:first-of-type::first-letter {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: .85;
  float: left;
  margin: .35rem .6rem 0 0;
  color: rgb(var(--c-coral));
  filter: drop-shadow(0 2px 8px rgb(var(--c-coral) / .25));
}
:root[data-theme="light"] #overview > div > p:first-of-type::first-letter {
  font-size: 3.1rem;
  filter: drop-shadow(0 1px 4px rgb(var(--c-coral) / .18));
}

/* Stat box value — tabular nums cho counter ổn định khi animate */
#hero .grid-cols-3 .text-2xl {
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════
   DARK PREMIUM SAAS POLISH — Vercel/Linear/Apple-Pro inspired
   Chỉ áp khi dark theme (mặc định). Light theme dùng selector
   `:root[data-theme="light"]` để override lại các rule cụ thể.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Body texture: subtle radial glow trên cùng (Vercel signature) ─── */
body::before {
  content: '';
  position: fixed;
  inset: -10% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      rgb(var(--c-coral) / .05) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="light"] body::before { display: none; }


/* ─── Hero: override inline linear-gradient + grid pattern ─── */

/* Inline style trên <section id="hero"> dùng linear-gradient(160deg, bg→bg-1→bg)
   trong dark Vercel-style nên flat black + radial coral glow ở top thay vì sheen. */
#hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      rgb(var(--c-coral) / .06) 0%,
      transparent 65%),
    rgb(var(--c-bg)) !important;
}
:root[data-theme="light"] #hero {
  /* Light theme giữ gradient nâu nhẹ như cũ */
  background: linear-gradient(160deg,
    rgb(var(--c-bg)) 0%,
    rgb(var(--c-bg-1)) 50%,
    rgb(var(--c-bg)) 100%) !important;
}

/* Grid pattern overlay (div absolute inset-0 opacity-5 với inline style coral lines)
   Override lines từ #E07254 (warm coral) → zinc-700 (neutral monochrome). */
#hero > div.absolute.inset-0[style*="linear-gradient"] {
  background-image:
    linear-gradient(rgb(var(--c-bg-4)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-bg-4)) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}
:root[data-theme="light"] #hero > div.absolute.inset-0[style*="linear-gradient"] {
  /* Light theme: lines Terra Cotta nhạt trên Vellum */
  background-image:
    linear-gradient(#d97757 1px, transparent 1px),
    linear-gradient(90deg, #d97757 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}


/* ─── Navbar: tighter, more developer-tool feel ─── */
.navbar {
  background: rgb(var(--c-navbar) / .72) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgb(var(--c-bg-3) / .8) !important;
}
:root[data-theme="light"] .navbar {
  background: rgb(var(--c-navbar) / .85) !important;
  backdrop-filter: blur(10px);
}


/* ─── Code tag: code-focused premium feel ─── */
.code-tag {
  background: rgb(var(--c-bg-1)) !important;
  border-color: rgb(var(--c-bg-3)) !important;
  letter-spacing: .01em;
  font-feature-settings: "tnum", "ss01";
  box-shadow: inset 0 1px 0 rgb(var(--c-txt-1) / var(--hairline-a));
}


/* ─── Heading typography: tighter tracking cho clean tech feel ─── */
section h2 {
  letter-spacing: -0.02em;
  font-feature-settings: "ss01";
}
.grad-coral, .grad-teal {
  letter-spacing: -0.025em;
}


/* ─── Hover-card base: thêm hairline inset highlight (rest state cũng có) ─── */
.hover-card {
  box-shadow: inset 0 1px 0 rgb(var(--c-txt-1) / calc(var(--hairline-a) * 0.5));
}


/* ─── Theme toggle: premium glass feel ─── */
#theme-toggle {
  background: rgb(var(--c-bg-2) / .7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgb(var(--c-bg-3) / .8) !important;
  box-shadow:
    inset 0 1px 0 rgb(var(--c-txt-1) / var(--hairline-a)),
    0 4px 12px rgb(var(--c-shadow) / .25);
}


/* ─── Selection color: coral subtle (Vercel/Linear vibe) ─── */
::selection {
  background: rgb(var(--c-coral) / .25);
  color: rgb(var(--c-txt-1));
}


/* ─── Scrollbar: thinner premium, không thấy track ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-bg-3));
  border-radius: 4px;
  border: 2px solid rgb(var(--c-bg));
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-bg-4));
}


/* ══════════════════════════════════════════════════════════════════
   PER-PAGE ACCENT SYSTEM
   Driven by <meta name="page-accent" content="amber|teal|purple|green">
   inline script trong template.html set document.documentElement.dataset.accent.

   --c-accent = RGB triplet (giống --c-coral/amber/teal/...) trỏ về 1 trong
   5 màu preset. Hero-specific rules dùng --c-accent thay --c-coral để mỗi
   trang có "color identity" riêng theo tag chính.

   Brand-level (scroll progress, selection, link hover) GIỮ coral —
   nhất quán định danh thư viện.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --c-accent: var(--c-coral);
  /* Default motif = line grid (giữ nguyên hệt như trước khi có per-page accent
     → 6 trang cũ render pixel-perfect). Inline SVG dùng %23 để escape #. */
  --motif-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M0 0 L56 0 M0 0 L0 56' stroke='%23808080' stroke-width='1' opacity='.45'/></svg>");
  --motif-size: 56px 56px;
}
/* coral = explicit-default = giữ line grid (= no-meta fallback) */
:root[data-accent="coral"] { /* dùng default vars trên */ }

:root[data-accent="amber"]  { --c-accent: var(--c-amber);
  /* diagonal stripes */
  --motif-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 32 L32 0' stroke='%23808080' stroke-width='1' opacity='.45'/></svg>");
  --motif-size: 32px 32px;
}
:root[data-accent="teal"]   { --c-accent: var(--c-teal);
  /* wavy sine */
  --motif-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='24' viewBox='0 0 64 24'><path d='M0 12 Q16 2 32 12 T64 12' stroke='%23808080' stroke-width='1' fill='none' opacity='.45'/></svg>");
  --motif-size: 64px 24px;
}
:root[data-accent="purple"] { --c-accent: var(--c-purple);
  /* triangles */
  --motif-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='36' viewBox='0 0 40 36'><path d='M20 6 L34 30 L6 30 Z' stroke='%23808080' stroke-width='1' fill='none' opacity='.45'/></svg>");
  --motif-size: 40px 36px;
}
:root[data-accent="green"]  { --c-accent: var(--c-green);
  /* hexagons */
  --motif-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='42' viewBox='0 0 48 42'><path d='M24 4 L40 14 L40 30 L24 40 L8 30 L8 14 Z' stroke='%23808080' stroke-width='1' fill='none' opacity='.45'/></svg>");
  --motif-size: 48px 42px;
}

/* Hero radial glow — dùng accent thay coral cứng. Opacity giữ nguyên .06 (dark)
   và light giữ linear-gradient cũ → trang coral render pixel-perfect như trước. */
#hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      rgb(var(--c-accent) / .06) 0%,
      transparent 65%),
    rgb(var(--c-bg)) !important;
}
/* Light theme giữ rule cũ — không thêm radial accent overlay (giữ nguyên trang cũ).
   Trang accent ≠ coral muốn highlight ở light → tự override qua data-accent specific rule. */
:root[data-theme="light"][data-accent="amber"]  #hero,
:root[data-theme="light"][data-accent="teal"]   #hero,
:root[data-theme="light"][data-accent="purple"] #hero,
:root[data-theme="light"][data-accent="green"]  #hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      rgb(var(--c-accent) / .12) 0%,
      transparent 65%),
    linear-gradient(160deg,
      rgb(var(--c-bg)) 0%,
      rgb(var(--c-bg-1)) 50%,
      rgb(var(--c-bg)) 100%) !important;
}

/* Hero motif overlay — chỉ override với SVG khi accent ≠ coral.
   Coral / no-accent giữ nguyên line pattern gốc (đã định nghĩa ở rule cũ phía trên). */
:root[data-accent="amber"]  #hero > div.absolute.inset-0[style*="linear-gradient"],
:root[data-accent="teal"]   #hero > div.absolute.inset-0[style*="linear-gradient"],
:root[data-accent="purple"] #hero > div.absolute.inset-0[style*="linear-gradient"],
:root[data-accent="green"]  #hero > div.absolute.inset-0[style*="linear-gradient"] {
  background-image: var(--motif-svg) !important;
  background-size: var(--motif-size) !important;
}

/* Hero shimmer sweep — accent thay coral. Opacity giữ nguyên .08 (đúng giá trị cũ). */
#hero::after {
  background: linear-gradient(115deg,
    transparent 30%,
    rgb(var(--c-accent) / .08) 50%,
    transparent 70%) !important;
}

/* Stat box hover glow — accent */
#hero .grid-cols-3 > div:hover {
  border-color: rgb(var(--c-accent) / .55) !important;
  box-shadow:
    0 16px 36px rgb(var(--c-accent) / .15),
    0 4px 10px rgb(var(--c-shadow) / .1) !important;
}

/* Body top glow — accent thay coral cứng */
body::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      rgb(var(--c-accent) / .05) 0%,
      transparent 60%) !important;
}

/* Drop-cap overview — accent */
#overview > div > p:first-of-type::first-letter {
  color: rgb(var(--c-accent)) !important;
  filter: drop-shadow(0 2px 8px rgb(var(--c-accent) / .25)) !important;
}
:root[data-theme="light"] #overview > div > p:first-of-type::first-letter {
  filter: drop-shadow(0 1px 4px rgb(var(--c-accent) / .18)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE B — Retention progress UI
   .lt-understood-btn   = nút "Đã hiểu" trong header mỗi section
   .lt-overview-check   = badge ✓ ở overview topic card khi đã hiểu
   .lt-overview-done    = class trên topic card chứa section đã hiểu
   ══════════════════════════════════════════════════════════════════ */
.lt-understood-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgb(var(--c-bg-3));
  border-radius: 9999px;
  background: transparent;
  color: rgb(var(--c-txt-3));
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
  font-family: inherit;
}
.lt-understood-btn:hover {
  border-color: rgb(var(--c-green) / .5);
  color: rgb(var(--c-green));
  transform: translateY(-1px);
}
.lt-understood-btn.is-on {
  background: rgb(var(--c-green) / .12);
  border-color: rgb(var(--c-green) / .55);
  color: rgb(var(--c-green));
}
.lt-overview-check {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--c-green));
  color: rgb(var(--c-bg));
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.lt-overview-done {
  border-color: rgb(var(--c-green) / .35) !important;
  background: rgb(var(--c-green) / .04) !important;
}

/* Section background tint — every 4th content section nhận subtle accent wash.
   Selector loại hero/overview/quiz/summary. CHỈ áp khi accent ≠ coral để giữ
   trang cũ (no meta = coral fallback) render pixel-perfect như trước. */
:root[data-accent="amber"]  section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-accent="teal"]   section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-accent="purple"] section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-accent="green"]  section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3) {
  background-image: radial-gradient(circle at 18% 0%, rgb(var(--c-accent) / .04), transparent 55%);
}
:root[data-theme="light"][data-accent="amber"]  section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-theme="light"][data-accent="teal"]   section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-theme="light"][data-accent="purple"] section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3),
:root[data-theme="light"][data-accent="green"]  section[id]:not(#hero):not(#overview):not(#quiz):not(#summary):nth-of-type(4n+3) {
  background-image: radial-gradient(circle at 18% 0%, rgb(var(--c-accent) / .07), transparent 55%);
}