/* THU MUA XANH · V7 explainers (28/10/2026, owner's brief): scenes 04 (Kraljic), 06 (scoring) and 07 (ranking) say why in plain words.
   Loaded after v6-a.css; same direction A look (felt / paper / kraft, brass, one lime mark). Text sizes at 1920 px: body ≥ 18 px, captions ≥ 16 px. */

/* ---------- 04 · Kraljic phase: both axes named, two questions, "có điều kiện" as two arrows, why five suppliers ---------- */
html[data-dir="a"] .a4 .q4-kr { top: calc(var(--u) * 10.6); width: calc(var(--u) * 52); height: calc(var(--u) * 32); }
html[data-dir="a"] .a4 .q4-kc { padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
html[data-dir="a"] .a4 .q4-kc b { color: rgba(242, 237, 225, .8); }
html[data-dir="a"] .a4 .q4-kc span { color: rgba(242, 237, 225, .78); }
html[data-dir="a"] .a4 .q4-ky, html[data-dir="a"] .a4 .q4-kx { letter-spacing: .02em; color: #D4D5C4; }
html[data-dir="a"] .a4 .q4-mk { width: calc(var(--u) * 9.6); height: calc(var(--u) * 7.5); margin: calc(var(--u) * -3.75) 0 0 calc(var(--u) * -4.8); }
html[data-dir="a"] .a4 .q4-kr[data-cell="rou"] .q4-mk { left: 36.5%; top: 81%; }
/* the two "if" arrows: up to Leverage, right to Bottleneck (beat 5) */
html[data-dir="a"] .a4 .q4-if { position: absolute; z-index: 3; margin: 0; font: 500 var(--fs-cap)/1.35 var(--font-ui); color: var(--paper); opacity: 0; transition: opacity .5s var(--ez6); pointer-events: none; }
html[data-dir="a"] .a4 .q4-if b { font-weight: 700; color: var(--brass-lt); white-space: nowrap; }
html[data-dir="a"] .a4 .q4-if i { position: absolute; background: var(--brass-lt); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
html[data-dir="a"] .a4 .q4-if i::after { content: ''; position: absolute; width: 0; height: 0; }
html[data-dir="a"] .a4 .q4-if-up { left: calc(var(--u) * 2.7); top: calc(var(--u) * 9); width: calc(var(--u) * 19.4); text-align: right; }
html[data-dir="a"] .a4 .q4-if-up i { left: calc(100% + var(--u) * 1.6); top: calc(var(--u) * -.4); width: 2px; height: calc(var(--u) * 11.6); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ez6); }
html[data-dir="a"] .a4 .q4-if-up i::after { left: -6px; top: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--brass-lt); }
html[data-dir="a"] .a4 .q4-if-rt { left: calc(var(--u) * 32.4); top: calc(var(--u) * 23.6); width: calc(var(--u) * 17.6); }
html[data-dir="a"] .a4 .q4-if-rt i { right: calc(100% + var(--u) * .9); top: calc(var(--u) * .7); width: calc(var(--u) * 7.4); height: 2px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ez6); }
html[data-dir="a"] .a4 .q4-if-rt i::after { right: -9px; top: -6px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--brass-lt); }
html[data-dir="a"] .a4.kr-if .q4-if { opacity: 1; transition-delay: .5s; }
html[data-dir="a"] .a4.kr-if .q4-if i { transform: none; transition-delay: .2s; }
html[data-dir="a"] .a4.kr-if .q4-if-rt, html[data-dir="a"] .a4.kr-if .q4-if-rt i { transition-delay: .75s; }
html[data-dir="a"] .a4.kr-if .q4-kc.c-lev, html[data-dir="a"] .a4.kr-if .q4-kc.c-bot { box-shadow: inset 0 0 0 1.5px rgba(220, 198, 144, .55), inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .35); }
/* the right panel: two questions, one answer each, then the conclusion */
html[data-dir="a"] .a4 .q4-asm { left: calc(var(--u) * 64.4); top: calc(var(--u) * 10.8); width: calc(var(--u) * 29.6); gap: calc(var(--u) * 1.5); }
html[data-dir="a"] .a4 .q4-qa { display: grid; gap: calc(var(--u) * .35); }
html[data-dir="a"] .a4 .q4-qa p { margin: 0; }
html[data-dir="a"] .a4 .q4-qq { font: 700 var(--fs-body)/1.3 var(--font-ui); color: var(--brass-lt); }
html[data-dir="a"] .a4 .q4-qy { font: 500 var(--fs-body)/1.38 var(--font-ui); color: var(--paper); }
html[data-dir="a"] .a4 .q4-qy b { font-weight: 800; color: var(--lime); }
html[data-dir="a"] .a4 .q4-out { margin-top: calc(var(--u) * .2); padding-top: calc(var(--u) * 1.3); }
html[data-dir="a"] .a4 .q4-out b { font-size: calc(var(--u) * 2.3); color: var(--paper); }
html[data-dir="a"] .a4 .q4-out span { color: #D4D5C4; line-height: 1.38; }
/* why five suppliers: one line of reasons, five chips for five kinds of alternative (beat 5) */
html[data-dir="a"] .a4 .q4-five { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 45.6); width: calc(var(--u) * 88); display: grid; row-gap: calc(var(--u) * .8); padding-top: calc(var(--u) * .9); border-top: 1px solid rgba(194, 160, 80, .38); opacity: 0; translate: 0 calc(var(--u) * 1); transition: opacity .6s var(--ez6), translate .8s var(--ez6); }
html[data-dir="a"] .a4.kr-if .q4-five { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
html[data-dir="a"] .a4 .q4-fh { display: flex; align-items: baseline; gap: calc(var(--u) * 1.2); }
html[data-dir="a"] .a4 .q4-fh b { flex: none; }
html[data-dir="a"] .a4 .q4-fh b { font: 700 var(--fs-body)/1.25 var(--font-ui); color: var(--brass-lt); }
html[data-dir="a"] .a4 .q4-fh span { font: 500 var(--fs-cap)/1.38 var(--font-ui); color: #D4D5C4; }
html[data-dir="a"] .a4 .q4-fc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1); }
html[data-dir="a"] .a4 .q4-fc li { display: grid; align-content: start; gap: calc(var(--u) * .15); padding: calc(var(--u) * .55) calc(var(--u) * .9) calc(var(--u) * .65); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; color: var(--ink6); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .7) rgba(0, 0, 0, .3); border-radius: 1px; }
html[data-dir="a"] .a4 .q4-fc li:first-child { box-shadow: inset 0 0 0 2px #8A6A1E, 0 calc(var(--u) * .3) calc(var(--u) * .7) rgba(0, 0, 0, .3); }
html[data-dir="a"] .a4 .q4-fc b { font: 700 var(--fs-cap)/1.25 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .a4 .q4-fc span { font: 600 var(--fs-cap)/1.32 var(--font-ui); color: #5A4512; }
html[data-dir="a"] .a4 .q4-fc small { font-size: 1em; font-weight: 500; color: #4D5B51; }
body.present:not(.safe) .a4.kr-if .q4-fc li { animation: v7chip .5s var(--ez6) both; animation-delay: calc(1.3s + var(--i) * .12s); }
@keyframes v7chip { from { opacity: 0; transform: translate3d(0, calc(var(--u) * .8), 0); } }

/* ---------- 06 · how Areca gets 80/100: three steps, five tubes (height = the criterion's maximum), score + reason, click → scale ---------- */
html[data-dir="a"] .s6 .cn-h1 em { color: #4A3410; }
html[data-dir="a"] .s6-steps { left: calc(var(--u) * 6); top: calc(var(--u) * 10.2); width: calc(var(--u) * 88); margin: 0; padding: 0; list-style: none; display: flex; gap: calc(var(--u) * 2.4); }
html[data-dir="a"] .s6-steps li { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .55) calc(var(--u) * 1); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .5) rgba(60, 38, 14, .25); font: 600 var(--fs-body)/1.25 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s6-steps li:not(:last-child)::after { content: "\2192"; position: absolute; left: calc(100% + var(--u) * .45); top: 50%; translate: 0 -50%; font: 700 var(--fs-body)/1 var(--font-ui); color: #4A3410; }
html[data-dir="a"] .s6-steps i { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; display: grid; place-items: center; font: 800 var(--fs-cap)/1 var(--font-ui); color: #2A1E08; background: radial-gradient(circle at 36% 30%, #F6E2A6 0%, #C9A24E 45%, #7D5E1C 100%); }
html[data-dir="a"] .s6-row { left: calc(var(--u) * 6); top: calc(var(--u) * 15.4); width: calc(var(--u) * 60); height: calc(var(--u) * 32); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: calc(var(--u) * 1.2); }
html[data-dir="a"] .s6-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ink6); text-align: left; cursor: pointer; font: inherit; }
html[data-dir="a"] .s6-hd { display: grid; margin-bottom: calc(var(--u) * .45); }
html[data-dir="a"] .s6-hd b { font: 700 var(--fs-body)/1.2 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s6-hd small { font: 600 var(--fs-cap)/1.3 var(--font-ui); color: #4A3410; }
html[data-dir="a"] .s6-cap { display: block; position: relative; flex: none; height: calc(var(--u) * .74 * var(--w)); transition: box-shadow .3s var(--ez6), translate .3s var(--ez6); }
html[data-dir="a"] .s6-col:hover .s6-cap { translate: 0 calc(var(--u) * -.25); }
html[data-dir="a"] .s6-col[aria-pressed="true"] .s6-cap { box-shadow: inset 0 0 0 2.5px var(--ink6), 0 calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * -.6) rgba(60, 45, 15, .3); }
html[data-dir="a"] .s6-in { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(var(--f) * 50%); translate: 0 50%; text-align: center; font: 800 calc(var(--u) * 1.9)/1 var(--font-ui); letter-spacing: -.02em; color: #FBF7EC; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .5s var(--ez6); transition-delay: calc(1.2s + var(--i) * .16s); }
html[data-dir="a"] .s6 .s-S .s6-in { font-size: calc(var(--u) * 1.6); }
html[data-dir="a"] .s6.at1 .s6-in, html[data-dir="a"] .s6:not([data-k]) .s6-in { opacity: 1; }
html[data-dir="a"] .s6-sc { display: grid; align-content: start; gap: calc(var(--u) * .15); height: calc(var(--u) * 5.2); margin-top: calc(var(--u) * .7); opacity: 0; transition: opacity .5s var(--ez6); transition-delay: calc(1.5s + var(--i) * .16s); }
html[data-dir="a"] .s6.at1 .s6-sc, html[data-dir="a"] .s6:not([data-k]) .s6-sc { opacity: 1; }
html[data-dir="a"] .s6-sc b { font: 800 var(--fs-body)/1.2 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s6-sc span { font: 500 var(--fs-cap)/1.3 var(--font-ui); color: #33291A; }
html[data-dir="a"] .s6-tip { left: calc(var(--u) * 6); top: calc(var(--u) * 48.6); width: calc(var(--u) * 60); margin: 0; padding-top: calc(var(--u) * .8); border-top: 1px solid rgba(74, 52, 16, .3); font: 600 var(--fs-cap)/1.3 var(--font-ui); color: #33291A; }
html[data-dir="a"] .a6 .a6-prop { left: calc(var(--u) * 72); top: calc(var(--u) * 13.4); width: calc(var(--u) * 19); }
html[data-dir="a"] .s6-tot { left: calc(var(--u) * 70); top: calc(var(--u) * 14.2); display: grid; gap: calc(var(--u) * .2); opacity: 0; translate: 0 calc(var(--u) * 1); transition: opacity .7s var(--ez6) .9s, translate .9s var(--ez6) .9s; }
html[data-dir="a"] .s6.at1 .s6-tot, html[data-dir="a"] .s6:not([data-k]) .s6-tot { opacity: 1; translate: 0 0; }
html[data-dir="a"] .s6-tot span { font: 700 var(--fs-body)/1.3 var(--font-ui); color: #4A3410; }
html[data-dir="a"] .s6-tot p { margin: 0; display: flex; align-items: baseline; gap: .1em; }
html[data-dir="a"] .s6-tot b { font: 600 calc(var(--u) * 9.4)/1 var(--font-ui); letter-spacing: -.05em; color: var(--ink6); padding: 0 .05em; background: linear-gradient(180deg, transparent 64%, rgba(207, 224, 108, .9) 64%, rgba(207, 224, 108, .9) 90%, transparent 90%); }
html[data-dir="a"] .s6-tot small { font: 700 calc(var(--u) * 2.8)/1 var(--font-ui); color: var(--ink6); margin: 0; }
html[data-dir="a"] .s6-rule { left: calc(var(--u) * 70); top: calc(var(--u) * 30.4); width: calc(var(--u) * 24); box-sizing: border-box; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4) calc(var(--u) * 1.2); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: var(--card-shadow); rotate: .6deg; transition: opacity .3s var(--ez6); }
html[data-dir="a"] .s6-rule p { margin: 0 0 calc(var(--u) * .5); font: 700 var(--fs-cap)/1.2 var(--font-ui); color: #7A5D18; }
html[data-dir="a"] .s6-rule ol { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .25); }
html[data-dir="a"] .s6-rule li { font: 500 var(--fs-cap)/1.3 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s6-rule li b { font-weight: 800; }
/* the scale of one criterion, opened by a click on its tube */
html[data-dir="a"] .s6-pop { z-index: 6; left: calc(var(--u) * 68.4); top: calc(var(--u) * 13.2); width: calc(var(--u) * 26); box-sizing: border-box; padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6) calc(var(--u) * 1.5); display: grid; gap: calc(var(--u) * .55); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; color: var(--ink6); box-shadow: var(--card-shadow); opacity: 0; pointer-events: none; translate: 0 calc(var(--u) * .6); transition: opacity .3s var(--ez6), translate .4s var(--ez6); }
html[data-dir="a"] .s6.is-pop .s6-pop { opacity: 1; pointer-events: auto; translate: 0 0; }
html[data-dir="a"] .s6.is-pop :is(.s6-tot, .s6-rule, .a6-prop) { opacity: 0 !important; pointer-events: none; }
html[data-dir="a"] .s6-pop p { margin: 0; }
html[data-dir="a"] .s6-x { justify-self: end; margin: 0 0 calc(var(--u) * -.3); padding: .2em .7em; font: 600 var(--fs-cap)/1.2 var(--font-ui); color: var(--ink6); background: none; border: 1px solid rgba(19, 39, 29, .35); border-radius: 2px; cursor: pointer; }
html[data-dir="a"] .s6-ph { font: 500 var(--fs-body)/1.25 var(--font-ui); color: #4A3410; }
html[data-dir="a"] .s6-ph b { font-weight: 800; color: var(--ink6); }
html[data-dir="a"] .s6-pa { font: 500 var(--fs-body)/1.3 var(--font-ui); }
html[data-dir="a"] .s6-pa b { font-weight: 800; }
html[data-dir="a"] .s6-pa span { display: block; font-size: var(--fs-cap); color: #4D5B51; }
html[data-dir="a"] .s6-pw, html[data-dir="a"] .s6-pm { font: 500 var(--fs-cap)/1.38 var(--font-ui); }
html[data-dir="a"] .s6-pn { font: 600 var(--fs-cap)/1.38 var(--font-ui); color: #8A3B1E; }
html[data-dir="a"] .s6-pl { margin: calc(var(--u) * .2) 0 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .2); }
html[data-dir="a"] .s6-pl li { display: grid; grid-template-columns: calc(var(--u) * 1.6) 1fr; gap: calc(var(--u) * .5); padding: .15em .35em; font: 500 var(--fs-cap)/1.3 var(--font-ui); border-radius: 2px; }
html[data-dir="a"] .s6-pl li.is-me { background: var(--lime); font-weight: 700; }
html[data-dir="a"] .s6-pl b { font-weight: 800; }

/* ---------- 07 · ranking: a "why" line per shop, a small score table for the row under the mouse, light delivery part when not bought ---------- */
html[data-dir="a"] .s7 .cn-h1 { white-space: nowrap; }
html[data-dir="a"] .s7 .z7-sc { right: auto; left: calc(var(--u) * 66.6); top: calc(var(--u) * 12.4); }
html[data-dir="a"] body.present:not(.mouse-on) .s7 .z7-sc { opacity: 1 !important; }
html[data-dir="a"] .s7 .z7-sc .cx-opt { font-size: var(--fs-cap); }
html[data-dir="a"] .s7 .z7-rows { height: calc(var(--u) * 31); }
html[data-dir="a"] .s7 .z7-row { height: calc(var(--u) * 4.8); grid-template-columns: calc(var(--u) * 3.4) calc(var(--u) * 13) 1fr calc(var(--u) * 7.6); grid-template-areas: "rk nm bar v" "rk why why v"; align-content: center; row-gap: calc(var(--u) * .15); transform: translateY(calc(var(--u) * (var(--r) * 4.8 + min(var(--r), 1) * 7))); }
html[data-dir="a"] .s7 .z7-rk { grid-area: rk; }
html[data-dir="a"] .s7 .z7-nm { grid-area: nm; }
html[data-dir="a"] .s7 .z7-bar { grid-area: bar; }
html[data-dir="a"] .s7 .cn7-v { grid-area: v; text-align: right; }
html[data-dir="a"] .s7 .z7-why1 { grid-area: why; min-width: 0; font: 500 var(--fs-cap)/1.25 var(--font-ui); color: #3D4B42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-dir="a"] .s7 .z7-row.is-lead { height: calc(var(--u) * 10.4); grid-template-columns: calc(var(--u) * 3.4) 1fr calc(var(--u) * 22); grid-template-areas: "rk nm v" "rk why v" "rk bar v"; grid-template-rows: auto auto auto; row-gap: calc(var(--u) * .5); align-content: start; }
html[data-dir="a"] .s7 .z7-row.is-lead .z7-why1 { font: 600 var(--fs-body)/1.25 var(--font-ui); color: #1C4A34; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-dir="a"] .s7 .z7-bar i.is-est { opacity: .5; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 7px); }
/* the small table: score 1–5 → points for the selected / hovered shop; doubles as the colour legend */
html[data-dir="a"] .s7 .z7-bd { position: absolute; left: 0; top: calc(var(--u) * 32.2); width: 100%; display: grid; gap: calc(var(--u) * .45); margin: 0; padding: calc(var(--u) * .8) 0 0; border-top: 1px solid rgba(19, 39, 29, .16); font: 500 var(--fs-cap)/1.3 var(--font-ui); color: #3D4B42; }
html[data-dir="a"] .s7 .z7-bd p { margin: 0; }
html[data-dir="a"] .s7 .z7-bdh { font-weight: 600; }
html[data-dir="a"] .s7 .z7-bdh b { font-weight: 800; color: var(--ink6); margin: 0; }
html[data-dir="a"] .s7 .z7-leg { position: static; display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4) calc(var(--u) * 1.5); margin: 0; padding: 0; list-style: none; font: 600 var(--fs-cap)/1.3 var(--font-ui); color: #3D4B42; }
html[data-dir="a"] .s7 .z7-leg li { display: flex; align-items: center; gap: .35em; }
html[data-dir="a"] .s7 .z7-leg i { width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 2px; background: var(--c); }
html[data-dir="a"] .s7 .z7-leg em { font-style: normal; font-weight: 800; color: var(--ink6); }
html[data-dir="a"] .s7 .z7-leg small { font-size: 1em; font-weight: 500; color: #5D6A61; margin: 0 0 0 -.2em; }
html[data-dir="a"] .s7 .z7-pr b { font-weight: 800; color: var(--ink6); }
html[data-dir="a"] .s7 .z7-est { display: flex; align-items: center; gap: .5em; color: #4F5D53; }
html[data-dir="a"] .s7 .z7-est i { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * .9); border-radius: 2px; background: var(--c, #6E7F74); opacity: .5; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 7px); }
/* right panel: why Areca wins, is it fair, the three what-ifs, the closing line */
html[data-dir="a"] .s7 .z7-ins { top: calc(var(--u) * 17.2) !important; gap: calc(var(--u) * 1.3); }
html[data-dir="a"] .s7 .z7-ins p, html[data-dir="a"] .s7 .z7-ins ul { margin: 0; }
html[data-dir="a"] .s7 .z7-h { margin-bottom: calc(var(--u) * .45) !important; font: 700 var(--fs-body)/1.25 var(--font-ui); color: #7A5D18; }
html[data-dir="a"] .s7 .z7-win ul { padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .35); }
html[data-dir="a"] .s7 .z7-win li { position: relative; padding-left: 1.3em; font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s7 .z7-win li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: #4E6B17; }
html[data-dir="a"] .s7 .z7-win li span { font: 500 var(--fs-cap)/1.3 var(--font-ui); color: #4F5D53; }
html[data-dir="a"] .s7 .z7-fair { padding: calc(var(--u) * .9) calc(var(--u) * 1.1); border: 1.5px solid rgba(138, 106, 30, .5); border-radius: 2px; background: rgba(251, 248, 239, .7); }
html[data-dir="a"] .s7 .z7-fair p:not(.z7-h) { font: 500 var(--fs-cap)/1.38 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s7 .z7-fair b { font-weight: 800; }
html[data-dir="a"] .s7 .z7-what { display: none; gap: calc(var(--u) * .6); }
html[data-dir="a"] .s7.is-sim .z7-what { display: grid; }
html[data-dir="a"] .s7.is-sim :is(.z7-win, .z7-fair) { display: none; }
html[data-dir="a"] .s7 .z7-scb { display: grid; gap: calc(var(--u) * .25); padding: calc(var(--u) * .7) calc(var(--u) * 1); text-align: left; font: 600 var(--fs-cap)/1.3 var(--font-ui); color: var(--ink6); background: rgba(251, 248, 239, .6); border: 1px solid rgba(19, 39, 29, .22); border-radius: 2px; cursor: pointer; }
html[data-dir="a"] .s7 .z7-scb[aria-pressed="true"] { background: var(--ink6); color: var(--paper); border-color: var(--ink6); }
html[data-dir="a"] .s7 .z7-scv { font: 500 var(--fs-body)/1.25 var(--font-ui); }
html[data-dir="a"] .s7 .z7-scv b { font-weight: 800; }
html[data-dir="a"] .s7 .z7-scv em { font-style: normal; font-weight: 800; color: #8E3F1F; }
html[data-dir="a"] .s7 .z7-scb[aria-pressed="true"] .z7-scv em { color: var(--lime); }
html[data-dir="a"] .s7 .z7-dec p { font: 500 var(--fs-body)/1.35 var(--font-ui); }
html[data-dir="a"] .a7 .a7-prop { left: calc(var(--u) * 73); top: calc(var(--u) * 38.6); width: calc(var(--u) * 15); }
html[data-dir="a"] .s7.is-dec .a7-prop { opacity: 0; }

/* ---------- image viewer for the real documents (js/lightbox.js); sits above the toolbar ---------- */
.lbx { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-rows: 1fr auto; background: rgba(7, 13, 10, .94); color: #F2EDE1; font-family: var(--font-ui); }
.lbx[hidden] { display: none; }
.lbx-stage { overflow: auto; display: grid; place-items: center; padding: 2.5vh 4vw 1vh; cursor: zoom-in; }
.lbx-stage img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lbx.is-zoom .lbx-stage { place-items: start center; cursor: zoom-out; }
.lbx.is-zoom .lbx-stage img { max-height: none; width: min(1600px, 160vw); max-width: none; }
.lbx-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .8rem 4vw 1.1rem; border-top: 1px solid rgba(242, 237, 225, .14); }
.lbx-txt { display: grid; gap: .2rem; min-width: 0; }
.lbx-txt p { margin: 0; }
.lbx-org { justify-self: start; padding: .15em .55em; font-size: max(16px, .9rem); font-weight: 700; color: #13271D; background: #DCC690; border-radius: 2px; }
.lbx-cap { font-size: max(18px, 1.05rem); font-weight: 600; }
.lbx-warn { font-size: max(18px, 1.05rem); font-weight: 700; color: #F2A487; }
.lbx-btn { display: flex; align-items: center; gap: .6rem; flex: none; }
.lbx-n { margin-right: .4rem; font-size: max(16px, .95rem); color: #BFC0AC; }
.lbx-btn button { min-width: 2.8rem; padding: .5rem .9rem; font: 600 max(16px, .95rem)/1 var(--font-ui); color: #F2EDE1; background: rgba(242, 237, 225, .08); border: 1px solid rgba(242, 237, 225, .3); border-radius: 3px; cursor: pointer; }
.lbx-btn button:hover { background: rgba(242, 237, 225, .18); }
.lbx-btn button[hidden] { display: none; }
body.lbx-open .hud, body.lbx-open .prog, body.lbx-open .rail { visibility: hidden; }

/* ---------- 09 · five documents with the first page of the real document (assets/chung-tu); the invoice stays an empty dashed place ---------- */
html[data-dir="a"] .s9 .z9-sh { grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: calc(var(--u) * .3); }
html[data-dir="a"] .s9 .z9-t { font-size: calc(var(--u) * 1.75); line-height: 1.12; letter-spacing: -.02em; }
html[data-dir="a"] .s9 .z9-t small, html[data-dir="a"] .s9 .z9-dh b small { font-size: .62em; font-weight: 700; letter-spacing: .02em; opacity: .8; }
html[data-dir="a"] .s9 .z9-code { font-size: var(--fs-cap); line-height: 1.25; }
html[data-dir="a"] .s9 .z9-body { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 1px; box-shadow: 0 0 0 1px rgba(19, 39, 29, .12); background: #fff; }
html[data-dir="a"] .s9 .z9-body { cursor: zoom-in; }
html[data-dir="a"] .s9 .z9-zoom { position: absolute; right: calc(var(--u) * .4); top: calc(var(--u) * .4); display: flex; align-items: center; gap: .3em; padding: .15em .5em; font: 700 var(--fs-cap)/1.2 var(--font-ui); font-style: normal; color: var(--paper); background: rgba(19, 39, 29, .82); border-radius: 2px; opacity: 0; transition: opacity .2s; pointer-events: none; }
html[data-dir="a"] .s9 .z9-zoom svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html[data-dir="a"] .s9 .z9-body:hover .z9-zoom, html[data-dir="a"] body.mouse-on .s9 .z9-sh[aria-pressed="true"] .z9-zoom { opacity: 1; }
html[data-dir="a"] .s9 .z9-body:hover .z9-th { filter: brightness(1.04); }
html[data-dir="a"] .s9 .z9-th { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
html[data-dir="a"] .s9 .z9-org { position: absolute; left: calc(var(--u) * .4); top: calc(var(--u) * .4); padding: .1em .45em; font: 700 var(--fs-cap)/1.2 var(--font-ui); font-style: normal; color: var(--ink6); background: rgba(220, 198, 144, .95); border-radius: 2px; }
html[data-dir="a"] .s9 .z9-cnt { position: absolute; left: calc(var(--u) * .4); right: calc(var(--u) * .4); bottom: calc(var(--u) * .4); display: flex; align-items: baseline; justify-content: center; gap: .3em; padding: .15em .3em; background: rgba(251, 248, 239, .94); border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
html[data-dir="a"] .s9 .z9-cnt b { font: 800 calc(var(--u) * 2.4)/1 var(--font-ui); }
html[data-dir="a"] .s9 .z9-cnt small { font: 700 var(--fs-cap)/1 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .s9 .z9-sh.is-none .z9-body { opacity: .5; box-shadow: none; }
html[data-dir="a"] .s9 .z9-q { position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--u) * 7)/1 var(--font-ui); color: #8E3F1F; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
html[data-dir="a"] .s9 .z9-sh .tag { font-size: var(--fs-cap); line-height: 1.25; white-space: normal; }
html[data-dir="a"] .s9 .z9-dh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--u) * 1.2); row-gap: calc(var(--u) * .4); }
html[data-dir="a"] .s9 .z9-dh b { font-size: calc(var(--u) * 2.1); }
html[data-dir="a"] .s9 .z9-act { display: flex; gap: calc(var(--u) * .7); margin-left: auto; }
html[data-dir="a"] .s9 .z9-act .cx-btn { padding: .35em .8em; font: 700 var(--fs-cap)/1.2 var(--font-ui); color: var(--paper); background: var(--ink6); border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap; }
html[data-dir="a"] .s9 .z9-act .cx-btn + .cx-btn { color: var(--ink6); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink6); }
html[data-dir="a"] .s9 .z9-det::after { left: calc(var(--u) * -.4); }
html[data-dir="a"] .s9 .z9-warn { margin: calc(var(--u) * .6) 0 0; font: 700 var(--fs-cap)/1.3 var(--font-ui); color: #8E3F1F; }

/* ---------- 10 · four rows from Phụ lục F; each column opens its real pages; what to do next ---------- */
html[data-dir="a"] .s10 { --rh: calc(var(--u) * 5.2); --rt: calc(var(--u) * 5.2); }
html[data-dir="a"] .s10 .cn-hd { top: calc(var(--u) * 3.6); }
html[data-dir="a"] .s10 .z10-sub { margin: calc(var(--u) * .5) 0 0; font: 500 var(--fs-body)/1.3 var(--font-ui); color: var(--sand); }
html[data-dir="a"] .s10 .z10-tri { top: calc(var(--u) * 12.2); height: calc(var(--rt) + var(--rh) * 4 + var(--u) * .8); }
html[data-dir="a"] .s10 .z10-col { grid-template-rows: var(--rt) repeat(4, var(--rh)); }
html[data-dir="a"] .s10 .z10-h { align-items: center; padding-top: calc(var(--u) * .9); }
html[data-dir="a"] .s10 .z10-h b { font-size: calc(var(--u) * 1.6); line-height: 1.1; }
html[data-dir="a"] .s10 .z10-h b small { font-size: .6em; font-weight: 700; }
html[data-dir="a"] .s10 .z10-h span { font-size: var(--fs-cap); }
html[data-dir="a"] .s10 .z10-doc { margin-left: auto; flex: none; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); display: grid; place-items: center; padding: 0; border: 1px solid rgba(19, 39, 29, .3); border-radius: 2px; background: rgba(255, 255, 255, .6); cursor: pointer; }
html[data-dir="a"] .s10 .z10-doc svg { width: 64%; height: 64%; fill: none; stroke: var(--ink6); stroke-width: 1.8; stroke-linejoin: round; }
html[data-dir="a"] .s10 .z10-col.is-none .z10-doc { border-color: rgba(240, 180, 154, .6); background: rgba(120, 40, 20, .2); }
html[data-dir="a"] .s10 .z10-col.is-none .z10-doc svg { stroke: #F7C9B4; }
html[data-dir="a"] .s10 .z10-r span { font-size: var(--fs-cap); }
html[data-dir="a"] .s10 .z10-r b { font-size: var(--fs-cap) !important; line-height: 1.26; }
html[data-dir="a"] .s10 .z10-bar { top: calc(var(--u) * 39.6); }
html[data-dir="a"] .s10 .z10-bar .cn10-v { font-size: var(--fs-cap); }
html[data-dir="a"] .s10 .z10-res { top: calc(var(--u) * 42.2); flex-wrap: nowrap; align-items: center; }
html[data-dir="a"] .s10 .z10-res .cn10-res { flex: 1 1 0; min-width: 0; font-size: var(--fs-body) !important; line-height: 1.3; text-wrap: balance !important; white-space: normal; color: var(--paper); }
html[data-dir="a"] .s10 .z10-res .cn10-res em { font-style: normal; font-weight: 700; color: #F2A487; }
html[data-dir="a"] .s10 .z10-meter { flex: none; }
html[data-dir="a"] .s10 .z10-meter i { font-size: var(--fs-cap); }
html[data-dir="a"] .s10 .z10-all { flex: none; padding: .45em .9em; font: 700 var(--fs-cap)/1.2 var(--font-ui); color: var(--ink6); background: var(--paper); border: 0; border-radius: 2px; cursor: pointer; }
html[data-dir="a"] .s10 .z10-todo { top: calc(var(--u) * 46.8); }
html[data-dir="a"] .s10 .z10-todo .cx-lbl { color: var(--brass-lt); font-size: var(--fs-cap); }
html[data-dir="a"] .s10 .z10-todo li { box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .7) rgba(0, 0, 0, .3); padding: calc(var(--u) * .6) calc(var(--u) * .9); border-radius: 1px; }
html[data-dir="a"] .s10 .z10-todo li b { font-size: var(--fs-cap); line-height: 1.25; }
html[data-dir="a"] .s10 .z10-todo li span { font-size: var(--fs-cap); line-height: 1.3; color: #3D4B42; }
html[data-dir="a"] .s10 .z10-lk em { width: calc(var(--u) * 7.4); top: calc(var(--u) * -3.1); white-space: normal; text-align: center; line-height: 1.15; }
html[data-dir="a"] .s10 .z10-tri { top: calc(var(--u) * 11.8); }
html[data-dir="a"] .s10 .z10-bar { top: calc(var(--u) * 40.2); }
html[data-dir="a"] .s10 .z10-res { top: calc(var(--u) * 42.6); }
html[data-dir="a"] .s10 .z10-todo { top: calc(var(--u) * 47.4); }

/* ---------- tác động xanh (after the packaging scene): three columns, then how to buy greener and what the green lid costs ---------- */
html[data-dir="a"] .vgx .v6-spot { background: radial-gradient(70% 50% at 50% 42%, rgba(255, 236, 196, .09), transparent 72%); }
html[data-dir="a"] .vgx .cn-h1 { width: calc(var(--u) * 80); }
html[data-dir="a"] .vgx .cn-h1 em { display: block; }
html[data-dir="a"] .vgx-cols { left: calc(var(--u) * 6); top: calc(var(--u) * 14.2); width: calc(var(--u) * 88); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--u) * 2.2); align-items: stretch; }
html[data-dir="a"] .vgx-c { --k: #4E6B17; display: grid; align-content: start; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.6); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; color: var(--ink6); box-shadow: var(--card-shadow); }
html[data-dir="a"] .vgx-c.is-lo { --k: #8A6A1E; }
html[data-dir="a"] .vgx-c.is-na { --k: #8E3F1F; }
html[data-dir="a"] .vgx-c:nth-child(1) { rotate: -.7deg; } html[data-dir="a"] .vgx-c:nth-child(2) { rotate: .5deg; } html[data-dir="a"] .vgx-c:nth-child(3) { rotate: -.4deg; }
html[data-dir="a"] .vgx-h { margin: 0; display: grid; grid-template-columns: calc(var(--u) * 3.2) 1fr; grid-template-areas: "ic t" "ic s"; column-gap: calc(var(--u) * .9); align-items: center; }
html[data-dir="a"] .vgx-ic { grid-area: ic; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: 50%; display: grid; place-items: center; background: var(--k); }
html[data-dir="a"] .vgx-ic svg { width: 56%; height: 56%; fill: none; stroke: #FBF7EC; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-dir="a"] .vgx-h b { grid-area: t; font: 800 calc(var(--u) * 1.75)/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--k); }
html[data-dir="a"] .vgx-h small { grid-area: s; font: 600 var(--fs-cap)/1.25 var(--font-ui); color: #4F5D53; }
html[data-dir="a"] .vgx-c ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .8); }
html[data-dir="a"] .vgx-c li { position: relative; padding-left: 1.1em; font: 500 var(--fs-body)/1.35 var(--font-ui); color: var(--ink6); }
html[data-dir="a"] .vgx-c li::before { content: ''; position: absolute; left: 0; top: .52em; width: .45em; height: .45em; border-radius: 50%; background: var(--k); }
html[data-dir="a"] .vgx-c.is-na li::before { border-radius: 0; height: .14em; top: .66em; width: .5em; }
/* beat 1: the next purchase and the price */
html[data-dir="a"] .vgx-next, html[data-dir="a"] .vgx-cost { top: calc(var(--u) * 40.6); opacity: 0; translate: 0 calc(var(--u) * 1); transition: opacity .6s var(--ez6), translate .8s var(--ez6); }
html[data-dir="a"] .vgx.at1 .vgx-next, html[data-dir="a"] .vgx.at1 .vgx-cost { opacity: 1; translate: 0 0; }
html[data-dir="a"] .vgx.at1 .vgx-cost { transition-delay: .35s; }
html[data-dir="a"] .vgx-next { left: calc(var(--u) * 6); width: calc(var(--u) * 60); }
html[data-dir="a"] .vgx-nh { margin: 0 0 calc(var(--u) * .6); font: 700 var(--fs-body)/1.25 var(--font-ui); color: var(--brass-lt); }
html[data-dir="a"] .vgx-next ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6) calc(var(--u) * 2); counter-reset: gx; }
html[data-dir="a"] .vgx-next li { position: relative; padding-left: 1.6em; font: 500 var(--fs-cap)/1.38 var(--font-ui); color: var(--paper); counter-increment: gx; }
html[data-dir="a"] .vgx-next li::before { content: counter(gx); position: absolute; left: 0; top: .05em; width: 1.25em; height: 1.25em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9em; color: var(--ink6); background: var(--lime); }
html[data-dir="a"] .vgx-cost { left: calc(var(--u) * 69.4); width: calc(var(--u) * 24.6); box-sizing: border-box; padding: calc(var(--u) * 1) calc(var(--u) * 1.3) calc(var(--u) * 1.2); border: 1.5px solid rgba(220, 198, 144, .55); border-radius: 2px; background: rgba(242, 237, 225, .06); }
html[data-dir="a"] .vgx-cost p:last-child { margin: 0; font: 500 var(--fs-cap)/1.42 var(--font-ui); color: var(--paper); }
html[data-dir="a"] .vgx-cost b { font-weight: 800; color: var(--lime); }
body.present:not(.safe) .vgx.is-in[data-k="0"] .vgx-c { animation: vbDeal .8s var(--ez6) both; animation-delay: calc(.3s + var(--i) * .35s); }

/* 04 · opening beat (28/10/2026, quiz removed): the sold-meal card on the left, the classification as the statement on the right */
html[data-dir="a"] .a4 .q4-res { left: calc(var(--u) * 54); top: calc(var(--u) * 16.4); width: calc(var(--u) * 40); display: grid; gap: calc(var(--u) * 1); }
html[data-dir="a"] .a4 .q4-res b { font: 800 calc(var(--u) * 4.2)/1.05 var(--font-ui); letter-spacing: -.03em; color: var(--lime); }
html[data-dir="a"] .a4 .q4-res span { font: 500 var(--fs-block)/1.35 var(--font-ui); color: var(--paper); text-wrap: balance; }
html[data-dir="a"] .a4 .q4-note { left: calc(var(--u) * 54); top: calc(var(--u) * 31.6); width: calc(var(--u) * 36); padding-top: calc(var(--u) * 1.2); border-top: 1px solid rgba(194, 160, 80, .4); font: 500 var(--fs-body)/1.4 var(--font-ui); color: #D4D5C4; }