/* ============================================================
   BAS — LỚP POLISH GIAO DIỆN DÙNG CHUNG (Portal Chấm Công + Portal Lương)
   ============================================================
   File này CHỈ chứa hiệu ứng bổ sung (transition mượt, thanh cuộn mảnh,
   focus rõ hơn khi dùng bàn phím...) — KHÔNG khai báo biến màu (:root).

   Lý do tách riêng: biến màu (--p, --ok, --no, --r, --sh...) vẫn khai báo
   trực tiếp trong từng file index.html / salary.html để đảm bảo 2 portal
   LUÔN hiển thị đúng màu/bố cục ngay cả khi vì lý do triển khai nào đó
   (đường dẫn khác thư mục, CDN chặn...) mà file CSS này không nạp được.
   File này chỉ là lớp "làm đẹp thêm", mất nó thì trang vẫn dùng bình
   thường — không có rủi ro làm sập giao diện.

   Giá trị màu trong file này (var(--pl), var(--bd)...) sẽ tự động lấy
   đúng theo :root đã khai báo ở từng trang, không cần định nghĩa lại.

   KHÔNG đổi kiến trúc — vẫn HTML/CSS/JS thuần, không build step.
   ============================================================ */

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
::selection{background:var(--pl,#2980b9);color:#fff}

/* Thanh cuộn mảnh, màu thương hiệu — áp dụng cho mọi vùng cuộn (bảng công, bảng lương, modal...) */
*{scrollbar-width:thin;scrollbar-color:var(--bd,#dce1e6) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd,#dce1e6);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--pl,#2980b9)}

/* Chuyển động mượt cho các nút đã có sẵn ở 2 trang — chỉ thêm transition/hiệu ứng nhấn,
   KHÔNG đổi màu sắc/kích thước/layout đã định nghĩa riêng ở từng trang */
.btn,.btn-p,.btn-ok,.btn-no,.btn-s,.btn-out,.btn-ac,.btn-login,.btn-logout,
.afbtn,.leader-tab,.admin-tab,.tab-btn{
  transition:background .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),
    color .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.btn:active,.btn-p:active,.btn-ok:active,.btn-no:active,.btn-s:active,
.btn-out:active,.btn-ac:active,.btn-login:active{transform:scale(.97)}

/* Focus rõ ràng hơn khi thao tác bằng bàn phím (accessibility) — không ảnh hưởng
   tới các focus ring riêng đã set cho input/select bằng chuột hay chạm */
:focus-visible{outline:2px solid var(--pl,#2980b9);outline-offset:2px}