/* LỆNH 38B · storyboard (?s7=board): the page, and the six frames drawn at 1920 × 1080 (shown at 100 %, scaled by width only when narrower).
   One language for scenes 06 and 07: dark glass plates in the deck's .nq-card look (hairline, corner ticks, inner top light), soft shadow,
   one light sweep; every glyph ≥ 24 px except the source notes (22 px). */
body.b38-on{overflow:auto!important}
#b38{position:fixed;inset:0;z-index:100000;overflow:auto;background:#02050B;color:#F4F7FC;font-family:"Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#b38 *{box-sizing:border-box}
.b38-hd{max-width:1920px;margin:0 auto;padding:36px 40px 10px}
.b38-k{margin:0;font:600 14px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7FB0FF}
.b38-hd h1{margin:10px 0 8px;font:700 34px/1.15 "Inter",sans-serif;letter-spacing:-.02em}
.b38-sub{margin:0;color:#A4B1C5;font-size:16px;line-height:1.5;max-width:120ch}
.b38-sec{max-width:1920px;margin:34px auto 4px;padding:0 40px;font:700 24px/1.2 "Inter",sans-serif}
.b38-say{max-width:1920px;margin:0 auto 14px;padding:0 40px;color:#C9D6EE;font-size:16px;line-height:1.5}
.b38-one{margin:0 auto 26px;max-width:1920px}
.b38-view{position:relative;overflow:hidden;margin:0 auto}
.b38-view>.b38-fr{transform-origin:0 0}
.b38-ann{max-width:1920px;margin:0 auto;padding:12px 40px 4px;display:flex;flex-direction:column;gap:6px;color:#B9C6DD;font-size:16px;line-height:1.5}
.b38-ann p{margin:0;max-width:150ch}
.b38-id b{color:#fff}
.b38-m{font:600 14px/1.4 "JetBrains Mono",ui-monospace,monospace;color:#4FD1A5}
.b38-m.bad{color:#F0A63A}
.b38-chk ul{max-width:1920px;margin:6px auto 60px;padding:0 40px 0 62px;display:flex;flex-direction:column;gap:6px;color:#C9D6EE;font-size:16px;line-height:1.5}

/* ---------- the frame ---------- */
.b38-fr{position:relative;width:1920px;height:1080px;overflow:hidden;color:#fff;
  background:radial-gradient(42% 38% at 88% 0%,rgba(46,92,190,.10),rgba(46,92,190,0) 70%),radial-gradient(70% 40% at 50% 100%,rgba(30,64,140,.07),rgba(30,64,140,0) 70%),linear-gradient(180deg,#060B17 0%,#04080F 60%,#02050A 100%)}
.b38-fr p{margin:0}
.b38-eb{position:absolute;left:140px;top:58px;font:600 24px/1 "Inter",sans-serif;letter-spacing:.02em;color:#C9D8F2}
.b38-ti{position:absolute;left:140px;right:140px;top:96px;margin:0;font:700 56px/1.12 "Inter",sans-serif;letter-spacing:-.022em;color:#fff}
.b38-note{position:absolute;left:140px;right:140px;top:1018px;font:500 22px/1.3 "Inter",sans-serif;color:#B7C4DA;text-align:center}

/* the glass plate (scene 06): 520 × 672, three layers (artefact, text, glass) */
.b38-plate{position:absolute;top:196px;width:520px;height:692px;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,35,64,.92) 0%,rgba(9,15,31,.97) 38%,rgba(7,12,25,.98) 100%);border:1px solid rgba(214,226,246,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 0 rgba(0,0,0,.4),0 46px 90px -34px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.25)}
.b38-plate::before{content:"";position:absolute;inset:-1px;border-radius:10px;pointer-events:none;z-index:3;--c:rgba(143,184,255,.85);
  background:linear-gradient(var(--c),var(--c)) left top/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) left top/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) right top/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/2px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/12px 2px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/2px 12px no-repeat}
.b38-plate::after{content:"";position:absolute;left:0;right:0;top:0;height:260px;pointer-events:none;background:radial-gradient(70% 90% at 50% 0%,rgba(127,176,255,.09),rgba(127,176,255,0))}
.b38-plate.s1{height:500px}.b38-plate.s2{height:590px}
.b38-plate.lit{border-color:rgba(143,184,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(127,176,255,.25),0 0 70px rgba(80,140,255,.22),0 60px 100px -36px rgba(0,0,0,.95)}
.b38-plate.lit::before{--c:#BFD8FF}
.b38-plate.back{transform:scale(.97);transform-origin:50% 50%;background:linear-gradient(180deg,rgba(17,27,50,.93) 0%,rgba(8,13,27,.97) 38%,rgba(6,10,22,.98) 100%)}
.b38-plate.back::before{--c:rgba(143,184,255,.45)}
.b38-sweep{position:absolute;left:0;right:0;top:0;height:300px;z-index:1;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(190,215,255,.10) 44%,rgba(255,255,255,.16) 48%,rgba(190,215,255,.08) 52%,rgba(255,255,255,0) 64%)}
.b38-art{position:absolute;left:36px;top:30px;width:448px;height:236px;z-index:2}
.b38-pnm{position:absolute;left:36px;right:30px;top:286px;z-index:2;display:flex;flex-direction:column;gap:10px}
.b38-nm{font:700 44px/1.18 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
.b38-ex{font:500 24px/1.3 "Inter",sans-serif;color:#C3CFE2}
.b38-row{position:absolute;left:36px;right:30px;z-index:2;display:flex;flex-direction:column;gap:6px}
.b38-plus{top:412px}
.b38-trade{top:536px;padding-top:18px;border-top:1px solid rgba(214,226,246,.14)}
.b38-lab{font:600 24px/1.2 "Inter",sans-serif;letter-spacing:.01em;color:#B9D6FF}
.b38-trade .b38-lab{color:#CBD3DF}
.b38-plus .b38-tx{font:600 28px/1.28 "Inter",sans-serif;color:#fff}
.b38-plus .b38-tx b{color:#B8D6FF;margin-right:12px}
.b38-trade .b38-tx{font:500 26px/1.3 "Inter",sans-serif;color:#F7F8FA}
.b38-close{position:absolute;left:120px;right:120px;top:914px;font:700 38px/1.2 "Inter",sans-serif;letter-spacing:-.015em;color:#fff;text-align:center}

/* artefact 1 · a spreadsheet corner with a chat bubble over it */
.b38-svg{position:absolute;left:0;top:0}
.b38-sx{font:600 24px "Inter",sans-serif;fill:#566173;text-anchor:middle}
.b38-sc{font:600 24px "JetBrains Mono",monospace;fill:#162033}
.b38-bub{position:absolute;right:-6px;bottom:4px;white-space:nowrap;padding:12px 18px 14px;border-radius:20px 20px 6px 20px;background:#fff;color:#0B1220;border:2px solid #4D8DFF;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.75)}
.b38-bub b{display:flex;align-items:center;gap:8px;font:800 24px/1.2 "Inter",sans-serif;color:#0B1220}
.b38-bub b::before{content:"";width:12px;height:12px;border-radius:50%;background:#2A63E6}
.b38-bub span{display:block;font:600 24px/1.25 "Inter",sans-serif}
.b38-bub.on{transform:translateY(-14px);box-shadow:0 0 0 3px rgba(143,192,255,.55),0 0 46px rgba(80,140,255,.45),0 22px 40px -14px rgba(0,0,0,.75)}
/* artefact 2 · one suite, five modules */
.b38-mod{position:absolute;width:138px;height:104px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(127,176,255,.07);border:1px solid rgba(160,190,240,.26)}
.b38-mod svg{fill:none;stroke:#A9C8FF;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.b38-mod span{font:600 24px/1 "Inter",sans-serif;color:#E6EEFA;white-space:nowrap}
.b38-a2.on .b38-mod span{color:#fff}
.b38-a2.on .b38-mod{background:rgba(127,176,255,.13);border-color:#8FB8FF;box-shadow:0 0 26px rgba(80,140,255,.28)}
.b38-a2.on .b38-mod svg{stroke:#fff}
/* artefact 3 · one rate grid, many lanes (cell tint = price band) */
.b38-a3{display:flex;flex-direction:column;justify-content:center;gap:12px}
.b38-rrow{display:flex;align-items:center;gap:8px}
.b38-rrow span{width:172px;font:500 24px/1 "JetBrains Mono",monospace;color:#DDE7F7;white-space:nowrap}
.b38-rrow i{width:46px;height:38px;border-radius:5px;background:rgba(127,176,255,.1);border:1px solid rgba(160,190,240,.18)}
.b38-rrow i.v1{background:rgba(127,176,255,.12)}.b38-rrow i.v2{background:rgba(127,176,255,.24)}.b38-rrow i.v3{background:rgba(127,176,255,.38)}.b38-rrow i.v4{background:rgba(127,176,255,.55)}
.b38-a3.on .b38-rrow i.v1{background:rgba(127,176,255,.22)}.b38-a3.on .b38-rrow i.v2{background:rgba(127,176,255,.42)}.b38-a3.on .b38-rrow i.v3{background:rgba(127,176,255,.66)}.b38-a3.on .b38-rrow i.v4{background:#8FB8FF;box-shadow:0 0 14px rgba(120,170,255,.5)}

/* ---------- scene 07 · the rail ---------- */
.b38-railw{position:absolute;inset:0}
.b38-rail{position:absolute;left:0;top:0}
.b38-rl{stroke:rgba(214,226,246,.78);stroke-width:4;stroke-linecap:round}
.b38-rd{stroke:rgba(214,226,246,.62);stroke-dasharray:16 14}
.b38-rq{stroke:#7FB0FF;stroke-width:5;stroke-linecap:round}
.b38-nq{fill:#4D8DFF;stroke:#CFE2FF;stroke-width:4}
.b38-stp{fill:#0A1430;stroke:#D6E0EF;stroke-width:3.5}
.b38-br{fill:none;stroke:rgba(214,226,246,.6);stroke-width:2;stroke-dasharray:8 8}
.b38-sn{position:absolute;width:300px;text-align:center;font:600 30px/1.2 "Inter",sans-serif;color:#fff}
.b38-sn.q{color:#fff;font-weight:700}
.b38-tagq{position:absolute;text-align:left;font:800 24px/1 "Inter",sans-serif;letter-spacing:.22em;color:#CFE2FF;text-shadow:0 0 18px rgba(80,140,255,.6)}
.b38-later{position:absolute;text-align:center;font:600 26px/1.2 "Inter",sans-serif;color:#F1F4F8}
.b38-along{position:absolute;left:1010px;width:760px;top:650px;text-align:left;font:600 26px/1.3 "Inter",sans-serif;color:#fff}
.b38-railw.dim .b38-rl,.b38-railw.dim .b38-rq{opacity:.55}
/* the three inputs */
.b38-ins{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.b38-in{position:absolute;width:150px;height:116px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(14,24,46,.92);border:1px solid rgba(160,190,240,.3);box-shadow:0 18px 36px -16px rgba(0,0,0,.85)}
.b38-in svg{fill:none;stroke:#BFD6FF;stroke-width:2.6;stroke-linejoin:round}
.b38-in span{font:600 24px/1 "Inter",sans-serif;color:#EEF3FA}
.b38-ins.fly .b38-in{top:304px}.b38-ins.fly .b38-in:nth-child(1){left:130px}.b38-ins.fly .b38-in:nth-child(2){left:310px}.b38-ins.fly .b38-in:nth-child(3){left:490px}
.b38-flow{position:absolute;left:0;top:0;pointer-events:none}
.b38-ins.in .b38-in{left:84px}
.b38-ins.in .b38-in:nth-child(1){top:292px}.b38-ins.in .b38-in:nth-child(2){top:452px}.b38-ins.in .b38-in:nth-child(3){top:612px}
.b38-ins.in .b38-in::after{content:"";position:absolute;left:100%;top:50%;width:62px;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(127,176,255,.8),rgba(127,176,255,.15))}
/* the NEXQUOTE card (the "Báo giá" stop, opened) */
.b38-card{position:absolute;left:296px;top:196px;width:1100px;border-radius:10px;overflow:visible;
  background:linear-gradient(180deg,rgba(16,26,50,.96),rgba(7,12,25,.98) 30%);border:1px solid rgba(143,184,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(127,176,255,.15),0 0 90px rgba(70,130,255,.2),0 60px 110px -40px rgba(0,0,0,.95)}
.b38-card>.b38-sweep{border-radius:10px;overflow:hidden}
.b38-cbar{position:absolute;left:24px;right:24px;top:18px;display:flex;align-items:baseline;justify-content:space-between;z-index:2}
.b38-cbar b{font:800 24px/1 "Inter",sans-serif;letter-spacing:.22em;color:#CFE2FF}
.b38-cbar span{font:500 22px/1 "Inter",sans-serif;color:#CFD9E8}
.b38-ui{position:absolute;left:24px;right:24px;overflow:hidden;border-radius:8px;background:#fff;z-index:2;box-shadow:0 1px 0 rgba(255,255,255,.3),0 10px 24px -12px rgba(0,0,0,.6)}
.b38-ui img{display:block;height:auto}
.b38-ring{position:absolute;z-index:4;border:3px solid #3F86FF;border-radius:8px;box-shadow:0 0 0 4px rgba(63,134,255,.22),0 0 26px rgba(63,134,255,.45)}
.b38-ring::before{content:attr(data-n);position:absolute;left:-22px;top:-22px;width:40px;height:40px;border-radius:50%;background:#2A63E6;color:#fff;
  font:800 24px/40px "Inter",sans-serif;text-align:center;box-shadow:0 0 0 3px #0A1430}
.b38-calls{position:absolute;left:1438px;top:236px;width:420px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:46px}
.b38-calls li{position:relative;padding-left:58px;font:700 32px/1.22 "Inter",sans-serif;color:#fff;letter-spacing:-.01em}
.b38-calls li::before{content:attr(data-n);position:absolute;left:0;top:-1px;width:42px;height:42px;border-radius:50%;background:#2A63E6;color:#fff;font:800 24px/42px "Inter",sans-serif;text-align:center}
/* the floor: each plate's soft reflection (2.5D), so the space under a short plate reads as a stage, not a gap */
.b38-fl{position:absolute;top:0;width:520px;height:160px;pointer-events:none;background:radial-gradient(48% 60% at 50% 0%,rgba(90,140,240,.11),rgba(90,140,240,0) 100%)}
.b38-chk3{position:absolute;width:420px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.b38-chk3 li{position:relative;padding-left:40px;font:600 26px/1.25 "Inter",sans-serif;color:#fff}
.b38-chk3 li::before{content:"✓";position:absolute;left:4px;top:0;color:#8FC0FF;font-weight:700}