/*
Template Css: Vibe Code Hosting
 */

/* Landing Vibe Code Hosting. Port từ mockup Tailwind
   (template_assets/html/bkns_vibe_code_hosting.html) sang CSS viết tay, cùng nếp landing Microsoft 365.
   Hai phần:
     1. .bk-vh…  — element có dữ liệu ([bk_vh_bang_gia], [bk_vh_du_toan], [bk_vh_form], hộp thoại).
     2. .vh-…    — trang dựng bằng element gốc Flatsome (section > row > col > chữ gõ thẳng),
                   bố cục mẫu: template_assets/html/vibe-hosting-ux-builder.txt.
   Flatsome tô sẵn button/input/select/label/h1-h6 (width:100%) -> reset lại trong scope .bk-vh.
   Bảng so sánh là <table> gõ tay nên rule đi đủ class + !important để thắng `.page-template table …`
   (!important, 0,2,4) của assets/css/main.css.
   Nhận diện: xanh công nghệ sky-600, nền lưới 32px, chữ số / mã coupon dùng font mono. */

@font-face {
    src: url("../fonts/Inter/Inter-Regular.ttf");
    font-family: "InterBK";
    font-weight: 400;
    font-display: swap;
}

@font-face {
    src: url("../fonts/Inter/Inter-SemiBold.ttf");
    font-family: "InterBK";
    font-weight: 600;
    font-display: swap;
}

@font-face {
    src: url("../fonts/Inter/Inter-Bold.ttf");
    font-family: "InterBK";
    font-weight: 700 900;
    font-display: swap;
}

:root {
    --vh-xanh: #1b5fd9;
    --vh-xanh-dam: #1447b0;
    --vh-xanh-sau: #103a8f;
    --vh-xanh-nhat: #eef3fd;
    --vh-xanh-vien: #d6e2fa;
    --vh-navy: #0f1a2b;
    --vh-cyan: #5b8def;
    --vh-cyan-sang: #9dbcf5;
    --vh-do: #e5484d;
    --vh-do-chu: #d93036;
    --vh-do-nhat: #fdecec;
    --vh-vang: #f5b73b;
    --vh-vang-dam: #f0a41a;
    --vh-xanhla: #12805c;
    --vh-xanhla-sang: #4cc79a;
    --vh-chu: #1f2a3a;
    --vh-chu-dam: #0f1a2b;
    --vh-chu-vua: #475467;
    --vh-chu-mo: #667085;
    --vh-chu-nhat: #98a2b3;
    --vh-vien: #e4e9f0;
    --vh-vien-nhat: #eff2f6;
    --vh-nen: #f6f8fb;
    --vh-toi: #0f1a2b;
    --vh-den: #0b1320;

    --vh-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --vh-r-lon: 20px;
    --vh-r-vua: 14px;
    --vh-r-nho: 10px;
    --vh-bong-1: 0 1px 2px rgba(16, 24, 40, .04);
    --vh-bong-2: 0 2px 6px -2px rgba(16, 24, 40, .08);
    --vh-bong-3: 0 18px 36px -20px rgba(16, 24, 40, .22);
    --vh-bong-xanh: 0 18px 40px -24px rgba(27, 95, 217, .45);
    --vh-luoi: none, none;
    --vh-ease: cubic-bezier(.2, .7, .2, 1);

    /* Icon vẽ bằng mask (màu theo currentColor), khỏi phụ thuộc font icon của theme. */
    --vh-i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E");
    --vh-i-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E");
    --vh-i-khien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m5.6-4A12 12 0 0112 2.9 12 12 0 013.4 6a12 12 0 00-.4 3c0 5.6 3.8 10.3 9 11.6 5.2-1.3 9-6 9-11.6 0-1-.1-2-.4-3z'/%3E%3C/svg%3E");
    --vh-i-khoi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4'/%3E%3C/svg%3E");
    --vh-i-mang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01'/%3E%3C/svg%3E");
    --vh-i-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z'/%3E%3C/svg%3E");
    --vh-i-tick-tron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
    --vh-i-dien-thoai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 012-2h3.28a1 1 0 01.95.68l1.5 4.5a1 1 0 01-.5 1.21l-2.26 1.13a11 11 0 005.52 5.52l1.13-2.26a1 1 0 011.21-.5l4.5 1.5a1 1 0 01.68.95V19a2 2 0 01-2 2h-1C9.72 21 3 14.28 3 6V5z'/%3E%3C/svg%3E");
    --vh-i-thu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l7.9 5.3a2 2 0 002.2 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
    --vh-i-dinh-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.7 16.7L13.4 21a2 2 0 01-2.8 0l-4.3-4.3a8 8 0 1111.4 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
    --vh-i-xuong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    --vh-i-phai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7l5 5m0 0l-5 5m5-5H6'/%3E%3C/svg%3E");
    --vh-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    --vh-i-commit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h6m8 0h6M12 8a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E");
    --vh-i-ten-lua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.6 3.1c2.5-.9 4.9-1.1 6.2-1.1.1 1.3-.2 3.7-1.1 6.2-.9 2.5-2.6 5-5.3 7.1l.4 3.2c0 .3-.1.6-.3.8l-2.6 2.4c-.4.4-1.1.2-1.2-.4l-.6-3.2-3.8-3.8-3.2-.6c-.6-.1-.8-.8-.4-1.2L5 10.1c.2-.2.5-.3.8-.3l3.2.4c2.1-2.7 4.6-4.4 7.1-5.3zM16 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM4.5 16.3c.9-.9 2.3-.9 3.2 0s.9 2.3 0 3.2C6.6 20.6 3 21 3 21s.4-3.6 1.5-4.7z'/%3E%3C/svg%3E");
    --vh-i-terminal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6-6-6M12 19h8'/%3E%3C/svg%3E");
    --vh-i-may-tinh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10a2 2 0 012 2v14a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2zM8 7h8v3H8zM8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01M16 17h.01'/%3E%3C/svg%3E");
    --vh-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}

/* Neo "#bang-gia", "#du-toan"… cuộn êm (file chỉ nạp ở trang này) */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* =====================================================================
   1. ELEMENT CÓ DỮ LIỆU (.bk-vh)
   ===================================================================== */

.bk-vh {
    font-family: "InterBK", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--vh-chu);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.bk-vh *,
.bk-vh *::before,
.bk-vh *::after {
    box-sizing: border-box;
}

.bk-vh h1,
.bk-vh h2,
.bk-vh h3,
.bk-vh h4 {
    font-family: inherit;
    color: var(--vh-chu-dam);
    width: auto;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-transform: none;
    text-wrap: balance;
}

.bk-vh p {
    margin: 0;
}

.bk-vh ul,
.bk-vh ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bk-vh li {
    margin: 0;
}

.bk-vh a {
    text-decoration: none;
}

/* Flatsome tô sẵn button (nền, viền, uppercase, margin-right) -> trả về trung tính */
.bk-vh button {
    font-family: inherit;
    border: 0;
    background: none;
    color: inherit;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.bk-vh a:focus-visible,
.bk-vh button:focus-visible,
.bk-vh input:focus-visible,
.bk-vh select:focus-visible,
.bk-vh [tabindex]:focus-visible {
    outline: 3px solid rgba(27, 95, 217, .5);
    outline-offset: 2px;
}

.bk-vh__icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -.2em;
}

.bk-vh__an {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bk-vh__khoi {
    padding: 80px 16px;
}

.bk-vh__trong {
    max-width: 1230px;
    margin: 0 auto;
}

/* ---------- Đầu element: nhãn viên thuốc + h2 + mô tả ---------- */

.bk-vh__dau {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.bk-vh__nhan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 12px;
    border: 1px solid #bfdcf7;
    border-radius: 999px;
    background: rgba(240, 248, 255, .9);
    box-shadow: var(--vh-bong-1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: #0b6fb8;
}

.bk-vh .bk-vh__dau h2 {
    margin-top: 8px;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
}

.bk-vh .bk-vh__dau p {
    margin-top: 10px;
    font-size: 15px;
    color: var(--vh-chu-vua);
    text-wrap: pretty;
}

/* ---------- Nút ---------- */

.bk-vh .bk-vh__nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--vh-r-nho);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: background-color .25s var(--vh-ease), box-shadow .25s var(--vh-ease), transform .15s var(--vh-ease);
}

.bk-vh .bk-vh__nut:active {
    transform: scale(.98);
}

.bk-vh .bk-vh__nut--rong {
    width: 100%;
}

.bk-vh .bk-vh__nut--to {
    padding: 15px 20px;
    font-size: 15px;
}

.bk-vh .bk-vh__nut--xanh {
    background: var(--vh-xanh);
    color: #fff;
}

.bk-vh .bk-vh__nut--xanh:hover {
    background: var(--vh-xanh-dam);
    color: #fff;
}

.bk-vh .bk-vh__nut--vang {
    background: linear-gradient(90deg, var(--vh-vang-dam), #f59e0b);
    color: var(--vh-den);
    font-weight: 800;
    box-shadow: 0 10px 24px -10px rgba(251, 191, 36, .7);
}

.bk-vh .bk-vh__nut--vang:hover {
    background: linear-gradient(90deg, var(--vh-vang), var(--vh-vang-dam));
    color: var(--vh-den);
}

/* ---------- Bảng giá: nút chu kỳ (viên thuốc) ---------- */

.bk-vh__chu-ky {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 44px;
    padding: 4px;
    border: 1px solid var(--vh-vien);
    border-radius: 999px;
    background: #fff;
}

.bk-vh .bk-vh__chu-ky button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-chu-vua);
    transition: background-color .3s var(--vh-ease), color .3s var(--vh-ease);
}

.bk-vh .bk-vh__chu-ky button:hover {
    color: var(--vh-chu-dam);
}

.bk-vh .bk-vh__giam {
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-xanhla);
}

.bk-vh .bk-vh__chu-ky button[aria-pressed="true"] {
    background: var(--vh-chu-dam);
    color: #fff;
}

.bk-vh .bk-vh__chu-ky button[aria-pressed="true"] .bk-vh__giam {
    color: var(--vh-xanhla-sang);
}

/* ---------- Bảng giá: thẻ gói ---------- */

.bk-vh__luoi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.bk-vh__goi {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-lon);
    background: #fff;
    transition: box-shadow .35s var(--vh-ease), transform .35s var(--vh-ease), border-color .35s var(--vh-ease);
}

.bk-vh__goi:hover {
    border-color: #d0d7e2;
    box-shadow: var(--vh-bong-3);
    transform: translateY(-3px);
}

.bk-vh__goi--noi-bat,
.bk-vh__goi--noi-bat:hover {
    border-color: var(--vh-xanh);
    box-shadow: 0 0 0 1px var(--vh-xanh), var(--vh-bong-xanh);
}

@media (min-width: 1024px) {
    .bk-vh__goi--noi-bat {
        transform: translateY(-8px);
    }

    .bk-vh__goi--noi-bat:hover {
        transform: translateY(-11px);
    }
}

.bk-vh .bk-vh__goi-dai {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--vh-xanh);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
}

.bk-vh__goi-than {
    flex: 1 1 auto;
}

.bk-vh .bk-vh__goi h3 {
    /*font-family: var(--vh-mono);*/
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

.bk-vh .bk-vh__goi-gia {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 12px;
}

.bk-vh .bk-vh__goi-gia s {
    font-size: 14px;
    color: var(--vh-chu-nhat);
}

.bk-vh .bk-vh__goi-gia strong {
    font-size: clamp(26px, 2.3vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--vh-chu-dam);
    font-variant-numeric: tabular-nums;
}

.bk-vh .bk-vh__goi-dv {
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-chu-vua);
}

.bk-vh .bk-vh__goi-ky {
    margin-top: 4px;
    font-size: 12px;
    color: var(--vh-chu-mo);
    font-variant-numeric: tabular-nums;
}

/* Dải coupon đỏ cam: bấm icon = chép mã (JS báo "Đã chép" ngay trên nút) */
/* Mã giảm giá dạng "vé": nền hồng nhạt, viền đứt, mã mono đỏ — điểm nhấn khuyến mãi duy nhất của thẻ */
.bk-vh__coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding: 7px 6px 7px 12px;
    border: 1px dashed #f1a9ab;
    border-radius: var(--vh-r-nho);
    background: #fff6f6;
    font-size: 12px;
    font-weight: 500;
    color: #9f2a2d;
}

.bk-vh__coupon strong {
    white-space: nowrap;
    font-family: var(--vh-mono);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--vh-do-chu);
}

.bk-vh .bk-vh__coupon button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--vh-do-chu);
    transition: background-color .2s var(--vh-ease);
}

.bk-vh .bk-vh__coupon button:hover {
    background: rgba(229, 72, 77, .1);
}

.bk-vh__chep-ok:empty {
    display: none;
}

.bk-vh__chep-ok {
    font-size: 11px;
    font-weight: 700;
}

.bk-vh .bk-vh__goi-ts {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 20px 0 26px;
}

.bk-vh__goi-ts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #344054;
}

.bk-vh__goi-ts .bk-vh__icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--vh-xanh);
}

.bk-vh__goi-ts li.la-tick .bk-vh__icon {
    color: var(--vh-chu-nhat);
}

.bk-vh__goi-ts li.la-nhan {
    color: var(--vh-xanh);
}

.bk-vh__goi-ts strong {
    color: var(--vh-chu-dam);
}

.bk-vh__goi-ts li.la-nhan strong {
    color: inherit;
}

.bk-vh .bk-vh__ghi-chu {
    margin-top: 28px;
    text-align: center;
    font-size: 13px;
    color: var(--vh-chu-mo);
}

/* ---------- Dự toán chi phí ---------- */

.bk-vh__dt {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid var(--vh-vien);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .08);
}

.bk-vh__dt-chon {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bk-vh .bk-vh__dt-nhom {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.bk-vh .bk-vh__dt-nhom legend {
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #344054;
}

.bk-vh__dt-goi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.bk-vh__dt-ky {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.bk-vh .bk-vh__dt-goi button,
.bk-vh .bk-vh__dt-ky button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 2px solid var(--vh-vien);
    border-radius: 12px;
    text-align: center;
    color: #344054;
    transition: border-color .25s var(--vh-ease), background-color .25s var(--vh-ease), color .25s var(--vh-ease), box-shadow .25s var(--vh-ease);
}

.bk-vh .bk-vh__dt-goi button:hover,
.bk-vh .bk-vh__dt-ky button:hover {
    border-color: #d0d7e2;
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"],
.bk-vh .bk-vh__dt-ky button[aria-pressed="true"] {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0369a1;
}

.bk-vh .bk-vh__dt-goi strong {
    font-size: 13px;
    font-weight: 800;
}

.bk-vh .bk-vh__dt-goi span {
    font-size: 11px;
    font-weight: 600;
    color: var(--vh-chu-mo);
}

.bk-vh .bk-vh__dt-goi small {
    font-size: 10px;
    color: var(--vh-chu-nhat);
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] span,
.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] small {
    color: #0369a1;
}

.bk-vh .bk-vh__dt-ky strong {
    font-size: 13px;
    font-weight: 700;
}

.bk-vh .bk-vh__dt-ky span {
    font-size: 11px;
    font-weight: 800;
    color: #ef4444;
}

/* Ô ưu đãi (theo mockup): nền xám nhạt, viền mảnh */
.bk-vh__dt-ghi {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    font-size: 13px;
    color: #475569;
}

.bk-vh .bk-vh__dt-ghi-dau {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 700;
    color: #0f172a;
}

.bk-vh__dt-ghi-dau .bk-vh__icon {
    color: #0284c7;
}

.bk-vh__dt-ghi li {
    position: relative;
    padding-left: 14px;
}

.bk-vh__dt-ghi li + li {
    margin-top: 4px;
}

.bk-vh__dt-ghi li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #475569;
}

.bk-vh__dt-ghi strong,
.bk-vh__dt-ghi code {
    font-family: var(--vh-mono);
    font-weight: 800;
    color: #d93036;
    background: none;
    padding: 0;
}

/* Thẻ kết quả tối: số tiền vàng là điểm nhấn duy nhất của khối */
/* Thẻ kết quả (theo mockup): navy gradient, tổng tiền vàng là điểm nhấn */
.bk-vh__dt-ket-qua {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f172a 0%, #0b204c 55%, #075985 100%);
    box-shadow: 0 25px 50px -12px rgba(11, 32, 76, .45);
    color: #fff;
}

.bk-vh .bk-vh__dt-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #67e8f9;
}

.bk-vh .bk-vh__dt-giam {
    padding: 2px 8px;
    border-radius: 6px;
    background: #fbbf24;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    color: #020617;
}

.bk-vh .bk-vh__dt-tong {
    margin-top: -8px;
}

.bk-vh .bk-vh__dt-tong strong {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
}

.bk-vh .bk-vh__dt-thang {
    margin-top: -14px;
    font-size: 13px;
    color: #d0d7e2;
}

.bk-vh .bk-vh__dt-bang {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
}

.bk-vh__dt-bang > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Theme Flatsome in hoa + giãn chữ dt -> trả về chữ thường */
.bk-vh .bk-vh__dt-bang dt,
.bk-vh .bk-vh__dt-bang dd {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none !important;
}

.bk-vh .bk-vh__dt-bang dt {
    font-weight: 400;
    color: #cbd5e1;
}

.bk-vh .bk-vh__dt-bang dd {
    font-weight: 700;
    text-align: right;
    color: #fff;
}

.bk-vh .bk-vh__dt-bang dd.la-cyan {
    color: #67e8f9;
}

.bk-vh .bk-vh__dt-bang .la-tk dt,
.bk-vh .bk-vh__dt-bang .la-tk dd {
    color: #7fd8b3;
}

.bk-vh__dt-ket-qua .bk-vh__nut {
    margin-top: auto;
}

/* Nút trong thẻ kết quả: vàng gradient như mockup */
.bk-vh .bk-vh__dt-ket-qua .bk-vh__nut--vang {
    padding: 15px 20px;
    border-radius: 16px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    box-shadow: 0 10px 24px -10px rgba(251, 191, 36, .7);
    font-size: 15px;
    font-weight: 800;
    color: #020617;
}

.bk-vh .bk-vh__dt-ket-qua .bk-vh__nut--vang:hover {
    background: linear-gradient(90deg, #fcd34d, #fbbf24);
    color: #020617;
}

/* ---------- Ô nhập liệu (form tư vấn + hộp thoại) ---------- */

.bk-vh__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-vh__hai-cot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bk-vh__truong {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bk-vh .bk-vh__truong label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.bk-vh__bat-buoc {
    color: var(--vh-do-chu);
}

.bk-vh .bk-vh__o-nhap {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #d0d7e2;
    border-radius: var(--vh-r-nho);
    background-color: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--vh-chu);
    transition: border-color .2s, box-shadow .2s;
}

.bk-vh select.bk-vh__o-nhap {
    padding-right: 36px;
}

.bk-vh .bk-vh__o-nhap:focus {
    border-color: var(--vh-xanh);
    box-shadow: 0 0 0 3px rgba(27, 95, 217, .2);
    outline: none;
}

.bk-vh__bay {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bk-vh .bk-vh__trang-thai {
    padding: 10px 14px;
    border-radius: var(--vh-r-nho);
    background: #fff1f2;
    font-size: 13px;
    color: #be123c;
}

.bk-vh .bk-vh__cam-ket {
    font-size: 12px;
    text-align: center;
    color: var(--vh-chu-mo);
}

/* ---------- Hộp thoại ---------- */

.bk-vh__hop-thoai {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--vh-r-lon);
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .45);
    color: var(--vh-chu);
    overflow: auto;
}

.bk-vh__hop-thoai::backdrop {
    background: rgba(2, 6, 23, .7);
    backdrop-filter: blur(3px);
}

.bk-vh__hop-thoai[open] {
    animation: vh-hien .2s ease-out;
}

@keyframes vh-hien {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.bk-vh__ht-dau {
    position: relative;
    padding: 26px 26px 0;
}

.bk-vh .bk-vh__ht-dau > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vh-xanh);
}

.bk-vh .bk-vh__ht-dau h2 {
    margin-top: 4px;
    padding-right: 32px;
    font-size: 22px;
    font-weight: 900;
}

.bk-vh .bk-vh__ht-dau h2 b {
    font-family: var(--vh-mono);
    color: var(--vh-xanh);
}

.bk-vh .bk-vh__ht-dau p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--vh-chu-mo);
}

.bk-vh .bk-vh__ht-dong {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--vh-chu-nhat);
    transition: background-color .2s, color .2s;
}

.bk-vh .bk-vh__ht-dong:hover {
    background: var(--vh-vien-nhat);
    color: var(--vh-chu);
}

.bk-vh__ht-form {
    padding: 20px 26px 26px;
}

.bk-vh__ok {
    padding: 32px 26px 26px;
    text-align: center;
}

.bk-vh__ok-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eaf6f0;
    color: var(--vh-xanhla);
    font-size: 28px;
}

.bk-vh .bk-vh__ok h2 {
    margin-top: 14px;
    font-size: 22px;
    font-weight: 900;
}

.bk-vh .bk-vh__ok p {
    margin: 8px 0 22px;
    font-size: 14px;
    color: var(--vh-chu-vua);
}

.bk-vh__cai-dat-uxb {
    padding: 12px 16px;
    border: 1px dashed var(--vh-xanh);
    border-radius: var(--vh-r-nho);
    background: var(--vh-xanh-nhat);
    font-size: 13px;
    color: var(--vh-xanh-dam);
}

/* ---------- Element: responsive ---------- */

@media (max-width: 1023px) {
    .bk-vh__dt {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .bk-vh__chu-ky {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        border-radius: 20px;
    }

    .bk-vh .bk-vh__chu-ky button {
        flex-direction: column;
        gap: 2px;
        padding: 8px 4px;
        border-radius: 14px;
        font-size: 13px;
    }

    .bk-vh__dt {
        padding: 16px;
        border-radius: 20px;
    }

    .bk-vh__dt-goi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bk-vh__dt-ky {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bk-vh__dt-ket-qua {
        padding: 22px;
    }

    .bk-vh__hai-cot {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-vh *,
    .bk-vh__hop-thoai[open] {
        animation: none !important;
        transition: none !important;
    }

    .bk-vh__goi--noi-bat {
        transform: none !important;
    }
}

/* =====================================================================
   2. TRANG DỰNG BẰNG ELEMENT GỐC FLATSOME: [section class="vh-…"] > [row] > [col] > chữ
   (bố cục mẫu: template_assets/html/vibe-hosting-ux-builder.txt). Chữ gõ thẳng trong text
   của UX Builder; CSS bám class của section/col + thẻ HTML (p, h1-h3, ul, table).
   ===================================================================== */

.vh-hero,
.vh-cong-cu,
.vh-khoi,
.vh-tu-van {
    font-family: "InterBK", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--vh-chu);
    -webkit-font-smoothing: antialiased;
}

/* Col Flatsome có padding-bottom 30px -> khoảng cách do padding của section lo. */
.vh-hero .col,
.vh-cong-cu .col,
.vh-khoi .col,
.vh-tu-van .col {
    padding-bottom: 0;
}

.vh-hero .col-inner > *,
.vh-cong-cu .col-inner > *,
.vh-khoi .col-inner > *,
.vh-tu-van .col-inner > * {
    margin-top: 0;
    margin-bottom: 0;
}

.vh-hero ul,
.vh-cong-cu ul,
.vh-khoi ul,
.vh-tu-van ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vh-hero ul li,
.vh-cong-cu ul li,
.vh-khoi ul li,
.vh-tu-van ul li {
    margin: 0;
}

.vh-hero h1, .vh-hero h2, .vh-hero h3,
.vh-khoi h2, .vh-khoi h3,
.vh-tu-van h2 {
    font-family: inherit;
    text-transform: none;
    text-wrap: balance;
}

/* Icon trong khối Flatsome: ::before + mask, màu theo color (dòng liên hệ khối Tư vấn).
   Hero + thẻ bento vẽ riêng: ::before = ô nền màu, ::after = hình icon. */
.vh-tv-chu ul li::before {
    content: "";
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--vh-i) center / contain no-repeat;
    mask: var(--vh-i) center / contain no-repeat;
}

/* ---------- Đầu khối: nhãn viên thuốc + h2 + mô tả (col class "vh-dau") ----------
   Flatsome ≥850px: `.col:first-child .col-inner {margin-right:0}` (0,3,0) -> căn giữa phải đi 4 class. */
.vh-khoi .col.vh-dau .col-inner {
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

.vh-khoi .vh-dau .col-inner > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 12px;
    border: 1px solid #bfdcf7;
    border-radius: 999px;
    background: rgba(240, 248, 255, .9);
    box-shadow: var(--vh-bong-1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: #0b6fb8;
}

.vh-khoi .vh-dau .col-inner > h2 {
    margin-top: 8px;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--vh-chu-dam);
}

.vh-khoi .vh-dau .col-inner > h2 + p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--vh-chu-vua);
    text-wrap: pretty;
}

/* Nhãn viên thuốc đầu khối (cùng nếp nhãn hero): chấm xanh nhấp nháy phía trước chữ */
.vh-khoi .vh-dau .col-inner > p:first-child::before,
.bk-vh__nhan::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0284c7;
}

@media (prefers-reduced-motion: no-preference) {
    .vh-khoi .vh-dau .col-inner > p:first-child::before,
    .bk-vh__nhan::before {
        animation: vh-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
    }
}

/* Row hẹp. assets/css/responsive.css ép `.row {max-width:1230px !important}` -> giới hạn bằng class + !important. */
.vh-khoi .row.vh-hep {
    max-width: 880px !important;
}

.vh-tu-van .row.vh-tv-the {
    max-width: 1040px !important;
}

/* ---------- 1. Hero (section "vh-hero": col "vh-hero-chu" chữ + col "vh-hero-anh" ảnh, hoặc [bk_vh_terminal] nếu muốn) ----------
   Theo mockup: nền quầng xanh từ đỉnh, nhãn viên thuốc có icon chip, tên sản phẩm chữ hoa đậm, dòng h1 thứ hai
   (thẻ <strong>) đổ gradient, 3 ô điểm nhấn mỗi ô một màu, 2 nút có icon (tên lửa / máy tính), dòng cam kết có dấu tích. */

.section.vh-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--vh-vien);
    background:
            radial-gradient(ellipse 70% 60% at 45% 0%, rgba(14, 165, 233, .16) 0%, rgba(27, 95, 217, .05) 55%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(to right, rgba(27, 95, 217, .035) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(27, 95, 217, .035) 1px, transparent 1px),
            #fff;
    background-size: auto, 32px 32px, 32px 32px, auto;
}

/* <p> 1 = nhãn viên thuốc (icon chip), <p> 2 = tên sản phẩm, h1 = câu chính */
.vh-hero-chu .col-inner > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 14px;
    border: 1px solid #bfdcf7;
    border-radius: 999px;
    background: rgba(240, 248, 255, .9);
    box-shadow: var(--vh-bong-1);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0b6fb8;
}

/* ::before = chấm "đang chạy" nhấp nháy (animate-ping của mockup), ::after = icon chip đứng sau chấm */
.vh-hero-chu .col-inner > p:first-child::before {
    content: "";
    order: -2;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0284c7;
    animation: vh-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

.vh-hero-chu .col-inner > p:first-child::after {
    content: "";
    order: -1;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--vh-i-chip) center / contain no-repeat;
    mask: var(--vh-i-chip) center / contain no-repeat;
}

@keyframes vh-ping {
    0% { box-shadow: 0 0 0 0 rgba(2, 132, 199, .55); }
    75%, 100% { box-shadow: 0 0 0 7px rgba(2, 132, 199, 0); }
}

.vh-hero-chu .col-inner > p:nth-child(2) {
    margin-top: 22px;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--vh-chu-dam);
}

.vh-hero .vh-hero-chu h1 {
    font-size: 35px !important;
    margin-top: 6px;
    /*font-size: clamp(34px, 5vw, 60px);*/
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--vh-chu-dam);
}

.vh-hero .vh-hero-chu h1 strong {
    display: inline-block;
    font-weight: inherit;
    color: #0b7fd4;
    background: linear-gradient(90deg, #0b7fd4 0%, #1b5fd9 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vh-hero .vh-hero-chu h2 {
    margin-top: 6px;
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--vh-chu-dam);
}

.vh-hero .vh-hero-chu h2 strong {
    display: inline-block;
    font-weight: inherit;
    color: #0b7fd4;
    background: linear-gradient(90deg, #0b7fd4 0%, #1b5fd9 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}




.vh-hero-chu .col-inner > h1 + p {
    max-width: 640px;
    margin-top: 20px;
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 500;
    line-height: 1.65;
    color: var(--vh-chu-vua);
}

/* 3 ô điểm nhấn: icon theo thứ tự (commit xanh / tia sét cyan / khiên xanh lá) */

.vh-hero-chu ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px !important;
}

.vh-hero-chu ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    position: relative;
    min-height: 66px;
    padding: 12px 12px 12px 64px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-vua);
    background: #fff;
    box-shadow: var(--vh-bong-1);
    font-size: 12px;
    line-height: 1.4;
    color: var(--vh-chu-mo);
    transition: border-color .3s var(--vh-ease), box-shadow .3s var(--vh-ease), transform .3s var(--vh-ease);
}

.vh-hero-chu ul li:hover {
    border-color: #d0d7e2;
    box-shadow: var(--vh-bong-2);
    transform: translateY(-2px);
}

.vh-hero-chu ul li strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--vh-chu-dam);
}

.vh-hero-chu ul li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 12px;
}

.vh-hero-chu ul li::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-color: currentColor;
    -webkit-mask: var(--vh-i) center / contain no-repeat;
    mask: var(--vh-i) center / contain no-repeat;
}

.vh-hero-chu ul li:nth-child(3n+1) { --vh-i: var(--vh-i-commit); }
.vh-hero-chu ul li:nth-child(3n+2) { --vh-i: var(--vh-i-set); }
.vh-hero-chu ul li:nth-child(3n) { --vh-i: var(--vh-i-khien); }

.vh-hero-chu ul li:nth-child(3n+1)::before { background: #eaf4fd; }
.vh-hero-chu ul li:nth-child(3n+2)::before { background: #e6f8fb; }
.vh-hero-chu ul li:nth-child(3n)::before { background: #e8f7ef; }
.vh-hero-chu ul li:nth-child(3n+1)::after { color: #0b7fd4; }
.vh-hero-chu ul li:nth-child(3n+2)::after { color: #0891b2; }
.vh-hero-chu ul li:nth-child(3n)::after { color: #059669; }

/* Hàng nút: <p> chứa 2 link — link 1 nền xanh (icon tên lửa), link 2 viền trắng (icon terminal) */
.vh-hero-chu .col-inner > ul + p {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.vh-hero-chu .col-inner > ul + p a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 26px;
    border: 1px solid #d0d7e2;
    border-radius: var(--vh-r-vua);
    background: #fff;
    box-shadow: var(--vh-bong-1);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #344054;
    transition: background-color .25s var(--vh-ease), box-shadow .25s var(--vh-ease), transform .25s var(--vh-ease);
}

.vh-hero-chu .col-inner > ul + p a::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: #0b7fd4;
    -webkit-mask: var(--vh-i-may-tinh) center / contain no-repeat;
    mask: var(--vh-i-may-tinh) center / contain no-repeat;
}

/* Link thứ 2 trỏ tới terminal (#mo-phong) thì dùng icon >_ như mockup */
.vh-hero-chu .col-inner > ul + p a[href$="#mo-phong"]::before {
    -webkit-mask-image: var(--vh-i-terminal);
    mask-image: var(--vh-i-terminal);
}

.vh-hero-chu .col-inner > ul + p a:hover {
    background: var(--vh-nen);
    color: var(--vh-chu-dam);
}

.vh-hero-chu .col-inner > ul + p a:first-child {
    border-color: #0b7fd4;
    background: #0b7fd4;
    box-shadow: 0 16px 30px -12px rgba(11, 127, 212, .55);
    color: #fff;
}

.vh-hero-chu .col-inner > ul + p a:first-child::before {
    background-color: #fff;
    -webkit-mask-image: var(--vh-i-ten-lua);
    mask-image: var(--vh-i-ten-lua);
}

.vh-hero-chu .col-inner > ul + p a:first-child:hover {
    background: #0969b3;
    transform: translateY(-2px);
    color: #fff;
}

/* Dòng cam kết: mỗi <span> một ý (JS camKetHero() tách dòng gõ tay "ý 1 · ý 2 · ý 3"), dấu tích xanh lá phía trước */
.vh-hero-chu .col-inner > ul + p + p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--vh-chu-mo);
}

.vh-hero-chu .col-inner > ul + p + p span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vh-hero-chu .col-inner > ul + p + p span::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #10b981;
    -webkit-mask: var(--vh-i-tick-tron) center / contain no-repeat;
    mask: var(--vh-i-tick-tron) center / contain no-repeat;
}

.vh-hero-anh .col-inner {
    position: relative;
}

.vh-hero-anh img {
    border-radius: var(--vh-r-lon);
}

/* ---------- Terminal chạy thử ([bk_vh_terminal], cột phải hero) ---------- */

.bk-vh-tm {
    padding: 22px;
    border: 1px solid #1e293b;
    border-radius: 24px;
    background: #020617;
    box-shadow: 0 24px 48px -20px rgba(11, 32, 76, .45);
    font-family: "InterBK", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #fff;
}

.bk-vh-tm__dau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1e293b;
    font-size: 12px;
}

.bk-vh-tm__cham {
    display: inline-flex;
    gap: 7px;
}

.bk-vh-tm__cham i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f43f5e;
}

.bk-vh-tm__cham i:nth-child(2) { background: #f59e0b; }
.bk-vh-tm__cham i:nth-child(3) { background: #10b981; }

.bk-vh-tm__ten {
    margin-left: 6px;
    font-family: var(--vh-mono);
    font-weight: 500;
    color: #94a3b8;
}

.bk-vh-tm__san {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid rgba(6, 95, 70, .8);
    border-radius: 4px;
    background: rgba(2, 44, 34, .8);
    font-family: var(--vh-mono);
    font-size: 10px;
    color: #34d399;
}

.bk-vh-tm .bk-vh-tm__hoi {
    margin: 16px 0 8px;
    font-family: var(--vh-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.bk-vh-tm__chon {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bk-vh-tm .bk-vh-tm__chon button {
    min-height: 0;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: #0f172a;
    box-shadow: none;
    font-family: var(--vh-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #94a3b8;
    cursor: pointer;
    transition: background-color .25s var(--vh-ease), border-color .25s var(--vh-ease), color .25s var(--vh-ease);
}

.bk-vh-tm .bk-vh-tm__chon button:hover {
    color: #e2e8f0;
}

.bk-vh-tm .bk-vh-tm__chon button[aria-pressed="true"] {
    border-color: #38bdf8;
    background: rgba(2, 132, 199, .3);
    color: #67e8f9;
}

.bk-vh-tm__man {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 212px;
    margin: 14px 0 16px;
    padding: 16px;
    border: 1px solid rgba(30, 41, 59, .8);
    border-radius: 16px;
    background: rgba(15, 23, 42, .9);
    font-family: var(--vh-mono);
    font-size: 12px;
    line-height: 1.55;
}

.bk-vh-tm__log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #cbd5e1;
}

.bk-vh-tm__dong--ghi-chu { color: #64748b; }
.bk-vh-tm__dong--lenh { color: #f1f5f9; }
.bk-vh-tm__nhac { color: #22d3ee; }
.bk-vh-tm__dong--b1 { color: #34d399; }
.bk-vh-tm__dong--b2 { color: #38bdf8; }
.bk-vh-tm__dong--b3 { color: #fcd34d; }
.bk-vh-tm__dong--xong { color: #34d399; font-weight: 700; }
.bk-vh-tm__dong--cho { color: #fbbf24; animation: vh-tm-nhip 1s ease-in-out infinite; }

/* Dòng log mới do JS gõ ra: hiện dần */
.bk-vh-tm__dong.moi {
    animation: vh-tm-hien .35s var(--vh-ease) both;
}

@keyframes vh-tm-hien {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes vh-tm-nhip {
    50% { opacity: .45; }
}

.bk-vh-tm__chan {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #1e293b;
    font-size: 11px;
    color: #94a3b8;
}

.bk-vh-tm__chan span:last-child {
    font-weight: 600;
    color: #22d3ee;
}

.bk-vh-tm__cuoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #94a3b8;
}

.bk-vh-tm .bk-vh-tm__chay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #10b981, #0d9488);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    cursor: pointer;
    transition: filter .25s var(--vh-ease);
}

.bk-vh-tm .bk-vh-tm__chay:hover {
    filter: brightness(1.08);
}

.bk-vh-tm__chay svg {
    width: 14px;
    height: 14px;
}

.bk-vh-tm__chay.dang-chay svg {
    animation: vh-tm-quay .7s linear infinite;
}

@keyframes vh-tm-quay {
    to { transform: rotate(360deg); }
}

.bk-vh-tm button:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .bk-vh-tm {
        padding: 16px;
        border-radius: 20px;
    }

    .bk-vh-tm .bk-vh-tm__chon button {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-vh-tm__dong.moi,
    .bk-vh-tm__dong--cho,
    .bk-vh-tm__chay.dang-chay svg {
        animation: none;
    }
}

/* ---------- 2. Dải công cụ AI (section "vh-cong-cu") ---------- */

.section.vh-cong-cu {
    border-bottom: 1px solid var(--vh-vien);
    background: var(--vh-nen);
}

.vh-cong-cu .col-inner > p:first-child {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--vh-chu-mo);
}

/* ---------- 2b. Dải công cụ chạy slide ([bk_vh_cong_cu], 30/09/2026) ----------
   Ô (ảnh/icon + tên) sửa ở ACF tab "Công cụ AI". Không JS: một hàng vuốt ngang được.
   Có JS: .dang-chay, các ô + bản sao nằm trong .bk-vh-cc__ray trượt liên tục, mép hai bên mờ dần.
   Bấm ô = .dang-to (phóng to), băng dừng (.co-to). */
.bk-vh-cc {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.bk-vh-cc.dang-chay {
    display: block;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.bk-vh-cc__ray {
    display: flex;
    width: max-content;
    animation: vh-cc-chay var(--vh-cc-tg, 25s) linear infinite;
}

.bk-vh-cc.dang-chay:hover .bk-vh-cc__ray,
.bk-vh-cc.dang-chay:focus-within .bk-vh-cc__ray,
.bk-vh-cc.co-to .bk-vh-cc__ray {
    animation-play-state: paused;
}

@keyframes vh-cc-chay {
    to { transform: translateX(-50%); }
}

/* Nút theme Flatsome có margin/min-height/uppercase riêng -> đặt lại hết */
.vh-cong-cu .bk-vh-cc__o {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-nho);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: #344054;
    cursor: pointer;
    scroll-snap-align: start;
    transform-origin: center;
    transition: transform .25s ease, border-color .2s, box-shadow .25s, color .2s;
}

/* Khoảng cách bằng margin từng ô (không dùng gap) để nửa dải = đúng 50% -> lặp không giật */
.vh-cong-cu .bk-vh-cc__ray > .bk-vh-cc__o {
    margin-right: 12px;
}

.vh-cong-cu .bk-vh-cc__o:hover,
.vh-cong-cu .bk-vh-cc__o:focus-visible {
    border-color: var(--vh-xanh);
    color: var(--vh-xanh-dam);
    outline: none;
}

.vh-cong-cu .bk-vh-cc__o.dang-to {
    position: relative;
    z-index: 2;
    transform: scale(1.22);
    border-color: var(--vh-xanh);
    box-shadow: var(--vh-bong-3);
    color: var(--vh-chu-dam);
}

.bk-vh-cc__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--vh-xanh);
}

.bk-vh-cc__icon svg,
.bk-vh-cc__icon img {
    display: block;
    width: 18px;
    height: 18px;
    max-width: none;
    margin: 0;
    object-fit: contain;
}

/* Màu icon theo mockup */
.bk-vh-cc__o--con-tro .bk-vh-cc__icon { color: #0284c7; }
.bk-vh-cc__o--gio .bk-vh-cc__icon { color: #1b5fd9; }
.bk-vh-cc__o--set .bk-vh-cc__icon { color: #f59e0b; }
.bk-vh-cc__o--lop .bk-vh-cc__icon { color: #0f172a; }
.bk-vh-cc__o--python .bk-vh-cc__icon { color: #1b5fd9; }
.bk-vh-cc__o--node .bk-vh-cc__icon { color: #059669; }
.bk-vh-cc__o--may-chu .bk-vh-cc__icon { color: #4f46e5; }

/* Shortcode gõ trong text nằm trong <p> -> bỏ lề của <p> */
.vh-cong-cu .col-inner > p:has(> .bk-vh-cc) {
    margin: 0;
}

@media (max-width: 640px) {
    .vh-cong-cu .bk-vh-cc__o {
        padding: 8px 12px;
        font-size: 13px;
    }

    .vh-cong-cu .bk-vh-cc__o.dang-to {
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-vh-cc__ray {
        animation: none;
    }

    .vh-cong-cu .bk-vh-cc__o {
        transition: none;
    }
}

.vh-cong-cu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin-top: 18px !important;
}

.vh-cong-cu ul li {
    padding: 8px 16px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-nho);
    background: #fff;
    box-shadow: var(--vh-bong-1);
    font-family: var(--vh-mono);
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    transition: border-color .2s, color .2s;
}

.vh-cong-cu ul li::before {
    content: "›";
    margin-right: 8px;
    font-weight: 800;
    color: var(--vh-xanh);
}

.vh-cong-cu ul li:hover {
    border-color: var(--vh-xanh);
    color: var(--vh-xanh-dam);
}

/* ---------- 3. Vì sao: lưới bento (row "vh-bento", col "vh-o") ----------
   <p> đứng trước h3 = nhãn nhỏ; h3; <p> ngay sau h3 = mô tả; <ul> = chân thẻ (dòng kẻ phía trên). */

.vh-khoi .row.vh-bento {
    row-gap: 24px;
}

.vh-o .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-lon);
    background: #fff;
    transition: box-shadow .35s var(--vh-ease), border-color .35s var(--vh-ease), transform .35s var(--vh-ease);
}

.vh-o .col-inner:hover {
    border-color: #d0d7e2;
    box-shadow: var(--vh-bong-3);
    transform: translateY(-3px);
}

/* Icon ô vuông 48px trên đầu thẻ */
.vh-o[class*="vh-i-"] .col-inner::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-bottom: 20px;
    padding: 11px;
    box-sizing: content-box;
    border-radius: var(--vh-r-vua);
}

.vh-o.vh-i-khoi { --vh-i: var(--vh-i-khoi); }
.vh-o.vh-i-mang { --vh-i: var(--vh-i-mang); }
.vh-o.vh-i-khien { --vh-i: var(--vh-i-khien); }
.vh-o.vh-i-set { --vh-i: var(--vh-i-set); }
.vh-o.vh-i-chip { --vh-i: var(--vh-i-chip); }
.vh-o.vh-i-code { --vh-i: var(--vh-i-code); }

/* ::before = ô nền, ::after = hình icon (mask) chồng lên đúng vị trí */
.vh-o[class*="vh-i-"] .col-inner {
    position: relative;
}

.vh-o[class*="vh-i-"] .col-inner::before {
    background: var(--vh-xanh-nhat);
}

.vh-o[class*="vh-i-"] .col-inner::after {
    content: "";
    position: absolute;
    top: 41px;
    left: 41px;
    width: 26px;
    height: 26px;
    background-color: var(--vh-xanh);
    -webkit-mask: var(--vh-i) center / contain no-repeat;
    mask: var(--vh-i) center / contain no-repeat;
}


.vh-o .col-inner > p:first-child {
    align-self: flex-start;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-xanh);
}

.vh-khoi .vh-o h3 {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--vh-chu-dam);
}

.vh-o .col-inner > h3 + p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--vh-chu-vua);
}

.vh-o .col-inner > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: auto !important;
    padding-top: 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-chu-mo);
}

/* Thẻ tối (ô rộng đầu + ô LiteSpeed) */
.vh-o.vh-o--toi .col-inner {
    border-color: var(--vh-toi);
    background: var(--vh-toi);
    color: #c3cbd8;
}

.vh-o.vh-o--toi .col-inner::after {
    background-color: var(--vh-cyan-sang);
}

.vh-o.vh-o--toi[class*="vh-i-"] .col-inner::before {
    background: rgba(255, 255, 255, .08);
}

.vh-khoi .vh-o.vh-o--toi h3 {
    color: #fff;
}

.vh-o.vh-o--toi .col-inner > h3 + p {
    color: #d0d7e2;
}

.vh-o.vh-o--toi .col-inner > p:first-child {
    color: var(--vh-cyan-sang);
}

.vh-o.vh-o--toi .col-inner > ul {
    margin-top: 28px !important;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #98a2b3;
    font-weight: 500;
}

.vh-o.vh-o--toi .col-inner > ul li:last-child:not(:first-child) {
    font-weight: 700;
    color: var(--vh-xanhla-sang);
}

.vh-o.vh-o--toi .col-inner:hover {
    box-shadow: var(--vh-bong-3);
}

/* Thẻ xanh nhạt: chân thẻ là các chip mono */
.vh-o.vh-o--xanh .col-inner {
    border-color: var(--vh-xanh-vien);
    background: #f5f8fe;
}

.vh-o.vh-o--xanh .col-inner:hover {
    border-color: var(--vh-xanh);
}

.vh-o.vh-o--xanh[class*="vh-i-"] .col-inner::before {
    background: var(--vh-xanh);
}

.vh-o.vh-o--xanh[class*="vh-i-"] .col-inner::after {
    background-color: #fff;
}

.vh-o.vh-o--xanh .col-inner > ul {
    justify-content: flex-start;
    color: var(--vh-chu);
}

.vh-o.vh-o--xanh .col-inner > ul li {
    padding: 4px 10px;
    border: 1px solid var(--vh-vien);
    border-radius: 8px;
    background: #fff;
    font-family: var(--vh-mono);
    font-size: 11px;
}

/* ---------- 4. Bảng giá (section "vh-bang-gia") ---------- */

.section.vh-bang-gia {
    border-top: 1px solid var(--vh-vien);
    border-bottom: 1px solid var(--vh-vien);
    background: var(--vh-nen);
}

/* ---------- 5. So sánh: bảng gõ tay (col "vh-bang") — trình bày theo bảng so sánh Cloud VM (.bk-sosanh) ----------
   JS dựng: .vh-bang-khoi (khung) > .vh-bang-dau (thanh tiêu đề xanh) + .vh-bang-cuon (cuộn ngang) > table.
   Ô tiêu đề cột: .vh-bang-goi (tên gói xanh chữ hoa) + <small> (giá đỏ) + .vh-bang-nut (nút "Đăng ký" viên thuốc).
   Cột nhãn nền xanh nhạt, dính trái khi cuộn; hàng sọc xanh nhạt / trắng; ô "Có"/"Không" (vh-co/vh-khong).
   main.css có `.page-template table thead tr:nth-child(1) th {background… !important}` (0,2,4) và
   `td {border… !important}` -> rule ở đây đi `.section.vh-khoi .vh-bang …` + !important ở nền/viền. */

.section.vh-so-sanh {
    background: #fff;
    --ss-xanh: #1877e6;
    --ss-xanh-dam: #0f5fc2;
    --ss-nhan: #e6eef8;
    --ss-soc: #f2f7fd;
    --ss-vien: #e0eaf6;
    --ss-vien-nhat: #eef4fb;
    --ss-do: #f5432c;
    --ss-muc: #1b2733;
}

.vh-bang .vh-bang-khoi {
    border: 1px solid var(--ss-vien);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 61, 122, .08);
    overflow: hidden;
}

.vh-bang .vh-bang-dau {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(90deg, var(--ss-xanh), var(--ss-xanh-dam));
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}

.vh-bang .vh-bang-dau svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.vh-bang .vh-bang-cuon {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* separate + viền từng ô: cột nhãn position:sticky mới giữ được viền khi cuộn ngang */
.section.vh-khoi .vh-bang table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.45;
}

.section.vh-khoi .vh-bang table th,
.section.vh-khoi .vh-bang table td {
    padding: 14px 12px;
    border: 0 !important;
    border-right: 1px solid var(--ss-vien-nhat) !important;
    border-bottom: 1px solid var(--ss-vien) !important;
    text-align: center;
    text-transform: none !important;
    letter-spacing: normal;
    vertical-align: middle;
    color: var(--ss-muc);
}

.section.vh-khoi .vh-bang table tr > *:last-child {
    border-right: 0 !important;
}

.section.vh-khoi .vh-bang table tbody tr:last-child > * {
    border-bottom: 0 !important;
}

/* Hàng đầu: nền trắng, tên gói + giá + nút */
.section.vh-khoi .vh-bang table thead tr th,
.section.vh-khoi .vh-bang table thead tr td {
    padding: 16px 12px !important;
    border-bottom: 2px solid var(--ss-vien) !important;
    background: #fff !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-muc) !important;
}

.section.vh-khoi .vh-bang table thead tr th:first-child {
    background: var(--ss-nhan) !important;
    font-size: 15px;
    text-align: left;
}

.vh-bang .vh-bang-goi {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ss-xanh);
}

.section.vh-khoi .vh-bang table thead th small {
    display: block;
    margin: 5px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ss-do);
}

.section.vh-khoi .vh-bang .vh-bang-nut {
    display: inline-block;
    min-height: 0;
    margin: 0;
    padding: 7px 18px;
    border: 1px solid var(--ss-xanh);
    border-radius: 999px;
    background: var(--ss-xanh);
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s var(--vh-ease), box-shadow .2s var(--vh-ease);
}

.section.vh-khoi .vh-bang .vh-bang-nut:hover,
.section.vh-khoi .vh-bang .vh-bang-nut:focus-visible {
    border-color: var(--ss-xanh-dam);
    background: var(--ss-xanh-dam);
    box-shadow: 0 5px 14px rgba(24, 119, 230, .32);
    color: #fff;
}

/* Cột nhãn: nền xanh nhạt, chữ đậm, dính trái khi cuộn ngang */
.section.vh-khoi .vh-bang table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 24%;
    min-width: 170px;
    border-right: 1px solid var(--ss-vien) !important;
    text-align: left;
}

.section.vh-khoi .vh-bang table tbody tr td:first-child {
    background: var(--ss-nhan) !important;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ss-muc);
}

/* Ô giá trị: sọc xanh nhạt / trắng */
.section.vh-khoi .vh-bang table tbody tr td {
    font-size: 13.5px;
    font-weight: 500;
}

.section.vh-khoi .vh-bang table tbody tr:nth-child(odd) td:not(:first-child) {
    background: var(--ss-soc) !important;
}

.section.vh-khoi .vh-bang table tbody tr:nth-child(even) td:not(:first-child) {
    background: #fff !important;
}

.section.vh-khoi .vh-bang table tbody tr td.vh-co {
    font-weight: 600;
    color: #12805c;
}

.section.vh-khoi .vh-bang table tbody tr td.vh-khong {
    font-weight: 600;
    color: var(--ss-do);
}

/* Dòng mở "* " (đơn giá): giá đỏ đậm như hàng giá của bảng mẫu */
.section.vh-khoi .vh-bang table tbody tr.vh-dong-nhan td:not(:first-child) {
    font-weight: 700;
    color: var(--ss-do);
    font-variant-numeric: tabular-nums;
}

/* Cột gói nổi bật: tên gói + nền cột nhấn nhẹ */
.section.vh-khoi .vh-bang table thead tr th.vh-noi-bat {
    background: #eaf3fe !important;
}

.section.vh-khoi .vh-bang table tbody tr td.vh-noi-bat {
    box-shadow: inset 2px 0 0 rgba(24, 119, 230, .18), inset -2px 0 0 rgba(24, 119, 230, .18);
}

@media (max-width: 640px) {
    .section.vh-khoi .vh-bang table {
        min-width: 620px;
        font-size: 13px;
    }

    .section.vh-khoi .vh-bang table tr > :first-child {
        min-width: 130px;
    }

    .section.vh-khoi .vh-bang table th,
    .section.vh-khoi .vh-bang table td {
        padding: 11px 10px;
    }

    .vh-bang .vh-bang-dau {
        padding: 12px 16px;
        font-size: 15px;
    }
}

/* ---------- 6. Dự toán (section "vh-du-toan": nền xám + lưới) ---------- */

.section.vh-du-toan {
    border-top: 1px solid var(--vh-vien);
    border-bottom: 1px solid var(--vh-vien);
    background:
            linear-gradient(to right, rgba(2, 132, 199, .05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(2, 132, 199, .05) 1px, transparent 1px),
            var(--vh-nen);
    background-size: 32px 32px, 32px 32px, auto;
}

.vh-du-toan .bk-vh__nhan {
    border-color: var(--vh-vien);
    background: #fff;
}

/* ---------- 7. Quy trình (row "vh-cac-buoc": mỗi bước 1 col, số 1-2-3 tự đánh) ---------- */

.section.vh-quy-trinh {
    background: #fff;
}

.vh-khoi .row.vh-cac-buoc {
    counter-reset: vh-buoc;
    row-gap: 24px;
}

.vh-cac-buoc .col-inner {
    counter-increment: vh-buoc;
    height: 100%;
    padding: 30px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-lon);
    background: #fff;
    transition: border-color .35s var(--vh-ease), box-shadow .35s var(--vh-ease), transform .35s var(--vh-ease);
}

.vh-cac-buoc .col-inner:hover {
    border-color: #d0d7e2;
    box-shadow: var(--vh-bong-3);
    transform: translateY(-3px);
}

.vh-cac-buoc .col-inner::before {
    content: counter(vh-buoc);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--vh-xanh-nhat);
    font-family: var(--vh-mono);
    font-size: 18px;
    font-weight: 800;
    color: var(--vh-xanh);
    transition: background-color .35s var(--vh-ease), color .35s var(--vh-ease);
}

.vh-cac-buoc .col-inner:hover::before {
    background: var(--vh-xanh);
    color: #fff;
}

.vh-khoi .vh-cac-buoc h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--vh-chu-dam);
}

.vh-cac-buoc .col-inner > h3 + p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--vh-chu-vua);
}

/* ---------- 8. Tư vấn (section "vh-tu-van": nền tối, row "vh-tv-the" = thẻ trắng) ---------- */

.section.vh-tu-van {
    border-top: 1px solid var(--vh-xanh-vien);
    background: var(--vh-xanh-nhat);
}

.vh-tu-van .row.vh-tv-the {
    padding: 44px 30px;
    border: 1px solid var(--vh-xanh-vien);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 48px -32px rgba(16, 58, 143, .35);
}

.vh-tv-chu .col-inner > p:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--vh-xanh);
}

.vh-tu-van .vh-tv-chu h2 {
    margin-top: 6px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--vh-chu-dam);
}

.vh-tv-chu .col-inner > h2 + p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--vh-chu-vua);
}

.vh-tv-chu ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px !important;
    font-size: 14px;
    color: #344054;
}

.vh-tv-chu ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vh-tv-chu ul li::before {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--vh-xanh);
}

.vh-tv-chu ul li:nth-child(3n+1) { --vh-i: var(--vh-i-dien-thoai); }
.vh-tv-chu ul li:nth-child(3n+2) { --vh-i: var(--vh-i-thu); }
.vh-tv-chu ul li:nth-child(3n) { --vh-i: var(--vh-i-dinh-vi); }

.vh-tv-chu ul strong {
    color: var(--vh-chu-dam);
}

/* ---------- 9. FAQ (Accordion Flatsome, class "vh-faq-ds") ---------- */

.section.vh-faq {
    background: #fff;
}

.vh-faq-ds {
    counter-reset: vh-faq;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vh-faq-ds .accordion-item {
    counter-increment: vh-faq;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-vua);
    overflow: hidden;
    background: #fff;
    transition: border-color .3s var(--vh-ease);
}

.vh-faq-ds .accordion-item:hover {
    border-color: #d0d7e2;
}

.vh-faq-ds .accordion-item .accordion-title {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 0;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--vh-chu-dam);
    text-transform: none;
    text-wrap: pretty;
    transition: color .2s;
}

.vh-faq-ds .accordion-item .accordion-title:hover,
.vh-faq-ds .accordion-item .accordion-title.active {
    color: var(--vh-xanh);
}

.vh-faq-ds .accordion-item .accordion-title > span::before {
    content: counter(vh-faq) ". ";
}

.vh-faq-ds .accordion-item .accordion-title .toggle {
    position: static;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    opacity: 1;
    color: var(--vh-chu-mo);
    background: none;
    border: 0;
    transition: transform .35s var(--vh-ease);
}

.vh-faq-ds .accordion-item .accordion-title.active .toggle {
    transform: rotate(180deg);
}

.vh-faq-ds .accordion-item .accordion-title .toggle i {
    display: none;
}

.vh-faq-ds .accordion-item .accordion-title .toggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 3px;
    background-color: currentColor;
    -webkit-mask: var(--vh-i-xuong) center / contain no-repeat;
    mask: var(--vh-i-xuong) center / contain no-repeat;
}

.vh-faq-ds .accordion-item .accordion-inner {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--vh-vien-nhat);
    font-size: 14px;
    line-height: 1.75;
    color: var(--vh-chu-vua);
}

.vh-faq-ds .accordion-inner p {
    margin: 0;
}

.vh-faq-ds .accordion-inner p + p {
    margin-top: .8em;
}

.vh-faq-ds .accordion-inner strong {
    color: var(--vh-chu-dam);
}

/* ---------- Khối Flatsome: responsive (Flatsome xếp chồng cột dưới 850px) ---------- */

@media (max-width: 849px) {
    .vh-hero-chu .col-inner {
        text-align: center;
    }

    .vh-hero-chu .col-inner > h1 + p {
        margin-left: auto;
        margin-right: auto;
    }

    .vh-hero-chu .col-inner > ul + p {
        justify-content: center;
    }

    .vh-hero-chu ul li {
        text-align: left;
    }

    .vh-hero-anh {
        margin-top: 36px;
    }

    .vh-tu-van .row.vh-tv-the {
        padding: 28px 12px;
    }

    .vh-tv-form {
        margin-top: 28px;
    }
}

@media (max-width: 640px) {
    .vh-hero-chu ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vh-hero-chu ul li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .vh-hero-chu ul li {
        padding-left: 60px;
    }

    .vh-hero-chu .col-inner > ul + p a {
        width: 100%;
    }

    .vh-o .col-inner,
    .vh-cac-buoc .col-inner {
        padding: 24px;
    }

    .vh-o[class*="vh-i-"] .col-inner::after {
        top: 35px;
        left: 35px;
    }


    .vh-faq-ds .accordion-item .accordion-title {
        padding: 16px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vh-hero-chu .col-inner > p:first-child::before {
        animation: none;
    }

    .vh-hero *,
    .vh-khoi *,
    .vh-cong-cu * {
        transition: none !important;
    }
}

/* =====================================================================
   30/09/2026 — chu kỳ + % riêng từng gói, tạm tính nhanh, nút đăng ký cuối bảng so sánh, form gọn
   ===================================================================== */

/* ---------- Tạm tính nhanh trên thẻ gói (icon máy tính cạnh giá) ----------
   Rê chuột / tab vào = hiện hộp tổng tiền từng chu kỳ gói bán; dòng đang áp dụng (.is-chon) nền xanh. */
/* Thẻ đang mở popup tạm tính phải nổi trên thẻ bên cạnh (thẻ sau trong lưới đè lên popup) */
.bk-vh__goi:hover,
.bk-vh__goi:focus-within {
    z-index: 5;
}

/* Hàng "Thanh toán 1 năm: …" + icon máy tính */
.bk-vh .bk-vh__goi-ky-hang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bk-vh .bk-vh__goi-ky-hang .bk-vh__goi-ky {
    margin: 0;
}

.bk-vh .bk-vh__tt {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vh-xanh-nhat);
    color: var(--vh-xanh);
    cursor: help;
    white-space: normal;
    transition: background-color .2s, transform .2s;
}

.bk-vh .bk-vh__tt:hover,
.bk-vh .bk-vh__tt:focus-visible {
    background: #e3ecfc;
    transform: translateY(-1px);
    outline: none;
}

.bk-vh .bk-vh__tt:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 95, 217, .3);
}

.bk-vh .bk-vh__tt > .bk-vh__icon {
    width: 17px;
    height: 17px;
}

/* Hộp bám theo cả hàng "Thanh toán…" (rộng bằng lòng thẻ) chứ không theo icon -> thẻ ngoài cùng
   bên phải không thò ra mép trang. Ẩn bằng display:none để lúc ẩn không chiếm chỗ (không sinh cuộn ngang). */
.bk-vh .bk-vh__tt-hop {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    right: -8px;
    z-index: 20;
    display: none;
    gap: 2px;
    padding: 12px 10px 10px;
    border: 1px solid var(--vh-vien);
    border-radius: var(--vh-r-nho);
    background: #fff;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    color: var(--vh-chu);
}

.bk-vh .bk-vh__tt:hover .bk-vh__tt-hop,
.bk-vh .bk-vh__tt:focus-visible .bk-vh__tt-hop {
    display: grid;
    animation: vh-tt-hien .2s var(--vh-ease) both;
}

@keyframes vh-tt-hien {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.bk-vh .bk-vh__tt-hop b {
    padding: 0 8px 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--vh-chu-dam);
}

.bk-vh .bk-vh__tt-dong {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 18px;
    padding: 6px 8px;
    border-radius: 8px;
}

.bk-vh .bk-vh__tt-dong i {
    font-style: normal;
    color: var(--vh-chu-mo);
}

.bk-vh .bk-vh__tt-dong small {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--vh-xanhla);
}

.bk-vh .bk-vh__tt-dong em {
    font-style: normal;
    font-weight: 700;
    color: var(--vh-chu-dam);
    font-variant-numeric: tabular-nums;
}

.bk-vh .bk-vh__tt-dong.is-chon {
    background: var(--vh-xanh-nhat);
}

.bk-vh .bk-vh__tt-dong.is-chon i {
    font-weight: 700;
    color: var(--vh-chu-dam);
}

.bk-vh .bk-vh__tt-dong.is-chon em {
    color: var(--vh-xanh);
}

/* Gói không bán chu kỳ khách chọn -> tính theo chu kỳ gần nhất */
.bk-vh .bk-vh__goi-ky-rieng {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 12px;
    line-height: 1.45;
    color: #92400e;
}

.bk-vh .bk-vh__goi-ky-rieng b {
    color: #b45309;
}

/* Dự toán: nút chu kỳ gói đang chọn không bán */
.bk-vh .bk-vh__dt-ky button:disabled {
    border-style: dashed;
    background: var(--vh-nen);
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.bk-vh .bk-vh__dt-ky button:disabled:hover {
    border-color: var(--vh-vien);
}

/* ---------- Form tư vấn: bỏ ô email + công cụ AI -> 3 ô, làm dày dặn hơn ---------- */
.vh-tv-form .bk-vh__form {
    gap: 18px;
}

.bk-vh .bk-vh__form .bk-vh__truong label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--vh-chu-vua);
}

.bk-vh .bk-vh__form .bk-vh__o-nhap {
    height: 50px;
    padding: 0 16px;
    border: 1px solid #d0d7e2;
    border-radius: var(--vh-r-nho);
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: border-color .25s var(--vh-ease), box-shadow .25s var(--vh-ease);
}

.bk-vh .bk-vh__form .bk-vh__o-nhap::placeholder {
    color: var(--vh-chu-nhat);
    font-weight: 400;
}

.bk-vh .bk-vh__form .bk-vh__o-nhap:hover {
    border-color: #98a2b3;
}

.bk-vh .bk-vh__form .bk-vh__o-nhap:focus {
    border-color: var(--vh-xanh);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(27, 95, 217, .14);
}

/* Mũi tên select tự vẽ, thẳng hàng với lề phải ô */
.bk-vh .bk-vh__form select.bk-vh__o-nhap {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.bk-vh .bk-vh__form .bk-vh__nut--to {
    min-height: 52px;
    margin-top: 4px;
    border-radius: var(--vh-r-nho);
    font-size: 15px;
}

.bk-vh .bk-vh__form .bk-vh__nut--to:hover {
    background: var(--vh-xanh-dam);
}

.bk-vh .bk-vh__form .bk-vh__cam-ket {
    margin-top: -4px;
}

@media (max-width: 640px) {
    .bk-vh__form .bk-vh__hai-cot {
        grid-template-columns: 1fr;
    }

}

@media (prefers-reduced-motion: reduce) {
    .bk-vh .bk-vh__tt,
    .bk-vh .bk-vh__form .bk-vh__nut--to {
        transition: none;
    }

    .bk-vh .bk-vh__tt:hover .bk-vh__tt-hop,
    .bk-vh .bk-vh__tt:focus-visible .bk-vh__tt-hop {
        animation: none;
    }
}

/* ---------- Hiện dần khi cuộn (JS hienDan() gắn .vh-cho rồi .vh-hien) ----------
   Dùng `translate` riêng để không đè `transform` của thẻ nổi bật / hiệu ứng hover. */
/* body + lặp class: thắng `.vh-o .col-inner { transition }` (0,2,0) để giữ transition của opacity/translate */
body .vh-cho.vh-cho {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .7s var(--vh-ease) var(--vh-tre, 0ms), translate .7s var(--vh-ease) var(--vh-tre, 0ms),
    box-shadow .35s var(--vh-ease), border-color .35s var(--vh-ease), transform .35s var(--vh-ease);
}

body .vh-cho.vh-hien {
    opacity: 1;
    translate: none;
}

/* =====================================================================
   Bảng giá — màu theo mockup (30/09/2026): xanh da trời sky, % giảm nhãn đỏ,
   giá xanh, dải mã giảm giá đỏ đặc chữ trắng. Chỉ đổi token trong khối bảng giá.
   ===================================================================== */
.bk-vh--bang-gia {
    --vh-xanh: #0284c7;
    --vh-xanh-dam: #0369a1;
    --vh-xanh-nhat: #f0f9ff;
    --vh-xanh-vien: #bae6fd;
    --vh-bong-xanh: 0 15px 40px -10px rgba(2, 132, 199, .28);
}

.bk-vh--bang-gia .bk-vh__chu-ky {
    gap: 4px;
    padding: 6px;
    border-color: #e0f2fe;
    background: rgba(240, 249, 255, .9);
}

.bk-vh--bang-gia .bk-vh__chu-ky button:hover {
    color: #0284c7;
}

.bk-vh--bang-gia .bk-vh__chu-ky button[aria-pressed="true"] {
    background: #0284c7;
    box-shadow: 0 6px 14px -6px rgba(2, 132, 199, .7);
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__giam {
    padding: 1px 6px;
    border-radius: 6px;
    background: #fee2e2;
    font-size: 11px;
    font-weight: 800;
    color: #ef4444;
}

.bk-vh--bang-gia .bk-vh__chu-ky button[aria-pressed="true"] .bk-vh__giam {
    background: #0369a1;
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__goi-gia strong {
    color: #0284c7;
}

.bk-vh--bang-gia .bk-vh__coupon {
    padding: 8px 8px 8px 12px;
    border: 0;
    border-radius: 10px;
    background: #f04438;
    font-weight: 600;
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__coupon strong {
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__coupon button {
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__coupon button:hover {
    background: rgba(255, 255, 255, .18);
}

.bk-vh--bang-gia .bk-vh__goi-ts li.la-tick .bk-vh__icon {
    color: #059669;
}

.bk-vh--bang-gia .bk-vh__nut--xanh {
    box-shadow: 0 6px 14px -6px rgba(2, 132, 199, .6);
}

/* Hộp tạm tính theo chu kỳ — cùng tông bảng giá. Icon KHÔNG dùng transform khi hover:
   transform biến icon thành khối chứa của hộp absolute -> hộp co về bề rộng icon, giá tràn ra ngoài. */
.bk-vh--bang-gia .bk-vh__tt:hover,
.bk-vh--bang-gia .bk-vh__tt:focus-visible {
    transform: none;
    background: #e0f2fe;
}

.bk-vh--bang-gia .bk-vh__tt-hop {
    min-width: 250px;
    padding: 12px 8px 8px;
    border: 1px solid #e0f2fe;
    border-radius: 14px;
    box-shadow: 0 20px 44px -14px rgba(2, 132, 199, .35);
}

.bk-vh--bang-gia .bk-vh__tt-hop b {
    margin-bottom: 4px;
    padding: 0 10px 8px;
    border-bottom: 1px solid #f0f9ff;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0369a1;
}

.bk-vh--bang-gia .bk-vh__tt-dong {
    gap: 14px;
    padding: 7px 10px;
}

.bk-vh--bang-gia .bk-vh__tt-dong small {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 5px;
    background: #fee2e2;
    font-size: 10.5px;
    color: #ef4444;
}

.bk-vh--bang-gia .bk-vh__tt-dong.is-chon {
    background: #0284c7;
}

.bk-vh--bang-gia .bk-vh__tt-dong.is-chon i,
.bk-vh--bang-gia .bk-vh__tt-dong.is-chon em {
    color: #fff;
}

.bk-vh--bang-gia .bk-vh__tt-dong.is-chon small {
    background: #0369a1;
    color: #fff;
}

/* =====================================================================
   Chuyển động mượt (30/09/2026): nền chu kỳ trượt, số đổi hiện dần, hộp tạm tính mờ dần vào/ra.
   ===================================================================== */

/* Nền trượt dưới nút chu kỳ (JS bangGia() tạo .bk-vh__chu-ky-nen, gắn .co-nen + .nen-san) */
.bk-vh__chu-ky.co-nen {
    position: relative;
}

.bk-vh .bk-vh__chu-ky.co-nen button {
    position: relative;
    z-index: 1;
}

.bk-vh--bang-gia .bk-vh__chu-ky.co-nen button[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
}

.bk-vh__chu-ky-nen {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 999px;
    background: #0284c7;
    box-shadow: 0 6px 14px -6px rgba(2, 132, 199, .7);
    pointer-events: none;
}

.bk-vh__chu-ky.nen-san .bk-vh__chu-ky-nen {
    transition: transform .45s var(--vh-ease), width .45s var(--vh-ease), height .45s var(--vh-ease);
}

.bk-vh--bang-gia .bk-vh__giam {
    transition: background-color .3s var(--vh-ease), color .3s var(--vh-ease);
}

@media (max-width: 640px) {
    .bk-vh__chu-ky-nen {
        border-radius: 14px;
    }
}

/* Số / chữ vừa đổi (JS ghi() gắn .vh-doi): hiện dần, không nhảy cứng */
.vh-doi {
    animation: vh-doi .45s var(--vh-ease);
}

@keyframes vh-doi {
    from { opacity: .15; filter: blur(3px); }
    to { opacity: 1; filter: none; }
}

/* Hộp tạm tính: mờ dần + trượt nhẹ khi mở/đóng (trình duyệt cũ vẫn bật/tắt như trước).
   ::before = cầu nối khe 10px giữa icon và hộp, rê chuột từ icon xuống hộp không bị tắt. */
.bk-vh--bang-gia .bk-vh__tt-hop {
    opacity: 0;
    translate: 0 -6px;
    transition: opacity .2s var(--vh-ease) .08s, translate .25s var(--vh-ease) .08s, display .25s allow-discrete .08s;
}

.bk-vh--bang-gia .bk-vh__tt-hop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}

.bk-vh--bang-gia .bk-vh__tt:hover .bk-vh__tt-hop,
.bk-vh--bang-gia .bk-vh__tt:focus-visible .bk-vh__tt-hop {
    opacity: 1;
    translate: none;
    animation: none;
    transition-delay: 0s;
}

@starting-style {
    .bk-vh--bang-gia .bk-vh__tt:hover .bk-vh__tt-hop,
    .bk-vh--bang-gia .bk-vh__tt:focus-visible .bk-vh__tt-hop {
        opacity: 0;
        translate: 0 -6px;
    }
}

.bk-vh--bang-gia .bk-vh__tt-dong {
    transition: background-color .3s var(--vh-ease), color .3s var(--vh-ease);
}

@media (prefers-reduced-motion: reduce) {
    .bk-vh__chu-ky.nen-san .bk-vh__chu-ky-nen,
    .bk-vh--bang-gia .bk-vh__tt-hop {
        transition: none;
    }

    .vh-doi {
        animation: none;
    }
}

/* =====================================================================
   Khối Tư vấn theo mockup (30/09/2026): nền navy -> sky đậm có lưới mờ, thẻ trắng bo 28px nổi hẳn,
   tông sky như bảng giá / dự toán; liên hệ = ô icon tròn; ô nhập bo 12px, focus vòng sky.
   ===================================================================== */
.section.vh-tu-van {
    position: relative;
    border-top: 0;
    background:
            linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px),
            radial-gradient(ellipse 60% 80% at 85% 20%, rgba(14, 165, 233, .35) 0%, rgba(14, 165, 233, 0) 70%),
            linear-gradient(120deg, #0f172a 0%, #0b204c 50%, #075985 100%);
    background-size: 32px 32px, 32px 32px, auto, auto;
}

.vh-tu-van .row.vh-tv-the {
    max-width: 1040px !important;
    padding: 48px 36px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(2, 6, 23, .55), 0 0 0 6px rgba(255, 255, 255, .06);
}

/* Cột chữ: nhãn chữ hoa sky, h2 đậm, liên hệ thành 3 dòng có ô icon */
.vh-tv-chu .col-inner > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #f0f9ff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0369a1;
}

.vh-tu-van .vh-tv-chu h2 {
    margin-top: 14px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #0f172a;
}

.vh-tv-chu .col-inner > h2 + p {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
}

.vh-tv-chu ul {
    gap: 10px;
    margin-top: 26px !important;
    padding-top: 22px;
    border-top: 1px dashed #e2e8f0;
    font-size: 14px;
    color: #334155;
}

.vh-tv-chu ul li {
    position: relative;
    align-items: center;
    min-height: 38px;
    padding-left: 50px;
    gap: 0;
    line-height: 1.5;
}

/* ::before (icon mask) đặt giữa ô tròn ::after */
.vh-tv-chu ul li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    border-radius: 12px;
    background: #f0f9ff;
    box-shadow: inset 0 0 0 1px #e0f2fe;
}

.vh-tv-chu ul li::before {
    position: absolute;
    left: 10px;
    top: 50%;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: #0284c7;
}

.vh-tv-chu ul strong {
    margin-left: 4px;
    font-weight: 800;
    color: #0f172a;
}

/* Cột form: nền xám rất nhạt tách khỏi cột chữ */
.vh-tv-form .col-inner {
    padding: 28px;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #f8fafc;
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__truong label {
    font-size: 12.5px;
    letter-spacing: 0;
    color: #334155;
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__o-nhap {
    height: 50px;
    border-color: #cbd5e1;
    border-radius: 12px;
    background-color: #fff;
    font-size: 14.5px;
    color: #0f172a;
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__o-nhap:hover {
    border-color: #94a3b8;
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__o-nhap:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .18);
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__nut--to {
    min-height: 54px;
    border-radius: 12px;
    background: linear-gradient(90deg, #0284c7, #0369a1);
    box-shadow: 0 14px 28px -12px rgba(2, 132, 199, .65);
    font-size: 15px;
    font-weight: 800;
    transition: box-shadow .3s var(--vh-ease), transform .3s var(--vh-ease), filter .3s var(--vh-ease);
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__nut--to:hover {
    background: linear-gradient(90deg, #0284c7, #0369a1);
    filter: brightness(1.07);
    box-shadow: 0 18px 32px -12px rgba(2, 132, 199, .75);
    transform: translateY(-2px);
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__nut--to:active {
    transform: translateY(0) scale(.99);
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__cam-ket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #64748b;
}

.vh-tv-form .bk-vh .bk-vh__form .bk-vh__cam-ket::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #10b981;
    -webkit-mask: var(--vh-i-khien) center / contain no-repeat;
    mask: var(--vh-i-khien) center / contain no-repeat;
}

@media (max-width: 849px) {
    .vh-tu-van .row.vh-tv-the {
        padding: 28px 8px;
        border-radius: 22px;
    }

    .vh-tv-form .col-inner {
        padding: 20px 16px;
    }
}

/* =====================================================================
   Hero chuyển động (01/10/2026): vào trang các dòng hiện lần lượt, chữ gradient lấp lánh,
   ảnh trôi nhẹ, quầng sáng nền thở chậm; rê chuột ô điểm nhấn = icon nảy, nút chính = vệt sáng quét.
   Keyframe dùng `translate`/`scale` riêng (không phải transform) để không đè transform của hover.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Vào trang: nhãn -> tên -> h1 -> mô tả -> 3 ô -> nút -> cam kết, mỗi bước lệch 90ms */
    .vh-hero-chu .col-inner > *,
    .vh-hero-chu ul li {
        animation: vh-hero-vao .8s var(--vh-ease) both;
    }

    .vh-hero-chu .col-inner > :nth-child(2) { animation-delay: .09s; }
    .vh-hero-chu .col-inner > :nth-child(3) { animation-delay: .18s; }
    .vh-hero-chu .col-inner > :nth-child(4) { animation-delay: .27s; }
    .vh-hero-chu .col-inner > ul { animation: none; }
    .vh-hero-chu ul li:nth-child(1) { animation-delay: .36s; }
    .vh-hero-chu ul li:nth-child(2) { animation-delay: .44s; }
    .vh-hero-chu ul li:nth-child(3) { animation-delay: .52s; }
    .vh-hero-chu .col-inner > ul + p { animation-delay: .62s; }
    .vh-hero-chu .col-inner > ul + p + p { animation-delay: .72s; }

    /* Ảnh: hiện từ phải rồi trôi lên xuống liên tục */
    .vh-hero-anh .col-inner {
        animation: vh-hero-anh-vao 1s var(--vh-ease) .25s both;
    }

    .vh-hero-anh img {
        animation: vh-hero-troi 6s ease-in-out 1.3s infinite;
    }

    /* "vận hành 1 click": gradient chạy qua chữ */
    .vh-hero .vh-hero-chu h1 strong {
        background-image: linear-gradient(90deg, #0b7fd4 0%, #1b5fd9 30%, #38bdf8 50%, #1b5fd9 70%, #0b7fd4 100%);
        background-size: 200% auto;
        animation: vh-hero-anh-sang 5s linear infinite;
    }

    .vh-hero .vh-hero-chu h2 strong {
        background-image: linear-gradient(90deg, #0b7fd4 0%, #1b5fd9 30%, #38bdf8 50%, #1b5fd9 70%, #0b7fd4 100%);
        background-size: 200% auto;
        animation: vh-hero-anh-sang 5s linear infinite;
    }

    /* Quầng sáng nền thở chậm phía sau chữ */
    .section.vh-hero::before {
        content: "";
        position: absolute;
        top: -20%;
        left: 20%;
        width: 60%;
        height: 80%;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(56, 189, 248, .22), rgba(56, 189, 248, 0));
        pointer-events: none;
        animation: vh-hero-tho 9s ease-in-out infinite;
    }

    /* Ô điểm nhấn: rê chuột = icon nảy, ô nền phóng nhẹ */
    .vh-hero-chu ul li::before,
    .vh-hero-chu ul li::after {
        transition: scale .35s var(--vh-ease), translate .35s var(--vh-ease);
    }

    .vh-hero-chu ul li:hover::before {
        scale: 1.08;
    }

    .vh-hero-chu ul li:hover::after {
        animation: vh-hero-nay .5s var(--vh-ease);
    }

    /* Nút chính: vệt sáng quét ngang mỗi 4s và khi rê chuột */
    .vh-hero-chu .col-inner > ul + p a:first-child {
        position: relative;
        overflow: hidden;
    }

    .vh-hero-chu .col-inner > ul + p a:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
        pointer-events: none;
        animation: vh-hero-quet 4s ease-in-out 1.5s infinite;
    }

    .vh-hero-chu .col-inner > ul + p a:first-child:hover::before {
        animation: vh-hero-bay .6s var(--vh-ease);
    }

    /* Nút phụ: icon trượt nhẹ khi rê */
    .vh-hero-chu .col-inner > ul + p a:not(:first-child)::before {
        transition: translate .3s var(--vh-ease);
    }

    .vh-hero-chu .col-inner > ul + p a:not(:first-child):hover::before {
        translate: 2px 0;
    }
}

/* Nội dung hero nằm trên quầng sáng */
.section.vh-hero > .section-content {
    position: relative;
    z-index: 1;
}

@keyframes vh-hero-vao {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: none; }
}

@keyframes vh-hero-anh-vao {
    from { opacity: 0; translate: 40px 0; scale: .96; }
    to { opacity: 1; translate: none; scale: none; }
}

@keyframes vh-hero-troi {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}

@keyframes vh-hero-anh-sang {
    to { background-position: -200% center; }
}

@keyframes vh-hero-tho {
    0%, 100% { opacity: .6; scale: 1; }
    50% { opacity: 1; scale: 1.12; }
}

@keyframes vh-hero-nay {
    0%, 100% { translate: 0 0; }
    35% { translate: 0 -5px; }
    65% { translate: 0 1px; }
}

@keyframes vh-hero-quet {
    0% { left: -60%; }
    30%, 100% { left: 130%; }
}

@keyframes vh-hero-bay {
    0%, 100% { translate: 0 0; }
    40% { translate: 3px -3px; }
}

/* =====================================================================
   Chuyển động các khối dưới hero (01/10/2026) — cùng nếp hero: chỉ chạy khi không bật giảm chuyển động,
   hover dùng `scale`/`translate` riêng để không đè transform + translate của hiện-dần-khi-cuộn.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Bento "Vì sao": rê thẻ = ô icon phóng nhẹ + icon nảy, viền sáng màu xanh */
    .vh-o[class*="vh-i-"] .col-inner::before,
    .vh-o[class*="vh-i-"] .col-inner::after {
        transition: scale .35s var(--vh-ease), translate .35s var(--vh-ease), background-color .35s var(--vh-ease);
    }

    .vh-o[class*="vh-i-"] .col-inner:hover::before {
        scale: 1.1;
    }

    .vh-o[class*="vh-i-"] .col-inner:hover::after {
        animation: vh-hero-nay .55s var(--vh-ease);
    }

    .vh-o:not(.vh-o--toi) .col-inner:hover {
        border-color: var(--vh-xanh-vien);
    }

    /* Thẻ tối: ánh sáng xanh trôi chậm ở góc */
    .vh-o.vh-o--toi .col-inner {
        background:
                radial-gradient(circle at 85% 0%, rgba(91, 141, 239, .28), rgba(91, 141, 239, 0) 55%),
                var(--vh-toi);
        background-size: 200% 200%, auto;
        animation: vh-o-troi 10s ease-in-out infinite alternate;
    }

    /* Quy trình: số 1-2-3 lần lượt toả vòng sáng, rê thẻ = số nảy */
    .vh-cac-buoc .col-inner::before {
        animation: vh-buoc-ping 3.6s ease-out infinite;
    }

    .vh-cac-buoc .col:nth-child(2) .col-inner::before { animation-delay: 1.2s; }
    .vh-cac-buoc .col:nth-child(3) .col-inner::before { animation-delay: 2.4s; }

    .vh-cac-buoc .col-inner:hover::before {
        scale: 1.12;
    }

    .vh-cac-buoc .col-inner::before {
        transition: background-color .35s var(--vh-ease), color .35s var(--vh-ease), scale .35s var(--vh-ease);
    }

    /* Bảng giá: thẻ nổi bật viền sáng nhịp thở, nhãn "Phổ biến" có vệt sáng chạy */
    .bk-vh__goi--noi-bat {
        animation: vh-goi-sang 3.2s ease-in-out infinite;
    }

    .bk-vh .bk-vh__goi-dai {
        background: linear-gradient(110deg, var(--vh-xanh) 35%, #7dd3fc 50%, var(--vh-xanh) 65%);
        background-size: 250% 100%;
        animation: vh-dai-sang 3.5s linear infinite;
    }

    /* Dự toán: thẻ kết quả gradient trôi chậm, nút vàng có vệt sáng quét */
    .bk-vh__dt-ket-qua {
        background-size: 160% 160%;
        animation: vh-kq-troi 12s ease-in-out infinite alternate;
    }

    .bk-vh .bk-vh__dt-ket-qua .bk-vh__nut--vang {
        position: relative;
        overflow: hidden;
    }

    .bk-vh .bk-vh__dt-ket-qua .bk-vh__nut--vang::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
        pointer-events: none;
        animation: vh-hero-quet 4s ease-in-out 1s infinite;
    }

    /* So sánh: rê hàng = cả hàng sáng lên (cùng độ ưu tiên với rule sọc, đứng sau nên thắng) */
    .section.vh-khoi .vh-bang table tbody tr td {
        transition: background-color .2s var(--vh-ease);
    }

    .section.vh-khoi .vh-bang table tbody tr:hover td:not(:first-child) {
        background: #e3effd !important;
    }

    .section.vh-khoi .vh-bang table tbody tr:hover td:first-child {
        background: #d8e6f7 !important;
    }

    /* FAQ: câu trả lời mở ra thì hiện dần */
    .vh-faq-ds .accordion-title.active + .accordion-inner {
        animation: vh-hero-vao .45s var(--vh-ease) both;
    }

    /* Tư vấn: quầng sáng nền trôi qua lại, rê dòng liên hệ = ô icon nảy */
    .section.vh-tu-van {
        background-size: 32px 32px, 32px 32px, 140% 140%, auto;
        animation: vh-tv-troi 14s ease-in-out infinite alternate;
    }

    .vh-tv-chu ul li::before,
    .vh-tv-chu ul li::after {
        transition: translate .3s var(--vh-ease), background-color .3s var(--vh-ease);
    }

    .vh-tv-chu ul li:hover::before,
    .vh-tv-chu ul li:hover::after {
        translate: 0 -3px;
    }

    .vh-tv-chu ul li:hover::after {
        background: #e0f2fe;
    }
}

@keyframes vh-o-troi {
    from { background-position: 0% 0%, 0 0; }
    to { background-position: 100% 60%, 0 0; }
}

@keyframes vh-buoc-ping {
    0% { box-shadow: 0 0 0 0 rgba(27, 95, 217, .35); }
    35%, 100% { box-shadow: 0 0 0 12px rgba(27, 95, 217, 0); }
}

@keyframes vh-goi-sang {
    0%, 100% { box-shadow: 0 0 0 1px var(--vh-xanh), var(--vh-bong-xanh); }
    50% { box-shadow: 0 0 0 1px var(--vh-xanh), 0 0 0 6px rgba(2, 132, 199, .1), var(--vh-bong-xanh); }
}

@keyframes vh-dai-sang {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

@keyframes vh-kq-troi {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

@keyframes vh-tv-troi {
    from { background-position: 0 0, 0 0, 0% 0%, 0 0; }
    to { background-position: 0 0, 0 0, -40% 30%, 0 0; }
}

/* =====================================================================
   Bento "Vì sao" làm lại (01/10/2026): khoảng cách đều 30px, chân thẻ thống nhất (vạch kẻ + dấu tích),
   icon mỗi thẻ một tông (mạng sky / khiên xanh lá / sét cyan), thẻ tối lớn có nhãn viên thuốc + hoạ tiết lưới
   + icon chìm lấp khoảng trống. Thẻ tối lớn = .vh-o--toi không gắn vh-i-* (pseudo còn trống để vẽ hoạ tiết).
   ===================================================================== */
.vh-khoi .row.vh-bento {
    row-gap: 30px;
}

.vh-o .col-inner {
    padding: 32px;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18);
}

.vh-khoi .vh-o h3 {
    font-size: 20px;
    letter-spacing: -.01em;
}

/* Icon thẻ: tông riêng từng loại */
.vh-o.vh-i-mang[class*="vh-i-"] .col-inner::before { background: #e0f2fe; }
.vh-o.vh-i-mang[class*="vh-i-"] .col-inner::after { background-color: #0284c7; }
.vh-o.vh-i-khien[class*="vh-i-"] .col-inner::before { background: #dcfce7; }
.vh-o.vh-i-khien[class*="vh-i-"] .col-inner::after { background-color: #059669; }
.vh-o.vh-o--toi.vh-i-set[class*="vh-i-"] .col-inner::before { background: rgba(56, 189, 248, .14); }
.vh-o.vh-o--toi.vh-i-set[class*="vh-i-"] .col-inner::after { background-color: #7dd3fc; }

/* Chân thẻ: vạch kẻ mảnh + mỗi ý có dấu tích (trừ thẻ xanh dùng chip mono) */
.vh-o:not(.vh-o--xanh) .col-inner > ul {
    margin-top: auto !important;
    padding-top: 18px;
    border-top: 1px solid var(--vh-vien-nhat);
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-chu-vua);
}

.vh-o:not(.vh-o--xanh) .col-inner > h3 + p {
    margin-bottom: 24px;
}

.vh-o:not(.vh-o--xanh) .col-inner > ul li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vh-o:not(.vh-o--xanh) .col-inner > ul li::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-color: #10b981;
    -webkit-mask: var(--vh-i-tick-tron) center / contain no-repeat;
    mask: var(--vh-i-tick-tron) center / contain no-repeat;
}

.vh-o.vh-o--toi .col-inner > ul {
    margin-top: auto !important;
    border-top-color: rgba(255, 255, 255, .1);
    color: #b6c2d4;
}

.vh-o.vh-o--toi .col-inner > ul li::before {
    background-color: #67e8f9;
}

.vh-o.vh-o--toi .col-inner > ul li:last-child:not(:first-child)::before {
    background-color: var(--vh-xanhla-sang);
}

/* Thẻ xanh nhạt: chip mono đều nhau, có vạch kẻ như các thẻ khác */
.vh-o.vh-o--xanh .col-inner > ul {
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--vh-xanh-vien);
}

.vh-o.vh-o--xanh .col-inner > h3 + p {
    margin-bottom: 24px;
}

.vh-o.vh-o--xanh .col-inner > ul li {
    padding: 5px 10px;
    border-color: var(--vh-xanh-vien);
    color: var(--vh-xanh-dam);
}

/* Thẻ tối lớn (không icon): nhãn viên thuốc cyan, chữ to hơn, lưới chấm + icon tên lửa chìm góc phải */
.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner {
    position: relative;
    overflow: hidden;
    padding: 36px 40px;
}

.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner > * {
    position: relative;
    z-index: 1;
}

.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner > p:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 5px 12px;
    border: 1px solid rgba(103, 232, 249, .3);
    border-radius: 999px;
    background: rgba(103, 232, 249, .08);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #67e8f9;
}

.vh-khoi .vh-o.vh-o--toi:not([class*="vh-i-"]) h3 {
    max-width: 560px;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
}

.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner > h3 + p {
    max-width: 580px;
    font-size: 15px;
}

.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background-image: radial-gradient(rgba(148, 197, 255, .22) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}

.vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner::after {
    content: "";
    position: absolute;
    top: 28px;
    right: 32px;
    width: 120px;
    height: 120px;
    background-color: rgba(125, 211, 252, .12);
    -webkit-mask: var(--vh-i-ten-lua) center / contain no-repeat;
    mask: var(--vh-i-ten-lua) center / contain no-repeat;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner::after {
        transition: translate .6s var(--vh-ease), background-color .6s var(--vh-ease);
    }

    .vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner:hover::after {
        translate: 6px -6px;
        background-color: rgba(125, 211, 252, .2);
    }
}

@media (max-width: 640px) {
    .vh-o .col-inner,
    .vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner {
        padding: 24px;
    }

    .vh-o.vh-o--toi:not([class*="vh-i-"]) .col-inner::after {
        width: 72px;
        height: 72px;
        top: 20px;
        right: 20px;
    }
}

/* Padding thẻ 32px -> icon (mask) chồng lên giữa ô nền: 32 + 11 */
.vh-o[class*="vh-i-"] .col-inner::after {
    top: 43px;
    left: 43px;
}

@media (max-width: 640px) {
    .vh-o[class*="vh-i-"] .col-inner::after {
        top: 35px;
        left: 35px;
    }
}

/* =====================================================================
   Mã giảm giá kiểu "vé" gọn (01/10/2026): thấp hơn (~34px), nền đỏ nhạt khuyết tròn 2 mép,
   mã = viên đỏ đặc chữ mono trắng (điểm nhấn), nút chép tách bằng vạch đứt.
   ===================================================================== */
.bk-vh--bang-gia .bk-vh__coupon {
    gap: 6px;
    margin-top: 14px;
    padding: 5px 4px 5px 14px;
    border: 0;
    border-radius: 9px;
    background: #fff1f0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #b42318;
    -webkit-mask:
            radial-gradient(circle 5px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle 5px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
    mask:
            radial-gradient(circle 5px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle 5px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
}

/* Thẻ hẹp: chữ + mã xuống dòng thay vì tràn đè lên nút chép (mã vẫn giữ nguyên một khối) */
.bk-vh--bang-gia .bk-vh__coupon > span {
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    min-width: 0;
}

.bk-vh--bang-gia .bk-vh__coupon strong {
    padding: 2px 7px;
    border-radius: 5px;
    background: #e5372b;
    font-size: 11px;
    letter-spacing: .06em;
    color: #fff;
}

/* static: Flatsome đặt button {position:relative} -> lớp "Đã chép" bám nhầm vào nút (nhỏ, tràn chữ) thay vì phủ cả dải vé */
.bk-vh--bang-gia .bk-vh__coupon button {
    position: static;
    flex: 0 0 auto;
    min-width: 30px;
    min-height: 26px;
    padding: 2px 8px;
    border-left: 1px dashed #f5a8a1;
    border-radius: 0 6px 6px 0;
    color: #d92d20;
}

.bk-vh--bang-gia .bk-vh__coupon button:hover {
    background: rgba(229, 55, 43, .08);
    color: #b42318;
}

.bk-vh--bang-gia .bk-vh__coupon button .bk-vh__icon {
    width: 14px;
    height: 14px;
}

.bk-vh--bang-gia .bk-vh__coupon {
    position: relative;
}

/* "Đã chép": phủ kín dải vé (nền đỏ đặc, chữ trắng giữa) thay vì chen cạnh icon -> không đè lên mã */
.bk-vh--bang-gia .bk-vh__chep-ok:not(:empty) {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: #e5372b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
    animation: vh-hien-mo .2s var(--vh-ease);
}

@keyframes vh-hien-mo {
    from { opacity: 0; }
}

/* =====================================================================
   Nền bản đồ thế giới khối "Vì sao" (section class "vh-khoi vh-vi-sao", làm lại 01/10/2026).
   ::before = bản đồ chấm (images/vh-ban-do-the-gioi.png làm mask) tô xanh rất nhạt + dải sáng quét ngang,
              mép mờ dần (không lộ đường cắt ở mép section).
   ::after  = images/vh-ban-do-ket-noi.svg cùng khung: cung nối máy chủ Việt Nam tới Tokyo / Singapore / Sydney
              (chỉ phía phải, không đè lên chữ tiêu đề), tín hiệu chạy dọc cung, điểm đến nhấp nháy (animation nằm trong SVG,
              tự tắt khi bật giảm chuyển động).
   Bản đồ rộng 1440px, đặt sao cho điểm Việt Nam (77.3% ngang, 54.9% dọc) rơi vào khoảng trống bên phải
   tiêu đề (~200px từ đỉnh section): top = 200px - 0.2585 x rộng.
   ===================================================================== */
.section.vh-vi-sao {
    --vh-bd-w: 1440px;
    --vh-bd-top: calc(200px - var(--vh-bd-w) * .2585);
    position: relative;
    overflow: hidden;
}

.section.vh-vi-sao > .section-content {
    position: relative;
    z-index: 1;
}

.section.vh-vi-sao::before,
.section.vh-vi-sao::after {
    content: "";
    position: absolute;
    top: var(--vh-bd-top);
    left: 50%;
    width: var(--vh-bd-w);
    aspect-ratio: 1168 / 550;
    translate: -50% 0;
    pointer-events: none;
}

.section.vh-vi-sao::before {
    background: linear-gradient(100deg,
    rgba(2, 132, 199, .14) 0%, rgba(2, 132, 199, .14) 40%,
    rgba(56, 189, 248, .42) 50%,
    rgba(2, 132, 199, .14) 60%, rgba(2, 132, 199, .14) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-mask-image: url("../images/vh-ban-do-the-gioi.png"), radial-gradient(ellipse 52% 46% at 62% 52%, #000 35%, transparent 100%);
    -webkit-mask-size: 100% 100%, 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-image: url("../images/vh-ban-do-the-gioi.png"), radial-gradient(ellipse 52% 46% at 62% 52%, #000 35%, transparent 100%);
    mask-size: 100% 100%, 100% 100%;
    mask-repeat: no-repeat;
    mask-composite: intersect;
}

/* Cung kết nối: cũng mờ dần ra mép như bản đồ, riêng vùng Việt Nam giữ rõ */
.section.vh-vi-sao::after {
    background: url("../images/vh-ban-do-ket-noi.svg") center / 100% 100% no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 58% 52% at 62% 52%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 58% 52% at 62% 52%, #000 45%, transparent 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .section.vh-vi-sao::before {
        animation: vh-bd-quet 10s linear infinite;
    }
}

@keyframes vh-bd-quet {
    from { background-position: 100% 0; }
    to { background-position: -160% 0; }
}

/* Thẻ trắng trên nền bản đồ: hơi trong + mờ nền cho bản đồ ẩn hiện phía sau */
.vh-vi-sao .vh-o:not(.vh-o--toi):not(.vh-o--xanh) .col-inner {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Màn hẹp: bản đồ = 210vw, dịch trái để Việt Nam ở ~72% bề ngang màn; điểm VN ngang dòng tiêu đề */
@media (max-width: 849px) {
    .section.vh-vi-sao {
        --vh-bd-w: 210vw;
        --vh-bd-top: calc(150px - var(--vh-bd-w) * .2585);
    }

    .section.vh-vi-sao::before,
    .section.vh-vi-sao::after {
        left: calc(72vw - var(--vh-bd-w) * .773);
        translate: none;
    }

    /* Không đủ khoảng trống cạnh tiêu đề -> bỏ lớp cung, chỉ giữ bản đồ chấm */
    .section.vh-vi-sao::after {
        display: none;
    }
}

/* =====================================================================
   Dự toán — nút chu kỳ (01/10/2026): tên + nhãn % giảm nằm CÙNG DÒNG (trước đây % rớt xuống dòng 2),
   căn giữa dọc nên ô không giảm (3 / 6 tháng) cao bằng ô có giảm; nhãn % = viên đỏ nhạt như bảng giá.
   ===================================================================== */
.bk-vh .bk-vh__dt-ky button {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 3px;
}

.bk-vh .bk-vh__dt-ky strong {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.bk-vh .bk-vh__dt-ky span {
    display: inline-flex;
    padding: 1px 4px;
    border-radius: 5px;
    background: #fee2e2;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: #ef4444;
}

/* span có thuộc tính hidden (chu kỳ không giảm) -> display ở trên không được đè lên */
.bk-vh .bk-vh__dt-ky span[hidden] {
    display: none;
}

.bk-vh .bk-vh__dt-ky button[aria-pressed="true"] span {
    background: #0284c7;
    color: #fff;
}

.bk-vh .bk-vh__dt-ky button[aria-pressed="true"] {
    box-shadow: 0 6px 16px -10px rgba(2, 132, 199, .6);
}

/* =====================================================================
   Dự toán — cột chọn làm đẹp (01/10/2026): tiêu đề nhóm có vạch kẻ kéo dài, thẻ gói kiểu "thẻ chọn"
   (tên mono như bảng giá, giá đậm, gói đang chọn có dấu tích góc phải), chu kỳ đều hàng,
   ô ưu đãi kiểu vé: mã = viên đỏ đặc như dải coupon bảng giá, mỗi ý có dấu tích.
   ===================================================================== */
.bk-vh .bk-vh__dt-nhom legend {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
    font-size: 11.5px;
    letter-spacing: .08em;
    color: #0f172a;
}

.bk-vh .bk-vh__dt-nhom legend::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #e2e8f0, rgba(226, 232, 240, 0));
}

/* --- Thẻ gói --- */
.bk-vh__dt-goi {
    gap: 10px;
}

.bk-vh .bk-vh__dt-goi button {
    position: relative;
    align-items: flex-start;
    gap: 3px;
    padding: 14px 14px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: border-color .25s var(--vh-ease), background-color .25s var(--vh-ease), box-shadow .25s var(--vh-ease), translate .25s var(--vh-ease);
}

.bk-vh .bk-vh__dt-goi button:hover {
    border-color: #bae6fd;
    box-shadow: 0 8px 18px -12px rgba(2, 132, 199, .45);
    translate: 0 -1px;
}

.bk-vh .bk-vh__dt-goi strong {
    /*font-family: var(--vh-mono);*/
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0;
    color: #0f172a;
}

.bk-vh .bk-vh__dt-goi span {
    font-size: 13px;
    font-weight: 700;
    color: #0284c7;
    font-variant-numeric: tabular-nums;
}

.bk-vh .bk-vh__dt-goi small {
    margin-top: 4px;
    padding-top: 6px;
    width: 100%;
    border-top: 1px dashed #e2e8f0;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] {
    border-color: #0284c7;
    background: linear-gradient(180deg, #f0f9ff, #fff);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .12), 0 10px 22px -14px rgba(2, 132, 199, .6);
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] strong {
    color: #0369a1;
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] span {
    color: #0284c7;
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"] small {
    border-top-color: #bae6fd;
    color: #0369a1;
}

/* Dấu tích góc phải thẻ đang chọn */
.bk-vh .bk-vh__dt-goi button::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0284c7 var(--vh-i-tick-trang) center / 12px no-repeat;
    opacity: 0;
    scale: .5;
    transition: opacity .2s var(--vh-ease), scale .25s var(--vh-ease);
}

.bk-vh .bk-vh__dt-goi button[aria-pressed="true"]::after {
    opacity: 1;
    scale: 1;
}

.bk-vh__dt {
    --vh-i-tick-trang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* --- Chu kỳ --- */
.bk-vh .bk-vh__dt-ky button {
    min-height: 48px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
}

.bk-vh .bk-vh__dt-ky button:not(:disabled):hover {
    border-color: #bae6fd;
    color: #0369a1;
}

.bk-vh .bk-vh__dt-ky button[aria-pressed="true"] {
    border-color: #0284c7;
    background: #0284c7;
    box-shadow: 0 8px 18px -10px rgba(2, 132, 199, .75);
    color: #fff;
}

.bk-vh .bk-vh__dt-ky button[aria-pressed="true"] span {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* --- Ô ưu đãi kiểu vé --- */
.bk-vh__dt-ghi {
    position: relative;
    padding: 16px 18px 16px 20px;
    border: 1px dashed #fecaca;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7f6 0%, #fff 70%);
    color: #475569;
}

.bk-vh__dt-ghi::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #e5372b;
}

.bk-vh .bk-vh__dt-ghi-dau {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b42318;
}

.bk-vh__dt-ghi-dau .bk-vh__icon {
    color: #e5372b;
}

.bk-vh__dt-ghi li {
    padding-left: 22px;
    line-height: 1.55;
}

.bk-vh__dt-ghi li + li {
    margin-top: 6px;
}

.bk-vh__dt-ghi li::before {
    left: 0;
    top: .2em;
    width: 15px;
    height: 15px;
    border-radius: 0;
    background: #10b981;
    -webkit-mask: var(--vh-i-tick-tron) center / contain no-repeat;
    mask: var(--vh-i-tick-tron) center / contain no-repeat;
}

.bk-vh__dt-ghi strong,
.bk-vh__dt-ghi code {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: #e5372b;
    font-size: 11.5px;
    letter-spacing: .06em;
    line-height: 1.5;
    color: #fff;
}

@media (max-width: 640px) {
    .bk-vh .bk-vh__dt-goi button {
        padding: 12px 12px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-vh .bk-vh__dt-goi button,
    .bk-vh .bk-vh__dt-goi button::after {
        transition: none;
    }
}