/* Scene 09 · business model & financial viability. #s-biz[data-k]:
   1 who pays: Forwarder SME, users vs payer, proposed subscription
   2 the engine: subscriptions flow into recurring revenue; cost to serve (COGS) → contribution margin → sustaining costs (R&D · S&M · G&A) → break-even "?"
     (schematic heights, no figures; categories follow the finance sheet "05 · Danh mục phí")
   3 what must be validated before calling the model viable. */
#s-biz svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 1 · customer card */
#s-biz .bv-sme{position:absolute;left:160px;top:300px;width:400px;box-sizing:border-box;padding:26px 28px 22px;border-radius:24px;background:linear-gradient(180deg,rgba(22,40,80,.9),rgba(12,24,52,.9));border:1.5px solid rgba(127,176,255,.36);box-shadow:0 30px 70px -30px rgba(0,0,0,.8);opacity:0;transform:translateX(-24px);transition:opacity .6s var(--out),transform .9s var(--out)}
#s-biz:not([data-k="0"]) .bv-sme{opacity:1;transform:none;transition-delay:.2s}
#s-biz .bv-sme header{display:flex;align-items:center;gap:16px}
#s-biz .bv-sme header .bv-ti{flex:none;width:58px;height:58px;margin:0;border-radius:16px;display:grid;place-items:center;color:#CFE0FF;background:radial-gradient(circle at 35% 30%,rgba(127,176,255,.45),rgba(42,99,230,.14));box-shadow:inset 0 0 0 1.5px rgba(156,195,255,.6),0 0 24px rgba(127,176,255,.3)}
#s-biz .bv-ti svg{width:32px;height:32px}
#s-biz .bv-sme header b{display:block;font-size:30px;font-weight:700;color:var(--white)}
#s-biz .bv-sme header div span{display:block;margin-top:2px;font-size:17px;color:var(--steel)}
#s-biz .bv-role{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin:14px 0 0}
#s-biz .bv-role i{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(127,176,255,.12);color:#AFCBFF}
#s-biz .bv-role i svg{width:20px;height:20px}
#s-biz .bv-role span{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8EA3C0}
#s-biz .bv-role b{font-size:19px;font-weight:600;color:var(--white)}
#s-biz .bv-price{margin-top:18px;padding-top:16px;border-top:1px solid rgba(142,163,192,.2);display:grid;grid-template-columns:1fr 1fr;gap:10px}
#s-biz .bv-price p{margin:0;padding:12px 14px;border-radius:14px;background:rgba(127,176,255,.08);box-shadow:inset 0 0 0 1px rgba(127,176,255,.25)}
#s-biz .bv-price p:nth-child(2){background:rgba(42,99,230,.3);box-shadow:inset 0 0 0 1.5px rgba(156,195,255,.55)}
#s-biz .bv-price b{display:block;font-size:16px;font-weight:600;color:#AFC6EA}
#s-biz .bv-price strong{display:block;margin-top:2px;font-size:36px;font-weight:700;letter-spacing:-.02em;color:var(--white)}
#s-biz .bv-price small{grid-column:1/-1;font-size:14px;line-height:1.35;color:var(--amber)}
/* 2 · the bridge */
@keyframes fbQ{0%,100%{box-shadow:0 0 0 0 rgba(240,166,58,0)}50%{box-shadow:0 0 0 8px rgba(240,166,58,.18)}}
/* 3 · validation */
#s-biz .fb-val{position:absolute;left:160px;right:160px;top:820px;display:flex;align-items:center;gap:16px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--out)}
#s-biz .fb-vlab{margin:0 8px 0 0;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
#s-biz .fb-val p:not(.fb-vlab){display:flex;align-items:center;gap:10px;margin:0;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(240,166,58,.08);box-shadow:inset 0 0 0 1.5px rgba(240,166,58,.45);font-size:19px;font-weight:600;color:var(--white);white-space:nowrap}
#s-biz .fb-val i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(240,166,58,.18);color:#FFD08A}
#s-biz .fb-val i svg{width:19px;height:19px}
#s-biz[data-k="3"] .fb-val{opacity:1;transform:none;transition-delay:.3s}
#s-biz .fb-end{position:absolute;left:160px;right:160px;top:905px;margin:0;text-align:center;font-size:40px;font-weight:600;letter-spacing:-.015em;color:var(--white);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .8s var(--out)}
#s-biz .fb-end b{color:#8FBAFF}
#s-biz[data-k="3"] .fb-end{opacity:1;transform:none;transition-delay:1.2s}
#s-biz[data-k="3"] .bv-sme{opacity:.55}
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-biz *{animation:none!important;transition:none!important}

/* ---- 1b · plan cards (beat 1), folding into the revenue bar on beat 2 ---- */
#s-biz .bz-plans{position:absolute;inset:0;pointer-events:none}
#s-biz .bz-tier{position:absolute;bottom:300px;width:340px;box-sizing:border-box;padding:22px 24px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(22,40,80,.94),rgba(12,24,52,.94));border:1.5px solid rgba(127,176,255,.3);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);opacity:0;transform:translateY(40px);transform-origin:50% 100%;transition:opacity .6s var(--out),transform .9s var(--out)}
#s-biz .bz-tier.t0{left:680px;height:360px}
#s-biz .bz-tier.t1{left:1050px;height:420px;border-color:rgba(156,195,255,.6)}
#s-biz .bz-tier.t2{left:1420px;height:480px;border-color:#9CC3FF;background:linear-gradient(180deg,rgba(32,62,130,.96),rgba(14,28,62,.96));box-shadow:0 0 0 1px rgba(156,195,255,.25),0 30px 70px -24px rgba(42,99,230,.55)}
#s-biz .bz-k{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7F93B2}
#s-biz .bz-tier header{display:flex;align-items:center;gap:12px;margin-top:10px}
#s-biz .bz-pi{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#CFE0FF;background:radial-gradient(circle at 35% 30%,rgba(127,176,255,.42),rgba(42,99,230,.14));box-shadow:inset 0 0 0 1.5px rgba(156,195,255,.6)}
#s-biz .bz-pi svg{width:24px;height:24px}
#s-biz .bz-tier.t0 .bz-pi{color:#AFC0DA;background:rgba(190,208,235,.08);box-shadow:inset 0 0 0 1.5px rgba(142,163,192,.45)}
#s-biz .bz-tier header b{font-size:24px;font-weight:700;color:var(--white)}
#s-biz .bz-tier header em{margin-left:auto;padding:3px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;color:#CFE0FF;box-shadow:inset 0 0 0 1px rgba(156,195,255,.6)}
#s-biz .bz-pr{margin:16px 0 0;font-size:58px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--white)}
#s-biz .bz-tier.t0 .bz-pr{color:#AFC0DA}
#s-biz .bz-un{margin:6px 0 0;font-size:15px;color:var(--steel)}
#s-biz .bz-tier ul{margin:14px 0 0;padding:12px 0 0;border-top:1px solid rgba(142,163,192,.2);list-style:none}
#s-biz .bz-tier li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:17px;color:#D3DEEF;opacity:0;transition:opacity .4s}
#s-biz .bz-tier li i{flex:none;display:grid;place-items:center;color:#8FBAFF}
#s-biz .bz-tier li i svg{width:16px;height:16px;stroke-width:2.2}
#s-biz .bz-pnote{position:absolute;left:680px;top:800px;margin:0;font-size:16px;color:var(--steel);opacity:0;transition:opacity .5s}
#s-biz .bz-pnote b{color:var(--amber);font-weight:600}
#s-biz[data-k="1"] .bz-tier{opacity:1;transform:none}
#s-biz[data-k="1"] .bz-tier li{opacity:1}
#s-biz[data-k="1"] .bz-tier.t0{transition-delay:.7s}#s-biz[data-k="1"] .bz-tier.t1{transition-delay:1s}#s-biz[data-k="1"] .bz-tier.t2{transition-delay:1.3s}
#s-biz[data-k="1"] .bz-tier.t0 li{transition-delay:1.2s}#s-biz[data-k="1"] .bz-tier.t1 li{transition-delay:1.5s}#s-biz[data-k="1"] .bz-tier.t2 li{transition-delay:1.8s}
#s-biz[data-k="1"] .bz-pnote{opacity:1;transition-delay:2.1s}
/* beat 2: the plans collapse into the revenue column */
#s-biz:is([data-k="2"],[data-k="3"]) .bz-tier{opacity:0;transform:translateX(var(--fx,0)) scale(.3,.6);transition:opacity .45s ease-in .15s,transform .7s var(--io)}
#s-biz .bz-tier.t1{--fx:-370px}#s-biz .bz-tier.t2{--fx:-740px}
#s-biz:not([data-k="1"]) .bz-pnote{opacity:0}
/* customer card: compact plan summary (beats 2–3 only) */
#s-biz .bv-sum{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(142,163,192,.2);opacity:0;max-height:0;overflow:hidden;transition:opacity .5s,max-height .6s var(--io)}
#s-biz .bv-sum span{display:block;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8EA3C0}
#s-biz .bv-sum b{display:block;margin-top:4px;font-size:22px;font-weight:700;color:var(--white)}
#s-biz .bv-sum small{font-size:14px;color:var(--amber)}
#s-biz:is([data-k="2"],[data-k="3"]) .bv-sum{opacity:1;max-height:120px;transition-delay:.4s}

/* AI cost micro-moment inside "Chi phí phục vụ" (beat 2, right after the bar drops) */
#s-biz:is([data-k="2"],[data-k="3"]) :is(.fb-aiv,.fb-mix,.fb-mixl,.fb-aic){opacity:1;transform:none}
@keyframes fbAi{0%,100%{box-shadow:0 0 10px rgba(240,166,58,.8)}50%{box-shadow:0 0 22px rgba(240,166,58,1)}}
/* the cost-to-serve label sits under the baseline as before; the bar's column text stays */

/* ---- 2 · financial flow (Sankey-style ribbons; widths are illustrative) ---- */
#s-biz .fs{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
#s-biz .fs path{fill:none;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.45,0,.25,1)}
#s-biz .fs .lnk{stroke:#8FBAFF;stroke-width:3;stroke-linecap:round}
#s-biz .fs .rev{stroke:url(#fsRev);stroke-width:200;filter:drop-shadow(0 0 30px rgba(42,99,230,.45))}
#s-biz .fs .mar{stroke:url(#fsMar);stroke-width:130;opacity:.85}
#s-biz .fs .rem{stroke:#AFCBFF;stroke-width:50;opacity:.9}
#s-biz .fs .amb{stroke:url(#fsAmb);stroke-width:70;opacity:.92}
#s-biz .fs .gry{stroke:url(#fsGry);stroke-width:80;opacity:.85}
#s-biz .fs .f{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:.006 .045;stroke-dashoffset:0;opacity:0;transition:opacity .6s}
#s-biz .fs .f2{stroke:rgba(255,236,200,.7)}#s-biz .fs .f3{stroke:rgba(230,238,250,.55)}
#s-biz:is([data-k="2"],[data-k="3"]) .fs :is(.lnk,.b){stroke-dashoffset:0}
#s-biz[data-k="2"] .fs .lnk{transition-delay:.25s}
#s-biz[data-k="2"] .fs .rev{transition-delay:.5s}
#s-biz[data-k="2"] .fs .amb{transition-delay:1.35s}
#s-biz[data-k="2"] .fs .mar{transition-delay:1.35s}
#s-biz[data-k="2"] .fs .gry{transition-delay:2.6s}
#s-biz[data-k="2"] .fs .rem{transition-delay:2.6s}
#s-biz:is([data-k="2"],[data-k="3"]) .fs .f{opacity:1;animation:fsRun 2.4s linear infinite}
#s-biz[data-k="2"] .fs .f{transition-delay:3.4s}
@keyframes fsRun{to{stroke-dashoffset:-.102}}
/* labels */
#s-biz .fs-l{position:absolute;margin:0;opacity:0;transform:translateY(8px);transition:opacity .5s var(--out),transform .7s var(--out)}
#s-biz .fs-l i{float:left;width:38px;height:38px;margin-right:12px;border-radius:11px;display:grid;place-items:center}
#s-biz .fs-l i svg{width:22px;height:22px}
#s-biz .fs-l b{display:block;font-size:22px;font-weight:700;color:var(--white);line-height:1.15}
#s-biz .fs-l span{display:block;font-size:15px;color:#AFC0DA;line-height:1.35}
#s-biz .fs-l.rev{left:600px;top:262px}#s-biz .fs-l.rev i{background:rgba(42,99,230,.5);color:#fff}
#s-biz .fs-l.amb{left:1196px;top:640px;width:300px}#s-biz .fs-l.amb i{background:rgba(240,166,58,.22);color:#FFD08A}#s-biz .fs-l.amb b{color:#FFC774}
#s-biz .fs-l.gry{left:1546px;top:646px;width:220px}#s-biz .fs-l.gry i{background:rgba(190,208,235,.14);color:#D3DEEF}
#s-biz .fs-in{position:absolute;left:930px;top:376px;margin:0;font-size:24px;font-weight:700;color:#0B1736;opacity:0;transition:opacity .5s}
#s-biz .fs-be{position:absolute;left:1592px;top:300px;width:168px;height:110px;box-sizing:border-box;border-radius:16px;border:2px dashed var(--amber);background:rgba(240,166,58,.06);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:0 18px;opacity:0;transform:scale(.9);transition:opacity .5s,transform .7s cubic-bezier(.2,1.3,.4,1)}
#s-biz .fs-be b{font-size:56px;font-weight:700;color:var(--amber);line-height:1}
#s-biz .fs-be span{font-size:22px;font-weight:700;color:var(--white)}
#s-biz .fs-be small{position:absolute;left:0;top:118px;width:200px;font-size:14px;color:#AFC0DA}
#s-biz:is([data-k="2"],[data-k="3"]) :is(.fs-l,.fs-be){opacity:1;transform:none}
#s-biz:is([data-k="2"],[data-k="3"]) .fs-in{opacity:1}
#s-biz[data-k="2"] .fs-l.rev{transition-delay:.9s}
#s-biz[data-k="2"] .fs-l.amb{transition-delay:2.1s}#s-biz[data-k="2"] .fs-in{transition-delay:2.2s}
#s-biz[data-k="2"] .fs-l.gry{transition-delay:3.3s}#s-biz[data-k="2"] .fs-be{transition-delay:3.4s}
#s-biz[data-k="3"] .fs-be{animation:fbQ 1.4s ease-in-out .4s infinite}
/* the AI micro-moment, inside the cost-to-serve label */
#s-biz .fs-ai{margin:10px 0 0;clear:both;font-size:14px;color:#C9D6EA}
#s-biz .fs-ai em{font-style:normal;font-size:20px;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
#s-biz .fs-mix{display:flex;gap:3px;width:290px;margin-top:8px}
#s-biz .fs-mix u{height:8px;border-radius:4px;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.3,0,.2,1)}
#s-biz .fs-mix .r{flex:1;background:linear-gradient(90deg,#2A63E6,#8FBAFF)}
#s-biz .fs-mix .a{width:12px;flex:none;background:var(--amber);box-shadow:0 0 10px rgba(240,166,58,.85)}
#s-biz .fs-mixl{margin:6px 0 0;display:flex;flex-direction:column;font-size:13.5px;line-height:1.45}
#s-biz .fs-mixl .r{color:#9CC3FF}#s-biz .fs-mixl .a{color:#FFC774}
#s-biz .fs-ai,#s-biz .fs-mixl{opacity:0;transition:opacity .45s}
#s-biz:is([data-k="2"],[data-k="3"]) :is(.fs-ai,.fs-mixl){opacity:1}
#s-biz:is([data-k="2"],[data-k="3"]) .fs-mix u{transform:none}
#s-biz[data-k="2"] .fs-ai{transition-delay:2.5s}#s-biz[data-k="2"] .fs-mix .r{transition-delay:2.6s}#s-biz[data-k="2"] .fs-mix .a{transition-delay:3.2s}#s-biz[data-k="2"] .fs-mixl{transition-delay:3.3s}
#s-biz .fb-tag{position:absolute;left:600px;top:768px;margin:0;font-size:14px;color:var(--steel);opacity:0;transition:opacity .5s}
#s-biz:is([data-k="2"],[data-k="3"]) .fb-tag{opacity:1;transition-delay:3.6s}
/* label layout: icon + text in a grid, no wrapping under the icon */
#s-biz .fs-l{display:grid;grid-template-columns:38px auto;column-gap:12px;align-items:center}
#s-biz .fs-l i{float:none;margin:0;grid-row:1/3}
#s-biz .fs-l b,#s-biz .fs-l span{grid-column:2;white-space:nowrap}
#s-biz .fs-l.amb{left:620px;top:560px;width:270px}
#s-biz .fs-l.amb .fs-ai,#s-biz .fs-l.amb .fs-mix,#s-biz .fs-l.amb .fs-mixl{grid-column:1/-1}
#s-biz .fs-l.amb span{white-space:normal}
#s-biz .fs-ai{white-space:nowrap}
#s-biz .fs-mix{width:260px}
#s-biz .fs-l.gry{left:1546px;top:650px}
#s-biz .fs-l.gry span{white-space:normal;width:190px}
#s-biz .fs-be{left:1580px;width:180px}
#s-biz .fs-be span{white-space:nowrap}
#s-biz .fs-be small{top:116px;width:190px}
#s-biz .fb-tag{left:160px;top:690px;width:400px}