/* Scene 04 · Giải pháp (LỆNH 15B, 23/10) — two screens the presenter steps through. The DOM that scene-flow04.js writes from one clock
   (NQ_CK): screen 1, three columns on the stage's own navy (a white model podium each, the deck's props on it, the job's name and line);
   screen 2, 01's world by day (a baked frame of pb-world.js) with NexQuote's window. Blue = data / kept / approved, amber = waiting. No
   trace of 03. Text ≥ 20 px (the props' tiny print is a picture). */
#s-flow,#s-flow.active,#s-flow.active.cn-dof,#s-flow.cn-in{filter:none!important;transform:none!important}
#s-flow.cn-in [data-b]{transition-delay:.3s}
#s-flow.cn-in{opacity:1!important;visibility:visible!important;transition:none!important}
#s-flow.f4-pre{opacity:.004!important;visibility:visible!important;transition:none!important;pointer-events:none}   /* warmed under 03: rastered, never seen */
#s-flow .head{z-index:6}
/* LỆNH 42 §B4: the source chip, the check chips and the gate's state are the deck's one label (tokens: pitch.css) */
#s-flow .fl-src{position:absolute;left:160px;top:204px;z-index:6;margin:0;display:inline-flex;align-items:center;gap:10px;font:var(--nq-pill-font);color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge);padding:var(--nq-pill-pad);border-radius:999px}
#s-flow .fl-src::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
#s-flow .f4{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#s-flow .f4 *{box-sizing:border-box}
#s-flow .f4 p{margin:0}
#s-flow .f4>*{position:absolute;margin:0;left:0;top:0}
/* screen 2 · the world */
#s-flow .f4-w{width:1920px;height:1080px;opacity:0;transform-origin:0 0;will-change:transform,opacity}   /* its own GPU layer: it scales every frame, never re-rastered */
#s-flow .f4-day{display:block;width:1920px;height:1080px;max-width:none}
#s-flow .f4-top{width:1920px;height:340px;opacity:0;background:linear-gradient(180deg,rgba(5,10,22,.82) 0,rgba(5,10,22,.62) 48%,rgba(5,10,22,.26) 78%,rgba(5,10,22,0) 100%)}
/* lines */
#s-flow :is(.f4-svg,.f4-csv){overflow:visible}
#s-flow .f4-svg{width:1920px;height:1080px}
#s-flow .f4-csv{position:absolute;left:0;top:0;width:480px;height:420px}
#s-flow :is(.f4-svg,.f4-csv) :is(path,circle){vector-effect:non-scaling-stroke}
#s-flow :is(.f4-svg,.f4-csv) path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#s-flow .f4y{stroke:#2A63E6;stroke-width:2.5;opacity:0}
#s-flow .f4yh{stroke:rgba(255,255,255,.5);stroke-width:7;opacity:0}
#s-flow .f4ya{fill:#fff;stroke:#2A63E6;stroke-width:3;opacity:0}
#s-flow .f4yp{fill:#DCEAFF;opacity:0}
#s-flow .f4t{stroke:#4D86FF;stroke-width:2;opacity:0}
#s-flow .f4th{stroke:rgba(77,134,255,.28);stroke-width:7;opacity:0}
#s-flow .f4tp{fill:#DCEAFF;opacity:0}
#s-flow .f4-svg .f4rm{stroke:#988E82;stroke-width:8}   /* asphalt over 01's amber leg */
#s-flow .f4-svg .f4r{stroke:#2A63E6;stroke-width:3.5}
#s-flow .f4-svg .f4rh{stroke:rgba(42,99,230,.26);stroke-width:12}
#s-flow .f4-svg .f4rp{stroke:#DCEAFF;stroke-width:5;stroke-dasharray:.07 1;opacity:0}
/* screen 1 · the columns: a white model podium, the props on it, the job's name and its line */
#s-flow .f4-col{width:480px;height:640px;opacity:0;will-change:opacity,transform;transition:filter .25s}
#s-flow .f4-col>*{position:absolute;left:0;top:0;margin:0}
#s-flow .f4-pod{left:40px;top:388px;width:400px;height:92px}
#s-flow .f4-pod::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;border-radius:14px;background:linear-gradient(180deg,#F5F7FB 0,#E2E7EF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(150,162,184,.35);transform:perspective(760px) rotateX(52deg);transform-origin:50% 100%;transition:box-shadow .25s}
#s-flow .f4-pod::after{content:"";position:absolute;left:3px;right:3px;top:52px;height:36px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#C9D1DE 0,#A9B4C6 100%);
  box-shadow:0 26px 34px -12px rgba(0,0,0,.65)}
#s-flow .f4-col.on .f4-pod::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px #4D86FF,0 0 34px rgba(77,134,255,.55)}
#s-flow .f4-nm{left:-40px!important;top:500px;width:560px;text-align:center}
#s-flow .f4-nm .t{font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#E6EEFF;white-space:nowrap}
#s-flow .f4-nm .s{margin-top:12px;font-size:24px;font-weight:500;line-height:1.3;color:#B9C6DC;white-space:nowrap}
#s-flow .f4-col.on .f4-nm .t{color:#fff;text-shadow:0 0 22px rgba(77,134,255,.6)}
/* column 1 · the Zalo bubble, the record, the condition on its cover */
#s-flow .f4-bub{left:6px;top:64px;width:340px;padding:10px 16px 13px;border-radius:16px 16px 16px 5px;background:rgba(246,248,252,.97);color:#1C2638;
  box-shadow:0 16px 32px -16px rgba(5,10,22,.6),0 0 0 1px rgba(28,38,56,.1)}
#s-flow .f4-bub .bh{display:flex;align-items:center;gap:9px;font-size:20px;color:#4A5873;white-space:nowrap}
#s-flow .f4-bub .bh i{display:block;flex:none;width:32px;height:32px;background:url(../img/brand/zalo.svg) center/contain no-repeat}   /* the real Zalo app tile (LỆNH 46) */
#s-flow .f4-bub .bh b{font-weight:700;color:#1C2638}
#s-flow .f4-bub .bh span{margin-left:auto;font-size:21px;color:#53607A}
#s-flow .f4-bub .bt{margin-top:6px;font-size:24px;font-weight:500;line-height:1.3;color:#1C2638}
#s-flow .f4-bub .hl{display:inline-block;padding:0 6px;border-radius:6px;font-weight:700;color:#8A4B00;background:rgba(240,166,58,.22);box-shadow:inset 0 0 0 1.5px rgba(224,138,30,.55);
  transition:background-color .15s,box-shadow .15s,color .15s}
#s-flow .f4-bub .hl.lit{background:#F0A63A;color:#2A1600;box-shadow:0 0 16px rgba(240,166,58,.9)}
#s-flow .f4-bub .hl.gone{color:rgba(138,75,0,.6);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(77,134,255,.65)}   /* kept: the thread ends here */
#s-flow .f4-rec{left:128px;top:214px;width:344px;height:168px;padding:16px 16px 0;border-radius:4px 12px 12px 12px;background:#F1E9D6 linear-gradient(180deg,#F7F2E6 0,#EDE4CF 100%);color:#2B2416;
  box-shadow:0 16px 30px -14px rgba(5,10,22,.65),inset 0 0 0 1px rgba(120,96,48,.18)}
#s-flow .f4-rec .f4tab{position:absolute;left:0;top:-14px;width:96px;height:16px;border-radius:6px 10px 0 0;background:#EDE4CF}
#s-flow .f4-rec .f4rh{font-size:21px;font-weight:700;white-space:nowrap}
#s-flow .f4-rec .f4rl{margin-top:4px;font-size:20px;font-weight:500;color:#5B5140;white-space:nowrap}
#s-flow .f4-rec .f4rk{margin-top:12px;padding:5px 10px 6px;border-radius:6px;font-size:20px;font-weight:500;color:#fff;background:#2A63E6;white-space:nowrap;opacity:0;box-shadow:0 0 16px rgba(42,99,230,.5)}
#s-flow .f4-rec .f4rk b{font-weight:700}
#s-flow .f4-rec .f4clip{position:absolute;left:10px;top:98px;width:14px;height:34px;border-radius:7px;border:3px solid #8C97AB;opacity:0}
#s-flow .f4-chunk{opacity:0;transform-origin:0 0;white-space:nowrap;padding:4px 12px 6px;border-radius:8px;font-size:24px;font-weight:700;color:#2A1600;background:#F0A63A;
  box-shadow:0 0 20px rgba(240,166,58,.85),0 10px 22px -12px rgba(0,0,0,.6);will-change:transform,opacity}
/* column 2 · the documents, the price card, the stamps */
#s-flow .f4-doc{opacity:0;width:290px;padding:0 0 10px;border-radius:10px;background:rgba(246,248,252,.96);color:#1C2638;
  box-shadow:0 18px 34px -16px rgba(5,10,22,.55),0 0 0 1px rgba(28,38,56,.12)}
#s-flow .f4-doc::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:0 0 0 2px #4D86FF,0 0 26px rgba(77,134,255,.45);opacity:0;transition:opacity .25s ease-out;will-change:opacity}   /* lit: a glow of its own (no repaint of the card) */
#s-flow .f4-doc.lit::after{opacity:1}
#s-flow .f4-doc .dhd{display:flex;align-items:center;justify-content:flex-start;gap:10px;height:44px;padding:0 14px;border-bottom:1px solid rgba(28,38,56,.12);font-size:20px;font-weight:700;white-space:nowrap}
#s-flow .f4-doc .dhd i{flex:none;width:32px;height:32px;background:transparent center/contain no-repeat}
#s-flow .f4-doc.em .dhd i{background:url(../img/brand/outlook.svg) center/contain no-repeat}   /* the carrier's email: Outlook (LỆNH 46) */
#s-flow .f4-doc.xl .dhd i{background:url(../img/brand/excel.svg) center/contain no-repeat}   /* the sheet: Excel */
#s-flow .f4-doc .dl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:8px 12px 0;padding:3px 8px;border-radius:6px;font-size:21px;font-weight:500;white-space:nowrap}
#s-flow .f4-doc .dl b{font-weight:700;font-variant-numeric:tabular-nums}
#s-flow .f4-doc .dl.s{margin-top:2px;font-size:20px;color:#4A5873}
#s-flow .f4-doc.xl .dl.c{background:#EEF2F7;box-shadow:inset 0 0 0 1px #D3DBE6}
#s-flow .f4-doc .dl.lit,#s-flow .f4-doc.xl .dl.c.lit{background:#2A63E6;color:#fff;box-shadow:0 0 18px rgba(42,99,230,.55)}
#s-flow .f4-col .f4-doc{opacity:1;width:200px;padding-bottom:8px}
#s-flow .f4-col .f4-doc.em{left:16px;top:66px}
#s-flow .f4-col .f4-doc.xl{left:264px;top:66px}
#s-flow .f4-col .f4-doc .dhd{height:40px;padding:0 12px}
#s-flow .f4-col .f4-doc.lit .dl{background:#2A63E6;color:#fff}
#s-flow .f4-price{left:130px;top:234px;width:220px;padding:10px 18px 12px;border-radius:12px;background:rgba(10,22,52,.94);color:#fff;text-align:center;
  box-shadow:inset 0 0 0 1.5px rgba(110,160,255,.7),0 16px 30px -14px rgba(0,0,0,.7);transition:box-shadow .2s}
#s-flow .f4-price .f4pk{font-size:21px;font-weight:600;color:#AFC8F0}
#s-flow .f4-price .f4pn{font-size:46px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#s-flow .f4-price.lit{box-shadow:inset 0 0 0 2px #8FC0FF,0 0 30px rgba(77,134,255,.7),0 16px 30px -14px rgba(0,0,0,.7)}
#s-flow .f4-sp{left:0;top:354px;width:480px;display:flex;justify-content:center;gap:6px}
#s-flow .f4-sp i{opacity:0;font-style:normal;padding:3px 11px 5px;border-radius:999px;font:var(--nq-pill-font);color:#fff;background:var(--nq-pill-ai);box-shadow:inset 0 0 0 1px var(--nq-pill-ai-edge);
  white-space:nowrap;transform-origin:50% 50%;will-change:transform,opacity}
/* column 3 · the PDF, the barrier and its label, the approver's stamp */
#s-flow .f4-pdf{left:80px;top:206px;width:124px;height:166px;padding:12px 12px 0;border-radius:6px;background:#FBFCFE;color:#1C2638;
  box-shadow:0 16px 32px -14px rgba(5,10,22,.7),0 0 0 1px rgba(28,38,56,.14);will-change:transform}
#s-flow .f4-pdf .phd{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:700;white-space:nowrap}
#s-flow .f4-pdf .phd b{padding:1px 5px 2px;border-radius:4px;background:#D7372B;color:#fff;font-size:14px}
#s-flow .f4-pdf>i{display:block;height:7px;margin-top:10px;border-radius:4px;background:#DCE3EE}
#s-flow .f4-pdf>i.s{width:60%}
#s-flow .f4-pdf .ptl{margin-top:16px;font-size:17px;font-weight:700;white-space:nowrap}
#s-flow .f4-pdf .f4imp{position:absolute;left:16px;top:58px;padding:2px 8px 3px;border:3px solid #2A63E6;border-radius:6px;font-size:18px;font-weight:800;color:#2A63E6;background:rgba(255,255,255,.75);
  opacity:0;white-space:nowrap;transform-origin:50% 50%}
#s-flow .f4-stamp{left:100px;top:96px;width:84px;height:104px;will-change:transform,opacity}
#s-flow .f4-stamp i{position:absolute;display:block}
#s-flow .f4-stamp .f4sh{left:24px;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#5B8DF5,#2A63E6);box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
#s-flow .f4-stamp .f4sn{left:36px;top:32px;width:12px;height:36px;background:#B9C4D6}
#s-flow .f4-stamp .f4sf{left:4px;top:66px;width:76px;height:26px;border-radius:5px;background:linear-gradient(180deg,#E9EEF6,#9FAAC0);box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
#s-flow .f4-gate{left:256px;top:180px;width:80px;height:200px}
#s-flow .f4-gate>i{position:absolute;display:block}
#s-flow .f4-gate .pl,#s-flow .f4-gate .pr{top:0;bottom:0;width:10px;border-radius:3px;background:linear-gradient(90deg,#E9EEF6,#B9C4D6);box-shadow:0 10px 18px -8px rgba(0,0,0,.5)}
#s-flow .f4-gate .pl{left:0}
#s-flow .f4-gate .pr{right:0}
#s-flow .f4-gate .bm{left:-36px;right:-36px;top:-34px;height:34px;border-radius:5px;background:#E9EEF6;box-shadow:0 8px 16px -8px rgba(0,0,0,.5);font-style:normal}
#s-flow .f4-gate .bm b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:700;font-style:normal;color:#1C2638;white-space:nowrap}
#s-flow .f4-gate .dr{left:12px;right:12px;top:4px;bottom:0;border-radius:2px;background:repeating-linear-gradient(-45deg,#F0A63A 0 12px,#2A1E0A 12px 24px);opacity:.92;box-shadow:0 0 16px rgba(240,166,58,.45)}
#s-flow .f4-gst{left:156px;top:96px;width:280px;display:grid;justify-items:center;white-space:nowrap}
#s-flow .f4-gst span{grid-area:1/1;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);transition:opacity .2s}
#s-flow .f4-gst .a{color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px rgba(240,166,58,.92)}
#s-flow .f4-gst .b{opacity:0;color:#fff;background:var(--nq-pill-ai);box-shadow:inset 0 0 0 1px var(--nq-pill-ai-edge)}
#s-flow .f4-gst.ok .a{opacity:0}
#s-flow .f4-gst.ok .b{opacity:1}
/* the line at the foot of screen 1 */
#s-flow .f4-line{opacity:0;white-space:nowrap;font-size:28px;font-weight:600;line-height:1.25;color:rgba(201,216,242,.78)}
/* screen 2 · NexQuote's window */
#s-flow .f4-win{width:640px;opacity:0;transform-origin:0 0}
#s-flow .f4-mt{position:absolute;inset:0;background:#060D20;opacity:0;pointer-events:none}   /* the film's navy (its frame at 0.3 s) */
#s-flow .f4-wbg{position:absolute;left:0;top:0;width:600px;border-radius:14px;background:#08112A;box-shadow:inset 0 0 0 1px rgba(143,192,255,.3),0 30px 60px -22px rgba(0,0,0,.7)}
#s-flow .f4-wc{position:relative;padding-bottom:18px;transform-origin:0 0;color:#EAF2FF}
#s-flow .f4-wc .tb{display:flex;align-items:center;gap:9px;height:50px;padding:0 16px 0 18px;border-bottom:1px solid rgba(143,192,255,.18)}
#s-flow .f4-wc .tb>i{width:11px;height:11px;border-radius:50%;background:rgba(207,224,255,.24)}
#s-flow .f4-wc .tb svg{width:19px;height:20px;margin-left:10px}
#s-flow .f4-wc .tb b{font-size:22px;font-weight:700;color:#fff}
#s-flow .f4-wc .tb b em{font-style:normal;color:#8FC0FF}
#s-flow .f4-wc .rt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 26px 4px 28px;font-size:22px;font-weight:500;color:#A9C1E6}
#s-flow .f4-wc .led{position:relative;padding:2px 28px 0}
#s-flow .f4-wc .lr{display:flex;justify-content:space-between;align-items:baseline;gap:30px;line-height:1.4;opacity:0}
#s-flow .f4-wc .k{font-size:26px;font-weight:500;color:#A9C1E6}
#s-flow .f4-wc .n{position:relative;font-size:32px;font-weight:600;line-height:1.2em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:#fff;letter-spacing:-.01em;white-space:nowrap}
#s-flow .f4-wc .q5{margin:4px 0 6px;padding:6px 12px 7px;border-radius:8px;background:rgba(42,99,230,.16);box-shadow:inset 0 0 0 1px rgba(77,134,255,.45)}
#s-flow .f4-wc .q5 .c{font-size:23px;font-weight:500;color:#CFE0FF;white-space:nowrap}
#s-flow .f4-wc .q5 .c b{font-weight:700;color:#fff}
#s-flow .f4-wc .qs .s{margin:-4px 0 4px;font-size:21px;color:rgba(207,224,255,.76)}
#s-flow .f4-wc .rule{display:block;height:1px;margin:8px 0 6px;background:rgba(143,192,255,.45);transform:scaleX(0);transform-origin:0 50%}
#s-flow .f4-wc .q4{position:relative;justify-content:flex-start;gap:24px}
#s-flow .f4-wc .q4 .n{font-size:50px;letter-spacing:-.02em}
#s-flow .f4-wc .q4 .s{font-size:22px;font-weight:500;color:rgba(207,224,255,.8);white-space:nowrap}
#s-flow .f4-wc .q4 .s em{font-style:normal;font-size:28px;font-weight:600;color:#CFE0FF}
#s-flow .f4-wc .st{margin-top:10px;opacity:0;text-align:right}
#s-flow .f4-wc .st span{display:inline-block;padding:2px 12px 3px;border:3px solid #F0A63A;border-radius:8px;font-size:21px;font-weight:700;color:#FFD9A0;background:rgba(30,18,4,.9);white-space:nowrap}
#s-flow .f4-wc .od{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
#s-flow .f4-wc .od>i{display:block;font-style:normal;will-change:transform}   /* the reels roll on layers of their own */
#s-flow .f4-wc .od>i>span{display:block;height:1.2em;line-height:1.2em}
#s-flow .f4-wc .sep{display:inline-block;height:1.2em;line-height:1.2em;vertical-align:top}
#s-flow .f4-wc .fx{display:none}   /* the figure as plain text once its reels have landed */
/* the presenter's dots */
#s-flow .f4-dots{left:auto;right:28px;top:auto;bottom:22px;display:flex;gap:6px;opacity:0}
#s-flow .f4-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(214,226,246,.45)}
#s-flow .f4-dots i.on{background:rgba(214,226,246,.45)}
#s-flow :is(.f4-win,.f4-doc,.f4-line,.f4-dots){will-change:opacity,transform}
/* the step forward to the demo (app.js): 04 is held while it pushes into its window, the demo waits, then shows the film's first frame */
#s-flow.fl-push{opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important}
#s-demo.dm-wait{opacity:0!important;transform:none!important;transition:none!important}
#s-demo.dm-now{opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important}   /* the cut: the demo whole at once, 04 gone at once */
#s-flow.fl-gone{opacity:0!important;visibility:hidden!important;transition:none!important}
#s-demo.dm-match :is(.head,.demo-ctl,.demo-seek,.cues,#demo-tag,#demo-clock){opacity:0!important;transition:none!important}
#s-demo :is(.head,.demo-ctl,.demo-seek,.cues,#demo-tag,#demo-clock){transition:opacity .5s ease-out}
#s-demo .dm-f0{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;z-index:3}
#s-demo .dm-f0.on{opacity:1}
#s-demo .dm-f0.x{transition:opacity .3s cubic-bezier(.4,0,.2,1)}   /* LỆNH 14 §2: the cross from the still to the film, once its first frame is painted */