/* Scene 10 · Thương mại hóa và tài chính (LỆNH 42 → 44; the code calls it biz08). A WebGL canvas of its own (.bz-gl, pb-biz.js: the deck's night
   model) under the DOM that scene-biz08.js writes from one clock (NQ_CK). The title on a dark band, a 32 px line per beat under it. The left
   column: one big number a beat (>= 96 px, tabular figures) and at most one short line, over the dark. Every label is the deck's one label
   (pitch.css, LỆNH 42 §B4: a dark see-through pill, a 1 px light edge, 24 px semibold): warm ones for people, blue ones for AI and data, an
   amber one for the cost of serving. Text >= 24 px. Nothing below y 936 (the page's bar is under 940). */
#s-biz,#s-biz.active{filter:none!important;transform:none!important}
#s-biz .b8{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#s-biz .b8 *{box-sizing:border-box}
#s-biz .b8 p{margin:0}
#s-biz .b8>*{position:absolute;margin:0;left:0;top:0}
/* the title on a dark band (the camera keeps lit surfaces from under it; the band is the second guard) */
#s-biz .head{z-index:6;isolation:isolate}
#s-biz .head::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-170px;right:-210px;top:-66px;bottom:-106px;background:rgba(1,4,12,.86);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade,650px)),transparent 100%),linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade,650px)),transparent 100%),linear-gradient(180deg,transparent 0,#000 30%,#000 82%,transparent 100%);mask-composite:intersect}
#s-biz.bz-b5 .head::before{background:rgba(1,4,12,.9)}
/* LỆNH 69 · over the globe: no box behind the title (its edges cut the air's rim): a soft radial dark from the top-left corner instead (≤ .6), ending inside its own element (no edge anywhere) */
#s-biz .head::before{transition:opacity .4s var(--io,ease)}
#s-biz .head::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:-170px;top:-66px;width:1800px;height:560px;opacity:0;transition:opacity .4s var(--io,ease);background:radial-gradient(1650px 460px at 0 0,rgba(1,4,12,.6) 0,rgba(1,4,12,.58) 45%,rgba(1,4,12,.42) 65%,rgba(1,4,12,.18) 85%,rgba(1,4,12,0) 100%)}
#s-biz.bz-gl5 .head::before{opacity:0}
#s-biz.bz-c3on .head::before{right:auto;width:1430px}
#s-biz.bz-gl5 .head::after{opacity:1}
#s-biz.bz-gl5 .head .chap{color:#E6EEF9} #s-biz.bz-gl5 .head .chap b{color:#AFD2FF} #s-biz.bz-gl5 .head .chap i{color:#9FB0C8}
#s-biz.bz-gl5 .head :is(.chap,h2,.bz-sub){text-shadow:0 1px 3px rgba(0,2,8,.8),0 0 8px rgba(1,4,12,.65)}
#s-biz .head .bz-sub{position:absolute;left:0;top:100%;margin:12px 0 0;opacity:0;white-space:nowrap;font:600 32px/1.2 "Inter",sans-serif;letter-spacing:-.01em;color:#E6ECF5;will-change:opacity,transform}
#s-biz .b8 .bz-gl{width:1920px;height:1080px;display:block;background:#0A1428}
#s-biz .bz-still{width:1920px;height:1080px;max-width:none;display:none}
#s-biz.bz-still-on .bz-still{display:block}
#s-biz.bz-still-on .b8 .bz-gl{display:none}
/* the dark at the left behind the column (the sky there, a step deeper), the band at the foot for the common line and the bottom line */
#s-biz .bz-shade{width:1250px;height:1080px;opacity:0;background:linear-gradient(90deg,rgba(3,6,14,.7) 0,rgba(3,6,14,.6) 65%,rgba(3,6,14,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 63%);mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 63%)}
#s-biz .bz-shade4{top:404px;width:900px;height:340px;opacity:0;background:linear-gradient(90deg,rgba(3,6,14,.8) 0,rgba(3,6,14,.66) 60%,rgba(3,6,14,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}   /* LỆNH 48: behind ③'s left text only */
#s-biz .bz-bot{top:720px;width:1920px;height:360px;opacity:0;background:linear-gradient(0deg,rgba(3,6,14,.95) 0,rgba(3,6,14,.92) 40%,rgba(3,6,14,.66) 55%,rgba(3,6,14,0) 100%)}
/* ⑤ the end: one soft light sweeping the frame (screen blend, 0,8 s) */
#s-biz .bz-sweep{left:0;top:0;width:1100px;height:1080px;opacity:0;mix-blend-mode:screen;background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(214,228,255,.16) 38%,rgba(255,246,232,.42) 50%,rgba(214,228,255,.16) 62%,rgba(255,255,255,0) 100%)}
/* ⑤ the end: a dark at the left behind the chips and the closing lines (the district under them is lit) */
#s-biz .bz-endscrim{left:0;top:240px;width:1240px;height:380px;opacity:0;background:linear-gradient(90deg,rgba(3,6,14,.8) 0,rgba(3,6,14,.74) 58%,rgba(3,6,14,0) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%)}
#s-biz .bz-svg{width:1920px;height:1080px;overflow:visible}
#s-biz .bz-svg path{fill:none;stroke:var(--nq-ld);stroke-width:1}
/* the left column */
#s-biz .bz-blk{width:860px;opacity:0;font-variant-numeric:tabular-nums}
#s-biz .bz-big{font:800 104px/1 "Inter",sans-serif;letter-spacing:-.03em;color:#fff;white-space:nowrap}
#s-biz .bz-big .v{font-variant-numeric:tabular-nums;display:inline-block;text-align:left}

/* LỆNH 46: ① the port out of focus under a deep navy vignette (the price cards stand on it) */
#s-biz .bz-vig{width:1920px;height:1080px;opacity:0;background:linear-gradient(0deg,rgba(1,3,10,.94) 0,rgba(1,3,10,.7) 18%,rgba(1,3,10,0) 42%),radial-gradient(ellipse 72% 64% at 50% 54%,rgba(2,6,16,.28) 0,rgba(2,6,16,.5) 52%,rgba(1,3,10,.93) 100%)}
#s-biz .bz-unit{margin-top:14px!important;font:700 44px/1.1 "Inter",sans-serif;letter-spacing:-.015em;color:#EEF2F8;white-space:nowrap}
#s-biz .bz-ln{margin-top:16px!important;font:600 30px/1.3 "Inter",sans-serif;color:#E4EAF3;max-width:820px}
#s-biz .bz-eq{position:relative;display:inline-block;margin-top:22px!important;opacity:0;font-size:30px;font-variant-numeric:tabular-nums}
#s-biz .bz-eq b{font-weight:800}
/* Q&A segment: the big AI chip (AI: BẬT → AI: TẮT while the quotation line runs on) */
#s-biz .bz-chip{opacity:0;white-space:nowrap;padding:5px 14px 7px;border-radius:999px;font:700 28px/1.2 "Inter",sans-serif;color:#F2F4F7;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge);font-variant-numeric:tabular-nums}
#s-biz .bz-sw{display:flex;align-items:center;gap:20px;padding:8px 28px 12px 22px;border-radius:999px;font:800 56px/1.1 "Inter",sans-serif;letter-spacing:-.01em;background:#2A63E6;color:#fff;box-shadow:0 0 0 1px rgba(150,190,255,.9)}
#s-biz .bz-sw i{width:72px;height:38px;border-radius:19px;background:rgba(255,255,255,.95);position:relative}
#s-biz .bz-sw i::after{content:"";position:absolute;right:4px;top:4px;width:30px;height:30px;border-radius:50%;background:#2A63E6}
#s-biz .bz-sw.off{background:var(--nq-pill-bg);color:#F2F4F7;box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-biz .bz-sw.off i{background:#5C677A}
#s-biz .bz-sw.off i::after{right:auto;left:4px;background:#fff}
/* the labels: the deck's pill (.nq-lbl); warm for people, blue for AI, amber for the cost, dashed for "if" */
#s-biz .bz-lab{opacity:0}
#s-biz .bz-lab b{font-weight:800}
#s-biz .bz-lab.warm{color:#FFEBD8;box-shadow:inset 0 0 0 1px rgba(255,196,140,.88)}
#s-biz .bz-lab.amber{color:#FFE2C2;box-shadow:inset 0 0 0 1px rgba(255,170,90,.9)}
#s-biz .bz-lab.dash{background:rgba(6,9,16,.86);box-shadow:none;outline:1.5px dashed rgba(236,232,224,.9);outline-offset:3px}
#s-biz .bz-lab.cap{font-size:24px;padding:6px 18px 8px}
/* ④ the task cards: the deck's dark pill, 28 px, a thin blue edge (the AI does the work) or a warm one (he does it himself) */
#s-biz .bz-tk{opacity:0;font-size:28px;font-weight:700;padding:6px 20px 9px;background:rgba(6,12,28,.92);color:#fff;box-shadow:inset 0 0 0 2px rgba(150,196,255,.95);will-change:opacity,transform}
#s-biz .bz-tk.warm{color:#FFEBD8;box-shadow:inset 0 0 0 2px rgba(255,196,140,.95)}
/* the loop's caption: the same dark pill as every label, a 1 px blue edge (it is about the AI): no blue fill (blue is the AI and the data, never a plate) */
#s-biz p.bz-lab.ai.cap,html.proj #s-biz p.bz-lab.ai.cap{background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-ai-edge);color:#F4F6FA}
html.proj #s-biz p.bz-lab.ai.cap{background:rgba(4,8,18,.95)}
/* ② the middle crate's pill: three short lines, inside the crate's width */
#s-biz .bz-lab.avg3{white-space:normal;text-align:center;border-radius:22px;line-height:1.2;padding:6px 16px 8px}
#s-biz .bz-lab.w5{font-size:28px;padding:6px 20px 9px;background:rgba(8,12,22,.84)}
/* ③ the tick in a customer's pill: the price cards' own mark (a stroke that draws in) */
#s-biz .bz-lab .ck{display:inline-block;width:24px;height:24px;margin:0 -2px 0 6px;vertical-align:-4px;fill:none;stroke:#E6ECF6;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
html.proj #s-biz :is(.bz-lab.ai,.bz-sw:not(.off)){background:var(--nqp-fill)}
/* ⑤ the end: the chips in a row, the two closing lines, the bottom line */
#s-biz .bz-chips{display:flex;gap:16px;opacity:0}
#s-biz .bz-chips p{opacity:0;font-size:28px;font-weight:700;padding:6px 18px 8px;font-variant-numeric:tabular-nums}
#s-biz .bz-close{opacity:0;width:1500px}
#s-biz .bz-close .c1{opacity:0;font:800 56px/1.14 "Inter",sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap}
#s-biz .bz-close .c2{opacity:0;margin-top:14px!important;font:700 34px/1.2 "Inter",sans-serif;color:#E9EEF6;white-space:nowrap}
#s-biz .bz-close .warm{color:#FFC48C}
#s-biz .bz-foot{opacity:0;font:700 28px/34px "Inter",sans-serif;color:#fff;white-space:nowrap}
#s-biz .bz-foot span{display:block}
#s-biz .bz-foot span+span{font-weight:600;color:#E3EAF6}   /* LỆNH 56 · ④ the bottom strip: two lines, what the money is for, then what is true today */
/* ④ the line under the big number ("Đang chạy trên máy chủ thật"), the three marks' row (its look: biz-price.js / pitch-biz-price.css; here only where it stands and that it waits hidden) */
#s-biz .bz-proof{opacity:0;white-space:nowrap;font:600 26px/1.3 "Inter",sans-serif;color:#C9D3E2}
#s-biz .bz-logos{opacity:0}
/* ③ the stamp at break-even: a dark plate, a bright white-blue edge and glow (the crates' own glow, the owner's ask), a few degrees off true */
#s-biz .bz-stamp{opacity:0}
#s-biz .bz-stamp b{display:block;padding:8px 28px 12px;border-radius:14px;font:800 56px/1 "Inter",sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#fff;background:rgba(5,10,26,.95);
  box-shadow:inset 0 0 0 3px rgba(255,238,212,.97);transform:scale(var(--s,1));position:relative}
#s-biz .bz-stamp b::after{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid transparent;border-image:url(../img/ui9/gw9.webp) 64/64px/56px}   /* LỆNH 69: the warm glow a pre-blurred 9-slice image (no 34 + 90 px box-shadows) */
/* LỆNH 54 · ③ B: the stamp's dust (a ring and six soft puffs from its foot) */
#s-biz .bz-sdust{width:0;height:0;opacity:0;pointer-events:none;display:none}   /* LỆNH 69: off (scene-biz08.js stampDust) */
#s-biz .bz-sdust i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,236,208,.85),rgba(255,236,208,0) 70%);will-change:transform,opacity}
#s-biz .bz-sdust i.rg{left:-110px;top:-14px;width:220px;height:28px;background:none;border:3px solid rgba(255,240,214,.85)}
#s-biz :is(.bz-blk,.bz-chip,.bz-lab,.bz-lb,.bz-stamp,.bz-proof,.bz-logos,.bz-chips p,.bz-close p,.bz-foot){will-change:opacity,transform}
html.proj #s-biz .bz-shade{background:linear-gradient(90deg,rgba(2,4,10,.9) 0,rgba(2,4,10,.84) 60%,rgba(2,4,10,0) 100%)}
html.proj #s-biz .bz-ln{color:var(--nqp-pale)}
/* Q&A only: a board to answer on (clicks, keys); hidden while pitching */
#s-biz .bz-qa,#s-biz .bz-scn,#s-biz .bz-card{display:none}
#s-biz.bz-ai-on :is(.bz-qa,.bz-scn,.bz-card){display:none!important}   /* the AI-off segment is the camera's; the board and its table step aside */
#s-biz.bz-qa-on .b8{pointer-events:none}
#s-biz.bz-qa-on :is(.bz-lb.click,.bz-lab.click,.bz-pq.click,.bz-sw,.bz-card){pointer-events:auto;cursor:pointer}
#s-biz.bz-qa-on .bz-qa{display:block;left:1440px;top:206px;width:400px;padding:10px 16px 12px;border-radius:12px;background:var(--nq-pill-bg);color:#F2F4F7;box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-biz .bz-qa .hd{font:800 26px/1.2 "Inter",sans-serif}
#s-biz .bz-qa .k{font:500 24px/1.3 "Inter",sans-serif;margin-top:4px!important}
#s-biz.bz-qa-on .bz-scn.on{display:table;left:1180px;top:640px;border-collapse:collapse;font:600 24px/1.3 "Inter",sans-serif;color:#F2F4F7;background:#090E1B;box-shadow:inset 0 0 0 1px rgba(226,232,240,.45);font-variant-numeric:tabular-nums}
#s-biz .bz-scn :is(th,td){padding:6px 14px;text-align:right;border-bottom:1px solid rgba(226,232,240,.18)}
#s-biz .bz-scn tbody th{text-align:left;font-weight:600}
#s-biz .bz-scn thead th.sel{background:#2A63E6;color:#fff}
#s-biz .bz-scn kbd{font:700 20px/1 "Inter",sans-serif;opacity:.7}
#s-biz .bz-scn caption{caption-side:bottom;text-align:left;padding:6px 14px;font:500 24px/1.2 "Inter",sans-serif;color:#C9D3E2}
#s-biz.bz-qa-on .bz-card.on{display:block;left:1180px;top:300px;width:640px;padding:18px 22px 20px;border-radius:12px;background:#090E1B;color:#F2F4F7;box-shadow:inset 0 0 0 1px rgba(226,232,240,.45),0 18px 40px -18px rgba(0,0,0,.7)}
#s-biz .bz-card p{font:500 26px/1.35 "Inter",sans-serif}
#s-biz .bz-card p.t{font:800 32px/1.2 "Inter",sans-serif;margin-bottom:8px!important}

/* LỆNH 46 §1e: sharp DOM copies of the hologram panels (512 x 640) and the roof signs (1024 x 192), laid over their 3D surfaces while the camera stands still */
#s-biz .bz-hp,#s-biz .bz-sg{opacity:0;transform-origin:0 0;transition:opacity .24s ease;will-change:transform,opacity}
#s-biz .bz-hp{width:512px;height:640px}
#s-biz .bz-hp::before{content:"";position:absolute;inset:8px;box-sizing:border-box;border-radius:40px;border:7px solid rgba(150,196,255,.95);
  background:radial-gradient(circle 220px at 248px 192px,rgba(255,255,255,.92) 0,rgba(255,255,255,.57) 50%,rgba(255,255,255,0) 100%),repeating-linear-gradient(180deg,rgba(150,196,255,.06) 0 2px,transparent 2px 7px),rgba(3,6,16,.99)}
#s-biz .bz-hp.omen::before,#s-biz .bz-hp.vantis::before{background:radial-gradient(circle 220px at 248px 192px,rgba(255,255,255,.55) 0,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%),repeating-linear-gradient(180deg,rgba(150,196,255,.06) 0 2px,transparent 2px 7px),rgba(3,6,16,.99)}
#s-biz .bz-hp img{position:absolute;left:96px;top:70px;width:320px;height:320px}
#s-biz .bz-hp .wm{position:absolute;left:0;right:0;top:490px;margin:0;padding-left:.12em;text-align:center;white-space:nowrap;font:700 70px/64px "Inter",sans-serif;letter-spacing:.12em;color:#fff}
#s-biz .bz-hp.nexquote .wm{font:700 75px/64px "NQ Geist","Inter",sans-serif;letter-spacing:-.035em;padding-left:0}
#s-biz .bz-hp u{position:absolute;left:110px;top:463px;width:292px;height:3px;background:rgba(150,196,255,.55)}
#s-biz .bz-sg{width:1024px;height:192px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:33px;border-radius:23px;border:4.5px solid rgba(190,198,212,.96);overflow:hidden;
  background:linear-gradient(180deg,rgba(16,24,40,.97),rgba(4,8,18,.985) 55%,rgba(9,13,24,.98))}
#s-biz .bz-sg::after{content:"";position:absolute;left:0;right:0;top:8px;height:35px;background:rgba(255,255,255,.07)}
#s-biz .bz-sg .mk{position:relative;display:block;width:121px;height:121px;flex:none;overflow:visible}
#s-biz .bz-sg .mk::before{content:"";position:absolute;left:50%;top:50%;width:232px;height:232px;transform:translate(-50%,-50%);background:radial-gradient(circle closest-side,rgba(255,255,255,.9) 0,rgba(255,255,255,.56) 50%,rgba(255,255,255,0) 100%)}
#s-biz .bz-sg .mk img{position:relative;display:block;width:121px;height:121px}
#s-biz .bz-sg .wm{position:relative;margin:3px 0 0;white-space:nowrap;font:700 95px/1 "Inter",sans-serif;letter-spacing:.12em;color:#fff}
#s-biz .bz-sg.nexquote .wm{font:700 95px/1 "NQ Geist","Inter",sans-serif;letter-spacing:-.035em}
#s-biz .bz-hp .wm span,#s-biz .bz-sg .wm span{color:#29A3FF}
/* LỆNH 46 CD: hidden until its first placement (op() sets visibility with the opacity): no ghost at (0,0) */
#s-biz .b8>:is(.bz-lab,.bz-lb,.bz-sdust,.bz-tk,.bz-blk,.bz-stamp,.bz-chip,.bz-chips,.bz-close,.bz-foot,.bz-proof,.bz-logos,.bz-hp,.bz-sg){visibility:hidden}
/* LỆNH 47: the dive into the command room: a light grid over black while the walls dissolve; the 2,39 chip flying into the container */
#s-biz .bz-dive{width:1920px;height:1080px;opacity:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(2,5,14,.55),rgba(1,3,9,.98)),repeating-linear-gradient(90deg,rgba(130,185,255,.55) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(130,185,255,.55) 0 1px,transparent 1px 64px);background-blend-mode:normal,screen,screen}
#s-biz .bz-fly{font-size:30px}
#s-biz .head .bz-sub em{font-style:normal;font-weight:500;color:#B9C3D4}   /* LỆNH 48: ① has ONE subtitle: the beat's line, then what the product is, lighter */
/* LỆNH 47 · ①: the route on the water: a 3 px glowing line, an arrowhead after Business; LỆNH 48: no running dot: a soft long streak of light slides along the line (a motion path, so it keeps running while the beat stands still) */
#s-biz .bz-route{width:1920px;height:1080px;opacity:0;visibility:hidden}
#s-biz .bz-route svg{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible;filter:drop-shadow(0 0 3px rgba(110,175,255,.95)) drop-shadow(0 0 11px rgba(60,120,255,.7))}
#s-biz .bz-route path.r{fill:none;stroke:#B4D6FF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#s-biz .bz-route .ah{fill:#C8E2FF;opacity:0}
#s-biz .bz-route .sw{position:absolute;left:0;top:0;width:300px;height:9px;margin:-4.5px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,240,255,.78),rgba(160,205,255,.34) 55%,rgba(160,205,255,0));offset-rotate:auto;offset-distance:0%;animation:bz-rt 6.4s linear infinite;will-change:offset-distance}
@keyframes bz-rt{0%{offset-distance:0%;opacity:0}8%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* LỆNH 72 · a customer's way: a warm pulse (head + a tail of five) on the route's own path, its glow ≤ 8 px; the arrow lit warm once it arrives; at rest the small pulse runs again every 6 s (.sw) */
#s-biz .bz-route .pz{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFEBCF;box-shadow:0 0 6px 3px rgba(255,190,110,.85);offset-rotate:0deg;offset-distance:0px;opacity:0;will-change:transform,opacity}   /* LỆNH 73: their own layers again (drawn without them they repainted the page's layer each frame: a 41 ms GPU raster as the pulse began); made and drawn ahead at 09's rest (scene-biz08.js warmC3 "rt"), not at ①'s first frame */
#s-biz .bz-route .pz.t{width:8px;height:8px;margin:-4px 0 0 -4px;background:#FFD49A;box-shadow:0 0 6px 2px rgba(255,180,100,.6)}
#s-biz .bz-route .ah{transition:fill .3s}
#s-biz .bz-route.lit .ah{fill:#FFD9A8}
#s-biz .bz-route .sw{width:120px;height:7px;margin:-3.5px 0 0 -60px;background:radial-gradient(closest-side,rgba(255,234,204,.85),rgba(255,192,124,.36) 55%,rgba(255,192,124,0));animation-duration:6s}
body.safe #s-biz .bz-route .sw,body.calm #s-biz .bz-route .sw{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){#s-biz .bz-route .sw{animation:none;opacity:0}}
/* the three nodes where the threads meet the route: glowing discs (Pilot and Business 14 px, Team 20 px) */
#s-biz .bz-route .nd{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 34%,#CFE5FF 62%,#7DB0FF 100%);box-shadow:0 0 5px 2px rgba(170,210,255,.95),0 0 18px 7px rgba(70,130,255,.65)}
#s-biz .bz-route .nd.n1{width:20px;height:20px;margin:-10px 0 0 -10px}

/* LỆNH 53 · ③ "Hai vòng quay": the words over the ring world (the 3D is pb-biz.js, pre-rendered); scene-biz08.js builds them in one 1920 × 1080 layer and hangs them on the
   engine's anchors. Pills in the deck's label language (a dark see-through ground, a 1 px edge); warm = the deciding person, blue = AI, amber = waiting, red-orange = the
   customer's feedback sending the work back. Words ≥ 22 px; only transform and opacity move; will-change only while the layer moves (.mv). */
#s-biz .b8 .bz-navy{width:1920px;height:1080px;opacity:0;visibility:hidden;pointer-events:none;background:#070D1E}
#s-biz .bz-c3{width:1920px;height:1080px;opacity:0;visibility:hidden;pointer-events:none;font-family:"Inter",sans-serif;color:#F4F6FA;font-variant-numeric:tabular-nums}
#s-biz .bz-c3.wm{opacity:1!important;visibility:visible!important}
#s-biz .bz-c3.wm .wg{opacity:.004!important;visibility:visible!important}
#s-biz .bz-c3>*{position:absolute;left:0;top:0}
#s-biz .bz-c3 :is(.bz-lb,.c3-cnt .c3dk,.c3-cnt .c0,.c3-cnt .c3c1,.c3-l2,.c3-sub,.c3-s){will-change:transform,opacity}   /* LỆNH 69: layers for the whole scene (toggling them at a beat's start re-rastered them all then) */
#s-biz .bz-c3 :is(.c3-cnt .c3nb,.c3-cnt .strip,.c3-cnt .c3hl,.c3-cnt .c3s6,.c3-cnt .c3gw,.c3-cnt .c3rp,.c3-s .c3-sc){will-change:transform,opacity}   /* LỆNH 73: every moving part of the counter and of the end strip its own layer: the roll, the flight, the ring and the cells move without a paint (the number never scaled: it keeps its one raster) */
#s-biz .bz-c3.wm .c3-cnt.c3w>*,#s-biz .bz-c3.wm .c3-cnt.c3w .c3nb>*,#s-biz .bz-c3.wm .c3-s.c3w .c3-sc{opacity:1!important;visibility:visible!important}   /* LỆNH 73 · the warm-up's "all" slot (inside the group's .004): every part drawn once */
#s-biz .bz-c3.wm .c3-cnt.c3w .c3rp{transform:none!important}   /* the ring's layer drawn at its largest */
#s-biz .c3-sub{left:160px;top:284px;font-size:24px;font-weight:500;line-height:30px;color:#B8C6DC;white-space:nowrap;opacity:0}
/* LỆNH 54 · THE label of the scene (every beat's words share it: .bz-lb here, .bz-lab / .bz-tk elsewhere take the same ground and edge): a dark translucent pill, a 1,5 px edge, 24 px semibold, white.
   The accent is the edge and the ink only, one meaning each: amber = waiting (only "chờ bàn giao"), red-orange = going back, warm = the human (the core, Duyệt, what he releases), cyan = AI. On the projector (html.proj): a 95 % ground, pure white ink: ≥ 7:1 on any picture. */
#s-biz .bz-lb{padding:4px 16px 6px;border-radius:999px;font:600 24px/30px "Inter",sans-serif;color:#F4F6FA;white-space:nowrap;opacity:0;background:rgba(5,9,18,.84);box-shadow:inset 0 0 0 1.5px rgba(214,224,240,.55)}
#s-biz .bz-lb b{font-weight:800;color:#FFE9C6}
#s-biz .bz-lb i{font-style:normal}
#s-biz .bz-lb.amber{color:#FFD9A0;box-shadow:inset 0 0 0 1.5px rgba(255,170,80,.95)}
#s-biz .bz-lb.red{color:#FFCDB8;box-shadow:inset 0 0 0 1.5px rgba(255,112,72,.95)}
#s-biz .bz-lb.warm{color:#FFEBD0;box-shadow:inset 0 0 0 1.5px rgba(255,200,130,.95)}
#s-biz .bz-lb.ai{color:#D8EAFF;box-shadow:inset 0 0 0 1.5px rgba(110,200,255,.95)}
#s-biz .bz-lab{background:rgba(5,9,18,.84);box-shadow:inset 0 0 0 1.5px rgba(214,224,240,.55)}
html.proj #s-biz :is(.bz-lb,.bz-lab:not(.ai),.bz-tk){background:rgba(2,4,10,.95);color:#FFFFFF}
html.proj #s-biz .bz-lb.amber{color:#FFE2B0}
html.proj #s-biz .bz-lb.red{color:#FFD8C8}
html.proj #s-biz .bz-lb.warm{color:#FFF1DC}
html.proj #s-biz .bz-lb.ai{color:#E6F1FF}
/* LỆNH 69 · the counter = the closing line (scene-biz08.js c3Count): every piece placed by transform from (0,0); sharp ink (warm white, no grey), a soft radial dark under it (≤ .55, no edge) */
#s-biz .c3-cnt{left:0;top:0;width:0;height:0;opacity:0}
#s-biz .c3-cnt>*{position:absolute;left:0;top:0;margin:0}
#s-biz .c3-cnt .c3dk{width:1000px;height:400px;transform-origin:50% 50%;background:radial-gradient(closest-side,rgba(1,4,12,.55),rgba(1,4,12,.42) 45%,rgba(1,4,12,.16) 78%,rgba(1,4,12,0))}
/* LỆNH 71 · ③a's counter hangs on the waiting tower (scene-biz08.js c3Count, placed by transform at the tower's left): no box, a soft dark behind (c3hl); "LẦN CHUYỀN TAY" 16 px caps; the number 96 px; the line at 6 16 px */
#s-biz .c3-cnt .c3hl{width:400px;height:300px;background:radial-gradient(closest-side,rgba(2,5,12,.62),rgba(2,5,12,.44) 50%,rgba(2,5,12,.14) 80%,rgba(2,5,12,0));opacity:0}
#s-biz .c3-cnt .c0{white-space:nowrap;font:700 16px/20px "Inter",sans-serif;letter-spacing:.14em;color:#FFC27A;text-shadow:0 1px 6px rgba(0,0,0,.7)}
#s-biz .c3-cnt .c3s6{white-space:nowrap;font:600 16px/20px "Inter",sans-serif;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.75);opacity:0}
html.proj #s-biz .c3-cnt .c3hl{background:radial-gradient(closest-side,rgba(0,1,5,.78),rgba(0,1,5,.6) 50%,rgba(0,1,5,.2) 80%,rgba(0,1,5,0))} html.proj #s-biz .c3-cnt .c0{color:#FFD6A3} html.proj #s-biz .c3-cnt .c3s6{color:#FFFFFF}
#s-biz .c3-cnt .c3nb{transform-origin:0 0}
#s-biz .c3-cnt .win{position:relative;height:100px;overflow:hidden}
#s-biz .c3-cnt .strip b{display:block;height:100px;font:800 96px/100px "Inter",sans-serif;font-variant-numeric:tabular-nums;color:#FFF6EA;text-shadow:0 0 8px rgba(255,170,90,.35)}
/* LỆNH 73 · the glow and the ring are pre-drawn WebP (the same CSS they replace, rendered by Chrome): only their opacity and scale change (scene-biz08.js c3Count, on the clock;
   the glow's breathing too: the CSS animation .br started a 1,8 s GPU stall); the ring drawn at its largest (2,6 × 140 px, a 5,2 px edge) and scaled down */
#s-biz .c3-cnt .c3gw,#s-biz .c3-cnt .c3rp{position:absolute;left:50%;top:50%;pointer-events:none;background:no-repeat 0 0/100% 100%}
#s-biz .c3-cnt .c3gw{width:240px;height:240px;margin:-120px 0 0 -120px;opacity:0;background-image:url(../img/ui9/c3glow.webp)}
#s-biz .c3-cnt .c3rp{width:364px;height:364px;margin:-182px 0 0 -182px;opacity:0;background-image:url(../img/ui9/c3ring.webp)}
#s-biz .c3-cnt .c3c1{white-space:nowrap;font:600 30px/36px "Inter",sans-serif;color:rgba(255,255,255,.92);opacity:0}
html.proj #s-biz .c3-cnt .c3c1{color:#FFFFFF}
html.proj #s-biz .c3-cnt .c3dk{background:radial-gradient(closest-side,rgba(0,1,5,.55),rgba(0,1,5,.45) 50%,rgba(0,1,5,.18) 80%,rgba(0,1,5,0))}
/* the end line under it */
#s-biz .c3-l2{left:0;top:830px;width:1920px;text-align:center;font-size:32px;font-weight:600;line-height:40px;color:#CFE2FF;opacity:0}
/* the strip: the money · the three systems · on real servers */
#s-biz .c3-s{left:160px;top:880px;width:1600px;height:104px;display:flex;align-items:center;justify-content:center;padding:0 40px;border-radius:22px;opacity:0;visibility:hidden;
  background:linear-gradient(180deg,rgba(20,28,48,.96),rgba(12,18,34,.96));box-shadow:inset 0 0 0 1px rgba(170,200,255,.26),inset 0 1px 0 rgba(224,236,255,.45)}
#s-biz .c3-s>*{position:relative}
#s-biz .c3-sc{display:flex;flex-direction:column;justify-content:center;opacity:0;white-space:nowrap}
#s-biz .c3-sc .big{display:inline-block;align-self:flex-start;padding-bottom:6px;margin-bottom:-6px!important;font-size:46px;font-weight:800;line-height:50px;letter-spacing:-.02em;background:linear-gradient(90deg,#B4D7FF,#5AA0FF 70%,#3F8BFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#s-biz .c3-sc .c3u{margin-top:2px!important;font-size:22px;font-weight:500;line-height:28px;color:#C9D3E2}
#s-biz .c3-sd{flex:none;width:1px;height:60px;margin:0 40px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0))}
#s-biz .c3-sc.b,#s-biz .c3-sc.c{flex-direction:row;align-items:center}
#s-biz .c3-sc.b{gap:22px}
#s-biz .c3-sc .lg{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;color:#F4F7FC}
#s-biz .c3-sc .lg img{display:block;width:40px;height:40px;border-radius:12px;background:#0C1222;padding:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#s-biz .c3-sc .n{margin-left:6px;font-size:26px;font-weight:600;color:#BFDAFF}
#s-biz .c3-sc.c{gap:12px;font-size:24px;font-weight:600;color:#E9EEF6}
#s-biz .c3-sc .dot{display:block;width:12px;height:12px;border-radius:50%;background:#4DA3FF;box-shadow:0 0 0 4px rgba(77,163,255,.2)}
/* LỆNH 50 §A: the pre-rendered clips (nq-vid.js) under the DOM; while one stands in for the 3D the engine's canvas is hidden */
#s-biz .b8 .nq-vid{width:1920px;height:1080px;display:block;opacity:0;visibility:hidden;object-fit:cover;pointer-events:none;background:#0A1428}
#s-biz .b8 .nq-vid.on{opacity:1;visibility:visible}
#s-biz.bz-vmode .b8 .bz-gl{visibility:hidden}
/* LỆNH 50 §C · ④ the customer count (base case, month 24), top right */
#s-biz .bz-cust{opacity:0;visibility:hidden;padding:10px 22px 12px;border-radius:18px;text-align:right;background:rgba(8,12,22,.84);box-shadow:inset 0 0 0 1px rgba(255,196,140,.7)}
#s-biz .bz-cust .k{font:600 30px/36px "Inter",sans-serif;color:#FFEBD8;white-space:nowrap}
#s-biz .bz-cust .k b{font-size:44px;font-weight:800;color:#fff;margin-left:6px;font-variant-numeric:tabular-nums}
#s-biz .bz-cust .s{margin-top:2px!important;font:500 18px/22px "Inter",sans-serif;color:#C9B8A4;white-space:nowrap}
/* LỆNH 50 §C · ④ "≈ 3,5 tháng" sits over the road (trucks drive under it): a dark glass backing */
#s-biz .bz-blk.k4{width:auto;padding:14px 28px 18px;border-radius:20px;background:rgba(8,12,22,.86);box-shadow:inset 0 0 0 1px rgba(170,200,255,.26)}
#s-biz .bz-blk.k4::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:0 solid transparent;border-image:url(../img/ui9/sh9.webp) 64/64px/24px 40px 64px}
/* LỆNH 55 · ③a the question: big in the middle (56 px, a dark plate: it must read on any picture, the veil's white included), then it docks at the beat line's own place (32 px, the plate fades) and its tail ("chỉ 12,8 triệu/tháng?") turns into the line's ("rẻ: không chuyền tay"): the same words "Vì sao" stay */
#s-biz .bz-q{opacity:0;visibility:hidden;white-space:nowrap;transform-origin:0 0;font:600 56px/1.2 "Inter",sans-serif;letter-spacing:-.01em;color:#EAF0F8;will-change:transform,opacity}
#s-biz .bz-q .pl{position:absolute;inset:-14px -34px -18px;border-radius:999px;background:rgba(5,9,18,.86);box-shadow:inset 0 0 0 1.5px rgba(214,224,240,.55)}
#s-biz .bz-q .a,#s-biz .bz-q .t{position:relative}
#s-biz .bz-q .t{display:inline-grid;vertical-align:top}
#s-biz .bz-q .t i{grid-area:1/1;font-style:normal;white-space:nowrap}
#s-biz .bz-q .t2{opacity:0}
html.proj #s-biz .bz-q .pl{background:rgba(2,4,10,.95)}
html.proj #s-biz .bz-chips p{background:rgba(2,4,10,.95);color:#fff}   /* LỆNH 55: the three chips on the projector: a 95 % ground, white ink (≥ 7:1) */

/* LỆNH 56 · the ③ sub line read as grey on the blue glow (owner, 28/10): brighter, heavier, a soft shadow to lift it off the 3D */
#s-biz .c3-sub{color:#E8EEF8;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 8px rgba(2,6,16,.6)}
html.proj #s-biz .c3-sub{color:#FFFFFF}

/* LỆNH 56 · the two-line label (the same bz-lb: a dark pill, a 1,5 px edge, white ink): a bold first line, a 22 px line under it */
#s-biz .bz-lb.two{border-radius:22px;padding:6px 20px 9px;font:700 28px/34px "Inter",sans-serif}
#s-biz .bz-lb.two .h{display:block;color:inherit}
#s-biz .bz-lb.two small{display:block;margin-top:2px;font:500 22px/28px "Inter",sans-serif;color:#D4DEEE}
#s-biz .bz-lb.two small b{font-weight:700;color:#FFE9C6}
#s-biz .bz-lb.tier.warm .h{color:#FFEBD0}
#s-biz .bz-lb.tier.ai .h{color:#E3F0FF}
html.proj #s-biz .bz-lb.two small{color:#F2F6FC}
/* LỆNH 56 · ③ the small label over the beat line ("Cách chúng tôi làm phần mềm"); the beat line steps down to make room */
#s-biz .head .bz-kick{position:absolute;left:0;top:100%;margin:12px 0 0;opacity:0;white-space:nowrap;font:600 22px/28px "Inter",sans-serif;letter-spacing:.02em;color:#9FC6FF;will-change:opacity,transform}
html.proj #s-biz .head .bz-kick{color:#C9E0FF}
#s-biz .head .bz-sub.k3{margin-top:48px}
/* LỆNH 71 · ④ the three tiers over the bottom (scene-biz08.js E.tl): no box, no edge. A 2 px line, the way gone filled warm → cyan up to the node being said, the point of light running with
   the camera; 10 px dots (the one being said breathes, 2 s); under each its number, its label (22 px bold, .08em) and one line (21 px). Being said: 100 %, in its accent (warm 1–2,
   cyan 3); gone by: label 85 %, line 80 %; still to come: only its dot and number. The ground: a gradient up from the bottom, 200 px, .72 → 0 (no hard edge). At a small screen
   (bz-sm: 1366 is .71) 23 px, so none is under 16 px */
#s-biz .bz-tlbg{position:absolute;left:0;top:880px;width:1920px;height:200px;background:linear-gradient(to top,rgba(4,8,16,.72) 0,rgba(4,8,16,.68) 40%,rgba(4,8,16,.4) 70%,rgba(4,8,16,0) 100%);opacity:0;visibility:hidden;pointer-events:none}
#s-biz .bz-tl{position:absolute;left:0;top:0;width:1640px;height:84px;opacity:0;visibility:hidden;pointer-events:none;font-variant-numeric:tabular-nums}
#s-biz .bz-tl .ln{position:absolute;left:0;top:-1px;width:100%;height:2px;border-radius:1px;background:rgba(214,224,240,.34)}
#s-biz .bz-tl .ln.f{background:linear-gradient(90deg,#FFC27A 0,#FFC98A 50%,#7FD3FF 100%);clip-path:inset(0 100% 0 0)}
#s-biz .bz-tl .pt{position:absolute;left:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:#FFF0DC;box-shadow:0 0 0 3px rgba(255,200,130,.18),0 0 8px 4px rgba(255,186,100,.7);will-change:transform}
#s-biz .bz-tl .pt .pb{position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 8px 5px rgba(255,190,110,.55);opacity:0;will-change:transform,opacity}   /* LỆNH 73: the closing rest's breathing (was the CSS animation bzTlBr) driven on the clock by scene-biz08.js; .6 still when calm */
#s-biz .bz-tl .nd{position:absolute;top:0;white-space:nowrap}
#s-biz .bz-tl .nd.n1{left:0;text-align:left}
#s-biz .bz-tl .nd.n2{left:50%;transform:translateX(-50%);text-align:center}
#s-biz .bz-tl .nd.n3{right:0;text-align:right}
#s-biz .bz-tl .nd::before{content:"";position:absolute;left:-56px;right:-56px;top:4px;height:84px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(2,5,12,.74),rgba(2,5,12,.46) 60%,rgba(2,5,12,0))}
#s-biz .bz-tl .nd.past .lb{color:#FFDDB6}   /* a tier gone by: a lighter warm, so its 85 % still reads ≥ 7:1 over the globe's limb */   /* a soft dark under each tier's words (the globe's bright limb sits behind tier 1 in the closing frame) */
#s-biz .bz-tl .k{position:absolute;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0A1222;box-shadow:inset 0 0 0 1.5px rgba(214,224,240,.6);transition:background .3s,box-shadow .3s}
#s-biz .bz-tl .n1 .k{left:0}
#s-biz .bz-tl .n2 .k{left:50%}
#s-biz .bz-tl .n3 .k{left:100%}
#s-biz .bz-tl .nd.act .k,#s-biz .bz-tl .nd.past .k{background:#FFC98A;box-shadow:0 0 0 3px rgba(255,201,138,.18)}
#s-biz .bz-tl .nd.ai.act .k,#s-biz .bz-tl .nd.ai.past .k{background:#7FD3FF;box-shadow:0 0 0 3px rgba(127,211,255,.2)}
#s-biz .bz-tl .nd.act .k::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,201,138,.75),0 0 10px 2px rgba(255,186,110,.45);animation:bzTlK 2s ease-in-out infinite}
#s-biz .bz-tl .nd.ai.act .k::after{box-shadow:0 0 0 2px rgba(127,211,255,.75),0 0 10px 2px rgba(110,200,255,.45)}
@keyframes bzTlK{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
body.safe #s-biz .bz-tl .nd.act .k::after,body.calm #s-biz .bz-tl .nd.act .k::after{animation:none;opacity:.7}
#s-biz .bz-tl .lb{margin:16px 0 0;font:700 22px/28px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#FFC98A;text-shadow:0 1px 6px rgba(0,0,0,.65)}
#s-biz .bz-tl .lb .nu{font-weight:800;margin-right:.6em;opacity:0;color:#DCE4F0}
#s-biz .bz-tl .nd.act .nu,#s-biz .bz-tl .nd.past .nu{color:inherit}
#s-biz .bz-tl .lb .lw{display:inline-block;opacity:0}
#s-biz .bz-tl .ai .lb{color:#7FD3FF}
#s-biz .bz-tl .tx{margin:4px 0 0;font:500 21px/28px "Inter",sans-serif;color:#F4F7FB;opacity:0;text-shadow:0 1px 6px rgba(0,0,0,.65)}
#s-biz .bz-tl .mo{position:absolute;left:0;right:0;top:48px;margin:0;text-align:center;font:500 21px/28px "Inter",sans-serif;color:#F4F7FB;opacity:0;text-shadow:0 1px 6px rgba(0,0,0,.65)}
#s-biz .bz-tl .mo b{font-weight:700;color:#FFC98A}
#s-biz.bz-sm .bz-tl .lb{margin-top:14px;font-size:23px;line-height:28px}
#s-biz.bz-sm .bz-tl .tx,#s-biz.bz-sm .bz-tl .mo{font-size:23px;line-height:28px}
#s-biz.bz-sm .bz-tl .mo{top:46px}
html.proj #s-biz .bz-tlbg{background:linear-gradient(to top,rgba(0,1,5,.92) 0,rgba(0,1,5,.86) 45%,rgba(0,1,5,.5) 75%,rgba(0,1,5,0) 100%)}
html.proj #s-biz .bz-tl .lb{color:#FFDDB4}
html.proj #s-biz .bz-tl .ai .lb{color:#B5E6FF}
html.proj #s-biz .bz-tl .tx,html.proj #s-biz .bz-tl .mo{color:#FFFFFF}
/* LỆNH 57 · the room's label in the closer: the panel's glass and thin edge */
#s-biz .bz-lb.glass{color:#FFEBD0;background:rgba(6,10,20,.82);box-shadow:inset 0 0 0 1px rgba(214,224,240,.24)}
html.proj #s-biz .bz-lb.glass{color:#FFF1DC;background:rgba(2,4,10,.95)}
/* LỆNH 58 · ④ the map's legend: no box, a hairline over two rows, small type, tabular figures, a sample dot each (the market's pale night light, the lamps' gold); rows fade in, no slide */
#s-biz .bz-lg{position:absolute;left:0;top:0;width:420px;padding-top:10px;opacity:0;visibility:hidden;font:500 19px/27px "Inter",sans-serif;font-variant-numeric:tabular-nums;color:#D3DCEA}
#s-biz .bz-lg .ln{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(214,224,240,.38);opacity:0}
#s-biz .bz-lg .r{margin:0;opacity:0;white-space:nowrap}
#s-biz .bz-lg .d{display:inline-block;width:9px;height:9px;margin:0 12px 1px 2px;border-radius:50%;vertical-align:middle}
#s-biz .bz-lg .d.m{background:#F2DEC0;box-shadow:0 0 6px 1px rgba(255,226,186,.55);opacity:.8}
#s-biz .bz-lg .d.g{background:#FFC867;box-shadow:0 0 8px 2px rgba(255,186,80,.85)}
html.proj #s-biz .bz-lg{color:#FFFFFF}
/* LỆNH 59 · 10 → 11: 10 stays whole while its exit plays (bz-push, app.js bizPush), its title band goes with the words (bz-xit); 11 waits unseen (fn-wait), then fades in over it */
#s-biz.bz-push{opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important}
#s-biz.bz-xit .head{opacity:0;transition:opacity .25s var(--io)}
#s-final.fn-wait{opacity:0!important;transform:none!important;transition:none!important}
/* LỆNH 66 · the globe's one label: plain words on a soft dark halo (no pill, no leader), 24 px semibold; tier 1 white-blue, the islands pale, the shipment gold, the risk forecast blue */
#s-biz .bz-gw{position:absolute;left:0;top:0;margin:0;opacity:0;visibility:hidden;white-space:nowrap;pointer-events:none;font:600 24px/30px "Inter",sans-serif;color:#E8EEF6;text-shadow:0 0 3px rgba(0,2,8,.95),0 0 8px rgba(0,2,8,.85),0 1px 2px #000;will-change:transform}
#s-biz .bz-gw span{display:inline-block;opacity:0;will-change:opacity,transform}
#s-biz .bz-gw.t1{color:#CFE8FF} #s-biz .bz-gw.t2{color:#FFC98A} #s-biz .bz-gw.t3{color:#7FD3FF}
html.proj #s-biz .bz-gw{color:#FFFFFF} html.proj #s-biz .bz-gw.t1{color:#E4F2FF} html.proj #s-biz .bz-gw.t2{color:#FFDDB4} html.proj #s-biz .bz-gw.t3{color:#B5E6FF}
#s-biz .bz-lg{width:490px;font-size:24px;line-height:32px}
/* LỆNH 66 · 10 → 11: the title goes with the words, fading and sinking 6 px in 250 ms; 11 comes on at once over the clip's last frame (fn-now: no fade), or in 400 ms when the clip could not play (fn-soft) */
#s-biz.bz-xit .head{transform:translateY(6px);transition:opacity .25s var(--io),transform .25s var(--io)}
#s-final.fn-now{transition:none!important}
#s-final.fn-soft{transition:opacity .4s var(--io),visibility 0s!important}
#s-final.fn-blend{transition:opacity .12s linear,visibility 0s!important}   /* LỆNH 67: 11 comes in over the clip's last 0,3 s, which are 11's own first frames */
/* LỆNH 67 · the journey card: a dark glass HUD by the box on a fine line; its lines come as the shipment goes; "Tầm nhìn" at its corner */
/* LỆNH 69 · the journey card: opaque dark glass (no backdrop-filter), a 1 px edge, radius 14; 20 px title, 18 px steps, 15 px notes, a still amber chip; the steps on a rail whose fill is the box's progress */
#s-biz .bz-jc{position:absolute;left:0;top:0;box-sizing:border-box;width:420px;padding:15px 18px 14px;border-radius:14px;border:0 solid transparent;border-image:url(../img/ui9/jc9.webp) 64 fill/32px/12px;opacity:0;visibility:hidden;pointer-events:none;font-family:"Inter",sans-serif;color:#F2F6FB;white-space:nowrap;will-change:transform,opacity}   /* LỆNH 73: its ground (the .86 glass, the 1 px edge, the 4 px 8 px shadow) a pre-drawn 9-slice WebP: nothing blurred at its first raster */
#s-biz .bz-jc.jcw{opacity:.004!important;visibility:visible!important} #s-biz .bz-jc.jcw .r{opacity:1!important}   /* LỆNH 73 · drawn once ahead (scene-biz08.js warmC3 "jc") */
#s-biz .bz-jc>*{margin:0}
#s-biz .bz-jc .jh{font:600 15px/20px "Inter",sans-serif;letter-spacing:.08em;color:#B9C7DA}
#s-biz .bz-jc .jt2{margin-top:2px;font:600 20px/26px "Inter",sans-serif;color:#F4F7FC}
#s-biz .bz-jc .jhr{display:block;height:1px;margin:11px 0 9px;background:rgba(200,220,255,.14)}
#s-biz .bz-jc .jrw{position:relative;padding-left:32px}
#s-biz .bz-jc .jrl,#s-biz .bz-jc .jrf{position:absolute;left:10px;top:17px;bottom:17px;width:2px;border-radius:1px}
#s-biz .bz-jc .jrl{background:rgba(200,220,255,.16)}
#s-biz .bz-jc .jrf{background:linear-gradient(180deg,#FFC98A 0,#7FD3FF 55%,#FFB45A 100%);transform-origin:50% 0;transform:scaleY(0);will-change:transform}
#s-biz .bz-jc .r{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:4px 0;opacity:0;will-change:opacity,transform}
#s-biz .bz-jc .r b{font:600 18px/26px "Inter",sans-serif;color:#F2F6FB}
#s-biz .bz-jc .r em{font:500 15px/26px "Inter",sans-serif;font-style:normal;color:#C3CFDF;text-align:right}
#s-biz .bz-jc .r.w b{color:#FFD49E}
#s-biz .bz-jc .jk{position:absolute;left:-32px;top:7px;width:22px;height:22px;border-radius:50%;background:#0A111F;display:flex;align-items:center;justify-content:center}
#s-biz .bz-jc .jk svg{display:block;width:18px;height:18px;overflow:visible}
#s-biz .bz-jc .jck{fill:none;stroke:#FFD7A6;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#s-biz .bz-jc .jdt{display:block;width:10px;height:10px;border-radius:50%;background:#6E7B8F;will-change:transform}
#s-biz .bz-jc .jdt.on{background:#7FD3FF;box-shadow:0 0 6px 1px rgba(127,211,255,.75)}
#s-biz .bz-jc .jtr{fill:rgba(255,180,90,.28);stroke:#FFB45A;stroke-width:1.8;stroke-linejoin:round}
#s-biz .bz-jc .vz{display:inline-block;padding:3px 10px 4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,180,90,.6);font:600 14px/18px "Inter",sans-serif;color:#FFD7A6}
#s-biz.bz-sm .bz-jc{width:478px;padding:18px 20px 16px}
#s-biz.bz-sm .bz-jc .jh{font-size:20px;line-height:26px}
#s-biz.bz-sm .bz-jc .jt2{font-size:24px;line-height:30px}
#s-biz.bz-sm .bz-jc .jrw{padding-left:36px}
#s-biz.bz-sm .bz-jc .r{grid-template-columns:1fr;padding:5px 0}
#s-biz.bz-sm .bz-jc .r b{font-size:22px;line-height:26px}
#s-biz.bz-sm .bz-jc .r em{font-size:20px;line-height:24px;text-align:left}
#s-biz.bz-sm .bz-jc .jk{left:-36px;top:8px;width:26px;height:26px}
#s-biz.bz-sm .bz-jc .jrl,#s-biz.bz-sm .bz-jc .jrf{left:12px;top:21px;bottom:40px}
#s-biz.bz-sm .bz-jc .vz{font-size:20px;line-height:26px;padding:3px 12px 4px}
#s-biz .bz-svg .bz-jtl{fill:none;stroke:rgba(214,228,250,.7);stroke-width:1;opacity:0}
#s-biz .bz-svg .bz-jtd{fill:#FFE6C8;opacity:0}
#s-biz .bz-svg .bz-jkl{fill:none;stroke:#FFB45A;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;opacity:0}
html.proj #s-biz .bz-jc{border-image-source:url(../img/ui9/jc9p.webp)} html.proj #s-biz .bz-jc .jh,html.proj #s-biz .bz-jc .r em{color:#E2EAF5} html.proj #s-biz .bz-jc .jt2,html.proj #s-biz .bz-jc .r b{color:#FFFFFF} html.proj #s-biz .bz-jc .r.w b{color:#FFE0B8}