:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --border: #e0e2e7;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --error: #dc2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hidden { display: none !important; }

.screen { max-width: 720px; margin: 0 auto; }

/* 2026-09-14: #dashboard-screen dùng CHUNG class .screen với màn hình đăng
   nhập (hợp lý cho login — form hẹp, căn giữa) nhưng vô tình bị giới hạn
   luôn max-width 720px của .screen — khiến main{max-width:1600px} bên trong
   KHÔNG BAO GIỜ phát huy được (con không thể rộng hơn cha), dù đã "nới rộng"
   từ v1.34.3. Đây là NGUYÊN NHÂN THẬT của việc trang luôn bị bó hẹp/thừa
   nhiều khoảng trắng 2 bên dù màn hình rộng — ghi đè riêng, không đụng tới
   .screen mặc định (login vẫn giữ nguyên 720px, đúng ý đồ ban đầu). */
#dashboard-screen { max-width: none; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 1.3rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }

.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--error); font-size: 0.9rem; }

label { display: block; margin: 10px 0 4px; font-size: 0.9rem; }

input, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text);
}

button {
  margin-top: 10px;
  margin-right: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}
button:hover { background: var(--accent-hover); }
button.secondary { background: #e5e7eb; color: var(--text); }
button.secondary:hover { background: #d1d5db; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mục 3 (dashboard) tận dụng gần hết chiều rộng cửa sổ thay vì bó hẹp 900px giữa
   trang — trước đây trên màn hình rộng 2 bên trống trơn trong khi bảng log/ứng
   viên bên trong lại phải bó chữ rất nhỏ mới vừa. Vẫn giữ 1 mức trần hợp lý
   (1600px) để không bị kéo dài quá mức trên màn hình siêu rộng, và padding 2
   bên (24px) để nội dung không dính sát mép cửa sổ. */
header {
  max-width: 1600px;
  margin: 0 auto 16px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-box { display: flex; align-items: center; gap: 12px; }
#countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
#countdown.warning { color: #d97706; border-color: #fbbf24; }
#countdown.danger { color: var(--error); border-color: var(--error); }

main { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* Tab bar (mục 1/2/3) — trước đây cả 3 mục nằm chồng dọc, phải cuộn rất nhiều
   để tới mục 3 (mục dùng nhiều nhất khi vòng nghiên cứu đang chạy). Giờ mỗi
   mục là 1 tab riêng, chỉ hiện đúng 1 mục tại 1 thời điểm. */
.tab-bar {
  max-width: 1600px;
  margin: 0 auto 12px;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  margin: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.tab-btn:hover { background: #e5e7eb; color: var(--text); }
.tab-btn.active {
  background: var(--card-bg);
  color: var(--accent);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--card-bg);
  margin-bottom: -1px;
}
.tab-panel.hidden { display: none !important; }

/* 2026-09-14: 3 tab con BÊN TRONG mục 3 (Alpha đang tính toán / Chi phí LLM /
   Alpha ứng viên) — trước đây 3 bảng này xếp chồng dọc cùng lúc, phải cuộn
   nhiều mới thấy hết. Dùng lại đúng phong cách .tab-btn/.tab-panel ở trên,
   chỉ thu nhỏ + bỏ max-width (đã nằm sẵn trong .card của mục 3 rồi). */
.sub-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 12px;
}
.sub-tab-btn { padding: 8px 14px; font-size: 0.88rem; }
.sub-tab-panel.hidden { display: none !important; }

/* Bang (log, ung vien, thong ke...) tao dong bang JS - truoc day khong co CSS
   rieng nen trinh duyet ep vua trong khung 900px, chu bi bop rat nho, kho doc.
   Gio cho bang rong het khung (da rong hon nhieu nho main/tab-bar o tren), tu
   ngat dong o cac cot chu dai (Expression/Ly do) thay vi bop chu, va cuon
   ngang rieng CHI bang do neu man hinh qua hep (khong lam ca trang bi cuon
   ngang). */
.card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: auto;
}
.card table th, .card table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}
.card table th {
  background: #f9fafb;
  font-weight: 600;
  white-space: nowrap;
}
.card table tr:hover td { background: #f9fafb; }
#research-log, #research-candidates, #research-stats, #rejection-reason-stats,
#alpha-summary, #datafields-summary {
  overflow-x: auto;
}

.scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.scope-row input, .scope-row select { width: auto; flex: 1 1 120px; margin: 0; }
.scope-row label { display: inline; margin: 0; font-size: 0.85rem; color: var(--muted); }

#job-progress { margin-top: 10px; white-space: pre-line; }
#alpha-summary { margin-top: 10px; font-size: 0.9rem; }

/* =====================================================================
   v2.1.0 — giao diện mượt hơn (nền sáng), KHÔNG đổi cấu trúc / không bỏ thông tin.
   Chỉ ghi đè thẩm mỹ: màu nền dịu, bóng nhẹ, bo góc, chuyển động, nhãn trạng thái.
   ===================================================================== */
:root {
  --bg: #f5f7fb;
  --card-bg: #ffffff;
  --border: #e6e9f0;
  --text: #1b2130;
  --muted: #687284;
  --accent: #2563eb;
  --accent-hover: #1e4fd6;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  --c-code: #16a34a; --c-sonnet: #ea580c; --c-you: #ca8a04;
}
body {
  background: radial-gradient(1200px 600px at 10% -10%, #e8efff 0%, transparent 60%), var(--bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.card { box-shadow: var(--shadow); border-radius: 14px; transition: box-shadow .2s ease; }
.card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.08); }
/* các khung trước đây viền tối (#444) trên nền sáng -> viền dịu */
#notify-card, #run-parts, #schedule-box, #submit-queue-box, #scope-score-box, #llm-key-box {
  border-color: var(--border) !important; border-radius: 12px !important; background: #fbfcfe;
}
button { transition: background .15s ease, transform .05s ease, box-shadow .15s ease; box-shadow: 0 1px 2px rgba(37,99,235,.18); }
button:active:not(:disabled) { transform: translateY(1px); }
button.secondary { box-shadow: none; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.tab-bar { position: sticky; top: 0; z-index: 5; background: rgba(245,247,251,.92); backdrop-filter: blur(6px); padding-top: 6px; }
.tab-btn { transition: color .15s ease, background .15s ease; }
.tab-btn.active { box-shadow: 0 -2px 0 var(--accent) inset; }
.card table th { position: sticky; top: 0; background: #f6f8fc; }
.card table tr { transition: background .12s ease; }
details > summary { cursor: pointer; }
#research-run-badge, #schedule-badge, #submit-queue-badge, #super-badge { padding: 2px 10px; border-radius: 999px; background: #eef2f7; font-size: .8rem; }

/* ---------------- tab 4: Giám sát ---------------- */
.mon-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.mon-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mon-controls label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; color: var(--muted); }
.mon-controls select { width: auto; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef2f7; color: var(--muted); font-size: .8rem; margin-right: 6px; }
.pill-on { background: #dcfce7; color: #166534; }
.mon-parts { margin: 8px 0 4px; }
.mon-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.tile { background: #fbfcfe; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.tile-n { font-size: 1.6rem; font-weight: 700; color: var(--c-sonnet); font-variant-numeric: tabular-nums; }
.tile-n.tile-code { color: var(--c-code); } .tile-n.tile-you { color: var(--c-you); }
.tile-l { font-size: .78rem; color: var(--muted); }
.mon-spider-row { display: grid; grid-template-columns: 1fr 210px; gap: 12px; align-items: stretch; }
.mon-spider { width: 100%; height: 320px; background: linear-gradient(180deg, #fbfcff, #f3f6fc); border: 1px solid var(--border); border-radius: 12px; }
.mon-boxes { display: flex; flex-direction: column; gap: 10px; }
.mbox { flex: 1; border-radius: 12px; padding: 10px 12px; border: 1.5px solid; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.mbox-k { font-size: .8rem; color: var(--muted); }
.mbox-n { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbox-code { border-color: #86efac; } .mbox-code .mbox-n { color: var(--c-code); }
.mbox-sonnet { border-color: #fdba74; } .mbox-sonnet .mbox-n { color: var(--c-sonnet); }
.mbox-you { border-color: #fde68a; } .mbox-you .mbox-n { color: var(--c-you); }
.mon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.mon-wide { grid-column: span 2; }
.mon-col h3 { font-size: .92rem; margin: 0 0 8px; }
.mon-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.mon-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mon-table th, .mon-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.mon-table th { position: sticky; top: 0; background: #f6f8fc; }
.chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.chip-sonnet { background: #ffedd5; color: #9a3412; } .chip-code { background: #dcfce7; color: #166534; }
.hbar { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 8px; margin: 6px 0; font-size: .85rem; }
.hbar-t { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.hbar-f { height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; }
.f-code { background: var(--c-code); } .f-sonnet { background: var(--c-sonnet); } .f-you { background: var(--c-you); }
.think { margin: 4px 0; padding-left: 10px; border-left: 3px solid; font-size: .85rem; }
.think-code { border-color: var(--c-code); } .think-sonnet { border-color: var(--c-sonnet); } .think-you { border-color: var(--c-you); }
.mon-svg { width: 100%; background: #fbfcfe; border: 1px solid var(--border); border-radius: 10px; }
.mon-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px; background: #fbfcfe; border: 1px solid var(--border); border-radius: 10px; max-height: 220px; overflow: auto; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; transition: transform .15s ease; }
.dot:hover { transform: scale(1.6); }
.dot-gate { box-shadow: 0 0 0 2px var(--accent); }
.dot-agent { border-radius: 50%; }
.legend .dot { vertical-align: middle; margin: 0 3px 0 8px; }
@media (max-width: 900px) { .mon-spider-row { grid-template-columns: 1fr; } .mon-wide { grid-column: auto; } }

html { background: var(--bg); }
body { min-height: 100vh; background-attachment: fixed; }
.mon-table td, .card .mon-table td { white-space: nowrap; word-break: normal; }
.mon-table td.wrap, .card .mon-table td.wrap { white-space: normal; word-break: break-word; min-width: 260px; }

/* =====================================================================
   v2.2.0 — giao diện chuyên nghiệp, gọn: tab 3 là 1 trang duy nhất
   (điều khiển · trạng thái 3 phần · tổng quan · chi tiết theo tab con).
   ===================================================================== */
body { padding: 20px 12px; }
header h1 { font-size: 1.25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 0 0 8px; }
.card { padding: 22px 24px; }
.tab-bar { gap: 2px; }
.tab-btn { font-weight: 600; }
button { font-weight: 600; }
select { cursor: pointer; }

.t3-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.t3-head h2 { margin: 0; }
.t3-sub { font-weight: 400; font-size: .85rem; margin-left: 6px; }
.t3-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 14px 16px; background: #f8fafd; border: 1px solid var(--border); border-radius: 12px; }
.t3-field label { margin: 0 0 4px; font-weight: 600; font-size: .82rem; }
.t3-scope { flex: 1 1 340px; min-width: 240px; }
.t3-check { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 0 9px !important; font-size: .9rem; white-space: nowrap; }
.t3-check input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.t3-check input[type=time] { width: auto; }
.t3-actions { display: flex; gap: 8px; }
.t3-actions button { margin: 0; padding: 9px 18px; }
#btn-start-research { padding: 9px 22px; }
.t3-hint { margin: 8px 2px 0; font-size: .8rem; }
.t3-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 8px 12px; font-size: .85rem; }
.t3-key-in { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.t3-key-in input { width: 260px; padding: 6px 10px; }
.t3-key-in button { margin: 0; padding: 6px 12px; }
#research-status:empty { display: none; }
.t3-parts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 12px 0 6px; padding: 0 !important; border: none !important; background: transparent !important; }
.t3-part { background: #fff; border: 1px solid var(--border); border-left: 4px solid #cbd5e1; border-radius: 10px; padding: 9px 12px; font-size: .85rem; }
.t3-part .muted { font-size: .84rem; }
.t3-part-k { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.t3-part.on { border-left-color: #22c55e; }
.t3-agentlog { margin: 2px 0 6px; }
.t3-overview { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.t3-overview .mon-head h3 { margin: 0; }
.t3-overview .mon-spider { height: 250px; }
.tile-n.tile-sim { color: var(--accent); }
.t3-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; margin-bottom: 12px; }
.t3-box { border: 1px solid var(--border) !important; border-radius: 12px !important; background: #fbfcfe; padding: 12px 14px !important; margin: 0 !important; box-shadow: none !important; }
.t3-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.t3-inline button { margin: 0; }
.sub-tab-bar { margin-top: 16px; }
@media (max-width: 700px) { .t3-actions { width: 100%; } .t3-key-in input { width: 100%; } }
.t3-two { grid-template-columns: 1fr; }
#schedule-box p#schedule-status, #schedule-box #schedule-plan { margin: 6px 0 0; }
.card table td.expr-cell { min-width: 360px; max-width: 620px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .74rem; line-height: 1.4; word-break: break-word; color: #23314d; }
.card table td.verdict-cell { min-width: 170px; }
#submit-queue-list table td { word-break: normal; }

/* ---- v2.2.0b: gọn + "công nghệ" ---- */
:root { --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; --ink-900: #0b1020; }
.t3-head h2 { font-size: 1.15rem; }
#research-run-badge { font-family: var(--mono); letter-spacing: .06em; }
.t3-controls { background: #fff; padding: 12px 14px; }
.t3-actions { align-items: center; position: relative; }
.t3-info { position: relative; }
.t3-info > summary { list-style: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: var(--muted); font-size: .95rem; background: #fff; }
.t3-info > summary::-webkit-details-marker { display: none; }
.t3-info[open] > summary { color: var(--accent); border-color: var(--accent); }
.t3-info-pop { position: absolute; right: 0; top: 38px; z-index: 20; width: 360px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.14); font-size: .82rem; line-height: 1.5; color: var(--text); }
.t3-key { margin-top: 8px; padding: 0 2px; background: transparent !important; border: none !important; font-size: .82rem; }
.t3-key #llm-key-status { font-weight: 600 !important; }

.t3-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.t3-part { display: flex; gap: 10px; align-items: flex-start; border-left: 1px solid var(--border); padding: 8px 12px; }
.t3-part-k { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; margin-bottom: 1px; }
.t3-part .muted { font-size: .8rem; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t3-part:hover .muted { -webkit-line-clamp: unset; }
.t3-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #cbd5e1; }
.t3-part.on .t3-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: t3pulse 1.6s ease-in-out infinite; }
.t3-part.on { border-left: 1px solid var(--border); border-color: #bbf7d0; }
@keyframes t3pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.05); } }
.t3-agentlog summary { font-size: .82rem; }

/* khung tổng quan tối kiểu console */
.t3-overview { background: radial-gradient(900px 300px at 15% 0%, #16213d 0%, var(--ink-900) 60%); border: 1px solid #1e2a47; color: #cbd5e1; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(11,16,32,.25); }
.t3-overview .mon-head { gap: 14px; margin-bottom: 10px; }
.t3-ov-title { font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.t3-ov-tag { font-size: .65rem; padding: 2px 6px; border-radius: 4px; background: rgba(52,211,153,.15); color: #34d399; letter-spacing: .1em; }
.t3-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: #94a3b8; margin-left: auto; }
.t3-stats b { font-family: var(--mono); font-size: .95rem; color: #f8fafc; margin-right: 4px; font-weight: 600; }
.t3-overview .mon-controls select { background: #111a30; color: #cbd5e1; border: 1px solid #263456; padding: 4px 8px; font-size: .78rem; border-radius: 6px; }
.t3-overview .pill { background: #111a30; color: #94a3b8; border: 1px solid #263456; font-family: var(--mono); font-size: .72rem; }
.t3-overview .pill-on { color: #34d399; border-color: rgba(52,211,153,.4); }
.t3-overview .mon-spider { height: 260px; background: transparent; border: none; }
.t3-overview .mon-spider-row { grid-template-columns: 1fr 190px; }
.t3-overview .mbox { background: rgba(255,255,255,.03); border-width: 1px; }
.t3-overview .mbox-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: #94a3b8; }
.t3-overview .mbox-n { font-family: var(--mono); font-size: 1.7rem; }
.t3-overview .mbox-code { border-color: rgba(52,211,153,.35); } .t3-overview .mbox-code .mbox-n { color: #34d399; text-shadow: 0 0 12px rgba(52,211,153,.45); }
.t3-overview .mbox-sonnet { border-color: rgba(251,146,60,.35); } .t3-overview .mbox-sonnet .mbox-n { color: #fb923c; text-shadow: 0 0 12px rgba(251,146,60,.45); }
.t3-overview .mbox-you { border-color: rgba(250,204,21,.35); } .t3-overview .mbox-you .mbox-n { color: #facc15; text-shadow: 0 0 12px rgba(250,204,21,.4); }
.t3-ov-foot { font-family: var(--mono); font-size: .68rem; color: #64748b; text-align: right; margin-top: 4px; }

/* tab con dạng segmented */
.sub-tab-bar { border-bottom: none; gap: 4px; padding: 4px; background: #eef1f6; border-radius: 10px; display: inline-flex; margin: 16px 0 12px; }
.sub-tab-btn, .sub-tab-btn.active { border: none !important; border-radius: 7px !important; margin: 0 !important; padding: 7px 14px; font-size: .84rem; box-shadow: none; background: transparent; }
.sub-tab-btn.active { background: #fff !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(16,24,40,.12) !important; }
.sub-tab-btn:hover { background: rgba(255,255,255,.6); }
@media (max-width: 900px) { .t3-parts { grid-template-columns: 1fr; } .t3-overview .mon-spider-row { grid-template-columns: 1fr; } .t3-overview .mon-boxes { flex-direction: row; } .t3-info-pop { width: 280px; } }
/* chữ tiếng Việt dùng font sans (font mono thiếu dấu trên một số máy); số giữ mono */
.t3-ov-title, .t3-overview .mbox-k, .t3-part-k { font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; }
.t3-ov-title { font-weight: 600; letter-spacing: .01em; }
.t3-overview .mbox-k, .t3-part-k { text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }

/* =====================================================================
   v2.2.0c — BỐ CỤC TỔNG THỂ: thanh bên tối (điều hướng + phiên) · thanh trên · nội dung.
   Chỉ đổi bố cục/thẩm mỹ; mọi phần tử, id và thông tin giữ nguyên.
   ===================================================================== */
body { padding: 0; background: var(--bg); }
#login-screen { min-height: 100vh; max-width: none; display: grid; place-items: center; padding: 40px 16px; }
#login-screen > .card { width: 100%; max-width: 520px; border: 1px solid #1e2a47; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
#login-screen h1 { font-size: 1.35rem; }

.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px;
  background: linear-gradient(180deg, #0d1426 0%, #0a0f1d 100%); color: #cbd5e1; border-right: 1px solid #1a2440; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; border-bottom: 1px solid #1a2440; margin-bottom: 8px; }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 .85rem var(--mono);
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 0 18px rgba(99,102,241,.45); }
.brand-name { font-weight: 700; color: #f8fafc; letter-spacing: .01em; }
.brand-sub { font-size: .7rem; color: #64748b; }
.tab-bar.side-nav { position: static; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  border: none; background: transparent; backdrop-filter: none; }
.side-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #475569; margin: 12px 8px 4px; font-weight: 600; }
.side-nav .tab-btn, .side-nav .tab-btn.active { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 0;
  padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: #94a3b8; font-size: .88rem; font-weight: 500; box-shadow: none; }
.side-nav .tab-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-nav .tab-btn:hover { background: rgba(148,163,184,.08); color: #e2e8f0; }
.side-nav .tab-btn.active { background: rgba(59,130,246,.14); color: #fff; box-shadow: inset 3px 0 0 #3b82f6; }
.side-foot { margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid #1a2440; display: flex; flex-direction: column; gap: 6px; }
.side-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; }
.side #countdown { background: #0f1830; border: 1px solid #22305a; color: #e2e8f0; font-family: var(--mono); font-size: 1.05rem; text-align: center; padding: 6px 10px; }
.side #countdown.warning { color: #fbbf24; border-color: #a16207; }
.side #countdown.danger { color: #f87171; border-color: #b91c1c; }
.side-ver { font-size: .72rem; color: #64748b; }
.side #btn-logout { margin: 4px 0 0; width: 100%; background: transparent; color: #94a3b8; border: 1px solid #22305a; }
.side #btn-logout:hover { color: #fff; border-color: #3b82f6; }

.content { min-width: 0; display: flex; flex-direction: column; }
header.topbar { position: sticky; top: 0; z-index: 6; max-width: none; margin: 0; padding: 14px 28px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; background: rgba(245,247,251,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.topbar h1 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.topbar-r { text-align: right; font-size: .8rem; max-width: 60%; }
main { max-width: 1520px; margin: 0; padding: 20px 28px 40px; width: 100%; }
/* tiêu đề trong từng mục đã có ở thanh trên -> ẩn cho gọn (phần chú thích bên dưới vẫn giữ) */
.shell .tab-panel > h2, .shell .t3-head h2 { display: none; }
.shell .t3-head { justify-content: flex-end; margin-bottom: 10px; }
.shell .t3-head:has(h2) { margin-top: -6px; }
#tab-panel-4 #notify-card label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
#tab-panel-4 #notify-card input, #tab-panel-4 #notify-card select { width: auto; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .brand { border: none; padding: 0; margin: 0; }
  .tab-bar.side-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
  .side-group { display: none; }
  .side-nav .tab-btn { width: auto; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; border: none; padding: 0; }
  .side-k, .side-ver { display: none; }
  .side #btn-logout { width: auto; margin: 0; }
  header.topbar { padding: 10px 16px; position: static; }
  main { padding: 14px 16px 30px; }
}
.topbar-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.topbar-run { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.shell .t3-head { display: none; }

/* #####################################################################
   v2.2.0 — THEME "FUTURE HUD" (2 chế độ): SÁNG mặc định, TỐI khi html[data-theme=dark].
   Lưới mờ, quầng sáng trôi, khung kính, góc ngắm HUD, nhấn cyan/tím. Lớp cuối — chỉ màu/thẩm mỹ.
   ##################################################################### */
:root {
  color-scheme: light;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --bg: #eef2f8; --text: #0f172a; --heading: #0b1324; --muted: #5b6b86; --error: #dc2626;
  --border: rgba(14, 116, 144, .16); --line: rgba(15, 23, 42, .07);
  --accent: #0891b2; --accent-hover: #0e7490; --accent-2: #7c3aed;
  --glass: rgba(255, 255, 255, .72); --glass-2: rgba(248, 251, 255, .78);
  --field-bg: rgba(255, 255, 255, .9); --field-border: rgba(14, 116, 144, .22); --placeholder: #94a3b8;
  --th-bg: rgba(241, 246, 252, .97); --th-text: #475a7a; --row-hover: rgba(8, 145, 178, .05); --td: #1e293b;
  --side-bg: rgba(255, 255, 255, .78); --side-text: #334155; --side-muted: #94a3b8; --side-border: rgba(14, 116, 144, .14);
  --side-active-bg: linear-gradient(90deg, rgba(8,145,178,.12), rgba(124,58,237,.05)); --side-active-text: #0e7490;
  --topbar-bg: rgba(238, 242, 248, .78);
  --glow-a: rgba(34, 211, 238, .22); --glow-b: rgba(139, 92, 246, .18); --glow-c: rgba(14, 165, 233, .12); --grid: rgba(14, 116, 144, .07);
  --btn-text: #ffffff; --btn-grad: linear-gradient(135deg, #06b6d4 0%, #3b82f6 55%, #8b5cf6 100%); --btn-grad-h: linear-gradient(135deg, #22d3ee 0%, #60a5fa 55%, #a78bfa 100%);
  --sec-bg: rgba(255, 255, 255, .7); --sec-text: #334155; --sec-border: rgba(100, 116, 139, .25);
  --ov-bg: radial-gradient(900px 320px at 15% 0%, rgba(165, 243, 252, .45) 0%, rgba(255, 255, 255, .85) 60%);
  --ov-border: rgba(8, 145, 178, .22); --ov-text: #0f172a; --ov-muted: #64748b; --ov-box: rgba(255, 255, 255, .75);
  --n-code: #059669; --n-sonnet: #ea580c; --n-you: #ca8a04; --n-ink: #334155; --n-muted: #94a3b8;
  --p0: #e2e8f0; --p1: #fde68a; --p2: #86efac; --p3: #22c55e; --p4: #15803d; --perr: #fecaca; --gate-ring: #0891b2;
  --chip-s-bg: #ffedd5; --chip-s-fg: #9a3412; --chip-c-bg: #d1fae5; --chip-c-fg: #065f46;
  --pill-bg: rgba(100, 116, 139, .1); --pill-fg: #475569; --pill-on-bg: rgba(22, 163, 74, .12); --pill-on-fg: #15803d;
  --corner: rgba(8, 145, 178, .55); --pre-bg: rgba(241, 245, 249, .9); --link: #0e7490; --code-fg: #0e7490;
  --card-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 36px rgba(15, 23, 42, .08);
  --glow: 0 0 0 1px rgba(8, 145, 178, .18), 0 0 26px rgba(34, 211, 238, .16);
  --title-grad: linear-gradient(90deg, #0b1324, #0e7490);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #04060d; --text: #e6edf7; --heading: #f1f5ff; --muted: #8796b3; --error: #f87171;
  --border: rgba(125, 211, 252, .13); --line: rgba(148, 163, 184, .10);
  --accent: #22d3ee; --accent-hover: #67e8f9; --accent-2: #8b5cf6;
  --glass: rgba(10, 17, 34, .58); --glass-2: rgba(15, 25, 50, .55);
  --field-bg: rgba(2, 6, 23, .55); --field-border: rgba(125, 211, 252, .18); --placeholder: #5b6b89;
  --th-bg: rgba(8, 14, 30, .96); --th-text: #9fb3d6; --row-hover: rgba(34, 211, 238, .05); --td: #d6deeb;
  --side-bg: linear-gradient(180deg, rgba(6,10,22,.92), rgba(4,7,15,.96)); --side-text: #94a3b8; --side-muted: #4b5d80; --side-border: rgba(34, 211, 238, .12);
  --side-active-bg: linear-gradient(90deg, rgba(34,211,238,.16), rgba(139,92,246,.06)); --side-active-text: #e0f7ff;
  --topbar-bg: rgba(4, 6, 13, .6);
  --glow-a: rgba(34, 211, 238, .13); --glow-b: rgba(139, 92, 246, .16); --glow-c: rgba(14, 165, 233, .10); --grid: rgba(125, 211, 252, .045);
  --btn-text: #031018; --btn-grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #8b5cf6 100%); --btn-grad-h: linear-gradient(135deg, #67e8f9 0%, #60a5fa 55%, #a78bfa 100%);
  --sec-bg: rgba(148, 163, 184, .08); --sec-text: #cbd5e1; --sec-border: rgba(148, 163, 184, .22);
  --ov-bg: radial-gradient(900px 320px at 15% 0%, rgba(30, 58, 138, .35) 0%, rgba(2, 6, 23, .75) 60%);
  --ov-border: rgba(34, 211, 238, .18); --ov-text: #e2e8f0; --ov-muted: #94a3b8; --ov-box: rgba(255, 255, 255, .03);
  --n-code: #34d399; --n-sonnet: #fb923c; --n-you: #facc15; --n-ink: #cbd5e1; --n-muted: #64748b;
  --p0: #334155; --p1: #a16207; --p2: #4ade80; --p3: #22c55e; --p4: #15803d; --perr: #7f1d1d; --gate-ring: #22d3ee;
  --chip-s-bg: rgba(251, 146, 60, .15); --chip-s-fg: #fdba74; --chip-c-bg: rgba(52, 211, 153, .14); --chip-c-fg: #6ee7b7;
  --pill-bg: rgba(148, 163, 184, .1); --pill-fg: #94a3b8; --pill-on-bg: rgba(74, 222, 128, .12); --pill-on-fg: #4ade80;
  --corner: rgba(34, 211, 238, .55); --pre-bg: rgba(2, 6, 23, .55); --link: #67e8f9; --code-fg: #a5f3fc;
  --card-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px rgba(0,0,0,.35);
  --glow: 0 0 0 1px rgba(34, 211, 238, .18), 0 0 24px rgba(34, 211, 238, .10);
  --title-grad: linear-gradient(90deg, #f1f5ff, #a5f3fc);
}
html, body { background: var(--bg); color: var(--text); }
body { font-family: "Space Grotesk", "Inter", "Segoe UI", Roboto, sans-serif; }
body::before { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(40% 35% at 20% 15%, var(--glow-a), transparent 70%), radial-gradient(35% 30% at 85% 25%, var(--glow-b), transparent 70%),
              radial-gradient(45% 40% at 60% 95%, var(--glow-c), transparent 70%);
  animation: hudDrift 26s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%); }
@keyframes hudDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

.card { position: relative; background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--card-shadow); }
.card:hover { box-shadow: var(--card-shadow), var(--glow); }
main > .card::before, main > .card::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 2px solid var(--corner); }
main > .card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 16px; }
main > .card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 16px; }
h1, h2, h3 { color: var(--heading); }
.muted { color: var(--muted); }
a { color: var(--link); } a:hover { color: var(--accent); }
code { font-family: var(--mono); color: var(--code-fg); background: rgba(8, 145, 178, .08); padding: 0 4px; border-radius: 4px; }

input, select, textarea { background: var(--field-bg) !important; color: var(--text) !important; border: 1px solid var(--field-border) !important; border-radius: 9px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.2), 0 0 18px rgba(34,211,238,.15) !important; }
select option { background: var(--field-bg); color: var(--text); }
html[data-theme="dark"] select option { background: #0b1222; }
input[type=checkbox] { accent-color: var(--accent); }
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.8); }

button { position: relative; overflow: hidden; border-radius: 10px; font-weight: 600; letter-spacing: .01em; color: var(--btn-text);
  background: var(--btn-grad); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 20px rgba(34,211,238,.25); }
button:hover { background: var(--btn-grad-h); box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 8px 28px rgba(34,211,238,.38); }
button::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transition: left .6s ease; }
button:hover::after { left: 130%; }
button.secondary { background: var(--sec-bg); color: var(--sec-text); border: 1px solid var(--sec-border); box-shadow: none; }
button.secondary:hover { background: rgba(34,211,238,.10); color: var(--accent); border-color: rgba(8,145,178,.45); }
button:disabled { opacity: .4; }
button.secondary::after, button:disabled::after { display: none; }

.side { background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 1px 0 0 rgba(139,92,246,.06), 12px 0 40px rgba(15,23,42,.06); }
.brand { border-bottom-color: var(--side-border); }
.brand-logo { background: conic-gradient(from 200deg, #22d3ee, #8b5cf6, #22d3ee); color: #031018; box-shadow: 0 0 22px rgba(34,211,238,.45); }
.brand-name { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-size: .92rem; color: var(--heading); }
.brand-sub { color: var(--side-muted); }
.side-nav .tab-btn, .side-nav .tab-btn.active { color: var(--side-text); font-family: "Space Grotesk", sans-serif; }
.side-nav .tab-btn::after { display: none; }
.side-nav .tab-btn:hover { background: rgba(8,145,178,.07); color: var(--accent); }
.side-nav .tab-btn.active { background: var(--side-active-bg); color: var(--side-active-text); box-shadow: inset 2px 0 0 var(--accent), 0 0 18px rgba(34,211,238,.10); }
.side-nav .tab-btn.active svg { filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); stroke: var(--accent); }
.side-foot { border-top-color: var(--side-border); }
.side #countdown { background: var(--field-bg); border-color: rgba(8,145,178,.3); color: var(--accent); text-shadow: 0 0 10px rgba(34,211,238,.45); letter-spacing: .12em; }
.side #btn-logout { background: transparent; color: var(--side-text); border: 1px solid var(--sec-border); box-shadow: none; }
.side #btn-logout::after { display: none; }
.side #btn-logout:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle { margin: 0; width: 100%; background: transparent !important; color: var(--side-text) !important; border: 1px dashed var(--sec-border) !important; box-shadow: none !important; font-size: .8rem; padding: 6px 10px; }
.theme-toggle::after { display: none; }
.theme-toggle:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
header.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--side-border); backdrop-filter: blur(14px); }
header.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.8), rgba(139,92,246,.8), transparent); background-size: 200% 100%; animation: hudScan 6s linear infinite; }
@keyframes hudScan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.topbar-k, .side-group, .side-k { font-family: var(--mono); color: var(--side-muted); }
.topbar h1 { font-weight: 600; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#research-run-badge, #schedule-badge, #submit-queue-badge { background: var(--pill-bg) !important; border: 1px solid var(--sec-border); font-family: var(--mono); }

.card table th, .mon-table th { background: var(--th-bg) !important; color: var(--th-text); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(8,145,178,.2) !important; }
.card table td, .mon-table td { border-bottom: 1px solid var(--line) !important; color: var(--td); }
.card table tr:hover td { background: var(--row-hover) !important; }
.card table td.expr-cell { color: var(--code-fg); }

.t3-controls, .t3-part, .t3-box, .tile, .mon-svg, .mon-dots, .mon-scroll, #notify-card, #scope-score-box { background: var(--glass-2) !important; border-color: var(--border) !important; }
.t3-part.on { border-color: rgba(34,197,94,.4) !important; box-shadow: 0 0 18px rgba(34,197,94,.10); }
.t3-part-k { color: var(--accent); }
.t3-info > summary { background: var(--field-bg); border-color: var(--field-border); color: var(--accent); }
.t3-info-pop { background: var(--glass); backdrop-filter: blur(16px); border-color: rgba(8,145,178,.3); color: var(--text); box-shadow: 0 20px 50px rgba(15,23,42,.18), var(--glow); }
.t3-overview { background: var(--ov-bg) !important; border: 1px solid var(--ov-border) !important; color: var(--ov-text);
  box-shadow: 0 0 0 1px rgba(139,92,246,.06), 0 16px 48px rgba(15,23,42,.10), inset 0 0 60px rgba(34,211,238,.05); }
.t3-ov-title { color: var(--ov-text); }
.t3-stats { color: var(--ov-muted); } .t3-stats b { color: var(--ov-text); }
.t3-overview .mon-controls select { background: var(--field-bg) !important; color: var(--ov-text) !important; }
.t3-overview .pill { background: var(--pill-bg); color: var(--pill-fg); border-color: var(--sec-border); }
.t3-overview .pill-on { background: var(--pill-on-bg); color: var(--pill-on-fg); }
.t3-overview .mbox { background: var(--ov-box); }
.t3-overview .mbox-k { color: var(--ov-muted); }
.t3-overview .mbox-code .mbox-n { color: var(--n-code); } .t3-overview .mbox-sonnet .mbox-n { color: var(--n-sonnet); } .t3-overview .mbox-you .mbox-n { color: var(--n-you); }
.t3-ov-foot { color: var(--ov-muted); }
.sub-tab-bar { background: var(--glass-2); border: 1px solid var(--border); }
.sub-tab-btn, .sub-tab-btn.active { color: var(--muted); }
.sub-tab-btn::after { display: none; }
.sub-tab-btn.active { background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(139,92,246,.16)) !important; color: var(--heading) !important; box-shadow: 0 0 0 1px rgba(8,145,178,.35) inset, 0 0 16px rgba(34,211,238,.15) !important; }
.sub-tab-btn:hover { background: rgba(34,211,238,.08); color: var(--accent); }
.pill { background: var(--pill-bg); color: var(--pill-fg); border: 1px solid var(--sec-border); }
.pill-on { background: var(--pill-on-bg); color: var(--pill-on-fg); border-color: rgba(34,197,94,.35); }
.chip-sonnet { background: var(--chip-s-bg); color: var(--chip-s-fg); } .chip-code { background: var(--chip-c-bg); color: var(--chip-c-fg); }
.hbar-t { background: rgba(148,163,184,.15); }
.f-code { background: var(--n-code); box-shadow: 0 0 10px var(--n-code); } .f-sonnet { background: var(--n-sonnet); box-shadow: 0 0 10px var(--n-sonnet); } .f-you { background: var(--n-you); box-shadow: 0 0 10px var(--n-you); }
.think-code { border-color: var(--n-code); } .think-sonnet { border-color: var(--n-sonnet); } .think-you { border-color: var(--n-you); }
.tile-n { text-shadow: 0 0 14px rgba(34,211,238,.25); }
.dot-gate { box-shadow: 0 0 0 2px var(--gate-ring), 0 0 8px rgba(34,211,238,.7); }
.lg0 { background: var(--p0) !important; } .lg1 { background: var(--p1) !important; } .lg2 { background: var(--p2) !important; } .lg3 { background: var(--p3) !important; } .lg4 { background: var(--p4) !important; } .lgerr { background: var(--perr) !important; } .lggate { background: transparent !important; }
details > summary { color: var(--muted); }
details[open] > summary { color: var(--heading); }
.error { color: var(--error); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(8,145,178,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(8,145,178,.4); background-clip: padding-box; }
::selection { background: rgba(34,211,238,.3); }

#login-screen { background: transparent; }
#login-screen > .card { background: var(--glass); border: 1px solid rgba(8,145,178,.25); box-shadow: 0 30px 90px rgba(15,23,42,.18), var(--glow); }
#login-screen h1 { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(90deg, #0891b2, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] #login-screen h1 { background: linear-gradient(90deg, #a5f3fc, #c4b5fd); -webkit-background-clip: text; background-clip: text; }
input[type=checkbox], input[type=radio] { width: auto !important; padding: 0; vertical-align: middle; margin-right: 6px; }
#login-screen label:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 6px; }

/* =====================================================================
   v2.2.1 — BỎ MENU TRÁI: thanh lệnh nổi phía trên (kính mờ) — logo · điều hướng dạng viên thuốc · phiên/giao diện/đăng xuất.
   Cùng phần tử/id như trước, chỉ đổi cách bố trí.
   ===================================================================== */
.shell { display: block; min-height: 100vh; }
.side { position: sticky; top: 12px; z-index: 30; height: auto; width: calc(100% - 32px); max-width: 1520px; margin: 12px auto 0;
  flex-direction: row; align-items: center; gap: 14px; padding: 8px 10px 8px 14px; border: 1px solid var(--side-border) !important; border-radius: 18px;
  background: var(--glass) !important; box-shadow: 0 10px 40px rgba(15,23,42,.10), var(--glow) !important; }
.side::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(139,92,246,.9), transparent); background-size: 200% 100%; animation: hudScan 6s linear infinite; }
.brand { border: none !important; padding: 0; margin: 0; flex: none; }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; font-size: .78rem; }
.tab-bar.side-nav { flex: 1 1 auto; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 auto;
  background: var(--glass-2); border: 1px solid var(--border); border-radius: 13px; width: auto; max-width: max-content; }
.side-group { display: none; }
.side-nav .tab-btn, .side-nav .tab-btn.active { width: auto; padding: 7px 14px; border-radius: 10px; font-size: .86rem; white-space: nowrap; }
.side-nav .tab-btn svg { width: 16px; height: 16px; }
.side-nav .tab-btn.active { background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.18)); box-shadow: 0 0 0 1px rgba(8,145,178,.35) inset, 0 0 18px rgba(34,211,238,.18); }
.side-foot { margin: 0; padding: 0; border: none !important; flex-direction: row; align-items: center; gap: 8px; flex: none; }
.side-k { display: none; }
.side #countdown { font-size: .88rem; padding: 5px 10px; }
.side-ver { font-family: var(--mono); font-size: .66rem; white-space: nowrap; }
.theme-toggle, .side #btn-logout { width: auto; margin: 0; padding: 6px 10px; font-size: .8rem; }
header.topbar { position: static; max-width: 1520px; width: 100%; margin: 0 auto; padding: 22px 28px 4px; background: transparent !important; border: none !important; backdrop-filter: none; }
header.topbar::after { display: none; }
.topbar h1 { font-size: 1.6rem; }
main { margin: 0 auto; }
@media (max-width: 1100px) {
  .side { flex-wrap: wrap; }
  .tab-bar.side-nav { order: 3; flex: 1 1 100%; max-width: none; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .side-foot { margin-left: auto; }
  .side-ver { display: none; }
}
@media (max-width: 600px) { .side-nav .tab-btn span { font-size: .8rem; } .side-nav .tab-btn, .side-nav .tab-btn.active { padding: 6px 10px; } header.topbar { padding: 16px 16px 0; flex-direction: column; align-items: flex-start; } .topbar-r { align-items: flex-start; text-align: left; max-width: none; } }
@media (max-width: 1640px) { .side-ver { display: none; } }
/* v2.2.1 — tiêu đề bảng: cho xuống dòng thay vì kéo rộng cột; canh đáy cho các tiêu đề 1 dòng/2 dòng thẳng hàng */
.card table th, .mon-table th { white-space: normal !important; word-break: normal; overflow-wrap: normal; hyphens: none;
  vertical-align: bottom; line-height: 1.25; letter-spacing: .03em; font-size: .68rem; padding-top: 8px; padding-bottom: 8px; max-width: 11em; }
.card table td { vertical-align: top; }
/* ô dữ liệu: không bẻ giữa từ (trước bị "ch|ưa", "05/1|0", mã alpha gãy đôi); chỉ cột công thức được bẻ */
.card table td { word-break: normal !important; overflow-wrap: normal; }
.card table td.expr-cell { overflow-wrap: anywhere; }
.card table td a { white-space: nowrap; }
.card table td button { margin: 2px 4px 2px 0; padding: 4px 9px; font-size: .74rem; }

/* v2.2.1 — đăng nhập nổi trên khung xương (skeleton) của trang chính */
#login-screen { position: relative; isolation: isolate; overflow: hidden; }
#login-screen > .card { position: relative; z-index: 2; animation: loginIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes loginIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
#login-screen::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(238,242,248,.15), rgba(238,242,248,.62)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
html[data-theme="dark"] #login-screen::before { background: radial-gradient(60% 55% at 50% 50%, rgba(4,6,13,.2), rgba(4,6,13,.7)); }
.login-skel { position: fixed; inset: 0; z-index: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
.login-skel > * { width: 100%; max-width: 1520px; margin: 0 auto; }
.sk { display: block; height: 14px; border-radius: 8px; flex: none;
  background: linear-gradient(90deg, rgba(148,163,184,.16) 0%, rgba(148,163,184,.30) 40%, rgba(34,211,238,.22) 50%, rgba(148,163,184,.16) 62%);
  background-size: 300% 100%; animation: skShine 2.2s ease-in-out infinite; }
@keyframes skShine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-hi { background: linear-gradient(90deg, rgba(34,211,238,.28), rgba(139,92,246,.30), rgba(34,211,238,.28)); background-size: 300% 100%; }
.sk-w6 { width: 6%; } .sk-w8 { width: 8%; } .sk-w10 { width: 10%; } .sk-w12 { width: 12%; } .sk-w14 { width: 14%; } .sk-w20 { width: 20%; } .sk-w30 { width: 30%; }
.sk-grow { flex: 1 1 auto; } .sk-tall { height: 34px; border-radius: 10px; } .sk-thin { height: 8px; } .sk-chip { height: 48px; border-radius: 10px; }
.sk-logo { width: 32px; height: 32px; border-radius: 9px; }
.sk-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--side-border); }
.sk-nav { flex: 1; display: flex; justify-content: center; gap: 8px; } .sk-nav .sk { height: 26px; }
.sk-title { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0; }
.sk-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); }
.sk-row { display: flex; gap: 12px; align-items: center; }
.sk-panel { display: grid; grid-template-columns: 1fr 190px; gap: 12px; height: 270px; padding: 14px; border-radius: 14px; background: var(--ov-bg); border: 1px solid var(--ov-border); }
.sk-web { border-radius: 10px; background:
  repeating-linear-gradient(100deg, transparent 0 22px, rgba(34,211,238,.10) 22px 23px), radial-gradient(circle at 12% 50%, rgba(234,88,12,.35) 0 6px, transparent 7px); }
.sk-boxes { display: flex; flex-direction: column; gap: 10px; } .sk-boxes .sk { flex: 1; height: auto; border-radius: 12px; }
.sk-lines { display: flex; flex-direction: column; gap: 10px; } .sk-lines .sk:nth-child(2n) { width: 82%; } .sk-lines .sk:nth-child(3n) { width: 64%; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } #login-screen > .card { animation: none; } }
@media (max-width: 700px) { .sk-panel { grid-template-columns: 1fr; } .sk-boxes { display: none; } .sk-nav { display: none; } }

/* v2.3.2: dòng ứng viên đã xử lý (đã submit / đã huỷ) — chỉ hiện khi tick ô lọc */
.card table tr.cand-done td { background: var(--glass-2); }
/* v2.3.4: tiêu đề nhóm scope trong danh sách ứng viên toàn hệ thống */
.cand-scope-head { margin: 16px 0 6px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--glass-2); border-radius: 6px; font-size: .9rem; }
.cand-scope-head b { font-family: var(--mono); letter-spacing: .03em; }

/* v2.3.5: modal ứng viên toàn hệ thống */
.t3-overview .mbox-you { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.t3-overview .mbox-you:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--n-you), 0 0 22px rgba(250,204,21,.25); }
.mbox-hint { font-size: .68rem; color: var(--ov-muted); margin-top: 2px; }
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px;
  background: rgba(15, 23, 42, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: mFade .18s ease; }
html[data-theme="dark"] .modal { background: rgba(2, 6, 23, .6); }
.modal-card { width: min(1400px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 30px 90px rgba(15,23,42,.28), var(--glow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden;
  animation: mIn .22s cubic-bezier(.2,.8,.2,1); background-color: var(--bg); }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 8px; }
.modal-head h2 { margin: 2px 0 0; font-size: 1.2rem; display: block !important; }
.modal-k { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--accent); }
.modal-x { margin: 0; padding: 6px 12px; }
.modal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 4px 22px 4px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--glass-2); border: 1px solid var(--border); border-radius: 11px; }
.seg-btn, .seg-btn.active { margin: 0; padding: 6px 14px; border-radius: 8px; font-size: .84rem; background: transparent; color: var(--muted); border: none; box-shadow: none; }
.seg-btn::after { display: none; }
.seg-btn:hover { background: rgba(34,211,238,.08); color: var(--accent); }
.seg-btn.active { background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.18)); color: var(--heading); box-shadow: 0 0 0 1px rgba(8,145,178,.35) inset; }
.modal-gate { padding: 0 22px; margin: 6px 0 0; font-size: .8rem; }
.modal-body { padding: 4px 22px 22px; overflow: auto; }
.modal-body table { width: 100%; border-collapse: collapse; }
@media (max-width: 700px) { .modal { padding: 0; } .modal-card { max-height: 100vh; border-radius: 0; } }
.modal-card.card { padding: 0; margin: 0; }
/* v2.3.7: nút mở cửa sổ ứng viên ở tab con */
.cand-open-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 4px; }
.cand-open-row button { margin: 0; }

/* v2.3.8: xưởng lắp alpha */
.forge-wrap { border: 1px solid var(--border); border-radius: 14px; background: var(--ov-bg); padding: 6px; }
.forge { width: 100%; height: 260px; display: block; }
.forge-table { margin-top: 10px; }

/* v2.4.1: chọn sinh vật trong xưởng */
.forge-wrap { position: relative; }
.forge-pick { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: auto !important; padding: 3px 8px !important; font-size: .78rem; border-radius: 8px; opacity: .9; }

/* v2.4.4: Luồng quyết định — cột $ lên trước, Công cụ hẹp & xuống dòng, Kết quả cuối & rộng */
#mon-stream .mon-table td.tools, #mon-stream .mon-table th.tools { white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; max-width: 130px; min-width: 90px; width: 130px; }
#mon-stream .mon-table td.res, #mon-stream .mon-table th.res { min-width: 380px; width: 100%; }

/* v2.5.11: mục 2 — bảng thống kê kho alpha */
.ins-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 8px 0; }
.ins-h { margin: 18px 0 6px; font-size: 1rem; }
.ins-hint { margin: 2px 0 6px; font-size: .8rem; }
.ins-wrap { overflow-x: auto; max-width: 100%; }
.card table.ins-table { font-size: .8rem; }
.card table.ins-table th { white-space: nowrap; }
.card table.ins-kv td:first-child { width: 34%; color: var(--muted); }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.ins-block { border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 0; }
.ins-block h4 { margin: 0 0 4px; font-size: .88rem; }
.ins-det { margin: 8px 0; }
.ins-good { color: #16a34a; }
.ins-bad { color: #dc2626; }
@media (max-width: 480px) { .ins-grid { grid-template-columns: 1fr; } }

/* v2.5.18: đã nộp theo ngày */
.subs-daily { margin: 8px 0 16px; }
.sd-month > summary { padding: 6px 0; }
.sd-day { margin: 2px 0 2px 16px; }
.sd-day > summary { padding: 3px 0; font-size: .85rem; }
#sd-months { margin-right: 6px; }

/* v2.5.20: dấu hiệu đang tải */
.loading-pill { font-size: .72rem; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(14,165,233,.12); color: #0284c7; vertical-align: middle; animation: lp-pulse 1.2s ease-in-out infinite; }
@keyframes lp-pulse { 50% { opacity: .45; } }
.sd-pay { max-width: 560px; }

/* v2.5.21: nút thao tác ứng viên xếp dọc, không tràn khung */
td.cand-actions { min-width: 120px; }
td.cand-actions > button, td.cand-actions > span { display: block; width: 100%; margin: 0 0 4px 0 !important; white-space: nowrap; text-align: center; }
/* v2.5.21: khối tiền + điều khiển gọn, không còn khoảng trắng / co dúm */
.sd-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; margin: 4px 0 8px; }
.sd-top .sd-pay-wrap { flex: 1 1 420px; max-width: 640px; }
.sd-top .sd-ctrl { flex: 0 1 260px; display: flex; flex-direction: column; gap: 8px; }
.sd-top .sd-ctrl .sd-ctrl-row { display: flex; gap: 8px; align-items: center; }
.sd-top .sd-ctrl select { width: auto; min-width: 110px; }
.sd-top .sd-ctrl .muted { font-size: .8rem; line-height: 1.4; }
table.sd-pay td, table.sd-pay th { padding: 6px 10px; }
table.sd-pay td:not(:first-child), table.sd-pay th:not(:first-child) { text-align: right; }
/* v2.5.21: dòng "hôm nay" cạnh trạng thái hàng chờ */
.today-sub { font-size: .82rem; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(127,127,127,.08); }
.today-sub b.ok { color: #16a34a; } .today-sub b.lack { color: #d97706; }