/* Intro (upgrade 21/10c, precision pass 21/10) · "Bản thiết kế → thực tế". The picture is the world's canvas (#nqw, under the
   scenes); this is the DOM above it, drawn like a technical drawing: HUD labels (a 6 px anchor dot, a 1 px leader, the text; no
   pills, no glow), the CFR scope as a hairline bracket, the price as a ledger, GIÁ · NGUỒN · ĐIỀU KIỆN. pb-intro.js writes every
   moving value (opacity, transform, clip, SVG geometry) from one clock. Names 28 px, codes and small print 20 px mono. */
#s-intro{background:transparent}
#s-intro.i2d{background:#071229}
#s-intro .iw{position:absolute;inset:0;pointer-events:none;overflow:hidden;--hud:#EAF2FF;--code:rgba(143,192,255,.7);--hair:rgba(143,192,255,.5);--amb:#F0B45A;--grey:#9AA6B8;
  --mono:"JetBrains Mono",ui-monospace,monospace}
#s-intro .iw>*,#s-intro .iw-in>*{position:absolute;margin:0}
/* the UI leaves by a wipe (left → right): the outer box slides right and clips, the inner one slides back by as much (compositor only) */
#s-intro .iw-ui{left:0;top:0;width:1920px;height:1080px;overflow:hidden}
#s-intro .iw-in{position:absolute;left:0;top:0;width:1920px;height:1080px}
#s-intro .iw-2d{left:0;top:0;width:1920px;height:1080px;display:none}
#s-intro.i2d .iw-2d{display:block}
/* the same band of night 01 keeps behind its title: in by the end, so the last frame is 01's first */
#s-intro .iw-top{left:0;top:0;width:1920px;height:330px;opacity:0;background:linear-gradient(180deg,rgba(5,10,23,.94) 0,rgba(5,10,23,.86) 150px,rgba(5,10,23,.5) 240px,rgba(5,10,23,0) 330px)}
#s-intro .iw-tag{right:80px;bottom:56px;font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(207,224,255,.6);opacity:0}

/* the drawing layer: registration marks, the scope bracket, the leaders */
#s-intro .iw-links{left:0;top:0;width:1920px;height:1080px;overflow:visible}
#s-intro .iw-reg path{fill:none;stroke:rgba(143,192,255,.42);stroke-width:1}
#s-intro .iw-reg{opacity:0}
#s-intro .iw-be{fill:none;stroke:var(--hair);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
#s-intro .iw-bc{fill:none;stroke:#CFE0FF;stroke-width:1.5;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1}
#s-intro .iw-ld{fill:none;stroke:rgba(207,224,255,.62);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
#s-intro .iw-ld.trk{stroke:rgba(240,180,90,.75)}
#s-intro .iw-ld.byr{stroke:rgba(154,166,184,.6)}
#s-intro .iw-lk{fill:none;stroke:rgba(207,224,255,.6);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
#s-intro .iw-lkd{fill:#CFE0FF;opacity:0}
#s-intro .iw-lock path{fill:none;stroke:#F4F8FF;stroke-width:2;opacity:0}

/* the nodes: a 6 px dot, a ring that pings once when the route arrives */
#s-intro .iw-node{left:0;top:0;width:0;height:0;opacity:0}
#s-intro .iw-node::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#DDEAFF;box-shadow:0 0 0 2px rgba(7,18,41,.85)}
#s-intro .iw-node b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:1.5px solid rgba(207,224,255,.9);opacity:0}
#s-intro .iw-node.trk::before{background:var(--amb)}
#s-intro .iw-node.trk b{border-color:rgba(240,180,90,.9)}
#s-intro .iw-node.byr::before{background:var(--grey)}

/* LỆNH 42 §B4: the labels are the deck's one label (tokens: pitch.css): a dark see-through pill, a 1 px light edge, the name 24/600 in sentence case, the
   code mono 20; the trucking's edge amber (the problem), the buyer's grey; they appear by a wipe */
#s-intro .iw-lab{left:0;top:0;display:flex;align-items:baseline;gap:12px;white-space:nowrap;opacity:0;padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-intro .iw-lab b{font:var(--nq-pill-font);letter-spacing:0;text-transform:none;color:var(--nq-pill-ink)}
#s-intro .iw-lab small{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--code)}
#s-intro .iw-lab small::before{content:"· ";letter-spacing:0}
#s-intro .iw-lab.trk{box-shadow:inset 0 0 0 1px rgba(240,180,90,.92)}#s-intro .iw-lab.trk b{color:var(--nq-pill-ink)}#s-intro .iw-lab.trk small{color:rgba(240,180,90,.9)}
#s-intro .iw-lab.byr b{color:var(--nq-pill-ink)}#s-intro .iw-lab.byr small{color:rgba(190,200,216,.9)}
#s-intro .iw-lab.two{flex-direction:column;align-items:flex-start;gap:4px}
#s-intro .iw-lab.two small::before{content:none}

/* the scope bracket's label sits in a break of its top edge */
#s-intro .iw-cfr{left:0;top:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;opacity:0;padding:var(--nq-pill-pad);border-radius:999px;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-intro .iw-cfr b{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#CFE0FF}
#s-intro .iw-cfr span{font-size:24px;font-weight:500;color:var(--nq-pill-ink)}

/* the price as a ledger (pass 3: compact, the panel fits its content): label and figure, the source under the freight, the total on
   one line, the condition last; figures right-aligned, tabular */
#s-intro .iw-led{left:0;top:0;width:max-content;opacity:0;padding:20px 28px 22px;border-radius:12px;background:rgba(7,15,36,.92);box-shadow:inset 0 0 0 1px rgba(143,192,255,.25);
  display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:baseline;color:var(--hud)}
#s-intro .iw-led .lr{display:contents}
#s-intro .iw-led .lr>*{position:relative;line-height:1.45}
#s-intro .iw-led .k{font-size:26px;font-weight:500;color:#A9C1E6}
#s-intro .iw-led .n{justify-self:end;font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:#fff;letter-spacing:-.01em}
#s-intro .iw-led .s{font-size:24px;font-weight:500;color:rgba(207,224,255,.78);white-space:nowrap}
#s-intro .iw-led .ls .s{grid-column:1/-1;margin:-4px 0 6px;font-size:22px;color:rgba(207,224,255,.72)}
#s-intro .iw-led .l4{display:flex;grid-column:1/-1;align-items:baseline;gap:16px;white-space:nowrap}
#s-intro .iw-led .l4 .n{justify-self:auto;font-size:52px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
#s-intro .iw-led .l4 .s em{font-style:normal;font-size:30px;font-weight:600;color:#CFE0FF}
#s-intro .iw-led .l-rule{grid-column:1/-1;display:block;height:1px;margin:10px 0 6px;background:rgba(143,192,255,.45);transform:scaleX(0);transform-origin:0 50%}
#s-intro .iw-led .l5 .c{grid-column:1/-1;margin-top:10px;padding-left:14px;font-size:24px;font-weight:600;color:#FFD9A6;white-space:nowrap}
#s-intro .iw-led .l5 .c::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--amb)}   /* LỆNH 13: a dot, not a bar */
/* the odometer: each digit a reel 0–9 0–9 that rolls up to its figure */
#s-intro .od{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top}
#s-intro .od>i{display:block;font-style:normal}
#s-intro .od>i>span{display:block;height:1.2em;line-height:1.2em}
#s-intro .iw-led .n .sep{display:inline-block;height:1.2em;line-height:1.2em;vertical-align:top}
#s-intro .iw-led .n{line-height:1.2em}
/* the light that sweeps a ledger line when its word appears */
#s-intro .iw-led .lr>.sw{position:absolute;left:14px;right:14px;top:0;height:0;overflow:hidden;pointer-events:none;border-radius:4px}
#s-intro .iw-led .sw::after{content:"";position:absolute;left:0;top:0;bottom:0;width:160px;background:linear-gradient(90deg,rgba(207,224,255,0),rgba(207,224,255,.16),rgba(207,224,255,0));opacity:var(--so,0);transform:translateX(var(--sx,-160px))}

/* GIÁ · NGUỒN · ĐIỀU KIỆN: 40/500, tracked, no glow; each tied by a 1 px leader to the ledger line it names */
#s-intro .iw-w{left:160px;top:0;font-size:40px;font-weight:500;letter-spacing:.14em;color:#EAF2FF;line-height:1;white-space:nowrap;opacity:0}

/* the 2D version: the same drawing, flat: the same line widths and label style; each face in the paper's colour hides what lies
   behind it (painted far to near) */
#s-intro .iw-2d .iw-g path{fill:none;stroke:#66A8FF;stroke-width:1}
#s-intro .iw-2d .iw-g{opacity:0}
#s-intro .iw-2d .iw-g3{stroke-opacity:.05}#s-intro .iw-2d .iw-g4{stroke-opacity:.10}#s-intro .iw-2d .iw-g5{stroke-opacity:.26}
#s-intro .iw-2d .iw-fc{fill:#071229;stroke:none;opacity:0}
#s-intro .iw-2d .iw-bk{fill:none;stroke:#7FAEF0;stroke-opacity:.62;stroke-width:1.25;stroke-linecap:round;opacity:0}
#s-intro .iw-2d .iw-bk.iw-k1{stroke-opacity:.34}
#s-intro .iw-2d.iw-grey .iw-bk.iw-k2{stroke:#6B7686}
#s-intro .iw-2d .iw-jh{fill:none;stroke:rgba(102,178,242,.15);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#s-intro .iw-2d .iw-jr{fill:none;stroke:#7DBBF5;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#s-intro .iw-2d.iw-trk .iw-j0{stroke:#F0B45A;stroke-linecap:butt}
#s-intro .iw-2d.iw-trk .iw-h0{visibility:hidden}
#s-intro .iw-2d.iw-grey .iw-j2{stroke:#8C96A6;stroke-width:1.5}
#s-intro .iw-2d.iw-grey .iw-h2{visibility:hidden}