/* ==========================================================================
   van-ban.css — trình bày chung của trang văn bản, chính sách (includes/van-ban.php):
   quy chế, điều khoản, điều kiện giao dịch, chính sách giá, thanh toán, đổi trả, bảo mật, khiếu nại.
   Màu, font lấy biến --vl-* của assets/css/giao-dien.css (có giá trị dự phòng).
   Máy tính (≥ 1024px): mục lục bám bên trái, nội dung ~70 ký tự mỗi dòng. Điện thoại: mục lục gập ở đầu trang,
   bảng thành thẻ (assets/js/van-ban.js; không có JS thì bảng cuộn ngang trong khung).
   ========================================================================== */

.vb {
    --vb-top: calc(72px + env(safe-area-inset-top, 0px));
    --vb-ink: var(--vl-ink, #1a1c1e);
    --vb-text: #343a44;
    --vb-muted: var(--vl-muted, #6a6b6d);
    --vb-line: var(--vl-line, #e6e8ec);
    --vb-brand: var(--vl-brand, #1d61e7);
    --vb-brand-deep: var(--vl-brand-deep, #0d2c68);
    --vb-soft: var(--vl-brand-soft, rgba(29, 97, 231, .10));
    --vb-focus: var(--vl-focus, 0 0 0 3px rgba(29, 97, 231, .35));
    background: #fff;
}
.vb [hidden] { display: none !important; }
.vb svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vb-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* --- Đầu trang --- */
.vb-dau {
    padding: calc(var(--vb-top) + 36px) 0 34px;
    background: linear-gradient(180deg, #edf2fd 0%, #f7f9fe 100%);
    border-bottom: 1px solid #e2e8f5;
}
.vb-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 14px; font-size: 13px; line-height: 1.4; color: var(--vb-muted); }
.vb-crumb a { color: var(--vb-muted); text-decoration: none; }
.vb-crumb a:hover { color: var(--vb-brand); }
.vb-crumb [aria-current] { color: #3c4656; font-weight: 600; }
.vb-dau h1 { max-width: 860px; font-size: 36px; line-height: 1.22; font-weight: 800; letter-spacing: -.4px; color: var(--vb-brand-deep); margin: 0; }
.vb-tom { max-width: 760px; margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #4a5361; }
.vb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; }
.vb-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px;
    border: 1px solid #dbe3f2; border-radius: 999px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; color: #3c4656;
}
.vb-chip svg { color: var(--vb-brand); }
.vb-nut { cursor: pointer; transition: border-color .15s, color .15s; }
.vb-nut:hover { border-color: var(--vb-brand); color: var(--vb-brand); }
.vb-nut:focus-visible { outline: none; box-shadow: var(--vb-focus); }

/* --- Hai cột: mục lục | nội dung --- */
.vb-khung {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start;
    padding-top: 40px; padding-bottom: 80px;
}
.vb-chinh { min-width: 0; max-width: 720px; }
.vb-ben {
    position: sticky; top: calc(var(--vb-top) + 24px);
    max-height: calc(100vh - var(--vb-top) - 48px); overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 6px 2px 0; scrollbar-width: thin;
}

/* --- Mục lục --- */
.vb-ml > summary { display: none; }
.vb-ml-t { margin: 0 0 10px 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vb-muted); }
.vb-ml ol { list-style: none; margin: 0; padding: 0; }
.vb-ml a {
    display: flex; gap: 6px; padding: 7px 10px 7px 12px;
    border-left: 2px solid var(--vb-line); border-radius: 0 8px 8px 0;
    font-size: 13.5px; line-height: 1.45; color: #4a5361; text-decoration: none;
    transition: color .15s, background-color .15s, border-color .15s;
}
.vb-ml > nav > ol > li > a { font-weight: 600; color: #2f3640; }
.vb-ml ol ol a { padding-left: 24px; font-size: 13px; }
.vb-ml a:hover { color: var(--vb-brand); background: #f4f7fe; }
.vb-ml a:focus-visible { outline: none; box-shadow: var(--vb-focus); }
.vb-ml a.is-on { color: var(--vb-brand); border-left-color: var(--vb-brand); background: var(--vb-soft); font-weight: 700; }
.vb-ml .vb-so { flex: none; color: var(--vb-muted); font-variant-numeric: tabular-nums; }
.vb-ml a.is-on .vb-so { color: inherit; }
.vb-ml .vb-ten { min-width: 0; overflow-wrap: anywhere; }
/* Văn bản dài (JS thêm .vb-gon): chỉ mở các Điều của Chương đang đọc. */
.vb-ml.vb-gon ol ol { display: none; }
.vb-ml.vb-gon li.is-mo > ol { display: block; }
.vb-ben-cuoi { margin: 16px 0 0 14px; }
.vb-ben-cuoi a, .vb-len a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vb-brand); text-decoration: none; }

/* --- Nội dung văn bản --- */
.vb-bai { font-size: 16.5px; line-height: 1.75; color: var(--vb-text); overflow-wrap: break-word; }
.vb-bai > :first-child { margin-top: 0; }
.vb-bai p { margin: 0 0 16px; }
.vb-bai h2 {
    position: relative; margin: 48px 0 16px; padding-top: 28px; border-top: 1px solid var(--vb-line);
    font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -.2px; color: var(--vb-ink);
    scroll-margin-top: calc(var(--vb-top) + 20px);
}
.vb-bai > h2:first-child { padding-top: 0; border-top: 0; }
.vb-bai h3 {
    margin: 32px 0 10px; font-size: 18.5px; line-height: 1.4; font-weight: 700; color: var(--vb-ink);
    scroll-margin-top: calc(var(--vb-top) + 20px);
}
.vb-bai h2 + h3 { margin-top: 20px; }
.vb-bai .vb-so { color: var(--vb-brand); }
.vb-bai .vb-so-chuong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vb-neo {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px;
    border-radius: 8px; vertical-align: -4px; color: var(--vb-muted); opacity: 0; text-decoration: none;
    transition: opacity .15s, color .15s, background-color .15s;
}
.vb-bai .vb-neo { text-decoration: none; }
.vb-neo svg { width: 15px; height: 15px; }
.vb-bai h2:hover .vb-neo, .vb-bai h3:hover .vb-neo, .vb-neo:focus-visible { opacity: 1; }
.vb-neo:hover { color: var(--vb-brand); background: var(--vb-soft); }
.vb-neo:focus-visible { outline: none; box-shadow: var(--vb-focus); }
@media (hover: none) { .vb-neo { opacity: .45; } }
.vb-bai ul, .vb-bai ol { margin: 0 0 18px; padding-left: 1.5em; }
.vb-bai li { margin: 0 0 8px; padding-left: 4px; }
.vb-bai li > ul, .vb-bai li > ol { margin: 8px 0 4px; }
.vb-bai li > p { margin: 8px 0 0; }
.vb-bai li::marker { color: #7b8698; }
.vb-bai ol > li::marker { font-weight: 600; color: #4f5a6b; }
.vb-bai strong { font-weight: 700; color: var(--vb-ink); }
.vb-bai a:not(.vb-neo) { color: var(--vb-brand); text-decoration: underline; text-decoration-color: rgba(29, 97, 231, .35); text-underline-offset: 3px; }
.vb-bai a:not(.vb-neo):hover { text-decoration-color: currentColor; }
/* Ghi chú phiên bản ở đầu văn bản (một đoạn chữ nghiêng): khung nền nhạt, chữ đứng cho dễ đọc. */
.vb-bai .vb-ghi-chu {
    margin-bottom: 28px; padding: 16px 18px; border: 1px solid #e3e9f5; border-left: 3px solid var(--vb-brand);
    border-radius: 0 12px 12px 0; background: #f6f8fd; font-size: 14.5px; line-height: 1.7; color: #3f4855;
}
.vb-bai .vb-ghi-chu em { font-style: normal; }
.vb-bai .contact-box { margin: 8px 0 20px; padding: 18px 20px; border: 1px solid var(--vb-line); border-radius: 14px; background: #f8fafc; }
.vb-bai .contact-box p { margin: 0 0 6px; }
.vb-bai .contact-box p:last-child { margin-bottom: 0; }
.vb-bai .contact-box i { width: 20px; color: var(--vb-brand); }
.vb-bai .policy-version, .vb-bai > p:last-child > em:only-child { color: var(--vb-muted); }
.vb-bai .policy-version { margin-top: 28px; font-size: 14.5px; font-style: italic; }

/* --- Bảng --- */
.vb-bai .policy-table { position: relative; margin: 8px 0 22px; overflow-x: auto; border: 1px solid var(--vb-line); border-radius: 14px; background: #fff; }
.vb-bai .policy-table table { width: 100%; border-collapse: collapse; }
.vb-bai .policy-table th, .vb-bai .policy-table td {
    padding: 12px 14px; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: top;
    font-size: 14.5px; line-height: 1.6;
}
.vb-bai .policy-table th { background: #f5f7fb; font-size: 13.5px; font-weight: 700; color: var(--vb-ink); }
.vb-bai .policy-table td { color: var(--vb-text); }
.vb-bai .policy-table tbody tr:last-child td { border-bottom: 0; }
.vb-bai .policy-table td ul, .vb-bai .policy-table td ol { margin: 0; padding-left: 18px; }
.vb-bai .policy-table td li { margin-bottom: 4px; }
.vb-bai .policy-table td li:last-child { margin-bottom: 0; }
/* Máy tính: bảng vừa cột nội dung, chữ xuống dòng trong ô (style.css đặt bề rộng tối thiểu 560, 760px cho màn hình hẹp). */
@media (min-width: 1024px) { .vb-bai .policy-table table { min-width: 0; } }
/* Bảng rộng hơn khung (máy tính bảng, bảng không thành thẻ): dòng nhắc kéo ngang do JS hiện. */
.vb-bai .vb-cuon-nhac { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--vb-muted); }

/* --- Cần hỗ trợ, văn bản khác --- */
.vb-ho-tro {
    display: grid; gap: 16px; margin-top: 56px; padding: 26px 28px; border-radius: 20px;
    background: linear-gradient(120deg, var(--vb-brand-deep) 0%, var(--vl-brand-strong, #1952c4) 70%, var(--vb-brand) 100%); color: #fff;
}
.vb-ho-tro h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 800; color: #fff; }
.vb-ho-tro p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.vb-lh { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0; padding: 0; }
.vb-lh li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.vb-lh svg { width: 20px; height: 20px; margin-top: 2px; color: #ffd2bf; }
.vb-lh-t { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.vb-lh a { color: #fff; font-weight: 700; text-decoration: none; }
.vb-lh a:hover { text-decoration: underline; }
.vb-ho-tro-nut { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0 !important; }
.vb-khac { margin-top: 40px; }
.vb-khac h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--vb-ink); }
.vb-khac ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.vb-khac li > a {
    display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px 14px;
    border: 1px solid var(--vb-line); border-radius: 12px; background: #fff;
    font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--vb-ink); text-decoration: none;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.vb-khac li > a svg { width: 20px; height: 20px; color: var(--vb-brand); }
.vb-khac li > a:hover { border-color: #c9d6f3; color: var(--vb-brand); box-shadow: 0 8px 22px rgba(17, 55, 132, .08); }
.vb-khac li > a:focus-visible, .vb-ben-cuoi a:focus-visible, .vb-len a:focus-visible { outline: none; box-shadow: var(--vb-focus); border-radius: 8px; }
.vb-len { margin: 22px 0 0; }

/* Thông báo ngắn "Đã chép liên kết" */
.vb-bao {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1600;
    padding: 10px 16px; border-radius: 999px; background: #1f2937; color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .25); opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.vb-bao.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Nút nổi "Mục lục" (điện thoại, sau khi cuộn qua mục lục) */
.vb-noi { display: none; }

/* --- Màn hình vừa, điện thoại: một cột, mục lục gập ở đầu --- */
@media (max-width: 1023px) {
    .vb-khung { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
    .vb-chinh { max-width: 720px; }
    .vb-ben { position: static; max-height: none; overflow: visible; max-width: 720px; margin-bottom: 28px; padding: 0; }
    .vb-ben-cuoi, .vb-ml-t { display: none; }
    .vb-ml { border: 1px solid var(--vb-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); scroll-margin-top: calc(var(--vb-top) + 12px); }
    .vb-ml > summary {
        display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px;
        list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--vb-ink);
    }
    .vb-ml > summary::-webkit-details-marker { display: none; }
    .vb-ml > summary > span { flex: 1; }
    .vb-ml > summary small { font-size: 13px; font-weight: 600; color: var(--vb-muted); }
    .vb-ml > summary svg { width: 18px; height: 18px; color: var(--vb-brand); }
    .vb-ml > summary svg:last-child { color: var(--vb-muted); transition: transform .2s; }
    .vb-ml[open] > summary svg:last-child { transform: rotate(180deg); }
    .vb-ml > summary:focus-visible { outline: none; box-shadow: var(--vb-focus); border-radius: 14px; }
    .vb-ml > nav { max-height: 62vh; overflow-y: auto; padding: 0 8px 12px; border-top: 1px solid #f0f2f5; }
    .vb-ml > nav > ol { padding-top: 8px; }
    .vb-ml a { padding-top: 9px; padding-bottom: 9px; }
    .vb-ml.vb-gon ol ol { display: block; }
    .vb-noi {
        position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900;
        display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
        border-radius: 999px; background: var(--vb-brand-deep); color: #fff; box-shadow: 0 10px 26px rgba(13, 44, 104, .3);
        font-size: 14px; font-weight: 700; text-decoration: none;
    }
    .vb-noi:hover { color: #fff; background: var(--vb-brand); }
    .vb-noi:focus-visible { outline: none; box-shadow: var(--vb-focus), 0 10px 26px rgba(13, 44, 104, .3); }
    .vb-noi svg { width: 18px; height: 18px; }
    body.has-app-bar .vb-noi { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
    .vb-wrap { padding: 0 16px; }
    .vb-dau { padding: calc(var(--vb-top) + 22px) 0 24px; }
    .vb-crumb { margin-bottom: 10px; }
    .vb-dau h1 { font-size: 26px; letter-spacing: -.2px; }
    .vb-tom { font-size: 15.5px; }
    .vb-meta { gap: 8px; margin-top: 16px; }
    .vb-chip { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
    .vb-khung { padding-top: 20px; padding-bottom: 56px; }
    .vb-bai { font-size: 16px; line-height: 1.72; }
    .vb-bai h2 { margin-top: 36px; padding-top: 22px; font-size: 21px; }
    .vb-bai h3 { margin-top: 28px; font-size: 17.5px; }
    .vb-bai ul, .vb-bai ol { padding-left: 1.3em; }
    .vb-bai li > ul, .vb-bai li > ol { padding-left: 1.1em; }
    .vb-bai .vb-ghi-chu { padding: 14px; font-size: 14px; }
    .vb-ho-tro { margin-top: 44px; padding: 22px 18px; border-radius: 18px; }
    .vb-ho-tro .pill { flex: 1 1 auto; }
    .vb-khac ul { grid-template-columns: minmax(0, 1fr); }

    /* Bảng thành thẻ: mỗi dòng một thẻ, tên cột ở trên từng ô (JS thêm .vb-the và data-label). */
    .vb-bai .policy-table:has(> table.vb-the) { overflow: visible; border: 0; border-radius: 0; background: none; }
    .vb-bai table.vb-the { min-width: 0 !important; }
    .vb-bai table.vb-the thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .vb-bai table.vb-the, .vb-bai table.vb-the tbody, .vb-bai table.vb-the tr, .vb-bai table.vb-the td { display: block; width: auto !important; }
    .vb-bai table.vb-the tr { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--vb-line); border-radius: 14px; background: #fff; }
    .vb-bai table.vb-the tbody tr:last-child { margin-bottom: 0; }
    .vb-bai .policy-table table.vb-the td { padding: 6px 0; border: 0; font-size: 14.5px; }
    .vb-bai .policy-table table.vb-the td + td { border-top: 1px dashed #e6e9ef; }
    .vb-bai table.vb-the td:first-child { padding-top: 0; font-weight: 700; color: var(--vb-ink); }
    .vb-bai table.vb-the td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vb-muted);
    }
    .vb-bai table.vb-the td:first-child::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vb-ml a, .vb-neo, .vb-khac li > a, .vb-ml > summary svg, .vb-bao { transition: none; }
}

/* --- In: chỉ văn bản --- */
@media print {
    .site-hd, .site-ft, .app-bar, .cookie-banner, .skip-link, .vb-ben, .vb-ho-tro, .vb-khac, .vb-noi, .vb-neo, .vb-nut { display: none !important; }
    .vb-dau { padding: 0 0 12px; background: none; border: 0; }
    .vb-crumb { display: none; }
    .vb-dau h1 { color: #000; font-size: 22pt; }
    .vb-wrap { max-width: none; padding: 0; }
    .vb-khung { display: block; padding: 0; }
    .vb-chinh { max-width: none; }
    .vb-chip { border: 0; padding: 0; }
    .vb-bai { font-size: 11pt; line-height: 1.5; color: #000; }
    .vb-bai h2 { break-after: avoid; border-top: 0; padding-top: 0; margin-top: 18pt; }
    .vb-bai h3 { break-after: avoid; }
    .vb-bai a:not(.vb-neo) { color: #000; text-decoration: none; }
    .vb-bai .policy-table { overflow: visible; }
    .vb-bai tr { break-inside: avoid; }
}