/* s08 — DEMO ③: change-area queue */
.s08 h2 { font-size: 54px; }
.s08-tag { position: absolute; right: 0; top: 0; }

/* funnel strip */
.s08-fn { position: absolute; left: 0; right: 0; top: 116px; height: 92px; display: flex; align-items: center; gap: 18px; }
.s08-fn .st { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.s08-fn .st .b { display: block; width: 14px; border-radius: 4px; }
.s08-fn .s1 .b { height: 84px; background: linear-gradient(180deg, var(--cyan), rgba(76, 201, 240, .3)); box-shadow: 0 0 18px rgba(76, 201, 240, .45); }
.s08-fn .s2 .b { height: 62px; background: linear-gradient(180deg, var(--cyan), var(--amber)); }
.s08-fn .s3 .b { height: 44px; background: var(--amber); }
.s08-fn .s4 .b { height: 28px; background: var(--red); box-shadow: 0 0 16px rgba(255, 77, 94, .6); }
.s08-fn .st b { display: block; font: 800 50px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s08-fn .s1 b { color: var(--cyan); } .s08-fn .s2 b { color: var(--ink); } .s08-fn .s3 b { color: var(--amber); } .s08-fn .s4 b { color: var(--red); }
.s08-fn .st span { display: block; font-size: 18px; color: var(--ink2); margin-top: 4px; white-space: nowrap; }
.s08-fn em { font-style: normal; color: var(--ink3); font-size: 30px; }
.s08-fn .fnote { margin-left: auto; align-self: flex-end; font-size: 13px; color: var(--ink3); padding-bottom: 10px; }

/* map */
.s08-map { position: absolute; left: 0; top: 226px; width: 620px; height: 620px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 26px 70px rgba(0, 0, 0, .5); background: #050c09; }
.s08-svg { width: 100%; height: 100%; display: block; }
.s08-svg rect.dim { fill: rgba(3, 8, 6, .42); pointer-events: none; }
.s08-map { --flash: 0; }
.s08-map::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: var(--flash); pointer-events: none; }
.s08-polys path { opacity: 0; fill: var(--tc); fill-opacity: .22; stroke: var(--tc); stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .6s, stroke .6s, fill-opacity .3s; transform-box: fill-box; }
.s08-polys path.t-Low { stroke-width: .9; fill-opacity: .12; }
.s08-polys path.t-High { stroke-width: 2.2; fill-opacity: .4; filter: drop-shadow(0 0 4px rgba(255, 77, 94, .8)); }
.s08-polys path:hover { fill-opacity: .55; }
.slide.s08-p1 .s08-polys path { stroke: var(--red); fill: var(--red); fill-opacity: .3; }
.slide.s08-ctx .s08-polys path { fill: var(--cc); stroke: var(--cc); filter: none; transition: fill 1.4s, stroke 1.4s, fill-opacity 1.4s, stroke-opacity 1.4s; }
.slide.s08-ctx .s08-polys path.x-mosaic { fill-opacity: .14; stroke-opacity: .5; }
.slide.s08-ctx .s08-polys path.x-mixed { fill-opacity: .12; stroke-opacity: .45; }
.slide.s08-ctx .s08-polys path.x-edge { fill-opacity: .75; stroke-width: 2.6; filter: drop-shadow(0 0 5px var(--red)); }
.s08-rings circle { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.slide.s08-ctx .s08-rings circle { animation: s08-ring 2s var(--ease-out) 1s infinite; }
@keyframes s08-ring { 0% { opacity: .95; transform: scale(.5); } 100% { opacity: 0; transform: scale(2); } }
.s08-polys path.sel { stroke: #fff !important; stroke-width: 3; fill-opacity: .5; filter: drop-shadow(0 0 6px #fff); }
.s08-reticle path { fill: none; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.s08-readout { position: absolute; left: 12px; top: 12px; max-width: 470px; background: rgba(3, 10, 8, .86); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 14px; font-size: 15px; line-height: 1.45; color: var(--ink2); opacity: 0; transform: translateY(-8px); transition: .4s var(--ease-out); pointer-events: none; }
.s08-readout.on { opacity: 1; transform: none; }
.s08-readout b { color: var(--ink); font-size: 17px; }
.s08-reset { position: absolute; right: 12px; bottom: 10px; background: rgba(3, 10, 8, .8); color: var(--ink2); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.s08-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 14px; font-size: 13px; color: var(--ink2); background: rgba(3, 10, 8, .8); padding: 6px 12px; border-radius: 8px; }
.s08-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.s08-legend .lc { display: none; }
.slide.s08-ctx .s08-legend .lt { display: none; } .slide.s08-ctx .s08-legend .lc { display: inline; }

/* tier + context chips */
.s08 .tier { display: inline-block; font: 600 13px/1 var(--mono); padding: 5px 8px; border-radius: 6px; border: 1px solid currentColor; white-space: nowrap; }
.s08 .tier.t-High { color: var(--red); background: rgba(255, 77, 94, .12); }
.s08 .tier.t-Medium { color: var(--amber); }
.s08 .tier.t-Low { color: #d8e070; }
.s08 .c-mosaic { color: #cdb98d; } .s08 .c-mixed { color: var(--amber); } .s08 .c-edge { color: var(--red); }

/* ranked list */
.s08-list { position: absolute; left: 650px; right: 0; top: 226px; }
.s08-list table { width: 100%; border-collapse: collapse; font-size: 17px; }
.s08-list th { font: 500 12.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 0 6px 8px; vertical-align: bottom; border-bottom: 1px solid var(--line2); }
.s08-list td { padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; height: 40px; }
.s08-list tr.hot { transition: background .25s; }
.s08-list tr.hot:hover { transform: none; background: rgba(170, 230, 200, .06); }
.s08-list tr.sel { background: rgba(255, 255, 255, .09); box-shadow: inset 3px 0 0 #fff; }
.s08-list td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; }
.s08-list td.id { color: var(--ink); font-weight: 600; font-size: 16px; }
.s08-list .hb { display: inline-block; width: 46px; height: 7px; background: rgba(170, 230, 200, .12); border-radius: 3px; margin-right: 7px; vertical-align: 1px; overflow: hidden; }
.s08-list .hb i { display: block; height: 100%; background: var(--green); opacity: .8; }
.s08-list .cx { font-size: 15px; }
.s08-list .rec { font-size: 14px; color: var(--ink3); border: 1px dashed var(--line2); border-radius: 6px; padding: 3px 7px; }
.s08-list .to { font-size: 14px; color: var(--violet); margin-left: 6px; }
.s08-list .foot { font-size: 12.5px; color: var(--ink3); margin-top: 8px; }
.s08-back { position: absolute; right: 0; top: 52px; font-size: 15px; color: var(--ink3); border: 1px dashed var(--line2); border-radius: 999px; padding: 5px 12px; }

/* context split */
.s08-split { position: absolute; left: 650px; right: 0; top: 532px; display: flex; gap: 22px; align-items: center; padding: 10px 22px; }
.s08-split .big-num { font-size: 80px; color: #d9c391; text-shadow: 0 0 40px rgba(217, 195, 145, .25); }
.s08-split .rt { flex: 1; }
.s08-splitline { font-size: 18px; line-height: 1.35; color: var(--ink2); }
.s08-splitline b { color: var(--ink); }
.s08-stack { display: flex; height: 22px; margin-top: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.s08-stack i { position: relative; flex: 0 0 var(--w); height: 100%; }
.s08-stack i.c-mosaic { background: #b7a37a; } .s08-stack i.c-mixed { background: var(--amber); } .s08-stack i.c-edge { background: var(--red); }
.s08-stack i span { position: absolute; left: 8px; top: 2px; font: 600 12.5px/18px var(--mono); color: #1a140a; white-space: nowrap; }
.s08-stack i.c-mixed span, .s08-stack i.c-edge span { display: none; }
.s08-split .rule { font-size: 12.5px; color: var(--ink3); margin-top: 6px; }

/* DG-001 callout */
.s08-call { left: 650px; top: 670px; max-width: 1030px; width: 1030px; font-size: 20px; border-left-color: var(--amber); padding: 12px 18px; }
.s08-call b { color: var(--red); }
.s08-leaders { z-index: 5; }

/* concept overlay (synthetic) */
.s08-concept { position: absolute; inset: 0; background: rgba(5, 12, 10, .93); padding: 16px 20px; backdrop-filter: blur(6px); z-index: 6; border: 1px solid rgba(255, 176, 32, .5); border-radius: 14px; }
.s08-concept .ch { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.s08-concept h3 { font-size: 26px; margin: 10px 0 6px; }
.s08-concept .cs { width: 100%; height: auto; display: block; }
.s08-concept .cs text { font: 500 14px var(--font); fill: var(--ink2); }
.s08-concept .cs text.lt { font-weight: 600; fill: var(--gold); font-size: 14.5px; }
.s08-concept .cs text.sm { font-size: 12.5px; fill: var(--ink3); font-family: var(--mono); }
.s08-concept .cs text.ok { fill: var(--green); }
.s08-concept .cs text.nl { fill: var(--green); font-size: 13px; }
.s08-concept .cs text.ft { font-size: 13px; fill: var(--ink3); }
.s08-concept .cs .lo { fill: rgba(242, 193, 78, .05); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 900; }
.s08-concept .cs .nat { stroke: rgba(62, 224, 143, .5); stroke-width: 1; }
.s08-concept .cs .chg { fill: rgba(255, 176, 32, .35); stroke: var(--amber); stroke-width: 2; }
.s08-concept .cs .spill { fill: rgba(255, 77, 94, .55); stroke: var(--red); stroke-width: 2.5; }
.s08-concept .cs .res rect { stroke-width: 1.5; }
.s08-concept .cs .res.ok rect { fill: rgba(62, 224, 143, .1); stroke: var(--green); }
.s08-concept .cs .res.bad rect { fill: rgba(167, 139, 250, .1); stroke: var(--violet); }
.s08-concept .cs .res text { fill: var(--ink); font-size: 15px; }
.s08-concept .cs .res text.b { font-weight: 700; font-size: 17px; }
.s08-concept .cs .res.ok text.b { fill: var(--green); } .s08-concept .cs .res.bad text.b { fill: var(--violet); }
.s08-concept .cs .res text.sm { fill: var(--ink3); font-size: 12.5px; }

.s08-list .ctxc, .s08-list .recc { opacity: 0; transition: opacity .6s var(--ease-out); }
.slide.s08-ctx .s08-list .ctxc, .slide.s08-con .s08-list .recc { opacity: 1; }
.slide.s08-con .s08-list .recc { transition-delay: 2.4s; }

.s08-call .q1 { margin-top: 2px; }
.s08-call .q2 { margin-top: 8px; font-size: 17px; color: var(--ink2); }
.s08-call .opts { display: flex; gap: 10px; margin-top: 8px; }
.s08-call .opts span { font-size: 16px; padding: 5px 14px; border-radius: 999px; border: 1.5px solid rgba(242, 193, 78, .55); color: var(--gold); background: rgba(242, 193, 78, .06); transition: all .5s var(--ease-out); }
.slide.s08-ans .s08-call .opts span { opacity: .35; }
.slide.s08-ans .s08-call .opts span.yes { opacity: 1; color: #04130c; background: var(--green); border-color: var(--green); box-shadow: 0 0 22px rgba(62, 224, 143, .5); font-weight: 700; }
.s08-call .ans { margin-top: 8px; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.s08-call .ans b { display: inline; font-size: 14px; color: var(--green); margin-right: 6px; letter-spacing: .02em; text-transform: none; }
.s08-readout { display: flex; gap: 12px; align-items: flex-start; max-width: 596px !important; }
.s08-readout .chips { display: flex; gap: 6px; flex: 0 0 auto; }
.s08-readout figure { margin: 0; }
.s08-readout figure img { width: 88px; height: 88px; display: block; border-radius: 6px; border: 1px solid var(--line2); }
.s08-readout figcaption { font: 500 11px var(--mono); color: var(--ink3); text-align: center; margin-top: 2px; }

/* lift the source line above the deck footer */
#s08 > .src { bottom: 58px; }

/* QA pass: projector legibility (raise 12–14px labels; replace --ink3 where the text carries meaning) */
#s08 > .src { color: var(--ink3); font-size: 15px; }
.s08-fn .fnote { font-size: 15px; color: var(--ink2); }
.s08-legend { font-size: 15px; }
.s08-readout { font-size: 16px; color: var(--ink); }
.s08-readout figcaption { font-size: 13px; color: var(--ink2); }
.s08-list th { font-size: 13.5px; color: var(--ink2); }
.s08-list .rec { color: var(--ink2); }
.s08-list .foot { font-size: 14px; color: var(--ink2); }
.s08 .tier { font-size: 14px; }
.s08-stack i span { font-size: 13.5px; }
.s08-split .rule { font-size: 14px; color: var(--ink2); }
.s08-splitline { font-size: 19px; }
.s08-call .q2 { font-size: 18px; }
.s08-call .opts span { font-size: 18px; }
.s08-call .ans { font-size: 17.5px; }
.s08-call .ans b { font-size: 15px; }
.s08-concept .ch { font-size: 15px; }
.s08-concept .cs text { font-size: 15px; }
.s08-concept .cs text.sm { font-size: 13.5px; fill: var(--ink2); }
.s08-concept .cs .res text.sm { font-size: 12.5px; fill: var(--ink2); }
.s08-concept .cs text.ft { font-size: 13px; fill: var(--ink2); }
.s08-back { color: var(--ink2); }
/* step 2 caveat (critique_final B1): sits where the DG-001 callout will appear at step 3 */
.s08-warn { position: absolute; left: 650px; top: 670px; width: 1030px; font-size: 21px; line-height: 1.35; color: var(--ink); background: rgba(40, 8, 10, .6); border: 1px solid rgba(255, 77, 94, .4); border-left: 4px solid var(--red); border-radius: 12px; padding: 14px 20px; }
.s08-warn span { display: block; margin-top: 6px; color: var(--amber); font-weight: 600; }
.s08-warn[data-step].shown { transition-delay: 2.4s; }
#s08:has(.s08-call.shown) .s08-warn { opacity: 0 !important; transition-delay: 0s; }
/* visible glosses: the context rule in the 82% card, and "xếp lưu có lý do" in the concept card */
#s08 .s08-split { padding-top: 6px; padding-bottom: 6px; }
.s08-split .rule.gl-note { display: flex; font-size: 18px; color: var(--ink2); margin-top: 6px; line-height: 1.25; }
.s08-concept .gl-chip { margin-top: 6px; }

/* polish pass: no sub-14px text on the stage */
.s08-list th { font-size: 14px; }
.s08-stack { height: 24px; }
.s08-stack i span { font-size: 14px; line-height: 20px; left: 10px; }
.s08 .chips figcaption { font-size: 14px; }
/* concept card (step 5): the SVG is drawn at ~0.93× → lift labels to ≥14px on stage, sub-lines in the
   proportional face so they clear the result boxes' borders */
.s08-concept .cs text.sm { font-size: 15px; }
.s08-concept .cs .res text.sm { font: 400 15px var(--font); fill: var(--ink2); }
.s08-concept .cs text.nl { font-size: 15px; }
.s08-concept .cs text.ft { font-size: 13.5px; }  /* one full-width footnote line: 14px+ overruns the 560 viewBox */