/* s03 — "Thế giới đã chứng minh — với một điều kiện" (globe + case cards + synthesis) */
#s03 .bg { z-index: 0; }
.s03-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 9, 7, .92) 0%, rgba(3, 9, 7, .72) 26%, rgba(3, 9, 7, .18) 46%, transparent 60%); }
.s03-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(1100px 700px at 50% 56%, rgba(3, 10, 7, .62), rgba(3, 9, 7, .9)); }
#s03 > .content { z-index: 4; }
#s03.s03-hover { cursor: pointer; }

/* pin labels (positioned by JS in stage coordinates) */
.s03-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.s03-pl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 19px/1 var(--font); color: var(--ink); letter-spacing: .02em;
  transition: opacity .35s; text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 2px #000; }
.s03-pl > * { vertical-align: middle; }
.s03-pl { margin: -10px 0 0 16px; }
.s03-pl span { font-size: 14px; margin-right: 8px; padding: 3px 6px; border-radius: 6px; background: rgba(4, 12, 9, .7); border: 1px solid currentColor; }
.s03-pl em { display: block; margin: 5px 0 0 44px; font: italic 500 18px var(--font); color: var(--ink); letter-spacing: 0; }
.s03-pl-green span { color: var(--green); } .s03-pl-cyan span { color: var(--cyan); }
.s03-pl-gold span { color: var(--gold); } .s03-pl-amber span { color: var(--amber); }

/* header */
.s03-k { margin-bottom: 20px; }
.s03-title { font-size: 62px; line-height: 1.08; text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.s03-title .w { display: inline-block; }
.s03-lead { font-size: 28px; margin-top: 14px; max-width: 760px; transition: opacity .5s; }
#s03.s03-has-card .s03-lead { opacity: .0; }

/* prediction (on enter, before the reveal) */
.s03-pred { position: absolute; left: 0; top: 268px; width: 640px; padding: 26px 30px 28px; }
.s03-pred-k { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.s03 p.s03-pred-q { margin: 12px 0 10px; font-size: 25px; line-height: 1.38; color: var(--ink2); }
.s03-pred-q b { color: var(--ink); }
.s03 p.s03-pred-q2 { margin: 0 0 20px; font-size: 32px; font-weight: 700; }
.s03-pred-o { display: flex; flex-direction: column; gap: 10px; }
.s03-pred-o span { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(4, 14, 10, .5); font-size: 23px; font-weight: 600; }
.s03-pred-o i { font: 700 16px var(--mono); font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--amber); color: var(--amber); }
.s03-hint { position: absolute; left: 0; bottom: 64px; transition: opacity .4s; }
#s03.s03-has-card .s03-hint { opacity: 0 !important; }
#s03.s03-end .s03-hint { opacity: 1 !important; }
#s03.s03-is-syn .s03-hint { opacity: 0 !important; }

/* case card */
.s03-card { position: absolute; left: 0; top: 252px; width: 640px; padding: 26px 32px 22px; opacity: 0; pointer-events: none; }
#s03.s03-has-card .s03-card { pointer-events: auto; }
.s03-c-top { display: flex; justify-content: space-between; align-items: center; }
.s03-c-idx { white-space: nowrap; font-size: 16px; color: var(--ink3); letter-spacing: .1em; }
.s03-tag-green { color: var(--green); } .s03-tag-cyan { color: var(--cyan); } .s03-tag-gold { color: var(--gold); } .s03-tag-amber { color: var(--amber); }
.s03-c-title { font-size: 36px; margin: 16px 0 6px; }
.s03-c-big { display: flex; align-items: baseline; gap: 22px; font: 800 116px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin: 4px 0 2px;
  text-shadow: 0 0 40px currentColor; }
.s03-c-big.long { font-size: 84px; letter-spacing: -.035em; }
.s03-big-n2 { font-size: 64px; opacity: .6; }
.s03-vs { display: flex; align-items: center; gap: 12px; padding-left: 22px; border-left: 2px solid var(--line2); text-shadow: none; }
.s03-vs b { font-size: 64px; color: var(--ink3); font-weight: 800; }
.s03-vs small { font: 500 17px/1.25 var(--font); color: var(--ink3); letter-spacing: 0; }
.s03-c-sub { font-size: 20px; color: var(--ink2); margin-bottom: 12px; }
.s03 p.s03-c-text { margin: 0 0 14px; font-size: 24px; line-height: 1.35; color: var(--ink); }
.s03-c-cond { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.s03-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 18px; font-weight: 600; border: 1px solid currentColor; background: rgba(0, 0, 0, .25); }
.s03-chip i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; font-weight: 800; background: currentColor; }
.s03-chip i { color: inherit; }
.s03-chip.ok { color: var(--green); } .s03-chip.no { color: var(--red); } .s03-chip.na { color: var(--ink3); }
.s03-chip.ask { color: var(--amber); } .s03-chip.gold { color: var(--gold); }
.s03-chip i::first-letter { color: #04110b; }
.s03-chip i { -webkit-text-fill-color: #04110b; }
.s03-c-cav { font-size: 20px; line-height: 1.35; color: var(--ink2); padding: 10px 14px; border-radius: 10px; background: rgba(255, 176, 32, .07); border-left: 3px solid var(--amber); margin-bottom: 12px; }
.s03-c-cav b { font: 700 14px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-right: 8px; }
.s03-c-src { font-size: 15px; line-height: 1.4; color: var(--ink2); opacity: .85; }

/* synthesis */
.s03-syn { position: absolute; left: 50%; top: 640px; transform: translate(-50%, -50%); width: 1500px; visibility: hidden; opacity: 0; text-align: center; }
.s03-syn-k { font-size: 30px; font-weight: 500; color: var(--ink2); margin-bottom: 30px; }
.s03-syn-k b { color: var(--gold); font-weight: 700; }
.s03-row { display: flex; align-items: center; justify-content: center; gap: 24px; }
.s03-term { white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 250px; padding: 18px 30px 22px; border-radius: 22px; font-size: 42px; font-weight: 700; letter-spacing: -.01em;
  border: 2px solid currentColor; background: rgba(4, 14, 10, .78); backdrop-filter: blur(10px); line-height: 1.1; }
.s03-term small { font: 600 15px var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; opacity: .8; }
.s03-term.cyan { color: var(--cyan); box-shadow: 0 0 40px rgba(76, 201, 240, .16); }
.s03-term.gold { color: var(--gold); box-shadow: 0 0 50px rgba(242, 193, 78, .22); }
.s03-term-wide { font-size: 32px; }
.s03-term.empty { color: var(--ink3); border-style: dashed; font-size: 28px; font-weight: 500; font-style: italic; min-width: 400px; }
.s03-op { font-size: 64px; font-weight: 300; color: var(--ink3); }
.s03-res { white-space: nowrap; padding: 22px 30px; border-radius: 22px; font-size: 44px; font-weight: 800; letter-spacing: -.02em; min-width: 330px; }
.s03-res.green { color: #03140c; background: linear-gradient(135deg, #6ff0ae, var(--green)); box-shadow: 0 0 60px rgba(62, 224, 143, .45); }
.s03-res.grey { color: var(--ink2); background: rgba(125, 154, 139, .14); border: 2px solid var(--ink4); }
.s03-ev { font-size: 22px; color: var(--ink2); margin: 14px 0 28px; }
.s03-row2 { opacity: .92; }
.s03-law { font: italic 500 30px/1.35 var(--serif); color: var(--ink); max-width: 1300px; margin: 6px auto 0; padding-top: 28px; border-top: 1px solid var(--line2); }
.s03-law b { color: var(--gold); font-style: italic; }
.s03-src { z-index: 5; bottom: 62px; color: var(--ink3); }

.s03-pl.flip { margin-left: -16px; }
.s03-pl.flip { translate: -100% 0; text-align: right; }
.s03-pl.flip em { margin-left: 0; }
.s03 .nw { white-space: nowrap; }

/* pin labels: the "what made it work" line shows once the case is revealed */
.s03-pl em { display: none; }
.s03-pl.why em { display: block; }
/* Africa: two bars instead of one number */
.s03-bars { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 10px; }
.s03-bar { display: grid; grid-template-columns: 1fr 150px; grid-template-rows: auto 18px; column-gap: 16px; align-items: center; }
.s03-bar span { grid-column: 1; font-size: 20px; color: var(--ink2); }
.s03-bar b { grid-column: 2; grid-row: 1 / 3; font: 800 54px/1 var(--font); letter-spacing: -.03em; text-align: right; }
.s03-bar-t { grid-column: 1; height: 16px; border-radius: 8px; background: rgba(170, 230, 200, .08); overflow: hidden; }
.s03-bar-t i { display: block; height: 100%; width: var(--w); border-radius: 8px; }
.s03-bar.no b { color: var(--ink3); } .s03-bar.no .s03-bar-t i { background: var(--ink3); min-width: 6px; }
.s03-bar.ok b { color: var(--green); text-shadow: 0 0 30px rgba(62, 224, 143, .5); } .s03-bar.ok .s03-bar-t i { background: linear-gradient(90deg, #1f9e62, var(--green)); box-shadow: 0 0 14px rgba(62, 224, 143, .6); }
.s03-big-n small, .s03-big-n2 small { display: block; font: 600 17px var(--font); letter-spacing: 0; color: var(--ink2); text-shadow: none; margin-top: 6px; }
.s03-big-n2 { opacity: .75; }
.s03-c-text b { color: var(--ink); }
/* step 4: lines from the three pins to the condition */
.s03-links { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 5; pointer-events: none; overflow: visible; }
.s03-links path { fill: none; stroke: var(--gold); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(242, 193, 78, .7)); }
.s03-links circle { fill: var(--green); filter: drop-shadow(0 0 8px rgba(62, 224, 143, .9)); }
#s03:not(.s03-is-syn) .s03-links { opacity: 0 !important; }
.s03-w3 b { font-weight: 700; color: rgba(242, 193, 78, .25); }
.s03-syn-k { font-size: 30px; line-height: 1.35; max-width: 1300px; margin: 0 auto 34px; }
.s03-syn-k b { color: rgba(242, 193, 78, .25); }
#s03.s03-is-syn .s03-lead { opacity: 0; }
/* step 5: open loop L4 */
.s03-l4 { position: absolute; right: -40px; top: 760px; width: 720px; padding: 18px 26px 20px; visibility: hidden; opacity: 0; }
.s03-l4-k { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.s03-l4 p { margin: 0; font: italic 500 29px/1.3 var(--serif); color: var(--ink); }
.s03-l4 p b { color: var(--gold); font-style: italic; }
#s03.s03-end .s03-hint { left: auto; right: -40px; bottom: auto; top: 712px; }

/* polish: footer + source line sit on top of the bright globe → keep them legible */
body[data-slide="s03"] #footer, #s03 .src { text-shadow: 0 0 6px #000, 0 0 2px #000, 0 1px 2px #000; }