/* CATIC AI Control Tower — theme theo brand deck "Vinatti @15 / CATIC Plan & Roadmap" (06/2026):
   xanh royal chủ đạo + navy đậm tiêu đề + cam Quik nhấn nhá + nền xanh băng nhạt, card trắng bo góc.
   Logo: /assets/quik-logo.png (navy #274BA7, chấm cam #F49A1D). */

:root {
  --ct-blue: #1B57E6;          /* royal blue chủ đạo (CTA, nhấn) */
  --ct-blue-deep: #0E2A66;     /* navy đậm — heading */
  --ct-logo-navy: #274BA7;     /* navy logo Quik */
  --ct-cyan: #39C0FF;          /* gradient phụ của orb */
  --ct-orange: #F49A1D;        /* cam Quik — accent */
  --ct-red: #E5484D;           /* crit */
  --ct-amber: #E89B0C;         /* warn */
  --ct-green: #18A957;         /* ok */
  --ct-gray: #8A97AD;          /* skip / phụ */
  --ct-bg: #EFF4FC;            /* nền xanh băng */
  --ct-bg-2: #E4EDFA;
  --ct-card: #FFFFFF;
  --ct-border: #D9E4F6;
  --ct-text: #14253F;
  --ct-text-2: #5A6B85;
  --ct-shadow: 0 6px 24px rgba(27, 87, 230, 0.07);
  --ct-radius: 14px;
  --ct-rail: 64px;          /* sidebar thu gọn (rail icon) */
  --ct-side-open: 236px;    /* sidebar khi rê chuột mở rộng (overlay) */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(57, 192, 255, 0.14), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(27, 87, 230, 0.10), transparent 60%),
    var(--ct-bg);
  color: var(--ct-text);
  font-size: 14px;
}
html.auth-pending body { visibility: hidden; }

.hidden { display: none !important; }
pre.ct-mono {
  font-family: 'Inter', system-ui, sans-serif;
  white-space: pre-wrap; word-break: break-word;
  margin: 0; font-size: 13.5px; line-height: 1.6;
}

/* ── layout ───────────────────────────────────────────── */
.ct-app { display: flex; min-height: 100vh; }

/* ── Sidebar RAIL: thu còn 64px (chỉ icon); rê chuột / focus → phủ rộng 236px (OVERLAY, không xô nội dung) — như cũ ── */
.ct-side {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
  width: var(--ct-rail);
  background: var(--ct-card);
  border-right: 1px solid var(--ct-border);
  display: flex; flex-direction: column;
  padding: 16px 8px 80px;            /* đáy chừa cho .ct-userbar (rail ~66px) */
  overflow: hidden;
  transition: width 0.18s ease, padding 0.18s ease, box-shadow 0.18s ease;
}
/* Mở khi rê vào sidebar HOẶC thanh tài khoản (đồng bộ cả hai) */
.ct-side:hover, .ct-side:focus-within,
.ct-app:has(.ct-userbar:hover) .ct-side, .ct-app:has(.ct-userbar:focus-within) .ct-side {
  width: var(--ct-side-open); padding: 16px 12px 80px;
  box-shadow: 14px 0 44px rgba(14, 42, 102, 0.14);
}
/* Brand = LINK về Quik AI Platform (/admin/) — rail chỉ logo; mở ra hiện danh tính CATIC. */
.ct-brand {
  display: flex; align-items: center; gap: 11px;
  margin: 0 2px 14px; padding: 8px 6px;
  text-decoration: none; border-radius: 10px;
  transition: background 0.15s; white-space: nowrap;
}
.ct-brand:hover { background: var(--ct-bg); }
.ct-brand img { height: 34px; width: 40px; object-fit: contain; object-position: left center; flex: 0 0 auto; transition: width 0.18s ease; }
.ct-side:hover .ct-brand img, .ct-side:focus-within .ct-brand img { width: 54px; }
.ct-brand-text { line-height: 1.18; opacity: 0; transition: opacity 0.15s ease 0.05s; }
.ct-side:hover .ct-brand-text, .ct-side:focus-within .ct-brand-text { opacity: 1; }
.ct-brand-text strong { display: block; font-size: 15px; font-weight: 800; color: var(--ct-blue-deep); letter-spacing: 1px; }
.ct-brand-text span { display: block; font-size: 9.5px; color: var(--ct-blue); font-weight: 600; letter-spacing: 0.5px; }

.ct-nav { display: flex; flex-direction: column; gap: 3px; }
.ct-nav button {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: 0; background: transparent;
  padding: 11px 13px; border-radius: 10px;       /* padding trái cố định → icon không nhảy khi mở */
  color: var(--ct-text-2); font: 600 13.5px 'Inter', sans-serif;
  cursor: pointer; text-align: left; transition: background 0.13s, color 0.13s;
}
.ct-nav .ct-nav-label { white-space: nowrap; opacity: 0; transition: opacity 0.15s ease 0.05s; }
.ct-side:hover .ct-nav-label, .ct-side:focus-within .ct-nav-label { opacity: 1; }
.ct-nav button .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }
.ct-nav button:hover { background: var(--ct-bg); color: var(--ct-blue-deep); }
.ct-nav button.is-active { background: linear-gradient(90deg, rgba(27,87,230,0.12), rgba(57,192,255,0.07)); color: var(--ct-blue); box-shadow: inset 3px 0 0 var(--ct-blue); }
/* badge cảnh báo đậu góc icon (thấy được cả khi rail) */
.ct-nav .ct-nav-badge { position: absolute; top: 5px; right: 9px; background: var(--ct-red); color: #fff; border-radius: 99px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; }

/* ── Thanh tài khoản: đáy sidebar, CŨNG là rail (avatar khi thu, mở cùng sidebar). Fixed riêng → mobile vẫn hiện. ── */
.ct-userbar {
  position: fixed; left: 0; bottom: 0; z-index: 72;
  width: var(--ct-rail); box-sizing: border-box;
  background: var(--ct-card);
  border-right: 1px solid var(--ct-border); border-top: 1px solid var(--ct-border);
  padding: 9px 8px 11px; overflow: hidden;
  transition: width 0.18s ease, padding 0.18s ease, box-shadow 0.18s ease;
}
.ct-userbar:hover, .ct-userbar:focus-within,
.ct-app:has(.ct-side:hover) .ct-userbar, .ct-app:has(.ct-side:focus-within) .ct-userbar {
  width: var(--ct-side-open); padding: 9px 12px 11px;
  box-shadow: 14px 0 44px rgba(14, 42, 102, 0.14);
  overflow: visible;            /* để menu user (mở LÊN TRÊN) không bị overflow:hidden cắt */
}
/* ── nút user (rail: chỉ avatar; mở: hiện tên/email + caret); menu MỞ LÊN TRÊN ── */
.ct-user { position: relative; }
.ct-user-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 1px solid transparent; background: transparent;
  border-radius: 12px; padding: 6px; cursor: pointer;
  font: 500 12.5px 'Inter', sans-serif; color: var(--ct-text-2);
  transition: background 0.12s, border-color 0.12s;
}
.ct-user-btn:hover { background: var(--ct-bg); border-color: var(--ct-border); }
.ct-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ct-blue), #2E7BFF); color: #fff;
  font-weight: 800; font-size: 14px;
}
.ct-user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; flex: 1; opacity: 0; transition: opacity 0.15s ease 0.05s; }
.ct-user-info strong { font-size: 12.5px; font-weight: 700; color: var(--ct-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-user-info > span { font-size: 10.5px; color: var(--ct-text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-user-caret { font-size: 17px; color: var(--ct-text-2); flex: 0 0 auto; opacity: 0; transition: opacity 0.15s ease 0.05s; }
/* hiện tên/email/caret khi mở (rê sidebar hoặc thanh tài khoản) */
.ct-userbar:hover .ct-user-info, .ct-userbar:focus-within .ct-user-info,
.ct-userbar:hover .ct-user-caret, .ct-userbar:focus-within .ct-user-caret,
.ct-app:has(.ct-side:hover) .ct-user-info, .ct-app:has(.ct-side:focus-within) .ct-user-info,
.ct-app:has(.ct-side:hover) .ct-user-caret, .ct-app:has(.ct-side:focus-within) .ct-user-caret { opacity: 1; }

/* ── Main: KHÔNG còn header — chừa rail 64px (sidebar mở = OVERLAY, không xô nội dung) ── */
.ct-main { flex: 1; min-width: 0; margin-left: var(--ct-rail); padding: 22px 28px 90px; }

/* ── menu user (dropdown Hồ sơ / Đăng xuất) — mở LÊN TRÊN vì nút ở đáy sidebar ───── */
.ct-user-menu {
  /* nằm ở ĐÁY sidebar → menu mở LÊN TRÊN, phủ rộng bằng nút user */
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); top: auto; z-index: 80;
  background: var(--ct-card);
  border: 1px solid var(--ct-border); border-radius: 12px;
  box-shadow: 0 -10px 32px rgba(14, 42, 102, 0.16); padding: 6px;
}
.ct-user-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: transparent; border-radius: 8px;
  padding: 9px 10px; cursor: pointer; text-decoration: none;
  font: 600 13px 'Inter', sans-serif; color: var(--ct-text); text-align: left;
}
.ct-user-item .material-symbols-outlined { font-size: 18px; color: var(--ct-text-2); }
.ct-user-item:hover { background: var(--ct-bg); }
.ct-user-item--logout { color: #B22B30; }
.ct-user-item--logout .material-symbols-outlined { color: #B22B30; }

.ct-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 12px;
  background: var(--ct-bg-2); color: var(--ct-text-2); border: 1px solid var(--ct-border);
}
.ct-pill.ok { background: #E5F7EC; color: #0D7A3E; border-color: #BCE8CD; }
.ct-pill.warn { background: #FDF3DF; color: #92610A; border-color: #F4DCAB; }
.ct-pill.crit { background: #FDE9EA; color: #B22B30; border-color: #F6C6C8; }
.ct-pill.offline { background: #EEF1F6; color: #69788F; border-color: #D8DFE9; }

.ct-banner {
  background: #FDF3DF; border: 1px solid #F4DCAB; color: #92610A;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; font-size: 13px;
}
.ct-banner.crit { background: #FDE9EA; border-color: #F6C6C8; color: #B22B30; }

.ct-card {
  background: var(--ct-card); border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
  padding: 16px 18px;
}
.ct-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--ct-blue-deep); text-transform: uppercase; letter-spacing: 0.5px; }
.ct-card h3 .material-symbols-outlined { font-size: 16px; vertical-align: -3px; color: var(--ct-blue); }

/* ── màn TRUNG TÂM ────────────────────────────────────── */
.ct-orb-wrap { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
#ctOrb { width: 300px; height: 300px; max-width: 100%; filter: drop-shadow(0 6px 22px rgba(27, 87, 230, 0.16)); }

/* ── HUB: orb trung tâm + 2 panel bao quanh ───────────── */
.ct-hub {
  display: grid;
  grid-template-columns: 1fr minmax(330px, 360px) 1fr;
  gap: 14px; margin-bottom: 14px; align-items: start;
}
/* card hai bên = h3 cố định + thân CUỘN để không kéo dài hub theo danh sách dài */
.ct-hub-side { display: flex; flex-direction: column; min-width: 0; }
.ct-hub-side > div:not(.ct-empty) { flex: 1; min-height: 0; max-height: 344px; overflow-y: auto; }
.ct-hub-side .ct-empty { flex: 1; }
/* card orb ở giữa — chỉ còn orb Jarvis, căn giữa tuyệt đối cho gọn */
.ct-hub-orb { display: flex; align-items: center; justify-content: center; min-height: 320px; }

/* ── lưới 2 cột (xu hướng rộng + hiệu suất) ──────────── */
.ct-grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── tình trạng hệ thống (rows dot + nhãn + giá trị) ─── */
.ct-sys-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--ct-border); font-size: 13px; }
.ct-sys-row:last-child { border-bottom: 0; }
.ct-sys-row .d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--ct-gray); }
.ct-sys-row .d.ok { background: var(--ct-green); } .ct-sys-row .d.warn { background: var(--ct-amber); } .ct-sys-row .d.crit { background: var(--ct-red); }
.ct-sys-row .n { font-weight: 600; color: var(--ct-text); flex: 0 0 auto; }
.ct-sys-row .v { margin-left: auto; color: var(--ct-text-2); font-size: 11.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── cảnh báo mini trên màn chính ─────────────────────── */
.ct-mini-alert { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--ct-border); font-size: 12.5px; cursor: pointer; }
.ct-mini-alert:last-child { border-bottom: 0; }
.ct-mini-alert:hover { background: #F7FAFF; }
.ct-mini-alert .ic { flex: 0 0 auto; }
.ct-mini-alert .bd { min-width: 0; }
.ct-mini-alert .tx { color: var(--ct-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-mini-alert .mt { font-size: 10.5px; color: var(--ct-gray); margin-top: 2px; }
.ct-mini-alert.acked { opacity: 0.6; }

/* ── biểu đồ xu hướng 7 ngày (SVG cột nhóm) ───────────── */
.ct-trend { width: 100%; }
.ct-trend svg { width: 100%; height: auto; display: block; }
.ct-trend-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--ct-text-2); }
.ct-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ct-trend-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ── bảng hiệu suất trợ lý ────────────────────────────── */
#ctPerf { overflow-x: auto; } /* an toàn: tên trợ lý dài bất thường không vỡ layout */
.ct-perf { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ct-perf th { text-align: left; color: var(--ct-text-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 8px; border-bottom: 1px solid var(--ct-border); white-space: nowrap; }
.ct-perf td { padding: 9px 8px; border-bottom: 1px solid #EAF0FA; vertical-align: middle; }
.ct-perf tr:last-child td { border-bottom: 0; }
.ct-perf tr[data-agent] { cursor: pointer; }
.ct-perf tr[data-agent]:hover td { background: #F7FAFF; }
.ct-perf .nm { font-weight: 700; color: var(--ct-blue-deep); }
.ct-perf .num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ct-perf-bar { height: 6px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; min-width: 54px; margin-top: 3px; }
.ct-perf-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--ct-green); }
.ct-perf-bar > i.warn { background: var(--ct-amber); } .ct-perf-bar > i.crit { background: var(--ct-red); }

/* ── chất lượng trả lời (eval Phase E) ─── */
.ct-q-good { color: #0D7A3E; } .ct-q-warn { color: #92610A; } .ct-q-bad { color: #B22B30; } .ct-q-ok { color: var(--ct-text-2); }

/* ── dòng thời gian hoạt động Mei (Phase C) — đã ẩn PII ─── */
.ct-traces-card { margin-top: 14px; }
.ct-pii-tag { margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--ct-text-2);
  background: var(--ct-bg-2); border-radius: 99px; padding: 2px 9px; letter-spacing: .2px; vertical-align: middle; }
#ctTraces { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ct-tr { border: 1px solid var(--ct-border); border-radius: 11px; padding: 11px 13px; background: var(--ct-bg);
  display: flex; flex-direction: column; gap: 5px; }
.ct-tr-head { display: flex; align-items: center; gap: 8px; }
.ct-tr-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ct-tr-dot.crit { background: #B22B30; } .ct-tr-dot.warn { background: #F49A1D; }
.ct-tr-type { font-weight: 700; font-size: 12.5px; color: var(--ct-text); }
.ct-tr-time { margin-left: auto; font-size: 11px; color: var(--ct-text-2); white-space: nowrap; }
.ct-tr-q, .ct-tr-a { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.ct-tr-q { color: var(--ct-text); } .ct-tr-a { color: var(--ct-text-2); }
.ct-tr-q .material-symbols-outlined, .ct-tr-a .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; margin-top: 1px; opacity: .7; }
.ct-tr-q .material-symbols-outlined { color: var(--ct-blue); }
.ct-tr-meta { font-size: 10.5px; color: var(--ct-text-2); }

/* ── "Hoạt động gần đây của trợ lý" (Phase C Bước 5) — diễn giải dễ hiểu, metadata-only ─── */
.ct-spans-card { margin-top: 14px; }
.ct-spans-intro { margin: 2px 0 12px; font-size: 12px; line-height: 1.5; color: var(--ct-text-2); }
.ct-spans-intro b { color: var(--ct-text); }
#ctSpans { display: flex; flex-direction: column; gap: 9px; }
.ct-sp { border: 1px solid var(--ct-border); border-radius: 11px; padding: 11px 13px; background: var(--ct-bg); }
.ct-sp.err { border-color: #F4B5B7; background: #FFF6F6; }
.ct-sp-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ct-sp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ct-sp-dot.ok { background: var(--ct-green); } .ct-sp-dot.bad { background: var(--ct-red); }
.ct-sp-agent { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 2px 8px; color: var(--agc, var(--ct-blue));
  background: color-mix(in srgb, var(--agc, #1B57E6) 12%, #fff); }
.ct-sp-agent .material-symbols-outlined { font-size: 14px; }
.ct-sp-intent { font-weight: 700; font-size: 12.5px; color: var(--ct-text); }
.ct-sp-route { font-size: 10.5px; font-weight: 600; color: var(--ct-blue); background: var(--ct-bg-2); border-radius: 99px; padding: 1px 9px; }
.ct-sp-state { font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 9px; }
.ct-sp-state.ok { background: #E8F7EE; color: #0D7A3E; } .ct-sp-state.bad { background: #FDE9EA; color: #B22B30; }
.ct-sp-dur { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 9px; font-variant-numeric: tabular-nums;
  background: var(--ct-bg-2); color: var(--ct-text-2); }
.ct-sp-dur.sp-fast { background: #E8F7EE; color: #0D7A3E; } .ct-sp-dur.sp-ok { background: #EAF1FF; color: #1B57E6; }
.ct-sp-dur.sp-slow { background: #FFF3E2; color: #92610A; } .ct-sp-dur.sp-vslow { background: #FDE9EA; color: #B22B30; }
.ct-sp-time { margin-left: auto; font-size: 11px; color: var(--ct-text-2); white-space: nowrap; }
.ct-sp-tree { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.ct-sp-step { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; border-radius: 8px;
  padding: 3px 9px; background: var(--ct-card); border: 1px solid var(--ct-border); color: var(--ct-text); white-space: nowrap; }
.ct-sp-step .material-symbols-outlined { font-size: 14px; opacity: .85; }
.ct-sp-step.it { background: #EAF1FF; border-color: #C6D8FB; color: var(--ct-blue); }
.ct-sp-step.llm { background: #F3ECFF; border-color: #DDC9F7; color: #6B3FB0; }
.ct-sp-step.tool { background: #FFF3E2; border-color: #F4D9A6; color: #92610A; }
.ct-sp-step.g-ok { background: #E8F7EE; border-color: #B6E5C7; color: #0D7A3E; }
.ct-sp-step.g-bad { background: #FDE9EA; border-color: #F4B5B7; color: #B22B30; }
.ct-sp-note { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; color: #92610A;
  background: #FFF8EC; border: 1px solid #F4E2BE; border-radius: 8px; padding: 5px 9px; }
.ct-sp-note .material-symbols-outlined { font-size: 15px; }

/* ── ĐỘI NGŨ AI AGENT (Home) — danh bạ đủ 5 agent ─────────────────────────────── */
.ct-roster-card { margin-top: 14px; }
.ct-roster-sub { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--ct-text-2); }
.ct-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.ct-rt-card { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; box-sizing: border-box;
  border: 1px solid var(--ct-border); border-left: 4px solid var(--agc, var(--ct-blue)); border-radius: var(--ct-radius);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--agc, #1B57E6) 5%, #fff)); padding: 13px 14px;
  cursor: pointer; font: inherit; transition: box-shadow .16s ease, transform .1s ease, border-color .16s ease; }
.ct-rt-card:hover { box-shadow: var(--ct-shadow); transform: translateY(-2px); }
.ct-rt-card:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--agc, var(--ct-blue)) 22%, transparent); }
.ct-rt-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--agc, var(--ct-blue)); box-shadow: 0 4px 10px color-mix(in srgb, var(--agc, var(--ct-blue)) 28%, transparent); }
.ct-rt-ic .material-symbols-outlined { font-size: 21px; }
.ct-rt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ct-rt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-rt-top b { font-size: 14px; color: var(--ct-text); }
.ct-rt-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.ct-rt-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ct-rt-status.st-ok { background: #E8F7EE; color: #0D7A3E; }
.ct-rt-status.st-warn { background: #FFF3E2; color: #92610A; }
.ct-rt-status.st-crit { background: #FDE9EA; color: #B22B30; }
.ct-rt-status.st-skip, .ct-rt-status.st-offline { background: var(--ct-bg-2); color: var(--ct-text-2); }
.ct-rt-role { font-size: 12px; color: var(--ct-text); font-weight: 600; }
.ct-rt-note { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ct-text-2); }
.ct-rt-note .material-symbols-outlined { font-size: 14px; }
.ct-rt-metric { font-size: 11px; color: var(--ct-text-2); margin-top: 1px; }
.ct-rt-metric b { color: var(--ct-text); }

/* ── Control plane: agent CHỈ-XEM (john/daisy) ─────────────────────────────────── */
.ac-id-tag { margin-left: auto; align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--ct-text-2);
  background: var(--ct-bg-2); border: 1px solid var(--ct-border); border-radius: 99px; padding: 2px 9px; }
.ac-id-managed { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; line-height: 1.45;
  color: var(--ct-text-2); background: var(--ct-bg-2); border-radius: 9px; padding: 8px 10px; }
.ac-id-managed .material-symbols-outlined { font-size: 16px; flex: 0 0 auto; }
.ac-readonly-note, .ac-acc-note--info { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; font-size: 11.5px; line-height: 1.45;
  color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 7%, #fff); border: 1px solid color-mix(in srgb, var(--ct-blue) 20%, #fff);
  border-radius: 9px; padding: 8px 11px; }
.ac-acc-note--info { margin-top: 6px; }
.ac-readonly-note .material-symbols-outlined, .ac-acc-note--info .material-symbols-outlined { font-size: 16px; flex: 0 0 auto; }
.ac-row--ro { cursor: default; }
.ac-ro-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; align-self: center; font-size: 11px; font-weight: 700;
  color: #0D7A3E; background: #E8F7EE; border: 1px solid #B6E5C7; border-radius: 99px; padding: 2px 9px; }
.ac-ro-badge .material-symbols-outlined { font-size: 14px; }

/* ── phân loại lỗi theo nguyên nhân (error.type, từ telemetry Phase A) ─── */
.ct-et-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12.5px; }
.ct-et-lb { flex: 0 0 40%; color: var(--ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-et-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; min-width: 40px; }
.ct-et-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--ct-orange); }
.ct-et-n { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ct-text); min-width: 18px; text-align: right; }

/* ── nhóm lỗi Mei nổi cộm (màn chính) ─────────────────── */
.ct-eg-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--ct-border); font-size: 12.5px; }
.ct-eg-row:last-child { border-bottom: 0; }
.ct-eg-row .ico { font-size: 15px; flex: 0 0 auto; }
.ct-eg-row .lb { min-width: 0; font-weight: 600; color: var(--ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-eg-row .ct-sev { margin-left: auto; flex: 0 0 auto; }
.ct-eg-row .cnt { flex: 0 0 auto; color: var(--ct-text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ── dải KPI ngôn ngữ quản lý trên màn chính ─────────── */
.ct-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 2px 0 14px; }
.ct-kpi {
  display: flex; align-items: center; gap: 12px;
  background: var(--ct-card); border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
  padding: 12px 14px; text-align: left;
}
.ct-kpi[data-view] { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ct-kpi[data-view]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27, 87, 230, 0.13); }
.ct-kpi .ct-kpi-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27, 87, 230, 0.1); color: var(--ct-blue);
}
.ct-kpi .ct-kpi-ic .material-symbols-outlined { font-size: 21px; }
.ct-kpi.good .ct-kpi-ic { background: #E5F7EC; color: #0D7A3E; }
.ct-kpi.warn .ct-kpi-ic { background: #FDF3DF; color: #92610A; }
.ct-kpi.bad .ct-kpi-ic { background: #FDE9EA; color: #B22B30; }
.ct-kpi b { display: block; font-size: 21px; line-height: 1.1; color: var(--ct-text); }
.ct-kpi.bad b { color: #B22B30; }
.ct-kpi .ct-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--ct-text-2); line-height: 1.25; }
.ct-kpi .ct-kpi-sub { font-size: 10px; color: var(--ct-gray); margin-top: 2px; }

.ct-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.ct-kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--ct-border); font-size: 13px; }
.ct-kv:last-child { border-bottom: 0; }
.ct-kv span:first-child { color: var(--ct-text-2); }
.ct-kv b { font-weight: 700; color: var(--ct-text); }

/* ── bảng chung ───────────────────────────────────────── */
table.ct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-table th { text-align: left; color: var(--ct-text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 10px; border-bottom: 1px solid var(--ct-border); }
.ct-table td { padding: 10px; border-bottom: 1px solid #EAF0FA; vertical-align: top; }
.ct-table tr:hover td { background: #F7FAFF; }
.ct-sev { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.ct-sev.cao { background: #FDE9EA; color: #B22B30; }
.ct-sev.tb { background: #FDF3DF; color: #92610A; }
.ct-num { font-weight: 800; font-size: 14px; }

.ct-btn {
  border: 1px solid var(--ct-border); background: var(--ct-card); color: var(--ct-blue);
  font: 700 12.5px 'Inter', sans-serif; border-radius: 9px; padding: 7px 13px; cursor: pointer;
  transition: background 0.12s;
}
.ct-btn:hover { background: var(--ct-bg); }
.ct-btn.primary { background: var(--ct-blue); border-color: var(--ct-blue); color: #fff; }
.ct-btn.primary:hover { background: #1747BE; }
.ct-btn:disabled { opacity: 0.5; cursor: default; }

/* drawer ca lỗi thật */
.ct-cases { margin-top: 14px; }
.ct-case { border: 1px solid var(--ct-border); border-radius: 10px; padding: 10px 13px; margin-bottom: 9px; background: #FBFDFF; }
.ct-case .ct-case-meta { font-size: 11.5px; color: var(--ct-text-2); margin-bottom: 5px; }
.ct-case .q { font-weight: 600; }
.ct-case .a { color: #B22B30; margin-top: 3px; font-size: 13px; }

/* ── alerts ───────────────────────────────────────────── */
.ct-alert { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--ct-border); border-left-width: 4px; border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; background: var(--ct-card); }
.ct-alert.crit { border-left-color: var(--ct-red); }
.ct-alert.warn { border-left-color: var(--ct-amber); }
.ct-alert .meta { font-size: 11.5px; color: var(--ct-text-2); margin-bottom: 4px; }
.ct-alert .body { flex: 1; min-width: 0; }
.ct-alert.acked { opacity: 0.62; }

/* ── kanban kế hoạch ──────────────────────────────────── */
.ct-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .ct-kanban { grid-template-columns: repeat(2, 1fr); } }
.ct-kcol { background: var(--ct-bg-2); border-radius: 12px; padding: 10px; }
.ct-kcol h4 { margin: 2px 4px 10px; font-size: 12px; letter-spacing: 0.5px; color: var(--ct-blue-deep); }
.ct-kcol.now { background: #FDE9EA; } .ct-kcol.now h4 { color: #B22B30; }
.ct-kcard { background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; font-size: 12.5px; }
.ct-kcard .how { color: var(--ct-text-2); margin-top: 5px; font-size: 11.5px; }
.ct-kagent { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: rgba(27,87,230,0.1); color: var(--ct-blue); margin-bottom: 5px; }

/* ── reports — INDEX phân loại theo LOẠI + NGÀY; bấm 1 báo cáo → popup ──────── */
.ct-rep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-rep-head h3 { margin: 0; flex: 0 0 auto; }
.ct-rep-search { flex: 1 1 240px; min-width: 180px; display: flex; align-items: center; gap: 9px; height: 40px; box-sizing: border-box; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 11px; padding: 0 14px; }
.ct-rep-search:focus-within { border-color: var(--ct-blue); background: #fff; box-shadow: 0 0 0 3px rgba(27, 87, 230, 0.10); }
.ct-rep-search .material-symbols-outlined { font-size: 19px; color: var(--ct-text-2); }
.ct-rep-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--ct-text); }
.ct-rep-view { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--ct-border); border-radius: 10px; overflow: hidden; background: var(--ct-card); }
.ct-rep-view button { border: 0; background: transparent; color: var(--ct-text-2); width: 38px; height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.ct-rep-view button + button { border-left: 1px solid var(--ct-border); }
.ct-rep-view button:hover { background: var(--ct-bg); color: var(--ct-blue); }
.ct-rep-view button.is-active { background: var(--ct-blue); color: #fff; }
.ct-rep-view .material-symbols-outlined { font-size: 19px; }
.ct-rep-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
/* ============ BÁO CÁO — thẻ tài liệu (grid) + dòng thời gian (list) ============ */
/* màu nhấn theo loại — 1 nguồn: rail/icon/count/node/pill/viền-hover đều đọc --rep */
.ct-rep-section, .ct-rep-card, .ct-rep-row { --rep: var(--ct-blue); --rep-soft: #E8F0FF; }
.k-weekly  { --rep: #1747BE; --rep-soft: #EAF1FF; }
.k-errors  { --rep: #B22B30; --rep-soft: #FDE9EA; }
.k-monthly { --rep: #6D28D9; --rep-soft: #F2EEFC; }

/* --- Mục theo loại + tiêu đề mục --- */
.ct-rep-section { margin-bottom: 26px; }
.ct-rep-sechead { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--ct-border); }
.ct-rep-sechead-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--rep-soft); color: var(--rep); }
.ct-rep-sechead-ic .material-symbols-outlined { font-size: 17px; }
.ct-rep-sechead-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; margin-right: auto; }
.ct-rep-sechead-label { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; color: var(--ct-blue-deep); }
.ct-rep-sechead-sub { font-size: 11px; font-weight: 500; color: var(--ct-text-2); margin-top: 2px; }
.ct-rep-sechead-count { flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rep); background: var(--rep-soft); border-radius: 99px; }

/* --- Lưới thẻ --- */
.ct-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }

/* --- Thẻ tài liệu --- */
.ct-rep-card { position: relative; display: flex; align-items: stretch; gap: 14px; text-align: left; width: 100%; box-sizing: border-box; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rep-soft) 22%, #fff) 100%); padding: 15px 16px 15px 22px; cursor: pointer; font: inherit; overflow: hidden; box-shadow: 0 1px 2px rgba(14, 42, 102, .04); transition: box-shadow .16s ease, border-color .16s ease, transform .1s ease; }
.ct-rep-card:hover { border-color: color-mix(in srgb, var(--rep) 45%, var(--ct-border)); box-shadow: var(--ct-shadow); transform: translateY(-2px); }
.ct-rep-card:active { transform: translateY(-1px); }
.ct-rep-card:focus-visible, .ct-rep-row:focus-visible { outline: none; border-color: var(--rep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rep) 22%, transparent); }
.ct-rep-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rep); }
/* khối ngày lớn */
.ct-rep-date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding-right: 15px; border-right: 1px solid var(--ct-border); line-height: 1; }
.ct-rep-wk { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--rep); }
.ct-rep-day { font-size: 30px; font-weight: 800; color: var(--ct-blue-deep); font-variant-numeric: tabular-nums; margin: 3px 0 2px; }
.ct-rep-mon { font-size: 10.5px; font-weight: 600; color: var(--ct-text-2); font-variant-numeric: tabular-nums; }
/* thân thẻ */
.ct-rep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ct-rep-kind { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-rep-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--rep-soft); color: var(--rep); }
.ct-rep-ic .material-symbols-outlined { font-size: 18px; }
.ct-rep-klabel { font-size: 13px; font-weight: 700; color: var(--ct-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-rep-new { display: inline-flex; align-items: center; height: 22px; flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--rep); padding: 0 9px; border-radius: 99px; }
/* tag pill */
.ct-rep-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-rep-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); font-variant-numeric: tabular-nums; }
.ct-rep-tag .material-symbols-outlined { font-size: 13px; }
.is-fresh .ct-rep-fresh { color: var(--rep); background: color-mix(in srgb, var(--rep-soft) 70%, #fff); border-color: color-mix(in srgb, var(--rep) 25%, var(--ct-border)); }
/* gợi ý mở khi hover */
.ct-rep-open { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; font-weight: 700; color: var(--rep); opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }
.ct-rep-open .material-symbols-outlined { font-size: 15px; }
.ct-rep-card:hover .ct-rep-open, .ct-rep-card:focus-visible .ct-rep-open { opacity: 1; transform: translateX(0); }
@media (hover: none) { .ct-rep-open { opacity: 1; transform: none; } }

/* --- DANH SÁCH = dòng thời gian --- */
.ct-rep-rows { display: flex; flex-direction: column; position: relative; padding-left: 24px; }
.ct-rep-rows::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--rep) 32%, var(--ct-border)), var(--ct-border)); }
.ct-rep-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--ct-border); border-radius: 12px; background: var(--ct-card); padding: 11px 16px; box-shadow: 0 1px 2px rgba(14, 42, 102, .03); transition: box-shadow .16s ease, border-color .16s ease, transform .1s ease; }
.ct-rep-row + .ct-rep-row { margin-top: 9px; }
.ct-rep-node { position: absolute; left: -24px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.ct-rep-node-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--rep); box-shadow: 0 0 0 3px var(--ct-bg); transition: transform .14s ease; }
.ct-rep-row:hover { border-color: color-mix(in srgb, var(--rep) 45%, var(--ct-border)); box-shadow: var(--ct-shadow); transform: translateX(2px); }
.ct-rep-row:hover .ct-rep-node-dot { transform: scale(1.2); }
.ct-rep-rdate { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding-right: 14px; border-right: 1px solid var(--ct-border); line-height: 1.1; }
.ct-rep-rdate b { font-size: 20px; font-weight: 800; color: var(--ct-blue-deep); font-variant-numeric: tabular-nums; }
.ct-rep-rdate i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--rep); text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.ct-rep-row .ct-rep-ic { width: 32px; height: 32px; }
.ct-rep-rowmeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ct-rep-rowmeta b { font-size: 13.5px; font-weight: 700; color: var(--ct-text); display: inline-flex; align-items: center; gap: 8px; }
.ct-rep-rowmeta small { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-rep-chev { flex: 0 0 auto; color: var(--ct-text-2); font-size: 22px; transition: transform .14s ease, color .14s ease; }
.ct-rep-row:hover .ct-rep-chev { color: var(--rep); transform: translateX(3px); }

/* --- Mobile --- */
@media (max-width: 760px) {
  .ct-rep-grid { grid-template-columns: 1fr; gap: 11px; }
  .ct-rep-card { padding: 14px 14px 14px 20px; gap: 12px; }
  .ct-rep-date { min-width: 48px; padding-right: 12px; }
  .ct-rep-day { font-size: 27px; }
  .ct-rep-open { opacity: 1; transform: none; }
  .ct-rep-row { padding: 11px 12px; gap: 11px; }
  .ct-rep-rdate { min-width: 40px; padding-right: 11px; }
  .ct-rep-rdate b { font-size: 18px; }
  .ct-rep-chev { display: none; }
  .ct-rep-sechead-sub { display: none; }
  .ct-rep-sechead-label { font-size: 11.5px; }
  .ct-rep-section { margin-bottom: 20px; }
}
/* --- Tôn trọng giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {
  .ct-rep-card, .ct-rep-row, .ct-rep-open, .ct-rep-chev, .ct-rep-node-dot { transition: none; }
  .ct-rep-card:hover, .ct-rep-row:hover { transform: none; }
}
.ct-files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ct-files .ct-btn .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }
.ct-rd { padding: 18px 22px 24px; max-width: 880px; }
.ct-rd-title { font-size: 17px; font-weight: 800; color: var(--ct-blue-deep); margin-bottom: 4px; }
.ct-rd-meta { font-size: 12px; color: var(--ct-text-2); }
.ct-rd-gap { height: 9px; }
.ct-rd-h { font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--ct-blue-deep); margin: 18px 0 8px; padding: 8px 13px; background: linear-gradient(90deg, rgba(27,87,230,.10), rgba(27,87,230,0)); border-left: 3px solid var(--ct-blue); border-radius: 0 9px 9px 0; }
.ct-rd-p { color: var(--ct-text-2); font-size: 12.5px; line-height: 1.55; margin: 2px 0 7px; overflow-wrap: anywhere; }
.ct-rd-li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--ct-text); }
.ct-rd-li > span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ct-rd-ic { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }
.ct-rd-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ct-blue); margin-top: 8px; }
.ct-rd-sub { margin: 1px 0 7px 28px; font-size: 12.5px; color: var(--ct-text-2); font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.ct-rd-foot { margin-top: 18px; padding-top: 11px; border-top: 1px solid var(--ct-border); font-size: 11.5px; color: var(--ct-text-2); }
/* báo cáo mở trong popup: dùng modal rộng + .ct-rd không padding/giới hạn riêng */
.ct-modal-box.lg { max-width: 880px; }
.ct-rd--modal { padding: 4px 0 0; max-width: none; }
.ct-modal-body .ct-files { margin-top: 0; margin-bottom: 14px; }
/* phần tổng hợp thay đổi tuần (từ Nhật ký cải tiến) */
.ct-rd-range { font-weight: 600; color: var(--ct-text-2); font-size: 11px; }
.ct-rd-subh { font-size: 12px; font-weight: 700; color: var(--ct-text); margin: 10px 0 4px; }
.ct-rd-subh b { color: var(--ct-text-2); font-weight: 700; margin-left: 2px; }
.ct-rd-agtag { font-size: 11px; color: var(--ct-text-2); }
#ctRepWeekly { margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ct-border); }

/* ── Popup chat Jarvis (nổi, mở từ nút "Hỏi Jarvis" — DÙNG CHUNG mọi tab) ─────── */
.ct-chatpop {
  /* z-index 75: trên sidebar (70) + thanh tài khoản nổi (72) — nếu không, avatar góc phải
     mobile đè lên nút ✕ đóng popup. Vẫn dưới modal nhật ký (1000). */
  position: fixed; right: 22px; bottom: 84px; z-index: 75;
  width: 384px; max-width: calc(100vw - 28px);
  height: 560px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column;
  background: var(--ct-card); border: 1px solid var(--ct-border);
  border-radius: 18px; box-shadow: 0 24px 64px rgba(14, 42, 102, .28);
  overflow: hidden; transform-origin: bottom right;
  animation: ctPopIn .18s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ctPopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ct-chatpop-head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; color: #fff; background: linear-gradient(135deg, var(--ct-blue), #2E7BFF); }
.ct-chatpop-orb { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.ct-chatpop-orb .material-symbols-outlined { font-size: 20px; }
.ct-chatpop-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.ct-chatpop-title strong { font-size: 14px; font-weight: 700; }
.ct-chatpop-title span { font-size: 11px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chatpop-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.ct-chatpop-x:hover { background: rgba(255, 255, 255, .3); }
.ct-chat-msgs { flex: 1; overflow-y: auto; padding: 13px 13px 4px; }
.ct-msg { max-width: 86%; margin-bottom: 12px; }
.ct-msg .bubble { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ct-msg.user { margin-left: auto; }
.ct-msg.user .bubble { background: var(--ct-blue); color: #fff; border-bottom-right-radius: 4px; }
.ct-msg.jarvis .bubble { background: var(--ct-card); border: 1px solid var(--ct-border); border-bottom-left-radius: 4px; }
.ct-msg .who { font-size: 10.5px; color: var(--ct-text-2); margin: 0 6px 3px; }
.ct-chat-input { display: flex; gap: 9px; padding: 10px 13px 13px; border-top: 1px solid var(--ct-border); }
.ct-chat-input input {
  flex: 1; border: 1px solid var(--ct-border); border-radius: 12px; padding: 11px 15px;
  font: 500 13.5px 'Inter', sans-serif; outline: none; background: var(--ct-card); color: var(--ct-text);
}
.ct-chat-input input:focus { border-color: var(--ct-blue); box-shadow: 0 0 0 3px rgba(27, 87, 230, 0.12); }
.ct-chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 13px 2px; }
.ct-chip { border: 1px solid var(--ct-border); border-radius: 99px; background: var(--ct-card); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ct-blue); cursor: pointer; }
.ct-chip:hover { background: var(--ct-bg); }
.ct-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.ct-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ct-blue); opacity: 0.4; animation: ctTyping 1.2s infinite; }
.ct-typing i:nth-child(2) { animation-delay: 0.2s; } .ct-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ctTyping { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* dock chat nổi */
.ct-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--ct-blue), #2E7BFF);
  color: #fff; border: 0; border-radius: 99px; padding: 12px 19px;
  font: 700 13.5px 'Inter', sans-serif; cursor: pointer;
  box-shadow: 0 10px 26px rgba(27, 87, 230, 0.35);
  transition: filter .15s ease, transform .12s ease;
}
.ct-dock:hover { filter: brightness(1.06); }
.ct-dock:active { transform: translateY(1px); }
.ct-dock.is-open { filter: brightness(.94); }

/* tabs hồ sơ agent */
.ct-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ct-tab { border: 1px solid var(--ct-border); background: var(--ct-card); border-radius: 99px; padding: 7px 16px; font: 700 13px 'Inter', sans-serif; color: var(--ct-text-2); cursor: pointer; }
.ct-tab.is-active { background: var(--ct-blue); border-color: var(--ct-blue); color: #fff; }
.ct-agent-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 980px) { .ct-agent-grid { grid-template-columns: 1fr; } }

.ct-bars { display: flex; gap: 5px; align-items: flex-end; height: 64px; margin-top: 8px; }
.ct-bar { flex: 1; background: rgba(27,87,230,0.16); border-radius: 4px 4px 0 0; position: relative; min-width: 10px; }
.ct-bar > i { display: block; position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px 4px 0 0; background: var(--ct-blue); }
.ct-bar.warn > i { background: var(--ct-amber); } .ct-bar.crit > i { background: var(--ct-red); }
.ct-bar span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--ct-text-2); white-space: nowrap; }

.ct-empty { color: var(--ct-text-2); font-size: 13px; padding: 18px 6px; text-align: center; }
.ct-section-gap { height: 14px; }

/* Dashboard màn chính co theo bề ngang — hub 3 cột → 1 cột (orb ở giữa stack), grid-2 → 1 cột.
   Khi stack, panel hai bên bỏ giới hạn cao (xem được hết, không cuộn trong cuộn). */
@media (max-width: 1180px) {
  .ct-hub { grid-template-columns: 1fr; }
  .ct-hub-side > div:not(.ct-empty) { max-height: 300px; }
}
@media (max-width: 980px) {
  .ct-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ct-side { display: none; }
  .ct-main { margin-left: 0; padding: 14px 14px 90px; }
  .ct-mobilenav { display: flex !important; }
  /* Nút "Hỏi Jarvis" nổi TRÊN thanh nav mobile — vẫn dùng được ở mọi tab (không ẩn như trước). */
  .ct-dock { display: flex; right: 14px; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 11px 17px; }
  .ct-dock.is-open { display: none; } /* đang mở popup thì ẩn nút — đóng bằng ✕ trên header */
  /* Popup chat = tấm gần full màn, chừa chỗ thanh nav dưới. */
  .ct-chatpop { left: 10px; right: 10px; top: 10px; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; max-width: none; height: auto; max-height: none; border-radius: 16px; }
  /* Thanh tài khoản → avatar NỔI góc phải trên (sidebar ẩn); KHÔNG mở-rộng-khi-hover (ghi đè rail) */
  .ct-userbar, .ct-userbar:hover, .ct-userbar:focus-within { left: auto; right: 12px; top: 10px; bottom: auto; width: auto; border: 1px solid var(--ct-border); border-radius: 99px; padding: 3px; box-shadow: var(--ct-shadow); }
  .ct-user-info, .ct-user-caret { display: none; }
  .ct-user-btn { padding: 3px; border: 0; border-radius: 50%; }
  /* menu mở XUỐNG trên mobile */
  .ct-user-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); min-width: 200px; box-shadow: 0 12px 32px rgba(14, 42, 102, 0.16); }
  /* (Tab Hệ thống full-bleed mobile — đặt SAU phần desktop ở cuối file để thắng cascade) */
}
.ct-mobilenav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--ct-card); border-top: 1px solid var(--ct-border); z-index: 40; justify-content: space-around; padding: 4px 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
/* Touch target ≥44px (WCAG) — trước đây 4px padding quá nhỏ cho ngón tay */
.ct-mobilenav button { border: 0; background: none; color: var(--ct-text-2); font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 6px 10px; min-height: 48px; min-width: 56px; border-radius: 10px; }
.ct-mobilenav button.is-active { color: var(--ct-blue); background: rgba(27, 87, 230, 0.08); }
.ct-mobilenav .material-symbols-outlined { font-size: 21px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Tab Hỏi-đáp (Q&A Mei/Lyly) — REDESIGN V2: rail danh tính · nội dung Hỏi/Đáp · toolbar gọn ───
   Accent theo agent: .ct-qa.ag-mei / .ag-lyly đặt --agc (xem .ag-*) → mọi nhấn nhá suy ra bằng
   color-mix. Giữ .ct-q2-live (dùng chung nhiều tab) + .ct-q2-md (render markdown câu trả lời). */
.ct-qa { display: block; --qa-soft: color-mix(in srgb, var(--agc, var(--ct-blue)) 10%, #fff); --qa-soft2: color-mix(in srgb, var(--agc, var(--ct-blue)) 24%, #fff); }

/* nhịp real-time — DÙNG CHUNG nhiều tab, KHÔNG đổi */
.ct-q2-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ct-green);
  background: rgba(24,169,87,.10); border: 1px solid rgba(24,169,87,.22); border-radius: 99px; padding: 3px 11px; white-space: nowrap; }
.ct-q2-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ct-green); box-shadow: 0 0 0 3px rgba(24,169,87,.14); }
/* keyframe DÙNG CHUNG — GIỮ LẠI: chấm CRIT của tab Lỗi/lane/ưu-tiên/summary nhấp nháy để gây chú ý sự cố.
   (Chấm "Trực tiếp" của Hỏi-đáp đã BỎ animation cho đỡ rối, nhưng nhịp CRIT là tín hiệu có ý nghĩa → giữ.) */
@keyframes q2pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(229,72,77,0); } }

/* toolbar card: tìm + lọc phòng ban + dải chỉ số gọn (KHÔNG còn chấm điểm thủ công) */
.ct-q2-toolbar { background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); padding: 13px 14px; margin-bottom: 16px; }
.ct-q2-tb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-q2-search { flex: 1 1 280px; min-width: 200px; position: relative; display: flex; align-items: center; }
.ct-q2-search .material-symbols-outlined { position: absolute; left: 11px; color: var(--ct-gray); font-size: 19px; pointer-events: none; }
.ct-q2-search input { width: 100%; height: 38px; box-sizing: border-box; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-bg); padding: 0 12px 0 36px; font-family: inherit; font-size: 13.5px; color: var(--ct-text); outline: none; transition: .15s; }
.ct-q2-search input::placeholder { color: var(--ct-gray); }
.ct-q2-search input:focus { border-color: var(--agc, var(--ct-blue)); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--agc, var(--ct-blue)) 14%, transparent); }
.ct-q2-dept { height: 38px; box-sizing: border-box; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-bg); padding: 0 14px; font-family: inherit; font-size: 13.5px; color: var(--ct-text); cursor: pointer; outline: none; min-width: 170px; max-width: 230px; }
.ct-q2-dept:focus { border-color: var(--agc, var(--ct-blue)); }
.ct-q2-refresh { width: 38px; height: 38px; flex: 0 0 auto; box-sizing: border-box; border: 1px solid var(--ct-border); border-radius: 10px; background: var(--ct-bg); color: var(--ct-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; }
.ct-q2-refresh:hover { border-color: var(--agc, var(--ct-blue)); color: var(--agc, var(--ct-blue)); background: #fff; }
.ct-q2-refresh .material-symbols-outlined { font-size: 19px; }
.ct-q2-stats { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ct-border); }
.ct-q2-statgroup { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ct-q2-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--ct-text-2); }
.ct-q2-stat b { font-size: 14px; font-weight: 700; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-q2-vsep { width: 1px; height: 15px; background: var(--ct-border); }
.ct-q2-stat-hint { font-size: 12px; color: var(--ct-text-2); }
.ct-q2-stat-hint b { font-weight: 600; color: var(--agc, var(--ct-blue)); }

/* danh sách: mỗi dòng = rail danh tính (trái) + nội dung Hỏi/Đáp (phải) */
.ct-q2-list { display: flex; flex-direction: column; gap: 10px; }
.ct-q2-row { display: grid; grid-template-columns: 244px 1fr; background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); overflow: hidden; transition: border-color .12s; position: relative; }
.ct-q2-row:hover { border-color: color-mix(in srgb, var(--agc, var(--ct-blue)) 30%, var(--ct-border)); }
.ct-q2-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.ct-q2-ident-col { padding: 14px 15px; border-right: 1px solid var(--ct-border); background: #F7FAFE; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ct-q2-title { font-size: 13.5px; font-weight: 700; color: var(--ct-text); line-height: 1.35; letter-spacing: -.1px; min-width: 0; overflow-wrap: anywhere; }
.ct-q2-metacol { display: flex; flex-direction: column; gap: 7px; }
.ct-q2-dept-chip { display: inline-block; align-self: flex-start; max-width: 100%; background: var(--ct-bg-2); color: var(--ct-blue-deep); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-q2-subline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; color: var(--ct-text-2); }
.ct-q2-lvl { font-weight: 500; }
.ct-q2-time { color: var(--ct-text-2); }

/* cột nội dung: Hỏi (đậm) → câu trả lời (khối nhạt tô accent, đỏ khi chấm Sai) */
.ct-q2-content { padding: 14px 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.ct-q2-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ct-text-2); margin-bottom: 6px; }
.ct-q2-label.is-a { color: var(--agc, var(--ct-blue)); }
.ct-q2-q { font-size: 14.5px; font-weight: 600; color: var(--ct-text); line-height: 1.45; margin: 0 0 13px; letter-spacing: -.15px; overflow-wrap: anywhere; }
.ct-q2-a { font-size: 13px; color: var(--ct-text); line-height: 1.62; margin: 0; background: color-mix(in srgb, var(--agc, var(--ct-blue)) 5%, #fff); border-left: 3px solid var(--qa-soft2); border-radius: 0 9px 9px 0; padding: 10px 13px; overflow-wrap: anywhere; }
.ct-q2-a.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* render markdown câu trả lời khi mở rộng — GIỮ (dùng bởi mdLite) */
.ct-q2-md { display: block; }
.ct-q2-md > :first-child { margin-top: 0; }
.ct-q2-md > :last-child { margin-bottom: 0; }
.ct-q2-md p { margin: 0 0 7px; }
.ct-q2-md ul, .ct-q2-md ol { margin: 5px 0 8px; padding-left: 22px; }
.ct-q2-md ul { list-style: disc; } .ct-q2-md ol { list-style: decimal; }
.ct-q2-md li { margin: 3px 0; padding-left: 2px; }
.ct-q2-md li::marker { color: var(--ct-text-2); }
.ct-q2-md strong { font-weight: 700; color: var(--ct-text); }
.ct-q2-md em { font-style: italic; }
.ct-q2-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--ct-bg-2); border: 1px solid var(--ct-border); border-radius: 4px; padding: 0 5px; }
.ct-q2-md a { color: var(--agc, var(--ct-blue)); text-decoration: underline; overflow-wrap: anywhere; }

/* thanh hành động — chỉ còn nút mở/thu gọn (đã BỎ chấm điểm thủ công) */
.ct-q2-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ct-border); }
.ct-q2-exp { margin-left: auto; border: 1px solid var(--ct-border); background: var(--ct-bg); cursor: pointer; font: 600 12.5px 'Inter', sans-serif; color: var(--agc, var(--ct-blue)); padding: 6px 13px; border-radius: 8px; transition: background .12s, border-color .12s; }
.ct-q2-exp:hover { background: var(--qa-soft); border-color: var(--qa-soft2); }

.ct-q2-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; color: var(--ct-text-2); font-size: 12.5px; }
.ct-q2-pager .ct-btn[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 760px) {
  .ct-q2-row { grid-template-columns: 1fr; }
  .ct-q2-ident-col { border-right: none; border-bottom: 1px solid var(--ct-border); background: #F6F9FE; }
  .ct-q2-exp { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TAB LỖI (mọi agent) + NHẬT KÝ CẢI TIẾN AI (backlog) + MODAL — thêm 2026-06-16
   ════════════════════════════════════════════════════════════════════════════ */

/* chip màu theo agent (dùng chung tab Lỗi + Backlog) */
.ag-mei    { --agc: #1B57E6; } .ag-lyly  { --agc: #C2389B; } .ag-jarvis { --agc: #0E9F6E; }
.ag-john   { --agc: #7C3AED; } .ag-catic { --agc: #0E2A66; } .ag-system { --agc: #5A6B85; }
.ag-lexi   { --agc: #B45309; }
.ag-daisy  { --agc: #0E9488; }
.ag-all    { --agc: #5A6B85; }

/* ── thẻ trạng thái từng agent ── */
.ct-erra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 6px; }
.ct-erra { border: 1px solid var(--ct-border); border-radius: 12px; padding: 13px 14px; background: var(--ct-card); cursor: pointer; transition: box-shadow .12s, border-color .12s, transform .08s; }
.ct-erra:hover { box-shadow: var(--ct-shadow); border-color: var(--ct-blue); transform: translateY(-1px); }
.ct-erra.lv-crit { border-left: 3px solid var(--ct-red); }
.ct-erra.lv-warn { border-left: 3px solid var(--ct-amber); }
.ct-erra.lv-ok { border-left: 3px solid var(--ct-green); }
.ct-erra-top { display: flex; align-items: center; gap: 8px; }
.ct-erra-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc); flex: 0 0 auto; }
.ct-erra-ico .material-symbols-outlined { font-size: 18px; }
.ct-erra-name { font-weight: 700; font-size: 14px; color: var(--ct-text); }
.ct-erra-dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ct-gray); }
.ct-erra-dot.ok { background: var(--ct-green); } .ct-erra-dot.warn { background: var(--ct-amber); } .ct-erra-dot.crit { background: var(--ct-red); animation: q2pulse 1.6s infinite; }
.ct-erra-status { font-size: 12px; color: var(--ct-text-2); margin: 7px 0 9px; }
.ct-erra-nums { display: flex; gap: 16px; }
.ct-erra-nums > div { display: flex; flex-direction: column; }
.ct-erra-nums b { font-size: 20px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; line-height: 1; }
.ct-erra-nums span { font-size: 10.5px; color: var(--ct-text-2); margin-top: 3px; }
.ct-erra-last { margin-top: 10px; font-size: 11px; color: var(--ct-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── dòng thời gian sự cố ── */
.ct-inc-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.ct-inc-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ct-border); background: #fff; color: var(--ct-text-2); border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.ct-inc-chip:hover { border-color: var(--ct-blue); color: var(--ct-blue); }
.ct-inc-chip b { font-weight: 700; opacity: .6; }
.ct-inc-chip.on { background: var(--ct-blue); border-color: var(--ct-blue); color: #fff; }
.ct-inc-chip.on b { opacity: .85; }
.ct-inc-list { display: flex; flex-direction: column; }
.ct-inc { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--ct-border); font-size: 13px; }
.ct-inc:last-child { border-bottom: 0; }
.ct-inc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--ct-gray); }
.ct-inc-dot.crit { background: var(--ct-red); } .ct-inc-dot.warn { background: var(--ct-amber); } .ct-inc-dot.ok { background: var(--ct-green); }
.ct-inc-ag { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--agc); background: color-mix(in srgb, var(--agc) 10%, #fff); border: 1px solid color-mix(in srgb, var(--agc) 25%, #fff); border-radius: 6px; padding: 2px 8px; }
.ct-inc-ag .material-symbols-outlined { font-size: 14px; }
.ct-inc-text { flex: 1; min-width: 0; color: var(--ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-inc-meta { flex: 0 0 auto; font-size: 11px; color: var(--ct-text-2); white-space: nowrap; }
.ct-err-detail { }
.ct-err-detail > summary { cursor: pointer; font-weight: 700; color: var(--ct-blue-deep); font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; }
.ct-err-detail > summary::-webkit-details-marker { display: none; }
.ct-err-detail > summary::after { content: '▾'; margin-left: auto; color: var(--ct-text-2); }
.ct-err-detail[open] > summary::after { content: '▴'; }
.ct-err-detail > summary .material-symbols-outlined { color: var(--ct-text-2); }
.ct-table-wrap { overflow-x: auto; margin-top: 12px; }

/* ════ TAB LỖI v2 — console theo TỪNG AGENT (chi tiết + prompt sửa lỗi) ════ */
/* Thanh chọn agent DÙNG CHUNG ct-cost-tabs/ct-ctab (đồng bộ tab Hiệu năng/Chi phí) — KHÔNG còn
   khay segmented riêng. Style nằm ở khối .ct-cost-tabs/.ct-ctab bên dưới. */
/* HEADER CARD ĐỘC LẬP (đồng bộ mẫu các tab khác như Hiệu năng/Chi phí): card GỌN = đầu trang
   (title + sub + công cụ phải) + thanh chọn agent; #ctErrBody là KHỐI RIÊNG bên dưới (giống
   #ctPerfBody/#ctCostBody) chứa các card trắng trên nền trang — KHÔNG còn "panel hợp nhất". */
#ctErrBody { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; min-height: 200px; }

/* nút nhỏ + sev xanh (Thông tin) */
.ct-btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.ct-sev.ok { background: #E7F6EE; color: #0E7C45; }

/* ── LANE: dashboard FULL của 1 agent (xếp chồng ở Tổng quan) ── */
.ct-lanes { display: flex; flex-direction: column; gap: 14px; }
.ct-lane { padding: 0; overflow: hidden; border-left: 4px solid var(--agc, var(--ct-blue)); }
.ct-lane-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 15px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--agc, var(--ct-blue)) 7%, var(--ct-card)), var(--ct-card) 60%); border-bottom: 1px solid var(--ct-border); }
.ct-lane-ico { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); flex: 0 0 auto; box-shadow: 0 4px 10px color-mix(in srgb, var(--agc, var(--ct-blue)) 30%, transparent); }
.ct-lane-ico .material-symbols-outlined { font-size: 24px; }
.ct-lane-id { display: flex; flex-direction: column; gap: 1px; }
.ct-lane-id b { font-size: 16px; font-weight: 800; color: var(--ct-text); }
.ct-lane-id span { font-size: 12px; color: var(--ct-text-2); }
.ct-lane-health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; }
.ct-lane-health i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ct-lane-health.hl-ok { color: #0E7C45; background: #E7F6EE; }
.ct-lane-health.hl-warn { color: #B45309; background: #FDF3DF; }
.ct-lane-health.hl-crit { color: #B22B30; background: #FDE9EA; }
.ct-lane-health.hl-crit i { animation: q2pulse 1.6s ease-in-out infinite; }
.ct-lane-health.hl-offline { color: var(--ct-text-2); background: var(--ct-bg); }
.ct-lane-metrics { display: flex; gap: 20px; margin-left: auto; flex: 0 0 auto; }
.ct-lane-m { display: flex; flex-direction: column; align-items: center; }
.ct-lane-m b { font-size: 19px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; line-height: 1; }
.ct-lane-m span { font-size: 10px; color: var(--ct-text-2); margin-top: 3px; text-transform: uppercase; letter-spacing: .3px; }
.ct-lane-last { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ct-text-2); flex: 0 0 auto; white-space: nowrap; }
.ct-lane-last .material-symbols-outlined { font-size: 15px; }
.ct-lane-sec { padding: 14px 18px; }
.ct-lane-sec + .ct-lane-sec { border-top: 1px solid var(--ct-border); }
.ct-lane .ct-note-info { margin: 14px 18px 0; }
.ct-lane-sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--ct-text-2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.ct-lane-sub .material-symbols-outlined { font-size: 16px; color: var(--ct-blue); }
.ct-lane-sec > .ct-empty { text-align: left; padding: 4px 0; }

/* ── TIMELINE dọc: sự cố theo thời gian (dot + đường nối) ── */
.ct-tl { position: relative; padding-left: 4px; }
.ct-tl-item { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.ct-tl-item:last-child { padding-bottom: 0; }
.ct-tl-item::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: -2px; width: 2px; background: var(--ct-border); }
.ct-tl-item:last-child::before { display: none; }
.ct-tl-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; margin-top: 3px; background: var(--ct-gray); box-shadow: 0 0 0 3px var(--ct-card); }
.ct-tl-item.sev-crit .ct-tl-dot { background: var(--ct-red); }
.ct-tl-item.sev-warn .ct-tl-dot { background: var(--ct-amber); }
.ct-tl-item.sev-ok .ct-tl-dot { background: var(--ct-green); }
.ct-tl-body { flex: 1; min-width: 0; }
.ct-tl-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.ct-tl-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ct-text); }
.ct-tl-time .material-symbols-outlined { font-size: 15px; color: var(--ct-text-2); }
.ct-tl-ack { font-size: 11px; color: var(--ct-green); font-weight: 700; }
.ct-tl-text { font-size: 13.5px; color: var(--ct-text); line-height: 1.5; }
.ct-tl-detail { font-size: 12.5px; color: var(--ct-text-2); white-space: pre-wrap; background: var(--ct-bg); border-radius: 8px; padding: 8px 11px; margin-top: 6px; }
.ct-tl-body .ct-btn { margin-top: 8px; }

/* ── DANH SÁCH LỖI: toolbar tìm/lọc (ô tìm HERO nổi bật + hàng lọc riêng) + bảng mã lỗi ── */
.ct-elist-toolbar { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
/* Ô tìm kiếm HERO: nền trắng nổi, viền dày, bo lớn, icon xanh, có nút xoá tròn */
.ct-elist-search { display: flex; align-items: center; gap: 12px; background: var(--ct-card); border: 1.5px solid var(--ct-border); border-radius: 13px; padding: 13px 16px; box-shadow: 0 2px 10px rgba(20, 37, 63, 0.05); transition: border-color .15s, box-shadow .15s; }
.ct-elist-search:focus-within { border-color: var(--ct-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-blue) 13%, transparent); }
.ct-elist-search .ct-elist-search-ic { font-size: 23px; color: var(--ct-blue); flex: 0 0 auto; }
.ct-elist-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 14.5px 'Inter', sans-serif; color: var(--ct-text); min-width: 0; }
.ct-elist-search input::placeholder { color: var(--ct-gray); font-weight: 500; }
.ct-elist-clear { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--ct-bg-2); color: var(--ct-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s, color .14s; }
/* `display:inline-flex` (author) thắng `[hidden]` của UA → phải tự ẩn khi có thuộc tính hidden (nút xoá rỗng) */
.ct-elist-clear[hidden] { display: none; }
.ct-elist-clear:hover { background: color-mix(in srgb, var(--ct-red) 14%, #fff); color: var(--ct-red); }
.ct-elist-clear .material-symbols-outlined { font-size: 17px; }
.ct-elist-filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.ct-elist-flabel { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px 'Inter', sans-serif; color: var(--ct-text-2); text-transform: uppercase; letter-spacing: .4px; }
.ct-elist-flabel .material-symbols-outlined { font-size: 16px; color: var(--ct-blue); }
.ct-elist-sel { border: 1px solid var(--ct-border); background: #fff; color: var(--ct-text); border-radius: 10px; padding: 8px 12px; font: 600 12.5px 'Inter', sans-serif; cursor: pointer; }
.ct-elist-sel:hover { border-color: var(--ct-blue); }
.ct-elist-filters .ct-elist-export { margin-left: auto; }
.ct-elist-filters .ct-btn .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }
.ct-elist-count { font-size: 11.5px; font-weight: 700; color: var(--ct-text-2); margin-bottom: 2px; }
.ct-elist-table { font-size: 12.5px; }
.ct-elist-table th, .ct-elist-table td { white-space: nowrap; }
.ct-elist-table .ct-elist-desc { white-space: normal; min-width: 280px; color: var(--ct-text); }
.ct-elist-table .ct-elist-last { color: var(--ct-text-2); }
.ct-elist-table tbody tr:hover { background: var(--ct-bg); }
.ct-errcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--ct-bg-2); color: var(--ct-blue-deep); border-left: 3px solid var(--ct-gray); }
.ct-errcode.sev-crit { border-left-color: var(--ct-red); }
.ct-errcode.sev-warn { border-left-color: var(--ct-amber); }
.ct-errcode.sev-ok { border-left-color: var(--ct-green); }
.ct-cat-chip { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 99px; padding: 2px 9px; }

/* ════ DASHBOARD TỔNG QUAN tab Lỗi — KPI · diễn biến · phân bố · ma trận · ưu tiên ════ */
.ct-edash { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.ct-err-kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.ct-err-kpis .ct-kpi[data-fsev] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ct-err-kpis .ct-kpi[data-fsev]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27, 87, 230, 0.13); }
.ct-edash-trend { margin: 0; }
.ct-edash-grid { margin: 0; grid-template-columns: 1fr 1fr; }
.ct-edash-grid > .ct-card { margin: 0; }

/* Thanh ngang theo LOẠI nguyên nhân */
.ct-catbars { display: flex; flex-direction: column; gap: 11px; }
.ct-catbar { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 4px 5px; border-radius: 9px; cursor: pointer; transition: background .14s; }
.ct-catbar:hover, .ct-catbar:focus-visible { background: var(--ct-bg); outline: none; }
.ct-catbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.ct-catbar-name { font-size: 12.5px; font-weight: 700; color: var(--ct-text); }
.ct-catbar-top b { font-size: 14px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-catbar-track { display: block; height: 9px; border-radius: 6px; background: var(--ct-bg-2); overflow: hidden; }
.ct-catbar-track > i { display: block; height: 100%; border-radius: 6px; min-width: 4px; background: var(--ct-blue); transition: width .3s ease; }
.ct-catbar-track > i.good { background: var(--ct-green); }
.ct-catbar-track > i.warn { background: var(--ct-amber); }
.ct-catbar-track > i.bad { background: var(--ct-red); }
.ct-catbar-sub { display: block; font-size: 10.5px; color: var(--ct-text-2); margin-top: 4px; }

/* MA TRẬN agent × loại lỗi (heatmap) */
.ct-hm-wrap { margin-top: 0; }
.ct-hm { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.ct-hm th { font-size: 10.5px; font-weight: 700; color: var(--ct-text-2); text-transform: uppercase; letter-spacing: .3px; padding: 4px 6px; text-align: center; white-space: nowrap; }
.ct-hm thead th { vertical-align: bottom; }
.ct-hm-corner { background: transparent; }
.ct-hm-ag { text-align: left !important; padding-right: 10px; }
.ct-hm-ag .ct-inc-ag { white-space: nowrap; }
.ct-hm td { padding: 0; text-align: center; }
.ct-hm-cell { width: 100%; min-width: 40px; height: 34px; border: 0; border-radius: 7px; cursor: pointer; font: 800 13px 'Inter', sans-serif; color: var(--ct-text); font-variant-numeric: tabular-nums; transition: transform .12s, box-shadow .12s; }
.ct-hm-cell:hover, .ct-hm-cell:focus-visible { transform: scale(1.06); box-shadow: 0 4px 12px rgba(20, 37, 63, .18); outline: none; }
.ct-hm-empty { color: var(--ct-border); font-weight: 700; height: 34px; }

/* Danh sách CẦN ƯU TIÊN XỬ LÝ */
.ct-prio { display: flex; flex-direction: column; gap: 8px; }
.ct-prio-row { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; background: var(--ct-card); border: 1px solid var(--ct-border); border-left: 3px solid var(--ct-gray); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .14s, border-color .14s, transform .12s; }
.ct-prio-row:hover, .ct-prio-row:focus-visible { background: var(--ct-bg); transform: translateX(2px); outline: none; }
.ct-prio-row.sev-crit { border-left-color: var(--ct-red); }
.ct-prio-row.sev-warn { border-left-color: var(--ct-amber); }
.ct-prio-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: var(--ct-gray); }
.ct-prio-row.sev-crit .ct-prio-dot { background: var(--ct-red); animation: q2pulse 1.6s ease-in-out infinite; }
.ct-prio-row.sev-warn .ct-prio-dot { background: var(--ct-amber); }
.ct-prio-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ct-prio-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-prio-title { font-size: 13px; font-weight: 600; color: var(--ct-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ct-prio-meta { font-size: 11px; color: var(--ct-text-2); }
.ct-prio-cta { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 11%, #fff); }
.ct-prio-cta .material-symbols-outlined { font-size: 17px; }

@media (max-width: 720px) { .ct-edash-grid { grid-template-columns: 1fr; } }

/* CHIP TÓM TẮT sức khoẻ đội ở header (nằm trong ct-cost-tools, nép phải; bấm được → lọc danh sách lỗi) */
.ct-err-sum { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ct-sum-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px 'Inter', sans-serif; color: var(--ct-text-2); background: var(--ct-bg-2); border: 1px solid var(--ct-border); border-radius: 99px; padding: 3px 11px; transition: border-color .14s, background .14s; }
.ct-sum-chip b { color: var(--ct-text); font-weight: 800; }
.ct-sum-chip .material-symbols-outlined { font-size: 15px; }
.ct-sum-chip[data-sumsev] { cursor: pointer; }
.ct-sum-chip[data-sumsev]:hover { border-color: var(--ct-blue); }
.ct-sum-chip.crit { color: #9B1C1F; background: color-mix(in srgb, var(--ct-red) 9%, #fff); border-color: color-mix(in srgb, var(--ct-red) 30%, #fff); }
.ct-sum-chip.crit b { color: var(--ct-red); }
.ct-sum-chip.crit::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ct-red); animation: q2pulse 1.6s ease-in-out infinite; }
.ct-sum-chip.warn { color: #7A4E06; background: color-mix(in srgb, var(--ct-amber) 12%, #fff); border-color: color-mix(in srgb, var(--ct-amber) 32%, #fff); }
.ct-sum-chip.warn b { color: #B45309; }
.ct-sum-chip.ok { color: #0E7C45; background: #E7F6EE; border-color: color-mix(in srgb, var(--ct-green) 28%, #fff); }

/* Zone A — dải tình trạng 1 agent */
.ct-agstrip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 3px solid var(--agc, var(--ct-blue)); padding-left: 14px; }
.ct-agstrip-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--agc, var(--ct-blue)); background: color-mix(in srgb, var(--agc, var(--ct-blue)) 12%, #fff); flex: 0 0 auto; }
.ct-agstrip-ico .material-symbols-outlined { font-size: 26px; }
.ct-agstrip-id { display: flex; flex-direction: column; gap: 2px; }
.ct-agstrip-id b { font-size: 18px; font-weight: 800; color: var(--ct-text); }
.ct-agstrip-id span { font-size: 12.5px; color: var(--ct-text-2); }
.ct-agstrip-metrics { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.ct-agm { display: flex; flex-direction: column; }
.ct-agm b { font-size: 20px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ct-agm b.lv-ok { color: var(--ct-green); } .ct-agm b.lv-warn { color: #B45309; } .ct-agm b.lv-crit { color: var(--ct-red); } .ct-agm b.lv-skip { color: var(--ct-text-2); }
.ct-agm span { font-size: 10.5px; color: var(--ct-text-2); margin-top: 3px; }

/* Zone B/C — thẻ NHÓM LỖI / SỰ CỐ (thay bảng cũ) */
.ct-egroup { border: 1px solid var(--ct-border); border-radius: 12px; border-left: 3px solid var(--ct-gray); padding: 13px 15px; margin-bottom: 10px; background: #FBFDFF; display: flex; flex-direction: column; gap: 7px; }
.ct-egroup:last-child { margin-bottom: 0; }
.ct-egroup.sev-crit { border-left-color: var(--ct-red); }
.ct-egroup.sev-warn { border-left-color: var(--ct-amber); }
.ct-egroup.sev-ok { border-left-color: var(--ct-green); }
.ct-eg-head { display: flex; align-items: center; gap: 9px; }
.ct-eg-head b { font-size: 14px; font-weight: 700; color: var(--ct-text); flex: 1; min-width: 0; }
.ct-eg-head .ct-sev { flex: 0 0 auto; }
.ct-eg-status { font-size: 17px; flex: 0 0 auto; }
.ct-eg-meta { font-size: 12px; color: var(--ct-text-2); }
.ct-eg-detail { font-size: 12.5px; color: var(--ct-text-2); white-space: pre-wrap; background: var(--ct-bg); border-radius: 8px; padding: 8px 11px; }
.ct-eg-area { font-size: 12px; color: var(--ct-text-2); }
.ct-eg-area code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ct-bg-2); color: var(--ct-blue-deep); padding: 2px 8px; border-radius: 6px; font-size: 11.5px; word-break: break-word; }
.ct-eg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

/* nút "Prompt sửa" gọn trong dòng timeline tổng quan */
.ct-inc-fix { flex: 0 0 auto; border: 1px solid var(--ct-border); background: #fff; color: var(--ct-blue-deep); border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .12s; }
.ct-inc-fix:hover { border-color: var(--ct-blue); color: var(--ct-blue); background: var(--ct-bg); }

/* ghi chú thông tin (agent chưa có nhóm lỗi kỹ thuật) */
.ct-note-info { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ct-text-2); background: var(--ct-bg); border: 1px dashed var(--ct-border); border-radius: 10px; padding: 11px 14px; }
.ct-note-info .material-symbols-outlined { font-size: 18px; color: var(--ct-blue); flex: 0 0 auto; }

/* Modal prompt sửa lỗi */
.ct-fp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; align-items: center; }
.ct-fp-chip { font-size: 11.5px; font-weight: 700; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 7px; padding: 3px 9px; }
.ct-fp-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ct-blue-deep); }
.ct-fp-hint { font-size: 12.5px; color: var(--ct-text-2); margin-bottom: 10px; line-height: 1.5; }
.ct-fixprompt { width: 100%; min-height: 380px; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ct-text); background: var(--ct-bg-2); border: 1px solid var(--ct-border); border-radius: 10px; padding: 13px; resize: vertical; }
.ct-fixprompt:focus { outline: none; border-color: var(--ct-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-blue) 14%, transparent); }
.ct-fp-actions { display: flex; gap: 9px; margin-top: 13px; }

/* ════ NHẬT KÝ CẢI TIẾN AI — tab Hệ thống FULL-BLEED: header band tách rõ nội dung ════ */
/* Tab Hệ thống lấp hết .ct-main (bỏ padding + nền) → header & nội dung tự quản padding riêng. */
.ct-main.is-settings { padding: 0; background: var(--ct-card); }
.ct-main.is-settings .ct-banner { margin: 14px 28px 0; }
#view-settings { display: flex; flex-direction: column; min-height: 100%; }
.ct-cl-pagehead { background: linear-gradient(180deg, #F7FAFF, var(--ct-card)); border-bottom: 1px solid var(--ct-border); box-shadow: 0 8px 22px rgba(14, 42, 102, 0.05); padding: 22px 28px 18px; }
.ct-cl-pagebody { flex: 1; padding: 20px 28px 96px; }
.ct-cl-pagebody > #ctChangelog { max-width: 1500px; }   /* lấp gần hết; chặn trên màn cực rộng cho khỏi lê thê */
/* Mobile full-bleed (đặt SAU rule desktop trên → thắng cascade dù @media không tăng specificity) */
@media (max-width: 760px) {
  .ct-main.is-settings .ct-banner { margin: 12px 14px 0; }
  .ct-cl-pagehead { padding: 16px 14px 14px; }
  .ct-cl-pagebody { padding: 16px 14px 96px; }
}
/* .ct-cl-head dùng CHUNG cả tab Hệ thống lẫn tab Lỗi → giữ canh giữa + h3 margin:0 + count nép phải */
.ct-cl-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ct-cl-head h3 { margin: 0; }
.ct-cl-head-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ct-cl-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ct-blue), #2E7BFF); color: #fff; box-shadow: 0 6px 18px rgba(27, 87, 230, 0.30); }
.ct-cl-badge .material-symbols-outlined { font-size: 24px; }
.ct-cl-headtext h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ct-blue-deep); letter-spacing: 0; text-transform: none; }
.ct-cl-headtext p { margin: 3px 0 0; font-size: 12.5px; color: var(--ct-text-2); line-height: 1.5; max-width: 600px; }
.ct-cl-head-r { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ct-cl-add { height: 38px; border-radius: 10px; font-weight: 700; padding: 0 16px; box-shadow: 0 4px 12px rgba(27, 87, 230, 0.22); }
.ct-cl-add .material-symbols-outlined { font-size: 18px; vertical-align: -3px; }
.ct-cl-count { margin-left: auto; font-size: 12px; color: var(--ct-text-2); }

/* stat tiles (chỉ-số, KHÔNG phải nút bấm) — flex để thẻ gọn, không kéo giãn trên header rộng */
.ct-cl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ct-cl-stat { flex: 1 1 132px; max-width: 220px; display: flex; align-items: center; gap: 10px; background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 12px; padding: 11px 13px; }
.ct-cl-stat > .material-symbols-outlined { font-size: 20px; color: var(--ct-text-2); flex: 0 0 auto; }
.ct-cl-stat-n { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ct-cl-stat-n b { font-size: 19px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-cl-stat-n i { font-size: 11px; font-style: normal; color: var(--ct-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cl-stat.hot { background: #FFF8EC; border-color: #F4DCAB; } .ct-cl-stat.hot > .material-symbols-outlined { color: #C2820A; }
.ct-cl-stat.t-feature { background: #F0F5FF; border-color: #CDDDFF; } .ct-cl-stat.t-feature > .material-symbols-outlined { color: #1747BE; }
.ct-cl-stat.t-fix { background: #FEF1F2; border-color: #F6C9CB; } .ct-cl-stat.t-fix > .material-symbols-outlined { color: #B22B30; }
.ct-cl-stat.t-improve { background: #EFF9F2; border-color: #C6E9D2; } .ct-cl-stat.t-improve > .material-symbols-outlined { color: #0D7A3E; }
.ct-cl-stat.t-deploy { background: #FFF3E2; border-color: #F4D9A6; } .ct-cl-stat.t-deploy > .material-symbols-outlined { color: #92610A; }
.ct-cl-stat.t-refactor { background: #F2EEFC; border-color: #D9CCF5; } .ct-cl-stat.t-refactor > .material-symbols-outlined { color: #6D28D9; }
.ct-cl-stat.t-docs { background: #EAF6FB; border-color: #BFE6F2; } .ct-cl-stat.t-docs > .material-symbols-outlined { color: #0E7490; }

/* thanh lọc: ô tìm kiếm FULL chiều ngang + 1 nút "Bộ lọc" mở popover */
.ct-cl-filters { margin-bottom: 18px; }
.ct-cl-pagehead .ct-cl-filters { margin-bottom: 0; }   /* filters là phần cuối header → padding header lo khoảng cách */
.ct-cl-toolbar { display: flex; align-items: center; gap: 10px; }
.ct-cl-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; box-sizing: border-box; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 12px; padding: 0 15px; }
.ct-cl-search:focus-within { border-color: var(--ct-blue); background: #fff; box-shadow: 0 0 0 3px rgba(27, 87, 230, 0.10); }
.ct-cl-search .material-symbols-outlined { font-size: 19px; color: var(--ct-text-2); }
.ct-cl-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13.5px; color: var(--ct-text); }
/* nút Bộ lọc + popover */
.ct-cl-filterwrap { position: relative; flex: 0 0 auto; }
.ct-cl-filterbtn { display: inline-flex; align-items: center; gap: 7px; height: 44px; box-sizing: border-box; padding: 0 15px; border: 1px solid var(--ct-border); background: var(--ct-card); border-radius: 12px; font: 700 13px 'Inter', sans-serif; color: var(--ct-text); cursor: pointer; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; }
.ct-cl-filterbtn:hover { border-color: var(--ct-blue); color: var(--ct-blue); background: var(--ct-bg); }
.ct-cl-filterbtn.has { border-color: var(--ct-blue); color: var(--ct-blue); background: #EAF1FF; }
.ct-cl-filterbtn > .material-symbols-outlined { font-size: 18px; }
.ct-cl-fcaret { font-size: 18px; color: var(--ct-text-2); transition: transform .15s; }
.ct-cl-filterbtn[aria-expanded="true"] .ct-cl-fcaret { transform: rotate(180deg); }
.ct-cl-fbadge { background: var(--ct-blue); color: #fff; border-radius: 99px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ct-cl-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: min(440px, 86vw); background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 14px; box-shadow: 0 18px 48px rgba(14, 42, 102, 0.18); padding: 14px 16px; display: flex; flex-direction: column; gap: 13px; }
.ct-cl-pophead { display: flex; align-items: center; justify-content: space-between; }
.ct-cl-pophead b { font-size: 13px; color: var(--ct-blue-deep); }
.ct-cl-clear { border: 0; background: transparent; color: var(--ct-blue); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ct-cl-clear:hover { background: var(--ct-bg); }
.ct-cl-frow { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ct-cl-frow .ct-cl-flabel { padding-top: 7px; }
.ct-cl-flabel { flex: 0 0 42px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ct-text-2); }
.ct-cl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ct-cl-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ct-border); background: var(--ct-card); color: var(--ct-text-2); border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
.ct-cl-chip .material-symbols-outlined { font-size: 15px; }
.ct-cl-chip:hover { border-color: var(--ct-blue); color: var(--ct-blue); background: var(--ct-bg); }
.ct-cl-chip.on { background: var(--ct-blue); border-color: var(--ct-blue); color: #fff; box-shadow: 0 3px 10px rgba(27, 87, 230, 0.25); }

/* danh sách phiên bản — mỗi mục là 1 THẺ, viền trái màu theo LOẠI = tín hiệu rõ ràng */
.ct-cl-timeline { display: flex; flex-direction: column; gap: 12px; }
.ct-cl-item { border: 1px solid var(--ct-border); border-left: 4px solid var(--ct-gray); border-radius: 12px; background: var(--ct-card); padding: 14px 16px 13px; transition: box-shadow .14s ease, border-color .14s ease; }
.ct-cl-item:hover { box-shadow: 0 8px 26px rgba(14, 42, 102, 0.09); }
.ct-cl-item.t-feature { border-left-color: var(--ct-blue); }
.ct-cl-item.t-fix { border-left-color: var(--ct-red); }
.ct-cl-item.t-improve { border-left-color: var(--ct-green); }
.ct-cl-item.t-deploy { border-left-color: var(--ct-orange); }
.ct-cl-item.t-refactor { border-left-color: #6D28D9; }
.ct-cl-item.t-docs { border-left-color: #0E7490; }
.ct-cl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.ct-cl-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 3px 10px; background: var(--ct-bg-2); color: var(--ct-text-2); }
.ct-cl-type .material-symbols-outlined { font-size: 14px; }
.ct-cl-type.t-feature { background: #EAF1FF; color: #1747BE; } .ct-cl-type.t-fix { background: #FDE9EA; color: #B22B30; }
.ct-cl-type.t-improve { background: #E8F7EE; color: #0D7A3E; } .ct-cl-type.t-deploy { background: #FFF3E2; color: #92610A; }
.ct-cl-type.t-refactor { background: #F0ECFB; color: #6D28D9; } .ct-cl-type.t-docs { background: #E9F6FB; color: #0E7490; }
.ct-cl-ag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--agc); background: color-mix(in srgb, var(--agc) 10%, #fff); border: 1px solid color-mix(in srgb, var(--agc) 25%, #fff); border-radius: 7px; padding: 3px 9px; }
.ct-cl-ag .material-symbols-outlined { font-size: 14px; }
.ct-cl-ver { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--ct-text); background: var(--ct-bg-2); border-radius: 5px; padding: 3px 8px; }
.ct-cl-st { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 3px 8px; }
.ct-cl-st.s-prog { background: #FFF3E2; color: #92610A; } .ct-cl-st.s-plan { background: #EDF1F7; color: #5A6B85; }
.ct-cl-date { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ct-text-2); }
.ct-cl-date .material-symbols-outlined { font-size: 14px; }
.ct-cl-src { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 99px; padding: 3px 9px; }
.ct-cl-src .material-symbols-outlined { font-size: 14px; }
.ct-cl-src.manual { color: #6D28D9; background: #F7F4FD; border-color: #E0D5F7; }
.ct-cl-title { font-size: 15px; font-weight: 700; color: var(--ct-text); line-height: 1.4; }
.ct-cl-desc { margin-top: 6px; font-size: 13px; color: var(--ct-text-2); line-height: 1.55; }
.ct-cl-impact { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: #0D7A3E; background: #F1FAF4; border: 1px solid #CDEBD8; border-radius: 9px; padding: 8px 11px; }
.ct-cl-impact .material-symbols-outlined { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.ct-cl-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ct-cl-files code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 5px; padding: 2px 7px; color: var(--ct-text-2); }
.ct-cl-commit { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ct-gray); }
.ct-cl-commit .material-symbols-outlined { font-size: 14px; }
.ct-cl-acts { display: flex; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ct-border); }
.ct-cl-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ct-border); background: #fff; color: var(--ct-text-2); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.ct-cl-btn .material-symbols-outlined { font-size: 15px; }
.ct-cl-btn:hover { border-color: var(--ct-blue); color: var(--ct-blue); background: var(--ct-bg); }
.ct-cl-btn.danger:hover { border-color: var(--ct-red); color: var(--ct-red); background: #FFF6F6; }

/* ── MODAL + FORM ── */
.ct-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(14,42,102,.34); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.ct-modal.hidden { display: none; }
.ct-modal-box { width: 100%; max-width: 560px; background: var(--ct-card); border-radius: 16px; box-shadow: 0 24px 64px rgba(14,42,102,.28); overflow: hidden; }
.ct-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ct-border); }
.ct-modal-head h3 { margin: 0; font-size: 16px; color: var(--ct-blue-deep); display: flex; align-items: center; gap: 8px; }
.ct-modal-head h3 .material-symbols-outlined { font-size: 19px; color: var(--ct-blue); }
.ct-modal-x { border: 0; background: transparent; font-size: 18px; color: var(--ct-text-2); cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.ct-modal-x:hover { background: var(--ct-bg); color: var(--ct-text); }
.ct-modal-body { padding: 18px 20px 20px; }
.ct-form { display: flex; flex-direction: column; gap: 12px; }
.ct-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ct-text-2); }
.ct-form input, .ct-form select, .ct-form textarea { font: inherit; font-size: 13px; color: var(--ct-text); border: 1px solid var(--ct-border); border-radius: 9px; padding: 9px 11px; background: #fff; outline: none; width: 100%; box-sizing: border-box; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--ct-blue); box-shadow: 0 0 0 3px rgba(27,87,230,.08); }
.ct-form textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ct-form-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ct-form-err { color: var(--ct-red); font-size: 12px; min-height: 16px; }

@media (max-width: 640px) {
  .ct-form-row { grid-template-columns: 1fr; }
  .ct-inc-text { white-space: normal; }
  .ct-cl-src { margin-left: 0; }
}

/* ============ HỒ SƠ & QUYỀN AGENT — bảng điều khiển (ac-*) ============ */
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ac-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ct-border); background: var(--ct-card); color: var(--ct-text-2); border-radius: 11px; padding: 8px 14px; font: 600 13px 'Inter', sans-serif; cursor: pointer; transition: border-color .14s, color .14s, box-shadow .14s, background .14s; }
.ac-tab .material-symbols-outlined { font-size: 18px; }
.ac-tab:hover { color: var(--ct-blue-deep); border-color: color-mix(in srgb, var(--agc, var(--ct-blue)) 40%, var(--ct-border)); }
.ac-tab.is-active { background: var(--agc, var(--ct-blue)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--agc, var(--ct-blue)) 22%, transparent); }
.ac-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-enforce { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px 'Inter', sans-serif; padding: 6px 11px; border-radius: 99px; border: 1px solid; }
.ac-enforce .material-symbols-outlined { font-size: 15px; }
.ac-enforce.off { color: var(--ct-text-2); background: var(--ct-bg); border-color: var(--ct-border); }
.ac-enforce.on { color: #B45309; background: color-mix(in srgb, #B45309 10%, #fff); border-color: color-mix(in srgb, #B45309 30%, transparent); }
.ac-search { display: flex; align-items: center; gap: 8px; height: 38px; box-sizing: border-box; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 11px; padding: 0 13px; min-width: 220px; }
.ac-search:focus-within { border-color: var(--ct-blue); background: #fff; box-shadow: 0 0 0 3px rgba(27, 87, 230, .10); }
.ac-search .material-symbols-outlined { font-size: 18px; color: var(--ct-text-2); }
.ac-search input { border: 0; outline: none; background: transparent; font-size: 13px; color: var(--ct-text); flex: 1; min-width: 0; }

.ac-grid { display: grid; grid-template-columns: 320px 1fr; grid-template-areas: "id kn" "acc kn"; gap: 16px; align-items: start; margin-bottom: 16px; }
.ac-identity { grid-area: id; }
.ac-acc { grid-area: acc; }
.ac-kn { grid-area: kn; }
.ac-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ac-cardhead h3 { margin: 0; }
.ac-hint { font-size: 11.5px; color: var(--ct-text-2); font-weight: 600; }

/* identity */
.ac-id-top { display: flex; align-items: center; gap: 12px; }
.ac-id-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--agc, var(--ct-blue)) 12%, #fff); color: var(--agc, var(--ct-blue)); }
.ac-id-ic .material-symbols-outlined { font-size: 26px; }
.ac-id-meta { display: flex; flex-direction: column; min-width: 0; }
.ac-id-meta b { font-size: 17px; font-weight: 800; color: var(--ct-blue-deep); }
.ac-id-meta span { font-size: 12.5px; color: var(--ct-text-2); }
.ac-id-model { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ct-border); display: flex; flex-direction: column; gap: 4px; }
.ac-id-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ct-text-2); }
.ac-id-v { font-size: 12.5px; color: var(--ct-text); line-height: 1.5; }

/* knowledge rows */
.ac-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ct-border); }
.ac-row:last-child { border-bottom: 0; }
.ac-row.off { opacity: .62; }
.ac-row-main { flex: 1; min-width: 0; }
.ac-row-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-row-l1 b { font-size: 13.5px; font-weight: 700; color: var(--ct-text); }
.ac-row-desc { font-size: 12px; color: var(--ct-text-2); margin-top: 3px; line-height: 1.45; }
.ac-row-meta { font-size: 11px; color: var(--ct-text-2); margin-top: 3px; font-style: italic; }
.ac-type-chip { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 6px; flex: 0 0 auto; }
.ac-type-chip.t-data { color: #1B57E6; background: #EAF1FF; }
.ac-type-chip.t-rag { color: #6D28D9; background: #F2EEFC; }
.ac-type-chip.t-memory { color: #B45309; background: #FBF0E1; }
.ac-type-chip.t-tool { color: #0E7C66; background: #E2F5EF; }
.ac-type-chip.t-seed { color: #5A6B85; background: var(--ct-bg-2); }
.ac-gate { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #B22B30; background: color-mix(in srgb, #B22B30 9%, #fff); border: 1px solid color-mix(in srgb, #B22B30 22%, transparent); border-radius: 99px; padding: 1px 7px 1px 5px; }
.ac-gate .material-symbols-outlined { font-size: 13px; }
.ac-count { font-size: 11px; font-weight: 800; color: var(--ct-text-2); background: var(--ct-bg); border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums; }

/* toggle switch (CSS-only) */
.ac-toggle { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 99px; border: 0; background: #C9D4E8; cursor: pointer; position: relative; transition: background .16s; padding: 0; }
.ac-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14,42,102,.25); transition: left .16s; }
.ac-toggle.on { background: var(--ct-blue); }
.ac-toggle.on i { left: 21px; }
.ac-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27,87,230,.25); }

/* user access */
.ac-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-stat { flex: 1; min-width: 92px; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 11px; padding: 11px 12px; }
.ac-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ct-blue-deep); font-variant-numeric: tabular-nums; }
.ac-stat span { font-size: 11px; color: var(--ct-text-2); }
.ac-acc-model { font-size: 12px; color: var(--ct-text-2); margin-top: 11px; }
.ac-acc-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ct-text-2); margin: 14px 0 8px; }
.ac-emails { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-email { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ct-text); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 99px; padding: 3px 6px 3px 11px; }
.ac-email-x { border: 0; background: transparent; color: var(--ct-text-2); font-size: 16px; line-height: 1; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; }
.ac-email-x:hover { background: color-mix(in srgb, var(--ct-red) 14%, #fff); color: var(--ct-red); }
.ac-add { margin-top: 12px; }
.ac-acc-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--ct-text-2); background: var(--ct-bg); border-radius: 10px; padding: 10px 12px; margin-top: 12px; line-height: 1.45; }
.ac-acc-note .material-symbols-outlined { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }

/* cross-share matrix */
.ac-mx { display: grid; gap: 6px; }
.ac-mx-cell { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.ac-mx-corner { color: var(--ct-text-2); font-size: 10.5px; font-weight: 700; }
.ac-mx-head { color: #fff; background: var(--agc, var(--ct-blue-deep)); }
.ac-mx-diag { color: var(--ct-border); background: var(--ct-bg); }
.ac-cell { border: 1px solid var(--ct-border); background: var(--ct-card); color: var(--ct-text-2); cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.ac-cell .material-symbols-outlined { font-size: 20px; }
.ac-cell:hover { border-color: var(--ct-blue); }
.ac-cell.is-on { background: color-mix(in srgb, var(--ct-blue) 10%, #fff); border-color: color-mix(in srgb, var(--ct-blue) 35%, transparent); color: var(--ct-blue); }
.ac-cell.is-real { background: color-mix(in srgb, var(--ct-green) 12%, #fff); border-color: color-mix(in srgb, var(--ct-green) 38%, transparent); color: #0E7C45; }
.ac-cell.is-pending { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ct-amber) 9%, #fff), color-mix(in srgb, var(--ct-amber) 9%, #fff) 6px, #fff 6px, #fff 12px); border-color: color-mix(in srgb, var(--ct-amber) 40%, transparent); color: #B45309; border-style: dashed; }
.ac-mx-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.ac-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ct-text-2); }
.ac-lg::before { content: ''; width: 12px; height: 12px; border-radius: 4px; border: 1px solid; }
.ac-lg.is-real::before { background: color-mix(in srgb, var(--ct-green) 12%, #fff); border-color: color-mix(in srgb, var(--ct-green) 38%, transparent); }
.ac-lg.is-on::before { background: color-mix(in srgb, var(--ct-blue) 10%, #fff); border-color: color-mix(in srgb, var(--ct-blue) 35%, transparent); }
.ac-lg.is-pending::before { background: color-mix(in srgb, var(--ct-amber) 12%, #fff); border-color: color-mix(in srgb, var(--ct-amber) 40%, transparent); border-style: dashed; }

/* toast */
.ac-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none; background: var(--ct-blue-deep); color: #fff; font: 600 13px 'Inter', sans-serif; padding: 11px 18px; border-radius: 11px; box-shadow: 0 10px 30px rgba(14,42,102,.25); transition: opacity .2s, transform .2s; z-index: 90; max-width: 90vw; }
.ac-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ac-toast.err { background: #B22B30; }
.ac-toast.ok { background: #0E7C45; }

@media (max-width: 860px) {
  .ac-grid { grid-template-columns: 1fr; grid-template-areas: "id" "kn" "acc"; }
  .ac-head { flex-direction: column; align-items: stretch; }
  .ac-toolbar { justify-content: space-between; }
  .ac-search { flex: 1; }
}

/* ============ Hồ sơ & quyền agent — per-person + save bar + chia sẻ (ac v28) ============ */
/* công tắc nhỏ (per-person) */
.ac-toggle.sm { width: 38px; height: 22px; }
.ac-toggle.sm i { width: 16px; height: 16px; top: 3px; }
.ac-toggle.sm.on i { left: 19px; }
/* chấm "chưa lưu" + dòng đã sửa */
.ac-mod-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ct-amber); display: inline-block; flex: 0 0 auto; }
.ac-row.is-modified, .ac-person.is-modified, .ac-sh-row.is-modified { box-shadow: inset 2px 0 0 var(--ct-amber); }

/* danh sách NGƯỜI (panel quyền) */
.ac-ppl-search { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 10px; padding: 0 12px; margin: 10px 0 6px; }
.ac-ppl-search:focus-within { border-color: var(--ct-blue); background: #fff; box-shadow: 0 0 0 3px rgba(27,87,230,.1); }
.ac-ppl-search .material-symbols-outlined { font-size: 17px; color: var(--ct-text-2); }
.ac-ppl-search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 13px; color: var(--ct-text); }
.ac-person-list { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; }
.ac-person { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--ct-border); }
.ac-person:last-child { border-bottom: 0; }
.ac-person-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-person-main b { font-size: 13px; font-weight: 700; color: var(--ct-text); display: inline-flex; align-items: center; gap: 6px; }
.ac-person-main small { font-size: 11.5px; color: var(--ct-text-2); overflow-wrap: anywhere; }
.ac-person-role { font-size: 11px; color: var(--ct-text-2); margin-top: 2px; }
.ac-person-perm { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ac-perm-lbl { font-size: 10.5px; color: var(--ct-text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.ac-person-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.ac-person-status.st-approved { color: #0E7C45; background: color-mix(in srgb, var(--ct-green) 12%, #fff); }
.ac-person-status.st-pending { color: #B45309; background: color-mix(in srgb, var(--ct-amber) 14%, #fff); }
.ac-person-status.st-revoked { color: #B91C1C; background: color-mix(in srgb, #ef4444 12%, #fff); }
.ac-person-status.st-rejected { color: #6B7280; background: color-mix(in srgb, #6B7280 12%, #fff); }

/* chia sẻ chéo — danh sách hướng (thay ma trận) */
.ac-sh-list { display: flex; flex-direction: column; gap: 9px; }
.ac-sh-row { display: flex; align-items: center; gap: 14px; padding: 12px 15px; border: 1px solid var(--ct-border); border-radius: 12px; background: var(--ct-card); transition: border-color .14s, background .14s; }
.ac-sh-row.on { border-color: color-mix(in srgb, var(--ct-green) 34%, var(--ct-border)); background: color-mix(in srgb, var(--ct-green) 5%, #fff); }
.ac-sh-pair { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 230px; }
.ac-sh-pair b { font-size: 13px; font-weight: 700; color: var(--ct-blue-deep); }
.ac-sh-ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--agc, var(--ct-blue)) 13%, #fff); color: var(--agc, var(--ct-blue)); }
.ac-sh-ic .material-symbols-outlined { font-size: 18px; }
.ac-sh-arrow { color: var(--ct-text-2); font-size: 18px; }
.ac-sh-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ac-sh-desc { font-size: 12px; color: var(--ct-text-2); }
.ac-sh-real { font-size: 10.5px; font-weight: 700; color: #0E7C45; background: color-mix(in srgb, var(--ct-green) 12%, #fff); border: 1px solid color-mix(in srgb, var(--ct-green) 30%, transparent); border-radius: 99px; padding: 1px 9px; }

/* THANH LƯU (sticky) */
.ac-savebar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; background: var(--ct-blue-deep); color: #fff; padding: 11px 14px 11px 20px; border-radius: 14px; box-shadow: 0 14px 40px rgba(14, 42, 102, .32); z-index: 88; max-width: 94vw; animation: acSbUp .18s ease; }
.ac-savebar.hidden { display: none; }
@keyframes acSbUp { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ac-sb-text { font-size: 13px; white-space: nowrap; } .ac-sb-text b { font-size: 15px; font-weight: 800; }
.ac-sb-actions { display: flex; gap: 8px; }
.ac-savebar .ct-btn { background: rgba(255,255,255,.14); color: #fff; border: 0; }
.ac-savebar .ct-btn:hover { background: rgba(255,255,255,.24); }
.ac-savebar .ct-btn.primary { background: #fff; color: var(--ct-blue-deep); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.ac-savebar .ct-btn.primary .material-symbols-outlined { font-size: 17px; }

@media (max-width: 860px) {
  .ac-sh-pair { min-width: 0; }
  .ac-sh-row { flex-wrap: wrap; gap: 10px; }
  .ac-savebar { left: 10px; right: 10px; transform: none; flex-direction: column; align-items: stretch; gap: 10px; }
  @keyframes acSbUp { from { opacity: 0; } to { opacity: 1; } }
  .ac-sb-actions { justify-content: flex-end; }
}

/* ============ v30: section full chiều ngang + cấp độ 1–4 (Mei) ============ */
/* Mọi section xếp DỌC, mỗi cái FULL chiều ngang (dễ nhìn) */
.ac-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.ac-identity, .ac-acc, .ac-kn { grid-area: auto; }
/* Danh tính = banner ngang gọn */
.ac-identity { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ac-identity .ac-id-model { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 22px; border-left: 1px solid var(--ct-border); }
/* Danh sách người = lưới nhiều cột khi rộng */
.ac-person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); column-gap: 22px; max-height: 600px; }
/* phân bố cấp độ (Mei) */
.ac-lvl-dist { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.ac-lvl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 99px; padding: 4px 12px; }
.ac-lvl-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-lvl-chip.lvl-1 b { color: var(--ct-text-2); } .ac-lvl-chip.lvl-2 b { color: #1B57E6; }
.ac-lvl-chip.lvl-3 b { color: #6D28D9; } .ac-lvl-chip.lvl-4 b { color: #B45309; }
/* huy hiệu cấp độ từng người (read-only) */
.ac-lvl-badge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.ac-lvl-badge b { font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.ac-lvl-badge small { font-size: 10px; color: var(--ct-text-2); }
.ac-lvl-badge.lvl-1 b { color: var(--ct-text-2); background: var(--ct-bg-2); }
.ac-lvl-badge.lvl-2 b { color: #1B57E6; background: #EAF1FF; }
.ac-lvl-badge.lvl-3 b { color: #6D28D9; background: #F2EEFC; }
.ac-lvl-badge.lvl-4 b { color: #B45309; background: color-mix(in srgb, #B45309 13%, #fff); }
@media (max-width: 560px) {
  .ac-identity .ac-id-model { padding-left: 0; border-left: 0; border-top: 1px solid var(--ct-border); padding-top: 12px; margin-top: 4px; width: 100%; }
  .ac-person-list { grid-template-columns: 1fr; }
}

/* v31: chọn cấp truy cập từng người (Mei, sửa được) */
.ac-lvl-sel { font: 600 11.5px 'Inter', sans-serif; color: var(--ct-text); background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 8px; padding: 4px 7px; cursor: pointer; max-width: 150px; }
.ac-lvl-sel:hover { border-color: var(--ct-blue); }
.ac-lvl-sel:focus-visible { outline: none; border-color: var(--ct-blue); box-shadow: 0 0 0 3px rgba(27,87,230,.12); }
.ac-person-perm .ac-lvl-badge { flex-direction: row; align-items: center; }

/* ═══ v39: TAB CHI PHÍ & USAGE ═══════════════════════════════════════════════ */
.ct-cost-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.ct-cost-range { display: inline-flex; background: var(--ct-bg-2); border-radius: 9px; padding: 3px; gap: 2px; }
.ct-cost-range button { border: 0; background: transparent; font: 700 12px 'Inter', sans-serif; color: var(--ct-text-2); padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.ct-cost-range button:hover { color: var(--ct-blue-deep); }
.ct-cost-range button.is-active { background: var(--ct-card); color: var(--ct-blue); box-shadow: 0 2px 6px rgba(27,87,230,.12); }

/* Spacing đều giữa MỌI section của tab Chi phí (1 nguồn gap, bỏ margin lẻ → không lệch) */
#view-cost { display: flex; flex-direction: column; gap: 16px; }
#view-cost > .ct-kpis, #view-cost > .ct-cost-kpis, #view-cost > .ct-grid-2 { margin: 0; }

/* Thanh chọn agent (mini-card) — LẤP ĐẦY chiều ngang (grid đều), active RÕ theo màu agent */
.ct-cost-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 14px; }
.ct-ctab { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1.5px solid var(--ct-border); background: var(--ct-card); border-radius: 13px; cursor: pointer; min-width: 0; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.ct-ctab-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--agc, var(--ct-blue)); background: color-mix(in srgb, var(--agc, var(--ct-blue)) 13%, var(--ct-card)); flex: 0 0 auto; transition: background .16s, color .16s; }
.ct-ctab-ic .material-symbols-outlined { font-size: 20px; }
.ct-ctab-body { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
.ct-ctab-name { font: 700 13.5px 'Inter', sans-serif; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ctab-cost { font: 700 11.5px 'Inter', sans-serif; color: var(--ct-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ctab:hover { border-color: color-mix(in srgb, var(--agc, var(--ct-blue)) 45%, var(--ct-border)); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--agc, var(--ct-blue)) 14%, transparent); }
.ct-ctab.is-active { border-color: var(--agc, var(--ct-blue)); background: color-mix(in srgb, var(--agc, var(--ct-blue)) 7%, var(--ct-card)); box-shadow: 0 5px 16px color-mix(in srgb, var(--agc, var(--ct-blue)) 24%, transparent); }
.ct-ctab.is-active .ct-ctab-ic { background: var(--agc, var(--ct-blue)); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--agc, var(--ct-blue)) 40%, transparent); }
.ct-ctab.is-active .ct-ctab-name { color: var(--agc, var(--ct-blue-deep)); }
.ct-ctab.is-active .ct-ctab-cost { color: var(--agc, var(--ct-blue)); }
.ct-cost-grid { align-items: start; }

/* Leaderboard chi phí theo agent — thanh ngang màu agent */
.ct-cost-lead { display: flex; flex-direction: column; gap: 8px; }
.ct-cost-lead-row { display: grid; grid-template-columns: 128px 1fr 100px; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 5px 7px; cursor: pointer; transition: background .14s; }
.ct-cost-lead-row:hover, .ct-cost-lead-row:focus-visible { background: color-mix(in srgb, var(--agc, var(--ct-blue)) 7%, #fff); outline: none; }
.ct-cost-lead-ag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cost-lead-ag .ic { width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); flex: 0 0 auto; }
.ct-cost-lead-track { height: 24px; border-radius: 7px; background: var(--ct-bg-2); overflow: hidden; display: flex; align-items: center; }
.ct-cost-lead-track > i { display: block; height: 100%; border-radius: 7px; background: var(--agc, var(--ct-blue)); min-width: 4px; transition: width .3s ease; }
.ct-cost-lead-flat { font-size: 11px; font-weight: 600; color: var(--ct-text-2); padding-left: 10px; }
.ct-cost-lead-val { text-align: right; }
.ct-cost-lead-val b { font-size: 14px; color: var(--ct-text); font-weight: 800; }
.ct-cost-lead-val span { display: block; font-size: 10.5px; color: var(--ct-text-2); }
@media (max-width: 720px) { .ct-cost-lead-row { grid-template-columns: 100px 1fr 84px; } }

/* badge nguồn số liệu */
.ct-src { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; border: 1px solid; }
.ct-src-measured { color: var(--ct-green); background: color-mix(in srgb, var(--ct-green) 9%, #fff); border-color: color-mix(in srgb, var(--ct-green) 28%, #fff); }
.ct-src-subscription, .ct-src-subscription_or_none { color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 8%, #fff); border-color: color-mix(in srgb, var(--ct-blue) 24%, #fff); }
.ct-src-monitor { color: #0E9488; background: color-mix(in srgb, #0E9488 9%, #fff); border-color: color-mix(in srgb, #0E9488 26%, #fff); }
.ct-src-none { color: var(--ct-gray); background: color-mix(in srgb, var(--ct-gray) 9%, #fff); border-color: color-mix(in srgb, var(--ct-gray) 26%, #fff); }

.ct-cost-kpis { margin-bottom: 14px; }
.ct-cost-kpis--agent { margin: 14px 0 0; }
/* KPI tab Chi phí: icon · nhãn (lấp đầy) · số to dồn PHẢI → thẻ cân, không trống */
.ct-cost-kpi .ct-cost-kpi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ct-cost-kpi .ct-kpi-label { font-size: 12.5px; }
.ct-cost-kpi .ct-cost-kpi-big { margin-left: auto; flex: 0 0 auto; font-size: 23px; font-weight: 800; line-height: 1.05; white-space: nowrap; }

/* bảng chung tab Chi phí */
.ct-cost-tbl { overflow-x: auto; }
.ct-cost-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ct-cost-tbl th { text-align: left; font-weight: 700; color: var(--ct-text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 10px; border-bottom: 1px solid var(--ct-border); white-space: nowrap; }
.ct-cost-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--ct-bg-2); color: var(--ct-text); vertical-align: middle; }
.ct-cost-tbl th.r, .ct-cost-tbl td.r { text-align: right; white-space: nowrap; }
.ct-cost-tbl tr:last-child td { border-bottom: 0; }
.ct-cost-row { cursor: pointer; transition: background .12s; }
.ct-cost-row:hover, .ct-cost-row:focus-visible { background: color-mix(in srgb, var(--ct-blue) 5%, #fff); outline: none; }
.ct-cost-na { color: var(--ct-gray); font-style: italic; font-size: 11.5px; }
.ct-cost-model { font: 600 11.5px 'SFMono-Regular', ui-monospace, Menlo, monospace; color: var(--ct-blue-deep); background: var(--ct-bg-2); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.ct-cost-cache { color: var(--ct-amber); }

/* nhật ký chi phí — cuộn dọc */
.ct-cost-logwrap { max-height: 420px; overflow-y: auto; }
.ct-cost-log table { font-size: 12px; }
.ct-cost-log thead th { position: sticky; top: 0; background: var(--ct-card); z-index: 1; }

/* lane từng agent — bổ sung cho .ct-lane sẵn có */
.ct-lane-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-lane-name { font-size: 16px; font-weight: 800; color: var(--ct-blue-deep); }
.ct-lane-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ct-text-2); }
.ct-lane-cost { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.ct-lane-cost > b { font-size: 22px; font-weight: 800; color: var(--agc, var(--ct-blue)); line-height: 1.1; }
.ct-lane-cost > span { font-size: 11px; color: var(--ct-text-2); }
.ct-cost-subnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 18px 14px; padding: 10px 12px; font-size: 12.5px; color: var(--ct-blue-deep); background: color-mix(in srgb, var(--ct-blue) 6%, #fff); border: 1px solid color-mix(in srgb, var(--ct-blue) 20%, #fff); border-radius: 10px; }
.ct-cost-subnote .material-symbols-outlined { font-size: 18px; color: var(--ct-blue); flex: 0 0 auto; }
.ct-lane .ct-cost-kpis--agent { padding: 0 18px 16px; }

/* chi phí theo loại tác vụ — thanh ngang */
.ct-cost-ck { display: flex; flex-direction: column; gap: 9px; }
.ct-cost-ck-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.ct-cost-ck-lbl { font-size: 12.5px; font-weight: 600; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cost-ck .ct-perf-bar { margin: 0; }
.ct-cost-ck .ct-perf-bar > i { background: var(--ct-blue); }
.ct-cost-ck-val { font-size: 11.5px; font-weight: 700; color: var(--ct-text-2); white-space: nowrap; }

/* khung chi phí AI (6 khoản) */
.ct-cost-fw { display: flex; flex-direction: column; gap: 0; }
.ct-cost-fw-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) auto 1.4fr; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--ct-bg-2); }
.ct-cost-fw-row:last-child { border-bottom: 0; }
.ct-cost-fw-row.is-auto { background: color-mix(in srgb, var(--ct-green) 5%, transparent); border-radius: 8px; }
.ct-cost-fw-name { font-size: 13px; font-weight: 700; color: var(--ct-text); display: flex; flex-direction: column; gap: 1px; }
.ct-cost-fw-name small { font-size: 11px; font-weight: 500; color: var(--ct-text-2); }
.ct-cost-fw-tag { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 9px; border-radius: 999px; }
.ct-cost-fw-tag.auto { color: var(--ct-green); background: color-mix(in srgb, var(--ct-green) 11%, #fff); }
.ct-cost-fw-tag.manual { color: var(--ct-gray); background: color-mix(in srgb, var(--ct-gray) 10%, #fff); }
.ct-cost-fw-note { font-size: 11.5px; color: var(--ct-text-2); }
.ct-cost-disclaim { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 11.5px; color: var(--ct-text-2); line-height: 1.5; }
.ct-cost-disclaim .material-symbols-outlined { font-size: 15px; color: var(--ct-amber); flex: 0 0 auto; vertical-align: -2px; }
.ct-cost-partial { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: #8a5a00; background: color-mix(in srgb, var(--ct-amber) 13%, #fff); border: 1px solid color-mix(in srgb, var(--ct-amber) 38%, #fff); border-radius: 11px; }
.ct-cost-partial .material-symbols-outlined { font-size: 18px; color: var(--ct-amber); flex: 0 0 auto; }

@media (max-width: 720px) {
  .ct-cost-fw-row { grid-template-columns: 1fr auto; }
  .ct-cost-fw-note { grid-column: 1 / -1; }
  .ct-cost-ck-row { grid-template-columns: 100px 1fr auto; }
  .ct-lane-cost { margin-left: 0; text-align: left; }
}

/* ════════ AI PERFORMANCE MONITORING (tab Hiệu năng AI) ════════ */
/* spacing đều mọi section như tab Chi phí */
#view-perf { display: flex; flex-direction: column; gap: 16px; }
#view-perf > .ct-kpis, #view-perf > .ct-cost-kpis, #view-perf > .ct-grid-2 { margin: 0; }

/* Risk: bố cục + spacing đều y như tab Hiệu năng/Chi phí (header card + tab mini-card + giếng body) */
#view-risk { display: flex; flex-direction: column; gap: 16px; }
#view-risk > .ct-kpis, #view-risk > .ct-cost-kpis, #view-risk > .ct-grid-2 { margin: 0; }
#ctRiskBody { display: flex; flex-direction: column; gap: 16px; }
#ctRiskBody > .ct-kpis, #ctRiskBody > .ct-cost-kpis, #ctRiskBody > .ct-card, #ctRiskBody > .ct-grid-2 { margin: 0; }

/* KPI trạng thái: giá trị là CHỮ (vd "Cần chú ý") → nhỏ hơn số, cho xuống dòng, không đè icon */
.ct-cost-kpi-big.ct-pm-big-sm { font-size: 15.5px; line-height: 1.2; white-space: normal; text-align: right; max-width: 50%; }

/* badge nguồn bổ sung (heuristic/off) — đồng bộ .ct-src-* sẵn có */
.ct-src-heuristic { color: var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 11%, #fff); border-color: color-mix(in srgb, var(--ct-amber) 32%, #fff); }
.ct-src-off { color: var(--ct-gray); background: color-mix(in srgb, var(--ct-gray) 9%, #fff); border-color: color-mix(in srgb, var(--ct-gray) 26%, #fff); }

/* chấm trạng thái theo mức */
.ct-pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ct-gray); vertical-align: 1px; flex: 0 0 auto; }
.ct-pm-dot.lv-ok { background: var(--ct-green); }
.ct-pm-dot.lv-warn { background: var(--ct-amber); }
.ct-pm-dot.lv-crit { background: var(--ct-red); }
.ct-pm-dot.lv-skip { background: var(--ct-gray); }

/* bảng catalog (AI Operations Dashboard + Giám sát chất lượng) */
.ct-pm-cat table { table-layout: auto; }
.ct-pm-metric { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ct-text); white-space: nowrap; }
.ct-pm-metric .material-symbols-outlined { font-size: 18px; color: var(--ct-blue); }
.ct-pm-desc { color: var(--ct-text-2); font-size: 12px; }
.ct-pm-val { font-size: 14px; font-weight: 800; color: var(--ct-text); }
.ct-pm-extra { display: block; font-size: 10.5px; font-weight: 600; color: var(--ct-text-2); white-space: nowrap; }

/* kiểm tra sức khoẻ (per-agent checks) */
.ct-pm-checks { display: flex; flex-direction: column; gap: 8px; }
.ct-pm-check { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--ct-border); border-radius: 9px; background: var(--ct-card); }
.ct-pm-check.lv-crit { border-left: 3px solid var(--ct-red); }
.ct-pm-check.lv-warn { border-left: 3px solid var(--ct-amber); }
.ct-pm-check.lv-ok { border-left: 3px solid var(--ct-green); }
.ct-pm-check-name { font-weight: 700; font-size: 12.5px; color: var(--ct-text); }
.ct-pm-check-detail { font-size: 11px; color: var(--ct-text-2); text-align: right; }

/* nhóm lỗi hội thoại (Mei) */
.ct-pm-egroups { display: flex; flex-direction: column; gap: 8px; }
.ct-pm-egroup { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--ct-border); border-radius: 9px; }
.ct-pm-egroup-sev { font-size: 15px; flex: 0 0 auto; }
.ct-pm-egroup-label { font-weight: 700; font-size: 13px; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pm-egroup-counts { font-size: 11px; color: var(--ct-text-2); white-space: nowrap; font-weight: 600; }

/* thẻ Jarvis bộ giám sát */
.ct-pm-jarvis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 18px; }

@media (max-width: 720px) {
  .ct-pm-check { grid-template-columns: auto 1fr; }
  .ct-pm-check-detail { grid-column: 1 / -1; text-align: left; padding-left: 17px; }
  .ct-pm-egroup { grid-template-columns: auto 1fr; }
  .ct-pm-egroup-counts { grid-column: 1 / -1; padding-left: 25px; }
}

/* ── Điểm hiệu suất: bảng màu band (Tốt→Kém) ── */
:root { --pm-good: #18A957; --pm-ok: #7CB342; --pm-warn: #E89B0C; --pm-bad: #E5484D; --pm-na: #8A97AD; }
.band-good { color: var(--pm-good); } .band-ok { color: var(--pm-ok); } .band-warn { color: var(--pm-warn); } .band-bad { color: var(--pm-bad); }

/* KPI HIỆU NĂNG — thẻ DỌC (icon → số to → nhãn → phụ): hết cảnh chữ bị bóp 1 cột hẹp như bản cũ */
.ct-pm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px; }
.ct-pm-kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); min-width: 0; }
.ct-pm-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ct-bg-2); color: var(--ct-blue); margin-bottom: 4px; }
.ct-pm-kpi-ic .material-symbols-outlined { font-size: 20px; }
.ct-pm-kpi-big { font-size: 25px; font-weight: 800; line-height: 1.15; color: var(--ct-text); letter-spacing: -.3px; }
.ct-pm-kpi-label { font-size: 12.5px; font-weight: 700; color: var(--ct-blue-deep); }
.ct-pm-kpi-sub { font-size: 11px; color: var(--ct-text-2); line-height: 1.35; }
.ct-pm-kpi.good .ct-pm-kpi-ic { background: color-mix(in srgb, var(--pm-good) 13%, #fff); color: var(--pm-good); }
.ct-pm-kpi.good .ct-pm-kpi-big { color: #0d7a3f; }
.ct-pm-kpi.ok .ct-pm-kpi-ic { background: color-mix(in srgb, var(--pm-ok) 15%, #fff); color: #5a8a25; }
.ct-pm-kpi.warn .ct-pm-kpi-ic { background: color-mix(in srgb, var(--pm-warn) 16%, #fff); color: #a16207; }
.ct-pm-kpi.warn .ct-pm-kpi-big { color: #a16207; }
.ct-pm-kpi.bad .ct-pm-kpi-ic { background: color-mix(in srgb, var(--pm-bad) 14%, #fff); color: var(--pm-bad); }
.ct-pm-kpi.bad .ct-pm-kpi-big { color: #b42318; }

/* chip điểm (bảng + tab) */
.ct-pm-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 12px; border: 1px solid; }
.ct-pm-grade.good { color: #0d7a3f; background: color-mix(in srgb, var(--pm-good) 12%, #fff); border-color: color-mix(in srgb, var(--pm-good) 32%, #fff); }
.ct-pm-grade.ok { color: #5a8a25; background: color-mix(in srgb, var(--pm-ok) 16%, #fff); border-color: color-mix(in srgb, var(--pm-ok) 36%, #fff); }
.ct-pm-grade.warn { color: #a16207; background: color-mix(in srgb, var(--pm-warn) 16%, #fff); border-color: color-mix(in srgb, var(--pm-warn) 38%, #fff); }
.ct-pm-grade.bad { color: #b42318; background: color-mix(in srgb, var(--pm-bad) 13%, #fff); border-color: color-mix(in srgb, var(--pm-bad) 34%, #fff); }
.ct-pm-grade.na { color: var(--pm-na); background: color-mix(in srgb, var(--pm-na) 9%, #fff); border-color: color-mix(in srgb, var(--pm-na) 26%, #fff); }

/* xếp hạng hiệu suất — thanh điểm */
.ct-pm-rank { display: flex; flex-direction: column; gap: 8px; }
.ct-pm-rank-row { display: grid; grid-template-columns: 24px 150px 1fr 120px; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 6px 8px; cursor: pointer; transition: background .14s; }
.ct-pm-rank-row:hover, .ct-pm-rank-row:focus-visible { background: color-mix(in srgb, var(--agc, var(--ct-blue)) 7%, #fff); outline: none; }
.ct-pm-rank-no { font-weight: 800; color: var(--ct-text-2); text-align: center; font-size: 13px; }
.ct-pm-rank-ag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pm-rank-ag .ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); flex: 0 0 auto; }
.ct-pm-rank-bar { height: 22px; border-radius: 7px; background: var(--ct-bg-2); overflow: hidden; display: flex; align-items: center; }
.ct-pm-rank-bar > i { display: block; height: 100%; border-radius: 7px; min-width: 4px; transition: width .3s ease; background: var(--pm-na); }
.ct-pm-rank-bar > i.band-good { background: var(--pm-good); } .ct-pm-rank-bar > i.band-ok { background: var(--pm-ok); }
.ct-pm-rank-bar > i.band-warn { background: var(--pm-warn); } .ct-pm-rank-bar > i.band-bad { background: var(--pm-bad); }
.ct-pm-rank-score { text-align: right; }
.ct-pm-rank-score b { font-size: 15px; font-weight: 800; } .ct-pm-rank-score span { display: block; font-size: 10.5px; color: var(--ct-text-2); }
.ct-pm-rank-pending { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ct-text-2); }
.ct-pm-rank-pending .material-symbols-outlined { font-size: 15px; }

/* thẻ đánh giá hiệu suất (chi tiết agent) — vòng điểm + thành phần SLO */
.ct-pm-score { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.ct-pm-score-ring { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--pm-na); flex: 0 0 auto; }
.ct-pm-score-ring.band-good { border-color: var(--pm-good); } .ct-pm-score-ring.band-ok { border-color: var(--pm-ok); }
.ct-pm-score-ring.band-warn { border-color: var(--pm-warn); } .ct-pm-score-ring.band-bad { border-color: var(--pm-bad); }
.ct-pm-score-ring b { font-size: 22px; font-weight: 800; color: var(--ct-text); line-height: 1; } .ct-pm-score-ring span { font-size: 10px; color: var(--ct-text-2); }
.ct-pm-score-meta { display: flex; flex-direction: column; gap: 5px; }
.ct-pm-score-band { display: inline-block; align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.ct-pm-score-band.band-good { color: #0d7a3f; background: color-mix(in srgb, var(--pm-good) 13%, #fff); } .ct-pm-score-band.band-ok { color: #5a8a25; background: color-mix(in srgb, var(--pm-ok) 16%, #fff); }
.ct-pm-score-band.band-warn { color: #a16207; background: color-mix(in srgb, var(--pm-warn) 16%, #fff); } .ct-pm-score-band.band-bad { color: #b42318; background: color-mix(in srgb, var(--pm-bad) 13%, #fff); }
.ct-pm-score-slo { font-size: 12.5px; font-weight: 600; color: var(--ct-text-2); }
.ct-pm-comps { display: flex; flex-direction: column; gap: 7px; }
.ct-pm-comp { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--ct-border); border-radius: 9px; border-left-width: 3px; }
.ct-pm-comp.st-good { border-left-color: var(--pm-good); } .ct-pm-comp.st-ok { border-left-color: var(--pm-ok); }
.ct-pm-comp.st-warn { border-left-color: var(--pm-warn); } .ct-pm-comp.st-bad { border-left-color: var(--pm-bad); }
.ct-pm-comp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pm-na); flex: 0 0 auto; }
.ct-pm-comp-dot.st-good { background: var(--pm-good); } .ct-pm-comp-dot.st-ok { background: var(--pm-ok); }
.ct-pm-comp-dot.st-warn { background: var(--pm-warn); } .ct-pm-comp-dot.st-bad { background: var(--pm-bad); }
.ct-pm-comp-lbl { font-size: 12.5px; font-weight: 700; color: var(--ct-text); display: flex; flex-direction: column; }
.ct-pm-comp-lbl small { font-weight: 500; font-size: 10.5px; color: var(--ct-text-2); }
.ct-pm-comp-val { font-size: 14px; font-weight: 800; color: var(--ct-text); white-space: nowrap; }
.ct-pm-comp-tgt { font-size: 10.5px; color: var(--ct-text-2); white-space: nowrap; }

@media (max-width: 720px) {
  .ct-pm-rank-row { grid-template-columns: 20px 1fr 90px; }
  .ct-pm-rank-bar { display: none; }
  .ct-pm-comp { grid-template-columns: auto 1fr auto; }
  .ct-pm-comp-tgt { grid-column: 2 / -1; padding-left: 19px; }
}

/* ════════ AI RISK SCORING (tab Rủi ro AI) ════════ */
/* Bảng màu điểm 1→5 (xanh→đỏ) + nhóm thấp/tb/cao */
:root{
  --rk-s1:#18A957; --rk-s2:#7CB342; --rk-s3:#E89B0C; --rk-s4:#F4720B; --rk-s5:#E5484D;
  --rk-low:#18A957; --rk-mid:#E89B0C; --rk-high:#E5484D;
}
.rk-chip{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; font-weight:800; font-size:13px; color:#fff; }
.rk-chip.s1{ background:var(--rk-s1); } .rk-chip.s2{ background:var(--rk-s2); }
.rk-chip.s3{ background:var(--rk-s3); } .rk-chip.s4{ background:var(--rk-s4); } .rk-chip.s5{ background:var(--rk-s5); }

/* nhãn nhóm */
.rk-band{ display:inline-block; padding:2px 10px; border-radius:99px; font-size:11.5px; font-weight:800; letter-spacing:.2px; }
.rk-band-low{ background:color-mix(in srgb,var(--rk-low) 14%,#fff); color:#0d7a3f; border:1px solid color-mix(in srgb,var(--rk-low) 35%,#fff); }
.rk-band-mid{ background:color-mix(in srgb,var(--rk-mid) 16%,#fff); color:#a16207; border:1px solid color-mix(in srgb,var(--rk-mid) 38%,#fff); }
.rk-band-high{ background:color-mix(in srgb,var(--rk-high) 14%,#fff); color:#b42318; border:1px solid color-mix(in srgb,var(--rk-high) 36%,#fff); }

/* bảng xếp hạng */
.rk-tbl table{ width:100%; }
.rk-tbl th.rk-th-c{ text-align:center; width:42px; color:var(--ct-text-2); }
.rk-tbl th.rk-th-c .material-symbols-outlined{ font-size:18px; vertical-align:middle; }
.rk-tbl th.rk-th-rank{ width:32px; text-align:center; }
.rk-tbl td.rk-td-c{ text-align:center; }
.rk-tbl .rk-rank{ text-align:center; font-weight:800; color:var(--ct-text-2); }
.rk-tbl tr.rk-row{ cursor:pointer; transition:background .12s; }
.rk-tbl tr.rk-row:hover{ background:#F7FAFF; }
.rk-tbl tr.rk-row:focus-visible{ outline:2px solid var(--ct-blue); outline-offset:-2px; }
.rk-role{ font-size:11px; color:var(--ct-text-2); margin-top:1px; }
.rk-total-cell{ white-space:nowrap; min-width:140px; }
.rk-total-cell b{ font-size:14px; } .rk-total-cell small{ color:var(--ct-text-2); font-weight:600; }
.rk-bar{ display:inline-block; width:82px; height:8px; border-radius:99px; background:var(--ct-bg-2); overflow:hidden; vertical-align:middle; margin-right:8px; }
.rk-bar-fill{ display:block; height:100%; border-radius:99px; }
.rk-bar-fill.low{ background:linear-gradient(90deg,var(--rk-s1),var(--rk-s2)); }
.rk-bar-fill.mid{ background:linear-gradient(90deg,var(--rk-s2),var(--rk-s3)); }
.rk-bar-fill.high{ background:linear-gradient(90deg,var(--rk-s4),var(--rk-s5)); }
.rk-gap{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:color-mix(in srgb,var(--rk-high) 14%,#fff); color:#b42318; font-weight:800; font-size:12px; }
.rk-okmark{ color:var(--ct-green); font-weight:800; }

/* phân nhóm (legend) */
.rk-bands{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rk-band-card{ border:1px solid var(--ct-border); border-radius:12px; padding:12px 14px; border-left-width:4px; }
.rk-band-card p{ margin:8px 0 0; font-size:12.5px; color:var(--ct-text-2); line-height:1.5; }
.rk-band-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rk-band-h b{ font-size:12.5px; color:var(--ct-text-2); }
.rk-bandc-low{ border-left-color:var(--rk-low); } .rk-bandc-mid{ border-left-color:var(--rk-mid); } .rk-bandc-high{ border-left-color:var(--rk-high); }

/* nhận định toàn đội */
.rk-insights ul{ margin:6px 0 0; padding-left:18px; }
.rk-insights li{ margin:7px 0; font-size:13px; line-height:1.6; color:var(--ct-text); }

/* thang điểm (collapsible) */
.rk-rubric summary{ cursor:pointer; font-weight:700; color:var(--ct-blue-deep); display:flex; align-items:center; gap:8px; list-style:none; }
.rk-rubric summary::-webkit-details-marker{ display:none; }
.rk-rubric[open] summary{ margin-bottom:12px; }
.rk-rubric-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.rk-rubric-c{ border:1px solid var(--ct-border); border-radius:10px; padding:10px 12px; background:#FBFDFF; }
.rk-rubric-c b{ font-size:12.5px; color:var(--ct-blue-deep); display:block; margin-bottom:6px; }
.rk-levels{ margin:0; padding:0; list-style:none; }
.rk-levels li{ font-size:12px; color:var(--ct-text-2); padding:3px 0; border-bottom:1px dashed var(--ct-border); line-height:1.45; }
.rk-levels li:last-child{ border-bottom:0; }

/* chi tiết agent: header LUÔN 1 dòng (icon + tên/vai trò co giãn + điểm ghim phải, KHÔNG xuống dòng) */
#ctRiskBody .ct-lane-head{ flex-wrap:nowrap; }
.rk-lane-id{ flex:1 1 auto; min-width:0; }
.rk-lane-id span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-lane-score{ margin-left:auto; flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:12px; }
.rk-ring{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(var(--rk-ringc) calc(var(--p)*1%), var(--ct-bg-2) 0); position:relative; }
.rk-ring::before{ content:''; position:absolute; inset:6px; border-radius:50%; background:#fff; }
.rk-ring>span{ position:relative; z-index:1; text-align:center; line-height:1; }
.rk-ring b{ font-size:18px; font-weight:800; color:var(--ct-text); }
.rk-ring small{ display:block; font-size:9.5px; color:var(--ct-text-2); font-weight:600; }
.rk-ring-low{ --rk-ringc:var(--rk-low); } .rk-ring-mid{ --rk-ringc:var(--rk-mid); } .rk-ring-high{ --rk-ringc:var(--rk-high); }
.rk-summary{ margin:14px 18px 16px; font-size:13px; line-height:1.6; color:var(--ct-text); background:#F7FAFF; border-radius:10px; padding:11px 14px; }
@media (max-width:720px){ #ctRiskBody .ct-lane-head{ flex-wrap:wrap; } .rk-lane-score{ margin-left:0; } }

/* chi tiết agent: 5 tiêu chí */
.rk-crit-list{ display:flex; flex-direction:column; gap:10px; }
.rk-crit{ border:1px solid var(--ct-border); border-radius:10px; padding:10px 12px; }
.rk-crit-h{ display:flex; align-items:center; gap:10px; }
.rk-crit-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.rk-crit-ic .material-symbols-outlined{ font-size:18px; }
.rk-crit-ic.s1{ background:var(--rk-s1); } .rk-crit-ic.s2{ background:var(--rk-s2); } .rk-crit-ic.s3{ background:var(--rk-s3); } .rk-crit-ic.s4{ background:var(--rk-s4); } .rk-crit-ic.s5{ background:var(--rk-s5); }
.rk-crit-q{ font-weight:600; font-size:13px; flex:1 1 auto; }
.rk-crit-n{ font-size:16px; font-weight:800; } .rk-crit-n small{ font-size:11px; color:var(--ct-text-2); font-weight:600; }
.rk-crit-n.s1{ color:#0d7a3f; } .rk-crit-n.s2{ color:#3f8f1f; } .rk-crit-n.s3{ color:#a16207; } .rk-crit-n.s4{ color:#b8500a; } .rk-crit-n.s5{ color:#b42318; }
.rk-crit-ev{ margin-top:8px; font-size:12.5px; color:var(--ct-text-2); line-height:1.6; padding-left:40px; }
.rk-dots{ display:inline-flex; gap:3px; }
.rk-dots i{ width:9px; height:9px; border-radius:50%; background:var(--ct-bg-2); display:inline-block; }
.rk-dots i.on.s1{ background:var(--rk-s1); } .rk-dots i.on.s2{ background:var(--rk-s2); } .rk-dots i.on.s3{ background:var(--rk-s3); } .rk-dots i.on.s4{ background:var(--rk-s4); } .rk-dots i.on.s5{ background:var(--rk-s5); }

/* chi tiết agent: cơ chế kiểm soát */
.rk-ctrl ul{ margin:8px 0 0; padding-left:18px; }
.rk-ctrl li{ margin:6px 0; font-size:12.5px; line-height:1.55; color:var(--ct-text); }
.rk-ctrl li.rk-none{ list-style:none; margin-left:-18px; color:var(--ct-text-2); }
.rk-ctrl h3{ display:flex; align-items:center; gap:7px; }
.rk-cnt{ margin-left:auto; background:var(--ct-bg-2); color:var(--ct-text-2); border-radius:99px; padding:1px 9px; font-size:12px; font-weight:800; }
.rk-cnt.bad{ background:color-mix(in srgb,var(--rk-high) 16%,#fff); color:#b42318; }
.rk-ctrl-cur{ border-top:3px solid var(--rk-low); } .rk-ctrl-rec{ border-top:3px solid var(--ct-blue); } .rk-ctrl-gap{ border-top:3px solid var(--rk-high); }

@media (max-width: 720px) {
  .rk-bands{ grid-template-columns:1fr; }
  .rk-tbl th.rk-th-c{ width:34px; }
  .rk-crit-ev{ padding-left:0; }
}

/* ════════ AI AUDIT TRAIL (tab Kiểm toán AI) ════════ */
#view-audit { display: flex; flex-direction: column; gap: 16px; }
#view-audit > .ct-kpis, #view-audit > .ct-cost-kpis, #view-audit > .ct-grid-2 { margin: 0; }
/* KHOẢNG CÁCH: thân tab + container chi tiết là flex-column gap → mọi card cách đều, không dính nhau */
#ctAuditBody, #ctAuditDetail { display: flex; flex-direction: column; gap: 16px; }
#ctAuditBody > .ct-kpis, #ctAuditBody > .ct-cost-kpis, #ctAuditBody > .ct-grid-2, #ctAuditBody > .ct-cost-partial { margin: 0; }
/* badge nguồn bổ sung "một phần" — đồng bộ .ct-src-* sẵn có (vàng như partial coverage) */
.ct-src-partial { color: var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 11%, #fff); border-color: color-mix(in srgb, var(--ct-amber) 32%, #fff); }

/* bảng 7 nhật ký bắt buộc */
.ct-aud-cat td { vertical-align: middle; }
.ct-aud-logname { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ct-text); }
.ct-aud-logname .material-symbols-outlined { font-size: 18px; color: var(--ct-blue); }
.ct-aud-covcell { display: flex; align-items: center; gap: 9px; }
.ct-aud-covnum { font-weight: 800; font-size: 12px; color: var(--ct-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-aud-dots { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ct-aud-agdot { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 6px; flex: 0 0 auto; }
.ct-aud-agdot .material-symbols-outlined { font-size: 13px; }
.ct-aud-agdot.is-ok { background: var(--agc, var(--ct-blue)); color: #fff; }
.ct-aud-agdot.is-gap { background: var(--ct-bg-2); color: var(--ct-gray); border: 1px dashed var(--ct-border); }

/* ma trận agent × 7 chiều */
.ct-aud-mx table { table-layout: fixed; }
.ct-aud-mx-h { text-align: center !important; width: 44px; }
.ct-aud-mx-h .material-symbols-outlined { font-size: 17px; color: var(--ct-blue); }
.ct-aud-mx-c { text-align: center; }
.ct-aud-mark { display: inline-block; width: 15px; height: 15px; border-radius: 50%; font-size: 0; line-height: 0; vertical-align: middle; }
.ct-aud-mark.cv-ok { background: var(--ct-green); }
.ct-aud-mark.cv-partial { background: var(--ct-amber); }
.ct-aud-mark.cv-alt { background: var(--ct-blue); }
.ct-aud-mark.cv-gap { background: var(--ct-bg-2); border: 1px solid var(--ct-border); }
.ct-aud-pct { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ct-aud-pct.good { color: #0E7C45; } .ct-aud-pct.warn { color: #B45309; } .ct-aud-pct.bad { color: #B22B30; }
.ct-aud-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--ct-text-2); }
.ct-aud-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* dòng sự kiện kiểm toán (feed) */
.ct-aud-feedwrap { max-height: 460px; overflow-y: auto; }
.ct-aud-feed { display: flex; flex-direction: column; gap: 9px; }
.ct-aud-ev { display: flex; gap: 11px; padding: 11px 13px; border: 1px solid var(--ct-border); border-radius: 11px; background: var(--ct-bg); border-left: 3px solid var(--ct-blue); }
.ct-aud-ev.cat-approval { border-left-color: var(--ct-green); }
.ct-aud-ev.cat-data_change { border-left-color: var(--ct-blue); }
.ct-aud-ev.cat-cost { border-left-color: var(--ct-amber); }
.ct-aud-ev.cat-other { border-left-color: var(--ct-gray); }
.ct-aud-ev-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ct-card); border: 1px solid var(--ct-border); color: var(--ct-blue); flex: 0 0 auto; }
.ct-aud-ev-ic .material-symbols-outlined { font-size: 17px; }
.ct-aud-ev-main { flex: 1; min-width: 0; }
.ct-aud-ev-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-aud-ev-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ct-text-2); }
.ct-aud-ev-ag { font-size: 11px !important; }
.ct-aud-ev-time { margin-left: auto; font-size: 11px; color: var(--ct-text-2); white-space: nowrap; }
.ct-aud-ev-detail { margin-top: 3px; font-size: 13px; color: var(--ct-text); line-height: 1.45; }
.ct-aud-ev-actor { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--ct-text-2); }
.ct-aud-ev-actor .material-symbols-outlined { font-size: 14px; }

/* card cảnh báo "vì sao cần audit trail" */
.ct-aud-warn { display: flex; align-items: flex-start; gap: 11px; border-left: 4px solid var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 6%, #fff); }
.ct-aud-warn > .material-symbols-outlined { font-size: 22px; color: var(--ct-amber); flex: 0 0 auto; }
.ct-aud-warn div { font-size: 13px; line-height: 1.55; color: var(--ct-text); }

/* thanh độ phủ (meter) */
.ct-aud-meter { height: 8px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; }
.ct-aud-meter > i { display: block; height: 100%; border-radius: 99px; background: var(--ct-green); transition: width .3s ease; }
.ct-aud-meter > i.good { background: var(--ct-green); } .ct-aud-meter > i.warn { background: var(--ct-amber); } .ct-aud-meter > i.bad { background: var(--ct-red); }
.ct-aud-meter-lane { margin: 0 18px 16px; }

/* chi tiết agent: lane coverage số to */
.ct-lane-cost > b.good { color: #0E7C45; } .ct-lane-cost > b.warn { color: #B45309; } .ct-lane-cost > b.bad { color: #B22B30; }

/* 7 thẻ chiều kiểm toán (per-agent) */
.ct-aud-dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.ct-aud-dim { border: 1px solid var(--ct-border); border-radius: 12px; padding: 13px; background: var(--ct-card); border-top: 3px solid var(--ct-green); display: flex; flex-direction: column; gap: 9px; }
.ct-aud-dim.cv-partial { border-top-color: var(--ct-amber); }
.ct-aud-dim.cv-alt { border-top-color: var(--ct-blue); }
.ct-aud-dim.cv-gap { border-top-color: var(--ct-gray); background: color-mix(in srgb, var(--ct-gray) 4%, #fff); }
.ct-aud-dim-h { display: flex; align-items: flex-start; gap: 9px; }
.ct-aud-dim-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ct-blue) 11%, #fff); color: var(--ct-blue); flex: 0 0 auto; }
.ct-aud-dim-ic .material-symbols-outlined { font-size: 18px; }
.ct-aud-dim-h b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ct-text); line-height: 1.25; }
.ct-aud-dim-purpose { display: block; font-size: 11.5px; color: var(--ct-text-2); margin-top: 2px; }
.ct-aud-dim-meta { display: flex; align-items: center; gap: 9px; justify-content: space-between; }
.ct-aud-dim-val { font-size: 20px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-aud-dim-detail { font-size: 11.5px; color: var(--ct-text-2); }
.ct-aud-dim-gap { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.45; color: #8a5a00; background: color-mix(in srgb, var(--ct-amber) 9%, #fff); border-radius: 8px; padding: 7px 9px; }
.ct-aud-dim-gap .material-symbols-outlined { font-size: 15px; color: var(--ct-amber); flex: 0 0 auto; }

/* ── CHI TIẾT THỰC TẾ per-agent (panels Q&A / tool / chi phí) ── */
.ct-aud-pnum { font-weight: 800; color: var(--ct-blue); margin: 0 2px; }
.ct-aud-qahead { font-size: 11.5px; color: var(--ct-text-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* xếp hạng độ phủ: tô màu bar theo mức (đè màu agent của .ct-cost-lead-track) */
.ct-cost-lead-track > i.good { background: var(--ct-green); }
.ct-cost-lead-track > i.warn { background: var(--ct-amber); }
.ct-cost-lead-track > i.bad { background: var(--ct-red); }
/* hàng Hỏi-Đáp thực tế */
.ct-aud-qa { display: flex; flex-direction: column; gap: 9px; }
.ct-aud-qa-row { border: 1px solid var(--ct-border); border-left: 3px solid var(--ct-blue); border-radius: 11px; padding: 10px 13px; background: var(--ct-bg); }
.ct-aud-qa-meta { display: flex; align-items: center; font-size: 10.5px; color: var(--ct-text-2); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.ct-aud-qa-time { margin-left: auto; text-transform: none; }
.ct-aud-qa-q, .ct-aud-qa-a { display: flex; gap: 7px; font-size: 13px; line-height: 1.45; }
.ct-aud-qa-q { color: var(--ct-text); font-weight: 600; }
.ct-aud-qa-a { color: var(--ct-text-2); margin-top: 4px; }
.ct-aud-qa-q .material-symbols-outlined { font-size: 16px; color: var(--ct-blue); flex: 0 0 auto; }
.ct-aud-qa-a .material-symbols-outlined { font-size: 16px; color: var(--ct-green); flex: 0 0 auto; }
.ct-aud-toolog { margin-top: 12px; }
/* tóm tắt chi phí: 2 cột kv */
.ct-aud-costsum { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
/* ghi chú lỗ hổng inline (citation) */
.ct-aud-gap-inline { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: #8a5a00; background: color-mix(in srgb, var(--ct-amber) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ct-amber) 26%, #fff); border-radius: 10px; padding: 11px 13px; }
.ct-aud-gap-inline .material-symbols-outlined { font-size: 18px; color: var(--ct-amber); flex: 0 0 auto; }

@media (max-width: 720px) {
  .ct-aud-dims { grid-template-columns: 1fr; }
  .ct-aud-covcell { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ct-aud-costsum { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TAB ĐỊNH HƯỚNG KINH DOANH — AI Business Intelligence (.ct-bi-*)
   Bố cục flex-column gap đều giữa các section; thẻ tín hiệu tô theo --bi-accent; biểu đồ thanh ngang.
   ════════════════════════════════════════════════════════════════════════════ */
#view-bi { display: flex; flex-direction: column; gap: 16px; }
#view-bi > .ct-card { margin: 0; }
#ctBiBody { display: flex; flex-direction: column; gap: 14px; }
#ctBiBody > .ct-card, #ctBiBody > .ct-pm-kpis { margin: 0; }

/* KPI chiến lược — KPI dạng chữ (quy trình/cơ hội) co gọn 2 dòng */
.ct-bi-kpi-sm { font-size: 16px; line-height: 1.25; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Khuyến nghị hành động */
.ct-bi-recos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ct-bi-reco { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid var(--ct-border); border-radius: 12px; background: var(--ct-card); border-left: 4px solid var(--ct-gray); }
.ct-bi-reco.pr-hi { border-left-color: var(--ct-red); background: color-mix(in srgb, var(--ct-red) 4%, #fff); }
.ct-bi-reco.pr-md { border-left-color: var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 4%, #fff); }
.ct-bi-reco.pr-lo { border-left-color: var(--ct-blue); }
.ct-bi-reco-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ct-bg-2); color: var(--ct-blue-deep); flex: 0 0 auto; }
.ct-bi-reco.pr-hi .ct-bi-reco-ic { background: color-mix(in srgb, var(--ct-red) 12%, #fff); color: var(--ct-red); }
.ct-bi-reco.pr-md .ct-bi-reco-ic { background: color-mix(in srgb, var(--ct-amber) 14%, #fff); color: #a16207; }
.ct-bi-reco-ic .material-symbols-outlined { font-size: 20px; }
.ct-bi-reco-main { min-width: 0; flex: 1; }
.ct-bi-reco-top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.ct-bi-reco-top b { font-size: 13.5px; font-weight: 800; color: var(--ct-text); line-height: 1.3; }
.ct-bi-reco-prio { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; flex: 0 0 auto; margin-top: 1px; }
.ct-bi-reco-prio.pr-hi { color: var(--ct-red); background: color-mix(in srgb, var(--ct-red) 12%, #fff); }
.ct-bi-reco-prio.pr-md { color: #a16207; background: color-mix(in srgb, var(--ct-amber) 14%, #fff); }
.ct-bi-reco-prio.pr-lo { color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 10%, #fff); }
.ct-bi-reco-detail { font-size: 12px; color: var(--ct-text-2); line-height: 1.5; margin-top: 4px; }
.ct-bi-reco-basis { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 10.5px; color: var(--ct-text-2); margin-top: 7px; }
.ct-bi-reco-basis .material-symbols-outlined { font-size: 13px; color: var(--ct-blue); }

/* Lưới 7 thẻ tín hiệu */
.ct-bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(384px, 1fr)); gap: 13px; }
.ct-bi-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--ct-border); border-radius: 13px; padding: 15px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bi-accent) 4%, #fff), var(--ct-card) 46%); border-top: 3px solid var(--bi-accent); }
.ct-bi-card.is-dim { opacity: .72; border-top-color: var(--ct-gray); background: color-mix(in srgb, var(--ct-gray) 4%, #fff); }
.ct-bi-card-head { display: flex; align-items: flex-start; gap: 11px; }
.ct-bi-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--bi-accent); flex: 0 0 auto; box-shadow: 0 4px 11px color-mix(in srgb, var(--bi-accent) 32%, transparent); }
.ct-bi-card.is-dim .ct-bi-ic { background: var(--ct-gray); box-shadow: none; }
.ct-bi-ic .material-symbols-outlined { font-size: 21px; }
.ct-bi-titles { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ct-bi-signal { font-size: 13.5px; font-weight: 800; color: var(--ct-text); line-height: 1.3; }
.ct-bi-meaning { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--bi-accent); }
.ct-bi-card.is-dim .ct-bi-meaning { color: var(--ct-text-2); }
.ct-bi-meaning .material-symbols-outlined { font-size: 14px; }
.ct-bi-card-head .ct-src { margin-left: auto; flex: 0 0 auto; align-self: center; }

/* biểu đồ thanh ngang trong thẻ tín hiệu */
.ct-bi-bars { display: flex; flex-direction: column; gap: 7px; }
.ct-bi-bar { display: grid; grid-template-columns: minmax(96px, 1.1fr) 1.4fr auto; align-items: center; gap: 10px; }
.ct-bi-bar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-bi-bar-lbl .material-symbols-outlined { font-size: 15px; color: var(--bi-accent); flex: 0 0 auto; }
.ct-bi-bar-track { height: 18px; border-radius: 6px; background: var(--ct-bg-2); overflow: hidden; }
.ct-bi-bar-track > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--bi-accent), color-mix(in srgb, var(--bi-accent) 60%, #fff)); min-width: 5px; transition: width .35s ease; }
.ct-bi-bar-val { text-align: right; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.15; }
.ct-bi-bar-val b { font-size: 12.5px; font-weight: 800; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.ct-bi-bar-val small { font-size: 10px; color: var(--ct-text-2); }

.ct-bi-insight { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--ct-blue-deep); background: color-mix(in srgb, var(--bi-accent) 7%, #fff); border-radius: 9px; padding: 9px 11px; }
.ct-bi-insight .material-symbols-outlined { font-size: 16px; color: var(--bi-accent); flex: 0 0 auto; }
.ct-bi-card.is-dim .ct-bi-insight { background: var(--ct-bg); color: var(--ct-text-2); }

.ct-bi-empty { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--ct-text-2); background: var(--ct-bg); border-radius: 9px; padding: 10px 12px; }
.ct-bi-empty .material-symbols-outlined { font-size: 16px; color: var(--ct-gray); flex: 0 0 auto; }

/* bảng tham chiếu tín hiệu → ý nghĩa */
.ct-bi-ref td { padding: 11px 12px; }
.ct-bi-ref-sig { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ct-text); }
.ct-bi-ref-sig .material-symbols-outlined { font-size: 16px; color: var(--ct-orange); }
.ct-bi-ref-mean { color: var(--ct-blue-deep); font-weight: 600; }
.ct-bi-ref-mean .material-symbols-outlined { font-size: 14px; color: var(--ct-blue); vertical-align: -2px; margin-right: 4px; }

@media (max-width: 720px) {
  .ct-bi-grid, .ct-bi-recos { grid-template-columns: 1fr; }
  .ct-bi-bar { grid-template-columns: minmax(78px, 1fr) 1fr auto; }
}

/* ════ TAB HỎI-ĐÁP (hợp nhất) — "Tổng quan" dashboard. Tái dùng .ct-pm-kpi/.ct-bi-card/.ct-bi-bars
   của tab Hiệu năng/BI để ĐỒNG BỘ; chỉ thêm vài lớp riêng dưới đây. ════ */
#ctQaBody { display: flex; flex-direction: column; gap: 14px; }
#ctQaBody > .ct-card, #ctQaBody > .ct-pm-kpis { margin: 0; }
/* dải KPI 6 ô — bám đúng 6 giá trị (auto-fit 3×2 / 6×1 tùy bề ngang) */
.ct-qaov-kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.ct-qaov-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
/* dòng headline lớn trong mỗi thẻ giá trị */
.ct-qaov-headline { font: 800 18px 'Inter', sans-serif; color: var(--bi-accent, var(--ct-blue-deep)); letter-spacing: -.3px; line-height: 1.2; margin-top: -2px; }
/* tách Mei vs Lyly trong thẻ "Nhân viên sử dụng AI" */
.ct-qaov-pa-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
.ct-qaov-pa { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--ct-border); border-radius: 11px; background: color-mix(in srgb, var(--agc, var(--ct-blue)) 5%, var(--ct-card)); border-left: 3px solid var(--agc, var(--ct-blue)); min-width: 0; }
.ct-qaov-pa-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); }
.ct-qaov-pa-ic .material-symbols-outlined { font-size: 17px; }
.ct-qaov-pa-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ct-qaov-pa-txt b { font: 700 13px 'Inter', sans-serif; color: var(--ct-text); }
.ct-qaov-pa-txt span { font-size: 11px; color: var(--ct-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-qaov-pa-num { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.ct-qaov-pa-num b { font: 800 16px 'Inter', sans-serif; color: var(--agc, var(--ct-blue-deep)); }
.ct-qaov-pa-num span { font-size: 10.5px; color: var(--ct-text-2); white-space: nowrap; }
/* thẻ "Chất lượng trả lời — Jarvis tự chấm" (Tổng quan) */
.ct-qaov-eval { --agc: var(--ct-blue); }
.ct-qaov-eval-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ct-qaov-eval-head h3 { margin: 0; }
.ct-qaov-eval-hero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px; }
.ct-qaov-eval-hero b { font: 800 32px 'Inter', sans-serif; letter-spacing: -.5px; color: var(--ct-blue-deep); }
.ct-qaov-eval-hero.good b { color: #0D7A3F; } .ct-qaov-eval-hero.warn b { color: #A16207; } .ct-qaov-eval-hero.bad b { color: #B42318; }
.ct-qaov-eval-hero span { font-size: 13px; color: var(--ct-text-2); }
.ct-qaov-eval-hero span b { font-size: 13px; color: var(--ct-text); }
.ct-qaov-eval-line { font-size: 12.5px; color: var(--ct-text-2); margin-bottom: 14px; }
.ct-qaov-eval-line b { color: var(--ct-text); font-weight: 600; }
/* lưới mini-card từng trợ lý — bố cục DỌC (avatar+tên trên · trạng thái dưới) → KHÔNG tràn/đè chữ */
.ct-qaov-ea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ct-qaov-ea { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; border: 1px solid var(--ct-border); border-radius: 12px; background: color-mix(in srgb, var(--agc, var(--ct-blue)) 4%, #fff); border-top: 3px solid var(--agc, var(--ct-blue)); min-width: 0; }
.ct-qaov-ea-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-qaov-ea-ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); }
.ct-qaov-ea-ic .material-symbols-outlined { font-size: 16px; }
.ct-qaov-ea-head b { font: 700 13.5px 'Inter', sans-serif; color: var(--ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-qaov-ea-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-qaov-ea-acc { font: 800 22px 'Inter', sans-serif; letter-spacing: -.4px; color: var(--ct-blue-deep); line-height: 1.1; }
.ct-qaov-ea-acc.good { color: #0D7A3F; } .ct-qaov-ea-acc.warn { color: #A16207; } .ct-qaov-ea-acc.bad { color: #B42318; }
.ct-qaov-ea-sub { font-size: 11px; color: var(--ct-text-2); overflow-wrap: anywhere; }
.ct-qaov-ea-chip { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg-2); border: 1px solid var(--ct-border); border-radius: 999px; padding: 3px 11px; cursor: default; }
@media (max-width: 720px) {
  .ct-qaov-grid { grid-template-columns: 1fr; }
  .ct-qaov-pa-row { grid-template-columns: 1fr; }
}

/* ══════════ TAB AI KPI ══════════ */
/* badge nguồn "đánh giá quản trị" (📋) — đồng bộ .ct-src-* */
.ct-src-manual { color: #7C3AED; background: color-mix(in srgb, #7C3AED 9%, #fff); border-color: color-mix(in srgb, #7C3AED 26%, #fff); }
/* màu band KPI: exc xanh lá · good xanh dương · basic cam · poor đỏ · na xám */
.kpi-exc, b.kpi-exc, .kpi-m-val.exc { color: var(--ct-green); }
.kpi-good, b.kpi-good, .kpi-m-val.good { color: var(--ct-blue); }
.kpi-basic, b.kpi-basic, .kpi-m-val.basic { color: var(--ct-amber); }
.kpi-poor, b.kpi-poor, .kpi-m-val.poor { color: var(--ct-red); }
.kpi-na, b.kpi-na, .kpi-m-val.trend { color: var(--ct-text-2); }
.kpi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.kpi-dot.exc { background: var(--ct-green); } .kpi-dot.good { background: var(--ct-blue); } .kpi-dot.basic { background: var(--ct-amber); } .kpi-dot.poor { background: var(--ct-red); } .kpi-dot.na { background: var(--ct-gray); }
.kpi-lock { font-size: 11px; }

/* band chip */
.kpi-band { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.kpi-band-exc { background: color-mix(in srgb, var(--ct-green) 14%, #fff); color: #0d7a3f; border: 1px solid color-mix(in srgb, var(--ct-green) 34%, #fff); }
.kpi-band-good { background: color-mix(in srgb, var(--ct-blue) 12%, #fff); color: var(--ct-blue); border: 1px solid color-mix(in srgb, var(--ct-blue) 32%, #fff); }
.kpi-band-basic { background: color-mix(in srgb, var(--ct-amber) 16%, #fff); color: #a16207; border: 1px solid color-mix(in srgb, var(--ct-amber) 38%, #fff); }
.kpi-band-poor { background: color-mix(in srgb, var(--ct-red) 14%, #fff); color: #b42318; border: 1px solid color-mix(in srgb, var(--ct-red) 36%, #fff); }
.kpi-band-na { background: var(--ct-bg-2); color: var(--ct-text-2); border: 1px solid var(--ct-border); }
.kpi-cov-chip { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--ct-text-2); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 99px; padding: 1px 9px; }

/* ── bảng xếp hạng KPI ── */
.kpi-lead { display: flex; flex-direction: column; gap: 7px; }
.kpi-lead-row { display: grid; grid-template-columns: 26px minmax(120px, 1.4fr) 2fr auto auto; gap: 12px; align-items: center;
  background: var(--ct-card); border: 1px solid var(--ct-border); border-left: 4px solid var(--agc, var(--ct-blue)); border-radius: 11px; padding: 8px 12px; cursor: pointer; text-align: left; font: inherit; transition: background .12s, box-shadow .12s; }
.kpi-lead-row:hover { background: color-mix(in srgb, var(--agc, var(--ct-blue)) 5%, #fff); }
.kpi-lead-row:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--agc, var(--ct-blue)) 22%, transparent); }
.kpi-lead-rank { font-size: 15px; font-weight: 800; color: var(--ct-text-2); text-align: center; }
.kpi-lead-ag { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; color: var(--ct-text); }
.kpi-lead-ag b { font-weight: 700; }
.kpi-lead-ag small { color: var(--ct-text-2); font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-lead-ag .ic { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--agc, var(--ct-blue)); flex: 0 0 auto; }
.kpi-lead-track { height: 9px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; }
.kpi-lead-track > i { display: block; height: 100%; border-radius: 99px; }
.kpi-lead-score { text-align: right; line-height: 1.2; min-width: 64px; }
.kpi-lead-score b { font-size: 15px; font-weight: 800; color: var(--ct-text); }
.kpi-lead-score span { display: block; font-size: 10px; color: var(--ct-text-2); }
.kpi-lead-track > i.exc, .kpi-m-bar > i.exc, .kpi-grp-bar > i.exc { background: var(--ct-green); }
.kpi-lead-track > i.good, .kpi-m-bar > i.good, .kpi-grp-bar > i.good { background: var(--ct-blue); }
.kpi-lead-track > i.basic, .kpi-m-bar > i.basic, .kpi-grp-bar > i.basic { background: var(--ct-amber); }
.kpi-lead-track > i.poor, .kpi-m-bar > i.poor, .kpi-grp-bar > i.poor { background: var(--ct-red); }
.kpi-lead-track > i.na { background: var(--ct-gray); }
.kpi-gate-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: var(--ct-text-2); }
.kpi-gate-note .material-symbols-outlined { font-size: 15px; color: var(--ct-red); }

/* ── biểu đồ ── */
.kpi-chart svg { width: 100%; height: auto; display: block; }

/* ── ma trận agent × nhóm ── */
.kpi-mtx-wrap { overflow-x: auto; }
.kpi-mtx { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kpi-mtx th, .kpi-mtx td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--ct-bg-2); }
.kpi-mtx thead th { color: var(--ct-text-2); font-weight: 700; }
.kpi-mtx thead th .material-symbols-outlined { font-size: 17px; color: var(--ct-blue); }
.kpi-mtx th.kpi-mtx-ag, .kpi-mtx td.kpi-mtx-ag { text-align: left; white-space: nowrap; }
.kpi-mtx-row { cursor: pointer; }
.kpi-mtx-row:hover { background: color-mix(in srgb, var(--ct-blue) 4%, #fff); }
.kpi-mtx-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ct-blue) 30%, transparent); }
.kpi-mtx-c { font-weight: 800; border-radius: 6px; }
.kpi-mtx-c.exc { background: color-mix(in srgb, var(--ct-green) 16%, #fff); color: #0d7a3f; }
.kpi-mtx-c.good { background: color-mix(in srgb, var(--ct-blue) 14%, #fff); color: var(--ct-blue); }
.kpi-mtx-c.basic { background: color-mix(in srgb, var(--ct-amber) 18%, #fff); color: #a16207; }
.kpi-mtx-c.poor { background: color-mix(in srgb, var(--ct-red) 15%, #fff); color: #b42318; }
.kpi-mtx-gap { color: var(--ct-gray); font-weight: 700; }
.kpi-mtx-na { color: var(--ct-border); }
.kpi-mtx-tot b { font-size: 14px; font-weight: 800; }

/* ── framework 10 nhóm ── */
.kpi-fw { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.kpi-fw-card { display: flex; gap: 10px; border: 1px solid var(--ct-border); border-radius: 11px; padding: 11px 12px; }
.kpi-fw-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--ct-blue), #2E7BFF); flex: 0 0 auto; }
.kpi-fw-ic .material-symbols-outlined { font-size: 18px; }
.kpi-fw-txt b { font-size: 13px; color: var(--ct-blue-deep); } .kpi-fw-txt b small { color: var(--ct-text-2); font-weight: 600; font-size: 10.5px; }
.kpi-fw-txt p { margin: 4px 0 6px; font-size: 11.5px; color: var(--ct-text-2); line-height: 1.45; }
.kpi-fw-cnt { font-size: 10.5px; font-weight: 700; color: var(--ct-blue); background: var(--ct-bg); border-radius: 99px; padding: 1px 8px; }

/* ── methodology + sources ── */
.kpi-meth, .kpi-src { margin: 0; padding-left: 18px; }
.kpi-meth li, .kpi-src li { font-size: 12.5px; color: var(--ct-text-2); line-height: 1.55; margin-bottom: 6px; }
.kpi-src li b { color: var(--ct-text); }

/* ── chi tiết 1 agent ── */
.kpi-lane-score { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.kpi-lane-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.kpi-ring { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--kpi-rc) calc(var(--p) * 1%), var(--ct-bg-2) 0); position: relative; }
.kpi-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.kpi-ring > span { position: relative; z-index: 1; text-align: center; line-height: 1; }
.kpi-ring b { font-size: 20px; font-weight: 800; color: var(--ct-text); }
.kpi-ring small { display: block; font-size: 9px; color: var(--ct-text-2); font-weight: 600; }
.kpi-ring-exc { --kpi-rc: var(--ct-green); } .kpi-ring-good { --kpi-rc: var(--ct-blue); } .kpi-ring-basic { --kpi-rc: var(--ct-amber); } .kpi-ring-poor { --kpi-rc: var(--ct-red); } .kpi-ring-na { --kpi-rc: var(--ct-gray); }
.kpi-gate { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; padding: 9px 12px; font-size: 12px; line-height: 1.5; color: #b42318;
  background: color-mix(in srgb, var(--ct-red) 7%, #fff); border: 1px solid color-mix(in srgb, var(--ct-red) 24%, #fff); border-radius: 10px; }
.kpi-gate .material-symbols-outlined { font-size: 17px; flex: 0 0 auto; }

.kpi-groups { display: flex; flex-direction: column; gap: 12px; }
.kpi-grp { position: relative; overflow: hidden; }
.kpi-grp-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ct-bg-2); }
.kpi-grp-bar > i { display: block; height: 100%; }
.kpi-grp-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.kpi-grp-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; background: var(--ct-gray); }
.kpi-grp-ic.exc { background: var(--ct-green); } .kpi-grp-ic.good { background: var(--ct-blue); } .kpi-grp-ic.basic { background: var(--ct-amber); } .kpi-grp-ic.poor { background: var(--ct-red); }
.kpi-grp-ic .material-symbols-outlined { font-size: 19px; }
.kpi-grp-id { flex: 1; min-width: 0; }
.kpi-grp-id b { font-size: 14px; color: var(--ct-blue-deep); } .kpi-grp-id b small { color: var(--ct-text-2); font-weight: 600; font-size: 11px; }
.kpi-grp-id span { display: block; font-size: 11.5px; color: var(--ct-text-2); margin-top: 2px; line-height: 1.4; }
.kpi-grp-score { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.kpi-grp-score b { font-size: 22px; font-weight: 800; } .kpi-grp-score b small { font-size: 11px; font-weight: 600; }

/* ── 1 chỉ số (metric) ── */
.kpi-m-list { display: flex; flex-direction: column; }
.kpi-m { border-top: 1px solid var(--ct-bg-2); padding: 9px 0; }
.kpi-m:first-child { border-top: 0; }
.kpi-m-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-m-toggle { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.kpi-m-name { display: block; font-size: 13px; font-weight: 600; color: var(--ct-text); }
.kpi-m-en { display: block; font-size: 10.5px; color: var(--ct-text-2); margin-top: 1px; }
.kpi-m-tier { font-size: 9.5px; font-weight: 800; border-radius: 99px; padding: 0 7px; vertical-align: middle; }
.kpi-m-tier.core { color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 10%, #fff); }
.kpi-m-tier.extended { color: var(--ct-text-2); background: var(--ct-bg-2); }
.kpi-m-lead { font-size: 9.5px; font-weight: 700; color: var(--ct-text-2); }
.kpi-m-val { font-size: 13px; font-weight: 800; white-space: nowrap; flex: 0 0 auto; }
.kpi-m-val.gap { color: var(--ct-gray); font-weight: 700; font-style: italic; }
.kpi-m-bar { height: 6px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; margin: 7px 0 5px; }
.kpi-m-bar > i { display: block; height: 100%; border-radius: 99px; }
.kpi-m-bar-gap { background: repeating-linear-gradient(90deg, var(--ct-bg-2) 0 6px, transparent 6px 12px); }
.kpi-m-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-m-tg { font-size: 11px; color: var(--ct-text-2); }
.kpi-m-detail { display: none; margin-top: 8px; padding: 9px 11px; background: var(--ct-bg); border-radius: 9px; border: 1px solid var(--ct-border); }
.kpi-m.open .kpi-m-detail { display: block; }
.kpi-m-detail p { margin: 0 0 6px; font-size: 11.5px; color: var(--ct-text-2); line-height: 1.5; }
.kpi-m-detail p:last-child { margin-bottom: 0; }
.kpi-m-formula b, .kpi-m-ref b { color: var(--ct-text); }
.kpi-m-cite { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ct-blue); }
.kpi-m-cite .material-symbols-outlined { font-size: 14px; }

@media (max-width: 720px) {
  .kpi-lead-row { grid-template-columns: 22px 1fr auto; row-gap: 6px; }
  .kpi-lead-track { grid-column: 1 / -1; order: 5; }
  .kpi-meth-grid { grid-template-columns: 1fr; }
  .kpi-lane-score { flex-direction: column; align-items: flex-end; gap: 8px; }
}

/* ══════════ TAB ĐIỀU HÀNH / CEO (Executive AI Dashboard) ══════════ */
/* ── HERO cao cấp: dải gradient navy→royal-blue, glow, lưới chấm, huy hiệu kính mờ ── */
.ceo-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 24px 28px; border-radius: 20px; color: #fff;
  background: linear-gradient(118deg, #0a1f4d 0%, #143a93 42%, #1B57E6 72%, #2E7BFF 100%);
  box-shadow: 0 18px 46px rgba(12, 36, 92, .30), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* lưới chấm tinh tế (texture công nghệ) */
.ceo-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 30%, transparent 85%); mask-image: linear-gradient(100deg, #000 30%, transparent 85%);
}
/* quầng sáng cyan + cam (brand) */
.ceo-hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ceo-hero-deco::before { content: ''; position: absolute; top: -120px; right: -40px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 192, 255, .50), transparent 62%); }
.ceo-hero-deco::after { content: ''; position: absolute; bottom: -200px; left: 24%; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 144, 29, .26), transparent 64%); }
.ceo-hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ceo-hero-badge { width: 58px; height: 58px; border-radius: 17px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .34); box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.ceo-hero-badge .material-symbols-outlined { font-size: 32px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.ceo-hero-txt { min-width: 0; }
.ceo-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.ceo-hero-spark { width: 7px; height: 7px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 10px 1px rgba(70, 211, 154, .9); }
.ceo-hero-title { margin: 5px 0 5px; font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -.3px; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
.ceo-hero-sub { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .85); max-width: 660px; }
.ceo-hero-sub b { color: #fff; font-weight: 700; }
.ceo-hero-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ceo-range { display: inline-flex; gap: 2px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(8px); }
.ceo-range button { font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .82); background: transparent; border: 0; border-radius: 99px; padding: 7px 16px; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s; }
.ceo-range button:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.ceo-range button.is-active { color: var(--ct-blue-deep); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.ceo-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #eafff4;
  padding: 7px 14px; border-radius: 99px; background: rgba(24, 169, 87, .24); border: 1px solid rgba(120, 230, 170, .45); }
.ceo-live i { width: 8px; height: 8px; border-radius: 50%; background: #46d39a; box-shadow: 0 0 0 0 rgba(70, 211, 154, .7); animation: ceoLivePulse 1.9s ease-out infinite; }
@keyframes ceoLivePulse { 0% { box-shadow: 0 0 0 0 rgba(70, 211, 154, .55); } 70% { box-shadow: 0 0 0 8px rgba(70, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(70, 211, 154, 0); } }
@media (prefers-reduced-motion: reduce) { .ceo-live i { animation: none; } }
@media (max-width: 720px) {
  .ceo-hero { padding: 18px 18px; gap: 14px; }
  .ceo-hero-title { font-size: 21px; }
  .ceo-hero-badge { width: 48px; height: 48px; }
  .ceo-hero-tools { width: 100%; }
}
/* ── HERO: 5 thẻ lớn ── */
.exec-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.exec-hcard { position: relative; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  min-height: 158px; background: linear-gradient(160deg, color-mix(in srgb, var(--exa, var(--ct-blue)) 5%, #fff), var(--ct-card) 60%);
  border: 1px solid var(--ct-border); border-radius: 16px; padding: 16px 17px 15px; overflow: hidden;
  box-shadow: var(--ct-shadow); transition: transform .14s, box-shadow .14s; }
.exec-hcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--exa, var(--ct-blue)); }
.exec-hcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 40, 90, .13); }
.exec-hcard:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--exa, var(--ct-blue)) 24%, transparent); }
.exec-ac-blue { --exa: var(--ct-blue); } .exec-ac-green { --exa: var(--ct-green); } .exec-ac-amber { --exa: var(--ct-amber); } .exec-ac-red { --exa: var(--ct-red); }
.exec-hic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--exa, var(--ct-blue)); box-shadow: 0 6px 14px color-mix(in srgb, var(--exa, var(--ct-blue)) 30%, transparent); flex: 0 0 auto; }
.exec-hic .material-symbols-outlined { font-size: 22px; }
.exec-hbig { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 32px; font-weight: 800; color: var(--ct-text); line-height: 1.05; margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; }
.exec-hbig small { font-size: 12px; font-weight: 600; color: var(--ct-text-2); }
.exec-hlabel { font-size: 13px; font-weight: 700; color: var(--ct-blue-deep); margin-top: 2px; }
.exec-est { font-size: 9.5px; font-weight: 700; color: var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 12%, #fff); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.exec-hsub { font-size: 11.5px; color: var(--ct-text-2); line-height: 1.45; margin-top: auto; padding-top: 4px; }
.exec-hsub b { color: var(--ct-text); font-weight: 700; }

/* ── Bản đồ chiến lược (scatter + callouts) ── */
.exec-scale-card { margin-bottom: 14px; }
.exec-scale-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.exec-quad-chart svg { width: 100%; height: auto; display: block; }
.exec-noeff { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ct-text-2); }
.exec-noeff .material-symbols-outlined { font-size: 15px; color: var(--ct-gray); }
.exec-callouts { display: flex; flex-direction: column; gap: 12px; }
.exec-callout { border: 1px solid var(--ct-border); border-radius: 12px; padding: 12px 14px; border-left-width: 4px; }
.exec-callout-scale { border-left-color: var(--ct-green); background: color-mix(in srgb, var(--ct-green) 4%, #fff); }
.exec-callout-risk { border-left-color: var(--ct-red); background: color-mix(in srgb, var(--ct-red) 4%, #fff); }
.exec-co-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--ct-blue-deep); margin-bottom: 8px; }
.exec-co-h .material-symbols-outlined { font-size: 17px; }
.exec-callout-scale .exec-co-h .material-symbols-outlined { color: var(--ct-green); }
.exec-callout-risk .exec-co-h .material-symbols-outlined { color: var(--ct-red); }
.exec-co-ag { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ct-text); margin-bottom: 4px; }
.exec-co-score { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--ct-green); }
.exec-callout p { margin: 0; font-size: 12px; color: var(--ct-text-2); line-height: 1.5; }
.exec-co-empty { font-style: italic; }
.exec-risklist { display: flex; flex-direction: column; gap: 6px; }
.exec-risk-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--ct-border); border-radius: 9px; padding: 7px 10px; }
.exec-risk-row:hover { border-color: var(--ct-red); }
.exec-rdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.exec-risk-row b { font-size: 13px; color: var(--ct-text); font-weight: 700; }
.exec-rscore { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ct-text); }
.exec-rband { font-size: 11px; font-weight: 700; }

/* ── adoption + roi grid ── */
.exec-grid { margin-bottom: 14px; }
.exec-deptbars { display: flex; flex-direction: column; gap: 9px; }
.exec-dept-row { display: grid; grid-template-columns: minmax(120px, 178px) 1fr auto; gap: 11px; align-items: center; }
.exec-dept-lbl { font-size: 12.5px; font-weight: 600; color: var(--ct-text); line-height: 1.3; overflow-wrap: anywhere; }
.exec-dept-track { height: 12px; border-radius: 99px; background: var(--ct-bg-2); overflow: hidden; }
.exec-dept-track > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ct-blue), var(--ct-cyan)); }
.exec-dept-val { font-size: 13px; font-weight: 800; color: var(--ct-text); text-align: right; }
.exec-dept-val small { display: block; font-size: 10px; font-weight: 600; color: var(--ct-text-2); }

/* ── ROI ── */
.exec-roi { display: flex; flex-direction: column; gap: 10px; }
.exec-roi-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.exec-roi-lbl { font-size: 12px; color: var(--ct-text-2); }
.exec-roi-track { height: 16px; border-radius: 6px; background: var(--ct-bg-2); overflow: hidden; }
.exec-roi-row b { font-size: 14px; font-weight: 800; color: var(--ct-text); white-space: nowrap; }
.exec-roi-val .exec-roi-track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ct-green), #46d39a); }
.exec-roi-cost .exec-roi-track > i { display: block; height: 100%; background: var(--ct-blue); }
.exec-roi-net { display: flex; gap: 10px; margin-top: 4px; }
.exec-roi-net > div { flex: 1; background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 10px; padding: 9px 12px; }
.exec-roi-net span { font-size: 11px; color: var(--ct-text-2); display: block; }
.exec-roi-net b { font-size: 17px; font-weight: 800; color: var(--ct-text); }
.exec-roi-ratio b { color: var(--ct-green); }
.exec-roi-caveat { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 11px; color: var(--ct-text-2); line-height: 1.45;
  background: color-mix(in srgb, var(--ct-amber) 7%, #fff); border-radius: 8px; padding: 8px 10px; }
.exec-roi-caveat .material-symbols-outlined { font-size: 15px; color: var(--ct-amber); flex: 0 0 auto; }

/* ── Roadmap ── */
.exec-rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: rm; }
.exec-rm { display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 11px; align-items: center;
  border: 1px solid var(--ct-border); border-left-width: 4px; border-radius: 11px; padding: 10px 13px; }
.exec-rm-high { border-left-color: var(--ct-red); }
.exec-rm-med { border-left-color: var(--ct-amber); }
.exec-rm-low { border-left-color: var(--ct-gray); }
.exec-rm-n { font-size: 16px; font-weight: 800; color: var(--ct-text-2); text-align: center; }
.exec-rm-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--ct-blue);
  background: color-mix(in srgb, var(--ct-blue) 9%, #fff); }
.exec-rm-high .exec-rm-ic { color: var(--ct-red); background: color-mix(in srgb, var(--ct-red) 9%, #fff); }
.exec-rm-med .exec-rm-ic { color: var(--ct-amber); background: color-mix(in srgb, var(--ct-amber) 11%, #fff); }
.exec-rm-ic .material-symbols-outlined { font-size: 19px; }
.exec-rm-body { min-width: 0; }
.exec-rm-body b { display: block; font-size: 13.5px; color: var(--ct-text); font-weight: 700; }
.exec-rm-body span { display: block; font-size: 11.5px; color: var(--ct-text-2); line-height: 1.4; margin-top: 1px; }
.exec-rm-prio { font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.exec-rm-prio-high { color: #b42318; background: color-mix(in srgb, var(--ct-red) 13%, #fff); }
.exec-rm-prio-med { color: #a16207; background: color-mix(in srgb, var(--ct-amber) 16%, #fff); }
.exec-rm-prio-low { color: var(--ct-text-2); background: var(--ct-bg-2); }

/* ── Giả định ── */
.exec-assume { margin-top: 14px; }
.exec-assume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.exec-assume-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--ct-border); border-radius: 11px; padding: 11px 13px; }
.exec-assume-item .material-symbols-outlined { font-size: 20px; color: var(--ct-blue); flex: 0 0 auto; }
.exec-assume-item b { font-size: 14px; color: var(--ct-text); display: block; }
.exec-assume-item span { font-size: 11.5px; color: var(--ct-text-2); line-height: 1.4; }
.exec-assume-note { display: flex; align-items: flex-start; gap: 6px; margin: 11px 0 0; font-size: 11.5px; color: var(--ct-text-2); line-height: 1.5; }
.exec-assume-note .material-symbols-outlined { font-size: 15px; color: var(--ct-blue); flex: 0 0 auto; }

/* gợi ý "bấm xem giải thích" trên thẻ hero */
.exec-hhint { display: inline-flex; align-items: center; gap: 3px; margin-top: 7px; font-size: 10px; font-weight: 600; color: var(--exa, var(--ct-blue)); opacity: .72; }
.exec-hhint .material-symbols-outlined { font-size: 13px; }
.exec-hcard:hover .exec-hhint { opacity: 1; }

/* ── POPUP GIẢI THÍCH CHỈ SỐ ── */
.exec-pop-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(14, 30, 64, .42); backdrop-filter: blur(2px); animation: execPopFade .14s ease; }
@keyframes execPopFade { from { opacity: 0; } to { opacity: 1; } }
.exec-pop { width: 100%; max-width: 520px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--ct-card); border-radius: 18px; box-shadow: 0 24px 70px rgba(10, 25, 60, .35); animation: execPopUp .16s ease; }
@keyframes execPopUp { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.exec-pop-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--exa, var(--ct-blue)) 12%, #fff), var(--ct-card)); border-bottom: 1px solid var(--ct-border); }
.exec-pop-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto;
  background: var(--exa, var(--ct-blue)); box-shadow: 0 6px 14px color-mix(in srgb, var(--exa, var(--ct-blue)) 30%, transparent); }
.exec-pop-ic .material-symbols-outlined { font-size: 24px; }
.exec-pop-ttl { min-width: 0; flex: 1; }
.exec-pop-ttl b { display: block; font-size: 16px; color: var(--ct-blue-deep); line-height: 1.25; }
.exec-pop-rb { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 2px 9px; }
.exec-pop-rb-real { color: #0d7a3f; background: color-mix(in srgb, var(--ct-green) 13%, #fff); }
.exec-pop-rb-est { color: #a16207; background: color-mix(in srgb, var(--ct-amber) 16%, #fff); }
.exec-pop-rb-mix { color: var(--ct-blue); background: color-mix(in srgb, var(--ct-blue) 11%, #fff); }
.exec-pop-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ct-text-2); background: color-mix(in srgb, var(--ct-text-2) 8%, #fff); }
.exec-pop-x:hover { background: color-mix(in srgb, var(--ct-text-2) 16%, #fff); color: var(--ct-text); }
.exec-pop-x .material-symbols-outlined { font-size: 19px; }
.exec-pop-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.exec-pop-live { background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 11px; padding: 10px 13px; }
.exec-pop-live-lbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--ct-text-2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.exec-pop-live b { font-size: 13.5px; color: var(--ct-text); font-weight: 700; line-height: 1.4; }
.exec-pop-sec { display: flex; gap: 10px; }
.exec-pop-sec > .material-symbols-outlined { font-size: 19px; color: var(--ct-blue); flex: 0 0 auto; margin-top: 1px; }
.exec-pop-sec b { display: block; font-size: 12.5px; color: var(--ct-blue-deep); margin-bottom: 2px; }
.exec-pop-sec p { margin: 0; font-size: 12.5px; color: var(--ct-text-2); line-height: 1.55; }
.exec-pop-rel { border-radius: 11px; padding: 10px 12px; }
.exec-pop-rel-real { background: color-mix(in srgb, var(--ct-green) 6%, #fff); }
.exec-pop-rel-real > .material-symbols-outlined { color: var(--ct-green); }
.exec-pop-rel-est { background: color-mix(in srgb, var(--ct-amber) 8%, #fff); }
.exec-pop-rel-est > .material-symbols-outlined { color: var(--ct-amber); }
.exec-pop-foot { display: flex; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--ct-border); background: var(--ct-bg); }
.exec-pop-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--ct-blue); border: 0; border-radius: 10px; padding: 9px 12px; }
.exec-pop-go:hover { background: var(--ct-blue-deep); }
.exec-pop-go .material-symbols-outlined { font-size: 17px; }
.exec-pop-close { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ct-text-2); background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 10px; padding: 9px 16px; }
.exec-pop-close:hover { border-color: var(--ct-blue); color: var(--ct-blue-deep); }

@media (max-width: 900px) {
  .exec-scale-grid { grid-template-columns: 1fr; }
  .exec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .exec-hbig { font-size: 25px; }
  .exec-roi-row { grid-template-columns: 90px 1fr auto; }
  .exec-rm { grid-template-columns: 22px 30px 1fr; }
  .exec-rm-prio { grid-column: 2 / -1; justify-self: start; margin-top: 2px; }
}