/* ============================================================
   THU MUA XANH · V3 — sân khấu không gian
   Một canvas 3D dùng chung, chú thích bám điểm neo, ngăn "Nguồn & giới hạn",
   các cảnh dựng lại: 01 · 04 · 05 · 08 · 09 · 23 · 29.
   ============================================================ */

/* ---------- 3D host ---------- */
.gl-host { position: absolute; inset: 0; z-index: 0; }
.gl-canvas { position: absolute; inset: 0; display: block; outline: none; }
.gl-host.is-grab .gl-canvas { cursor: grabbing; }
.v3 .gl-host .gl-canvas { cursor: grab; }
.hero3 .gl-canvas, .sc-29 .gl-canvas { cursor: default; }
.gl-fallback { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: var(--px); }
.gl-fallback img { max-width: 62%; max-height: 82%; object-fit: contain; }
html.gl-ok .gl-fallback { display: none; }
html.gl-lost .gl-host .gl-fallback { display: grid; }

/* ---------- chú thích bám vật thể ---------- */
.pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .55em; pointer-events: auto; white-space: nowrap; transition: opacity .45s var(--ease); will-change: transform; font-size: var(--f-xs); }
.pin i { position: relative; flex: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(207, 224, 108, .22), 0 2px 10px rgba(0, 0, 0, .35); align-self: flex-start; }
.pin b { font-weight: 600; color: #F3EEE1; background: rgba(8, 18, 12, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .32em .7em; border-radius: 4px; margin-top: -1.1em; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.pin em { font-style: normal; color: #B7C2B6; margin: -1.1em 0 0 -.2em; font-size: .92em; }
.pin.is-back { opacity: .18; }
.pin.hot { cursor: pointer; }
.pin.hot:hover b, .pin.is-on b { background: var(--lime); color: #0F2A22; }
.pin.is-on i { background: #fff; box-shadow: 0 0 0 6px rgba(207, 224, 108, .45), 0 0 24px rgba(207, 224, 108, .55); }
@keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(207, 224, 108, .22), 0 2px 10px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 0 9px rgba(207, 224, 108, .06), 0 2px 10px rgba(0, 0, 0, .35); } }
.pin.hot:not(.is-on) i { animation: pinPulse 2.6s ease-in-out 3; }
body.safe .pin i { animation: none !important; }

/* ---------- Ngăn nguồn & giới hạn ---------- */
.drawer > summary { display: none !important; }
.drawer { position: absolute; left: var(--px); bottom: calc(var(--u) * 2.3); z-index: 60; max-width: min(calc(var(--u) * 52), calc(100% - var(--px) * 2)); font-size: var(--f-xs); }
.drawer > summary { list-style: none; display: inline-flex; align-items: center; gap: .6em; cursor: pointer; color: var(--mute); font-weight: 600; padding: .35em .1em; user-select: none; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary i { width: 1.55em; height: 1.55em; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); font-style: italic; font-family: var(--font-display); font-weight: 500; }
.drawer > summary:hover { color: var(--fg); }
.drawer[open] > summary { color: var(--fg); }
.drawer-in { position: fixed; left: auto; right: var(--px); top: calc(var(--hud-h) + 10px); bottom: auto; width: min(calc(var(--u) * 52), 86vw); max-height: 52vh; overflow: auto; display: grid; gap: .8em; padding: 1.1em 1.25em; border-radius: 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); color: var(--fg); line-height: 1.5; animation: swapIn .35s var(--ease) both; }
.drawer-in > * { position: static !important; margin: 0 !important; max-width: none !important; opacity: 1 !important; transform: none !important; font-size: var(--f-xs) !important; }
.drawer-in .sc-src { color: var(--mute); border-top: 1px solid var(--line); padding-top: .7em; right: auto; }
.drawer-in p + p { margin-top: .5em !important; }
.in-drawer.s10-read, .in-drawer.s16-read { border: 0; padding: 0; }
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; gap: .5em; align-items: center; font-size: var(--f-xs); font-weight: 600; color: var(--mute); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line2); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: '+'; font-weight: 400; }
.more[open] > summary::after { content: '−'; }
.more-in { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(calc(var(--u) * 70), 90vw); max-height: 60vh; overflow: auto; padding: 1em 1.2em; border-radius: 8px; background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); font-size: var(--f-xs); display: grid; gap: .6em; animation: swapIn .3s var(--ease) both; }

/* ---------- Thẻ chương khi chuyển chương ---------- */
.chap-card { position: fixed; z-index: 40; left: var(--px); top: 50%; translate: 0 -50%; pointer-events: none; opacity: 0; display: grid; gap: .2em; color: #EFEADC; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.chap-card i { font-style: normal; font-family: var(--font-ui); font-weight: 600; font-size: var(--f-sm); color: var(--lime); letter-spacing: .04em; }
.chap-card b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--f-h1) * 1.5); letter-spacing: -.02em; }

/* ============ 01 · MỞ MÀN ============ */
.scene.hero3 { --bg: #0A120C; }
.h3-bg { background: radial-gradient(70% 90% at 72% 46%, #1D3424 0%, #102016 42%, #08110B 100%); }
.h3-light { position: absolute; width: 90vmax; height: 90vmax; right: -24vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(232, 214, 150, .22), rgba(232, 214, 150, .05) 55%, transparent); opacity: 0; transform: scale(.9); transition: opacity 3s var(--ease) .2s, transform 4s var(--ease) .2s; }
.hero3.is-in .h3-light { opacity: 1; transform: none; }
.h3-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: radial-gradient(55% 60% at 66% 100%, rgba(0, 0, 0, .35), transparent 70%), linear-gradient(180deg, transparent, rgba(0, 0, 0, .28)); }
.hero3 .gl-host { z-index: 1; }
.js .hero3 .gl-host { opacity: 0; transition: opacity 1.6s var(--ease) .1s; }
.js .hero3.is-in .gl-host { opacity: 1; }
.hero3 .pins { opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.hero3.pins-on .pins { opacity: 1; }
.hero3 .pin { pointer-events: none; }
.h3-copy { z-index: 2; justify-items: start; align-content: center; gap: calc(var(--u) * 1.4); width: min(100%, calc(var(--u) * 100)); pointer-events: none; }
.h3-copy > * { pointer-events: auto; }
.h3-copy .mega { font-size: calc(var(--f-mega) * 1.05); }
.hero-sub { font-family: var(--font-display); font-size: calc(var(--f-h2) * 1.05); line-height: 1.22; font-weight: 400; padding-top: calc(var(--u) * 1.1); border-top: 1px solid rgba(194, 160, 80, .55); max-width: 15em; }
.h3-drag { display: inline-flex; align-items: center; gap: .7em; margin-top: calc(var(--u) * 1.4); }
.h3-drag i { width: 1.9em; height: 1.1em; border: 1.5px solid currentColor; border-radius: 1em; position: relative; }
.h3-drag i::after { content: ''; position: absolute; top: 50%; left: 30%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; animation: dragHint 2.4s ease-in-out 3; }
@keyframes dragHint { 0%, 100% { transform: none; } 50% { transform: translateX(8px); } }
.h3-meta { position: absolute; z-index: 2; right: var(--px); bottom: calc(var(--u) * 2.4); text-align: right; line-height: 1.6; }
.h3-meta span { opacity: .75; }

/* ============ 04 · PHÒNG THỬ BẢN SỐ ============ */
.sc-4.v3 { --bg: #ECE5D5; }
.s4b { background: radial-gradient(80% 90% at 66% 46%, #FBF8F0 0%, #EEE7D7 48%, #D9CFB9 100%); }
.s4b::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 66% 52%, #2B4232 0%, #142319 55%, #0A140E 100%); opacity: 0; transition: opacity 1.4s var(--ease); }
.lab[data-mode='mat'] .s4b::after, .lab[data-mode='anat'] .s4b::after { opacity: 1; }
.lab[data-mode='anat'] .s4b::after { opacity: .92; }
.s4b-dim { position: absolute; inset: 0; background: #070D09; opacity: 0; transition: opacity 1.2s var(--ease); z-index: 1; }
.lab.is-real .s4b-dim { opacity: .94; }
.lab[data-mode='mat'], .lab[data-mode='anat'], .lab.is-real { --bg: #0E1B14; --fg: #EFEADC; --mute: #A7B5AA; --line: rgba(239, 234, 220, .15); --line2: rgba(239, 234, 220, .32); --acc: var(--lime); --acc2: var(--brass); --warn: var(--rust-soft); --card: rgba(239, 234, 220, .05); --sel: rgba(207, 224, 108, .1); }
.lab { transition: color .8s var(--ease); color: var(--fg); }
.lab .gl-host { transition: opacity .9s var(--ease); }
.lab.is-real .gl-host { opacity: .55; }
.lab-real { position: absolute; z-index: 4; left: var(--px); top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease); display: grid; gap: .6em; color: #EFEADC; }
.lab-real-t { font-family: var(--font-display); font-size: calc(var(--f-h1) * 1.2); line-height: 1.12; max-width: 12em; letter-spacing: -.015em; }
.lab.is-real .lab-real { opacity: 1; }
.lab.is-real .s4v, .lab.is-real .pins { opacity: 0; pointer-events: none; }
.s4v { z-index: 2; height: 100%; align-content: center; pointer-events: none; transition: opacity .6s var(--ease); }
.s4v > * { pointer-events: auto; }
.s4v-copy { display: grid; gap: calc(var(--u) * 1.1); width: calc(var(--u) * 33); align-content: start; }
.s4-ml { font-size: calc(var(--f-num) * 1.15); }
.lab-mode { margin-top: calc(var(--u) * .4); }
.lab-panel { display: grid; gap: calc(var(--u) * .9); min-height: calc(var(--u) * 15); align-content: start; }
.lab-tools { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .3em; }
.lab-badge { font-size: var(--f-xs); font-weight: 600; color: var(--acc2); border-left: 2px solid var(--acc2); padding-left: .7em; }
.lab-zones { display: flex; flex-wrap: wrap; gap: .4em; }
.ev { display: grid; grid-template-columns: calc(var(--u) * 10) 1fr; gap: 1em; align-items: baseline; font-size: var(--f-sm); line-height: 1.45; }
.s4v-hint { position: absolute; right: var(--px); bottom: calc(var(--u) * 2.4); display: inline-flex; gap: .6em; align-items: center; }
.s4v-hint i { width: 1.6em; height: 1em; border: 1.5px solid currentColor; border-radius: 1em; }
.s4-pins .pin-x { display: none; }
.lab[data-mode='anat'] .s4-pins .pin-a { display: none; }
.lab[data-mode='anat'] .s4-pins .pin-x { display: flex; }
.lab[data-mode='mat'] .s4-pins { opacity: 0; pointer-events: none; }
.lab[data-mode='mat'] .s4-pins .pin { pointer-events: none; }
.s4-pins { transition: opacity .5s var(--ease); }
.lab-media { position: absolute; z-index: 3; right: var(--px); top: calc(var(--hud-h) + var(--u) * 3); bottom: calc(var(--u) * 7); width: calc(var(--u) * 48); pointer-events: none; }
.lm { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: .7em; opacity: 0; transform: translate3d(0, 2%, 0) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.lm figcaption { font-size: var(--f-xs); color: #B7C2B6; }
.lm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.lm-sec { place-items: center; background: rgba(8, 18, 12, .72); border: 1px solid rgba(239, 234, 220, .12); border-radius: 8px; padding: calc(var(--u) * 2); }
.lab[data-media='photo'] .lm-photo, .lab[data-media='sec'] .lm-sec { opacity: 1; transform: none; }
.lab[data-media='photo'] .gl-host, .lab[data-media='sec'] .gl-host { opacity: .3; }
.sec { width: 100%; height: auto; max-height: 100%; }
.sec-g { stroke: rgba(239, 234, 220, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.sec-p { fill: rgba(226, 211, 179, .9); stroke: #F3ECDC; stroke-width: 1; stroke-linejoin: round; }
.sec-t text { fill: #DCE3D4; font-family: var(--font-ui); font-size: 11px; font-weight: 600; }

/* ============ 05 · HAI THẾ GIỚI ============ */
.sc-5.v3 { --bg: #13201A; padding: 0; }
.w5s { position: absolute; inset: 0; display: grid; grid-template-columns: var(--ca, 1fr) var(--cb, 1fr); transition: grid-template-columns 1.1s var(--ease-io); }
.w5s[data-sel='a'] { --ca: 2.4fr; --cb: 1fr; }
.w5s[data-sel='b'] { --ca: 1fr; --cb: 2.4fr; }
.w5 { position: relative; container-type: size; min-width: 0; cursor: pointer; overflow: clip; outline-offset: -4px; }
.w5-env { position: absolute; inset: 0; transition: filter 1s var(--ease); }
.w5-a .w5-env { background: linear-gradient(180deg, #F4E9D2 0%, #EBD9B7 58%, #CDB487 58.2%, #B99B6B 100%); }
.w5-b .w5-env { background: linear-gradient(180deg, #13261D 0%, #0D1B15 60%, #2B2219 60.2%, #1A140F 100%); }
.w5-light { position: absolute; inset: 0; }
.w5-a .w5-light { background: radial-gradient(60% 55% at 70% 18%, rgba(255, 246, 220, .9), transparent 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 6%, transparent 6% 14%); mix-blend-mode: soft-light; }
.w5-b .w5-light { background: radial-gradient(36% 40% at 62% 40%, rgba(238, 196, 120, .42), transparent 70%); }
.w5-surface { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: radial-gradient(60% 40% at 50% 0%, rgba(0, 0, 0, .18), transparent 70%); }
.w5-obj { position: absolute; left: 50%; bottom: 30cqh; width: min(56cqw, 60cqh); transform: translate3d(-50%, 0, 0); transition: transform 1.1s var(--ease-io), filter 1s var(--ease), width 1.1s var(--ease-io); }
.w5-objin { position: relative; }
.w5-objin img { width: 100%; height: auto; position: relative; z-index: 1; }
.w5-shadow { position: absolute; left: 10%; right: 10%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent); }
.w5-txt { position: absolute; left: clamp(16px, 7cqw, 60px); right: clamp(16px, 7cqw, 60px); bottom: clamp(18px, 7cqh, 64px); display: grid; gap: .45em; transition: opacity .6s var(--ease); }
.w5-a .w5-txt { color: #1B2E24; --mute: #5B6B5D; }
.w5-b .w5-txt { color: #EFEADC; --mute: #A7B5AA; }
.w5-t { font-family: var(--font-display); font-weight: 400; font-size: min(var(--f-h1), 11cqw); line-height: 1.06; letter-spacing: -.016em; }
.w5-s { font-size: min(var(--f-body), 5.2cqw); max-width: 28em; line-height: 1.45; transition: opacity .5s var(--ease); }
/* phía được chọn tiến lên; phía còn lại thu nhỏ và lùi xuống chiều sâu */
.w5[aria-pressed='true'] .w5-obj { transform: translate3d(-50%, -2cqh, 0) scale(1.06); }
.w5s[data-sel]:not([data-sel='']) .w5[aria-pressed='false'] .w5-obj { transform: translate3d(-50%, 10cqh, 0) scale(.8); filter: brightness(.72) saturate(.7); }
.w5s[data-sel]:not([data-sel='']) .w5[aria-pressed='false'] .w5-env { filter: brightness(.6) saturate(.6); }
.w5s[data-sel]:not([data-sel='']) .w5[aria-pressed='false'] .w5-s { opacity: 0; }
.w5:hover .w5-env { filter: brightness(1.04); }
.w5-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: calc(var(--hud-h) + var(--u) * 1.6) var(--px) calc(var(--u) * 5); background: linear-gradient(180deg, rgba(7, 14, 10, .78), rgba(7, 14, 10, .42) 60%, transparent); pointer-events: none; display: grid; gap: .5em; color: #EFEADC; --mute: #B7C2B6; --mute2: #B7C2B6; }
.w5-head .h1 { font-size: var(--f-h1); }
.w5-head .h1 em { color: var(--lime); font-style: normal; }
.w5-seam { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--u) * 2.4); translate: -50% 0; font-size: var(--f-xs); color: rgba(239, 234, 220, .7); pointer-events: none; transition: opacity .5s; }
.w5s[data-sel='a'] ~ .w5-seam, .w5s[data-sel='b'] ~ .w5-seam { opacity: 0; }

/* ============ 08 · ĐẤU TRƯỜNG SO SÁNH ============ */
.sc-8.v3 { --bg: #0B1712; }
.a8-bg { background: radial-gradient(60% 70% at 50% 30%, #1B3326 0%, #0E1D16 55%, #08110C 100%); }
.a8-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 64%; background: repeating-linear-gradient(90deg, rgba(239, 234, 220, .05) 0 1px, transparent 1px 7%), repeating-linear-gradient(0deg, rgba(239, 234, 220, .05) 0 1px, transparent 1px 12%); transform: perspective(900px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 95%); mask-image: linear-gradient(0deg, #000 30%, transparent 95%); }
.a8-spot { position: absolute; left: 50%; bottom: 6%; width: 70vw; height: 40vh; translate: -50% 0; background: radial-gradient(closest-side, rgba(232, 214, 150, .16), transparent); transition: opacity 1s; }
.a8 { height: 100%; grid-template-rows: auto 1fr auto; align-content: stretch; padding-bottom: calc(var(--u) * 6); }
.a8-head { display: grid; gap: .5em; }
.a8-head .h1 em { color: var(--mute2); }
.a8-stage { position: relative; min-height: calc(var(--u) * 28); }
.tok { position: absolute; left: var(--x, 50%); bottom: var(--y, 0%); width: calc(var(--u) * 20); display: grid; justify-items: center; gap: .5em; transform: translate3d(-50%, 0, 0) scale(var(--s, 1)); transform-origin: 50% 100%; opacity: var(--o, 1); filter: var(--f, none); transition: left 1.1s var(--ease-io), bottom 1.1s var(--ease-io), transform 1.1s var(--ease-io), opacity .8s var(--ease), filter .8s var(--ease); z-index: var(--z, 2); }
.tok-obj { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: end center; }
.tok-render { width: 118%; max-width: none; margin-bottom: -4%; position: relative; z-index: 1; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.tok-render.is-photo { width: 100%; border-radius: 6px; }
.glyph { width: 100%; height: auto; position: relative; z-index: 1; overflow: visible; }
.glyph .gl-t { fill: #C9A452; font: 600 18px var(--font-ui); }
.tok-plinth { position: absolute; left: 6%; right: 6%; bottom: -6%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 234, 220, .16), rgba(239, 234, 220, .03) 70%, transparent); box-shadow: inset 0 -2px 0 rgba(239, 234, 220, .08); }
.tok.is-ref .tok-plinth { background: radial-gradient(closest-side, rgba(207, 224, 108, .26), rgba(207, 224, 108, .04) 70%, transparent); }
.tok-lab { display: grid; justify-items: center; gap: .1em; text-align: center; }
.tok-lab i { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.tok-lab b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--f-h3) * 1.15); }
.tok-lab em { font-style: normal; font-size: var(--f-xs); color: var(--mute2); }
.tok.is-ref .tok-lab em { color: var(--lime); }
.tok:hover { --o: 1 !important; --f: none !important; }
.tok[aria-pressed='true'] .tok-plinth { background: radial-gradient(closest-side, rgba(224, 131, 94, .22), transparent); }
.tok[data-slot='C'] { --x: 50%; --y: 4%; --s: 1.35; --z: 4; }
.tok[data-slot='L'] { --x: 17%; --y: 6%; --s: 1; --z: 4; }
.tok[data-slot='R'] { --x: 83%; --y: 6%; --s: 1; --z: 4; }
.tok[data-slot='A0'] { --x: 11%; --y: 38%; --s: .7; }
.tok[data-slot='A1'] { --x: 28%; --y: 50%; --s: .62; }
.tok[data-slot='A2'] { --x: 72%; --y: 50%; --s: .62; }
.tok[data-slot='A3'] { --x: 89%; --y: 38%; --s: .7; }
.tok[data-slot^='B'] { --s: .44; --o: .42; --f: saturate(.4) brightness(.8); --z: 1; --y: 66%; }
.tok[data-slot='B0'] { --x: 34%; } .tok[data-slot='B1'] { --x: 50%; } .tok[data-slot='B2'] { --x: 66%; }
.a8-rail { position: absolute; z-index: 5; left: 50%; bottom: 2%; width: calc(var(--u) * 36); translate: -50% 0; display: grid; gap: .55em; }
.is-cmp .a8-rail { bottom: 6%; }
.sc-8:not(.is-cmp) .a8-rail { left: 0; translate: none; width: calc(var(--u) * 17); bottom: 10%; }
.a8-hint { display: grid; gap: .3em; font-size: var(--f-sm); color: var(--mute2); }
.a8-hint b { color: var(--fg); font-family: var(--font-display); font-weight: 400; font-size: var(--f-h3); }
.rail-hd { display: grid; grid-template-columns: 1fr 1fr; font-size: var(--f-xs); font-weight: 600; color: var(--mute); }
.rail-hd span:last-child { text-align: right; }
.rail-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; padding: .5em .7em; border-radius: 6px; background: rgba(8, 18, 12, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(239, 234, 220, .08); font-size: var(--f-sm); animation: railIn .7s var(--ease) both; animation-delay: calc(.35s + var(--i) * .12s); }
@keyframes railIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.rail-a { color: var(--mute2); }
.rail-b { text-align: right; font-weight: 600; }
.rail-k { display: grid; justify-items: center; gap: .05em; min-width: 6.5em; }
.rail-k em { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.rail-k b { font-size: var(--f-xs); }
.rail-k i { width: 100%; height: 2px; border-radius: 2px; background: currentColor; }
.rail-row.is-match { color: var(--lime); } .rail-row.is-match .rail-b { color: #EFEADC; }
.rail-row.is-off { color: #E0835E; border-color: rgba(224, 131, 94, .4); } .rail-row.is-off .rail-b { color: #F0A483; }
.rail-row.is-open { color: #C9A452; } .rail-row.is-open .rail-k i { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); } .rail-row.is-open .rail-b { color: #D9BE77; }
.rail-row .rail-a, .rail-row .rail-k em { color: #A7B5AA; }
.rail-fit { font-family: var(--font-display); font-size: var(--f-h3); text-align: center; margin-top: .2em; }
.a8-rail .more { justify-self: center; }
.a8-legend { display: flex; flex-wrap: wrap; gap: .4em 1.6em; align-items: center; }
.a8-legend .d { margin-right: .45em; }
.a8-abs { color: var(--acc2); }
.a8 > .more { justify-self: end; margin-top: -1.6em; }
.a8 > .more .more-in { left: auto; right: 0; }
.a8-table { border-collapse: collapse; font-size: var(--f-xs); }
.a8-table th, .a8-table td { text-align: left; padding: .45em .7em; border-bottom: 1px solid var(--line); vertical-align: top; }
.a8-table td.is-off { color: var(--warn); font-weight: 600; } .a8-table td.is-open { color: var(--acc2); }
.d { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: -.05em; }
.d-match { background: var(--lime); } .d-off { background: #E0835E; } .d-open { border: 1.5px dashed #C9A452; }

/* ============ 09 · ĐỊA HÌNH GIÁ ============ */
.sc-9.v3 { --bg: #0B1712; }
.l9-bg { background: radial-gradient(70% 80% at 60% 20%, #183024 0%, #0D1B15 55%, #08110C 100%); }
.l9 { height: 100%; grid-template-rows: auto 1fr auto; align-content: stretch; gap: calc(var(--u) * 1.6); }
.l9-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.l9-head > div { display: grid; gap: .5em; }
.l9-head .h1 em { color: var(--lime); font-style: normal; }
.l9-land { position: relative; display: grid; align-content: end; gap: calc(var(--u) * .2); padding: calc(var(--u) * 1.2) 0 calc(var(--u) * 3.2) calc(var(--u) * 17); touch-action: pan-y; cursor: ew-resize; --ax: calc(var(--u) * 17); }
.l9-land::before { content: ''; position: absolute; left: var(--ax); right: 0; top: 0; bottom: calc(var(--u) * 2.6); background: repeating-linear-gradient(90deg, rgba(239, 234, 220, .06) 0 1px, transparent 1px calc(100% / 6)); pointer-events: none; }
.l9-ticks { position: absolute; left: var(--ax); right: 0; bottom: 0; height: calc(var(--u) * 2.2); font-size: var(--f-xs); color: var(--mute); }
.l9-ticks span { position: absolute; translate: -50% 0; animation: swapIn .5s var(--ease) both; }
.lane { position: relative; display: block; height: calc(var(--u) * 4.7); text-align: left; transition: opacity .5s var(--ease); }
.lane-n { position: absolute; right: calc(100% + var(--u) * 1.2); top: 50%; translate: 0 -50%; display: grid; text-align: right; width: calc(var(--u) * 15); }
.lane-n b { font-weight: 600; font-size: var(--f-sm); }
.lane-n i { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.lane-floor { position: absolute; left: 0; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, rgba(239, 234, 220, .16), rgba(239, 234, 220, .04)); }
.lane-slab { position: absolute; left: var(--a); width: max(calc(var(--b) - var(--a)), 4px); top: 30%; height: 34%; --c: var(--lime); }
.c-brass .lane-slab { --c: #C9A452; } .c-sage .lane-slab { --c: #9DB0A2; } .c-moss .lane-slab { --c: #7F9A84; } .c-plum .lane-slab { --c: #A28FB0; }
.lane-face { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 55%, #000)); border-radius: 2px; box-shadow: 0 14px 22px rgba(0, 0, 0, .35); }
.lane-top { position: absolute; left: 0; right: 0; bottom: 100%; height: 60%; background: color-mix(in srgb, var(--c) 100%, #fff 18%); transform: skewX(-50deg); transform-origin: 0 100%; border-radius: 2px 2px 0 0; opacity: .9; }
.lane-slab.is-pt { width: 6px; translate: -3px 0; top: 6%; height: 58%; }
.lane-slab.is-pt .lane-top { height: 5px; }
.lane-v { position: absolute; left: min(var(--b), calc(100% - 12.5em)); top: 50%; translate: calc(var(--u) * 1.2) -50%; font-size: var(--f-xs); font-weight: 600; white-space: nowrap; color: var(--mute2); transition: color .3s; }
.l9-land.has-hit .lane:not(.is-hit) { opacity: .35; }
.lane.is-hit .lane-face { box-shadow: 0 0 0 1px #fff, 0 0 26px color-mix(in srgb, var(--c) 60%, transparent), 0 14px 22px rgba(0, 0, 0, .35); }
.lane.is-hit .lane-v { color: #fff; }
.lane[aria-pressed='true'] .lane-n b { color: var(--lime); }
.l9-land.is-unit .lane-slab { animation: slabLift .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes slabLift { 40% { transform: translate3d(0, -40%, 0); } }
.l9-beam { position: absolute; top: 0; bottom: calc(var(--u) * 2.6); left: calc(var(--ax) + (100% - var(--ax)) * var(--fx, .52)); width: 0; pointer-events: none; transition: left .12s linear; }
.l9-beam i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 18px rgba(255, 255, 255, .55); }
.l9-beam::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40px; width: 80px; background: linear-gradient(90deg, transparent, rgba(255, 250, 220, .07), transparent); }
.l9-beam b { position: absolute; top: .2em; translate: -50% 0; white-space: nowrap; font-size: var(--f-sm); font-weight: 600; background: #EFEADC; color: #0F2A22; padding: .2em .6em; border-radius: 4px; }
.l9-land input.l9-range { position: absolute; left: var(--ax); right: 0; bottom: 0; width: auto; opacity: 0; height: calc(var(--u) * 2.4); }
.l9-insight { padding-left: calc(var(--u) * 17); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1) calc(var(--u) * 3); min-height: calc(var(--u) * 5); align-items: start; }
.l9-insight p { display: grid; gap: .1em; font-size: var(--f-sm); animation: swapIn .4s var(--ease) both; }
.l9-insight p b { font-weight: 600; }
.l9-insight p span { color: var(--fg); }
.l9-insight p em { font-style: normal; color: var(--mute); font-size: var(--f-xs); }
.l9-warn { color: #E9A27F; font-weight: 600; align-self: center; }

/* ============ 23 · KIỆN HÀNG ============ */
.sc-23.v3 { --bg: #0B1712; }
.k23-bg { background: radial-gradient(70% 80% at 66% 40%, #213A2B 0%, #10211A 55%, #08110C 100%); }
.k23 { height: 100%; align-content: space-between; pointer-events: none; z-index: 4; }
.k23 > * { pointer-events: auto; }
.k23-top { display: grid; gap: calc(var(--u) * .8); width: calc(var(--u) * 34); }
.k23-top .h1 { font-size: calc(var(--f-h1) * 1.3); }
.k23-panel { display: grid; gap: calc(var(--u) * 1); width: calc(var(--u) * 40); padding: calc(var(--u) * 1.4); border-radius: 8px; background: rgba(8, 18, 12, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(239, 234, 220, .1); margin-bottom: calc(var(--u) * 2); }
.k23-ev { display: grid; gap: .6em; }

/* ============ 29 · KẾT ============ */
.sc-29.v3 { --bg: #08110C; }
.f29-bg { background: radial-gradient(70% 80% at 72% 55%, #1A2E21 0%, #0C1912 55%, #060C08 100%); }
.f29-light { position: absolute; right: -10vw; top: -30vh; width: 80vw; height: 90vh; background: radial-gradient(closest-side, rgba(232, 214, 150, .16), transparent); }
.f29 { height: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(var(--u) * 3); pointer-events: none; z-index: 2; }
.f29 > * { pointer-events: auto; }
.f29-l { display: grid; gap: calc(var(--u) * 1.4); align-content: end; max-width: calc(var(--u) * 54); }
.f29-b { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr; gap: 1em; align-items: baseline; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.f29-k { font-size: var(--f-xs); font-weight: 600; color: var(--mute); }
.f29-conv { display: flex; flex-wrap: wrap; gap: .45em; }
.f29-chip { display: inline-flex; gap: .55em; align-items: baseline; padding: .32em .7em; border-radius: 4px; border: 1px solid rgba(239, 234, 220, .12); font-size: var(--f-xs); color: var(--mute); transition: all .8s var(--ease) calc(var(--k) * 90ms); }
.f29-chip b { font-weight: 600; } .f29-chip em { font-style: normal; font-size: .92em; }
.f29-chip.is-pick { background: var(--lime); color: #0F2A22; border-color: var(--lime); }
.f29-chip.is-back { border-color: rgba(201, 164, 82, .7); color: #D9BE77; }
.f29-led { display: flex; flex-wrap: wrap; gap: .3em 1.3em; font-size: var(--f-sm); }
.f29-led i { font-style: normal; margin-right: .4em; }
.f29-led .ok i { color: var(--lime); } .f29-led .no { color: #E9C3AE; } .f29-led .no i { color: #E0835E; }
.f29-h { font-size: calc(var(--f-h1) * 1.25); opacity: 0; transition: opacity 1.2s var(--ease); }
.f29-h .ln > span { transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease); }
.f29-cond { font-size: var(--f-sm); color: #E9C3AE; opacity: 0; transition: opacity 1s var(--ease) .5s; }
.f29-r { display: grid; gap: .8em; justify-items: end; text-align: right; opacity: 0; transition: opacity 1s var(--ease) .4s; }
.f29-thanks { font-family: var(--font-display); font-size: var(--f-h2); }
.f29-qa { display: flex; flex-wrap: wrap; gap: .35em; justify-content: flex-end; max-width: calc(var(--u) * 34); }
.sc-29.ph1 .f29-b1, .sc-29.ph2 .f29-b2, .sc-29.ph3 .f29-b3 { opacity: 1; transform: none; }
.sc-29.ph4 .f29-h { opacity: 1; } .sc-29.ph4 .f29-h .ln > span { transform: none; }
.sc-29.ph4 .f29-cond, .sc-29.ph4 .f29-r { opacity: 1; }
.sc-29 .gl-host { opacity: .95; }

/* ---------- reduced motion / safe ---------- */
@media (prefers-reduced-motion: reduce) {
  .tok, .w5s, .w5-obj, .lane, .rail-row, .f29-b, .f29-h, .f29-h .ln > span { transition: none !important; animation: none !important; }
}
body.safe .w5s, body.safe .w5-obj, body.safe .tok { transition-duration: .25s !important; }
body.safe .rail-row, body.safe .l9-land.is-unit .lane-slab { animation: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .hero3 .gl-host, .sc-4.v3 .gl-host, .sc-23.v3 .gl-host, .sc-29.v3 .gl-host { position: relative; height: 62vw; min-height: 300px; margin-top: var(--hud-h); }
  .scene.v3 { display: block; }
  .h3-copy, .s4v, .k23, .f29 { height: auto; }
  .h3-meta { position: static; text-align: left; padding: 0 var(--px) 24px; }
  .pins .pin b { font-size: 11px; }
  .hero3 .pins, .sc-23 .pins { display: none; }
  .s4v-copy, .k23-top, .k23-panel { width: auto; }
  .s4v-hint { position: static; }
  .lab-media { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: 0; }
  .lab[data-media='photo'] .lab-media, .lab[data-media='sec'] .lab-media { height: 70vw; margin: 0 var(--px) 20px; }
  .ev { grid-template-columns: 1fr; gap: .2em; }
  .f29 { grid-template-columns: 1fr; }
  .f29-r { justify-items: start; text-align: left; }
  .f29-qa { justify-content: flex-start; }
  .sc-5.v3 { min-height: 0; height: auto; }
  .w5s { position: relative; grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr; height: 150vw; margin-top: calc(var(--hud-h) + 120px); }
  .w5-head { padding-top: calc(var(--hud-h) + 12px); }
  .w5-seam { display: none; }
  .a8 { height: auto; }
  .a8-stage { min-height: 120vw; }
  .tok { width: 30vw; }
  .tok[data-slot='C'] { --y: 34%; --s: 1.2; } .tok[data-slot='L'] { --x: 26%; --y: 52%; --s: 1; } .tok[data-slot='R'] { --x: 74%; --y: 52%; --s: 1; }
  .tok[data-slot^='A'] { --y: 78%; --s: .55; } .tok[data-slot='A0'] { --x: 12%; } .tok[data-slot='A1'] { --x: 37%; } .tok[data-slot='A2'] { --x: 63%; } .tok[data-slot='A3'] { --x: 88%; }
  .tok[data-slot^='B'] { --y: 84%; --s: .42; }
  .a8-rail, .is-cmp .a8-rail { position: relative; left: auto; bottom: auto; translate: none; width: auto; margin-top: 12px; }

  .l9-land { padding-left: 0; --ax: 0px; }
  .lane-n { position: static; translate: none; text-align: left; width: auto; display: block; }
  .lane { height: auto; padding: 4px 0 30px; }
  .lane-slab { top: auto; bottom: 8px; height: 12px; }
  .lane-floor { top: auto; bottom: 8px; }
  .lane-v { top: auto; bottom: 0; translate: 8px 0; }
  .chap-card { display: none; }
  .sc-8:not(.is-cmp) .a8-rail { width: auto; }
  .f29-b { grid-template-columns: 1fr; gap: .3em; }
  .lane-n { display: flex; gap: .6em; align-items: baseline; }
  .l9-beam b { top: auto; bottom: 0; }
  .drawer-in { left: 12px; right: 12px; width: auto; }
}

.hud .i-ic { width: 1.35em; height: 1.35em; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-family: var(--font-display); font-style: italic; font-size: .92em; line-height: 1; }
.hud [data-act='info'][aria-pressed='true'] { color: var(--lime); }
.sc-5 .drawer-in { left: auto; right: var(--px); }

/* lớp tối sau phần chữ khi phòng thử chuyển sang nền tối */
.lab::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 12, 8, .9) 0%, rgba(6, 12, 8, .72) 30%, rgba(6, 12, 8, .2) 50%, transparent 60%); opacity: 0; transition: opacity 1s var(--ease); }
.lab[data-mode='mat']::before, .lab[data-mode='anat']::before { opacity: 1; }

/* 14 · khoảnh khắc đảo thứ hạng */
.s14-flip { position: absolute; z-index: 8; left: 50%; top: 46%; translate: -50% -50%; display: grid; justify-items: center; gap: .35em; padding: 1.1em 1.8em; border-radius: 10px; background: rgba(11, 26, 20, .92); color: #EFEADC; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: scale(.94); --acc: var(--lime); --acc2: var(--brass); }
.s14-flip b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--f-h1) * 1.2); letter-spacing: -.015em; }
.s14-flip i { font-style: normal; font-size: var(--f-sm); color: #A7B5AA; }
.sc-14.is-flip .s14-flip { animation: flipCard 2.6s var(--ease) both; }
@keyframes flipCard { 0% { opacity: 0; transform: scale(.92) translate3d(0, 12px, 0); } 14% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98) translate3d(0, -8px, 0); } }
.sc-14.is-flip .s14-row.is-lead .s14-now { animation: leadPulse 1.2s var(--ease) 2; }
@keyframes leadPulse { 50% { box-shadow: 0 0 0 10px rgba(207, 224, 108, .35); } }
body.safe .sc-14.is-flip .s14-flip { animation-duration: 1.4s; }
.s15-art img.is-render { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }

/* V2 → V3: bớt chữ đọc trực tiếp, chi tiết vào ngăn nguồn hoặc hiện theo lựa chọn */
.s12-row > span.mute, .s12-hd > span:last-child { display: none; }
@media (min-width: 821px) { .s12-row { grid-template-columns: calc(var(--u) * 2.6) calc(var(--u) * 9) calc(var(--u) * 9) 1fr; } }
.kr-pts dd { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s var(--ease); }
.kr-pts .is-hot dd { max-height: 8em; opacity: 1; }
.s26-rec { opacity: .0; max-height: 0; overflow: hidden; transition: opacity .5s var(--ease), max-height .6s var(--ease); }
.s26-step[aria-pressed='true'] .s26-rec { opacity: 1; max-height: 8em; }
.kr-pts:not(:has(.is-hot)) > div:last-child dd { max-height: 8em; opacity: 1; }
/* Kraljic: ma trận đặt trên mặt phẳng có chiều sâu nhẹ; điểm có bóng đổ theo quỹ đạo */
@media (min-width: 821px) {
  .kr-mx { transform: perspective(1400px) rotateX(10deg); transform-origin: 50% 80%; transition: transform 1s var(--ease); }
  .kr-mx:hover { transform: perspective(1400px) rotateX(0deg); }
  .kr-dot { box-shadow: 0 10px 18px rgba(0, 0, 0, .35), 0 0 0 6px rgba(207, 224, 108, .25); }
}