/* Scene upgrade (21/10): biz — layout and looks on top of the shared material (up-material.css).
   08 "Thương mại" on 02's real screen: one dark desktop, the product's pricing page (beat 1), a spreadsheet "Kinh tế đơn vị" with its
   break-even chart (beat 2), the plan document and an amber checklist (beat 3). Motion lives in up-biz.js (one clock, transform /
   opacity, the chart lines draw with stroke-dashoffset); this file holds the end frame. Text ≥ 20 px. */

/* the approved layout of the old version stays in the markup; this version replaces its parts */
#s-biz>:is(.bv-sme,.bz-plans,.fs,.fs-l,.fs-in,.fs-be,.fb-tag,.fb-val,.fb-end){display:none!important}

#s-biz .bq{position:absolute;inset:0;pointer-events:none}
#s-biz .bq svg{fill:none;stroke:currentColor}
#s-biz .bq-cam{position:absolute;inset:0;transform-origin:960px 600px;will-change:transform}
#s-biz .bq-sent{position:absolute;left:130px;top:1000px;width:1px;height:1px;opacity:.02;background:#0B111E}

/* ---------------- the desktop (02's wall, as in 04) ---------------- */
#s-biz .bq-desk{position:absolute;left:120px;top:224px;width:1680px;height:742px;border-radius:18px;overflow:hidden;background:
  radial-gradient(1100px 700px at 18% 12%,rgba(120,150,210,.17),rgba(120,150,210,0) 70%),
  radial-gradient(1200px 800px at 86% 96%,rgba(70,96,160,.15),rgba(70,96,160,0) 70%),
  linear-gradient(160deg,#25365A 0,#1A2846 45%,#131E36 100%);
  box-shadow:inset 0 0 0 10px #0B111E,inset 0 0 0 12px rgba(160,180,215,.18),0 50px 110px -40px rgba(0,0,0,.85)}
#s-biz .bq-desk::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 48%,rgba(4,10,30,0) 55%,rgba(4,10,30,.45) 100%)}
#s-biz .bq-glass{position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(255,196,128,.08) 0,rgba(255,196,128,.03) 24%,rgba(255,196,128,0) 42%),
  linear-gradient(118deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.025) 64%,rgba(255,255,255,0) 70%)}

/* ---------------- windows: a holder that moves, a far shadow while lifted, the window ---------------- */
#s-biz .bq-w{position:absolute;will-change:transform,opacity;transform-origin:50% 40%}
#s-biz .bq-w>.nq-win{position:relative;width:100%;height:100%}
#s-biz .bq-lift{position:absolute;inset:6px;border-radius:14px;opacity:0;box-shadow:0 34px 48px -16px rgba(0,0,0,.62)}
#s-biz .bq-w.w1{left:150px;top:252px;width:520px;height:692px}
#s-biz .bq-w.w2{left:700px;top:252px;width:1070px;height:472px}
#s-biz .bq-w.w3{left:700px;top:746px;width:520px;height:198px}
#s-biz .bq-w.w4{left:1250px;top:746px;width:520px;height:198px}
#s-biz .nq-veil{z-index:5}
#s-biz .bq-w>.nq-win>.nq-tb{background-color:#E1E6ED}

/* ---------------- 1 · the pricing page (the product, night mode) ---------------- */
#s-biz .bq-price{background:#0F1A33}
#s-biz .bq-app{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;box-sizing:border-box;background:#101C38 linear-gradient(#17284B,#101C38);border-bottom:1px solid rgba(127,176,255,.3)}
#s-biz .bq-app>i{width:12px;height:12px;border-radius:50%;background:#4A5B7D;flex:none}
#s-biz .bq-mk{width:22px;height:23px;margin-left:12px;flex:none}
#s-biz .bq-app>b{margin-left:4px;font-size:23px;font-weight:700;color:#F2F6FD;letter-spacing:-.01em}
#s-biz .bq-app>b em{font-style:normal;color:#9CC3FF}
#s-biz .bq-app>span{margin-left:auto;padding:2px 12px 4px;border-radius:8px;font-size:20.6px;font-weight:600;color:#DCE6F7;background:#22355F}
#s-biz .bq-pb{padding:18px 22px 0}
#s-biz .bq-lead{margin:0}
#s-biz .bq-lead b{display:block;font-size:27px;font-weight:700;letter-spacing:-.01em;color:#F2F6FD}
#s-biz .bq-lead span{display:block;margin-top:2px;font-size:20.6px;color:#A9BCE2}
#s-biz .bq-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
#s-biz .bq-plan{position:relative;padding:12px 10px 10px;border-radius:12px;background:#15244A;box-shadow:inset 0 0 0 1px rgba(127,176,255,.26),0 10px 22px -12px rgba(0,0,0,.7)}
#s-biz .bq-plan.p1{background:#1A2D5C;box-shadow:inset 0 0 0 2px #6E9EF5,0 0 0 4px rgba(47,107,224,.18),0 14px 28px -12px rgba(0,0,0,.75)}
#s-biz .bq-plan header{display:flex;align-items:center;gap:8px;height:30px}
#s-biz .bq-plan header b{font-size:24px;font-weight:700;color:#F2F6FD}
#s-biz .bq-plan header em{position:absolute;right:12px;top:-14px;padding:0 10px 2px;border-radius:999px;line-height:26px;font-style:normal;font-size:20.6px;font-weight:700;color:#FFFFFF;background:#2F6BE0;box-shadow:0 0 0 3px #0F1A33,0 4px 10px rgba(0,0,0,.5)}
#s-biz .bq-pr{margin:10px 0 0;font-size:44px;font-weight:700;letter-spacing:-.025em;line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
#s-biz .bq-un{margin:6px 0 0;font-size:20.6px;letter-spacing:-.012em;white-space:nowrap;color:#A9BCE2}
#s-biz .bq-plan ul{margin:10px 0 0;padding:6px 0 0;border-top:1px solid rgba(142,163,192,.28);list-style:none}
#s-biz .bq-plan li{display:flex;gap:8px;padding:2px 0;font-size:20.6px;line-height:1.28;color:#D7E2F3}
#s-biz .bq-plan li i{flex:none;width:20px;height:20px;margin-top:2px;color:#8FBAFF}
#s-biz .bq-plan li svg{width:20px;height:20px;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#s-biz .bq-plan li path{stroke-dasharray:1 1;stroke-dashoffset:0}
#s-biz .bq-who{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(142,163,192,.22)}
#s-biz .bq-who p{margin:0}
#s-biz .bq-who span{display:block;font-size:20.6px;color:#93A8C8}
#s-biz .bq-who b{display:block;margin-top:2px;font-size:23px;font-weight:700;color:#F2F6FD}
#s-biz .bq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px}
#s-biz .bq-foot p{margin:0;padding:3px 14px 5px;border-radius:999px;font-size:20.6px;white-space:nowrap}
#s-biz .bq-pilot{color:#D3DEEF;background:#1A2A4F;box-shadow:inset 0 0 0 1px rgba(142,163,192,.4)}
#s-biz .bq-honest{font-weight:700;color:#2A1800;background:#FFC46B;box-shadow:0 0 0 3px rgba(240,166,58,.25)}

/* ---------------- 2 · the spreadsheet ---------------- */
#s-biz .bq-sheet{background:#FFFFFF;display:flex;flex-direction:column}
#s-biz .bq-fx{display:flex;align-items:center;height:40px;flex:none;border-bottom:1px solid #D3DAE5;background:#FFFFFF}
#s-biz .bq-nm{width:200px;box-sizing:border-box;padding:0 12px;font-size:20.6px;color:#253042;border-right:1px solid #D3DAE5;line-height:40px;white-space:nowrap;overflow:hidden}
#s-biz .bq-fx>i{padding:0 14px;font:italic 600 20px/40px Georgia,serif;color:#5B6778;border-right:1px solid #E3E8EF}
#s-biz .bq-fv{padding:0 14px;font-family:var(--nq-mono);font-size:20.6px;color:#18212F;white-space:nowrap}
#s-biz .bq-cols{display:flex;height:30px;flex:none;background:#EEF1F5;border-bottom:1px solid #C9D1DC}
#s-biz .bq-cols>*{box-sizing:border-box;border-right:1px solid #D3DAE5;font-size:21px;font-weight:500;line-height:30px;text-align:center;color:#4A5568}
#s-biz .bq-cols>i{width:36px;flex:none}
#s-biz .bq-cols .ca{width:384px;flex:none}#s-biz .bq-cols .cb{width:184px;flex:none}#s-biz .bq-cols>b:not(.ca):not(.cb){flex:1}
#s-biz .bq-cols .cb{background:#DCE6F8;color:#1E3F86}
#s-biz .bq-grid{position:relative;height:320px;flex:none;background:#FFFFFF}
#s-biz .bq-r{display:flex;height:64px;box-sizing:border-box;border-bottom:1px solid #E3E8EF;
  background-image:repeating-linear-gradient(90deg,transparent 0 113px,#E3E8EF 113px 114px);background-position:604px 0;background-repeat:no-repeat;background-size:100% 100%}
#s-biz .bq-r>i{width:36px;flex:none;box-sizing:border-box;background:#EEF1F5;border-right:1px solid #C9D1DC}
#s-biz .bq-r .la{width:384px;flex:none;box-sizing:border-box;margin:0;padding:0 14px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-right:1px solid #E3E8EF;font-size:22px;line-height:1.2;color:#18212F;white-space:nowrap}
#s-biz .bq-r .la small{font-size:20.6px;color:#4F5B6C}
#s-biz .bq-r .la em{display:block;margin-top:3px;font-style:normal;font-size:20.6px;color:#4F5B6C}
#s-biz .bq-r:nth-child(4) .la em{color:#8A5300}
#s-biz .bq-r .va{position:relative;width:184px;flex:none;box-sizing:border-box;margin:0;padding:0 14px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;
  border-right:1px solid #E3E8EF;font-family:var(--nq-mono);font-size:22px;font-weight:600;color:#18212F;white-space:nowrap;background:#FFFFFF}
#s-biz .bq-r .va span{transform-origin:100% 50%}
#s-biz .bq-r.sum .la{font-weight:700}
#s-biz .bq-r.sum .va{font-weight:700;box-shadow:inset 0 2px 0 #18212F}
#s-biz .bq-r.be .la{font-weight:700;color:#173A87}
#s-biz .bq-r.be .va{font-weight:700;color:#173A87;background:#EAF1FE}
/* the active cell: a blue frame with its fill handle; it walks down the B column as the values are typed */
#s-biz .bq-sel{position:absolute;left:418px;top:-1px;width:186px;height:66px;box-sizing:border-box;border:3px solid #2F6BE0;border-radius:2px;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.8),0 2px 8px rgba(47,107,224,.3)}
#s-biz .bq-sel::after{content:"";position:absolute;right:-6px;bottom:-6px;width:9px;height:9px;background:#2F6BE0;border:2px solid #fff}
#s-biz .bq-caret{display:inline-block;width:2px;height:24px;margin-left:-10px;background:#18212F;opacity:0}
#s-biz .bq-tabs{display:flex;align-items:flex-end;gap:2px;height:38px;flex:none;padding:0 0 0 36px;background:#E9EDF2;border-top:1px solid #C9D1DC}
#s-biz .bq-tabs span{padding:0 18px;height:32px;line-height:30px;font-size:21px;color:#3E4C62;border-radius:0 0 6px 6px}
#s-biz .bq-tabs span.on{align-self:flex-start;height:34px;background:#FFFFFF;color:#173A87;font-weight:700;box-shadow:inset 0 -3px 0 #2F6BE0}

/* the chart object, floating over the empty columns */
#s-biz .bq-chart{position:absolute;left:618px;top:10px;width:438px;height:298px;box-sizing:border-box;padding:10px 14px 0 18px;z-index:2;background:#FFFFFF;border-radius:4px;
  box-shadow:0 0 0 1px #C3CCD8,0 2px 3px rgba(20,32,56,.12),0 12px 24px -10px rgba(20,32,56,.35)}
#s-biz .bq-ct{margin:0 0 8px;font-size:21px;font-weight:700;color:#253042}
#s-biz .bq-plot{position:relative;width:400px;height:190px}
#s-biz .bq-plot svg{position:absolute;left:0;top:0;overflow:visible}
#s-biz .bq-plot .gl{stroke:#EDF0F4;stroke-width:1}
#s-biz .bq-plot .ax{stroke:#8A96A8;stroke-width:1.5}
#s-biz .bq-plot .tk{stroke:#8A96A8;stroke-width:1.5}
#s-biz .bq-plot :is(.fx,.vg,.cl){stroke-dasharray:1 1;stroke-dashoffset:0;stroke-linecap:butt}
#s-biz .bq-plot .fx{stroke:#5B6778;stroke-width:3}
#s-biz .bq-plot .vg{stroke:#2F6BE0;stroke-width:2;opacity:.6}
#s-biz .bq-plot .cl.u{stroke:rgba(47,107,224,.22);stroke-width:11}
#s-biz .bq-plot .cl.l{stroke:#2F6BE0;stroke-width:3.5}
#s-biz .bq-band{position:absolute;left:145.5px;width:218.2px;top:0;height:190px;background:rgba(240,166,58,.13);box-shadow:inset 1px 0 0 rgba(200,130,30,.55),inset -1px 0 0 rgba(200,130,30,.55)}
#s-biz .bq-be{position:absolute;width:0;height:0;z-index:2}
#s-biz .bq-be>i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#2F6BE0;box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px rgba(47,107,224,.3),0 4px 10px rgba(20,40,90,.45)}
#s-biz .bq-plot p{position:absolute;margin:0;font-size:20.6px;line-height:24px;white-space:nowrap}
#s-biz .bq-lf{left:8px;top:72px;font-weight:600;color:#3E4C62}
#s-biz .bq-lc{left:160px;top:20px;font-weight:600;color:#1F4FB8}
#s-biz .bq-co{left:8px;top:4px;display:flex;align-items:center;gap:8px}
#s-biz .bq-co b{font-size:46px;font-weight:800;line-height:1;color:#1F4FB8;letter-spacing:-.02em}
#s-biz .bq-co span{font-size:20.6px;line-height:22px;font-weight:700;color:#173A87}
#s-biz .bq-lb{left:226px;top:158px;font-weight:600;color:#8A5300}
#s-biz .bq-xa{position:relative;width:400px;height:30px;margin:4px 0 0}
#s-biz .bq-xa span{position:absolute;top:0;transform:translateX(-50%);font-size:21px;line-height:26px;font-weight:600;color:#3E4C62}
#s-biz .bq-xa span.x6{color:#1F4FB8;font-weight:800}
#s-biz .bq-xa em{position:absolute;left:0;top:0;font-style:normal;font-size:21px;line-height:26px;color:#4F5B6C}

/* ---------------- 3 · the plan document and the checklist ---------------- */
#s-biz .bq-pdf{background:#3A414D;display:flex;flex-direction:column}
#s-biz .bq-view{flex:1;overflow:hidden;padding:12px 0 0;background:#3A414D}
#s-biz .bq-page{width:456px;height:220px;margin:0 auto;box-sizing:border-box;padding:12px 24px;background-color:#FBF8F2;border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.3),0 6px 14px -4px rgba(0,0,0,.55)}
#s-biz .bq-page p{margin:0}
#s-biz .bq-ph{font-size:20.6px;font-weight:600;color:#4F5B6C;padding-bottom:6px;border-bottom:1px solid #D9D3C6}
#s-biz .bq-pl{margin-top:8px!important;font-size:22px;color:#18212F}
#s-biz .bq-pv{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#18212F}
#s-biz .bq-pv small{font-size:24px;font-weight:600;color:#3E4C62;letter-spacing:0}
#s-biz .bq-note{width:100%;height:100%;box-sizing:border-box;padding:16px 22px;border-radius:12px;background:#1A1208;color:#FFD9A0;
  box-shadow:inset 0 0 0 2px rgba(240,166,58,.75),0 2px 3px rgba(0,0,0,.45),0 18px 34px -12px rgba(0,0,0,.7),0 44px 70px -30px rgba(0,0,0,.6)}
#s-biz .bq-note b{display:block;font-size:24px;font-weight:700;color:#FFD9A0}
#s-biz .bq-note ul{margin:10px 0 0;padding:0;list-style:none}
#s-biz .bq-note li{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:21px;color:#F4E8D4}
#s-biz .bq-note li i{flex:none;width:20px;height:20px;box-sizing:border-box;border:2px solid #F0A63A;border-radius:4px}

/* 08 drawn once, invisibly, while 07 holds still (up-biz.js warm): its first frames are not a cold raster */
#s-biz.bq-pre:not(.active){visibility:visible!important;opacity:.004!important;transition:none!important}