/* s02 — "Con số 42,03% che giấu điều gì?" (zooming waterfall + province map) */
.s02 { position: relative; }
.s02-head { position: absolute; left: 0; top: 0; width: 960px; }
.s02-kick { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.s02-kick .kicker { margin: 0; }
.s02-kick .tag { transform: scale(.88); transform-origin: right center; }
.s02-title { font-size: 58px; line-height: 1.08; white-space: nowrap; }
.s02-title .w { display: inline-block; }
.s02-pct { color: var(--green); font-variant-numeric: tabular-nums; }
.s02-lead { position: relative; height: 42px; margin-top: 12px; font-size: 29px; max-width: 960px; }
.s02-cap { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s; }
.s02-cap1 { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.s02-lead.z .s02-cap0 { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.s02-lead.z .s02-cap1 { opacity: 1; transform: none; filter: none; }

/* waterfall */
.s02-chart { position: absolute; left: -20px; top: 184px; width: 900px; height: 420px; }
.s02-wf { width: 900px; height: 420px; overflow: visible; }
.s02-wf text { font-family: var(--font); }
.s02-axis text { font: 500 16px var(--mono); fill: var(--ink4); }
.s02-axis line { stroke: rgba(170, 230, 200, .08); }
.s02-base { stroke: var(--line2); stroke-width: 1.5; }
.s02-bar { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.s02-bar-nat { filter: drop-shadow(0 0 18px rgba(226, 85, 63, .55)); }
.s02-bar-pla { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.s02-conn { stroke: var(--ink3); stroke-width: 1.5; stroke-dasharray: 5 6; transition: opacity .4s; }
.s02-break-mask { fill: #06120d; }
.s02-break-line { fill: none; stroke: var(--ink2); stroke-width: 2.5; }
.s02-v { font-weight: 700; font-size: 26px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.s02-v-red { fill: #f06a50; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.s02-v-grn { fill: #c9d4ce; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.s02-vu { font-size: 18px; font-weight: 600; }
.s02-vu.s02-v-red, .s02-vu.s02-v-grn { font-size: 18px; letter-spacing: 0; }
.s02-v-red, .s02-v-grn, .s02-vu { transition: opacity .3s; }
.s02-xl { font-size: 22px; font-weight: 700; fill: var(--ink); }
.s02-xs { font: 400 15px var(--mono); fill: var(--ink3); }
.s02-cov-line { stroke: var(--green); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.s02-cov-pill { fill: rgba(62, 224, 143, .12); stroke: var(--green); stroke-width: 1.5; }
.s02-cov-t { font-size: 22px; font-weight: 800; fill: var(--green); font-variant-numeric: tabular-nums; }
.s02-cov-mid { font: 600 15px var(--mono); fill: var(--green); letter-spacing: .08em; text-transform: uppercase; }
.s02-zoomtag { position: absolute; left: 116px; top: 420px; font-size: 14px; white-space: nowrap; color: var(--ink3); letter-spacing: .02em; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out) 1.2s, transform .8s var(--ease-out) 1.2s; }
.s02-chart.zoomed .s02-zoomtag { opacity: 1; transform: none; }

/* step 0: calm headline number + prediction (shown before the reveal) */
.s02-hero { position: absolute; left: 20px; top: 0; width: 880px; height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.s02-hero-n { font: 800 210px/0.9 var(--font); letter-spacing: -.05em; color: var(--green); font-variant-numeric: tabular-nums; text-shadow: 0 0 80px rgba(62, 224, 143, .35); }
.s02-hero-l { display: flex; align-items: center; gap: 18px; width: 760px; margin: 34px 0 40px; font: 600 17px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.s02-hero-l i { flex: 1; height: 0; border-top: 2px dotted var(--green); }
.s02-hero-l b { color: var(--green); }
.s02-pred { padding: 20px 30px 24px; border: 1px solid var(--line2); border-radius: 20px; background: rgba(8, 22, 16, .6); }
.s02-pred-k { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.s02-pred-q { font-size: 30px; font-weight: 600; margin: 8px 0 16px; }
.s02-pred-q b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 6px; }
.s02-pred-o { display: flex; justify-content: center; gap: 16px; }
.s02-pred-o span { padding: 10px 26px; border-radius: 999px; border: 1.5px solid var(--line2); font-size: 24px; font-weight: 600; color: var(--ink2); }

/* step 2: the ministry's own question + who holds the forest */
.s02-own { position: absolute; left: 0; top: 650px; width: 900px; padding: 18px 26px 16px; display: grid; grid-template-columns: 300px 1fr; gap: 26px; }
.s02-own-q { border-left: 3px solid var(--gold); padding-left: 20px; display: flex; flex-direction: column; justify-content: center; }
.s02-own-art { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.s02-own p.s02-own-quote { margin: 0; font: italic 500 24px/1.3 var(--serif); color: var(--ink); }
.s02-own-quote b { color: var(--gold); font-style: italic; }
.s02-own-h { margin-bottom: 4px; }
.s02-own-h .tag { white-space: nowrap; }
.s02-row { display: grid; grid-template-columns: 136px 1fr; align-items: center; gap: 16px; margin-top: 8px; }
.s02-row-n { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s02-row-n small { font-size: 17px; font-weight: 600; color: var(--ink2); letter-spacing: 0; margin-left: 6px; }
.s02-row-t { font-size: 18px; color: var(--ink2); line-height: 1.2; margin-bottom: 6px; }
.s02-row-t b { color: var(--ink); }
.s02-meter { position: relative; height: 14px; border-radius: 7px; background: rgba(170, 230, 200, .08); overflow: hidden; }
.s02-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 7px; }
.s02-meter i.gold { background: linear-gradient(90deg, #a87d1e, var(--gold)); box-shadow: 0 0 16px rgba(242, 193, 78, .5); }
.s02-meter span { position: absolute; right: 8px; top: -2px; font: 600 12.5px/18px var(--mono); color: var(--ink3); }
.s02-own p.s02-own-note { margin: 8px 0 4px; font-size: 17px; line-height: 1.3; color: var(--ink2); }
.s02-own-note b { color: var(--gold); }

/* map */
.s02-map { position: absolute; left: 950px; top: -56px; width: 760px; height: 920px; }
.s02-mapsvg { width: 760px; height: 920px; overflow: visible; }
.s02-prov { fill: #173a2a; stroke: rgba(170, 230, 200, .32); stroke-width: .8; transition: stroke .2s, stroke-width .2s; }
.s02-prov.on { stroke: var(--ink); stroke-width: 2.2; }
.s02-isle { fill: #8fd3b0; stroke: #8fd3b0; stroke-width: 1.6; }
.s02-archring { fill: rgba(76, 201, 240, .05); stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 3 4; }
.s02-archname { font: 700 18px var(--font); fill: var(--ink); }
.s02-archsub { font: 500 15px var(--font); fill: var(--ink3); }
.s02-sea { font: italic 500 22px var(--serif); fill: rgba(140, 190, 220, .35); letter-spacing: .4em; }
.s02-topline { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 4; }
.s02-topdot { fill: var(--ink); }
.s02-topname { font: 700 19px var(--font); fill: var(--ink); }
.s02-topval { font: 600 16px var(--mono); fill: var(--red); }
.s02-topl { opacity: 0; }
.s02-maphint { position: absolute; left: 1330px; top: 858px; opacity: 0; white-space: nowrap; }
.s02-fb { display: none; }
.s02-map.s02-fallback .s02-fb { display: block; position: absolute; inset: 200px 40px; font-size: 26px; color: var(--ink2); }

/* step 3: GFW card */
.s02-gfw { position: absolute; right: -40px; top: -32px; width: 420px; padding: 16px 22px 14px; }
.s02-gfw-top { display: flex; justify-content: space-between; align-items: center; }
.s02-gfw-yr { font-size: 14px; color: var(--ink3); }
.s02-gfw h3 { font-size: 29px; margin: 10px 0 2px; }
.s02-neq { font-family: var(--mono); font-weight: 700; color: var(--red); }
.s02-gfw-n { display: flex; align-items: baseline; gap: 6px; }
.s02-gfw-big { font-size: 64px; }
.s02-gfw .unit { font-size: 18px; }
.s02-spark { width: 340px; height: 64px; display: block; margin: 6px 0 4px; overflow: visible; }
.s02-sb { fill: rgba(255, 77, 94, .55); }
.s02-sb.pk { fill: var(--red); }
.s02-sx { font: 500 12px var(--mono); fill: var(--ink3); }
.s02-sx.pk { fill: var(--red); }
.s02-gfw p { font-size: 19px; line-height: 1.28; margin: 0; }
.s02-legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font: 500 13px var(--mono); color: var(--ink3); }
.s02-legend i { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #173226, #6b5a2a, #e07a2e, #ff4d5e); }
.s02-csrc { font-size: 12.5px; color: var(--ink4); line-height: 1.35; }

/* tooltip (positioned in slide coordinates) */
.s02-tip { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; min-width: 300px; max-width: 470px; padding: 14px 18px; border-radius: 14px;
  background: rgba(4, 14, 10, .94); border: 1px solid var(--line2); box-shadow: 0 16px 50px rgba(0, 0, 0, .6); font-size: 18px; line-height: 1.35;
  opacity: 0; transition: opacity .18s; }
.s02-tip.on { opacity: 1; }
.s02-tip b { font-size: 22px; }
.s02-tip .dim { font-size: 15px; }
.s02-tip-r { display: flex; justify-content: space-between; gap: 18px; margin-top: 6px; color: var(--ink3); font-size: 16px; }
.s02-tip-r em { font-style: normal; color: var(--ink); font-weight: 600; text-align: right; }
.s02-tip-q { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--green); font-size: 15px; }
.s02-tip-s { margin-top: 6px; font: 400 12px var(--mono); color: var(--ink4); }
.s02-srcline { max-width: 1680px; font-size: 14.5px; bottom: 62px; white-space: nowrap; }

.s02-tiny { font: italic 400 19px var(--serif); fill: var(--ink3); }

/* step 4: zoom to Lâm Đồng, pin the cold-open window */
.s02-mapsvg.zoomed { overflow: hidden; }
.s02-ld { fill: none; stroke: var(--gold); stroke-width: .9; opacity: 0; transition: opacity .8s .6s; pointer-events: none; }
.s02-mapsvg.zoomed .s02-ld { opacity: 1; }
.s02-z4 { opacity: 0; pointer-events: none; }
.s02-aoi { fill: rgba(76, 201, 240, .35); stroke: var(--cyan); stroke-width: 2; }
.s02-aoiring { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 4; }
.s02-aoiline { stroke: var(--cyan); stroke-width: 1.5; }
.s02-aoit { font: 700 21px var(--font); fill: var(--ink); paint-order: stroke; stroke: rgba(3, 10, 7, .85); stroke-width: 5px; }
.s02-aois { font: 500 16px var(--font); fill: var(--cyan); }
.s02-ldt { font: 700 22px var(--font); fill: var(--gold); paint-order: stroke; stroke: rgba(3, 10, 7, .85); stroke-width: 5px; }
.s02-lds { font: 600 18px var(--font); fill: var(--ink); }
.s02-ldq { font: 500 13px var(--mono); fill: var(--ink3); }
#s02.s02-at4 .s02-gfw { opacity: 0 !important; transform: translateY(-20px) !important; }
#s02.s02-at4 .s02-top { opacity: 0; transition: opacity .4s; }
#s02.s02-at4 .s02-arch { opacity: 0; transition: opacity .4s; }
.s02-sea { transition: opacity .4s; }
#s02.s02-at4 .s02-sea { opacity: 0; }
/* QA pass: projector legibility (dark greys wash out; the axis-zoom warning must be readable) */
.s02-axis text { fill: var(--ink3); }
.s02-xs { font-size: 14.5px; fill: var(--ink2); }
.s02-zoomtag { font-size: 14px; color: var(--ink2); }
.s02-meter { height: 20px; border-radius: 10px; }
.s02-meter i { border-radius: 10px; }
.s02-meter span { font-size: 14px; line-height: 20px; top: 0; right: 10px; color: var(--ink); }
.s02-own-art { font-size: 14.5px; }
.s02-own p.s02-own-note { font-size: 18px; }
.s02-gfw-yr { color: var(--ink2); }
.s02-spark { height: 74px; }  /* = viewBox height: no down-scaling of the tick labels */
.s02-sx { font-size: 14px; fill: var(--ink2); }
.s02-legend { font-size: 14px; color: var(--ink2); }
.s02-csrc { font-size: 14px; color: var(--ink3); }
.s02-tip-s { color: var(--ink3); }
.s02-ldq { font-size: 14px; fill: var(--ink2); }
.s02-archsub { fill: var(--ink2); }
.s02-srcline { color: var(--ink3); }
.s02-tiny { fill: var(--ink2); }
.s02-mapsvg.zoomed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 60px), transparent 100%), linear-gradient(to right, transparent 0, #000 90px, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* glossary chips (step 3) in the open sea area, between "Biển Đông" and Trường Sa */
.s02-gl { right: -64px; top: 520px; width: 364px; gap: 8px; }
.s02-gl .gl-chip { padding: 6px 12px 6px 10px; line-height: 1.28; }
#s02.s02-at4 .s02-gl { opacity: 0 !important; transform: translateY(-20px) !important; }