/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — HỆ MÀU QLPPS (Papasan) — tông "CAM ĐẤT PASTEL"
   ───────────────────────────────────────────────────────────────────────────
   Đây là design system đã chốt qua nhiều vòng thử nghiệm thật (từ dự án CRM,
   áp dụng chung toàn ERP 05/08/2026). KHÔNG sáng tạo thêm màu, không "tối ưu"
   lại. Mọi màu trong giao diện đi qua var(--token) từ file này.

   ── CÔNG THỨC PASTEL — cách DÙNG màu (quan trọng ngang giá trị màu) ──
   · KHÔNG có khối cam đặc + chữ trắng diện rộng. Nút hành động chính, tab
     active, avatar, header bảng: nền --brand-soft + chữ --brand-hover (700).
     Diện tích bão hoà duy nhất được phép: dải neo mỏng 3-4px --brand
     (đỉnh thẻ/card) và icon nhỏ.
   · Nền đặc chỉ còn ở nút xoá/logout/từ chối — dùng --danger, chữ trắng.
   · Hover/active không thêm hex mới: filter:brightness(.95).
     Focus = box-shadow var(--focus-ring), KHÔNG đổi màu viền.
   · Pill/badge trạng thái: nền *-soft + chữ *-fg tương ứng.
   · Phân bổ 60-30-10: nền trung tính đa số, --brand-soft là mảng phụ,
     --brand chỉ vài phần trăm điểm nhấn.

   ── BA BÀI HỌC ĐÃ TRẢ GIÁ — đừng lặp lại ──
   1. Tint nhạt của đỏ-cam bị mắt đọc thành HỒNG. --brand-soft #FBE5D0 là
      hue 29° (đào/mơ) — KHÔNG tự chế bằng cách pha trắng --brand (ra ~17°
      = hồng phấn).
   2. #FBE5D0 là mức đậm nhất còn đạt WCAG AA cho chữ #BF370D trên nó
      (4.57:1). Muốn nền đậm hơn phải đổi cả màu chữ.
   3. Cam logo (trong file ảnh) không được làm màu chữ/nút — với chữ trắng
      chỉ đạt 3.50:1, trượt AA. --brand cùng tông cam nhưng đạt chuẩn.

   ── CẤM TUYỆT ĐỐI ──
   Gradient · glassmorphism · bóng đen thuần · xám lạnh ám xanh
   · font ngoài · hard-code hex trong template (mọi màu qua var(--token))
   · thêm màu thứ 8 · đổi màu trạng thái theo brand. Ngoại lệ duy nhất:
   bảng màu chart (Chart.js) cần nhiều màu phân biệt series.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ 1. THƯƠNG HIỆU — họ hổ phách, rút từ logo ═════════════════════════
     #FEB041 nguyên bản của logo chỉ đạt 1,9:1 trên nền trắng → KHÔNG dùng
     làm chữ được. Giữ nguyên hue 35° và hạ độ sáng tới khi đạt AA có biên:
       --brand       5,22:1 trên #FFFFFF · 4,94:1 trên --bg-page
       --brand-hover 5,96:1 trên --brand-soft  (nút chính, bản cũ chỉ 4,57)  */
  --brand:       #9E5D09;
  --brand-hover: #7F4B07;
  --brand-soft:  #FBE7C6;

  /* ═══ 2. NỀN — đúng 2 mức, ám ấm hơn bản cũ một nấc ═══════════════════ */
  --bg-card: #FFFFFF;
  --bg-page: #FDF8F0;

  /* ═══ 3. VIỀN — đúng 1 mức ════════════════════════════════════════════ */
  --border: #E7D7BE;
  --focus-ring: 0 0 0 3px rgba(158, 93, 9, .28);

  /* ═══ 4. CHỮ — đúng 3 mức, rút từ nâu cà phê #603814 của logo ═════════
     Ba mức giãn 15,4 → 8,9 → 5,7:1 trên nền thẻ. Cách nhau đủ xa để phân
     cấp đọc được, không phải ba sắc xám na ná nhau.                       */
  --text-1: #33210F;   /* 15,38:1 — tiêu đề, số tiền */
  --text-2: #5E452C;   /*  8,88:1 — nội dung */
  --text-3: #7D6248;   /*  5,66:1 trên thẻ · 5,35:1 trên nền trang */
  --text-on-brand: #FFFFFF;

  /* ═══ 5. TRẠNG THÁI — còn ĐÚNG 3 tín hiệu, mỗi màu một nghĩa ══════════
     Hai nước cờ bớt màu:

     · --warning DÙNG LẠI chính brand. Hổ phách vốn đã nghĩa là "chú ý tôi",
       không cần một sắc vàng thứ hai đứng cạnh. Bớt 1 sắc.
       (Lợi thêm: nền --warning + chữ trắng nay đạt 5,22:1; bản cũ #F59E0B
        với chữ trắng chỉ 2,15:1 — đó là lỗi tương phản thật, đang có ở
        badge đếm việc trong `index.html`.)

     · --info thành NÂU TRUNG TÍNH. "Chờ CEO" nghĩa là đang chờ người khác,
       nó nên lùi lại chứ không nên hét lên. Bớt 1 sắc, và bỏ được màu xanh
       dương lạnh vốn đâm vào nền kem ấm.

     Còn lại: hổ phách = cần bạn xử lý · lục = xong · đỏ = hỏng/từ chối.    */
  --danger:  #B02A18;  --danger-soft:  #F9E2DD;  --danger-fg:  #8A1F11;
  --success: #2E7D4F;  --success-soft: #E1EFE5;  --success-fg: #1F5C39;
  --warning: #9E5D09;  --warning-soft: #FBE7C6;  --warning-fg: #7F4B07;
  --info:    #7D6248;  --info-soft:    #F1E9DD;  --info-fg:    #5E452C;

  /* ═══ 6. THƯƠNG HIỆU BÊN THỨ BA — không đổi, đó là nhận diện của họ ═══ */
  --facebook:  #0084FF;
  --messenger: #1877F2;
  --zalo:      #0068FF;

  /* ═══ 7. ĐỔ BÓNG — ám theo nâu cà phê của logo, không đen thuần ═══════ */
  --shadow-sm: 0 1px 3px rgba(96, 56, 20, .08);
  --shadow-md: 0 2px 10px rgba(96, 56, 20, .10);
  --shadow-lg: 0 10px 32px rgba(96, 56, 20, .16);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BẢNG ĐỐI CHIẾU mã màu cũ → token: xem HE-MAU-ERP.md mục 10 (gốc repo).
   Không chép lại vào đây để file này qua được lệnh tự kiểm mục 8 (0 hex lạ).

   CÒN GIỮ MÃ CỨNG (cố ý):
     · Màu trạng thái + màu bên thứ ba — xem mục 5 và 6 ở trên.
     · #e67e22 — mảng màu biểu đồ (Chart.js): các chuỗi dữ liệu trên cùng
       biểu đồ phải phân biệt được với nhau nên không gộp vào --brand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   ĐƯỜNG LÙI — bảng token CŨ của qlpps-hcns trước khi đồng bộ 2026-08-08.
   Muốn quay lại: chép nguyên các dòng dưới đây đè lên khối :root ở trên.

     --bg-card: #FFFFFF;
     --bg-page: #FBF8F5;
     --border: #DFD2C6;
     --brand: #D23C0E;
     --brand-hover: #BF370D;
     --brand-soft: #FBE5D0;
     --danger: #DC2626;
     --danger-fg: #991B1B;
     --danger-soft: #FEE2E2;
     --facebook: #0084FF;
     --focus-ring: 0 0 0 3px rgba(210, 60, 14, .25);
     --info: #2563EB;
     --info-fg: #1D4ED8;
     --info-soft: #DBEAFE;
     --messenger: #1877F2;
     --shadow-lg: 0 10px 32px rgba(90, 48, 16, .16);
     --shadow-md: 0 2px 10px rgba(90, 48, 16, .10);
     --shadow-sm: 0 1px 3px rgba(90, 48, 16, .08);
     --success: #16A34A;
     --success-fg: #15803D;
     --success-soft: #DCFCE7;
     --text-1: #2A2521;
     --text-2: #54483F;
     --text-3: #736659;
     --text-on-brand: #FFFFFF;
     --warning: #F59E0B;
     --warning-fg: #92400E;
     --warning-soft: #FEF3C7;
     --zalo: #0068FF;

   ════════════════════════════════════════════════════════════════════════ */