:root{--bg:#F3F4F5;--panel:#FFFFFF;--line:#CDD3D7;--line2:#E3E7E9;--ink:#1B2428;--mute:#66737A;--acc:#0A66A8;--ok:#2E9E5B;--warn:#D98A00;--crit:#D6372E}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
button{font-family:inherit;cursor:pointer}
a{color:var(--acc)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bg .bg-grid{position:absolute;inset:0;width:100%;height:100%}
#bg .bg-chain{position:absolute;left:0;bottom:0;width:100%;height:220px}
#app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:230px}

/* thanh trên */
.top{display:flex;align-items:center;gap:16px;padding:0 24px;min-height:56px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.1em;font-size:13px;cursor:pointer;background:none;border:0;color:var(--ink);padding:0}
.logo{width:28px;height:28px;background:var(--acc);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:5px}
.logo span{background:#F3F4F5}.logo span:last-child{opacity:.4}
.scopebox{position:relative}
.scope{font-size:12px;color:var(--ink);border:1px solid var(--line);background:var(--panel);padding:6px 12px}
.scope:hover{border-color:var(--acc)}
.scopemenu{position:absolute;top:100%;left:0;margin-top:4px;min-width:260px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 24px rgba(27,36,40,.14);z-index:30;display:flex;flex-direction:column}
.scopemenu button{border:0;border-bottom:1px solid var(--line2);background:transparent;text-align:left;padding:11px 14px;font-size:14px;color:var(--ink)}
.scopemenu button:hover{background:#EEF4F9}
.scopemenu button.on{font-weight:600;color:var(--acc)}
.sp{flex:1}
.date{font-size:12px;color:var(--mute)}
.seg{display:flex;border:1px solid var(--line)}
.seg button{border:0;padding:6px 12px;font-size:12px;font-weight:500;background:transparent;color:var(--mute)}
.seg button.on{background:var(--acc);color:#fff;font-weight:600}
.who{width:28px;height:28px;background:var(--line);display:grid;place-items:center;font-weight:600;font-size:11px}
.nav{display:flex;gap:2px}
.nav button{border:0;background:transparent;padding:18px 12px;font-size:13px;color:var(--mute);border-bottom:2px solid transparent}
.nav button.on{color:var(--ink);border-bottom-color:var(--acc);font-weight:600}

/* thanh chỉ số */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border-bottom:1px solid var(--line)}
.strip>div{padding:14px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.strip>div:last-child{border-right:0}
.lbl{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.val{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px #2E9E5B22}.dot.warn{background:var(--warn);box-shadow:0 0 0 3px #D98A0022}.dot.crit{background:var(--crit);box-shadow:0 0 0 3px #D6372E22}.dot.info{background:var(--acc);box-shadow:0 0 0 3px #0A66A822}
.c-ok{color:var(--ok)}.c-warn{color:var(--warn)}.c-crit{color:var(--crit)}.c-info{color:var(--acc)}

/* trang chủ */
.home{flex:1;display:flex;flex-direction:column;align-items:center;padding:48px 24px 0}
.ask-wrap{width:100%;max-width:780px;position:relative}
h1{font-size:28px;font-weight:600;letter-spacing:-.01em;margin:0 0 18px}
.ask{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--acc);padding:8px 8px 8px 18px}
.ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:17px;color:var(--ink);padding:10px 0}
.ask .go{width:44px;height:44px;border:0;background:var(--acc);display:grid;place-items:center}
.sugg{position:absolute;left:0;right:0;top:100%;background:var(--panel);border:1px solid var(--line);border-top:0;z-index:5;box-shadow:0 12px 24px rgba(27,36,40,.12)}
.sugg button{display:flex;width:100%;text-align:left;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--line2);background:transparent;padding:12px 18px;font-size:15px;color:var(--ink)}
.sugg button:hover,.sugg button.act{background:#EEF4F9}
.sugg small{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;min-width:84px}
.tiles{width:100%;max-width:1240px;margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{text-align:left;color:inherit;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);padding:16px 18px;min-height:176px;transition:border-color .15s,transform .15s,box-shadow .15s}
.tile:hover,.tile:focus-visible{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,102,168,.16);outline:0}
.tile .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile .cat{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tile .mid{flex:1}
.tile .num{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:500;line-height:1}
.tile .unit{font-size:12px;color:var(--mute);margin-top:6px}
.tile .foot{border-top:1px solid var(--line2);padding-top:10px;font-size:14px;font-weight:600}
.ill{width:108px;flex:none;opacity:.8;transition:opacity .15s}
.ill svg{width:100%;height:auto;display:block}
.tile:hover .ill{opacity:1}
.ill .mv{animation:mvk 2.2s linear infinite;animation-play-state:paused}
.ill .mv2{animation-delay:-1.1s}
.tile:hover .ill .mv{animation-play-state:running}
@keyframes mvk{from{transform:translateX(0)}to{transform:translateX(96px)}}
.ill .pls{transform-box:fill-box;transform-origin:center;animation:plsk 1.4s ease-in-out infinite;animation-play-state:paused}
.tile:hover .ill .pls{animation-play-state:running}
@keyframes plsk{0%,100%{transform:scale(1)}50%{transform:scale(2)}}
.ill .wv{opacity:.35;animation:wvk 1.3s ease-in-out infinite;animation-play-state:paused}
.ill .wv2{animation-delay:-.5s}
.tile:hover .ill .wv{animation-play-state:running}
@keyframes wvk{0%,100%{opacity:.2}50%{opacity:1}}
.ill .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.6);transition:transform .45s ease}
.ill .bar2{transition-delay:.05s}.ill .bar3{transition-delay:.1s}.ill .bar4{transition-delay:.15s}
.tile:hover .ill .bar{transform:scaleY(1)}
.ill .bx{opacity:.25;transition:opacity .3s}
.tile:hover .ill .bx{opacity:1}

/* kết quả */
.res{flex:1;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:16px;padding:20px 24px;max-width:1440px;width:100%;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);padding:20px;min-width:0}
.back{border:0;background:none;color:var(--acc);font-size:13px;font-weight:600;padding:0;margin-bottom:12px}
.qtitle{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.big{font-family:'IBM Plex Mono',monospace;font-size:56px;font-weight:500;line-height:1.05}
.sub{font-size:14px;color:var(--mute);margin-top:6px}
.decide{margin-top:22px;border-top:1px solid var(--line2);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.decide h3{margin:0 0 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500}
.btn{border:1px solid var(--acc);background:transparent;color:var(--acc);padding:11px 14px;font-size:14px;font-weight:600;text-align:left;display:flex;justify-content:space-between;gap:8px}
.btn.pri{background:var(--acc);color:#fff}
.btn:hover{filter:brightness(.95)}
.right{display:flex;flex-direction:column;gap:16px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi{border:1px solid var(--line2);padding:12px 14px}
.kpi .val{font-size:22px;margin-top:4px}
.card h2{font-size:13px;font-weight:600;margin:0 0 14px}
.bars{display:flex;flex-direction:column;gap:9px}
.bars .r{display:grid;grid-template-columns:minmax(110px,200px) minmax(0,1fr) 84px;gap:10px;align-items:center;font-size:13px}
.bars .t{height:14px;background:#EDF0F2}
.bars .f{height:100%;background:var(--acc);transition:width .5s ease}
.bars .f.crit{background:var(--crit)}.bars .f.warn{background:var(--warn)}.bars .f.ok{background:var(--ok)}
.bars .n{font-family:'IBM Plex Mono',monospace;text-align:right}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
td.n{font-family:'IBM Plex Mono',monospace;text-align:right}
th.n{text-align:right}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;font-size:14px;z-index:20}

/* làm quen */
.onb{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.onb .card{width:100%;max-width:640px;padding:32px}
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps i{flex:1;height:3px;background:var(--line)}.steps i.on{background:var(--acc)}
.onb h1{font-size:26px}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.choices button{border:1px solid var(--line);background:var(--panel);padding:16px 12px;font-size:14px;text-align:left;font-weight:500}
.choices button.on{border-color:var(--acc);background:#EEF4F9;font-weight:600}
.lights{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.lights div{display:flex;align-items:center;gap:14px;font-size:15px}
.onb .acts{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.link{border:0;background:none;color:var(--mute);font-size:13px}

/* dashboard nhúng */
.embed{flex:1;padding:16px 24px;max-width:1440px;width:100%;margin:0 auto}
.embed iframe{width:100%;height:calc(100vh - 150px);min-height:560px;border:1px solid var(--line);background:#fff}
.empty{padding:40px;text-align:center;color:var(--mute);font-size:14px;line-height:1.7}
.empty b{color:var(--ink)}

@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.res{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}.choices{grid-template-columns:1fr}.bars .r{grid-template-columns:90px minmax(0,1fr) 64px}.nav{display:none}.home{padding-top:28px}}
@media (prefers-reduced-motion:reduce){.tile,.ill *,.bars .f{animation:none!important;transition:none!important}}

/* insight, hỏi tiếp, gợi ý hover */
.card.ins ul{margin:0 0 12px;padding-left:18px;font-size:14px;line-height:1.6}
.rec{border-left:3px solid var(--acc);background:#EEF4F9;padding:10px 12px;font-size:14px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{border:1px solid var(--line);background:var(--panel);padding:7px 12px;font-size:13px;color:var(--ink)}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.ask.mini{padding:4px 4px 4px 14px}.ask.mini input{font-size:15px;padding:8px 0}.ask.mini .go{width:36px;height:36px}
.ans{margin-top:12px;font-size:14px;line-height:1.55}.ans:empty{display:none}
.ans .q{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ans .a{background:#F7F8F9;border:1px solid var(--line2);padding:10px 12px}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 6px);z-index:25;background:var(--ink);color:#fff;font-size:12px;line-height:1.5;padding:8px 10px;white-space:pre-line;width:max-content;max-width:300px;box-shadow:0 8px 20px rgba(27,36,40,.25);pointer-events:none}
.bars .r:focus-visible,.kpi:focus-visible{outline:1px solid var(--acc)}
.tile .foot{min-height:38px;display:flex;align-items:center;position:relative}
.tile .foot .h{display:none;font-weight:500;font-size:13px;color:var(--acc)}
.tile:hover .foot .t,.tile:focus-visible .foot .t{display:none}
.tile:hover .foot .h,.tile:focus-visible .foot .h{display:inline}

.answer{margin-top:16px;border-color:var(--acc)}
.rec.warnrec{border-left-color:var(--warn);background:#FFF6E5;margin:0 0 10px}
#answer .kpis{display:grid}

/* khung chat */
.chat{flex:1;width:100%;max-width:880px;margin:20px auto 0;padding:0 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.chat-head{display:flex;align-items:center;gap:14px;justify-content:space-between;font-size:12px;color:var(--mute);letter-spacing:.08em}
.thread{background:var(--panel);border:1px solid var(--line);padding:18px;height:calc(100vh - 330px);min-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.msg{display:flex}.msg.user{justify-content:flex-end}
.msg .bub{max-width:92%;font-size:14px;line-height:1.55;min-width:0}
.msg.user .bub{background:var(--acc);color:#fff;padding:10px 14px;max-width:70%}
.msg.ai .bub{background:#F7F8F9;border:1px solid var(--line2);padding:14px 16px;width:min(100%,640px)}
.msg.ai .bub .kpis{grid-template-columns:repeat(3,minmax(0,1fr));display:grid;gap:8px}
.big.sm{font-size:38px}
.insl{margin:0 0 10px;padding-left:18px}
.chips.more{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line2)}
.chip.pri{background:var(--acc);color:#fff;border-color:var(--acc)}.chip.pri:hover{color:#fff;filter:brightness(.95)}
.chat-in{position:sticky;bottom:12px}
.typing{display:flex;gap:5px;align-items:center;width:64px!important}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:ty 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (max-width:560px){.msg.ai .bub .kpis{grid-template-columns:1fr}.thread{height:calc(100vh - 380px)}}

.chat.agent{max-width:1040px}
.agent-q{background:#fff;border:1px solid var(--line);padding:10px 14px;font-size:14px}
.agent-q span{color:var(--mute);font-size:12px}
.agent-frame iframe{width:100%;height:calc(100vh - 230px);min-height:560px;border:1px solid var(--line);background:#fff}
.agent-frame{height:calc(100vh - 230px);min-height:560px}
.agent-frame iframe{height:100%}
.drawer{position:fixed;right:20px;bottom:20px;width:min(400px,calc(100vw - 24px));height:min(660px,calc(100vh - 40px));z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:8px;padding:12px}
.drawer[hidden]{display:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mute);letter-spacing:.08em}
.drawer-head .link{font-size:16px;line-height:1;padding:4px 8px}
.drawer .agent-frame{flex:1;min-height:0;height:auto}
.drawer iframe{flex:1;width:100%;height:100%;min-height:0;border:1px solid var(--line)}
.ai-fab{position:fixed;right:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;background:#0A66A8;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(10,102,168,.5);transition:transform .15s}
.ai-fab:hover{transform:scale(1.08)}
.ai-fab:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #0A66A8}
.ai-fab[hidden]{display:none}
.dashcard iframe{width:100%;height:640px;border:1px solid var(--line);background:#fff}

.res2{flex:1;display:flex;flex-direction:column;gap:14px;padding:20px 24px;width:100%;max-width:1200px;margin:0 auto;min-width:0}
.res2-head{display:flex;align-items:center;gap:16px}
.res2-act{display:flex;gap:10px;flex-wrap:wrap}
.res2-act .btn{width:auto;min-width:220px}
.gtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--panel);border:1px solid var(--line);padding:14px 16px;cursor:pointer}
.gt.on{border-color:#0A66A8;box-shadow:inset 0 0 0 1px #0A66A8}
.gt .gl{font-size:12px;color:var(--mute);letter-spacing:.04em}
.gt .gn{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:500;line-height:1.1}
.gt.t-crit .gn{color:#C0392B}.gt.t-warn .gn{color:#D9820B}
.gt .gu{font-size:12px;color:var(--mute)}
.sect{font-size:13px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin-top:10px}
.stabs{display:flex;gap:8px;margin:6px 0 10px}
.stab{border:1px solid var(--line);background:var(--panel);padding:6px 14px;font-size:13px;cursor:pointer}
.stab.on{background:#0A66A8;color:#fff;border-color:#0A66A8}
.dashcard iframe{height:720px}

.scenecard{padding:12px}
.s3{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;min-height:560px}
.s3-view{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:#eef2f5}
.s3-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;background:var(--panel);border-bottom:1px solid var(--line)}
.s3-chip{border:1px solid var(--line);background:var(--panel);padding:6px 12px;font-size:13px;cursor:pointer}
.s3-chip.on{background:#0A66A8;color:#fff;border-color:#0A66A8}
.s3-bar select{border:1px solid var(--line);padding:6px 8px;font-size:13px;background:#fff}
.s3-note{font-size:12px;color:var(--mute)}
.s3-cv{flex:1;min-height:480px;position:relative}
.s3-cv canvas{display:block;width:100%;height:100%}
.s3-tip{position:absolute;z-index:5;pointer-events:none;background:#fff;border:1px solid var(--line);padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.s3-hint{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--mute);background:rgba(255,255,255,.8);padding:2px 6px}
.s3-side{border:1px solid var(--line);background:var(--panel);padding:12px 14px;overflow:auto;max-height:620px;font-size:13px}
.s3-side h3{font-size:15px;margin-bottom:8px}.s3-side h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}
.s3-kp{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.s3-kp>div{border:1px solid var(--line);padding:6px 8px}.s3-kp small{display:block;font-size:11px;color:var(--mute)}.s3-kp b{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500}.s3-kp b.c{color:#C0392B}.s3-kp b.w{color:#D9820B}
.s3-bars .s3-r{display:grid;grid-template-columns:96px 1fr 62px;gap:6px;align-items:center;padding:2px 0;font-size:12px}
.s3-bars .s3-r[data-b],.s3-bars .s3-r[data-c]{cursor:pointer}.s3-bars .s3-r.on{background:#e6f0f8}
.s3-bars i{height:8px;background:#e3e8ec;display:block}.s3-bars b{display:block;height:100%}.s3-bars em{font-style:normal;text-align:right;font-family:'IBM Plex Mono',monospace}
.s3-bars span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3-list>div{display:grid;grid-template-columns:1fr auto;padding:4px 0;border-bottom:1px solid var(--line)}.s3-list span{grid-column:1;font-size:11px;color:var(--mute)}.s3-list em{grid-row:1/3;grid-column:2;font-style:normal;font-family:'IBM Plex Mono',monospace;color:#C0392B}
.s3-x,.s3-ask{margin-top:8px;border:1px solid var(--line);background:#fff;padding:6px 10px;font-size:12px;cursor:pointer}.s3-ask{width:100%;margin-top:14px;background:#0A66A8;color:#fff;border-color:#0A66A8}
details.dashcard summary{cursor:pointer;font-weight:600;padding:4px 0}
@media(max-width:1100px){.s3{grid-template-columns:1fr}}

.rolebox{position:relative}
.who{width:auto;min-width:28px;padding:0 8px;height:28px;border:0;cursor:pointer;color:var(--ink);font-family:inherit}
.who small{font-size:9px}
.rolemenu{position:absolute;right:0;top:34px;z-index:70;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.14);min-width:150px;display:flex;flex-direction:column}
.rolemenu button{border:0;background:#fff;text-align:left;padding:9px 14px;font-size:13px;cursor:pointer}
.rolemenu button:hover{background:#eef4f9}.rolemenu button.on{font-weight:600;color:#0A66A8}

.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cmp-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.cmp-in{border:1px solid var(--line);padding:8px 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.cmp-in:disabled,.cmp-ta:disabled{background:#f1f4f6;color:#5b6b78}
.cmp-aud{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.cmp-aud .tbl{max-height:320px;overflow:auto}
.cmp-chs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.cmpch h2 small{font-weight:400;color:var(--mute)}
.cmp-ta{width:100%;border:1px solid var(--line);padding:8px 10px;font-size:13px;line-height:1.5;font-family:inherit;resize:vertical;margin-top:6px}
.cmp-prev{margin-top:8px;background:#f4f7f9;border-left:3px solid #0A66A8;padding:8px 10px;font-size:13px;line-height:1.5}.cmp-prev small{display:block;color:var(--mute);font-size:11px;margin-bottom:2px}
.cmp-badge{margin-left:auto;background:#e6f0f8;color:#0A66A8;padding:4px 10px;font-size:12px;font-weight:600}
.cmp-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 12px;flex-wrap:wrap}
.cmp-steps li{flex:1;min-width:150px;border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;font-size:13px}
.cmp-steps li span{font-size:11px;color:var(--mute)}.cmp-steps li.done{background:#eaf6ef;border-color:#9bd1b0}.cmp-steps li.now{border-color:#0A66A8;box-shadow:inset 0 0 0 1px #0A66A8}
.res2-act .cmp-in{max-width:340px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.cmp-log{margin-top:12px;font-size:12px;line-height:1.7}.cmp-log em{font-style:normal;color:var(--mute);font-family:'IBM Plex Mono',monospace}
.s3h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:12px 0 6px}
@media(max-width:1100px){.cmp-aud{grid-template-columns:1fr}}

.f3 .s3-cv{background:#0e1a2b}.f3 .s3-hint{color:#9bb0c9;background:rgba(14,26,43,.8)}.f3-day{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--mute)}.s3-bar input[type=range]{width:160px}

.ticker{display:flex;align-items:stretch;background:#0f2a43;color:#fff;height:38px;overflow:hidden;border-bottom:1px solid #0a1d30}
.tk-lbl{flex:none;display:grid;place-items:center;padding:0 14px;background:#0A66A8;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;font-weight:600}
.tk-track{flex:1;overflow:hidden;display:flex;align-items:center}
.tk-run{display:inline-flex;align-items:center;white-space:nowrap;animation:tk var(--dur,60s) linear infinite;will-change:transform}
.tk-run:hover,.tk-run.paused{animation-play-state:paused}
.tk-gap{display:inline-block;width:60px}
.tk-i{border:0;background:none;color:#e8f0f8;font:inherit;font-size:13px;padding:0 26px 0 0;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tk-i:hover{color:#fff;text-decoration:underline}
.tk-i b{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;padding:2px 7px;text-transform:uppercase;color:#0f2a43}
.tk-stat b{background:#8cc4ee}.tk-warn b{background:#ffb454}.tk-act b{background:#7bd9a0}
.tk-pause{flex:none;width:36px;border:0;background:#0a1d30;color:#9bb0c9;cursor:pointer;font-size:11px}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-run{animation:none}.tk-track{overflow-x:auto}}

.ai-ptr{position:fixed;right:432px;bottom:300px;z-index:90;display:flex;align-items:center;gap:10px;background:#0A66A8;color:#fff;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(10,102,168,.45);animation:ptr .8s ease-in-out infinite alternate;pointer-events:none}
.ai-ptr svg{flex:none}
@keyframes ptr{from{transform:translateX(-18px)}to{transform:translateX(0)}}
.drawer.pulse{animation:dpulse 1s ease-in-out 6}
@keyframes dpulse{0%,100%{box-shadow:-8px 0 24px rgba(0,0,0,.12)}50%{box-shadow:-8px 0 30px rgba(10,102,168,.75),inset 4px 0 0 #0A66A8}}
@media (prefers-reduced-motion:reduce){.ai-ptr{animation:none}.drawer.pulse{animation:none;box-shadow:inset 4px 0 0 #0A66A8}}

.s3d .s3-cv{background:#070f1c;min-height:520px}
.s3d .s3-hint{color:#9bb0c9;background:rgba(7,15,28,.8)}
.s3-crumb{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:8px;flex-wrap:wrap}.s3-crumb span{color:var(--mute)}
.s3-flt{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;align-items:center}.s3-flt small{font-size:11px;color:var(--mute)}
.s3-flt .s3-chip{padding:4px 9px;font-size:12px}
.s3-scroll{max-height:300px;overflow:auto}
.s3-list [data-pk]:hover{background:#eef4f9}

/* ---------- Dashboard của tôi (mydash.js) ---------- */
.mywrap{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:16px 24px;min-width:0}
.md-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.md-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md-sp{flex:1}
.md-name{font:600 18px 'IBM Plex Sans',sans-serif;border:1px solid transparent;background:transparent;padding:4px 6px;min-width:180px;color:var(--ink)}
.md-name:hover,.md-name:focus{border-color:var(--line);background:var(--panel);outline:0}
.md-btn{border:1px solid var(--line);background:var(--panel);padding:8px 14px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.md-btn:hover{border-color:var(--acc)}.md-btn.on,.md-btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.md-addbox{position:relative}
.md-menu{position:absolute;right:0;top:100%;margin-top:4px;min-width:280px;max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 24px rgba(27,36,40,.14);z-index:30;display:flex;flex-direction:column}
.md-menu[hidden]{display:none}
.md-menu button{display:flex;justify-content:space-between;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--line2);background:transparent;text-align:left;padding:10px 14px;font-size:13px;color:var(--ink);cursor:pointer}
.md-menu button:hover{background:#EEF4F9}.md-menu small{font-size:11px;color:var(--mute)}
.md-filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.md-filters select{border:1px solid var(--line);background:var(--panel);padding:7px 10px;font-size:13px;color:var(--ink);min-width:150px;text-transform:none;letter-spacing:0}
.md-chips{min-height:28px}.mdn{font-size:12px;color:var(--mute)}
.mdchip{border:1px solid var(--acc);background:#E6F0F8;color:var(--acc);padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}.mdchip.x{border-color:var(--line);background:var(--panel);color:var(--mute);font-weight:500}
.md-hint{font-size:12px;color:var(--warn)}
.mdg{display:grid;grid-auto-rows:64px;gap:12px;grid-auto-flow:row dense;position:relative}
.mdw{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line)}
.mdh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line2);min-height:36px}
.mdt{font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdx{display:none;gap:4px}.mdx button{border:0;background:transparent;color:var(--mute);font-size:14px;cursor:pointer;padding:2px 6px}.mdx button:hover{color:var(--crit)}
.mdx button[data-act=cfg]:hover{color:var(--acc)}
.mdbody{flex:1;min-height:0;overflow:auto;padding:12px}
.mdw-scene .mdbody,.mdw-web .mdbody,.mdw-doc .mdbody,.mdw-image .mdbody{padding:0}
.mdrs{display:none;position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--acc) 50%);touch-action:none}
.editing .mdw{outline:1px dashed var(--acc);outline-offset:-1px}.editing .mdx,.editing .mdrs{display:flex}.editing .mdrs{display:block}
.canmove .mdh{cursor:grab;touch-action:none;background:#F3F7FA}
.mdw.dragging{z-index:20;box-shadow:0 14px 30px rgba(10,102,168,.28);opacity:.92}.mdw.dragging .mdh{cursor:grabbing}
.mdk .v{font:500 34px 'IBM Plex Mono',monospace;line-height:1.1}.mdk .s{font-size:12px;color:var(--mute);margin-top:6px}
.mdb{display:flex;flex-direction:column;gap:4px}
.mdr{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) 78px;gap:8px;align-items:center;border:0;border-left:3px solid transparent;background:transparent;padding:3px 4px;font-size:12px;color:var(--ink);text-align:left;cursor:pointer}
.mdr:hover{background:#EEF4F9}.mdr.on{background:#E6F0F8;border-left-color:var(--acc);font-weight:600}
.mdr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mdr i{display:block;height:10px;background:#EDF0F2}.mdr b{display:block;height:100%;background:var(--acc)}.mdr b.crit{background:var(--crit)}.mdr b.ok{background:var(--ok)}
.mdr em{font-style:normal;text-align:right;font-family:'IBM Plex Mono',monospace}
.mdtxt{padding:12px;font-size:14px;line-height:1.6;overflow:auto;height:100%}
.mdimg{margin:0;height:100%;display:flex;flex-direction:column}.mdimg img{flex:1;min-height:0;width:100%;object-fit:contain;background:#F3F4F5}.mdimg figcaption{font-size:12px;color:var(--mute);padding:6px 10px}
.mdw-web .mdbody,.mdw-doc .mdbody{display:flex;flex-direction:column}
.mdw-web iframe,.mdw-doc iframe{flex:1;min-height:0;width:100%;border:0}
.mdfoot{display:flex;gap:12px;align-items:center;padding:6px 10px;border-top:1px solid var(--line2);font-size:12px}.mdfoot small{color:var(--mute)}
.mdopen{color:var(--acc);font-weight:600;text-decoration:none}.mdopen:hover{text-decoration:underline}
.mddoc{padding:18px;display:flex;flex-direction:column;gap:8px;font-size:14px}.mddoc span,.mddoc small{color:var(--mute);font-size:12px}
.mdscene{height:100%}.mdscene .s3{min-height:0;height:100%;grid-template-columns:minmax(0,1fr) 320px}
.mdscene .s3-view{min-height:0}.mdscene .s3-cv,.s3d .mdscene .s3-cv{min-height:0}
.mdscene .s3-side{max-height:none}
.mdw-scene.narrow .mdscene .s3{grid-template-columns:1fr}.mdw-scene.narrow .s3-side{display:none}
.md-modal{position:fixed;inset:0;background:rgba(27,36,40,.45);z-index:90;display:grid;place-items:center;padding:16px}
.md-form{background:var(--panel);border:1px solid var(--line);width:min(520px,100%);max-height:90vh;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:12px}
.md-form h3{font-size:16px}.md-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.md-form input,.md-form textarea,.md-form select{border:1px solid var(--line);padding:9px 10px;font:14px 'IBM Plex Sans',sans-serif;color:var(--ink);background:#fff}
.md-acts{display:flex;justify-content:flex-end;gap:8px}.md-err{color:var(--crit);font-size:13px}
@media(max-width:560px){.mywrap{padding:12px 16px}.md-filters select{min-width:0;width:100%}.md-filters label{flex:1 1 45%}.mdr{grid-template-columns:90px minmax(0,1fr) 64px}}
@media (prefers-reduced-motion:reduce){.mdw.dragging{transition:none}}
.canmove .mdh,.mdw.dragging,.editing .mdrs{user-select:none;-webkit-user-select:none}

/* ---------- ảnh minh họa mẫu xe ---------- */
.carfig{margin:0 0 10px}.carfig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#dfe5ea}
.carfig figcaption{font-size:10px;color:var(--mute);margin-top:3px;line-height:1.3}.carfig figcaption a{color:inherit}
.s3d .carfig figcaption{color:#9bb0c9}
.carcell{white-space:nowrap}.carthumb{width:56px;height:32px;object-fit:cover;vertical-align:middle;margin-right:8px;background:#dfe5ea}

/* ---------- Hồ sơ xe (vehicle.js) ---------- */
.vh-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.vh-head .vh-fig{width:min(260px,100%);margin:0}.vh-plate{font:600 28px 'IBM Plex Mono',monospace;margin:0 0 4px}
.vh-sim{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#8a5a00;background:#FFF1D6;border:1px solid #F0D79A;padding:1px 6px;margin-left:4px;white-space:nowrap}
.vh-kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.vh-k{background:var(--panel);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vh-k small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.vh-k b{font:500 22px 'IBM Plex Mono',monospace}.vh-k span{font-size:12px;color:var(--mute)}
.vh-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.vh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.vh-chips .mdchip.on{background:var(--acc);color:#fff}
.vh-tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line2);margin-left:6px}
.vh-ev{display:flex;gap:12px;position:relative;padding:0 0 16px 16px}.vh-ev>i{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--panel)}
.vh-evh{font-size:14px}.vh-meta{font-size:12px;color:var(--mute);margin-top:2px}.vh-parts{font-size:12px;margin-top:3px;color:var(--ink)}
.vh-oil{font-size:10px;font-weight:600;background:#E6F0F8;color:var(--acc);padding:1px 6px;margin-left:4px}
.vh-note{font-size:12px;color:var(--mute);max-width:900px}
@media(max-width:900px){.vh-kp{grid-template-columns:repeat(2,minmax(0,1fr))}.vh-cols{grid-template-columns:1fr}}
.vh-val{margin-top:14px}.vh-est{font-style:normal;font-size:11px;font-weight:600;color:#8a5a00;background:#FFF1D6;border:1px solid #F0D79A;padding:2px 8px;margin-left:8px}
.vh-val-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;align-items:stretch}
.vh-big{border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:4px}.vh-big small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.vh-big b{font:500 30px 'IBM Plex Mono',monospace}.vh-big span{font-size:12px;color:var(--mute)}
.vh-base{border:1px dashed var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:8px}.vh-base small{font-size:11px;color:var(--mute)}.vh-base span{display:flex;gap:8px;align-items:center}
.vh-base input{width:110px;border:1px solid var(--line);padding:7px 8px;font:500 15px 'IBM Plex Mono',monospace}
@media(max-width:900px){.vh-val-top{grid-template-columns:1fr}}

/* ---------- Kiến trúc dữ liệu (datamap.js) ---------- */
.dm-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;align-items:start}
.dm-arch{display:flex;gap:6px;align-items:stretch;overflow-x:auto;padding-bottom:6px}
.dm-col{display:flex;flex-direction:column;gap:8px;min-width:150px;flex:1}.dm-colh{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dm-arrow{align-self:center;color:var(--acc);font-size:20px;padding-top:18px}
.dm-node{text-align:left;border:1px solid var(--line);background:var(--panel);padding:10px 11px;display:flex;flex-direction:column;gap:3px;cursor:pointer;font:inherit;color:var(--ink)}
.dm-node b{font-size:13px}.dm-node small{font-size:11px;color:var(--mute);line-height:1.35}.dm-node:hover{border-color:var(--acc)}
.dm-node.on{border-color:var(--acc);background:#EAF3FA;box-shadow:inset 3px 0 0 var(--acc)}.dm-node.prop{border-style:dashed}
.dm-detail{border:1px solid var(--line);background:#FAFBFC;padding:14px 16px;min-width:0}.dm-detail h3{font-size:15px;margin:0 0 8px}.dm-detail dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:10px}.dm-detail dd{margin:2px 0 0;font-size:13px;line-height:1.5}
.dm-cols{max-height:340px;overflow:auto}
.dm-erd{width:100%;height:auto;background:#fff;border:1px solid var(--line)}.dm-ent:hover rect:first-child{fill:#F3F8FC}
.dm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mute);margin-top:8px}.dm-legend i{display:inline-block;width:10px;height:10px;margin-right:6px}
.dm-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}.dm-steps li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line2);padding:10px 12px}
.dm-sn{flex:0 0 26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font:600 12px 'IBM Plex Mono',monospace}
.dm-steps code,.dm-step code{display:block;font:12px 'IBM Plex Mono',monospace;color:#0A66A8;margin:4px 0;word-break:break-word}
.dm-meta{font-size:12px;color:var(--mute)}.dm-risk{font-size:12px;color:#8a5a00;margin-top:2px}
.dm-flow{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.dm-step{border:1px solid var(--line);padding:12px 14px 12px 50px;position:relative;background:var(--panel)}.dm-step .dm-sn{position:absolute;left:12px;top:12px}.dm-step p{margin:4px 0;font-size:13px;line-height:1.55}
.dm-down{text-align:center;color:var(--acc);font-size:18px;line-height:1}
.dm-mode button{white-space:nowrap}
@media(max-width:900px){.dm-split{grid-template-columns:1fr}.dm-arch{flex-direction:column}.dm-arrow{transform:rotate(90deg);padding:0;align-self:center}.dm-col{min-width:0}}
.dm-stack{display:grid;gap:14px}.dm-col{min-width:170px}

/* ---- Biểu đồ kiểu Oracle Analytics (Redwood): màu ấm, tooltip nổi, làm mờ khi rê chuột ---- */
:root{--bg:#F5F3F0;--line:#D9D4CE;--line2:#ECE8E3;--v-teal:#2F6F8F;--v-red:#C74634;--v-amber:#E0A030}
.mdw{box-shadow:0 1px 2px rgba(22,21,19,.06);border-radius:6px;overflow:hidden}
.mdh{background:linear-gradient(#fff,#FBF9F7)}.mdt{font-weight:600;letter-spacing:.01em}
.vz{position:relative;font-size:12px}
.vz [data-vt]{cursor:pointer;outline:0}.vz [data-vt]:focus-visible{outline:2px solid var(--v-teal);outline-offset:1px}
.vz.hov .vzm:not(.hi){opacity:.38}.vz.hasSel .vzm:not(.sel){opacity:.45}.vz.hasSel.hov .vzm.hi{opacity:1}
.vzm{transition:opacity .18s,transform .18s}
/* thanh ngang */
.vzr{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr) 92px;gap:10px;align-items:center;padding:4px 6px;border-radius:4px}
.vzr:hover,.vzr.sel{background:#F3EEE9}.vzr.sel .vzl{font-weight:700}
.vzl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vzt{display:block;height:14px;background:#EFEBE6;border-radius:7px;overflow:hidden}
.vzt i{display:block;height:100%;border-radius:7px;transform-origin:left;animation:vzgrow .7s cubic-bezier(.2,.8,.2,1) both}
.vzv{text-align:right;font-family:'IBM Plex Mono',monospace}.vzv small{display:block;color:var(--mute);font-size:10px}
/* donut + treemap */
.vz-d{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr);gap:14px;align-items:center}
.vzdsvg{width:100%;height:auto;max-height:230px}
.vzs{animation:vzpop .55s cubic-bezier(.2,.8,.2,1) both;transform-box:fill-box;transform-origin:center}
.vzdg path:hover,.vzdg path.hi{transform:scale(1.04)}
.vz-ct{font-family:'IBM Plex Sans',sans-serif;fill:var(--ink)}.vz-ct .c1{font-size:11px;fill:var(--mute)}.vz-ct .c2{font-size:15px;font-weight:700}
.vzleg{display:flex;flex-direction:column;gap:2px}
.vzlg{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 6px;border-radius:4px}
.vzlg:hover,.vzlg.sel{background:#F3EEE9}.vzlg.sel span{font-weight:700}.vzlg b{width:10px;height:10px;border-radius:3px}.vzlg em{font-style:normal;font-family:'IBM Plex Mono',monospace;color:var(--mute)}
.vztsvg{width:100%;height:auto;display:block}.vz-t rect{rx:3;transition:filter .18s}.vz-t g:hover rect,.vz-t g.hi rect{filter:brightness(1.1)}
.vz-t g.sel rect{stroke:var(--ink);stroke-width:2}.vzt1{font:600 12px 'IBM Plex Sans',sans-serif;fill:#fff;pointer-events:none}.vzt2{font:400 10px 'IBM Plex Mono',monospace;fill:rgba(255,255,255,.88);pointer-events:none}
/* chuỗi thời gian */
.vzssvg{width:100%;height:auto;display:block;cursor:crosshair;user-select:none}
.vzgl{stroke:#E6E1DB;stroke-dasharray:2 3}.vzax{font:10px 'IBM Plex Mono',monospace;fill:#7A746D}
.vzln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vzdraw 1.1s cubic-bezier(.3,.6,.2,1) forwards}
.vzar{animation:vzfade .9s .2s both}.vzpt{stroke-width:1.6}
.vzxh{stroke:#7A746D;stroke-dasharray:3 3;opacity:0;pointer-events:none}.vzda,.vzdb{opacity:0;pointer-events:none;stroke:#fff;stroke-width:2}
.vzbr{fill:rgba(47,111,143,.14);stroke:rgba(47,111,143,.5);opacity:0;pointer-events:none}
.vzlegh{display:flex;gap:14px;margin-bottom:4px;color:var(--mute)}.vzlegh b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.vzins{margin-top:4px;font-size:11.5px;color:var(--ink);background:#F7F3EF;border-left:3px solid var(--v-red);padding:5px 8px}
.vzsum{margin-top:4px;font-size:11.5px;color:var(--mute);min-height:16px}.vzsum b{color:var(--ink)}
/* tooltip nổi */
.vz-tip{position:fixed;z-index:200;pointer-events:none;background:#161513;color:#fff;font-size:12px;line-height:1.5;padding:8px 11px;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.28);max-width:260px}
.vz-tip[hidden]{display:none}.vz-tip b{display:block;margin-bottom:2px}
.vzrw{display:grid;grid-template-columns:10px 1fr auto auto;gap:7px;align-items:center}.vzrw i{width:8px;height:8px;border-radius:2px}.vzrw em{font-style:normal;font-family:'IBM Plex Mono',monospace;margin-left:10px}
.vzrw small.up{color:#8FD19E}.vzrw small.dn{color:#F2A79A}
@keyframes vzgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vzpop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes vzdraw{to{stroke-dashoffset:0}}@keyframes vzfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vzt i,.vzs,.vzln,.vzar{animation:none!important}.vzln{stroke-dashoffset:0}}
@media (max-width:560px){.vz-d{grid-template-columns:1fr}.vzr{grid-template-columns:80px minmax(0,1fr) 70px}}

/* ---- Cảnh điều chuyển kho 3D (#/transfer) ---- */
.tr3-trace{background:#0b1a2e;color:#d6e4f5;border:1px solid #1d4a7a;border-bottom:0;padding:10px 14px}
.tr3-trace .tr3-t{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7fd4ff;margin-bottom:6px}
.tr3-trace ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;font-size:12px}
.tr3-trace li{color:#6f86a3;display:flex;gap:6px;line-height:1.4;border-top:2px solid #1d4a7a;padding-top:6px}.tr3-trace li.done{border-top-color:#34e39a}.tr3-trace li.run{border-top-color:#2dd4ff}.tr3-trace li i{font-style:normal;width:14px;text-align:center;font-family:'IBM Plex Mono',monospace}
.tr3-trace li.run{color:#d6e4f5}.tr3-trace li.done{color:#9fe8c8}
.tr3-trace .s3-x{margin:0;background:#0b1a2e;color:#7fd4ff;border-color:#1d4a7a}
.s3-bar .s3-note{color:#9bb0c9}
.tr3-list .tr3-o{cursor:pointer}.tr3-list .tr3-o:hover{background:#e6f0f8}.tr3-list b{font-size:12px;font-weight:600;grid-column:1}
.tr3-list u{text-decoration:none}.tr3-list u.ok,.tr3-ok{color:#1c8f5a}.tr3-list u.no,.tr3-no{color:#C0392B}
.tr3-why{font-size:12px;line-height:1.6;border:1px solid var(--line);padding:8px 10px;background:#fff}
.tr3-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr3-btn{border:1px solid #0A66A8;background:#0A66A8;color:#fff;padding:8px 10px;font-size:13px;cursor:pointer}
.tr3-btn.no{background:#fff;color:#C0392B;border-color:#C0392B}.tr3-btn.wide,.s3-x.wide{width:100%;margin-top:8px;display:block}
.tr3-btn:disabled,.s3-x:disabled{opacity:.45;cursor:not-allowed}
.s3-crumb{font-size:12px;margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}.s3-crumb .s3-x{margin:0;padding:3px 8px}
.s3d .s3-bar select{max-width:220px}
@media (prefers-reduced-motion:reduce){.tr3-trace li{transition:none}}

@media (max-width:900px){.tr3-trace ol{grid-template-columns:1fr}}

/* ---- Bản đồ luồng hàng (#/map) ---- */
.fm{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:12px}
.fm-map{position:relative;background:#06101f;border:1px solid #1d4a7a;overflow:hidden}
.fm-map svg{display:block;width:100%;height:auto}
.fm-g{stroke:#10294a;stroke-width:.6}.fm-gt{fill:#3a5878;font:9px 'IBM Plex Mono',monospace}
.fm-cl{fill:#2dd4ff;opacity:.55;font:600 10px 'IBM Plex Sans',sans-serif;letter-spacing:.14em}
.fm-sea{fill:#27476b;font:italic 600 16px 'IBM Plex Sans',sans-serif;letter-spacing:.4em;text-anchor:middle}
.fm-nb{fill:#27476b;font:600 10px 'IBM Plex Sans',sans-serif;letter-spacing:.2em}
.fm-land{fill:#123a5e;stroke:#2dd4ff;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(45,212,255,.35))}
.fm-road{fill:none;stroke:#3a6a99;stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.fm-lane{fill:none;stroke-linecap:round}
.fm-drop{fill:none;stroke:#ff5d6c;stroke-width:1.6;stroke-dasharray:4 4}
.fm-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.fm-truck{filter:drop-shadow(0 0 3px #fff)}
.fm-node{cursor:pointer}.fm-node.on circle:nth-child(2){stroke:#2dd4ff;stroke-width:3}
.fm-bn{fill:#e6f0fb;font:600 12px 'IBM Plex Sans',sans-serif;paint-order:stroke;stroke:#06101f;stroke-width:3px}
.fm-bv{font:500 11px 'IBM Plex Mono',monospace;paint-order:stroke;stroke:#06101f;stroke-width:3px}
.fm-pulse{animation:fmp 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fmp{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.5);opacity:.05}}
.fm-leg{position:absolute;left:8px;bottom:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:#9bb0c9;background:rgba(6,16,31,.88);padding:6px 8px}
.fm-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}.fm-leg i.dash{width:16px;height:0;border-top:2px dashed #ff5d6c;border-radius:0}
.fm-side{border:1px solid var(--line);background:var(--panel);padding:12px 14px;font-size:13px;max-height:790px;overflow:auto}
.fm-side h3{font-size:15px;margin-bottom:8px}.fm-side h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}
.fm-f{display:grid;grid-template-columns:1fr 1fr;gap:6px}.fm-f select,.fm-r select{border:1px solid var(--line);padding:6px;font-size:12px;background:#fff;width:100%}
.fm-l{font-size:11px;color:var(--mute);margin:10px 0 4px}.fm-seg{display:flex;flex-wrap:wrap;gap:4px}
.fm-r{display:block;margin:8px 0}.fm-r span{display:flex;justify-content:space-between;gap:8px;font-size:12px}.fm-r input[type=range]{width:100%}
.fm-side details{border:1px solid var(--line);padding:6px 8px;margin-top:10px}.fm-side summary{cursor:pointer;font-size:12px;font-weight:600}
.fm-lt .fm-lh,.fm-lt .fm-lr{display:grid;grid-template-columns:1.6fr .6fr .5fr .9fr .7fr;gap:4px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12px}
.fm-lh{color:var(--mute);font-size:11px;text-transform:uppercase}.fm-lr{cursor:pointer}.fm-lr:hover,.fm-lr.on{background:#e6f0f8}.fm-lr.bad{color:#c0392b}
.fm-warn{background:#fdecea;border:1px solid #f3b8b1;color:#8a2a1e;padding:6px 8px;font-size:12px;margin:8px 0}
.fm-k.tick{animation:fmt .6s}@keyframes fmt{0%{background:#ffe9a8}100%{background:transparent}}
@media (max-width:900px){.fm{grid-template-columns:1fr}.fm-side{max-height:none}}
@media (prefers-reduced-motion:reduce){.fm-pulse,.fm-k.tick{animation:none}}

/* ---- Vận hành trực tiếp (#/live): phát lại dòng sự kiện thật ---- */
.lv{background:#06101f;border:1px solid #1d4a7a;color:#dbe7f5;padding:14px;display:flex;flex-direction:column;gap:12px}
.lv-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lv-badge{font-size:11px;font-weight:600;letter-spacing:.08em;color:#ffb84d;border:1px solid #9a6f28;padding:3px 9px}
.lv-clock{font-size:20px;color:#fff;letter-spacing:.02em}
.lv-night{font-size:11px;color:#9bb0c9;border:1px solid #2a4a70;padding:2px 8px}
.lv-ctl{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lv-sep{width:1px;height:20px;background:#2a4a70;margin:0 4px}
.lv-b{border:1px solid #2a4a70;background:#0b1d36;color:#c9d9ee;font-size:12px;font-weight:500;padding:6px 11px;border-radius:999px;cursor:pointer;min-height:32px}
.lv-b:hover{border-color:#2dd4ff;color:#fff}.lv-b.on{background:#12396b;border-color:#2dd4ff;color:#fff}
.lv-b:focus-visible,.lv-ask:focus-visible{outline:2px solid #2dd4ff;outline-offset:2px}
.lv-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.lv-tile{background:#0b1d36;border:1px solid #1d3b61;padding:9px 12px;min-width:0}
.lv-tl2{font-size:11px;color:#9bb0c9}.lv-tv{font-size:22px;line-height:1.25}.lv-ts{font-size:11px;color:#8aa2c0}
.lv-main{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:12px;align-items:start}
.lv-map{position:relative;border:1px solid #1d4a7a;background:#06101f;overflow:hidden}
.lv-map svg{display:block;width:100%;height:auto}
.lv-map canvas{position:absolute;left:0;top:0;pointer-events:none}
.lv-node{cursor:pointer;transition:opacity .2s}
.lv-sup{fill:none;stroke:#6b86a8;stroke-width:1;stroke-dasharray:2 2}
.lv-st{fill:#6b86a8;font:600 7px 'IBM Plex Sans',sans-serif;letter-spacing:.06em}
.lv-wk{font:500 10px 'IBM Plex Mono',monospace;paint-order:stroke;stroke:#06101f;stroke-width:3px}
.lv-bay{fill:#16304f;stroke:#2a4a70;stroke-width:.6}.lv-bay.on{fill:#2dd4ff;stroke:#bff0ff}
.lv-side{border:1px solid #1d3b61;background:#0b1d36;padding:12px 14px;font-size:13px;max-height:760px;overflow:auto}
.lv-sh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px}.lv-sh span{font-size:11px;color:#8aa2c0}
.lv-side h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8aa2c0;margin:14px 0 6px}
.lv-pr{position:relative;display:flex;justify-content:space-between;gap:10px;padding:4px 6px;font-size:12px;margin-bottom:3px;overflow:hidden}
.lv-pr i{position:absolute;left:0;top:0;bottom:0;background:rgba(255,184,77,.16);z-index:0}.lv-pr span,.lv-pr b{position:relative;z-index:1}
.lv-mute{font-size:12px;color:#8aa2c0}
.lv-feed{list-style:none;margin:0;padding:0}
.lv-feed li{display:grid;grid-template-columns:40px 66px minmax(0,1fr);gap:6px;padding:6px 0;border-bottom:1px solid #16304f;font-size:12px;align-items:start}
.lv-ft{color:#8aa2c0}
.lv-tg{font-size:9px;font-weight:600;letter-spacing:.06em;border:1px solid;padding:1px 5px;text-align:center}
.lv-in{color:#34e39a;border-color:#1f8a5e}.lv-out{color:#ffb84d;border-color:#9a6f28}.lv-car{color:#2dd4ff;border-color:#2a7fa0}.lv-done{color:#fff;border-color:#6b86a8}.lv-day{color:#b7a6ff;border-color:#6a5bb0}.lv-xf{color:#b79cff;border-color:#6a5bb0}.lv-rm{color:#ff8fb8;border-color:#a04a70}
.lv-ask{margin-top:14px;width:100%;border:1px solid #2dd4ff;background:#0e2a4d;color:#fff;font-size:13px;font-weight:600;padding:9px 12px;cursor:pointer}
.lv-ask:hover{background:#12396b}
.lv-tl{border:1px solid #1d3b61;background:#0b1d36;padding:10px 14px}
.lv-tlh{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12px;margin-bottom:4px}.lv-tlh span{color:#8aa2c0}
.lv-tl svg{display:block;cursor:ew-resize;touch-action:none;user-select:none}
.lv-tt{fill:#8aa2c0;font:10px 'IBM Plex Mono',monospace}
.lv-note{margin:0;font-size:12px;color:#9bb0c9;max-width:980px;line-height:1.55}
@media (max-width:900px){.lv-main{grid-template-columns:1fr}.lv-side{max-height:none}.lv-ctl{margin-left:0}}

.lv-live .lv-ro{display:none}.lv-b:disabled{opacity:.45;cursor:not-allowed}.lv-live .lv-badge{color:#34e39a;border-color:#1f8a5e}
.lv-al{color:#ff8a7e;border-color:#a34a42}.lv-rp{color:#ffb84d;border-color:#9a6f28}
.lv-xf2{font-size:13px;line-height:1.7}.lv-lk{display:inline-block;margin-top:4px;font-size:12px;color:#2dd4ff}
.lv-ods{margin:8px 0}.lv-od{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #16304f;font-size:12px}.lv-od span{flex:1;min-width:0}.lv-od i{color:#8aa2c0;font-style:normal}.lv-no{border-color:#a34a42;color:#ff8a7e}

/* Menu Quick AI theo ngữ cảnh (aimenu.js) */
.aim-badge{position:fixed;z-index:70;width:24px;height:24px;border:0;border-radius:50%;background:#0A66A8;color:#fff;font-size:12px;line-height:24px;padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(10,102,168,.5)}
.aim-badge[hidden]{display:none}
.aim-badge:hover,.aim-badge:focus-visible{background:#0b82d4;outline:2px solid #fff;outline-offset:1px}
.aim{position:fixed;z-index:95;width:260px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 32px rgba(0,0,0,.28);padding:6px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.aim-h{display:flex;flex-direction:column;gap:2px;padding:6px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.aim-h .mono{font-size:10px;letter-spacing:.1em;color:#0A66A8}
.aim-ctx{color:var(--mute);font-size:11px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.aim button{display:flex;align-items:center;gap:8px;text-align:left;border:0;background:none;padding:8px;cursor:pointer;font:inherit;color:inherit}
.aim button i{font-style:normal;width:16px;color:#0A66A8;text-align:center}
.aim button:hover,.aim button:focus-visible{background:#e8f2fa;outline:none}
.aim-f{padding:6px 8px 2px;font-size:10px;color:var(--mute)}

/* ---- Sơ đồ SVG kiến trúc dữ liệu (dmdiagram.js) ---- */
.dm-svgwrap{overflow-x:auto;border:1px solid var(--line2);background:radial-gradient(circle at 1px 1px,#DDE3E6 1px,transparent 1.2px) 0 0/18px 18px,#FCFDFD;border-radius:10px;padding:6px}
.dm-svg{display:block;width:100%;height:auto;font-family:'IBM Plex Sans',system-ui,sans-serif}
.dm-run{stroke-dasharray:5 9;animation:dmflow 1s linear infinite}.dm-run.slow{animation-duration:2.4s}
@keyframes dmflow{to{stroke-dashoffset:-14}}
.dm-nd,.dm-ent{cursor:pointer;outline:0}.dm-nd .card,.dm-nd .tile,.dm-ent .card{transition:filter .15s}
.dm-nd:hover .card,.dm-ent:hover .card,.dm-nd:focus-visible .card{filter:drop-shadow(0 4px 8px rgba(10,102,168,.28))}
.dm-nd.on .card{filter:drop-shadow(0 6px 12px rgba(10,102,168,.32))}
.dm-ring{animation:dmring 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes dmring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14,1.22)}}
.dm-edge.dim{opacity:.4}.dm-lbl.dim{opacity:.5}
.dm-halo{transform-box:fill-box;transform-origin:center;animation:dmhalo 4.2s ease-out infinite}
@keyframes dmhalo{0%{opacity:.8;transform:scale(1)}25%,100%{opacity:0;transform:scale(1.55)}}
.dm-track .dm-st text{pointer-events:none}
.dm-more{margin-top:12px}.dm-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--acc);padding:6px 0}
.dm-detail.wide{margin-top:14px}.dm-detail.wide dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 22px}.dm-kv dt:first-child{margin-top:0}
.dm-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;margin-top:14px}
.dm-flow .dm-down{display:none}
.dm-erd{background:radial-gradient(circle at 1px 1px,#DDE3E6 1px,transparent 1.2px) 0 0/18px 18px,#FCFDFD;border-radius:10px}
@media (prefers-reduced-motion:reduce){.dm-run,.dm-ring,.dm-halo{animation:none!important}.dm-svg .pk{display:none}}

.chain-home{width:100%;max-width:1240px;margin-top:28px;background:var(--panel);border:1px solid var(--line);padding:12px 16px}.chain-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.dm-chainwrap{cursor:pointer;border:0;background:transparent;padding:0}.dm-chainwrap:hover{background:#F6FAFD}
.dm-tl{outline:0}

/* ---- Header / footer doanh nghiệp (logo Coderpush) ---- */
#app{padding-bottom:0}
.hdr{position:sticky;top:0;z-index:50}
.hdr-dark{display:flex;align-items:center;gap:14px;padding:0 24px;min-height:52px;background:#0B100D;border-bottom:2px solid #80C926;color:#E8EDE9}
.hdr-cp{display:flex;align-items:center;opacity:.95}.hdr-cp:hover{opacity:1}.hdr-cp img{display:block;height:20px;width:auto}
.hdr-sep{width:1px;height:24px;background:#2B352E}
.hdr-prod{display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;padding:0;text-align:left}
.hdr-prod .logo{width:26px;height:26px;background:#80C926;padding:4px}.hdr-prod .logo span{background:#0B100D}.hdr-prod .logo span:last-child{opacity:.45}
.hdr-pt{display:flex;flex-direction:column;line-height:1.15}.hdr-pt b{font-size:13px;letter-spacing:.1em;font-weight:600}.hdr-pt small{font-size:11px;color:#9AA89F}
.hdr-chip{font-size:11px;font-weight:600;letter-spacing:.04em;color:#B9C5BD;border:1px solid #2B352E;padding:3px 9px;border-radius:3px;white-space:nowrap}
.hdr-chip.env{color:#80C926;border-color:#3C5A22;background:#101A0F;display:inline-flex;align-items:center;gap:6px}.hdr-chip.env i{width:6px;height:6px;border-radius:50%;background:#80C926;animation:hdrpulse 2s infinite}
@keyframes hdrpulse{50%{opacity:.3}}
.hdr-date{font-size:11px;color:#9AA89F;white-space:nowrap}
.hdr-dark .seg{border-color:#2B352E}.hdr-dark .seg button{color:#9AA89F}.hdr-dark .seg button.on{background:#80C926;color:#0B100D}
.hdr-dark .who{background:#1B2520;color:#E8EDE9;border:1px solid #2B352E}.hdr-dark .who:hover{border-color:#80C926}
.hdr-nav{display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.hdr-nav .nav{display:flex;flex-wrap:wrap}.hdr-nav .nav button{padding:14px 12px}
.hdr-nav .scope{padding:5px 12px}
.ftr{margin-top:auto;background:#0B100D;color:#B9C5BD;border-top:2px solid #80C926;position:relative;z-index:2}
.ftr-in{max-width:1240px;margin:0 auto;padding:36px 24px 26px;display:grid;grid-template-columns:1.6fr 1.3fr 1fr 1fr;gap:32px}
.ftr h4{margin:0 0 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#E8EDE9;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}.ftr a{color:#B9C5BD;text-decoration:none}.ftr a:hover{color:#80C926;text-decoration:underline}
.ftr-brand p{font-size:13px;line-height:1.6;margin:14px 0;max-width:340px}.ftr-soc{display:flex;gap:16px;font-size:13px}
.ftr-note{color:#E0B45A}
.ftr-bar{border-top:1px solid #1E2922;max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#7F8D84;letter-spacing:.03em}
@media(max-width:900px){.hdr{position:static}.hdr-chip,.hdr-date,.hdr-sep{display:none}.ftr-in{grid-template-columns:1fr 1fr}.hdr-dark{flex-wrap:wrap;padding:8px 16px}}
@media(max-width:560px){.ftr-in{grid-template-columns:1fr}}

/* ---- Bản đồ điều chuyển: thẻ chi nhánh, nhãn tuyến, bảng tối ---- */
.fm-card{fill:#0b1d33;fill-opacity:.92;stroke-opacity:.75;stroke-width:1.2;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.fm-cn{fill:#e6f0fb;font:600 11.5px 'IBM Plex Sans',sans-serif}.fm-cv{font:500 10.5px 'IBM Plex Mono',monospace}
.fm-node:hover .fm-card,.fm-node.on .fm-card{fill:#10294a;stroke-opacity:1;stroke-width:2}
.fm-pill{pointer-events:none}.fm-pill text{font:600 9.5px 'IBM Plex Sans',sans-serif}
.fm-flow{pointer-events:none}
.fm-hud rect{fill:#0b1d33;stroke:#80C926;stroke-opacity:.6}.fm-hud circle{fill:#80C926}.fm-hud text{fill:#cfe7b0;font:600 9.5px 'IBM Plex Sans',sans-serif;letter-spacing:.1em}
.fm-map{box-shadow:0 0 0 1px rgba(45,212,255,.15),0 12px 32px rgba(6,16,31,.35)}
.fm-side{background:#08121f;border-color:#1d4a7a;color:#c9d8ea}
.fm-side h3{color:#fff}.fm-side h4,.fm-l,.fm-lh{color:#7f9ab8}
.fm-side .s3-kp>div{background:#0d1b2c;border:1px solid #1d4a7a}.fm-side .s3-kp small{color:#7f9ab8}.fm-side .s3-kp b{color:#fff}
.fm-side select,.fm-side input[type=number]{background:#0d1b2c;color:#e6f0fb;border:1px solid #1d4a7a}
.fm-side .s3-chip{background:#0d1b2c;color:#c9d8ea;border:1px solid #1d4a7a}.fm-side .s3-chip.on{background:#80C926;color:#0B100D;border-color:#80C926}
.fm-side details{border-color:#1d4a7a}.fm-side summary{color:#e6f0fb}
.fm-lt .fm-lh,.fm-lt .fm-lr{border-bottom-color:#16314f}.fm-lr:hover,.fm-lr.on{background:#10294a}.fm-lr.bad{color:#ff8c84}
.fm-warn{background:#2a1316;border-color:#6b2a2f;color:#ffb3ab}
.fm-side .fm-r span,.fm-side p,.fm-side label{color:#c9d8ea}

/* ---- Điều chuyển 3D: đường 5 trạm nền tối ---- */
.dm-dark{background:radial-gradient(circle at 1px 1px,#16314f 1px,transparent 1.2px) 0 0/18px 18px,#08121f;border-color:#1d4a7a}
.dm-dark text[fill="#1B2428"]{fill:#e6f0fb}.dm-dark text[fill="#66737A"]{fill:#8fa6c2}
.dm-dark .dm-st circle[fill="#fff"]{fill:#0b1a2e}
.tr3-trace{padding:8px 14px 10px}.tr3-trace .dm-svgwrap{margin-top:2px;padding:2px}

/* ---- Vận hành trực tiếp: thẻ chi nhánh, nguồn số liệu ---- */
.lv-card{fill:#0b1d33;fill-opacity:.94;stroke-opacity:.75;stroke-width:1.2;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.lv-cn{fill:#e6f0fb;font:600 11px 'IBM Plex Sans',sans-serif}
.lv-supc{fill:#0b1d33;stroke:#3a5878;stroke-dasharray:2 2}
.lv-node:hover .lv-card{fill:#10294a;stroke-opacity:1}
.lv-pd{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle;animation:hdrpulse 1.8s infinite}
.lv .dm-svgwrap{border-radius:0}
.lv-tile{border-left:3px solid #2dd4ff}

/* ---- Cỡ khung Quick AI (nút ⤢): chuẩn, rộng, gần toàn màn hình ---- */
.dr-btns{display:flex;gap:2px}
.drawer{transition:width .2s ease,height .2s ease}
.drawer.dsz-2{width:min(760px,calc(100vw - 24px));height:min(820px,calc(100vh - 40px))}
.drawer.dsz-3{width:calc(100vw - 40px);height:calc(100vh - 40px);right:20px;bottom:20px;z-index:80}
.drawer-head{cursor:default;user-select:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}

/* ================= Đợt tinh chỉnh giao diện: nền, thẻ, bảng, khung 3D tối ================= */
/* 1. Bỏ nền trang trí cũ (đã có sơ đồ chuỗi cung ứng thật ở trang chủ), giữ lưới chấm nhẹ */
#bg .bg-chain{display:none}
#bg .bg-grid{opacity:.7}
/* 2. Thẻ: bo góc, bóng nhẹ, vạch nhấn ở tiêu đề */
.card{border-radius:10px;box-shadow:0 1px 2px rgba(27,36,40,.05),0 4px 14px rgba(27,36,40,.04)}
.card h2{display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(#80C926,#0A66A8);flex:none}
.kpi,.res2 .tile{border-radius:8px}
.res2-head .qtitle{letter-spacing:.02em}
/* 3. Khung 3D: thanh công cụ, bảng bên phải, tooltip nền tối (scene3d, transfer3d, Dashboard của tôi) */
.s3d .s3-view{background:#070f1c;border-color:#1d4a7a;border-radius:10px 0 0 10px;overflow:hidden}
.s3d .s3-bar{background:#0b1a2e;border-bottom-color:#1d4a7a;color:#c9d8ea}
.s3d .s3-chip{background:#0d1b2c;color:#c9d8ea;border-color:#1d4a7a;border-radius:6px}
.s3d .s3-chip:hover{border-color:#2dd4ff;color:#fff}
.s3d .s3-chip.on{background:#80C926;color:#0B100D;border-color:#80C926}
.s3d .s3-bar select{background:#0d1b2c;color:#e6f0fb;border-color:#1d4a7a;border-radius:6px}
.s3d .s3-note{color:#7f9ab8}
.s3d .s3-side{background:#08121f;border-color:#1d4a7a;color:#c9d8ea;border-radius:0 10px 10px 0}
.s3d .s3-side h3{color:#fff}.s3d .s3-side h4,.s3d .s3h{color:#7f9ab8}
.s3d .s3-side p,.s3d .s3-side .sub{color:#9bb0c9}
.s3d .s3-kp>div{background:#0d1b2c;border-color:#1d4a7a;border-radius:8px}.s3d .s3-kp small{color:#7f9ab8}.s3d .s3-kp b{color:#fff}
.s3d .s3-bars i{background:#16314f}.s3d .s3-bars .s3-r.on,.s3d .s3-bars .s3-r:hover{background:#10294a}
.s3d .s3-list>div{border-bottom-color:#16314f}.s3d .s3-list span{color:#7f9ab8}
.s3d .s3-list [data-pk]:hover,.s3d .tr3-list .tr3-o:hover{background:#10294a}
.s3d .s3-x{background:#0d1b2c;color:#c9d8ea;border-color:#1d4a7a;border-radius:6px}
.s3d .s3-crumb span,.s3d .s3-flt small{color:#7f9ab8}
.s3d .s3-tip{background:#0b1a2e;color:#e6f0fb;border-color:#1d4a7a;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.s3d .tr3-why{background:#0d1b2c;border-color:#1d4a7a;color:#c9d8ea}
.s3d .s3-ask{background:#80C926;color:#0B100D;border-color:#80C926;font-weight:600}
@media (max-width:900px){.s3d .s3-view{border-radius:10px 10px 0 0}.s3d .s3-side{border-radius:0 0 10px 10px}}
/* 4. Bảng: đầu bảng cố định, hàng sọc nhẹ, rê chuột sáng hàng, số căn phải font mono, nhãn mức độ dạng viên thuốc */
.tbl{border:1px solid var(--line2);border-radius:8px;background:#fff}
.tbl table{border-collapse:separate;border-spacing:0}
.tbl th{position:sticky;top:0;background:#F6F8F9;z-index:1;border-bottom:1px solid var(--line)}
.tbl tbody tr:nth-child(even) td{background:#FAFBFC}
.tbl tbody tr:hover td{background:#EEF5FA}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.c-crit b,.tbl td.c-warn b{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em}
.tbl td.c-crit b{background:#FDECEA;color:#B3261E;border:1px solid #F3B8B1}
.tbl td.c-warn b{background:#FFF4DC;color:#8A5A00;border:1px solid #F0D79A}
.tbl td.c-ok b{background:#E6F5EC;color:#1C7A47;border:1px solid #B5DEC6;display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px}
.tbl td code,.tbl td.mono{font-size:12px}
@media (max-width:720px){.tbl th{position:static}}
.tbl td.c-low b{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;background:#EEF1F3;color:#4B5A62;border:1px solid #D5DBDF}
/* màn hẹp: Campaign không tràn ngang, thanh tab cuộn ngang thay vì xuống nhiều dòng */
@media(max-width:1100px){.cmp-aud{grid-template-columns:minmax(0,1fr)}}
.cmp-aud>div{min-width:0}
@media(max-width:900px){.hdr-nav{flex-wrap:nowrap;gap:8px;padding:0 12px}.hdr-nav .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.hdr-nav .nav::-webkit-scrollbar{display:none}.hdr-nav .nav button{white-space:nowrap;flex:none}.hdr-nav .sp{display:none}.hdr-nav .scopebox{flex:none}}
.fm-dec{grid-column:1/-1;display:flex;gap:6px;margin-top:4px}.fm-dec .tr3-btn{flex:1;padding:4px 8px;font-size:12px}
.tr3-o b u{font-size:11px;font-weight:500;margin-left:6px;text-decoration:none}

/* ---------- Phòng agent (#/agents): ba khung Quick cạnh nhau ---------- */
.ar{display:flex;flex-direction:column;gap:12px}
.ar-note{margin:0;font-size:13px;color:var(--mute);max-width:980px}
.ar-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ar-col{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--rc);display:flex;flex-direction:column;min-width:0;transition:box-shadow .2s}
.ar-col.ar-pulse{box-shadow:0 0 0 3px var(--rc)}
.ar-h{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--rc);color:#fff}
.ar-h b{display:block;font-size:14px;line-height:1.2}
.ar-h small{display:block;font-size:11.5px;line-height:1.3;opacity:.92;margin-top:2px}
.ar-tag{font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;border:1px solid rgba(255,255,255,.7);padding:4px 7px;white-space:nowrap}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0}
.ar-chip{font:500 12px/1.2 'IBM Plex Sans',sans-serif;color:var(--rc);background:#fff;border:1px solid var(--rc);padding:5px 9px;cursor:pointer}
.ar-chip:hover,.ar-chip:focus-visible{background:var(--rc);color:#fff}
.ar-chip.first{background:var(--rc);color:#fff;font-weight:600}
.ar-chip.first:hover{filter:brightness(1.12)}
.ar-hint{padding:6px 12px 8px;font-size:11.5px;color:var(--mute);min-height:30px}
.ar-hint b{color:var(--rc)}
.ar-frame{flex:1;min-height:560px;height:calc(100vh - 360px);border-top:1px solid var(--line2);background:#fff}
.ar-frame iframe{width:100%;height:100%;border:0;display:block}
.ar-none{padding:16px;color:var(--mute);font-size:13px}
.ar-bus{background:var(--panel);border:1px solid var(--line);padding:10px 12px}
.ar-bush{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:6px}
.ar-bush b{font-size:13px}
.ar-stat{font-size:12px;color:var(--mute)}
.ar-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;max-height:190px;overflow:auto}
.ar-feed li{display:flex;gap:10px;align-items:baseline;font-size:12.5px;border-bottom:1px solid var(--line2);padding:3px 0}
.ar-feed li.none{color:var(--mute);border:0}
.ar-feed em{font-style:normal;color:var(--mute);font-size:11.5px;white-space:nowrap}
.ar-k{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#fff;background:#4a5a66;padding:3px 6px;white-space:nowrap}
.ar-feed li.xf .ar-k{background:#B85C0E}.ar-feed li.in .ar-k{background:#1F7A46}.ar-feed li.car .ar-k{background:#1769A6}
@media (max-width:1100px){.ar-cols{grid-template-columns:1fr}.ar-frame{height:560px}}
@media (prefers-reduced-motion:reduce){.ar-col{transition:none}}
.ar-badge{margin-left:auto;font:600 11px/1 'IBM Plex Mono',monospace;background:#fff;color:var(--rc);padding:4px 8px;white-space:nowrap}
.ar-chip.inbox{border-style:dashed}
.ar-conv .ar-thread{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.ar-msg{border:1px solid var(--line2);padding:8px 10px;background:#fff}
.ar-msg p{margin:4px 0 0;font-size:13px;line-height:1.45}
.ar-mh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-mh em{font-style:normal;color:var(--mute);font-size:11.5px}
.ar-pill{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#fff;background:var(--rc);padding:3px 6px;white-space:nowrap}
.ar-arr{color:var(--mute);font-size:12px}
.ar-st{margin-left:auto;font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;padding:3px 6px;border:1px solid currentColor;white-space:nowrap}
.ar-st.wait{color:#B85C0E}.ar-st.ok{color:#1F7A46}.ar-st.no{color:#C0392B}.ar-st.in{color:#1769A6}
.ar-ans{margin:8px 0 0 18px;padding:7px 10px;border-left:3px solid #1F7A46;background:#F3F8F5}
.ar-ans.no{border-left-color:#C0392B;background:#FBF3F2}