/* ══════════════════════════════════════════════════════════════
   KHÁCH HÀNG PAGE
   ══════════════════════════════════════════════════════════════ */

/* ─── Page ──────────────────────────────────────────────────── */
.vcna-kh-page { position: relative; }

/* ─── List view ─────────────────────────────────────────────── */
.vcna-kh-list-view { padding-bottom: 72px; }

/* ─── Top bar ──────────────────────────────────────────────── */
.vcna-kh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-border);
}
.vcna-kh-title { font-size: 18px; font-weight: 700; margin: 0; }

/* ─── Stats bar ─────────────────────────────────────────────── */
.vcna-kh-stats-bar {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.vcna-kh-sbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    border-right: 1px solid var(--color-border);
}
.vcna-kh-sbar-item:last-child { border-right: none; }
.vcna-kh-sbar-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 4px;
}
.vcna-kh-sbar-label {
    font-size: 10px;
    color: var(--color-text-2);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vcna-kh-sbar-item--debt .vcna-kh-sbar-val { color: #dc2626; }

/* ─── Search ─────────────────────────────────────────────────── */
.vcna-kh-search {
    padding: 10px 14px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.vcna-kh-search .vcna-input { width: 100%; box-sizing: border-box; }

/* ─── Sắp xếp + lọc nhanh (2026-08) ─────────────────────────── */
.vcna-kh-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 10px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.vcna-kh-sort-select {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 7px 10px;
}
.vcna-kh-debt-chip {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 7px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.vcna-kh-debt-chip.active {
    background: var(--color-danger-bg, #fee2e2);
    border-color: #fca5a5;
    color: #dc2626;
}

/* ─── Loading ────────────────────────────────────────────────── */
.vcna-kh-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--color-text-2);
    font-size: 14px;
}

/* ─── Cards list ─────────────────────────────────────────────── */
.vcna-kh-cards {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vcna-kh-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.vcna-kh-card:active { background: var(--color-bg); }
.vcna-kh-card.has-debt { border-color: rgba(220,38,38,0.25); }
/* Khách hàng thân quen/VIP — viền + nền vàng nhạt khác biệt so với KH thường */
.vcna-kh-card--vip {
    border-color: #fbbf24;
    background: linear-gradient(to right, #fffbeb, var(--color-surface) 40%);
}

/* Avatar */
.vcna-kh-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vcna-kh-avatar--vip { background: linear-gradient(135deg, #f59e0b, #d97706); }

.vcna-kh-card-body { flex: 1; min-width: 0; }
.vcna-kh-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-kh-card-sub {
    font-size: 12px;
    color: var(--color-text-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-kh-card-chips {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: nowrap;
}
.vcna-kh-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-2);
    background: var(--color-border);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Cước (xanh) và COD (tím) — 2 màu riêng biệt như ở dòng đơn hàng trong Chi Tiết
   Khách Hàng (.kh-order-money--cuoc/--cod) để đồng bộ toàn app. */
.vcna-kh-chip--cuoc {
    color: var(--color-info, #1565c0);
    background: var(--color-info-bg, #e3f2fd);
}
.vcna-kh-chip--cod {
    color: var(--color-purple, #6a1b9a);
    background: var(--color-purple-bg, #f3e5f5);
}

.vcna-kh-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.vcna-kh-debt-badge {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: right;
    line-height: 1.3;
}
.vcna-kh-debt-label { display: block; font-size: 10px; color: #dc2626; font-weight: 600; text-transform: uppercase; }
.vcna-kh-debt-amt   { display: block; font-size: 12px; font-weight: 700; color: #dc2626; white-space: nowrap; }

/* Chiều ngược — công ty đang nợ khách hàng (vd giữ COD chưa hoàn lại) */
.vcna-kh-debt-badge--owed { background: #eff6ff; border-color: #bfdbfe; }
.vcna-kh-debt-badge--owed .vcna-kh-debt-label,
.vcna-kh-debt-badge--owed .vcna-kh-debt-amt { color: #2563eb; }

.vcna-kh-empty {
    text-align: center;
    color: var(--color-text-2);
    padding: 36px 16px;
    font-size: 14px;
}
.vcna-kh-empty--sm { padding: 16px; }
.vcna-link-btn {
    background: none;
    border: none;
    color: var(--color-primary, #2563eb);
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
}

/* ─── DETAIL PANEL ───────────────────────────────────────────── */
.vcna-kh-detail {
    position: fixed;
    top: var(--topbar-height); /* bắt đầu dưới topbar (56px) → hdr luôn thấy */
    left: 0;
    right: 0;
    bottom: 60px;              /* luôn để lộ bottom nav (60px) */
    background: var(--color-bg);
    z-index: 150;              /* dưới bottom-nav (200) → nav luôn clickable */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: khSlideIn 0.28s cubic-bezier(0.32,0.72,0,1);
}
@keyframes khSlideIn {
    from { transform: translateX(100%); opacity: 0.5; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Desktop: hiển thị như 1 view trong trang (giống trang Xe quản lý), không
   che sidebar — bỏ position:fixed, cho panel nằm trong luồng bình thường
   (đã được canh lề bởi .vcna-main), chiếm full bề rộng nội dung thay vì làm
   thẻ nổi giữa màn hình. Danh sách đã tự ẩn (x-show="!showDetail") nên panel
   thay thế đúng vị trí danh sách. */
@media (min-width: 769px) {
    .vcna-kh-detail {
        position: static;
        top: auto; left: auto; right: auto; bottom: auto;
        width: auto; max-width: none;
        border: none;
        box-shadow: none;
        animation: none;
    }
}

/* Header */
.vcna-kh-detail-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 5;
}
.vcna-kh-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.vcna-kh-detail-hdr-info {
    flex: 1;
    min-width: 0;
}
.vcna-kh-detail-hdr-info strong {
    font-size: 16px;
    font-weight: 700;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-kh-edit-btn {
    background: var(--color-border);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.vcna-kh-edit-btn--cancel { background: #fee2e2; color: #dc2626; }

/* Info section */
.vcna-kh-info-section {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 16px;
}
.vcna-kh-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: 14px;
    color: var(--color-text);
}
.vcna-kh-info-icon { width: 20px; text-align: center; flex-shrink: 0; }
.vcna-kh-info-empty { padding: 8px 0; }

/* Row SĐT — icon + số + nút Gọi/Zalo cùng hàng */
.vcna-kh-info-row--sdt { align-items: center; }
.vcna-kh-sdt-text { flex-shrink: 0; }
.vcna-kh-contact-btns {
    display: flex;
    gap: 6px;
    margin-left: 2px;
}

/* Row ghi chú — wrap full width */
.vcna-kh-info-row--note { align-items: flex-start; }
.vcna-kh-note-box {
    flex: 1;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-style: normal;
    color: #1e3a5f;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Edit form */
.vcna-kh-edit-form {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
}
.vcna-kh-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.vcna-kh-edit-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Stats row */
.vcna-kh-dstats {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.vcna-kh-dstat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-right: 1px solid var(--color-border);
}
.vcna-kh-dstat:last-child { border-right: none; }
.vcna-kh-dstat-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.vcna-kh-dstat-money { font-size: 13px !important; }
.vcna-kh-dstat-lbl {
    font-size: 10px;
    color: var(--color-text-2);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vcna-kh-dstat--red .vcna-kh-dstat-num { color: #dc2626; }
/* Chiều ngược — công ty đang nợ khách hàng (vd giữ COD chưa hoàn) */
.vcna-kh-dstat--blue .vcna-kh-dstat-num { color: #2563eb; }

/* Tabs */
.vcna-kh-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-surface);
    overflow-x: auto;
    /* Ẩn scrollbar ngang — thiếu 2 dòng này khiến desktop/Windows hiện thanh
       cuộn cổ điển kèm 2 nút mũi tên ở 2 đầu tab, nhìn như lỗi UI. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vcna-kh-tabs::-webkit-scrollbar { display: none; }
.vcna-kh-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 8px;
    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 0.15s;
}
.vcna-kh-tab.active {
    color: var(--color-primary, #2563eb);
    border-bottom-color: var(--color-primary, #2563eb);
    font-weight: 600;
}
.vcna-kh-tab-badge {
    background: var(--color-text-2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
.vcna-kh-tab-badge--debt { background: #dc2626; }

/* Tab body */
.vcna-kh-tab-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

.vcna-kh-export-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}
.vcna-kh-export-bar .vcna-btn {
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* ─── Đơn Hàng Đối Tác: thanh tìm kiếm + sắp xếp (2026-08) ─── */
.vcna-dt-order-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.vcna-dt-order-toolbar .vcna-search-wrap { flex: 1; margin: 0; }
.vcna-dt-order-sort {
    flex-shrink: 0;
    width: auto;
    max-width: 132px;
    font-size: 12.5px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 0 8px;
    color: var(--color-text-2);
}

/* ─── Đơn Hàng Đối Tác: gộp theo ngày, xổ ra khi bấm (2026-08) ───
   Thay danh sách phẳng cũ (order theo _post_date_ khó đoán, không khớp
   _ngay_van_chuyen_ hiện trên UI — xem CLAUDE.md gotchas) bằng list theo
   ngày vận chuyển, mỗi ngày gộp tổng số đơn + tổng cước + tổng tiền ĐT. */
.vcna-dt-day-group {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.vcna-dt-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.vcna-dt-day-header:active { background: var(--color-bg); }
.vcna-dt-day-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vcna-dt-day-date { font-size: 13.5px; font-weight: 700; color: var(--color-text-1); }
.vcna-dt-day-count { font-size: 11.5px; color: var(--color-text-muted); }
.vcna-dt-day-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vcna-dt-day-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vcna-dt-day-cuoc { font-size: 11.5px; color: var(--color-text-2); }
.vcna-dt-day-dt { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.vcna-dt-day-chevron {
    font-size: 11px;
    color: var(--color-text-muted);
    transition: transform .15s;
    flex-shrink: 0;
}
.vcna-dt-day-chevron.open { transform: rotate(180deg); }
.vcna-dt-day-body {
    padding: 0 10px 10px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg);
}
.vcna-dt-day-body .kh-order-item { margin-top: 8px; margin-bottom: 0; }
.vcna-dt-day-body .kh-order-item + .kh-order-item { margin-top: 8px; }

/* ─── Khách Hàng + Đối Tác: gộp theo tháng → ngày lẻ (2026-08) — tái dùng khung
   .vcna-dt-day-group/.vcna-dt-day-header ở trên (tháng), thêm 1 lớp con cho
   từng ngày lẻ bên trong khi đã xổ tháng ra. Dùng chung ở cả trang Khách Hàng
   (khach-hang.js groupedByMonth) và trang Đối Tác (doi-tac.js groupedByMonth,
   thêm dòng "ĐT" tổng tiền đối tác không có ở Khách Hàng). ─── */
.vcna-kh-day-sub { padding-top: 8px; }
.vcna-kh-day-sub + .vcna-kh-day-sub { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--color-border-light); }
.vcna-kh-day-sub-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
}
.vcna-kh-day-sub-hdr .vcna-dt-day-count { font-weight: 500; }
.vcna-kh-day-sub .kh-order-item:first-child { margin-top: 0; }
/* Ngày trong tháng cũng gộp/xổ ra khi bấm (Đối Tác, 2026-08) — xem toggleDayGroup()
   tái dùng trong doi-tac.js. */
.vcna-kh-day-sub-hdr--clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vcna-kh-day-sub-hdr--clickable .vcna-dt-day-chevron { font-size: 10px; transition: transform .15s; }

/* ─── Kho Hàng: pill trạng thái dùng chung giữa trang /kho-hang/ và
   tab "Hàng Kho" ở trang Khách Hàng (xem template-kho-hang.php) ─── */
.vcna-kho-status { flex-shrink: 0; font-size: 11px; padding: 4px 11px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.vcna-kho-status.ton-kho       { background: #e8f5e9; color: #2e7d32; }
.vcna-kho-status.xuat-mot-phan { background: #fff3e0; color: #e65100; }
.vcna-kho-status.da-xuat-het   { background: #eceff1; color: #607d8b; }

/* ─── Kho Hàng: card rút gọn trong tab "Hàng Kho" (Khách Hàng) ─── */
.vcna-kh-kho-card {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    border: 1px solid var(--color-border-light);
    margin-bottom: 10px;
}
.vcna-kh-kho-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcna-kh-kho-ma { font-weight: 400; color: var(--color-text-muted); font-size: 12px; }
.vcna-kh-kho-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--color-text-2); }
.vcna-kh-kho-han { font-size: 11.5px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 8px; padding: 3px 8px; }
.vcna-kh-kho-han.het-han { color: #dc2626; background: #fee2e2; font-weight: 700; }
.vcna-kh-kho-xuat-form {
    margin-top: 10px; padding: 12px 14px;
    background: #eef4ff; border: 1.5px solid #b9cdfa; border-radius: var(--border-radius);
}
.vcna-kh-kho-xuat-form .vcna-input { border: 1.5px solid #cbd5e1; }

/* ─── Kho Hàng: dòng gọn (compact row) trong form Tạo/Sửa Đơn Hàng — khác
   .vcna-kh-kho-card (đầy đủ, dùng ở tab Hàng Kho) vì ở đây khách có thể có rất
   nhiều mã hàng tồn kho, cần hiển thị dày hơn + cuộn riêng + ô tìm kiếm. ─── */
.vcna-dh-kho-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 160px; overflow-y: auto; overflow-x: hidden;
    padding-right: 4px;
}
.vcna-dh-kho-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-border-light);
    border-radius: 6px;
    transition: background .15s, border-color .15s;
}
.vcna-dh-kho-row.ton-kho       { border-left-color: #2e7d32; }
.vcna-dh-kho-row.xuat-mot-phan { border-left-color: #e65100; }
.vcna-dh-kho-row.da-xuat-het   { border-left-color: #607d8b; }
.vcna-dh-kho-row.has-qty { background: #eef4ff; border-color: #b9cdfa; }
.vcna-dh-kho-row-info { flex: 1; min-width: 0; }
.vcna-dh-kho-row-name { font-size: 12px; line-height: 1.25; }
.vcna-dh-kho-row-sub {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 10.5px; color: var(--color-text-muted); margin-top: 1px;
}
.vcna-dh-kho-qty { width: 64px; flex-shrink: 0; text-align: right; padding: 4px 6px; font-size: 12px; }

/* ─── Order items in KH detail ─────────────────────────────── */
.kh-order-item {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 32px 10px 12px; /* right pad for chevron */
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.kh-order-item:active { box-shadow: 0 0 0 2px #fed7aa; }

/* Đơn hàng "Mới" — chưa được user hiện tại mở xem chi tiết */
.kh-order-item--moi {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}
/* Có hạn giao mà chưa giao xong — đồng bộ với .vcna-oc--qua-han */
.kh-order-item--qua-han { background: var(--color-danger-bg); }

/* ─── Chọn nhiều đơn (Công Nợ → Hoàn Thành hàng loạt) ────────── */
.kh-order-bulk-cb {
    position: absolute;
    top: 10px; right: 10px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.kh-order-bulk-cb input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
/* Đơn không phải 'cong-no' — làm mờ + khoá con trỏ, không chọn được khi đang
   ở chế độ bulk (bulk chỉ dùng cho Công Nợ → Hoàn Thành, xem CLAUDE.md). */
.kh-order-item--bulk-disabled { opacity: .45; cursor: not-allowed; }
.kh-order-item--bulk-selected {
    border-color: var(--color-primary, #f97316);
    box-shadow: 0 0 0 2px rgba(249,115,22,.25);
    background: #fff7ed;
}
.vcna-kh-bulk-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.vcna-kh-bulk-bar-info { font-size: 12.5px; color: var(--color-text-1); display: flex; flex-direction: column; gap: 2px; }
.vcna-kh-bulk-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; margin-bottom: 10px;
    background: var(--color-bg-2); border-radius: 8px; font-size: 13px;
}
.vcna-kh-bulk-order-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 4px; font-size: 12.5px;
    border-bottom: 1px solid var(--color-border-light);
}
.vcna-kh-bulk-order-row:last-child { border-bottom: none; }
.vcna-kh-bulk-results { margin-top: 10px; }
.vcna-kh-bulk-result-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 8px; margin-bottom: 4px;
    border-radius: 6px; font-size: 12.5px;
}
.vcna-kh-bulk-result-row.ok  { background: var(--color-success-bg, #eafaf0); }
.vcna-kh-bulk-result-row.err { background: var(--color-danger-bg, #fdecea); color: var(--color-error, #c0392b); }
.vcna-table-row--moi { background: var(--color-info-bg); }
.vcna-table-row--moi:hover { background: var(--color-info-bg); filter: brightness(0.98); }
/* Đơn sắp hạn (còn ≤3 ngày) / quá hạn giao — đè lên .vcna-table-row--moi vì mức độ
   khẩn cấp của hạn giao quan trọng hơn badge "đơn mới". */
.vcna-table-row--sap-han { background: var(--color-warning-bg); }
.vcna-table-row--sap-han:hover { background: var(--color-warning-bg); filter: brightness(0.98); }
.vcna-table-row--qua-han { background: var(--color-danger-bg); }
.vcna-table-row--qua-han:hover { background: var(--color-danger-bg); filter: brightness(0.98); }

.kh-order-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.kh-order-date {
    font-size: 12px;
    color: var(--color-text-2);
    font-weight: 500;
}
/* Tên khách hàng ở row1 (thay cho giờ chạy — giờ chạy dời xuống row3 cùng giá cước/COD).
   flex-shrink theo nội dung, không đẩy badge trạng thái ra khỏi hàng khi tên dài. */
.kh-order-kh-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 65%;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1, #1a202c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kh-order-route {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 4px;
    overflow: hidden;
}
/* kh-order-from/kh-order-to trước đây dùng flex:1 cho cả 2 bên — khiến mỗi bên chiếm
   nửa chiều rộng cố định dù nội dung ngắn, tạo khoảng trắng lớn "→" bị đẩy ra giữa
   thay vì đứng sát 2 địa danh. Đổi sang flex-shrink theo nội dung (hugging), chỉ ellipsis
   khi thật sự tràn — điểm đến vẫn được ưu tiên hiển thị đủ hơn (flex-grow nhẹ) vì thường
   là thông tin người dùng cần thấy rõ nhất. */
.kh-order-from {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kh-order-to {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kh-order-arr {
    color: var(--color-text-2);
    font-size: 12px;
    flex-shrink: 0;
}

/* justify-content:flex-start + gap cố định (thay vì space-between) — space-between khiến
   khoảng cách giữa giá cước và COD/tên khách hàng co giãn thất thường theo độ dài nội
   dung (2 mục ngắn thì cách rất xa, 2 mục dài thì dính sát nhau), nhìn lệch/không đều
   giữa các card. Badge "bên thu tiền" (nếu có, trang Đối Tác) được đẩy sang phải riêng
   bằng margin-left:auto để vẫn giữ được vị trí neo phải như mong muốn. */
.kh-order-row3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
}
.kh-order-row3 .vcna-dt-btt-badge { margin-left: auto; }
/* .vcna-ocard-kh vốn có sẵn 1 định nghĩa khác ở nơi dùng cho .vcna-ocard-meta (flex:1 1 0%,
   white-space:nowrap, ellipsis) — khi tái dùng làm "tên khách hàng" trong kh-order-row3 thì
   flex:1 khiến nó chiếm hết phần còn lại của hàng, đẩy sát luôn vào item liền trước nên nhìn
   như dính chồng lên nhau dù đã có gap. Ghi đè về co giãn theo nội dung như các item khác. */
.kh-order-row3 .vcna-ocard-kh {
    flex: 0 1 auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.kh-order-cuoc {
    font-weight: 700;
    color: var(--color-primary, #2563eb);
}
.kh-order-xe {
    font-family: monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-2);
    background: var(--color-bg-2, #f4f6f9);
    border: 1px solid var(--color-border-light, #f1f5f9);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.2px;
}

/* Giá cước / COD — 2 pill riêng biệt, mỗi loại 1 màu để không lẫn vào nhau khi
   đứng cạnh nhau trên cùng 1 dòng (trước đây cùng tông cam nên khó phân biệt). */
.kh-order-money {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    line-height: 1.5;
}
.kh-order-money-lbl {
    opacity: 0.75;
    font-weight: 500;
}
.kh-order-money-val {
    font-weight: 700;
}
.kh-order-money--cuoc {
    background: var(--color-info-bg, #e3f2fd);
    color: var(--color-info, #1565c0);
}
.kh-order-money--cod {
    background: var(--color-purple-bg, #f3e5f5);
    color: var(--color-purple, #6a1b9a);
}
.kh-order-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.25;
}

/* ─── ORDER CARD v2 (.vcna-oc) — dùng chung cho danh sách đơn hàng dạng card:
   Đơn Hàng (admin), Dashboard Tài Xế, Dashboard Đối Tác, Đơn Hàng Đối Tác.
   Viền trái theo loại đơn, có nút gọi/Zalo nhanh, tuyến đường có chấm màu,
   tiền cước/COD tách riêng, hàng info dưới cùng. Thay thế .kh-order-item cũ —
   .kh-order-item vẫn còn tồn tại trong CSS (dùng ở vài chỗ khác chưa đổi,
   vd template-khach-hang.php) nên KHÔNG xoá, chỉ ngừng dùng ở các trang trên. */
.vcna-oc {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: 10px;
    padding: 2px 6px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.vcna-oc:active { box-shadow: 0 0 0 2px #fed7aa; }
.vcna-oc--moi { background: var(--color-info-bg); }
.vcna-oc--taxi-tai  { border-left-color: #f57c00; }
.vcna-oc--hang-ghep { border-left-color: #2563eb; }
/* Đơn sắp hạn (còn ≤3 ngày) / quá hạn giao — đè lên .vcna-oc--moi vì mức độ khẩn
   cấp của hạn giao quan trọng hơn badge "đơn mới". Dùng chung cho cả card
   .vcna-oc (flat, group theo ngày) lẫn .vcna-ocard (group theo xe). */
.vcna-oc--sap-han,    .vcna-ocard--sap-han { background: var(--color-warning-bg); }
.vcna-oc--qua-han,    .vcna-ocard--qua-han { background: var(--color-danger-bg); }

.vcna-oc-row1 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 4px;
}
.vcna-oc-kh {
    font-size: 14px; font-weight: 700; color: var(--color-text-1, #1a202c);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Khách hàng thân quen/VIP — chữ màu vàng đồng (amber) khác biệt + icon sao đứng trước tên */
.vcna-oc-kh--vip { color: #b45309; }
.vcna-vip-star { margin-right: 2px; font-size: 12px; }
.vcna-oc-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.vcna-oc-act {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600; text-decoration: none;
    padding: 3px 7px; border-radius: 999px; line-height: 1.2;
    background: var(--color-bg-2, #f3f4f6); color: var(--color-text-2);
}
.vcna-oc-act-call { padding: 3px 6px; }
.vcna-oc-act-zalo { background: #e8f2ff; color: #0068ff; }
.vcna-oc-chevron { color: var(--color-text-muted); opacity: .5; flex-shrink: 0; }

.vcna-oc-route {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--color-text); font-weight: 500;
    margin-bottom: 5px; overflow: hidden;
}
.vcna-oc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vcna-oc-dot--from { background: #f57c00; }
.vcna-oc-dot--to   { background: #2563eb; }
.vcna-oc-from {
    flex: 0 1 auto; min-width: 0; max-width: 42%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcna-oc-to {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcna-oc-arr { color: var(--color-text-2); font-size: 12px; flex-shrink: 0; }
/* Tóm tắt tuyến ĐẦY ĐỦ (routeShortLabel — có thể nhiều hơn 2 điểm) thay cho
   .vcna-oc-from/.vcna-oc-to vốn chỉ hiện điểm đầu/cuối, cắt mất điểm giữa. */
.vcna-oc-full {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vcna-oc-money { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
.vcna-oc-money-item { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.vcna-oc-money-ico { font-size: 12px; font-weight: 700; }
.vcna-oc-money-cuoc { color: #16a34a; }
.vcna-oc-money-cod  { color: #7c3aed; }

.vcna-oc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 11px; color: var(--color-text-2);
}
.vcna-oc-meta-item { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
/* Chặn tên tài xế/đối tác dài (hoặc list nhiều tên) làm tràn dòng — cắt gọn kèm "..."
   thay vì đẩy các mục khác (biển số, giờ, trạng thái) xuống dòng dưới. */
.vcna-oc-meta-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px;
}
.vcna-oc-meta-doitac { color: #0e7490; font-weight: 700; }
.vcna-oc-status { margin-left: auto; flex-shrink: 0; }

/* Khoảng trắng 2 bên danh sách card (trước dùng var(--content-padding) = 20px,
   quá rộng so với card đã thu gọn padding riêng) — giảm còn 10px, đồng thời
   canh lại phần header ngày cho khớp mép trái/phải với card bên dưới. */
.vcna-oc-list-pad { padding: 0 4px; }
.vcna-order-cards-mobile .vcna-date-header { padding-left: 4px; padding-right: 4px; }

/* ─── Công Nợ + Payment Log ───────────────────────────────── */
.vcna-text-green { color: #16a34a; }
.vcna-text-red   { color: #dc2626; }
/* Công ty đang nợ khách (con_lai âm — vd giữ COD chưa hoàn) — khác màu với "khách nợ
   công ty" (đỏ) để không gây nhầm chiều nợ. */
.vcna-text-blue  { color: #2563eb; }

.vcna-congno-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 16px 16px;
}
.vcna-congno-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: var(--color-text-2);
    border-bottom: 1px solid var(--color-border);
}
.vcna-congno-row:last-child { border-bottom: none; }
.vcna-congno-row--total {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-top: 4px;
    padding-top: 10px;
}

.vcna-payment-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 16px 16px;
}
.vcna-payment-form-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ── Thanh toán Đối Tác ─────────────────────────── */

/* Khung nổi bật trước form */
.vcna-dt-pay-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 16px 12px;
    gap: 10px;
}
.vcna-dt-pay-summary { display: flex; flex-direction: column; gap: 2px; }
.vcna-dt-pay-lbl { font-size: 11px; color: #9a3412; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.vcna-dt-pay-amt { font-size: 18px; font-weight: 800; }
.vcna-dt-pay-btn { white-space: nowrap; flex-shrink: 0; }

/* Form thanh toán */
.vcna-dt-pay-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 16px 16px;
}

/* Preview trước / sau */
.vcna-dt-pay-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}
.vcna-dt-pay-prev-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    color: var(--color-text-2);
}
.vcna-dt-pay-prev-minus { color: #6b7280; }
.vcna-dt-pay-prev-result {
    border-top: 1px dashed #cbd5e1;
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 700;
    color: var(--color-text);
}

/* Hình thức button group */
.vcna-dt-pay-ht-row { display: flex; gap: 8px; }
.vcna-dt-ht-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    color: var(--color-text-2);
    transition: all 0.15s;
}
.vcna-dt-ht-btn.active {
    border-color: var(--color-primary, #f97316);
    background: #fff7ed;
    color: var(--color-primary, #f97316);
}

/* Toggle đánh dấu khách hàng thân quen/VIP — form sửa KH */
.vcna-kh-vip-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    color: var(--color-text-2);
    cursor: pointer;
    transition: all 0.15s;
}
.vcna-kh-vip-toggle.active {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

/* Lịch sử entry (mới) */
.vcna-dt-pay-entry {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.vcna-dt-pay-entry:last-child { border-bottom: none; }
.vcna-dt-pay-entry-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.vcna-dt-pay-entry-amt {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.vcna-dt-pay-entry-ht {
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.vcna-dt-pay-entry-date {
    font-size: 11px;
    color: var(--color-text-2);
    margin-left: auto;
}
.vcna-dt-pay-entry-track {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-2);
    margin-bottom: 3px;
}
.vcna-dt-pay-entry-before { color: #ef4444; font-weight: 600; }
.vcna-dt-pay-entry-arrow { color: #94a3b8; }
.vcna-dt-pay-entry-after { font-weight: 700; }
.vcna-dt-pay-entry-meta {
    font-size: 11px;
    color: var(--color-text-2);
}

/* Badge chiều thanh toán — mỗi dòng lịch sử cho biết tiền chạy hướng nào */
.vcna-dt-pay-dir-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}
.vcna-dt-pay-dir-badge.dir-out { background: var(--color-danger-bg); color: var(--color-danger); }
.vcna-dt-pay-dir-badge.dir-in  { background: var(--color-success-bg); color: var(--color-success); }

/* Lịch sử dạng card viền bo tròn thay vì list kẻ dòng */
.vcna-dt-history-card {
    background: var(--color-surface);
    border: 1px solid #d8dee6;
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 10px;
}
.vcna-dt-history-card:last-child { margin-bottom: 0; }

.vcna-payment-log {
    margin: 0 0 80px;
}

/* ─── Công Nợ Đối Tác — redesign (hero + breakdown card) ─────── */
.vcna-dtcn-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 0 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.vcna-dtcn-hero.debt    { background: linear-gradient(135deg, var(--color-danger-bg) 0%, #fff 120%); border: 1.5px solid #f5a3a3; }
.vcna-dtcn-hero.credit  { background: linear-gradient(135deg, var(--color-success-bg) 0%, #fff 120%); border: 1.5px solid #8fdba8; }
.vcna-dtcn-hero.zero    { background: var(--color-bg-2); border: 1.5px solid #c7ced8; }
.vcna-dtcn-hero-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
}
.vcna-dtcn-hero-body { min-width: 0; }
.vcna-dtcn-hero-lbl {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--color-text-muted);
}
.vcna-dtcn-hero-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}
.vcna-dtcn-hero.debt   .vcna-dtcn-hero-lbl,
.vcna-dtcn-hero.debt   .vcna-dtcn-hero-num { color: var(--color-danger); }
.vcna-dtcn-hero.credit .vcna-dtcn-hero-lbl,
.vcna-dtcn-hero.credit .vcna-dtcn-hero-num { color: var(--color-success); }
.vcna-dtcn-hero.zero   .vcna-dtcn-hero-lbl,
.vcna-dtcn-hero.zero   .vcna-dtcn-hero-num { color: var(--color-text-2); }

.vcna-dtcn-card {
    background: var(--color-surface);
    border: 1.5px solid #c7ced8;
    border-radius: 14px;
    padding: 6px 16px 8px;
    margin: 0 0 16px;
}
.vcna-dtcn-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 0 8px;
}
.vcna-dtcn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #dde2e8;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
    font-size: 13px;
}
.vcna-dtcn-row-ico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vcna-dtcn-row-ico--in  { background: var(--color-success-bg); }
.vcna-dtcn-row-ico--out { background: var(--color-danger-bg); }
.vcna-dtcn-row-lbl {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.vcna-dtcn-row-amt {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
}
.vcna-payment-log-hdr {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 0 6px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
}
.vcna-payment-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    gap: 12px;
}
.vcna-payment-entry:last-child { border-bottom: none; }
.vcna-payment-left { flex: 1; min-width: 0; }
.vcna-payment-amt {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
}
.vcna-payment-meta {
    font-size: 12px;
    color: var(--color-text-2);
}
.vcna-payment-right {
    text-align: right;
    flex-shrink: 0;
}
.vcna-payment-date {
    font-size: 12px;
    color: var(--color-text-2);
}
.vcna-payment-who {
    font-size: 11px;
    color: var(--color-text-2);
    opacity: 0.6;
}

/* ─── KH Detail — thêm --green stat ────────────────────────── */
.vcna-kh-dstat--green .vcna-kh-dstat-num { color: #16a34a; }

/* ─── Đối Tác — overrides nhỏ ──────────────────────────────── */
.vcna-dt-avatar {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}
.vcna-dt-debt-badge--rev {
    border-color: #16a34a;
}
.vcna-dt-debt-badge--rev .vcna-kh-debt-label,
.vcna-dt-debt-badge--rev .vcna-kh-debt-amt {
    color: #16a34a;
}

/* (2026-08) Icon "xuất hóa đơn đầu vào" trên card Đối Tác — class riêng, KHÔNG
   sửa .vcna-kh-card-name gốc (dùng chung với trang Khách Hàng) để tránh ảnh
   hưởng cách rút gọn tên (ellipsis) đang hoạt động tốt ở trang đó. */
.vcna-dt-card-name-flex {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.vcna-dt-card-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.vcna-dt-hd-icon {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
}
.vcna-dt-hd-icon--no { filter: saturate(1.4); }

/* (2026-08) Badge "Có xuất hóa đơn" — icon 🧾 mặc định quá nhạt/nhỏ so với 🚫
   (badge "Không xuất") nên vẽ riêng bằng CSS: khối tròn đặc xanh + dấu ✓ trắng,
   cùng kích thước/độ đậm với 🚫 để 2 trạng thái cân đối, dễ phân biệt ở xa. */
.vcna-dt-hd-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.vcna-dt-hd-badge--yes {
    background: #16a34a;
    color: #fff;
}

/* Partner fields in order row — trước dùng flex:1 + text-align:center để tự căn giữa
   trong layout space-between cũ; giờ kh-order-row3 đã đổi sang flex-start + gap nên bỏ
   flex:1 (để span co theo nội dung, không giãn ra chiếm hết chỗ trống còn lại). */
.vcna-dt-order-share {
    font-size: 12px;
    color: var(--color-text-2);
}
.vcna-dt-order-share strong {
    color: #7c3aed;
    font-weight: 700;
}
.vcna-dt-btt-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}
.vcna-dt-btt-badge.btt-cong-ty {
    background: rgba(37,99,235,.1);
    color: #2563eb;
}
.vcna-dt-btt-badge.btt-doi-tac {
    background: rgba(124,58,237,.1);
    color: #7c3aed;
}
.vcna-dt-btt-badge.btt-chua-thu {
    background: rgba(156,163,175,.15);
    color: var(--color-text-2);
}

/* ─── Card đơn hàng — view Đối Tác (Dashboard Đối Tác + Đơn Hàng Của Tôi) ───
   Header/tìm kiếm/lọc dùng chung mẫu với Đơn Hàng (admin), nhưng dòng tiền tách
   riêng thành khối nhỏ (.vcna-dtoc-fin) — số "Bạn nhận" là số đối tác quan tâm
   nhất nên cần nổi bật hơn hẳn giá cước/COD, khác với admin (không phân biệt
   số nào quan trọng hơn số nào). */
.vcna-dtoc-fin {
    background: var(--color-bg-2, #f7f8fa);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.vcna-dtoc-fin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vcna-dtoc-fin-you {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.vcna-dtoc-fin-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.vcna-dtoc-fin-amt {
    font-size: 15px;
    font-weight: 800;
    color: #7c3aed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Card rút gọn ở Dashboard không có "phần đối tác nhận" riêng — số hiển thị là
   giá cước gốc, giữ màu xanh quen thuộc thay vì tím (tím dành riêng cho số tiền
   đối tác thực nhận, tránh 2 trang hiểu nhầm là cùng 1 loại tiền). */
.vcna-dtoc-fin-amt--cuoc { color: #16a34a; }

.vcna-dtoc-fin-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.vcna-dtoc-fin-sub b {
    font-weight: 700;
    color: var(--color-text-2);
}

/* ─── Form Đơn Hàng — partner fields ───────────────────────── */
.vcna-ben-thu-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.vcna-btt-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.vcna-btt-btn.active {
    border-color: var(--color-primary);
    background: rgba(37,99,235,.08);
    color: var(--color-primary);
    font-weight: 700;
}

/* ─── Detail Panel: section title + rows ─────────────────── */
.vcna-detail-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.vcna-detail-section:last-child { border-bottom: none; }
.vcna-detail-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.vcna-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
}
.vcna-detail-row + .vcna-detail-row { border-top: 1px solid var(--color-border); }
.vcna-detail-row .vcna-detail-label { flex-shrink: 0; min-width: 90px; }
.vcna-detail-row .vcna-detail-val   { text-align: right; word-break: break-word; }

/* ─── Detail: rich text content ──────────────────────────── */
.vcna-detail-richtext {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-1);
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--color-bg-2);
    border-radius: 6px;
}
.vcna-detail-richtext ul { margin: 4px 0 4px 16px; }

/* ─── Tag chips (lưu ý) ──────────────────────────────────── */
.vcna-tag-chip {
    display: inline-block;
    padding: 3px 10px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ffcc80;
}

/* ─── Gallery grid ───────────────────────────────────────── */
.vcna-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.vcna-gallery-item {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-2);
}
.vcna-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.vcna-gallery-item:hover img { transform: scale(1.05); }

/* ─── History log ────────────────────────────────────────── */
.vcna-history-entry {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.vcna-history-entry:last-child { border-bottom: none; }
.vcna-history-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
}
.vcna-history-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    gap: 4px;
}
.vcna-history-detail {
    font-size: 12px;
    color: var(--color-text-2);
    margin-top: 3px;
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
}

/* ─── Route toggle in detail panel ───────────────────────── */
.vcna-detail-route-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
    user-select: none;
}
.vcna-detail-route-summary {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 12px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-detail-route-chevron {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* ─── Map link in itinerary ──────────────────────────────── */
.vcna-map-link {
    font-size: 11px;
    color: var(--color-primary);
    text-decoration: none;
    margin-left: 6px;
    white-space: nowrap;
}

/* ─── Order card: right-side meta (date + price) ────────── */
.vcna-ocard-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

/* ─── Grouped-by-xe view ─────────────────────────────────── */
/* ── Date grouping ── */
.vcna-date-group {
    margin-bottom: 4px;
}
.vcna-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    position: relative;
}
.vcna-date-header::before {
    content: '';
    position: absolute;
    left: 14px; right: 14px; top: 50%;
    height: 1px;
    background: var(--color-border);
    z-index: 0;
}
.vcna-date-header-label {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg-2, #f5f5f5);
    padding-right: 8px;
}
.vcna-date-header-count {
    position: relative;
    z-index: 1;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg-2, #f5f5f5);
    padding-left: 8px;
}

.vcna-order-group {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-1);
}
.vcna-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
}
.vcna-group-plate {
    font-size: 13px;
    font-weight: 800;
    font-family: monospace;
    color: var(--color-text-1);
    letter-spacing: .5px;
}
.vcna-group-count {
    font-size: 11px;
    background: var(--color-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}
.vcna-group-driver {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: auto;
}
.vcna-ocard-in-group {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}
.vcna-ocard-in-group:last-child { border-bottom: none; }

/* ─── Detail section: canonical definition ───────────────── */
.vcna-detail-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.vcna-detail-section:last-child { border-bottom: none; }
.vcna-detail-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.vcna-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}
.vcna-detail-row + .vcna-detail-row {
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.vcna-detail-row .vcna-detail-label {
    flex-shrink: 0;
    min-width: 100px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.vcna-detail-row .vcna-detail-val {
    text-align: right;
    font-size: 13px;
    color: var(--color-text-1);
    word-break: break-word;
}

/* ─── Richtext content blocks ────────────────────────────── */
.vcna-detail-richtext {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-1);
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--color-bg-2);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}
.vcna-detail-richtext ul { margin: 4px 0 4px 16px; }
.vcna-detail-richtext p  { margin: 0 0 4px; }

/* ─── Tag chips (lưu ý) ──────────────────────────────────── */
.vcna-tag-chip {
    display: inline-block;
    padding: 4px 12px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ffcc80;
}

/* ─── Gallery grid ───────────────────────────────────────── */
.vcna-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.vcna-gallery-item {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-bg-2);
}
.vcna-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
    display: block;
}
.vcna-gallery-item:active img { transform: scale(1.05); }

/* ─── History log ────────────────────────────────────────── */
.vcna-history-entry {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.vcna-history-entry:last-child { border-bottom: none; }
.vcna-history-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
}
.vcna-history-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    gap: 4px;
}
.vcna-history-detail {
    font-size: 12px;
    color: var(--color-text-2);
    margin-top: 3px;
    padding-left: 8px;
    border-left: 2px solid var(--color-primary);
    opacity: .8;
}

/* ─── Route toggle ───────────────────────────────────────── */
.vcna-detail-route-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 6px;
    user-select: none;
}
.vcna-detail-route-summary {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vcna-detail-route-chevron {
    font-size: 11px;
    color: var(--color-text-muted);
}
.vcna-map-link {
    font-size: 11px;
    color: var(--color-primary);
    text-decoration: none;
    margin-left: 6px;
    white-space: nowrap;
    opacity: .8;
}