/* ==========================================================================
   TDC ADS DASHBOARD — SWISS / INTERNATIONAL TYPOGRAPHIC STYLE
   Giấy trắng · mực đen · một sắc đỏ TDC · kẻ hairline thay cho thẻ bo góc
   Cùng hệ nhận diện với TDC Analytics (#ffffff / #111111 / #eb0029)
   ========================================================================== */

:root {
  /* ---- Giấy & mực ---- */
  --paper: #ffffff;
  --paper-sunk: #fafafa;          /* rail, thead, vùng chìm */
  --paper-wash: #f4f4f4;          /* hover nền */

  --ink: #0a0a0a;                 /* chữ chính, số liệu */
  --ink-2: #525252;               /* chữ phụ đậm rõ (7.4:1) */
  --ink-3: #737373;               /* nhãn mờ nhất còn đạt 4.6:1 */

  --rule: #d4d4d4;                /* hairline */
  --rule-soft: #e8e8e8;           /* kẻ giữa các dòng bảng */
  --rule-strong: #111111;         /* kẻ cấu trúc */

  /* ---- Một sắc nhấn ---- */
  --red: #eb0029;
  --red-ink: #c40022;             /* đỏ dùng cho chữ (5.9:1) */
  --red-hover: #c40022;
  --red-wash: rgba(235, 0, 41, 0.07);

  /* ---- Ngữ nghĩa trạng thái (đều ≥4.5:1 trên nền trắng) ---- */
  --pos: #0f7a3d;
  --pos-wash: rgba(15, 122, 61, 0.09);
  --warn: #9a5b00;
  --warn-wash: rgba(154, 91, 0, 0.10);
  --neg: #c40022;
  --neg-wash: rgba(196, 0, 34, 0.08);
  --info: #1d4ed8;
  --info-wash: rgba(29, 78, 216, 0.08);

  /* ---- Bảng màu biểu đồ (mực → đỏ → phụ) ---- */
  --series-1: #111111;            /* tiền vào / trọng tâm */
  --series-2: #eb0029;            /* tiền ra / cảnh báo */
  --series-3: #1d4ed8;
  --series-4: #9a5b00;
  --series-5: #0f7a3d;
  --series-6: #6d28d9;
  --series-7: #0e7490;
  --series-8: #a3a3a3;

  /* ---- Tương thích ngược: app.js/HTML cũ vẫn gọi các tên này ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --primary: var(--red);
  --success: var(--pos);
  --danger: var(--neg);
  --warning: var(--warn);
  --blue-light: var(--info);
  --bg-card-solid: var(--paper);
  --border: var(--rule);
  --border-hover: #a3a3a3;

  /* ---- Chữ ---- */
  --font-ui: 'Arimo', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  --font-label: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;

  /* ---- Nhịp ---- */
  --rail: 220px;
  --rail-collapsed: 64px;
  --shell: 1560px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Vạch đỏ TDC chạy hết đầu trang */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--red);
  z-index: 400;
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Thanh cuộn: trung tính, đúng bề rộng hệ thống, chỉ đổi màu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-sunk); }
::-webkit-scrollbar-thumb { background: #c8c8c8; border: 2px solid var(--paper-sunk); }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* ===== TYPE SCALE ===== */
.u-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.u-figure {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===== RAIL (SIDEBAR) ===== */
.sidebar {
  width: var(--rail);
  background: var(--paper-sunk);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 4px;
  left: 0;
  bottom: 0;
  z-index: 100;
  /* Chỉ chuyển động transform: đổi width có chuyển động làm giật cả trang khi thu rail */
  transition: transform var(--dur) var(--ease);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px;
  border-bottom: 1px solid var(--rule);
  min-height: 61px;
}

.logo-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon svg { width: 17px; height: 17px; }

.logo-text {
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-item svg { width: 18px; height: 18px; min-width: 18px; }

.nav-item:hover { background: var(--paper-wash); color: var(--ink); }

.nav-item.active {
  background: var(--red);
  color: #fff;
  font-weight: 700;
}

.nav-item.active:hover { background: var(--red-hover); color: #fff; }

/* Liên kết sang hai màn hình vận hành của TDC Analytics. */
.app-switcher {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.app-switcher-label {
  display: block;
  padding: 2px 16px 6px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.app-switch-link {
  min-height: 44px;
  border-left: 3px solid var(--red);
  background: var(--red-wash);
  color: var(--ink);
  font-weight: 700;
}

.app-switch-link + .app-switch-link {
  border-top: 1px solid var(--rule-soft);
  background: var(--paper);
}

.app-switch-link:hover {
  background: var(--paper-wash);
  color: var(--red-ink);
}

.app-switch-link > svg:first-child { color: var(--red); }

.app-switch-external {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  margin-left: auto;
  color: var(--ink-3);
}

.app-switch-link:hover .app-switch-external { color: var(--red-ink); }

.sidebar-footer {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.update-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--pos);
}

.sidebar-toggle-btn {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sidebar-toggle-btn svg { width: 15px; height: 15px; }
.sidebar-toggle-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ===== KHUNG NỘI DUNG ===== */
.main-content {
  margin-left: var(--rail);
  flex: 1;
  min-width: 0;
  padding: 4px 28px 56px;
  max-width: var(--shell);
}

/* ===== ĐANG TẢI ===== */
.loading-overlay {
  position: fixed;
  top: 4px;
  left: var(--rail);
  right: 0;
  bottom: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  gap: 16px;
  color: var(--ink-2);
  font-size: 13px;
}

.loading-overlay.hidden { display: none; }

.spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--rule);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== HEADER ===== */
.header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 12px;
  position: sticky;
  top: 4px;
  background: var(--paper);
  z-index: 50;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 18px;
}

.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}

.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle:hover { border-color: var(--ink); }

.page-title {
  font-family: var(--font-label);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page-subtitle {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
}

.header-right { display: flex; align-items: center; gap: 10px; }

.date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.date-filter label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}

/* ===== Ô NHẬP ===== */
.date-input,
.form-group input,
.form-group select {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
  outline: none;
}

select.date-input,
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  padding-right: 30px;
  cursor: pointer;
}

.date-input:hover,
.form-group input:hover,
.form-group select:hover { border-color: var(--border-hover); }

.date-input:focus,
.form-group input:focus,
.form-group select:focus {
  border-color: var(--ink);
  outline: 2px solid var(--red);
  outline-offset: -1px;
}

.form-group input::placeholder,
.date-input::placeholder { color: var(--ink-3); }

/* Ô chọn tệp: thay hẳn control mặc định của hệ điều hành (chữ Anh, khác hệ) */
.file-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed var(--border-hover);
  background: var(--paper-sunk);
  padding: 8px 12px;
  min-width: 0;
}

.file-field:hover { border-color: var(--ink); }
.file-field:focus-within { border-style: solid; outline: 2px solid var(--red); outline-offset: 1px; }

/* Đủ độ ưu tiên để thắng quy tắc `.form-group label` in hoa ở trên */
.file-field .file-trigger {
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  padding: 6px 13px;
  cursor: pointer;
}

.file-field .file-trigger:hover { background: var(--ink); color: #fff; }

.file-name {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-name.is-set { color: var(--ink); font-weight: 700; }

/* ===== NÚT ===== */
.btn {
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-primary:active { background: #a3001c; }

.btn-secondary { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); background: var(--paper-wash); }

.btn-danger { background: var(--paper); border-color: var(--rule); color: var(--neg); }
.btn-danger:hover { background: var(--neg); border-color: var(--neg); color: #fff; }

.btn:disabled,
.btn[disabled] {
  background: var(--paper-sunk);
  border-color: var(--rule);
  color: #a3a3a3;
  cursor: not-allowed;
}

.btn:disabled:hover { background: var(--paper-sunk); border-color: var(--rule); color: #a3a3a3; }

.btn-lg { padding: 11px 22px; font-size: 14px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Nút icon vuông (chia sẻ link) */
.btn-icon { padding: 8px; width: 34px; }
.btn-icon svg { width: 16px; height: 16px; }

/* ===== BĂNG DOANH THU ===== */
.revenue-highlight {
  border-top: 3px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 0;
}

.revenue-highlight-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding: 0;
}

.revenue-card {
  padding: 18px 22px 20px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.revenue-card:last-child { border-right: none; }

.revenue-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.revenue-card-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
}

/* Ô icon: giữ khung nhưng chuyển sang nét mảnh trung tính */
.revenue-card-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}

.revenue-card-icon svg { width: 17px; height: 17px; }

.revenue-card-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 5px;
  letter-spacing: -0.025em;
}

.revenue-card-sub {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* Thẻ chủ đạo: ĐÃ THU — đứng đầu băng, không thụt lề trái */
.revenue-card.highlight-card { padding-left: 0; }
.revenue-card.highlight-card .revenue-card-label { color: var(--ink); }
.revenue-card.highlight-card .revenue-card-value {
  font-size: 46px;
  letter-spacing: -0.035em;
  margin-bottom: 7px;
}

.revenue-card-icon.green-icon,
.revenue-card-icon.gold-icon,
.revenue-card-icon.purple-icon,
.revenue-card-icon.teal-icon { color: var(--ink-3); background: none; border: none; }

/* Các lớp màu cũ từ bản nền tối — trung hoà lại cho nền giấy */
.gold-label, .green-label, .purple-label, .teal-label { color: var(--ink-2); }
.gold-value, .green-value, .purple-value { color: var(--ink); }

/* Tiến độ KPI */
.revenue-progress { margin-top: auto; padding-top: 14px; }

.revenue-progress-track {
  height: 6px;
  background: var(--rule-soft);
  overflow: hidden;
  position: relative;
}

/* Lớp nhạt phía sau: doanh số ghi nhận (đã thu + công nợ chưa thu), đúng con số
   sheet Tình hình KD dùng để tính "Đã hoàn thành %". */
.revenue-progress-fill.is-recorded {
  position: absolute;
  inset: 0;
  background: var(--red-wash);
  border-right: 1px solid var(--red);
}

/* Chạy bằng transform thay vì width để không phải tính lại bố cục mỗi khung hình */
.revenue-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease);
}

.revenue-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-2);
}

.revenue-progress-label span:first-child { color: var(--ink); font-weight: 700; }
.progress-alt { color: var(--ink-3); font-weight: 400; }

/* ===== LƯỚI CHỈ SỐ (hairline, không dùng thẻ bo góc) ===== */
/* Kẻ ô bằng box-shadow rồi cắt ở mép lưới: số ô lẻ cũng không để lại
   khoảng xám thừa như cách dùng gap làm đường kẻ. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 26px;
}

.kpi-card {
  background: var(--paper);
  padding: 15px 18px 16px;
  min-width: 0;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
  transition: background var(--dur) var(--ease);
}

.kpi-card:hover { background: var(--paper-sunk); }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
}

.kpi-label {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.kpi-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon svg { width: 17px; height: 17px; }

/* Chỉ hai chỉ số chi phí mang sắc đỏ để mắt bắt ngay */
.kpi-card[data-color="red"] .kpi-icon,
.kpi-card[data-color="pink"] .kpi-icon { color: var(--red); }

.kpi-value {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}

.kpi-sub {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 5px;
  line-height: 1.35;
}

/* ===== TIÊU ĐỀ KHỐI ===== */
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}

.block-head h2 {
  font-family: var(--font-label);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.block-head p { font-size: 12.5px; color: var(--ink-2); }

/* Nút chuyển phạm vi biểu đồ */
.range-switch { display: inline-flex; border: 1px solid var(--rule); }

.range-switch button {
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.range-switch button:last-child { border-right: none; }
.range-switch button:hover { background: var(--paper-wash); color: var(--ink); }
.range-switch button.is-on { background: var(--ink); color: #fff; }

/* ===== BIỂU ĐỒ ===== */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  border: 1px solid var(--rule);
  padding: 16px 18px 18px;
  min-width: 0;
}

.chart-card.large { grid-column: 1 / -1; }

.chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}

.chart-header h3 {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.chart-header p { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }

.chart-body { position: relative; }

/* Khung vẽ có chiều cao riêng, tách khỏi phần tóm tắt phía trên —
   nhét cả hai vào một hộp cao cố định thì biểu đồ tràn ra ngoài thẻ. */
.chart-plot { position: relative; height: 300px; }
.chart-plot canvas { max-width: 100%; }

/* Danh sách xếp hạng thay cho biểu đồ tròn một lát */
.rank-list { display: flex; flex-direction: column; }

.rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.rank-row:last-child { border-bottom: none; }

.rank-name {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-count { font-size: 13.5px; font-weight: 700; color: var(--ink); }

.rank-pct {
  font-size: 12px;
  color: var(--ink-2);
  min-width: 46px;
  text-align: right;
}

.rank-bar {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--rule-soft);
  margin-top: 4px;
}

.rank-bar span { display: block; height: 100%; background: var(--ink); }

/* Tóm tắt gói học */
.pkg-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  margin-bottom: 16px;
}

.pkg-cell { background: var(--paper); padding: 12px 14px; }
.pkg-cell + .pkg-cell { border-left: 1px solid var(--rule); }
.pkg-cell dt {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.pkg-cell dd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pkg-count { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pkg-unit { font-size: 12px; color: var(--ink-2); }
.pkg-money { font-size: 13px; font-weight: 700; color: var(--ink); margin-left: auto; }

.no-pkg-msg, .no-city-msg {
  text-align: center;
  color: var(--ink-2);
  padding: 36px 16px;
  font-size: 13px;
  line-height: 1.7;
}

/* ===== BẢNG ===== */
.table-card { border: 1px solid var(--rule); padding: 16px 18px 4px; }

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule-strong);
}

.table-header h3 {
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-wrapper { overflow-x: auto; max-height: 620px; overflow-y: auto; }

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 9px 14px 9px 0;
  color: var(--ink-2);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}

.data-table td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: middle;
}

.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }

.data-table tbody tr:hover td { background: var(--paper-sunk); color: var(--ink); }

/* Cột số: canh phải, chữ số đều bề rộng, chừa khoảng thở với cột kế bên */
.data-table .num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 30px;
}

.data-table .num { color: var(--ink); font-weight: 700; }

.cell-empty { color: #767676; font-weight: 400; }

/* ===== SO SÁNH KỲ ===== */
.table-note {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.note-sep { margin: 0 7px; color: var(--rule); }

/* Bóp 4 cột vào màn hẹp làm số tiền vỡ dòng (phần "₫" rơi xuống hàng dưới).
   Chốt bề rộng tối thiểu để .table-wrapper cuộn ngang thay vì ép chữ. */
.compare-table { table-layout: fixed; min-width: 780px; }

/* Bảng này chỉ hơn chục dòng — bỏ khung cuộn mặc định của .table-wrapper để đọc
   một mạch. Phải là overflow:visible chứ không chỉ max-height:none: hễ còn
   overflow khác visible thì wrapper thành vùng cuộn riêng, và hàng tiêu đề
   sticky sẽ bám vào wrapper (trôi mất khi cuộn trang) thay vì bám màn hình.
   Màn hẹp mới bật lại cuộn ngang, đổi lại mất tính năng dính. */
#section-compare .table-wrapper { max-height: none; overflow: visible; }

@media (max-width: 900px) {
  #section-compare .table-wrapper { overflow-x: auto; }
}
.compare-table th,
.compare-table td { vertical-align: top; }

.compare-table th.num,
.compare-table td.num { width: 24%; padding-right: 20px; }

.compare-table .compare-metric {
  width: 28%;
  color: var(--ink);
  font-weight: 700;
  padding-top: 12px;
}

/* Khối tiêu đề thẻ (tên bảng + ghi chú + nút Cùng số ngày/Trọn kỳ) dính luôn
   dưới header trang: cuộn tới cuối bảng vẫn đổi được cách so sánh và vẫn đọc
   được dòng ghi chú giải thích số đang xem là số cắt hay số trọn kỳ.
   margin-bottom của .table-header sẽ để lọt nội dung nhìn thấy ở khe giữa nó
   và hàng tiêu đề cột, nên đổi sang padding để dải dính liền một mạch. */
#section-compare .table-header {
  position: sticky;
  top: var(--header-h, 86px);
  z-index: 4;
  background: var(--paper);
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 9px;
}

/* Hàng tiêu đề đứng yên ngay dưới header trang để lúc cuộn xuống cuối bảng
   vẫn biết cột nào là kỳ nào. --header-h do app.js đo lại theo bề rộng màn,
   --compare-head-h là chiều cao khối tiêu đề thẻ vừa dính ở trên. */
.compare-table thead th {
  position: sticky;
  top: calc(var(--header-h, 86px) + var(--compare-head-h, 0px));
  z-index: 3;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-strong);
}
.compare-table thead th.num { padding-top: 10px; padding-bottom: 10px; }
.compare-period { display: block; font-size: 13px; color: var(--ink); letter-spacing: 0.04em; }
.compare-range {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.compare-running {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
}

.compare-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.compare-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.35;
  white-space: normal;
}

.delta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
}
.delta-pos  { color: var(--pos); }
.delta-neg  { color: var(--neg); }
.delta-flat { color: var(--ink-3); font-weight: 400; }

/* Kỳ đang chạy: nhấn bằng nền nhạt, không thêm màu mới vào bảng màu */
.compare-table th.is-now,
.compare-table td.is-now { background: var(--paper-sunk); }
.compare-table thead th.is-now { border-bottom-color: var(--red); }

.compare-group td {
  padding-top: 18px;
  padding-bottom: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
}
.compare-table tbody tr.compare-group:hover td { background: transparent; }

/* ===== NGƯỜI DÙNG ĐANG ĐĂNG NHẬP ===== */
.nd-hop {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nd-email {
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nd-vai {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red-ink);
}

/* Mục Người dùng chỉ hiện với admin. Đây chỉ là che mắt cho gọn giao diện —
   chặn thật nằm ở cloud function, vai "quanly" gọi vào cũng bị từ chối. */
.chi-admin { display: none; }
body.la-admin .chi-admin { display: flex; }

body.sidebar-collapsed .nd-hop { display: none; }
body.sidebar-collapsed #nutDangXuat { display: none; }

/* ===== NHÃN TRẠNG THÁI ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-green  { background: var(--pos-wash);  color: var(--pos);  border-color: rgba(15,122,61,.35); }
.badge-red    { background: var(--neg-wash);  color: var(--neg);  border-color: rgba(196,0,34,.35); }
.badge-orange { background: var(--warn-wash); color: var(--warn); border-color: rgba(154,91,0,.35); }
.badge-blue   { background: var(--info-wash); color: var(--info); border-color: rgba(29,78,216,.3); }
.badge-purple { background: rgba(109,40,217,.08); color: #6d28d9; border-color: rgba(109,40,217,.3); }

/* ===== BĂNG THÔNG BÁO ĐỒNG BỘ ===== */
.fb-ads-sync-banner {
  display: none;
  width: 100%;
  margin: 0 0 18px;
  padding: 9px 13px;
  border: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fb-ads-sync-banner--success { color: var(--pos); border-color: rgba(15,122,61,.4); background: var(--pos-wash); }
.fb-ads-sync-banner--warning { color: var(--warn); border-color: rgba(154,91,0,.4); background: var(--warn-wash); }
.fb-ads-sync-banner--danger  { color: var(--neg);  border-color: var(--red);        background: var(--neg-wash); border-left-width: 4px; }

/* ===== KHỐI NHẬP LIỆU ===== */
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.input-card { border: 1px solid var(--rule); padding: 20px 22px 22px; min-width: 0; }

.input-card h3 {
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-card h3 svg { width: 16px; height: 16px; color: var(--ink-3); }

.input-desc { font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group.full-width { grid-column: 1 / -1; }

.form-group label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.result-box {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: 13px;
}

.result-box h4 {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--ink);
  border: none;
  color: #fff;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 999;
  max-width: 440px;
  pointer-events: none;
  line-height: 1.45;
}

.toast.show { opacity: 1; transform: translateY(0); }

/* ===== TIỆN ÍCH ===== */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== LỚP PHỦ RAIL TRÊN DI ĐỘNG ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.sidebar-overlay.active { display: block; opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Rail thu gọn trên desktop */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar { width: var(--rail-collapsed); }
  body.sidebar-collapsed .main-content { margin-left: var(--rail-collapsed); }
  body.sidebar-collapsed .loading-overlay { left: var(--rail-collapsed); }

  body.sidebar-collapsed .logo-text,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .update-badge span { display: none; }

  body.sidebar-collapsed .app-switcher-label,
  body.sidebar-collapsed .app-switch-external { display: none; }

  body.sidebar-collapsed .sidebar-logo { flex-direction: column; padding: 12px 0; gap: 10px; }
  body.sidebar-collapsed .sidebar-toggle-btn { margin: 0; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding: 13px 0; }
  body.sidebar-collapsed .app-switcher { padding-top: 8px; }
  body.sidebar-collapsed .sidebar-footer { align-items: center; padding: 12px 8px 16px; }
  body.sidebar-collapsed .sidebar-footer .btn { width: 38px; padding: 9px 0; font-size: 0; gap: 0; }
  body.sidebar-collapsed .sidebar-footer .btn svg { width: 17px; height: 17px; }
  body.sidebar-collapsed .update-badge { justify-content: center; }
  body.sidebar-collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  .desktop-toggle { display: none !important; }
}

/* Máy tính nhỏ — giữ 4 cột để 8 ô luôn lấp đầy đúng 2 hàng */
@media (max-width: 1360px) {
  .revenue-card.highlight-card .revenue-card-value { font-size: 40px; }
  .kpi-card { padding: 14px 14px 15px; }
  .kpi-value { font-size: 23px; }
}

@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .main-content { padding: 4px 20px 44px; }
  .charts-grid { grid-template-columns: 1fr; }
  .revenue-highlight-inner { grid-template-columns: 1fr 1fr; }
  .revenue-card.highlight-card { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--rule); }
}

/* Máy tính bảng */
@media (max-width: 900px) {
  .header { flex-direction: column; align-items: stretch; gap: 12px; }
  .header-right { width: 100%; }
  .date-filter { width: 100%; justify-content: flex-start; }
  .date-filter label { width: 100%; margin-bottom: -3px; }
  .date-filter select { flex: 1 1 220px; min-width: 0; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input-grid { grid-template-columns: 1fr; }
}

/* Điện thoại */
@media (max-width: 700px) {
  body { font-size: 14px; }

  .sidebar { transform: translateX(-100%); width: 250px; background: var(--paper); }
  .sidebar.open { transform: translateX(0); }

  .main-content { margin-left: 0; padding: 4px 14px 40px; }
  .loading-overlay { left: 0; }
  .menu-toggle { display: inline-flex; }

  .header { padding: 12px 0 10px; gap: 10px; }
  .page-title { font-size: 21px; }
  .page-subtitle { font-size: 11.5px; }

  .date-filter select { flex: 1 1 100%; padding: 10px 12px; }
  .date-filter .btn { flex: 1 1 auto; padding: 10px 12px; }
  .btn-icon { flex: 0 0 auto; width: 42px; }

  /* Băng doanh thu xếp dọc, ĐÃ THU lên trên */
  .revenue-highlight-inner { grid-template-columns: 1fr; }
  .revenue-card {
    padding: 14px 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .revenue-card:last-child { border-bottom: none; }
  .revenue-card.highlight-card { border-bottom: 1px solid var(--rule); }
  .revenue-card.highlight-card .revenue-card-value { font-size: 34px; word-break: break-word; }
  .revenue-card-value { font-size: 24px; }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
  .kpi-card { padding: 12px 12px 13px; }
  .kpi-label { font-size: 10px; letter-spacing: 0.06em; }
  .kpi-value { font-size: 20px; }
  .kpi-sub { font-size: 10.5px; }
  .kpi-icon { display: none; }

  .charts-grid { gap: 16px; }
  .chart-card { padding: 14px; }

  .table-card { padding: 14px 14px 2px; }
  .table-header { flex-direction: column; align-items: stretch; }
  .table-header input { width: 100% !important; }
  .data-table { font-size: 12.5px; }
  .data-table th, .data-table td { padding-right: 10px; }

  .input-card { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .pkg-summary { grid-template-columns: 1fr; }
  .pkg-cell + .pkg-cell { border-left: none; border-top: 1px solid var(--rule); }

  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .main-content { padding: 4px 12px 36px; }
}

/* ===== GIẢM CHUYỂN ĐỘNG ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== IN ẤN ===== */
@media print {
  body::before { display: none; }
  .sidebar, .header-right, .sidebar-footer, .menu-toggle, .range-switch { display: none !important; }
  .main-content { margin-left: 0; padding: 0; max-width: none; }
  .chart-card, .table-card, .input-card { border-color: #999; break-inside: avoid; }
  .kpi-card { box-shadow: 1px 0 0 #999, 0 1px 0 #999; }
}