/* ============================================================
   VCNA THEME — DESIGN SYSTEM
   Màu sắc, layout, components
   ============================================================ */

/* ─── CSS Custom Properties ─── */
:root {
    /* Brand Colors */
    --color-primary:      #f57c00;  /* Orange chính */
    --color-primary-dark: #e65100;
    --color-primary-light:#fff3e0;

    /* Dark sidebar */
    --color-dark:         #1a1a2e;
    --color-dark-2:       #16213e;
    --color-dark-3:       #0f3460;

    /* Neutrals */
    --color-bg:           #f4f6f9;
    --color-surface:      #ffffff;
    --color-border:       #e2e8f0;
    --color-border-light: #f1f5f9;

    /* Text */
    --color-text-1:       #1a202c;
    --color-text-2:       #4a5568;
    --color-text-3:       #718096;
    --color-text-muted:   #a0aec0;

    /* Semantic */
    --color-success:      #2e7d32;
    --color-success-bg:   #e8f5e9;
    --color-warning:      #e65100;
    --color-warning-bg:   #fff3e0;
    --color-danger:       #c62828;
    --color-danger-bg:    #ffebee;
    --color-info:         #1565c0;
    --color-info-bg:      #e3f2fd;
    --color-purple:       #6a1b9a;
    --color-purple-bg:    #f3e5f5;

    /* Status badges */
    --status-cho-lay:     #1565c0;
    --status-dang-giao:   #e65100;
    --status-da-giao:     #2e7d32;
    --status-huy:         #616161;
    --status-cong-no:     #c62828;

    /* Layout */
    --sidebar-width:      240px;
    --sidebar-collapsed:  60px;
    --topbar-height:      56px;
    --content-padding:    20px;
    --border-radius:      8px;
    --border-radius-sm:   4px;
    --border-radius-lg:   12px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

    /* Transitions */
    --transition: 0.2s ease;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-bg);
    color: var(--color-text-1);
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; }

/* ─── Chặn bôi đen chữ / popup "Tìm kiếm Google" khi chạm giữ — CHỈ trên
   thiết bị cảm ứng (điện thoại/tablet, "pointer: coarse"). Desktop dùng chuột
   (pointer: fine) không có vấn đề này nên KHÔNG bị giới hạn gì — double-click,
   kéo chọn, chuột phải Copy vẫn hoạt động bình thường như mọi trang web khác.
   Trên mobile: Chrome/Android hay Safari/iOS hiện popup "Tap to Search"/
   callout copy-paste khi người dùng lỡ chạm giữ (long-press) vào 1 đoạn chữ
   tĩnh (badge, nhãn, biển số xe...) — chặn mặc định để tránh phiền, nhưng vẫn
   cho phép chủ ý giữ tay lâu hơn để bật lại chọn chữ (xem khối .vcna-lp-active
   + app.js, IIFE cuối file). Input/textarea/richtext luôn chọn được để gõ,
   cắt dán bình thường không bị ảnh hưởng ở cả 2 loại thiết bị. */
@media (hover: none) and (pointer: coarse) {
    .vcna-app {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -webkit-touch-callout: none; /* iOS Safari: tắt menu Copy/Share khi chạm giữ */
    }
    .vcna-app input,
    .vcna-app textarea,
    .vcna-app select,
    .vcna-app [contenteditable="true"] {
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }

    /* Bấm GIỮ (long-press) để bật chọn chữ tạm thời — JS (app.js) gắn class
       này sau ~250ms giữ tay, TRƯỚC khi trình duyệt tự quyết "đây là thao tác
       chạm giữ" (ngưỡng gốc thường 500ms+), để trình duyệt tự hiện UI chọn
       chữ/callout Copy như bình thường ngay trên chính lượt chạm đang giữ. */
    .vcna-lp-active {
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default !important;
    }
}

/* ─── App Shell Layout ─── */
.vcna-app {
    display: flex;
    min-height: 100vh;
}

/* ─── SIDEBAR ─── */
.vcna-sidebar {
    width: var(--sidebar-width);
    /* height (không phải min-height): sidebar là position:fixed nên phải bị chặn
       đúng bằng chiều cao viewport, nếu không flex-child .vcna-sidebar-nav bên
       dưới sẽ không có giới hạn để tính flex:1 → không cuộn được, menu dài bị
       tràn ra ngoài viewport và mất luôn (không có scroll trang bù lại vì phần
       tử đang fixed). */
    height: 100vh;
    max-height: 100vh;
    background: var(--color-dark);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: width var(--transition), transform var(--transition);
    overflow: hidden;
}

.vcna-sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

/* Sidebar Logo */
.vcna-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: var(--topbar-height);
    background: var(--color-dark-3);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.vcna-sidebar-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.vcna-sidebar-logo .logo-text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition);
}

.vcna-sidebar.collapsed .logo-text { opacity: 0; width: 0; }

/* Nút đóng sidebar — chỉ cần trên mobile (drawer che luôn nút ☰ ở topbar khi
   đang mở, xem @media bên dưới); trên desktop sidebar cố định nên ẩn đi. */
.vcna-sidebar-close {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}
.vcna-sidebar-close:hover { color: #fff; }

/* Sidebar Nav */
.vcna-sidebar-nav {
    flex: 1;
    min-height: 0; /* bắt buộc để flex-child cuộn được thay vì tự giãn theo nội dung */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.vcna-sidebar-nav::-webkit-scrollbar { width: 4px; }
.vcna-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Nav Group */
.vcna-nav-group {
    margin-bottom: 4px;
}

.vcna-nav-group-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,.35);
    padding: 10px 16px 4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition), color var(--transition);
}

.vcna-sidebar.collapsed .vcna-nav-group-title { opacity: 0; height: 0; padding: 0; }

/* Nav Group — tiêu đề nhóm, bấm để thu/mở menu con (2026-08, mặc định mở).
   Fix (2026-08): nút bấm trước đây quá mờ (chữ xám nhạt, không rõ là bấm được)
   — tăng độ sáng chữ/mũi tên + thêm nền nhẹ cố định để nhận ra ngay là 1 hàng
   bấm được, không chỉ dựa vào hover (trên mobile không có hover). */
.vcna-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 16px);
    padding: 0 14px 0 0;
    margin: 2px 8px 2px 8px;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    transition: background var(--transition);
}
.vcna-nav-group-toggle:hover { background: rgba(255,255,255,.08); }
.vcna-nav-group-toggle:active { background: rgba(255,255,255,.12); }
.vcna-nav-group-toggle.is-open { background: transparent; }
.vcna-nav-group-toggle.is-open:hover { background: rgba(255,255,255,.05); }

.vcna-nav-group-toggle .vcna-nav-group-title {
    padding: 9px 8px 9px 16px;
    color: rgba(255,255,255,.55);
}
.vcna-nav-group-toggle:hover .vcna-nav-group-title,
.vcna-nav-group-toggle.is-open .vcna-nav-group-title { color: rgba(255,255,255,.4); }

.vcna-nav-group-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.vcna-nav-group-badge {
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.vcna-nav-group-arrow {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    transition: transform var(--transition);
    transform: rotate(-90deg);
    flex-shrink: 0;
}
.vcna-nav-group-toggle.is-open .vcna-nav-group-arrow { transform: rotate(0deg); }
.vcna-sidebar.collapsed .vcna-nav-group-arrow { display: none; }

.vcna-nav-group-items {
    overflow: hidden;
}

/* Nav Item */
.vcna-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    border-radius: 0;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
}

.vcna-nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.vcna-nav-item.active {
    background: var(--color-primary);
    color: #fff;
}

.vcna-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

.vcna-nav-item .nav-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.vcna-nav-item .nav-label {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    transition: opacity var(--transition), width var(--transition);
}

.vcna-sidebar.collapsed .vcna-nav-item .nav-label { opacity: 0; width: 0; }

/* Badge in nav */
.vcna-nav-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.vcna-sidebar.collapsed .vcna-nav-badge { opacity: 0; }

/* Badge xanh — dùng cho số lượng THAM KHẢO (VD: tổng số Báo Giá đang lưu),
   KHÁC với badge đỏ mặc định vốn dành cho việc "cần xử lý gấp" (đơn chờ lấy,
   ứng lương chờ duyệt...) — đổi màu để không gây cảm giác cấp bách nhầm. */
.vcna-nav-badge--info { background: var(--color-info, #2563eb); }

/* Sidebar Footer */
.vcna-sidebar-footer {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.vcna-sidebar-footer .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition);
}

.vcna-sidebar-footer .user-info:hover { background: rgba(255,255,255,.06); }

.vcna-sidebar-footer .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.vcna-sidebar-footer .user-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.vcna-sidebar-footer .user-role {
    font-size: 10px;
    color: rgba(255,255,255,.45);
}

.vcna-sidebar.collapsed .vcna-sidebar-footer .user-name,
.vcna-sidebar.collapsed .vcna-sidebar-footer .user-role { opacity: 0; width: 0; overflow: hidden; }

/* ─── TOPBAR ─── */
.vcna-topbar {
    height: var(--topbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--content-padding);
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 90;
    transition: left var(--transition);
    box-shadow: var(--shadow-sm);
}

.vcna-topbar.sidebar-collapsed { left: var(--sidebar-collapsed); }

.vcna-topbar-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-2);
    font-size: 18px;
    transition: background var(--transition);
    flex-shrink: 0;
}

.vcna-topbar-toggle:hover { background: var(--color-bg); }

.vcna-topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-1);
}
/* Logo app trong topbar — thay cho tên trang chữ bị lặp lại với <h1> của từng trang */
.vcna-topbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vcna-topbar-brand-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.vcna-topbar-brand-text {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--color-dark, #12233f);
}

/* Badge "Ngoại tuyến" — chỉ hiện khi mất mạng (x-show gắn ở header.php) */
.vcna-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #b71c1c;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 12px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .vcna-offline-badge { font-size: 0; padding: 5px 7px; }
    .vcna-offline-badge::before { content: '📡'; font-size: 13px; }
}

.vcna-topbar-search {
    flex: 1;
    max-width: 360px;
    position: relative;
}

.vcna-topbar-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 36px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--color-text-1);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.vcna-topbar-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(245,124,0,.1);
}

.vcna-topbar-search .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.vcna-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.vcna-topbar-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-2);
    font-size: 18px;
    position: relative;
    transition: background var(--transition);
}

.vcna-topbar-btn:hover { background: var(--color-bg); }

@keyframes vcna-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.vcna-refresh-btn:active {
    animation: vcna-spin 0.4s linear;
}

/* ─── NOTIFICATION BELL ─── */
@keyframes vcna-bell-ring {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(15deg); }
    15%  { transform: rotate(-14deg); }
    25%  { transform: rotate(12deg); }
    35%  { transform: rotate(-10deg); }
    45%  { transform: rotate(7deg); }
    55%  { transform: rotate(-5deg); }
    65%  { transform: rotate(3deg); }
    75%  { transform: rotate(-1deg); }
    85%  { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

.vcna-notif-wrap {
    position: relative;
}

/* Rung liên tục khi có thông báo */
.vcna-notif-btn.vcna-notif-ring {
    animation: vcna-bell-ring 2.2s ease-in-out infinite;
    transform-origin: top center;
    color: #e53935;
}

/* Dừng rung khi đang mở panel */
.vcna-notif-btn.vcna-notif-ring.active {
    animation: none;
    color: inherit;
}

.vcna-notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: #e53935;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    border: 2px solid var(--color-surface);
}

.vcna-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    width: 320px;
    max-height: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vcna-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.vcna-notif-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-1);
}

/* Banner "Bật thông báo đẩy" trong dropdown chuông — xem header.php */
.vcna-notif-push-cta {
    padding: 12px 16px;
    background: #fff7ed;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.vcna-notif-push-cta-text {
    font-size: 12px;
    color: var(--color-text-1);
    line-height: 1.4;
}

.vcna-notif-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
}
.vcna-notif-close:hover { background: var(--color-bg); }

.vcna-notif-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.vcna-notif-empty p { margin: 8px 0 0; }

.vcna-notif-list {
    overflow-y: auto;
    flex: 1;
}

.vcna-notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: background .12s ease;
}
.vcna-notif-item:hover { background: var(--color-bg); }
.vcna-notif-item:last-child { border-bottom: none; }

.vcna-notif-item-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    letter-spacing: .5px;
}
.vcna-notif-item.today .vcna-notif-item-badge {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.vcna-notif-item.tomorrow .vcna-notif-item-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.vcna-notif-item-code {
    font-size: 12px;
    font-weight: 700;
    font-family: monospace;
    color: var(--color-text-1);
}

.vcna-notif-item-kh {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-2);
    margin-top: 2px;
}

.vcna-notif-item-route {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: neo cố định ngay dưới topbar, canh giữa màn hình bằng margin trái/phải
   thay vì offset âm theo vị trí icon (dễ lệch nếu đổi chỗ icon trên topbar) —
   cùng cách sửa đã áp dụng cho .vcna-gsearch-panel bên dưới. */
@media (max-width: 500px) {
    .vcna-notif-panel {
        position: fixed;
        top: calc(var(--topbar-height) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
    }
}

.vcna-topbar-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-danger);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── TÌM KIẾM NHANH (icon giữa chuông & refresh) ───
   Panel dùng chung dáng với .vcna-notif-panel để đồng bộ giao diện.
   LƯU Ý: đổi tên "vcna-search-*" → "vcna-gsearch-*" (global search) để
   không trùng tên với bộ class "vcna-search-*" của thanh filter tìm
   trong trang (vd template-don-hang.php) — trước đây trùng tên khiến
   quy tắc position:absolute của thanh filter "leak" sang panel này,
   làm nút ✕ xóa bị văng lệch, neo giữa cả bảng kết quả thay vì nằm
   cạnh ô nhập. */
.vcna-gsearch-wrap { position: relative; }

.vcna-search-btn.active { background: var(--color-bg); color: var(--color-primary); }

.vcna-gsearch-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    width: 320px;
    max-height: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vcna-gsearch-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.vcna-gsearch-input-ico { font-size: 14px; opacity: .5; flex-shrink: 0; }
.vcna-gsearch-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--color-text-1);
    background: none;
}
.vcna-gsearch-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 2px 4px;
    flex-shrink: 0;
}
.vcna-gsearch-clear:hover { color: var(--color-text-1); }

/* Mobile: neo cố định ngay dưới topbar, canh giữa màn hình bằng margin trái/phải
   thay vì offset âm theo vị trí icon (dễ lệch nếu đổi chỗ icon trên topbar). */
@media (max-width: 500px) {
    .vcna-gsearch-panel {
        position: fixed;
        top: calc(var(--topbar-height) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* ─── MAIN CONTENT ─── */
.vcna-main {
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    padding: var(--content-padding);
    min-height: calc(100vh - var(--topbar-height));
    transition: margin-left var(--transition);
    flex: 1;
    /* Nền mờ (soft gradient blur) — vài quầng màu mềm loang nhẹ ở góc trên,
       tan dần vào --color-bg, giống phong cách app tuyển dụng tham khảo.
       Dùng tông màu thương hiệu (cam) + chút xanh tạo chiều sâu, thay vì
       chép nguyên màu xanh của ảnh mẫu để không lệch tông với nút/badge cam
       đã có sẵn. background-attachment: fixed để quầng màu đứng yên theo
       viewport khi cuộn trang, không bị kéo dài lặp lại. */
    background:
        radial-gradient(620px circle at 10% -5%,  rgba(245,124,0,.20), transparent 60%),
        radial-gradient(520px circle at 90% 5%,   rgba(21,101,192,.14), transparent 55%),
        var(--color-bg);
    background-attachment: fixed;
}

.vcna-main.sidebar-collapsed { margin-left: var(--sidebar-collapsed); }

/* Page Header */
.vcna-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.vcna-page-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-1);
}

.vcna-page-header .breadcrumb {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 2px;
}

/* ─── CARDS ─── */
.vcna-card {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.vcna-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.vcna-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vcna-card-body {
    padding: 16px;
}

/* ─── STAT CARDS (Dashboard) ─── */
.vcna-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.vcna-stat-card {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: box-shadow var(--transition), transform var(--transition);
    cursor: default;
}

.vcna-stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.vcna-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.vcna-stat-icon.orange  { background: var(--color-primary-light); }
.vcna-stat-icon.blue    { background: var(--color-info-bg); }
.vcna-stat-icon.green   { background: var(--color-success-bg); }
.vcna-stat-icon.red     { background: var(--color-danger-bg); }
.vcna-stat-icon.purple  { background: var(--color-purple-bg); }
.vcna-stat-icon.gray    { background: #f5f5f5; }

.vcna-stat-info { flex: 1; min-width: 0; }

.vcna-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-3);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vcna-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-1);
    line-height: 1.2;
}

.vcna-stat-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Dòng ghi chú/breakdown thêm dưới giá trị chính (VD: "Xe cty: 7 đơn · Đối tác: 3
   đơn") — giúp giải thích rõ cách 1 số liệu được tính ra, tránh admin thắc mắc vì
   sao Doanh Thu/Lợi Nhuận lại ra số như vậy khi có đơn đối tác chạy chung. */
.vcna-stat-breakdown {
    font-size: 11px;
    color: var(--color-text-2);
    margin-top: 4px;
    line-height: 1.5;
}
.vcna-stat-breakdown b {
    font-weight: 700;
    color: var(--color-text-1);
}

.vcna-stat-delta {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-top: 2px;
    display: inline-block;
}

.vcna-stat-delta.up   { color: var(--color-success); background: var(--color-success-bg); }
.vcna-stat-delta.down { color: var(--color-danger); background: var(--color-danger-bg); }
.vcna-stat-delta.warn { color: var(--color-warning); background: var(--color-warning-bg); }

/* ─── TABLES ─── */
.vcna-table-wrap {
    overflow-x: auto;
    border-radius: var(--border-radius);
}

.vcna-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vcna-table th {
    background: var(--color-bg);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.vcna-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-1);
    vertical-align: middle;
}

.vcna-table tr:last-child td { border-bottom: none; }

.vcna-table tr:hover td { background: rgba(245,124,0,.02); }

.vcna-table .td-mono {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-2);
}

/* ─── Nhóm theo ngày trong bảng Desktop (giống header ngày bên card Mobile) ───
   Gọn, dùng 1 vạch kẻ nổi bật (không phải khối nền dày) để phân tách — nhãn
   ngày "cắt" ngang qua vạch, giống pattern .vcna-date-header bên Mobile. */
.vcna-table-date-row td {
    padding: 0;
    border-bottom: none;
}
.vcna-table-date-row:hover td { background: none; }
.vcna-table-date-cell {
    padding: 6px 12px !important;
    position: relative;
    background: var(--color-surface);
}
.vcna-table-date-cell::before {
    content: '';
    position: absolute;
    left: 12px; right: 12px; top: 50%;
    height: 1px;
    background: var(--color-border);
    z-index: 0;
}
.vcna-table-date-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    background: var(--color-surface);
    padding-right: 10px;
}

/* Dòng phụ nhỏ dưới Tuyến (cột "Giờ" đã thay vị trí cũ) — trước là mã đơn (monospace),
   giờ đổi sang hiện "Tài xế + BSX" / "Đối tác + BSX" nên bỏ font monospace cho dễ đọc. */
.vcna-order-code-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
/* Cảnh báo khi đơn chưa gán tài xế + chưa gán BSX — đổi màu cam cảnh báo để
   dễ nhận biết giữa danh sách, thay vì màu xám mờ như bình thường. */
.vcna-order-code-sub--warn {
    color: var(--color-warning);
    font-weight: 600;
}

/* ─── STATUS BADGES ─── */
.vcna-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.vcna-badge.cho-lay    { background: var(--color-info-bg); color: var(--status-cho-lay); }
.vcna-badge.dang-giao  { background: var(--color-warning-bg); color: var(--status-dang-giao); }
.vcna-badge.da-giao    { background: var(--color-success-bg); color: var(--status-da-giao); }
.vcna-badge.huy        { background: #f5f5f5; color: #616161; }
.vcna-badge.cong-no    { background: var(--color-danger-bg); color: var(--status-cong-no); }
/* Trạng thái tùy chỉnh (thêm từ WP Admin — không có class riêng) */
.vcna-badge.custom-status { background: #e8f4fd; color: #1565c0; }
/* Cảnh báo chưa gán tài xế/BSX — dùng chung ở bảng desktop (thay ".vcna-order-code-sub--warn"
   khi thiếu) và card mobile (cả 2 chế độ xem), xem orderChuaGanTaiXeXe() trong app.js. */
.vcna-badge.warn-gan-tai-xe { background: var(--color-danger-bg); color: var(--color-danger); }
/* Đã Thu — màu riêng (teal), tránh trùng xanh lá với Đã Giao */
.vcna-badge.da-thu     { background: #e0f7fa; color: #00838f; }
.vcna-badge.hoan-thanh { background: #ede9fe; color: #6d28d9; }

/* ─── BUTTONS ─── */
.vcna-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.vcna-btn:active { transform: scale(.98); }

.vcna-btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.vcna-btn-primary:hover {
    background: var(--color-primary-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245,124,0,.3);
}

.vcna-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.vcna-btn-outline:hover {
    background: var(--color-primary-light);
}

.vcna-btn-ghost {
    background: transparent;
    color: var(--color-text-2);
    border: 1px solid var(--color-border);
}

.vcna-btn-ghost:hover { background: var(--color-bg); color: var(--color-text-1); }

/* Nút "Huỷ Đơn Hàng" — CHỈ Admin/Điều Hành thấy (xem sheet "vcna-order-actions-menu"
   trong template-don-hang.php, mở từ nút "⋯" ở header panel chi tiết). Ghi đè màu cam
   mặc định của .vcna-btn-outline bằng màu xám mờ, chỉ rõ đỏ khi hover — tránh bấm nhầm. */
.vcna-link-huy-don-btn {
    color: var(--color-text-muted, #9ca3af);
    border-color: var(--color-border-light, #e5e7eb);
}
.vcna-link-huy-don-btn:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.vcna-btn-danger {
    background: var(--color-danger);
    color: #fff;
}

/* Modal "Huỷ đơn hàng" (tm.type === 'huy') — xem vcna-transition-confirm.php */
.vcna-tm-huy-warn {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #991b1b;
    line-height: 1.5;
    margin-bottom: 10px;
}
.vcna-tm-huy-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-text-1);
    cursor: pointer;
}

.vcna-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.vcna-btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-2);
    font-size: 18px;
    cursor: pointer;
    transition: background var(--transition);
}
.vcna-btn-icon:hover { background: var(--color-bg); }

/* ─── PAGE HEADER ─── */
.vcna-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.vcna-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-1);
    margin: 0 0 2px;
}
.vcna-page-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

/* ─── TABS ─── */
.vcna-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--color-border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}
.vcna-tabs::-webkit-scrollbar { display: none; }
.vcna-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.vcna-tab:hover { color: var(--color-primary); }
.vcna-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }
.vcna-tab-badge {
    background: var(--color-primary);
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
}
.vcna-tab-badge.cho-lay   { background: var(--status-cho-lay); }
.vcna-tab-badge.dang-giao { background: var(--status-dang-giao); }
.vcna-tab-badge.cong-no   { background: var(--status-cong-no); }

/* ─── FILTER BAR ─── */
.vcna-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.vcna-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.vcna-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.vcna-search-input {
    width: 100%;
    padding: 7px 32px 7px 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    background: var(--color-surface);
    color: var(--color-text-1);
    box-sizing: border-box;
    transition: border-color var(--transition);
}
.vcna-search-input:focus { outline: none; border-color: var(--color-primary); }
.vcna-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 14px;
}
.vcna-select {
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    background: var(--color-surface);
    color: var(--color-text-1);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.vcna-select:focus { outline: none; border-color: var(--color-primary); }

/* ─── CUSTOM DROPDOWN (thay <select> gốc) ───────────────────────
   Trình duyệt KHÔNG cho CSS can thiệp vào giao diện popup của thẻ
   <select> gốc (dòng highlight xanh, font hệ thống...) — nên các nơi
   cần bảng chọn đẹp, đồng bộ theme phải dùng component div/Alpine
   này thay vì <select>. Dùng chung 1 pattern HTML:

   <div class="vcna-dd" x-data="{ open: false }" @click.outside="open = false">
       <button type="button" class="vcna-dd-trigger" :class="{ 'is-open': open }" @click="open = !open">
           <span class="vcna-dd-val" :class="{ placeholder: !xxx }" x-text="xxx || 'Chọn...'"></span>
           <svg class="vcna-dd-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
       </button>
       <div class="vcna-dd-panel" x-show="open" x-cloak @click.stop>
           <div class="vcna-dd-option" :class="{ selected: xxx === val }" @click="xxx = val; open = false">Label</div>
       </div>
   </div>
*/
.vcna-dd { position: relative; }
.vcna-dd-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-sm);
    background: var(--color-surface); color: var(--color-text-1);
    font-size: 13px; font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--transition);
}
.vcna-dd-trigger:hover { border-color: var(--color-primary); }
.vcna-dd-trigger.is-open { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(245,124,0,.12); }
.vcna-dd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcna-dd-val.placeholder { color: var(--color-text-muted); }
.vcna-dd-arrow { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--transition); }
.vcna-dd-trigger.is-open .vcna-dd-arrow { transform: rotate(180deg); color: var(--color-primary); }

.vcna-dd-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-surface); border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md);
    z-index: 60; max-height: 240px; overflow-y: auto; padding: 4px;
}
.vcna-dd-option {
    padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--color-text-1);
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    line-height: 1.3;
}
.vcna-dd-option:hover { background: var(--color-bg); }
.vcna-dd-option.selected { background: #fff3e0; color: var(--color-primary); font-weight: 600; }
.vcna-dd-option-check { color: var(--color-primary); font-size: 12px; flex-shrink: 0; }
/* Bọc icon sao VIP + tên chung 1 khối — .vcna-dd-option dùng justify-content:space-between
   nên nếu để icon sao là item con riêng, số item con sẽ lệch (2 vs 3) khiến tên bị đẩy
   lệch giữa so với các dòng không phải VIP. */
.vcna-dd-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcna-dd-option-sub { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); margin-top: 1px; }
.vcna-dd-empty { padding: 12px 10px; text-align: center; color: var(--color-text-muted); font-size: 12px; }

/* ─── DROPDOWN có ô tìm kiếm gõ-lọc (vd: chọn Khách hàng) ───
   Khác .vcna-dd-trigger thường (button) ở chỗ chứa 1 <input> gõ được thay vì
   <span> tĩnh — .vcna-dd-combo-trigger vẫn kế thừa toàn bộ khung/viền của
   .vcna-dd-trigger, chỉ cần bỏ style mặc định của input bên trong. */
.vcna-dd-combo-trigger { cursor: text; }
.vcna-dd-combo-input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    padding: 0; margin: 0; font: inherit; color: var(--color-text-1);
    text-overflow: ellipsis; cursor: text;
}
.vcna-dd-combo-input::placeholder { color: var(--color-text-muted); }

/* ─── TOAST (thông báo nổi, dùng chung toàn app) ───
   Neo cố định dưới topbar, giữa màn hình — luôn nổi trên mọi panel/modal khác. */
.vcna-toast-host {
    position: fixed;
    top: calc(var(--topbar-height, 56px) + 10px);
    left: 50%; transform: translateX(-50%);
    z-index: 9999;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.vcna-toast {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    border-radius: var(--border-radius-md, 10px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.15));
    font-size: 13px; font-weight: 600; line-height: 1.35;
    color: #fff;
    pointer-events: auto;
}
.vcna-toast-icon { flex-shrink: 0; font-size: 13px; }
.vcna-toast-msg { word-break: break-word; }
.vcna-toast-success { background: #16a34a; }
.vcna-toast-danger, .vcna-toast-error { background: #dc2626; }
.vcna-toast-warning { background: #d97706; }

/* ─── TABLE (bổ sung) ─── */
.vcna-order-code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 12px; color: var(--color-primary); }
.vcna-loai-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; background: #f5f5f5; color: #555; }
.vcna-loai-badge.taxi-tai  { background: #fff3e0; color: #e65100; }
.vcna-loai-badge.hang-ghep { background: #e3f2fd; color: #1565c0; }
.vcna-route { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.vcna-route-from, .vcna-route-to { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcna-route-arrow { color: var(--color-text-muted); flex-shrink: 0; }
/* Tóm tắt tuyến ĐẦY ĐỦ (routeShortLabel — có thể nhiều hơn 2 điểm, VD "Nghệ An →
   Hà Nội → Thái Nguyên") thay cho .vcna-route-from/-to vốn chỉ hiện 2 điểm đầu/cuối. */
.vcna-route-summary {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vcna-money { color: var(--color-primary); font-weight: 700; }
.vcna-table-row:hover { background: #fafafa; }

/* ─── EMPTY STATE ─── */
.vcna-empty { padding: 60px 24px; text-align: center; }

/* ─── SKELETON (table rows) ─── */
.vcna-skeleton-table { padding: 8px 0; }
.vcna-skeleton-row {
    display: flex; align-items: center; gap: 24px;
    padding: 14px 20px; border-bottom: 1px solid var(--color-border-light);
}

/* ─── PAGINATION ─── */
.vcna-pagination {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--color-border-light);
}

/* ─── SLIDE-IN PANEL ─── */
.vcna-panel-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.vcna-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 100vw;
    background: var(--color-surface);
    z-index: 1001;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    /* overflow: hidden removed — was clipping native <select> dropdowns */
}
.vcna-panel-wide { width: 560px; }
.vcna-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.vcna-panel-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--color-text-1); }
.vcna-panel-close {
    background: none; border: none; cursor: pointer; font-size: 18px;
    color: var(--color-text-muted); padding: 4px; border-radius: 4px;
    transition: background var(--transition);
}
.vcna-panel-close:hover { background: var(--color-bg); }
.vcna-panel-body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
}

/* Slide-in transitions */
[x-transition\:enter="slide-in-right"] { animation: slideInRight .25s ease; }
[x-transition\:leave="slide-out-right"] { animation: slideOutRight .2s ease; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ─── CREATE ORDER FORM ─── */
.vcna-type-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 16px; border: 2px solid var(--color-border);
    border-radius: var(--border-radius); background: var(--color-surface);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.vcna-type-card:hover { border-color: var(--color-primary); background: #fff8f0; }

.vcna-form-loai-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 20px;
    font-size: 13px; font-weight: 700; margin-bottom: 18px;
    background: #fff3e0; color: #e65100;
}
.vcna-form-loai-badge.hang-ghep { background: #e3f2fd; color: #1565c0; }

/* Hạn giao toggle row */
.vcna-form-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    padding: 8px 0;
    margin: 4px 0 2px;
    border-top: 1px solid var(--color-border-light);
    user-select: none;
}
.vcna-form-toggle-arrow {
    margin-left: auto;
    font-size: 10px;
}

/* ── "Thông tin bổ sung" — nổi bật hơn dòng toggle thường (Hạn giao...), nhưng
   dùng tông chàm/indigo NHẠT thay vì cam (màu của nút Tạo Đơn Hàng chính) để không
   tranh sự chú ý với CTA chính bên dưới. */
.vcna-bosung-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; margin-bottom: 4px;
    border: 1px solid #c7d2fe; border-radius: 10px;
    background: #eef2ff; color: #4338ca;
    cursor: pointer; user-select: none;
    transition: background var(--transition), border-color var(--transition);
}
.vcna-bosung-toggle:hover { background: #e0e7ff; }
.vcna-bosung-toggle.open { border-color: #a5b4fc; background: #e0e7ff; }
.vcna-bosung-toggle-icon { font-size: 15px; flex-shrink: 0; }
.vcna-bosung-toggle-label { font-size: 13px; font-weight: 700; }
.vcna-bosung-toggle-label em { font-style: normal; font-weight: 500; opacity: .75; }
.vcna-bosung-toggle-arrow { margin-left: auto; font-size: 11px; flex-shrink: 0; }

/* Detail panel: hạn giao display */
.vcna-detail-han-giao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    margin: 0 0 12px;
    font-weight: 600;
}
.vcna-detail-han-giao.urgent {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.vcna-detail-han-giao-icon { font-size: 16px; }

.vcna-form-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--color-text-muted);
    margin: 18px 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}
.vcna-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
/* min-width: 0 — bắt buộc cho item nằm trong grid/flex có input bên trong. Mặc định,
   item lưới không co nhỏ hơn kích thước "min-content" của nội dung (ở đây là 1 <input>),
   khiến cột tràn ra ngoài panel dù đã set tỉ lệ fr hợp lý (bug gặp ở hàng Giờ/Phút — panel
   xuất hiện thanh cuộn ngang, ô bên phải bị đẩy khuất). Set min-width:0 để item chịu co
   theo đúng tỉ lệ cột lưới thay vì bung theo nội dung. */
.vcna-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.vcna-form-row, .vcna-ftime-row { min-width: 0; }
.vcna-form-row > *, .vcna-ftime-row > * { min-width: 0; }
.vcna-form-label { font-size: 12px; font-weight: 600; color: var(--color-text-2); }
.vcna-form-label .req { color: var(--color-danger); }
.vcna-input {
    padding: 8px 10px; border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm); font-size: 13px;
    background: var(--color-surface); color: var(--color-text-1);
    width: 100%; box-sizing: border-box; transition: border-color var(--transition);
}
.vcna-input:focus { outline: none; border-color: var(--color-primary); }
.vcna-textarea { min-height: 72px; resize: vertical; }

/* ─── Select tuỳ biến — quy chuẩn chung cho mọi thẻ <select>, thay giao diện
   mặc định của trình duyệt (mũi tên OS, không khớp phong cách app) bằng mũi
   tên + viền riêng. Dùng thêm class này cùng .vcna-input: class="vcna-input
   vcna-select". Giới thiệu đầu tiên ở module Kho Hàng, có thể tái dùng ở nơi
   khác nếu muốn đồng bộ toàn bộ select trong app. */
.vcna-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid #cbd5e1;
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5568' stroke-width='2.2'><polyline points='5 8 10 13 15 8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    cursor: pointer;
}
.vcna-select:hover  { border-color: var(--color-primary); }
.vcna-select:focus  { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(245,124,0,.12); }
.vcna-form-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-light);
}

/* ─── DETAIL PANEL ─── */
.vcna-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 20px;
}
.vcna-detail-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 3px; }
.vcna-detail-val   { font-size: 14px; color: var(--color-text-1); }

.vcna-detail-route {
    background: var(--color-bg); border-radius: var(--border-radius-sm);
    padding: 14px 16px; margin-bottom: 20px; position: relative;
}
.vcna-detail-route-point { display: flex; gap: 10px; align-items: flex-start; }
.vcna-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.vcna-dot-green { background: #4caf50; }
.vcna-dot-red   { background: #f44336; }
.vcna-route-line {
    width: 2px; height: 20px; background: var(--color-border-light);
    margin: 4px 0 4px 4px;
}

.vcna-detail-note {
    background: #fff8e1; border-left: 3px solid var(--color-warning);
    padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px;
}


.vcna-status-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.vcna-btn-status-active { background: var(--color-primary) !important; color: #fff !important; border-color: transparent !important; }

/* ─── TIMELINE ─── */
.vcna-timeline { position: relative; padding-left: 16px; }
.vcna-timeline-item { position: relative; padding: 0 0 14px 20px; }
.vcna-timeline-dot {
    position: absolute; left: 0; top: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-primary);
}
.vcna-timeline-item::before {
    content: ''; position: absolute; left: 3px; top: 12px;
    width: 2px; bottom: 0; background: var(--color-border-light);
}
.vcna-timeline-item:last-child::before { display: none; }

/* ─── MOBILE responsive ─── */
@media (max-width: 768px) {
    /* Panel + overlay: không che topbar (56px) và bottom nav (60px) */
    .vcna-topbar {
        z-index: 1100; /* luôn nổi trên panel (1001) */
    }
    .vcna-panel-overlay {
        top: var(--topbar-height);
        bottom: 60px;
        z-index: 149; /* dưới panel (150) */
    }
    .vcna-panel {
        /* overflow removed — native <select> on real mobile uses system picker; Chrome DevTools emulation shows inline dropdown */
        width: 100%;
        top: var(--topbar-height);
        bottom: 60px;
        z-index: 150;
    }
    .vcna-form-row { grid-template-columns: 1fr; }
    .vcna-detail-grid { grid-template-columns: 1fr; }
    .vcna-filter-bar { flex-direction: row; flex-wrap: nowrap; }
    .vcna-search-wrap { min-width: 0; flex: 1; }
    .vcna-filter-bar .vcna-btn { display: none; } /* ẩn "Xóa bộ lọc" desktop-style trên mobile, chips đã đảm nhận */
}

/* ─── FORMS ─── */
.vcna-form-group { margin-bottom: 14px; }

.vcna-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
    margin-bottom: 5px;
}

.vcna-label .required { color: var(--color-danger); margin-left: 3px; }

.vcna-input,
.vcna-select,
.vcna-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--color-text-1);
    background: var(--color-surface);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
}

.vcna-input:focus,
.vcna-select:focus,
.vcna-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(245,124,0,.1);
}

.vcna-textarea { resize: vertical; min-height: 80px; }

.vcna-input-group {
    display: flex;
    align-items: stretch;
}

.vcna-input-group .vcna-input {
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
    flex: 1;
}

.vcna-input-group .vcna-btn {
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* ─── GRID LAYOUT ─── */
.vcna-grid {
    display: grid;
    gap: 16px;
}

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

/* ─── TABS ─── */
.vcna-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}
.vcna-tabs::-webkit-scrollbar { display: none; }

.vcna-tab {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}

.vcna-tab:hover { color: var(--color-text-1); }

.vcna-tab.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

/* ─── MODAL ─── */
.vcna-overlay,
.vcna-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vcna-modal {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vcna-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.vcna-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-1);
}

.vcna-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--color-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition);
}

.vcna-modal-close:hover { background: var(--color-bg); }

.vcna-modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.vcna-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* ─── LOADING / SKELETON ─── */
.vcna-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.vcna-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    z-index: 10;
}

.vcna-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.2s ease-in-out infinite;
    border-radius: var(--border-radius-sm);
}

@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── UTILITIES ─── */
.text-orange  { color: var(--color-primary); }
.text-green   { color: var(--color-success); }
.text-red     { color: var(--color-danger); }
.text-blue    { color: var(--color-info); }
.text-muted   { color: var(--color-text-muted); }
.text-bold    { font-weight: 700; }
.text-sm      { font-size: 12px; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }

.d-flex       { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8        { gap: 8px; }
.gap-12       { gap: 12px; }
.flex-1       { flex: 1; }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

.p-0   { padding: 0; }
.p-16  { padding: 16px; }

.w-full { width: 100%; }

.currency::before { content: ''; }

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
}

.empty-state .icon { font-size: 36px; margin-bottom: 10px; }
.empty-state p     { font-size: 13px; }

/* ─── ALERT / NOTICE ─── */
.vcna-alert {
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.vcna-alert.info    { background: var(--color-info-bg); color: var(--color-info); border-left: 3px solid var(--color-info); }
.vcna-alert.success { background: var(--color-success-bg); color: var(--color-success); border-left: 3px solid var(--color-success); }
.vcna-alert.warning { background: var(--color-warning-bg); color: var(--color-warning); border-left: 3px solid var(--color-warning); }
.vcna-alert.danger  { background: var(--color-danger-bg); color: var(--color-danger); border-left: 3px solid var(--color-danger); }

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
    :root {
        --content-padding: 12px;
    }

    .vcna-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    .vcna-sidebar.mobile-open {
        transform: translateX(0);
        z-index: 250; /* trên bottom-nav (200) và panel (150) */
    }

    .vcna-sidebar-close {
        display: block;
    }

    .vcna-topbar {
        left: 0 !important;
    }

    .vcna-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

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

    .vcna-grid-2,
    .vcna-grid-3,
    .vcna-grid-4 {
        grid-template-columns: 1fr;
    }

    .vcna-table th,
    .vcna-table td {
        padding: 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .vcna-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Ô chọn tháng ở trang Thống Kê — trước đây bị ép max-width:160px inline, trên
   di động chữ "tháng 7 năm 2026" bị cắt mất vì input type=month không tự xuống
   dòng/co chữ. Cho phép header xuống dòng và ô chọn tháng rộng đủ để hiện hết chữ. */
.vcna-tk-month-input {
    max-width: 180px;
}
@media (max-width: 640px) {
    .vcna-page-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    .vcna-tk-month-input {
        max-width: none;
        width: 100%;
    }
}

/* Alpine.js: ẩn element khi chưa init (tránh flash) */
[x-cloak] { display: none !important; }