/* s01b glossary: tán cây · rừng theo luật · ngưỡng tán 30% (Hansen) · mất tán ≠ mất rừng · vùng biến động */
#s01b .content.s01b { position: relative; }
.s01b-h { font-size: 58px; }
.s01b-h span { font-weight: 800; }
.s01b-chips { position: absolute; right: 0; top: -6px; display: flex; gap: 8px; }
.s01b-chips span { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink4); transition: all .5s var(--ease-out); }
.s01b-chips span.done { color: var(--ink3); border-color: var(--line2); }
.s01b-chips span.on { color: var(--bg); background: var(--green); border-color: var(--green); font-weight: 700; }

/* the lab (steps 0–2): canopy canvas on the left, a panel that swaps per step on the right */
.s01b-lab { position: absolute; left: 0; right: 0; top: 150px; height: 730px; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
#s01b[data-at="3"] .s01b-lab, #s01b[data-at="4"] .s01b-lab { opacity: 0; transform: translateY(-30px) scale(.98); pointer-events: none; }
.s01b-cbox { position: absolute; left: 0; top: 0; width: 660px; }
.s01b-frame { position: relative; width: 660px; height: 660px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(170,230,200,.22), 0 30px 90px rgba(0,0,0,.6); }
.s01b-cv, .s01b-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.s01b-tagd { position: absolute; right: 12px; top: 12px; z-index: 3; font-size: 14px; padding: 6px 12px; background: rgba(4,11,8,.75); }
.s01b-ov text { font-family: var(--font); }
.s01b-g10 line { stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.s01b-g10, .s01b-glaw, .s01b-ghan { transition: opacity .8s var(--ease-out); }
.s01b-scale rect { fill: rgba(0,0,0,.6); }
.s01b-scale path { stroke: #fff; stroke-width: 2.5; fill: none; }
.s01b-scale text { fill: #fff; font: 600 22px var(--mono); }
.s01b-glaw { opacity: 0; }
.s01b-glaw .fr { fill: none; stroke: var(--gold); stroke-width: 6; }
.s01b-glaw .sq { fill: rgba(242,193,78,.10); stroke: var(--gold); stroke-width: 3; stroke-dasharray: 12 8; }
.s01b-glaw rect:not(.fr):not(.sq) { fill: rgba(10,8,2,.78); stroke: rgba(242,193,78,.6); }
.s01b-glaw text { fill: var(--gold); font-size: 25px; font-weight: 700; }
.s01b-ghan { opacity: 0; }
.s01b-ghan .px { fill: rgba(76,201,240,.06); stroke: var(--cyan); stroke-width: 3; transition: fill .5s, stroke .5s; }
.s01b-ghan .lb { fill: rgba(2,10,14,.78); }
.s01b-ghan .pct { fill: #fff; font: 800 32px var(--font); }
.s01b-ghan .st { font: 700 22px var(--font); fill: var(--cyan); }
.s01b-ghan .st-none .px { fill: rgba(0,0,0,.18); stroke: rgba(200,210,205,.7); stroke-dasharray: 10 8; }
.s01b-ghan .st-none .st { fill: #c9d4ce; }
.s01b-ghan .st-loss .px { fill: rgba(255,77,94,.38); stroke: var(--red); }
.s01b-ghan .st-loss .st { fill: #ff8a95; }
.s01b-hcap rect { fill: rgba(2,10,14,.8); stroke: rgba(76,201,240,.6); }
.s01b-hcap text { fill: var(--cyan); font: 700 24px var(--font); }
#s01b[data-at="1"] .s01b-glaw { opacity: 1; }
#s01b[data-at="1"] .s01b-g10 { opacity: .45; }
#s01b[data-at="2"] .s01b-g10 { opacity: .25; }
#s01b[data-at="2"] .s01b-ghan { opacity: 1; }

/* custom slider (no <input>, so arrow keys stay with the deck) */
.s01b-sl { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.s01b-sl .trk { position: relative; flex: 1; height: 34px; cursor: ew-resize; touch-action: none; }
.s01b-sl .trk::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 3px; background: rgba(62,224,143,.35); }
.s01b-sl .fill { position: absolute; left: 0; top: 14px; height: 6px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--amber), var(--red)); }
.s01b-sl .knob { position: absolute; top: 3px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,176,32,.35), 0 4px 14px rgba(0,0,0,.5); }
.s01b-sl .lbl { font-size: 18px; color: var(--ink2); letter-spacing: .06em; white-space: nowrap; }
.s01b-sl .lbl .k { color: var(--amber); font-weight: 700; }
#s01b[data-at="3"] .s01b-sl, #s01b[data-at="4"] .s01b-sl { pointer-events: none; }

/* panel pages */
.s01b-panel { position: absolute; left: 730px; right: 0; top: 0; height: 730px; }
.s01b-pg { position: absolute; inset: 0; opacity: 0; transform: translateX(50px); filter: blur(6px); pointer-events: none; transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .6s var(--ease-out); }
#s01b[data-at="0"] .pg0, #s01b[data-at="1"] .pg1, #s01b[data-at="2"] .pg2 { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .15s; }
.s01b-term { display: flex; align-items: center; gap: 16px; font: 800 46px/1.1 var(--font); letter-spacing: -.02em; color: var(--green); }
.s01b-term.gold { color: var(--gold); } .s01b-term.cyan { color: var(--cyan); }
.s01b-term .sw { width: 22px; height: 22px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; flex: none; }
.s01b-def { font-size: 28px; line-height: 1.38; color: var(--ink2); margin: 10px 0 28px; }
.s01b-def b { color: var(--ink); font-weight: 600; }
.s01b-cite { font-size: 19px; color: var(--ink3); margin: 8px 0 22px; letter-spacing: .03em; }
.s01b-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 34px; margin: 6px 0 26px; padding: 22px 28px; border-radius: 20px; background: var(--panel); border: 1px solid rgba(62,224,143,.35); }
.s01b-big { grid-row: span 2; display: flex; align-items: center; gap: 18px; }
.s01b-big .v { font: 800 120px/.95 var(--font); color: var(--green); letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 190px; text-shadow: 0 0 40px rgba(62,224,143,.3); }
.s01b-big small { font-size: 22px; color: var(--ink3); line-height: 1.3; }
.s01b-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; align-self: end; }
.s01b-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1f8f58, var(--green)); border-radius: 8px; }
.s01b-pct { font-size: 26px; color: var(--ink2); align-self: start; }
.s01b-pct b { color: var(--ink); font-variant-numeric: tabular-nums; }
.s01b-quote { font: italic 400 25px/1.4 var(--serif); color: var(--ink2); border-left: 3px solid var(--gold); padding-left: 20px; margin: 0 0 24px; }
.s01b-quote .mono { display: block; font: 500 17px var(--mono); font-style: normal; color: var(--gold); margin-top: 6px; letter-spacing: .04em; }
.pg0 .hint { font-size: 20px; }

.s01b-crit { display: flex; flex-direction: column; gap: 18px; }
.s01b-crit .cr { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 24px; padding: 18px 24px; border-radius: 20px; background: var(--panel); border: 1px solid rgba(242,193,78,.4); transition: border-color .4s, background .4s; }
.s01b-crit .ic svg { width: 96px; height: 96px; display: block; }
.s01b-crit .ic .ln { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.s01b-crit .ic .fg { fill: rgba(62,224,143,.75); stroke: var(--green); stroke-width: 2; }
.s01b-crit .ic .dash { fill: rgba(242,193,78,.08); stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 5; }
.s01b-crit .ic .box { fill: #2a2418; stroke: var(--gold); stroke-width: 3; }
.s01b-crit .tx b { display: block; font-size: 29px; line-height: 1.22; color: var(--ink); font-weight: 700; }
.s01b-crit .tx span { display: block; font-size: 24px; color: var(--ink2); margin-top: 6px; }
.s01b-crit .tx em { font-style: normal; color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.s01b-crit .tx em.un { display: none; color: var(--amber); }
.s01b-crit .ok { font: 800 44px/1 var(--font); color: var(--green); text-align: center; }
.s01b-crit .c3.under { border-color: rgba(255,176,32,.6); }
.s01b-crit .c3.under .ok { color: var(--amber); }
.s01b-crit .c3.under em { color: var(--amber); }
.s01b-crit .c3.under em.un { display: inline; }
.s01b-crit .c3.under .ok::before { content: '?'; } .s01b-crit .c3.under .ok { font-size: 0; } .s01b-crit .c3.under .ok::before { font-size: 44px; }
#s01b[data-at="1"] .s01b-crit .cr { animation: s01b-in .9s var(--ease-out) both; }
#s01b[data-at="1"] .s01b-crit .c2 { animation-delay: .25s; } #s01b[data-at="1"] .s01b-crit .c3 { animation-delay: .4s; }
@keyframes s01b-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.s01b-sum { margin-top: 26px; font-size: 30px; color: var(--ink2); }
.s01b-sum b { color: var(--gold); }

.pg2 .s01b-cite { margin-bottom: 12px; }
.pg2 .s01b-def { font-size: 26px; margin: 0 0 20px; }
.s01b-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.s01b-tiles .tl { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); font-size: 22px; line-height: 1.25; color: var(--ink2); }
.s01b-tiles canvas { width: 112px; height: 112px; border-radius: 8px; display: block; box-shadow: 0 0 0 2px rgba(76,201,240,.5); }
.s01b-tiles .t2 { box-shadow: 0 0 0 1px var(--line2); }
.s01b-tiles b { color: var(--ink); }
.s01b-tiles .ch { display: block; margin-top: 6px; font: 700 20px/1.2 var(--font); }
.s01b-tiles .ch.y { color: var(--gold); } .s01b-tiles .ch.c { color: var(--cyan); }
.s01b-tiles .ch.off { color: var(--ink3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.s01b-tab { width: 100%; border-collapse: collapse; font-size: 25px; }
.s01b-tab th { text-align: left; font: 700 19px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 16px 8px; }
.s01b-tab th.y { color: var(--gold); } .s01b-tab th.c { color: var(--cyan); }
.s01b-tab td { padding: 9px 16px; border-top: 1px solid var(--line); color: var(--ink); }
.s01b-tab td:first-child { color: var(--ink3); font-size: 21px; width: 140px; }
.s01b-tab td:nth-child(2) { background: rgba(242,193,78,.07); }
.s01b-tab td:nth-child(3) { background: rgba(76,201,240,.07); }
.s01b-note { margin-top: 18px; font-size: 27px; color: var(--ink2); }
.s01b-note b { color: var(--ink); }

/* timeline (steps 3–4) */
.s01b-tl { position: absolute; left: 0; top: 150px; width: 1680px; height: 560px; opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); pointer-events: none; }
#s01b[data-at="3"] .s01b-tl, #s01b[data-at="4"] .s01b-tl { opacity: 1; transform: none; transition-delay: .25s; }
.s01b-tl .s01b-tagd { top: -44px; right: 0; font-size: 16px; padding: 6px 12px; }
.s01b-tsv { width: 1680px; height: 560px; overflow: visible; }
.s01b-tsv text { font-family: var(--font); }
.s01b-tsv .lanebg { fill: rgba(12,30,22,.55); stroke: var(--line); }
.s01b-tsv .case { font: 800 64px var(--font); fill: var(--ink3); }
.s01b-tsv .lane-A .case { fill: var(--green); } .s01b-tsv .lane-B .case { fill: var(--red); }
.s01b-tsv .ctitle { font-size: 30px; font-weight: 800; fill: var(--ink); }
.s01b-tsv .csub { font-size: 23px; fill: var(--ink2); }
.s01b-tsv .rowlab { font: 700 19px var(--mono); letter-spacing: .12em; }
.s01b-tsv .rowlab.sat { fill: var(--cyan); } .s01b-tsv .rowlab.law { fill: var(--gold); }
.s01b-tsv .trunk { stroke: #7b5a35; stroke-width: 2.5; stroke-linecap: round; }
.s01b-tsv .trunk.thick { stroke-width: 5; }
.s01b-tsv .bush { fill: #4f8f3a; }
.s01b-tsv .durian { fill: #3f9a52; }
.s01b-tsv .stump { fill: #a5824e; }
.s01b-tsv .stump.burnt { fill: #3b2a20; stroke: var(--amber); stroke-width: 1; }
.s01b-tsv .groundl { stroke: #6b5232; stroke-width: 3; }
.s01b-tsv .groundl.red { stroke: #9a3b2b; }
.s01b-tsv .m5 { stroke: rgba(76,201,240,.45); stroke-width: 1.5; stroke-dasharray: 5 6; }
.s01b-tsv .m5t { font: 600 17px var(--mono); fill: var(--cyan); }
.s01b-tsv .evl { stroke: rgba(236,247,240,.3); stroke-width: 1.5; }
.s01b-tsv .evt { font-size: 22px; font-weight: 600; fill: var(--ink); }
.s01b-tsv .brace { fill: none; stroke: var(--ink3); stroke-width: 2; }
.s01b-tsv .bracet { font: 600 20px var(--mono); fill: var(--ink2); }
.s01b-tsv .satbar { fill: rgba(76,201,240,.85); }
.s01b-tsv .satoff { stroke: rgba(180,205,191,.35); stroke-width: 3; stroke-dasharray: 3 7; }
.s01b-tsv .bart { font-size: 21px; font-weight: 700; fill: #fff; }
.s01b-tsv .bart.dark { fill: #06140e; }
.s01b-tsv .mark .halo { fill: rgba(255,77,94,.25); }
.s01b-tsv .mark .dot { fill: var(--red); stroke: #fff; stroke-width: 3; }
.s01b-tsv .markl rect { fill: rgba(4,11,8,.88); stroke: rgba(255,77,94,.6); }
.s01b-tsv .markl text { font: 800 22px var(--font); fill: #ff7a86; letter-spacing: .04em; }
.s01b-tsv .lawbar { fill: rgba(242,193,78,.9); }
.s01b-tsv .lossbar { fill: rgba(255,77,94,.85); }
.s01b-tsv .vt { font-size: 28px; font-weight: 800; }
.s01b-tsv .vt.sat { fill: #ff7a86; }
.s01b-tsv .vt.okv { fill: var(--gold); font-size: 26px; }
.s01b-tsv .vt.bad { fill: var(--red); }
.s01b-tsv .link line { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 8 7; }
.s01b-tsv .link rect { fill: rgba(4,14,18,.95); stroke: var(--cyan); stroke-width: 2; }
.s01b-tsv .link text { fill: var(--cyan); font-size: 24px; font-weight: 800; }
.s01b-tsv .ne circle { fill: rgba(4,11,8,.95); stroke: var(--gold); stroke-width: 3; }
.s01b-tsv .ne text { fill: var(--gold); font: 800 40px var(--font); }
.s01b-tsv .ph { stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(76,201,240,.9)); }
.s01b-tsv .vzbox { fill: rgba(76,201,240,.10); stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 10 7; }
.s01b-tsv .vzl { stroke: var(--cyan); stroke-width: 2; }
.s01b-tsv .vz rect:not(.vzbox) { fill: rgba(4,14,18,.95); stroke: var(--cyan); }
.s01b-tsv .vz text { fill: var(--cyan); font: 700 18px var(--mono); }

.s01b-tag3 { position: absolute; left: 0; right: 0; top: 735px; text-align: center; font: 800 44px/1.15 var(--font); letter-spacing: -.02em; opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
#s01b[data-at="3"] .s01b-tag3 { opacity: 1; transform: none; transition-delay: 5.6s; }
.s01b-zone { position: absolute; left: 0; right: 0; top: 728px; display: grid; grid-template-columns: 980px 1fr; gap: 40px; align-items: center; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
#s01b[data-at="4"] .s01b-zone { opacity: 1; transform: none; transition-delay: .2s; }
.s01b-zone .zc { display: grid; grid-template-columns: 90px 1fr; gap: 24px; align-items: center; padding: 20px 28px; font-size: 27px; line-height: 1.35; color: var(--ink2); }
.s01b-zone .zc svg { width: 90px; height: 72px; }
.s01b-zone .zp { fill: rgba(76,201,240,.12); stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 7 5; }
.s01b-zone .zd { fill: var(--cyan); }
.s01b-zone .zs b { color: var(--ink); }
.s01b-zone .zn { font: 700 32px/1.25 var(--font); color: var(--ink); }
.s01b-zone .zn .mono { display: block; font: 600 19px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
/* v2 */
.s01b-frame .s01b-tagd { top: auto; bottom: 14px; left: 14px; right: auto; }
#s01b[data-at="1"] .s01b-frame .s01b-tagd { left: auto; right: 14px; top: 14px; bottom: auto; }
.s01b-tiles .ch.off { text-decoration: none; color: var(--ink3); }
.s01b-tiles em { font-style: normal; }
.s01b-tsv .bracep { fill: #0b1a13; stroke: var(--line2); }
.s01b-tsv .ne rect { fill: rgba(16,12,2,.95); stroke: var(--gold); stroke-width: 2; }
.s01b-tsv .ne .neq { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; fill: none; }
.s01b-tsv .ne text { fill: var(--gold); font: 800 24px var(--font); }
.s01b-tsv .vz rect:not(.vzbox) { fill: rgba(4,14,18,.96); stroke: var(--cyan); stroke-width: 1.5; }
.s01b-tl { height: 600px; transform-origin: 50% 0; }
.s01b-tsv { height: 600px; }
#s01b[data-at="4"] .s01b-tl { transform: scale(.88); }
.s01b-tag3 { top: 770px; }
.s01b-zone { top: 692px; }
.s01b-sl .lbl { min-width: 270px; text-align: right; }