/* ══════════════════════════════════════════════════════════════════════════
   _chuan.css - NỀN CHUẨN GIAO DIỆN TGM
   ──────────────────────────────────────────────────────────────────────────
   Vì sao có tệp này (30/09, Sếp duyệt "cách A" sau bản phản biện độc lập):

   ① CHỮ ĐỌC KHÔNG RA. Màu #94a3b8 dùng 308 chỗ, tương phản trên nền trắng chỉ
      2,5:1 trong khi mức đọc thoải mái là 4,5:1. Nhiều chỗ mang thông tin vận
      hành thật (hạn xử lý, tên khách, ghi chú) - anh chị lớn tuổi hoặc xem trên
      điện thoại ngoài nắng không đọc được.

   ② MÃ MÁY DÙNG FONT LẠ. Sếp chỉ ra 30/09: cột Mã máy hiển thị bằng font của
      MÁY TÍNH (ui-monospace) nên trên Mac một kiểu, trên Windows một kiểu, và
      lạc hẳn so với Inter của toàn hệ. Class `.mono` lại được khai 5 cách khác
      nhau ở 20 màn - có màn đổi font, có màn chỉ đổi cỡ chữ.

   ⭐ CÁCH GIẢI (Sếp chọn 30/09): KHÔNG đổi sang font thường, vì font đẳng khoảng
      đang làm hai việc thật - số thẳng cột khi dò IMEI 15 số, và phân biệt 0 với
      O khi mã có lẫn chữ (003200EBBB). Thay vào đó dùng CHÍNH Inter của hệ rồi
      bật hai tính năng có sẵn trong nó:
        · tabular-nums  → mọi chữ số rộng bằng nhau, cột thẳng tăm tắp
        · slashed-zero  → số 0 có nét chéo, không lẫn chữ O
      Cùng font với toàn hệ mà không mất lợi ích nào.

   ⚠️ Màn nào dùng thì NẠP TỆP NÀY, không tự khai lại .mono trong <style> của
      mình - bộ kiểm `npm run kiem:chuan` canh việc đó.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Ba bậc chữ - dùng biến, đừng gõ mã màu rải rác nữa.
     Số trong ngoặc là độ tương phản trên nền trắng. */
  --tg-chu:      #16233a;   /* nội dung chính        (14,8:1) */
  --tg-chu-phu:  #64748b;   /* ghi chú, nhãn cột      (4,5:1 - vừa đủ đọc thoải mái) */
  --tg-chu-mo:   #94a3b8;   /* CHỈ trang trí: dấu gạch, đường kẻ, chữ mờ không mang nghĩa */
}

/* ── MÃ MÁY · IMEI · SERIAL · SĐT · MÃ PHIẾU · BIỂN SỐ ────────────────────
   Giữ tên class `.mono` vì đã dùng ở 118 chỗ; chỉ đổi RUỘT. Không phải đi sửa
   118 chỗ gọi, và màn nào chưa nạp tệp này thì vẫn chạy như cũ. */
.mono{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-variant-numeric:tabular-nums slashed-zero;
  font-feature-settings:'tnum' 1,'zero' 1;
  letter-spacing:.3px;          /* hở nhẹ cho mắt tách từng ký tự khi dò dọc */
}
/* ⚠️ ĐO THẬT trên production 30/09, nói đúng sự thật để sau này khỏi tưởng nhầm:
   · `tabular-nums` ĐẠT - nhưng không phải nhờ khai: Inter vốn đã có chữ số rộng
     bằng nhau. Cột mã máy thẳng tăm tắp đúng như mong muốn.
   · `slashed-zero` khai rồi nhưng CHƯA CÓ HIỆU LỰC: bản Inter lấy từ Google Fonts
     không kèm tính năng đó (đo bằng cách so bề rộng chuỗi "000000" khi bật/tắt -
     giống hệt nhau, và nhìn trên màn số 0 vẫn tròn trơn).
   Có đáng lo không: KHÔNG, với dữ liệu TGM. Mã máy và serial ở đây là số hoặc chữ
   HEX (0-9, A-F) - trong bộ đó KHÔNG có chữ O, nên không có gì để lẫn với số 0.
   Giữ nguyên dòng khai: hôm nào đổi sang nguồn Inter đầy đủ thì tự có, không phải
   đi sửa lại 46 màn. */

/* ── SỐ LƯỢNG · TIỀN · PHẦN TRĂM ──────────────────────────────────────────
   Chỉ cần thẳng cột, KHÔNG cần gạch chéo số 0 (những ô này không lẫn chữ). */
.so, .tien, .kpi .v, .kpi-v{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ── LỚP TIỆN ÍCH cho chữ phụ - dùng thay vì gõ mã màu ────────────────── */
.tg-phu{color:var(--tg-chu-phu)}
.tg-mo{color:var(--tg-chu-mo)}

/* ══ LIÊN KẾT KHÔNG GẠCH CHÂN - Sếp chốt 31/10/2026 ═══════════════════════
   Sếp bắt: *"Chỗ gạch chân bạn có thể bỏ qua không? Ví dụ 'Họp & Biên bản',
   '+ Ghi biên bản buổi mới'... rà toàn hệ, nó cần đồng bộ cả hệ về cách trình
   bày."*

   Gạch chân ở các chỗ đó KHÔNG do màn nào đặt - đó là mặc định của trình
   duyệt cho mọi thẻ <a href>. Nên sửa ở ĐÂY là sửa một lần cho 93 màn, không
   phải đi gỡ từng chỗ.

   ⭐ Giữ gạch chân khi RÊ CHUỘT: màu xanh một mình không đủ cho người xem trên
      điện thoại ngoài nắng hoặc người phân biệt màu kém - rê tới thấy gạch là
      biết bấm được. Đây là tín hiệu, không phải trang trí.
   ⛔ NÚT thì không gạch chân kể cả khi rê: nó đã có viền và nền, gạch thêm
      trông như chữ bị gạch nhầm. */
a{text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
a.btn, a.btn:hover, a.pill, a.pill:hover, a.chip, a.chip:hover,
.btn a, .btn a:hover{text-decoration:none}

/* ══ LUẬT ĐỘ RỘNG CỘT BẢNG - Sếp bắt 07/11/2026 ở màn Máy lệch Sổ ══════════
   Sếp chỉ ảnh: cột Lệnh và cột KTV hẹp, mã "SC-MT-090926-01" vỡ ba dòng, tên
   KTV vỡ hai ba dòng, hàng cao gấp ba, màn xem được ít dòng.

   GỐC: bảng để trình duyệt tự chia cột. Trình duyệt bóp trước những cột có
   chỗ bẻ được - dấu gạch trong mã lệnh, dấu cách trong tên người - còn cột
   có chữ dính liền (IMEI, chip model) thì giữ nguyên bề ngang. Thành ra cột
   ngắn nhất lại bị bóp, cột dài không chịu nhường.

   LUẬT: mỗi cột của bảng danh sách thuộc một trong ba loại, gắn lớp lên CẢ
   <th> lẫn <td> của cột đó:
   · .cot-ma     mã lệnh, mã phiếu, biển số, ngày giờ - KHÔNG BAO GIỜ bẻ dòng.
                 Nửa mã nằm dòng dưới là đọc sai mã.
   · .cot-nguoi  tên người (KTV, người tạo, người duyệt) - không bẻ dòng.
   · .cot-chu    chữ dài (việc cần làm, ghi chú, tên khách) - cột NHẬN phần chỗ
                 còn lại và được xuống dòng, có sàn bề ngang để không bị bóp
                 thành cái que.
   Cột chỉ có một nhãn hay chip ngắn thì nhãn tự giữ nowrap như cũ.
   Hai thứ trong một ô (mã + nút) thì XẾP DỌC, đừng xếp ngang: xếp ngang là
   ô rộng bằng tổng hai thứ, cột bên cạnh mất chỗ.
   Ô gộp nhiều mã ("mã1,mã2") là một chữ dính liền - chèn <wbr> SAU dấu phân
   cách để bẻ giữa hai mã (mẫu: hàm maBe() ở may-lech-so/index.html).
   ⚠️ Đừng cho nhãn/chip ngắn xuống dòng để chữa tràn ngang: thử rồi (07/11), cột
   nhãn bị bóp còn que, hàng cao gấp đôi. Bảng quá nhiều cột cho khung hẹp thì
   để nó cuộn ngang TRONG khung riêng (overflow-x:auto), hoặc gộp cột - gộp cột
   là đổi giao diện, phải vẽ mockup cho Sếp duyệt trước. */
.cot-ma, .cot-nguoi{white-space:nowrap}
.cot-chu{min-width:150px}