/* ==========================================================================
   Hello Doctor Canonical Design System (HD UI Core v1.0)
   Single Source of Truth cho cỡ chữ, nút bấm, bảng biểu, panel & cặp tương phản.
   ========================================================================== */
:root {
  --hd-primary: #0a4f7a;
  --hd-primary-light: #1a6fa0;
  --hd-accent: #00c9b1;
  --hd-accent-soft: #e0faf7;
  --hd-bg: #f0f4f8;
  --hd-surface: #ffffff;
  --hd-border: #e2e8f0;
  --hd-text: #1e293b;
  --hd-muted: #64748b;

  /* Thang chữ chuẩn Mật độ cao (Clinical & Operational Dense Scale) */
  --hd-fs-2xs: 10.5px;
  --hd-fs-xs: 11.5px;
  --hd-fs-table: 12px;
  --hd-fs-body: 13px;
  --hd-fs-panel: 13.5px;
  --hd-fs-h1: 16.5px;
  --hd-fs-kpi: 22px;

  /* Kích thước hình học đồng bộ tuyệt đối trên cùng 1 hàng */
  --hd-ctrl-h: 32px;
  --hd-ctrl-sm-h: 26px;
  --hd-radius-card: 12px;
  --hd-radius-ctrl: 8px;
}

body { font-size: var(--hd-fs-body); color: var(--hd-text); }
.tabular-nums, .hd-money, .hd-col-num { font-variant-numeric: tabular-nums; }

/* 1. Cặp Nền - Chữ Khóa Cứng Đi Đôi (Xác suất chữ trùng màu nền = 0%) */
.hd-tone-primary { background: #e0f2fe !important; color: #075985 !important; border: 1px solid #bae6fd; }
.hd-tone-accent  { background: #ccfbf1 !important; color: #0f766e !important; border: 1px solid #99f6e4; }
.hd-tone-success { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0; }
.hd-tone-warning { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a; }
.hd-tone-danger  { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca; }
.hd-tone-info    { background: #e0e7ff !important; color: #3730a3 !important; border: 1px solid #c7d2fe; }
.hd-tone-neutral { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1; }

.hd-solid-primary { background: linear-gradient(135deg, var(--hd-primary), var(--hd-primary-light)) !important; color: #fff !important; }
.hd-solid-accent  { background: linear-gradient(135deg, #0d9488, var(--hd-accent)) !important; color: #fff !important; }
.hd-solid-success { background: linear-gradient(135deg, #059669, #10b981) !important; color: #fff !important; }
.hd-solid-danger  { background: linear-gradient(135deg, #dc2626, #ef4444) !important; color: #fff !important; }

/* 2. Tiêu đề trang (Page Header) */
.hd-page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.hd-page-title { margin: 0; font-size: var(--hd-fs-h1); font-weight: 700; color: var(--hd-primary); display: flex; align-items: center; gap: 8px; }
.hd-page-title i { color: var(--hd-accent); }
.hd-page-sub { font-size: var(--hd-fs-xs); color: var(--hd-muted); margin-top: 2px; }

/* 3. Khung Panel & Thanh lọc (Panel & Filter Bar) */
.hd-panel {
  background: var(--hd-surface); border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-card); box-shadow: 0 1px 4px rgba(15,23,42,0.04);
  margin-bottom: 14px; overflow: hidden;
}
.hd-panel-head {
  padding: 10px 15px; border-bottom: 1px solid var(--hd-border); background: #f8fafc;
  font-size: var(--hd-fs-panel); font-weight: 700; color: var(--hd-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hd-panel-head i { color: var(--hd-accent); }
.hd-panel-body { padding: 14px 16px; background: transparent; }
.hd-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 4. Hệ thống Nút bấm & Input chuẩn (32px / 26px) */
.hd-btn {
  height: var(--hd-ctrl-h); padding: 0 12px; border-radius: var(--hd-radius-ctrl);
  font-size: var(--hd-fs-body); font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap;
}
.hd-btn-sm { height: var(--hd-ctrl-sm-h); padding: 0 9px; font-size: var(--hd-fs-xs); border-radius: 6px; }
.hd-btn-primary { background: var(--hd-primary); color: #fff; }
.hd-btn-primary:hover { background: var(--hd-primary-light); color: #fff; }
.hd-btn-accent { background: var(--hd-accent); color: #fff; }
.hd-btn-accent:hover { background: #0d9488; color: #fff; }
.hd-btn-outline { background: #fff; color: var(--hd-primary); border-color: #cbd5e1; }
.hd-btn-outline:hover { background: #f1f5f9; color: var(--hd-primary); }
.hd-btn-danger { background: #dc2626; color: #fff; }
.hd-btn-danger:hover { background: #b91c1c; color: #fff; }

/* 5. Thẻ Chỉ số KPI (Stat Card) & Nhãn Trạng thái (Badge) */
.hd-stat {
  background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-card);
  padding: 13px 15px; display: flex; align-items: center; gap: 12px; height: 100%;
}
.hd-stat-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 16px; flex-shrink: 0;
}
.hd-stat-label { font-size: var(--hd-fs-xs); color: var(--hd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.hd-stat-val { font-size: var(--hd-fs-kpi); font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hd-stat-sub { font-size: 11px; opacity: 0.82; margin-top: 2px; }
.hd-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: var(--hd-fs-xs); font-weight: 600; line-height: 1.35;
}

/* 6. Bảng Dữ liệu Mật độ cao (12px Dense Table) & Lớp Tương thích 263 Trang Cũ */
.hd-table, .table { font-size: var(--hd-fs-table); margin-bottom: 0; }
.hd-table thead th { background: #f1f5f9; color: var(--hd-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--hd-border); white-space: nowrap; }
.hd-table tbody td { padding: 7px 10px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.hd-col-num { text-align: right !important; font-weight: 600; }
.badge.bg-warning:not(.text-white), .badge.bg-info:not(.text-white) { color: #0f172a !important; }
.badge.bg-light:not([class*="text-"]), .badge.bg-white:not([class*="text-"]) { color: #334155 !important; border: 1px solid #cbd5e1; }
.main-content .btn-lg, .modal .btn-lg { font-size: 13px !important; padding: 6px 13px !important; border-radius: 8px; }