/* THU MUA XANH · V2 — bố cục từng cảnh. Đơn vị: var(--u). */

/* ---------- Dùng chung ---------- */
.hd { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 3); }
.hd > div:first-child { display: grid; gap: calc(var(--u) * .8); min-width: 0; }
.hd-art { width: calc(var(--u) * 13); flex: none; margin: calc(var(--u) * -3) calc(var(--u) * 2) calc(var(--u) * -1) 0; }
.hd-art img { width: 100%; }
.sc-in > div:first-child:not([class]) { display: grid; gap: calc(var(--u) * .8); }
.note { font-size: var(--f-sm); color: var(--mute); border-top: 1px solid var(--line); padding-top: calc(var(--u) * .9); max-width: 70em; }
.dl { display: grid; gap: calc(var(--u) * .9); margin: 0; }
.dl dt, .kr-pts dt { font-size: var(--f-xs); font-weight: 600; color: var(--mute); margin-bottom: .15em; }
.dl dd, .kr-pts dd { margin: 0; font-size: var(--f-sm); line-height: 1.45; }
.ev-row { display: grid; grid-template-columns: calc(var(--u) * 10) 1fr; gap: 1em; font-size: var(--f-sm); align-items: baseline; }
.d { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .5em; flex: none; vertical-align: .02em; }
.d-match { background: var(--lime-deep); } .d-off { background: var(--rust); } .d-open { border: 1.5px dashed var(--mute); }
.th-dark .d-match { background: var(--lime); }
.c-lime { --c: var(--lime-deep); } .c-brass { --c: var(--brass-deep); } .c-sage { --c: #5F7D6D; } .c-moss { --c: #5E7065; } .c-plum { --c: var(--plum); }

/* Annotation (Product Lab, Material Inspection) */
.an { position: absolute; z-index: 3; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); margin: calc(var(--u) * -.65); transform: scale(calc(1 / var(--z, 1))); transition: transform 1.1s var(--ease), opacity .5s; }
.an i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--an, #0F2A22); background: rgba(250, 247, 238, .6); transition: background .3s, transform .4s var(--ease); }
.an i::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: var(--an, #0F2A22); }
.an i::before { content: ''; position: absolute; inset: -45%; border-radius: 50%; border: 1px solid var(--an, #0F2A22); opacity: 0; animation: ping 1.8s ease-out 1.2s 2; }
@keyframes ping { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
.scene:not(.is-in) .an i::before { animation: none; }
.an span { position: absolute; top: 50%; margin-top: -.75em; white-space: nowrap; font-size: var(--f-xs); font-weight: 600; color: var(--an, #0F2A22); line-height: 1.5; transition: color .3s, opacity .4s; }
.an span::before { content: ''; position: absolute; top: 50%; height: 1px; width: calc(var(--u) * 4); background: currentColor; opacity: .6; }
.an.to-r span { left: calc(var(--u) * 6.4); } .an.to-r span::before { right: calc(100% + var(--u) * .5); }
.an.to-l span { right: calc(var(--u) * 6.4); } .an.to-l span::before { left: calc(100% + var(--u) * .5); }
.an:hover i, .an.is-on i { background: var(--lime); transform: scale(1.18); }
.an:focus-visible { outline: none; } .an:focus-visible i { outline: 2px solid var(--an, #0F2A22); outline-offset: 3px; }

/* ---------- 01 · Opening ---------- */
.scene.hero { height: 220vh; height: 220svh; display: block; --bg: #0A120A; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; --p: 0; --q: 0; --mx: 0; --my: 0; }
body.present .scene.hero { height: 100%; } body.present .hero-pin { position: relative; height: 100%; }
.hero .hero-bg { background: radial-gradient(90% 80% at 12% 60%, #121a0d 0%, #0b120a 55%, #070c06 100%); z-index: 0; }
.hero-glow { position: absolute; width: calc(var(--u) * 84); height: calc(var(--u) * 84); right: calc(var(--u) * -24); top: calc(var(--u) * -36); background: radial-gradient(closest-side, rgba(214, 186, 86, .32), rgba(214, 186, 86, .08) 55%, transparent); opacity: .25; transform: translate3d(calc(var(--mx) * var(--u) * 2.4), calc(var(--my) * var(--u) * 1.6), 0) scale(.92); transition: opacity 2.4s var(--ease) .1s, transform 2.8s var(--ease) .1s; }
.hero.is-in .hero-glow { opacity: 1; transform: translate3d(calc(var(--mx) * var(--u) * 2.4), calc(var(--my) * var(--u) * 1.6), 0) scale(1); }
.hero-rim { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: radial-gradient(60% 70% at 70% 100%, rgba(196, 170, 70, .16), transparent 70%); opacity: 0; transition: opacity 2s ease .9s; }
.hero.is-in .hero-rim { opacity: 1; }
.hero-stage { position: absolute; inset: 0; z-index: 1; transform-origin: 72% 58%; transform: translate3d(calc(var(--p) * var(--u) * -15), calc(var(--p) * var(--u) * -1), 0) scale(calc(1 + var(--p) * .62)); will-change: transform; }
.hero-prod { position: absolute; right: calc(var(--u) * -4); bottom: 0; height: 94%; aspect-ratio: 1220 / 1009; transform: translate3d(calc(var(--mx) * var(--u) * -1.2), calc(var(--my) * var(--u) * -.8), 0); }
.hero-prod-in { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%), linear-gradient(180deg, transparent 0%, #000 12%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 9%), linear-gradient(180deg, transparent 0%, #000 12%); mask-composite: intersect; }
.hero-prod-in img { width: 100%; height: 100%; object-fit: cover; }
.js .hero .hero-prod-in[data-r] { transform: scale(1.12) translate3d(calc(var(--u) * 3), calc(var(--u) * 1.5), 0); filter: blur(14px) brightness(.45); transition: opacity 1.1s var(--ease) .1s, transform 2.2s var(--ease) .1s, filter 1.8s var(--ease) .1s; }
.js .hero.is-in .hero-prod-in[data-r] { transform: none; filter: none; }
.hero-copy { z-index: 2; align-content: center; justify-items: start; gap: calc(var(--u) * 1.4); transform: translate3d(calc(var(--p) * var(--u) * -24 + var(--mx) * var(--u) * .5), calc(var(--my) * var(--u) * .3), 0); opacity: calc(1 - var(--p) * 2.6); pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.mega { font-family: var(--font-display); font-weight: 330; font-size: var(--f-mega); line-height: .94; letter-spacing: -.035em; font-variation-settings: 'opsz' 144; margin: calc(var(--u) * .3) 0 calc(var(--u) * .6); }
.mega .ln > span { transition-duration: 1.2s; }
.hero-sub { font-family: var(--font-display); font-size: calc(var(--f-h2) * 1.02); line-height: 1.22; font-weight: 400; padding-top: calc(var(--u) * 1.2); border-top: 1px solid rgba(194, 160, 80, .6); max-width: 14em; }
.hero-meta { display: grid; gap: .3em; font-size: var(--f-xs); letter-spacing: .04em; color: var(--mute); }
.hero-meta span:first-child { color: var(--fg); font-weight: 600; }
.hero-cta { display: flex; gap: calc(var(--u) * 1.2); flex-wrap: wrap; align-items: center; margin-top: calc(var(--u) * .6); }
.hero-note { position: absolute; z-index: 2; right: var(--px); bottom: calc(var(--u) * 2.8); opacity: calc(1 - var(--p) * 3); }
.hero-calls { position: absolute; inset: 0; margin: 0; opacity: var(--q); pointer-events: none; }
.hero-calls li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transform: scale(calc(1 / (1 + var(--p) * .62))); }
.hero-calls li::before { content: ''; position: absolute; left: calc(var(--u) * -.4); top: calc(var(--u) * -.4); width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 calc(var(--u) * .45) rgba(207, 224, 108, .22); }
.hero-calls li::after { content: ''; position: absolute; top: 0; height: 1px; width: calc(var(--u) * 7); background: var(--lime); }
.hero-calls li.to-r::after { left: calc(var(--u) * 1); } .hero-calls li.to-l::after { right: calc(var(--u) * 1); }
.hero-calls b, .hero-calls span { position: absolute; white-space: nowrap; }
.hero-calls b { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--f-h3) * 1.1); top: -1.75em; color: #EFEADC; background: rgba(7, 16, 10, .86); padding: .12em .6em .2em; border-radius: 3px 3px 3px 0; }
.hero-calls span { font-size: var(--f-xs); top: .55em; color: #D9D2BC; background: rgba(7, 16, 10, .86); padding: .25em .7em; border-radius: 0 0 3px 3px; }
.hero-calls .to-r b, .hero-calls .to-r span { left: calc(var(--u) * 8.6); }
.hero-calls .to-l b, .hero-calls .to-l span { right: calc(var(--u) * 8.6); }
.hero.no-intro [data-r], .hero.no-intro .ln > span, .hero.no-intro .hero-glow, .hero.no-intro .hero-rim { transition-duration: .01s !important; transition-delay: 0s !important; }

/* ---------- 02 · Phạm vi đơn mẫu ---------- */
.s2 { grid-template-columns: 1fr calc(var(--u) * 30.5); gap: calc(var(--u) * 7); align-items: center; }
.s2-copy { display: grid; gap: calc(var(--u) * 1.3); }
.s2-one { display: flex; align-items: baseline; gap: calc(var(--u) * 2); }
.s2-one .num { font-size: calc(var(--f-num) * 1.3); color: var(--acc); }
.s2-spec { display: grid; grid-template-columns: auto auto auto; gap: calc(var(--u) * 3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--u) * 1.1) 0; justify-content: start; }
.s2-spec dt { font-size: var(--f-xs); color: var(--mute); font-weight: 600; }
.s2-spec dd { margin: .2em 0 0; font-family: var(--font-display); font-size: var(--f-h2); line-height: 1.15; }
.s2-read { min-height: calc(var(--u) * 8.6); display: grid; gap: calc(var(--u) * .6); align-content: start; }
.s2-photo { display: grid; gap: calc(var(--u) * .6); }
.s2-frame { position: relative; aspect-ratio: 3 / 3.95; overflow: hidden; border-radius: 4px; background: #1b241c; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .42); }
.lens-cam { position: absolute; inset: 0; transition: transform 1.1s var(--ease); --z: 1; }
.lens-cam img { width: 100%; height: 100%; object-fit: cover; }
.hs { position: absolute; width: max(calc(var(--u) * 2.2), 26px); height: max(calc(var(--u) * 2.2), 26px); margin: calc(max(var(--u) * 2.2, 26px) / -2); transform: scale(calc(1 / var(--z, 1))); transition: transform 1.1s var(--ease), opacity .4s; z-index: 2; }
.hs i { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--f-xs); font-weight: 700; color: var(--forest-900); background: var(--lime); box-shadow: 0 0 0 calc(var(--u) * .3) rgba(207, 224, 108, .28), 0 4px 14px rgba(0, 0, 0, .4); transition: transform .3s var(--ease), background .3s; }
.hs:hover i { transform: scale(1.12); } .hs.is-on i { background: #EFEADC; }
.sc-2.is-zoom .hs:not(.is-on) { opacity: 0; pointer-events: none; }
.s2-photo figcaption { display: flex; justify-content: space-between; align-items: center; }

/* ---------- 03 · Sáu câu hỏi ---------- */
.s3 { gap: calc(var(--u) * 1.6); }
.s3-head { display: grid; gap: calc(var(--u) * .8); }
.s3-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.2); border-bottom: 1px solid var(--line); }
.s3-q { display: grid; justify-items: center; gap: calc(var(--u) * .3); padding: 0 0 calc(var(--u) * 1.3); text-align: center; position: relative; opacity: .5; transition: opacity .4s; }
.s3-q::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transition: transform .5s var(--ease); }
.s3-q[aria-pressed='true'], .s3-q:hover { opacity: 1; } .s3-q[aria-pressed='true']::after { transform: none; }
.s3-art { height: calc(var(--u) * 11.5); display: grid; align-items: end; transition: transform .6s var(--ease); }
.s3-art img { max-height: calc(var(--u) * 11); width: auto; max-width: 100%; }
.s3-q[aria-pressed='true'] .s3-art { transform: translateY(calc(var(--u) * -.7)) scale(1.06); }
.s3-no { font-size: var(--f-xs); font-weight: 600; color: var(--mute); margin-top: calc(var(--u) * .5); }
.s3-ask { font-family: var(--font-display); font-size: var(--f-h3); font-weight: 420; line-height: 1.2; }
.s3-ans { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3); align-items: center; min-height: calc(var(--u) * 5.6); }
.s3-ans .lede { max-width: 48em; }

/* ---------- 04 · Product inspection ---------- */
.scene.sc-4 { --bg: #FAF4EA; }
.lab-stage, .s23-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lab-cam, .s23-cam { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78vh); aspect-ratio: 16 / 9; margin-left: calc(max(100vw, 177.78vh) / -2); margin-top: calc(max(100vw, 177.78vh) * -0.28125); transition: transform 1.2s var(--ease); --z: 1; }
.lab-cam img, .s23-cam img { width: 100%; height: 100%; object-fit: cover; }
.lab-spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent 0, transparent 7%, rgba(250, 244, 234, .62) 19%); opacity: 0; transition: opacity .7s var(--ease); }
.sc-4.is-zoom .lab-spot { opacity: 1; }
.lab-card { position: absolute; z-index: 4; display: grid; gap: .25em; padding: .55em .8em; background: var(--paper); border: 1px solid var(--line2); border-radius: 4px; box-shadow: 0 8px 24px rgba(40, 30, 0, .14); font-size: var(--f-xs); transform: translate(calc(var(--u) * 2), -50%) scale(calc(1 / var(--z, 1))); transform-origin: left center; opacity: 0; transition: opacity .35s ease .55s; pointer-events: none; white-space: nowrap; }
.lab-card.to-l { transform: translate(calc(-100% - var(--u) * 2), -50%) scale(calc(1 / var(--z, 1))); transform-origin: right center; }
.lab-card b { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: #0F2A22; }
.lab-card.is-on { opacity: 1; }
.sc-4.is-zoom .an:not(.is-on) { opacity: .18; }
.sc-4.is-zoom .an.is-on span { opacity: 0; }
.s4 { align-content: center; pointer-events: none; }
.s4-copy { width: calc(var(--u) * 33); display: grid; gap: calc(var(--u) * 1.1); position: relative; z-index: 2; }
.s4-copy > * { pointer-events: auto; }
.s4-ml { font-size: calc(var(--f-num) * 1.55); }
.lab-read { min-height: calc(var(--u) * 10); display: grid; gap: calc(var(--u) * .6); align-content: start; }
.lab-nav { display: flex; gap: calc(var(--u) * .5); align-items: center; }
.lab-pos { margin-left: .8em; }
.s4-check { display: grid; gap: .4em; }
.s4-check li { display: grid; grid-template-columns: calc(var(--u) * 8) 1fr; gap: .8em; align-items: baseline; }

/* ---------- 05 · Phân loại theo mục đích ---------- */
.scene.sc-5 { display: block; }
.s5-split { position: absolute; inset: 0; display: flex; }
.s5-half { flex: 1 1 0; position: relative; background: var(--bg); color: var(--fg); cursor: pointer; transition: flex-grow 1s var(--ease-io); overflow: hidden; display: grid; min-width: 0; }
.s5-split[data-sel='a'] .s5-a, .s5-split[data-sel='b'] .s5-b { flex-grow: 1.8; }
.s5-in { align-self: end; padding: 0 var(--px) calc(var(--u) * 7); display: grid; gap: calc(var(--u) * .9); width: calc(var(--u) * 50); max-width: 100%; }
.s5-art { width: calc(var(--u) * 19); margin: 0 calc(var(--u) * 1) calc(var(--u) * 1.4) auto; transition: transform 1s var(--ease); }
.s5-b .s5-art { margin-left: calc(var(--u) * 4); }
.s5-half:hover .s5-art { transform: translateY(calc(var(--u) * -.6)); }
.s5-t { font-size: var(--f-h1); }
.s5-more { font-size: var(--f-sm); line-height: 1.55; max-width: 36em; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .9s var(--ease), opacity .6s; color: var(--mute); }
.s5-half[aria-pressed='true'] .s5-more { max-height: calc(var(--u) * 12); opacity: 1; }
.s5-foot { color: #9DB0A2; max-width: 40em; margin-top: calc(var(--u) * .4); }
.s5-head { position: absolute; left: var(--px); top: calc(var(--hud-h) + var(--u) * 3); display: grid; gap: calc(var(--u) * .8); pointer-events: none; color: var(--fg); z-index: 2; }
.s5-seam { position: absolute; left: 50%; top: calc(var(--hud-h) + var(--u) * 3.2); transform: translateX(-50%); z-index: 3; font-size: var(--f-xs); font-weight: 600; pointer-events: none; }
.s5-seam span { background: var(--forest-900); color: #EFEADC; padding: .45em .9em; border-radius: 3px; white-space: nowrap; border: 1px solid rgba(239, 234, 220, .2); }
.scene.sc-5 .sc-src { color: #5E7065; }

/* ---------- 06–07 · Kraljic ---------- */
.kr { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--u) * 6); align-items: center; }
.kr-left { display: grid; gap: calc(var(--u) * .9); }
.kr-mx { position: relative; margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 2.4) calc(var(--u) * 4); width: calc(var(--u) * 37); }
.kr-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 37 / 21; border: 1px solid var(--line2); }
.kr-cell { position: relative; text-align: left; padding: calc(var(--u) * 1) calc(var(--u) * 1.2); display: grid; align-content: start; gap: .15em; border: .5px solid var(--line); transition: background .8s var(--ease), color .5s; }
.kr-cell b { font-size: var(--f-sm); font-weight: 700; letter-spacing: .02em; }
.kr-cell i { font-style: normal; font-size: var(--f-sm); color: var(--mute); transition: color .4s; }
.kr-cell:hover { background: var(--card); }
.kr-cell.is-on { background: var(--lime); color: var(--forest-900); } .kr-cell.is-on i { color: #3c4a23; }
.kr-grid[data-q='bottleneck'] .kr-cell.is-on { background: var(--brass); } .kr-grid[data-q='bottleneck'] .kr-cell.is-on i { color: #3d2e06; }
.kr-grid[data-q='leverage'] .kr-cell.is-on, .kr-grid[data-q='strategic'] .kr-cell.is-on { background: none; outline: 1.5px dashed var(--mute); outline-offset: -6px; color: var(--fg); }
.kr-grid[data-q='leverage'] .kr-cell.is-on i, .kr-grid[data-q='strategic'] .kr-cell.is-on i { color: var(--mute); }
.kr-dot { position: absolute; width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); margin: calc(var(--u) * -.6); border-radius: 50%; background: var(--forest-900); border: 2px solid #EFEADC; transition: left 1.1s var(--ease-io), top 1.1s var(--ease-io); pointer-events: none; transform: translate(0, calc(var(--u) * 2.2)); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.kr-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transform: translate(0, calc(var(--u) * 2.2)); }
.kr-trail line { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .55; }
.kr-ax, .kr-tk { position: absolute; font-size: var(--f-xs); color: var(--mute); white-space: nowrap; transition: color .4s, background .4s; }
.kr-ax { color: var(--fg); font-weight: 600; padding: .1em .4em; margin-left: -.4em; border-radius: 3px; }
.kr-ax.is-hot { background: var(--fill); color: var(--on-fill); }
.kr-ay { left: 0; top: calc(var(--u) * -2.3); } .kr-hi { right: calc(100% + var(--u) * .8); top: calc(var(--u) * .4); } .kr-lo { right: calc(100% + var(--u) * .8); bottom: calc(var(--u) * .4); }
.kr-xlo { left: 0; top: calc(100% + var(--u) * .7); } .kr-xhi { right: 0; top: calc(100% + var(--u) * .7); } .kr-ax-x { left: 50%; transform: translateX(-50%); top: calc(100% + var(--u) * .5); }
.kr-right { display: grid; gap: calc(var(--u) * 1.2); align-content: center; }
.kr-art { width: calc(var(--u) * 15); margin-bottom: calc(var(--u) * -.5); }
.kr-cond { display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.kr-pts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); }
.kr-pts > div { padding-left: calc(var(--u) * .9); border-left: 2px solid var(--line); transition: border-color .4s; }
.kr-pts > div.is-hot { border-left-color: var(--acc); }
.kr-pts dt { color: var(--fg); font-size: var(--f-sm); }
.kr-pts dd { color: var(--mute); }
.kr-read { display: grid; gap: calc(var(--u) * .5); min-height: calc(var(--u) * 7.2); align-content: start; border-top: 1px solid var(--line); padding-top: calc(var(--u) * 1); transition: opacity .3s; }
.kr-read.is-wait { opacity: .25; }
.kr-q { display: flex; align-items: baseline; gap: calc(var(--u) * 1.2); flex-wrap: wrap; }

/* ---------- 08 · Supplier intelligence ---------- */
.s8 { gap: calc(var(--u) * 1.3); }
.s8-head { display: flex; justify-content: space-between; align-items: flex-end; }
.s8-head > div:first-child { display: grid; gap: calc(var(--u) * .8); }
.s8-art { width: calc(var(--u) * 15); margin: calc(var(--u) * -2) calc(var(--u) * 3) calc(var(--u) * -1.5) 0; }
.s8-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 27); gap: calc(var(--u) * 3.4); align-items: start; }
.s8-tools { display: flex; align-items: center; gap: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * .7); flex-wrap: wrap; }
.s8-legend { display: flex; align-items: center; gap: .2em; flex-wrap: wrap; } .s8-legend .d { margin-left: .9em; }
.s8-row { display: grid; grid-template-columns: 1.25fr 1fr .9fr 1.5fr .7fr 1.35fr; gap: calc(var(--u) * 1.1); align-items: center; width: 100%; text-align: left; padding: calc(var(--u) * .78) calc(var(--u) * 1); border-bottom: 1px solid var(--line); font-size: var(--f-sm); line-height: 1.3; position: relative; transition: background .35s, opacity .4s; }
.s8-hd { font-size: var(--f-xs); font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line2); padding-block: calc(var(--u) * .5); }
button.s8-row:hover { background: var(--card); }
.s8-table[data-focus] button.s8-row:not([aria-pressed='true']) { opacity: .58; }
.s8-table[data-focus] button.s8-row:not([aria-pressed='true']):hover { opacity: 1; }
button.s8-row[aria-pressed='true'] { background: var(--sel); box-shadow: inset 3px 0 0 var(--acc); }
.s8-n { display: grid; } .s8-n i { font-style: normal; font-size: var(--f-xs); color: var(--mute); } .s8-n b { font-weight: 600; font-size: var(--f-body); }
.s8-c.is-off { color: var(--warn); font-weight: 600; }
.s8-fit { font-weight: 500; }
.s8-rule { margin-top: calc(var(--u) * 1); font-size: var(--f-sm); color: var(--mute); } .s8-rule b { color: var(--fg); }
.s8-detail { display: grid; gap: calc(var(--u) * .6); border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.4); align-content: start; min-height: calc(var(--u) * 27); }
.s8-vs-h span { color: var(--mute); }
.s8-vs { display: grid; border-top: 1px solid var(--line); }
.s8-vs li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 0 .8em; padding: .32em 0; border-bottom: 1px solid var(--line); font-size: var(--f-xs); align-items: baseline; }
.s8-vs li span { color: var(--mute); }
.s8-vs li i { text-align: right; max-width: 9em; }
.s8-legal { margin-top: calc(var(--u) * .4); }
.s8-detail .dl { gap: calc(var(--u) * .55); } .s8-detail .dl dd { font-size: var(--f-sm); line-height: 1.4; }
.s8-vs li b { font-weight: 600; font-size: var(--f-sm); }
.s8-vs li i { font-style: normal; color: var(--mute); }
.s8-vs li i::before { content: 'Mốc: '; }
.s8-vs li.is-off b { color: var(--warn); } .s8-vs li.is-open b { color: var(--acc2); } .s8-vs li.is-match b::after { content: ' ✓'; color: var(--acc); }
.s8-vs-base { font-size: var(--f-sm); color: var(--acc); font-weight: 600; }

/* ---------- 09 · Khoảng giá ---------- */
.s9 { gap: calc(var(--u) * 1.3); }
.s9-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 4); } .s9-head > div:first-child { display: grid; gap: calc(var(--u) * .8); }
.s9-note { font-size: var(--f-sm); color: var(--mute); max-width: 26em; text-align: right; }
.s9-tools { display: flex; gap: calc(var(--u) * 2.4); align-items: center; flex-wrap: wrap; }
.s9-plot { position: relative; padding-top: calc(var(--u) * 1.8); cursor: ew-resize; --lw: calc(var(--u) * 17); --vw: calc(var(--u) * 15); }
.s9-rwrap { position: absolute; top: 0; bottom: 0; left: var(--lw); right: var(--vw); pointer-events: none; }
.s9-ticks { position: absolute; inset: 0; }
.s9-ticks span { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); padding-left: .5em; font-size: var(--f-xs); color: var(--mute); font-variant-numeric: tabular-nums; }
.s9-ruler { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; }
.s9-ruler::before { content: ''; position: absolute; top: calc(var(--u) * 1.5); bottom: 0; border-left: 1.5px solid var(--warn); }
.s9-ruler b { position: absolute; top: calc(var(--u) * -.2); left: 0; transform: translateX(-50%); background: var(--warn); color: #fff; padding: .15em .55em; border-radius: 3px; font-size: var(--f-xs); font-weight: 600; white-space: nowrap; }
.s9-row { display: grid; grid-template-columns: var(--lw) 1fr var(--vw); align-items: center; width: 100%; text-align: left; padding: calc(var(--u) * .45) 0; border-bottom: 1px solid var(--line); transition: background .3s, opacity .4s; }
.s9-chart[data-focus] .s9-row:not([aria-pressed='true']) { opacity: .62; }
.s9-row:hover { opacity: 1 !important; }
.s9-row[aria-pressed='true'] { background: var(--sel); }
.s9-name { display: grid; padding-left: calc(var(--u) * .8); } .s9-name b { font-weight: 600; color: var(--c); } .s9-name i { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.s9-track { position: relative; height: calc(var(--u) * 1.8); }
.s9-bar { position: absolute; top: 50%; left: var(--a); width: calc(var(--b) - var(--a)); height: calc(var(--u) * .45); margin-top: calc(var(--u) * -.225); background: var(--c); border-radius: 99px; transform-origin: left; transition: transform 1s var(--ease) calc(var(--k) * 80ms + .35s), height .3s, margin .3s; }
.s9-bar::before, .s9-bar::after { content: ''; position: absolute; top: 50%; width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); margin: calc(var(--u) * -.525); border-radius: 50%; background: var(--c); }
.s9-bar::before { left: 0; } .s9-bar::after { left: 100%; }
.s9-bar.is-pt::after { display: none; }
.js .scene:not(.is-in) .s9-bar { transform: scaleX(0); transition: none; }
.s9-row.is-hit .s9-bar { height: calc(var(--u) * .8); margin-top: calc(var(--u) * -.4); }
.s9-val { text-align: right; font-weight: 600; padding-right: calc(var(--u) * .8); font-size: var(--f-sm); color: var(--c); }
.s9-range { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.s9-read { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); min-height: calc(var(--u) * 4.6); align-items: start; }
.s9-read p + p { margin-top: .25em; }

/* ---------- 10 · L = P + F ---------- */
.sc-10 .sc-bg img, .sc-15 .sc-bg img, .sc-16 .sc-bg img { opacity: .85; }
.s10 { gap: calc(var(--u) * 1.1); }
.s10-legend { display: flex; gap: .5em calc(var(--u) * 2); align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: calc(var(--u) * 46); }
.k { display: inline-block; width: 1.4em; height: .75em; margin-right: .5em; vertical-align: -.05em; background: #C9D3C3; }
.k-f { background: var(--paper); } .k-fa { background: repeating-linear-gradient(-45deg, var(--lime) 0 2px, transparent 2px 5px); outline: 1px solid var(--lime); outline-offset: -1px; }
.s10-plot { position: relative; --lw: calc(var(--u) * 17); --vw: calc(var(--u) * 10); padding-top: calc(var(--u) * 1.4); }
.s10-mwrap { position: absolute; top: 0; bottom: 0; left: var(--lw); right: var(--vw); pointer-events: none; z-index: 2; }
.s10-min { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--lime); transition: left .7s var(--ease); }
.s10-min b { position: absolute; left: .6em; top: -.15em; font-size: var(--f-xs); color: var(--lime); white-space: nowrap; font-weight: 600; }
.s10-row { display: grid; grid-template-columns: var(--lw) 1fr var(--vw); align-items: center; width: 100%; text-align: left; padding: calc(var(--u) * .38) 0; border-bottom: 1px solid var(--line); transition: background .3s, opacity .4s; }
.s10-chart[data-focus] .s10-row:not([aria-pressed='true']) { opacity: .7; }
.s10-row:hover { opacity: 1 !important; } .s10-row[aria-pressed='true'] { background: var(--sel); }
.s10-name { display: grid; padding-left: calc(var(--u) * .8); } .s10-name b { font-weight: 600; } .s10-name i { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.s10-row.is-min .s10-name b, .s10-row.is-min .s10-val { color: var(--lime); }
.s10-track { display: flex; height: calc(var(--u) * 1.8); transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--k) * 80ms + .35s); }
.js .scene:not(.is-in) .s10-track { transform: scaleX(0); transition: none; }
.s10-p { background: #C9D3C3; transition: width .7s var(--ease), background .4s; }
.s10-row.is-min .s10-p { background: var(--lime); }
.s10-f { background: var(--paper); } .s10-f.is-a { background: repeating-linear-gradient(-45deg, var(--lime) 0 2px, #1c3a2a 2px 5px); outline: 1px solid var(--lime); outline-offset: -1px; }
.s10-val { text-align: right; font-weight: 600; font-size: var(--f-h3); padding-right: calc(var(--u) * .8); }
.s10-foot { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--u) * 4); align-items: start; }
.s10-ends { display: flex; gap: .6em; flex-wrap: wrap; margin-top: .3em; }
.s10-read { min-height: calc(var(--u) * 3.8); display: grid; gap: .35em; align-content: start; border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2); }

/* ---------- 11 · TCO ---------- */
.s11 { gap: calc(var(--u) * 1.3); }
.s11-eq { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.s11-t { display: grid; gap: .45em; } .s11-t .num { font-size: calc(var(--f-num) * .66); }
.s11-op { font-family: var(--font-display); font-size: calc(var(--f-num) * .48); color: var(--mute); line-height: 1.2; }
.s11-U { border: 1.5px dashed var(--brass); border-radius: 4px; padding: calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * 1); margin-top: calc(var(--u) * -.8); color: var(--brass); }
.s11-U .num { color: var(--brass); } .s11-U sub { font-size: .5em; } .s11-U ul { color: var(--fg); display: grid; gap: .15em; margin-top: .3em; }
.s11-line { font-size: var(--f-body); color: var(--mute); max-width: 58em; } .s11-line b { color: var(--fg); font-weight: 600; }
.s11-sim { display: grid; gap: calc(var(--u) * .7); }
.s11-sim-hd { display: flex; gap: calc(var(--u) * 1.6); align-items: center; flex-wrap: wrap; } .s11-sim-hd .seg { margin-left: auto; }
.s11-track { position: relative; height: calc(var(--u) * 3.4); margin-top: calc(var(--u) * 1.3); }
.s11-zone { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 1em; font-size: var(--f-xs); font-weight: 600; overflow: hidden; white-space: nowrap; transition: width .7s var(--ease), left .7s var(--ease); }
.s11-za { left: 0; background: rgba(194, 160, 80, .16); color: var(--brass); } .s11-zb { right: 0; background: rgba(207, 224, 108, .12); color: var(--lime); justify-content: flex-end; }
.s11-thr { position: absolute; top: calc(var(--u) * -1.6); bottom: 0; border-left: 1.5px solid #EFEADC; transition: left .7s var(--ease); }
.s11-thr b { position: absolute; top: 0; left: 0; transform: translate(-50%, -30%); font-size: var(--f-xs); white-space: nowrap; background: #EFEADC; color: var(--forest-900); padding: .1em .55em; border-radius: 3px; font-weight: 600; }
.s11-track input { position: absolute; inset: 0; height: 100%; }
.s11-track input::-webkit-slider-runnable-track { background: transparent; } .s11-track input::-moz-range-track { background: transparent; } .s11-track input::-moz-range-progress { background: transparent; }
.s11-out { min-height: calc(var(--u) * 4.4); display: grid; gap: .3em; align-content: start; }

/* ---------- 12 · Thẻ điểm ---------- */
.s12 { gap: calc(var(--u) * 1.3); }
.s12-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 3.4); align-items: start; }
.s12-row { display: grid; grid-template-columns: calc(var(--u) * 2.6) calc(var(--u) * 8) calc(var(--u) * 9) 1fr 1.25fr; gap: calc(var(--u) * 1.1); align-items: center; width: 100%; text-align: left; padding: calc(var(--u) * .55) calc(var(--u) * .8); border-bottom: 1px solid var(--line); font-size: var(--f-sm); line-height: 1.3; transition: background .3s; }
.s12-hd { font-size: var(--f-xs); font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line2); }
button.s12-row:hover { background: var(--card); }
button.s12-row[aria-pressed='true'] { background: var(--sel); box-shadow: inset 3px 0 0 var(--acc); }
.s12-l { font-family: var(--font-display); font-size: var(--f-h2); line-height: 1; }
.s12-row > b { font-size: var(--f-body); font-weight: 600; }
.s12-w { display: grid; grid-template-columns: 3.2em 1fr; align-items: center; gap: .5em; font-weight: 700; font-size: var(--f-h3); font-variant-numeric: tabular-nums; }
.s12-w > i { height: calc(var(--u) * .45); background: var(--line); position: relative; } .s12-w > i > i { position: absolute; inset: 0 auto 0 0; background: currentColor; transition: width .6s var(--ease); }
.s12-formula { margin-top: calc(var(--u) * 1); font-size: var(--f-sm); }
.s12-what { margin-top: calc(var(--u) * .6); font-size: var(--f-sm); }
.s12-what summary { cursor: pointer; display: inline-flex; gap: 1em; align-items: center; font-weight: 600; list-style: none; }
.s12-what summary::-webkit-details-marker { display: none; } .s12-what summary::before { content: '+'; font-weight: 400; } .s12-what[open] summary::before { content: '−'; }
.s12-sliders { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: calc(var(--u) * 1.2); align-items: end; margin-top: calc(var(--u) * .6); }
.s12-detail { border-left: 1px solid var(--line); padding: 0 0 0 calc(var(--u) * 2.4); display: grid; gap: calc(var(--u) * .8); align-content: start; min-height: calc(var(--u) * 26); }
.s12-scale { display: grid; }
.s12-scale li { display: grid; grid-template-columns: 1.4em 1fr; gap: .2em .7em; padding: calc(var(--u) * .45) 0; border-bottom: 1px solid var(--line); font-size: var(--f-sm); line-height: 1.35; color: var(--mute); }
.s12-scale li.has { color: var(--fg); } .s12-scale li b { font-size: var(--f-body); }
.s12-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35em; } .s12-chips:empty { display: none; }
.s12-why { font-size: var(--f-sm); line-height: 1.5; padding: calc(var(--u) * .2) 0 calc(var(--u) * .2) calc(var(--u) * 1); border-left: 2px solid var(--acc); }
.s12-c { display: grid; }
.s12-c button { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr 3em; gap: .8em; align-items: center; width: 100%; padding: calc(var(--u) * .5) .4em; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--f-sm); }
.s12-c button.is-on { background: var(--sel); }
.s12-c i { height: calc(var(--u) * .6); background: var(--line); position: relative; display: block; } .s12-c i i { position: absolute; inset: 0 auto 0 0; background: var(--lime-deep); transition: width .6s var(--ease); height: auto; }

/* ---------- 13 · Kết quả mô hình ---------- */
.s13 { gap: calc(var(--u) * 1.3); }
.s13-state { display: flex; gap: .9em; align-items: center; flex-wrap: wrap; min-height: 2em; }
.s13-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: start; }
.s13-legend { display: flex; gap: .45em; flex-wrap: wrap; align-items: center; margin-bottom: calc(var(--u) * 1); } .s13-legend .cap { margin-right: .6em; }
.s13-legend .chip i { width: .75em; height: .75em; background: var(--kc); border-radius: 1px; }
.k-Q { --kc: #0F2A22; } .k-C { --kc: #5C7A3A; } .k-D { --kc: #C2A050; } .k-S { --kc: #9DB0A2; } .k-G { --kc: #BFD05A; }
.s13-rows { position: relative; height: calc(var(--u) * 4.3 * 5); }
.s13-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4.3); display: grid; grid-template-columns: 2.2em calc(var(--u) * 10.5) 1fr calc(var(--u) * 5.5); gap: calc(var(--u) * .8); align-items: center; text-align: left; transform: translateY(calc(var(--rank) * 100%)); transition: transform 1s var(--ease-io), background .3s; padding: 0 calc(var(--u) * .5); }
.s13-row:hover { background: var(--card); } .s13-row[aria-pressed='true'] { background: var(--sel); }
.s13-rk { font-size: var(--f-xs); color: var(--mute); } .s13-n { font-weight: 500; } .s13-row.is-lead .s13-n { font-weight: 700; }
.s13-track { display: flex; height: calc(var(--u) * 2.2); background: var(--card); transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--rank) * 90ms + .35s); }
.js .scene:not(.is-in) .s13-track { transform: scaleX(0); transition: none; }
.s13-track i { background: var(--kc); transition: width .8s var(--ease-io), opacity .4s; border-right: 1px solid var(--bg); }
.s13-chart[data-crit='Q'] .s13-track i:not(.k-Q), .s13-chart[data-crit='C'] .s13-track i:not(.k-C), .s13-chart[data-crit='D'] .s13-track i:not(.k-D), .s13-chart[data-crit='S'] .s13-track i:not(.k-S), .s13-chart[data-crit='G'] .s13-track i:not(.k-G) { opacity: .22; }
.s13-v { text-align: right; font-size: var(--f-h3); font-weight: 600; }
.s13-axis { display: flex; justify-content: space-between; margin: .3em calc(var(--u) * 6.8) 0 calc(var(--u) * 14.4); border-top: 1px solid var(--line); padding-top: .3em; }
.s13-side { display: grid; gap: calc(var(--u) * .7); align-content: start; border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.6); }
.s13-big { font-size: calc(var(--f-num) * 1.05); }
.s13-bigl .mute { font-weight: 400; font-size: var(--f-sm); }
.s13-calc { display: grid; gap: .5em; margin-top: calc(var(--u) * .4); }
.s13-f { font-size: var(--f-sm); line-height: 1.7; } .s13-f span { white-space: nowrap; transition: background .3s; } .s13-f .is-k { background: var(--lime); padding: .1em .3em; }
.s13-eq { font-size: var(--f-h3); } .s13-eq b { font-size: 1.3em; }

/* ---------- 14 · Live decision theatre ---------- */
.s14 { gap: calc(var(--u) * 1.2); }
.s14-state { display: flex; gap: .9em; align-items: center; flex-wrap: wrap; min-height: 2em; }
.s14-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: start; }
.s14-left { display: grid; gap: calc(var(--u) * 1.2); }
.s14-legend { display: flex; gap: calc(var(--u) * 2); align-items: center; margin-bottom: calc(var(--u) * 1.4); } .s14-legend span:last-child { margin-left: auto; }
.o { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid var(--fg); margin-right: .5em; vertical-align: -.08em; } .o.is-f { background: var(--fg); }
.s14-plot { position: relative; --lw: calc(var(--u) * 12); --vw: calc(var(--u) * 11); }
.s14-grid { position: absolute; top: calc(var(--u) * -1.2); bottom: 0; left: var(--lw); right: var(--vw); pointer-events: none; }
.s14-grid span { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); } .s14-grid i { position: absolute; top: 0; left: .4em; font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.s14-rows { position: relative; height: calc(var(--u) * 3.4 * 5); }
.s14-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 3.4); display: grid; grid-template-columns: var(--lw) 1fr var(--vw); align-items: center; border-bottom: 1px solid var(--line); transform: translateY(calc(var(--rank) * 100%)); transition: transform 1s var(--ease-io); }
.s14-n { font-weight: 500; color: var(--c); display: flex; gap: .6em; align-items: baseline; } .s14-row.is-lead .s14-n { font-weight: 700; }
.s14-rk { font-style: normal; font-size: var(--f-xs); color: var(--mute); width: 1em; }
.s14-track { position: relative; height: calc(var(--u) * 1.4); }
.s14-b, .s14-now { position: absolute; top: 50%; width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); margin: calc(var(--u) * -.575); border-radius: 50%; border: 2px solid var(--c); }
.s14-b { left: var(--base); background: var(--bg); } .s14-now { left: var(--now); background: var(--c); transition: left .9s var(--ease-io); z-index: 1; }
.s14-link { position: absolute; top: 50%; height: 0; border-top: 2px dashed var(--c); left: min(var(--base), var(--now)); width: max(var(--base) - var(--now), var(--now) - var(--base)); transition: left .9s var(--ease-io), width .9s var(--ease-io); }
.s14-v { text-align: right; font-size: var(--f-sm); font-weight: 600; } .s14-v s { color: var(--mute); font-weight: 400; margin-right: .3em; }
.s14-row.is-moved .s14-v span { background: var(--sel); padding: .05em .3em; }
.s14-why { display: grid; gap: .4em; border-top: 1px solid var(--line); padding-top: calc(var(--u) * .9); min-height: calc(var(--u) * 8); }
.s14-wrow { display: grid; grid-template-columns: calc(var(--u) * 9) calc(var(--u) * 10) 1fr; gap: 1em; align-items: center; font-size: var(--f-sm); }
.s14-deltas { display: flex; gap: .4em; flex-wrap: wrap; }
.s14-deltas i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; padding: .1em .45em; border-radius: 3px; border-left: 3px solid var(--kc); background: var(--card); font-size: var(--f-xs); transition: background .3s; }
.s14-deltas i.is-hi { background: var(--fill); color: var(--on-fill); }
.s14-deltas i.is-0 { border-left-color: var(--line); color: var(--mute); font-weight: 500; }
.s14-verdict { font-size: var(--f-body); margin-top: .2em; } .s14-verdict b { font-weight: 700; }
.s14-ctrl { display: grid; gap: calc(var(--u) * 1); border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.6); align-content: start; }
.s14-scn { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .45); }
.s14-scn button { text-align: left; padding: calc(var(--u) * .55) calc(var(--u) * .8); border: 1px solid var(--line); border-radius: 4px; display: grid; gap: .1em; transition: background .25s, color .25s, border-color .25s; }
.s14-scn b { font-size: var(--f-sm); font-weight: 600; } .s14-scn i { font-style: normal; font-size: var(--f-xs); color: var(--mute); }
.s14-scn button:hover { border-color: var(--line2); background: var(--card); }
.s14-scn button[aria-pressed='true'] { background: var(--forest-800); color: #EFEADC; border-color: var(--forest-800); } .s14-scn button[aria-pressed='true'] i { color: #B8C6BB; }
.s14-concl { display: flex; gap: 1.2em; align-items: baseline; background: var(--forest-800); color: #EFEADC; padding: calc(var(--u) * .8) calc(var(--u) * 1.4); font-size: var(--f-sm); line-height: 1.5; opacity: 0; transform: translateY(calc(var(--u) * .6)); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.s14-concl b { color: var(--lime); white-space: nowrap; }
.sc-14.show-concl .s14-concl { opacity: 1; transform: none; }
.sc-14.show-cause .s14-deltas i { box-shadow: 0 0 0 1px var(--kc); }

/* ---------- 15 · Kết luận hồi cứu ---------- */
.s15 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 5); align-items: center; }
.s15-l { display: grid; gap: calc(var(--u) * .8); }
.s15-name { font-family: var(--font-ui); font-weight: 700; font-size: var(--f-h2); letter-spacing: .06em; text-transform: uppercase; }
.s15-num { font-size: calc(var(--f-num) * 1.75); color: var(--acc); margin-top: calc(var(--u) * -.3); }
.s15-why { display: grid; margin-top: calc(var(--u) * .8); }
.s15-why li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 1em; padding: calc(var(--u) * .8) 0; border-top: 1px solid var(--line); align-items: baseline; font-size: calc(var(--f-body) * 1.05); }
.s15-why li b { color: var(--brass); font-weight: 600; }
.s15-r { display: grid; gap: calc(var(--u) * 1); }
.s15-art { width: calc(var(--u) * 34); margin: calc(var(--u) * -2) auto 0; }
.s15-chips { margin-top: .4em; }
.s15-verdict { margin-top: calc(var(--u) * .8); min-height: calc(var(--u) * 7.5); display: grid; gap: .5em; align-content: start; }

/* ---------- 16 · Waterfall ---------- */
.s16 { gap: calc(var(--u) * 1.2); }
.s16-top { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 4); align-items: start; }
.s16-top > div:first-child { display: grid; gap: calc(var(--u) * .8); }
.s16-paid { text-align: right; display: grid; justify-items: end; gap: .3em; }
.s16-paid .num { font-size: calc(var(--f-num) * .95); }
.s16-ev { margin-top: .5em; display: grid; justify-items: end; gap: .35em; max-width: calc(var(--u) * 26); }
.s16-ev img { height: calc(var(--u) * 2.5); width: auto; border-radius: 3px; }
.s16-chart { position: relative; height: calc(var(--u) * 19); padding-left: calc(var(--u) * 4); margin-top: calc(var(--u) * .6); }
.s16-y { position: absolute; left: 0; top: 0; bottom: calc(var(--u) * 2.6); width: 100%; pointer-events: none; }
.s16-y span { position: absolute; left: 0; right: 0; transform: translateY(50%); border-bottom: 1px solid var(--line); line-height: 1; padding-bottom: .15em; }
.s16-y em { position: absolute; left: 0; top: calc(var(--u) * -2.2); font-style: normal; font-weight: 600; }
.s16-cols { position: relative; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 2.2); padding-bottom: calc(var(--u) * 2.6); }
.s16-col { position: relative; height: 100%; transition: opacity .45s; }
.s16-cols.has-focus .s16-col:not([aria-pressed='true']) { opacity: .45; }
.s16-col:hover { opacity: 1 !important; }
.s16-bar { position: absolute; left: 0; right: 0; bottom: var(--lo); height: var(--h); background: #C9D3C3; transform-origin: bottom; transition: transform .75s var(--ease) calc(var(--k) * 300ms + .35s), filter .3s; }
.s16-col.is-neg .s16-bar { background: var(--lime); transform-origin: top; } .s16-col.is-pos .s16-bar { background: #8FA595; }
.s16-col.is-total .s16-bar { background: var(--paper); } .s16-col.is-paid .s16-bar { background: var(--lime); }
.js .scene:not(.is-in) .s16-bar { transform: scaleY(0); transition: none; }
.s16-link { position: absolute; left: 100%; width: calc(var(--u) * 2.2); bottom: var(--to); border-top: 1px dashed #9DB0A2; transform-origin: left; transition: transform .35s linear calc(var(--k) * 300ms + .95s); }
.js .scene:not(.is-in) .s16-link { transform: scaleX(0); transition: none; }
.s16-v { position: absolute; left: 0; right: 0; bottom: calc(var(--lo) + var(--h) + var(--u) * .4); text-align: center; font-size: var(--f-h3); font-weight: 600; transition: opacity .5s calc(var(--k) * 300ms + .7s); }
.s16-col.is-neg .s16-v, .s16-col.is-paid .s16-v { color: var(--lime); }
.s16-cum { position: absolute; left: 0; right: 0; bottom: calc(var(--lo) - var(--u) * 1.5); text-align: center; font-size: var(--f-xs); color: var(--mute); transition: opacity .5s calc(var(--k) * 300ms + .9s); }
.s16-col.is-pos .s16-cum { bottom: calc(var(--lo) + var(--h) - var(--u) * 1.5); color: var(--forest-900); }
.js .scene:not(.is-in) .s16-v, .js .scene:not(.is-in) .s16-cum { opacity: 0; transition: none; }
.s16-lab { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -2.3); text-align: center; font-size: var(--f-sm); white-space: nowrap; transition: color .3s; }
.s16-col[aria-pressed='true'] .s16-lab { color: var(--lime); }
.sc-16.is-stepped .s16-bar, .sc-16.is-stepped .s16-link, .sc-16.is-stepped .s16-v, .sc-16.is-stepped .s16-cum { transition-delay: 0s; }
.s16-col.is-hid { pointer-events: none; }
.s16-col.is-hid .s16-bar { transform: scaleY(0) !important; }
.s16-col.is-hid .s16-link { transform: scaleX(0) !important; }
.s16-col.is-hid .s16-v, .s16-col.is-hid .s16-cum, .s16-col.is-hid .s16-lab { opacity: 0 !important; }
.s16-foot { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2.4); align-items: center; border-top: 1px solid var(--line); padding-top: calc(var(--u) * .9); margin-top: calc(var(--u) * .3); }
.s16-formula { font-size: var(--f-sm); white-space: nowrap; } .s16-formula span { padding: .1em .25em; transition: background .3s, color .3s; } .s16-formula .is-on { background: var(--lime); color: var(--forest-900); }
.s16-read { font-size: var(--f-sm); min-height: 3em; display: grid; align-items: center; }

/* ---------- 17 · Voucher ---------- */
.s17 { gap: calc(var(--u) * 1.6); }
.s17-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 4.5); align-items: start; }
.s17-bars { display: grid; gap: calc(var(--u) * 1.8); }
.s17-row { display: grid; grid-template-columns: calc(var(--u) * 21) 1fr; gap: .2em calc(var(--u) * 2); align-items: end; }
.s17-row .num { font-size: calc(var(--f-num) * .82); transition: opacity .4s; }
.s17-row > .mute { padding-bottom: .5em; line-height: 1.35; }
.s17-track { grid-column: 1 / -1; display: flex; height: calc(var(--u) * 2.4); transform-origin: left; transition: transform 1.1s var(--ease) .4s; }
.js .scene:not(.is-in) .s17-track { transform: scaleX(0); transition: none; }
.s17-fill { background: var(--forest-800); }
.s17-gap { position: relative; border: 1.5px dashed var(--brass-deep); border-left: 0; background: repeating-linear-gradient(-45deg, rgba(135, 102, 26, .26) 0 2px, transparent 2px 6px); transition: background .5s; }
.s17-gap b { position: absolute; right: 0; bottom: calc(100% + .3em); color: var(--brass-deep); font-size: var(--f-h3); white-space: nowrap; }
.s17-bars.no-vou .s17-gap { background: var(--forest-800); border-color: var(--forest-800); }
.s17-bars.no-vou .s17-b .num, .s17-bars:not(.no-vou) .s17-a .num { opacity: .42; }
.s17-ctrl { display: grid; gap: calc(var(--u) * 1.3); border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.6); }
.s17-okout { font-size: var(--f-body); } .s17-okout b { font-size: var(--f-h3); }

/* ---------- 18 · Đã giao ---------- */
.scene.sc-18 { display: block; }
.s18-split { position: absolute; inset: 0; display: grid; grid-template-columns: 61.5% 1fr; }
.s18-l, .s18-r { background: var(--bg); color: var(--fg); position: relative; display: grid; min-width: 0; }
.s18-lin { padding: calc(var(--hud-h) + var(--u) * 2.6) calc(var(--u) * 5) calc(var(--u) * 5.6) var(--px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(var(--u) * .9) calc(var(--u) * 3.4); align-content: center; }
.s18-lin .h1 { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.s18-fig { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: grid; gap: .5em; }
.s18-fig img { border-radius: 6px; box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3.4) rgba(40, 30, 0, .14); }
.s18-lin .eyebrow { grid-column: 1 / -1; margin-top: calc(var(--u) * 1.8); }
.s18-claims { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 2); }
.s18-claims button { display: flex; align-items: center; gap: .7em; width: 100%; padding: .55em .2em; border-bottom: 1px solid var(--line); font-size: var(--f-sm); text-align: left; transition: background .25s; }
.s18-claims i { width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8em; flex: none; }
.s18-claims .is-ok i { background: var(--lime); color: var(--forest-900); } .s18-claims .is-no i { border: 1.5px dashed var(--rust); color: var(--rust); }
.s18-claims button:hover { background: var(--card); } .s18-claims button[aria-pressed='true'] { background: var(--sel); box-shadow: inset 3px 0 0 var(--acc); }
.s18-rin { padding: calc(var(--hud-h) + var(--u) * 2.6) var(--px) calc(var(--u) * 5.6) calc(var(--u) * 4); display: grid; align-content: center; gap: calc(var(--u) * .5); }
.s18-d { font-size: calc(var(--f-num) * 1.3); font-weight: 600; font-family: var(--font-ui); letter-spacing: -.05em; margin-top: calc(var(--u) * 1); }
.s18-y { font-size: calc(var(--f-num) * 1.05); color: var(--acc); }
.s18-read { margin-top: calc(var(--u) * 1.6); min-height: calc(var(--u) * 13); display: grid; gap: .4em; align-content: start; }

/* ---------- 19 · Evidence journey ---------- */
.s19-bg img { object-position: 70% 50%; opacity: .55; }
.s19-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07100a 0%, rgba(7, 16, 10, .9) 50%, rgba(7, 16, 10, .62) 100%); }
.s19 { gap: calc(var(--u) * 1.3); }
.s19-lock { display: grid; justify-items: end; gap: .2em; text-align: right; }
.s19-lanes { position: relative; display: grid; gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * .8); }
.s19-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.s19-links path { fill: none; stroke-width: 1.6; }
.s19-links .rel-ok { stroke: var(--lime); stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.s19-links .rel-draft { stroke: var(--brass); stroke-dasharray: 5 4; animation: fadeIn .5s forwards; opacity: 0; }
.s19-links .rel-gap { stroke: var(--rust-soft); stroke-dasharray: 2 5; animation: fadeIn .5s forwards; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }
.s19-lane { display: grid; grid-template-columns: calc(var(--u) * 11) 1fr; position: relative; align-items: start; z-index: 1; }
.s19-ll { font-size: var(--f-sm); font-weight: 600; color: var(--brass); line-height: 1.3; }
.s19-nodes { display: grid; grid-template-columns: repeat(5, 1fr); }
.s19-node { text-align: left; display: grid; gap: .2em; padding-right: calc(var(--u) * 1); position: relative; align-content: start; transition: opacity .4s; }
.s19-lanes.has-focus .s19-node:not([aria-pressed='true']):not(.is-rel) { opacity: .4; }
.s19-node:hover { opacity: 1 !important; }
.s19-dot { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; background: var(--forest-900); border: 1.5px solid #EFEADC; position: relative; z-index: 1; transition: transform .4s var(--ease), box-shadow .3s; margin-bottom: calc(var(--u) * .6); }
.st-ok .s19-dot { background: var(--lime); border-color: var(--lime); } .st-wait .s19-dot { border-color: var(--rust-soft); border-style: dashed; }
.st-draft .s19-dot { border-radius: 2px; border-color: var(--brass); border-style: dashed; } .st-none .s19-dot { border-style: dashed; border-color: var(--rust-soft); }
.s19-node b { font-size: calc(var(--f-h3) * 1.2); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; transition: color .3s; justify-self: start; }
.s19-node span { font-size: var(--f-sm); color: var(--mute); line-height: 1.3; }
.st-none span, .st-wait span { color: var(--rust-soft); }
.s19-node[aria-pressed='true'] .s19-dot { transform: scale(1.45); box-shadow: 0 0 0 calc(var(--u) * .4) rgba(207, 224, 108, .22); }
.s19-node[aria-pressed='true'] b { color: var(--lime); }
.s19-detail { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3); align-items: start; }
.s19-d { display: grid; gap: .45em; min-height: calc(var(--u) * 11); align-content: start; } .s19-d .lede { max-width: 52em; }
.s19-dh { display: flex; align-items: baseline; gap: calc(var(--u) * 1.4); }
.s19-rels { display: flex; flex-wrap: wrap; gap: .3em 1.6em; font-size: var(--f-sm); }
.s19-rels li { display: flex; align-items: center; gap: .5em; }
.s19-rels i { width: 1.6em; height: 0; border-top: 2px solid var(--lime); }
.s19-rels .rel-draft i { border-top: 2px dashed var(--brass); } .s19-rels .rel-gap i { border-top: 2px dotted var(--rust-soft); }
.s19-rels span { color: var(--mute); }
.s19-nav { display: flex; align-items: center; gap: .8em; }

/* ---------- 20 · Three-way match ---------- */
.s20 { gap: calc(var(--u) * 1.4); }
.s20-body { display: grid; grid-template-columns: calc(var(--u) * 19) minmax(0, 1fr); gap: calc(var(--u) * 3.4); align-items: start; }
.s20-fields { display: grid; } .s20-fields .eyebrow { margin-bottom: calc(var(--u) * .5); }
.s20-fields button { text-align: left; padding: calc(var(--u) * .66) calc(var(--u) * 1); border-bottom: 1px solid var(--line); font-size: var(--f-sm); font-weight: 500; transition: background .25s; }
.s20-fields button:hover { background: var(--card); } .s20-fields button[aria-pressed='true'] { background: var(--sel); box-shadow: inset 3px 0 0 var(--acc); }
.s20-docs { display: grid; grid-template-columns: 1fr calc(var(--u) * 4) 1fr calc(var(--u) * 4) 1fr; align-items: start; }
.s20-doc { background: var(--paper); border: 1px solid var(--line); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); display: grid; gap: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(60, 45, 10, .09); transform: rotate(calc((var(--k) - 1) * -.5deg)); min-height: calc(var(--u) * 19); align-content: start; }
.s20-doc header { display: grid; gap: .3em; border-bottom: 2px solid var(--fg); padding-bottom: calc(var(--u) * .6); } .d-gr header, .d-inv header { border-color: var(--rust); }
.s20-doc h3 { font-size: var(--f-h1); font-weight: 700; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; font-family: var(--font-ui); justify-self: start; }
.d-gr, .d-inv { background: repeating-linear-gradient(-45deg, var(--paper) 0 10px, #F4EFE2 10px 12px); }
.s20-slot { min-height: calc(var(--u) * 5.4); display: grid; align-items: center; }
.s20-has b { font-size: var(--f-h3); font-weight: 600; background: var(--lime); padding: .2em .5em; }
.s20-miss { border: 1.5px dashed var(--rust); padding: .6em .8em; font-size: var(--f-sm); line-height: 1.35; display: grid; gap: .2em; color: var(--rust); background: var(--paper); } .s20-miss span { font-size: var(--f-xs); font-weight: 700; }
.s20-na { font-size: var(--f-xs); color: var(--mute); }
.s20-doc ul { display: grid; gap: .25em; }
.s20-link { align-self: start; margin-top: calc(var(--u) * 9.4); height: 0; border-top: 2px solid var(--fg); position: relative; transition: border-color .4s; }
.s20-link i { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); display: grid; place-items: center; font-style: normal; font-size: var(--f-xs); font-weight: 700; }
.s20-link.is-ok { border-color: var(--lime-deep); } .s20-link.is-ok i { border-color: var(--lime-deep); background: var(--lime); } .s20-link.is-ok i::after { content: '='; }
.s20-link.is-miss { border-top-style: dashed; border-color: var(--rust); } .s20-link.is-miss i { border-color: var(--rust); color: var(--rust); } .s20-link.is-miss i::after { content: '?'; }
.s20-link.is-na { border-top-style: dotted; border-color: var(--line2); } .s20-link.is-na i { border-color: var(--line2); color: var(--mute); } .s20-link.is-na i::after { content: '–'; }
.s20-verdict { background: var(--forest-800); color: #EFEADC; padding: calc(var(--u) * .9) calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * 2); align-items: baseline; flex-wrap: wrap; font-size: var(--f-sm); }
.s20-verdict b { font-size: var(--f-body); } .s20-vt { color: var(--lime); margin-left: auto; }

/* ---------- 21 · Ngoại lệ ---------- */
.s21 { gap: calc(var(--u) * 1.8); }
.s21-body { display: grid; gap: calc(var(--u) * 2); }
.s21-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line2); }
.s21-tabs button { text-align: left; padding: calc(var(--u) * .9) calc(var(--u) * 1.2); display: grid; gap: .1em; transition: background .25s; position: relative; }
.s21-tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.s21-tabs i { font-style: normal; font-size: var(--f-xs); color: var(--mute); } .s21-tabs b { font-size: var(--f-h3); font-weight: 600; }
.s21-tabs button:hover { background: var(--card); } .s21-tabs button[aria-pressed='true']::after { transform: none; } .s21-tabs button[aria-pressed='true'] i { color: var(--acc); }
.s21-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr auto 1.25fr; align-items: stretch; gap: calc(var(--u) * 1.2); min-height: calc(var(--u) * 13); }
.s21-st { border-top: 2px solid var(--fg); padding-top: calc(var(--u) * 1); display: grid; gap: calc(var(--u) * .7); align-content: start; animation: swapIn .55s var(--ease) both; animation-delay: calc(var(--k) * 130ms); }
.s21-tx { font-family: var(--font-display); font-size: var(--f-h2); line-height: 1.22; font-weight: 400; }
.s21-st.is-issue { border-color: var(--rust); } .s21-st.is-issue .s21-tx { color: var(--rust); }
.s21-st.is-out { border-color: var(--lime-deep); background: linear-gradient(180deg, rgba(207, 224, 108, .3), transparent 70%); padding-inline: calc(var(--u) * 1); }
.s21-arrow { align-self: start; margin-top: calc(var(--u) * 3.4); width: calc(var(--u) * 3); height: 1.5px; background: var(--fg); position: relative; }
.s21-arrow::after { content: ''; position: absolute; right: 0; top: 50%; width: .6em; height: .6em; border-top: 1.5px solid var(--fg); border-right: 1.5px solid var(--fg); transform: translateY(-50%) rotate(45deg); }

/* ---------- 22 · Mở kiện ---------- */
.s22 { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 34); gap: calc(var(--u) * 6); align-items: center; }
.s22-copy { display: grid; gap: calc(var(--u) * 1.3); }
.s22-parts { display: grid; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * .4); }
.s22-read { display: grid; gap: calc(var(--u) * .6); min-height: calc(var(--u) * 7); align-content: start; }
.s22-view { position: relative; aspect-ratio: 37 / 45; overflow: hidden; border-radius: 4px; cursor: ew-resize; --x: 100%; user-select: none; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .42); }
.s22-img { position: absolute; inset: 0; } .s22-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.s22-out { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.s22-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--lime); }
.s22-handle i { position: absolute; top: 50%; left: 50%; width: calc(var(--u) * 3); height: calc(var(--u) * 3); min-width: 34px; min-height: 34px; margin: calc(max(var(--u) * 3, 34px) / -2); border-radius: 50%; background: var(--lime); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.s22-handle i::before, .s22-handle i::after { content: ''; position: absolute; top: 50%; width: .5em; height: .5em; border-top: 2px solid var(--forest-900); border-left: 2px solid var(--forest-900); }
.s22-handle i::before { left: 24%; transform: translateY(-50%) rotate(-45deg); } .s22-handle i::after { right: 24%; transform: translateY(-50%) rotate(135deg); }
.s22-view.is-smooth .s22-out { transition: clip-path 1.2s var(--ease-io); } .s22-view.is-smooth .s22-handle { transition: left 1.2s var(--ease-io); }
.s22-view figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 1.2) calc(var(--u) * 1); background: linear-gradient(0deg, rgba(7, 16, 10, .92), transparent); pointer-events: none; }
.s22-view figcaption > span { display: flex; gap: .7em; align-items: center; }
.s22-view figcaption .num { font-size: var(--f-h1); color: var(--lime); }
.s22-view figcaption span span { display: grid; font-size: var(--f-xs); line-height: 1.35; color: #D9D2BC; } .s22-view figcaption span span b { font-size: var(--f-sm); color: #EFEADC; }
.s22-range { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- 23 · Material inspection ---------- */
.scene.sc-23 { --bg: #08100a; }
.s23-cam .an { --an: #EFEADC; } .s23-cam .an i { background: rgba(7, 16, 10, .5); } .s23-cam .an span { text-shadow: 0 1px 8px rgba(0, 0, 0, .9); font-size: var(--f-sm); }
.s23-cam .an.is-on i, .s23-cam .an:hover i { background: var(--lime); } .s23-cam .an.is-on i::after { background: var(--forest-900); }
.sc-23.is-zoom .s23-cam .an:not(.is-on) { opacity: .25; }
.s23-cam .an.is-low:not(.is-on):not(:hover) span { opacity: 0; }
.s23-cam .an span { transition: opacity .3s; }
.s23-lens { position: absolute; left: 0; top: 0; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; border: 1.5px solid rgba(239, 234, 220, .85); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .55); background-repeat: no-repeat; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 4; }
.s23-lens.is-on { opacity: 1; }
.s23-shade { transition: background .8s var(--ease); }
.sc-23.is-zoom .s23-shade { background: linear-gradient(90deg, rgba(7, 16, 10, .9) 0%, rgba(7, 16, 10, .55) 36%, rgba(7, 16, 10, .1) 60%), linear-gradient(0deg, rgba(7, 16, 10, .97) 0%, rgba(7, 16, 10, .9) 30%, rgba(7, 16, 10, .35) 50%, transparent 62%); }
.sc-23.is-zoom .s23-lens { display: none; }
.s23-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 16, 10, .8) 0%, rgba(7, 16, 10, .25) 34%, transparent 55%), linear-gradient(0deg, rgba(7, 16, 10, .95) 0%, rgba(7, 16, 10, .72) 24%, transparent 44%); }
.s23 { align-content: space-between; min-height: 100vh; min-height: 100svh; pointer-events: none; z-index: 2; }
body.present .s23 { min-height: 100%; height: 100%; }
.s23 > * { pointer-events: auto; }
.s23-top { display: grid; gap: calc(var(--u) * 1); width: calc(var(--u) * 34); pointer-events: none; }
.s23-top .h1 { font-size: calc(var(--f-h1) * 1.4); }
.s23-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .7) calc(var(--u) * 3); }
.s23-pick { grid-column: 1 / -1; margin-bottom: calc(var(--u) * .5); }
.s23-c { display: grid; gap: .45em; align-content: start; min-height: calc(var(--u) * 6.2); }
.s23-c p:last-child { font-size: var(--f-body); line-height: 1.45; }
.s23-note { margin-bottom: calc(var(--u) * .4); }

/* ---------- 24 · QueenPack ---------- */
.s24 { gap: calc(var(--u) * 1.2); }
.hd-art.s24-art { width: calc(var(--u) * 24); margin-right: calc(var(--u) * 6); margin-bottom: calc(var(--u) * -2); }
.s24-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 4.5); align-items: end; }
.s24-two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
.s24-m { display: grid; gap: .3em; }
.s24-code { font-weight: 700; font-size: var(--f-sm); }
.s24-price { display: flex; align-items: baseline; gap: 1em; } .s24-price .num { font-size: calc(var(--f-num) * .72); }
.s24-bar { display: flex; height: calc(var(--u) * 1); margin: .3em 0; }
.s24-bar i { background: #C9D3C3; transition: width .7s var(--ease-io); } .s24-bar em { background: var(--lime); transition: width .7s var(--ease-io); }
.s24-res { display: grid; gap: .35em; border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.6); }
.s24-res .num { font-size: calc(var(--f-num) * 1.2); }
.s24-diff { font-size: var(--f-body); margin-top: .3em; } .s24-diff b { color: var(--lime); font-size: 1.12em; }
.s24-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 3); align-items: end; }
.s24-toggles { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; }

/* ---------- 25 · Hai cặp giá ---------- */
.s25 { gap: calc(var(--u) * 1.1); }
.s25-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: start; }
.s25-cards { display: grid; }
.s25-card { display: grid; grid-template-columns: 1fr auto; gap: .1em calc(var(--u) * 2); text-align: left; padding: calc(var(--u) * .8) calc(var(--u) * 1.2); border-top: 1px solid var(--line); transition: background .3s; position: relative; }
.s25-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc); transform: scaleY(0); transition: transform .5s var(--ease); }
.s25-card[aria-pressed='true'] { background: var(--card); } .s25-card[aria-pressed='true']::before { transform: none; }
.p-qp { --pc: #0F2A22; } .p-hp { --pc: var(--brass-deep); }
.s25-card > * { grid-column: 1; }
.s25-n { font-size: var(--f-body); font-weight: 700; color: var(--pc); }
.s25-ft { display: flex; gap: .2em 1em; align-items: baseline; flex-wrap: wrap; } .s25-ft b { font-size: calc(var(--f-h2) * .82); font-weight: 700; white-space: nowrap; } .s25-ft i { font-style: normal; }
.s25-pct { grid-column: 2; grid-row: 1 / span 5; display: grid; justify-items: end; align-content: center; gap: .2em; }
.s25-pct .num { font-size: calc(var(--f-num) * .68); } .s25-pct i { font-style: normal; color: var(--warn); font-weight: 600; font-size: var(--f-sm); }
.s25-slope { display: grid; gap: calc(var(--u) * .6); align-self: center; }
.s25-slope svg { width: 100%; height: auto; max-height: calc(var(--u) * 19.5); overflow: visible; }
.s25-slope .ax line { stroke: var(--line); stroke-width: 1; } .s25-slope .ax .v { stroke: var(--fg); opacity: .5; }
.s25-slope text { font-family: var(--font-ui); font-size: 11px; fill: var(--mute); }
.s25-slope .sl line { stroke: var(--pc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .5s, opacity .4s; }
.js .scene:not(.is-in) .s25-slope .sl line { stroke-dashoffset: 1; transition: none; }
.s25-slope .sl circle { fill: var(--pc); } .s25-slope .sl text { fill: var(--pc); font-weight: 600; font-size: 11.5px; }
.s25-slope .sl { transition: opacity .4s; }
.s25-slope[data-sel='qp'] .sl.p-hp, .s25-slope[data-sel='hp'] .sl.p-qp { opacity: .3; }
.s25-read { font-size: var(--f-sm); line-height: 1.5; min-height: 4.6em; border-top: 1px solid var(--line); padding-top: calc(var(--u) * .8); }
.s25-warn { background: var(--forest-800); color: #EFEADC; padding: calc(var(--u) * .8) calc(var(--u) * 1.4); font-size: var(--f-sm); font-weight: 500; }

/* ---------- 26 · Hướng mua xanh ---------- */
.s26 { gap: calc(var(--u) * 1.5); }
.s26-art { width: calc(var(--u) * 16); }
.s26-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 2.2); }
.s26-line { position: absolute; left: calc(var(--u) * .55); right: calc(25% - var(--u) * 1.1); top: calc(var(--u) * .55); height: 1.5px; background: var(--line); }
.s26-line i { position: absolute; inset: 0 auto 0 0; background: var(--lime); transition: width .8s var(--ease); }
.s26-step { text-align: left; display: grid; gap: calc(var(--u) * .6); align-content: start; position: relative; opacity: .6; transition: opacity .4s; }
.s26-step:hover, .s26-step[aria-pressed='true'], .s26-step.is-past { opacity: 1; }
.s26-dot { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border-radius: 50%; border: 1.5px solid var(--lime); background: var(--bg); position: relative; z-index: 1; transition: background .3s, transform .4s var(--ease), box-shadow .3s; margin-bottom: calc(var(--u) * .5); }
.s26-step.is-past .s26-dot, .s26-step[aria-pressed='true'] .s26-dot { background: var(--lime); }
.s26-step[aria-pressed='true'] .s26-dot { transform: scale(1.4); box-shadow: 0 0 0 calc(var(--u) * .4) rgba(207, 224, 108, .22); }
.s26-hd { display: flex; gap: .8em; align-items: baseline; } .s26-hd .h3 { font-family: var(--font-display); font-size: var(--f-h2); font-weight: 400; }
.s26-rec { font-size: var(--f-sm); line-height: 1.5; min-height: 4.5em; }
.s26-dec { font-size: var(--f-sm); font-weight: 600; border-top: 1px solid var(--line); padding-top: calc(var(--u) * .6); line-height: 1.35; }
.s26-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(var(--u) * 4); align-items: start; }
.s26-more { display: grid; gap: .5em; min-height: calc(var(--u) * 7); align-content: start; }
.s26-log { display: flex; flex-wrap: wrap; gap: .3em 1.2em; } .s26-log li::before { content: '· '; color: var(--lime); }

/* ---------- 27 · Evidence completeness ---------- */
.s27 { gap: calc(var(--u) * 1.4); }
.s27-real { display: grid; justify-items: end; gap: .25em; text-align: right; } .s27-real b { font-family: var(--font-display); font-size: var(--f-h2); font-weight: 400; }
.s27-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: start; }
.s27-gh { margin-bottom: calc(var(--u) * .5); display: flex; gap: 1em; align-items: baseline; }
.s27-gap { display: grid; grid-template-columns: auto 1fr calc(var(--u) * 13); gap: calc(var(--u) * 1.6); align-items: center; padding: calc(var(--u) * .95) 0; border-top: 1px solid var(--line); transition: background .4s; }
.s27-gap.is-on { background: repeating-linear-gradient(-45deg, rgba(135, 102, 26, .1) 0 2px, transparent 2px 7px); }
.s27-sw { width: calc(var(--u) * 3.4); min-width: 44px; height: calc(var(--u) * 1.9); min-height: 24px; border-radius: 999px; border: 1.5px solid var(--line2); position: relative; transition: background .3s, border-color .3s; margin-left: calc(var(--u) * .6); }
.s27-sw i { position: absolute; top: 50%; left: 3px; width: calc(var(--u) * 1.3); min-width: 16px; height: calc(var(--u) * 1.3); min-height: 16px; margin-top: calc(max(var(--u) * 1.3, 16px) / -2); border-radius: 50%; background: var(--mute); transition: left .35s var(--ease), background .3s; }
.s27-sw[aria-checked='true'] { border: 1.5px dashed var(--brass-deep); background: rgba(194, 160, 80, .18); } .s27-sw[aria-checked='true'] i { left: calc(100% - max(var(--u) * 1.3, 16px) - 3px); background: var(--brass-deep); }
.s27-who { display: grid; gap: .15em; text-align: right; padding-right: calc(var(--u) * .6); }
.s27-board { border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.6); display: grid; gap: calc(var(--u) * .9); align-content: start; }
.s27-board ul { display: grid; }
.s27-board li { display: grid; grid-template-columns: auto 1fr; gap: 1em; padding: calc(var(--u) * .7) 0; border-bottom: 1px solid var(--line); align-items: start; opacity: .55; transition: opacity .4s; }
.s27-board li > i { width: 1.4em; height: 1.4em; border-radius: 50%; border: 1.5px dashed var(--mute); display: grid; place-items: center; font-style: normal; margin-top: .1em; transition: all .4s var(--ease); }
.s27-board li div { display: grid; gap: .1em; } .s27-board li b { font-weight: 600; }
.s27-board li.is-open { opacity: 1; } .s27-board li.is-open > i { border: 1.5px dashed var(--brass-deep); background: rgba(194, 160, 80, .25); } .s27-board li.is-open > i::after { content: '◐'; font-size: .75em; color: var(--brass-deep); }
.s27-req { display: flex; gap: .3em 1em; flex-wrap: wrap; font-size: var(--f-xs); margin-top: .2em; }
.s27-req i { font-style: normal; } .s27-req .is-miss { color: var(--warn); } .s27-req .is-sim { color: var(--acc2); }
.s27-sim { font-size: var(--f-sm); display: flex; gap: .7em; align-items: center; flex-wrap: wrap; }

/* ---------- 28 · Tám người ---------- */
.s28 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: calc(var(--u) * 6); align-items: center; }
.s28-l { display: grid; gap: calc(var(--u) * 1); }
.s28-art { width: calc(var(--u) * 18); margin: calc(var(--u) * .5) 0; }
.s28-read { display: grid; gap: .6em; min-height: calc(var(--u) * 12.5); align-content: start; }
.s28-go { display: flex; gap: .5em; flex-wrap: wrap; }
.s28-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 0 calc(var(--u) * 3); }
.s28-list button { display: grid; grid-template-columns: 2.4em 1fr; gap: .4em; width: 100%; text-align: left; padding: calc(var(--u) * 1.1) calc(var(--u) * .6); border-top: 1px solid var(--line); transition: background .3s; align-items: baseline; }
.s28-list i { font-style: normal; color: var(--lime); font-size: var(--f-sm); }
.s28-list span { display: grid; gap: .2em; } .s28-list b { font-size: calc(var(--f-h3) * 1.04); font-weight: 600; } .s28-list em { font-style: normal; font-size: var(--f-sm); color: var(--mute); line-height: 1.35; }
.s28-list button:hover { background: var(--card); }
.s28-list button[aria-pressed='true'] { background: var(--sel); box-shadow: inset 2px 0 0 var(--lime); }

/* ---------- 29 · Cinematic conclusion ---------- */
.scene.sc-29 { --bg: #060d07; }
.s29-img { position: absolute; inset: 0; transform: scale(1.12) translate3d(4%, 0, 0); transition: transform 8s cubic-bezier(.2, .5, .2, 1); }
.s29-img img { object-position: 30% 60%; }
.is-in .s29-img { transform: scale(1.02) translate3d(9%, 2%, 0); }
.s29-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 13, 7, .92) 0%, rgba(6, 13, 7, .55) 42%, transparent 64%); }
.s29 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: end; }
.s29-l { display: grid; gap: calc(var(--u) * 1.3); }
.s29-h { font-size: calc(var(--f-h1) * 1.42); line-height: 1.06; max-width: 14em; margin-bottom: calc(var(--u) * .6); }
.js .sc-29:not(.ph4) .s29-h .ln > span { transform: translate3d(0, 105%, 0) !important; transition-duration: .01s; }
.js .sc-29.ph4 .s29-h .ln > span { transition-delay: 0s; }
.js .sc-29.ph4 .s29-h .ln + .ln > span { transition-delay: .18s; }
.s29-block { display: grid; grid-template-columns: calc(var(--u) * 12) 1fr; gap: .4em calc(var(--u) * 1.4); align-items: baseline; padding-top: calc(var(--u) * .8); border-top: 1px solid var(--line); opacity: 0; transform: translateY(calc(var(--u) * .7)); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.sc-29.ph1 .s29-b1, .sc-29.ph2 .s29-b2, .sc-29.ph3 .s29-b3 { opacity: 1; transform: none; }
.s29-k { font-size: var(--f-xs); font-weight: 600; color: var(--mute); }
.s29-conv { display: flex; flex-wrap: wrap; gap: .45em; }
.s29-chip { display: inline-flex; align-items: baseline; gap: .55em; padding: .35em .8em; border: 1px solid var(--line); border-radius: 3px; font-size: var(--f-sm); opacity: .35; transition: background .6s .5s, color .6s .5s, border-color .6s .5s, opacity .6s .3s; }
.s29-chip i { font-style: normal; color: var(--mute); }
.s29-chip em { font-style: normal; font-size: var(--f-xs); max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .8s var(--ease) .7s; }
.sc-29.ph1 .s29-chip.is-pick { opacity: 1; background: var(--lime); color: var(--forest-900); border-color: var(--lime); } .sc-29.ph1 .s29-chip.is-pick i { color: #3c4a23; }
.sc-29.ph1 .s29-chip.is-back { opacity: 1; border-color: var(--brass); color: var(--brass); }
.sc-29.ph1 .s29-chip em { max-width: 12em; }
.s29-ledger { display: flex; flex-wrap: wrap; gap: .3em calc(var(--u) * 2); font-size: var(--f-body); grid-column: 2; }
.s29-ledger li { display: flex; gap: .5em; align-items: center; } .s29-ledger i { font-style: normal; }
.s29-ledger .ok i { color: var(--lime); } .s29-ledger .no { color: #C9D3C3; } .s29-ledger .no i { color: var(--rust-soft); }
.s29-cond { grid-column: 2; font-family: var(--font-display); font-size: var(--f-h3); color: #EFEADC; }
.s29-r { display: grid; gap: calc(var(--u) * .9); justify-items: end; text-align: right; text-shadow: 0 2px 18px rgba(0, 0, 0, .75); opacity: 0; transform: translateY(calc(var(--u) * .7)); transition: opacity .8s var(--ease) .5s, transform .9s var(--ease) .5s; }
.sc-29.ph4 .s29-r { opacity: 1; transform: none; }
.s29-qa { display: flex; flex-wrap: wrap; gap: .4em; justify-content: flex-end; max-width: calc(var(--u) * 34); }
.s29-qa .chip { background: rgba(6, 13, 7, .7); text-shadow: none; }

/* ---------- Mobile (≤ 820px): xếp dọc ---------- */
@media (max-width: 820px) {
  .sc-in { padding: calc(var(--hud-h) + 28px) var(--px) 96px; gap: 22px; align-content: start; }
  .sc-src { position: absolute; bottom: 44px; right: var(--px); }
  .hd { align-items: flex-start; flex-wrap: wrap; } .hd-art { width: 26vw; margin: 0; } .hd > div:first-child { gap: 10px; }
  .s2, .kr, .s8-body, .s12-body, .s13-body, .s14-body, .s15, .s17-body, .s20-body, .s22, .s24-body, .s25-body, .s27-body, .s28, .s29, .s10-foot, .s26-foot, .s9-read, .s16-top, .s19-detail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .s8-detail, .s12-detail, .s13-side, .s14-ctrl, .s17-ctrl, .s24-res, .s27-board, .s10-read { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; min-height: 0; }
  .an span { font-size: 10px; } .an.to-r span { left: 9vw; } .an.to-l span { right: 9vw; } .an span::before { width: 6vw; }
  .ev-row { grid-template-columns: 1fr; gap: 2px; }
  .scene.hero { height: 170svh; }
  .hero-prod { height: auto; width: 128vw; right: -22vw; bottom: auto; top: 6svh; }
  .hero-stage { transform-origin: 60% 30%; transform: translate3d(0, calc(var(--p) * -4vh), 0) scale(calc(1 + var(--p) * .5)); }
  .hero-copy { align-content: end; padding-bottom: 14svh; transform: translate3d(0, calc(var(--p) * -12vh), 0); }
  .hero-copy::before { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(0deg, #0A120A 55%, transparent); z-index: -1; }
  .hero-note { left: var(--px); right: auto; bottom: 44px; }
  .hero-calls li::after { width: 10vw; } .hero-calls .to-r b, .hero-calls .to-r span { left: 13vw; } .hero-calls .to-l b, .hero-calls .to-l span { right: 13vw; }
  .hero-calls b { font-size: 14px; } .hero-calls span { font-size: 10px; }
  .s2-spec { grid-template-columns: 1fr; gap: 10px; } .s2-read { min-height: 150px; } .s2-one { gap: 16px; }
  .s3-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; border: 0; } .s3-art { height: 22vw; } .s3-art img { max-height: 21vw; }
  .s3-ans { grid-template-columns: 1fr; gap: 10px; min-height: 170px; }
  .scene.sc-4 { display: block; } .lab-stage { position: relative; height: 62vw; inset: auto; margin-top: calc(var(--hud-h) + 10px); } .lab-cam { width: 100vw; margin-left: -50vw; margin-top: -28.125vw; }
  .s4 { padding-top: 20px; } .s4-copy { width: 100%; } .lab-read { min-height: 150px; } .s4-check li { grid-template-columns: 1fr; gap: 2px; }
  .scene.sc-4 .an span, .lab-card { display: none; }
  .scene.sc-5 { display: flex; flex-direction: column; } .s5-split { position: relative; flex-direction: column; inset: auto; }
  .s5-half { flex: none !important; } .s5-in { width: 100%; padding: 26px var(--px) 34px; } .s5-a .s5-in { padding-top: 130px; } .s5-art { width: 46vw; }
  .s5-more { max-height: none; opacity: 1; } .s5-seam { display: none; } .s5-head { top: calc(var(--hud-h) + 26px); } .s5-b .s5-in { padding-bottom: 96px; }
  .kr-mx { width: auto; margin: 34px 4px 30px 44px; } .kr-grid { aspect-ratio: 5 / 4; } .kr-art { width: 40vw; } .kr-pts { grid-template-columns: 1fr; gap: 12px; }
  .kr-dot, .kr-trail { transform: translate(0, 28px); } .kr-dot { width: 16px; height: 16px; margin: -8px; }
  .s8-head, .s9-head { align-items: flex-start; flex-wrap: wrap; } .s8-art { width: 26vw; margin: 0; } .s9-note { text-align: left; }
  .s8-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 10px; } .s8-hd { display: none; } .s8-n, .s8-fit { grid-column: 1 / -1; }
  .s9-plot { --lw: 31vw; --vw: 0px; } .s9-row .s9-val { display: none; } .s9-name i { display: none; } .s9-ticks span { font-size: 9px; }
  .s10-plot { --lw: 30vw; --vw: 19vw; } .s10-name i { display: none; } .s10-val { font-size: 13px; } .s10-legend { justify-content: flex-start; }
  .s14-b, .s14-now { width: 11px; height: 11px; margin: -5.5px; } .s14-track { height: 14px; }
  .s14-plot { --lw: 30vw; --vw: 19vw; } .s14-rows { height: 220px; } .s14-row { height: 44px; font-size: 13px; } .s14-v { font-size: 13px; } .s14-wrow { grid-template-columns: 1fr; gap: 4px; } .s14-concl { flex-direction: column; gap: 4px; }
  .s11-eq { gap: 10px 14px; } .s11-t .num { font-size: 9vw; } .s11-op { font-size: 7vw; } .s11-sim-hd .seg { margin-left: 0; } .s11-zone span { display: none; } .s11-out { min-height: 150px; } .s11-track { height: 44px; margin-top: 30px; }
  .s12-row { grid-template-columns: 30px 1fr 96px; gap: 6px 10px; padding: 10px 6px; } .s12-row > span:nth-child(n+4) { grid-column: 2 / -1; font-size: 12.5px; } .s12-hd { display: none; }
  .s12-sliders { grid-template-columns: 1fr 1fr; } .s12-formula { font-size: 11.5px; }
  .s13-rows { height: calc(54px * 5); } .s13-row { height: 54px; grid-template-columns: 22px 25vw 1fr 52px; gap: 6px; padding: 0; } .s13-track { height: 16px; } .s13-axis { display: none; } .s13-n { font-size: 13px; } .s13-v { font-size: 14px; }
  .s15-art { width: 70vw; margin: 0 auto; } .s15-why li { grid-template-columns: 2em 1fr; } .s15-why .tag { grid-column: 2; }
  .s16-paid { text-align: left; justify-items: start; } .s16-ev { justify-items: start; max-width: none; } .s16-ev img { height: 34px; }
  .s16-chart { height: 300px; padding-left: 24px; margin-top: 36px; } .s16-cols { gap: 6px; padding-bottom: 40px; } .s16-link { width: 6px; } .s16-v { font-size: 9.5px; } .s16-cum { display: none; } .s16-lab { font-size: 9.5px; white-space: normal; bottom: -36px; line-height: 1.2; } .s16-y em { top: -26px; }
  .s16-foot { grid-template-columns: 1fr; gap: 12px; } .s16-formula { white-space: normal; font-size: 11.5px; line-height: 1.9; }
  .s17-row { grid-template-columns: 1fr; } .s17-track { height: 30px; }
  .scene.sc-18 { display: block; } .s18-split { position: relative; inset: auto; grid-template-columns: 1fr; }
  .s18-lin { grid-template-columns: 1fr; padding: calc(var(--hud-h) + 28px) var(--px) 34px; gap: 16px; } .s18-lin .h1, .s18-fig { grid-column: 1; grid-row: auto; } .s18-claims { grid-template-columns: 1fr; }
  .s18-rin { padding: 34px var(--px) 100px; } .s18-read { min-height: 200px; }
  .s19-lane { grid-template-columns: 1fr; gap: 12px; } .s19-links { display: none; }
  .s19-node b { font-size: 3.6vw; word-break: break-word; } .s19-node span { font-size: 2.7vw; } .s19-node { padding-right: 6px; } .s19-dot { width: 14px; height: 14px; }
  .s19-d { min-height: 260px; } .s19-dh { flex-wrap: wrap; } .s19-lock { justify-items: start; text-align: left; }
  .s20-docs { grid-template-columns: 1fr; gap: 0; } .s20-doc { transform: none; min-height: 0; } .s20-link { margin: 0 auto; height: 34px; width: 0; border-top: 0; border-left: 2px solid var(--fg); } .s20-link.is-miss { border-left-style: dashed; border-color: var(--rust); } .s20-link.is-na { border-left-style: dotted; border-color: var(--line2); } .s20-link i { top: 50%; width: 22px; height: 22px; }
  .s20-vt { margin-left: 0; } .s20-doc h3 { font-size: 8vw; }
  .s21-tabs { grid-template-columns: 1fr 1fr; } .s21-tabs b { font-size: 14px; } .s21-flow { grid-template-columns: 1fr; min-height: 420px; } .s21-arrow { width: 1.5px; height: 22px; margin: 0 0 0 12px; } .s21-arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
  .s22-view { aspect-ratio: 4 / 5; } .s22-read { min-height: 150px; }
  .scene.sc-23 { display: block; } .s23-stage { position: relative; height: 62vw; margin-top: var(--hud-h); } .s23-cam { width: 100vw; margin-left: -50vw; margin-top: -28.125vw; } .s23-shade { display: none; }
  .s23 { min-height: 0; padding-top: 22px; } .s23-top { width: auto; } .s23-cols { grid-template-columns: 1fr; } .s23-cam .an span { font-size: 10px; } .s23-c { min-height: 0; } .s23 .hint { display: none; }
  .hd-art.s24-art { width: 34vw; margin: 0; } .s24-two { gap: 16px; } .s24-price { flex-direction: column; gap: 0; } .s24-price .num { font-size: 11vw; } .s24-ctrl { grid-template-columns: 1fr; }
  .s25-card { grid-template-columns: 1fr; } .s25-pct { grid-column: 1; grid-row: auto; justify-items: start; } .s25-slope text { font-size: 12px; }
  .s26-steps { grid-template-columns: 1fr; gap: 20px; padding-left: 26px; } .s26-line { left: 6px; right: auto; top: 6px; bottom: 60px; width: 1.5px; height: auto; } .s26-line i { display: none; } .s26-dot { position: absolute; left: -26px; top: 2px; width: 14px; height: 14px; } .s26-rec { min-height: 0; } .s26-art { width: 30vw; }
  .s27-gap { grid-template-columns: auto 1fr; gap: 12px; } .s27-who { grid-column: 2; text-align: left; } .s27-real { justify-items: start; text-align: left; }
  .s28-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .s28-art { width: 44vw; } .s28-read { min-height: 210px; }
  .s29 { align-items: start; } .s29-h { font-size: 8.6vw; } .s29-block { grid-template-columns: 1fr; } .s29-ledger, .s29-cond { grid-column: 1; } .s29-r { justify-items: start; text-align: left; } .s29-qa { justify-content: flex-start; max-width: none; } .s29-bg::after { background: linear-gradient(0deg, rgba(6, 13, 7, .96) 0%, rgba(6, 13, 7, .82) 60%, rgba(6, 13, 7, .5) 100%); } .s29-img img { object-position: 60% 20%; }
}