/* ═══════════════════════════════════════════════════════════
   TRANSITION MODAL — chuyển trạng thái đơn hàng
   ═══════════════════════════════════════════════════════════ */

/* Action bar sticky ở dưới detail panel — dùng bởi Dashboard Tài Xế (self-service) */
.vcna-detail-action-bar {
    padding: 10px 14px;
    border-top: 1px solid #e9ebee;
    background: #fff;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-radius: 0 0 16px 16px;
}

.vcna-taction-btn {
    flex: 1;
    min-width: 120px;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.vcna-taction-secondary {
    color: #374151 !important;
    border: 1.5px solid #d1d5db !important;
    background: #fff !important;
}

.vcna-taction-secondary:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* ── Cụm FAB nổi góc dưới-phải: đóng panel (trên cùng) + chuyển trạng thái (dưới) ──
   Dùng chung cho Đơn Hàng (admin), Dashboard Tài Xế, Dashboard Đối Tác — đồng bộ 1 kiểu. */
.vcna-detail-fab-actions {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    z-index: 5;
}
.vcna-detail-fab {
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.vcna-detail-fab:active { transform: scale(.92); }
.vcna-detail-fab-primary {
    width: 52px;
    height: 52px;
    font-size: 22px;
    background: var(--color-primary, #f97316);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.vcna-detail-fab-secondary {
    width: 44px;
    height: 44px;
    font-size: 17px;
    background: #fff;
    color: #374151;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
/* Nút "Công Nợ" trên cụm FAB chi tiết đơn — trước đây dùng chung style xám nhạt với
   nút phụ khác (vcna-detail-fab-secondary) nên bị chìm, dễ bỏ sót cạnh nút "Đã thu
   tiền" màu cam nổi bật. Đổi sang nền đỏ nhạt + viền đỏ để bắt mắt ngang với nút chính,
   đúng tinh thần "cảnh báo công nợ" đã dùng ở icon trạng thái (🔴) nơi khác trong app. */
.vcna-detail-fab-congno {
    width: 52px;
    height: 52px;
    font-size: 20px;
    background: #fef2f2;
    color: #dc2626;
    border: 2px solid #dc2626;
    box-shadow: 0 4px 14px rgba(220,38,38,.28);
}
/* Nút đóng — luôn nằm trên cùng cụm FAB (trên nút chuyển trạng thái), luôn hiển thị dù
   có hay không có nút chuyển trạng thái bên dưới. Trước đây nền trắng gần trong suốt +
   icon xám nhạt khiến nút chìm vào nền sáng của panel, khó thấy trên di động — đổi sang
   nền đặc màu trung tính đậm (không dùng đỏ để tránh gây hiểu nhầm là hành động nguy
   hiểm/xoá) + icon trắng, cùng kích thước với nút chuyển trạng thái bên dưới để 2 nút
   cân đối nhau thay vì lệch cỡ như trước.
*/
.vcna-detail-fab-close {
    width: 52px;
    height: 52px;
    font-size: 20px;
    font-weight: 600;
    background: #334155;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* Overlay nền mờ */
.vcna-tm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

/* Sheet trượt lên từ dưới */
.vcna-tm-sheet {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.vcna-tm-sheet * {
    box-sizing: border-box;
}

.vcna-tm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.vcna-tm-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}

.vcna-tm-sub {
    font-size: 11px;
    color: #9ca3af;
}

.vcna-tm-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}

.vcna-tm-body {
    padding: 14px 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.vcna-tm-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}

.vcna-tm-footer .vcna-btn {
    flex: 1;
    justify-content: center;
    padding-top: 11px;
    padding-bottom: 11px;
}

/* Section container — KHÔNG dùng overflow:hidden vì clip native select dropdown trên iOS */
.vcna-tm-section {
    width: 100%;
    margin-bottom: 14px;
}

/* Info grid (confirm đơn giản) */
.vcna-tm-info-grid {
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 12px;
}

.vcna-tm-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.vcna-tm-info-row:last-child { border-bottom: none; }

.vcna-tm-info-k { color: #9ca3af; }
.vcna-tm-info-v { font-weight: 600; color: #111827; text-align: right; max-width: 60%; }

.vcna-tm-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

/* Ai thu tiền — 2 nút ngang hàng */
.vcna-tm-who-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}
.vcna-tm-who-btn {
    padding: 10px 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
.vcna-tm-who-btn.active {
    border-color: #f97316;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 600;
}

/* Custom picker dropdown trong modal */
.vcna-tm-person-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0;
}

/* Legacy chip — giữ lại nếu dùng chỗ khác */
.vcna-tm-chip {
    flex: 1 1 0;
    min-width: 0;
    border: 1.5px solid #d1d5db;
    background: #fff;
    border-radius: 8px;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcna-tm-chip.active {
    border-color: #f97316;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 600;
}

/* Select nhân viên */
.vcna-tm-select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.vcna-tm-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
}

.vcna-tm-cb {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary, #f57c00);
}

.vcna-tm-check-lbl {
    flex: 1;
    font-size: 14px;
    color: #111827;
}

.vcna-tm-check-amt {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}

.vcna-tm-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.vcna-tm-textarea {
    width: 100%;
    resize: vertical;
}

/* Textarea xem trước "Sao Chép Tóm Tắt" — dài hơn ô ghi chú thường, dùng font
   monospace để giữ căn lề dấu "-" rõ ràng, dễ đối chiếu trước khi copy. */
.vcna-summary-textarea {
    width: 100%;
    min-height: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    white-space: pre-wrap;
}

/* Số tiền thực nhận — thụt vào ngang với nhãn "Giá cước" phía trên */
.vcna-tm-thucthu {
    margin: 0 0 6px 26px;
}

.vcna-tm-chenh-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: 13px;
    color: #9a3412;
}

.vcna-tm-chenh-box b { color: #c2410c; }

/* ═══════════════════════════════════════════════════════════
   TÀI XẾ PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Hero header: tiêu đề + phụ đề + minh hoạ SVG góc phải ── */
.vcna-tx-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 6px;
}
.vcna-tx-hero-text { min-width: 0; }
.vcna-tx-hero-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-2);
}
.vcna-tx-hero-illus { flex-shrink: 0; width: 84px; height: 70px; }
.vcna-tx-hero-illus svg { width: 100%; height: 100%; display: block; }

/* ── Hàng nút hành động + lọc trạng thái — Chấm công / Thêm tài xế / Đang làm
   gộp chung 1 hàng ngang. 2 nút co giãn đều, dropdown lọc gọn bên phải ── */
.vcna-tx-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 10px;
}
.vcna-tx-action-btn {
    /* Trước dùng flex:1 1 auto khiến 3 nút (Chấm công/Xuất Excel/Thêm tài xế) giãn
       tranh chỗ nhau không đều — nút chữ dài (Xuất Excel Chấm Công) ép 2 nút kia méo
       mó. Đổi sang co giãn theo NỘI DUNG (flex: 0 1 auto), cùng height cố định với
       input tháng + dropdown trạng thái bên dưới để hàng nút cao đều nhau. */
    flex: 0 1 auto;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-tx-action-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.vcna-tx-action-btn--outline {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    color: var(--color-text-2);
}
.vcna-tx-action-btn--outline:active,
.vcna-tx-action-btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.vcna-tx-action-btn--primary {
    background: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245,124,0,.28);
}
.vcna-tx-action-btn--primary:hover { background: var(--color-primary-dark); }

/* ── Dropdown lọc trạng thái (Đang làm / Đã nghỉ / Tất cả) — gọn, bấm mới xổ,
   nằm ngang hàng với các nút hành động, cùng height 38px cho đều hàng. ── */
.vcna-tx-action-row .vcna-tx-status-dd { flex: 0 0 auto; width: auto; min-width: 0; display: block; }
.vcna-tx-action-row .vcna-tx-status-trigger { height: 38px; box-sizing: border-box; }

/* Nhóm "chọn tháng + Xuất Excel Chấm Công" — đi cùng nhau, ẩn hẳn trên mobile
   (màn hẹp không đủ chỗ cho 5 phần tử trên 1 hàng, thao tác xuất báo cáo tổng hợp
   phù hợp làm trên desktop hơn — xem @media bên dưới). */
.vcna-tx-cc-export-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.vcna-tx-cc-export-month {
    flex: 0 0 auto;
    width: 130px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12.5px;
}
@media (max-width: 768px) {
    .vcna-tx-cc-export-group { display: none; }
}
.vcna-tx-status-trigger {
    width: auto;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
}
.vcna-tx-status-dd .vcna-dd-panel { min-width: 150px; left: auto; right: 0; }

/* Chấm màu trạng thái trong trigger dropdown lọc */
.vcna-tx-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-2);
}
.vcna-tx-dot--dang-lam { background: var(--color-success); }
.vcna-tx-dot--da-nghi  { background: var(--color-text-2); }
.vcna-tx-dot--all      { background: var(--color-primary); }

/* ── Nhãn nhóm vai trò (Điều hành / Kế toán / Lái xe) — badge bo viền + icon
   thay vì chữ trần không có khung ── */
.vcna-tx-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px 4px 4px;
    margin: 16px 2px 8px;
}
.vcna-tx-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
    flex-shrink: 0;
}
.vcna-tx-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
}

/* ── Driver card ── */
.vcna-tx-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.vcna-tx-card:active { background: var(--color-bg); }

.vcna-tx-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.vcna-tx-card-info { flex: 1; min-width: 0; }
.vcna-tx-card-name { font-weight: 600; font-size: 15px; }
.vcna-tx-card-phone {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--color-text-2);
}
.vcna-tx-card-phone svg { flex-shrink: 0; }
.vcna-tx-card-sub  { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--color-text-2); }
.vcna-tx-card-meta { font-size: 12px; color: var(--color-text-2); text-align: right; flex-shrink: 0; }
.vcna-tx-rate      { display: block; white-space: nowrap; }

/* Badge trạng thái dạng pill có chấm màu đứng trước */
.vcna-tx-status-pill { display: inline-flex; align-items: center; gap: 5px; }
.vcna-tx-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Detail header avatar ── */
.vcna-tx-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Detail header: avatar + tên/badge cùng 1 hàng ── */
.vcna-detail-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vcna-detail-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-1);
    margin-bottom: 4px;
}

/* ── Status badges (tài xế) ── */
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-gray   { background: #f3f4f6; color: #374151; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-red    { background: #ffebee; color: #c62828; }

/* ── Chấm công calendar ── */
.vcna-cc-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}
.vcna-cc-month-label {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
}

.vcna-cc-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-2);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.vcna-cc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dot-co-mat    { background: #10b981; }
.dot-nua-cong  { background: linear-gradient(135deg, #10b981 50%, #e5e7eb 50%); }
.dot-vang      { background: #ef4444; }
.dot-nghi-phep { background: #f59e0b; }
.dot-trong     { background: #e5e7eb; }

.vcna-cc-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}
.vcna-cc-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-2);
    padding: 4px 0;
}
.vcna-cc-empty { }
.vcna-cc-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform .1s;
}
.vcna-cc-cell:active  { transform: scale(.93); }
.vcna-cc-cell.cc-co-mat    { background: #d1fae5; }
.vcna-cc-cell.cc-nua-cong  { background: linear-gradient(135deg, #d1fae5 50%, #f3f4f6 50%); }
.vcna-cc-cell.cc-vang      { background: #fee2e2; }
.vcna-cc-cell.cc-nghi-phep { background: #fef3c7; }
.vcna-cc-cell.cc-editing   { box-shadow: 0 0 0 2px var(--color-primary); }
.vcna-cc-cell.cc-today     { outline: 2px solid #3b82f6; outline-offset: -2px; }
.vcna-cc-cell.cc-selected  { background: var(--color-primary); }
.vcna-cc-cell.cc-selected .vcna-cc-day-num { color: #fff; }

.vcna-cc-day-num { font-size: 13px; font-weight: 600; }
.vcna-cc-trips   { font-size: 10px; color: var(--color-primary); }

/* ── Trip editor ── */
.vcna-cc-trip-editor {
    background: var(--color-surface);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.vcna-cc-trip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

/* ── Chấm công summary ── */
.vcna-cc-summary {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 8px;
}
.vcna-cc-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--color-border);
}
.vcna-cc-sum-row:last-child { border-bottom: none; }
.vcna-cc-sum-total {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 15px;
}

/* ── Lương card ── */
.vcna-luong-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}
.vcna-luong-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 14px;
    color: var(--color-text-1);
}
.vcna-luong-sep  { height: 1px; background: var(--color-border); margin: 4px 0; }
.vcna-luong-total {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-primary);
    padding: 8px 0;
}
.vcna-luong-con {
    font-weight: 700;
    font-size: 16px;
    color: #059669;
    padding: 8px 0;
}
.vcna-text-red { color: #ef4444; }

/* ── Ứng lương / Lịch nghỉ rows ── */
.vcna-ul-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}
.vcna-ul-row:last-of-type { border-bottom: none; }
.vcna-ul-date   { min-width: 90px; color: var(--color-text-2); font-size: 13px; }
.vcna-ul-amount { font-weight: 600; min-width: 90px; }
.vcna-ul-note   { flex: 1; color: var(--color-text-2); }
.vcna-ul-total  { display: flex; justify-content: space-between; padding: 10px 0 0; font-size: 14px; font-weight: 600; }
.vcna-ln-loai   { min-width: 90px; }

/* Stacked variant — dùng cho Ứng lương (nhiều nội dung phụ: ghi chú, nút duyệt, ảnh) */
.vcna-ul-row--stacked { flex-direction: column; align-items: stretch; gap: 6px; }
.vcna-ul-row--stacked .vcna-ul-date,
.vcna-ul-row--stacked .vcna-ul-amount { min-width: 0; }
.vcna-ul-row-top { display: flex; align-items: center; gap: 8px; }
.vcna-ul-row--stacked .vcna-ul-note { flex: none; font-size: 13px; }
.vcna-ul-actions { display: flex; gap: 6px; }
.vcna-ul-images  { display: flex; gap: 6px; flex-wrap: wrap; }
.vcna-ul-images .vcna-cp-img-thumb { display: inline-block; width: 44px; height: 44px; flex: none; }

/* ── Section card ── */
.vcna-section-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 14px 16px;
}
.vcna-section-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-2);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ── Stats grid (dạng đơn giản: số căn giữa, không icon) ──
   ĐẶT TÊN RIÊNG (-simple) — trước đây dùng chung class .vcna-stats-grid/
   .vcna-stat-card với bản có icon+label+breakdown ở trang Thống Kê admin
   (xem "Stats grid" phía trên, có @media responsive 768px/480px). Vì CSS
   này nằm SAU trong file nên đè mất luôn rule responsive của bản kia — trên
   mobile, card Thống Kê admin không co về 1 cột được nữa, bị tràn ngang
   (bug đã gặp). Đổi tên để 2 bộ card độc lập nhau. */
.vcna-stats-grid-simple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.vcna-stat-card-simple {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.vcna-stat-wide { grid-column: span 2; }
.vcna-stat-num  { font-size: 26px; font-weight: 700; color: var(--color-primary); }

@media (max-width: 480px) {
    .vcna-stats-grid-simple { grid-template-columns: 1fr; }
    .vcna-stat-wide { grid-column: span 1; }
}
.vcna-stat-lbl  { font-size: 12px; color: var(--color-text-2); margin-top: 4px; }

/* ── Nút "Quay lại" (dùng ở panel chi tiết + batch chấm công) ── */
.vcna-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-2);
    background: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.vcna-btn-back:hover  { background: var(--color-bg); border-color: var(--color-text-3); color: var(--color-text-1); }
.vcna-btn-back:active { transform: scale(.97); }

/* ── Tài Xế chi tiết: mini stat card (Sinh nhật/Thâm niên, Ngày công/Chuyến) ── */
.vcna-info-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.vcna-info-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 14px;
    text-align: center;
}
.vcna-info-stat-num { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.vcna-info-stat-lbl { font-size: 12px; color: var(--color-text-2); margin-top: 4px; }
.vcna-info-stat-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Tài Xế chi tiết: danh sách thông tin (SĐT, CCCD, Địa chỉ...) ── */
.vcna-info-grid {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0 16px;
}
.vcna-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.vcna-info-row:last-child { border-bottom: none; }
.vcna-info-label { color: var(--color-text-muted); flex-shrink: 0; }
.vcna-info-val   { color: var(--color-text-1); font-weight: 500; text-align: right; }

/* ════════════════════════════════════════════
   BATCH CHẤM CÔNG
════════════════════════════════════════════ */
.vcna-batch-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Toolbar */
.vcna-batch-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}
.vcna-batch-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}
.vcna-batch-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    min-width: 140px;
    text-align: center;
}

/* Bottom save bar */
.vcna-batch-bottom {
    padding: 12px 16px 20px;
}

/* Driver list */
.vcna-batch-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
}

.vcna-batch-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--color-surface);
    min-height: 58px;
}

.vcna-batch-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.vcna-batch-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vcna-batch-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status button (tap to cycle) */
.vcna-batch-status-btn {
    border: none;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.vcna-batch-status-btn.bs-empty {
    background: var(--color-bg);
    color: var(--color-text-2);
    border: 1px dashed var(--color-border);
}
.vcna-batch-status-btn.bs-co-mat {
    background: #e6f7ee;
    color: #1a8a45;
    border: 1px solid #1a8a45;
}
.vcna-batch-status-btn.bs-nua-cong {
    background: linear-gradient(90deg, #e6f7ee 50%, #fff3cd 50%);
    color: #856404;
    border: 1px solid #856404;
}
.vcna-batch-status-btn.bs-vang {
    background: #ffeeed;
    color: #c0392b;
    border: 1px solid #c0392b;
}
.vcna-batch-status-btn.bs-nghi {
    background: #e8eaf6;
    color: #5c6bc0;
    border: 1px solid #5c6bc0;
}

/* Trip counter */
.vcna-batch-trips {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    justify-content: flex-end;
}
.vcna-trip-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-1);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    flex-shrink: 0;
}
.vcna-trip-btn:active { background: var(--color-primary); color: #fff; }
.vcna-trip-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
    min-width: 52px;
    text-align: center;
}

/* Read-only notice in detail chấm công tab */
.vcna-cc-readonly-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #795548;
    margin: 8px 0 12px;
}
.vcna-cc-readonly { cursor: default !important; }
.vcna-cc-readonly:hover { opacity: 1 !important; }

/* ════════════════════════════════════════════
   BATCH ROW v2 — Redesign với dropdown + ghi chú
════════════════════════════════════════════ */

/* Override grid layout → flex column */
.vcna-batch-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-left: 3px solid transparent;
    transition: border-color .2s, background .2s;
}
.vcna-brow-unsaved {
    border-left-color: var(--color-primary);
    background: #fffaf5;
}
.vcna-brow-saved {
    border-left-color: #1a8a45;
}

/* Line 1: header */
.vcna-brow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Save button states */
.vcna-brow-save-btn {
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
}
.vcna-brow-saved-btn {
    background: transparent;
    border: 1px solid #1a8a45;
    color: #1a8a45;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
}

/* Line 2: controls row */
.vcna-brow-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Loại công select */
.vcna-brow-loai {
    flex: 1;
    min-width: 140px;
    font-size: 13px;
}

/* Ngày / Chuyến toggle */
.vcna-brow-type-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.vcna-brow-type-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-2);
    cursor: pointer;
    transition: all .15s;
}
.vcna-brow-type-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* Trip counter inline */
.vcna-brow-trips {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Line 3: ghi chú */
.vcna-brow-note {
    padding-left: 46px; /* align with name (avatar width + gap) */
}
.vcna-brow-note .vcna-input {
    width: 100%;
    font-size: 12px;
    padding: 5px 10px;
}

/* Bottom bar */
.vcna-batch-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vcna-batch-summary {
    font-size: 13px;
    color: var(--color-text-2);
    font-weight: 500;
}

/* ════════════════════════════════════════════
   BATCH CHẤM CÔNG v3 — Card design
════════════════════════════════════════════ */

/* Progress bar dưới toolbar */
.vcna-batch-progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.vcna-bp-count {
    font-size: 13px;
    color: var(--color-text-2);
    font-weight: 500;
}
.vcna-bp-save-all {
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.vcna-bp-save-all:disabled { opacity: .6; }

/* Date wrap với tag "Hôm nay" */
.vcna-batch-date-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 130px;
}
.vcna-batch-today-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary);
    background: #fff3e0;
    border-radius: 10px;
    padding: 1px 7px;
    margin-top: 2px;
}

/* Card list */
.vcna-dc-list {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card */
.vcna-dc-card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    /* KHÔNG dùng overflow:hidden — bug đã gặp: clip mất phần dưới của
       .vcna-dd-panel (dropdown "Loại công") khi mở, khiến 2 mục cuối
       (Vắng/Nghỉ phép) bị cắt ra ngoài vùng nhìn thấy và không bấm chọn
       được. Card không có nội dung nào cần bo góc bằng overflow clip
       (border-radius tự đủ cho background phẳng), nên bỏ an toàn. */
    transition: border-color .2s;
}
.vcna-dc-unsaved { border-left-color: var(--color-primary); }
.vcna-dc-saved   { border-left-color: #1a8a45; }
.vcna-dc-empty   { border-left-color: var(--color-border); opacity: .85; }

/* Card header */
.vcna-dc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.vcna-dc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vcna-dc-avatar--dim  { background: var(--color-border); color: var(--color-text-2); }
.vcna-dc-avatar--abs  { background: #ffeeed; color: #c0392b; }
.vcna-dc-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-dc-ok-badge {
    font-size: 11px;
    font-weight: 600;
    color: #1a8a45;
    background: #e6f7ee;
    border: 1px solid #1a8a45;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vcna-dc-save-btn {
    height: 28px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.vcna-dc-save-btn--dim {
    border-color: var(--color-border);
    color: var(--color-text-2);
    cursor: default;
    opacity: .4;
}

/* Card body */
.vcna-dc-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Field rows */
.vcna-dc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    flex-wrap: wrap;
}
.vcna-dc-row--note { flex-wrap: nowrap; }
.vcna-dc-lbl {
    font-size: 11px;
    color: var(--color-text-2);
    width: 66px;
    flex-shrink: 0;
    font-weight: 500;
}
.vcna-dc-select {
    flex: 1;
    min-width: 140px;
    height: 32px;
    font-size: 13px;
    padding: 0 8px;
    border-radius: 6px;
}

/* Ngày/Chuyến toggle */
.vcna-dc-type-toggle {
    display: flex;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
}
.vcna-dc-type-toggle button {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-2);
    cursor: pointer;
    transition: all .15s;
}
.vcna-dc-type-toggle button.on {
    background: var(--color-primary);
    color: #fff;
}
/* Nút "Chuyến" (luôn là nút thứ 2) khi được chọn — đổi sang màu khác (xanh dương)
   thay vì cùng màu cam với nút "Ngày", để phân biệt nhanh 2 hình thức chấm công
   khi lướt qua danh sách tài xế. */
.vcna-dc-type-toggle button:last-child.on {
    background: var(--color-info, #1565c0);
    color: #fff;
}

/* Trip counter */
.vcna-dc-trips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Note input */
.vcna-dc-note {
    flex: 1;
    height: 30px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 6px;
}

/* Empty hint */
.vcna-dc-hint {
    padding: 8px 0 2px;
    font-size: 12px;
    color: var(--color-text-2);
    font-style: italic;
}

/* Override old batch row styles (keep trip buttons) */
.vcna-batch-list { display: none !important; }

/* ════════════════════════════════════════════
   BATCH CHẤM CÔNG — FINAL OVERRIDES (correct vars)
════════════════════════════════════════════ */

/* Toolbar */
.vcna-batch-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.vcna-batch-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.vcna-batch-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-1);
    min-width: 110px;
    text-align: center;
}
.vcna-batch-date-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vcna-batch-today-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: .3px;
    margin-top: 1px;
}

/* Progress bar */
.vcna-batch-progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.vcna-bp-count {
    font-size: 13px;
    color: var(--color-text-2);
    font-weight: 500;
}
.vcna-bp-save-all {
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.vcna-bp-save-all:hover { background: var(--color-primary-dark); }
.vcna-bp-save-all:disabled { opacity: .6; cursor: not-allowed; }

/* Card list wrapper */
.vcna-dc-list {
    padding: 12px 12px 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-bg);
    min-height: calc(100vh - 160px);
}

/* ── CARD ── */
.vcna-dc-card {
    background: var(--color-surface) !important;
    border-radius: var(--border-radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
    /* overflow:hidden đã bỏ — xem giải thích ở rule .vcna-dc-card gốc phía trên,
       clip mất dropdown "Loại công" khiến không chọn được Vắng/Nghỉ phép. */
    transition: border-left-color .2s, box-shadow .2s !important;
}
.vcna-dc-unsaved {
    border-left-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(245,124,0,.12) !important;
}
.vcna-dc-saved {
    border-left-color: var(--color-success) !important;
}
.vcna-dc-empty {
    border-left-color: var(--color-border) !important;
    opacity: .9 !important;
}

/* Card header */
.vcna-dc-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: var(--color-surface) !important;
}
.vcna-dc-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.vcna-dc-avatar--dim { background: #e2e8f0 !important; color: var(--color-text-3) !important; }
.vcna-dc-avatar--abs { background: #ffebee !important; color: var(--color-danger) !important; }
.vcna-dc-name {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text-1) !important;
}
.vcna-dc-ok-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-success) !important;
    background: var(--color-success-bg) !important;
    border: 1px solid #81c784 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.vcna-dc-save-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--color-primary) !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background .15s, color .15s !important;
}
.vcna-dc-save-btn:hover:not(:disabled) { background: var(--color-primary) !important; color: #fff !important; }
.vcna-dc-save-btn--dim {
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    cursor: default !important;
    opacity: .5 !important;
}

/* Card body */
.vcna-dc-body {
    padding: 0 14px 14px !important;
    border-top: 1px solid var(--color-border-light) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #fafbfc !important;
}

/* Field row */
.vcna-dc-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 10px !important;
    flex-wrap: wrap !important;
}
.vcna-dc-row--note { flex-wrap: nowrap !important; }
.vcna-dc-lbl {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-text-3) !important;
    width: 64px !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
}
.vcna-dc-select {
    flex: 1 !important;
    min-width: 140px !important;
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text-1) !important;
}

/* Ngày/Chuyến toggle */
.vcna-dc-type-toggle {
    display: flex !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.vcna-dc-type-toggle button {
    padding: 5px 13px !important;
    font-size: 12px !important;
    font-weight: 600;
}

/* Progress bar: nhóm 2 nút bên phải (Đánh dấu tất cả + Lưu tất cả) */
.vcna-bp-count { flex: 1 !important; }
.vcna-bp-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.vcna-bp-mark-all {
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--color-primary) !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s, color .15s !important;
}
.vcna-bp-mark-all:hover:not(:disabled) { background: var(--color-primary) !important; color: #fff !important; }
.vcna-bp-mark-all:disabled { opacity: .5 !important; cursor: not-allowed !important; }

/* Card thu gọn — tài xế đã chấm + đã lưu, bấm vào để mở lại sửa */
.vcna-dc-compact {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
}
.vcna-dc-compact .vcna-dc-avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.vcna-dc-compact-name {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text-1) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.vcna-dc-compact-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-text-2) !important;
    background: var(--color-bg-2) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.vcna-dc-compact-tag.tag-vang,
.vcna-dc-compact-tag.tag-nghi-phep {
    color: var(--color-danger) !important;
    background: #ffebee !important;
}

/* Badge "Mặc định" — gợi ý điền sẵn theo cấu hình hồ sơ tài xế, chưa lưu */
.vcna-dc-default-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    background: #fff3e0 !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}