/* Scene 01 hero (upgrade 21/10) · "Dữ liệu chảy qua. Điều kiện rơi lại."
   #s-problem.hx-on shows .hx instead of the DOM version (.pb-stage, kept as the fallback for Safe mode, calm and no WebGL).
   Every moving value (camera, cards, highlights, the title turn) is written each frame by pb-hero.js from one clock, so a cut and
   a played beat land on the same frame. CSS here only sets the layout on the 1920 × 1080 stage and the resting looks.
   Type floor: 20 px. Only transform and opacity change per frame. */
#s-problem .hx{position:absolute;inset:0;display:none;pointer-events:none}
#s-problem.hx-on .hx{display:block}
/* the camera passes under the title: a scrim, shown only while the camera is off its rest (a gradient mask cost a third of the frame) */
#s-problem.hx-on .head,#s-problem.hx-on .pb-tag{z-index:3}
#s-problem .hx-scrim{position:absolute;left:0;top:0;width:1920px;height:250px;opacity:0;background:linear-gradient(180deg,#050A17 0,#050A17 150px,rgba(5,10,23,.88) 190px,rgba(5,10,23,0) 250px)}
#s-problem .hx-gl.off{visibility:hidden}
#s-problem.hx-on .pb-stage{display:none}
#s-problem .hx-cam{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}
#s-problem .hx-cam.mv{will-change:transform}
#s-problem .hx-cam>*,#s-problem .hx-scale>*{position:absolute;margin:0}
#s-problem .hx-gl{position:absolute;left:0;top:0;width:1920px;height:1080px}

/* the cell this scene becomes on beat 5 (same look as the other cells, drawn in WebGL) */
#s-problem .hx-cellbg{inset:0;border-radius:72px;background:#0B1834;box-shadow:inset 0 0 0 26px rgba(160,188,235,.24);opacity:0}

/* two desks and the handover gap between them */
#s-problem .hx-pan{top:236px;height:900px;border-radius:30px 30px 0 0;opacity:0;
  background:linear-gradient(180deg,rgba(42,70,126,.52),rgba(22,40,80,.34) 46%,rgba(10,20,44,0) 94%);box-shadow:inset 0 1px 0 rgba(190,208,235,.24),inset 0 0 0 1px rgba(190,208,235,.06)}
#s-problem .hx-pan.l{left:110px;width:820px}
#s-problem .hx-pan.r{left:1090px;width:720px}
#s-problem .hx-plab{position:absolute;left:34px;top:16px;display:flex;align-items:center;gap:10px;font-size:24px;font-weight:600;letter-spacing:.04em;color:#B9CAE6}
#s-problem .hx-plab::before{content:"";width:8px;height:8px;border-radius:50%;background:#7FB0FF}
#s-problem .hx-gap{left:930px;top:236px;width:160px;height:844px;overflow:hidden;opacity:0;
  background:linear-gradient(180deg,rgba(2,5,14,.15) 0,rgba(1,4,12,.86) 18%,#010309 70%,#000104 100%);
  box-shadow:inset 0 0 0 1px rgba(214,226,246,.16),inset 18px 0 26px -18px rgba(120,160,230,.18),inset -18px 0 26px -18px rgba(120,160,230,.18)}
#s-problem .hx-lit{position:absolute;top:0;width:80px;height:440px;margin-top:-220px;opacity:0;background:radial-gradient(closest-side,rgba(255,170,64,.62),rgba(255,150,40,.18) 60%,rgba(255,150,40,0))}
#s-problem .hx-lit.l{left:-40px}#s-problem .hx-lit.r{right:-40px}
#s-problem .hx-lit.f{left:-20px;width:200px;height:120px;margin-top:-60px;background:radial-gradient(closest-side,rgba(255,160,56,.42),rgba(255,160,56,0))}

/* the request (desk pose; beat 1 lifts it to the centre) */
#s-problem .hx-mail{left:170px;top:300px;width:720px;box-sizing:border-box;padding:26px 38px 28px;border-radius:22px;background:#E8EDF4;color:#0E1727;transform-origin:50% 50%;opacity:0;box-shadow:var(--pb-shadow)}
#s-problem .hx-new{position:absolute;left:0;bottom:calc(100% + 14px);display:inline-flex;align-items:center;gap:10px;padding:6px 16px 7px;border-radius:999px;font-size:20px;font-weight:600;color:#DCE6F7;background:rgba(127,176,255,.18);white-space:nowrap;opacity:0}
#s-problem .hx-new::before{content:"";width:9px;height:9px;border-radius:50%;background:#7FB0FF;box-shadow:0 0 10px #7FB0FF}
#s-problem .hx-mail header{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid #D3DCE8}
#s-problem .hx-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:23px;color:#fff;background:linear-gradient(135deg,#3C6FE0,#6E9FF5)}
#s-problem .hx-mail header b{display:block;font-size:25px;font-weight:600;line-height:1.25}
#s-problem .hx-mail header span{display:block;font-size:23px;color:#4F5F77;margin-top:1px}
#s-problem .hx-l{position:relative;margin:0;display:flex;align-items:baseline;gap:14px}
#s-problem .hx-l>i{font-style:normal;color:#66758C;width:14px;flex:none}
#s-problem .hx-greet{display:block;font-size:24px;line-height:1.45;color:#4F5F77;margin:16px 0 8px}
#s-problem .hx-route,#s-problem .hx-eq,#s-problem .hx-truck{font-size:30px;line-height:1.3;font-weight:500;margin:6px 0}
#s-problem .hx-eq>span{color:#33445C}
#s-problem .hx-dots{font-size:23px;line-height:1.2;color:#7E8BA0}
#s-problem .hx-sign{display:block;font-size:23px;color:#4F5F77;margin-top:14px}
#s-problem .hx-k{font-weight:600;color:#0E1727;border-radius:6px;padding:0 5px;margin:0 -5px;background:linear-gradient(rgba(42,99,230,.2),rgba(42,99,230,.2)) no-repeat 0 0/0% 100%}
#s-problem .hx-m{color:inherit;padding:0 5px;margin:0 -5px;border-radius:5px;background:linear-gradient(transparent 50%,rgba(240,166,58,.58) 50%) no-repeat 0 0/0% 100%}
#s-problem .hx-scan{position:absolute;left:0;top:0;width:150px;height:40px;border-radius:6px;opacity:0;
  background:linear-gradient(90deg,rgba(42,99,230,0),rgba(42,99,230,.13) 62%,rgba(42,99,230,.32) 94%,rgba(42,99,230,.85) 98%,rgba(42,99,230,0))}

/* the Pricing file */
#s-problem .hx-file{left:1140px;top:316px;width:620px;height:396px;box-sizing:border-box;border-radius:22px;background:#E8EDF4;color:#0E1727;overflow:hidden;opacity:0;box-shadow:var(--pb-shadow)}
#s-problem .hx-file header{display:flex;align-items:center;height:66px;padding:0 34px;border-bottom:1px solid #D3DCE8}
#s-problem .hx-file header b{font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#33445C}
#s-problem .hx-f{position:absolute;left:0;right:0;height:110px;box-sizing:border-box;padding:16px 34px 0;border-bottom:1px solid #DCE3EC}
#s-problem .hx-f.f-route{top:66px}#s-problem .hx-f.f-eq{top:176px}#s-problem .hx-f.f-scope{top:286px;border-bottom:0}
#s-problem .hx-fl{position:relative;display:block;font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#4F5F77}
#s-problem .hx-v{position:absolute;left:34px;top:52px;font-size:30px;font-weight:600;line-height:1.3;color:#0E1727;white-space:nowrap;opacity:0}
#s-problem .hx-slot{position:absolute;left:34px;top:94px;width:330px;border-bottom:2px dashed #B9C5D6}
#s-problem .hx-tint{position:absolute;inset:0;background:rgba(240,166,58,.12);opacity:0}
#s-problem .hx-cur{position:absolute;left:36px;top:54px;width:3px;height:36px;border-radius:2px;background:#2A5BD0;animation:hxBlink 1.05s steps(1) infinite}
@keyframes hxBlink{50%{opacity:0}}
#s-problem .hx-nr{position:absolute;right:34px;top:58px;font-style:normal;font-size:22px;font-weight:600;color:#9A5A08;opacity:0}

/* the quotation prints out of the file */
#s-problem .hx-qslot{left:1170px;top:712px;width:560px;height:270px;overflow:hidden}
#s-problem .hx-quote{position:absolute;left:0;top:0;width:560px;box-sizing:border-box;padding:18px 26px 20px;border-radius:0 0 14px 14px;background:#F2EEE6;color:#1B2433;transform:translateY(-102%);
  box-shadow:inset 0 10px 14px -10px rgba(0,0,0,.35)}
#s-problem .hx-quote p{margin:0}
#s-problem .hq-k{font-size:22px;font-weight:600;color:#4A5970}
#s-problem .hq-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px!important;font-size:28px;font-weight:600;letter-spacing:-.005em}
#s-problem .hq-ok{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#D9E6FB}
#s-problem .hq-ok::after{content:"";position:absolute;left:12px;top:6px;width:8px;height:15px;border:solid #2A5BD0;border-width:0 3px 3px 0;transform:rotate(45deg)}
#s-problem .hq-gap{flex:none;min-width:68px;box-sizing:border-box;text-align:center;padding:0 12px;border:2px dashed #C77A12;border-radius:8px;font-size:26px;font-weight:700;color:#7E4705;background:rgba(240,166,58,.12)}
/* the stamp: the same mark scene 03 opens with (pitch-cause.css .cz-st) */
#s-problem .hq-st{margin-top:16px!important;text-align:right}
#s-problem .hq-st span{display:inline-block;padding:3px 16px 4px;border:3px solid #C77A12;border-radius:8px;font-size:28px;font-weight:700;color:#9A5A08;rotate:-4deg;opacity:0}
#s-problem .hx-emb{left:986px;top:976px;width:48px;height:20px}

/* beat 5 · the scale (outside the camera) */
#s-problem .hx-scale{position:absolute;inset:0}
#s-problem .hx-cnt{left:160px;top:300px;opacity:0}
#s-problem .hx-cnt b{display:block;font-size:120px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
#s-problem .hx-cnt span{display:block;margin-top:12px;font-size:32px;font-weight:600;color:#C9D4E5}
#s-problem .hx-src{left:160px;top:520px;width:440px;font-size:22px;line-height:1.4;color:#A9B8CF;opacity:0}
#s-problem .hx-say{left:160px;top:930px;font-size:48px;font-weight:600;letter-spacing:-.01em;color:#fff;opacity:0}
#s-problem.hx-on .pb-t1,#s-problem.hx-on .pb-t2{transition:none}