/* Bảng HỆ THỐNG của Exosuit HUD (mode sys). Dùng biến --accent của HUD; ba màu trạng thái cố định.
   Lưới 8px. Mọi màu trạng thái đều đi kèm chữ + ký hiệu (■ ▲ ●) — màu không phải kênh duy nhất. */
#sysBoard,#sbNgan,#sbModal{--do:#ff6b86;--vang:#ffcb5c;--xanh:#5affa0;--chu:#eaffff;--mo:rgba(210,240,255,.66);
  --vien:rgba(var(--accent),.34);--nen:rgba(5,14,23,.97);font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--chu)}
#sysBoard *,#sbNgan *,#sbModal *{box-sizing:border-box}
#sysBoard[hidden],#sbNgan[hidden],#sbModal[hidden]{display:none!important}
#sysBoard{position:fixed;left:344px;right:232px;top:var(--sb-top,64px);bottom:16px;z-index:12;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(6,18,28,.96),var(--nen));border:1px solid var(--vien);border-radius:4px;
  box-shadow:0 0 0 1px rgba(var(--accent),.08),0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(8px)}
@media (max-width:1279px){#sysBoard{right:16px;bottom:182px}}
@media (max-width:900px){#sysBoard{left:16px;bottom:348px}}
.sb-dau{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--vien);flex-wrap:wrap}
.sb-tieu b{display:block;font:700 16px/1.2 -apple-system,sans-serif;letter-spacing:3px}
.sb-luc{font:500 12px/1.4 'SF Mono',Menlo,monospace;color:var(--mo)}
.sb-luc.cu{color:var(--do)}
.sb-tab{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.sb-tab button{border:1px solid var(--vien);background:transparent;color:var(--mo);font:600 13px/1 -apple-system,sans-serif;
  letter-spacing:.5px;padding:9px 12px;border-radius:3px;cursor:pointer}
.sb-tab button:hover{color:var(--chu);border-color:var(--accentHex)}
.sb-tab button.chon{background:rgba(var(--accent),.18);border-color:var(--accentHex);color:var(--chu)}
.sb-tab button i{font-style:normal;margin-left:8px;color:var(--vang);font-weight:700}
.sb-phai{display:flex;gap:8px;align-items:center}
.sb-cta{background:rgba(var(--accent),.22);border:1px solid var(--accentHex);color:var(--chu);font:700 13px/1 -apple-system,sans-serif;
  padding:10px 16px;border-radius:3px;cursor:pointer;letter-spacing:.5px}
.sb-cta:hover{background:rgba(var(--accent),.38)}
.sb-cu-banner{padding:8px 24px;background:rgba(255,107,134,.14);border-bottom:1px solid var(--do);color:var(--do);font:700 13px/1.4 -apple-system,sans-serif}
.sb-than{flex:1;overflow:auto;padding:16px}
.sb-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1200px){.sb-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sb-the{--c:var(--xanh);border:1px solid var(--vien);border-left:4px solid var(--c);border-radius:3px;padding:12px 14px;
  background:rgba(var(--accent),.06);cursor:pointer;min-width:0}
.sb-the.do{--c:var(--do)}.sb-the.vang{--c:var(--vang)}.sb-the.chon{box-shadow:inset 0 0 0 1px var(--c)}
.sb-the:hover{background:rgba(var(--accent),.12)}
.sb-the h3{margin:0 0 6px;font:700 12px/1.2 -apple-system,sans-serif;letter-spacing:2px;color:var(--mo);display:flex;justify-content:space-between;gap:8px}
.sb-so{font:700 30px/1.1 -apple-system,sans-serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sb-so.chu{font-size:22px;line-height:1.25}
.sb-so-nho{font:600 14px/1.3 -apple-system,sans-serif;color:var(--mo);margin-top:2px}
.sb-phu{margin:8px 0 0;padding:0;list-style:none;font-size:12px;color:var(--mo)}
.sb-phu li{margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-huy{--c:var(--xanh);display:inline-flex;gap:6px;align-items:center;font:700 11px/1 -apple-system,sans-serif;letter-spacing:.8px;
  padding:4px 8px;border:1px solid var(--c);border-radius:2px;color:var(--c);white-space:nowrap}
.sb-huy.do{--c:var(--do)}.sb-huy.vang{--c:var(--vang)}
.sb-huy::before{content:'●';font-size:9px}.sb-huy.do::before{content:'■'}.sb-huy.vang::before{content:'▲'}
.sb-hai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:1100px){.sb-hai{grid-template-columns:minmax(0,1fr)}}
.sb-muc h2{margin:0 0 8px;font:700 12px/1.2 -apple-system,sans-serif;letter-spacing:2px;color:var(--mo)}
.sb-ds{max-height:350px;overflow:auto;border:1px solid var(--vien);border-radius:3px}
.sb-dong{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(var(--accent),.14);align-items:flex-start}
.sb-dong:last-child{border-bottom:0}
.sb-dong .gt{flex:1;min-width:0}.sb-dong b{display:block;font-weight:600;overflow-wrap:anywhere}
.sb-dong small{color:var(--mo);font-size:12px}
.sb-dong time{color:var(--mo);font:500 12px/1.4 'SF Mono',Menlo,monospace;white-space:nowrap}
.sb-rong{padding:24px;text-align:center;color:var(--mo)}
.sb-tool{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.sb-tool input[type=search],.sb-truong input,.sb-truong textarea,.sb-truong select,.sb-cb-o{background:rgba(2,8,14,.8);border:1px solid var(--vien);
  color:var(--chu);font:14px/1.4 -apple-system,sans-serif;padding:10px 12px;border-radius:3px;outline:0;width:100%}
.sb-tool input[type=search]{width:220px;max-width:100%}
.sb-tool .sb-cta{margin-left:auto}
.sb-tool input:focus,.sb-truong :is(input,textarea,select):focus,.sb-cb-o:focus{border-color:var(--accentHex)}
.sb-tool .sb-doan{display:flex;gap:0}
.sb-doan button{border:1px solid var(--vien);background:transparent;color:var(--mo);padding:9px 12px;font:600 13px/1 -apple-system,sans-serif;cursor:pointer;margin-left:-1px}
.sb-doan button.chon{background:rgba(var(--accent),.2);color:var(--chu);border-color:var(--accentHex);position:relative}
.sb-bang{width:100%;border-collapse:collapse}
.sb-bang th{position:sticky;top:0;background:var(--nen);text-align:left;font:700 11px/1.2 -apple-system,sans-serif;letter-spacing:1.5px;
  color:var(--mo);padding:8px 10px;border-bottom:1px solid var(--vien);white-space:nowrap}
.sb-bang{font-size:13px}
.sb-bang td{padding:8px 10px;border-bottom:1px solid rgba(var(--accent),.14);vertical-align:top;overflow-wrap:break-word}
.sb-bang tbody tr:hover{background:rgba(var(--accent),.08)}
.sb-bang tr.bam{cursor:pointer}
.sb-bang td.hd{white-space:nowrap;text-align:right}
.sb-cuon{max-height:350px;overflow:auto;border:1px solid var(--vien);border-radius:3px}
.sb-trang{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:8px;color:var(--mo);font-size:13px}
.sb-nut{border:1px solid var(--vien);background:transparent;color:var(--chu);font:600 12px/1 -apple-system,sans-serif;padding:7px 10px;
  border-radius:3px;cursor:pointer;margin-left:4px}
.sb-nut:hover:not(:disabled){border-color:var(--accentHex);background:rgba(var(--accent),.18)}
.sb-nut:disabled{opacity:.4;cursor:not-allowed}
.sb-nut.nguy{color:var(--do);border-color:rgba(255,107,134,.5)}
.sb-nut.nguy:hover:not(:disabled){background:rgba(255,107,134,.16);border-color:var(--do)}
.sb-hoi{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--vien);border-radius:50%;
  font:700 11px/1 -apple-system,sans-serif;color:var(--mo);position:relative;cursor:help;flex:none;letter-spacing:0}
.sb-hoi:hover::after,.sb-hoi:focus::after{content:attr(data-tip);position:absolute;z-index:60;top:24px;left:-8px;width:min(300px,70vw);white-space:pre-line;
  background:var(--nen);border:1px solid var(--accentHex);padding:10px 12px;border-radius:3px;font:500 12px/1.5 -apple-system,sans-serif;color:var(--chu);text-align:left;letter-spacing:0}
/* ngăn chi tiết bên phải + hộp thoại */
#sbNgan{position:fixed;top:var(--sb-top,64px);right:16px;bottom:182px;width:min(560px,92vw);z-index:28;display:flex;flex-direction:column;
  background:var(--nen);border:1px solid var(--accentHex);border-radius:4px;box-shadow:-12px 0 40px rgba(0,0,0,.6)}
@media (max-width:900px){#sbNgan{left:16px;width:auto;bottom:348px}}
.sb-ngan-dau{display:flex;gap:12px;align-items:flex-start;padding:16px 24px;border-bottom:1px solid var(--vien)}
.sb-ngan-dau h2{margin:0;font:700 16px/1.3 -apple-system,sans-serif;flex:1;overflow-wrap:anywhere}
.sb-ngan-dau small{display:block;color:var(--mo);font-weight:400;font-size:12px}
.sb-x{border:1px solid var(--vien);background:transparent;color:var(--chu);width:32px;height:32px;border-radius:3px;font-size:18px;line-height:1;cursor:pointer}
.sb-x:hover{border-color:var(--accentHex);background:rgba(var(--accent),.18)}
.sb-ngan-than{flex:1;overflow:auto;padding:16px 24px}
.sb-ngan-than .sb-muc{margin-bottom:24px}
.sb-tt{margin:0;padding:12px 14px;border-left:3px solid var(--accentHex);background:rgba(var(--accent),.08);font-size:14px}
.sb-tt small{display:block;margin-top:8px;color:var(--mo)}
#sbModal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:16px}
.sb-hop{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--nen);border:1px solid var(--accentHex);border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.sb-hop-dau{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--vien)}
.sb-hop-dau h2{margin:0;font:700 16px/1.3 -apple-system,sans-serif;flex:1}
.sb-hop-than{padding:24px}
.sb-hop-chan{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--vien)}
.sb-truong{margin-bottom:16px}
.sb-truong label{display:flex;gap:8px;align-items:center;margin-bottom:8px;font:600 12px/1.2 -apple-system,sans-serif;letter-spacing:1px;color:var(--mo)}
.sb-truong textarea{min-height:96px;resize:vertical}
.sb-truong select option{background:#06121c;color:var(--chu)}
.sb-bb{color:var(--do)}
.sb-loi{color:var(--do);font-size:12px;margin-top:4px}
.sb-loi-chung{background:rgba(255,107,134,.12);border:1px solid var(--do);padding:10px 12px;border-radius:3px;color:var(--do);margin-bottom:16px;font-weight:600}
.sb-cb{position:relative}
.sb-cb-ds{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:220px;overflow:auto;background:var(--nen);border:1px solid var(--accentHex);border-radius:0 0 3px 3px}
.sb-cb-ds button{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid rgba(var(--accent),.14);color:var(--chu);padding:10px 12px;font:14px/1.3 -apple-system,sans-serif;cursor:pointer}
.sb-cb-ds button:hover,.sb-cb-ds button.chon{background:rgba(var(--accent),.2)}
.sb-cb-ds[hidden]{display:none}
.sb-nut-chinh{background:rgba(var(--accent),.28);border:1px solid var(--accentHex);color:var(--chu);font:700 13px/1 -apple-system,sans-serif;padding:10px 16px;border-radius:3px;cursor:pointer}
.sb-nut-chinh:hover:not(:disabled){background:rgba(var(--accent),.45)}
.sb-nut-chinh:disabled{opacity:.5;cursor:wait}
.sb-nut-chinh.nguy{background:rgba(255,107,134,.25);border-color:var(--do)}

/* bổ sung */
.sb-the:nth-child(n+3) .sb-hoi:hover::after,.sb-the:nth-child(n+3) .sb-hoi:focus::after{left:auto;right:-8px}
.sb-huy.trung{--c:var(--accentHex)}.sb-huy.trung::before{content:'◆'}
.sb-segs{display:contents}
.sb-bang td small{display:block;color:var(--mo);font-size:12px;margin-top:2px}
.sb-kep{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-ly-do{color:var(--do)!important}
.sb-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--xanh);color:var(--xanh);border-radius:2px;padding:4px 8px;font:600 12px/1 -apple-system,sans-serif;white-space:nowrap}
.sb-chip.do{border-color:var(--do);color:var(--do)}
.sb-trang-web{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-8px 0 24px}
.sb-nhan{display:inline-flex;gap:8px;align-items:center;font:700 11px/1 -apple-system,sans-serif;letter-spacing:2px;color:var(--mo)}
.sb-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;max-width:min(560px,90%);padding:12px 16px;border:1px solid var(--xanh);border-radius:3px;
  background:var(--nen);color:var(--chu);font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.sb-toast.loi{border-color:var(--do);color:var(--do)}
.sb-toast[hidden]{display:none}
.sb-the-loi{margin:48px auto;max-width:480px}.sb-the-loi p{margin:0 0 16px}
.sb-tq .sb-ds{max-height:clamp(160px,calc(100vh - 560px),350px)}
.sb-dong.bam{cursor:pointer}.sb-dong.bam:hover{background:rgba(var(--accent),.1)}
.sb-bang td .sb-nut:first-child{margin-left:0}
.sb-the:focus-visible,.sb-dong.bam:focus-visible,.sb-bang tr.bam:focus-visible{outline:2px solid var(--accentHex);outline-offset:-2px}

.sb-than>div>.sb-cuon{max-height:max(350px,calc(100vh - 330px))}
/* bảng hẹp → thẻ dọc (JS gắn class .doc theo bề rộng hộp bảng) */
.sb-cuon.doc .sb-bang thead{display:none}
.sb-cuon.doc .sb-bang,.sb-cuon.doc .sb-bang tbody,.sb-cuon.doc .sb-bang tr{display:block;width:100%}
.sb-cuon.doc .sb-bang tr{padding:8px 0;border-bottom:1px solid rgba(var(--accent),.22)}
.sb-cuon.doc .sb-bang td{display:flex;gap:12px;align-items:baseline;border:0;padding:3px 12px}
.sb-cuon.doc .sb-bang td::before{content:attr(data-nhan);flex:0 0 96px;color:var(--mo);font:700 10px/1.5 -apple-system,sans-serif;letter-spacing:1px}
.sb-cuon.doc .sb-bang td[data-nhan=""]::before{content:none}
.sb-cuon.doc .sb-bang td>div{flex:1;min-width:0}
.sb-cuon.doc .sb-bang td.hd{text-align:left;white-space:normal;padding-top:6px}