/* THU MUA XANH — design system + primitives
   Layout: cảnh full-bleed; mọi kích thước theo --u = min(1vw, 1.778svh) nên bố cục giữ tỷ lệ trên 1920, 1366 và máy chiếu.
   Màu: forest / botanical / cream / fiber / lime / brass. Chữ: Fraunces (display), Be Vietnam Pro (UI), IBM Plex Mono (nhãn dữ liệu). */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-vietnamese-opsz-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-latin-ext-opsz-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-latin-opsz-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-vietnamese-opsz-italic.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-latin-ext-opsz-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/fraunces-latin-opsz-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-vietnamese-300-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/be-vietnam-pro-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ============================================================
   THU MUA XANH · V2 design system
   Layout: cảnh full-bleed, kích thước theo --u = min(1vw, 1.778svh).
   Chữ: Fraunces chỉ cho tiêu đề và số chủ đạo; Be Vietnam Pro cho mọi nhãn
   (kể cả số liệu, dùng tabular-nums); IBM Plex Mono chỉ cho công thức (.code).
   Màu: lime chỉ đánh dấu trạng thái, quyết định, kết quả.
   ============================================================ */
:root {
  color-scheme: dark;
  --forest-950: #07120D; --forest-900: #0B1A14; --forest-800: #10271F; --forest-700: #17382D; --forest-600: #23493B;
  --cream: #F2EDE1; --paper: #FAF7EE; --fiber: #E4DAC2; --fiber-2: #CFC2A4;
  --lime: #CFE06C; --lime-deep: #52691F; --brass: #C2A050; --brass-deep: #87661A; --rust: #A9512C; --rust-soft: #DE9670;
  --sage: #9DB0A2; --moss: #5E7065; --plum: #7A6A86;
  --font-display: 'Fraunces', 'Noto Serif', 'Times New Roman', serif;
  --font-ui: 'Be Vietnam Pro', 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.22, .68, .12, 1); --ease-io: cubic-bezier(.66, 0, .24, 1); --ease-in: cubic-bezier(.5, 0, .9, .4);
  --u: min(1vw, 1.7778vh);
  --px: calc(var(--u) * 5);
  --f-mega: calc(var(--u) * 10.4); --f-num: calc(var(--u) * 7.2); --f-h1: calc(var(--u) * 3.25); --f-h2: calc(var(--u) * 2.05);
  --f-h3: calc(var(--u) * 1.45); --f-body: calc(var(--u) * 1.2); --f-sm: calc(var(--u) * 1.06); --f-xs: calc(var(--u) * .9);
  --hud-h: calc(var(--u) * 4.2);
}
@supports (height: 1svh) { :root { --u: min(1vw, 1.7778svh); } }
@media (max-width: 820px) {
  :root { --u: 1vw; --px: calc(var(--u) * 5.6);
    --f-mega: calc(var(--u) * 18); --f-num: calc(var(--u) * 14); --f-h1: calc(var(--u) * 7.6); --f-h2: calc(var(--u) * 5.4);
    --f-h3: calc(var(--u) * 4.6); --f-body: calc(var(--u) * 4.05); --f-sm: calc(var(--u) * 3.7); --f-xs: calc(var(--u) * 3.2);
    --hud-h: 52px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; background: var(--forest-900); color: var(--cream); font-family: var(--font-ui); font-size: var(--f-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-feature-settings: 'kern' 1; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus, var(--lime)); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Scene shell ---------- */
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; isolation: isolate; background: var(--bg); color: var(--fg); }
.th-dark { --bg: var(--forest-900); --bg2: var(--forest-800); --fg: #EFEADC; --mute: #9DB0A2; --mute2: #A7B5AA; --line: rgba(239, 234, 220, .15); --line2: rgba(239, 234, 220, .32); --acc: var(--lime); --acc2: var(--brass); --warn: var(--rust-soft); --fill: var(--lime); --on-fill: var(--forest-900); --card: rgba(239, 234, 220, .05); --sel: rgba(207, 224, 108, .1); --focus: var(--lime); }
.th-light { --bg: var(--cream); --bg2: var(--fiber); --fg: #0F2A22; --mute: #5A6C61; --mute2: #6E7D72; --line: rgba(15, 42, 34, .14); --line2: rgba(15, 42, 34, .34); --acc: var(--lime-deep); --acc2: var(--brass-deep); --warn: var(--rust); --fill: var(--lime); --on-fill: #0F2A22; --card: rgba(15, 42, 34, .04); --sel: rgba(82, 105, 31, .08); --focus: var(--forest-700); }
.sc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sc-bg img { width: 100%; height: 100%; object-fit: cover; }
.th-dark .sc-bg.grain { background: radial-gradient(90% 80% at 80% 8%, #163629 0%, #0F241C 45%, #0A1711 100%); }
.sc-in { position: relative; width: min(100%, calc(var(--u) * 100)); margin-inline: auto; padding: calc(var(--hud-h) + var(--u) * 2.4) var(--px) calc(var(--u) * 5.4); display: grid; align-content: center; gap: calc(var(--u) * 2); min-width: 0; }
.sc-src { position: absolute; left: var(--px); right: calc(var(--px) + var(--u) * 8); bottom: calc(var(--u) * 2.8); font-size: var(--f-xs); color: var(--mute); opacity: .8; z-index: 2; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Type ---------- */
.eyebrow { font-family: var(--font-ui); font-size: var(--f-xs); font-weight: 600; letter-spacing: .02em; color: var(--mute); }
.eyebrow b { color: var(--fg); font-weight: 600; }
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--f-h1); line-height: 1.12; letter-spacing: -.016em; text-wrap: balance; font-variation-settings: 'opsz' 72; max-width: 22em; }
.h1 em { font-style: normal; color: var(--mute2); }
.is-display em, .mega em { font-style: italic; font-weight: 340; color: var(--acc); }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--f-h2); line-height: 1.18; letter-spacing: -.012em; text-wrap: balance; }
.h3 { font-family: var(--font-ui); font-weight: 600; font-size: var(--f-h3); line-height: 1.28; letter-spacing: -.008em; }
.lede { font-size: calc(var(--f-body) * 1.08); line-height: 1.52; color: var(--fg); max-width: 36em; }
.mute { color: var(--mute); }
.sm { font-size: var(--f-sm); }
.cap { font-size: var(--f-xs); color: var(--mute); line-height: 1.45; }
.num { font-family: var(--font-display); font-weight: 340; font-size: var(--f-num); line-height: .95; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: 'opsz' 144; }
.mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tnum { font-variant-numeric: lining-nums tabular-nums; }
.acc { color: var(--acc); } .acc2 { color: var(--acc2); } .warn { color: var(--warn); }
.ln { display: block; overflow: hidden; padding: .16em .06em .12em 0; margin: -.16em 0 -.12em; }
.ln > span { display: block; }
small { font-size: .32em; font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; margin-left: .25em; }

/* ---------- Reveal system (vai trò → thời điểm; --d do app.js gán) ----------
   eyebrow 0 ms · tiêu đề 80 ms · đối tượng 160 ms · dữ liệu 300 + 55 ms/bước (tối đa 7) · nguồn 900 ms */
.js [data-r] { opacity: 0; transform: translate3d(0, calc(var(--u) * .9), 0); transition: opacity .7s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-r='fade'] { transform: none; }
.js [data-r='left'] { transform: translate3d(calc(var(--u) * -1.6), 0, 0); }
.js [data-r='right'] { transform: translate3d(calc(var(--u) * 1.6), 0, 0); }
.js [data-r='zoom'] { transform: scale(.965) translate3d(0, calc(var(--u) * .6), 0); transition-duration: .9s, 1.2s, 1s; }
.js [data-r='push'] { transform: scale(1.05); transition-duration: 1s, 1.6s, 1s; }
.js [data-r='wipe'] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js [data-r='rise'] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
.js .is-in [data-r] { opacity: 1; transform: none; }
.js .is-in [data-r='wipe'], .js .is-in [data-r='rise'] { clip-path: inset(0 0 0 0); }
.js .ln > span { transform: translate3d(0, 105%, 0); transition: transform .95s var(--ease); transition-delay: var(--d, 80ms); }
.js .is-in .ln > span { transform: none; }
.js .scene:not(.is-in) [data-r], .js .scene:not(.is-in) .ln > span { transition-duration: 0s !important; transition-delay: 0s !important; }
@keyframes sweep { from { transform: translate3d(-60%, 0, 0) skewX(-18deg); opacity: 0; } 30% { opacity: 1; } to { transform: translate3d(160%, 0, 0) skewX(-18deg); opacity: 0; } }
.sweep { position: absolute; inset: -10% 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 244, 200, .1), transparent); opacity: 0; pointer-events: none; }
.is-in .sweep { animation: sweep 2.2s var(--ease-io) .2s both; }
.sprite { filter: drop-shadow(0 calc(var(--u) * 1.1) calc(var(--u) * 1.4) rgba(0, 0, 0, .26)); user-select: none; -webkit-user-drag: none; }
.th-light .sprite { filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(60, 45, 10, .18)); }
[data-par] { will-change: transform; }
.swap { animation: swapIn .45s var(--ease) both; }
@keyframes swapIn { from { opacity: 0; transform: translate3d(0, calc(var(--u) * .5), 0); } to { opacity: 1; transform: none; } }
/* đối tượng đang bay giữa hai cảnh (FLIP) */
.flip-on { opacity: 1 !important; transition: none !important; }

/* ---------- Controls: thiết kế riêng, ít pill ---------- */
.btn { justify-self: start; display: inline-flex; align-items: center; gap: .55em; padding: .62em 1.05em; border-radius: 5px; font-size: var(--f-sm); font-weight: 600; border: 1px solid var(--line2); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { border-color: var(--fg); background: var(--card); }
.btn.primary { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.btn.primary:hover { background: #DDEB86; border-color: #DDEB86; }
.btn.sm { font-size: var(--f-xs); padding: .5em .85em; }
.btn.quiet { border-color: transparent; padding-inline: .2em; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line2); }
.btn.quiet:hover { background: none; text-decoration-color: currentColor; }
/* segmented: dạng tab biên tập, gạch chân trạng thái chọn */
.seg { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 0 1.3em; border-bottom: 1px solid var(--line); }
.seg button { position: relative; padding: .5em 0 .55em; font-size: var(--f-xs); font-weight: 600; color: var(--mute); transition: color .2s; }
.seg button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed='true'] { color: var(--fg); }
.seg button[aria-pressed='true']::after { transform: none; }
.chip { justify-self: start; display: inline-flex; align-items: center; gap: .45em; padding: .36em .7em; border-radius: 4px; border: 1px solid var(--line); font-size: var(--f-xs); font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
button.chip:hover { border-color: var(--line2); background: var(--card); }
button.chip[aria-pressed='true'], button.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tag { display: inline-flex; align-items: center; gap: .45em; font-size: var(--f-xs); font-weight: 600; letter-spacing: .01em; }
.tag::before { content: ''; width: .58em; height: .58em; border-radius: 50%; background: currentColor; flex: none; }
.tag.ok { color: var(--acc); } .tag.open { color: var(--warn); } .tag.open::before { background: none; border: 1.5px solid currentColor; }
.tag.assume { color: var(--acc2); } .tag.assume::before { background: none; border: 1.5px dashed currentColor; }
.tag.none { color: var(--mute); } .tag.none::before { background: none; border: 1.5px dashed currentColor; }
.hint { display: inline-flex; align-items: center; gap: .6em; font-size: var(--f-xs); color: var(--mute); }
.hint::before { content: ''; width: 1.4em; height: 1px; background: currentColor; }
.illus { font-size: var(--f-xs); font-weight: 600; color: var(--acc2); border-bottom: 1px dashed currentColor; padding-bottom: .05em; white-space: nowrap; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.panel { border-top: 1px solid var(--line); padding-top: calc(var(--u) * 1.1); }

input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: calc(var(--u) * 2); min-height: 26px; background: transparent; cursor: pointer; margin: 0; --pct: 50%; }
input[type='range']::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--fg) var(--pct), var(--line2) var(--pct)); }
input[type='range']::-moz-range-track { height: 2px; background: var(--line2); }
input[type='range']::-moz-range-progress { height: 2px; background: var(--fg); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--fg); margin-top: -7px; transition: transform .15s; }
input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--fg); }
input[type='range']:hover::-webkit-slider-thumb, input[type='range']:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type='range']:focus-visible { outline: none; } input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--fg), 0 0 0 5px var(--sel); }
.field { display: grid; gap: .25em; min-width: 0; }
.field > label, .field > .lbl { font-size: var(--f-xs); color: var(--mute); display: flex; justify-content: space-between; gap: 1em; align-items: baseline; }
.field output { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--hud-h); padding: env(safe-area-inset-top, 0px) var(--px) 0; display: flex; align-items: center; justify-content: space-between; gap: 1em; pointer-events: none; transition: opacity .5s; font-size: var(--f-xs); }
.hud > * { pointer-events: auto; }
.hud-brand { display: flex; align-items: baseline; gap: 1em; color: var(--hud-fg, #EFEADC); transition: color .4s; min-width: 0; }
.hud-brand b { font-family: var(--font-display); font-weight: 500; font-size: calc(var(--f-sm) * 1.12); white-space: nowrap; }
.hud-brand span { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud.on-light { --hud-fg: #0F2A22; }
.hud-tools { display: flex; align-items: center; gap: 2px; background: rgba(9, 22, 16, .94); color: #EFEADC; border-radius: 7px; padding: 3px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.hud-tools button { height: calc(var(--hud-h) - 22px); min-height: 30px; min-width: calc(var(--hud-h) - 22px); padding: 0 .8em; border-radius: 5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45em; transition: background .2s, color .2s; white-space: nowrap; }
.hud-tools button:hover { background: rgba(239, 234, 220, .1); }
.hud-tools button.is-cta { background: var(--lime); color: var(--forest-900); }
.hud-tools button[aria-pressed='true'] { background: rgba(239, 234, 220, .16); }
.hud-tools .count { padding: 0 .7em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-tools .steps { display: inline-flex; gap: 4px; padding: 0 .7em 0 0; align-items: center; }
.hud-tools .steps i { width: 5px; height: 5px; border-radius: 50%; background: rgba(239, 234, 220, .28); transition: background .25s, transform .25s; }
.hud-tools .steps i.is-done { background: var(--lime); }
.hud-tools .steps:empty { display: none; }
.hud-tools .sep { width: 1px; height: 1.3em; background: rgba(239, 234, 220, .16); margin: 0 3px; }
.hud-tools svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hud-tools [data-act='baseline'] { color: var(--lime); }
.only-present { display: none !important; }
body.present .only-present { display: inline-flex !important; }
body.present .only-explore { display: none !important; }

.prog { position: fixed; z-index: 50; left: var(--px); right: var(--px); bottom: calc(var(--u) * 1.1 + env(safe-area-inset-bottom, 0px)); display: flex; gap: calc(var(--u) * .9); align-items: center; transition: opacity .5s; pointer-events: none; }
.prog-ch { display: flex; gap: 3px; flex: var(--n, 1); pointer-events: auto; }
.prog-seg { flex: 1; height: 14px; display: grid; align-items: center; cursor: pointer; position: relative; }
.prog-seg::before { content: ''; height: 2px; background: var(--hud-fg, #EFEADC); opacity: .2; transition: opacity .3s, height .3s, background .3s; border-radius: 2px; }
.prog-seg.is-done::before { opacity: .5; }
.prog-seg.is-now::before { opacity: 1; height: 3px; background: var(--lime); }
.prog.on-light .prog-seg.is-now::before { background: var(--forest-700); }
.prog.on-light { --hud-fg: #0F2A22; }
.prog-seg:hover::before { opacity: 1; }
@keyframes hudIn { from { opacity: 0; } to { opacity: 1; } }
.js .hud, .js .prog, .js .rail { animation: hudIn .9s ease 1.9s both; }
body.present.is-idle .hud, body.present.is-idle .prog { opacity: 0; }
body.present.is-idle { cursor: none; }

/* ---------- Present mode ---------- */
body.present { overflow: hidden; height: 100%; }
body.present .scene { position: fixed; inset: 0; min-height: 0; height: 100%; visibility: hidden; z-index: 1; }
body.present .scene.is-active, body.present .scene.is-leaving { visibility: visible; }
/* cảnh không hoạt động: không phần tử con nào được tự bật lại visibility (các trạng thái at1..at6 còn sót lại từ chế độ khám phá làm lộ hình ma) */
body.present .scene:not(.is-active):not(.is-leaving) * { visibility: hidden !important; }
body.present .scene.is-active { z-index: 3; }
body.present .scene.is-leaving { z-index: 2; pointer-events: none; }
@media (max-width: 820px) { body.present .scene { overflow-y: auto; } }

/* ---------- Overlays ---------- */
.toc { position: fixed; inset: 0; z-index: 80; background: #07120D; color: #EFEADC; display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.toc.is-open { opacity: 1; visibility: visible; }
.toc-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 2) var(--px); border-bottom: 1px solid rgba(239, 234, 220, .12); }
.toc-body { overflow-y: auto; padding: calc(var(--u) * 2.4) var(--px) calc(var(--u) * 5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 2.6) calc(var(--u) * 3); align-content: start; }
.toc-ch h3 { font-size: var(--f-xs); font-weight: 600; color: var(--lime); padding-bottom: .7em; border-bottom: 1px solid rgba(239, 234, 220, .14); margin-bottom: .5em; }
.toc-ch button { display: grid; grid-template-columns: 2.2em 1fr; gap: .3em; width: 100%; text-align: left; padding: .5em .4em; border-radius: 4px; font-size: var(--f-sm); line-height: 1.3; transition: background .2s; }
.toc-ch button:hover { background: rgba(239, 234, 220, .07); }
.toc-ch button i { font-style: normal; color: #9DB0A2; font-size: var(--f-xs); padding-top: .15em; font-variant-numeric: tabular-nums; }
.toc-ch button.is-now { background: rgba(207, 224, 108, .12); } .toc-ch button.is-now i { color: var(--lime); }
.toc-keys { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6em 1.6em; font-size: var(--f-xs); color: #9DB0A2; border-top: 1px solid rgba(239, 234, 220, .12); padding-top: 1.4em; }
.toc-keys kbd { font: inherit; font-weight: 600; color: #EFEADC; border: 1px solid rgba(239, 234, 220, .3); border-radius: 3px; padding: .05em .45em; margin-right: .4em; }
@media (max-width: 1100px) { .toc-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .toc-body { grid-template-columns: 1fr; } }

.notes { position: fixed; z-index: 60; left: var(--px); right: var(--px); bottom: calc(var(--u) * 3.4); max-height: 42vh; overflow-y: auto; background: #07120D; color: #EFEADC; border: 1px solid rgba(239, 234, 220, .14); border-radius: 8px; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--u) * 2.4); font-size: var(--f-sm); line-height: 1.55; transform: translateY(16px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .4s var(--ease), visibility .3s; }
.notes.is-open { opacity: 1; transform: none; visibility: visible; }
.notes h4 { margin: 0 0 .5em; font-size: var(--f-xs); font-weight: 600; color: var(--lime); }
.notes p + h4 { margin-top: 1em; }
.notes .cap { color: #9DB0A2; }
@media (max-width: 820px) { .notes { grid-template-columns: 1fr; } }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--u) * 4.4); transform: translate(-50%, 12px); background: #07120D; color: #EFEADC; border: 1px solid rgba(239, 234, 220, .16); border-radius: 6px; padding: .6em 1.1em; font-size: var(--f-xs); opacity: 0; transition: opacity .3s, transform .4s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.rail { position: fixed; z-index: 40; right: calc(var(--u) * 1.5); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 14px; color: var(--hud-fg, #EFEADC); }
.rail button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; transition: all .3s; }
.rail button.is-now::after { background: currentColor; opacity: 1; transform: scale(1.3); }
.rail button span { font-size: 11px; font-weight: 600; opacity: 0; transform: translateX(6px); transition: all .25s; background: var(--forest-950); color: #EFEADC; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: none; }
.rail.on-light { --hud-fg: #0F2A22; }
body.present .rail { display: none; }
@media (max-width: 820px) { .rail { display: none; } .hud-brand span { display: none; } .prog { gap: 4px; } .prog-ch { gap: 1px; } .hud-tools .lbl { display: none; } .hud-tools [data-act='replay'], .hud-tools [data-act='notes'], .hud-tools [data-act='safe'] { display: none; } }

/* ---------- Presenter Safe Mode: giữ nghiệp vụ, bỏ hiệu ứng nặng ---------- */
body.safe [data-r], body.safe .ln > span { transition-duration: .3s !important; transition-delay: 0s !important; transform: none !important; filter: none !important; }
body.safe .sweep, body.safe [data-par] { animation: none !important; transform: none !important; }
body.safe .hero-prod-in { filter: none !important; transform: none !important; }
body.safe .s23-lens { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-r], .js .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
  .is-in .sweep { animation: none !important; }
  .js .hud, .js .prog, .js .rail { animation: none; }
}