/* ================================================================
   QUẢN LÝ NỘI BỘ — HỆ THỐNG THIẾT KẾ DÙNG CHUNG
   Điều hướng nhanh trong file này:
     1. Design tokens (màu, khoảng cách, bo góc, đổ bóng)
     2. Nền tảng chung (reset, font, focus, reduced-motion)
     3. Trang đăng nhập
     4. Khung ứng dụng (topbar, trang chủ, thẻ menu)
     5. Thanh tab điều hướng phụ (module-nav)
     6. Nút bấm CTA & Link hành động trong bảng (action-link)
     7. Bảng dữ liệu (data-table)
     8. Form
     9. Badge trạng thái / hạn giấy tờ
     10. Alert & thẻ cảnh báo
     11. Responsive
   ================================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Navy = nền tảng, tin cậy · Amber = điểm nhấn hành động (gợi liên tưởng đèn báo/vận tải) */
    --navy: #1C2B39;
    --navy-light: #2E4257;
    --amber: #E8A33D;
    --amber-dark: #C7852A;
    --bg: #F7F5F1;
    --surface: #FFFFFF;
    --text: #2B3440;
    --text-muted: #6B7684;
    --border: #E4E0D8;
    --success: #3A7D5C;
    --danger: #C0392B;

    --radius-sm: 6px;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(28, 43, 57, 0.08), 0 1px 2px rgba(28, 43, 57, 0.06);

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
}

/* ---------- 2. NỀN TẢNG CHUNG ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Focus rõ ràng, quán xuyến toàn bộ ứng dụng — quan trọng khi thao tác bằng bàn phím */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

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

/* ---------- 3. TRANG ĐĂNG NHẬP ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 20%, var(--navy-light), var(--navy) 70%);
    padding: var(--sp-5);
}

.login-wrap { width: 100%; max-width: 380px; }

.login-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 40px 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.login-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--sp-4);
    border-radius: 12px;
    background: var(--amber);
    color: var(--navy);
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
    padding: 4px;
}

.login-box h1 { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
.login-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 var(--sp-5); }

.login-box label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin: var(--sp-4) 0 6px;
}

.login-box input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    background: var(--bg);
}

.login-box input:focus-visible {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.25);
}

.login-box button {
    width: 100%;
    margin-top: var(--sp-5);
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--amber);
    color: var(--navy);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.login-box button:hover { background: var(--amber-dark); }

/* ---------- 4. KHUNG ỨNG DỤNG ---------- */
.topbar {
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--sp-5);
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-logo {
    width: 30px; height: 30px;
    border-radius: 7px;
    object-fit: contain;
    background: #fff;
    padding: 2px;
    flex: 0 0 auto;
}

.brand-mark {
    background: var(--amber);
    color: var(--navy);
    width: 30px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}

.user-info { display: flex; align-items: center; gap: var(--sp-4); font-size: 14px; }
.logout-link {
    color: var(--amber);
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid rgba(232, 163, 61, 0.4);
    border-radius: var(--radius-sm);
    transition: background-color 0.12s ease;
}
.logout-link:hover { background: rgba(232, 163, 61, 0.12); }

.content { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 60px; }
.content h1 { margin: 0 0 4px; font-size: 24px; }
.muted { color: var(--text-muted); margin: 0 0 var(--sp-6); font-size: 15px; }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
}

.menu-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.menu-card:hover { transform: translateY(-2px); border-color: var(--amber); }
.menu-icon { font-size: 24px; }
.menu-label { font-weight: 700; font-size: 15px; }
.menu-desc { color: var(--text-muted); font-size: 13px; }

/* ---------- 5. TAB ĐIỀU HƯỚNG PHỤ (module-nav) ---------- */
.module-nav {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.module-nav::-webkit-scrollbar { display: none; }

.module-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.module-nav a.active { color: var(--navy); border-bottom-color: var(--amber); }
.module-nav a:hover:not(.active) { color: var(--navy-light); }
.module-nav a:focus-visible { outline-offset: -2px; border-radius: 4px 4px 0 0; }

/* ---------- 6. NÚT BẤM & LINK HÀNH ĐỘNG ----------
   Quy chuẩn:
   - .btn-*  = hành động chính (CTA) đứng riêng: "+ Thêm", "Lưu", "Huỷ"... nổi bật, có nền/viền
   - .action-link = hành động phụ lặp lại trong bảng: "Sửa", "Xoá", "Bảo dưỡng"... nhẹ, dạng ghost
   ------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-primary { background: var(--amber); color: var(--navy); }
.btn-primary:hover { background: var(--amber-dark); }
.btn-secondary { background: var(--surface); color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--navy-light); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(192,57,43,0.35); }
.btn-danger:hover { background: rgba(192,57,43,0.08); }
.btn-sm { padding: 5px 10px; font-size: 13px; }

.row-actions { display: flex; align-items: center; gap: 2px; white-space: nowrap; }

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.action-link:hover { background: rgba(28, 43, 57, 0.06); color: var(--navy); }
.action-link.is-danger { color: var(--danger); }
.action-link.is-danger:hover { background: rgba(192, 57, 43, 0.08); color: var(--danger); }

/* ---------- 7. BẢNG DỮ LIỆU ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.page-header h1 { margin: 0; font-size: 22px; }

.data-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow);
}
.data-table-wrap::-webkit-scrollbar { height: 6px; }
.data-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.data-table th {
    text-align: left;
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.data-table td.wrap { white-space: normal; max-width: 320px; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(28, 43, 57, 0.02); }
.data-table td .muted { color: var(--text-muted); }
.empty-state { padding: 40px 20px; text-align: center; color: var(--text-muted); }

/* ---------- 8. FORM ---------- */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    max-width: 640px;
}
.form-row { margin-bottom: var(--sp-4); }
.form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: var(--bg);
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.2);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.form-actions { display: flex; gap: 10px; margin-top: var(--sp-1); }

.crew-title { font-size: 13px; color: var(--text-muted); margin: 4px 0 var(--sp-3); font-style: italic; }
#crew_fields {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: var(--sp-4) var(--sp-4) 4px;
    margin-bottom: 18px;
}

/* ---------- 9. BADGE ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: rgba(58, 125, 92, 0.12); color: var(--success); }
.badge-soon { background: rgba(232, 163, 61, 0.18); color: var(--amber-dark); }
.badge-expired { background: rgba(192, 57, 43, 0.12); color: var(--danger); }
.badge-muted { background: rgba(107, 118, 132, 0.12); color: var(--text-muted); }

/* ---------- 10. ALERT & THẺ CẢNH BÁO ---------- */
.alert-error {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    margin: 0 0 var(--sp-2);
}
.alert-success {
    background: rgba(58, 125, 92, 0.1);
    color: var(--success);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: var(--sp-5);
}
.alert-warning {
    background: rgba(232, 163, 61, 0.15);
    color: var(--amber-dark);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    text-align: left;
    line-height: 1.5;
}

.reminder-card {
    background: rgba(232, 163, 61, 0.1);
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: var(--sp-6);
}
.reminder-card h2 { margin: 0 0 10px; font-size: 15px; color: var(--amber-dark); }
.reminder-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.reminder-list li { padding: 5px 0; display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.reminder-list li + li { border-top: 1px dashed rgba(232, 163, 61, 0.3); }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-card { padding: 20px; }
}

@media (max-width: 480px) {
    .topbar { padding: 12px var(--sp-4); }
    .content { padding: var(--sp-5) var(--sp-4) 40px; }
    .user-info span:first-child { display: none; }
}

/* Bản 5.63: Đăng xuất chuyển vào trang Tài khoản; tên người dùng ở thanh trên
   trở thành link vào trang đó. Trên điện thoại vào Tài khoản qua thanh dưới nên
   ẩn link tên ở thanh trên cho gọn. */
.user-account-link { color: #fff; text-decoration: none; font-weight: 600; }
.user-account-link:hover { text-decoration: underline; color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 767.98px) {
    .user-info { display: none; }
}

/* Bản 5.64: nút nhắc việc tồn (chuông) ở thanh trên + sổ xuống */
.pending-bell { line-height: 0; }
.pending-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .12s ease;
}
.pending-bell-btn:hover, .pending-bell-btn:focus { background: rgba(255, 255, 255, 0.14); }
.pending-bell-count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #C0392B;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
/* Sổ xuống nhắc việc — ÉP nền sáng + chữ tối (thanh trên màu tối làm chữ dropdown
   bị trắng khi kế thừa; bản 5.65 khắc phục và làm item to hơn cho dễ bấm). */
.pending-bell-menu {
    min-width: 300px;
    max-width: 92vw;
    padding: 6px 0 8px;
    background: #fff;
    border: 1px solid #E4E0D8;
    box-shadow: 0 8px 24px rgba(28, 43, 57, 0.18);
    --bs-dropdown-link-color: #2B3440;
    --bs-dropdown-link-hover-color: #2B3440;
    --bs-dropdown-link-hover-bg: #F4F1EC;
    --bs-dropdown-link-active-color: #2B3440;
    --bs-dropdown-link-active-bg: #F4F1EC;
}
.pending-bell-title {
    color: #6B7684 !important;
    font-size: 13px;
    padding: 8px 16px 6px;
}
.pending-bell-empty {
    display: block;
    padding: 6px 16px 8px;
    color: #6B7684;
    font-size: 13px;
}
.pending-bell-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    color: #2B3440 !important;
}
.pending-bell-item:hover, .pending-bell-item:focus { background: #F4F1EC; color: #2B3440 !important; }
.pending-bell-label { min-width: 0; color: #2B3440 !important; }
.pending-bell-ic { font-size: 16px; }
.pending-bell-item .badge { flex: 0 0 auto; }

/* ============================================================
   Icon giải thích (bản 4.7)
   Bấm/chạm vào mới hiện nội dung, giúp màn hình không bị rối chữ.
   ============================================================ */
.hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    margin-left: .35rem;
    border: 1px solid var(--bs-border-color, #ccc);
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}

.hint-icon:hover,
.hint-icon:focus {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
    outline: none;
}

.popover {
    max-width: 22rem;
}

.popover-body {
    font-size: .875rem;
}

/* ============================================================
   HOÁ ĐƠN TRÌNH BÀY NHƯ BẢN GIẤY (bản 5.7)
   Dùng ở trang chi tiết hoá đơn. Khung viền, chữ nhỏ đều, bảng
   hàng hoá kẻ ô — bám theo bố cục hoá đơn GTGT thật để dễ đối chiếu.
   ============================================================ */
.invoice-paper {
    background: #fff;
    color: #1a1a1a;
    border: 2px solid #2f6fb3;
    border-radius: 4px;
    padding: 22px 26px;
    font-size: 13px;
    line-height: 1.5;
}
.invoice-paper .inv-title {
    text-align: center;
    color: #c00;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .3px;
    margin-bottom: 0;
}
.invoice-paper .inv-subtitle {
    text-align: center;
    color: #c00;
    font-weight: 700;
    font-size: 14px;
}
.invoice-paper .inv-meta { font-size: 13px; }
.invoice-paper .inv-meta b { color: #c00; }
.invoice-paper .inv-label { color: #333; }
.invoice-paper .inv-value { font-weight: 600; }
.invoice-paper .inv-value-red { font-weight: 700; color: #c00; }
.invoice-paper .inv-party {
    border: 1px solid #2f6fb3;
    border-radius: 3px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.invoice-paper .inv-row { display: flex; gap: 6px; padding: 1px 0; }
.invoice-paper .inv-row > .k { flex: 0 0 200px; color: #333; }
.invoice-paper .inv-row > .v { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.invoice-paper table.inv-lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.invoice-paper table.inv-lines th,
.invoice-paper table.inv-lines td {
    border: 1px solid #2f6fb3;
    padding: 4px 6px;
    vertical-align: top;
}
.invoice-paper table.inv-lines thead th {
    text-align: center;
    font-weight: 700;
    background: #eaf2fb;
}
.invoice-paper table.inv-lines thead th small { font-weight: 400; font-style: italic; color: #444; }
.invoice-paper table.inv-lines tr.inv-colnum td {
    text-align: center;
    font-style: italic;
    color: #666;
    background: #f6f9fd;
}
.invoice-paper .inv-source { font-size: 12.5px; }
.invoice-paper .text-en { font-style: italic; color: #555; font-weight: 400; }

/* Chế độ mobile (bản 5.14): nhãn (k) và nội dung (v) mỗi dòng vốn nằm ngang
   hàng, cột nhãn cố định 200px — trên màn hình hẹp thì nội dung dài (VD tên
   công ty) bị bóp lại rất khó đọc. Dưới 576px xếp nhãn lên trên, nội dung
   xuống dòng riêng, không giới hạn chiều rộng nữa. */
@media (max-width: 576px) {
    .invoice-paper { padding: 16px 14px; }
    .invoice-paper .inv-row { flex-direction: column; gap: 0; padding: 3px 0; }
    .invoice-paper .inv-row > .k { flex: 0 0 auto; font-size: 11.5px; color: #666; }
    .invoice-paper .inv-row > .v { flex: 0 0 auto; }
}

/* ============================================================
   THANH ĐIỀU HƯỚNG DƯỚI CÙNG — CHỈ MOBILE (bản 5.62)
   Icon outline (nét, currentColor); ẩn hoàn toàn trên màn hình rộng.
   ============================================================ */
.mobile-bottom-nav { display: none; }

@media (max-width: 767.98px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: var(--bs-body-bg, var(--surface));
        border-top: 1px solid var(--bs-border-color, var(--border));
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.07);
        /* Bản 5.65: nhấc thanh cao hơn một chút, chừa thêm khoảng dưới để không
           đè vạch Home / góc bo màn hình (cộng thêm vào vùng an toàn của máy). */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    }
    .mbn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 2px 8px;
        min-height: 64px;
        text-decoration: none;
        color: var(--bs-body-color, var(--text));
        font-size: 12px;
        line-height: 1.15;
    }
    .mbn-item svg { width: 28px; height: 28px; display: block; }
    .mbn-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mbn-item.active { color: var(--bs-primary, var(--amber)); font-weight: 600; }
    /* Chừa chỗ để thanh cố định không che nội dung cuối trang */
    body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   TRANG CHI TIẾT TUA — MOBILE (bản 5.67)
   4 nút tab nằm trên MỘT hàng (icon trên, nhãn dưới) ở mobile;
   desktop giữ tab thường (icon + chữ nằm ngang).
   ============================================================ */
.tua-tab-ic { margin-right: 5px; }
@media (max-width: 767.98px) {
    /* Bản 5.69: dải tab module Xe (.fleet-tabs) dùng chung mẫu 1 hàng với tua. */
    .tua-tabs, .fleet-tabs { display: flex; flex-wrap: nowrap; gap: 2px; list-style: none; padding-left: 0; }
    .tua-tabs .nav-item, .fleet-tabs .nav-item { flex: 1 1 0; min-width: 0; }
    .tua-tabs .nav-link, .fleet-tabs .nav-link {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        font-size: 11px;
        line-height: 1.12;
        text-align: center;
    }
    .tua-tabs .tua-tab-ic, .fleet-tabs .tua-tab-ic { margin-right: 0; font-size: 18px; }
    .tua-tabs .tua-tab-tx, .fleet-tabs .tua-tab-tx { display: block; }

    /* Bảng dạng thẻ trong tab tua VẪN hiện dòng Tổng (tfoot) trên mobile —
       tránh mất con số tổng như .table-cards mặc định. */
    table.tua-cards tfoot { display: block; }
    table.tua-cards tfoot tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        border: 1px solid var(--amber);
        border-radius: 12px;
        background: #FFF8EF;
        padding: .55rem .8rem;
        margin-top: .1rem;
    }
    table.tua-cards tfoot td { border: none; padding: 0; width: auto; text-align: left; }
    table.tua-cards tfoot td:empty { display: none; }
}

/* Bản in: chỉ in tờ hoá đơn, bỏ hết thanh menu, thẻ thao tác, nút bấm */
@media print {
    body { background: #fff !important; }
    .topbar, .nav, .mobile-bottom-nav, .card:not(.invoice-card), .btn, .alert, footer,
    .d-print-none { display: none !important; }
    main.container { max-width: 100% !important; padding: 0 !important; }
    .invoice-card { border: 0 !important; box-shadow: none !important; }
    .invoice-paper { border-color: #2f6fb3 !important; font-size: 12px; }
    a { text-decoration: none !important; color: inherit !important; }
}

/* ============================================================
   Bản 5.102 → 5.103: KHUNG "💬 TRAO ĐỔI" kiểu Zalo (offcanvas phải)
   Máy tính: 2 cột (danh sách đoạn chat | đoạn đang mở). Điện thoại: cả màn
   hình, mỗi lúc một cột theo data-view="list|conv".
   ============================================================ */
.thread-panel { --bs-offcanvas-width: 780px; max-width: 100vw; box-shadow: -6px 0 24px rgba(0, 0, 0, .12); }
.thread-panel.no-anim { transition: none !important; }
.thread-panel .min-w-0 { min-width: 0; }
.thread-shell { display: flex; height: 100%; min-height: 0; }
.thread-side {
    flex: 0 0 290px; display: flex; flex-direction: column; min-height: 0; min-width: 0; /* 5.104: tin dài không đẩy rộng cột */
    border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
}
.thread-side-head { padding: .75rem .75rem .5rem; border-bottom: 1px solid var(--bs-border-color); }
.thread-close-list { display: none; }
.thread-convs { flex: 1 1 auto; overflow-y: auto; }
.thread-conv-head { font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); padding: .5rem .75rem .25rem; }
.thread-conv {
    display: flex; gap: .6rem; align-items: center; padding: .55rem .75rem;
    color: var(--bs-body-color); text-decoration: none; border-bottom: 1px solid var(--bs-border-color-translucent);
}
.thread-conv:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.thread-conv.active { background: #e5f0ff; }
[data-bs-theme="dark"] .thread-conv.active { background: #1d3a57; }
.thread-avatar {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
}
.thread-conv-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.thread-conv-top, .thread-conv-bot { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.thread-conv-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 500; }
.thread-conv-time { flex: 0 0 auto; font-size: .7rem; color: var(--bs-secondary-color); }
.thread-conv-last { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--bs-secondary-color); }
.thread-conv.is-unread .thread-conv-title, .thread-conv.is-unread .thread-conv-last { font-weight: 700; color: var(--bs-body-color); }
.thread-conv-unread {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #dc3545; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Bản 5.112: số CAM = lịch sử chưa xem (biểu tượng 💬 trên thanh trên + danh sách đoạn chat) */
.pending-bell-count.thread-sys-count { top: auto; bottom: 1px; background: #E8A33D; }
.thread-conv-sys {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #E8A33D; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
/* Bản 5.112: đoạn chat của tua — nhãn chuyến trên dòng lịch sử + lọc theo chuyến */
.thread-trip-chip {
    display: inline-block; max-width: 100%; margin: 0 0 .1rem 1.4rem; padding: 0 .45rem; border-radius: 8px;
    font-size: .68rem; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; border: 1px solid transparent; vertical-align: top;
}
.thread-trip-chip.trip-c0 { background: #e7f1ff; color: #0b5ed7; border-color: #b6d4fe; }
.thread-trip-chip.trip-c1 { background: #e8f6ee; color: #146c43; border-color: #a3cfbb; }
.thread-trip-chip.trip-c2 { background: #fff3e0; color: #9a5b00; border-color: #f5c98a; }
.thread-trip-chip.trip-c3 { background: #f3e8fd; color: #6f42c1; border-color: #d3b8f5; }
.thread-trip-chip.trip-c4 { background: #e0f7fa; color: #087990; border-color: #9eeaf9; }
.thread-trip-chip.trip-c5 { background: #fde8ec; color: #b02a37; border-color: #f1aeb5; }
[data-bs-theme="dark"] .thread-trip-chip { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.thread-body .trip-hidden { display: none !important; }
.thread-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.thread-main-head { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
.thread-main-head .thread-avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 1rem; }
.thread-back { display: none; font-size: 1.25rem; line-height: 1; text-decoration: none; }
.thread-panel:not(.has-conv) .thread-filter,
.thread-panel:not(.has-conv) .thread-compose { display: none; }
.thread-placeholder { margin: auto; padding: 2rem 1rem; }

.thread-body {
    flex: 1 1 auto; overflow-y: auto; padding: .75rem 1rem;
    display: flex; flex-direction: column; gap: .45rem; background: var(--bs-tertiary-bg);
}
.thread-day {
    align-self: center; font-size: .72rem; color: var(--bs-secondary-color);
    background: var(--bs-body-bg); border-radius: 10px; padding: 0 .6rem; margin: .35rem 0;
}
.thread-sys { align-self: stretch; font-size: .8rem; color: var(--bs-secondary-color); padding: 0 .25rem; }
.thread-sys-line { display: flex; gap: .35rem; }
.thread-sys.has-detail .thread-sys-line { cursor: pointer; }
.thread-sys.has-detail .thread-sys-text { text-decoration: underline dotted; text-underline-offset: 3px; }
.thread-sys-text { color: var(--bs-body-color); opacity: .85; }
.thread-sys .thread-meta { padding-left: 1.4rem; }
.thread-sys-detail {
    margin: .2rem 0 0 1.4rem; padding: .35rem .5rem .35rem 1.2rem; font-size: .76rem;
    background: var(--bs-body-bg); border-radius: 6px; border: 1px solid var(--bs-border-color);
}
.thread-msg { display: flex; flex-direction: column; max-width: 85%; }
.thread-msg.mine { align-self: flex-end; align-items: flex-end; }
.thread-msg.theirs { align-self: flex-start; align-items: flex-start; }
.thread-bubble {
    padding: .4rem .65rem; border-radius: 12px; font-size: .88rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
}
.thread-msg.mine .thread-bubble { background: #d9ecff; border-color: #b6d7fb; }
[data-bs-theme="dark"] .thread-msg.mine .thread-bubble { background: #1d3a57; border-color: #2a5580; }
.thread-name { font-size: .72rem; font-weight: 600; color: var(--bs-primary); }
.thread-text { white-space: pre-wrap; word-break: break-word; }
.thread-meta { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.thread-body[data-filter="user"] [data-kind="system"],
.thread-body[data-filter="system"] [data-kind="user"] { display: none; }
.thread-compose textarea { resize: none; }

@media (max-width: 575.98px) {
    .thread-panel { --bs-offcanvas-width: 100vw; }
    .thread-side { flex-basis: 100%; border-right: 0; }
    .thread-close-list { display: inline-block; }
    .thread-back { display: inline-block; }
    .thread-panel[data-view="list"] .thread-main,
    .thread-panel[data-view="conv"] .thread-side { display: none; }
}

/* Bản 5.104: GỌI TÊN @ kiểu Zalo — danh sách chọn người ngay trên ô nhập */
.thread-mention-pop {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
    max-height: 300px; overflow-y: auto; padding: 4px 0;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.thread-mention-item { display: flex; align-items: center; gap: .6rem; padding: .4rem .75rem; cursor: pointer; font-size: .88rem; }
.thread-mention-item:hover, .thread-mention-item.active { background: var(--bs-tertiary-bg); }
.thread-mention-av {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .75rem; font-weight: 700; background: #6c757d;
}
.thread-mention-av.all { background: #0d6efd; font-size: 1.05rem; }
.thread-mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-mention-hint { color: #0d6efd; }
.thread-mention { color: #0d6efd; font-weight: 600; }
[data-bs-theme="dark"] .thread-mention, [data-bs-theme="dark"] .thread-mention-hint { color: #6ea8fe; }
.thread-msg.mentions-me .thread-bubble { border-color: #f0ad4e; box-shadow: 0 0 0 2px rgba(240, 173, 78, .35); }
.thread-conv-tagged { color: #dc3545; font-weight: 600; }
.thread-conv-at {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    background: #dc3545; color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Bản 5.105: tiêu đề khung Trao đổi là link về trang của tua / đơn */
.thread-title-link { color: var(--bs-body-color); text-decoration: none; }
.thread-title-link[href] { cursor: pointer; }
.thread-title-link[href]:hover { color: var(--bs-primary); text-decoration: underline; }
.thread-title-link[href]::after { content: " ↗"; font-weight: 400; font-size: .8em; color: var(--bs-secondary-color); }

/* Bản 5.106: nút dạng ICON ở cột "Chứng từ / Thu tiền" (danh sách Đơn vận chuyển) */
.trip-icon-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.icon-btn { min-width: 34px; padding: .2rem .45rem; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; gap: .2rem; }
.trip-doc-frac { font-size: .72rem; font-weight: 700; }
/* Bản 5.111: cột "Chứng từ" ở Quản lý đơn — nhãn tiến độ trên, nút "Quản lý chứng từ" dưới (mọi màn hình) */
.trip-doc-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.trip-doc-cell .trip-doc-btn { white-space: nowrap; }
.trip-doc-btn.st-done { border-color: #198754; color: #198754; }
.trip-doc-btn.st-partial { border-color: #E8A33D; color: #9a6410; }
.trip-doc-btn.st-todo { border-color: #dc3545; color: #dc3545; }
/* Trang Quản lý chứng từ: danh sách file scan biên bản */
.trip-doc-files { list-style: none; padding: 0; margin: .35rem 0 0; }
.trip-doc-files li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .85rem; }
.trip-doc-files li a.file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bản 5.107: cột hành động danh sách Quản lý đơn — nằm ngang */
.trip-actions { display: flex; flex-wrap: nowrap; gap: .3rem; align-items: center; justify-content: flex-end; }
.trip-actions .btn { white-space: nowrap; }
@media (max-width: 767.98px) { .trip-actions { flex-wrap: wrap; justify-content: flex-start; } }
/* Lệnh điều xe: thanh nút cùng một kiểu */
.dispatch-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dispatch-actions .btn { min-width: 11rem; justify-content: center; }
@media (max-width: 575.98px) { .dispatch-actions .btn { flex: 1 1 100%; } }

/* Bản 5.108: Quản lý đơn — 3 ô thống kê MỘT HÀNG (cả điện thoại) */
.trip-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.trip-stat {
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    padding: .45rem .7rem; min-width: 0; color: var(--bs-body-color); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.trip-stat-label { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-stat-value { font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-stat-link:hover { border-color: #dc3545; color: var(--bs-body-color); }
.trip-stat-link.active { border-color: #dc3545; box-shadow: 0 0 0 2px rgba(220, 53, 69, .2); }
@media (max-width: 575.98px) {
    .trip-stat { padding: .35rem .5rem; }
    .trip-stat-label { font-size: .7rem; }
    .trip-stat-value { font-size: 1rem; }
    .trip-filter .btn-group .btn { padding-left: .5rem; padding-right: .5rem; }
}
/* Xuất / nhập hoá đơn: 2 cách nhập tách bạch */
.doc-mode .btn { border: 1px solid var(--bs-border-color) !important; color: var(--bs-body-color); font-weight: 600; }
.doc-mode .btn-check:checked + .btn { background: var(--bs-primary); border-color: var(--bs-primary) !important; color: var(--navy, #1C2B39); }

/* Bản 5.109: Chuyến trong tua — đơn chính + đơn GHÉP (thụt dòng, chữ nhỏ, icon 🔀) */
.trip-row-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; }
.tua-cards .trip-cust { white-space: normal; word-break: break-word; min-width: 8rem; }
.tua-cards tr.ghep-row { font-size: .86rem; }
.tua-cards tr.ghep-row .trip-cust { padding-left: 1.6rem; }
.tua-cards tr.ghep-row .trip-detail { padding-left: 2.6rem !important; }
.tua-cards tr.ghep-row td:first-child { color: var(--bs-secondary-color); }
.ghep-ic { display: inline-block; margin-right: .25rem; font-size: .9em; }
@media (max-width: 767.98px) {
    table.tua-cards td[data-label=""] .trip-row-actions { justify-content: flex-start; }
    table.tua-cards tr.ghep-row { margin-left: 1.1rem; border-left: 3px solid #0dcaf0; }
    table.tua-cards tr.ghep-row .trip-cust { padding-left: .75rem; }
    table.tua-cards tr.ghep-row .trip-detail { padding-left: 1rem !important; }
    table.tua-cards .trip-cust { min-width: 0; text-align: right; }
}
@media (max-width: 767.98px) {
    /* Dòng chi tiết (tuyến + lô hàng) dính liền thẻ của đơn phía trên */
    table.tua-cards tr.trip-main-row { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
    table.tua-cards tr.trip-detail-row { border-top: 1px dashed #E4E0D8; border-top-left-radius: 0; border-top-right-radius: 0; }
    table.tua-cards tr.trip-detail-row td { text-align: left; }
}

/* ---------- Bản 5.116→5.117: TRANG CHỦ — khung chat "📢 Chung" (ẩn / hiện; điện thoại: thẻ ở đầu trang) ---------- */
.gchat .min-w-0 { min-width: 0; }
.dash-layout { display: flex; flex-direction: column; }
.gchat {
    order: -1; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(28, 43, 57, .06);
}
.gchat-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; cursor: pointer; user-select: none; }
.gchat-head .thread-avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 1rem; }
.gchat-toggle { flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.gchat-badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; vertical-align: 1px;
    background: #dc3545; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.gchat-preview { display: none; color: var(--bs-body-color); }
.gchat-main { display: flex; flex-direction: column; min-height: 0; height: 60vh; border-top: 1px solid var(--bs-border-color); }
.gchat-body { min-height: 0; }
.gchat-compose textarea { resize: none; }
.gchat.is-collapsed .gchat-main { display: none; }
.gchat.is-collapsed .gchat-sub { display: none; }
.gchat.is-collapsed .gchat-preview { display: block; }
@media (min-width: 992px) {
    .dash-main { max-width: 1600px; }
    .dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 1.25rem; align-items: start; }
    .gchat { order: 0; margin-bottom: 0; position: sticky; top: 76px; height: calc(100vh - 100px); min-height: 420px; }
    .gchat-main { flex: 1 1 auto; height: auto; }
    /* Ẩn trên máy tính: nội dung trái rộng hết; khung thành nút nổi góc dưới phải */
    .dash-layout.chat-collapsed { grid-template-columns: minmax(0, 1fr); }
    .dash-layout.chat-collapsed .gchat {
        position: fixed; right: 20px; bottom: 20px; top: auto; height: auto; min-height: 0; width: 320px; z-index: 1030;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    }
}

/* ---------- Bản 5.117: thẻ "#" trong tin + hàng nút thao tác nhanh trên ô nhập chat ---------- */
.thread-ref {
    display: inline-block; padding: 0 .4rem; margin: 0 .05rem; border-radius: 8px; line-height: 1.45;
    background: #e7f1ff; border: 1px solid #b6d4fe; color: #0b5ed7; font-weight: 600; font-size: .92em; text-decoration: none;
    word-break: break-word;
}
.thread-ref:hover { background: #d0e4ff; color: #0a58ca; }
.thread-ref-tua { background: #e8f6ee; border-color: #a3cfbb; color: #146c43; }
.thread-ref-customer { background: #fff3e0; border-color: #f5c98a; color: #9a5b00; }
.thread-ref-supplier { background: #f3e8fd; border-color: #d3b8f5; color: #6f42c1; }
[data-bs-theme="dark"] .thread-ref { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: #6ea8fe; }
.thread-tag-ic { flex: 0 0 26px; text-align: center; }
.thread-tag-sub { color: var(--bs-secondary-color); font-size: .78rem; }
.thread-tools { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.thread-tools .btn { padding: .12rem .5rem; font-size: .78rem; line-height: 1.4; }
.thread-qa-box {
    margin-bottom: .4rem; padding: .5rem .6rem; border: 1px solid var(--bs-border-color); border-radius: 8px;
    background: var(--bs-tertiary-bg); max-height: 55vh; overflow-y: auto;
}
.thread-qa-box .form-label { font-size: .72rem; color: var(--bs-secondary-color); }

/* ---------- Bản 5.118 ---------- */
.min-w-0 { min-width: 0; }
/* Khung 💬: mục "📢 Chung" ghim đầu danh sách */
.thread-conv.is-pinned { background: rgba(232, 163, 61, .08); border-bottom: 2px solid var(--bs-border-color); }
.thread-conv-pin { flex: 0 0 auto; font-size: .7rem; }
/* Máy tính: khung chat mở thì đẩy nội dung sang trái, không che trang */
@media (min-width: 992px) {
    .thread-panel { --bs-offcanvas-width: min(780px, 50vw); }
    body { transition: padding-right .3s ease; }
    body.thread-push { padding-right: min(780px, 50vw); }
    body.thread-push .dash-layout.chat-collapsed .gchat { right: calc(min(780px, 50vw) + 20px); }
}
/* Trang Quản lý chứng từ trên điện thoại */
@media (max-width: 575.98px) {
    .tv-title { font-size: 1.15rem; }
    .tv-step { gap: .6rem !important; }
    .tv-step input[type=file] { max-width: 100% !important; width: 100%; }
}