/* Scene 11 · the product launch (LỆNH 33): the real screens in CSS 3D, the exploded view, the big words; and the storyboard
   (?s11=board). Colours: blue = the AI, amber = what people keep, white / navy = the model. */
#s-final .l11-bg,#s-final .l11-cam,#s-final .l11-trend,#s-final .l11-blab,#s-final .l11-tag,#s-final .l11-llab,#s-final .l11-line,#s-final .l11-flash{position:absolute;left:0;top:0;margin:0}
#s-final .l11-bg{width:1920px;height:1080px;--k:0;--a:0;
  background:radial-gradient(ellipse 46% 40% at 62% 52%,rgba(60,110,230,calc(.22 - .1 * var(--k))),transparent 70%),radial-gradient(ellipse 38% 30% at 58% 60%,rgba(240,166,58,calc(.16 * var(--a))),transparent 72%),
    linear-gradient(180deg,#03060E 0,#060B19 55%,#0A1428 100%)}
#s-final .l11-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:300px;background:linear-gradient(180deg,transparent,rgba(120,150,210,.05) 60%,rgba(120,150,210,.08))}   /* the floor's sheen */
#s-final .l11-cam{width:1920px;height:1080px;perspective:1600px;perspective-origin:960px 500px;overflow:hidden}
#s-final .l11-world{position:absolute;left:960px;top:500px;width:0;height:0;transform-style:preserve-3d}
#s-final .l11-pane{position:absolute;box-sizing:border-box;border-radius:18px;overflow:visible;opacity:0;backface-visibility:hidden;will-change:transform,opacity}
#s-final .l11-pane img{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:18px;display:block}
/* the real screens: a thin white rim, a soft shadow, a reflection fading on the floor */
#s-final .l11-pane.p1,#s-final .l11-pane.p2{background:#F7F9FC;box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 0 60px rgba(90,140,255,.25),0 40px 90px rgba(0,0,0,.6)}
#s-final .l11-pane.p1::after,#s-final .l11-pane.p2::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 14px);height:45%;border-radius:18px;background:inherit;
  background:linear-gradient(180deg,rgba(150,180,240,.16),rgba(150,180,240,0));filter:blur(2px);pointer-events:none}
#s-final .l11-pane .sw{position:absolute;top:-4%;left:0;width:300px;height:108%;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(90,150,255,0),rgba(90,150,255,.42) 45%,rgba(220,235,255,.65) 50%,rgba(90,150,255,.42) 55%,rgba(90,150,255,0))}
#s-final .l11-pane .fx{position:absolute;border-radius:4px;opacity:0;box-shadow:0 0 0 2px rgba(80,140,255,.95),0 0 18px rgba(80,140,255,.9);background:rgba(120,170,255,.18)}
#s-final .l11-pane .am{position:absolute;border-radius:4px;opacity:0;box-shadow:0 0 0 2px rgba(240,166,58,.95),0 0 18px rgba(240,166,58,.8);background:rgba(240,166,58,.2)}
#s-final .l11-pane.p2 img.b{opacity:0}
#s-final .l11-pane .bt{position:absolute;border-radius:8px;opacity:0;background:rgba(255,255,255,.9);box-shadow:0 0 30px 8px rgba(255,255,255,.75)}
#s-final .l11-pane .cu{position:absolute;left:0;top:0;width:44px;height:44px;opacity:0}
#s-final .l11-pane .cu svg{width:44px;height:44px;fill:#fff;stroke:#0B1630;stroke-width:1.2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#s-final .l11-pane .qd{position:absolute;right:-16px;top:-18px;margin:0;padding:10px 16px 12px;border-radius:16px 16px 4px 16px;white-space:nowrap;font-size:24px;font-weight:600;line-height:1.2;color:#fff;
  background:rgba(36,86,214,.94);border:2px dashed #9CC2FF;opacity:0;box-shadow:0 14px 34px rgba(10,30,90,.55)}
#s-final .l11-pane .qd small{margin-left:12px;padding:2px 10px;border-radius:6px;font-size:24px;font-weight:800;color:#1F4FD0;background:#fff}
/* 03: an empty glass, a lock of three slots */
#s-final .l11-pane.p3{border:2.5px dashed rgba(200,215,240,.55);background:linear-gradient(160deg,rgba(150,180,240,.10),rgba(150,180,240,.03));box-shadow:inset 0 0 60px rgba(150,180,240,.08),0 30px 80px rgba(0,0,0,.45)}
#s-final .l11-pane.p3 .na{position:absolute;left:34px;top:22px;margin:0;font-size:42px;font-weight:700;letter-spacing:.02em;color:#E7C48A}
#s-final .l11-pane.p3 .qb{position:absolute;left:60px;top:190px;margin:0;padding:14px 22px 16px;border-radius:16px 16px 16px 4px;white-space:nowrap;font-size:32px;font-weight:600;color:#fff;background:#2456D6;box-shadow:0 0 0 1px #6AA5FF,0 14px 34px rgba(20,60,180,.5);opacity:0}
#s-final .l11-pane.p3 .lk{position:absolute;right:40px;top:145px;width:180px;height:180px}
#s-final .l11-pane.p3 .lk .rg{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(200,220,255,.55);box-shadow:0 0 30px rgba(150,190,255,.35),inset 0 0 30px rgba(150,190,255,.2)}
#s-final .l11-pane.p3 .lk b{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:700;color:#CFE0FF;background:rgba(20,34,64,.9);box-shadow:0 0 0 2px rgba(150,190,255,.6),0 0 16px rgba(150,190,255,.5);opacity:.28}
#s-final .l11-pane.p3 .lk b:nth-of-type(1){left:64px;top:-6px}
#s-final .l11-pane.p3 .lk b:nth-of-type(2){left:-6px;top:110px}
#s-final .l11-pane.p3 .lk b:nth-of-type(3){right:-6px;top:110px}
/* the exploded view */
#s-final .l11-pane.la{background:linear-gradient(150deg,rgba(80,140,255,.42),rgba(40,90,210,.22));border:2px solid rgba(160,200,255,.75);box-shadow:0 0 70px rgba(80,140,255,.55),inset 0 0 50px rgba(160,200,255,.25)}
#s-final .l11-pane.lb{background:linear-gradient(150deg,#F4F6FA,#D9DFE9);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 30px 70px rgba(0,0,0,.55)}
#s-final .l11-pane.la .st{position:absolute;left:0;right:0;top:50%;margin:-26px 0 0;display:flex;justify-content:center;align-items:center;gap:16px;font:700 48px/1 "JetBrains Mono",ui-monospace,monospace;color:#E4EEFF}
#s-final .l11-pane.la .st .mk{width:34px;height:34px;margin-right:30px}
#s-final .l11-pane.lb .g{position:absolute;inset:40px;border-radius:10px;background:repeating-linear-gradient(0deg,rgba(60,80,120,.18) 0 2px,transparent 2px 46px),repeating-linear-gradient(90deg,rgba(60,80,120,.12) 0 2px,transparent 2px 140px)}
#s-final .l11-pane.lr{--hit:0;border-radius:44px;border:7px solid color-mix(in srgb,#FFE9BE calc(var(--hit) * 70%),#F0A63A);background:none;box-shadow:0 0 calc(30px + 70px * var(--hit)) rgba(240,166,58,calc(.55 + .45 * var(--hit))),inset 0 0 30px rgba(240,166,58,.35)}
#s-final .l11-pane.lbeam{border-radius:15px;background:linear-gradient(180deg,#9CC4FF,#2F6BFF 55%,#FFC768);box-shadow:0 0 36px 12px rgba(50,110,255,.85)}
/* the words */
#s-final .l11-trend{width:1920px;top:360px;text-align:center;transform-origin:50% 0;opacity:0;will-change:transform,opacity}
#s-final .l11-trend .w{margin:0;display:flex;justify-content:center;gap:56px;font-size:160px;will-change:transform;font-weight:800;line-height:1.05;letter-spacing:-.04em}
#s-final .l11-trend .w span{opacity:0;will-change:opacity}
#s-final .l11-trend .w span:nth-child(1){color:#8794AA}
#s-final .l11-trend .w span:nth-child(2){color:#CDD6E5}
#s-final .l11-trend .w span:nth-child(3){color:#fff;text-shadow:0 0 50px rgba(80,140,255,.85),0 0 120px rgba(80,140,255,.5)}
#s-final .l11-trend .sub{margin:34px 0 0;font-size:42px;font-weight:500;color:#C9D5E8;opacity:0}
#s-final .l11-trend .sub b{color:#9FC2FF;font-weight:700}
#s-final .l11-blab{opacity:0;will-change:opacity,transform}
#s-final .l11-blab .n{margin:0;display:flex;align-items:baseline;gap:18px;font-size:76px;font-weight:800;line-height:1.05;letter-spacing:-.025em;color:#fff;white-space:nowrap}
#s-final .l11-blab .n i{font:700 60px/1 "JetBrains Mono",ui-monospace,monospace;font-style:normal;color:#8FC0FF}
#s-final .l11-blab .s{margin:14px 0 0;display:flex;align-items:center;gap:14px;font-size:36px;font-weight:600;color:#C9D5E8;white-space:nowrap}
#s-final .l11-blab .s .mk{width:20px;height:20px}
#s-final .l11-tag{padding:4px 12px 5px;border-radius:7px;white-space:nowrap;font-size:24px;font-weight:600;color:#C9D5E8;background:rgba(4,8,20,.7);border:1px solid rgba(255,255,255,.14);opacity:0}
#s-final .l11-llab{width:470px;font-size:34px;font-weight:700;line-height:1.2;color:#fff;opacity:0;text-shadow:0 2px 14px rgba(4,8,20,.9)}
#s-final .l11-llab.a{color:#BFD7FF}
#s-final .l11-llab.r{color:#F5E3C2}
#s-final .l11-llab.r b{color:#FFC261}
#s-final .l11-line{font-size:92px;font-weight:800;line-height:1.04;letter-spacing:-.035em;color:#fff;white-space:nowrap;opacity:0;text-shadow:0 4px 30px rgba(4,8,20,.8)}
#s-final .l11-flash{width:1920px;height:1080px;background:radial-gradient(ellipse at 60% 52%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);opacity:0;pointer-events:none}
/* the storyboard: six frames, each at 520 × 293, its words, camera, light and sound under it; one frame large on a press */
#s-final.l11-board .a10{background:#04070F}
#s-final.l11-board .head{visibility:hidden}
#s-final .l11-btitle{position:absolute;left:140px;top:44px;margin:0;font-size:30px;font-weight:700;color:#fff}
#s-final .l11-btitle small{margin-left:16px;font-size:20px;font-weight:500;color:#9FB0CC}
#s-final .l11-grid{position:absolute;left:140px;top:104px;width:1640px;display:grid;grid-template-columns:repeat(3,520px);gap:22px 40px}
#s-final .l11-cell{cursor:pointer}
#s-final .l11-fr{position:relative;width:520px;height:293px;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.5)}
#s-final .l11-inst{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;background:#03060E}
#s-final .l11-fr .l11-inst{transform:scale(.27083);transform-origin:0 0}
#s-final .l11-cap{margin-top:8px;font-size:15px;line-height:1.32;color:#AFBCD2}
#s-final .l11-cap p,#s-final .l11-bcap p{margin:0}
#s-final .l11-cap .h,#s-final .l11-bcap .h{font-weight:700;color:#fff}
#s-final .l11-big{position:absolute;inset:0;display:none;z-index:8;cursor:pointer;background:#03060E}
#s-final.l11-one .l11-big{display:block}
#s-final .l11-bcap{position:absolute;left:0;right:0;bottom:0;padding:14px 160px 18px;font-size:20px;line-height:1.35;color:#C9D5E8;background:linear-gradient(0deg,rgba(3,6,14,.96),rgba(3,6,14,.82) 70%,rgba(3,6,14,0))}
#s-final .l11-inst .l11-head{position:absolute;left:160px;top:78px;margin:0}
#s-final .l11-inst .l11-head .k{margin:0;font-size:20px;font-weight:600;color:#8FA6C8}
#s-final .l11-inst .l11-head .t{margin:8px 0 0;font-size:56px;font-weight:700;letter-spacing:-.024em;color:#fff}
#s-final.l11-one .head{visibility:hidden}
/* live: the keys' views (1 / 2 a real screen large; 3 / 4 a moment again; K the conditions) */
#s-final .a10-kp.l11kp{left:auto;right:80px;top:560px}
#s-final .l11-zoom{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(3,6,14,.92);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#s-final.l11-zoomed .l11-zoom{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
#s-final .l11-zoom img{max-width:1500px;max-height:820px;border-radius:16px;box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.6)}
#s-final .l11-zoom .zt{margin:0;font-size:24px;font-weight:600;color:#C9D5E8}
#s-final.l11-zoomed .head{visibility:hidden}
#s-final .l11-pane .dm{position:absolute;inset:-1px;border-radius:18px;background:#040811;opacity:0;pointer-events:none;will-change:opacity}
/* director's pass: the spotlight on "Áp dụng" (02), the ripple on the seal where the AI's light lands (held inside the ring) */
#s-final .l11-pane .sp{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(circle 190px at var(--x) var(--y),rgba(4,8,17,0) 30%,rgba(4,8,17,.85) 100%)}
#s-final .l11-pane.lr .rw{position:absolute;inset:0;border-radius:37px;overflow:hidden}
#s-final .l11-pane.lr .rp{position:absolute;left:163px;top:403px;width:1400px;height:1400px;margin:-700px 0 0 -700px;border-radius:50%;border:12px solid rgba(255,208,125,.95);box-shadow:0 0 40px 10px rgba(240,166,58,.5),inset 0 0 40px 10px rgba(240,166,58,.4);background:radial-gradient(circle,rgba(255,190,100,0) 55%,rgba(255,190,100,.3) 96%);opacity:0;transform:scale(.04);will-change:transform,opacity}
#s-final .l11-pane.lr .hp{position:absolute;left:163px;top:403px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,1) 0,rgba(255,184,86,.75) 24%,rgba(255,160,60,0) 70%);opacity:0;will-change:transform,opacity}