/* NEXQUOTE Q&A · "Sơ đồ hệ thống" (LỆNH 24 part B): the module's own look, every rule under .sys-map (the root it builds inside the
   host). The Q&A's language: its navy, white model blocks in three tones, blue = data, amber = blocked or cut, ink on light faces.
   Stage pixels (1920 × 1080, scaled by the host); the bottom 70 px stay free for the deck's bar. Only opacity and transform move;
   body.safe / body.calm / .sm-still: every state lands at once. */
.sys-map{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;margin:0;color:#EEF3FA;font-family:var(--f);
  background:radial-gradient(1100px 820px at 62% 54%,#12224C 0,#0A1533 48%,#050B1E 100%);-webkit-user-select:none;user-select:none;
  --sm-lb:#7FB0FF;--sm-lb2:#4F86EE;--sm-la:#F0A63A;--sm-lw:#EEF3FA;--sm-lm:#9EB2DC;--sm-lk:#0A1328;
  --sm-out:cubic-bezier(.22,1,.36,1);--sm-t:.45s}
.sys-map *{box-sizing:border-box}
.sys-map p,.sys-map h1{margin:0}
.sys-map button{font-family:var(--f)}
.sys-map .sm-svg{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible;will-change:opacity;transition:opacity var(--sm-t) var(--sm-out)}

/* ---- the chrome: the title, the three modes as steps (keys 1–3), the switches top right ---- */
.sys-map .sm-title{position:absolute;left:120px;top:40px;font:600 44px/1.12 var(--f);letter-spacing:-.018em;white-space:nowrap;color:var(--sm-lw)}
.sys-map .sm-steps{position:absolute;left:112px;top:110px;display:flex;align-items:center;flex-wrap:nowrap;z-index:4}
.sys-map .sm-st{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border:0;border-radius:24px;background:none;color:var(--sm-lm);
  font:600 24px/1 var(--f);white-space:nowrap;cursor:pointer;transition:color .2s var(--sm-out),background-color .2s var(--sm-out)}
.sys-map .sm-st i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid rgba(158,178,220,.5);font:600 22px/1 var(--f);font-style:normal;
  font-variant-numeric:tabular-nums;color:var(--sm-lm);transition:background-color .2s,border-color .2s,color .2s}
.sys-map .sm-st+.sm-st::before{content:"";width:26px;height:2px;margin:0 6px 0 -10px;background:rgba(158,178,220,.28)}
.sys-map .sm-st:hover{color:var(--sm-lw);background:rgba(127,176,255,.08)}
.sys-map .sm-st.on{color:var(--sm-lw)}
.sys-map .sm-st.on i{background:var(--sm-lb2);border-color:var(--sm-lb2);color:#fff}
.sys-map .sm-st:focus-visible,.sys-map .sm-tg:focus-visible,.sys-map .sm-sb:focus-visible,.sys-map .sm-back:focus-visible{outline:3px solid var(--sm-lb);outline-offset:2px}
.sys-map .sm-tog{position:absolute;right:80px;top:42px;display:flex;gap:12px;z-index:4}
.sys-map .sm-tg{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 14px 0 18px;border-radius:23px;border:1.5px solid rgba(143,192,255,.42);
  background:rgba(14,27,58,.86);color:var(--sm-lw);font:600 22px/1 var(--f);white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s}
.sys-map .sm-tg:hover{border-color:var(--sm-lb);background:rgba(32,58,112,.95)}
.sys-map .sm-tg .sw{position:relative;flex:none;width:40px;height:22px;border-radius:11px;background:rgba(158,178,220,.28);transition:background-color .2s}
.sys-map .sm-tg .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--sm-lw);transition:transform .25s var(--sm-out)}
.sys-map .sm-tg[aria-checked="true"]{border-color:var(--sm-lb);background:rgba(79,134,238,.24)}
.sys-map .sm-tg[aria-checked="true"] .sw{background:var(--sm-lb2)}
.sys-map .sm-tg[aria-checked="true"] .sw::after{transform:translateX(18px)}
.sys-map .sm-tg[data-t="pilot"][aria-checked="true"]{border-color:var(--sm-la);background:rgba(240,166,58,.16)}
.sys-map .sm-tg[data-t="pilot"][aria-checked="true"] .sw{background:var(--sm-la)}
.sys-map .sm-tg.sec{border-color:rgba(158,178,220,.3);background:transparent;color:var(--sm-lm);font-weight:500}
.sys-map .sm-tg.sec[aria-checked="true"]{color:var(--sm-lw);border-color:var(--sm-lb);background:rgba(79,134,238,.14)}
/* mode 2: "Dữ liệu mô phỏng" in the corner and the counter under it; mode 3: the legend and the invitation */
.sys-map .sm-m2top,.sys-map .sm-m3top{position:absolute;right:80px;top:44px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;z-index:3}
.sys-map .sm-tag{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 7px;border-radius:999px;background:rgba(190,208,235,.08);font:500 22px/1.2 var(--f);color:var(--sm-lm)}
.sys-map .sm-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sm-la)}
.sys-map .sm-count{font:600 22px/1.2 var(--f);color:var(--sm-lm);white-space:nowrap}
.sys-map .sm-count span{opacity:.42;transition:opacity var(--sm-t) var(--sm-out),color var(--sm-t)}
.sys-map .sm-count span.on{opacity:1;color:var(--sm-lw)}
.sys-map .sm-count span:first-child.on{color:var(--sm-lb)}
.sys-map .sm-count i{font-style:normal;margin:0 10px;color:var(--sm-lm)}
.sys-map .sm-legend{display:flex;align-items:center;gap:10px;font:500 22px/1.2 var(--f);color:var(--sm-lm)}
.sys-map .sm-legend b{display:inline-block;flex:none}
.sys-map .sm-legend .sq{width:22px;height:18px;border-radius:3px;background:var(--sm-lb);box-shadow:inset -6px -4px 0 var(--sm-lb2)}
.sys-map .sm-legend .lk{width:18px;height:15px;margin:6px 0 0 12px;border-radius:3px;background:var(--sm-la);position:relative}
.sys-map .sm-legend .lk::before{content:"";position:absolute;left:3px;top:-9px;width:8px;height:9px;border:2.5px solid var(--sm-la);border-bottom:0;border-radius:6px 6px 0 0}
.sys-map .sm-cta{font:500 22px/1.2 var(--f);color:var(--sm-lb)}

/* ---- the diagram (SVG): headings, blocks, words on the faces, links ---- */
.sys-map .sm-svg text{font-family:var(--f);fill:var(--sm-lw)}
.sys-map .sm-svg .sm-h{font-size:30px;font-weight:700;letter-spacing:-.01em}
.sys-map .sm-svg .sm-n{font-size:24px;font-weight:700}
.sys-map .sm-svg .sm-n26{font-size:26px;font-weight:700}
.sys-map .sm-svg .sm-c22{font-size:22px;font-weight:500}
.sys-map .sm-svg .sm-xn{font-size:22px;font-weight:700}
.sys-map .sm-svg .ink{fill:var(--sm-lk)}
.sys-map .sm-svg .ink2{fill:#4A5368}
.sys-map .sm-svg .sm-mu{fill:var(--sm-lm)}
.sys-map .sm-svg .sm-am{fill:var(--sm-la);font-weight:600}
.sys-map .sm-svg .b{fill:#fff;font-weight:700}
.sys-map .sm-node{cursor:pointer;outline:none;transition:opacity var(--sm-t) var(--sm-out)}
.sys-map .sm-node.dim{opacity:.3}
.sys-map .sm-node .ring{fill:none;stroke:var(--sm-lb);stroke-width:3;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--sm-out)}
.sys-map.m1 .sm-node:hover .ring{opacity:.5}
.sys-map .sm-node:focus-visible .ring,.sys-map .sm-node.sel .ring{opacity:1}
.sys-map .sm-node .sm-rule{stroke:rgba(10,19,40,.16);stroke-width:1.5}
.sys-map .sm-node .sm-bul{fill:var(--sm-lb2)}
.sys-map .sm-noai rect{fill:none;stroke:rgba(10,19,40,.55);stroke-width:1.5}
.sys-map .sm-noai text{fill:var(--sm-lk);font-weight:600}
.sys-map .sm-aib{opacity:0;transition:opacity .35s var(--sm-out)}
.sys-map .sm-aib rect{fill:var(--sm-lb2)}
.sys-map.m1.ai .sm-aib{opacity:1}
.sys-map .sm-node.sx-ext .xb{fill:rgba(10,21,51,.62);stroke:rgba(158,178,220,.6);stroke-width:1.5;stroke-dasharray:6 5;transition:stroke .3s}
.sys-map .sm-node.sx-ext .xc,.sys-map .sm-node.sx-ext .xo{transition:opacity .35s var(--sm-out)}
.sys-map .sm-node.sx-ext .xo{opacity:0}
.sys-map.pilot .sm-node.sx-ext .xb{stroke:rgba(240,166,58,.85)}
.sys-map.pilot .sm-node.sx-ext .xc{opacity:0}
.sys-map.pilot .sm-node.sx-ext .xo{opacity:1}
.sys-map .sm-link{transition:opacity var(--sm-t) var(--sm-out)}
.sys-map .sm-link.dim{opacity:.28}
.sys-map .sm-link .b{fill:none;stroke:rgba(127,176,255,.5);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sys-map .sm-link .l{fill:none;stroke:var(--sm-lb);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s var(--sm-out)}
.sys-map .sm-link .sx-ah{fill:rgba(127,176,255,.7)}
.sys-map .sm-link .ahl{fill:var(--sm-lb);opacity:0;transition:opacity .4s var(--sm-out)}
.sys-map .sm-link.lit .l,.sys-map .sm-link.lit .ahl{opacity:1}
.sys-map .sm-link.log .b,.sys-map .sm-link.log .l{stroke-dasharray:7 7}
.sys-map .sm-link.sx-ext .b,.sys-map .sm-link.sx-ext .l{stroke-dasharray:6 6}
.sys-map .sm-link.sx-ext .ed{fill:var(--sm-lb)}
.sys-map .sm-link.sx-ext .ok,.sys-map .sm-link.sx-ext .cut{transition:opacity .4s var(--sm-out)}
.sys-map .sm-link.sx-ext .cut{opacity:0}
.sys-map .sm-link.sx-ext .cut .c{fill:none;stroke:var(--sm-la);stroke-width:2.5;stroke-dasharray:6 6;stroke-linecap:round}
.sys-map .sm-link.sx-ext .cut .x{fill:none;stroke:var(--sm-la);stroke-width:3.5;stroke-linecap:round}
.sys-map.pilot .sm-link.sx-ext .ok{opacity:0}
.sys-map.pilot .sm-link.sx-ext .cut{opacity:1}
.sys-map .sm-lbl,.sys-map .sm-people g{transition:opacity var(--sm-t) var(--sm-out)}
.sys-map .sm-lbl.dim,.sys-map .sm-people g.dim{opacity:.3}
.sys-map .sm-people{transition:opacity var(--sm-t) var(--sm-out)}
.sys-map.m2 .sm-people{opacity:0}
/* the people's names (HTML, beside the figure on the block) */
.sys-map .sm-pp{position:absolute;height:32px;padding:0 13px;border-radius:16px;background:rgba(5,11,30,.86);border:1.5px solid rgba(143,192,255,.42);
  font:600 22px/29px var(--f);color:var(--sm-lw);white-space:nowrap;transform:translate(-100%,-50%);pointer-events:none;z-index:2;transition:opacity var(--sm-t) var(--sm-out)}
.sys-map .sm-pp.dim{opacity:.3}

/* ---- mode 2: the token, its light pool, the "sau pilot" line ---- */
.sys-map .sm-token{opacity:0;pointer-events:none;transition:opacity .35s var(--sm-out)}
.sys-map.m2 .sm-token.on{opacity:1}
.sys-map .sm-token .tsh{opacity:0;transition:opacity .3s var(--sm-out)}
.sys-map .sm-token .tsh.on{opacity:1}
.sys-map .sm-token .trk{transition:opacity .4s var(--sm-out)}
.sys-map .sm-token .trk.off{opacity:.2}
.sys-map .sm-post{opacity:0;pointer-events:none;transition:opacity .6s var(--sm-out)}
.sys-map .sm-post.on{opacity:1}
.sys-map .sm-post .pl{fill:none;stroke:var(--sm-la);stroke-width:3;stroke-dasharray:9 8;stroke-linecap:round}
.sys-map .sm-post .pa{fill:var(--sm-la)}
.sys-map .sm-post .sx-pd{fill:var(--sm-la);opacity:0;transition:opacity .3s}
.sys-map .sm-post.run .sx-pd{opacity:1}

/* ---- mode 3: the table ---- */
.sys-map .sm-svg .sm-th{font-size:26px;font-weight:700}
.sys-map .sm-svg .sm-rn{font-size:26px;font-weight:700}
.sys-map .sm-sep{stroke:rgba(158,178,220,.3);stroke-width:1.5;stroke-dasharray:6 8}
.sys-map .sm-row{cursor:pointer;outline:none}
.sys-map .sm-row .hl{fill:rgba(127,176,255,.07);opacity:0;transition:opacity .2s}
.sys-map .sm-row .bar{fill:var(--sm-lb);opacity:0;transition:opacity .2s}
.sys-map .sm-row:hover .hl,.sys-map .sm-row:focus-visible .hl{opacity:1}
.sys-map .sm-row.picked .hl{opacity:1;fill:rgba(127,176,255,.12)}
.sys-map .sm-row.picked .bar,.sys-map .sm-row:focus-visible .bar{opacity:1}

/* ---- the bands at the bottom (above the deck's 70 px) ---- */
.sys-map .sm-band1{position:absolute;left:120px;right:120px;top:902px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:3}
.sys-map .sm-tech{display:flex;align-items:center;gap:10px;height:36px;transition:opacity var(--sm-t) var(--sm-out),visibility 0s}
.sys-map:not(.tech) .sm-tech{opacity:0;visibility:hidden;transition:opacity var(--sm-t) var(--sm-out),visibility 0s var(--sm-t)}
.sys-map .sm-tech .sx-tl{font:600 22px/1 var(--f);color:var(--sm-lm);margin-right:6px}
.sys-map .sm-tech .tt{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;border:1.5px solid rgba(127,176,255,.55);background:rgba(79,134,238,.12);
  font:600 22px/1 var(--f);color:var(--sm-lb);white-space:nowrap}
.sys-map .sm-msgrow{display:flex;align-items:center;gap:18px;height:44px}
.sys-map .sm-msg{font:600 26px/1.2 var(--f);color:var(--sm-lw);white-space:nowrap;transition:opacity .35s var(--sm-out)}
.sys-map .sm-msg.quiet{font-weight:500;font-size:24px;color:var(--sm-lm)}
.sys-map .sm-msg.gone{opacity:0}
.sys-map .sm-back{display:none;align-items:center;height:44px;padding:0 18px;border-radius:22px;border:1.5px solid var(--sm-lb);background:rgba(79,134,238,.2);
  color:var(--sm-lw);font:600 22px/1 var(--f);white-space:nowrap;cursor:pointer}
.sys-map.rowv .sm-back{display:inline-flex}
.sys-map .sm-back:hover{background:rgba(79,134,238,.34)}
.sys-map .sm-band2{position:absolute;left:100px;right:100px;top:896px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
.sys-map .sm-bar{display:grid;grid-template-columns:repeat(7,246px);justify-content:center}
.sys-map .sm-sb{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;border:0;border-radius:10px;background:none;color:var(--sm-lm);cursor:pointer}
.sys-map .sm-sb .l1{display:flex;align-items:center;gap:8px;font:600 24px/1 var(--f);white-space:nowrap;transition:color .2s}
.sys-map .sm-sb .l1 i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid rgba(158,178,220,.5);font:600 22px/1 var(--f);font-style:normal;
  font-variant-numeric:tabular-nums;transition:background-color .2s,border-color .2s,color .2s}
.sys-map .sm-sb .l2{display:flex;gap:6px;justify-content:center;transition:opacity .3s}
.sys-map .sm-sb .bd{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:15px;border:1.5px solid rgba(158,178,220,.45);font:600 22px/1 var(--f);font-style:normal;white-space:nowrap;color:var(--sm-lm)}
.sys-map .sm-sb .bd.ai{border-color:var(--sm-lb2);background:rgba(79,134,238,.22);color:var(--sm-lb)}
.sys-map .sm-sb .bd.p{border-color:rgba(238,243,250,.55);color:var(--sm-lw)}
.sys-map .sm-sb:not(.on):not(.past) .l2{opacity:.5}
.sys-map .sm-sb.past .l1{color:var(--sm-lw)}
.sys-map .sm-sb.past .l1 i{border-color:var(--sm-lb2);color:var(--sm-lb)}
.sys-map .sm-sb.on .l1{color:var(--sm-lw)}
.sys-map .sm-sb.on .l1 i{background:var(--sm-lb2);border-color:var(--sm-lb2);color:#fff}
.sys-map .sm-stext{font:600 26px/1.2 var(--f);color:var(--sm-lw);white-space:nowrap;text-align:center}
.sys-map .sm-stext.case{color:var(--sm-lm);font-weight:500}
.sys-map .sm-strip{position:absolute;left:120px;right:120px;top:878px;text-align:center;font:600 26px/1.3 var(--f);color:var(--sm-lw);white-space:nowrap;z-index:3}

/* ---- the card of a chosen block: under the diagram (the band), in line with the block, its name first; the band's own words step out ---- */
.sys-map .sm-card{position:absolute;left:0;top:894px;display:flex;align-items:center;gap:26px;padding:10px 26px 11px;border-radius:14px;background:#081129;border:1.5px solid rgba(127,176,255,.6);
  box-shadow:0 18px 40px rgba(0,2,10,.5);white-space:nowrap;z-index:6;opacity:0;visibility:hidden;translate:0 10px;
  transition:opacity .35s var(--sm-out),translate .4s var(--sm-out),visibility 0s .35s}
.sys-map .sm-card::before{content:"";position:absolute;left:var(--nx,50%);top:-9px;width:16px;height:16px;margin-left:-8px;background:#081129;border-left:1.5px solid rgba(127,176,255,.6);
  border-top:1.5px solid rgba(127,176,255,.6);transform:rotate(45deg)}
.sys-map .sm-card.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .35s var(--sm-out),translate .4s var(--sm-out),visibility 0s}
.sys-map .sm-card .nm{font:700 28px/1.3 var(--f);color:var(--sm-lw);max-width:300px;white-space:normal}
.sys-map .sm-card .ls{display:grid;gap:2px;padding-left:26px;border-left:1.5px solid rgba(158,178,220,.25)}
.sys-map .sm-card .r{display:flex;align-items:baseline;gap:16px;font:500 24px/30px var(--f);color:var(--sm-lw)}
.sys-map .sm-card .r b{flex:none;width:98px;font:600 22px/30px var(--f);color:var(--sm-lb)}
.sys-map .sm-band1{transition:opacity .3s var(--sm-out)}
.sys-map.m1.sel .sm-band1{opacity:0;pointer-events:none}

/* ---- which mode shows what (fades; the hidden layer takes no clicks) ---- */
.sys-map .sm-o1,.sys-map .sm-o2,.sys-map .sm-o3{transition:opacity var(--sm-t) var(--sm-out),visibility 0s}
.sys-map:not(.m1) .sm-o1,.sys-map:not(.m2) .sm-o2,.sys-map:not(.m3) .sm-o3{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity var(--sm-t) var(--sm-out),visibility 0s var(--sm-t)}
.sys-map.m3 .sm-svgd,.sys-map:not(.m3) .sm-svgt{opacity:0;pointer-events:none}
.sys-map:not(.m1) .sm-card{transition:opacity .2s,visibility 0s .2s}

/* ---- the warm-up after mount (sys-map.js warm()): three frames, the hidden layers at 1 %, the blocks at 99 %, no fades ---- */
.sys-map.sm-warm .sm-svgt,.sys-map.sm-warm .sm-card,.sys-map.sm-warm .sm-o2,.sys-map.sm-warm .sm-o3,.sys-map.sm-warm .sm-post,.sys-map.sm-warm .sm-token{opacity:.01!important;visibility:visible!important;transition:none!important}
.sys-map.sm-warm .sm-node,.sys-map.sm-warm .sm-link{opacity:.99;transition:none}

/* ---- Safe mode, calm and still frames: no motion, every state at once ---- */
body.safe .sys-map *,body.calm .sys-map *,.sys-map.sm-still *,body.safe .sys-map *::before,body.calm .sys-map *::before,.sys-map.sm-still *::before,
body.safe .sys-map *::after,body.calm .sys-map *::after,.sys-map.sm-still *::after{transition:none!important;animation:none!important}
/* LỆNH 24 · in the deck: the host covers the scene; mode 2 names the case under the counter; the token a little larger */
#s-sys .sys-host{position:absolute;inset:0}
.sys-map .sm-case{font:500 22px/1.2 var(--f);color:var(--sm-lw);white-space:nowrap}
.sys-map .sm-token .tsh{transform:scale(1.35)}
#s-sys.sys-pre{visibility:visible!important;opacity:.01!important;transition:none!important;pointer-events:none}   /* the idle warm-up (app.js sysWarm) */
/* LỆNH 24 (fresh-eye) · the AI badge always on the two AI blocks; the key under the diagram; the sample quote on its block (mode 2);
   a role's padlocks; the column headings higher so the token never covers them */
.sys-map .sm-aib{opacity:1}
.sys-map .sm-svg .ink2.hot{fill:#1F5FD0;font-weight:700}
.sys-map .sm-leg{display:flex;align-items:center;gap:10px;font:500 22px/1 var(--f);color:var(--sm-lm);transition:opacity .3s var(--sm-out)}
.sys-map .sm-leg.gone{opacity:0}
.sys-map .sm-leg i{font-style:normal;margin:0 8px}
.sys-map .sm-leg .lg-ai{display:inline-grid;place-items:center;height:30px;padding:0 10px;border-radius:8px;background:var(--sm-lb2);color:#fff;font-weight:700}
.sys-map .sm-leg .lg-q{display:inline-grid;place-items:center;height:30px;padding:0 12px;border-radius:15px;border:1.5px solid rgba(238,243,250,.6);color:var(--sm-lw);font-weight:600}
.sys-map .sm-leg .lg-p{width:14px;height:24px;border-radius:7px 7px 4px 4px;background:#E8E3DA;box-shadow:0 -14px 0 -3px #E8E3DA;margin:10px 2px 0 0}
.sys-map .sm-lockc{opacity:0;transition:opacity .35s var(--sm-out);pointer-events:none}
.sys-map .sm-lockc.on{opacity:1}
.sys-map .sm-lockc rect{fill:rgba(40,24,6,.96);stroke:var(--sm-la);stroke-width:2}
.sys-map .sm-lockc text{fill:#F7D9A8;font-weight:600}
.sys-map .sm-token .tsh{transform:scale(1.15)}
.sys-map .sm-band1{position:absolute}
.sys-map .sm-band1 .sm-leg{position:absolute;left:0;right:0;top:0;height:36px;justify-content:center}   /* the key shares the tech row's place (never both) */
.sys-map .sm-m2top{gap:6px}
.sys-map.rowv [data-role].dim{opacity:0}   /* a role's path: the other roles step out (their chips make room for the padlocks) */