/* ============================================================================
   CaMell Report — THEME v3.8  (chuẩn giao diện DUY NHẤT)
   ----------------------------------------------------------------------------
   Nguồn số liệu: C:\Users\thang\Projects\cf-tools\tools\camell_v3\camell_wails
     · frontend/dist_backup_exe/style.css   → Cloudflare Tools Enterprise v3.8
     · _v37_original/style.css              → v3.7 (cùng bộ token, chỉ khác cỡ)
   v3.8 = v3.7 giữ nguyên bảng màu, siết lại cỡ chữ/đệm và **dàn tab đều nhau**
   (`grid repeat(N, 1fr)` thay cho flex canh giữa) → đúng yêu cầu "cân đối dàn đều".

   File này nạp CUỐI trên cả 3 shell nên nó ĐỊNH NGHĨA LẠI token gốc của
   style.css. Các sheet nạp trước (liquidglass/polish/okwin/...) dùng `var()`
   nên tự động đổi theo, không phải sửa 11 file.
   Spec chữ: docs/UI_SPEC_V38.md — sửa spec trước, code theo sau.
   ============================================================================ */

:root {
  /* ---- v3.8 gốc ---- */
  --v38-bg: #0d1117;
  --v38-bg2: rgba(22, 27, 34, 0.92);
  --v38-bg3: rgba(28, 33, 40, 0.8);
  --v38-bg4: rgba(35, 40, 48, 0.65);
  /* viền cũ 0.45 gần như tàng hình trên nền tối → nâng sáng cho thấy khung */
  --v38-border: rgba(96, 106, 118, 0.6);
  --v38-glass: rgba(255, 255, 255, 0.04);
  --v38-glass-hi: rgba(68, 76, 86, 0.25);
  --v38-text: #f0f6fc;
  /* nâng từ #8b949e: chữ phụ chiếm phần lớn mặt chữ trên app, mờ quá thì đọc mỏi */
  --v38-text2: #a9b4c0;
  --v38-green: #3fb950;
  --v38-orange: #f08c00;
  --v38-red: #ff4d4d;
  --v38-cyan: #58a6ff;
  --v38-gold: #ffd866;
  --v38-purple: #a78bfa;
  --v38-cf: #f6821f;
  --v38-cf-dim: rgba(246, 130, 31, 0.12);
  --v38-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* chiều cao khung (v3.8: header 44 · tab 36 · footer 28) */
  --header-h: 44px;
  --v38-tabbar-h: 36px;
  --v38-footer-h: 28px;

  /* ---- ĐỊNH NGHĨA LẠI token gốc của style.css → cả cascade đổi theo ---- */
  --bg-0: #0d1117;
  --bg-1: #090c12;
  --bg-glow: rgba(246, 130, 31, 0.04);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-2: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(68, 76, 86, 0.45);
  --glass-hi: rgba(68, 76, 86, 0.25);
  --glass-blur: 16px;
  --glass-sat: 160%;

  --text: #f0f6fc;
  --text-2: #a9b4c0;
  /* 0.62 quá tối: nhãn phụ/mô tả chìm hẳn vào nền. Nâng lên đặc, sáng hơn. */
  --text-3: #9aa4af;
  --on-accent: #0d1117;

  --accent: #58a6ff;
  --accent-2: #6ec5ff;
  --accent-soft: rgba(88, 166, 255, 0.14);
  --success: #3fb950;
  --success-soft: rgba(63, 185, 80, 0.14);
  --danger: #ff4d4d;
  --danger-soft: rgba(255, 77, 77, 0.14);
  --warn: #ffd866;
  --warn-soft: rgba(255, 216, 102, 0.14);
  --amber: #f08c00;
  --unknown: #8b949e;
  --unknown-soft: rgba(139, 148, 158, 0.16);

  /* bảng còn lại (điểm danh, tài nguyên…): hàng 52px của cards.css:27 làm trang
     dài gấp rưỡi mà không thêm thông tin — v6.3 dùng hàng gọn. */
  --row-h: 36px;

  /* v3.8 chỉ có 4 mức bo góc — KHÔNG có 999px ở bất cứ đâu */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 6px;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-deep: 0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 8px 26px rgba(0, 0, 0, 0.5);

  /* ---- THẺ KIỂU THẺ ĐĂNG NHẬP v6.3 (LoginView.xaml:162-192) --------------
     Thẻ đăng nhập v6.3 không dùng viền một màu — nó dùng BorderBrush gradient
     chéo `#30FFFFFF → #20FFFFFF → #10FFFFFF` (0,0 → 1,1): sáng ở góc trên-trái
     rồi tắt dần xuống dưới-phải, nhìn như có ánh sáng hắt vào mép. Nền
     `#A0101826` = trong 63%, không đặc. Bóng `BlurRadius 20 · ShadowDepth 0 ·
     Opacity .8` toả đều bốn phía chứ không đổ xuống.
     CSS không cho gradient vào `border-color`, nên vẽ bằng 2 lớp nền:
     lớp trong `padding-box` = mặt thẻ, lớp ngoài `border-box` = dải viền. */
  --v63-card-bg: rgba(22, 27, 34, 0.62);
  --v63-card-edge: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.19) 0%,
    rgba(255, 255, 255, 0.125) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  --v63-card-edge-hi: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  --v63-card-glow:
    0 0 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --v63-card-glow-hi:
    0 0 26px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  /* mặt ToolCard: giữ gradient chéo của `ToolCardStyle`, chỉ cho trong bớt */
  --v63-tool-face: linear-gradient(
    135deg,
    rgba(22, 27, 34, 0.66) 0%,
    rgba(16, 21, 29, 0.58) 50%,
    rgba(22, 27, 34, 0.66) 100%
  );
  --v63-tool-face-hi: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(224, 224, 240, 0.08) 100%
  );
}

/* ============================================================================
   1. NỀN + CHỮ
   ========================================================================== */

html,
body {
  background: var(--v38-bg);
  color: var(--v38-text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  display: none !important;
}

.h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--v38-cf);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--v38-text);
}
.h3 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v38-text);
}
.small {
  font-size: 11.5px;
}
.tiny {
  font-size: 11px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--v38-text2);
  text-transform: none;
}
.muted {
  color: var(--v38-text2);
}
.muted-2 {
  color: var(--text-3);
}
.mono,
code,
kbd,
pre {
  font-family: Consolas, "Cascadia Mono", monospace;
}

/* ============================================================================
   2. KHUNG APP — BỐ CỤC + HIỆU ỨNG v6.3, MÀU v3.8
   ----------------------------------------------------------------------------
   Số đo lấy từ MainWindow.xaml:273-306 (RowDefinitions 40 / * / 28 ·
   ColumnDefinitions sidebar 60 · header Grid.ColumnSpan="2" nên nằm VẮT NGANG
   trên cùng, sidebar ở DƯỚI header) và MainWindow.xaml.cs:543 (sidebar mở = 210,
   thu = 60). Vạch neon 1.5px của header/footer giữ nguyên cấu trúc gradient
   4 chặng của v6.3, chỉ thay 2 màu sang bảng v3.8 (cyan #58a6ff + cam #f6821f).
   `.main{display:contents}` để header/main/footer thành ô của lưới `.shell`
   → đổi bố cục mà KHÔNG sửa HTML/JS.
   ========================================================================== */

:root {
  --header-h: 40px;
  --v38-footer-h: 28px;
  --v63-side-w: 210px;
  --v63-side-min: 60px;

  /* vạch neon 1.5px — MainWindow.xaml:291-301 */
  --v63-rule: linear-gradient(
    90deg,
    rgba(88, 166, 255, 0.38) 0%,
    rgba(88, 166, 255, 0.63) 30%,
    rgba(246, 130, 31, 0.63) 70%,
    rgba(88, 166, 255, 0.38) 100%
  );

  /* bóng kính dùng chung */
  --v63-glass-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --v63-glass-shadow-hi:
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.shell {
  display: grid;
  grid-template-columns: var(--v63-side-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--v38-footer-h);
  min-height: 100dvh;
  background: var(--v38-bg);
}

.shell > .main {
  display: contents;
}

/* Rail dọc thay cho ngăn kéo — nhưng CHỈ trên desktop. Trước đây rule này không bọc
   @media nên nút hamburger + lớp mask bị khoá display:none ở MỌI bề ngang, kể cả
   dưới 900px là chỗ sidebar.css định cho hiện; drawer.js vẫn gắn click vào #btn-burger
   nhưng người dùng không có nút nào để bấm ⇒ điện thoại không mở được menu. */
@media (min-width: 900px) {
  .sidebar-mask,
  #sidebar-mask,
  #btn-burger {
    display: none !important;
  }
}

/* ---- 2.1 header: vắt ngang cả 2 cột, cao 40, vạch neon dưới ---- */

.app-header,
.ok-appbar {
  grid-row: 1;
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(13, 17, 23, 0.98);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* vạch neon 1.5px — dùng ::after để giữ được gradient ngang */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--v63-rule);
  pointer-events: none;
}

/* HEADER 3 VÙNG như v6.3 (MainWindow.xaml:308-420): TRÁI thương hiệu · GIỮA
   breadcrumb canh giữa thật · PHẢI người dùng. Trước đây thương hiệu bị đẩy ra
   giữa còn bên trái bỏ trống → nhìn lệch hẳn một bên.
   Làm bằng CSS thuần: `.ok-appbar__id` chuyển `display:contents` để 3 con của nó
   trở thành ô lưới trực tiếp — không phải sửa HTML của cả 3 shell. */
/* ⚠️ HAI KIỂU HTML: leader.html bọc nội dung trong `.app-header__inner`, còn
   index.html/admin.html để thẳng trong `<header>`. Bắt cả hai, không thì trang
   nhân viên vẫn nằm bố cục cũ (thương hiệu + tiêu đề dính nhau bên trái). */
.app-header:not(:has(> .app-header__inner)),
.app-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0 8px;
  height: 100%;
  /* `.app-header` là flex: nếu để khổ tự co theo nội dung thì cột `1fr` teo về
     max-content → breadcrumb không nằm giữa THẬT và vùng phải hụt vào trong. */
  flex: 1 1 auto;
  width: 100%;
  /* ⛔ `!important` là bắt buộc: polish.css:120 khoá `max-width: var(--content-max)
     !important` nên khổ header bị bó vào giữa, chừa hai đầu trống — thương hiệu
     không sát mép trái, người dùng không sát mép phải. v6.3 cho header tràn hết
     hai cột (ColumnSpan=2). */
  max-width: none !important;
  padding: 0 10px;
  margin: 0;
}

.ok-appbar__id {
  display: contents;
}
/* mọi con đều ghim hàng 1: lỡ có phần tử lạ (nav-slot…) lọt vào header thì nó
   chen ngang chứ KHÔNG đẩy cả cụm rớt xuống hàng hai. */
.app-header > *,
.app-header__inner > *,
.ok-appbar__id > * {
  grid-row: 1;
}
:is(.app-header, .app-header__inner) > #btn-burger {
  grid-column: 1;
}
:is(.app-header, .app-header__inner) .brandmark {
  grid-column: 2;
  justify-self: start;
}
:is(.app-header, .app-header__inner) .ok-appbar__page {
  grid-column: 3;
  justify-self: center;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.app-header, .app-header__inner) .who,
:is(.app-header, .app-header__inner) > #who-slot {
  grid-column: 4;
  justify-self: end;
}
:is(.app-header, .app-header__inner) > .spacer,
:is(.app-header, .app-header__inner) > #nav-slot:empty {
  display: none;
}

.brandmark {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--v38-cf);
  text-shadow:
    0 0 10px rgba(246, 130, 31, 0.65),
    0 0 24px rgba(246, 130, 31, 0.35);
  white-space: nowrap;
}

.app-header .brandmark {
  display: inline;
}
/* "/" chỉ có nghĩa hồi thương hiệu đứng sát tiêu đề. Giờ header chia 3 vùng như
   v6.3 (thương hiệu trái · breadcrumb giữa · người dùng phải) nên bỏ hẳn.
   ⛔ Phải tắt Ở ĐÂY, không phải bằng rule khác cùng độ mạnh đặt trước: rule này
   nằm sau nên nó thắng, để `inline` là dấu "/" thành một ô lưới thừa, đẩy
   breadcrumb + người dùng rớt xuống hàng hai. */
.app-header .ok-appbar__sep {
  display: none;
}

.ok-appbar__page {
  font-size: 13px; /* v6.3 breadcrumb 13px SemiBold */
  font-weight: 600;
  color: var(--v38-text2);
  white-space: nowrap;
}
/* 📍 đứng trước breadcrumb — đúng của v6.3 (MainWindow.xaml:365) */
:is(.app-header, .app-header__inner) .ok-appbar__page::before {
  content: "📍";
  margin-right: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.who,
#who-slot {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  color: var(--v38-cyan);
  white-space: nowrap;
}

.who .btn,
#who-slot .btn {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 6px;
}

/* ---- 2.2 SIDEBAR DỌC (v6.3) — kính mờ, viền phải mảnh ---- */

.sidebar,
#side-nav {
  grid-row: 2;
  grid-column: 1;
  position: sticky;
  top: var(--header-h);
  align-self: start;
  /* luôn cao bằng cả khung nhìn: v6.3 sidebar chạy suốt từ header xuống footer,
     không được hụt một khúc rồi lòi nền trang ra. */
  height: calc(100dvh - var(--header-h) - var(--v38-footer-h));
  max-height: calc(100dvh - var(--header-h) - var(--v38-footer-h));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: var(--v63-side-w);
  max-width: none;
  padding: 0;
  margin: 0;
  transform: none !important;
  overflow: hidden auto;
  background: rgba(16, 21, 29, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: inset -8px 0 22px -18px rgba(0, 0, 0, 0.9);
}

.sidebar.is-collapsed {
  width: var(--v63-side-min);
}

/* head 52px + logo 38×38 r10 viền 1.5px — MainWindow.xaml:512+ */
.sidebar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  padding: 0 8px;
  margin: 6px 0 4px;
  border: 0;
  flex-shrink: 0;
}
.sidebar__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(246, 130, 31, 0.63);
  background: rgba(246, 130, 31, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 0 12px rgba(246, 130, 31, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sidebar__logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sidebar__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--v38-text);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.sidebar__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 8px;
  margin: 0;
  overflow: hidden auto;
}

/* tiêu đề nhóm — 10px/600 ghost, KHÔNG in hoa (MainWindow.xaml section header) */
.sidebar-section {
  display: block;
  margin: 10px 6px 2px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--text-3);
}

/* item h36 · margin 6/1 · r8 · padding 0 6 · rail trái 3px khi active */
.sidebar-item {
  min-width: 0;
  height: 36px;
  margin: 1px 6px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 8px;
  color: var(--v38-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition:
    background 150ms var(--v38-ease),
    border-color 150ms var(--v38-ease),
    box-shadow 150ms var(--v38-ease);
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: none;
}
.sidebar-item:hover .icon-tile {
  background: rgba(255, 255, 255, 0.21);
}

.sidebar-item-active,
.sidebar-item.sidebar-item-active {
  background: rgba(246, 130, 31, 0.25);
  border-left-color: var(--v38-cf);
  color: #fff;
  font-weight: 400;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 10px rgba(246, 130, 31, 0.12);
}
.sidebar-item-active .icon-tile {
  background: rgba(246, 130, 31, 0.31);
  border-color: rgba(246, 130, 31, 0.4);
}

/* ô icon 38×38 r10 nền BorderSubtle — MainWindow.xaml navBd */
.sidebar-item .icon-tile {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 150ms var(--v38-ease);
}

.sidebar-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: inherit;
}

.sidebar-item__metric {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--v38-text2);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}
.sidebar-item-active .sidebar-item__metric {
  background: rgba(246, 130, 31, 0.3);
  color: #ffd0a0;
}
.sidebar-item__metric:empty {
  display: none;
}

.sidebar__foot {
  flex-shrink: 0;
  padding: 4px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* thu gọn còn 60px: chỉ còn ô icon */
.sidebar.is-collapsed .sidebar__title,
.sidebar.is-collapsed .sidebar-section,
.sidebar.is-collapsed .sidebar-item__label,
.sidebar.is-collapsed .sidebar-item__metric {
  display: none;
}
.sidebar.is-collapsed .sidebar__head {
  justify-content: center;
  padding: 0;
}
.sidebar.is-collapsed .sidebar-item {
  justify-content: center;
  padding: 0;
  margin: 1px 5px;
}

/* ---- 2.3 vùng nội dung ---- */

.app-main {
  grid-row: 2;
  grid-column: 2;
  min-height: 0;
  padding: 12px 0 16px;
  background: transparent;
}

.container,
.container--wide {
  width: 100%;
  max-width: 1280px;
  padding-inline: 16px;
  margin-inline: auto;
}

.view.stack,
.stack {
  gap: 8px;
}

/* ---- 2.4 footer 28px vắt ngang, vạch neon trên ---- */

.ok-footer,
#app-footer {
  grid-row: 3;
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  min-height: var(--v38-footer-h);
  height: var(--v38-footer-h);
  padding: 0 10px; /* cùng lề với header để hai đầu trang thẳng cột */
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(8, 11, 17, 0.94);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.45);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 10.5px;
  color: var(--v38-text2);
}
.ok-footer::before,
#app-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.5px;
  background: var(--v63-rule);
  pointer-events: none;
}
.ok-footer .tiny,
#app-footer .tiny {
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.01em;
}
#footer-version {
  color: var(--v38-cyan);
  text-align: right;
}

/* ============================================================================
   3. TIÊU ĐỀ TRANG + THANH SEGMENT
   Bố cục v6.3 (SectionHeader canh TRÁI, 16px Bold) — màu cam của v3.8.
   ========================================================================== */

/* polish.css:.view > .row:first-child biến đầu trang thành một hộp gradient có
   vạch sáng bên trái — chính là "box card trang nào cũng có". Selector đó mạnh
   hơn `.lead-head` nên phải hạ bằng selector cùng cấu trúc. */
.view > .lead-head.row:first-child {
  position: static;
  min-height: 0;
  padding: 0 0 6px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.view > .lead-head.row:first-child::before,
.view > .lead-head.row:first-child::after {
  display: none;
}

.lead-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 6px;
  margin: 0 0 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  box-shadow: none;
}
.lead-head > div:first-child {
  flex: 1;
  min-width: 0;
}
.lead-head .h1 {
  /* SectionHeader v6.3: canh TRÁI, 16px Bold (DarkTheme.xaml) — màu lấy của v3.8 */
  margin: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--v38-cf);
  letter-spacing: 0.2px;
}
.lead-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.off-tab {
  display: none !important;
}

.seg-bar {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid var(--v38-border);
  align-self: flex-start;
  margin: 0 0 8px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.seg-bar button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  min-height: 28px;
  background: transparent;
  color: var(--v38-text2);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.seg-bar button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c9d1d9;
}
.seg-bar button[aria-selected="true"] {
  background: rgba(246, 130, 31, 0.15);
  border-color: rgba(246, 130, 31, 0.35);
  color: var(--v38-text);
  font-weight: 600;
}

/* ============================================================================
   4. THẺ / KHỐI
   ========================================================================== */

.card,
.section,
.glass,
.glass--raised,
.glass--flat,
.brand-card,
.channel-group,
.evidence-zone {
  /* Số đo GlassCardStyle (DarkTheme.xaml:156-175: r10 · đệm 16 · margin-bottom 8),
     MẶT THẺ lấy của thẻ đăng nhập v6.3: nền trong + viền gradient phát sáng +
     bóng toả đều. Viền một màu phẳng lì nhìn "chết"; gradient chéo mới ra được
     cảm giác có ánh sáng hắt vào mép như LoginView. */
  background:
    linear-gradient(var(--v63-card-bg), var(--v63-card-bg)) padding-box,
    var(--v63-card-edge) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: var(--v63-card-glow);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition:
    background 0.22s var(--v38-ease),
    box-shadow 0.22s var(--v38-ease);
}

.card,
.section {
  padding: 16px;
  margin-bottom: 8px;
}

.card::before,
.section::before,
.glass::before,
.glass--raised::before {
  display: none !important;
}

/* hover = viền sáng thêm, KHÔNG nhấc thẻ. Đổi bằng cách thay dải gradient —
   `border-color` vô tác dụng vì viền đang là `transparent` để lộ lớp nền dưới. */
.card:hover,
.brand-card:hover {
  transform: none;
  background:
    linear-gradient(var(--v63-card-bg), var(--v63-card-bg)) padding-box,
    var(--v63-card-edge-hi) border-box;
  box-shadow: var(--v63-card-glow-hi);
}

/* dải mô tả dưới tiêu đề (tab-hint của v3.8) */
.hint,
.subtitle,
.card__hint {
  padding: 4px 14px;
  border-radius: var(--r-sm);
  background: rgba(22, 27, 34, 0.35);
  color: rgba(160, 170, 180, 0.85);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}

/* ============================================================================
   5. NÚT — v3.8 phân vai theo màu, gradient nhẹ, nhấc 1px khi hover
   ========================================================================== */

.btn {
  /* PrimaryButtonStyle v6.3: cao 38 · r10 · đệm 20 · 13px weight 400 */
  min-height: 38px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* viền + chữ nâng sáng (CAMELL: "nút bấm rõ vào"): `.12`/#d8e0e8 trên nền tối
     đọc được nhưng không "bật" ra khỏi nền. */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(40, 48, 58, 0.95);
  color: var(--v38-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s var(--v38-ease);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 70%);
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn:hover::after {
  opacity: 1;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  /* v6.3 ScaleTransform .97 khi nhấn */
  transform: scale(0.97);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled::after {
  display: none;
}

/* primary = "run" của v3.8 (xanh lá gradient) */
.btn--primary {
  background: linear-gradient(135deg, rgba(20, 85, 55, 0.92), rgba(25, 110, 68, 0.92));
  border-color: rgba(63, 185, 80, 0.4);
  color: #8cd8a0;
  text-shadow: none;
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(28, 100, 65, 0.95), rgba(32, 125, 78, 0.95));
  border-color: rgba(63, 185, 80, 0.55);
  box-shadow: 0 4px 12px rgba(63, 185, 80, 0.15);
  color: #a0e8b4;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--v38-text2);
}
.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--v38-text);
}

.btn--accent,
.btn--info {
  background: rgba(25, 55, 85, 0.95);
  border-color: rgba(88, 166, 255, 0.45);
  color: #6ec5ff;
}
.btn--accent:hover:not(:disabled),
.btn--info:hover:not(:disabled) {
  border-color: rgba(0, 209, 255, 0.35);
  box-shadow: 0 4px 10px rgba(0, 209, 255, 0.12);
}

.btn--warn {
  background: linear-gradient(135deg, rgba(100, 70, 20, 0.92), rgba(120, 85, 25, 0.92));
  border-color: rgba(255, 180, 50, 0.4);
  color: #e8c060;
}
.btn--warn:hover:not(:disabled) {
  border-color: rgba(255, 159, 28, 0.4);
  box-shadow: 0 4px 10px rgba(255, 159, 28, 0.12);
}

.btn--danger {
  background: rgba(50, 40, 40, 0.95);
  border-color: rgba(160, 160, 160, 0.5);
  color: #ccc;
}
.btn--danger:hover:not(:disabled) {
  border-color: rgba(255, 77, 77, 0.35);
  color: var(--v38-red);
  box-shadow: 0 4px 10px rgba(255, 77, 77, 0.1);
}

.btn--sm {
  /* CompactButtonStyle v6.3: cao 24 · r8 · 11px Light */
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 300;
  border-radius: 8px;
  line-height: 1.4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btn--icon {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 6px;
}

.btn--block {
  width: 100%;
}

/* ============================================================================
   6. Ô NHẬP
   ========================================================================== */

.input,
.textarea,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="email"],
select,
textarea,
.check-search {
  /* GlassTextBoxStyle v6.3: cao 40 · r10 · viền 1.5px · đệm ngang 14 */
  padding: 0 14px;
  min-height: 40px;
  background: var(--v38-bg3);
  border: 1.5px solid var(--v38-border);
  border-radius: 10px;
  color: var(--v38-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.2s,
    background 0.2s;
}

textarea,
.textarea {
  font-family: Consolas, "Cascadia Mono", monospace;
  line-height: 1.5;
}

.input:hover,
select:hover,
textarea:hover {
  border-color: var(--v38-glass-hi);
}

.input:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus,
.check-search:focus {
  outline: none;
  /* v6.3: viền 2px màu nhấn, KHÔNG có vòng sáng */
  border-width: 2px;
  border-color: var(--v38-cyan);
  background: var(--v38-bg4);
  box-shadow: none;
}

::placeholder {
  color: rgba(139, 148, 158, 0.7);
  font-style: normal;
}

.label {
  font-size: 11px;
  font-weight: 500;
  color: var(--v38-text2);
}

/* ============================================================================
   7. BẢNG
   ========================================================================== */

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

table.matrix tbody td {
  padding: 4px 10px;
  line-height: 1.35;
}

thead th,
table th {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--v38-border);
}

tbody td,
table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--v38-text);
}

/* leader.css:64 in hoa đầu cột — v3.8 không in hoa ở bất cứ đâu */
table.matrix thead th,
.card table th,
.matrix th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 600;
  color: #c9d1d9;
  padding: 6px 10px;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   8. NHÃN / CHIP / ĐẾM
   ========================================================================== */

.badge,
.pill,
.count,
.count-badge,
.chip {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--v38-text2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

.badge--own {
  background: rgba(63, 185, 80, 0.12);
  color: var(--v38-green);
  border-color: rgba(63, 185, 80, 0.3);
}
.badge--infringer {
  background: rgba(255, 77, 77, 0.12);
  color: var(--v38-red);
  border-color: rgba(255, 77, 77, 0.3);
}
.badge--reported {
  background: rgba(88, 166, 255, 0.12);
  color: var(--v38-cyan);
  border-color: rgba(88, 166, 255, 0.3);
}
.badge--unknown,
.badge--muted {
  background: rgba(139, 148, 158, 0.12);
  color: var(--v38-text2);
  border-color: rgba(139, 148, 158, 0.28);
}

/* ============================================================================
   9. DẢI SỐ LIỆU = THANH TRẠNG THÁI GỘP (v6.3 HomeView.xaml:113-213)
   ----------------------------------------------------------------------------
   v6.3 KHÔNG bày số liệu thành một dãy ô to. Nó gộp tất cả vào MỘT thanh ngang
   duy nhất: nền OverlayThin `#12FFFFFF`, r6, đệm 12/4, các mục xếp ngang canh
   giữa, ngăn nhau bằng vạch `Width=1 Height=14` màu BorderSubtle, mỗi mục =
   giá trị 12px SemiBold màu accent + nhãn 9px màu TextDim.
   Đó là lý do dashboard v6.3 gọn — chép đúng vậy, đừng quay lại dãy ô to.
   ========================================================================== */

#kpi-grid,
.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* chia đều hết bề ngang: canh giữa làm các mục dồn cục vào giữa,
     chừa hai đầu trống hoác — nhìn mất cân. */
  justify-content: space-between;
  gap: 0 2px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--v38-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#kpi-grid .kpi,
.kpi-grid .kpi {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 5px;
  /* `1 1 0` ép mọi mục bằng nhau → dòng phụ dài bị cắt cụt. `1 1 auto` cho
     mỗi mục lấy đủ bề ngang chữ rồi mới chia phần dư — vừa trải hết thanh,
     vừa không mất chữ. */
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  padding: 2px 12px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: default;
}
/* vạch ngăn 1px cao 14 — Border Width=1 Height=14 Margin=12,0 */
#kpi-grid .kpi + .kpi::before,
.kpi-grid .kpi + .kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 26px;
  margin-top: -13px;
  background: var(--v38-border);
  border-radius: 0;
  inset-inline-end: auto;
}
#kpi-grid .kpi:first-child::before,
.kpi-grid .kpi:first-child::before {
  display: none;
}
#kpi-grid .kpi::after,
.kpi-grid .kpi::after {
  display: none;
}
#kpi-grid .kpi:hover,
.kpi-grid .kpi:hover {
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
}

#kpi-grid .kpi .kpi__val,
.kpi-grid .kpi .kpi__val {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
#kpi-grid .kpi .kpi__label,
.kpi-grid .kpi .kpi__label {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--v38-text2);
  white-space: nowrap;
}
/* dòng phụ nằm ở tầng 2, trải hết bề ngang mục — giữ ĐỦ nội dung mà vẫn gọn */
#kpi-grid .kpi .kpi__sub,
.kpi-grid .kpi .kpi__sub {
  display: block;
  grid-column: 1 / -1;
  margin-top: 1px;
  /* 9.5px là số liệu nghiệp vụ ("12% đã report · 3 qua hạ tầng") in bằng cỡ chữ chú
     thích chân trang — chính file này ở mục 19.4 đã chốt sàn 13px cho chữ phụ, dòng
     này lọt lưới vì không mang class .tiny/.small. */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-3);
  white-space: nowrap;
}

/* lưới brand vẫn là thẻ bình thường, không dính vào thanh gộp */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1180px) {
  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .brand-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 9.1 Ô số liệu rời (nơi khác vẫn dùng) ---- */

.stat,
.kpi-card {
  padding: 12px;
  background: var(--v38-bg3);
  border: 1px solid var(--v38-border);
  border-radius: 10px;
  box-shadow: var(--v63-glass-shadow);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.stat__val,
.kpi-card__val {
  /* StatValueText v6.3: 25px Light */
  font-size: 25px;
  font-weight: 300;
  color: var(--v38-text);
  letter-spacing: 0;
  line-height: 1.2;
}
.stat__label,
.kpi-card__label {
  /* StatLabelText v6.3: 13px */
  font-size: 13px;
  font-weight: 400;
  color: rgba(230, 237, 243, 0.8);
}

/* ============================================================================
   9.2 BẢNG NHÂN VIÊN → LƯỚI THẺ (ToolCardStyle, DarkTheme.xaml:797-880)
   ----------------------------------------------------------------------------
   v6.3 bày việc bằng `UniformGrid Columns=5` các ToolCard, không phải bảng dài.
   Mọi `<td>` của #matrix-table đã có `data-label` sẵn nên đổi được bằng CSS
   thuần: `tr` thành thẻ flex-wrap, `td` thành chip `nhãn: giá trị`.
   HTML/JS giữ nguyên → `tr.onclick` (mở drill-in), tabIndex, aria còn nguyên.
   ========================================================================== */

#matrix-table {
  display: block;
  width: 100%;
  border-collapse: separate;
}
#matrix-table > thead {
  display: none;
}
#matrix-table > tbody#matrix-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
  width: 100%;
}

#matrix-body > tr {
  /* LƯỚI 3 cột cố định: chip không so le nữa, cột số thẳng hàng dọc.
     flex-wrap cũ cho chip rộng theo chữ → mỗi hàng một kiểu, nhìn lệch. */
  display: grid;
  /* 2 cột: 3 cột thì chip chỉ ~78px, nhãn dài bị cắt thành "Kênh rep…".
     2 cột cho chip ~120px — đủ chỗ cho nhãn dài nhất mà vẫn thẳng cột. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: flex-start;
  gap: 4px 6px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  /* gradient chéo #68141828 → #58101420 → #68141828 của ToolCardStyle, đổi sang
     tông nền v3.8 và cho TRONG bớt; viền = dải gradient phát sáng của thẻ đăng
     nhập v6.3, vẽ bằng lớp nền `border-box` (xem token ở §0). */
  background:
    var(--v63-tool-face) padding-box,
    var(--v63-card-edge) border-box;
  box-shadow:
    0 0 3px rgba(34, 211, 238, 0.12),
    var(--v63-card-glow);
  cursor: pointer;
  transition:
    transform 0.18s var(--v38-ease),
    background 0.22s var(--v38-ease),
    box-shadow 0.22s var(--v38-ease);
}
#matrix-body > tr:hover {
  /* ToolCard hover: mặt sáng lên, viền gradient sáng thêm, phóng 1.03 */
  transform: scale(1.03);
  background:
    var(--v63-tool-face-hi) padding-box,
    var(--v63-card-edge-hi) border-box;
  box-shadow: var(--v63-card-glow-hi);
}
#matrix-body > tr:focus-visible {
  outline: 2px solid var(--v38-cyan);
  outline-offset: 2px;
}
/* trạng thái hàng: đổi thành viền trái, không tô nền cả thẻ */
/* inset shadow thay border-left: không phá bo góc, không lệch bề rộng thẻ */
#matrix-body > tr.is-missing,
#matrix-body > tr.is-late {
  box-shadow:
    inset 3px 0 0 rgba(255, 77, 77, 0.65),
    var(--v63-card-glow);
}
#matrix-body > tr.is-idle {
  box-shadow:
    inset 3px 0 0 rgba(255, 216, 102, 0.6),
    var(--v63-card-glow);
}

/* --- ô đầu: khối tên, chiếm trọn bề ngang thẻ --- */
#matrix-body > tr > td {
  /* cards.css:151 ép `height: var(--row-h)` cho MỌI td (để hàng bảng đều nhau).
     Ở dạng thẻ thì nó biến mỗi chip thành khối cao ~36px rỗng ruột. */
  height: auto;
  border: 0;
  background: none;
  white-space: nowrap;
  vertical-align: baseline;
}
#matrix-body > tr > td.td-left {
  grid-column: 1 / -1;
  padding: 0 0 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#matrix-body .nv-cell {
  gap: 8px;
}
/* ô icon 30×30 r6 nền accent — ToolCard */
#matrix-body .nv-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  min-width: 30px;
  border-radius: 6px;
  background: rgba(88, 166, 255, 0.14);
  border: 1px solid rgba(88, 166, 255, 0.22);
  font-size: 12px;
  font-weight: 600;
}
#matrix-body .nv-name {
  font-size: 14px;
  font-weight: 600;
}
#matrix-body .nv-code {
  font-size: 11px;
}

/* --- các ô còn lại: chip "nhãn giá trị", tự xuống dòng trong thẻ --- */
#matrix-body > tr > td[data-label] {
  /* nhãn dạt trái, số dạt phải → đọc dọc theo cột số rất nhanh */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}
#matrix-body > tr > td[data-label]::before {
  content: attr(data-label);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-3);
  text-align: left;
}
/* số trong chip: cùng cỡ, cùng bề rộng chữ số → cột số thẳng tăm tắp */
#matrix-body > tr > td[data-label] .num-strong,
#matrix-body > tr > td[data-label] .num-zero,
#matrix-body > tr > td[data-label] .cell-alert {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* hai ô trạng thái / giờ nộp cho ăn trọn một dòng riêng, bỏ nhãn thừa */
#matrix-body > tr > td[data-label="Trạng thái"],
#matrix-body > tr > td[data-label="Giờ báo cáo"] {
  background: none;
  padding: 0 2px;
}
#matrix-body > tr > td[data-label="Trạng thái"]::before,
#matrix-body > tr > td[data-label="Giờ báo cáo"]::before {
  display: none;
}
/* dòng 2: trạng thái chiếm 2 cột, giờ nộp cột cuối canh phải */
#matrix-body > tr > td[data-label="Trạng thái"] {
  grid-column: 1;
  justify-content: flex-start;
  background: none;
  padding: 0 2px;
}
#matrix-body > tr > td[data-label="Giờ báo cáo"] {
  grid-column: 2;
  justify-content: flex-end;
  background: none;
  padding: 0 2px;
  color: var(--v38-text2);
}
/* dòng 3: tiến độ brand, trải hết bề ngang */
#matrix-body > tr > td[data-label="Brand đã rà"] {
  grid-column: 1 / -1;
  margin-top: 2px;
}
/* 6 chỉ số giữa lát kín 3 hàng × 2 cột; "Chưa report" là chỉ số cần xử lý nên
   cho trải hết dòng cuối — vừa hết chỗ, vừa không còn ô lẻ chỏng chơ. */
#matrix-body > tr > td[data-label="Chưa report"] {
  grid-column: 1 / -1;
}

/* hàng rỗng / báo lỗi trải hết lưới */
#matrix-body > tr:only-child > td[colspan] {
  grid-column: 1 / -1;
}
#matrix-body > tr:has(> td[colspan]) {
  grid-column: 1 / -1;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: default;
}
#matrix-body > tr:has(> td[colspan]):hover {
  transform: none;
  background: none;
  box-shadow: none;
}

/* bảng đã thành lưới thẻ → bỏ vùng cuộn ngang thừa của .matrix-wrap */
.matrix-wrap:has(#matrix-table) {
  overflow: visible;
}

/* ============================================================================
   9.3 BẢNG KPI → LƯỚI THẺ (cùng khuôn ToolCard với 9.2)
   ----------------------------------------------------------------------------
   `#kpi-body` là `.stack` — mỗi nhân viên một thẻ TRẢI HẾT bề ngang, 15 người
   thành 15 khối cao ~155px = trang 2657px, nửa phải bỏ trống. v6.3 bày việc
   theo `UniformGrid` nhiều cột, nên xếp 2 cột: cao còn ~một nửa mà chữ vẫn đủ.
   ========================================================================== */

#kpi-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* cards.css:279 `.stack > * + *{margin-top}` là luật xếp DỌC — để nguyên thì
   cột phải tụt xuống một nấc so với cột trái. */
#kpi-body.stack > * + * {
  margin-top: 0;
}
#kpi-body > .kpi-staff {
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    var(--v63-tool-face) padding-box,
    var(--v63-card-edge) border-box;
  box-shadow:
    0 0 3px rgba(34, 211, 238, 0.12),
    var(--v63-card-glow);
  transition:
    transform 0.18s var(--v38-ease),
    background 0.22s var(--v38-ease),
    box-shadow 0.22s var(--v38-ease);
}
#kpi-body > .kpi-staff:hover {
  transform: scale(1.02);
  background:
    var(--v63-tool-face-hi) padding-box,
    var(--v63-card-edge-hi) border-box;
  box-shadow: var(--v63-card-glow-hi);
}
/* ô icon 30×30 r6 — cùng một khuôn với thẻ nhân viên ở 9.2, không để chỗ tròn
   chỗ vuông. */
#kpi-body .kpi-staff .avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--v38-text);
  background: rgba(88, 166, 255, 0.14);
  border: 1px solid rgba(88, 166, 255, 0.22);
}
#kpi-body .kpi-staff__name {
  font-size: 14px;
  font-weight: 600;
}
#kpi-body .kpi-staff__pct {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
}
#kpi-body .kpi-bar {
  height: 6px;
}
/* chip thương hiệu: viên thuốc r20 12px quá to cho thẻ nửa bề ngang → đưa về
   micro-chip r4 của v6.3, 11 chip vừa đúng hai hàng. */
#kpi-body .kpi-brands {
  gap: 4px;
}
#kpi-body .kpi-brand {
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  #kpi-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   9.4 THỨ HẠNG · SERP (brand · domain · hạng · hậu đài) — TAB CHÍNH
   ----------------------------------------------------------------------------
   Đây là tab quan trọng nhất, phải theo đúng khuôn v6.3 như §4.1/§4.2:
   (a) dải 5 ô to `.ok-grid--sm > .ok-metric` → thanh trạng thái gộp 1 dòng;
   (b) `#cb-list` đang là `.stack` — 8 kết quả xếp dọc trải hết bề ngang, nửa
       phải bỏ trống, trang 1898px → lưới 2 cột, thẻ ToolCard.
   Chỉ đụng trong `[data-panel="checkbrand"]` / `#cb-list` để không lây sang
   các dải `.ok-metric` của admin.html.
   ========================================================================== */

[data-panel="checkbrand"] .ok-grid--sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* chia đều hết bề ngang: canh giữa làm các mục dồn cục vào giữa,
     chừa hai đầu trống hoác — nhìn mất cân. */
  justify-content: space-between;
  gap: 0 2px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--v38-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-panel="checkbrand"] .ok-metric {
  position: relative;
  flex: 1 1 auto;
  justify-content: center;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  padding: 2px 14px;
  background: none;
  border: 0;
  border-radius: 0;
}
[data-panel="checkbrand"] .ok-metric + .ok-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  margin-top: -10px;
  background: var(--v38-border);
}
[data-panel="checkbrand"] .ok-metric__value {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
[data-panel="checkbrand"] .ok-metric__label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---- 11 thương hiệu = THANH TAB NGANG (khuôn `#tabs` của v3.8) ----
   v3.8: lưới chia đều `repeat(7,1fr)`, gap 3, đệm 5/6, nền `rgba(13,17,23,.92)`,
   viền dưới 1px; tab r7, cao 26, 10,5px, active = cam .15 + viền cam .35 +
   glow + text-shadow. Ở đây dùng flex `flex:1 1 0` thay grid cố định vì số
   brand đổi được — vẫn chia đều hết bề ngang, không dồn cục vào giữa. */

#cb-brands {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.92);
  border: 1px solid var(--v38-border);
}
.cb-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  padding: 5px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--v38-text2);
  font: 500 12.5px/16px inherit;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.cb-tab:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
  color: #c9d1d9;
}
.cb-tab__name {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* số địch đang đứng trên keyword — đỏ khi >0, chìm khi 0 */
.cb-tab__count {
  flex: 0 0 auto;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ff8f88;
  background: rgba(255, 69, 58, 0.16);
}
.cb-tab__count--zero {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.07);
}
.cb-tab.is-active {
  background: rgba(240, 140, 0, 0.15);
  border-color: rgba(240, 140, 0, 0.45);
  color: var(--v38-text);
  font-weight: 600;
  box-shadow:
    0 1px 6px rgba(240, 140, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 6px rgba(240, 140, 0, 0.3);
}

/* ============================================================================
   9.4b BẢNG XẾP HẠNG = Y HỆT GOOGLE
   ----------------------------------------------------------------------------
   CAMELL chốt: trang này phải giống HỆT Google (kết quả lấy từ IP dân cư), chỉ
   thêm 3 thứ Google không có: nút đăng ký/đăng nhập + URL hậu đài, và nhãn
   phân biệt ĐỊCH / NHÀ MÌNH. Nên KHÔNG bọc thẻ, KHÔNG chia cột —
   Google là một cột dọc hẹp. (Đã thử lưới 2 cột: gọn hơn nhưng mất chất Google.)
   Số đo lấy đúng của Google: cột 652px, tiêu đề 20px, mô tả 14px/1.58.
   ========================================================================== */

/* Google có HAI cột: kết quả bên trái + knowledge panel bên phải. Bỏ cột phải đi
   thì nửa bên phải trống hoác — vừa không giống Google, vừa mất cân.
   BỐ CỤC THẬT của .cb-serp nằm ở mục 14.2 (1fr + panel theo vw, có !important nên
   nó thắng tuyệt đối). Số đo 692/372px từng viết ở đây là CODE CHẾT, đã xoá —
   để lại thì người sửa sau chỉnh đúng chỗ này mà màn hình không nhúc nhích. */
@media (max-width: 1180px) {
  /* cùng mốc với mục 14.2: trên 1180 lưới còn 2 cột, dưới thì gộp 1 cột. Trước đây
     cột phải bị ẩn từ 1280 trong khi lưới tới 1180 mới gộp ⇒ dải 1180–1280 chừa
     một cột rỗng toác. */
  .cb-side {
    display: none;
  }
}

#cb-list {
  display: block;
  /* CAMELL: "KÉO FULL NGANG" — cột kết quả ăn hết bề ngang cột trái của lưới,
     không tự bó lại 692px rồi chừa khoảng trắng giữa danh sách và panel phải. */
  max-width: none;
}
#cb-list.stack > * + * {
  margin-top: 0;
}
#cb-list > .serp-row {
  gap: 2px 12px;
  padding: 0 0 0 12px;
  margin-bottom: 28px; /* .g của Google */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#cb-list > .serp-row:last-child {
  margin-bottom: 4px;
}
#cb-list > .serp-row:hover {
  transform: none;
  background: none;
  box-shadow: none;
}
/* phân biệt địch / nhà mình — thứ DUY NHẤT thêm vào bố cục Google */
#cb-list > .serp-row[data-label="foreign"] {
  box-shadow: inset 2px 0 0 rgba(255, 69, 58, 0.55);
}
#cb-list > .serp-row[data-label="own"] {
  box-shadow: inset 2px 0 0 rgba(48, 209, 88, 0.5);
}

/* cỡ chữ Google */
#cb-list .serp-row__title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
#cb-list .serp-row__crumb {
  font-size: 12px;
  color: #bdc1c6;
}
#cb-list .serp-row__desc {
  font-size: 14px;
  line-height: 1.58;
  color: #bdc1c6;
  -webkit-line-clamp: 2;
}
#cb-list .serp-row__favicon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px;
}
#cb-list .serp-row__rank {
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
}
/* nút đăng ký / đăng nhập → hậu đài: giữ viên thuốc màu, chỉ gọn lại */
#cb-list .serp-row__cta {
  margin-top: 6px;
  gap: 6px;
}
#cb-list .hd-cta {
  font-size: 11.5px;
}

/* ---- rãnh phải = knowledge panel của Google -------------------------------
   CỐ Ý không lặp lại 5 con số của thanh trạng thái phía trên; chỉ bày thứ chưa
   có chỗ nào trên trang: mình đứng thứ mấy, đứa nào chen trên, và toàn bộ hậu
   đài đang lộ. Dính đỉnh (sticky) để cuộn danh sách vẫn thấy. */
.cb-side {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    var(--v63-tool-face) padding-box,
    var(--v63-card-edge) border-box;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 0 3px rgba(34, 211, 238, 0.12),
    var(--v63-card-glow);
}
.cb-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cb-side__logo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--v38-border);
}
.cb-side__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v38-text);
}
.cb-side__sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}
/* hai con số "mình thứ mấy / bị chen mấy đứa" — cái leader hỏi đầu tiên */
.cb-side__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cb-side__fact {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--v38-border);
}
.cb-side__fact b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cb-side__fact span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-3);
}
.cb-side__fact--good b {
  color: #3fb950;
}
.cb-side__fact--bad b {
  color: #ff6b63;
}
.cb-side__title {
  padding-top: 10px;
  border-top: 1px solid var(--v38-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cb-side__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;
}
.cb-side__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11.5px;
  color: var(--v38-text2);
  text-decoration: none;
}
.cb-side__item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--v38-text);
}
.cb-side__rank {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #ff8f88;
  background: rgba(255, 69, 58, 0.16);
}
.cb-side__dom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-side__tag {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  color: #7ee08b;
  background: rgba(48, 209, 88, 0.14);
}
.cb-side__tag--foreign {
  color: #ff8f88;
  background: rgba(255, 69, 58, 0.16);
}
.cb-side__more {
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--text-3);
}

/* ============================================================================
   9.5 THẺ THƯƠNG HIỆU — cho chip thẳng cột
   ----------------------------------------------------------------------------
   `.brandsum__stats` là flex-wrap: 4 viên "0 nghi giả / 0 nhà mình / 0 đã
   report / 0 chưa report" rộng theo độ dài chữ nên cột phải mỗi thẻ một chỗ.
   Cùng bệnh với thẻ nhân viên ở §4.2 → cùng thuốc: lưới 2 cột.
   ========================================================================== */

.brandsum__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 6px;
}
.brandsum__stats > .pill,
.brandsum__stats > .badge,
.brandsum__stats > .count-badge {
  width: 100%;
  justify-content: flex-start;
}

/* ============================================================================
   10. BANNER / ĐỒNG HỒ HẠN NỘP
   ========================================================================== */

.banner,
.countdown,
#deadline-box {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--v38-border);
  background: var(--v38-bg3);
  color: var(--v38-text2);
  font-size: 11.5px;
  box-shadow: none;
}
.banner--warn {
  border-color: rgba(255, 216, 102, 0.3);
  background: rgba(255, 216, 102, 0.08);
  color: var(--v38-gold);
}
.banner--danger,
.countdown--hot {
  border-color: rgba(255, 77, 77, 0.3);
  background: rgba(255, 77, 77, 0.08);
  color: var(--v38-red);
}
.banner--info {
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(88, 166, 255, 0.08);
  color: var(--v38-cyan);
}

/* ============================================================================
   11. CHUYỂN ĐỘNG — nhịp v6.3 (App.xaml): vào panel trượt lên + mờ dần,
   nhấn nút co 0.97, hover 150ms. Không có gì khác.
   ========================================================================== */

[data-panel] {
  animation: v63PanelIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes v63PanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Nav đổi mục: rail cam + nền trượt theo cùng nhịp */
.sidebar-item,
.sidebar-item .icon-tile {
  transition:
    background 0.15s var(--v38-ease),
    border-color 0.15s var(--v38-ease),
    color 0.15s var(--v38-ease),
    box-shadow 0.15s var(--v38-ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   12. MÀN HẸP — sidebar tự thu về cột icon 60px (đúng cách v6.3 thu gọn)
   ========================================================================== */

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: var(--v63-side-min) minmax(0, 1fr);
  }
  .sidebar,
  #side-nav {
    width: var(--v63-side-min);
  }
  .sidebar__nav {
    padding-inline: 0;
  }
  .sidebar-item {
    justify-content: center;
    margin-inline: 4px;
    padding: 0;
  }
  /* đúng bộ class mà bản thu gọn dùng — sidebar.css/.is-collapsed:
     thiếu .sidebar__title hay .sidebar-item__metric là chữ lòi ra ngoài rail 60px */
  .sidebar-item__label,
  .sidebar-item__metric,
  .sidebar-section,
  .sidebar__title,
  .sidebar__brand {
    display: none !important;
  }
  .sidebar__head {
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 860px) {
  .ok-appbar__id {
    position: static;
    transform: none;
  }
  .ok-appbar__sep,
  .ok-appbar__page {
    display: none;
  }
  .lead-head {
    flex-wrap: wrap;
  }
  .container,
  .container--wide {
    padding-inline: 10px;
  }
}

/* ============================================================================
   13. ĐĂNG NHẬP — v3.8 `.auth-screen` / `.auth-box` (style.css:128-300)
   Nền phẳng #0d1117, hộp kính canh giữa. Bỏ ảnh nền + quầng sáng của bản cũ:
   v3.8 không có lớp trang trí nào, và chính lớp đó làm chữ mờ, khó đọc.
   ========================================================================== */

.cm-login {
  background: var(--v38-bg);
  padding-top: 32px;
}
.cm-login__bg,
.cm-login__overlay,
.cm-login__glow {
  display: none !important;
}

/* thanh tiêu đề giả — v3.8 #auth-titlebar */
.cm-login__titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
  z-index: 2000;
  box-shadow: none;
}
.cm-login__titlebar-logo {
  width: 16px;
  height: 16px;
}
.cm-login__titlebar-text {
  color: rgba(139, 148, 158, 0.8);
  font-size: 12px;
  font-weight: 500;
}

/* hộp đăng nhập — v3.8 .auth-box */
.cm-card {
  max-width: 400px;
  width: 88%;
  padding: 28px 36px;
  text-align: center;
  background: var(--v38-bg2);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--v38-border);
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cm-card__brand,
#cm-login-brand,
#leader-login-brand {
  color: var(--v38-cf);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  text-shadow: none;
}
.cm-card__sub,
.cm-card__hint {
  color: var(--v38-text2);
  font-size: 12px;
}
.cm-card__divider {
  height: 1px;
  background: var(--v38-border);
  margin: 14px 0;
}
.cm-card__2fa {
  color: var(--v38-text2);
  font-size: 11.5px;
}

.cm-input {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 10px;
  background: var(--v38-bg3);
  border: 1px solid var(--v38-border);
  border-radius: var(--r-sm);
  color: var(--v38-green);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  outline: none;
  transition: all 0.2s var(--v38-ease);
}
.cm-input:focus {
  border-color: var(--v38-green);
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.15);
}

.cm-btn-primary {
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, rgba(10, 74, 42, 0.8), rgba(10, 106, 58, 0.8));
  border: 1px solid rgba(63, 185, 80, 0.3);
  border-radius: var(--r-sm);
  color: var(--v38-green);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s var(--v38-ease);
}
.cm-btn-primary:hover {
  transform: translateY(-1px);
  border-color: rgba(63, 185, 80, 0.5);
  box-shadow:
    0 6px 20px rgba(63, 185, 80, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* nút Telegram — v3.8 .btn-tg */
.cm-card .btn--primary,
.cm-tg-btn {
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.8), rgba(0, 102, 170, 0.8));
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 13px;
  padding: 9px 18px;
}
.cm-card .btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 150, 220, 0.85), rgba(0, 115, 185, 0.85));
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.3);
}

/* đăng nhập qua bot (deep-link) — cùng ngôn ngữ nút Telegram, viền phát sáng v6.3 */
/* Nút đăng nhập chính. KHÔNG dùng stack mono của v6.3 ở đây — mono làm khoảng cách
   chữ tiếng Việt giãn rộng, nhìn như lỗi font; mono chỉ để cho số liệu/nhãn kỹ thuật. */
.cm-link-btn {
  width: 100%;
  margin-top: 2px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(rgba(0, 136, 204, 0.34), rgba(0, 136, 204, 0.34)) padding-box,
    var(--v63-card-edge-hi) border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--v38-text);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background 0.22s var(--v38-ease), box-shadow 0.22s var(--v38-ease);
}
.cm-link-btn:hover:not(:disabled) {
  background: linear-gradient(rgba(0, 136, 204, 0.46), rgba(0, 136, 204, 0.46)) padding-box,
    var(--v63-card-edge-hi) border-box;
  box-shadow: 0 6px 22px rgba(0, 136, 204, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.cm-link-btn:active:not(:disabled) { transform: scale(0.99); }
.cm-link-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.cm-link-btn__ico {
  font-size: 17px;
  line-height: 1;
}
.cm-link-btn__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cm-link-btn__main {
  font-weight: 600;
  letter-spacing: 0.1px;
}
.cm-link-btn__sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 400;
}
/* nhãn của đường dự phòng — mờ hơn nhãn chính để thứ tự ưu tiên nhìn ra ngay */
.cm-card__label--alt {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
}
.cm-link-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* nút dự phòng mở t.me — cùng hệ xanh Telegram với nút chính, không lấy xanh lá +
   mono của .cm-btn-primary (mono giãn chữ tiếng Việt, và xanh lá lệch ngữ cảnh). */
.cm-link-open {
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.8), rgba(0, 102, 170, 0.8));
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.cm-link-open:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 170, 255, 0.5);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cm-link-step {
  color: var(--v38-text2);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
}
.cm-link-step strong {
  color: var(--v38-text);
}

.cm-root-toggle {
  background: none;
  border: 0;
  color: var(--v38-text2);
  font-size: 11.5px;
  cursor: pointer;
}
.cm-root-toggle:hover {
  color: var(--v38-cyan);
}
.cm-root-note {
  color: var(--v38-text2);
  font-size: 11px;
}

/* thẻ giới thiệu tính năng — hạ về token v3.8, bỏ hào quang */
.cm-feat {
  width: 168px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--v38-bg2);
  border: 1px solid var(--v38-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--v63-glass-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: rotate(var(--rot, 0deg));
}
.cm-feat__title {
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 600;
  text-shadow: none;
}
.cm-feat__ico {
  font-size: 13px;
}
.cm-feat__desc {
  color: var(--v38-text2);
  font-size: 10px;
  line-height: 1.4;
}
.cm-dot {
  opacity: 0.35;
}

.cm-login__footer-main {
  color: var(--v38-text2);
  font-size: 11.5px;
}
.cm-login__footer-sub {
  color: var(--text-3);
  font-size: 10.5px;
  font-family: Consolas, "Cascadia Mono", monospace;
}

/* màn khởi động */
.cm-boot {
  background: var(--v38-bg);
}
.cm-boot__wordmark {
  color: var(--v38-cf);
  text-shadow:
    0 0 12px rgba(246, 130, 31, 0.7),
    0 0 30px rgba(246, 130, 31, 0.4);
}
.cm-boot__sub {
  color: var(--v38-text2);
}
.cm-boot__bar-fill {
  background: linear-gradient(90deg, var(--v38-cf), var(--v38-gold));
}

/* cửa sổ đăng nhập của leader.html (markup khác index.html) */
.login-window,
.login-layout {
  background: var(--v38-bg2);
  border: 1px solid var(--v38-border);
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.login-chrome {
  height: 32px;
  padding: 0 10px;
  background: rgba(13, 17, 23, 0.85);
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
}
.login-window-title,
.login-window-security {
  color: rgba(139, 148, 158, 0.8);
  font-size: 12px;
  font-weight: 500;
}

/* ============================================================================
   14. DÀN FULL NGANG · CHỮ RÕ · VIỀN SÁNG CHẠY  (CAMELL chốt 31/07/2026)
   ----------------------------------------------------------------------------
   Ba lỗi bố cục CAMELL chỉ ra, sửa tận gốc chứ không vá:
   (1) NỘI DUNG BÓ VÀO GIỮA, hai bên đen thui — gốc là --content-max
       (polish.css:14 clamp(1180px,82vw,1460px) · okwin.css:65 clamp(1120px,87vw,1600px))
       được polish.css:92/122/373 gắn "max-width: var(--content-max) !important"
       lên .container + .app-header__inner + footer. File này nạp CUỐI nên chỉ cần
       ĐỊNH NGHĨA LẠI biến thành none là cả cascade nhả ra full ngang — không phải
       đi sửa 3 file. margin-inline:auto còn lại vô hại khi đã hết max-width.
   (2) TRỐNG TRÊN ĐẦU / TRANG DÀI XỌC — đệm dọc tầng shell + container cộng dồn.
       Gộp lại: chỉ .container giữ đệm ngang, .app-main chỉ giữ đệm dọc mỏng.
   (3) KHÔNG CÓ ANIMATION — v3.7/v3.8 nhận diện bằng VIỀN GRADIENT CHẠY quanh thẻ
       (conic-gradient + @property xoay góc) + vạch neon trôi ở header/footer.
       Trước đây chỉ có transition 150ms, nhìn như trang tĩnh.
   ========================================================================== */

/* ---- 14.1 KHỔ TRANG: tràn hết bề ngang, gutter đối xứng ---- */

:root {
  /* tắt mọi "max-width: var(--content-max) !important" của polish/okwin */
  --content-max: none;
  --ok-w-page: none;
  /* gutter mỏng, hai bên bằng nhau — đủ để chữ không dính mép, không tạo dải đen */
  --app-gutter: clamp(12px, 1vw, 20px);
}

.container,
.container--wide,
#view-slot,
.app-header__inner,
.app-main,
.view,
.stack,
.ok-footer,
#app-footer,
.app-bar {
  max-width: none !important;
  margin-inline: 0 !important;
}

.container,
.container--wide,
#view-slot {
  width: 100% !important;
  padding-inline: var(--app-gutter) !important;
}

/* ĐỆM NGANG CHỈ ĐƯỢC CÓ MỘT TẦNG. Đo thực tế trên máy 31/07: nội dung thụt vào
   51,6px mỗi bên vì BA tầng cùng đệm — `.app-main` 12,8 (polish.css:117) +
   `#view-slot` 12,8 + `.view` 26 (okwin.css `padding: var(--ok-gutter)`).
   Giữ đúng một tầng ở `#view-slot`, hai tầng kia về 0.
   Selector `body[data-app=...] .app-main` của polish.css có độ đặc hiệu cao hơn
   `.app-main` nên phải viết lại đủ cả ba dạng, chỉ `!important` là không đủ. */
.app-main,
body[data-app="staff"] .app-main,
body[data-app="leader"] .app-main,
body[data-app="admin"] .app-main,
.shell > .main > .app-main {
  width: 100%;
  padding-block: 6px 12px !important;
  padding-inline: 0 !important;
}
/* `.view` còn đệm DỌC var(--ok-gutter) → đó là khoảng trống hở trên đầu trang */
.view,
.view.stack {
  padding: 0 !important;
}

#app-footer,
.app-bar {
  width: 100% !important;
  border-radius: 0 !important;
}

/* ---- 14.2 MỌI LƯỚI TRONG TRANG TỰ GIÃN HẾT NGANG ---- */

/* dải số liệu: trước bị ép số cột cố định nên thừa chỗ vẫn không giãn */
.ok-grid,
.ok-grid--sm {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
  gap: 10px !important;
  width: 100%;
}

/* dải thẻ thương hiệu (#cb-brands) — dàn đều, không dồn cục bên trái */
#cb-brands {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)) !important;
  gap: 8px !important;
  width: 100%;
}

/* SERP hai cột kiểu Google: kết quả co giãn, knowledge panel bên phải theo vw
   để màn rộng thì panel rộng theo, không chừa khoảng trống giữa hai cột. */
.cb-serp {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 460px) !important;
  align-items: start;
  gap: 14px !important;
  width: 100%;
}
.cb-serp > #cb-list {
  min-width: 0;
}
@media (max-width: 1180px) {
  .cb-serp {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* hàng nút hậu đài: trước wrap chen chúc trong khi hàng còn rộng mênh mông */
.serp-row__cta {
  gap: 8px 10px !important;
  margin-top: 8px !important;
}
.hd-cta {
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.5;
}

/* bảng: kéo hết ngang, không co về nội dung */
table,
.table {
  width: 100% !important;
  table-layout: auto;
}

/* ---- 14.3 CHỮ TO RÕ, NÉT — bỏ khử răng cưa làm mỏng chữ trên nền tối ---- */

html,
body {
  font-size: 15px;
  line-height: 1.5;
  /* antialiased bào mỏng nét chữ trên nền tối → nhìn mờ. Trả về subpixel. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: auto;
}

:root {
  /* chữ phụ: nâng tương phản thêm một nấc nữa cho đọc được ở xa */
  --v38-text2: #c5cedb;
  --text-2: #c5cedb;
  --text-3: #b0bac6;
}

.h1,
.lead-head .h1 {
  font-size: 19px !important;
  letter-spacing: 0.2px;
}
.h2 {
  font-size: 16px;
}
.h3 {
  font-size: 14.5px;
}
.small {
  font-size: 13px;
}
.tiny {
  font-size: 12.5px;
}
.eyebrow {
  font-size: 11.5px;
}
.ok-metric__label,
.label,
.sidebar-section {
  font-size: 12px !important;
}
.ok-metric__value {
  font-size: 22px !important;
}
td,
th,
.table td,
.table th {
  font-size: 13.5px !important;
}
.seg-bar button,
.cb-tab {
  font-size: 13px !important;
}
.sidebar-item__label {
  font-size: 13.5px !important;
}

/* ---- 14.4 NỀN: bỏ đen đục, thay bằng nền có chiều sâu ---- */

html,
body {
  background:
    radial-gradient(1100px 620px at 10% -8%, rgba(88, 166, 255, 0.1), transparent 62%),
    radial-gradient(900px 560px at 102% -4%, rgba(246, 130, 31, 0.075), transparent 58%),
    linear-gradient(180deg, #131a26 0%, #0e141d 42%, #0b0f16 100%) !important;
  background-attachment: fixed !important;
}
.shell {
  background: transparent !important;
}

/* ---- 14.5 VIỀN GRADIENT CHẠY — chữ ký v3.7/v3.8 ---- */

@property --cm-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes cmSpin {
  to {
    --cm-ang: 360deg;
  }
}
@keyframes cmRuleFlow {
  to {
    background-position: 200% 0;
  }
}
@keyframes cmSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}
@keyframes cmRailPulse {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 6px rgba(246, 130, 31, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(246, 130, 31, 0.95);
  }
}

.ok-section,
.card,
.section,
.glass,
.ok-metric,
.brand-card {
  position: relative;
}
.ok-section::after,
.card::after,
.section::after,
.ok-metric::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--cm-ang),
    rgba(88, 166, 255, 0) 0deg,
    rgba(88, 166, 255, 0.6) 55deg,
    rgba(246, 130, 31, 0.62) 130deg,
    rgba(88, 166, 255, 0) 210deg,
    rgba(88, 166, 255, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  /* ⛔ KHÔNG xoay góc conic mặc định: `--cm-ang` đổi mỗi khung hình buộc vẽ lại
     cả gradient + mask; bật đồng thời trên vài chục thẻ là ghim CPU (đo 31/07:
     tab treo, CDP inject timeout 45s). Thay bằng THỞ THEO ĐỘ MỜ — opacity chạy
     thẳng trên compositor, gần như không tốn gì mà vẫn thấy viền sáng động. */
  animation: cmGlowBreathe 4.5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes cmGlowBreathe {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.85;
  }
}
.ok-section:hover::after,
.card:hover::after,
.section:hover::after,
.ok-metric:hover::after {
  opacity: 1;
  animation: cmSpin 3.2s linear infinite;
}
/* nội dung phải nằm trên lớp viền */
.ok-section > *,
.card > *,
.section > *,
.ok-metric > * {
  position: relative;
  z-index: 1;
}

/* vạch neon header/footer: trôi thay vì đứng yên */
.app-header::after,
.ok-footer::before,
#app-footer::before {
  background-size: 200% 100% !important;
  animation: cmRuleFlow 9s linear infinite;
}

/* ---- 14.6 SIDEBAR: quét sáng khi rê, rail cam thở khi đang mở ---- */

.sidebar-item {
  position: relative;
  overflow: hidden;
}
.sidebar-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.11),
    transparent
  );
  transform: translateX(-100%);
  pointer-events: none;
}
.sidebar-item:hover::before {
  animation: cmSweep 0.75s var(--v38-ease);
}
.sidebar-item-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--v38-cf);
  animation: cmRailPulse 2.6s ease-in-out infinite;
}

/* ---- 14.7 THANH TAB NGANG: dàn đều hết bề ngang, gạch chân trượt ---- */

/* :not(.hidden) — bắt buộc. `display: grid !important` trần sẽ THẮNG cả `.hidden{display:none}`,
   khiến thanh tab rỗng của những trang không dùng seg-bar vẫn chiếm 42px: đúng cái "phía trên
   còn chỗ trống" mà CAMELL chửi. Đo 31/07 trên trang Điểm danh: ghost seg-bar 119→161px. */
.seg-bar:not(.hidden) {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-self: stretch !important;
  width: 100%;
  gap: 4px;
  padding: 4px;
  margin: 0 0 10px;
}
.seg-bar button {
  position: relative;
  min-height: 34px;
  padding: 0 10px;
  overflow: hidden;
}
.seg-bar button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--v38-cyan), var(--v38-cf));
  background-size: 200% 100%;
  animation: cmRuleFlow 3s linear infinite;
}

/* ---- 14.8 THANH TẢI: hiện khi body[data-loading="1"] ---- */

body[data-loading="1"]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 999;
  background: linear-gradient(
    90deg,
    transparent,
    var(--v38-cyan),
    var(--v38-cf),
    transparent
  );
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: cmRuleFlow 1s linear infinite;
  display: block !important;
}

/* ============================================================================
   15. TRANG THƯƠNG HIỆU / SERP — bày như Google, không chen chúc
   ----------------------------------------------------------------------------
   Đo trên máy 31/07 trước khi sửa: đầu trang ăn 202px mới tới nội dung (header 40
   + lead-head 55 + seg-bar 43 + các khoảng hở) → "phía trên còn chỗ trống" mà
   nội dung thì bị đẩy xuống. Siết lại còn ~150px, phần tiết kiệm trả cho bảng.
   ========================================================================== */

/* ---- 15.1 siết chiều cao phần đầu trang ---- */

.view > .lead-head.row:first-child,
.lead-head {
  padding-block: 0 4px !important;
  margin-bottom: 4px !important;
}
.seg-bar {
  margin-bottom: 8px !important;
}
.banner {
  padding-block: 8px !important;
}

/* ---- 15.2 thẻ thương hiệu: to, đọc được, thẻ đang chọn có viền chạy ---- */

.cb-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--v38-border);
  background: rgba(22, 27, 34, 0.72);
  color: var(--v38-text2);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s var(--v38-ease),
    color 0.18s var(--v38-ease),
    border-color 0.18s var(--v38-ease),
    transform 0.18s var(--v38-ease);
}
.cb-tab:hover {
  transform: translateY(-1px);
  color: var(--v38-text);
  border-color: rgba(88, 166, 255, 0.5);
}
.cb-tab__name {
  font-size: 13.5px;
  letter-spacing: 0.2px;
}
.cb-tab__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 77, 77, 0.2);
  color: #ffb3b3;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.cb-tab__count--zero {
  background: rgba(139, 148, 158, 0.18);
  color: var(--text-3);
}
.cb-tab.is-active {
  position: relative;
  color: var(--v38-text);
  background: rgba(246, 130, 31, 0.16);
  border-color: rgba(246, 130, 31, 0.55);
}
.cb-tab.is-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--cm-ang),
    rgba(246, 130, 31, 0) 0deg,
    rgba(246, 130, 31, 0.9) 70deg,
    rgba(88, 166, 255, 0.8) 150deg,
    rgba(246, 130, 31, 0) 230deg,
    rgba(246, 130, 31, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  /* chỉ MỘT thẻ active tại một thời điểm → cho quay thoải mái, không tốn CPU */
  animation: cmSpin 4s linear infinite;
}

/* ---- 15.3 dòng kết quả: thoáng như Google, chữ đọc được ---- */

.serp-row {
  padding: 12px 14px !important;
  gap: 12px !important;
}
.serp-row__meta {
  gap: 10px !important;
}
.serp-row__crumb {
  font-size: 13px !important;
}
.serp-row__title {
  font-size: 17px !important;
  line-height: 1.35 !important;
}
.serp-row__desc {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-2) !important;
}
.serp-row__rank {
  font-size: 14px !important;
}

/* số trang Google — chip xám nhạt cuối dòng breadcrumb */
.serp-row__page {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid rgba(139, 148, 158, 0.28);
  background: rgba(139, 148, 158, 0.12);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- 15.4 rãnh phải: dính theo cuộn, tự cuộn khi liệt kê HẾT đối thủ ---- */

.cb-side {
  position: sticky;
  top: 52px;
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cb-side__list {
  gap: 4px;
}
.cb-side__item {
  min-height: 30px;
  font-size: 13px;
}
.cb-side__dom {
  font-size: 13px;
}

/* ============================================================================
   16. SIẾT CHIỀU DỌC — nội dung chính phải nằm trong màn hình đầu tiên
   ----------------------------------------------------------------------------
   Đo thực tế trang Thương hiệu trước khi sửa (máy CAMELL, 31/07): bảng xếp hạng
   mãi tới 611px mới bắt đầu. 415px phía trên là banner 52 + dải thẻ brand 95
   (11 thẻ tràn thành 2 hàng) + toolbar 79 (nhãn nằm TRÊN ô chọn) + dải số 46 +
   tiêu đề 40, cộng 5 khoảng hở 20px. Siết từng khoản, không bỏ thông tin nào.
   ========================================================================== */

/* khoảng hở giữa các khối trong trang: 20 → 10 */
.stack,
.view.stack,
[data-panel].stack {
  gap: 10px !important;
}

/* dải thẻ thương hiệu: 11 thẻ phải nằm GỌN MỘT HÀNG trên màn rộng */
#cb-brands {
  grid-template-columns: repeat(auto-fit, minmax(min(86px, 100%), 1fr)) !important;
  gap: 6px !important;
}

/* toolbar: nhãn nằm CÙNG HÀNG với ô chọn thay vì xếp chồng (79px → ~44px) */
.ok-toolbar {
  align-items: center;
  gap: 10px !important;
  padding-block: 4px !important;
}
.ok-toolbar .field {
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
}
.ok-toolbar .field > .label {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
}
.ok-toolbar .input {
  min-height: 34px;
}

/* tiêu đề khối: bỏ đệm thừa */
.ok-section {
  padding: 8px 12px !important;
}
.ok-section__title {
  gap: 10px;
  min-height: 26px;
}

/* banner nhắc việc: một dòng, không thành hộp cao */
.banner {
  align-items: center;
  gap: 10px;
  padding: 7px 12px !important;
  line-height: 1.45;
}

/* dải số liệu: thấp lại nhưng số vẫn to */
.ok-metric {
  padding: 6px 10px !important;
}

/* đầu trang: tiêu đề + ngày gọn lại (55px → ~42px) */
.lead-head .input,
.lead-head input[type="date"] {
  min-height: 32px;
  padding-block: 0;
}
.lead-toolbar .btn {
  min-height: 32px;
}

/* 16.1 — trim nốt dải đầu trang (đo lại 31/07: header 40 → nội dung 199) */
.app-main,
body[data-app="leader"] .app-main,
body[data-app="staff"] .app-main,
body[data-app="admin"] .app-main {
  padding-block: 2px 12px !important;
}
.view > .lead-head:first-child {
  min-height: 0;
}
.seg-bar {
  margin-bottom: 2px !important;
}
.seg-bar button {
  min-height: 32px;
}
.view > .seg-bar + [data-panel],
.view > .seg-bar + section {
  margin-top: 0 !important;
}

/* ============================================================================
   17. ĐIỂM DANH — tổng kết từng ca, giờ bot phát lệnh nằm cạnh giờ điểm danh
   ----------------------------------------------------------------------------
   CAMELL 31/07: "ca 1 bot phát lệnh - giờ điểm danh, ca 2 bot phát lệnh - giờ
   điểm danh, tổng kết ca 1 - ca 2 từng nv. đúng giờ/Muộn/không điểm danh".
   Trước đó bảng chỉ có giờ điểm danh trơ trọi, không có mốc nào để đối chiếu.
   ========================================================================== */

/* hai thẻ ca nằm cạnh nhau, chia đôi bề ngang màn hình */
.attend-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px !important;
  margin-bottom: 2px !important;
}
.attend-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--v38-radius, 12px);
  border: 1px solid var(--v38-border);
  background: linear-gradient(
    180deg,
    rgba(28, 35, 46, 0.9) 0%,
    rgba(20, 26, 35, 0.9) 100%
  );
}
.attend-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.attend-card__head > b {
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--v38-text);
}
.attend-card__ann {
  font-size: 13px;
  color: var(--text-2);
}
.attend-card__ann b {
  color: var(--v38-accent, #f6821f);
  font-variant-numeric: tabular-nums;
}

/* bốn con số: to, đọc lướt là ra, không phải căng mắt đọc dòng chữ */
.attend-card__tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.att-tally {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 9px;
  border: 1px solid var(--v38-border);
  background: rgba(13, 17, 23, 0.5);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.att-tally small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text-3);
  text-align: center;
}
.att-tally.att--present {
  border-color: rgba(86, 211, 100, 0.34);
  background: rgba(86, 211, 100, 0.09);
}
.att-tally.att--late {
  border-color: rgba(233, 162, 59, 0.36);
  background: rgba(233, 162, 59, 0.09);
}
.att-tally.att--invalid,
.att-tally.att--absent {
  border-color: rgba(255, 143, 136, 0.32);
  background: rgba(255, 143, 136, 0.08);
}

/* ô giờ: giờ điểm danh to, độ lệch so với lệnh nằm ngay dưới */
.att-time-cell {
  white-space: nowrap;
}
.att-time {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--v38-text);
  font-variant-numeric: tabular-nums;
}
.att-time__delta {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.att-time__delta.is-over {
  color: #e9a23b;
}
/* mốc phát lệnh in nhỏ ngay dưới tên cột */
.matrix thead th .th-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.1px;
  text-transform: none;
}

/* độ tươi SERP: quá 90 phút thì phải đập vào mắt, không lẫn vào chữ xám */
.cb-meta--old {
  color: #e9a23b !important;
}

/* ============================================================================
   18. MENU TRÁI TỰ THU GỌN — rail 60px, rê chuột thì BUNG ĐÈ LÊN nội dung
   ----------------------------------------------------------------------------
   CAMELL 31/07: "menubar trái chưa auto thu gọn". Trước đây phải tự bấm nút Thu
   gọn, và khi thu gọn thì cột lưới .shell vẫn giữ 210px nên chẳng lấy lại được
   chỗ nào. Giờ:
     · mặc định = rail 60px (lần đầu vào, chưa có lựa chọn nào trong localStorage)
     · cột lưới co theo rail ⇒ nội dung ăn thêm 150px bề ngang
     · rê chuột (hoặc tab vào bằng bàn phím) ⇒ trượt bung 210px ĐÈ LÊN nội dung,
       nội dung KHÔNG nhảy chỗ
     · nút Thu gọn vẫn còn: bấm là ghim mở, lựa chọn nhớ trong localStorage
   camell-app.css trước đó đặt display:none cho nhãn khi thu gọn — đúng là gọn,
   nhưng display không animate được và nó cũng giết luôn phần hover-mở của
   polish.css. Đổi sang max-width/opacity để trượt được.
   ========================================================================== */

.shell.is-side-collapsed {
  grid-template-columns: var(--v63-side-min) minmax(0, 1fr);
}

.sidebar,
#side-nav {
  transition:
    width 0.22s var(--v38-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow 0.22s var(--v38-ease, cubic-bezier(0.4, 0, 0.2, 1));
  will-change: width;
}

/* nhãn/nhóm/số: thu bằng bề ngang chứ không display:none, để trượt được */
.sidebar.is-collapsed .sidebar__title,
.sidebar.is-collapsed .sidebar-item__label,
.sidebar.is-collapsed .sidebar-item__metric {
  display: block !important;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-6px);
}
.sidebar.is-collapsed .sidebar-section {
  display: block !important;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) and (min-width: 900px) {
  /* BUNG: sidebar rộng ra và nổi lên trên, cột lưới vẫn 60px nên trang đứng yên */
  .shell.is-side-collapsed .sidebar.is-collapsed:hover,
  .shell.is-side-collapsed .sidebar.is-collapsed:focus-within {
    width: var(--v63-side-w);
    z-index: 90;
    box-shadow:
      0 20px 52px rgba(0, 0, 0, 0.62),
      1px 0 0 rgba(246, 130, 31, 0.35);
  }
  .sidebar.is-collapsed:hover .sidebar__title,
  .sidebar.is-collapsed:focus-within .sidebar__title,
  .sidebar.is-collapsed:hover .sidebar-item__label,
  .sidebar.is-collapsed:focus-within .sidebar-item__label,
  .sidebar.is-collapsed:hover .sidebar-item__metric,
  .sidebar.is-collapsed:focus-within .sidebar-item__metric {
    max-width: 180px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sidebar.is-collapsed:hover .sidebar-section,
  .sidebar.is-collapsed:focus-within .sidebar-section {
    max-height: 30px;
    padding-top: 10px;
    padding-bottom: 2px;
    opacity: 0.85;
    visibility: visible;
  }
  /* rail: icon canh giữa; bung ra thì trả về canh trái như bình thường */
  .sidebar.is-collapsed:hover .sidebar-item,
  .sidebar.is-collapsed:focus-within .sidebar-item {
    justify-content: flex-start;
    padding: 0 8px;
    gap: 9px;
  }
  .sidebar.is-collapsed:hover .sidebar__head,
  .sidebar.is-collapsed:focus-within .sidebar__head {
    justify-content: flex-start;
    padding: 0 8px;
  }
}

/* màn hẹp: giữ nguyên cơ chế ngăn kéo cũ, không đụng */
@media (max-width: 899.98px) {
  .shell.is-side-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   19. CHỮ SẮC — NỀN SẠCH (đợt 2)
   ----------------------------------------------------------------------------
   CAMELL 31/07 (sau đợt 1): "text chưa rõ nền vẫn còn mờ".
   Đợt 1 tôi mới tăng cỡ chữ + màu — chưa trúng gốc. Gốc thật có hai cái:

   1) backdrop-filter: blur() saturate() trên sidebar/thẻ/header. Trên Windows,
      hễ một phần tử bị đẩy lên layer hợp thành riêng (backdrop-filter, filter,
      will-change, opacity động…) thì Chrome BỎ khử-răng-cưa-theo-điểm-phụ
      (subpixel/ClearType) và dùng khử-răng-cưa-xám → chữ mảnh đi, viền chữ nhoè.
      Đây đúng là "nét chữ thì mờ". Bỏ hết backdrop-filter, dùng nền MÀU ĐẶC.
   2) Nền "đục ngầu" = mấy lớp glow màu tôi chồng lên ở mục 14 + nền thẻ trong
      suốt nằm trên nền gradient ⇒ thẻ và trang gần cùng độ sáng, mắt phải căng
      ra mới tách được. Giờ: trang phẳng và tối, THẺ sáng hơn hẳn, viền rõ.
   ========================================================================== */

/* ---- 19.1 bỏ mọi lớp hợp thành đè lên chữ ---- */

.sidebar,
#side-nav,
.app-header,
.app-bar,
.card,
.ok-section,
.section,
.panel,
.modal,
.sheet,
.attend-card,
.cb-side,
.glass,
[class*="glass"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* will-change: width ở mục 18 cũng ép layer y hệt — bỏ, transition vẫn chạy mượt */
.sidebar,
#side-nav {
  will-change: auto !important;
}

/* ---- 19.2 nền trang: phẳng, tối, KHÔNG glow màu ---- */

html,
body {
  background: #0b0f16 !important;
  color: #f2f7fd;
  font-size: 15.5px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
.shell {
  background: #0b0f16;
}

/* ---- 19.3 thẻ/khối: sáng hơn nền RÕ RỆT, viền thấy được ---- */

.card,
.ok-section,
.section,
.attend-card,
.cb-side,
.matrix-wrap,
.panel {
  background: #161d27 !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}
.card--tight,
.ok-section {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.sidebar,
#side-nav {
  background: #10151d !important;
}
.app-header,
.app-bar {
  background: #10151d !important;
}
/* ô nhập/nút: nền đặc, không trong suốt chồng lớp */
.input,
select.input,
textarea.input,
input[type="text"],
input[type="date"],
input[type="search"] {
  background: #0f141c !important;
  color: #f2f7fd !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ---- 19.4 bậc chữ: kéo cả ba bậc lên, chữ phụ vẫn phải ĐỌC ĐƯỢC ---- */

:root {
  --v38-text: #f2f7fd;
  --text-1: #f2f7fd;
  --v38-text2: #dbe4ef;
  --text-2: #dbe4ef;
  --text-3: #c6d0dd;
  --muted: #c6d0dd;
}
.muted,
.tiny.muted,
.small.muted,
.muted-2 {
  color: #c6d0dd !important;
}
/* cỡ chữ phụ: 11–12.5px là "bé như con kiến" trên màn 2K — nâng sàn lên 13 */
.tiny {
  font-size: 13px !important;
}
.small {
  font-size: 13.5px !important;
}
.eyebrow,
.label,
.ok-metric__label,
.sidebar-section {
  font-size: 12px !important;
  color: #b9c4d2 !important;
  letter-spacing: 0.2px;
}
/* bảng: chữ to hơn + hàng thoáng, đọc lướt không mỏi */
.matrix td,
.matrix th,
table td,
table th {
  font-size: 14px;
}
.matrix th,
table th {
  color: #dbe4ef;
}

/* ---- 19.5 nút "gửi link qua bot": để chỗ ít để ý (CAMELL 31/07) ----
   Trước đây nó là nút to nhất thẻ đăng nhập vì hôm Telegram im lặng nó là đường
   sống duy nhất. Nay đường mặc định trả lại cho nút Telegram; cái này lùi thành
   một dòng chữ nhỏ — vẫn bấm được ngay khi cần, không giành chỗ nữa. */
.cm-link-quiet {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #93a1b3;
  font-size: 12.5px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cm-link-quiet:hover {
  color: var(--v38-accent, #f6821f);
}

/* ============================================================================
   20. MENU TRÁI HẾT GIẬT — một cơ chế duy nhất, không nhảy ra/vào dòng chảy
   ----------------------------------------------------------------------------
   CAMELL 31/07: "menubar lỗi méo đóng mở giựt giựt".

   GỐC (đọc ra chứ không đoán): sidebar đổi CẢ KIỂU ĐỊNH VỊ khi bấm thu gọn.
     · mở  → camell-app.css:402  position: sticky; top: var(--header-h);
                                 height: calc(100dvh - header - footer)
     · thu → sidebar.css:223     position: fixed;  top: 0; height: 100dvh
       (selector .sidebar.is-collapsed đặc hiệu 0-2-0 > .sidebar 0-1-0 nên NÓ thắng
        dù camell-app.css nạp sau)
   Mỗi lần bấm, thanh vừa rơi ra khỏi lưới vừa nhảy lên đè header rồi mới trượt bề
   ngang 300ms — mắt thấy đúng một cú giật. Cột lưới .shell thì đổi 210px→60px TỨC
   THÌ trong khi bề ngang thanh trượt từ từ ⇒ nội dung giật một nhịp riêng nữa.
   Sửa: giữ NGUYÊN sticky ở cả hai trạng thái, và cho cột lưới trượt cùng nhịp.
   ========================================================================== */

/* ⛔ GỐC THỨ HAI, nặng hơn: bề ngang lúc thu gọn CHƯA BAO GIỜ ăn.
   Mục 2.2 khai `.sidebar, #side-nav { width: var(--v63-side-w) }`. Vế `#side-nav`
   là ID ⇒ đặc hiệu 1-0-0, thắng luôn `.sidebar.is-collapsed` (0-2-0) — mà chính
   drawer.js:9-10 gán id="side-nav" cho thanh này. Nên bấm Thu gọn thì lớp đổi,
   nhãn biến mất, nhưng thanh VẪN 210px. Trước đây không ai thấy vì cột lưới cũng
   giữ 210px; từ lúc mục 18 co cột xuống 60px thì 150px thừa của thanh ĐÈ LÊN nội
   dung — chữ bên trái bị nuốt, nhìn đúng như "menu méo, đóng mở giựt giựt".
   ⇒ Mọi luật bề ngang từ đây phải có bản #side-nav kèm theo cho ngang đặc hiệu. */
.sidebar.is-collapsed,
#side-nav.is-collapsed {
  width: var(--v63-side-min);
}

@media (hover: hover) and (min-width: 900px) {
  .shell.is-side-collapsed .sidebar.is-collapsed:hover,
  .shell.is-side-collapsed #side-nav.is-collapsed:hover,
  .shell.is-side-collapsed .sidebar.is-collapsed:focus-within,
  .shell.is-side-collapsed #side-nav.is-collapsed:focus-within {
    width: var(--v63-side-w);
  }
}

@media (min-width: 900px) {
  .sidebar.is-collapsed,
  #side-nav.is-collapsed {
    position: sticky;
    top: var(--header-h);
    left: auto;
    height: calc(100dvh - var(--header-h) - var(--v38-footer-h));
    max-height: calc(100dvh - var(--header-h) - var(--v38-footer-h));
    z-index: 60;
  }
}

@media (max-width: 1100px) {
  /* khối 1100px co thanh về rail cũng chỉ ghi `.sidebar, #side-nav` — cùng lý do
     trên, phải nói rõ bề ngang ở đây kẻo ID lại thắng */
  .sidebar,
  #side-nav {
    width: var(--v63-side-min);
  }
}

/* cột lưới trượt cùng nhịp với bề ngang thanh (cả hai 0.22s, cùng đường cong) */
.shell {
  transition: grid-template-columns 0.22s var(--v38-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@media (prefers-reduced-motion: reduce) {
  .shell {
    transition: none;
  }
}

/* ---- 20.1 ĐIỆN THOẠI: trả lại ngăn kéo ----------------------------------
   camell-app.css:417 đặt `transform: none !important` cho .sidebar (để chặn hiệu
   ứng trượt thừa ở desktop) nhưng nó đè luôn `translateX(-105%)` của ngăn kéo
   ⇒ dưới 900px thanh 224px nằm chình ình đè nội dung, đóng không được. */
@media (max-width: 899.98px) {
  .sidebar,
  #side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100dvh;
    max-height: 100dvh;
    width: var(--v63-side-w) !important;
    z-index: 80;
    transform: translateX(-105%) !important;
    transition: transform 0.3s var(--v38-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .shell.side-open .sidebar,
  .shell.side-open #side-nav {
    transform: none !important;
  }
  /* mở ngăn kéo là phải ĐỌC ĐƯỢC chữ: hai khối ẩn nhãn (mục ≤1100px và mục 18
     trạng thái thu gọn) đều mang !important nên phải gỡ thẳng ở đây */
  .shell.side-open .sidebar-item__label,
  .shell.side-open .sidebar-item__metric,
  .shell.side-open .sidebar__title,
  .shell.side-open .sidebar__brand {
    display: inline-block !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .shell.side-open .sidebar-section {
    display: block !important;
    max-height: none !important;
    opacity: 0.85 !important;
    visibility: visible !important;
  }
  .shell.side-open .sidebar-item {
    justify-content: flex-start !important;
    padding: 0 8px !important;
    gap: 9px;
  }
  .shell.side-open .sidebar__head {
    justify-content: flex-start !important;
    padding: 0 8px !important;
  }
}

/* ---- 20.2 chữ nghiệp vụ bị bỏ quên dưới sàn 13px ------------------------- */

/* mã nhân viên trong ma trận báo cáo — định danh để đối chiếu ai nộp, không phải
   chữ trang trí */
#matrix-body .nv-code,
.nv-code {
  font-size: 12.5px !important;
}
/* hạn SLA của từng kênh triệt hạ: vừa 10.5px vừa mờ 55% — đọc lúc đang gấp không ra */
.tk-chan__sla {
  font-size: 12.5px !important;
  opacity: 1 !important;
  color: var(--text-3, #c6d0dd) !important;
}

/* thẻ thương hiệu: 132px không đủ chỗ cho tên dài + số, tên bị cắt "…" ngay */
#cb-brands {
  grid-template-columns: repeat(auto-fit, minmax(min(152px, 100%), 1fr)) !important;
}