/* =====================================================================
   Báo giá VinFast: giao diện công cụ
   Design read: app bán hàng nội bộ (nhân viên TVBH) · ngôn ngữ product-UI
   điềm tĩnh · 1 màu nhấn duy nhất · nền off-white + viền hairline.
   Dials: VARIANCE 4 · MOTION 4 · DENSITY 6.
   Ràng buộc thật: chạy offline trong Electron → dùng font hệ thống,
   không link Google Fonts (không có woff2 để self-host trong repo này).
   Thang bo góc (dùng nhất quán, không trộn tuỳ tiện):
     --r-xs  4px  nhãn/badge nhỏ
     --r-sm  8px  ô nhập, nút, chip, thanh tab
     --r-md 12px  thẻ (card), bảng giá
     Thang z-index: nav 40 · sticky 20 · toast 60 · modal 70 · capture 9999.
   ===================================================================== */

/* ---------- 1. Token ---------- */
:root {
    /* Nền & bề mặt (một họ xám duy nhất, hơi lạnh cho hợp màu nhấn) */
    --canvas: #f4f5f8;
    --canvas-tint: #edf0f7;
    --surface: #fdfdfe;
    --surface-2: #f6f7fa;
    --surface-3: #eceef4;

    /* Đường kẻ */
    --line: #e4e7ee;
    --line-2: #d6dae4;

    /* Chữ */
    --ink: #15181d;
    --ink-2: #565d6b;
    --ink-3: #767b86;

    /* Màu nhấn (duy nhất) */
    --accent: #1f56c4;
    --accent-dark: #17439b;
    --accent-soft: #e9effb;

    /* Màu dữ liệu: chỉ dùng để mã hoá ý nghĩa, không trang trí */
    --green: #10704a;
    --green-soft: #e7f4ed;
    --green-line: #b9dfcb;
    --amber: #8f5c0a;
    --amber-soft: #fbf1de;
    --amber-line: #ecd7ae;
    --red: #a9231f;
    --red-soft: #fbebe9;
    --red-line: #ebc6c3;
    --plum: #5b3fa0;
    --plum-soft: #efebfa;
    --plum-line: #d4c9ef;

    /* Bo góc & đổ bóng (bóng nhuộm theo tông nền, không dùng đen thuần) */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --shadow-1: 0 1px 2px rgba(20, 28, 58, 0.06);
    --shadow-2: 0 1px 2px rgba(20, 28, 58, 0.04), 0 14px 30px -20px rgba(20, 28, 58, 0.24);

    /* Chữ */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-num: ui-monospace, SFMono-Regular, "SF Mono", "Segoe UI Mono", Consolas,
        "Liberation Mono", monospace;

    --z-sticky: 20;
    --z-nav: 40;
    --z-toast: 60;
    --z-modal: 70;
    --z-capture: 9999;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --touch: 44px;
    --bottom-nav-h: 60px;
}

/* ---------- 2. Nền tảng ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
    /* Vệt sáng rất nhẹ ở đỉnh trang để nền không "chết" */
    background: radial-gradient(1100px 420px at 50% -12%, var(--canvas-tint), transparent 72%),
        var(--canvas);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.011em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--accent);
}

::selection {
    background: var(--accent-soft);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow-2);
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

/* ---------- 3. Khung ứng dụng ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(253, 253, 254, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Nút mở menu: chỉ hiện trên điện thoại */
.menu-btn {
    display: none;
    flex: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
}

.menu-btn svg {
    width: 20px;
    height: 20px;
}

.menu-btn:active {
    background: var(--surface-2);
}

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    background: rgba(20, 28, 58, 0.34);
}

.brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-sub {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: panel-in 0.24s var(--ease);
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 4. Điều hướng ---------- */
.tabs {
    margin-bottom: 20px;
}

.tabs-inner {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-inner::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    appearance: none;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.tab-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.tab-btn:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
}

.tab-btn.active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 650;
    box-shadow: var(--shadow-1);
}

.tab-btn.active svg {
    color: var(--accent);
}

.tab-short {
    display: none;
}

/* ---------- 5. Thẻ ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--line);
}

.card-head h2 {
    font-size: 0.9375rem;
    font-weight: 650;
}

.card-sub {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.card-note {
    padding: 14px 20px 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
    max-width: 62ch;
}

.card-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

.group-title {
    padding: 18px 20px 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ink);
}

.group-title--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tiện ích khoảng cách nhỏ */
.mt-sm {
    margin-top: 8px;
}

.mt-md {
    margin-top: 14px;
}

/* ---------- 6. Ô nhập (nhãn LUÔN ở trên ô) ---------- */
.field-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 20px 22px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.field--wide {
    grid-column: 1 / -1;
}

.label {
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ink-2);
    line-height: 1.3;
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ink-2);
}

.hint {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.hint-strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}

.control {
    min-width: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.row > .grow {
    flex: 1 1 150px;
    min-width: 0;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
}

input::placeholder,
textarea::placeholder {
    color: var(--ink-3);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31, 86, 196, 0.14);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-2);
    color: var(--ink-3);
    cursor: not-allowed;
}

select {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23767b86' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

textarea {
    min-height: 44px;
    resize: vertical;
    line-height: 1.45;
}

input[type="checkbox"],
input[type="radio"] {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
}

input.num,
input.money,
.tnum {
    font-variant-numeric: tabular-nums;
}

input.money {
    text-align: right;
}

input.mono {
    font-family: var(--font-num);
    font-size: 0.875rem;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 2px 0;
}

.radio-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    cursor: pointer;
}

.pct-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.pct-row input[type="number"] {
    width: 88px;
    flex: none;
    text-align: right;
}

/* ---------- 7. Nút ---------- */
.btn,
.btn-primary,
.btn-success,
.btn-outline,
.btn-danger,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
        color 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.12s var(--ease);
}

.btn:active,
.btn-primary:active,
.btn-success:active,
.btn-outline:active,
.btn-danger:active,
.btn-ghost:active {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-success:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.tab-btn:focus-visible,
.theme-chip:focus-visible,
.term-btn:focus-visible,
.suggestion-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 86, 196, 0.28);
}

.btn:hover {
    background: var(--surface-2);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 20px -14px rgba(31, 86, 196, 0.85);
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn-success {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 10px 20px -14px rgba(16, 112, 74, 0.85);
}

.btn-success:hover {
    background: #0c5c3d;
    border-color: #0c5c3d;
}

.btn-outline {
    background: var(--surface);
    border-color: var(--line-2);
    color: var(--ink);
}

.btn-outline:hover {
    background: var(--surface-2);
    border-color: var(--ink-3);
}

.btn-ghost {
    background: none;
    color: var(--ink-2);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.btn-danger {
    background: var(--red-soft);
    border-color: var(--red-line);
    color: var(--red);
}

.btn-danger:hover {
    background: #f7e0de;
}

.btn-sm {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.8125rem;
}

.btn-lg {
    min-height: 44px;
    padding: 11px 20px;
    font-size: 0.9375rem;
}

.btn-block {
    width: 100%;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-xs);
}

.btn-link:hover {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 86, 196, 0.28);
}

/* Nút tạo ảnh trong khối kết quả */
.btn-copy {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 10px 20px -14px rgba(31, 86, 196, 0.85);
}

.btn-copy:hover {
    background: var(--accent-dark);
}

/* ---------- 8. Chọn kỳ hạn & chip gợi ý ---------- */
.term-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.term-btn {
    min-height: 32px;
    padding: 5px 13px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.term-btn:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.75);
}

.term-btn.active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 650;
    box-shadow: var(--shadow-1);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.suggestion-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.suggestion-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ---------- 9. Dòng ưu đãi / phụ kiện ---------- */
.discount-item,
.accessory-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px;
    margin-top: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

/* Trên điện thoại: tên và nút xoá chung một dòng, ghi chú xuống dòng dưới
   (để 100% thì mỗi món chiếm tới ba dòng) */
.discount-item .discount-name,
.accessory-item .accessory-name {
    flex: 1 1 140px;
    order: 1;
}

.discount-item .discount-pct {
    flex: 1 1 100px;
    order: 3;
    text-align: right;
}

.discount-item .discount-type {
    flex: 1 1 140px;
    order: 4;
}

.discount-item .discount-remove,
.accessory-item .accessory-remove {
    flex: 0 0 40px;
    order: 2;
    min-height: 40px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.discount-item .discount-remove:hover,
.accessory-item .accessory-remove:hover {
    background: var(--red-soft);
    border-color: var(--red-line);
    color: var(--red);
}

.accessory-item .accessory-note {
    flex: 1 1 100%;
    order: 3;
}

.discount-type {
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.16s var(--ease);
}

.discount-type:hover {
    filter: brightness(0.94);
}

.discount-type[data-type="hd"] {
    background: #1f56c4;
}

.discount-type[data-type="tm"] {
    background: #8f5c0a;
}

.discount-type[data-type="tm_cash"] {
    background: #10704a;
}

.discount-type[data-type="phieu_thu"] {
    background: #5b3fa0;
}

.discount-type[data-type="final_pct"] {
    background: #a9231f;
}

/* Dòng ưu đãi trong tab Hợp đồng (JS sinh) */
.uu-dai-a-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
}

.uu-dai-a-row .uu-dai-a-mota {
    flex: 1 1 220px;
    min-height: 42px;
    resize: none;
    overflow: hidden;
}

.uu-dai-a-row .uu-dai-a-tien {
    flex: 1 1 140px;
    max-width: 190px;
}

.uu-dai-a-row .uu-dai-a-remove {
    flex: 0 0 42px;
    min-height: 42px;
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    border-radius: var(--r-sm);
    color: var(--red);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- 10. Bảng giá (khối được chụp ảnh) ---------- */
/* :where() để bộ biến mặc định có độ ưu tiên 0, nhờ đó các lớp theme-* ghi đè được */
:where(#result-card, #loan-summary-card, #loan-detail-card) {
    --theme-bar: #1f56c4;
    --theme-bar-2: #17439b;
    --theme-soft: #eef2fb;
    --theme-ink: #17439b;
    --theme-header-bg: linear-gradient(135deg, #0d47a1, #1565c0);
    --theme-section-bg: linear-gradient(135deg, #1a73e8, #0d47a1);
    --theme-text-color: #ffffff;
    --theme-accent: #1565c0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.theme-emerald {
    --theme-bar: #10704a;
    --theme-bar-2: #0b5638;
    --theme-soft: #e9f5ef;
    --theme-ink: #0b5638;
    --theme-header-bg: linear-gradient(135deg, #064e3b, #047857);
    --theme-section-bg: linear-gradient(135deg, #059669, #065f46);
    --theme-accent: #047857;
}

.theme-crimson {
    --theme-bar: #9c2320;
    --theme-bar-2: #7d1a18;
    --theme-soft: #fbebea;
    --theme-ink: #851c19;
    --theme-header-bg: linear-gradient(135deg, #881337, #be123c);
    --theme-section-bg: linear-gradient(135deg, #e11d48, #9f1239);
    --theme-accent: #be123c;
}

.theme-dark {
    --theme-bar: #262c35;
    --theme-bar-2: #171b21;
    --theme-soft: #f0f1f4;
    --theme-ink: #262c35;
    --theme-header-bg: linear-gradient(135deg, #0f172a, #334155);
    --theme-section-bg: linear-gradient(135deg, #475569, #1e293b);
    --theme-accent: #334155;
}

.theme-violet {
    --theme-bar: #5b3fa0;
    --theme-bar-2: #47317e;
    --theme-soft: #f1edfa;
    --theme-ink: #47317e;
    --theme-header-bg: linear-gradient(135deg, #4c1d95, #6d28d9);
    --theme-section-bg: linear-gradient(135deg, #7c3aed, #581c87);
    --theme-accent: #6d28d9;
}

/* Bảng báo giá giữ đúng khung gốc: bo góc 8px, viền xanh nhạt */
#result-card {
    background: #fff;
    border: 1px solid #dce3ef;
    border-radius: 8px;
}

.quote-card {
    margin: 16px 20px 18px;
}

.quote-card #loan-bank-label {
    background: var(--theme-bar);
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    padding: 12px 16px;
}

/* Bảng báo giá: tiêu đề IN HOA trên nền gradient, ngày in nghiêng nằm trong header */
.quote-card #result-title {
    background: var(--theme-header-bg, linear-gradient(135deg, #0d47a1, #1565c0));
    color: var(--theme-text-color, #fff);
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.9rem 1rem 0.4rem;
}

.quote-card #result-date {
    background: var(--theme-header-bg, linear-gradient(135deg, #0d47a1, #1565c0));
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    font-size: 0.88rem;
    font-style: italic;
    padding: 0 1rem 0.75rem;
}

/* Bảng giá gốc: hàng trắng, kẻ dòng mảnh, zebra rất nhạt */
.result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.result-table .result-label {
    padding: 0.6rem 1rem;
    color: #444;
    background: #fff;
    width: 60%;
    border-bottom: 1px solid #f0f2f5;
}

.result-table .result-value {
    padding: 0.6rem 1rem;
    color: #1a1a2e;
    font-weight: 600;
    background: #fff;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid #f0f2f5;
}

/* Dải tiêu đề mục (A, B, C…): nền gradient đậm, chữ trắng IN HOA */
.result-table tr.result-section-header td {
    background: var(--theme-section-bg, linear-gradient(135deg, #1a73e8, #0d47a1));
    color: var(--theme-text-color, #fff);
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.65rem 1rem;
}

/* Dòng tổng: nền kem, chữ nâu đỏ */
.result-table tr.result-highlight .result-label {
    background: #fff8e1;
    color: #bf360c;
    font-weight: 700;
    font-size: 0.97rem;
}

.result-table tr.result-highlight .result-value {
    background: #fff8e1;
    color: #bf360c;
    font-weight: 700;
    font-size: 1rem;
}

/* Zebra + hover như bản gốc */
.result-table tr:not(.result-section-header):not(.result-highlight):nth-child(even) .result-label,
.result-table tr:not(.result-section-header):not(.result-highlight):nth-child(even) .result-value {
    background: #f8faff;
}

.result-table tr:not(.result-section-header):hover .result-label,
.result-table tr:not(.result-section-header):hover .result-value {
    background: #e8f0fe;
    transition: background 0.15s;
}

/* Nhãn phân loại ưu đãi (badge vuông nhỏ, không dùng dạng viên thuốc) */
.badge-hd,
.badge-tm,
.badge-pt,
.badge-final,
.badge-tang {
    display: inline-block;
    margin-left: 5px;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}

.badge-hd {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.badge-tm {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.badge-pt {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

.badge-final {
    background: #fce4ec;
    color: #c2185b;
}

.badge-tang {
    background: linear-gradient(90deg, #e53935, #ff1744, #ff5252, #ff1744, #e53935);
    background-size: 200% auto;
    color: #fff;
    font-weight: 800;
}

/* Khối quà tặng: dải xanh đậm + hàng nền xanh nhạt + badge xanh */
.result-table tr.result-gift-header td {
    background: linear-gradient(135deg, #1b5e20, #2e7d32, #1b5e20) !important;
    border-top: 2px solid #a5d6a7 !important;
    border-bottom: 2px solid #1b5e20 !important;
    padding: 0.75rem 1rem !important;
    text-align: center;
}

.gift-header-badge {
    color: #fff;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.result-table tr.result-gift-row td {
    background: #f1f8e9 !important;
    border-bottom: 1px solid #c8e6c9 !important;
}

.result-table tr.result-gift-row:hover td {
    background: #e8f5e9 !important;
}

.result-table tr.result-gift-row .gift-label {
    color: #1b5e20 !important;
    font-weight: 600 !important;
    font-size: 0.94rem;
}

.result-table tr.result-gift-row .gift-value {
    text-align: right;
}

.gift-bullet {
    margin-right: 0.3rem;
    display: inline-block;
}

.badge-gift-item {
    display: inline-block;
    padding: 0.22rem 0.75rem;
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.25);
}

/* ---------- 11. Chọn bảng màu ---------- */
.theme-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.theme-picker-label {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-right: 2px;
}

.theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}

.theme-chip:hover {
    border-color: var(--line-2);
    color: var(--ink);
}

.theme-chip.active {
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 650;
    background: var(--surface-2);
}

.theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* ---------- 12. Lịch trả ngân hàng ---------- */
#loan-summary-output {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.loan-summary-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.loan-summary-table thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 650;
    padding: 9px 12px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.loan-summary-table thead th:first-child {
    text-align: left;
}

.loan-summary-table thead th small {
    font-weight: 400;
    color: var(--ink-3);
}

.loan-summary-table .loan-label {
    padding: 8px 12px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.loan-summary-table .loan-value {
    padding: 8px 12px;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.loan-summary-table tbody tr:last-child .loan-label,
.loan-summary-table tbody tr:last-child .loan-value {
    border-bottom: 0;
}

.loan-summary-table tr.loan-highlight .loan-label,
.loan-summary-table tr.loan-highlight .loan-value {
    background: var(--theme-soft, var(--accent-soft));
    color: var(--ink);
}

.loan-summary-table tr.loan-highlight .loan-label {
    font-weight: 650;
}

.loan-summary-table tr.loan-highlight .loan-value {
    color: var(--theme-ink, var(--accent-dark));
    font-weight: 700;
}

.loan-summary-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.875rem;
}

.loan-detail-summary {
    display: grid;
    /* 5 ô số liệu nằm chung một hàng, lấp kín chiều ngang */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.lds-item {
    padding: 10px 14px;
    background: var(--theme-soft, var(--accent-soft));
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lds-item span {
    font-size: 0.75rem;
    color: var(--ink-2);
}

.lds-item strong {
    font-size: 0.9375rem;
    font-weight: 650;
}

.lds-item.highlight strong {
    color: var(--theme-ink, var(--accent-dark));
    font-size: 1.0625rem;
}

.loan-table-wrap {
    max-height: 460px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.loan-detail-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.loan-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--theme-bar, var(--accent));
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 9px 12px;
    text-align: right;
    white-space: nowrap;
}

.loan-detail-table thead th:first-child {
    text-align: center;
}

.loan-detail-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.loan-detail-table tbody tr:nth-child(even) td {
    background: var(--surface-2);
}

.loan-detail-table tbody tr:hover td {
    background: var(--surface-3);
}

.col-right {
    text-align: right;
}

.col-center {
    text-align: center;
}

.loan-payment {
    font-weight: 650;
    color: var(--theme-ink, var(--accent-dark));
}

.row-promo td:first-child {
    box-shadow: inset 3px 0 0 var(--theme-bar, var(--accent));
}

.row-total td {
    background: var(--theme-soft, var(--accent-soft)) !important;
    font-weight: 650;
    border-top: 1px solid var(--line-2);
}

.tag-promo {
    display: inline-block;
    padding: 1px 5px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    color: var(--theme-ink, var(--accent-dark));
    font-size: 0.6875rem;
    font-weight: 650;
}

.scroll-hint {
    display: none;
    padding: 12px 20px 0;
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* ---------- 13. Tra cứu địa chỉ ---------- */
#address-result-card {
    margin: 0 20px 20px;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.addr-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.addr-result-title {
    font-size: 0.8125rem;
    font-weight: 650;
}

.addr-badge {
    padding: 3px 8px;
    border-radius: var(--r-xs);
    font-size: 0.6875rem;
    font-weight: 650;
}

.addr-badge-merged {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-line);
}

.addr-badge-unchanged {
    background: var(--surface-3);
    color: var(--ink-2);
}

.addr-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.addr-box {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.addr-box-new {
    border-color: var(--green-line);
    background: var(--green-soft);
}

.addr-box-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
}

.addr-box-text {
    font-size: 0.875rem;
    line-height: 1.45;
}

.addr-box-new .addr-box-text {
    color: #0b4f34;
}

.addr-resolution {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    color: var(--ink-2);
}

.addr-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* ---------- 14. Xuất hợp đồng ---------- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.form-field--wide {
    grid-column: 1 / -1;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.req {
    color: var(--red);
    font-weight: 700;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px 20px 22px;
}

.template-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.template-name {
    flex: 1 1 200px;
    min-width: 0;
    word-break: break-word;
    color: var(--ink);
    font-weight: 550;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
}

.status-msg {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--green);
}

/* ---------- 15. Quản trị ---------- */
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 16px 20px 22px;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.admin-field label {
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ink-2);
}

.field-note {
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* Danh sách 20+ dòng xe: thu gọn được, nếu không trên điện thoại phải cuộn rất dài */
.admin-cars > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-cars > summary::-webkit-details-marker {
    display: none;
}

.admin-cars > summary::after {
    content: "▸";
    margin-left: auto;
    color: var(--ink-3);
    font-size: 0.8125rem;
    transition: transform 0.16s var(--ease);
}

.admin-cars[open] > summary::after {
    transform: rotate(90deg);
}

.admin-cars > summary:hover {
    color: var(--accent);
}

.admin-cars-count {
    color: var(--ink-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.admin-cars-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 0;
}

.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 8px;
}

.admin-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.admin-table th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-2);
    white-space: nowrap;
}

.admin-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.admin-table input[type="text"] {
    min-height: 36px;
}

.admin-table .admin-del-car {
    width: 34px;
    height: 34px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.admin-table .admin-del-car:hover {
    background: var(--red-soft);
    border-color: var(--red-line);
    color: var(--red);
}

/* ---------- 16. Thông báo (thay cho alert) ---------- */
.toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: min(92vw, 420px);
}

.toast {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--ink);
    color: #f7f8fa;
    border-radius: var(--r-sm);
    box-shadow: 0 18px 40px -20px rgba(10, 14, 30, 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    animation: toast-in 0.22s var(--ease);
}

.toast-success {
    background: var(--green);
}

.toast-error {
    background: var(--red);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 17. Chụp ảnh (html2canvas) ---------- */
body.is-capturing-desktop .capturing-el {
    position: fixed !important;
    left: -10000px !important;
    top: 0 !important;
    z-index: var(--z-capture) !important;
    width: 820px !important;
    min-width: 820px !important;
    max-width: 820px !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}

body.is-capturing-desktop #loan-detail-card.capturing-el {
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
}

body.is-capturing-desktop .loan-detail-table {
    min-width: 100%;
}

body.is-capturing-desktop .loan-table-wrap {
    max-height: none !important;
}

body.is-capturing-desktop .quote-card {
    margin: 0 !important;
}

/* Ảnh chụp giữ đúng diện mạo bảng báo giá, kể cả khi app đang mở ở
   viewport ≤ 760px (rule mobile không được leak vào bản clone). */
body.is-capturing-desktop #result-card.capturing-el {
    border: 1px solid #dce3ef !important;
    border-radius: 8px !important;
}

body.is-capturing-desktop .capturing-el .scroll-hint {
    display: none !important;
}

/* Lưới số liệu trả góp trong ảnh chụp: luôn 5 ô trên một hàng như bản desktop */
body.is-capturing-desktop .capturing-el .loan-detail-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.is-capturing-desktop .capturing-el .loan-detail-summary .lds-item.highlight {
    grid-column: auto !important;
}

/* ---------- 18. Desktop ---------- */
@media (min-width: 761px) {
    .field-list,
    .grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 18px 22px;
    }

    .discount-item .discount-name,
    .accessory-item .accessory-name {
        flex: 1 1 180px;
        order: 1;
    }

    .discount-item .discount-pct {
        order: 2;
        flex: 0 0 110px;
    }

    .discount-item .discount-type {
        order: 3;
        flex: 0 0 150px;
    }

    .discount-item .discount-remove,
    .accessory-item .accessory-remove {
        order: 4;
    }

    .accessory-item .accessory-note {
        order: 2;
        flex: 1 1 180px;
    }

    .quote-card {
        margin: 16px 20px 18px;
    }
}

/* ---------- 19. Mobile ---------- */
@media (max-width: 760px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .topbar-inner {
        padding: 10px 14px;
    }

    .brand-sub {
        display: none;
    }

    .container {
        padding: 12px 0 18px;
    }

    /* Mobile: thẻ trải hết mép màn hình, bỏ viền và bo góc hai bên */
    .card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        margin-bottom: 10px;
    }

    .card-head,
    .card-note,
    .card-foot,
    .group-title,
    .template-row,
    .form-actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .field-list,
    .grid-2,
    .admin-grid-2 {
        padding: 16px 14px 18px;
        grid-template-columns: 1fr;
    }

    .card-foot {
        flex-direction: column-reverse;
    }

    .card-foot .btn {
        width: 100%;
    }

    /* Ô nhập 44px + 16px để iOS không tự phóng to */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        min-height: var(--touch);
        font-size: 16px;
        padding: 11px 12px;
    }

    select {
        padding-right: 36px;
    }

    .btn,
    .btn-primary,
    .btn-success,
    .btn-outline,
    .btn-danger,
    .btn-ghost {
        min-height: var(--touch);
    }

    .btn-sm {
        min-height: 38px;
    }

    .row > .grow {
        flex: 1 1 100%;
    }

    .quote-card {
        margin: 16px 14px 18px;
    }

    /* Lưới số liệu trả góp: 2 cột cho vừa màn hình nhỏ, ô tổng trải hết hàng */
    .loan-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loan-detail-summary .lds-item.highlight {
        grid-column: 1 / -1;
    }

    .scroll-hint {
        display: block;
        padding: 10px 14px 0;
    }

    /* Vùng chạm ngón tay: 17px quá nhỏ trên điện thoại */
    input[type="checkbox"],
    input[type="radio"] {
        width: 21px;
        height: 21px;
    }

    .theme-chip {
        min-height: 34px;
        padding: 6px 11px;
    }

    #address-result-card {
        margin: 0 14px 16px;
        padding: 14px;
    }

    .addr-comparison-grid {
        grid-template-columns: 1fr;
    }

    .addr-actions .btn,
    .addr-actions .btn-primary,
    .addr-actions .btn-outline {
        width: 100%;
    }

    .admin-table-wrap {
        padding: 4px 14px 8px;
    }

    /* Bảng cấu hình xe: mỗi dòng thành một thẻ dọc */
    .admin-table {
        min-width: 0;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    /* Xếp 2 cột để mỗi xe gọn lại, tên xe và nút xoá chiếm trọn hàng */
    .admin-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        padding: 12px;
        margin: 0 0 10px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
    }

    .admin-table td {
        padding: 0;
        border-bottom: 0;
    }

    /* 3 hàng đôi: mã + tên · giá + phụ thu màu · bảo hiểm + xoá */
    .admin-table td:nth-child(5) {
        align-self: end;
    }

    .admin-table td:nth-child(6) {
        align-self: end;
        justify-self: end;
    }

    .admin-table td:nth-child(6) .admin-del-car {
        width: 44px;
    }

    .admin-table td::before {
        display: block;
        margin-bottom: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--ink-2);
    }

    .admin-table td:nth-child(1)::before {
        content: "Mã xe (ID)";
    }

    .admin-table td:nth-child(2)::before {
        content: "Tên xe hiển thị";
    }

    .admin-table td:nth-child(3)::before {
        content: "Giá niêm yết (đ)";
    }

    .admin-table td:nth-child(4)::before {
        content: "Phụ thu màu (đ)";
    }

    .admin-table td:nth-child(5)::before {
        content: "Bảo hiểm mức thấp (≤ 5 chỗ)";
    }

    .admin-table td:nth-child(6)::before {
        display: none;
    }

    .admin-table td:nth-child(5) {
        text-align: left !important;
    }

    .admin-table .admin-del-car {
        width: 100%;
        margin-top: 6px;
    }

    .theme-picker-label {
        display: none;
    }

    .template-row .btn {
        width: 100%;
    }

    /* Menu dạng ngăn kéo trượt từ trái: 6 tab không còn đủ chỗ cho thanh dưới */
    .menu-btn {
        display: inline-flex;
    }

    .topbar-inner {
        padding: 10px 14px;
    }

    .brand {
        margin-left: auto;
        text-align: right;
        order: 3;
    }

    .tabs {
        margin: 0;
    }

    .tabs-inner {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-nav);
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: min(268px, 82vw);
        max-width: none;
        padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border: 0;
        border-right: 1px solid var(--line);
        border-radius: 0;
        box-shadow: 14px 0 40px -24px rgba(20, 28, 58, 0.45);
        transform: translateX(-100%);
        transition: transform 0.2s var(--ease);
        overflow-y: auto;
    }

    body.nav-open .tabs-inner {
        transform: translateX(0);
    }

    .tab-btn {
        justify-content: flex-start;
        gap: 12px;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: var(--r-sm);
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--ink-2);
    }

    .tab-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.5;
    }

    .tab-btn.active {
        background: var(--accent-soft);
        color: var(--accent-dark);
        font-weight: 650;
        box-shadow: none;
    }

    /* Trong ngăn kéo có đủ chỗ nên dùng tên đầy đủ */
    .tab-full {
        display: block;
    }

    .tab-short {
        display: none;
    }

    .toast-host {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* Máy hẹp (iPhone SE ~320px): thu chữ để 6 tab vẫn nằm gọn một dòng */
@media (max-width: 360px) {
    .tab-btn {
        padding: 8px 1px;
        font-size: 0.625rem;
    }

    .tab-btn svg {
        width: 19px;
        height: 19px;
    }
}

/* ---------- 20. Xem trước hợp đồng (.docx) ---------- */
.contract-preview[hidden] {
    display: none;
}

body.is-preview-open {
    overflow: hidden;
}

.contract-preview {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(16, 20, 34, 0.55);
}

.contract-preview-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 1020px);
    height: min(100%, 940px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.contract-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.contract-preview-head h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--ink);
}

.contract-preview-name {
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contract-preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px;
    overflow: auto;
    background: var(--canvas-tint);
}

.contract-preview-msg {
    padding: 9px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 0.8125rem;
    color: var(--ink-2);
}

/* Trang do docx-preview dựng ra: khung giấy + bóng nhẹ cho dễ đọc */
.contract-preview-body .docx-wrapper {
    background: none;
    padding: 0;
}

.contract-preview-body .docx-wrapper>section.docx {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    box-shadow: var(--shadow-1);
}

@media (max-width: 760px) {
    .contract-preview {
        padding: 0;
    }

    .contract-preview-dialog {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
    }

    .contract-preview-body {
        padding: 10px;
    }
}

/* ---------- 21. Xử lý PDF ---------- */
/* Nơi dựng tạm file Word để chụp từng trang: phải nằm trong luồng bố cục thật
   (display:none hoặc visibility:hidden thì html2canvas chụp ra trang trắng) */
.pdf-docx-stage {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 816px;
    background: #fff;
    pointer-events: none;
    z-index: -1;
}

.pdf-drop {
    margin: 16px 20px;
    padding: 26px 18px;
    text-align: center;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: border-color 0.14s ease, background 0.14s ease;
}

.pdf-drop.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.pdf-drop-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.pdf-drop-sub {
    margin: 4px 0 12px;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.pdf-file-list {
    list-style: none;
    margin: 0 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdf-file-list:empty {
    display: none;
}

.pdf-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.8125rem;
}

.pdf-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 550;
}

.pdf-file-tag {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 0.6875rem;
    font-weight: 600;
}

.pdf-file-meta {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.pdf-file-remove {
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.pdf-file-remove:hover {
    border-color: var(--red-line);
    background: var(--red-soft);
    color: var(--red);
}

.pdf-count {
    color: var(--ink-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 20px 0;
}

.pdf-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.pdf-range input {
    width: 150px;
}

.pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

.pdf-tile {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.pdf-tile:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-1);
}

.pdf-tile.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.pdf-tile.is-dragging {
    opacity: 0.4;
}

.pdf-tile.is-drop-target {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.pdf-thumb {
    height: 150px;
    background: var(--surface) center / contain no-repeat;
    border-bottom: 1px solid var(--line);
}

.pdf-thumb.is-failed::after {
    content: "Không xem trước được";
    display: grid;
    place-items: center;
    height: 100%;
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--ink-3);
    text-align: center;
}

.pdf-tile-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
}

.pdf-tile-no {
    flex: none;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: var(--r-xs);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 0.6875rem;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pdf-tile.is-selected .pdf-tile-no {
    background: var(--accent);
    color: #fff;
}

.pdf-tile-src {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: var(--ink-3);
}

@media (max-width: 640px) {
    .pdf-range {
        margin-left: 0;
        width: 100%;
    }

    .pdf-range input {
        flex: 1;
        width: auto;
    }

    .pdf-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
        padding: 12px;
    }

    .pdf-thumb {
        height: 118px;
    }
}

/* ---------- 22. Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ---------- Mobile: thanh dưới + thanh tổng giá ---------- */
.bottom-nav,
.quote-sticky {
    display: none;
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .menu-btn {
        display: none;
    }

    .brand {
        order: 0;
        margin-left: 10px;
        text-align: left;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px -14px rgba(20, 28, 58, 0.35);
    }

    .bn-btn {
        appearance: none;
        border: 0;
        background: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 6px 2px;
        font: inherit;
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--ink-3, #6b7280);
        cursor: pointer;
    }

    .bn-btn svg {
        width: 22px;
        height: 22px;
    }

    .bn-btn.active {
        color: var(--accent);
        font-weight: 650;
    }

    .quote-sticky:not([hidden]) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: var(--z-sticky);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px -12px rgba(20, 28, 58, 0.4);
    }

    #tab-quote:not(.active) .quote-sticky {
        display: none;
    }

    .qs-info {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .qs-label {
        font-size: 0.6875rem;
        color: var(--ink-3, #6b7280);
    }

    .qs-info strong {
        font-size: 1.125rem;
        color: var(--accent-dark, var(--accent));
    }

    body {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    .toast-host {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 132px);
    }
}


/* Mobile: bảng chi tiết trả góp thành thẻ theo tháng, không cuộn ngang/dọc lồng nhau */
@media (max-width: 760px) {
    .loan-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .loan-detail-table {
        min-width: 0;
    }

    .loan-detail-table thead {
        display: none;
    }

    .loan-detail-table,
    .loan-detail-table tbody {
        display: block;
        width: 100%;
    }

    .loan-detail-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 12px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
    }

    .loan-detail-table tbody td,
    .loan-detail-table tbody tr:nth-child(even) td {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 2px 0;
        border: 0;
        background: none;
        font-size: 0.8125rem;
        text-align: right;
    }

    .loan-detail-table td::before {
        content: attr(data-label);
        color: var(--ink-3);
        font-weight: 500;
        text-align: left;
    }

    /* Dòng đầu: "Tháng n" + lãi suất; dòng cuối: tổng góp nổi bật */
    .loan-detail-table td[data-label="Tháng"] {
        font-weight: 700;
    }

    .loan-detail-table td[data-label="Tổng góp"] {
        grid-column: 1 / -1;
        padding-top: 4px;
        margin-top: 2px;
        border-top: 1px dashed var(--line);
    }

    .loan-detail-table tr.row-total {
        background: var(--surface-2);
    }

    .loan-detail-table tr.row-total td[colspan] {
        display: none;
    }

    .loan-detail-table tr.row-total td[data-label="Tổng trả"] {
        grid-column: 1 / -1;
    }

    /* Bảng chi tiết không còn phải vuốt ngang */
    #loan-detail-card ~ * .scroll-hint,
    .card:has(#loan-detail-card) .scroll-hint {
        display: none;
    }
}

@media (max-width: 760px) {
    .loan-detail-table tr.row-promo td:first-child {
        border-left: 0;
        box-shadow: none;
    }

    .loan-detail-table tr.row-promo {
        border-left: 3px solid var(--accent);
    }
}

/* Bảng chi tiết trả góp: thu gọn được, mặc định đóng trên điện thoại (xem
   loan.js) để nút "Sao chép bảng chi tiết" luôn nằm ngay dưới tiêu đề. */
.loan-detail-fold {
    border-top: 1px solid var(--line);
}

.loan-detail-fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-2);
}

.loan-detail-fold-summary::-webkit-details-marker {
    display: none;
}

.loan-detail-fold-summary::after {
    content: "▸";
    color: var(--ink-3);
    font-size: 0.8125rem;
    transition: transform 0.16s var(--ease);
}

.loan-detail-fold[open] > .loan-detail-fold-summary::after {
    transform: rotate(90deg);
}

.loan-detail-fold-summary:hover {
    color: var(--accent);
}

@media (max-width: 760px) {
    /* Đưa nút "Sao chép bảng chi tiết" lên ngay sau tiêu đề, trước bảng đang
       thu gọn — không cần sửa thứ tự HTML, chỉ đổi thứ tự hiển thị. */
    .loan-detail-section {
        display: flex;
        flex-direction: column;
    }

    .loan-detail-section > .card-head {
        order: 0;
    }

    .loan-detail-section > .card-foot {
        order: 1;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        margin-top: 0;
        padding-top: 14px;
    }

    .loan-detail-section > .loan-detail-fold {
        order: 2;
        border-top: 0;
    }
}

/* Ảnh chụp (.capturing-el) luôn là bảng desktop đầy đủ, kể cả khi chụp trên
   điện thoại: ghi đè kiểu thẻ-dọc ở trên, không phụ thuộc khổ màn hình thật,
   vì bản chụp là bản sao riêng được đặt ẩn ngoài màn hình để không ảnh hưởng
   tới cách trang đang hiển thị cho người dùng. */
.capturing-el .loan-detail-table {
    min-width: 100% !important;
}

.capturing-el .loan-detail-table thead {
    display: table-header-group !important;
}

.capturing-el .loan-detail-table,
.capturing-el .loan-detail-table tbody {
    display: table !important;
    width: 100% !important;
}

.capturing-el .loan-detail-table tr {
    display: table-row !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

.capturing-el .loan-detail-table tbody td,
.capturing-el .loan-detail-table tbody tr:nth-child(even) td {
    display: table-cell !important;
    padding: 7px 12px !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 0.8125rem !important;
}

.capturing-el .loan-detail-table tbody tr:nth-child(even) td {
    background: var(--surface-2) !important;
}

.capturing-el .loan-detail-table td::before {
    content: none !important;
}

.capturing-el .loan-detail-table td[data-label="Tổng góp"] {
    grid-column: auto !important;
    padding-top: 7px !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--line) !important;
}

.capturing-el .loan-detail-table tr.row-total td[colspan] {
    display: table-cell !important;
}

.capturing-el .loan-detail-table tr.row-promo {
    border-left: 0 !important;
}

.capturing-el .loan-detail-table tr.row-promo td:first-child {
    border-left: 3px solid var(--accent) !important;
    box-shadow: none !important;
}

/* Mobile · tab Hợp đồng: ô ngắn xếp 2 cột, nút hành động dính đáy */
@media (max-width: 760px) {
    #tab-contract .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 14px 10px;
    }

    #tab-contract .grid-2 > * {
        grid-column: 1 / -1;
    }

    #tab-contract .grid-2 > .form-field:has(#c-so-hd),
    #tab-contract .grid-2 > .form-field:has(#c-xung-ho),
    #tab-contract .grid-2 > .form-field:has(#c-nam-sinh),
    #tab-contract .grid-2 > .form-field:has(#c-ngay-cap),
    #tab-contract .grid-2 > .form-field:has(#c-ten-xe),
    #tab-contract .grid-2 > .form-field:has(#c-phien-ban),
    #tab-contract .grid-2 > .form-field:has(#c-mau-xe),
    #tab-contract .grid-2 > .form-field:has(#c-so-khung),
    #tab-contract .grid-2 > .form-field:has(#c-don-gia),
    #tab-contract .grid-2 > .form-field:has(#c-coc-dot-1) {
        grid-column: auto;
    }

    #tab-contract .form-actions {
        position: sticky;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: var(--z-sticky);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
        background: var(--surface);
        border-top: 1px solid var(--line);
    }

    #tab-contract .form-actions .btn-primary,
    #tab-contract .form-actions .btn-success {
        flex: 1 1 0;
    }
}

@media (max-width: 760px) {
    /* Khối thu gọn ở tab Cài đặt */
    .m-fold {
        border-top: 1px solid var(--line);
    }

    .m-fold-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--touch);
        margin: 0;
        cursor: pointer;
        list-style: none;
    }

    .m-fold-title::-webkit-details-marker {
        display: none;
    }

    .m-fold-title::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--ink-3);
        border-bottom: 2px solid var(--ink-3);
        transform: rotate(45deg);
        transition: transform 0.18s var(--ease);
    }

    .m-fold[open] > .m-fold-title::after {
        transform: rotate(-135deg);
    }

    /* Hàng chip màu bảng: một dòng, vuốt ngang */
    .theme-picker {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .theme-picker::-webkit-scrollbar {
        display: none;
    }

    .theme-chip {
        flex: none;
        white-space: nowrap;
    }
}


/* ---------- Tab Cài đặt gọn: bảng phí 3x2, nhãn nâng cao thu gọn ---------- */
.admin-rate-wrap {
    padding: 0 20px 16px;
}

.admin-rate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.admin-rate-table th {
    padding: 6px 6px;
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
}

.admin-rate-table thead th {
    text-align: right;
    font-size: 0.75rem;
}

.admin-rate-table td {
    padding: 4px 4px;
}

.admin-rate-table input {
    width: 100%;
    text-align: right;
}

.admin-rename .admin-grid-2 {
    padding-top: 6px;
}

.group-title--sub {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-top: 8px;
}

@media (max-width: 760px) {
    .admin-rate-wrap {
        padding: 0 14px 16px;
    }

    .admin-rate-table th[scope="row"] {
        width: 34%;
        font-size: 0.75rem;
        line-height: 1.25;
    }

    .admin-rate-table input {
        padding: 10px 8px;
        font-size: 15px;
    }

    #tab-admin .admin-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    #tab-admin .admin-grid-2 > .admin-field:has(#cfg-chips-list),
    #tab-admin .admin-grid-2 > .admin-field:has(#cfg-def-theme) {
        grid-column: 1 / -1;
    }

    .admin-rename .admin-grid-2 {
        grid-template-columns: 1fr;
    }

    #tab-admin .form-actions {
        position: sticky;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: var(--z-sticky);
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


/* Thêm dòng xe: nút luôn thấy được, dòng mới nổi bật */
.admin-car-new {
    animation: admin-car-flash 1.6s ease-out;
}

@keyframes admin-car-flash {
    0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 760px) {
    .admin-cars-actions {
        position: sticky;
        top: 56px;
        z-index: var(--z-sticky);
        padding: 8px 14px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .admin-cars-actions .btn {
        width: 100%;
    }
}