/* ═══════════════════════════════════════════════════════════════════════════
   components.css — THÀNH PHẦN GIAO DIỆN DÙNG CHUNG (app HCNS)
   ───────────────────────────────────────────────────────────────────────────
   Thứ tự layer được khai ở `layout.css`, file đó phải nạp TRƯỚC file này.
   Đọc phần đầu `layout.css` để hiểu vì sao phải dùng `@layer`.

   ── QUY TẮC KHI THÊM VÀO ĐÂY ──────────────────────────────────────────────

   1. CHỈ dùng token gốc của `theme.css`: `--brand`, `--text-3`, `--border`,
      `--shadow-sm`… TUYỆT ĐỐI không dùng biến alias của trang (`--primary`,
      `--pri`, `--line`, `--muted`). Đây không phải chuyện thẩm mỹ mà là vỡ
      trang có thật: `login.html` không có khối alias nào, còn
      `lich_lam_viec` đặt alias BÊN TRONG `.llv` — nên một `.modal` render ở
      cấp `body` sẽ không thấy `--pri` và mất màu hoàn toàn.

   2. Giữ nguyên tên class cũ (`.card`, `.btn`, `.modal-bg`). Đổi sang tiền tố
      mới sẽ là hơn 1.100 lần sửa thuộc tính `class`, phần lớn nằm trong file
      10.764 dòng và nhiều chỗ do JS sinh bằng chuỗi → không grep-replace an
      toàn được. `@layer` đã lo phần xung đột.

   3. NGOẠI LỆ bắt buộc đặt tiền tố: `@keyframes` và custom property là KHÔNG
      GIAN TÊN PHẲNG, không theo specificity — bản nạp sau thắng, bất kể layer.
      Đó đúng là cơ chế đã sinh ra lỗi `slideIn` hiện có (3 lần khai, 2 định
      nghĩa mâu thuẫn: `translateX(100%)` ở index vs `translateY(20px)` ở 2 file
      khác). Nên mọi keyframes ở đây mang tiền tố `hcns`.

   4. Rule đặt TRONG `@layer hcns.components` → thua CSS trang → thêm vào
      không làm vỡ gì. Trang chỉ nhận giá trị mới KHI xoá khối CSS cục bộ
      tương ứng. Một lần xoá = một bước chuyển đổi, lùi được độc lập.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer hcns.components{
  /* CHƯA CÓ RULE NÀO — cố ý.

     Giai đoạn hiện tại chỉ dựng khung. Component sẽ được đưa vào theo cụm,
     mỗi cụm trích bằng `comm -12` trên khối <style> đã chuẩn hoá khoảng trắng
     — KHÔNG BAO GIỜ chép tay, để loại trừ lỗi "trông giống nhau nhưng lệch
     1px". Thứ tự đã định: ho_so_ca_nhan+quan_ly_ho_so (diễn tập) →
     nghi_phep+duyet_chi+giao_viec (cụm chính). */
}