/* ============================================================================
 * mobile.css — BỐ TRÍ CHO ĐIỆN THOẠI / cửa sổ hẹp (≤ 760px), dùng chung toàn site
 * ----------------------------------------------------------------------------
 * Các màn nghiệp vụ (Hành chính: nghỉ phép, công tác, hồ sơ, hợp đồng…) theo khuôn
 * <x>-page / <x>-head / <x>-filter / <x>-body / <x>-tbl. Ở màn hẹp:
 *   · thanh tiêu đề + nút, thanh lọc: XUỐNG DÒNG gọn thay vì tràn ngang;
 *   · bảng: cuộn NGANG trong khung của nó (không kéo lệch cả trang);
 *   · hộp thoại: gần toàn bề ngang.
 * Không đụng khung desktop (wd-*), Bàn làm việc (blv-*) — các phần đó có luật riêng.
 * ========================================================================== */
@media (max-width: 760px) {
    [class$="-head"]:not([class*="wd-"]):not([class*="blv-"]):not([class*="dyc-"]):not([class*="hv-"]) { flex-wrap: wrap !important; height: auto !important; row-gap: 6px !important; }
    [class$="-head"]:not([class*="wd-"]):not([class*="blv-"]):not([class*="dyc-"]):not([class*="hv-"]) h1,
    [class$="-head"]:not([class*="wd-"]):not([class*="blv-"]):not([class*="dyc-"]):not([class*="hv-"]) h2 { font-size: 16px !important; white-space: nowrap; }
    [class$="-filter"] { flex-wrap: wrap !important; gap: 6px !important; }
    [class$="-filter"] > * { flex: 1 1 140px !important; min-width: 0 !important; max-width: 100% !important; }
    [class$="-body"]:not([class*="wd-"]):not([class*="blv-"]):not([class*="dyc-"]):not([class*="hv-"]) { overflow-x: auto; }
    [class$="-tbl"] { display: block; overflow-x: auto; }
    [class$="-tbl"] table, [class$="-body"] > table { min-width: 640px; }
    .modal-dialog { max-width: 96vw !important; margin: 8px auto !important; }
    input, select, textarea { font-size: 16px; }   /* iOS: không tự phóng to khi chạm ô nhập */
}