/*
 * ui-base.css - Lớp chỉnh chung cho DỄ DÙNG, áp cho mọi trang sau đăng nhập.
 * Được fragments/top-navbar.jsp nạp (nằm trong <body>, nên luôn đứng SAU viettel-theme.css và CSS riêng của trang).
 * Mục tiêu:
 *   1. Chữ đủ to để đọc ngoài trời, nút / ô nhập đủ lớn để bấm bằng ngón tay (tối thiểu ~40px).
 *   2. Một màu chủ đạo duy nhất (đỏ --vt-red); xóa các chỗ còn sót màu xanh dương của giao diện cũ.
 *   3. Thấy rõ đang chọn / đang bấm vào đâu (viền focus khi dùng bàn phím).
 *   4. ĐỒNG BỘ giữa các trang: cùng một bộ "token" (bo góc, viền, bóng, màu chữ, chiều cao ô nhập) và cùng kiểu
 *      thẻ, tiêu đề mục, tab, chip, nhãn trạng thái, trạng thái rỗng - kể cả các trang có bộ class riêng
 *      (Lịch sử hx-, Báo cáo rf-/sn-, Ảnh ph-, Sửa ảnh wm-, thẻ ca ticket-card, bộ lọc fbar/fs-).
 * Chỉ chỉnh kích thước / màu / hình khối; không đổi bố cục nên không ảnh hưởng JS của các trang.
 */

/* ===================== TOKEN THIẾT KẾ (dùng chung mọi trang) ===================== */
:root {
    --ui-ink: #111827;          /* chữ chính */
    --ui-text: #374151;         /* chữ thường */
    --ui-sub: #6b7280;          /* chữ phụ */
    --ui-bg: #f5f5f7;           /* nền trang */
    --ui-surface: #fff;         /* nền thẻ */
    --ui-soft: #f7f8fa;         /* nền khối phụ bên trong thẻ */
    --ui-border: #e5e7eb;       /* viền thẻ */
    --ui-border-strong: #d6dbe3;/* viền ô nhập */
    --ui-radius: 14px;          /* bo góc thẻ */
    --ui-radius-sm: 10px;       /* bo góc nút, ô nhập, khối nhỏ */
    --ui-shadow: 0 1px 3px rgba(17, 24, 39, .05);
    --ui-shadow-hover: 0 6px 18px rgba(17, 24, 39, .08);
    --ui-control-h: 42px;       /* chiều cao ô nhập / nút chính */
    --ui-gap: 12px;             /* khoảng cách giữa các thẻ */

    /* Trang Lịch sử có bộ biến riêng (--hx-*): trỏ về cùng token để màu / bóng giống các trang khác */
    --hx-ink: var(--ui-ink);
    --hx-sub: var(--ui-sub);
    --hx-soft: #8a94a3;
    --hx-line: var(--ui-border);
    --hx-shadow: var(--ui-shadow);
    --card-border: var(--ui-border);
}

/* ===================== CHỮ ===================== */
body.vt-app { font-size: 1rem; line-height: 1.5; -webkit-text-size-adjust: 100%; }

/* Các cỡ chữ rất nhỏ cũ (0.70–0.75rem) khó đọc trên điện thoại: nâng lên tối thiểu ~12.5px */
.vt-fs-70, .vt-fs-72, .vt-fs-74 { font-size: .78rem !important; }
.vt-fs-75, .vt-fs-78 { font-size: .8rem !important; }
body.vt-app .text-muted { color: #5b6472 !important; }   /* xám đậm hơn một chút cho dễ đọc */

/* Điện thoại: ô nhập cỡ chữ 16px để iPhone không tự phóng to màn hình khi chạm vào ô */
@media (max-width: 767.98px) {
    body.vt-app input.form-control,
    body.vt-app select.form-select,
    body.vt-app textarea.form-control,
    body.vt-app .fbar-search input { font-size: 16px; }
}

/* ===================== NÚT / Ô NHẬP: DỄ BẤM ===================== */
body.vt-app .btn { border-radius: 10px; font-weight: 600; }
body.vt-app .btn-sm { min-height: 38px; padding: .4rem .8rem; font-size: .88rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
body.vt-app .btn-sm.rounded-pill { border-radius: 999px; }
body.vt-app .d-grid > .btn-sm { display: flex; }
body.vt-app .form-control-sm,
body.vt-app .form-select-sm { min-height: 40px; border-radius: 10px; }
body.vt-app .input-group-sm > .form-control,
body.vt-app .input-group-sm > .input-group-text,
body.vt-app .input-group-sm > .btn { min-height: 40px; }
body.vt-app .form-control, body.vt-app .form-select { border-color: #d6dbe3; }
body.vt-app .form-label { color: #374151; }
body.vt-app .form-check-input { width: 1.15em; height: 1.15em; }
body.vt-app .form-switch .form-check-input { width: 2.4em; height: 1.3em; }
body.vt-app .btn-close { padding: .75rem; }   /* nút X của hộp thoại: vùng bấm lớn hơn */

/* Hộp thoại: nút ở chân to, dễ bấm */
body.vt-app .modal-footer .btn { min-height: 42px; }
body.vt-app .modal-title { font-size: 1.05rem; }

/* ===================== MÀU: một màu chủ đạo ===================== */
body.vt-app { --bs-progress-bar-bg: var(--vt-red); }
body.vt-app .progress-bar { background-color: var(--vt-red); }
body.vt-app .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F27A93'/%3e%3c/svg%3e");
}
.avatar-circle { background: linear-gradient(145deg, var(--vt-red) 0%, var(--vt-red-dark) 100%); }

/* Danh sách ca: tab nhóm, chip loại, thẻ đang chọn */
.group-tab { min-height: 44px; font-size: .92rem; }
.group-tab.active { background: var(--vt-red); border-color: var(--vt-red); box-shadow: 0 2px 8px rgba(var(--vt-red-rgb), .25); }
.type-chip { padding: 6px 13px; font-size: .84rem; min-height: 34px; }
.ticket-card.is-selected { outline-color: var(--vt-red); background: var(--vt-red-50); }
.select-row { font-size: .9rem; min-height: 36px; }

/* Thẻ ca: nút nhanh, link xem thêm, chân thẻ dễ bấm / dễ đọc hơn */
.btn-quick-item { min-height: 40px; font-size: .84rem; border-radius: 10px; }
.see-more-link { display: inline-block; padding: 4px 0; font-size: .86rem; }
.card-footer-info { font-size: .82rem; }
.account-tag { font-size: .88rem; }
.status-badge { font-size: .82rem; }
.btn-kmz-map { font-size: .82rem; padding: 5px 10px; min-height: 30px; }
.badge-distance, .badge-dup { font-size: .78rem; }
.attr-grid { font-size: .88rem; }
.attr-grid .attr-label { font-size: .78rem; }
.tc2 .tc-tile-label { font-size: .78rem; }

/* Thông báo: đổi xanh dương cũ sang màu chủ đạo */
.nt-head button, .nt-more { color: var(--vt-red); min-height: 36px; }
.nt-head button { font-size: .85rem; padding: 4px 6px; }
.nt-item { padding: 12px; }
.nt-item.unread { background: var(--vt-red-50); }
.nt-item.unread:hover { background: var(--vt-red-100); }
.nt-dot { background: var(--vt-red); }
.nt-title { font-size: .88rem; }
.nt-msg { font-size: .86rem; }
.nt-time { font-size: .76rem; }

/* Trang Ảnh */
.ph-chip { min-height: 38px; font-size: .88rem; }
.ph-actions .btn { min-height: 36px; font-size: .82rem; }
.ph-tag { font-size: .74rem; }
.ph-who { font-size: .86rem; }
.ph-time, .ph-addr { font-size: .8rem; }

/* Bộ lọc */
.fbar-search input, .fbar-btn { height: 44px; }
.fbar-btn { flex-basis: 44px; width: 44px; }
.fsum { font-size: .86rem; }
.fsum-count, .fsum-clear { font-size: .84rem; }
.fsum-clear { padding: 4px 0; }
.fs-label { font-size: .86rem; font-weight: 600; color: #374151; }

/* Thanh dưới: chữ to hơn một chút */
.vt-bnav-item { font-size: .74rem; }
.vt-bnav-item i { font-size: 1.25rem; }

/* Thông báo nổi (toast) */
.app-toast { font-size: .92rem; padding: 11px 18px; border-radius: 12px; }

/* ===================== KHỐI NỘI DUNG ===================== */
body.vt-app .card.rounded-4 { border: 1px solid var(--vt-gray-200) !important; box-shadow: 0 1px 3px rgba(17, 24, 39, .05) !important; }
body.vt-app h6.text-primary { font-size: 1rem; }

/* Danh sách đường dẫn kiểu menu (trang Cá nhân): mỗi dòng cao, có mũi tên, bấm cả dòng */
.menu-list { display: flex; flex-direction: column; border: 1px solid var(--vt-gray-200); border-radius: 14px; overflow: hidden; background: var(--ui-surface); }
.menu-item {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
    color: var(--vt-ink); text-decoration: none; font-weight: 600; font-size: .95rem;
    border-bottom: 1px solid var(--vt-gray-100); -webkit-tap-highlight-color: transparent;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: var(--ui-soft); color: var(--vt-ink); }
.menu-item:active { background: var(--vt-red-50); }
.menu-item .mi-icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--vt-gray-100); color: var(--vt-gray-700); font-size: .95rem;
}
.menu-item .mi-text { flex: 1 1 auto; min-width: 0; }
.menu-item .mi-sub { display: block; font-weight: 400; font-size: .8rem; color: var(--vt-gray-500); }
.menu-item .mi-chevron { color: #9ca3af; font-size: .85rem; }
.menu-item.danger { color: var(--vt-red-dark); }
.menu-item.danger .mi-icon { background: var(--vt-red-50); color: var(--vt-red); }

/* ===================== FOCUS (bàn phím) ===================== */
body.vt-app a:focus-visible,
body.vt-app button:focus-visible,
body.vt-app [role="button"]:focus-visible {
    outline: 3px solid rgba(var(--vt-red-rgb), .35);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================================
 * ĐỒNG BỘ GIAO DIỆN GIỮA CÁC TRANG
 * Mỗi nhóm dưới đây gom các class "cùng vai trò" của từng trang về một kiểu duy nhất.
 * ===================================================================== */
body.vt-app { background: var(--ui-bg); color: var(--ui-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.container-app { max-width: 740px; margin: 0 auto; padding: 0 12px; }

/* ---------- 1. THẺ (khối nội dung trắng) ---------- */
.ticket-card, .fbar-wrap, .filter-panel-bg,
.hx-filter, .hx-case, .hx-skel,
.rf-card, .sn-item, .file-item,
.wm-card, .ph-card,
body.vt-app .card.rounded-4, .menu-list {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}
.ticket-card, .fbar-wrap, .filter-panel-bg, .hx-filter, .rf-card, .sn-item, .file-item, .wm-card,
body.vt-app .card.rounded-4 { margin-bottom: var(--ui-gap); }
.ticket-card, .hx-case, .rf-card, .wm-card, .fbar-wrap, .filter-panel-bg, .hx-filter, body.vt-app .card.rounded-4.p-3 { padding: 14px !important; }
.ticket-card:hover, .hx-case:hover { border-color: var(--vt-red-200) !important; box-shadow: var(--ui-shadow-hover) !important; }
.filter-panel-bg { border-top: 1px solid var(--ui-border) !important; }   /* bỏ viền đỏ phía trên cũ cho giống các khối lọc khác */
.hx-cards { gap: var(--ui-gap); }

/* Khối phụ bên trong thẻ (địa chỉ, ô số liệu, vị trí...) */
.location-section, .hx-address, .hx-chip, .tc2 .tc-tile {
    border-radius: var(--ui-radius-sm); background: var(--ui-soft); border: 1px solid #eef0f3;
}

/* ---------- 2. TIÊU ĐỀ MỤC (trong thẻ) ---------- */
body.vt-app .card h6.text-primary, .rf-title, .hx-section-title, .wm-section-head h2, .hx-listhead h2 {
    font-size: 1rem !important; font-weight: 700 !important; color: var(--ui-ink) !important; letter-spacing: 0;
}
body.vt-app .card h6.text-primary > i, .rf-title > i, .hx-section-title > i { color: var(--vt-red) !important; }
.rf-title { margin-bottom: 10px; }
.rf-sub, .hx-subtitle, .ph-note, .wm-hint { color: var(--ui-sub) !important; font-size: .86rem !important; }

/* Số bước (1, 2, 3) */
.rf-step, .wm-step {
    width: 24px !important; height: 24px !important; flex: 0 0 24px; border-radius: 50%;
    background: var(--vt-red) !important; color: #fff; font-weight: 700; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 3. NHÃN Ô NHẬP + Ô NHẬP ---------- */
.rf-label, .hx-label, .fs-label, body.vt-app .form-label.small {
    font-size: .86rem !important; font-weight: 600 !important; color: var(--ui-text) !important; margin-bottom: 4px;
}
body.vt-app .form-control, body.vt-app .form-select, .hx-control, .fbar-search input {
    min-height: var(--ui-control-h); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm);
    background-color: var(--ui-surface); color: var(--ui-ink);
}
.hx-control, .fbar-search input { height: var(--ui-control-h); }
body.vt-app .form-control:focus, body.vt-app .form-select:focus, .hx-control:focus, .fbar-search input:focus {
    border-color: #F27A93; box-shadow: 0 0 0 3px rgba(var(--vt-red-rgb), .14); background-color: var(--ui-surface); outline: 0;
}
body.vt-app .input-group > .input-group-text { border-color: var(--ui-border-strong); background: var(--ui-soft) !important; }
.fbar-btn { border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius-sm); }

/* ---------- 4. TAB CHUYỂN NHÓM (2-3 lựa chọn ngang nhau) ---------- */
.group-tab, .hx-tab {
    min-height: 44px; border-radius: 12px; border: 1px solid var(--ui-border); background: var(--ui-surface);
    color: var(--ui-text); font-weight: 700; font-size: .92rem; box-shadow: var(--ui-shadow);
}
.group-tab.active, .hx-tab.is-active, .hx-tab.is-active:hover {
    background: var(--vt-red); border-color: var(--vt-red); color: #fff; box-shadow: 0 4px 12px rgba(var(--vt-red-rgb), .22);
}
.group-tab .tab-count, .hx-tabcount { border-radius: 999px; font-size: .76rem; padding: 1px 8px; background: rgba(17, 24, 39, .07); }
.group-tab.active .tab-count, .hx-tab.is-active .hx-tabcount { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- 5. CHIP LỌC (chọn một trong nhiều) ---------- */
.type-chip, .fs-chip, .ph-chip {
    min-height: 36px; border: 1.5px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text);
    border-radius: 999px; padding: 6px 14px; font-size: .86rem; font-weight: 600;
    display: inline-flex; align-items: center;
}
.type-chip.active, .fs-chip.active, .ph-chip.active {
    border-color: var(--vt-red); background: var(--vt-red-50); color: var(--vt-red-dark);
}
.fs-seg .fs-chip { border: 0; min-height: 0; justify-content: center; background: transparent; }
.fs-seg .fs-chip.active { background: var(--ui-surface); color: var(--ui-ink); }

/* ---------- 6. NHÃN TRẠNG THÁI (badge / tag) ---------- */
.status-badge, .hx-tag, .st-badge, .role-badge,
.pill-pending, .pill-add, .pill-edit, .pill-del {
    border-radius: 999px !important; font-size: .78rem !important; font-weight: 600 !important;
    padding: 3px 10px !important; line-height: 1.35; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.account-tag, .hx-code {
    border-radius: 6px; background: var(--ui-soft); border: 1px solid #eef0f3; color: var(--ui-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600;
}

/* ---------- 7. LINK / NÚT CHỮ TRONG THẺ ---------- */
.see-more-link, .hx-more, .hx-link-btn, .fsum-clear, .fs-clear { color: var(--vt-red) !important; font-weight: 600; }
.hx-btn { border-radius: var(--ui-radius-sm); font-size: .86rem; font-weight: 600; min-height: 40px; }
.hx-btn.icon { background: var(--vt-red-50); border-color: var(--vt-red-200); color: var(--vt-red-dark); }
.hx-btn.icon:hover { background: var(--vt-red-100); }
.hx-btn:focus-visible, .hx-tab:focus-visible, .hx-link-btn:focus-visible, .hx-more:focus-visible { outline: 3px solid rgba(var(--vt-red-rgb), .35); }
.sn-focus { outline-color: var(--vt-red) !important; box-shadow: 0 0 0 4px rgba(var(--vt-red-rgb), .15) !important; }
@keyframes sn-flash { 0% { background: var(--vt-red-50); } 100% { background: var(--ui-surface); } }

/* ---------- 8. TRẠNG THÁI RỖNG ---------- */
.placeholder-card, .ph-empty, .wm-empty, .hx-empty {
    text-align: center; color: var(--ui-sub); background: var(--ui-surface);
    border: 1px dashed var(--ui-border-strong) !important; border-radius: var(--ui-radius) !important;
    padding: 36px 18px !important; box-shadow: none !important;
}
.placeholder-card .big-icon, .ph-empty i, .hx-empty-icon {
    width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid !important; place-items: center;
    background: var(--ui-soft); color: #9ca3af; font-size: 1.4rem !important;
}
.wm-empty { padding: 20px 14px !important; margin-top: 12px; }

/* ---------- 9. THÔNG BÁO NỔI / HỘP THOẠI ---------- */
.app-toast, .hx-toast { border-radius: 12px; font-size: .92rem; padding: 11px 18px; }
.hx-modal, body.vt-app .modal-content { border-radius: 16px !important; }
.hx-modal-head h3, body.vt-app .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--ui-ink) !important; }

/* ---------- 10. KHUNG BẢN ĐỒ / ẢNH ---------- */
.map-frame { border-radius: var(--ui-radius); border: 1px solid var(--ui-border); }
.ph-grid { gap: var(--ui-gap); }
.ph-card { overflow: hidden; }

/* Trang Bản đồ: thanh công cụ nhỏ phía trên khung bản đồ */
.map-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.map-toolbar-title { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ui-ink); display: inline-flex; align-items: center; gap: 8px; }
.map-toolbar-title i { color: var(--vt-red); }
.map-help summary { cursor: pointer; color: var(--vt-red); font-weight: 600; font-size: .9rem; }

/* Thẻ "Bật nhắc lịch hẹn" (js/push-client.js) - nổi phía trên thanh dưới */
.push-prompt {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
    width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
    background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .18); animation: push-in .3s ease-out;
}
.push-prompt-ic { color: var(--vt-red); font-size: 1.2rem; }
.push-prompt-text { flex: 1 1 auto; min-width: 0; font-size: .86rem; color: var(--ui-sub); }
.push-prompt-text b { display: block; color: var(--ui-ink); font-size: .92rem; }
.push-prompt-x { flex: 0 0 32px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--ui-soft); color: var(--ui-sub); }
html.bnav-hidden .push-prompt { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@keyframes push-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Quản lý tài khoản: account đã từng dùng (Active, xanh) / chưa dùng lần nào (Inactive, xám) */
.acct-active { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.acct-inactive { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
html[data-theme="dark"] .acct-active { background: rgba(34, 197, 94, .14); color: #86efac; border-color: rgba(34, 197, 94, .35); }
html[data-theme="dark"] .acct-inactive { background: var(--ui-soft); color: var(--ui-sub); border-color: var(--ui-border); }

/* Trang Cá nhân: ô nhắc đổi mật khẩu mặc định (chỉ tắt được bằng nút X) */
.pw-warn {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: var(--ui-gap);
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--ui-radius); color: #78350f;
}
.pw-warn.d-none { display: none !important; }
.pw-warn-icon { color: #d97706; font-size: 1.25rem; margin-top: 2px; }
.pw-warn-text { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.pw-warn-text b, .pw-warn-text span { display: block; }
.pw-warn-text b { color: #78350f; }
.pw-warn-link { display: inline-block; margin-top: 4px; font-weight: 700; color: #b45309; }
.pw-warn-close { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(120, 53, 15, .08); color: #78350f; }
.pw-warn-close:hover { background: rgba(120, 53, 15, .16); }

/* =====================================================================
 * GIAO DIỆN TỐI (nút mặt trăng / mặt trời trên thanh trên cùng; html[data-theme="dark"])
 * Bootstrap 5.3 tự đổi màu nút / ô nhập / hộp thoại nhờ data-bs-theme="dark"; phần dưới đổi token chung
 * và các màu viết cứng trong CSS riêng của từng trang.
 * ===================================================================== */
html.theme-switching body, html.theme-switching body * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }

html[data-theme="dark"] {
    color-scheme: dark;
    --ui-ink: #e6e8ec;
    --ui-text: #c9ced6;
    --ui-sub: #9aa3b0;
    --ui-bg: #0f1115;
    --ui-surface: #181b21;
    --ui-soft: #20242c;
    --ui-border: #2b3039;
    --ui-border-strong: #3a414d;
    --ui-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --ui-shadow-hover: 0 6px 18px rgba(0, 0, 0, .5);

    --vt-ink: var(--ui-ink);
    --vt-gray-700: var(--ui-text);
    --vt-gray-500: var(--ui-sub);
    --vt-gray-200: var(--ui-border);
    --vt-gray-100: var(--ui-soft);
    --vt-bg: var(--ui-bg);
    --vt-red-50: rgba(238, 0, 51, .14);
    --vt-red-100: rgba(238, 0, 51, .22);
    --vt-red-200: rgba(238, 0, 51, .4);
    --bs-body-bg: var(--ui-bg);
    --bs-body-color: var(--ui-ink);
    --bs-border-color: var(--ui-border);
    --bs-secondary-bg: var(--ui-soft);
    --bs-tertiary-bg: var(--ui-soft);
    --hx-soft: #8892a0;
}
html[data-theme="dark"] body, html[data-theme="dark"] body.vt-app { background: var(--ui-bg) !important; color: var(--ui-ink); }

/* Thanh trên: đỏ sẫm hơn cho đỡ chói; hàng tab và thanh dưới nền tối */
html[data-theme="dark"] .top-navbar { background: linear-gradient(90deg, #a3001f 0%, #7a0018 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .top-navbar .nav-user { background: #23262d; color: #ff7a93; }
html[data-theme="dark"] .nav-tabs-row { background: var(--ui-surface); border-bottom-color: var(--ui-border); }
html[data-theme="dark"] .nav-tab { color: var(--ui-sub); }
html[data-theme="dark"] .nav-tab:hover { background: var(--ui-soft); color: var(--ui-ink); }
html[data-theme="dark"] .nav-tab.active { color: #ff4d6d; border-bottom-color: #ff4d6d; }
html[data-theme="dark"] .nav-tab-badge, html[data-theme="dark"] .vt-bnav-badge, html[data-theme="dark"] .vt-bnav-dot { border-color: var(--ui-surface); }
html[data-theme="dark"] .vt-bnav-side { background: var(--ui-surface); box-shadow: inset 0 1px 0 var(--ui-border); }
html[data-theme="dark"] .vt-bnav-curve .fill { fill: var(--ui-surface); }
html[data-theme="dark"] .vt-bnav-curve .stroke { stroke: var(--ui-border); }
html[data-theme="dark"] .vt-bnav-item { color: var(--ui-sub); }
html[data-theme="dark"] .vt-bnav-item.active { color: #ff4d6d; }

/* Tiện ích Bootstrap hay viết cứng màu sáng */
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--ui-surface) !important; }
html[data-theme="dark"] .input-group-text.bg-light { background-color: var(--ui-soft) !important; }
html[data-theme="dark"] .text-dark { color: var(--ui-ink) !important; }
html[data-theme="dark"] body.vt-app .text-muted, html[data-theme="dark"] .text-secondary { color: var(--ui-sub) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .hx-modal, html[data-theme="dark"] .fs-sheet,
html[data-theme="dark"] .nt-panel, html[data-theme="dark"] .bulk-bar { background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-border); }
html[data-theme="dark"] .badge.bg-light { background: var(--ui-soft) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .12); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }

/* Chữ chính / chữ phụ viết cứng màu tối trong CSS các trang */
html[data-theme="dark"] .customer-title, html[data-theme="dark"] .hx-name, html[data-theme="dark"] .sn-text,
html[data-theme="dark"] .nt-title, html[data-theme="dark"] .nt-head, html[data-theme="dark"] .attr-grid .attr-value,
html[data-theme="dark"] .tc2 .tc-tile-value, html[data-theme="dark"] .ph-who, html[data-theme="dark"] .fs-title,
html[data-theme="dark"] .fs-back, html[data-theme="dark"] .user-row .info .name, html[data-theme="dark"] .fsum-row .fsum-left,
html[data-theme="dark"] .hx-pager b, html[data-theme="dark"] .hx-chip b, html[data-theme="dark"] .hx-meta strong,
html[data-theme="dark"] .wm-picked-text b, html[data-theme="dark"] .menu-item, html[data-theme="dark"] .hx-empty h3 { color: var(--ui-ink) !important; }
html[data-theme="dark"] .complaint-box, html[data-theme="dark"] .hx-desc, html[data-theme="dark"] .hx-address,
html[data-theme="dark"] .location-section, html[data-theme="dark"] .card-footer-info, html[data-theme="dark"] .hx-meta,
html[data-theme="dark"] .hx-info, html[data-theme="dark"] .nt-msg, html[data-theme="dark"] .ph-addr, html[data-theme="dark"] .ph-time,
html[data-theme="dark"] .sn-meta, html[data-theme="dark"] .fsum, html[data-theme="dark"] .fsum-count, html[data-theme="dark"] .user-row .info .sub,
html[data-theme="dark"] .attr-grid .attr-label, html[data-theme="dark"] .tc2 .tc-tile-label, html[data-theme="dark"] .hx-pa,
html[data-theme="dark"] .hx-note, html[data-theme="dark"] .hx-found, html[data-theme="dark"] .wm-status,
html[data-theme="dark"] .wm-row-top, html[data-theme="dark"] .menu-item .mi-sub, html[data-theme="dark"] .rf-counter,
html[data-theme="dark"] .hx-chip i, html[data-theme="dark"] .hx-modal-body, html[data-theme="dark"] .hx-confirm-text { color: var(--ui-sub) !important; }

/* Nền / viền viết cứng màu sáng */
html[data-theme="dark"] .fs-seg, html[data-theme="dark"] .fbar-search input, html[data-theme="dark"] .fbar-btn,
html[data-theme="dark"] .btn-quick-item, html[data-theme="dark"] .btn-camera, html[data-theme="dark"] .tc2 .btn-detail,
html[data-theme="dark"] .hx-btn.outline, html[data-theme="dark"] .hx-btn.gray, html[data-theme="dark"] .hx-x,
html[data-theme="dark"] .menu-item .mi-icon, html[data-theme="dark"] .wm-row, html[data-theme="dark"] .wm-row-btn,
html[data-theme="dark"] .nt-more, html[data-theme="dark"] .ph-chip .ph-chip-n, html[data-theme="dark"] .sn-wait,
html[data-theme="dark"] .rf-note.is-info, html[data-theme="dark"] .file-item, html[data-theme="dark"] .sn-item {
    background: var(--ui-soft) !important; border-color: var(--ui-border) !important; color: var(--ui-text);
}
html[data-theme="dark"] .location-section, html[data-theme="dark"] .hx-address, html[data-theme="dark"] .hx-chip,
html[data-theme="dark"] .tc2 .tc-tile, html[data-theme="dark"] .account-tag, html[data-theme="dark"] .hx-code {
    background: var(--ui-soft) !important; border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .tc2 .tc-phones .btn-call-phone { background: rgba(34, 197, 94, .1); color: #86efac; border-color: rgba(34, 197, 94, .5); }
html[data-theme="dark"] .tc2 .tc-phones .btn-call-report { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-border-strong); }
html[data-theme="dark"] .menu-item { border-bottom-color: var(--ui-border); }
html[data-theme="dark"] .menu-item:hover { background: var(--ui-soft); }
html[data-theme="dark"] .nt-item { border-bottom-color: var(--ui-border); }
html[data-theme="dark"] .nt-item:hover { background: var(--ui-soft); }
html[data-theme="dark"] .quick-toolbar, html[data-theme="dark"] .card-footer-info, html[data-theme="dark"] .hx-foot,
html[data-theme="dark"] .hx-filter-bottom, html[data-theme="dark"] .fsum, html[data-theme="dark"] .fs-foot,
html[data-theme="dark"] .wm-save, html[data-theme="dark"] .sn-hist, html[data-theme="dark"] .user-row { border-color: var(--ui-border) !important; }
html[data-theme="dark"] .fs-seg .fs-chip.active { background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme="dark"] .type-chip.active { color: #ff7a93; }
html[data-theme="dark"] .hx-skel span { background: linear-gradient(90deg, #22262e 25%, #2a2f38 37%, #22262e 63%); background-size: 400% 100%; }

/* Nhãn trạng thái: nền nhạt -> nền tối pha màu, chữ sáng hơn */
html[data-theme="dark"] .status-hen-gio, html[data-theme="dark"] .hx-tag.green, html[data-theme="dark"] .reason-done,
html[data-theme="dark"] .st-approved, html[data-theme="dark"] .pill-add { background: rgba(34, 197, 94, .14) !important; color: #86efac !important; border-color: rgba(34, 197, 94, .35) !important; }
html[data-theme="dark"] .status-hen-khac, html[data-theme="dark"] .hx-tag.blue, html[data-theme="dark"] .report-submitted,
html[data-theme="dark"] .pill-edit, html[data-theme="dark"] .role-staff { background: rgba(59, 130, 246, .15) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, .35) !important; }
html[data-theme="dark"] .status-kll, html[data-theme="dark"] .hx-tag.amber, html[data-theme="dark"] .reason-kll,
html[data-theme="dark"] .st-pending, html[data-theme="dark"] .pill-pending, html[data-theme="dark"] .report-opened,
html[data-theme="dark"] .report-not-submitted, html[data-theme="dark"] .role-admin, html[data-theme="dark"] .st-pending-delete { background: rgba(245, 158, 11, .14) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, .35) !important; }
html[data-theme="dark"] .status-da-goi-ok, html[data-theme="dark"] .reason-called-ok, html[data-theme="dark"] .badge-distance { background: rgba(6, 182, 212, .14) !important; color: #67e8f9 !important; border-color: rgba(6, 182, 212, .35) !important; }
html[data-theme="dark"] .status-dang-xu-ly, html[data-theme="dark"] .status-da-xu-ly, html[data-theme="dark"] .hx-tag.slate,
html[data-theme="dark"] .reason-closed, html[data-theme="dark"] .st-deleted { background: var(--ui-soft) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .hx-tag.red, html[data-theme="dark"] .st-rejected, html[data-theme="dark"] .pill-del,
html[data-theme="dark"] .sn-reject, html[data-theme="dark"] .hx-error { background: rgba(239, 68, 68, .14) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, .35) !important; }
html[data-theme="dark"] .appt-strip { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3); color: #86efac; }
html[data-theme="dark"] .appt-strip.is-overdue { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #fca5a5; }
html[data-theme="dark"] .appt-strip.is-empty { background: var(--ui-soft); border-color: var(--ui-border); color: var(--ui-sub); }
html[data-theme="dark"] .nt-item.unread { background: rgba(238, 0, 51, .1); }
html[data-theme="dark"] .rf-note, html[data-theme="dark"] .wm-row.flag, html[data-theme="dark"] .pw-warn {
    background: rgba(245, 158, 11, .1) !important; border-color: rgba(245, 158, 11, .4) !important; color: #fcd34d;
}
html[data-theme="dark"] .pw-warn-text b, html[data-theme="dark"] .pw-warn-close, html[data-theme="dark"] .wm-flag-note { color: #fcd34d; }
html[data-theme="dark"] .pw-warn-link { color: #fbbf24; }
html[data-theme="dark"] .rf-submit-bar { background: rgba(15, 17, 21, .94); }

/* Trang đăng nhập / đổi mật khẩu */
html[data-theme="dark"] .login-card, html[data-theme="dark"] .pw-card { background: var(--ui-surface) !important; color: var(--ui-ink); }
html[data-theme="dark"] body.vt-auth { background: linear-gradient(160deg, #7a0018 0%, #4a000f 60%, #1a0006 100%) !important; }