/* THU MUA XANH · FINAL — 14 cảnh pitch + trung tâm phản biện.
   Hướng: Apple Keynote × Bloomberg Editorial × Sustainable Premium F&B.
   Một thông điệp mỗi cảnh; số liệu dùng chữ số đều; ảnh thật có nhãn "Ảnh thật"; minh họa ghi rõ. */

/* ---------- Bộ cảnh ---------- */
.scene.deck-off { display: none !important; }
.hud-tools .deck-btn { color: var(--lime); }
.hud.in-qa .hud-tools .deck-btn { background: var(--lime); color: var(--forest-900); }
.hud.in-qa .hud-brand b::after { content: ' · Phản biện'; font-family: var(--font-ui); font-size: .8em; font-weight: 600; color: var(--lime); }
.hud.on-light.in-qa .hud-brand b::after { color: var(--lime-deep); }
.toc-deck + .toc-deck { margin-top: calc(var(--u) * 2.4); padding-top: calc(var(--u) * 1.6); border-top: 1px solid rgba(239, 234, 220, .16); }
.toc-dh { grid-column: 1 / -1; font-family: var(--font-ui); font-size: var(--f-sm); font-weight: 700; color: var(--lime); margin-bottom: .6em; }

/* chip mô phỏng ở các cảnh Q&A có thanh trượt */
.sim-chip { position: absolute; z-index: 30; right: var(--px); bottom: calc(var(--u) * 2.6); display: flex; align-items: center; gap: .9em; font-size: var(--f-xs); color: var(--fg); background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px dashed var(--acc2); border-radius: 6px; padding: .35em .45em .35em .9em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sim-chip b { color: var(--acc2); }
.sim-chip .btn { border-color: var(--line2); }

/* ---------- Khung chung pitch ---------- */
.pc .sc-in { width: min(100%, calc(var(--u) * 100)); align-content: center; gap: calc(var(--u) * 1.8); padding-bottom: calc(var(--u) * 6.2); }
.pc .sc-src { right: calc(var(--px) + var(--u) * 6); bottom: calc(var(--u) * 2.9); opacity: .85; }
.pc .h1 { font-size: calc(var(--f-h1) * 1.04); max-width: 26em; }
.pc .h1 em { font-style: italic; font-weight: 340; color: var(--acc); }
.th-light.pc .h1 em { color: var(--lime-deep); }
.p-hd { display: grid; gap: .35em; }
.p-hd.row { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 3); }
.p-lbl { font-size: var(--f-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.th-light.pc { --bg: #F4EFE3; }
.th-dark.pc:not(.hero3) { --bg: #0B1A14; }
.th-dark.pc:not(.hero3) .sc-in::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 85% 0%, rgba(207, 224, 108, .06), transparent 70%); }

/* bước trình chiếu: .k1/.k2 hiện khi scene[data-k] đủ */
.pc .k1, .pc .k2 { transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
.pc[data-k='0'] .k1, .pc[data-k='0'] .k2, .pc[data-k='1'] .k2 { opacity: 0; visibility: hidden; transform: translate3d(0, calc(var(--u) * .6), 0); transition: opacity .2s, transform .2s, visibility 0s .2s; }

/* ảnh thật */
.rp { position: relative; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .5em; min-height: 0; height: 100%; }
.rp-im { position: relative; overflow: hidden; border-radius: 6px; background: #0004; min-height: 0; height: 100%; }
.rp-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp figcaption { font-size: var(--f-xs); color: var(--mute); }
.ev-badge { position: absolute; left: .7em; top: .7em; font-size: calc(var(--f-xs) * .92); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .28em .6em; border-radius: 3px; background: #F4EFE3; color: #0F2A22; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

/* ---------- P1 · Bìa ---------- */

/* ---------- P2 · Sáu phần ---------- */

/* ---------- P3 · Bối cảnh ---------- */

/* ---------- P4 · Phân loại + Kraljic ---------- */
.kr2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: calc(var(--u) * 21); margin-left: calc(var(--u) * 2); }
.kr2-y { position: absolute; left: calc(var(--u) * -2.2); top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-size: var(--f-xs); color: var(--mute); white-space: nowrap; }
.kr2-x { position: absolute; right: 0; bottom: calc(var(--u) * -1.8); font-size: var(--f-xs); color: var(--mute); }
.kr2-c { border-radius: 5px; padding: calc(var(--u) * .9) calc(var(--u) * 1.1); background: rgba(239, 234, 220, .05); border: 1px solid var(--line); display: grid; align-content: start; gap: .25em; }
.kr2-c b { font-family: var(--font-display); font-weight: 450; font-size: var(--f-h2); }
.kr2-c span { font-size: var(--f-xs); color: var(--mute); }
.kr2-c em { font-style: normal; font-size: var(--f-xs); font-weight: 700; color: #0F2A22; background: var(--lime); padding: .2em .55em; border-radius: 3px; justify-self: start; margin-top: auto; }
.kr2-c.c-lev { grid-area: 1 / 1; } .kr2-c.c-str { grid-area: 1 / 2; } .kr2-c.c-rou { grid-area: 2 / 1; } .kr2-c.c-bot { grid-area: 2 / 2; }
.kr2-c.is-on { background: rgba(207, 224, 108, .14); border-color: var(--lime); }
.kr2-c.is-on b { color: var(--lime); }
.kr2-arrow { position: absolute; left: 38%; width: 24%; bottom: 22%; height: 0; border-top: 2px dashed var(--rust-soft); }
.kr2-arrow::after { content: ''; position: absolute; right: -2px; top: -7px; border: 6px solid transparent; border-left: 10px solid var(--rust-soft); }

/* ---------- P5 · Năm NCC ---------- */

/* ---------- P6 · Thẻ điểm ---------- */
.s-Q { --c: #0F3D2E; } .s-C { --c: #B08A3A; } .s-D { --c: #5E7065; } .s-S { --c: #8A94A0; } .s-G { --c: #9DBE3A; }

/* ---------- P7 · Kết quả ---------- */

/* ---------- P8 · Giao dịch ---------- */

/* ---------- P9 · Chứng từ ---------- */

/* ---------- P10 · Three-way ---------- */

/* ---------- P11 · Bao gói ---------- */

/* ---------- P12 · Giá xanh ---------- */

/* ---------- P13 · Phân công ---------- */

/* ---------- P14 · Kết luận ---------- */

/* ---------- Q&A · trung tâm câu hỏi ---------- */
.qh-act { display: flex; gap: .8em; align-items: center; flex: none; }
.qh-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * .7) calc(var(--u) * 1.6); }
.qh-list button { width: 100%; text-align: left; display: grid; grid-template-columns: calc(var(--u) * 2.6) minmax(0, 1fr) auto; grid-template-areas: 'n q go' 'n a a'; gap: .2em .8em; padding: calc(var(--u) * .75) calc(var(--u) * .9); border-top: 1px solid var(--line2); border-radius: 0 0 5px 5px; transition: background .2s; }
.qh-list button:hover { background: rgba(239, 234, 220, .06); }
.qh-list i { grid-area: n; font-style: normal; font-weight: 700; color: var(--lime); font-size: var(--f-sm); }
.qh-list b { grid-area: q; font-size: var(--f-sm); font-weight: 600; }
.qh-list span { grid-area: a; font-size: calc(var(--f-xs) * .96); color: var(--mute2); line-height: 1.42; }
.qh-list em { grid-area: go; font-style: normal; font-size: var(--f-xs); color: var(--lime); white-space: nowrap; }

/* ---------- Q&A · Phụ lục G ---------- */
.qg { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: calc(var(--u) * 3); align-items: center; }
.qg-l { display: grid; gap: calc(var(--u) * 1.3); }
.qg-read { display: grid; gap: .55em; min-height: calc(var(--u) * 10); }
.qg-th { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.qg-th button { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; border: 2px solid transparent; opacity: .7; transition: opacity .2s, border-color .2s; }
.qg-th button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.qg-th button[aria-pressed='true'], .qg-th button:hover { opacity: 1; border-color: var(--lime); }
.qg-big { position: relative; height: calc(100svh - var(--hud-h) - var(--u) * 12); max-height: calc(var(--u) * 48); display: grid; place-items: center; }
.qg-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .45)); }
.qg-big .ev-badge { left: auto; right: .7em; }

/* ---------- Màn hẹp ---------- */
@media (max-width: 820px) {
  .p3, .p4-body, .p7-body, .p10-row, .p11, .p14, .qg { grid-template-columns: minmax(0, 1fr); }
  .p13-grid, .p12-two, .qh-list { grid-template-columns: minmax(0, 1fr); }
  .hud-tools .deck-btn .lbl { display: inline !important; }
  .p-hd.row { display: grid; }
  .p3-r, .p11-ph, .qg-big { height: auto; max-height: none; }
  .pc1 .gl-host { opacity: .35; }}

/* bìa khi không có WebGL: ảnh minh họa nằm bên phải, sau chữ */
.pc1 .gl-fallback { place-items: center end; padding-right: calc(var(--px) * .6); }
.pc1 .gl-fallback img { max-width: 38%; max-height: 62%; border-radius: 8px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 60%, transparent 100%); }
.qg-read .qg-b { position: static; display: inline-block; vertical-align: .2em; margin-right: .4em; box-shadow: none; }
/* Q&A cảnh 5: ảnh là minh họa mục đích sử dụng */
.sc-5 .w5s::after { content: 'Hình minh họa mục đích sử dụng, không phải ảnh thật'; position: absolute; z-index: 5; right: var(--px); top: calc(var(--hud-h) + var(--u) * 1); font-size: var(--f-xs); font-weight: 600; color: #F4EFE3; background: rgba(9, 22, 16, .7); padding: .3em .7em; border-radius: 4px; }