/* Scene 11 · Trao quyền AI (LỆNH 14, rebuilt LỆNH 31). A WebGL canvas of its own (.st-gl, pb-stairs.js: the white stairs, the glass door
   and its locks on 03, the review room at the top, the blue AI, the slab with its engraved line, drawn opaque over the stage's navy by its
   final pass) under the DOM that scene-stairs10.js writes from one clock (NQ_CK). On screen: the deck's eyebrow and title (.head), the
   white Zalo ticket on step 01 (then its chip), the AI's draft and the person's confirm (02), the message held at the glass door (03),
   each step's label right of its tread, the permission bar left of the stairs, the door's words, the room's label on the model, the
   closing line; key K: the conditions to open a step. Colours: blue = the AI, white = a person, amber = what people keep. */
#s-final,#s-final.active{filter:none!important;transform:none!important}
#s-final.a10-pre{opacity:.004!important;visibility:visible!important;transition:none!important;pointer-events:none}   /* warmed under the scene before: its first frame rastered, never seen */
#s-final .a10{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:#070D1C}
#s-final .a10 *{box-sizing:border-box}
#s-final .a10 p{margin:0}
#s-final .a10>*,#s-final .a10-g>*{position:absolute;margin:0;left:0;top:0}
#s-final .head{z-index:6}
#s-final .a10 .st-gl{width:1920px;height:1080px;display:block}
#s-final .a10-still{width:1920px;height:1080px;max-width:none;display:none}
#s-final.a10-still-on .a10-still{display:block}
#s-final.a10-still-on .a10 .st-gl{display:none}
#s-final.a10-warm .a10>:not(.st-gl){visibility:hidden}
#s-final .a10-g{width:1920px;height:1080px;will-change:opacity}
#s-final .a10-scr{width:1920px;height:300px;opacity:0;background:linear-gradient(180deg,#070D1C 0,rgba(7,13,28,.94) 175px,rgba(7,13,28,0) 300px);will-change:opacity}
#s-final .a10-svg{width:1920px;height:1080px;overflow:visible}
#s-final .a10-svg path{fill:none;opacity:0}
#s-final .a10-svg .ld{stroke:#8FB4F0;stroke-width:1.4}
#s-final .a10-svg .ld.dd{stroke:#AEB9CB;stroke-width:1.6;stroke-dasharray:5 6}
#s-final .ic{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s-final :is(.a10-tk,.a10-chip,.a10-bub,.a10-btn,.a10-hand,.a10-b2,.a10-lab,.a10-cell,.a10-bend,.a10-door,.a10-room,.a10-line){opacity:0;will-change:opacity,transform}
/* the customer's message: a white ticket (no logo) */
#s-final .a10-tk{width:450px;padding:14px 20px 16px;border-radius:10px;background:#F4F7FC;color:#0B1630;overflow:hidden;transform-origin:0 100%;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.6)}
#s-final .a10-tk .hd{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:600;color:#4A5C7C}
#s-final .a10-tk .hd .ic{width:22px;height:22px;color:#2456D6}
#s-final :is(.a10-tk .hd,.a10-chip) .zl{display:block;flex:none;width:32px;height:32px;color:inherit}   /* the real Zalo tile (LỆNH 46): 32 px in a header line */
#s-final .a10-tk .mt{margin-top:6px;font-size:24px;font-weight:500;line-height:1.32;color:#0B1630}
#s-final .a10-tk .fs{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #D3DCEA}
#s-final .a10-tk .f{display:flex;align-items:center;gap:8px;width:max-content;padding:2px 10px 3px;border-radius:5px;font-size:24px;font-weight:600;line-height:1.3;opacity:0}
#s-final .a10-tk .f .ic{width:22px;height:22px;stroke-width:2.4}
#s-final .a10-tk .f.ok{color:#1747B8;background:#E3ECFD}
#s-final .a10-tk .f.am{color:#8A4E00;background:#FFEFD6;box-shadow:inset 0 0 0 1.5px #F0A63A}
#s-final .a10-tk .f.am .ic{color:#D88A1C}
#s-final .a10-tk .f.am.pulse{box-shadow:inset 0 0 0 1.5px #F0A63A,0 0 0 4px rgba(240,166,58,.3)}
#s-final .a10-tk .sc{position:absolute;left:0;right:0;top:0;height:40px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(80,140,255,0),rgba(80,140,255,.35) 60%,rgba(80,140,255,0));border-bottom:2px solid rgba(60,120,255,.85);will-change:transform,opacity}
#s-final .a10-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 6px;border-radius:6px;white-space:nowrap;font-size:24px;font-weight:600;line-height:1.25;
  color:#0B1630;background:#E8EEF8;box-shadow:0 6px 16px rgba(0,0,0,.35)}
#s-final .a10-chip .ic{width:22px;height:22px;color:#2456D6}
/* 02: the AI's draft (blue), the person's confirm (white when pressed), the hand */
#s-final .a10-bub{padding:10px 18px 12px;border-radius:14px 14px 4px 14px;white-space:nowrap;font-size:26px;font-weight:600;line-height:1.25;color:#fff;
  background:#2456D6;box-shadow:0 0 0 1px #6AA5FF,0 10px 26px rgba(20,60,180,.45);transform-origin:0 100%}
#s-final .a10-btn{display:flex;align-items:center;gap:9px;padding:8px 16px 9px;border-radius:8px;white-space:nowrap;font-size:24px;font-weight:700;line-height:1.2;
  color:#DCE4F2;background:rgba(9,16,34,.9);border:1.5px solid rgba(220,228,242,.6)}
#s-final .a10-btn .ic{width:22px;height:22px;opacity:.4}
#s-final .a10-btn.on{color:#0B1630;background:#F4F7FC;border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.45)}
#s-final .a10-btn.on .ic{opacity:1;color:#1747B8}
#s-final .a10-hand{width:58px;height:58px;color:#0B1630}
#s-final .a10-hand .ic{width:58px;height:58px;stroke-width:1.5;fill:#F1F3F7}
/* 03: the message held at the glass door */
#s-final .a10-b2{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px 12px 12px 4px;color:#fff;background:#2456D6;box-shadow:0 0 0 1px #6AA5FF;transition:background .4s,color .4s,box-shadow .4s}
#s-final .a10-b2 .ic{width:26px;height:26px}
#s-final .a10-b2.held{color:#C7D0DE;background:rgba(40,52,76,.92);box-shadow:0 0 0 1.5px rgba(150,166,190,.7)}
/* the steps' labels */
#s-final .a10-lab{white-space:nowrap}
#s-final .a10-lab .l1{display:flex;align-items:baseline;gap:12px}
#s-final .a10-lab .l1 i{font:600 24px/1 "JetBrains Mono",ui-monospace,monospace;font-style:normal;color:#8FC0FF}
#s-final .a10-lab .l1 b{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:.01em;color:#fff}
#s-final .a10-lab .l2{margin-top:4px;font-size:24px;font-weight:500;line-height:1.25;color:#C9D5E8}
#s-final .a10-lab .st{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#9CC6FF}
#s-final .a10-lab.on .st::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#6AA5FF;box-shadow:0 0 10px rgba(106,165,255,.9)}
#s-final .a10-lab.part .st::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,#6AA5FF 50%,transparent 50%);box-shadow:0 0 0 1.5px #6AA5FF}
#s-final .a10-lab.off .l1 i{color:#A3AEC0}
#s-final .a10-lab.off .l1 b{color:#DCE2EC}
#s-final .a10-lab.off .st{color:#B3BDCC}
#s-final .a10-lab.off .st .ic{width:20px;height:20px}
/* the permission bar: white = a person, blue = the AI (solid: in use · striped: partly · dashed: not active) */
#s-final .a10-cell{display:flex;gap:3px;width:84px;height:96px}
#s-final .a10-cell i{display:block;height:100%;border-radius:6px}
#s-final .a10-cell .p{flex:none;background:#EEF2F8;box-shadow:0 0 12px rgba(255,255,255,.18)}
#s-final .a10-cell .a{flex:1;min-width:0;opacity:0;display:grid;place-items:center}
#s-final .a10-cell .a b{font-size:24px;font-weight:800;font-style:normal;line-height:1;color:#fff;text-shadow:0 0 6px rgba(20,50,140,.9)}
#s-final .a10-cell.c3 .a b{color:#9DB8F2;text-shadow:none}
#s-final .a10-cell.c1 .a{background:#3D7BFF;box-shadow:0 0 14px rgba(61,123,255,.55)}
#s-final .a10-cell.c2 .a{background:repeating-linear-gradient(135deg,#3D7BFF 0 6px,rgba(61,123,255,.35) 6px 12px);box-shadow:0 0 0 1.5px #3D7BFF}
#s-final .a10-cell.c3 .a{background:rgba(61,123,255,.08);border:2px dashed #7E95BC}
#s-final .a10-bend{white-space:nowrap;font-size:24px;font-weight:600;line-height:1.2;color:#E6ECF6}
/* the door's words, the room's label, the closing line */
#s-final .a10-door{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:26px;font-weight:600;line-height:1.25;color:#F1F4F9}
#s-final .a10-door .ic{width:24px;height:24px;color:#F0A63A}
#s-final .a10-room{white-space:nowrap;text-align:center;z-index:2}
#s-final .a10-room .nq-txt{font-size:26px}
#s-final>.a10-line{position:absolute;left:0;top:0;margin:0;z-index:6;pointer-events:none}
#s-final.a10-warm>.a10-line{visibility:hidden}
#s-final .a10-line{font-size:54px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#fff;white-space:nowrap}
/* key K: the conditions to open a step */
#s-final .a10-kp{left:160px;top:304px;width:660px;padding:28px 32px 28px;z-index:8;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;
  background:rgba(8,14,30,.96);border:1px solid rgba(127,166,255,.45);box-shadow:0 24px 60px rgba(0,0,0,.55)}
#s-final.a10-kp-on .a10-kp{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
#s-final .a10-kp .kh{font-size:32px;font-weight:700;line-height:1.2;color:#fff}
#s-final .a10-kp ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
#s-final .a10-kp li{display:flex;align-items:baseline;gap:12px;font-size:27px;font-weight:600;line-height:1.3;color:#E8EEF8}
#s-final .a10-kp li b{color:#8FC0FF;font-weight:700}
#s-final .a10-kp .kn{margin-top:16px;padding-top:14px;border-top:1px solid rgba(127,166,255,.3);font-size:24px;font-weight:500;line-height:1.35;color:#C9D5E8}
#s-final .a10-kp .ks{margin-top:8px;font-size:24px;color:#8E9DB6}