/* ==================================================================
   IDEA System 3-Track - he mau "giay kraft" theo console goc
   ================================================================== */
:root{
  --paper:#F4F1E8; --paper-2:#ECE7D8; --ink:#1C2024; --ink-soft:#5B5A52;
  --rule:#D8D2C0; --stamp:#8B8677;
  --t5s:#2F7A56; --t5s-bg:#E4EFE7;
  --tnm:#B5760F; --tnm-bg:#F5EBD8;
  --tkz:#2C5AA6; --tkz-bg:#E4EAF3;
  --danger:#A3352B; --danger-bg:#F3E3E0;
  --ok:#2F7A56; --header:#1C2024; --header-2:#2A2F35;
  --radius:2px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:-apple-system,"Segoe UI","Inter",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.45}
::selection{background:#1C2024;color:#F4F1E8}
a{color:inherit}
[hidden]{display:none !important}

/* ---------------- topbar ---------------- */
.topbar{background:var(--header);color:#EDEAE0;padding:18px 20px 14px}
.topbar-inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;
  align-items:flex-end;justify-content:space-between}
.brand{display:flex;flex-direction:column;gap:2px}
.brand .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#B9B4A2}
.brand h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.01em}
.brand .sub{font-size:12.5px;color:#B9B4A2}
.brand .owner{font-size:11.5px;color:#8E8B7E;margin-top:3px}
.brand .owner b{color:#B9B4A2;font-weight:700}
.profile-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--header-2);border:1px solid #3A4149;border-radius:var(--radius);padding:8px 10px}
.profile-box label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#9CA3AC;display:block;margin-bottom:2px}
.profile-box select,.profile-box input[type=text],.profile-box input[type=password]{
  background:#14181C;color:#EDEAE0;border:1px solid #454C55;border-radius:2px;
  padding:6px 8px;font-size:13px;font-family:var(--sans)}
.role-pill{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:2px;
  background:#EDEAE0;color:#1C2024;font-weight:700}

/* ---------------- chuông thông báo ---------------- */
.bell{position:relative;background:transparent;border:1px solid #454C55;border-radius:2px;
  cursor:pointer;padding:5px 8px;line-height:1}
.bell:hover{border-color:#7A828C}
.bell-icon{font-size:16px;filter:grayscale(.35)}
.bell.has .bell-icon{filter:none;animation:bellring 1.4s ease-in-out 2}
@keyframes bellring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}
  40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
.bell-count{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;
  border-radius:9px;background:var(--danger);color:#fff;font-family:var(--mono);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 4px}
.bell-count.urgent{background:#E11D48;box-shadow:0 0 0 3px rgba(225,29,72,.25)}

.notif-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:60;
  background:var(--paper);border-left:2px solid var(--ink);display:flex;
  flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.18)}
.notif-head{background:var(--header);color:#EDEAE0;padding:14px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.notif-head h3{margin:0;font-size:13px;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.08em}
.notif-close{background:transparent;border:1px solid #454C55;color:#EDEAE0;cursor:pointer;
  border-radius:2px;padding:4px 9px;font-size:13px}
.notif-body{flex:1;overflow-y:auto;padding:12px 14px}
.notif-item{background:#fff;border:1px solid var(--rule);border-left:5px solid var(--rule);
  border-radius:2px;padding:11px 13px;margin-bottom:10px;cursor:pointer}
.notif-item:hover{background:var(--paper-2)}
.notif-item.new{border-left-color:var(--tkz)}
.notif-item.urgent{border-left-color:var(--danger);background:var(--danger-bg)}
.notif-item .n-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.notif-item .n-id{font-family:var(--mono);font-size:11px;color:var(--stamp)}
.notif-item .n-time{font-size:11px;color:var(--ink-soft)}
.notif-item .n-title{font-weight:800;font-size:14px;margin:3px 0}
.notif-item .n-text{font-size:12.5px;color:var(--ink-soft)}
.notif-item .n-urgent{display:inline-block;font-family:var(--mono);font-size:10px;
  font-weight:800;background:var(--danger);color:#fff;padding:2px 6px;border-radius:8px;
  margin-bottom:4px}
.notif-foot{border-top:1px solid var(--rule);padding:10px 14px;font-size:12px;
  color:var(--ink-soft);background:var(--paper-2)}

/* ---------------- link status (heartbeat) ---------------- */
.linkbar{background:var(--header-2);border-top:1px solid #3A4149;color:#B9B4A2;
  font-family:var(--mono);font-size:11px}
.linkbar-inner{max-width:1080px;margin:0 auto;padding:7px 20px;display:flex;gap:18px;
  flex-wrap:wrap;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;
  vertical-align:middle;background:#6B7280}
.dot.live{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.18);animation:pulse 2s infinite}
.dot.warn{background:#FBBF24}
.dot.dead{background:#F87171}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.linkbar b{color:#EDEAE0;font-weight:700}

/* ---------------- tabs ---------------- */
.tabnav{background:var(--paper-2);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:5}
.tabnav-inner{max-width:1080px;margin:0 auto;display:flex;gap:2px;padding:0 20px;overflow-x:auto}
.tabnav button{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  text-transform:uppercase;background:transparent;border:none;border-bottom:3px solid transparent;
  padding:12px 14px;cursor:pointer;color:var(--ink-soft);white-space:nowrap;font-weight:600}
.tabnav button.active{color:var(--ink);border-bottom-color:var(--ink)}
.tabnav button .count{background:var(--ink);color:var(--paper);font-size:10px;
  border-radius:8px;padding:1px 6px;margin-left:6px}

main{max-width:1080px;margin:0 auto;padding:24px 20px 80px}
h2.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);font-family:var(--mono);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--rule)}
.hint{color:var(--ink-soft);font-size:13px}

/* ---------------- track picker ---------------- */
.track-choice{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.track-choice input{display:none}
.track-choice label{display:flex;flex-direction:column;gap:2px;padding:10px 16px;
  border:2px solid var(--rule);border-radius:var(--radius);cursor:pointer;background:#fff;min-width:150px}
.track-choice label .tname{font-weight:800;font-size:14px}
.track-choice label .tdesc{font-size:11.5px;color:var(--ink-soft)}
.track-choice input:checked + label{border-color:var(--ink);background:var(--paper-2)}
.track-choice label.t-5S{border-left:6px solid var(--t5s)}
.track-choice label.t-NM{border-left:6px solid var(--tnm)}
.track-choice label.t-KZ{border-left:6px solid var(--tkz)}

/* ---------------- cards / forms ---------------- */
.card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);margin-bottom:5px;font-weight:700}
.field input[type=text],.field input[type=number],.field textarea,.field select{
  width:100%;padding:9px 10px;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink)}
.field textarea{min-height:80px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- khối "phát hiện ở đâu / khi nào / ai" (người bị đề xuất) ---- */
.obs-box{border:2px dashed var(--rule);border-left:6px solid var(--tnm);
  border-radius:var(--radius);padding:14px 16px 4px;margin:0 0 16px;background:#FCFBF7}
.obs-head{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.07em;font-weight:800;color:var(--tnm);margin-bottom:3px}
.obs-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px}
.obs-box .field input[type=datetime-local]{width:100%;padding:9px 10px;
  border:1px solid var(--rule);border-radius:2px;font-family:var(--sans);
  font-size:14px;background:#fff;color:var(--ink)}
.ticket-obs{padding:2px 14px 8px;font-size:12.5px;color:var(--ink-soft)}
.obs-tag{font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 6px;
  border-radius:8px;background:var(--tnm-bg);color:var(--tnm)}
@media(max-width:640px){.row2{grid-template-columns:1fr}}
.radio-row{display:flex;gap:16px;flex-wrap:wrap}
.radio-row label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.checkline{display:flex;align-items:center;gap:8px;font-size:13.5px}
.charcount{font-family:var(--mono);font-size:10.5px;color:var(--stamp);float:right}

.btn{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;padding:10px 18px;border-radius:2px;border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{opacity:.88}
.btn.secondary{background:transparent;color:var(--ink)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger.secondary{background:transparent;color:var(--danger)}
.btn.go{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.small{padding:6px 12px;font-size:11px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.banner{padding:10px 14px;border-radius:2px;font-size:13px;margin-bottom:16px}
.banner.ok{background:var(--t5s-bg);color:var(--t5s);border:1px solid var(--t5s)}
.banner.warn{background:var(--tnm-bg);color:#7A5108;border:1px solid var(--tnm)}
.banner.info{background:var(--tkz-bg);color:var(--tkz);border:1px solid var(--tkz)}
.banner.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)}

/* ---------------- ticket ---------------- */
.ticket{position:relative;background:#fff;border:1px solid var(--rule);border-left-width:8px;
  border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.ticket.trk-5S{border-left-color:var(--t5s)}
.ticket.trk-NM{border-left-color:var(--tnm)}
.ticket.trk-KZ{border-left-color:var(--tkz)}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:12px 14px 10px}
.ticket-id{font-family:var(--mono);font-size:12px;color:var(--stamp);letter-spacing:.03em}
.ticket-track-badge{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:800;padding:2px 7px;border-radius:8px}
.badge-5S{background:var(--t5s-bg);color:var(--t5s)}
.badge-NM{background:var(--tnm-bg);color:var(--tnm)}
.badge-KZ{background:var(--tkz-bg);color:var(--tkz)}
.ticket-title{font-size:15px;font-weight:800;margin:2px 0}
.ticket-meta{font-size:12px;color:var(--ink-soft)}
.ticket-body{padding:10px 14px 4px;font-size:13.5px;white-space:pre-wrap}
.ticket-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px 14px;flex-wrap:wrap}
.status-pill{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.status-cho{background:#EFE9D6;color:#7A5108}
.status-dong{background:var(--t5s-bg);color:var(--t5s)}
.status-tuchoi{background:var(--danger-bg);color:var(--danger)}
.risk-tag{font-family:var(--mono);font-size:10.5px;font-weight:800;padding:2px 7px;
  border-radius:8px;text-transform:uppercase}
.risk-cao{background:var(--danger-bg);color:var(--danger)}
.risk-tb{background:#F5EBD8;color:#7A5108}
.risk-thap{background:#EAEAE2;color:var(--ink-soft)}
.award-tag{font-family:var(--mono);font-size:10.5px;font-weight:800;padding:2px 7px;
  border-radius:8px;background:#1C2024;color:#F4F1E8}
.history{padding:0 14px 14px;font-size:12.5px;color:var(--ink-soft)}
.history ol{margin:6px 0 0;padding-left:18px}
.history li{margin-bottom:4px}
details.hist-toggle summary{cursor:pointer;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:0 14px 12px}
.action-form{background:var(--paper-2);border-top:1px solid var(--rule);padding:12px 14px}
.action-form textarea{width:100%;min-height:56px;border:1px solid var(--rule);
  border-radius:2px;padding:8px;font-family:var(--sans);font-size:13px}
.action-form .btnrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.action-form input[type=text],.action-form input[type=number]{border:1px solid var(--rule);
  border-radius:2px;padding:7px 8px;font-size:13px;font-family:var(--sans)}

.empty{border:2px dashed var(--rule);border-radius:var(--radius);padding:36px 20px;
  text-align:center;color:var(--ink-soft)}
.empty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:150px}

/* ---------------- tables / report ---------------- */
table.log{width:100%;border-collapse:collapse;font-size:13px}
table.log th{text-align:left;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:8px}
table.log td{padding:9px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
table.log tr:hover td{background:var(--paper-2)}
.id-cell{font-family:var(--mono);font-size:11.5px;color:var(--stamp);white-space:nowrap}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:22px}
.kpi-card{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--ink);
  padding:14px 14px 12px;border-radius:var(--radius)}
.kpi-card .num{font-size:26px;font-weight:800;font-family:var(--mono)}
.kpi-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin-top:2px}
.kpi-card.t5s{border-top-color:var(--t5s)}
.kpi-card.tnm{border-top-color:var(--tnm)}
.kpi-card.tkz{border-top-color:var(--tkz)}
.chart-wrap{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px;margin-bottom:20px}
.chart-wrap h3,.card h3{margin:0 0 12px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.07em;font-family:var(--mono);color:var(--ink-soft)}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:13px}
.bar-label{width:150px;flex:0 0 auto;color:var(--ink-soft);font-size:12.5px}
.bar-track{flex:1;background:var(--paper-2);height:16px;border-radius:2px;overflow:hidden}
.bar-fill{height:100%;background:var(--ink)}
.bar-fill.c5S{background:var(--t5s)} .bar-fill.cNM{background:var(--tnm)}
.bar-fill.cKZ{background:var(--tkz)}
.bar-val{font-family:var(--mono);font-weight:800;width:34px;text-align:right}
.lb-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule)}
.lb-rank{font-family:var(--mono);font-weight:800;width:22px;color:var(--ink-soft)}
.lb-name{flex:1;font-weight:600}
.lb-name .award-tag{margin-left:8px}
.lb-pts{font-family:var(--mono);font-weight:800}
.lb-row.top1 .lb-rank,.lb-row.top1 .lb-pts{color:var(--tnm)}

/* ---------------- host console ---------------- */
.hostgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.hostgrid{grid-template-columns:1fr}}
.bigswitch{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.state-lamp{font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:.06em;
  padding:12px 20px;border:3px solid var(--ink);border-radius:2px}
.state-lamp.on{background:var(--t5s-bg);color:var(--t5s);border-color:var(--t5s)}
.state-lamp.off{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.mono-box{font-family:var(--mono);font-size:11.5px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:2px;padding:10px;word-break:break-all;
  white-space:pre-wrap;user-select:all}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;
  border-bottom:1px solid var(--rule)}
.kv span:first-child{color:var(--ink-soft)}
.kv span:last-child{font-family:var(--mono);font-weight:700}

/* ---------------- gate ---------------- */
.gate-wrap{max-width:460px;margin:60px auto;padding:0 20px}
.gate-wrap .card{padding:24px}
.gate-wrap h2{margin:0 0 4px;font-size:18px}
footer.foot{max-width:1080px;margin:0 auto;padding:0 20px 40px;font-size:11px;
  color:var(--ink-soft);font-family:var(--mono)}
.toast{position:fixed;right:16px;bottom:16px;max-width:340px;z-index:50;
  font-size:13px;padding:12px 14px;border-radius:2px;box-shadow:0 6px 24px rgba(0,0,0,.18)}

/* ---------------- link + QR trong host console ---------------- */
.linkcard{display:flex;gap:16px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.linkcard:last-child{border-bottom:none}
.linkcard img{width:116px;height:116px;flex:0 0 auto;border:1px solid var(--rule);background:#fff}
.linkcard .lc-body{flex:1;min-width:220px}
.linkcard .lc-kind{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--stamp)}
.linkcard .lc-url{font-family:var(--mono);font-size:13px;font-weight:700;word-break:break-all;
  margin:3px 0 8px;user-select:all}
.linkcard .lc-btns{display:flex;gap:6px;flex-wrap:wrap}
.badge-live{font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 6px;
  border-radius:8px;background:var(--t5s-bg);color:var(--t5s)}
.badge-off{font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 6px;
  border-radius:8px;background:var(--danger-bg);color:var(--danger)}
.badge-wait{font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 6px;
  border-radius:8px;background:var(--tnm-bg);color:var(--tnm)}

/* ---------------- trang in ma QR ---------------- */
.printpage{background:var(--paper-2)}
.print-toolbar{background:var(--header);padding:12px 20px;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:10;color:#EDEAE0}
.print-toolbar label,.print-toolbar .hint,.print-toolbar a{color:#EDEAE0}
.print-toolbar a.secondary{border-color:#454C55}
.sheet{background:#fff;width:190mm;min-height:272mm;margin:18px auto;padding:18mm 16mm;
  border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;
  text-align:center;page-break-after:always;box-sizing:border-box}
.sheet-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stamp)}
.sheet-title{font-size:34px;font-weight:800;margin:6px 0 2px;line-height:1.15}
.sheet-lead{font-size:17px;color:var(--ink-soft);margin:0 0 10mm}
.sheet-qr{width:105mm;height:105mm;display:block}
.sheet-steps{text-align:left;font-size:16px;line-height:1.8;margin:9mm 0 6mm;
  padding-left:24px;max-width:150mm;align-self:center}
.sheet-url{font-family:var(--mono);font-size:15px;font-weight:700;padding:8px 14px;
  border:2px solid var(--ink);border-radius:2px;word-break:break-all;max-width:160mm}
.sheet-code{margin-top:8mm;display:flex;flex-direction:column;gap:2px;align-items:center}
.sheet-code-lbl{font-size:13px;color:var(--ink-soft)}
.sheet-code-val{font-family:var(--mono);font-size:40px;font-weight:800;letter-spacing:.14em}
.sheet-foot{margin-top:auto;padding-top:8mm;font-size:12.5px;color:var(--ink-soft);font-weight:600}
@media print{
  .printpage{background:#fff}
  .print-toolbar{display:none}
  .sheet{width:auto;min-height:auto;margin:0;border:none;padding:12mm}
  @page{size:A4;margin:8mm}
}