/* =====================================================================================
   SIXOSAPP - MOBILE-DENSE CSS (SIÊU TỐI ƯU CHO THIẾT BỊ DI ĐỘNG)
   - Tone màu: Xanh - Trắng (Blue & White clean)
   - Size chữ chuẩn: 10px - 13px (Mật độ thông tin cao)
   - Bố cục App Shell: Header đỉnh + Content cuộn + Bottom Navigation đáy
   - Tối ưu chạm (Hitbox >= 38px) & Hỗ trợ Safe-Area Inset (iOS/Android)
   - Kế thừa kỹ thuật bảng ghim cột (Sticky Columns) & Segmented Control từ StyleMau
   ===================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* 0. Font chữ chủ đạo Inter */
    --sixos-font-family: 'Inter', sans-serif;
    --bs-body-font-family: 'Inter', sans-serif;

    /* 1. Tone màu chính (Apple iOS System Blue) */
    --sixos-primary: #007aff;
    --sixos-primary-dark: #0056b3;
    --sixos-primary-light: #e5f1ff;
    --sixos-primary-subtle: #f0f7ff;

    /* 2. Màu nền & Viền (iOS Grouped Background & Subtle Separators) */
    --sixos-bg: #f2f2f7;
    --sixos-card-bg: #ffffff;
    --sixos-border: #b8c4ce; /* Viền chuẩn SixOs: sắc nét, đậm nhẹ vừa vặn, không quá mức */
    --sixos-border-light: #e2e8f0;
    --sixos-table-border: #b8c4ce; /* Viền bảng chuẩn SixOs: sắc nét, đậm vừa vặn, không quá mức */

    /* 3. Màu chữ (iOS Label & Secondary Label) */
    --sixos-text: #1c1c1e;
    --sixos-muted: #8e8e93;
    --sixos-disabled: #aeaeb2;

    /* 4. Màu trạng thái nghiệp vụ (iOS System Colors) */
    --sixos-income: #34c759;
    --sixos-income-bg: #eafaf1;
    --sixos-expense: #ff3b30;
    --sixos-expense-bg: #feeceb;
    --sixos-warning: #ff9500;
    --sixos-warning-bg: #fff5e6;
    --sixos-info: #007aff;
    --sixos-info-bg: #e5f1ff;

    /* 5. Safe Area Insets (Tai thỏ & Thanh Home) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* =====================================================================================
   1. RESET & TYPOGRAPHY CỠ CHỮ GỌN GÀNG (10px - 13px)
   ===================================================================================== */
html {
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sixos-text);
    background-color: var(--sixos-bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, optgroup, select, textarea {
    font-family: 'Inter', sans-serif;
}

/* =====================================================================================
   2. APP SHELL LAYOUT (CHỐNG TRÀN VIỀN - TỐI ƯU MÀN HÌNH DỌC)
   ===================================================================================== */
.mobile-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 480px; /* Khung chuẩn cho trải nghiệm điện thoại cầm tay */
    margin: 0 auto;
    background-color: var(--sixos-bg);
    position: relative;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.06);
}

/* Header cố định đỉnh kèm hỗ trợ tai thỏ */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(44px + var(--safe-area-top));
    padding-top: var(--safe-area-top);
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--sixos-primary), var(--sixos-primary-dark));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;
    padding-right: 8px;
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateZ(0); /* Kích hoạt tăng tốc phần cứng GPU */
}

.mobile-header .header-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.mobile-header .header-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    min-width: 36px;
    min-height: 36px; /* Đảm bảo vùng chạm ngón cái */
}

.mobile-header .header-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* Vùng nội dung cuộn chính */
.mobile-content {
    margin-top: calc(44px + var(--safe-area-top));
    margin-bottom: calc(52px + var(--safe-area-bottom));
    padding: 8px;
    flex: 1;
}

/* Bottom Navigation Bar cố định đáy kèm hỗ trợ thanh gạt Home iOS */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(52px + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    max-width: 480px;
    margin: 0 auto;
    background: #ffffff;
    border-top: 1px solid var(--sixos-border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 1030;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
    transform: translateZ(0);
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sixos-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 0;
    transition: color 0.15s ease-in-out;
}

.mobile-nav-item svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}

.mobile-nav-item.active {
    color: var(--sixos-primary);
}

.mobile-nav-item:active {
    background-color: var(--sixos-primary-subtle);
}

/* =====================================================================================
   3. CARD & ROW (MẬT ĐỘ THÔNG TIN CAO - TỐI ƯU MOBILE)
   ===================================================================================== */
.compact-card {
    background-color: var(--sixos-card-bg);
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

.compact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sixos-border-light);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.compact-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sixos-text);
    letter-spacing: -0.2px;
    margin: 0;
}

.meta-text {
    font-size: 12px;
    color: var(--sixos-muted);
}

/* Số tiền định dạng nổi bật */
.money-income {
    color: var(--sixos-income);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.2px;
}

.money-expense {
    color: var(--sixos-expense);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.2px;
}

/* Dòng danh sách rút gọn (Dùng cho DM_ tables) */
.condensed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--sixos-border);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 5px;
    min-height: 40px; /* Touch target chuẩn */
}

.condensed-row:active {
    background-color: var(--sixos-border-light);
}

/* =====================================================================================
   4. BADGES VÀ NÚT BẤM (COMPACT NHƯNG DỄ CHẠM)
   ===================================================================================== */
.badge-sm {
    font-size: 10px;
    font-weight: 600;
    padding: 2.5px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.badge-income { background-color: var(--sixos-income-bg); color: var(--sixos-income); }
.badge-expense { background-color: var(--sixos-expense-bg); color: var(--sixos-expense); }
.badge-warning { background-color: var(--sixos-warning-bg); color: var(--sixos-warning); }
.badge-neutral { background-color: #f1f5f9; color: var(--sixos-muted); }
.badge-info { background-color: var(--sixos-info-bg); color: var(--sixos-info); }

.btn-compact {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    height: 36px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    transition: transform 0.08s ease, opacity 0.08s ease;
}

.btn-compact:active,
.btn-compact-sm:active {
    transform: scale(0.96);
    opacity: 0.85;
}

.btn-compact-sm {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    height: 30px;
    min-height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: transform 0.08s ease, opacity 0.08s ease;
}

/* Nút Chủ đạo Xanh */
.btn-sixos-primary {
    background-color: var(--sixos-primary);
    color: #ffffff;
    border: none;
}

.btn-sixos-primary:active {
    background-color: var(--sixos-primary-dark);
    color: #ffffff;
}

/* =====================================================================================
   5. FORM NHẬP LIỆU GỌN GÀNG (INPUT COMPACT & CHỐNG ZOOM SAFARI)
   ===================================================================================== */
.form-compact label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sixos-muted);
    margin-bottom: 3px;
    display: block;
}

.form-compact .form-control,
.form-compact .form-select {
    font-size: 12px;
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--sixos-border);
    background-color: #ffffff;
    -webkit-appearance: none;
}

/* Đảm bảo cỡ chữ ô nhập chuẩn 12px trên màn hình mobile */
@media (max-width: 768px) {
    .form-compact .form-control,
    .form-compact .form-select,
    .form-control,
    .form-select {
        font-size: 12px !important;
    }
}

.form-compact .form-control:focus,
.form-compact .form-select:focus {
    border-color: var(--sixos-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    outline: none;
}

/* =====================================================================================
   6. OFFCANVAS / BOTTOM SHEET (VỚI THANH KÉO VUỐT DRAG-HANDLE)
   ===================================================================================== */
.offcanvas-bottom {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    max-height: 85vh;
    border: none !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

/* Thanh kéo vuốt trực quan trên đỉnh Bottom Sheet */
.sheet-drag-handle {
    width: 36px;
    height: 4px;
    background-color: #cbd5e1;
    border-radius: 2px;
    margin: 8px auto 4px auto;
}

.offcanvas-bottom .offcanvas-header {
    padding: 4px 14px 8px 14px;
    border-bottom: 1px solid var(--sixos-border-light);
}

.offcanvas-bottom .offcanvas-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sixos-primary-dark);
}

.offcanvas-bottom .offcanvas-body {
    padding: 10px 14px;
    padding-bottom: calc(14px + var(--safe-area-bottom));
}

/* =====================================================================================
   7. FLOATING ACTION BUTTON (FAB)
   ===================================================================================== */
.mobile-fab {
    position: fixed;
    bottom: calc(64px + var(--safe-area-bottom));
    right: calc(50% - 224px); /* Bám mép shell 480px */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sixos-primary), var(--sixos-primary-dark));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
    z-index: 1020;
    border: none;
    text-decoration: none;
    transform: translateZ(0);
}

@media (max-width: 480px) {
    .mobile-fab {
        right: 14px;
    }
}

.mobile-fab:active {
    transform: scale(0.92);
}

/* =====================================================================================
   8. KẾ THỪA TỪ STYLEMAU: BẢNG GHIM CỘT (STICKY COLUMNS) TRÊN MOBILE
   ===================================================================================== */
.table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid var(--sixos-table-border);
}

.table-compact {
    width: 100%;
    margin-bottom: 0;
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.table-compact th,
.table-compact td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--sixos-table-border);
    white-space: nowrap;
    vertical-align: middle;
}

.table-compact th {
    background-color: #f1f5f9;
    font-weight: 700;
    font-size: 11px;
    color: var(--sixos-muted);
    text-transform: uppercase;
}

/* =====================================================================================
   8. SIXOS STANDARD RESPONSIVE SCROLL TABLE (CHUẨN CHUNG TOÀN HỆ THỐNG CHO MOBILE & DESKTOP)
   - Cột dữ liệu rộng rãi, vuốt chạm cuộn ngang mượt mà có quán tính (touch momentum).
   - Ghim cố định cột Thao tác (phải) hoặc Mã/STT (trái) với nền đặc & bóng đổ chống đè chữ.
   - Bung rộng 100% tự nhiên không cần cuộn khi hiển thị trên màn hình Desktop.
   ===================================================================================== */

/* 1. Khung bao bọc cuộn ngang (Wrapper Container) */
.table-sticky-wrapper,
.sixos-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--sixos-table-border) !important;
}

.table-sticky-wrapper::-webkit-scrollbar,
.sixos-table-wrapper::-webkit-scrollbar {
    height: 5px;
}

.table-sticky-wrapper::-webkit-scrollbar-track,
.sixos-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.table-sticky-wrapper::-webkit-scrollbar-thumb,
.sixos-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* 2. Bảng dữ liệu cuộn chuẩn chung (Table Element) */
.table-scrollable,
.table-phieuchi-history,
.table-phieuthu-history {
    min-width: 650px;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table-phieuthu-history {
    min-width: 840px; /* Bảng Phiếu Thu có 7 cột tăng kích thước to rõ, dễ nhìn */
}

.table-scrollable th,
.table-scrollable td,
.table-phieuchi-history th,
.table-phieuchi-history td,
.table-phieuthu-history th,
.table-phieuthu-history td {
    border-top: none;
    border-left: none;
    border-right: 1px solid var(--sixos-table-border) !important;
    border-bottom: 1px solid var(--sixos-table-border) !important;
    vertical-align: middle;
}

/* 3. Ghim cột bên phải (Thao tác / Trạng thái) - Nền đặc chống đè chữ & Đổ bóng nổi */
.col-sticky-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 5 !important;
    background-color: #ffffff !important;
    border-left: 1px solid var(--sixos-table-border) !important;
    border-right: none !important;
    box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.1) !important;
}

th.col-sticky-right {
    z-index: 6 !important;
    background-color: #f1f5f9 !important;
}

.table-hover tbody tr:hover td.col-sticky-right {
    background-color: #f8fafc !important;
}

/* 4. Ghim cột bên trái (Mã phiếu / STT) - Nền đặc & Đổ bóng sang phải */
.col-sticky-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: #ffffff !important;
    border-right: 1px solid var(--sixos-table-border) !important;
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.1) !important;
}

th.col-sticky-left {
    z-index: 6 !important;
    background-color: #f1f5f9 !important;
}

.table-hover tbody tr:hover td.col-sticky-left {
    background-color: #f8fafc !important;
}

/* 5. Tự động bung rộng 100% trên màn hình Desktop (>= 1025px) */
@media (min-width: 1025px) {
    .table-scrollable,
    .table-phieuchi-history,
    .table-phieuthu-history {
        min-width: 100% !important;
    }
}

/* 6. Đồng bộ viền đậm vừa vặn, sắc nét cho mọi Table trong hệ thống (Không quá đậm) */
table,
.table,
.table-bordered,
.table-compact,
#dmTable {
    --bs-table-border-color: var(--sixos-table-border) !important;
    border-color: var(--sixos-table-border) !important;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--sixos-table-border) !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--sixos-table-border) !important;
}

.table-compact.table-bordered th,
.table-compact.table-bordered td {
    border: 1px solid var(--sixos-table-border) !important;
}

.table-responsive.border,
.table-responsive.rounded-3.border,
.table-responsive.rounded-2.border,
.compact-card .border.rounded-2 {
    border-color: var(--sixos-table-border) !important;
}

/* =====================================================================================
   9. SEGMENTED CONTROL (BỘ GẠT CHỌN TAB CON KIỂU NATIVE MOBILE)
   ===================================================================================== */
.segmented-control {
    display: flex;
    background-color: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
    margin-bottom: 8px;
    gap: 2px;
}

.segmented-item {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sixos-muted);
    border-radius: 7px;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.segmented-item:active {
    opacity: 0.7;
}

.segmented-item.active {
    background-color: #ffffff;
    color: var(--sixos-text);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.08);
}

/* =====================================================================================
   10. TIỆN ÍCH SIÊU GỌN (ULTRA-COMPACT UTILITIES)
   ===================================================================================== */
.p-05 { padding: 0.15rem !important; }
.m-05 { margin: 0.15rem !important; }
.mt-05 { margin-top: 0.15rem !important; }
.mb-05 { margin-bottom: 0.15rem !important; }
.py-05 { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
.px-05 { padding-left: 0.15rem !important; padding-right: 0.15rem !important; }

.text-truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================================
   11. RESPONSIVE HYBRID: DESKTOP (> 1024px) vs MOBILE/TABLET (<= 1024px)
   ===================================================================================== */

/* MẶC ĐỊNH: ẨN DESKTOP NAVBAR TRÊN MOBILE / TABLET */
.desktop-top-navbar {
    display: none !important;
}

/* =====================================================================================
   KHI MÀN HÌNH LỚN HƠN TABLET 11 INCH (> 1024px) - CHẾ ĐỘ DESKTOP TOÀN DIỆN (>= 14PX)
   ===================================================================================== */
@media (min-width: 1025px) {
    /* 1. Nâng cỡ chữ toàn trang lên chuẩn Desktop (14px) */
    html {
        font-size: 14px !important;
    }

    body {
        font-size: 14px !important;
        background-color: #ffffff;
    }

    /* 2. Ẩn toàn bộ Header & Bottom Navigation của Mobile */
    .mobile-header,
    .mobile-bottom-nav,
    .sheet-drag-handle {
        display: none !important;
    }

    /* 3. Kích hoạt Top Navbar cố định ở đỉnh màu xanh dương */
    .desktop-top-navbar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: linear-gradient(135deg, var(--sixos-primary), var(--sixos-primary-dark));
        z-index: 1030;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        transform: translateZ(0);
    }

    .desktop-nav-container {
        max-width: 1400px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
    }

    .desktop-nav-brand {
        display: flex;
        align-items: center;
    }

    .logo-badge-desktop {
        background: #ffffff;
        padding: 4px 12px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transition: transform 0.15s ease;
    }

    .logo-badge-desktop:hover {
        transform: scale(1.02);
    }

    /* Danh sách các mục chọn */
    .desktop-nav-menu {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-link-item {
        color: #ffffff;
        font-size: 14.5px !important;
        font-weight: 700;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        transition: all 0.15s ease-in-out;
        border: none;
        background: transparent;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
    }

    .nav-link-item:hover {
        background-color: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }

    .nav-link-item.active {
        background-color: rgba(255, 255, 255, 0.26);
        color: #ffffff;
        font-weight: 700;
        box-shadow: inset 0 -2px 0 #ffffff;
    }

    .dropdown-caret {
        font-size: 10px;
        margin-left: 6px;
        color: #ffffff;
        opacity: 1;
        transition: transform 0.15s ease;
    }

    .nav-item-dropdown {
        position: relative;
    }

    .nav-item-dropdown .dropdown-menu {
        border-radius: 8px;
        border: 1px solid var(--sixos-border);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        padding: 6px;
        margin-top: 6px;
        min-width: 190px;
    }

    .nav-item-dropdown .dropdown-item {
        font-size: 14px !important;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 6px;
        color: var(--sixos-text);
        transition: background 0.15s ease;
    }

    .nav-item-dropdown .dropdown-item:hover {
        background-color: var(--sixos-primary-light);
        color: var(--sixos-primary-dark);
    }

    .nav-item-dropdown .dropdown-item.active {
        background-color: var(--sixos-primary);
        color: #ffffff;
        font-weight: 600;
    }

    /* Khu vực User info góc phải */
    .desktop-nav-user {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .user-info-box {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #ffffff;
    }

    .user-name {
        font-size: 14px !important;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .user-role-badge {
        background-color: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 12px !important;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-logout-desktop {
        background-color: transparent;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 13.5px !important;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .btn-logout-desktop:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: #ffffff;
    }

    .btn-login-desktop {
        background-color: #ffffff;
        color: var(--sixos-primary-dark);
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 14px !important;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transition: all 0.15s ease;
    }

    .btn-login-desktop:hover {
        background-color: #f1f5f9;
        color: var(--sixos-primary-dark);
    }

    /* 4. Khung nội dung bung rộng chuẩn Desktop */
    .mobile-app-shell {
        max-width: 100% !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
        min-height: 100vh;
    }

    .mobile-content {
        margin-top: 56px !important;
        margin-bottom: 0 !important;
        padding: 24px 32px !important;
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        font-size: 14px !important;
    }

    /* Nâng cấp Card & Bảng trên Desktop */
    .compact-card {
        padding: 16px 20px;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .compact-card-title {
        font-size: 16px !important;
        font-weight: 700;
    }

    .meta-text {
        font-size: 13.5px !important;
    }

    /* Bộ chọn Tab Segmented Control */
    .segmented-control {
        height: 42px !important;
        padding: 4px !important;
        border-radius: 10px !important;
    }

    .segmented-item {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 6px 16px !important;
    }

    /* Form Controls & Labels */
    .form-compact label,
    .form-label,
    .filter-label,
    label {
        font-size: 13.5px !important;
        margin-bottom: 4px;
    }

    .form-compact .form-control,
    .form-compact .form-select,
    .form-control,
    .form-select,
    .filter-input {
        font-size: 14px !important;
        height: 38px;
        padding: 6px 12px;
    }

    textarea.form-control {
        height: auto !important;
    }

    .btn,
    .btn-compact {
        font-size: 14px !important;
        padding: 8px 18px;
    }

    .btn-compact-sm {
        font-size: 13px !important;
        padding: 5px 12px;
    }

    /* Bảng dữ liệu (Table) chuẩn Desktop: to rõ >= 14px */
    table,
    .table,
    .table-compact,
    #dmTable {
        font-size: 14px !important;
    }

    table th,
    .table th,
    .table-compact th,
    #dmTable th {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 10px 8px !important;
    }

    table td,
    .table td,
    .table-compact td,
    #dmTable td {
        font-size: 14px !important;
        padding: 10px 8px !important;
    }

    table td div,
    .table td div,
    #dmTable td div {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* Badges trạng thái trên Desktop */
    .badge,
    .badge-sm {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    /* Nút thao tác trong bảng trên Desktop */
    #dmTable td button,
    .table td button {
        width: 28px !important;
        height: 28px !important;
    }

    #dmTable td button svg,
    .table td button svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* =================================================================================
       CÂN BẰNG TỶ LỆ CỘT BẢNG DANH MỤC TRÊN DESKTOP (KHẮC PHỤC CỘT TÊN BỊ KÉO QUÁ DÀI)
       ================================================================================= */
    /* 1. Loại thu chi (4 cột: Tên loại 38%, Phân loại 20%, Trạng thái 22%, Thao tác 20%) */
    .table-dm-loaithuchi thead th:nth-child(1) { width: 38% !important; }
    .table-dm-loaithuchi thead th:nth-child(2) { width: 20% !important; }
    .table-dm-loaithuchi thead th:nth-child(3) { width: 22% !important; }
    .table-dm-loaithuchi thead th:nth-child(4) { width: 20% !important; }

    /* 2. Nhân viên (4 cột: Tên NV 32%, SĐT 24%, Chức vụ 26%, Thao tác 18%) */
    .table-dm-nhanvien thead th:nth-child(1) { width: 32% !important; }
    .table-dm-nhanvien thead th:nth-child(2) { width: 24% !important; }
    .table-dm-nhanvien thead th:nth-child(3) { width: 26% !important; }
    .table-dm-nhanvien thead th:nth-child(4) { width: 18% !important; }

    /* 3. Dự án (4 cột: Tên dự án 30%, Ghi chú 42%, Trạng thái 14%, Thao tác 14%) */
    .table-dm-duan thead th:nth-child(1) { width: 30% !important; }
    .table-dm-duan thead th:nth-child(2) { width: 42% !important; }
    .table-dm-duan thead th:nth-child(3) { width: 14% !important; }
    .table-dm-duan thead th:nth-child(4) { width: 14% !important; }

    /* 4. Đối tác (6 cột: Tên đối tác 26%, Hình thức 18%, Lần đầu 12%, Đơn giá 18%, Trạng thái 13%, Thao tác 13%) */
    .table-dm-doitac thead th:nth-child(1) { width: 26% !important; }
    .table-dm-doitac thead th:nth-child(2) { width: 18% !important; }
    .table-dm-doitac thead th:nth-child(3) { width: 12% !important; }
    .table-dm-doitac thead th:nth-child(4) { width: 18% !important; }
    .table-dm-doitac thead th:nth-child(5) { width: 13% !important; }
    .table-dm-doitac thead th:nth-child(6) { width: 13% !important; }

    /* 5. Lịch sử Phiếu Chi (6 cột: Dự án 28%, NV 20%, Ngày 14%, Trạng thái 14%, Số tiền 14%, Thao tác 10%) */
    .table-phieuchi-history thead th:nth-child(1) { width: 28% !important; }
    .table-phieuchi-history thead th:nth-child(2) { width: 20% !important; }
    .table-phieuchi-history thead th:nth-child(3) { width: 14% !important; }
    .table-phieuchi-history thead th:nth-child(4) { width: 14% !important; }
    .table-phieuchi-history thead th:nth-child(5) { width: 14% !important; }
    .table-phieuchi-history thead th:nth-child(6) { width: 10% !important; }

    /* 6. Lịch sử Phiếu Thu (7 cột: Dự án 22%, Đối tác 18%, NV 16%, Ngày 12%, Trạng thái 11%, Số tiền 13%, Thao tác 8%) */
    .table-phieuthu-history thead th:nth-child(1) { width: 22% !important; }
    .table-phieuthu-history thead th:nth-child(2) { width: 18% !important; }
    .table-phieuthu-history thead th:nth-child(3) { width: 16% !important; }
    .table-phieuthu-history thead th:nth-child(4) { width: 12% !important; }
    .table-phieuthu-history thead th:nth-child(5) { width: 11% !important; }
    .table-phieuthu-history thead th:nth-child(6) { width: 13% !important; }
    .table-phieuthu-history thead th:nth-child(7) { width: 8% !important; }

    /* KPI Cards trong Dashboard / Báo Cáo */
    .kpi-card-title {
        font-size: 13.5px !important;
    }

    .kpi-card-value {
        font-size: 22px !important;
    }

    .kpi-card-sub {
        font-size: 12.5px !important;
    }

    .quick-date-btn {
        font-size: 13px !important;
        padding: 6px 14px !important;
    }
}

/* =====================================================================================
   SIXOS TOAST NOTIFICATIONS (THAY THẾ ALERT MẶC ĐỊNH CỦA TRÌNH DUYỆT)
   ===================================================================================== */
.sixos-toast-container {
    position: fixed;
    top: calc(var(--safe-area-top) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.sixos-toast {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    word-break: break-word;
    text-align: center;
}

.sixos-toast.toast-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sixos-toast.toast-hide {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
}

.sixos-toast-success {
    background-color: #16a34a;
}

.sixos-toast-danger {
    background-color: #dc2626;
}

.sixos-toast-warning {
    background-color: #ea580c;
}

.sixos-toast-info {
    background-color: #0284c7;
}

/* =====================================================================================
   12. REPORT LAYOUT & COMPONENTS (BÁO CÁO TỔNG HỢP THU CHI)
   - Bố cục 2 cột: Bộ lọc bên trái (Sticky Sidebar), Dữ liệu bên phải (KPI + Table)
   - Responsive Mobile (Gập mở hoặc Xếp chồng gọn gàng) vs Desktop (> 1024px)
   ===================================================================================== */
.report-layout-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.report-filter-sidebar {
    width: 300px;
    min-width: 280px;
    max-width: 320px;
    background-color: var(--sixos-card-bg);
    border: 1px solid var(--sixos-border);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.report-data-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* KPI Cards Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.kpi-card {
    background-color: var(--sixos-card-bg);
    border: 1px solid var(--sixos-border);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.kpi-card.kpi-primary::before { background-color: var(--sixos-primary); }
.kpi-card.kpi-income::before { background-color: var(--sixos-income); }
.kpi-card.kpi-expense::before { background-color: var(--sixos-expense); }
.kpi-card.kpi-warning::before { background-color: var(--sixos-warning); }
.kpi-card.kpi-info::before { background-color: var(--sixos-info); }

.kpi-card-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--sixos-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kpi-card-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--sixos-text);
    margin-top: 4px;
    line-height: 1.2;
}

.kpi-card-sub {
    font-size: 10.5px;
    color: var(--sixos-muted);
    margin-top: 4px;
}

/* Quick Date Pills */
.quick-date-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.quick-date-btn {
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 600;
    background-color: var(--sixos-primary-subtle);
    color: var(--sixos-primary);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-date-btn:hover {
    background-color: var(--sixos-primary-light);
    color: var(--sixos-primary-dark);
}

.quick-date-btn.active {
    background-color: var(--sixos-primary);
    color: #ffffff;
}

/* Filter Groups */
.filter-group {
    margin-bottom: 10px;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sixos-muted);
    margin-bottom: 4px;
    display: block;
}

.filter-input {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    font-size: 11.5px;
    border: 1px solid var(--sixos-border);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--sixos-text);
    outline: none;
    transition: border-color 0.15s ease;
}

.filter-input:focus {
    border-color: var(--sixos-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .report-layout-container {
        flex-direction: column;
    }

    .report-filter-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .report-filter-sidebar {
        position: sticky;
        top: 70px;
    }
}

/* Tối ưu khoảng trống cực gọn cho tab Báo Cáo, Phiếu Chi, Phiếu Thu, không bị che bởi header */
.baocao-container,
.phieuchi-container,
.phieuthu-container {
    margin-top: 0 !important;
}

.baocao-container .segmented-control,
.phieuchi-container .segmented-control,
.phieuthu-container .segmented-control {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding: 2px !important;
}

@media (min-width: 1025px) {
    .mobile-content:has(.baocao-container),
    .mobile-content:has(.phieuchi-container),
    .mobile-content:has(.phieuthu-container) {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 6px !important;
        max-width: 100% !important;
    }
}

/* =====================================================================================
   13. IOS BOTTOM SHEET CHUẨN NATIVE CHO CÁC BOOTSTRAP MODAL TRÊN MOBILE
   ===================================================================================== */
@media (max-width: 576px) {
    .modal.fade:not(.modal-center):not(#modalViewImage):not(#modalImageViewer) .modal-dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .modal.show:not(.modal-center):not(#modalViewImage):not(#modalImageViewer) .modal-dialog {
        transform: translateY(0) !important;
    }

    .modal:not(.modal-center):not(#modalViewImage):not(#modalImageViewer) .modal-dialog-centered {
        min-height: auto !important;
    }

    .modal:not(.modal-center):not(#modalViewImage):not(#modalImageViewer) .modal-content {
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        padding-bottom: calc(12px + var(--safe-area-bottom)) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15) !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }

    /* Thanh gạch kéo vuốt chuẩn iOS trên đỉnh modal Bottom Sheet */
    .modal:not(.modal-center):not(#modalViewImage):not(#modalImageViewer) .modal-content::before {
        content: '';
        display: block;
        width: 38px;
        height: 4.5px;
        background-color: #d1d1d6;
        border-radius: 3px;
        margin: 8px auto 2px auto;
        flex-shrink: 0;
    }

    .modal-header {
        border-bottom: 1px solid var(--sixos-border-light) !important;
        padding-top: 4px !important;
    }

    .modal-backdrop.show {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        background-color: rgba(0, 0, 0, 0.35) !important;
        opacity: 1 !important;
    }

    /* =================================================================================
       MODAL XEM ẢNH CHỨNG TỪ: CĂN GIỮA MÀN HÌNH (CENTERED POPUP), KHÔNG DÙNG BOTTOM SHEET
       ================================================================================= */
    .modal.modal-center .modal-dialog,
    #modalViewImage .modal-dialog,
    #modalImageViewer .modal-dialog {
        margin: auto !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 24px) !important;
        max-width: 500px !important;
        min-height: calc(100% - 2rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: scale(0.92) !important;
        transition: transform 0.22s ease-out !important;
    }

    .modal.modal-center.show .modal-dialog,
    #modalViewImage.show .modal-dialog,
    #modalImageViewer.show .modal-dialog {
        transform: scale(1) !important;
    }

    .modal.modal-center .modal-content,
    #modalViewImage .modal-content,
    #modalImageViewer .modal-content {
        border-radius: 16px !important;
        border: none !important;
        padding-bottom: 0 !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
        max-height: 85vh !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* Bỏ thanh kéo vuốt Bottom Sheet đối với modal xem ảnh căn giữa */
    .modal.modal-center .modal-content::before,
    #modalViewImage .modal-content::before,
    #modalImageViewer .modal-content::before {
        display: none !important;
    }
}

/* =====================================================================================
   FLATPICKR SIXOS - ĐỒNG NHẤT CHUẨN dd_MM_yyyy TRÊN DESKTOP, IOS VÀ ANDROID
   ===================================================================================== */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid var(--sixos-border) !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    padding: 6px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #ffffff !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    border-top-color: #ffffff !important;
}

/* Header tháng & năm */
.flatpickr-months .flatpickr-month {
    color: var(--sixos-text) !important;
    fill: var(--sixos-text) !important;
    height: 38px !important;
}

.flatpickr-current-month {
    font-size: 105% !important;
    padding-top: 6px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 700 !important;
    color: var(--sixos-primary) !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 700 !important;
    color: var(--sixos-text) !important;
}

/* Tên thứ trong tuần */
span.flatpickr-weekday {
    color: var(--sixos-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Ô ngày */
.flatpickr-day {
    border-radius: 8px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sixos-text) !important;
}

.flatpickr-day.today {
    border-color: var(--sixos-primary) !important;
    background-color: var(--sixos-primary-subtle) !important;
    color: var(--sixos-primary-dark) !important;
    font-weight: 700 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--sixos-primary) !important;
    border-color: var(--sixos-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.4) !important;
}

.flatpickr-day:hover:not(.selected) {
    background: var(--sixos-primary-light) !important;
    color: var(--sixos-primary-dark) !important;
}

/* Ô nhập liệu Flatpickr hiển thị (altInput) */
.flatpickr-input[readonly] {
    background-color: #ffffff !important;
    cursor: pointer !important;
}

/* =====================================================================================
   TOMSELECT & DROPDOWN - CHUẨN GIAO DIỆN SIXOS (TỐI ƯU MOBILE & DESKTOP)
   - Viền đậm nhẹ, sắc nét (#b8c4ce), không quá đậm, đồng bộ toàn hệ thống
   - Đảm bảo hiển thị viền trên mọi dropdown (Native select & TomSelect)
   ===================================================================================== */

/* 1. Viền đồng bộ cho các Dropdown/Select nguyên bản (Native select) */
select,
select.form-select,
select.form-select-sm,
select.form-control,
select.filter-input {
    border: 1px solid var(--sixos-table-border, #b8c4ce) !important;
    border-radius: 6px !important;
}

/* 2. TomSelect Wrapper: Reset để không bị viền ngoài / viền kép */
.ts-wrapper {
    width: 100% !important;
}

.ts-wrapper,
.ts-wrapper.form-select,
.ts-wrapper.form-select-sm,
.ts-wrapper.form-control,
.ts-wrapper.filter-input {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 3. Viền chuẩn trên ô chọn của TomSelect (.ts-control):
      Độ ưu tiên cao nhất, khắc phục triệt để conflict từ tom-select.bootstrap5.css */
.ts-wrapper .ts-control,
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.filter-input .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.form-select.single.input-active .ts-control,
.ts-wrapper.form-control.single.input-active .ts-control,
.ts-wrapper.form-select:not(.disabled) .ts-control {
    border: 1px solid var(--sixos-table-border, #b8c4ce) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-size: 12.5px !important;
    min-height: 35px !important;
    padding: 6px 30px 6px 10px !important;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

/* Hiệu ứng khi focus hoặc mở dropdown */
.ts-wrapper.focus .ts-control,
.ts-wrapper.form-select.focus .ts-control,
.ts-wrapper.form-control.focus .ts-control,
.ts-wrapper.filter-input.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.form-select.dropdown-active .ts-control,
select:focus,
select.form-select:focus,
select.filter-input:focus {
    border-color: var(--sixos-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18) !important;
    outline: none !important;
}

.ts-wrapper.disabled .ts-control,
select:disabled {
    background-color: #f1f5f9 !important;
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--sixos-border-light, #e2e8f0) !important;
}

.ts-wrapper .ts-control input {
    font-size: 12.5px !important;
    cursor: inherit;
}

.ts-wrapper.single .ts-control::after {
    border-color: #64748b transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    right: 12px !important;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent #64748b transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.ts-dropdown {
    border: 1px solid var(--sixos-table-border, #b8c4ce) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important;
    font-size: 12.5px !important;
    z-index: 99999 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
}

.ts-dropdown .dropdown-input-wrap {
    padding: 6px 8px !important;
    border-bottom: 1px solid #e2e8f0;
}

.ts-dropdown .dropdown-input {
    border: 1px solid var(--sixos-table-border, #b8c4ce) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    width: 100% !important;
    outline: none !important;
}

.ts-dropdown .dropdown-input:focus {
    border-color: var(--sixos-primary) !important;
}

.ts-dropdown .option {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.35;
    color: var(--sixos-text) !important;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
}

.ts-dropdown .option:last-child {
    border-bottom: none;
}

.ts-dropdown .option.active {
    background-color: var(--sixos-primary-light) !important;
    color: var(--sixos-primary-dark) !important;
    font-weight: 500;
}

.ts-dropdown .option.selected {
    background-color: var(--sixos-primary-subtle) !important;
    color: var(--sixos-primary) !important;
    font-weight: 600;
}

.ts-dropdown .no-results {
    padding: 12px 8px !important;
    color: var(--sixos-muted) !important;
    font-size: 12px !important;
    text-align: center;
}

/* Nâng cấp kích thước TomSelect trên Desktop (>= 1025px) */
@media (min-width: 1025px) {
    .ts-wrapper .ts-control,
    .ts-wrapper.form-select .ts-control,
    .ts-wrapper.form-select-sm .ts-control,
    .ts-wrapper.filter-input .ts-control {
        font-size: 14px !important;
        min-height: 38px !important;
    }
    .ts-wrapper .ts-control input {
        font-size: 14px !important;
    }
    .ts-dropdown,
    .ts-dropdown .option {
        font-size: 14px !important;
    }
}