/* THU MUA XANH · FINAL 2 — 14 cảnh pitch. Khung 16:9 theo đơn vị u (1u = 1% chiều rộng khung).
   Hệ chữ trình chiếu (cổng kiểm 1366×768, u ≈ 13,66 px):
     tiêu đề 3,0u ≈ 41 px · câu chốt 2,3u ≈ 31 px · nội dung lớn 1,8u ≈ 25 px · nội dung 1,55u ≈ 21 px · nhãn 1,3u ≈ 18 px · chú thích phụ 1,05u ≈ 14 px.
   Be Vietnam Pro là chữ chủ đạo; Fraunces chỉ cho tiêu đề mở đầu; IBM Plex Mono không dùng cho văn bản tiếng Việt. */

/* ---------- Khung và hệ chữ dùng chung ---------- */
.cn { --t-h1: calc(var(--u) * 3.0); --t-xl: calc(var(--u) * 2.3); --t-lg: calc(var(--u) * 1.8); --t-md: calc(var(--u) * 1.55); --t-sm: calc(var(--u) * 1.3); --t-xs: calc(var(--u) * 1.05);
  --ink: #F2EDE1; --ink2: #CDD6CB; --ink3: #A3B4A7; --panel: rgba(242, 237, 225, .055); --edge: rgba(242, 237, 225, .18); --edge2: rgba(242, 237, 225, .42); --on: var(--lime); --on-ink: #0B1A14; --ok: #B9D35A; --bad: #E39A72; --mid: #E3C46F; }
.cn.th-light { --ink: #0F2A22; --ink2: #2F443A; --ink3: #53665B; --panel: rgba(255, 255, 255, .62); --edge: rgba(15, 42, 34, .16); --edge2: rgba(15, 42, 34, .4); --on: #0F2A22; --on-ink: #F4EFE3; --ok: #4E6B17; --bad: #A9512C; --mid: #87661A; }
.cn { color: var(--ink); }
.cn .fr { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); transform: translate(-50%, -50%); font-size: var(--t-md); line-height: 1.38; }
.cn .sc-in { display: none; }
.cn .sc-src { z-index: 6; font-size: var(--t-xs); color: var(--ink3); opacity: 1; }
:where(.cn) :is(p, h1, h2, h3, dl, dd, ol, ul, figure) { margin: 0; }
:where(.cn) :is(ol, ul) { padding: 0; list-style: none; }
:where(.cn) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.cn button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.cn-hd { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6.2); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .5); }
.cn .eyebrow { font-size: calc(var(--u) * 1.15); font-weight: 600; letter-spacing: .01em; color: var(--ink3); }
.cn-h1 { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-h1); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.cn-h1 em { font-style: normal; color: var(--acc); }
.cx-lbl { display: block; font-size: calc(var(--u) * 1.25); font-weight: 600; color: var(--acc); letter-spacing: .005em; }
.tnum { font-variant-numeric: lining-nums tabular-nums; }

/* nút chọn và nút lệnh: luôn có hover, focus, trạng thái chọn */
.cx-seg { display: inline-flex; flex-wrap: wrap; gap: calc(var(--u) * .4); }
.cx-opt, .cx-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: .05em; min-height: calc(var(--u) * 3); padding: calc(var(--u) * .5) calc(var(--u) * 1.05); border: 1.5px solid var(--edge2); border-radius: calc(var(--u) * .5); font-size: var(--t-sm); font-weight: 600; line-height: 1.15; color: var(--ink); background: var(--panel); transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.cx-opt small, .cx-btn small { font-size: var(--t-xs); font-weight: 500; color: var(--ink3); margin: 0; letter-spacing: 0; font-family: var(--font-ui); }
.cx-opt:hover, .cx-btn:hover:not(:disabled) { border-color: var(--ink); }
.cx-opt:active, .cx-btn:active { transform: translateY(1px); }
.cx-opt[aria-pressed="true"], .cx-btn[aria-pressed="true"], .cx-btn.is-pri { background: var(--on); border-color: var(--on); color: var(--on-ink); }
.cx-opt[aria-pressed="true"] small { color: var(--on-ink); opacity: .78; }
.cx-btn:disabled { opacity: .38; cursor: default; }
.cx-hint { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.cx-hint svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cx-chip3d { position: absolute; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); padding: .2em .6em; border: 1px dashed var(--edge2); border-radius: 4px; }
.cn .ev-badge { font-size: calc(var(--u) * 1.0); z-index: 2; }
body:not(.present) .cn1-go { display: none; }

/* ô chứa hộp 3D + ảnh tĩnh dự phòng (cùng mô hình) */
.slot { position: absolute; pointer-events: none; }
.slot-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s var(--ease); filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.4) rgba(0, 0, 0, .28)); }
.scene.stage-on .slot-still { opacity: 0; }

/* sân khấu 3D (canvas) và lớp chú thích: canvas không bao giờ nhận chuột */
.stage { position: fixed; inset: 0; z-index: 4; pointer-events: none !important; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.stage.is-on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.stage .gl-canvas { position: absolute; left: 0; top: 0; }
.stage-ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
body:not(.present) .stage, body:not(.present) .stage-ui { display: none; }
.sl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-ln { fill: none; stroke: #EFEADC; stroke-width: 1.5; stroke-opacity: 0; transition: stroke-opacity .5s var(--ease); vector-effect: non-scaling-stroke; }
.sl-ln.is-on { stroke-opacity: .8; }
.sl-dot { fill: var(--lime); stroke: rgba(11, 26, 20, .9); stroke-width: 2; opacity: 0; transition: opacity .4s var(--ease); }
.sl-dot.is-on { opacity: 1; }
.sl-dot.is-back, .sl-ln.is-back { opacity: .25; }
.sl-box { position: absolute; inset: 0; }
.stl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s var(--ease); will-change: transform; padding-bottom: calc(var(--u) * .35); color: #F2EDE1; }
.stl.is-on { opacity: 1; }
.stl.is-back { opacity: .3; }
.sl-t { display: grid; gap: .1em; white-space: nowrap; padding: 0 calc(var(--u) * .2); }
.sl-t b { font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 2.3); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.sl-t span { font-size: calc(var(--u) * 1.25); font-weight: 600; color: var(--lime); }
.stl.is-l .sl-t { text-align: right; }

/* gợi ý lấy focus khi trang nằm trong khung nhúng */
.focus-hint { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--u) * 4.2); transform: translate(-50%, 12px); display: grid; gap: .2em; text-align: center; padding: .7em 1.2em; border-radius: 8px; background: #CFE06C; color: #0B1A14; border: 0; font: 600 calc(var(--u) * 1.2)/1.3 var(--font-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; cursor: pointer; }
.focus-hint span { font-weight: 500; font-size: .85em; }
.focus-hint.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s, visibility 0s; }

/* chuyển cảnh: vệt quét ở ranh giới phần */
.wipe-line { position: fixed; top: 0; bottom: 0; left: 0; width: 2px; background: var(--lime, #CFE06C); box-shadow: 0 0 18px rgba(207, 224, 108, .55); z-index: 70; pointer-events: none; opacity: 0; }

/* nền */
.cn1-bg, .cn2-bg, .cn3-bg, .cn4-bg, .cn5-bg, .cn8-bg, .cn11-bg, .cn12-bg, .cn13-bg, .cn14-bg { background: radial-gradient(90% 110% at 72% 40%, #17382D 0%, #0F241C 46%, #08150F 100%); }
.cn6-bg, .cn7-bg, .cn9-bg, .cn10-bg { background: linear-gradient(180deg, #F6F1E5 0%, #EFE8D6 100%); }

/* ---------- 01 · Mở đầu ---------- */
.cn1-pool { position: absolute; left: 52%; top: 60%; width: 50%; height: 40%; background: radial-gradient(50% 50% at 50% 50%, rgba(232, 214, 160, .2), transparent 70%); opacity: 0; transition: opacity 2.4s var(--ease) .3s; }
.is-in .cn1-pool { opacity: 1; }
.cn1-slot { left: calc(var(--u) * 50); top: calc(var(--u) * 7); width: calc(var(--u) * 46); height: calc(var(--u) * 40); }
.cn1-chip { left: calc(var(--u) * 66); top: calc(var(--u) * 47.6); }
.cn1-eye { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 11.2); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.cn1-title { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.2); width: calc(var(--u) * 44); font-family: var(--font-display); font-weight: 420; font-size: calc(var(--u) * 4.4); line-height: 1.04; letter-spacing: -.025em; font-variation-settings: 'opsz' 144; text-wrap: balance; }
.cn1-title em { display: block; margin-top: .14em; font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: .6em; letter-spacing: -.01em; color: var(--lime); }
.cn1-sub { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 31.6); width: calc(var(--u) * 40); padding-left: calc(var(--u) * 1.2); border-left: 3px solid var(--lime); font-size: var(--t-lg); line-height: 1.3; font-weight: 500; }
.cn1-foot { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 40.4); display: grid; gap: calc(var(--u) * .25); font-size: var(--t-sm); color: var(--ink2); }
.cn1-foot b { color: var(--ink); font-weight: 600; }
.cn1-go { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.6); font-size: var(--t-xs); color: var(--ink3); }
.cn kbd { font: 600 1em var(--font-ui); color: var(--ink); border: 1px solid var(--edge2); border-radius: 4px; padding: .05em .45em; }
.cn1-cta { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 46.4); }
body.present .cn1-cta { display: none; }

/* ---------- 02 · Sáu phần ---------- */
.cn2-rail { position: absolute; left: calc(var(--u) * 11); top: calc(var(--u) * 29); width: calc(var(--u) * 78); height: 2px; background: var(--edge); }
.cn2-run { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
.cn2-nodes li { position: absolute; top: calc(var(--u) * 26.2); width: calc(var(--u) * 15); transform: translateX(-50%); }
.cn2-n { display: grid; justify-items: center; gap: calc(var(--u) * .35); width: 100%; text-align: center; border-radius: 8px; padding-bottom: calc(var(--u) * .5); }
.cn2-ic { display: grid; place-items: center; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); border-radius: 50%; border: 2px solid var(--edge2); background: #0F241C; transition: background-color .4s, border-color .4s; margin-bottom: calc(var(--u) * .6); }
.cn2-ic svg { width: 48%; height: 48%; fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.cn2-nodes li.is-lit .cn2-ic { background: var(--lime); border-color: var(--lime); }
.cn2-nodes li.is-lit .cn2-ic svg { stroke: #0B1A14; }
.cn2-no { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.cn2-name { font-size: var(--t-md); font-weight: 600; line-height: 1.2; }
.cn2-cue { font-size: var(--t-sm); color: var(--ink2); }
.cn2-n:hover .cn2-ic { border-color: var(--lime); }
.cn2-n:hover .cn2-cue { color: var(--lime); text-decoration: underline; text-underline-offset: .25em; }
.cn2-token { top: calc(var(--u) * 15.4); left: calc(var(--u) * 5); width: calc(var(--u) * 12); height: calc(var(--u) * 9); }
.cn2-foot { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.4); }

/* ---------- 03 · Khám phá sản phẩm ---------- */
.cn3-brief { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 15); width: calc(var(--u) * 22); display: grid; gap: calc(var(--u) * .9); }
.cn3-menu { font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
.cn3-need { display: grid; gap: calc(var(--u) * .6); font-size: var(--t-md); color: var(--ink2); }
.cn3-need li { position: relative; padding-left: 1.3em; }
.cn3-need li::before { content: ''; position: absolute; left: 0; top: .45em; width: .55em; height: .3em; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.cn3-slot, .cn3-pad, .cn3-photo { left: calc(var(--u) * 30); top: calc(var(--u) * 13); width: calc(var(--u) * 39); height: calc(var(--u) * 35); }
.cn3-slot .s-hero { opacity: 0; }
.cn3.is-open .cn3-slot .s-hero { opacity: 1; } .cn3.is-open .cn3-slot .s-closed { opacity: 0; }
.scene.stage-on.cn3 .cn3-slot .slot-still { opacity: 0; }
.cn3-pad { position: absolute; z-index: 6; cursor: grab; touch-action: none; border-radius: 12px; }
.cn3-pad.is-grab { cursor: grabbing; }
.cn3-pad:hover { box-shadow: inset 0 0 0 1px rgba(207, 224, 108, .25); }
.cn3-photo { position: absolute; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.cn3-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); }
.cn3.is-photo .cn3-photo { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.cn3.is-photo .cn3-slot, .cn3.is-photo .cn3-chip, .cn3.is-photo .cn3-pad { opacity: 0; visibility: hidden; }
.cn3-photo .ev-badge { left: auto; right: .7em; }
.cn3-chip { left: calc(var(--u) * 30.5); top: calc(var(--u) * 48.8); }
.cn3-ctl { position: absolute; left: calc(var(--u) * 71); top: calc(var(--u) * 13.6); width: calc(var(--u) * 23); display: grid; gap: calc(var(--u) * .8); }
.cn3-parts { display: grid; gap: calc(var(--u) * .5); }
.cn3-part { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .6em; padding: calc(var(--u) * .65) calc(var(--u) * 1); border: 1.5px solid var(--edge2); border-radius: calc(var(--u) * .5); background: var(--panel); transition: background-color .2s, border-color .2s, color .2s; }
.cn3-part b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.cn3-part span { font-size: var(--t-sm); color: var(--ink2); }
.cn3-part:hover { border-color: var(--lime); }
.cn3-part[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0B1A14; }
.cn3-part[aria-pressed="true"] span { color: #0B1A14; }
.cn3-tools { display: flex; gap: calc(var(--u) * .5); flex-wrap: wrap; }
.cn3-read { min-height: 3.2em; font-size: var(--t-sm); color: var(--ink2); line-height: 1.35; }
.cn3-drag { margin-top: calc(var(--u) * -.2); }
.cn3.is-photo .cn3-drag { visibility: hidden; }

/* ---------- 04 · Phân loại và Kraljic ---------- */
.cn4-use { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.4); width: calc(var(--u) * 38); display: grid; gap: calc(var(--u) * .9); align-content: start; }
.cn4-use .cx-seg { display: grid; grid-template-columns: 1fr 1fr; }
.cn4-use .cx-opt { min-height: calc(var(--u) * 4.4); font-size: var(--t-md); }
.cn4-res { display: grid; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5); border-radius: calc(var(--u) * .6); background: var(--panel); border-left: 4px solid var(--lime); }
.cn4-res b { font-size: var(--t-xl); font-weight: 700; color: var(--lime); letter-spacing: -.015em; }
.cn4-res span { font-size: var(--t-md); color: var(--ink2); }
.cn4-note { font-size: var(--t-xs); color: var(--ink3); }
.cn4-krw { position: absolute; left: calc(var(--u) * 50); top: calc(var(--u) * 14.4); width: calc(var(--u) * 44); display: grid; gap: calc(var(--u) * .9); transition: opacity .5s var(--ease); }
.cn4:not(.kr-on) .cn4-krw { opacity: .4; }
.cn4:not(.kr-on) .cn4-mk, .cn4:not(.kr-on) .cn4-out { opacity: 0; }
.cn4-kr { position: relative; margin-left: calc(var(--u) * 2.2); width: calc(var(--u) * 22); height: calc(var(--u) * 17); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; float: left; }
.cn4-kc { display: grid; align-content: center; gap: .15em; padding: calc(var(--u) * .7); background: var(--panel); border: 1px solid var(--edge); border-radius: 4px; transition: background-color .4s, border-color .4s; }
.cn4-kc b { font-size: var(--t-md); font-weight: 700; }
.cn4-kc span { font-size: var(--t-xs); color: var(--ink3); line-height: 1.25; }
.cn4-kr[data-cell="rou"] .c-rou, .cn4-kr[data-cell="bot"] .c-bot, .cn4-kr[data-cell="lev"] .c-lev, .cn4-kr[data-cell="str"] .c-str { background: rgba(207, 224, 108, .16); border-color: var(--lime); }
.cn4-ky { position: absolute; left: calc(var(--u) * -2.2); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) translateY(50%); white-space: nowrap; font-size: var(--t-xs); color: var(--ink3); transform-origin: 50% 50%; }
.cn4-ky { left: calc(var(--u) * -1.1); transform: translate(-50%, -50%) rotate(-90deg); }
.cn4-kx { position: absolute; left: 0; bottom: calc(var(--u) * -1.9); font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; }
.cn4-mk { position: absolute; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); margin: calc(var(--u) * -.9); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207, 224, 108, .25); transition: left .8s cubic-bezier(.65, 0, .35, 1), top .8s cubic-bezier(.65, 0, .35, 1), opacity .4s; left: 80%; top: 78%; }
.cn4-kr[data-cell="rou"] .cn4-mk { left: 43%; top: 62%; } .cn4-kr[data-cell="bot"] .cn4-mk { left: 93%; top: 62%; }
.cn4-kr[data-cell="lev"] .cn4-mk { left: 43%; top: 12%; } .cn4-kr[data-cell="str"] .cn4-mk { left: 93%; top: 12%; }
.cn4-asm { position: absolute; left: calc(var(--u) * 25.6); top: calc(var(--u) * 2.4); width: calc(var(--u) * 18.4); display: grid; gap: calc(var(--u) * .5); align-content: start; }
.cn4-asm > p { font-size: var(--t-sm); font-weight: 600; margin-top: calc(var(--u) * .3); }
.cn4-asm .cx-seg { display: grid; grid-template-columns: 1fr 1fr; }
.cn4-asm .cx-opt { padding-inline: calc(var(--u) * .7); }
.cn4-out { position: absolute; left: 0; top: calc(var(--u) * 22.4); width: 100%; display: grid; gap: calc(var(--u) * .4); transition: opacity .4s; }
.cn4-out b { font-size: var(--t-xl); font-weight: 700; color: var(--lime); }
.cn4-out span { font-size: var(--t-md); color: var(--ink2); }

/* ---------- 05 · Năm gian hàng ---------- */
.cn5-tabs { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.6); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(5, 1fr) calc(var(--u) * 9.4); gap: calc(var(--u) * .6); }
.cn5-tab { position: relative; display: grid; grid-template-columns: calc(var(--u) * 4.6) 1fr; grid-template-rows: auto auto; align-content: center; column-gap: calc(var(--u) * .8); align-items: center; padding: calc(var(--u) * .6); border: 1.5px solid var(--edge); border-radius: calc(var(--u) * .6); background: var(--panel); transition: border-color .2s, background-color .2s; }
.cn5-tab img { grid-row: 1 / 3; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); object-fit: contain; border-radius: 4px; background: rgba(242, 237, 225, .08); }
.cn5-tab.is-areca img { object-fit: cover; }
.cn5-tc { display: none; }
.cn5-tab b { font-size: var(--t-sm); font-weight: 700; line-height: 1.12; }
.cn5-tv { font-size: var(--t-sm); font-weight: 600; }
.cn5-tk { position: absolute; left: calc(var(--u) * .6); bottom: calc(var(--u) * .5); max-width: calc(var(--u) * 4.6); text-align: center; font-style: normal; font-size: calc(var(--u) * .92); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .1em .4em; border-radius: 3px; border: 1px dashed var(--edge2); color: var(--ink3);  background: rgba(11, 26, 20, .86); }
.cn5-tk.is-real { border: 0; background: var(--lime); color: #0B1A14; }
.cn5-tab:hover { border-color: var(--ink2); }
.cn5-tab[aria-pressed="true"] { border-color: var(--lime); background: rgba(207, 224, 108, .12); }
.cn5-all { border: 1.5px solid var(--edge2); border-radius: calc(var(--u) * .6); font-size: var(--t-sm); font-weight: 700; text-align: center; padding: 0 calc(var(--u) * .5); background: var(--panel); transition: background-color .2s, color .2s; }
.cn5-all:hover { border-color: var(--lime); }
.cn5-all[aria-pressed="true"] { background: var(--lime); color: #0B1A14; border-color: var(--lime); }
.is-m { --st: var(--ok); } .is-x { --st: var(--bad); } .is-o { --st: var(--mid); } .is-b { --st: var(--ink); }
.cn5-tv.is-x { color: var(--bad); } .cn5-tv.is-o { color: var(--mid); }
.cn5-det { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 22.6); width: calc(var(--u) * 88); height: calc(var(--u) * 23.6); display: grid; grid-template-columns: calc(var(--u) * 22) 1fr; gap: calc(var(--u) * 2.4); transition: opacity .4s var(--ease); }
.cn5-det figure { position: relative; border-radius: calc(var(--u) * .6); background: rgba(242, 237, 225, .07); overflow: hidden; display: grid; place-items: center; }
.cn5-det img { width: 100%; height: 100%; object-fit: contain; }
.cn5-st { position: absolute; left: calc(var(--u) * .6); bottom: calc(var(--u) * .6); font-size: var(--t-xs); font-weight: 700; padding: .25em .6em; border-radius: 4px; border: 1px dashed var(--edge2); background: rgba(11, 26, 20, .82); color: var(--ink); }
.cn5-st.is-real { background: var(--lime); color: #0B1A14; border: 0; }
.cn5-dt { display: grid; align-content: start; gap: calc(var(--u) * .9); min-width: 0; }
.cn5-dn { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5em; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; }
.cn5-dn span { font-size: var(--t-sm); color: var(--ink3); font-weight: 600; }
.cn5-dn em { font-style: normal; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25em .6em; border-radius: 4px; background: var(--lime); color: #0B1A14; }
.cn5-rows { display: grid; gap: calc(var(--u) * .35); }
.cn5-rows div { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr auto; align-items: baseline; gap: calc(var(--u) * 1); padding-bottom: calc(var(--u) * .35); border-bottom: 1px solid var(--edge); }
.cn5-rows dt { font-size: var(--t-sm); color: var(--ink3); }
.cn5-rows dd { font-size: var(--t-lg); font-weight: 600; margin: 0; }
.cn5-rows span { font-size: var(--t-sm); font-weight: 700; color: var(--st); }
.cn5-rows .is-o dd { text-decoration: underline dashed var(--mid); text-underline-offset: .25em; }
.cn5-pr { display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap; }
.cn5-pr b { font-size: var(--t-xl); font-weight: 700; }
.cn5-pr span { font-size: var(--t-sm); color: var(--ink3); }
.cn5-dx { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.cn5-dx p { display: grid; gap: .2em; }
.cn5-dx b { font-size: var(--t-sm); font-weight: 500; color: var(--ink2); line-height: 1.35; }
.cn5-grid { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 22.6); width: calc(var(--u) * 88); display: grid; gap: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.cn5.is-all .cn5-grid { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .1s, visibility 0s; }
.cn5.is-all .cn5-det { opacity: 0; visibility: hidden; }
.cn5-gh, .cn5-gr { display: grid; grid-template-columns: calc(var(--u) * 11) repeat(5, 1fr); gap: calc(var(--u) * .8); align-items: center; }
.cn5-gh { padding-bottom: calc(var(--u) * .6); border-bottom: 1.5px solid var(--edge2); }
.cn5-gh b { font-size: var(--t-sm); font-weight: 700; }
.cn5-gr { padding: calc(var(--u) * .75) 0; border-bottom: 1px solid var(--edge); }
.cn5-gr > span { font-size: var(--t-sm); color: var(--ink3); }
.cn5-gr p { display: flex; align-items: baseline; gap: .45em; font-size: var(--t-md); font-weight: 600; line-height: 1.2; }
.cn5-gr p i { flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--st); transform: translateY(-.05em); }
.cn5-gr p.is-x { color: var(--bad); } .cn5-gr p.is-o { color: var(--mid); }
.cn5-gr p.is-b i { background: var(--ink); }
.cn5-gr.is-price p { font-weight: 500; font-size: var(--t-sm); }
.cn5-key { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin-top: calc(var(--u) * .8); font-size: var(--t-xs); color: var(--ink3); }
.cn5-key i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--st); margin-left: .6em; }
.cn5-key i:first-child { margin-left: 0; }
.cn5-end { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.6); font-size: var(--t-lg); font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cn5-end b { color: var(--lime); font-weight: 700; }
.cn5.is-end .cn5-end { opacity: 1; transform: none; }

/* ---------- 06 · Năm tiêu chí ---------- */
.cn6-bar { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.6); width: calc(var(--u) * 88); height: calc(var(--u) * 11); display: flex; gap: 4px; }
.cn6-seg { position: relative; background: var(--c); color: #FAF7EE; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); display: grid; align-content: space-between; border-radius: 4px; outline-offset: 3px; transition: transform .2s, box-shadow .2s, opacity .3s; }
.cn6-seg.s-G { color: #0F2A22; }
.cn6-w { font-size: calc(var(--u) * 3.2); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.cn6-nm { font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.cn6-nm b { margin-right: .35em; }
.cn6-seg[aria-pressed="true"] { box-shadow: 0 0 0 3px #0F2A22; transform: translateY(-4px); }
.cn6-seg:hover { opacity: 1 !important; }
.cn6-rd { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 28.4); width: calc(var(--u) * 80); display: grid; gap: calc(var(--u) * .5); }
.cn6-rd b { font-size: var(--t-md); font-weight: 700; color: var(--acc); }
.cn6-rd span { font-size: var(--t-lg); font-weight: 500; line-height: 1.32; }
.cn6-f { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 37.4); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .6); padding-top: calc(var(--u) * 1.2); border-top: 1.5px solid var(--edge); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cn6.at1 .cn6-f, .cn6:not([data-k]) .cn6-f { opacity: 1; transform: none; }
.cn6-eq { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: var(--t-lg); font-weight: 600; }
.cn6-eq span { display: inline-flex; align-items: center; gap: .3em; }
.cn6-eq span i { width: .7em; height: .7em; border-radius: 2px; background: var(--c); }
.cn6-eq em { font-style: normal; color: var(--ink3); }
.cn6-cap { font-size: var(--t-sm); color: var(--ink2); max-width: 62em; }
.cn6-foot { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 49); }

/* ---------- 07 · Quyết định trực tiếp ---------- */
.cn7-chart { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.6); width: calc(var(--u) * 54); }
.cn7-leg { display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: var(--t-xs); color: var(--ink2); }
.cn7-leg li { display: inline-flex; align-items: center; gap: .35em; }
.cn7-leg i { width: .8em; height: .8em; border-radius: 2px; background: var(--c); }
.cn7-rows { position: relative; height: calc(var(--u) * 26.5); margin-top: calc(var(--u) * 1.2); }
.cn7-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4.6); display: grid; grid-template-columns: calc(var(--u) * 14) 1fr calc(var(--u) * 7.2); align-items: center; gap: calc(var(--u) * .8); transform: translateY(calc(var(--u) * 5.3 * var(--r, 0))); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.cn7-nm { font-size: var(--t-md); font-weight: 600; }
.cn7-bar { display: flex; height: calc(var(--u) * 2.4); }
.cn7-bar i { display: block; height: 100%; width: calc(var(--u) * .34 * var(--p, 0)); background: var(--c); box-shadow: inset -1.5px 0 0 #F4EFE3; transition: width .7s cubic-bezier(.65, 0, .35, 1); }
.cn7-v { font-size: var(--t-xl); font-weight: 700; text-align: right; letter-spacing: -.01em; }
.cn7-row.is-lead .cn7-nm, .cn7-row.is-lead .cn7-v { color: var(--ok); }
.cn7-row[data-id="areca"] .cn7-nm::after { content: 'mẫu đã mua'; display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.cn7-row[data-id="hapobe"] .cn7-nm::after { content: 'giá trong dải khảo sát'; display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.cn7-axis { font-size: var(--t-xs); color: var(--ink3); }
.cn7-ctl { position: absolute; left: calc(var(--u) * 63); top: calc(var(--u) * 13.8); width: calc(var(--u) * 31); display: grid; gap: calc(var(--u) * .55); align-content: start; }
.cn7-badge { justify-self: start; font-size: var(--t-sm); font-weight: 700; padding: .3em .7em; border-radius: 5px; border: 1.5px solid var(--ok); color: var(--ok); margin-bottom: calc(var(--u) * .4); line-height: 1.25; }
.cn7.is-sim .cn7-badge { background: #87661A; border-color: #87661A; color: #FFF8E6; }
.cn7-ctl .cx-lbl { margin-top: calc(var(--u) * .3); }
.cn7-ctl .cx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.cn7-say { margin-top: calc(var(--u) * .6); font-size: var(--t-md); line-height: 1.35; min-height: 2.7em; }
.cn7-say b { font-weight: 700; }
.cn7-reset { justify-self: start; }
.cn7-dec { display: grid; gap: calc(var(--u) * .35); margin-top: calc(var(--u) * .6); padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .5); background: #0F2A22; color: #F2EDE1; font-size: var(--t-sm); line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cn7-dec .cx-lbl { color: var(--lime); }
.cn7-dec b { color: var(--lime); }
.cn7.is-dec .cn7-dec { opacity: 1; transform: none; }
.cn7.is-dec .cn7-say, .cn7.is-dec .cn7-reset { display: none; }
.cn7-tco { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.2); width: calc(var(--u) * 54); font-size: var(--t-sm); color: var(--ink2); line-height: 1.35; }
.cn7-tco b { color: var(--ink); }

/* ---------- 08 · Đơn hàng thật ---------- */
.cn8-row { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.8); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }
.cn8-ph { position: relative; display: grid; grid-template-rows: calc(var(--u) * 16.4) auto; gap: calc(var(--u) * .8); text-align: left; border-radius: calc(var(--u) * .6); }
.cn8-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--u) * .6); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .3s var(--ease), box-shadow .3s; }
.cn8-ph:hover img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--lime), 0 14px 30px rgba(0, 0, 0, .4); }
.cn8-cap { display: grid; gap: .1em; }
.cn8-cap b { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; }
.cn8-cap span { font-size: var(--t-md); color: var(--ink2); }
.cn8-cap i { font-style: normal; font-size: var(--t-xs); color: var(--ink3); }
.cn8-eq { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 39.8); width: calc(var(--u) * 88); display: flex; align-items: center; gap: calc(var(--u) * 1); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cn8-eq span { display: grid; gap: .05em; padding: calc(var(--u) * .5) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .5); background: var(--panel); border: 1px solid var(--edge); font-size: var(--t-sm); color: var(--ink2); }
.cn8-eq span b { font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
.cn8-eq em { font-style: normal; font-size: var(--t-xl); color: var(--ink3); }
.cn8-eq .is-paid { background: var(--lime); border-color: var(--lime); color: #0B1A14; }
.cn8-eq .is-paid b { color: #0B1A14; }
.cn8.at1 .cn8-eq, .cn8:not([data-k]) .cn8-eq { opacity: 1; transform: none; }
.cn8-lim { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.4); display: flex; align-items: baseline; gap: .5em; font-size: var(--t-md); color: var(--ink2); opacity: 0; transition: opacity .5s var(--ease); }
.cn8-lim i { width: .6em; height: .6em; border-radius: 50%; border: 2px solid var(--bad); flex: none; transform: translateY(-.05em); }
.cn8-lim b { color: var(--bad); font-weight: 700; }
.cn8.at2 .cn8-lim, .cn8:not([data-k]) .cn8-lim { opacity: 1; }
.cn8-hint { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 10.2); }
.cn8-box { position: absolute; z-index: 8; left: calc(var(--u) * 6); top: calc(var(--u) * 5.6); width: calc(var(--u) * 88); height: calc(var(--u) * 46); display: grid; place-items: center; background: #07120D; border-radius: calc(var(--u) * .8); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; cursor: zoom-out; }
.cn8-box.is-on { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.cn8-box img { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; object-fit: contain; }
.cn8-box .cx-btn { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 1); }

/* ---------- 09 · Bộ chứng từ ---------- */
.cn9-docs { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.4); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.6); }
.cn9-docs li { position: relative; }
.cn9-d { position: relative; width: 100%; min-height: calc(var(--u) * 10.6); display: grid; align-content: start; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); background: #FFFDF6; border: 1.5px solid var(--edge); border-radius: calc(var(--u) * .5); box-shadow: 0 6px 18px rgba(15, 42, 34, .08); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.cn9-d.is-none { background: transparent; border: 2px dashed var(--edge2); box-shadow: none; }
.cn9-t { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cn9-code { font-size: var(--t-sm); color: var(--ink3); }
.cn9-d .tag { font-size: var(--t-sm); }
.cn9-d:hover { border-color: var(--ink); transform: translateY(-3px); }
.cn9-d[aria-pressed="true"] { border-color: #0F2A22; box-shadow: 0 0 0 2px #0F2A22, 0 12px 26px rgba(15, 42, 34, .16); transform: translateY(-4px); }
.cn9-ar { position: absolute; right: calc(var(--u) * -1.25); top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--t-md); color: var(--ink3); }
.cn9-det { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 28.4); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); background: #FFFDF6; border-radius: calc(var(--u) * .6); border: 1.5px solid #0F2A22; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.cn9.has-sel .cn9-det { opacity: 1; transform: none; }
.cn9-det.st-open { border-style: dashed; border-color: #A9512C; }
.cn9-dh { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6em; font-size: var(--t-md); font-weight: 600; }
.cn9-dh b { font-size: var(--t-xl); font-weight: 700; }
.cn9-dh span { color: var(--ink3); font-size: var(--t-sm); }
.cn9-det dl { display: grid; gap: calc(var(--u) * .6); }
.cn9-det dl div { display: grid; grid-template-columns: calc(var(--u) * 12) 1fr; gap: calc(var(--u) * 1); align-items: baseline; }
.cn9-det dt { font-size: var(--t-sm); color: var(--ink3); }
.cn9-det dd { font-size: var(--t-md); font-weight: 500; margin: 0; }
.cn9-det.st-open dd { color: #A9512C; }
.cn9-idle { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 29.6); display: grid; gap: calc(var(--u) * .8); font-size: var(--t-md); color: var(--ink2); transition: opacity .3s; }
.cn9-idle .cx-hint { font-size: var(--t-sm); }
.cn9.has-sel .cn9-idle { opacity: 0; visibility: hidden; }

/* ---------- 10 · Three-way match ---------- */
.cn10-tri { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.8); width: calc(var(--u) * 88); display: grid; grid-template-columns: 1fr calc(var(--u) * 6) 1fr calc(var(--u) * 6) 1fr; align-items: stretch; }
.cn10-col { position: relative; display: grid; align-content: start; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1) calc(var(--u) * 1.1); }
.cn10-col .bgp { position: absolute; inset: 0; z-index: -1; background: #FFFDF6; border: 1.5px solid var(--edge); border-radius: calc(var(--u) * .5); }
.cn10-col.is-none .bgp { background: transparent; border: 2px dashed var(--edge2); }
.cn10-h { display: flex; align-items: baseline; gap: .6em; margin-bottom: calc(var(--u) * .3); }
.cn10-h b { font-size: var(--t-xl); font-weight: 700; }
.cn10-h span { font-size: var(--t-sm); color: var(--ink3); }
.cn10-col.is-none .cn10-h span { color: #A9512C; font-weight: 600; }
.cn10-r { display: grid; gap: .1em; padding: calc(var(--u) * .45) calc(var(--u) * .6); border-radius: 4px; border: 1.5px solid transparent; transition: background-color .2s, border-color .2s; min-height: calc(var(--u) * 4.4); align-content: center; }
.cn10-r span { font-size: var(--t-xs); color: var(--ink3); font-weight: 600; }
.cn10-r b { font-size: var(--t-sm); font-weight: 600; line-height: 1.25; }
.cn10-r:hover { border-color: var(--edge2); }
.cn10-r[aria-pressed="true"] { background: rgba(15, 42, 34, .07); border-color: #0F2A22; }
.cn10-lk { position: relative; display: grid; place-items: center; font-style: normal; }
.cn10-lk::before { content: ''; position: absolute; left: 6%; right: 6%; top: calc(var(--u) * 8.2); border-top: 2.5px solid var(--edge2); transition: border-color .5s; }
.cn10-lk span { position: absolute; top: calc(var(--u) * 8.9); width: 120%; text-align: center; font-size: var(--t-xs); font-weight: 700; line-height: 1.2; opacity: 0; transition: opacity .4s .4s; }
.cn10.is-run .l1::before { border-top-color: #4E6B17; }
.cn10.is-run .l1 span { color: #4E6B17; opacity: 1; }
.cn10.is-run .l2::before { border-top: 2.5px dashed #A9512C; }
.cn10.is-run .l2 span { color: #A9512C; opacity: 1; transition-delay: .9s; }
.cn10-bar { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 34.6); width: calc(var(--u) * 88); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 1.6); }
.cn10-v { font-size: var(--t-sm); color: var(--ink2); line-height: 1.35; }
.cn10-res { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 39.4); font-size: var(--t-lg); font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) 1.1s, transform .6s var(--ease) 1.1s; }
.cn10-res b { font-weight: 700; color: #4E6B17; }
.cn10-res em { font-style: normal; font-weight: 700; color: #A9512C; }
.cn10.is-run .cn10-res { opacity: 1; transform: none; }
.cn10-ex { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 43); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .5); opacity: 0; transition: opacity .5s var(--ease); }
.cn10.is-ex .cn10-ex { opacity: 1; }
.cn10-ex ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.cn10-ex li { display: grid; gap: .1em; padding-left: calc(var(--u) * .8); border-left: 3px solid #A9512C; }
.cn10-ex li b { font-size: var(--t-sm); font-weight: 600; }
.cn10-ex li span { font-size: var(--t-sm); color: var(--ink3); }
.cn10-ex > p { font-size: var(--t-xs); color: var(--ink3); }

/* ---------- 11 · Pháp y bao gói ---------- */
.cn11-view { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.4); width: calc(var(--u) * 20.8); height: calc(var(--u) * 37); overflow: hidden; border-radius: calc(var(--u) * .6); background: #050C09; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.cn11-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease), transform 1s cubic-bezier(.65, 0, .35, 1); }
.cn11-img.is-on { opacity: 1; }
.cn11-mk { position: absolute; z-index: 2; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); margin: calc(var(--u) * -1.3); border-radius: 50%; border: 3px solid var(--lime); box-shadow: 0 0 0 3px rgba(5, 12, 9, .55), 0 0 18px rgba(207, 224, 108, .6); transition: left .6s var(--ease), top .6s var(--ease); }
.cn11-mk::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: var(--lime); }
.cn11-view .ev-badge { z-index: 3; }
.cn11-tm { position: absolute; z-index: 3; left: calc(var(--u) * .7); bottom: calc(var(--u) * .7); font-size: var(--t-xs); font-weight: 600; padding: .2em .55em; border-radius: 4px; background: rgba(5, 12, 9, .78); color: #F2EDE1; }
.cn11-list { position: absolute; left: calc(var(--u) * 29.6); top: calc(var(--u) * 13.4); width: calc(var(--u) * 19); display: grid; gap: calc(var(--u) * .5); }
.cn11-hs { display: flex; align-items: center; gap: .6em; min-height: calc(var(--u) * 4); padding: 0 calc(var(--u) * 1); border: 1.5px solid var(--edge); border-radius: calc(var(--u) * .5); background: var(--panel); font-size: var(--t-md); font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
.cn11-hs i { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid currentColor; font-style: normal; font-size: .78em; }
.cn11-hs:hover { border-color: var(--lime); }
.cn11-hs[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0B1A14; }
.cn11-zb { justify-self: start; margin-top: calc(var(--u) * .4); }
.cn11-pn { position: absolute; left: calc(var(--u) * 52); top: calc(var(--u) * 13.4); width: calc(var(--u) * 42); display: grid; gap: calc(var(--u) * 1.2); }
.cn11-pt { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; }
.cn11-q { display: grid; gap: .25em; padding-left: calc(var(--u) * 1); border-left: 3px solid var(--edge2); }
.cn11-q p { font-size: var(--t-md); line-height: 1.35; }
.cn11-q.q1 { border-color: var(--ok); } .cn11-q.q2 { border-color: var(--mid); } .cn11-q.q3 { border-color: var(--bad); }
.cn11-q.q1 .cx-lbl { color: var(--ok); } .cn11-q.q2 .cx-lbl { color: var(--mid); } .cn11-q.q3 .cx-lbl { color: var(--bad); }
.cn11-b7 { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * .4); }
.cn11-b7 span { display: grid; font-size: var(--t-xs); color: var(--ink3); padding: calc(var(--u) * .4) calc(var(--u) * .9); border: 1.5px solid var(--edge2); border-radius: 5px; }
.cn11-b7 span b { font-size: var(--t-xl); color: var(--ink); font-weight: 700; }
.cn11-b7 span.is-warn { border-color: var(--bad); }
.cn11-b7 span.is-warn b { color: var(--bad); }
.cn11-b7 i { font-style: normal; font-size: var(--t-xl); font-weight: 700; color: var(--bad); }

/* ---------- 12 · Nắp PET hay nắp bã mía ---------- */
.cn12-sw { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.6); display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.cn12-sw .cx-opt { min-width: calc(var(--u) * 11); align-items: center; font-size: var(--t-md); }
.cn12-c { position: absolute; top: calc(var(--u) * 18.4); width: calc(var(--u) * 43); display: grid; grid-template-columns: calc(var(--u) * 15) 1fr; grid-template-rows: auto auto auto auto 1fr; column-gap: calc(var(--u) * 1.6); row-gap: calc(var(--u) * .35); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .6); background: var(--panel); border: 1px solid var(--edge); }
.cn12-c.qa { left: calc(var(--u) * 6); } .cn12-c.hb { left: calc(var(--u) * 51); }
.cn12-t { grid-column: 2; font-size: var(--t-lg); font-weight: 700; }
.cn12-sub { grid-column: 2; font-size: var(--t-xs); color: var(--ink3); line-height: 1.3; }
.cn12-im { grid-column: 1; grid-row: 1 / 6; position: relative; height: calc(var(--u) * 13); }
.cn12-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s var(--ease); }
.cn12-im .i-b, .cn12.is-bag .cn12-im .i-p { opacity: 0; }
.cn12.is-bag .cn12-im .i-b { opacity: 1; }
.cn12-il { position: absolute; left: 0; bottom: 0; font-size: calc(var(--u) * .95); color: var(--ink3); border: 1px dashed var(--edge2); border-radius: 3px; padding: .1em .4em; }
.cn12-pr { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em; margin-top: calc(var(--u) * .5); }
.cn12-lid { font-size: var(--t-sm); font-weight: 600; color: var(--ink2); width: 100%; }
.cn12-lid .l-b, .cn12.is-bag .cn12-lid .l-p { display: none; }
.cn12.is-bag .cn12-lid .l-b { display: inline; color: var(--lime); }
.cn12-pr b { font-size: calc(var(--u) * 3.2); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cn12-pr small { font-size: var(--t-sm); font-weight: 500; color: var(--ink3); font-family: var(--font-ui); margin: 0; }
.cn12-d { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5em; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease) .2s, transform .6s var(--ease) .2s; }
.cn12-d b { font-size: var(--t-xl); font-weight: 700; color: var(--lime); }
.cn12-d span { font-size: var(--t-sm); color: var(--ink2); }
.cn12-calc { grid-column: 2; font-size: var(--t-xs); color: var(--ink3); opacity: 0; transition: opacity .5s .3s; }
.cn12.is-bag .cn12-d, .cn12.is-bag .cn12-calc { opacity: 1; transform: none; }
.cn12-end { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 41.6); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .7); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cn12-end p { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; }
.cn12-end em { font-style: normal; color: var(--lime); }
.cn12-end span { font-size: var(--t-md); color: var(--ink2); max-width: 52em; }
.cn12.is-end .cn12-end { opacity: 1; transform: none; }

/* ---------- 13 · Phân công ---------- */
.cn13-lead { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.4); width: calc(var(--u) * 88); display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em 1em; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .5); background: rgba(207, 224, 108, .12); border: 1.5px solid rgba(207, 224, 108, .5); }
.cn13-lead b { font-size: var(--t-lg); font-weight: 700; }
.cn13-lead span { font-size: var(--t-md); color: var(--ink2); }
.cn13-ws { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 21.4); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 1); }
.cn13-ws li { display: grid; align-content: start; gap: calc(var(--u) * .7); padding-top: calc(var(--u) * 1); border-top: 3px solid var(--lime); }
.cn13-n { font-size: var(--t-lg); font-weight: 700; color: var(--lime); line-height: 1; }
.cn13-ws h3 { font-size: var(--t-md); font-weight: 700; line-height: 1.22; min-height: 2.44em; }
.cn13-m { display: grid; gap: .15em; margin-top: calc(var(--u) * .3); }
.cn13-m b { font-size: var(--t-md); font-weight: 600; line-height: 1.22; color: var(--ink); }
.cn13-m span { font-size: var(--t-sm); color: var(--ink2); line-height: 1.3; }
.cn13-ws em, .cn13-lead em { font-style: normal; font-size: var(--t-sm); font-weight: 700; color: var(--lime); opacity: 0; transition: opacity .5s var(--ease); }
.cn13.at1 :is(.cn13-ws, .cn13-lead) em, .cn13:not([data-k]) :is(.cn13-ws, .cn13-lead) em { opacity: 1; }

/* ---------- 14 · Kết ---------- */
.cn14-pool { position: absolute; left: 58%; top: 58%; width: 44%; height: 40%; background: radial-gradient(50% 50% at 50% 50%, rgba(232, 214, 160, .18), transparent 70%); }
.cn14-slot { left: calc(var(--u) * 56); top: calc(var(--u) * 10); width: calc(var(--u) * 38); height: calc(var(--u) * 36); }
.cn14-eye { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 12.4); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.cn14-s { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 16.2); width: calc(var(--u) * 48); display: grid; gap: calc(var(--u) * 1.5); }
.cn14-s li { font-size: calc(var(--u) * 3.3); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.cn14-s li em { font-style: normal; color: var(--lime); }
.cn14-s li.is-on, .cn14-thx.is-on { opacity: 1; transform: none; }
.cn14-thx { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 41); display: grid; gap: .25em; font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em; color: var(--ink3); opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.cn14-thx span { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; color: var(--ink); }

/* =====================================================================
   EDITORIAL — ít khung, nhiều khoảng thở. Bốn không gian cùng một nhận diện:
   STUDIO SẢN PHẨM (01–03, 14) · PHÒNG DỮ LIỆU (06–07) · BÀN CHỨNG TỪ (09–10) · BÀN SOI VẬT CHỨNG (08, 11) · RỪNG BIÊN TẬP (04–05, 12–13).
   Điều khiển là chữ có gạch chỉ báo, không phải hộp; chỉ chứng từ giấy mới có "tờ giấy".
   ===================================================================== */
.cn { --ez: cubic-bezier(.22, 1, .36, 1); --hair: rgba(242, 237, 225, .12); --hair2: rgba(242, 237, 225, .26); --ivory: #F2EDE1; --gold: #C9AE6B; }
.cn.th-light { --hair: rgba(15, 42, 34, .12); --hair2: rgba(15, 42, 34, .28); }

/* ---- không gian (nền) ---- */
.cn .sc-bg { background: #0C1A14; }
.cn .sc-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cn .sc-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* studio sản phẩm: tường tối ấm, sàn có vũng sáng dưới vật thể, đèn chính mềm từ trên trái */
.cn1-bg, .cn2-bg, .cn3-bg, .cn14-bg { background: linear-gradient(180deg, #0F2019 0%, #0C1A14 52%, #08120E 100%) !important; }
.cn1-bg::before, .cn3-bg::before, .cn14-bg::before { background: radial-gradient(38% 26% at 66% 84%, rgba(222, 198, 148, .17), transparent 72%), radial-gradient(55% 60% at 30% -10%, rgba(255, 241, 214, .07), transparent 70%), linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .28) 100%); }
.cn3-bg::before { background: radial-gradient(30% 22% at 50% 86%, rgba(222, 198, 148, .16), transparent 72%), radial-gradient(55% 60% at 50% -10%, rgba(255, 241, 214, .06), transparent 70%); }
.cn2-bg::before { background: radial-gradient(80% 30% at 50% 62%, rgba(222, 198, 148, .08), transparent 70%); }
.cn1-pool, .cn14-pool { display: none; }
/* rừng biên tập */
.cn4-bg, .cn5-bg, .cn12-bg, .cn13-bg { background: linear-gradient(160deg, #10241C 0%, #0B1913 60%, #09140F 100%) !important; }
.cn5-bg::before { background: radial-gradient(60% 40% at 50% 100%, rgba(222, 198, 148, .08), transparent 70%); }
/* bàn soi vật chứng: than chì trung tính, đèn bàn trên cao */
.cn8-bg, .cn11-bg { background: linear-gradient(180deg, #151816 0%, #101311 60%, #0C0E0D 100%) !important; }
.cn8-bg::before, .cn11-bg::before { background: radial-gradient(50% 55% at 30% 20%, rgba(255, 250, 235, .06), transparent 70%); }
/* phòng dữ liệu: ngà, lưới đo rất nhạt */
.cn6-bg, .cn7-bg { background: #F3EEE2 !important; }
.cn6-bg::before, .cn7-bg::before { background-image: linear-gradient(rgba(15, 42, 34, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 42, 34, .045) 1px, transparent 1px); background-size: calc(var(--u) * 2.5) calc(var(--u) * 2.5); -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); }
/* bàn chứng từ: giấy kraft nhạt */
.cn9-bg, .cn10-bg { background: radial-gradient(90% 80% at 50% 40%, #EFE8D8 0%, #E6DDC9 100%) !important; }
.cn.th-light .sc-bg::after { opacity: .14; mix-blend-mode: multiply; }

/* ---- chữ ---- */
.cn-h1 { letter-spacing: -.026em; }
.cn-h1 em { color: #D5E38A; }
.th-light.cn .cn-h1 em { color: #4C6618; }
.cn .cn-hd .eyebrow { display: flex; align-items: center; gap: .8em; font-size: calc(var(--u) * 1.02); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.th-light.cn .cn-hd .eyebrow { color: #87661A; }
.cn .cn-hd .eyebrow::before { content: ''; width: calc(var(--u) * 2.2); height: 1px; background: currentColor; opacity: .7; }
.cx-lbl { font-size: calc(var(--u) * 1.05); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.th-light.cn .cx-lbl { color: #87661A; }
.cn4-asm > p { font-size: calc(var(--u) * 1.05); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.th-light .cn4-asm > p { color: #87661A; }

/* ---- điều khiển: chữ + gạch chỉ báo ---- */
.cx-seg { gap: 0 calc(var(--u) * 1.8); border-bottom: 1px solid var(--hair); }
.cx-opt { position: relative; min-height: 0; padding: calc(var(--u) * .55) 0 calc(var(--u) * .7); background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink3); font-size: var(--t-md); font-weight: 600; text-align: left; align-items: flex-start; transition: color .35s var(--ez); }
.cx-opt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ez); }
.th-light .cx-opt::after { background: #0F2A22; }
.cx-opt small { color: var(--ink3); opacity: .85; }
.cx-opt:hover { color: var(--ink2); border: 0; transform: none; }
.cx-opt[aria-pressed="true"] { background: none; border: 0; color: var(--ink); box-shadow: none; }
.cx-opt[aria-pressed="true"]::after { transform: scaleX(1); }
.cx-opt[aria-pressed="true"] small { color: var(--ink2); }
.cn4-use .cx-opt { min-height: 0; font-size: var(--t-md); }
.cx-btn { min-height: 0; padding: calc(var(--u) * .45) 0; background: none; border: 0; border-bottom: 1px solid var(--hair2); border-radius: 0; box-shadow: none; color: var(--ink2); font-size: var(--t-sm); font-weight: 600; transition: color .3s var(--ez), border-color .3s var(--ez); }
.cx-btn:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--lime); transform: none; }
.th-light .cx-btn:hover:not(:disabled) { border-bottom-color: #0F2A22; }
.cx-btn[aria-pressed="true"] { background: none; color: var(--ink); border-bottom: 2px solid var(--lime); }
.cx-btn.is-pri { padding: calc(var(--u) * .7) calc(var(--u) * 1.6); border: 0; border-radius: 99px; background: #0F2A22; color: #F4EFE3; box-shadow: 0 10px 24px -14px rgba(15, 42, 34, .7); }
.cx-btn.is-pri:hover:not(:disabled) { background: #1B4436; color: #fff; }
.cn3-tools, .cn7-reset { margin-top: calc(var(--u) * .2); }
.cx-hint { color: var(--ink3); }

/* danh sách chọn (bộ phận hộp, lớp bao gói): hàng có đường kẻ, chọn = chấm lime + chữ sáng */
.cn3-parts, .cn11-list { gap: 0 !important; }
.cn3-part, .cn11-hs { position: relative; min-height: 0; padding: calc(var(--u) * .8) 0 calc(var(--u) * .8) calc(var(--u) * 1.6); background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; color: var(--ink3); box-shadow: none; transition: color .35s var(--ez), padding .45s var(--ez); }
.cn3-parts .cn3-part:last-child { border-bottom: 1px solid var(--hair); }
.cn3-part::before, .cn11-hs::before { content: ''; position: absolute; left: 0; top: 50%; width: calc(var(--u) * .7); height: calc(var(--u) * .7); margin-top: calc(var(--u) * -.35); border-radius: 50%; border: 1.5px solid var(--hair2); background: none; transform: none; transition: background .35s var(--ez), border-color .35s var(--ez), box-shadow .35s var(--ez); }
.cn3-part b { color: inherit; } .cn3-part span { color: var(--ink3); }
.cn3-part:hover, .cn11-hs:hover { color: var(--ink2); border-color: var(--hair); transform: none; }
.cn3-part[aria-pressed="true"], .cn11-hs[aria-pressed="true"] { background: none; color: var(--ivory); padding-left: calc(var(--u) * 2); }
.cn3-part[aria-pressed="true"] span { color: var(--gold); }
.cn3-part[aria-pressed="true"]::before, .cn11-hs[aria-pressed="true"]::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(207, 224, 108, .55); }
.cn11-hs { font-size: var(--t-md); }
.cn11-hs i { display: none; }
.cn11-list .cn11-hs:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
.cn11-zb { margin-top: calc(var(--u) * 1); }

/* ---- 03 studio sản phẩm ---- */
.cx-chip3d { border: 0; padding: 0; font-weight: 500; letter-spacing: .02em; color: var(--ink3); }
.cx-chip3d::before { content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border: 1px dashed currentColor; border-radius: 50%; vertical-align: .05em; }
.cn3-photo img, .cn11-view, .cn8-ph img, .cn5-det figure { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(242, 237, 225, .06); }
.cn .ev-badge { left: .8em; top: .8em; background: rgba(8, 14, 11, .72); color: #F2EDE1; border-radius: 3px; box-shadow: none; letter-spacing: .1em; padding: .35em .7em .35em 1.5em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cn .ev-badge::before { content: ''; position: absolute; left: .65em; top: 50%; width: .45em; height: .45em; margin-top: -.225em; border-radius: 50%; background: var(--lime); }
.cn3-photo .ev-badge { left: auto; right: .8em; }

/* ---- 04 ---- */
.cn4-res { background: none; border: 0; box-shadow: none; padding: calc(var(--u) * .4) 0 calc(var(--u) * .4) calc(var(--u) * 1.6); border-left: 2px solid var(--lime); border-radius: 0; }
.cn4-res::before { display: none; }
.cn4-res b, .cn4-out b { color: var(--ivory); }
.cn4-res b { font-size: calc(var(--u) * 2.6); }
.cn4:not(.kr-on) .cn4-krw { opacity: .55; }
.cn4-kc { background: none; border: 0; border-radius: 0; box-shadow: none; }
.cn4-kr { gap: 0; border: 1px solid var(--hair2); background: linear-gradient(var(--hair2), var(--hair2)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--hair2), var(--hair2)) 0 50% / 100% 1px no-repeat; }
.cn4-kr[data-cell="rou"] .c-rou, .cn4-kr[data-cell="bot"] .c-bot, .cn4-kr[data-cell="lev"] .c-lev, .cn4-kr[data-cell="str"] .c-str { background: rgba(207, 224, 108, .1); border: 0; }
.cn4-kr[data-cell="rou"] .c-rou b, .cn4-kr[data-cell="bot"] .c-bot b, .cn4-kr[data-cell="lev"] .c-lev b, .cn4-kr[data-cell="str"] .c-str b { color: var(--lime); }
.cn4-mk { background: var(--lime); box-shadow: 0 0 0 calc(var(--u) * .4) rgba(207, 224, 108, .14), 0 0 22px rgba(207, 224, 108, .5); transition: left .9s var(--ez), top .9s var(--ez), opacity .5s var(--ez); }
.cn4-out { padding-top: calc(var(--u) * 1); border-top: 1px solid var(--hair); }

/* ---- 05 phòng trưng bày gian hàng ---- */
.cn5-tabs { gap: 0 calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * .6); border-bottom: 1px solid var(--hair); }
.cn5-tab { background: none; border: 0; border-radius: 0; box-shadow: none; padding: calc(var(--u) * .4) 0; opacity: .72; transition: opacity .4s var(--ez); }
.cn5-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -.65); height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ez); }
.cn5-tab:hover { opacity: 1; transform: none; box-shadow: none; }
.cn5-tab[aria-pressed="true"] { opacity: 1; background: none; box-shadow: none; }
.cn5-tab[aria-pressed="true"]::after { transform: scaleX(1); }
.cn5-tab img { background: radial-gradient(70% 60% at 50% 60%, rgba(242, 237, 225, .1), transparent 75%); border-radius: 0; }
.cn5-tk { position: static; display: inline-block; margin-top: .15em; max-width: none; padding: 0; border: 0 !important; background: none !important; font-size: calc(var(--u) * .9); letter-spacing: .08em; color: var(--ink3) !important; grid-column: 2; }
.cn5-tk.is-real { color: var(--lime) !important; }
.cn5-all { background: none; border: 0; border-left: 1px solid var(--hair); border-radius: 0; box-shadow: none; color: var(--ink2); }
.cn5-all:hover { color: var(--ink); transform: none; box-shadow: none; }
.cn5-all[aria-pressed="true"] { background: none; color: var(--lime); }
.cn5-det figure { background: radial-gradient(65% 30% at 50% 88%, rgba(222, 198, 148, .16), transparent 75%), radial-gradient(80% 80% at 50% 40%, rgba(242, 237, 225, .05), transparent 80%); border-radius: 0; box-shadow: none; }
.cn5-det figure img { filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .5)); }
.cn5.is-real-sel .cn5-det figure img, .cn5-det figure img[src*="ev-"] { object-fit: cover; border-radius: 4px; filter: none; }
.cn5-st, .cn5-st.is-real { left: 0; bottom: calc(var(--u) * -.2); background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; font-weight: 600; letter-spacing: .06em; color: var(--ink3); }
.cn5-st.is-real { color: var(--lime); }
.cn5-det figure { overflow: visible; }
.cn5-det figure img[src*="ev-"] + .cn5-st { bottom: calc(var(--u) * -2); }
.cn5-dn em { background: none; border: 0; padding: 0; color: var(--lime); letter-spacing: .1em; }
.cn5-rows div { border-bottom-color: var(--hair); }

/* ---- 06–07 phòng dữ liệu ---- */
.cn6-seg { border-radius: 2px; box-shadow: none; background-image: none; }
.cn6-seg[aria-pressed="true"] { box-shadow: 0 calc(var(--u) * .5) 0 -1px #F3EEE2, 0 calc(var(--u) * .5) 0 0 #0F2A22; transform: none; }
.cn6-rd b { color: #87661A; letter-spacing: .06em; text-transform: uppercase; font-size: calc(var(--u) * 1.1); }
.cn7-bar { border-radius: 0; box-shadow: none; }
.cn7-bar i { background-image: none; }
.cn7-row { border-bottom: 1px solid rgba(15, 42, 34, .08); }
.cn7-badge { padding: 0 0 0 1.1em; border: 0; border-radius: 0; position: relative; color: #4E6B17; background: none !important; box-shadow: none !important; }
.cn7-badge::before { content: ''; position: absolute; left: 0; top: .45em; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.cn7.is-sim .cn7-badge { color: #87661A; }
.cn7-dec { background: #0F2A22; border-radius: 2px; box-shadow: 0 24px 40px -26px rgba(15, 42, 34, .8); }

/* ---- 08 bàn soi giao dịch ---- */
.cn8-ph img { border-radius: 3px; }
.cn8-eq { gap: calc(var(--u) * 1.8); align-items: flex-end; padding-top: calc(var(--u) * 1); border-top: 1px solid var(--hair); }
.cn8-eq span { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--ink3); }
.cn8-eq span b { font-size: calc(var(--u) * 2.4); font-weight: 600; color: var(--ink2); }
.cn8-eq em { font-size: calc(var(--u) * 2); color: var(--ink3); padding-bottom: calc(var(--u) * 1.4); }
.cn8-eq .is-paid { background: none; box-shadow: none; color: var(--lime); }
.cn8-eq .is-paid b { color: var(--lime); font-size: calc(var(--u) * 3.2); font-weight: 700; }

/* ---- 09–10 bàn chứng từ: chứng từ là tờ giấy ---- */
.cn9-d, .cn10-col .bgp { background: #FFFDF8; border: 0; border-radius: 2px; box-shadow: 0 1px 0 rgba(15, 42, 34, .05), 0 1px 2px rgba(15, 42, 34, .08), 0 14px 28px -18px rgba(15, 42, 34, .4); }
.cn9-d { transition: transform .5s var(--ez), box-shadow .5s var(--ez); }
.cn9-d::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #C9AE6B; opacity: .8; }
.cn9-d:has(.tag.ok)::before { background: #4E6B17; }
.cn9-d.is-none, .cn10-col.is-none .bgp { background: rgba(255, 253, 248, .35); box-shadow: none; outline: 1.5px dashed rgba(169, 81, 44, .55); outline-offset: -1.5px; }
.cn9-d.is-none::before { display: none; }
.cn9-d:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15, 42, 34, .08), 0 22px 34px -20px rgba(15, 42, 34, .5); }
.cn9-d[aria-pressed="true"] { transform: translateY(-6px); box-shadow: 0 0 0 1.5px #0F2A22, 0 26px 40px -22px rgba(15, 42, 34, .6); }
.cn9-det { background: #FFFDF8; border: 0; border-radius: 2px; box-shadow: 0 1px 2px rgba(15, 42, 34, .08), 0 30px 50px -34px rgba(15, 42, 34, .6); }
.cn9-det.st-open { border: 0; outline: 1.5px dashed rgba(169, 81, 44, .6); outline-offset: -1.5px; }
.cn10-r { border: 0; border-top: 1px solid rgba(15, 42, 34, .08); border-radius: 0; }
.cn10-r[aria-pressed="true"] { background: rgba(207, 224, 108, .22); border-color: rgba(15, 42, 34, .08); }

/* ---- 12 ---- */
.cn12-c { background: none; border: 0; box-shadow: none; border-radius: 0; padding-left: 0; }
.cn12-c.hb { padding-left: calc(var(--u) * 1.6); border-left: 1px solid var(--hair); }
.cn12-im { background: radial-gradient(60% 26% at 50% 86%, rgba(222, 198, 148, .16), transparent 75%); }
.cn12-il { border: 0; padding: 0; }

/* ---- 13 ---- */
.cn13-lead { background: none; border: 0; border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); border-radius: 0; padding-inline: 0; box-shadow: none; }
.cn13-ws li { border-top: 1px solid var(--hair2); }
.cn13-ws li::before { content: ''; display: block; width: calc(var(--u) * 2.4); height: 2px; margin-top: -1px; background: var(--lime); }
.cn13-n { color: var(--gold); }

/* ---- 02 ---- */
.cn2-ic { background: #0F2119; border: 1px solid var(--hair2); box-shadow: none; transition: border-color .6s var(--ez), box-shadow .6s var(--ez); }
.cn2-nodes li.is-lit .cn2-ic { background: #12271E; border-color: rgba(207, 224, 108, .7); box-shadow: 0 0 26px rgba(207, 224, 108, .22); }
.cn2-nodes li.is-lit .cn2-ic svg { stroke: var(--lime); }
.cn2-rail { background: var(--hair); height: 1px; }
.cn2-run { background: linear-gradient(90deg, rgba(207, 224, 108, .15), var(--lime)); }

/* ---- nhịp vào cảnh: vật thể chính dẫn, dữ liệu theo sau, nhãn cuối (chỉ transform + opacity) ---- */
@keyframes cnIn { from { filter: opacity(0); translate: 0 calc(var(--u) * .9); } to { filter: opacity(1); translate: 0 0; } }
body.present:not(.safe) .cn.is-active .fr > :not(.slot):not(.cn3-pad):not(.cn8-box) { animation: cnIn .8s var(--ez) backwards; }
body.present:not(.safe) .cn.is-active .fr > :nth-child(2) { animation-delay: .05s; } body.present:not(.safe) .cn.is-active .fr > :nth-child(3) { animation-delay: .16s; }
body.present:not(.safe) .cn.is-active .fr > :nth-child(4) { animation-delay: .26s; } body.present:not(.safe) .cn.is-active .fr > :nth-child(5) { animation-delay: .34s; }
body.present:not(.safe) .cn.is-active .fr > :nth-child(6) { animation-delay: .42s; } body.present:not(.safe) .cn.is-active .fr > :nth-child(n+7) { animation-delay: .5s; }
.cx-swap { animation: cxSwap .5s var(--ez); }
@keyframes cxSwap { from { filter: opacity(.1); translate: 0 calc(var(--u) * .5); } to { filter: opacity(1); translate: 0 0; } }
.cn7-bar i { transition: width .9s var(--ez); }
.cn7-row { transition: transform .95s var(--ez); }


/* =====================================================================
   RECONSTRUCTION — cảnh 02, 03, 04, 06, 08, 13 dựng lại bố cục
   ===================================================================== */
/* ---- 02 · phòng triển lãm sáu khung ---- */
.q2-sub { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.4); font-size: var(--t-md); color: var(--ink2); }
.q2-gal { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 17.4); width: calc(var(--u) * 88); height: calc(var(--u) * 27.6); display: flex; gap: calc(var(--u) * .5); margin: 0; padding: 0; list-style: none; }
.q2-gal li { flex: 1 1 0; min-width: 0; transition: flex-grow .8s var(--ez); }
.q2-gal li:hover, .q2-gal li:focus-within { flex-grow: 1.75; }
.q2-p { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: radial-gradient(80% 50% at 50% 70%, rgba(222, 198, 148, .12), transparent 70%), linear-gradient(180deg, #13271F, #0B1712); text-align: left; }
.q2-p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 11, 0) 40%, rgba(8, 14, 11, .9) 100%); pointer-events: none; }
.q2-v { position: absolute; left: 0; right: 0; top: 0; bottom: 30%; display: grid; place-items: center; transition: transform 1s var(--ez); }
.q2-p:hover .q2-v { transform: scale(1.04); }
.q2-obj { width: 78%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .5)); }
.q2-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.78); }
.q2-trio { display: flex; align-items: flex-end; width: 92%; }
.q2-trio img { width: 46%; margin-right: -12%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); }
.q2-bars { display: flex; align-items: flex-end; gap: 9%; width: 60%; height: 62%; }
.q2-bars i { flex: 1; height: calc(var(--h) * 1%); background: rgba(242, 237, 225, .55); }
.q2-bars i:first-child { background: var(--lime); }
.q2-team { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--u) * .5); }
.q2-team i { display: grid; place-items: center; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font: 700 calc(var(--u) * .85) var(--font-ui); font-style: normal; }
.q2-t { position: absolute; z-index: 1; left: calc(var(--u) * 1.1); right: calc(var(--u) * 1.1); bottom: calc(var(--u) * 1.1); display: grid; gap: .15em; }
.q2-no { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 2.4); line-height: 1; color: var(--gold); font-variation-settings: 'opsz' 96; }
.q2-n { font-size: var(--t-md); font-weight: 700; line-height: 1.15; }
.q2-q { font-size: var(--t-xs); color: var(--ink2); line-height: 1.3; }
.q2-c { font-size: var(--t-xs); font-weight: 600; color: var(--lime); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ez), transform .4s var(--ez); }
.q2-p:hover .q2-c, .q2-p:focus-visible .q2-c { opacity: 1; transform: none; }
.q2-foot { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 47.4); display: flex; gap: 1em; align-items: baseline; font-size: var(--t-sm); color: var(--ink2); }
.q2-foot span { font-size: calc(var(--u) * 1.02); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
@keyframes q2Rise { from { filter: opacity(0); translate: 0 calc(var(--u) * 2.4); } to { filter: opacity(1); translate: 0 0; } }
body.present:not(.safe) .q2.is-active .q2-gal li { animation: q2Rise .9s var(--ez) backwards; animation-delay: calc(.25s + var(--i) * .5s); }

/* ---- 03 · studio toàn khung ---- */
.q3-slot, .q3-pad, .q3-photo { left: calc(var(--u) * 3); top: calc(var(--u) * 15); width: calc(var(--u) * 64); height: calc(var(--u) * 37); }
.q3-slot .s-hero { opacity: 0; } .q3.is-open .q3-slot .s-hero { opacity: 1; } .q3.is-open .q3-slot .s-closed { opacity: 0; }
.scene.stage-on.q3 .q3-slot .slot-still { opacity: 0; }
.q3-pad { position: absolute; z-index: 6; cursor: grab; touch-action: none; }
.q3-pad.is-grab { cursor: grabbing; }
body:not(.stage-live) .q3-pad { cursor: default; pointer-events: none; }
.q3-photo { position: absolute; margin: 0; opacity: 0; visibility: hidden; transform: translateX(calc(var(--u) * 3)); transition: opacity .6s var(--ez), transform .8s var(--ez), visibility 0s .6s; }
.q3-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.q3-photo .ev-badge { left: auto; right: 1em; }
.q3.is-photo .q3-photo { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ez), transform .8s var(--ez), visibility 0s; }
.q3.is-photo .q3-slot, .q3.is-photo .q3-chip { opacity: 0; transition: opacity .4s; }
.q3-hd { width: calc(var(--u) * 62); }
.q3-brief { font-size: var(--t-sm); color: var(--ink2); margin-top: calc(var(--u) * .4); }
.q3-chip { left: calc(var(--u) * 6); top: calc(var(--u) * 50.2); }
.q3-rail { position: absolute; left: calc(var(--u) * 71); top: calc(var(--u) * 16); width: calc(var(--u) * 23); display: grid; gap: calc(var(--u) * .9); }
.q3-parts { display: grid; }
.q3-part { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .6em; padding: calc(var(--u) * .85) 0 calc(var(--u) * .85) calc(var(--u) * 1.6); border-top: 1px solid var(--hair); color: var(--ink3); transition: color .35s var(--ez), padding .45s var(--ez); }
.q3-parts .q3-part:last-child { border-bottom: 1px solid var(--hair); }
.q3-part b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.q3-part span { font-size: var(--t-sm); }
.q3-part::before { content: ''; position: absolute; left: 0; top: 50%; width: calc(var(--u) * .7); height: calc(var(--u) * .7); margin-top: calc(var(--u) * -.35); border-radius: 50%; border: 1.5px solid var(--hair2); transition: background .35s, border-color .35s, box-shadow .35s; }
.q3-part:hover { color: var(--ink2); }
.q3-part[aria-pressed="true"] { color: var(--ivory); padding-left: calc(var(--u) * 2); }
.q3-part[aria-pressed="true"] span { color: var(--gold); }
.q3-part[aria-pressed="true"]::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(207, 224, 108, .55); }
.q3-tools { display: flex; gap: calc(var(--u) * 1.6); }
.q3-read { min-height: 4em; font-size: var(--t-sm); color: var(--ink2); line-height: 1.38; }
.q3-nogl { display: none; font-size: var(--t-xs); color: var(--gold); line-height: 1.35; }
body.present:not(.stage-live) .q3-drag { display: none; }
body.present:not(.stage-live) .q3-nogl { display: block; }
body.present.stage-live .q3-nogl, .q3.is-photo .q3-drag, .q3.is-photo .q3-nogl { display: none; }

/* ---- 04 · hai bối cảnh → Kraljic ---- */
.q4-ha, .q4-hb { transition: opacity .5s var(--ez); }
.q4-hb { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.q4.kr-on .q4-ha { opacity: 0; } .q4.kr-on .q4-hb { opacity: 1; }
.cn-hd .cn-h1 { position: relative; }
.q4-ph { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 7.2); }
.q4-ph .cx-opt { font-size: var(--t-sm); }
.q4-a, .q4-b { position: absolute; inset: 0; transition: opacity .6s var(--ez), transform .8s var(--ez), visibility 0s; }
.q4.kr-on .q4-a { opacity: 0; transform: translateX(calc(var(--u) * -3)); visibility: hidden; pointer-events: none; transition: opacity .5s var(--ez), transform .7s var(--ez), visibility 0s .5s; }
.q4-b { opacity: 0; transform: translateX(calc(var(--u) * 3)); visibility: hidden; pointer-events: none; transition: opacity .5s var(--ez), transform .7s var(--ez), visibility 0s .5s; }
.q4.kr-on .q4-b { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .6s var(--ez) .15s, transform .8s var(--ez) .15s, visibility 0s; }
.q4-scenes { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.6); width: calc(var(--u) * 88); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.q4-scene { position: relative; display: grid; grid-template-rows: calc(var(--u) * 17) auto; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .8); color: var(--ink3); border-bottom: 1px solid var(--hair); transition: color .5s var(--ez); }
.q4-scene svg { width: 100%; height: 100%; background: radial-gradient(60% 60% at 50% 60%, rgba(242, 237, 225, .05), transparent 75%); transition: background .6s var(--ez); }
.q4-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ez); }
.q4-scene span { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.q4-scene b { font-size: var(--t-lg); font-weight: 700; }
.q4-scene small { font-size: var(--t-xs); font-weight: 500; color: var(--ink3); margin: 0; letter-spacing: .04em; font-family: var(--font-ui); }
.q4-scene:hover { color: var(--ink2); }
.q4-scene[aria-pressed="true"] { color: var(--ivory); }
.q4-scene[aria-pressed="true"] svg { background: radial-gradient(60% 60% at 50% 60%, rgba(207, 224, 108, .12), transparent 75%); }
.q4-scene[aria-pressed="true"]::after { transform: scaleX(1); }
.q4-res { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 38.6); width: calc(var(--u) * 58); display: grid; gap: calc(var(--u) * .4); padding-left: calc(var(--u) * 1.6); border-left: 2px solid var(--lime); }
.q4-res b { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: -.02em; }
.q4-res span { font-size: var(--t-md); color: var(--ink2); }
.q4-note { position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 39); width: calc(var(--u) * 26); font-size: var(--t-xs); color: var(--ink3); line-height: 1.4; }
.q4-kr { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 14.4); width: calc(var(--u) * 46); height: calc(var(--u) * 33); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border: 1px solid var(--hair2); background: linear-gradient(var(--hair2), var(--hair2)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--hair2), var(--hair2)) 0 50% / 100% 1px no-repeat; }
.q4-kc { display: grid; align-content: end; gap: .2em; padding: calc(var(--u) * 1.4); transition: background .6s var(--ez); }
.q4-kc b { font-size: var(--t-xl); font-weight: 700; color: var(--ink3); transition: color .5s var(--ez); }
.q4-kc span { font-size: var(--t-sm); color: var(--ink3); }
.q4-kr[data-cell="rou"] .c-rou, .q4-kr[data-cell="bot"] .c-bot, .q4-kr[data-cell="lev"] .c-lev, .q4-kr[data-cell="str"] .c-str { background: radial-gradient(80% 80% at 70% 30%, rgba(207, 224, 108, .16), transparent 80%); }
.q4-kr[data-cell="rou"] .c-rou b, .q4-kr[data-cell="bot"] .c-bot b, .q4-kr[data-cell="lev"] .c-lev b, .q4-kr[data-cell="str"] .c-str b { color: var(--ivory); }
.q4-ky { position: absolute; left: calc(var(--u) * -2.4); top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-size: var(--t-xs); color: var(--ink3); letter-spacing: .06em; }
.q4-kx { position: absolute; right: 0; bottom: calc(var(--u) * -2.2); font-size: var(--t-xs); color: var(--ink3); letter-spacing: .06em; }
.q4-mk { position: absolute; width: calc(var(--u) * 7); height: calc(var(--u) * 6); margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3.5); transition: left 1s var(--ez), top 1s var(--ez); left: 75%; top: 28%; pointer-events: none; }
.q4-mk img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.q4-mk::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 22%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .35), transparent 70%); }
.q4-kr[data-cell="rou"] .q4-mk { left: 30%; top: 66%; } .q4-kr[data-cell="bot"] .q4-mk { left: 80%; top: 66%; }
.q4-kr[data-cell="lev"] .q4-mk { left: 30%; top: 16%; } .q4-kr[data-cell="str"] .q4-mk { left: 80%; top: 16%; }
.q4-asm { position: absolute; left: calc(var(--u) * 61); top: calc(var(--u) * 14.4); width: calc(var(--u) * 33); display: grid; gap: calc(var(--u) * .7); align-content: start; }
.q4-asm .cx-seg { display: grid; grid-template-columns: 1fr 1fr; }
.q4-out { display: grid; gap: calc(var(--u) * .4); margin-top: calc(var(--u) * 1.2); padding-top: calc(var(--u) * 1.2); border-top: 1px solid var(--hair); }
.q4-out b { font-size: var(--t-xl); font-weight: 700; color: var(--ivory); }
.q4-out span { font-size: var(--t-sm); color: var(--ink2); }

/* ---- 06 · trọng số = sức chứa ---- */
.q6-row { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.6); width: calc(var(--u) * 88); height: calc(var(--u) * 22.4); display: flex; gap: calc(var(--u) * 1.2); }
.q6-v { flex: var(--w) 1 0; min-width: 0; display: grid; grid-template-rows: 1fr auto auto; gap: calc(var(--u) * .4); text-align: left; color: #0F2A22; }
.q6-cap { position: relative; display: block; border: 1.5px solid rgba(15, 42, 34, .3); border-radius: 2px; background: rgba(255, 255, 255, .4); overflow: hidden; transition: border-color .3s var(--ez); }
.q6-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f) * 100%); background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1.1s var(--ez); transition-delay: calc(var(--i) * .12s); }
.q6.at1 .q6-fill, .q6:not([data-k]) .q6-fill { transform: none; }
.q6-pt { position: absolute; left: calc(var(--u) * .8); top: calc(var(--u) * .5); font-size: var(--t-lg); font-weight: 700; opacity: 0; transition: opacity .5s var(--ez); transition-delay: calc(.6s + var(--i) * .12s); }
.q6.at1 .q6-pt, .q6:not([data-k]) .q6-pt { opacity: 1; }
.q6-w { font-size: calc(var(--u) * 3.2); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.q6-nm { font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.q6-v:hover .q6-cap { border-color: rgba(15, 42, 34, .6); }
.q6-v[aria-pressed="true"] .q6-cap { border: 2.5px solid #0F2A22; }
.q6-sum { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 38.6); display: flex; align-items: baseline; gap: .6em; font-size: var(--t-sm); color: var(--ink3); }
.q6-sum b { font-size: var(--t-xl); font-weight: 700; color: #0F2A22; }
.q6-sum i { font-style: normal; color: var(--ink3); }
.q6-sum small { font-size: var(--t-xs); color: var(--ink3); margin: 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; }
.q6-sum .q6-tot { color: #4E6B17; }
.q6:not(.at1)[data-k] .q6-sum .q6-tot, .q6:not(.at1)[data-k] .q6-sum i, .q6:not(.at1)[data-k] .q6-sum span:nth-of-type(2), .q6:not(.at1)[data-k] .q6-sum small { opacity: 0; }
.q6-sum > * { transition: opacity .6s var(--ez) .8s; }
.q6-rd { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 42.6); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .3); }
.q6-rd b { font-size: calc(var(--u) * 1.05); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #87661A; }
.q6-rd span { font-size: var(--t-md); }
.q6-rd em { font-style: normal; font-size: var(--t-sm); font-weight: 600; color: #4E6B17; }
.q6-eq { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 50.3); font-size: var(--t-xs); color: var(--ink3); }

/* ---- 08 · dòng tiền ---- */
.q8-row { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.8); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }
.q8-ph { position: relative; display: grid; grid-template-rows: calc(var(--u) * 22) auto; gap: calc(var(--u) * .7); text-align: left; transition: grid-template-rows .9s var(--ez); }
.q8.at1 .q8-ph { grid-template-rows: calc(var(--u) * 7.4) auto; }
.q8-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8); }
.q8-cap { display: grid; gap: .05em; }
.q8-cap b { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; transition: font-size .8s var(--ez); }
.q8.at1 .q8-cap b { font-size: var(--t-md); }
.q8-cap span { font-size: var(--t-md); color: var(--ink2); }
.q8.at1 .q8-cap span { font-size: var(--t-xs); }
.q8-cap i { font-style: normal; font-size: var(--t-xs); color: var(--ink3); }
.q8.at1 .q8-cap i { display: none; }
.q8-flow { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 28.4); width: calc(var(--u) * 88); opacity: 0; visibility: hidden; transition: opacity .6s var(--ez) .25s, visibility 0s .8s; }
.q8.at1 .q8-flow, .q8:not([data-k]) .q8-flow { opacity: 1; visibility: visible; transition: opacity .6s var(--ez) .25s, visibility 0s; }
.q8-wf { position: relative; height: calc(var(--u) * 15); margin: calc(var(--u) * 2.6) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--hair2); }
.q8-b { position: relative; }
.q8-b i { position: absolute; left: 22%; right: 22%; bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); background: rgba(242, 237, 225, .72); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--ez); transition-delay: calc(.3s + var(--i) * .22s); }
.q8-b.is-neg i { background: #C9785A; transform-origin: 50% 0; }
.q8-b.is-pos i { background: var(--gold); }
.q8-b.is-paid i { background: var(--lime); }
.q8.at1 .q8-b i, .q8:not([data-k]) .q8-b i { transform: none; }
.q8-b b { position: absolute; left: 0; right: 0; bottom: calc(var(--hi) * 100% + var(--u) * .4); text-align: center; font-size: var(--t-sm); font-weight: 700; opacity: 0; transition: opacity .4s var(--ez); transition-delay: calc(.6s + var(--i) * .22s); }
.q8-b.is-paid b { font-size: var(--t-lg); color: var(--lime); }
.q8-b span { position: absolute; left: 0; right: 0; top: calc(100% + var(--u) * .5); text-align: center; font-size: var(--t-xs); color: var(--ink2); }
.q8.at1 .q8-b b, .q8:not([data-k]) .q8-b b { opacity: 1; }
.q8-ref { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px dashed var(--gold); pointer-events: none; opacity: 0; transition: opacity .5s var(--ez) 1.6s; }
.q8-ref span { position: absolute; right: 0; bottom: .3em; font-size: var(--t-xs); color: var(--gold); }
.q8.at1 .q8-ref, .q8:not([data-k]) .q8-ref { opacity: 1; }
.q8-lim { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 50.2); font-size: var(--t-sm); color: var(--ink2); opacity: 0; transition: opacity .5s var(--ez); }
.q8-lim b { color: #E39A72; font-weight: 700; }
.q8.at2 .q8-lim, .q8:not([data-k]) .q8-lim { opacity: 1; }
.q8 .cn8-box { z-index: 8; }

/* ---- 13 · chuỗi trách nhiệm ---- */
.q13-path { position: absolute; left: 0; top: 0; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); overflow: visible; pointer-events: none; }
.q13-path path { fill: none; stroke: var(--gold); stroke-width: .16; stroke-opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 0; }
body.present:not(.safe) .q13.is-active .q13-path path { animation: q13Draw 2.4s var(--ez) .3s backwards; }
@keyframes q13Draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.q13-hub { position: absolute; transform: translate(-50%, calc(var(--u) * -2.6)); width: calc(var(--u) * 14); display: grid; justify-items: center; text-align: center; gap: calc(var(--u) * .3); }
.q13-mo { display: grid; place-items: center; flex: none; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%; border: 1.5px solid var(--gold); background: #0E1F18; color: var(--gold); font: 700 calc(var(--u) * .95) var(--font-ui); font-style: normal; letter-spacing: .02em; }
.q13-mo.is-hub { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); font-size: calc(var(--u) * 1.6); border-width: 2px; background: radial-gradient(circle at 50% 35%, #1D3D30, #0E1F18); color: var(--ivory); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(201, 174, 107, .12); }
.q13-hub b { font-size: var(--t-sm); font-weight: 700; margin-top: calc(var(--u) * .3); }
.q13-hub span { font-size: var(--t-xs); color: var(--ink2); line-height: 1.3; }
.q13-st { position: absolute; width: 0; height: 0; }
.q13-dot { position: absolute; left: calc(var(--u) * -.6); top: calc(var(--u) * -.6); width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 calc(var(--u) * .35) #0B1913, 0 0 0 calc(var(--u) * .5) rgba(207, 224, 108, .4); }
.q13-card { position: absolute; left: calc(var(--u) * -9); width: calc(var(--u) * 18); display: grid; gap: calc(var(--u) * .55); }
.q13-st.is-up .q13-card { bottom: calc(var(--u) * 1.6); }
.q13-st.is-dn .q13-card { top: calc(var(--u) * 1.6); }
.q13-n { display: flex; gap: .5em; align-items: baseline; font-size: var(--t-sm); font-weight: 700; line-height: 1.25; }
.q13-n span { color: var(--gold); font-weight: 600; }
.q13-m { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * .7); align-items: center; }
.q13-m p { display: grid; gap: .05em; }
.q13-m b { font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.q13-m span { font-size: var(--t-xs); color: var(--ink2); line-height: 1.25; }
.q13 em { font-style: normal; font-size: var(--t-xs); font-weight: 700; color: var(--lime); opacity: 0; transition: opacity .5s var(--ez); }
.q13.at1 em, .q13:not([data-k]) em { opacity: 1; }
.q13 .cn-h1 em { opacity: 1; font-size: inherit; font-weight: inherit; color: #D5E38A; }
@keyframes q13Pop { from { filter: opacity(0); translate: 0 calc(var(--u) * 1); } to { filter: opacity(1); translate: 0 0; } }
body.present:not(.safe) .q13.is-active .q13-st { animation: q13Pop .7s var(--ez) backwards; animation-delay: calc(.6s + var(--i) * .3s); }

/* Chế độ an toàn: giữ đủ nội dung, bỏ độ trễ và chuyển động nặng (ảnh tĩnh thay 3D, số hiện ngay) */
body.safe .cn, body.safe .cn *, body.safe .cn *::before, body.safe .cn *::after { transition-duration: .2s !important; transition-delay: 0s !important; animation: none !important; }
body.safe .cn .sc-bg::after { display: none; }
@media (prefers-reduced-motion: reduce) { .cn *, .cn *::before, .cn *::after { transition-duration: .01s !important; transition-delay: 0s !important; } }
.veil-sweep { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(232, 240, 196, .07) 45%, rgba(255, 252, 236, .14) 50%, rgba(232, 240, 196, .07) 55%, transparent 70%); mix-blend-mode: screen; }
.cn5-det figure { height: calc(var(--u) * 23.6); align-self: start; }
.cn5-det figure img[src*="ev-"] { position: absolute; inset: 0; width: 100%; height: 100%; }
.cn5-det figure img[src*="ev-"] + .cn5-st { left: calc(var(--u) * .8); bottom: calc(var(--u) * .8); padding: .35em .7em; border-radius: 3px; background: rgba(8, 14, 11, .74); }
.q3-slot, .q3-pad, .q3-photo { top: calc(var(--u) * 17.4); height: calc(var(--u) * 34.4); }
.q3-brief { max-width: calc(var(--u) * 60); }
.q8-ref span { right: auto; left: 0; }
.focus-hint { background: rgba(8, 14, 11, .82); color: #F2EDE1; border: 1px solid rgba(242, 237, 225, .18); font-size: calc(var(--u) * 1.0); padding: .55em 1em; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.focus-hint span { color: #A3B4A7; }
.q4-a, .q4-b, .q4.kr-on .q4-b { pointer-events: none !important; }
.q4-a > *, .q4.kr-on .q4-b > * { pointer-events: auto; }
.q4.kr-on .q4-a > * { pointer-events: none; }
.q4-ph { z-index: 3; }
.q8-key { margin-left: 1.4em; color: var(--gold); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.q8-lim { top: calc(var(--u) * 49.6); }
body.present .q3.is-photo .q3-nogl, body.present .q3.is-photo .q3-drag { display: none; }
.q3-read { min-height: 3.2em; }

/* ---- 11 · phòng soi vật chứng: mô hình 3D tách lớp + ảnh thật đối chiếu ---- */
.q11-slot, .q11-pad { left: calc(var(--u) * 3); top: calc(var(--u) * 13); width: calc(var(--u) * 44); height: calc(var(--u) * 34); }
.q11-slot .s-pack { opacity: 0; } .q11:not(.is-ex) .q11-slot .s-pack { opacity: 1; } .q11:not(.is-ex) .q11-slot .s-packx { opacity: 0; }
.scene.stage-on.q11 .q11-slot .slot-still { opacity: 0; }
.q11-pad { position: absolute; z-index: 6; cursor: grab; touch-action: none; }
.q11-pad.is-grab { cursor: grabbing; }
body:not(.stage-live) .q11-pad { pointer-events: none; cursor: default; }
body:not(.stage-live) .q11-drag { display: none; }
.q11-chip { left: calc(var(--u) * 6); top: calc(var(--u) * 50.4); }
.q11-tools { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 46.4); display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.q11-tools .cx-opt { font-size: var(--t-sm); }
.q11 .cn11-view { left: calc(var(--u) * 48.5); top: calc(var(--u) * 13.4); width: calc(var(--u) * 15.4); height: calc(var(--u) * 27.4); }
.q11-zb { position: absolute; z-index: 3; right: calc(var(--u) * .6); bottom: calc(var(--u) * .6); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: rgba(8, 14, 11, .78) !important; color: #F2EDE1; font-size: calc(var(--u) * 1.2); display: grid; place-items: center; }
.q11 .cn11-list { left: calc(var(--u) * 48.5); top: calc(var(--u) * 41.6); width: calc(var(--u) * 15.4); display: grid; grid-template-columns: 1fr; }
.q11 .cn11-hs { min-height: 0; padding: calc(var(--u) * .25) 0 calc(var(--u) * .25) calc(var(--u) * 1.4); font-size: var(--t-xs); border-top: 0; }
.q11 .cn11-list .cn11-hs:nth-last-child(2) { border-bottom: 0; }
.q11 .cn11-hs::before { width: calc(var(--u) * .55); height: calc(var(--u) * .55); margin-top: calc(var(--u) * -.275); }
.q11 .cn11-pn { left: calc(var(--u) * 66.5); top: calc(var(--u) * 13.4); width: calc(var(--u) * 27.5); gap: calc(var(--u) * .9); }
.q11 .cn11-pt { font-size: var(--t-xl); }
.q11 .cn11-q p { font-size: var(--t-sm); }
.q11 .cn11-b7 span b { font-size: var(--t-lg); }
.stl.sl-c .sl-t b { font-size: calc(var(--u) * 1.6); }
.stl.sl-c .sl-t span { font-size: calc(var(--u) * 1.05); white-space: nowrap; }
.q11-chip { top: calc(var(--u) * 49.6); }
.q11-tools { top: calc(var(--u) * 45.6); }

/* ---- 04 · bối cảnh minh họa có chiều sâu + hộp 3D di chuyển giữa quầy bán và bàn văn phòng ---- */
.q4-slot { position: absolute; z-index: 2; left: calc(var(--u) * 17.4); top: calc(var(--u) * 20.3); width: calc(var(--u) * 10); height: calc(var(--u) * 7.8); pointer-events: none; transition: left 1.15s cubic-bezier(.65,0,.25,1); }
.q4-slot .slot-still { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); transition: opacity .4s var(--ez); }
.q4.use-in .q4-slot { left: calc(var(--u) * 69.4); }
.q4-slot.is-hop { animation: q4hop 1.15s cubic-bezier(.45,0,.3,1); }
@keyframes q4hop { 0%,100% { transform: none; } 45% { transform: translateY(calc(var(--u) * -4.2)); } }
.scene.stage-on.q4 .q4-slot .slot-still, .scene.stage-on.q4 .q4-mk .slot-still { opacity: 0; }
.scene.stage-on.q4 .q4-mk::before { opacity: 1; }
.q4-scene svg { overflow: visible; }
.q4-scene svg > *:not(.q4-flow):not(.q4-tag) { transition: opacity .7s var(--ez), filter .7s var(--ez); }
.q4-scene[aria-pressed="false"] svg { filter: saturate(.25) brightness(.62); transition: filter .7s var(--ez); }
.q4-scene[aria-pressed="true"] svg { filter: none; transition: filter .7s var(--ez); }
.q4-flow { stroke-dashoffset: 0; opacity: 0; transition: opacity .5s var(--ez); }
.q4-tag { opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ez) .35s, transform .5s var(--ez) .35s; }
.q4-scene[aria-pressed="true"] .q4-flow { opacity: .95; animation: q4dash 1.4s linear infinite; }
.q4-scene[aria-pressed="true"] .q4-tag { opacity: 1; transform: none; }
@keyframes q4dash { to { stroke-dashoffset: -18; } }
.q4-lamp ellipse { animation: q4glow 4s ease-in-out infinite; }
@keyframes q4glow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.q4-sky { transition: opacity .8s var(--ez); }
.q4-scene[aria-pressed="false"] .q4-sky { opacity: .3; }
.q4.kr-on .q4-slot { opacity: 0; transition: opacity .3s var(--ez); }
@media (prefers-reduced-motion: reduce) { .q4-flow, .q4-lamp ellipse, .q4-slot.is-hop { animation: none !important; } .q4-slot { transition: none; } }
.safe .q4-flow, .safe .q4-lamp ellipse { animation: none !important; }

/* ---- 04 · câu hỏi nhanh A/B/C → tiết lộ → hai bối cảnh → Kraljic ---- */
.q4-hq { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; transition: opacity .5s var(--ez); }
.q4.ph-q .q4-ha { opacity: 0; } .q4.ph-q .q4-hq { opacity: 1; }
.q4-q { position: absolute; inset: 0; transition: opacity .5s var(--ez), transform .7s var(--ez), visibility 0s; pointer-events: none !important; }
.q4:not(.ph-q) .q4-q { opacity: 0; transform: translateX(calc(var(--u) * -3)); visibility: hidden; transition: opacity .45s var(--ez), transform .6s var(--ez), visibility 0s .45s; }
.q4.ph-q .q4-q > * { pointer-events: auto; }
.q4:not(.ph-q) .q4-q > * { pointer-events: none; }
.q4.ph-q .q4-a { opacity: 0; transform: translateX(calc(var(--u) * 3)); visibility: hidden; transition: opacity .4s var(--ez), transform .6s var(--ez), visibility 0s .4s; }
.q4.ph-q .q4-a > * { pointer-events: none; }
.q4.ph-q:not(.kr-on) .q4-a > * { pointer-events: none; }
/* hộp ở giữa sân khấu khi hỏi; rồi bay xuống quầy / bàn */
.q4-slot { transition: left 1.15s cubic-bezier(.65,0,.25,1), top 1.15s cubic-bezier(.65,0,.25,1), width 1.15s cubic-bezier(.65,0,.25,1), height 1.15s cubic-bezier(.65,0,.25,1), opacity .4s var(--ez); }
.q4.ph-q .q4-slot { left: calc(var(--u) * 7); top: calc(var(--u) * 17); width: calc(var(--u) * 33); height: calc(var(--u) * 25); }
.q4-pool { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 36); width: calc(var(--u) * 37); height: calc(var(--u) * 9); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .13), rgba(201, 174, 107, .05) 55%, transparent 72%); pointer-events: none; opacity: 0; transition: opacity .6s var(--ez); }
.q4.ph-q .q4-pool { opacity: 1; }
.q4.is-rev.ph-q .q4-pool { background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .22), rgba(201, 174, 107, .07) 55%, transparent 72%); }
.q4-slot.is-joy { animation: q4joy .9s cubic-bezier(.3,0,.2,1); }
.q4-slot.is-sag { animation: q4sag .9s cubic-bezier(.3,0,.2,1); }
@keyframes q4joy { 0%,100% { transform: none; } 35% { transform: translateY(calc(var(--u) * -1.6)) rotate(-2deg); } 62% { transform: translateY(calc(var(--u) * .2)); } }
@keyframes q4sag { 0%,100% { transform: none; } 40% { transform: translateY(calc(var(--u) * .7)); } }
/* câu hỏi + ba phương án: lớn, đọc được từ cuối lớp; trước khi tiết lộ ba dòng giống hệt nhau */
.q4-qt { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 15.4); width: calc(var(--u) * 48); font-size: var(--t-md); color: var(--ink2); line-height: 1.35; }
.q4-opts { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 21); width: calc(var(--u) * 48); display: grid; grid-auto-rows: calc(var(--u) * 6.4); }
.q4-opt { position: relative; display: grid; grid-template-columns: calc(var(--u) * 5) 1fr auto; align-items: center; text-align: left; border-bottom: 1px solid var(--hair); color: var(--ink2); overflow: hidden; transition: color .4s var(--ez), background .5s var(--ez); }
.q4-opt:first-child { border-top: 1px solid var(--hair); }
.q4-opt b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.q4-l { display: grid; place-items: center; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; border: 1.5px solid var(--hair2); font: 700 var(--t-md) var(--font-ui); font-style: normal; color: var(--ink2); transition: background .4s var(--ez), color .4s var(--ez), border-color .4s var(--ez); }
.q4-opt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ivory); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ez); }
.q4-opt:hover { color: var(--ivory); }
.q4-opt[aria-pressed="true"] { color: var(--ivory); }
.q4-opt[aria-pressed="true"] .q4-l { background: var(--ivory); color: #13201A; border-color: var(--ivory); }
.q4-opt[aria-pressed="true"]::after { transform: scaleX(1); }
.q4-opt-tag { font-style: normal; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding-right: calc(var(--u) * .4); opacity: 0; transition: opacity .4s var(--ez) .25s; }
.q4.is-rev .q4-opt-tag { opacity: 1; }
.q4.is-rev .q4-opt { cursor: default; color: var(--ink3); }
.q4.is-rev .q4-opt:hover { color: var(--ink3); }
.q4.is-rev .q4-opt[aria-pressed="true"]::after { transform: scaleX(0); }
.q4.is-rev .q4-opt[aria-pressed="true"] .q4-l { background: transparent; color: var(--ink3); border-color: var(--hair2); }
/* đáp án C: sáng lime / vàng tre nhẹ */
.q4-opt.is-ans { color: var(--ivory) !important; background: linear-gradient(90deg, rgba(207, 224, 108, .13), rgba(201, 174, 107, .05) 70%, transparent); }
.q4-opt.is-ans .q4-l { background: var(--lime) !important; color: #13201A !important; border-color: var(--lime) !important; box-shadow: 0 0 calc(var(--u) * 1.6) rgba(207, 224, 108, .45); }
.q4-opt.is-ans .q4-opt-tag { color: var(--lime); }
.q4-opt.is-ans::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(233, 240, 160, .22) 50%, transparent 70%); transform: translateX(-100%); animation: q4shine .9s cubic-bezier(.4,0,.2,1) .1s 1 both; pointer-events: none; }
@keyframes q4shine { to { transform: translateX(100%); } }
/* đáp án được chọn nhưng chưa đủ: xanh xám dịu, không đỏ, không dấu X */
.q4-opt.is-miss { color: #C3CED3 !important; background: linear-gradient(90deg, rgba(140, 162, 176, .12), transparent 75%); }
.q4-opt.is-miss .q4-l { border-color: #8EA2AE !important; color: #C3CED3 !important; }
.q4-opt.is-miss .q4-opt-tag { color: #9FB3BE; }
/* chân khối câu hỏi */
.q4-qf { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 41.2); width: calc(var(--u) * 48); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 1.6); }
.q4-rev { font: 700 var(--t-md) var(--font-ui); color: #13201A; background: var(--lime); border-radius: 999px; padding: calc(var(--u) * .7) calc(var(--u) * 1.6); display: inline-flex; align-items: center; gap: .6em; transition: transform .3s var(--ez), box-shadow .3s var(--ez); }
.q4-rev:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(207, 224, 108, .25); }
.q4-rev kbd { font-size: .62em; color: #13201A !important; border-color: rgba(19, 32, 26, .35) !important; }
.q4-pick { font-size: var(--t-sm); color: var(--ink3); }
.q4-rst { font: 600 var(--t-sm) var(--font-ui); color: var(--ink3); border-bottom: 1px solid var(--hair2); padding-bottom: 2px; }
.q4-rst:hover { color: var(--ivory); }
.q4-qv { display: none; font-size: var(--t-md); color: var(--ink2); line-height: 1.35; }
.q4-qv b { color: var(--lime); font-weight: 700; }
.q4.is-rev .q4-rev, .q4.is-rev .q4-pick { display: none; }
.q4.is-rev .q4-qv { display: block; grid-column: 1 / 3; }
.q4-qv { animation: none; }
.q4.is-rev .q4-qv { animation: q4up .5s var(--ez) .35s both; }
@keyframes q4up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* phản hồi meme: thẻ lớn phía trên hộp, giữ nguyên tới khi người trình bày bấm Space */
.q4.is-rev.ph-q .q4-slot { top: calc(var(--u) * 21.5); height: calc(var(--u) * 21.5); }
.q4-fx { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 13.4); width: calc(var(--u) * 37); height: calc(var(--u) * 7); display: grid; place-items: center; pointer-events: none; z-index: 2; visibility: hidden; }
.q4-fx.is-on { visibility: visible; }
.q4-fx-b { position: relative; display: inline-grid; padding: calc(var(--u) * .9) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1.4); font: 800 var(--t-xl) var(--font-ui); letter-spacing: .01em; white-space: nowrap; opacity: 0; }
.q4-fx.is-ok .q4-fx-b { color: #F1F7B4; background: linear-gradient(135deg, rgba(40, 56, 26, .96), rgba(22, 34, 20, .96)); border: 1.5px solid rgba(207, 224, 108, .7); box-shadow: 0 0 0 1px rgba(207, 224, 108, .12), 0 0 calc(var(--u) * 3) rgba(207, 224, 108, .28), 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .5); text-shadow: 0 0 calc(var(--u) * 1.2) rgba(207, 224, 108, .45); animation: q4okIn .75s cubic-bezier(.2, 1.4, .35, 1) both, q4okGlow 2.4s ease-in-out .8s 2; }
.q4-fx.is-no .q4-fx-b { color: #DCE6EA; background: linear-gradient(135deg, rgba(34, 44, 50, .96), rgba(22, 29, 33, .96)); border: 1.5px solid rgba(160, 182, 194, .6); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .5); animation: q4noIn .9s cubic-bezier(.3, 1.3, .4, 1) both, q4sway 3s ease-in-out .9s 2; }
@keyframes q4okIn { 0% { opacity: 0; transform: translateY(calc(var(--u) * 1.4)) scale(.6); } 60% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes q4okGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(207, 224, 108, .12), 0 0 calc(var(--u) * 3) rgba(207, 224, 108, .28), 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .5); } 50% { box-shadow: 0 0 0 1px rgba(207, 224, 108, .3), 0 0 calc(var(--u) * 5) rgba(207, 224, 108, .45), 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .5); } }
@keyframes q4noIn { 0% { opacity: 0; transform: translateY(calc(var(--u) * -2.2)); } 55% { opacity: 1; transform: translateY(calc(var(--u) * .5)); } 80% { transform: translateY(calc(var(--u) * -.15)); } 100% { opacity: 1; transform: none; } }
@keyframes q4sway { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--u) * .25)) rotate(-.6deg); } }
/* vòng sáng lan ra khi đúng */
.q4-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin: calc(var(--u) * -5) 0 0 calc(var(--u) * -5); border-radius: 50%; border: 2px solid rgba(207, 224, 108, .6); opacity: 0; display: none; }
.q4-fx.is-ok .q4-ring { display: block; animation: q4ring 1.3s cubic-bezier(.2, .7, .3, 1) .15s 2 both; }
@keyframes q4ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.6, 1.4); } }
.q4-spark { position: absolute; left: 14%; width: 72%; bottom: calc(var(--u) * -1.2); height: calc(var(--u) * 1.3); overflow: visible; display: none; }
.q4-spark path { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(207, 224, 108, .7)); }
.q4-fx.is-ok .q4-spark { display: block; }
.q4-fx.is-ok .q4-spark path { animation: q4draw .7s cubic-bezier(.4, 0, .2, 1) .35s both; }
@keyframes q4draw { to { stroke-dashoffset: 0; } }
.q4-st { position: absolute; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); fill: #F6EBB0; display: none; opacity: 0; filter: drop-shadow(0 0 4px rgba(246, 235, 176, .8)); }
.q4-fx.is-ok .q4-st { display: block; animation: q4tw 1.6s ease-in-out infinite both; }
.q4-st1 { left: calc(var(--u) * -2); top: calc(var(--u) * -1.3); animation-delay: .25s !important; }
.q4-st2 { right: calc(var(--u) * -1.7); top: calc(var(--u) * -1.7); width: calc(var(--u) * 1.3) !important; height: calc(var(--u) * 1.3) !important; animation-delay: .55s !important; }
.q4-st3 { right: calc(var(--u) * 3); bottom: calc(var(--u) * -2.3); width: calc(var(--u) * 1.1) !important; height: calc(var(--u) * 1.1) !important; fill: var(--lime) !important; animation-delay: .85s !important; }
.q4-st4 { left: calc(var(--u) * 2.4); bottom: calc(var(--u) * -2); width: calc(var(--u) * .9) !important; height: calc(var(--u) * .9) !important; animation-delay: 1.1s !important; }
@keyframes q4tw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(-30deg); } 40% { opacity: 1; transform: scale(1.15) rotate(0); } 70% { opacity: .7; transform: scale(.85) rotate(12deg); } }
/* tia lấp lánh bung ra một lần quanh thẻ (8 hạt nhỏ, chỉ CSS) */
.q4-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; display: none; }
.q4-fx.is-ok .q4-sparks { display: block; }
.q4-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #EAF3A0; box-shadow: 0 0 8px rgba(207, 224, 108, .9); opacity: 0; --dx: 0; --dy: 0; animation: q4burst 1s cubic-bezier(.1, .8, .3, 1) .2s both; }
.q4-sparks i:nth-child(1) { --dx: -17; --dy: -4; } .q4-sparks i:nth-child(2) { --dx: -12; --dy: -5; } .q4-sparks i:nth-child(3) { --dx: -6; --dy: -5.5; } .q4-sparks i:nth-child(4) { --dx: 6; --dy: -5.5; }
.q4-sparks i:nth-child(5) { --dx: 12; --dy: -5; } .q4-sparks i:nth-child(6) { --dx: 17; --dy: -4; } .q4-sparks i:nth-child(7) { --dx: -15; --dy: 4; } .q4-sparks i:nth-child(8) { --dx: 15; --dy: 4; }
@keyframes q4burst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--u) * var(--dx)), calc(var(--u) * var(--dy))) scale(1); } }
/* mây mưa phía trên thẻ khi chưa đủ */
.q4-cloud { position: absolute; left: 50%; top: calc(var(--u) * -3.2); width: calc(var(--u) * 7); height: calc(var(--u) * 6); margin-left: calc(var(--u) * -3.5); display: none; }
.q4-cloud svg { position: relative; z-index: 1; width: 100%; height: calc(var(--u) * 3.2); fill: #93A7B2; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.q4-cloud i { position: absolute; top: calc(var(--u) * 2.6); width: 2px; height: calc(var(--u) * 1.2); border-radius: 2px; background: linear-gradient(#C3D5DE, rgba(195, 213, 222, 0)); opacity: 0; }
.q4-cloud i:nth-of-type(1) { left: 18%; animation-delay: .5s !important; } .q4-cloud i:nth-of-type(2) { left: 30%; animation-delay: .8s !important; } .q4-cloud i:nth-of-type(3) { left: 42%; animation-delay: .62s !important; }
.q4-cloud i:nth-of-type(4) { left: 54%; animation-delay: .95s !important; } .q4-cloud i:nth-of-type(5) { left: 66%; animation-delay: .7s !important; } .q4-cloud i:nth-of-type(6) { left: 78%; animation-delay: 1.05s !important; } .q4-cloud i:nth-of-type(7) { left: 36%; animation-delay: 1.2s !important; }
.q4-fx.is-no .q4-cloud { display: block; animation: q4cl .7s cubic-bezier(.2, .8, .2, 1) both, q4float 3s ease-in-out .7s 2; }
.q4-fx.is-no .q4-cloud i { animation: q4rain .8s cubic-bezier(.5, 0, .8, .6) 5 both; }
@keyframes q4cl { 0% { opacity: 0; transform: translateY(calc(var(--u) * -1.5)) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes q4float { 0%, 100% { transform: none; } 50% { transform: translateX(calc(var(--u) * .5)); } }
@keyframes q4rain { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } }
/* giảm chuyển động / chế độ an toàn: phản hồi vẫn hiện bằng chữ, đứng yên */
@media (prefers-reduced-motion: reduce) {
  .q4-fx.is-on .q4-fx-b, .q4-fx.is-on .q4-cloud { animation: none !important; opacity: 1 !important; transform: none !important; }
  .q4-fx.is-on .q4-st, .q4-fx.is-on .q4-cloud i, .q4-fx.is-on .q4-ring, .q4-fx.is-on .q4-sparks i, .q4-opt.is-ans::before, .q4-slot.is-joy, .q4-slot.is-sag { animation: none !important; }
  .q4-fx.is-on .q4-spark path { animation: none !important; stroke-dashoffset: 0; }
  .q4-slot { transition: none !important; }
}
.safe .q4-fx.is-on .q4-fx-b, .safe .q4-fx.is-on .q4-cloud { animation: none !important; opacity: 1 !important; transform: none !important; }
.safe .q4-fx.is-on .q4-st, .safe .q4-fx.is-on .q4-cloud i, .safe .q4-fx.is-on .q4-ring, .safe .q4-fx.is-on .q4-sparks i, .safe .q4-opt.is-ans::before { animation: none !important; }
.safe .q4-fx.is-on .q4-spark path { animation: none !important; stroke-dashoffset: 0; }
.q4-ph { top: calc(var(--u) * 5.5); }
.q4-ph .cx-opt { font-size: var(--t-xs); }
.q4-qf { grid-template-columns: 1fr; }
.q4.is-rev .q4-qv { grid-column: 1; }
.q4:not(.is-rev) .q4-opt { cursor: pointer; }
.q4-fx { top: calc(var(--u) * 14.2); }
.q4-cloud { left: calc(var(--u) * 2.4); margin-left: 0; top: calc(var(--u) * -1.6); width: calc(var(--u) * 5.4); }
.q4-cloud svg { height: calc(var(--u) * 2.5); }
.q4-cloud i { top: calc(var(--u) * 2.1); }

/* ======== 06 · BÌNH CHỨA ĐIỂM (thủy tinh + chất lỏng) ======== */
.q6-row { top: calc(var(--u) * 14.2); height: calc(var(--u) * 23.4); gap: calc(var(--u) * 1.6); align-items: stretch; }
.q6-v { grid-template-rows: 1fr auto auto; gap: calc(var(--u) * .35); transition: transform .5s var(--ez); }
.q6-cap { border: 0; border-radius: 0 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4); overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 22%, rgba(255,255,255,.1) 60%, rgba(255,255,255,.34) 92%, rgba(255,255,255,.5));
  box-shadow: inset 0 0 0 1.5px rgba(15, 42, 34, .2), inset 0 calc(var(--u) * -.8) calc(var(--u) * 1.6) rgba(15, 42, 34, .05), 0 calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * -1.2) rgba(15, 42, 34, .35);
  transition: box-shadow .4s var(--ez); }
.q6-cap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(15, 42, 34, .28); border-radius: 2px; z-index: 3; } /* miệng bình */
.q6-cap::after { content: ''; position: absolute; top: 4%; bottom: 8%; left: 10%; width: 7%; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); z-index: 3; pointer-events: none; } /* phản quang */
.q6-tick { position: absolute; right: 0; top: 0; bottom: 0; width: calc(var(--u) * 1.1); z-index: 2; background: repeating-linear-gradient(to top, rgba(15, 42, 34, .3) 0 1.5px, transparent 1.5px 10%); -webkit-mask: linear-gradient(90deg, transparent 0 30%, #000 30%); mask: linear-gradient(90deg, transparent 0 30%, #000 30%); }
.q6-cl { position: absolute; right: calc(var(--u) * 1.4); top: calc(var(--u) * .7); z-index: 3; font-size: var(--t-xs); font-weight: 600; color: rgba(15, 42, 34, .45); letter-spacing: .02em; transition: opacity .4s var(--ez); }
.q6-fill { transform: none !important; height: 0; overflow: visible; border-radius: 0 0 calc(var(--u) * 1.3) calc(var(--u) * 1.3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  transition: height 1.7s cubic-bezier(.3, .1, .2, 1); transition-delay: calc(.25s + var(--i) * .16s); }
.q6.at1 .q6-fill, .q6:not([data-k]) .q6-fill { height: calc(var(--f) * 100%); }
.q6-wave { position: absolute; left: 0; top: calc(var(--u) * -.8); width: 200%; height: calc(var(--u) * 1.2); background: color-mix(in srgb, var(--c) 72%, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10 V20 H0Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10 V20 H0Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  animation: q6wave 2.6s linear infinite; opacity: 0; transition: opacity .3s; }
.q6.at1 .q6-wave, .q6:not([data-k]) .q6-wave { opacity: 1; }
@keyframes q6wave { to { transform: translateX(-50%); } }
.q6-bub { position: absolute; left: 35%; bottom: 10%; width: calc(var(--u) * .45); height: calc(var(--u) * .45); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); opacity: 0; }
.q6-bub.b2 { left: 62%; width: calc(var(--u) * .3); height: calc(var(--u) * .3); }
.q6.at1 .q6-bub { animation: q6bub 3.4s ease-in infinite; animation-delay: calc(2s + var(--i) * .3s); }
.q6.at1 .q6-bub.b2 { animation-delay: calc(3.1s + var(--i) * .25s); }
@keyframes q6bub { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 90% { opacity: .6; } 100% { opacity: 0; transform: translateY(calc(var(--u) * -6)); } }
/* dòng rót từ trên xuống khi đổ điểm */
.q6-stream { position: absolute; left: 50%; top: 0; width: calc(var(--u) * .42); margin-left: calc(var(--u) * -.21); height: 0; border-radius: 0 0 99px 99px; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); opacity: 0; }
.q6.at1 .q6-stream { animation: q6pour 1.9s cubic-bezier(.3, .1, .3, 1) both; animation-delay: calc(.05s + var(--i) * .16s); }
@keyframes q6pour { 0% { height: 0; opacity: 1; top: 0; } 22% { height: 100%; opacity: 1; top: 0; } 78% { height: 100%; opacity: 1; top: 0; } 100% { height: 0; opacity: 0; top: 100%; } }
/* điểm nằm trên mặt chất lỏng */
.q6-pt { left: 0; right: 0; top: auto; text-align: center; bottom: calc(var(--f) * 100% + var(--u) * .6); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; color: #0F2A22; transition: opacity .5s var(--ez); transition-delay: calc(.5s + var(--i) * .16s); }
.q6-v.s-Q .q6-pt, .q6-v.s-C .q6-pt, .q6-v.s-D .q6-pt { bottom: auto; top: calc((1 - var(--f)) * 100% + var(--u) * .9); color: #FBF7EC; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.q6.at1 .q6-cl { opacity: .55; }
.q6-w { font-size: calc(var(--u) * 3); }
.q6-v:hover { transform: translateY(-3px); }
.q6-v[aria-pressed="true"] { transform: translateY(calc(var(--u) * -.5)); }
.q6-v[aria-pressed="true"] .q6-cap { border: 0; box-shadow: inset 0 0 0 2.5px #0F2A22, inset 0 calc(var(--u) * -.8) calc(var(--u) * 1.6) rgba(15, 42, 34, .05), 0 calc(var(--u) * 1.6) calc(var(--u) * 2.4) calc(var(--u) * -1.2) rgba(15, 42, 34, .5); }
.q6-v[aria-pressed="true"] .q6-nm { color: #0F2A22; }
/* thanh tổng: 100 điểm sức chứa, các phần điểm Areca xếp nối */
.q6-sum { top: calc(var(--u) * 39.4); width: calc(var(--u) * 88); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 1.6); }
.q6-sum p { display: flex; align-items: baseline; gap: .5em; margin: 0; }
.q6-mx { position: relative; height: calc(var(--u) * 1.5); border-radius: 99px; background: rgba(15, 42, 34, .08); box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .14); overflow: hidden; }
.q6-mx i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc(var(--b) * 1%); background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ez); transition-delay: calc(1.1s + var(--i) * .16s); border-right: 2px solid rgba(246, 241, 229, .7); }
.q6.at1 .q6-mx i, .q6:not([data-k]) .q6-mx i { transform: none; }
.q6-mx s { position: absolute; top: -3px; bottom: -3px; left: 80%; width: 2px; background: #0F2A22; opacity: 0; transition: opacity .4s var(--ez) 2.2s; }
.q6.at1 .q6-mx s, .q6:not([data-k]) .q6-mx s { opacity: 1; }
.q6-ar { transition: opacity .6s var(--ez) .9s; }
.q6:not(.at1)[data-k] .q6-ar { opacity: 0; }
.q6-sum .q6-tot { font-size: var(--t-xl); min-width: 3.6ch; }
.q6-rd { top: calc(var(--u) * 43.4); }
@media (prefers-reduced-motion: reduce) { .q6-wave, .q6-bub, .q6-stream { animation: none !important; } .q6-fill { transition-duration: .01s; } }
.safe .q6-wave, .safe .q6-bub, .safe .q6-stream { animation: none !important; }
.q6-notr .q6-fill, .q6-notr .q6-pt, .q6-notr .q6-mx i, .q6-notr .q6-mx s, .q6-notr .q6-ar, .q6-notr .q6-wave, .q6-notr .q6-cl { transition: none !important; }
.q6-nopour .q6-stream { animation: none !important; }
.q6.at1 .q6-cl { opacity: 0; }
.q6-cl { right: auto; left: 0; width: 100%; text-align: center; top: calc(var(--u) * .9); font-size: calc(var(--u) * .95); }
.q6-cap::after { top: 14%; left: 8%; width: 5%; }
.q6-v.s-S .q6-cl { font-size: calc(var(--u) * .85); }

/* ======== 09 · BỘ CHỨNG TỪ: năm tờ giấy trên một dòng P2P ======== */
.z9-docs { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.2); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 2.6); list-style: none; margin: 0; padding: 0; z-index: 1; }
.z9-docs li { position: relative; }
.z9-flow { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 24.2); width: calc(var(--u) * 88); height: calc(var(--u) * 1); overflow: visible; z-index: 0; }
.z9-flow path { fill: none; vector-effect: non-scaling-stroke; }
.z9-rail { stroke: rgba(15, 42, 34, .25); stroke-width: 2; }
.z9-run { stroke: #4E6B17; stroke-width: 3; stroke-dasharray: 10 22; stroke-linecap: round; animation: z9run 1.6s linear infinite; }
@keyframes z9run { to { stroke-dashoffset: -32; } }
.z9-gap { stroke: #A9512C; stroke-width: 2; stroke-dasharray: 3 7; opacity: .75; }
.z9-sh { position: relative; width: 100%; height: calc(var(--u) * 21); display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: calc(var(--u) * .25); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.3) calc(var(--u) * 1.1); text-align: left; color: #0F2A22; overflow: hidden;
  background: linear-gradient(180deg, #FFFEFA, #FBF7EC); border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - var(--u) * 2.2) 0, 100% calc(var(--u) * 2.2), 100% 100%, 0 100%);
  box-shadow: 0 1px 0 rgba(15, 42, 34, .04); filter: drop-shadow(0 calc(var(--u) * .9) calc(var(--u) * 1.2) rgba(15, 42, 34, .18)) drop-shadow(0 1px 1px rgba(15, 42, 34, .12));
  transition: transform .55s var(--ez), filter .5s var(--ez), opacity .4s var(--ez); }
.z9-sh::after { content: ''; position: absolute; right: 0; top: 0; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); background: linear-gradient(225deg, transparent 50%, #E7DFCB 50%, #D9CFB6); } /* góc gấp */
.z9-sh::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #C9AE6B; }
.z9-sh.st-ok::before { background: #4E6B17; }
.z9-n { font-size: calc(var(--u) * .95); font-weight: 700; letter-spacing: .12em; color: rgba(15, 42, 34, .4); }
.z9-t { font-size: calc(var(--u) * 2.7); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.z9-nm { font-size: calc(var(--u) * 1.05); font-weight: 600; color: var(--ink2); line-height: 1.25; min-height: 2.5em; }
.z9-code { font-size: calc(var(--u) * 1.05); color: var(--ink3); letter-spacing: .04em; }
.z9-body { display: grid; align-content: center; gap: calc(var(--u) * .55); padding: calc(var(--u) * .6) 0; }
.z9-ln { display: block; height: calc(var(--u) * .45); width: var(--l); border-radius: 99px; background: rgba(15, 42, 34, .1); }
.z9-tb { display: grid; grid-template-columns: 1.6fr 1fr; gap: calc(var(--u) * .35) calc(var(--u) * .5); padding: calc(var(--u) * .5); border: 1px solid rgba(15, 42, 34, .14); border-radius: 2px; }
.z9-tb i { height: calc(var(--u) * .4); border-radius: 99px; background: rgba(15, 42, 34, .12); }
.z9-cnt { display: grid; justify-items: start; gap: .1em; }
.z9-cnt b { font-size: calc(var(--u) * 2.9); font-weight: 800; letter-spacing: -.03em; color: #4E6B17; line-height: 1; }
.z9-cnt small { font-size: calc(var(--u) * 1); font-weight: 600; color: var(--ink2); font-family: var(--font-ui); letter-spacing: 0; }
.z9-q { justify-self: center; font: 800 calc(var(--u) * 5) var(--font-ui); color: rgba(169, 81, 44, .35); line-height: 1; }
.z9-wm { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-18deg); font-size: calc(var(--u) * 1.15); font-weight: 800; letter-spacing: .18em; color: rgba(135, 102, 26, .16); border: 1.5px solid rgba(135, 102, 26, .16); padding: .2em .6em; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.z9-sh .tag { font-size: calc(var(--u) * 1.15); }
.z9-sh.is-none { background: rgba(255, 253, 248, .3); filter: none; clip-path: none; outline: 2px dashed rgba(169, 81, 44, .55); outline-offset: -2px; }
.z9-sh.is-none::before, .z9-sh.is-none::after { display: none; }
.z9-sh:hover { transform: translateY(calc(var(--u) * -.5)) rotate(-.6deg); }
.z9.has-sel .z9-sh:not([aria-pressed="true"]) { opacity: .55; }
.z9-sh[aria-pressed="true"] { transform: translateY(calc(var(--u) * -.9)) scale(1.03); filter: drop-shadow(0 calc(var(--u) * 1.6) calc(var(--u) * 1.8) rgba(15, 42, 34, .3)) drop-shadow(0 0 0 #0F2A22); }
.z9-sh.is-none[aria-pressed="true"] { outline-color: #A9512C; }
/* vào cảnh: các tờ được "chia" ra từ một xấp */
.scene.is-in .z9-docs li { animation: z9deal .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * .11s); }
@keyframes z9deal { 0% { opacity: 0; transform: translateX(calc(var(--u) * -18.1 * var(--i))) translateY(calc(var(--u) * 1.5)) rotate(calc(var(--i) * -2deg)); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* chi tiết: trang phóng to, mũi nhọn chỉ vào tờ đang chọn */
.z9-det { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 38); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .9); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: #FFFEFA; border-radius: 4px; border-left: 4px solid #C9AE6B;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(15, 42, 34, .18)); opacity: 0; transform: translateY(calc(var(--u) * 1)); visibility: hidden; transition: opacity .45s var(--ez), transform .55s var(--ez), visibility 0s .45s; }
.z9.has-sel .z9-det { opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--ez), transform .55s var(--ez), visibility 0s; }
.z9-det.st-ok { border-left-color: #4E6B17; }
.z9-det.st-open { border-left-color: #A9512C; background: #FFFBF5; }
.z9-ptr { position: absolute; top: calc(var(--u) * -1.1); left: calc(var(--u) * (7.76 + var(--i) * 18.12) - var(--u) * 1.1); width: calc(var(--u) * 2.2); height: calc(var(--u) * 1.15); background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: left .5s var(--ez); }
.z9-det { --i: 3; }
.z9-det .z9-ptr { background: #FFFEFA; } .z9-det.st-open .z9-ptr { background: #FFFBF5; }
.z9-dh { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7em; margin: 0; }
.z9-dh b { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
.z9-dh span.tnum { color: var(--ink3); font-size: var(--t-sm); }
.z9-dh em { font-style: normal; font-size: var(--t-md); font-weight: 600; }
.z9-dh .tag { margin-left: auto; font-size: var(--t-sm); }
.z9-det dl { display: grid; grid-template-columns: 1.5fr 1.2fr .9fr; gap: calc(var(--u) * 2.4); margin: 0; }
.z9-det dl div { display: grid; gap: .25em; align-content: start; }
.z9-det dt { font-size: calc(var(--u) * 1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #87661A; }
.z9-det dd { margin: 0; font-size: var(--t-md); font-weight: 500; line-height: 1.32; }
.z9-det.st-open dd { color: #8E4222; }
.z9-idle { top: calc(var(--u) * 39) !important; }
@media (prefers-reduced-motion: reduce) { .z9-run, .scene.is-in .z9-docs li { animation: none !important; } }
.safe .z9-run, .safe .scene.is-in .z9-docs li, body.safe .z9-docs li { animation: none !important; }
.z9.has-sel .z9-sh:not([aria-pressed="true"]) { opacity: 1; box-shadow: inset 0 0 0 999px rgba(226, 217, 196, .55); color: rgba(15, 42, 34, .5); }
.z9.has-sel .z9-sh.is-none:not([aria-pressed="true"]) { box-shadow: none; opacity: .6; }
.z9-wm { top: 66%; }

/* ======== 10 · THREE-WAY MATCH: ba tờ, đường khớp theo từng dòng ======== */
.z10 { --rh: calc(var(--u) * 5); --rt: calc(var(--u) * 4.4); }
.z10-tri { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14); width: calc(var(--u) * 88); height: calc(var(--rt) + var(--rh) * 3 + var(--u) * .8); }
.z10-col { position: absolute; top: 0; bottom: 0; width: calc(var(--u) * 25); display: grid; grid-template-rows: var(--rt) repeat(3, var(--rh)); padding: 0 0 calc(var(--u) * .8); }
.z10-col.c-po { left: 0; } .z10-col.c-gr { left: calc(var(--u) * 31.5); } .z10-col.c-inv { left: calc(var(--u) * 63); }
.z10-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #FFFEFA, #FBF7EC); border-radius: 4px; filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.1) rgba(15, 42, 34, .16)) drop-shadow(0 1px 1px rgba(15, 42, 34, .1)); }
.z10-col.is-none .z10-bg { background: rgba(255, 253, 248, .35); filter: none; outline: 2px dashed rgba(169, 81, 44, .55); outline-offset: -2px; }
.z10-h { display: flex; align-items: baseline; gap: .6em; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4) 0; margin: 0; }
.z10-h b { font-size: calc(var(--u) * 2.5); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.z10-h span { font-size: var(--t-sm); color: var(--ink3); font-weight: 600; }
.z10-col.is-none .z10-h span { color: #A9512C; }
.z10-r { position: relative; display: grid; align-content: center; gap: .15em; padding: 0 calc(var(--u) * 1.4); text-align: left; border: 0; border-top: 1px solid rgba(15, 42, 34, .08); border-radius: 0; min-height: 0; background: transparent; transition: background-color .35s var(--ez); }
.z10-r span { font-size: calc(var(--u) * .98); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.z10-r b { font-size: var(--t-sm); font-weight: 600; line-height: 1.22; }
.z10-col.is-none .z10-r b { color: rgba(15, 42, 34, .3); }
.z10-r:hover { background: rgba(15, 42, 34, .04); }
.z10[data-row="qty"] .r-qty, .z10[data-row="goods"] .r-goods, .z10[data-row="tax"] .r-tax { background: rgba(207, 224, 108, .2); }
.z10[data-row="qty"] .z10-col.is-none .r-qty, .z10[data-row="goods"] .z10-col.is-none .r-goods, .z10[data-row="tax"] .z10-col.is-none .r-tax { background: rgba(169, 81, 44, .06); }
/* đường nối giữa các tờ, theo từng dòng */
.z10-lk { position: absolute; height: 0; top: calc(var(--rt) + var(--rh) * var(--r) + var(--rh) / 2); display: block; font-style: normal; }
.z10-lk.g1 { left: calc(var(--u) * 25); width: calc(var(--u) * 6.5); } .z10-lk.g2 { left: calc(var(--u) * 56.5); width: calc(var(--u) * 6.5); }
.z10-lk s { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(15, 42, 34, .18); transform-origin: 0 50%; }
.z10-lk.k-no s:nth-of-type(1) { right: 58%; } .z10-lk.k-no s:nth-of-type(2) { left: 58%; transform-origin: 100% 50%; }
.z10-lk em { position: absolute; left: 50%; top: calc(var(--u) * -2.1); transform: translateX(-50%) translateY(4px); white-space: nowrap; font-style: normal; font-size: calc(var(--u) * .95); font-weight: 700; padding: .2em .55em; border-radius: 99px; opacity: 0; transition: opacity .4s var(--ez), transform .4s var(--ez); }
.z10.is-run .z10-lk s { transition: background-color .4s var(--ez), transform .5s var(--ez); transition-delay: calc(.9s + var(--r) * .28s); }
.z10.is-run .z10-lk.g2 s { transition-delay: calc(1.05s + var(--r) * .28s); }
.z10.is-run .z10-lk em { opacity: 1; transform: translateX(-50%); transition-delay: calc(1.1s + var(--r) * .28s); }
.z10.is-run .z10-lk.g2 em { transition-delay: calc(1.25s + var(--r) * .28s); }
.z10.is-run .k-ok s { height: 3px; top: -1.5px; background: #6E9A1F; box-shadow: 0 0 10px rgba(110, 154, 31, .55); }
.z10-lk.k-ok em { background: #4E6B17; color: #F6F9E4; }
.z10-lk.k-ok em::before { content: '✓ '; }
.z10.is-run .k-warn s { background: repeating-linear-gradient(90deg, #B08A3A 0 6px, transparent 6px 11px); }
.z10-lk.k-warn em { background: rgba(176, 138, 58, .16); color: #7A5E1F; }
.z10.is-run .k-no s { background: #A9512C; }
.z10.is-run .k-no s:nth-of-type(1) { transform: rotate(-10deg); } .z10.is-run .k-no s:nth-of-type(2) { transform: rotate(10deg); }
.z10-lk.k-no em { background: rgba(169, 81, 44, .12); color: #8E4222; }
.z10-lk.k-no:not([style*="--r:0"]) em { display: none; }
/* tia quét từ trên xuống khi chạy đối chiếu */
.z10-scan { position: absolute; left: calc(var(--u) * -1); right: calc(var(--u) * -1); top: var(--rt); height: calc(var(--u) * 1.6); margin-top: calc(var(--u) * -.8); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(207, 224, 108, .55) 45%, rgba(207, 224, 108, .85) 50%, rgba(207, 224, 108, .55) 55%, transparent); filter: blur(1px); }
.z10.is-run .z10-scan { animation: z10scan 1.3s cubic-bezier(.45, 0, .55, 1) .15s 1 both; }
@keyframes z10scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--rh) * 3)); } }
/* thanh điều khiển */
.z10-bar { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 34.4); width: calc(var(--u) * 88); display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.z10-run { flex: none; }
.z10-bar .cn10-v { font-size: var(--t-sm); color: var(--ink2); line-height: 1.35; }
/* kết quả: thước 3 chứng từ */
.z10-res { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 38.4); width: calc(var(--u) * 88); display: flex; align-items: center; gap: calc(var(--u) * 1.6); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ez), transform .6s var(--ez); }
.z10.is-run .z10-res { opacity: 1; transform: none; transition-delay: 1.9s; }
.z10-res .cn10-res { position: static; opacity: 1; transform: none; font-size: var(--t-md); margin: 0; }
.z10-meter { display: inline-flex; gap: 3px; flex: none; }
.z10-meter i { font-style: normal; font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .06em; padding: .45em .9em; }
.z10-meter i:first-child { border-radius: 99px 0 0 99px; } .z10-meter i:last-child { border-radius: 0 99px 99px 0; }
.z10-meter .m-ok { background: #4E6B17; color: #F6F9E4; }
.z10-meter .m-no { background: transparent; color: #A9512C; box-shadow: inset 0 0 0 1.5px rgba(169, 81, 44, .6); }
/* ngoại lệ: thẻ có người xử lý */
.z10-ex { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 42.4); width: calc(var(--u) * 88); display: grid; gap: calc(var(--u) * .6); opacity: 0; visibility: hidden; transition: opacity .5s var(--ez), visibility 0s .5s; }
.z10.is-ex .z10-ex { opacity: 1; visibility: visible; transition: opacity .5s var(--ez), visibility 0s; }
.z10-ex ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); list-style: none; margin: 0; padding: 0; }
.z10-ex li { display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .8) calc(var(--u) * 1); background: rgba(255, 254, 250, .8); border-radius: 4px; box-shadow: inset 3px 0 0 #A9512C, 0 calc(var(--u) * .5) calc(var(--u) * .9) calc(var(--u) * -.4) rgba(15, 42, 34, .2); transform: translateY(10px); opacity: 0; transition: transform .5s var(--ez), opacity .5s var(--ez); transition-delay: calc(var(--i) * .12s); }
.z10.is-ex .z10-ex li { transform: none; opacity: 1; }
.z10-av { display: inline-flex; flex: none; }
.z10-av i { display: grid; place-items: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%; background: #0F2A22; color: #EFE8D6; font-style: normal; font-size: calc(var(--u) * .9); font-weight: 800; box-shadow: 0 0 0 2px #FFFEFA; }
.z10-av i + i { margin-left: calc(var(--u) * -.7); background: #87661A; }
.z10-ex li p { display: grid; gap: .1em; margin: 0; min-width: 0; }
.z10-ex li b { font-size: var(--t-sm); font-weight: 700; line-height: 1.2; }
.z10-ex li span { font-size: calc(var(--u) * 1.05); color: var(--ink3); }
.z10-note { font-size: var(--t-xs); color: var(--ink3); margin: 0; }
@media (prefers-reduced-motion: reduce) { .z10-scan { animation: none !important; } }
.safe .z10-scan { animation: none !important; }
.z10 { --rh: calc(var(--u) * 4.5); --rt: calc(var(--u) * 4); }
.z10-col { width: calc(var(--u) * 24); }
.z10-col.c-gr { left: calc(var(--u) * 32); } .z10-col.c-inv { left: calc(var(--u) * 64); }
.z10-lk.g1 { left: calc(var(--u) * 24); width: calc(var(--u) * 8); } .z10-lk.g2 { left: calc(var(--u) * 56); width: calc(var(--u) * 8); }
.z10-h span { font-size: var(--t-xs); }
.z10-r b { font-size: calc(var(--u) * 1.22); }
.z10-bar { top: calc(var(--u) * 33.6); }
.z10-res { top: calc(var(--u) * 37.4); }
.z10-ex { top: calc(var(--u) * 41.2); gap: calc(var(--u) * .7); }
.z10-exh { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); margin: 0; }
.z10-ex li { padding: calc(var(--u) * .7) calc(var(--u) * 1); }

/* ======== 05 · KỆ NĂM MẪU + BẢNG ĐỐI CHIẾU BẰNG HÌNH ======== */
.z5 { --cw: calc((var(--u) * 79.5 - var(--u) * 4.8) / 5); }
.z5-all { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 5.4); display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(242, 237, 225, .07); box-shadow: inset 0 0 0 1px var(--edge); z-index: 2; }
.z5-all span { font-size: var(--t-xs); font-weight: 700; padding: .45em 1.1em; border-radius: 99px; color: var(--ink2); transition: background .35s var(--ez), color .35s var(--ez); }
.z5-all[aria-pressed="false"] span:first-child, .z5-all[aria-pressed="true"] span:last-child { background: var(--lime); color: #0B1A14; }
.z5-shelf { position: absolute; left: calc(var(--u) * 14.5); top: calc(var(--u) * 13.2); width: calc(var(--u) * 79.5); height: calc(var(--u) * 14.4); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.2); }
.z5-board-line { position: absolute; left: calc(var(--u) * -8.5); right: 0; top: calc(var(--u) * 9.6); height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 237, 225, .22) 12%, rgba(242, 237, 225, .22) 88%, transparent); }
.z5-pl { position: relative; display: grid; grid-template-rows: calc(var(--u) * 9.6) auto; align-content: start; text-align: left; color: var(--ink); transition: transform .55s var(--ez), opacity .45s var(--ez), filter .45s var(--ez); }
.z5-fig { position: relative; display: grid; place-items: end center; padding-bottom: calc(var(--u) * .4); }
.z5-fig img { position: relative; z-index: 1; width: 100%; height: calc(var(--u) * 8.4); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .7) calc(var(--u) * .8) rgba(0, 0, 0, .45)); transition: transform .6s var(--ez); }
.z5-pl.is-areca .z5-fig img { width: calc(var(--u) * 10); height: calc(var(--u) * 8.4); object-fit: cover; border-radius: calc(var(--u) * .6); box-shadow: 0 0 0 1.5px rgba(207, 224, 108, .55); }
.z5-pool { position: absolute; left: 8%; right: 8%; bottom: calc(var(--u) * -.4); height: calc(var(--u) * 1.6); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .0), transparent 70%); transition: background .5s var(--ez); }
.z5-nm { display: grid; gap: .05em; padding-top: calc(var(--u) * .7); }
.z5-nm b { font-size: var(--t-md); font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z5-cap { font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.z5-cap.is-x { color: var(--bad); } .z5-cap.is-o { color: var(--mid); }
.z5-k { position: absolute; left: 0; top: 0; z-index: 2; font-style: normal; font-size: calc(var(--u) * .85); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3em .6em; border-radius: 3px; background: rgba(11, 26, 20, .78); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--edge); }
.z5-k.is-real { background: var(--lime); color: #0B1A14; box-shadow: none; }
.z5-pl:hover .z5-fig img { transform: translateY(calc(var(--u) * -.4)); }
.z5:not(.is-all) .z5-pl:not([aria-pressed="true"]) { opacity: .5; filter: saturate(.6); }
.z5-pl[aria-pressed="true"] .z5-fig img { transform: translateY(calc(var(--u) * -.6)) scale(1.04); }
.z5-pl[aria-pressed="true"] .z5-pool, .z5.is-all .z5-pool { background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .32), transparent 70%); }
.scene.is-in .z5-pl { animation: z5rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--i) * .09s); }
@keyframes z5rise { from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)); } }
/* chi tiết một gian */
.z5-det { position: absolute; left: calc(var(--u) * 14.5); top: calc(var(--u) * 29.6); width: calc(var(--u) * 79.5); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); border-radius: calc(var(--u) * .8); background: linear-gradient(180deg, rgba(242, 237, 225, .07), rgba(242, 237, 225, .035)); box-shadow: inset 0 0 0 1px var(--edge); transition: opacity .45s var(--ez), transform .55s var(--ez), visibility 0s; }
.z5.is-all .z5-det { opacity: 0; transform: translateY(calc(var(--u) * 1)); visibility: hidden; transition: opacity .35s var(--ez), transform .45s var(--ez), visibility 0s .35s; }
.z5-ptr { position: absolute; top: calc(var(--u) * -1); left: calc(var(--cw) / 2 + var(--i) * (var(--cw) + var(--u) * 1.2) - var(--u) * 1); width: calc(var(--u) * 2); height: calc(var(--u) * 1); background: rgba(242, 237, 225, .22); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: left .5s var(--ez); }
.z5-dbody { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto 1fr; column-gap: calc(var(--u) * 3); row-gap: calc(var(--u) * .6); }
.z5-dbody .cn5-dn { grid-column: 1; margin: 0; }
.z5-dbody .cn5-st { position: static; grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.z5-dbody .cn5-rows { grid-column: 1; grid-row: 2 / 4; margin: 0; }
.z5-dbody .cn5-pr { grid-column: 2; grid-row: 2; margin: 0; }
.z5-dbody .cn5-dx { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; gap: calc(var(--u) * .8); }
.z5-dbody .cn5-rows dd { font-size: var(--t-md); }
/* bảng đối chiếu bằng hình */
.z5-board { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 28.6); width: calc(var(--u) * 88); opacity: 0; visibility: hidden; transition: opacity .4s var(--ez), visibility 0s .4s; }
.z5.is-all .z5-board { opacity: 1; visibility: visible; transition: opacity .4s var(--ez), visibility 0s; }
.z5-row { display: grid; grid-template-columns: calc(var(--u) * 8.5) repeat(5, 1fr); column-gap: calc(var(--u) * 1.2); height: calc(var(--u) * 4); align-items: center; border-top: 1px solid rgba(242, 237, 225, .1); }
.z5-rl { font-size: calc(var(--u) * 1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.z5-c { display: grid; grid-template-columns: calc(var(--u) * 4.6) 1fr; align-items: center; gap: calc(var(--u) * .8); margin: 0; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ez), transform .5s var(--ez); }
.z5.is-all .z5-c { opacity: 1; transform: none; transition-delay: calc(.1s + var(--i) * .08s); }
.z5-c b { font-size: calc(var(--u) * 1.18); font-weight: 600; line-height: 1.2; color: var(--ink); }
.z5-c b.is-x { color: var(--bad); } .z5-c b.is-o { color: var(--mid); } .z5-c b.is-m { color: var(--ok); }
.z5-ic { width: calc(var(--u) * 4.4); height: calc(var(--u) * 2.8); overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; color: var(--ink); }
.z5-ic.is-m { color: var(--ok); } .z5-ic.is-x { color: var(--bad); } .z5-ic.is-o { color: var(--mid); }
.z5-ic rect, .z5-ic .bx { fill: rgba(242, 237, 225, .08); }
.z5-ic .dsh { stroke-dasharray: 4 4; }
.z5-ic text { fill: currentColor; stroke: none; font: 800 14px var(--font-ui); }
.z5-ic .ld { fill: rgba(242, 237, 225, .12); }
.z5-ic .ld.pet { fill: rgba(190, 220, 230, .18); stroke-dasharray: 0; }
.z5-ic .hg { fill: currentColor; stroke: none; }
/* thước dung tích 0–1.200 ml, vạch mốc 700 */
.z5-g { position: relative; display: block; height: calc(var(--u) * 1.1); }
.z5-gt { position: absolute; inset: 0; border-radius: 99px; background: rgba(242, 237, 225, .1); overflow: visible; }
.z5-gt::after { content: ''; position: absolute; left: 58.33%; top: calc(var(--u) * -.5); bottom: calc(var(--u) * -.5); width: 2px; margin-left: -1px; background: var(--gold); border-radius: 2px; }
.z5-gf { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--a) * 100%); border-radius: 99px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ez); }
.z5-gr { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 0 99px 99px 0; background: repeating-linear-gradient(90deg, var(--bad) 0 3px, transparent 3px 6px); opacity: 0; transition: opacity .4s var(--ez); }
.z5-g.is-m .z5-gf { background: var(--ok); } .z5-g.is-x .z5-gf { background: var(--bad); } .z5-g.is-b .z5-gf { background: var(--ink); }
.z5.is-all .z5-gf { transform: none; transition-delay: calc(.35s + var(--i) * .1s); }
.z5.is-all .z5-gr { opacity: 1; transition-delay: calc(1.1s + var(--i) * .1s); }
.z5-g.is-unk .z5-gt { background: none; box-shadow: inset 0 0 0 1.5px rgba(227, 196, 111, .55); }
.z5-g.is-unk em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-style: normal; font-weight: 800; font-size: calc(var(--u) * 1); color: var(--mid); }
.z5-c:has(.z5-g) { grid-template-columns: calc(var(--u) * 6.4) 1fr; }
/* thanh giá trên cùng một trục 100.000–300.000 */
.z5-pb { position: relative; display: block; height: calc(var(--u) * 1.1); border-radius: 99px; background: rgba(242, 237, 225, .07); }
.z5-pb i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: max(calc((var(--b) - var(--a)) * 100%), calc(var(--u) * 1.1)); border-radius: 99px; background: linear-gradient(90deg, rgba(201, 174, 107, .75), rgba(201, 174, 107, .95)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ez); }
.z5-pb.is-real i { background: var(--lime); box-shadow: 0 0 10px rgba(207, 224, 108, .6); }
.z5.is-all .z5-pb i { transform: none; transition-delay: calc(.6s + var(--i) * .1s); }
.z5-c:has(.z5-pb) { grid-template-columns: calc(var(--u) * 6.4) 1fr; }
.z5-c:has(.z5-pb) b { font-size: calc(var(--u) * 1.05); color: var(--ink2); }
.z5-700 { position: absolute; left: 0; top: calc(var(--u) * 2.75); font-style: normal; font-size: calc(var(--u) * .9); color: var(--gold); display: flex; align-items: center; gap: .4em; }
.z5-700::before { content: ''; width: 2px; height: calc(var(--u) * 1.1); background: var(--gold); border-radius: 2px; }
.z5-key { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; margin: calc(var(--u) * .6) 0 0; padding-top: calc(var(--u) * .6); border-top: 1px solid rgba(242, 237, 225, .1); font-size: calc(var(--u) * 1); color: var(--ink3); }
.z5-key i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--st); margin-left: .6em; }
.z5-key i:first-child { margin-left: 0; }
.z5-end { top: calc(var(--u) * 48) !important; }
@media (prefers-reduced-motion: reduce) { .scene.is-in .z5-pl { animation: none !important; } }
body.safe .z5-pl { animation: none !important; }
.z5-det { top: calc(var(--u) * 29.4); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8); }
.z5-dbody { grid-template-rows: auto auto auto; align-content: start; row-gap: calc(var(--u) * .4); }
.z5-dbody .cn5-rows { gap: 0; align-content: start; }
.z5-dbody .cn5-rows div { padding: calc(var(--u) * .45) 0; grid-template-columns: calc(var(--u) * 8) 1fr auto; }
.z5-dbody .cn5-dn { font-size: var(--t-lg); }
.z5-dbody .cn5-pr { display: grid; gap: .1em; }
.z5-dbody .cn5-pr b { font-size: var(--t-xl); }
.z5-dbody .cn5-dx b { font-size: calc(var(--u) * 1.2); }
.z5:not(.is-all) .z5-pl:not([aria-pressed="true"]) { opacity: .62; }
.z5-c b { font-size: calc(var(--u) * 1.25); }
.z9-cnt { gap: calc(var(--u) * .35); } .z9-cnt b { line-height: 1.05; }

/* ======== 13 · minh họa công việc tại từng trạm ======== */
.q13-path .q13-glow { stroke: var(--gold); stroke-width: .9; stroke-opacity: .08; fill: none; stroke-dasharray: none; filter: blur(.4px); }
.q13-path .q13-ln { stroke-width: .2; }
.q13-run { fill: #E9F3A3; filter: drop-shadow(0 0 .8px rgba(207, 224, 108, .9)); }
body.safe .q13-run, body:not(.present) .q13-run { display: none; }
@media (prefers-reduced-motion: reduce) { .q13-run { display: none; } }
.q13-md { position: absolute; left: calc(var(--u) * -2.6); top: calc(var(--u) * -2.6); width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #224536, #0E1F18 70%); box-shadow: inset 0 0 0 1.5px rgba(201, 174, 107, .75), 0 0 0 calc(var(--u) * .45) #0B1913, 0 0 calc(var(--u) * 2) rgba(207, 224, 108, .16); }
.q13-md svg { width: 58%; height: 58%; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.q13-md svg .f { fill: var(--gold); stroke: none; }
.q13-md svg .ok { stroke: var(--gold); stroke-width: 2; }
.q13-md svg > * { stroke-dasharray: 120; stroke-dashoffset: 0; }
body.present:not(.safe) .q13.is-active .q13-md svg > * { animation: q13ic 1.3s var(--ez) backwards; animation-delay: calc(.9s + var(--i) * .3s); }
@keyframes q13ic { from { stroke-dashoffset: 120; } }
body.present:not(.safe) .q13.is-active .q13-md { animation: q13md .7s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(.6s + var(--i) * .3s); }
@keyframes q13md { from { transform: scale(.3); opacity: 0; } }
.q13-st:hover .q13-md { box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 calc(var(--u) * .45) #0B1913, 0 0 calc(var(--u) * 3) rgba(207, 224, 108, .35); }
.q13-ring { position: absolute; inset: calc(var(--u) * -.55); width: calc(100% + var(--u) * 1.1); height: calc(100% + var(--u) * 1.1); fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; animation: q13spin 24s linear infinite; }
@keyframes q13spin { to { transform: rotate(360deg); } }
body.safe .q13-ring { animation: none; }
.q13-mo.is-hub { position: relative; }
.q13-card { left: calc(var(--u) * -10.5); width: calc(var(--u) * 21); gap: calc(var(--u) * .5); }
.q13-st.is-up .q13-card { bottom: calc(var(--u) * 3.3); }
.q13-st.is-dn .q13-card { top: calc(var(--u) * 3.3); }
.q13-st[style*="--i:5"] .q13-card { left: calc(var(--u) * -14); }
.q13-n { font-size: var(--t-sm); }
.q13-m b { white-space: nowrap; }
.q13-st[style*="--i:5"] .q13-card { left: calc(var(--u) * -11.6); }
.q13-st[style*="--i:3"] .q13-card { left: calc(var(--u) * -10.8); width: calc(var(--u) * 20.6); }
.q13-md svg { width: 62%; height: 62%; }
.q13-tt { font-style: normal; font-size: calc(var(--u) * .9); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0B1A14; background: var(--gold); padding: .25em .8em; border-radius: 99px; margin-top: calc(var(--u) * .5); }
.q13-hub { width: calc(var(--u) * 15); }
.q13-hub b { margin-top: calc(var(--u) * .2); }

/* ======== 05 · PHÒNG TRƯNG BÀY NĂM NCC (nền ngà, ánh sáng studio) ======== */
.z5-bg { background: radial-gradient(70% 90% at 32% 46%, #FFFDF7 0%, #F4EEE0 48%, #E8DFCB 100%) !important; }
.z5-light { position: absolute; left: 4%; top: 18%; width: 58%; height: 70%; background: radial-gradient(50% 50% at 50% 55%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.z5 .cn-h1 { position: relative; }
.z5-h1a, .z5-h1b { transition: opacity .5s var(--ez); }
.z5-h1b { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.z5.is-all .z5-h1a { opacity: 0; } .z5.is-all .z5-h1b { opacity: 1; }
.z5-all { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 5.4); display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(15, 42, 34, .06); box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .14); z-index: 3; }
.z5-all span { font-size: var(--t-xs); font-weight: 700; padding: .45em 1.1em; border-radius: 99px; color: var(--ink2); transition: background .35s var(--ez), color .35s var(--ez); }
.z5-all[aria-pressed="false"] span:first-child, .z5-all[aria-pressed="true"] span:last-child { background: #0F2A22; color: #F4EFE3; }
/* sân khấu sản phẩm */
.z5-stage { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13); width: calc(var(--u) * 54); height: calc(var(--u) * 30); transition: opacity .45s var(--ez), transform .6s var(--ez), visibility 0s; }
.z5-plinth { position: absolute; left: 14%; right: 14%; bottom: 4%; height: 16%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(15, 42, 34, .18), rgba(15, 42, 34, .06) 55%, transparent 72%); }
.z5h { position: absolute; left: 10%; right: 10%; top: 2%; bottom: 10%; margin: 0; display: grid; place-items: center; opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--u) * 7)) scale(.92); transition: opacity .5s var(--ez), transform .9s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.z5h img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 1.6) calc(var(--u) * 1.6) rgba(15, 42, 34, .22)); }
.z5h.is-on { opacity: 1; transform: none; }
.z5h.is-out { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--u) * -6)) scale(.86); transition: opacity .35s var(--ez), transform .55s var(--ez); }
.z5h-src { position: absolute; left: 0; bottom: calc(var(--u) * -2.6); font-size: calc(var(--u) * .95); font-weight: 600; color: var(--ink3); letter-spacing: .02em; }
.z5h.is-real .z5h-src { color: #4E6B17; }
.z5-real { position: absolute; right: 2%; bottom: 8%; width: calc(var(--u) * 7.4); margin: 0; display: grid; gap: .3em; opacity: 0; transform: translateY(8px) rotate(3deg); transition: opacity .4s var(--ez), transform .6s var(--ez); pointer-events: none; }
.z5-real img { width: 100%; height: calc(var(--u) * 9); object-fit: cover; border-radius: 4px; border: 4px solid #FFFEFA; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 1.4) rgba(15, 42, 34, .3); }
.z5-real figcaption { font-size: calc(var(--u) * .9); font-weight: 700; color: #4E6B17; text-align: center; }
.z5[data-sel="areca"][data-mode="one"] .z5-real { opacity: 1; transform: rotate(3deg); transition-delay: .5s; }
/* thông số quanh vật thể */
.z5-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.z5-ln path { fill: none; stroke: rgba(15, 42, 34, .45); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.z5-ln circle { fill: #0F2A22; opacity: 0; }
.z5-ln .is-diff { stroke: #B4532A; } .z5-ln circle.is-diff { fill: #B4532A; }
.z5-ln .is-eq, .z5-ln .is-base { stroke: #4E6B17; } .z5-ln circle.is-eq, .z5-ln circle.is-base { fill: #4E6B17; }
.z5-ln.is-in path { animation: z5draw .55s var(--ez) both; animation-delay: calc(.55s + var(--i) * .14s); }
.z5-ln.is-in circle { animation: z5dot .3s var(--ez) both; animation-delay: calc(.5s + var(--i) * .14s); }
@keyframes z5draw { to { stroke-dashoffset: 0; } }
@keyframes z5dot { from { opacity: 0; } to { opacity: 1; } }
.z5-co { position: absolute; inset: 0; pointer-events: none; }
.z5-cl { position: absolute; display: grid; gap: .1em; min-width: calc(var(--u) * 10); padding: calc(var(--u) * .55) calc(var(--u) * .9); background: rgba(255, 254, 250, .92); border-radius: 4px; box-shadow: inset 3px 0 0 #4E6B17, 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(15, 42, 34, .14); opacity: 0; transform: translateY(6px); }
.z5-cl b { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em; color: #0F2A22; line-height: 1.05; }
.z5-cl small { font-size: calc(var(--u) * .9); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); font-family: var(--font-ui); margin: 0; }
.z5-cl.is-diff { box-shadow: inset 3px 0 0 #B4532A, 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(15, 42, 34, .14); }
.z5-cl.is-diff b { color: #9A4320; } .z5-cl.is-diff small { color: #9A4320; }
.z5-co.is-in .z5-cl { animation: z5cl .5s var(--ez) both; animation-delay: calc(.85s + var(--i) * .14s); }
@keyframes z5cl { to { opacity: 1; transform: none; } }
/* so với mẫu chuẩn */
.z5-cmp { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ez), visibility 0s .45s; }
.z5-cmp figure { position: absolute; top: 0; height: 58%; width: 44%; margin: 0; display: grid; place-items: center; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.z5-cmp img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 1.2) rgba(15, 42, 34, .2)); }
.z5-cmp-a { left: 2%; transform: translateX(calc(var(--u) * 8)) scale(.9); } .z5-cmp-b { right: 2%; transform: translateX(calc(var(--u) * -8)) scale(.9); }
.z5c-h { position: absolute; top: 59%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; padding-left: calc(var(--u) * 9); margin: 0; font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #87661A; }
.z5c-rows { position: absolute; top: 66%; left: 0; right: 0; display: grid; gap: 0; margin: 0; }
.z5c-rows div { display: grid; grid-template-columns: calc(var(--u) * 9) 1fr 1fr; align-items: baseline; padding: calc(var(--u) * .5) 0; border-top: 1px solid rgba(15, 42, 34, .12); }
.z5c-rows dt { font-size: var(--t-xs); color: var(--ink3); font-weight: 600; }
.z5c-rows dd { margin: 0; font-size: var(--t-md); font-weight: 700; color: #0F2A22; }
.z5c-rows .is-x .z5c-b { color: #9A4320; } .z5c-rows .is-m .z5c-b { color: #4E6B17; }
.z5c-rows .is-o .z5c-b { color: var(--ink3); font-weight: 500; font-style: italic; font-size: var(--t-sm); }
.z5[data-mode="cmp"] .z5-cmp { opacity: 1; visibility: visible; transition: opacity .45s var(--ez) .1s, visibility 0s; }
.z5[data-mode="cmp"] .z5-cmp figure { transform: none; }
.z5[data-mode="cmp"] .z5h, .z5[data-mode="cmp"] .z5-ln, .z5[data-mode="cmp"] .z5-co, .z5[data-mode="cmp"] .z5-plinth { opacity: 0 !important; transition: opacity .3s; }
/* khung thông tin */
.z5-info { position: absolute; left: calc(var(--u) * 63); top: calc(var(--u) * 14); width: calc(var(--u) * 31); display: grid; gap: calc(var(--u) * .9); align-content: start; color: #0F2A22; transition: opacity .45s var(--ez), transform .6s var(--ez), visibility 0s; }
.z5i-n { display: flex; align-items: baseline; gap: .5em; margin: 0; font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.z5i-n span { font-size: var(--t-sm); font-weight: 700; color: var(--ink3); letter-spacing: .04em; }
.z5i-src { margin: 0; justify-self: start; font-size: calc(var(--u) * .95); font-weight: 700; padding: .3em .7em; border-radius: 99px; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .22); }
.z5i-src.is-real { color: #F6F9E4; background: #4E6B17; box-shadow: none; }
.z5i-df, .z5-info .cn5-pr, .z5i-op { display: grid; gap: .25em; margin: 0; }
.z5-info .cx-lbl { font-size: calc(var(--u) * .95); }
.z5i-df b { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.z5-info .cn5-pr b { font-size: calc(var(--u) * 2.4); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.z5-info .cn5-pr small { font-size: calc(var(--u) * 1); color: var(--ink3); font-family: var(--font-ui); margin: 0; letter-spacing: 0; line-height: 1.35; }
.z5i-op { font-size: calc(var(--u) * 1.1); color: var(--ink3); line-height: 1.35; }
.z5i-cmp { justify-self: start; display: inline-flex; font: 700 var(--t-sm) var(--font-ui); color: #F4EFE3; background: #0F2A22; border-radius: 99px; padding: .6em 1.3em; transition: transform .3s var(--ez), box-shadow .3s var(--ez); }
.z5i-cmp span:last-child { display: none; } .z5i-cmp[aria-pressed="true"] span:first-child { display: none; } .z5i-cmp[aria-pressed="true"] span:last-child { display: inline; }
.z5i-cmp:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 42, 34, .25); }
.z5[data-sel="areca"] .z5i-cmp { visibility: hidden; }
/* dải năm phương án */
.z5-gal { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 44.4); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1); transition: opacity .45s var(--ez), transform .6s var(--ez), visibility 0s; }
.z5g-it { position: relative; display: grid; grid-template-columns: calc(var(--u) * 6) 1fr; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * .7); border-radius: calc(var(--u) * .7); text-align: left; color: #0F2A22; background: rgba(255, 254, 250, .5); box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .1); transition: background .35s var(--ez), box-shadow .35s var(--ez), transform .35s var(--ez); }
.z5g-it:hover { background: rgba(255, 254, 250, .9); transform: translateY(-2px); }
.z5g-it[aria-pressed="true"] { background: #FFFEFA; box-shadow: inset 0 0 0 2px #0F2A22, 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(15, 42, 34, .16); }
.z5g-k { position: absolute; left: calc(var(--u) * .4); top: calc(var(--u) * .35); font-style: normal; font-size: calc(var(--u) * .85); font-weight: 800; color: var(--ink3); }
.z5g-im { display: grid; place-items: center; height: calc(var(--u) * 4.6); }
.z5g-im img { max-width: 100%; max-height: 100%; object-fit: contain; }
.z5g-t { display: grid; gap: .1em; min-width: 0; }
.z5g-t b { font-size: var(--t-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z5g-t small { font-size: calc(var(--u) * 1); font-weight: 600; color: var(--ink3); font-family: var(--font-ui); margin: 0; letter-spacing: 0; }
.z5g-it.is-areca small { color: #4E6B17; }
/* chế độ cả năm: ba nhóm */
.z5x { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 14.4); width: calc(var(--u) * 88); height: calc(var(--u) * 28); display: flex; gap: calc(var(--u) * 2.4); opacity: 0; visibility: hidden; transition: opacity .4s var(--ez), visibility 0s .4s; }
.z5-x-dummy {}
.z5x-g { flex: var(--n) 1 0; display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 1); }
.z5x-gl { margin: 0; padding-bottom: calc(var(--u) * .6); border-bottom: 2px solid #0F2A22; font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0F2A22; }
.z5x-g.g-b .z5x-gl { border-color: #87661A; color: #87661A; } .z5x-g.g-c .z5x-gl { border-color: #B4532A; color: #9A4320; }
.z5x-row { display: flex; gap: calc(var(--u) * 1.2); }
.z5x-it { flex: 1 1 0; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: calc(var(--u) * .6); opacity: 0; transform: translateY(calc(var(--u) * 2)) scale(.94); transition: opacity .5s var(--ez), transform .8s cubic-bezier(.16, 1, .3, 1); }
.z5x-it img { width: 100%; height: calc(var(--u) * 15); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(15, 42, 34, .2)); }
.z5x-it figcaption { display: grid; gap: .1em; }
.z5x-it b { font-size: var(--t-md); font-weight: 800; }
.z5x-it span { font-size: var(--t-sm); font-weight: 700; } .z5x-it span.is-x { color: #9A4320; } .z5x-it span.is-b { color: #4E6B17; }
.z5.is-all .z5x { opacity: 1; visibility: visible; transition: opacity .4s var(--ez), visibility 0s; }
.z5.is-all .z5x-it { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i) * .13s); }
.z5.is-all .z5-stage, .z5.is-all .z5-info, .z5.is-all .z5-gal { opacity: 0; visibility: hidden; transform: translateY(calc(var(--u) * 1)); transition: opacity .35s var(--ez), transform .45s var(--ez), visibility 0s .35s; }
.z5-end { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 44.8) !important; display: grid; gap: .25em; font-size: var(--t-lg); font-weight: 600; color: #0F2A22; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ez), transform .6s var(--ez); }
.z5-end b { color: #4E6B17; font-weight: 800; }
.z5-end span { font-size: var(--t-sm); color: var(--ink3); font-weight: 600; }
.z5.is-end .z5-end { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .z5-ln.is-in path, .z5-ln.is-in circle, .z5-co.is-in .z5-cl { animation-duration: .01s !important; animation-delay: 0s !important; } }
body.safe .z5-ln path { animation: none !important; stroke-dashoffset: 0; } body.safe .z5-ln circle, body.safe .z5-cl { animation: none !important; opacity: 1; transform: none; }
.z5-ln path { vector-effect: non-scaling-stroke; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.z5-ln.is-in path { animation: z5dot .5s var(--ez) both; animation-delay: calc(.55s + var(--i) * .14s); }
.z5-real { right: auto; left: 0; bottom: 4%; }
.z5h-src { left: auto; right: 0; }
.z5x { height: calc(var(--u) * 26); }
.z5x-g { grid-template-rows: auto auto; align-content: start; }
.z5x-it { grid-template-rows: auto auto; }
.z5x-it img { height: calc(var(--u) * 16); }
.z5-end { display: block; top: calc(var(--u) * 43.6) !important; }
.z5-end span { display: block; margin-top: .3em; }
.z5x-gl { min-height: 2.9em; display: flex; align-items: flex-end; }
.z5-end { pointer-events: none; }
.z5-cmp figure { top: 0; height: 50%; }
.z5c-h { top: 52%; }
.z5c-rows { top: 59%; }
.z5c-rows dd, .z5-dbody .cn5-rows dd { text-decoration: none !important; }
.z5-cl b, .z5-cl small { white-space: nowrap; }
.z5g-t b { white-space: normal; font-size: calc(var(--u) * 1.18); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ======== 07 · bảng xếp hạng sống ======== */
.cn7-row { grid-template-columns: calc(var(--u) * 3) calc(var(--u) * 12.6) 1fr calc(var(--u) * 7.2); }
.cn7-rk { display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; font-style: normal; font-size: calc(var(--u) * 1.05); font-weight: 800; color: var(--ink3); box-shadow: inset 0 0 0 1.5px rgba(15, 42, 34, .22); transition: background .5s var(--ez), color .5s var(--ez); }
.cn7-row.is-lead .cn7-rk { background: #0F2A22; color: #E9D9A6; box-shadow: 0 0 0 4px rgba(201, 174, 107, .25); }
.cn7-bar { position: relative; height: calc(var(--u) * 2.6); border-radius: 99px; background: rgba(15, 42, 34, .06); box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .06); overflow: hidden; width: calc(var(--u) * 34); }
.cn7-bar i { position: relative; height: 100%; box-shadow: inset -2px 0 0 #F4EFE3; background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .06)) !important; background-color: var(--c); }
.cn7-bar i:first-child { border-radius: 99px 0 0 99px; }
.scene.is-in .cn7-bar i { animation: cn7grow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--j, 0) * .12s); }
.cn7-bar i:nth-child(1) { --j: 0; } .cn7-bar i:nth-child(2) { --j: 1; } .cn7-bar i:nth-child(3) { --j: 2; } .cn7-bar i:nth-child(4) { --j: 3; } .cn7-bar i:nth-child(5) { --j: 4; }
@keyframes cn7grow { from { width: 0; } }
.cn7-row.is-lead .cn7-bar { box-shadow: inset 0 0 0 1px rgba(15, 42, 34, .06), 0 0 0 3px rgba(201, 174, 107, .25); }
.cn7-row.is-lead .cn7-v { color: #4E6B17; }
/* khoảng cách Areca – Hapobe */
.cn7-gap { position: absolute; right: calc(var(--u) * 7.6); width: calc(var(--u) * 1); top: calc(var(--u) * 4.6 * var(--a) + var(--u) * 2.3); height: calc(var(--u) * 4.6 * var(--b)); border: 2px solid #87661A; border-left: 0; border-radius: 0 6px 6px 0; transition: top .95s var(--ez), height .95s var(--ez), border-color .4s; list-style: none; }
.cn7-gap span { position: absolute; left: calc(100% + var(--u) * .5); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: calc(var(--u) * .95); font-weight: 800; color: #87661A; background: #F4EFE3; padding: .15em .4em; border-radius: 4px; }
.cn7-gap.is-over { border-color: #9A4320; } .cn7-gap.is-over span { color: #FFF8E6; background: #9A4320; }
.cn7-v { position: relative; z-index: 1; }
.cn7.is-flip .cn7-row.is-lead { animation: cn7flash 1.3s var(--ez) .5s; }
@keyframes cn7flash { 0%, 100% { background: transparent; } 30% { background: rgba(201, 174, 107, .22); } }
@media (prefers-reduced-motion: reduce) { .scene.is-in .cn7-bar i, .cn7.is-flip .cn7-row.is-lead { animation: none !important; } }
body.safe .cn7-bar i, body.safe .cn7-row { animation: none !important; }
.cn7-chart { width: calc(var(--u) * 57); }
.cn7-row { grid-template-columns: calc(var(--u) * 2.6) calc(var(--u) * 11) calc(var(--u) * 26) calc(var(--u) * 8) 1fr; }
.cn7-row .cn7-v { grid-column: 5; }
.cn7-bar { width: calc(var(--u) * 26); }
.cn7-bar i { width: calc(var(--u) * .26 * var(--p, 0)); }
.cn7-gap { right: auto; left: calc(var(--u) * 42.3); }
.cn7-nm { font-size: calc(var(--u) * 1.4); line-height: 1.15; }
.cn7-ctl { left: calc(var(--u) * 65); width: calc(var(--u) * 29); }
.cn7-tco { width: calc(var(--u) * 57); }
.cn7-v { font-size: calc(var(--u) * 2.1); }

/* ======== 08 · thác dòng tiền: dựng từng bậc, nối bậc, số cuối phát sáng ======== */
.q8-wf { height: calc(var(--u) * 16); }
.q8-b i { left: 20%; right: 20%; border-radius: 4px; transition: transform .75s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.35s + var(--i) * .28s);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12)); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(0, 0, 0, .35); }
.q8-b.is-tot i { background-color: rgba(242, 237, 225, .78); }
.q8-b.is-neg i { background-color: #C9785A; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 6px, transparent 6px 12px), linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(0, 0, 0, .1)); }
.q8-b.is-pos i { background-color: #C9AE6B; }
.q8-b.is-paid i { background-color: #CFE06C; box-shadow: 0 0 calc(var(--u) * 2.4) rgba(207, 224, 108, .45), 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(0, 0, 0, .35); }
.q8-b b { transition-delay: calc(.75s + var(--i) * .28s); }
/* nối bậc: từ mức sau bước này sang cột kế */
.q8-b:not(:last-of-type):not(.is-paid)::after { content: ''; position: absolute; left: 80%; width: 40%; bottom: calc(var(--e) * 100%); border-top: 1.5px dashed rgba(242, 237, 225, .45); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ez); transition-delay: calc(.95s + var(--i) * .28s); }
.q8.at1 .q8-b::after, .q8:not([data-k]) .q8-b::after { transform: none; }
.q8-b.is-paid b { font-size: calc(var(--u) * 2.4); text-shadow: 0 0 calc(var(--u) * 1.6) rgba(207, 224, 108, .5); }
.q8.at1 .q8-b.is-paid i { animation: q8glow 2.4s ease-in-out 2.6s 2; }
@keyframes q8glow { 50% { box-shadow: 0 0 calc(var(--u) * 4) rgba(207, 224, 108, .7), 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(0, 0, 0, .35); } }
.q8-b span { font-size: var(--t-sm); }
@media (prefers-reduced-motion: reduce) { .q8.at1 .q8-b.is-paid i { animation: none; } }
body.safe .q8-b.is-paid i { animation: none !important; }

/* ======== 12 · đổi nắp: ít chữ, hình lớn, thanh phụ trội ======== */
.z12-sw { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.6); }
.z12-sw .cx-opt { min-width: calc(var(--u) * 11); font-size: var(--t-md); }
.z12-c { position: absolute; top: calc(var(--u) * 18.6); width: calc(var(--u) * 41); display: grid; gap: calc(var(--u) * .6); }
.z12-c.qa { left: calc(var(--u) * 6); } .z12-c.hb { left: calc(var(--u) * 53); }
.z12-t { margin: 0; display: flex; align-items: baseline; gap: .6em; font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
.z12-t span { font-size: var(--t-sm); font-weight: 600; color: var(--ink3); letter-spacing: 0; }
.z12-im { position: relative; height: calc(var(--u) * 13.5); margin: 0; }
.z12-pool { position: absolute; left: 12%; right: 12%; bottom: 0; height: 26%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(222, 198, 148, .2), transparent 72%); transition: background .6s var(--ez); }
.z12.is-bag .z12-pool { background: radial-gradient(50% 50% at 50% 50%, rgba(207, 224, 108, .28), transparent 72%); }
.z12-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .45s var(--ez), transform .7s cubic-bezier(.3, 1.35, .4, 1); }
.z12-im .i-b { opacity: 0; transform: translateY(calc(var(--u) * -2.6)); }
.z12.is-bag .z12-im .i-p { opacity: 0; transform: translateY(calc(var(--u) * -1.6)) scale(.97); transition: opacity .35s var(--ez), transform .45s var(--ez); }
.z12.is-bag .z12-im .i-b { opacity: 1; transform: none; transition-delay: .2s; }
.z12-tag { position: absolute; left: 0; top: 0; font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.z12-tag i { font-style: normal; padding: .35em .75em; border-radius: 99px; }
.z12-tag .l-p { color: var(--ink2); box-shadow: inset 0 0 0 1px var(--edge2); } .z12-tag .l-b { display: none; background: var(--lime); color: #0B1A14; }
.z12.is-bag .z12-tag .l-p { display: none; } .z12.is-bag .z12-tag .l-b { display: inline-block; }
.z12-pr { margin: 0; display: flex; align-items: baseline; gap: .5em; }
.z12-pr b { font-size: calc(var(--u) * 3.6); font-weight: 800; letter-spacing: -.03em; line-height: 1; transition: color .5s var(--ez); }
.z12.is-bag .z12-pr b { color: #E9F3A3; }
.z12-pr small { font-size: var(--t-sm); color: var(--ink3); font-family: var(--font-ui); margin: 0; }
/* thanh: phần nền = giá nắp PET, phần lime = phụ trội khi đổi nắp */
.z12-bar { position: relative; height: calc(var(--u) * 2.2); border-radius: 99px; background: rgba(242, 237, 225, .07); display: flex; overflow: visible; }
.z12-b0 { position: relative; width: calc(var(--base) * 100%); height: 100%; border-radius: 99px 0 0 99px; background: rgba(242, 237, 225, .26); font-style: normal; }
.z12-b0 span { position: absolute; left: calc(var(--u) * .8); top: 50%; transform: translateY(-50%); font-size: calc(var(--u) * .95); font-weight: 700; color: var(--ink); white-space: nowrap; }
.z12-b1 { width: calc((1 - var(--base)) * 100%); height: 100%; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, #B9D35A, #E3F08C); box-shadow: 0 0 calc(var(--u) * 1.4) rgba(207, 224, 108, .5); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .35s; font-style: normal; }
.z12.is-bag .z12-b1 { transform: none; }
.z12-bar em { position: absolute; right: 0; bottom: calc(100% + var(--u) * .3); font-style: normal; font-size: calc(var(--u) * 2.8); font-weight: 800; letter-spacing: -.02em; color: var(--lime); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 100% 100%; transition: opacity .4s var(--ez) .8s, transform .6s cubic-bezier(.3, 1.4, .4, 1) .8s; }
.z12.is-bag .z12-bar em { opacity: 1; transform: none; }
.z12-dl { margin: 0; font-size: var(--t-sm); color: var(--ink2); opacity: 0; transition: opacity .4s var(--ez) 1s; }
.z12.is-bag .z12-dl { opacity: 1; }
.z12-il { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 14.6); margin: 0; font-size: calc(var(--u) * .95); color: var(--ink3); }
.z12-end { top: calc(var(--u) * 44.4) !important; }
.z12-end p { font-size: var(--t-xl); }
.z12-end span { font-size: var(--t-sm); }
.z12-im { height: calc(var(--u) * 12.4); }
.z12-c { top: calc(var(--u) * 17.8); gap: calc(var(--u) * .5); }
.z12-end { top: calc(var(--u) * 46) !important; gap: calc(var(--u) * .3); }
.cn7-row[data-id="hapobe"] .cn7-nm::after, .cn7-row[data-id="areca"] .cn7-nm::after { font-size: calc(var(--u) * .95); white-space: nowrap; }
.q13-hic { width: 58%; height: 58%; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.q13-hic .ok { stroke: var(--gold); stroke-width: 2; }
.q13-hic > * { stroke-dasharray: 120; }
body.present:not(.safe) .q13.is-active .q13-hic > * { animation: q13ic 1.3s var(--ez) .4s backwards; }
.q13-hic { width: 66%; height: 66%; }

/* ======== 07 · SÂN KHẤU QUYẾT ĐỊNH ======== */
.z7-bg { background: radial-gradient(80% 90% at 30% 40%, #FFFDF6 0%, #F3EDE0 55%, #E9E0CC 100%) !important; }
.z7-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 42, 34, .035) 1px, transparent 1px); background-size: 100% calc(var(--u) * 5); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 60%, transparent); opacity: .7; }
.z7-sc { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 5.3); z-index: 3; }
.z7-sc .cx-opt { font-size: var(--t-xs); }
.z7-stage { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.6); width: calc(var(--u) * 56); }
.z7-leg { display: flex; gap: calc(var(--u) * 1.4); margin: 0 0 calc(var(--u) * 1) calc(var(--u) * 16.8); padding: 0; list-style: none; font-size: calc(var(--u) * 1); font-weight: 600; color: var(--ink3); }
.z7-leg li { display: inline-flex; align-items: center; gap: .4em; }
.z7-leg i { width: .9em; height: .9em; border-radius: 3px; background: var(--c); }
.z7-rows { position: relative; height: calc(var(--u) * 25.5); margin: 0; padding: 0; list-style: none; }
.z7-spot { position: absolute; left: calc(var(--u) * -1.2); right: calc(var(--u) * -1.2); top: calc(var(--u) * 2.3); height: calc(var(--u) * 5.4); border-radius: calc(var(--u) * .9); background: linear-gradient(90deg, rgba(201, 174, 107, .26), rgba(201, 174, 107, .08) 60%, rgba(201, 174, 107, 0)); box-shadow: inset 3px 0 0 #B08A3A; }
.z7-row { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 5.1); display: grid; grid-template-columns: calc(var(--u) * 3.6) calc(var(--u) * 12.4) 1fr calc(var(--u) * 8); align-items: center; gap: calc(var(--u) * .8); cursor: pointer; color: #0F2A22;
  transform: translateY(calc(var(--u) * 5.1 * var(--r))); transition: transform .95s cubic-bezier(.65, 0, .25, 1), opacity .4s var(--ez); }
.z7-row:not(.is-lead) { opacity: .82; }
.z7-row:hover, .z7-row[aria-pressed="true"] { opacity: 1; }
.z7-rk { font-style: normal; font-size: calc(var(--u) * 2.2); font-weight: 800; letter-spacing: -.04em; color: rgba(15, 42, 34, .28); text-align: center; transition: color .5s var(--ez), transform .5s var(--ez); }
.z7-row.is-lead .z7-rk { color: #9A7A2E; transform: scale(1.18); }
.z7-nm { display: grid; gap: .05em; min-width: 0; }
.z7-nm b { font-size: calc(var(--u) * 1.5); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.z7-nm small { font-size: calc(var(--u) * .95); font-weight: 600; color: var(--ink3); font-family: var(--font-ui); margin: 0; letter-spacing: 0; white-space: nowrap; }
.z7-row.is-lead .z7-nm b { font-size: calc(var(--u) * 1.75); }
.z7-bar { position: relative; display: flex; height: calc(var(--u) * 1.7); width: calc(var(--u) * 30); border-radius: 99px; background: rgba(15, 42, 34, .07); }
.z7-row.is-lead .z7-bar { height: calc(var(--u) * 2.3); }
.z7-bar i { position: relative; height: 100%; width: calc(var(--u) * .3 * var(--p, 0)); background-color: var(--c); background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%); transition: width .9s cubic-bezier(.65, 0, .25, 1); }
.z7-bar i + i { box-shadow: inset 2px 0 0 rgba(246, 241, 229, .85); }
.z7-bar i:first-child { border-radius: 99px 0 0 99px; }
.z7-bar i::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px); white-space: nowrap; font-size: calc(var(--u) * .95); font-weight: 700; color: #F4EFE3; background: #0F2A22; padding: .3em .6em; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 4; }
.z7-bar i:hover::after { opacity: 1; transform: translateX(-50%); }
.z7-row .cn7-v { text-align: right; font-size: calc(var(--u) * 2.1); font-weight: 800; letter-spacing: -.02em; }
.z7-row.is-lead .cn7-v { font-size: calc(var(--u) * 3); color: #4E6B17; }
/* dựng cảnh: Areca vào trước, bốn NCC còn lại theo thứ hạng, rồi 5 nhóm màu build theo thứ tự tiêu chí */
.scene.is-in .z7-row { animation: z7in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--e) * .16s + min(var(--e), 1) * .35s); }
@keyframes z7in { from { opacity: 0; translate: calc(var(--u) * -3) 0; } }
.scene.is-in .z7-bar i { animation: z7seg .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.5s + var(--j) * .22s); }
@keyframes z7seg { from { width: 0; } }
.scene.is-in .z7-spot { animation: z7spot .8s var(--ez) both .2s; }
@keyframes z7spot { from { opacity: 0; transform: scaleX(.6); transform-origin: 0 50%; } }
.z7.is-flip .z7-spot { animation: z7pulse 1.2s var(--ez) .5s; }
@keyframes z7pulse { 40% { background: linear-gradient(90deg, rgba(201, 174, 107, .5), rgba(201, 174, 107, .15) 60%, rgba(201, 174, 107, 0)); } }
.z7-bd { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.1em; margin: calc(var(--u) * .9) 0 0; padding-top: calc(var(--u) * .8); border-top: 1px solid rgba(15, 42, 34, .12); font-size: calc(var(--u) * 1.1); color: var(--ink2); }
.z7-bd b { font-weight: 800; color: #0F2A22; margin-right: .3em; }
.z7-bd span { display: inline-flex; align-items: baseline; gap: .3em; font-weight: 600; }
.z7-bd span i { align-self: center; width: .7em; height: .7em; border-radius: 2px; background: var(--c); }
.z7-bd em { font-style: normal; font-weight: 800; color: #0F2A22; }
.scene.is-in .z7-bd { animation: z7fade .6s var(--ez) 2.7s both; }
@keyframes z7fade { from { opacity: 0; transform: translateY(6px); } }
/* bảng giải thích quyết định */
.z7-ins { position: absolute; left: calc(var(--u) * 66); top: calc(var(--u) * 13.2); width: calc(var(--u) * 28); display: grid; gap: calc(var(--u) * .7); align-content: start; color: #0F2A22; }
.scene.is-in .z7-ins { animation: z7fade .7s var(--ez) 2.3s both; }
.z7-ins .cn7-badge { margin: 0; font-size: calc(var(--u) * 1.05); }
.z7-dn { margin: 0; font-size: calc(var(--u) * 4.4); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #4E6B17; transition: color .5s var(--ez); }
.z7.is-sim .z7-dn { color: #9A4320; }
.z7-dl { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.z7-why { display: grid; gap: calc(var(--u) * .5); padding-top: calc(var(--u) * .6); border-top: 1px solid rgba(15, 42, 34, .12); }
.z7-why p { margin: 0; font-size: calc(var(--u) * 1.15); line-height: 1.35; color: var(--ink2); }
.z7-why b { display: block; font-size: var(--t-sm); font-weight: 800; color: #0F2A22; }
.z7.is-sim .z7-why { display: none; }
.z7-asm { display: grid; gap: calc(var(--u) * .45); padding-top: calc(var(--u) * .6); border-top: 1px solid rgba(15, 42, 34, .12); }
.z7-asm .cx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.z7-asm .cx-opt { font-size: calc(var(--u) * 1.15); }
.z7-asm .cx-opt small { font-size: calc(var(--u) * .85); }
.z7-asm .cn7-say { margin: 0; min-height: 0; font-size: calc(var(--u) * 1.1); }
.z7-reset { justify-self: start; font: 700 calc(var(--u) * 1.05) var(--font-ui); color: #0F2A22; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.z7-reset:disabled { opacity: .35; }
.z7-dec { display: none; margin: 0; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * .6); background: #0F2A22; color: #F2EDE1; gap: .3em; }
.z7-dec p { margin: 0; font-size: var(--t-md); } .z7-dec b { color: var(--lime); }
.z7.is-dec .z7-dec { display: grid; animation: z7fade .6s var(--ez) both; }
.z7.is-dec .z7-asm { display: none; }
.z7-tco { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 49.4) !important; width: calc(var(--u) * 88); font-size: calc(var(--u) * 1.05); color: var(--ink3); margin: 0; }
@media (prefers-reduced-motion: reduce) { .scene.is-in .z7-row, .scene.is-in .z7-bar i, .scene.is-in .z7-ins, .scene.is-in .z7-bd, .scene.is-in .z7-spot { animation: none !important; } }
body.safe .z7-row, body.safe .z7-bar i, body.safe .z7-ins, body.safe .z7-bd, body.safe .z7-spot { animation: none !important; }
.z7-dn { font-size: calc(var(--u) * 3.6); white-space: nowrap; }

/* ======== 08 · BẢNG KỂ GIAO DỊCH ======== */
.z8-bg { background: radial-gradient(70% 80% at 70% 70%, #15302A 0%, #0D1E19 55%, #08130F 100%) !important; }
.z8-tl { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 13.2); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--u) * 3); padding-top: calc(var(--u) * 1.9); }
.z8-line { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 1.2); overflow: visible; }
.z8-line path { fill: none; stroke: rgba(201, 174, 107, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.z8-line circle { fill: #0D1E19; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.scene.is-in .z8-line path { animation: z8draw 1.6s cubic-bezier(.4, 0, .2, 1) .6s both; }
@keyframes z8draw { from { stroke-dashoffset: 1; } }
.z8-c { position: relative; display: grid; grid-template-rows: auto auto; gap: calc(var(--u) * .8); text-align: left; color: var(--ink); margin-top: calc(var(--i) * var(--u) * .8); transition: transform .5s var(--ez); }
.scene.is-in .z8-c { animation: z8card .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * .45s); }
@keyframes z8card { from { opacity: 0; transform: translateY(calc(var(--u) * 2)); } }
.z8-im { position: relative; display: block; height: calc(var(--u) * 14); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(242, 237, 225, .14), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, .5); transition: height .9s cubic-bezier(.65, 0, .25, 1), box-shadow .3s; }
.q8.at1 .z8-im { height: calc(var(--u) * 6.6); }
.z8-im img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ez); }
.z8-c:hover .z8-im img, .z8-c:focus-visible .z8-im img { transform: scale(1.05); }
.z8-c:hover .z8-im { box-shadow: 0 0 0 1.5px var(--gold), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, .5); }
.z8-im .ev-badge { position: absolute; left: calc(var(--u) * .6); top: calc(var(--u) * .6); font-style: normal; }
.z8-cap { display: grid; gap: .1em; }
.z8-step { font-style: normal; font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.z8-cap b { font-size: calc(var(--u) * 2.2); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; transition: font-size .8s var(--ez); }
.q8.at1 .z8-cap b { font-size: calc(var(--u) * 1.7); }
.z8-cap span { font-size: var(--t-sm); color: var(--ink2); }
.z8-cap em { font-style: normal; font-size: calc(var(--u) * .95); color: var(--ink3); }
.q8.at1 .z8-cap span { display: none; }
/* dòng tiền */
.z8-money { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 29.2); width: calc(var(--u) * 58); opacity: 0; transform: translateY(calc(var(--u) * 1.2)); visibility: hidden; transition: opacity .6s var(--ez) .3s, transform .8s var(--ez) .3s, visibility 0s .9s; }
.q8.at1 .z8-money, .q8:not([data-k]) .z8-money { opacity: 1; transform: none; visibility: visible; transition: opacity .6s var(--ez) .3s, transform .8s var(--ez) .3s, visibility 0s; }
.z8-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0; }
.z8-refb { font: 700 calc(var(--u) * 1) var(--font-ui); color: var(--gold); padding: .35em .8em; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(201, 174, 107, .5); transition: background .3s, color .3s; }
.z8-refb[aria-pressed="true"] { background: var(--gold); color: #0B1A14; }
.z8-wf { position: relative; height: calc(var(--u) * 12.6); margin: calc(var(--u) * 2.4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid rgba(242, 237, 225, .18); }
.z8-b { position: relative; outline: none; }
.z8-b i { position: absolute; left: 22%; right: 22%; bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); border-radius: 3px; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; transition-delay: calc(.6s + var(--i) * .3s);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12)); }
.z8-b.is-tot i { background-color: rgba(242, 237, 225, .75); }
.z8-b.is-neg i { background-color: #C9785A; transform-origin: 50% 0; }
.z8-b.is-pos i { background-color: #C9AE6B; }
.z8-b.is-paid i { background-color: #CFE06C; box-shadow: 0 0 calc(var(--u) * 2) rgba(207, 224, 108, .35); }
.q8.at1 .z8-b i, .q8:not([data-k]) .z8-b i { transform: none; }
.z8-b:not(.is-paid)::after { content: ''; position: absolute; left: 78%; width: 44%; bottom: calc(var(--e) * 100%); border-top: 1.5px dashed rgba(242, 237, 225, .4); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ez); transition-delay: calc(.95s + var(--i) * .3s); }
.q8.at1 .z8-b::after, .q8:not([data-k]) .z8-b::after { transform: none; }
.z8-b b { position: absolute; left: -10%; right: -10%; bottom: calc(var(--hi) * 100% + var(--u) * .35); text-align: center; font-size: calc(var(--u) * 1.15); font-weight: 800; opacity: 0; transition: opacity .4s var(--ez); transition-delay: calc(.95s + var(--i) * .3s); }
.z8-b.is-neg b { color: #E8A68A; } .z8-b.is-pos b { color: #E3CC8E; } .z8-b.is-paid b { color: var(--lime); font-size: calc(var(--u) * 1.4); }
.q8.at1 .z8-b b, .q8:not([data-k]) .z8-b b { opacity: 1; }
.z8-b span { position: absolute; left: -10%; right: -10%; top: calc(100% + var(--u) * .5); text-align: center; font-size: calc(var(--u) * 1.05); color: var(--ink2); }
.z8-tip { position: absolute; left: 50%; bottom: calc(var(--hi) * 100% + var(--u) * 2.4); width: calc(var(--u) * 16); transform: translateX(-50%) translateY(6px); font-style: normal; font-size: calc(var(--u) * .95); line-height: 1.35; color: #0B1A14; background: #F2EDE1; padding: .55em .7em; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; }
.z8-b:first-child .z8-tip { left: 0; transform: translateY(6px); } .z8-b:nth-child(6) .z8-tip { left: auto; right: 0; transform: translateY(6px); }
.z8-b:hover .z8-tip, .z8-b:focus .z8-tip { opacity: 1; transform: translateX(-50%); }
.z8-b:first-child:hover .z8-tip, .z8-b:nth-child(6):hover .z8-tip, .z8-b:first-child:focus .z8-tip, .z8-b:nth-child(6):focus .z8-tip { transform: none; }
.z8-ref { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px dashed rgba(201, 174, 107, .45); list-style: none; pointer-events: none; transition: border-color .3s; }
.z8-ref span { position: absolute; right: 0; bottom: .25em; font-size: calc(var(--u) * .9); color: rgba(201, 174, 107, .7); font-weight: 700; }
.z8.is-ref .z8-ref { border-top: 2px solid var(--gold); box-shadow: 0 0 12px rgba(201, 174, 107, .5); }
.z8.is-ref .z8-ref span { color: var(--gold); font-size: calc(var(--u) * 1.1); }
.z8.is-ref .z8-b:nth-child(-n+4) i { opacity: .45; } .z8.is-ref .z8-b:nth-child(4) i { opacity: 1; }
/* kết quả */
.z8-hero { position: absolute; left: calc(var(--u) * 68); top: calc(var(--u) * 29.2); width: calc(var(--u) * 26); display: grid; gap: calc(var(--u) * .4); align-content: start; padding-left: calc(var(--u) * 2); border-left: 1px solid rgba(242, 237, 225, .14); opacity: 0; visibility: hidden; transition: opacity .6s var(--ez), visibility 0s .6s; }
.q8.at1 .z8-hero, .q8:not([data-k]) .z8-hero { opacity: 1; visibility: visible; transition: opacity .6s var(--ez) 2.2s, visibility 0s; }
.z8-hl { margin: 0; font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.z8-hn { margin: 0; display: flex; align-items: baseline; gap: .3em; }
.z8-hn b { font-size: calc(var(--u) * 5.2); font-weight: 800; letter-spacing: -.045em; line-height: 1; background: linear-gradient(180deg, #F4F9D0, #CFE06C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.z8-hn small { font-size: calc(var(--u) * 2); font-weight: 700; color: var(--lime); margin: 0; font-family: var(--font-ui); }
.q8.at1 .z8-hn { animation: z8pop .7s cubic-bezier(.3, 1.3, .4, 1) 2.2s both; }
@keyframes z8pop { from { transform: scale(.85); opacity: 0; } }
.z8-ho { margin: calc(var(--u) * 1.2) 0 0; padding-top: calc(var(--u) * 1); border-top: 1px solid rgba(242, 237, 225, .12); display: grid; gap: .1em; }
.z8-ho b { font-size: calc(var(--u) * 2.4); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.z8-ho span { font-size: var(--t-sm); color: var(--ink2); }
.z8-lim { left: calc(var(--u) * 6) !important; top: calc(var(--u) * 49.2) !important; font-size: calc(var(--u) * 1.1) !important; color: var(--ink3) !important; }
.z8-lim b { color: #E8A68A !important; }
@media (prefers-reduced-motion: reduce) { .scene.is-in .z8-c, .scene.is-in .z8-line path, .q8.at1 .z8-hn { animation: none !important; } }
body.safe .z8-c, body.safe .z8-line path, body.safe .z8-hn { animation: none !important; }
.z8-line path { stroke-dasharray: none; transform-origin: 16.5% 50%; transform-box: fill-box; }
.scene.is-in .z8-line path { animation: z8line 1.4s cubic-bezier(.4, 0, .2, 1) .6s both; }
@keyframes z8line { from { transform: scaleX(0); } }
.z8-c { margin-top: calc(var(--i) * var(--u) * .45); }
.z8-im { height: calc(var(--u) * 16); }
.q8.at1 .z8-im { height: calc(var(--u) * 6.2); }
.q8.at1 .z8-cap em { display: none; }
.q8.at1 .z8-cap { gap: 0; }
.z8-money, .z8-hero { top: calc(var(--u) * 30.6); }
.z8-wf { height: calc(var(--u) * 11.6); margin-top: calc(var(--u) * 2.2); }
.z8-ref span { right: auto; left: 0; }
.z8-ho span { font-size: calc(var(--u) * 1.15); }
.z8-c::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * (-1.3 - var(--i) * .45)); width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); margin-left: calc(var(--u) * -.55); border-radius: 50%; background: #0D1E19; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 4px rgba(201, 174, 107, .12); }
.z8-c::after { content: ''; position: absolute; left: 50%; top: calc(var(--u) * (-.2 - var(--i) * .45)); width: 1px; height: calc(var(--u) * (.2 + var(--i) * .45)); background: rgba(201, 174, 107, .4); }
.z8-ref span { left: calc(var(--u) * -5.6); bottom: -.6em; }