/* ============================================================
   Vet System — Client frontend (Visual Builder sections)
   Convention: public/assets/clients/css/sections.css
   Tokens defined in :root below (client layout).
   ============================================================ */

:root {
    --vs-primary: #0f766e;
    --vs-primary-dark: #0d5d57;
    --vs-secondary: #f59e0b;
    --vs-accent: #14b8a6;
    /* Accent dung TREN NEN TOI (card lien he, slider, footer): theme toi
       co the override de dam bao tuong phan (vd minimal accent #111 -> xam sang). */
    --vs-accent-on-dark: var(--vs-accent);
    /* --vs-teal = alias cua --vs-primary: moi cho dung teal (button, link, icon,
       tab...) tu theo theme company (ThemeManager ghi de --vs-primary). */
    --vs-teal: var(--vs-primary);
    --vs-teal-bg: #f0fdfa;
    --vs-text: #334155;
    --vs-muted: #64748b;
    --vs-gray-900: #0f172a;
    --vs-gray-600: #64748b;
    --vs-border: #e2e8f0;
    --vs-surface: #ffffff;
    --vs-surface-alt: #f8fafc;
    --vs-danger: #dc2626;
    --vs-success: #16a34a;
    --vs-warning: #d97706;
    --vs-navy: #0f172a;
    --vs-radius: 12px;
    --vs-radius-sm: 8px;
    --vs-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    --vs-shadow-sm: 0 1px 4px rgba(15, 23, 42, .05);
    --vs-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
    --vs-font-heading: 'Nunito Sans', sans-serif;
    --vs-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Aliases dung chung cho trang danh sach/chi tiet san pham */
    --vs-bg-soft: #f1f5f9;
    --vs-radius-md: var(--vs-radius);
    --vs-radius-lg: 16px;
    /* Alias legacy de cac rule cu dung --vs-font-head van theo theme font */
    --vs-font-head: var(--vs-font-heading);
}

/* ===== Base ===== */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--vs-font-body);
    color: var(--vs-text);
    background: var(--vs-surface);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--vs-teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--vs-primary-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--vs-font-head); color: var(--vs-gray-900); margin: 0 0 12px; line-height: 1.3; }

.vs-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.container-sm {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

.vs-site { display: flex; flex-direction: column; min-height: 100vh; }
.vs-main { flex: 1 0 auto; }

/* ===== Header ===== */
.vs-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--vs-surface);
    border-bottom: 1px solid var(--vs-border);
    box-shadow: var(--vs-shadow-sm);
}
.vs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    max-width: 1000px;
    margin-inline: auto;
}
.vs-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.vs-brand img { max-height: 44px; width: auto; }
.vs-brand__text {
    font-family: var(--vs-font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--vs-gray-900);
    letter-spacing: .3px;
}
.vs-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}
.vs-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
.vs-menu a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--vs-radius-sm);
    color: var(--vs-text);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.vs-menu a:hover { color: var(--vs-primary); background: var(--vs-surface-alt, rgba(15, 23, 42, .06)); background: color-mix(in srgb, var(--vs-primary) 10%, transparent); }
.vs-menu a[aria-current="page"] { color: var(--vs-primary); background: var(--vs-surface-alt, rgba(15, 23, 42, .06)); background: color-mix(in srgb, var(--vs-primary) 10%, transparent); }
.vs-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vs-header__actions .vs-btn { padding: 7px 12px; font-size: 13px; }

.vs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--vs-radius-sm);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vs-btn:hover { transform: translateY(-1px); text-decoration: none; }
.vs-btn--primary { background: var(--vs-teal); color: var(--vs-surface, #fff); }
.vs-btn--primary:hover { background: var(--vs-primary-dark); color: #fff; }
.vs-btn--ghost { background: transparent; color: var(--vs-text); border-color: var(--vs-border); }
.vs-btn--ghost:hover { color: var(--vs-primary); border-color: var(--vs-primary); }
.vs-btn--outline { background: transparent; color: var(--vs-primary); border-color: var(--vs-primary); }
.vs-btn--outline:hover { background: var(--vs-primary); border-color: var(--vs-primary); color: var(--vs-surface, #fff); }

.vs-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    cursor: pointer;
    margin-left: auto;
}
.vs-nav-toggle span {
    display: block;
    height: 2px;
    width: 20px;
    background: var(--vs-gray-900);
    border-radius: 2px;
    margin: 0 auto;
    transition: transform .2s ease, opacity .2s ease;
}

/* ===== Breadcrumb ===== */
.vs-breadcrumb {
    background: var(--vs-teal-bg);
    border-bottom: 1px solid var(--vs-border);
    padding: 22px 0;
}
.vs-breadcrumb h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
}
.vs-breadcrumb nav { font-size: 13px; color: var(--vs-muted); }
.vs-breadcrumb nav a { color: var(--vs-teal); font-weight: 600; }
.vs-breadcrumb nav span { color: var(--vs-muted); }

/* ===== Generic section scaffold ===== */
.section {
    padding: 72px 0;
    position: relative;
}
.section.bg-gray { background: var(--vs-surface-alt); }
.section.bg-teal { background: var(--vs-teal-bg); }

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}
.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vs-teal);
    margin-bottom: 10px;
}
.section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--vs-gray-900);
    margin: 0 0 12px;
    line-height: 1.25;
}
.section-subtitle {
    font-size: 15px;
    color: var(--vs-muted);
    margin: 0;
    line-height: 1.7;
}

/* ===== Hero ===== */
.hero { padding: 88px 0 72px; background: linear-gradient(180deg, var(--vs-teal-bg) 0%, #fff 100%); }
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}
.hero h1 { font-size: 46px; font-weight: 700; line-height: 1.2; margin: 0 0 18px; color: var(--vs-gray-900); }
.hero h1 b { color: var(--vs-teal); }
.hero p { font-size: 16px; color: var(--vs-muted); margin: 0 0 28px; line-height: 1.7; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--vs-radius-sm);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-lg:hover { transform: translateY(-2px); text-decoration: none; }
.btn-lg.primary, .btn.lg.primary { background: var(--vs-teal); color: var(--vs-surface, #fff); }
.btn-lg.primary:hover, .btn.lg.primary:hover { background: var(--vs-primary-dark); color: var(--vs-surface, #fff); }
.btn-lg.secondary, .btn.lg.secondary { background: transparent; color: var(--vs-teal); border-color: var(--vs-teal); }
.btn-lg.secondary:hover, .btn.lg.secondary:hover { background: var(--vs-teal); color: var(--vs-surface, #fff); }
.btn.sm.secondary, .btn-sm { border: 1px solid var(--vs-border); background: #fff; color: var(--vs-text); }
.btn.sm.secondary:hover, .btn-sm:hover { border-color: var(--vs-teal); color: var(--vs-teal); }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    margin-top: 32px;
}
.hero-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vs-text);
}
.hero-stat .icon {
    width: 38px;
    height: 38px;
    border-radius: var(--vs-radius-sm);
    background: #fff;
    border: 1px solid var(--vs-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-teal);
    font-size: 15px;
    flex-shrink: 0;
}
.hero-img { position: relative; }
.hero-img img { width: 100%; border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-lg); }
.float-card {
    position: absolute;
    bottom: -14px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vs-gray-900);
    box-shadow: var(--vs-shadow);
}
.float-card .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vs-success); }

/* ===== Partners ===== */
.partners { padding: 40px 0; border-bottom: 1px solid var(--vs-border); }
.partners-header { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.partners-title { font-family: var(--vs-font-head); font-size: 32px; font-weight: 700; color: var(--vs-gray-900); margin: 0 0 10px; line-height: 1.25; }
.partners-subtitle { color: var(--vs-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.partners-label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vs-muted); margin: 0 0 24px; }
.partners-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partner-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--vs-muted);
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.partner-item:hover { border-color: var(--vs-teal); color: var(--vs-teal); transform: translateY(-2px); }
.partner-item i { color: var(--vs-teal); font-size: 16px; }

/* ===== Features ===== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* Section chi co 3 item -> giu 3 cot de khong hut o thu 4 */
.features-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-card {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 26px;
    box-shadow: var(--vs-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.feature-card:hover { box-shadow: var(--vs-shadow-lg); transform: translateY(-4px); border-color: var(--vs-teal); }
.fc-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--vs-radius-sm);
    background: var(--vs-teal-bg);
    color: var(--vs-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.fc-icon img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--vs-radius-sm); }
.feature-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--vs-gray-900); }
.feature-card p { font-size: 14px; color: var(--vs-muted); margin: 0; line-height: 1.65; }

/* ===== Solutions ===== */
.solutions-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.solutions-tabs button {
    padding: 10px 20px;
    border: 1px solid var(--vs-border);
    background: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vs-text);
    cursor: pointer;
    transition: all .2s ease;
}
.solutions-tabs button:hover { border-color: var(--vs-teal); color: var(--vs-teal); }
.solutions-tabs button.active { background: var(--vs-teal); border-color: var(--vs-teal); color: #fff; }
.solution-panel { display: none; }
.solution-panel.active { display: block; animation: vsFadeIn .35s ease; }
@keyframes vsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.solution-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 32px;
    box-shadow: var(--vs-shadow-sm);
}
.solution-content h3 { font-size: 26px; font-weight: 700; margin: 0 0 12px; color: var(--vs-gray-900); }
.solution-content p { font-size: 15px; color: var(--vs-muted); line-height: 1.7; }
.solution-content ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.solution-content li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--vs-text);
    font-weight: 600;
}
.solution-content li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--vs-teal);
}
.s-img img { width: 100%; border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-lg); }

/* ===== Screens ===== */
.screens-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.screens-tabs button {
    padding: 9px 18px;
    border: 1px solid var(--vs-border);
    background: #fff;
    border-radius: var(--vs-radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--vs-text);
    cursor: pointer;
    transition: all .2s ease;
}
.screens-tabs button:hover { border-color: var(--vs-teal); color: var(--vs-teal); }
.screens-tabs button.active { background: var(--vs-teal); border-color: var(--vs-teal); color: #fff; }
.screen-panel { display: none; }
.screen-panel.active { display: block; animation: vsFadeIn .35s ease; }
.screen-panel img { width: 100%; border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-lg); border: 1px solid var(--vs-border); }

/* ===== Timeline / Process ===== */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--vs-border);
}
.timeline-step {
    position: relative;
    padding: 0 0 26px 68px;
}
.timeline-step:last-child { padding-bottom: 0; }
.step-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--vs-teal); color: var(--vs-surface, #fff);
    font-family: var(--vs-font-head);
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--vs-teal-bg);
}
.step-body {
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 20px 24px;
    box-shadow: var(--vs-shadow-sm);
}
.step-body h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--vs-gray-900); }
.step-body p { font-size: 14px; color: var(--vs-muted); margin: 0; line-height: 1.6; }

/* ===== Benefits ===== */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit-item {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 22px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.benefit-item:hover { box-shadow: var(--vs-shadow-lg); transform: translateY(-3px); }
.bi-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--vs-radius-sm);
    background: var(--vs-teal-bg);
    color: var(--vs-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.benefit-item h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--vs-gray-900); }
.benefit-item p { font-size: 13px; color: var(--vs-muted); margin: 0; line-height: 1.6; }

/* ===== Pricing ===== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 30px 26px;
    box-shadow: var(--vs-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover { box-shadow: var(--vs-shadow-lg); transform: translateY(-4px); }
.pricing-card.featured { border-color: var(--vs-teal); box-shadow: 0 12px 32px rgba(15, 118, 110, .16); }
.pricing-card h4 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--vs-gray-900); }
.pricing-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vs-teal); color: var(--vs-surface, #fff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-card .price { font-family: var(--vs-font-head); font-size: 34px; font-weight: 700; color: var(--vs-gray-900); line-height: 1.1; }
.pricing-card .price small { font-size: 14px; color: var(--vs-muted); font-family: var(--vs-font-body); }
.price-sub { font-size: 12px; color: var(--vs-muted); margin: 6px 0 18px; }
.pricing-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1 0 auto; }
.pricing-card li { font-size: 13.5px; color: var(--vs-text); display: flex; gap: 8px; }
.pricing-card li i { color: var(--vs-teal); margin-top: 3px; }
.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--vs-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-block:hover { transform: translateY(-1px); text-decoration: none; }
.outline-btn { background: transparent; color: var(--vs-teal); border: 1px solid var(--vs-teal); }
.outline-btn:hover { background: var(--vs-teal); color: #fff; }
.primary-btn { background: var(--vs-teal); color: #fff; }
.primary-btn:hover { background: var(--vs-primary-dark); color: #fff; }

/* ===== FAQ ===== */
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: #fff; overflow: hidden; transition: box-shadow .2s ease; }
.faq-item:hover { box-shadow: var(--vs-shadow); }
.faq-item.open { border-color: var(--vs-teal); }
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vs-gray-900);
    cursor: pointer;
    user-select: none;
}
.faq-q i { color: var(--vs-muted); transition: transform .25s ease; font-size: 13px; }
.faq-item.open .faq-q i { transform: rotate(180deg); color: var(--vs-teal); }
.faq-a { display: none; padding: 0 20px 16px; font-size: 14px; color: var(--vs-muted); line-height: 1.7; }
.faq-a p { margin: 0; }
.faq-item.open .faq-a { display: block; animation: vsFadeIn .25s ease; }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.contact-form { display: grid; gap: 14px; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    font-size: 14px;
    font-family: var(--vs-font-body);
    color: var(--vs-text);
    transition: border-color .2s ease, box-shadow .2s ease;
    background: #fff;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--vs-teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-primary) 14%, transparent); }
.btn-lg.primary[style*="justify-content:center"] { width: 100%; }
.contact-info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    padding: 18px 20px;
    margin-bottom: 12px;
}
.ci-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--vs-radius-sm);
    background: var(--vs-teal-bg);
    color: var(--vs-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.contact-info-item h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--vs-gray-900); }
.contact-info-item span { font-size: 13px; color: var(--vs-muted); white-space: pre-line; }

/* ===== Contact v2 (per-company landing) ===== */
/* Nen section lien he theo theme: surface-alt thay vi hardcode #f8fafc
   (bold/minimal/co sang trong phai theo theme). */
.cv2-section { background: linear-gradient(180deg, var(--vs-surface-alt) 0%, var(--vs-teal-bg) 100%); }

.cv2-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: stretch;
}

/* --- Info card --- */
.cv2-info__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    border-radius: var(--vs-radius);
    /* Gradient theo theme (primary-dark -> navy): khong hardcode #134e4a
       nua — classic navy, bold vang dam, modern/minimal teal-den. */
    background: linear-gradient(160deg, var(--vs-primary-dark) 0%, var(--vs-navy) 75%);
    color: #fff;
    box-shadow: var(--vs-shadow);
}
.cv2-info__card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent);
    pointer-events: none;
}
.cv2-info__company {
    position: relative;
    font-family: var(--vs-font-head);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cv2-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.cv2-info__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: var(--vs-radius-sm);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.cv2-info__item:hover {
    background: rgba(255, 255, 255, .12);
    border-color: color-mix(in srgb, var(--vs-accent) 50%, transparent);
    transform: translateY(-2px);
}
.cv2-info__item--hot { border-color: color-mix(in srgb, var(--vs-accent) 55%, transparent); }
.cv2-info__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    color: var(--vs-accent-on-dark);
    background: color-mix(in srgb, var(--vs-accent) 16%, transparent);
}
.cv2-info__body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 2px;
}
.cv2-info__body span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    word-break: break-word;
}
.cv2-info__body a { color: #fff; text-decoration: none; transition: color .2s ease; }
.cv2-info__item--hot .cv2-info__body a { color: var(--vs-accent-on-dark); }
.cv2-info__body a:hover { color: var(--vs-accent-on-dark); text-decoration: underline; }

.cv2-socials {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    position: relative;
}
.cv2-socials__link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.cv2-socials__link:hover {
    color: #000;
    background: var(--vs-accent-on-dark);
    border-color: var(--vs-accent-on-dark);
    transform: translateY(-2px);
}
.cv2-info__top { display: grid; gap: 12px; margin-bottom: 10px; position: relative; }
.cv2-info__note { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); position: relative; }
.cv2-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; position: relative; }
.cv2-trust__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); color: #fff; white-space: nowrap; }
.cv2-trust__pill i { color: var(--vs-accent-on-dark); font-size: 11px; }
.cv2-map { margin-top: 14px; border-radius: var(--vs-radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.14); aspect-ratio: 16 / 9; background: rgba(255,255,255,.06); }
.cv2-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cv2-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--vs-primary-dark, #0f766e); font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid var(--vs-border); transition: transform .18s ease, background .18s ease, color .18s ease; position: relative; }
.cv2-cta:hover { transform: translateY(-1px); background: var(--vs-accent); color: #fff; border-color: var(--vs-accent); text-decoration: none; }
/* --- Form --- */
.cv2-form-wrap { min-width: 0; }
.cv2-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    box-shadow: var(--vs-shadow);
}
.cv2-form__head { margin-bottom: 2px; }
.cv2-form__title {
    font-family: var(--vs-font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--vs-gray-900);
    margin: 0 0 4px;
}
.cv2-form__subtitle { font-size: 14px; color: var(--vs-muted); margin: 0; }
.cv2-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cv2-field { display: grid; gap: 6px; }
.cv2-field label { font-size: 13px; font-weight: 700; color: var(--vs-gray-900); }
.cv2-req { color: var(--vs-danger, #dc2626); }
.cv2-field input,
.cv2-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--vs-font-body);
    color: var(--vs-text);
    background: #fff;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cv2-field textarea { min-height: 96px; resize: vertical; }
.cv2-field input:focus,
.cv2-field textarea:focus {
    outline: none;
    border-color: var(--vs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-primary) 15%, transparent);
}
.cv2-field input.is-invalid,
.cv2-field textarea.is-invalid { border-color: var(--vs-danger, #dc2626); }
.cv2-field input::placeholder,
.cv2-field textarea::placeholder { color: #94a3b8; }

.cv2-form__error {
    display: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--vs-radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}
.cv2-form__error.is-visible { display: block; animation: vsFadeIn .25s ease; }

.cv2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 13px 24px;
    border: none;
    border-radius: var(--vs-radius-sm);
    background: var(--vs-teal); color: var(--vs-surface, #fff);
    font-family: var(--vs-font-head);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cv2-submit:hover { background: var(--vs-primary-dark); transform: translateY(-1px); box-shadow: var(--vs-shadow); }
.cv2-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

@media (max-width: 991px) {
    .cv2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .cv2-info__card,
    .cv2-form { padding: 20px; }
    .cv2-info__company { font-size: 21px; }
}
@media (max-width: 575px) {
    .cv2-form__row { grid-template-columns: 1fr; }
    .cv2-info__item { padding: 12px; }
    .cv2-info__icon { width: 38px; height: 38px; }
    .cv2-form__title { font-size: 20px; }
}

/* ===== Store Map (universal) ===== */
.store-map-section { background: linear-gradient(180deg, var(--vs-surface-alt) 0%, var(--vs-surface) 100%); }
.store-map-head .store-map-desc { margin: 10px auto 0; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--vs-muted); }
.store-map-stack { display: grid; gap: 16px; }
.store-map-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }
.store-map-meta__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--vs-gray-900); background: var(--vs-surface); border: 1px solid var(--vs-border); padding: 7px 12px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-map-meta__item i { color: var(--vs-accent, var(--vs-teal)); font-size: 12px; flex: none; }
.store-map-meta__item--link { text-decoration: none; }
.store-map-meta__item--link:hover { border-color: var(--vs-accent, var(--vs-teal)); color: var(--vs-accent, var(--vs-teal)); }
.store-map-meta__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--vs-teal); color: #fff; text-decoration: none; border: 1px solid var(--vs-teal); transition: transform .16s ease, background .16s ease; white-space: nowrap; }
.store-map-meta__cta:hover { transform: translateY(-1px); background: var(--vs-primary-dark); border-color: var(--vs-primary-dark); color: #fff; text-decoration: none; }
.store-map-frame--full { border-radius: var(--vs-radius); overflow: hidden; border: 1px solid var(--vs-border); background: var(--vs-surface-alt); box-shadow: var(--vs-shadow-sm); min-height: var(--map-h, 420px); height: var(--map-h, 420px); }
.store-map-frame--full iframe { width: 100%; height: 100%; border: 0; display: block; }
.store-map-frame__placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--vs-muted); }
.store-map-frame__placeholder i { font-size: 28px; color: var(--vs-accent, var(--vs-teal)); opacity: .9; }
.store-map-frame__placeholder-title { font-size: 14px; font-weight: 700; color: var(--vs-gray-900); }
.store-map-frame__placeholder-text { font-size: 12px; line-height: 1.6; max-width: 520px; }
.store-map-frame__placeholder code { background: var(--vs-surface); border: 1px solid var(--vs-border); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.store-map-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--vs-teal); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid var(--vs-teal); transition: transform .18s ease, background .18s ease; }
.store-map-card__cta:hover { transform: translateY(-1px); background: var(--vs-primary-dark); border-color: var(--vs-primary-dark); color: #fff; text-decoration: none; }
@media (max-width: 575px) { .store-map-meta { justify-content: flex-start; } .store-map-meta__item { font-size: 12px; padding: 6px 10px; } .store-map-frame--full { min-height: 320px; height: 320px; } }

/* ===== Reviews (mock) ===== */
.reviews-section { background: linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-surface-alt) 100%); }
.reviews-desc { margin: 8px auto 0; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--vs-muted); text-align: center; }
.reviews-empty { text-align: center; padding: 28px 16px; border: 1px dashed var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface-alt); color: var(--vs-muted); }
.reviews-empty i { font-size: 22px; color: var(--vs-accent, var(--vs-teal)); display: block; margin-bottom: 8px; }
.reviews-empty code { background: var(--vs-surface); border: 1px solid var(--vs-border); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.reviews-slider { display: grid; gap: 14px; }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review-card { scroll-snap-align: start; min-width: 0; }
.reviews-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.reviews-nav__btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--vs-border); background: var(--vs-surface); color: var(--vs-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.reviews-nav__btn:hover:not([disabled]) { background: var(--vs-teal); border-color: var(--vs-teal); color: #fff; transform: translateY(-1px); }
.reviews-nav__btn[disabled] { opacity: .4; cursor: not-allowed; }
.reviews-dots { display: flex; gap: 8px; align-items: center; }
.reviews-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--vs-border); background: var(--vs-surface-alt); padding: 0; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.reviews-dot.is-active { background: var(--vs-accent, var(--vs-teal)); border-color: var(--vs-accent, var(--vs-teal)); transform: scale(1.25); }
.review-card { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-sm); padding: 16px; display: grid; gap: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.review-card:hover { transform: translateY(-2px); box-shadow: var(--vs-shadow); border-color: color-mix(in srgb, var(--vs-accent, var(--vs-teal)) 28%, var(--vs-border)); }
.review-card__top { display: flex; gap: 12px; align-items: flex-start; }
.review-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--vs-accent, var(--vs-teal)) 18%, #fff), color-mix(in srgb, var(--vs-accent, var(--vs-teal)) 8%, var(--vs-surface-alt))); border: 1px solid var(--vs-border); font-weight: 800; color: var(--vs-gray-900); }
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card__avatar--female { background: linear-gradient(135deg, #ffe4e6, #ffedd5); }
.review-card__meta { min-width: 0; flex: 1; display: grid; gap: 4px; }
.review-card__name { font-size: 13px; font-weight: 700; color: var(--vs-gray-900); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.review-card__gender { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--vs-surface-alt); border: 1px solid var(--vs-border); color: var(--vs-muted); }
.review-card__address { font-size: 11px; color: var(--vs-muted); display: flex; gap: 6px; align-items: center; }
.review-card__address i { color: var(--vs-accent, var(--vs-teal)); font-size: 11px; }
.review-card__stars { color: #f59e0b; font-size: 11px; letter-spacing: 1px; }
.review-card__stars .is-empty { color: #e5e7eb; }
.review-card__content { margin: 0; font-size: 13px; line-height: 1.65; color: var(--vs-text); font-style: italic; }
.review-card__date { font-size: 11px; color: var(--vs-muted); display: flex; gap: 6px; align-items: center; }
@media (max-width: 991px) { .reviews-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 575px) { .reviews-track { grid-auto-columns: 100%; } }

/* ===== Posts ===== */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: var(--vs-radius); overflow: hidden; box-shadow: var(--vs-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-lg); text-decoration: none; color: inherit; }
.post-card img { width: 100%; object-fit: cover; }
.post-content { font-size: 16px; line-height: 1.8; color: var(--vs-text); }
.post-content img { max-width: 100%; border-radius: var(--vs-radius-sm); }
.post-content h2, .post-content h3 { font-family: var(--vs-font-head); color: var(--vs-gray-900); margin: 1.2em 0 .5em; }
.post-content blockquote { border-left: 4px solid var(--vs-teal); background: var(--vs-teal-bg); padding: 10px 16px; border-radius: var(--vs-radius-sm); margin: 1em 0; }
.post-content a { color: var(--vs-teal); }

/* ===== Portal / Account scaffold ===== */
.section-title-area { margin-bottom: 32px; }
.section-title-area .section-title { font-size: 30px; }
.ltn__login-area { padding: 40px 0 70px; }
.account-wrapper { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.account-sidebar { flex: 0 0 280px; max-width: 280px; background: #fff; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 24px; box-shadow: var(--vs-shadow-sm); position: sticky; top: 96px; }
.account-sidebar__user { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--vs-border); margin-bottom: 18px; }
.account-sidebar__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--vs-teal-bg); margin-bottom: 10px; }
.account-sidebar__name { font-size: 17px; font-weight: 700; margin: 0 0 2px; color: var(--vs-gray-900); }
.account-sidebar__email { font-size: 12px; color: var(--vs-muted); word-break: break-all; }
.account-nav { list-style: none; margin: 0; padding: 0; }
.account-nav li { margin-bottom: 6px; }
.account-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--vs-radius-sm); color: var(--vs-text); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.account-nav a i { width: 18px; text-align: center; color: var(--vs-muted); }
.account-nav a:hover { background: var(--vs-teal-bg); color: var(--vs-teal); }
.account-nav a:hover i { color: var(--vs-teal); }
.account-nav li.active a { background: var(--vs-teal); color: #fff; }
.account-nav li.active a i { color: #fff; }
.account-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--vs-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.account-nav li:last-child a:hover { background: #fdecea; color: var(--vs-danger); }
.account-nav li:last-child a:hover i { color: var(--vs-danger); }
.account-content { flex: 1 1 0; min-width: 0; }
.account-card { background: #fff; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 26px; box-shadow: var(--vs-shadow-sm); }
.account-card + .account-card { margin-top: 22px; }
.account-card__title { font-size: 18px; font-weight: 700; margin: 0 0 18px; color: var(--vs-gray-900); padding-bottom: 12px; border-bottom: 1px solid var(--vs-border); }
.account-info__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--vs-border); font-size: 14px; }
.account-info__row:last-child { border-bottom: none; }
.account-info__row span { color: var(--vs-muted); }
.account-info__row strong { color: var(--vs-gray-900); font-weight: 700; text-align: right; }
.account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--vs-radius-sm); font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.account-btn:hover { transform: translateY(-1px); text-decoration: none; }
.account-btn--primary { background: var(--vs-teal); color: #fff; }
.account-btn--primary:hover { background: var(--vs-primary-dark); color: #fff; }
.account-btn--outline { background: #fff; color: var(--vs-teal); border-color: var(--vs-teal); }
.account-btn--outline:hover { background: var(--vs-teal); color: #fff; }
.account-btn--danger { background: #fff; color: var(--vs-danger); border-color: var(--vs-danger); }
.account-btn--danger:hover { background: var(--vs-danger); color: #fff; }
.account-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ===== Utility ===== */
.text-center { text-align: center; }
.text-right, .text-end { text-align: right; }
.text-muted { color: var(--vs-muted) !important; }
.d-none { display: none !important; }
.d-inline { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }
.pb-65 { padding-bottom: 65px !important; }
.m-0 { margin: 0 !important; }
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--vs-border); text-align: left; }
.table thead th { background: var(--vs-surface-alt); font-weight: 700; color: var(--vs-gray-900); }

/* ===== Footer ===== */
.vs-footer { flex-shrink: 0; background: var(--vs-gray-900); color: #cbd5e1; margin-top: 0; }
.vs-footer__newsletter {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 20px;
}
.vs-footer__grid {
    display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 48px 20px 32px;
    max-width: 1200px;
    margin-inline: auto;
}
.vs-footer__about p { font-size: 14px; line-height: 1.7; margin: 16px 0; color: #94a3b8; }
.vs-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.vs-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.vs-footer__contact i { color: var(--vs-accent-on-dark); margin-top: 3px; }
.vs-footer__contact a { color: #cbd5e1; }
.vs-footer__contact a:hover { color: var(--vs-heading, #fff); }
.vs-brand--footer .vs-brand__text { color: #fff; }
.vs-footer__col h4 { color: var(--vs-heading, #fff); font-size: 16px; margin: 0 0 16px; }
.vs-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-footer__col a { color: #94a3b8; font-size: 14px; transition: color .2s ease; }
.vs-footer__col a:hover { color: var(--vs-accent-on-dark); }
.vs-footer__col .vs-social { display: flex; flex-wrap: wrap; gap: 10px; }
.vs-social a,
.vs-social__item {
    width: 40px;
    height: 40px;
    border-radius: var(--vs-radius-sm);
    border: 1px solid #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vs-social__item { cursor: default; }
.vs-social a:hover { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }
.vs-footer__bottom { border-top: 1px solid #1e293b; padding: 18px 0; }
.vs-footer__bottom p { margin: 0; font-size: 13px; color: #64748b; }
.vs-footer__bottom .vs-container { max-width: 1200px; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .hero h1 { font-size: 40px; }
}

@media (max-width: 991px) {
    .vs-header__inner { flex-wrap: wrap; padding: 12px 20px; gap: 12px; }
    .vs-nav-toggle { display: flex; }
    .vs-nav { flex: 1 1 100%; order: 3; display: none; }
    .vs-nav.is-open { display: block; }
    .vs-menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .vs-menu a { width: 100%; }
    .vs-header__actions { margin-left: auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero { padding: 56px 0 56px; }
    .hero h1 { font-size: 34px; }
    .features-grid, .benefits-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .solution-content { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .account-sidebar { flex: 1 1 100%; max-width: 100%; position: static; }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 56px 0; }
    .section-title { font-size: 30px; }
}

@media (max-width: 991px) {
    .vs-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .hero-stats { grid-template-columns: 1fr; }
    .features-grid, .benefits-grid, .pricing-grid, .posts-grid { grid-template-columns: 1fr; }
    .contact-form .row-2 { grid-template-columns: 1fr; }
    .vs-footer__grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 24px; }
    .timeline-step { padding-left: 58px; }
}

@media (max-width: 575px) {
    .vs-header__actions .vs-btn { font-size: 12px; padding: 8px 12px; }
    .hero h1 { font-size: 28px; }
    .section-title { font-size: 26px; }
    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-lg { width: 100%; }
    .solutions-tabs button, .screens-tabs button { width: 100%; }
}

/* ============================================================
   SLIDER / HERO CAROUSEL (Phase 1)
   ============================================================ */
.vs-slider {
    position: relative;
    overflow: hidden;
    background: var(--vs-navy);
    color: #fff;
}
.vs-slider__viewport {
    position: relative;
    width: 100%;
    min-height: var(--vs-slide-height, 560px);
}
.vs-slider__track {
    position: relative;
    width: 100%;
    min-height: var(--vs-slide-height, 560px);
}
.vs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-in-out, transform .8s ease-in-out;
    transform: scale(1.04);
    z-index: 1;
}
.vs-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}
.vs-slide__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.vs-slide__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 6s ease-out;
}
.vs-slide.is-active .vs-slide__bg img {
    transform: scale(1);
}
.vs-slide__bg--placeholder {
    background: linear-gradient(135deg, var(--vs-teal) 0%, var(--vs-primary-dark) 100%);
}
.vs-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, .78) 0%, rgba(15, 23, 42, .55) 50%, rgba(15, 23, 42, .35) 100%);
}
.vs-slide__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    color: #fff;
}
.vs-slide__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--vs-accent-on-dark) 20%, transparent);
    color: var(--vs-accent-on-dark);
    border: 1px solid color-mix(in srgb, var(--vs-accent-on-dark) 45%, transparent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease .2s, transform .8s ease .2s;
}
.vs-slide.is-active .vs-slide__eyebrow {
    opacity: 1;
    transform: translateY(0);
}
.vs-slide__title {
    font-family: var(--vs-font-head);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease .35s, transform .8s ease .35s;
}
.vs-slide.is-active .vs-slide__title {
    opacity: 1;
    transform: translateY(0);
}
.vs-slide__title b { color: var(--vs-accent-on-dark); font-weight: inherit; }
.vs-slide__desc {
    font-size: 18px;
    line-height: 1.65;
    color: #e2e8f0;
    margin: 0 0 32px;
    max-width: 620px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease .5s, transform .8s ease .5s;
}
.vs-slide.is-active .vs-slide__desc {
    opacity: 1;
    transform: translateY(0);
}
.vs-slide__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease .65s, transform .8s ease .65s;
}
.vs-slide.is-active .vs-slide__cta {
    opacity: 1;
    transform: translateY(0);
}
.vs-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(15, 23, 42, .4);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vs-slider__arrow:hover {
    background: var(--vs-accent);
    border-color: var(--vs-accent);
    transform: translateY(-50%) scale(1.08);
}
.vs-slider__arrow:focus-visible {
    outline: 2px solid var(--vs-accent);
    outline-offset: 3px;
}
.vs-slider__arrow--prev { left: 24px; }
.vs-slider__arrow--next { right: 24px; }
.vs-slider__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}
.vs-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vs-slider__dot:hover {
    border-color: #fff;
    transform: scale(1.15);
}
.vs-slider__dot.is-active {
    background: var(--vs-accent-on-dark);
    border-color: var(--vs-accent-on-dark);
    transform: scale(1.25);
}
.vs-slider__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* Slider responsive */
@media (max-width: 1200px) {
    .vs-slide__title { font-size: 46px; }
}
@media (max-width: 991px) {
    .vs-slider__viewport,
    .vs-slider__track { min-height: 460px; }
    .vs-slide__title { font-size: 36px; }
    .vs-slide__desc { font-size: 16px; }
    .vs-slider__arrow { width: 42px; height: 42px; }
    .vs-slider__arrow--prev { left: 12px; }
    .vs-slider__arrow--next { right: 12px; }
}
@media (max-width: 767px) {
    .vs-slider__viewport,
    .vs-slider__track { min-height: 420px; }
    .vs-slide__title { font-size: 28px; }
    .vs-slide__desc { font-size: 15px; margin-bottom: 22px; }
    .vs-slide__cta { gap: 10px; }
    .vs-slider__arrow { width: 38px; height: 38px; font-size: 14px; }
    .vs-slider__dots { bottom: 14px; gap: 8px; }
    .vs-slider__dot { width: 10px; height: 10px; }
}
@media (max-width: 575px) {
    .vs-slider__viewport,
    .vs-slider__track { min-height: 380px; }
    .vs-slide__title { font-size: 24px; }
    .vs-slide__desc { font-size: 14px; }
    .vs-slide__cta .vs-btn { width: 100%; justify-content: center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vs-slide,
    .vs-slide__bg img,
    .vs-slide__eyebrow,
    .vs-slide__title,
    .vs-slide__desc,
    .vs-slide__cta {
        transition: none !important;
        transform: none !important;
    }
}
/* ============================================================
   PRODUCT CATEGORIES (Phase 2) - horizontal slide scroller
   ============================================================ */
.vs-cat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cat-cols, 4), minmax(0, 1fr));
    gap: 24px;
}
/* Slide ngang: track cuộn ngang, mỗi card co giãn theo --cat-cols */
.vs-cat-scroller {
    position: relative;
}
.vs-cat-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.vs-cat-track::-webkit-scrollbar { display: none; }
.vs-cat-track .vs-cat-card {
    flex: 0 0 calc((100% - (var(--cat-cols, 4) - 1) * 16px) / var(--cat-cols, 4));
    min-width: 0;
    scroll-snap-align: start;
}
.vs-cat-track .vs-cat-card:hover { transform: translateY(-4px); }
.vs-cat-nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
.vs-cat-nav__btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vs-border);
    border-radius: 999px;
    background: var(--vs-surface);
    color: var(--vs-text);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vs-cat-nav__btn:hover {
    color: #fff;
    background: var(--vs-primary);
    border-color: var(--vs-primary);
    transform: translateY(-1px);
}
.vs-cat-nav__btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.vs-cat-card {
    position: relative;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}
.vs-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vs-shadow-lg);
    border-color: var(--vs-accent);
}
.vs-cat-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--vs-surface-alt);
}
.vs-cat-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.vs-cat-card:hover .vs-cat-card__media img { transform: scale(1.06); }
.vs-cat-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px;
}
.vs-cat-card__title {
    font-family: var(--vs-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--vs-gray-900);
    margin: 0;
}
.vs-cat-card__desc {
    color: var(--vs-muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vs-cat-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vs-teal);
    font-weight: 600;
    font-size: 13px;
    transition: gap .2s ease, color .2s ease;
}
.vs-cat-card__link:hover { gap: 10px; color: var(--vs-primary-dark); }
.vs-cat-card__count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, .75);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
@media (max-width: 1200px) { .vs-cat-grid { grid-template-columns: repeat(min(var(--cat-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 991px) { .vs-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vs-cat-grid { gap: 16px; } }
@media (max-width: 575px) {
    .vs-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .vs-cat-card__body { padding: 10px 12px 12px; }
    .vs-cat-card__title { font-size: 14px; }
    .vs-cat-card__desc { display: none; }
}
/* Responsive cho che do slide ngang */
.vs-cat-track { --cat-cols: var(--cat-cols, 4); }
@media (max-width: 1200px) { .vs-cat-track .vs-cat-card { flex-basis: calc((100% - (min(var(--cat-cols, 4), 3) - 1) * 16px) / min(var(--cat-cols, 4), 3)); } }
@media (max-width: 991px) { .vs-cat-track .vs-cat-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 767px) { .vs-cat-track { gap: 12px; } }
@media (max-width: 575px) {
    .vs-cat-track .vs-cat-card { flex-basis: calc((100% - 12px) / 2); }
    .vs-cat-track .vs-cat-card__body { padding: 10px 12px 12px; }
    .vs-cat-track .vs-cat-card__title { font-size: 14px; }
    .vs-cat-track .vs-cat-card__desc { display: none; }
}

/* No-image fallback dung chung cho danh muc va san pham */
.vs-cat-card__placeholder,
.vs-product-card__placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94a3b8;
    background: var(--vs-surface-alt);
}
.vs-cat-card__placeholder i,
.vs-product-card__placeholder i { font-size: 40px; opacity: .8; }
.vs-cat-card__placeholder span,
.vs-product-card__placeholder span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--vs-muted);
}
/* ============================================================
   FEATURED PRODUCTS (Phase 3)
   ============================================================ */
.vs-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.vs-product-card {
    position: relative;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}
.vs-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vs-shadow-lg);
    border-color: var(--vs-accent);
}
.vs-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--vs-surface-alt);
}
.vs-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.vs-product-card:hover .vs-product-card__media img { transform: scale(1.08); }
.vs-product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--vs-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .3px;
}
.vs-product-card__body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.vs-product-card__cat {
    font-size: 12px;
    color: var(--vs-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.vs-product-card__title {
    font-family: var(--vs-font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--vs-gray-900);
    margin: 0 0 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}
.vs-product-card__desc {
    color: var(--vs-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vs-product-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}
.vs-product-card__price-current {
    font-family: var(--vs-font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--vs-primary-dark);
}
.vs-product-card__price-old {
    font-size: 14px;
    color: var(--vs-muted);
    text-decoration: line-through;
}
.vs-product-card__cta {
    display: flex;
    gap: 8px;
}
.vs-product-card__cta .vs-btn { flex: 1; justify-content: center; }
@media (max-width: 1200px) { .vs-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .vs-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .vs-product-grid { grid-template-columns: 1fr; } }
/* Badge Hot + bien the gia trong card san pham */
.vs-product-card__badge--hot { background: var(--vs-warning); }
.vs-product-card__price .price-current,
.vs-product-card__price .price-sale {
    font-family: var(--vs-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--vs-primary-dark);
}
.vs-product-card__price .price-sale { color: var(--vs-danger); }
.vs-product-card__price .price-old {
    font-size: 14px;
    color: var(--vs-muted);
    text-decoration: line-through;
}
.vs-empty-state {
    margin: 0;
    text-align: center;
    padding: 32px 16px;
    color: var(--vs-muted);
    font-size: 15px;
}
/* ============================================================
   ABOUT SECTION (Phase 4)
   ============================================================ */
.vs-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.vs-about-grid--image-right .vs-about-media { order: 1; }
.vs-about-media {
    position: relative;
    border-radius: var(--vs-radius);
    overflow: hidden;
    box-shadow: var(--vs-shadow-lg);
    aspect-ratio: 4 / 3;
    background: var(--vs-surface-alt);
}
.vs-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-about-media__placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, var(--vs-surface-alt) 0%, var(--vs-bg-soft) 100%);
    color: var(--vs-muted); border: 2px dashed var(--vs-border);
}
.vs-about-media__placeholder i { font-size: 40px; opacity: .7; }
.vs-about-media__placeholder span { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.vs-about-media__edit {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: none; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9);
    background: rgba(15,23,42,.78); color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer; backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease;
}
.vs-about-media:hover .vs-about-media__edit,
.vs-about-media:focus-within .vs-about-media__edit { display: inline-flex; }
.vs-about-media__edit:hover { background: var(--vs-primary, #0f766e); border-color: var(--vs-primary, #0f766e); transform: translateY(-1px); }
.vb-enabled .vs-about-media .vs-about-media__edit { display: inline-flex; }
.vs-about-media__badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: var(--vs-surface);
    border-radius: var(--vs-radius);
    padding: 14px 18px;
    box-shadow: var(--vs-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}
.vs-about-media__badge-num {
    font-family: var(--vs-font-head);
    font-size: 28px;
    font-weight: 700;
    color: var(--vs-primary-dark);
}
.vs-about-media__badge-text {
    font-size: 13px;
    color: var(--vs-muted);
    line-height: 1.4;
}
.vs-about-content h2 { font-size: 36px; margin-bottom: 16px; }
.vs-about-content .vs-about-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--vs-text);
    margin-bottom: 24px;
}
.vs-about-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 14px;
}
.vs-about-content ul li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--vs-text);
}
.vs-about-content ul li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vs-teal-bg);
    color: var(--vs-teal);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}
.vs-about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--vs-border);
}
.vs-about-stat { text-align: center; }
.vs-about-stat__num {
    font-family: var(--vs-font-head);
    font-size: 36px;
    font-weight: 700;
    color: var(--vs-primary-dark);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}
.vs-about-stat__label {
    font-size: 13px;
    color: var(--vs-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
@media (max-width: 991px) {
    .vs-about-grid { grid-template-columns: 1fr; gap: 36px; }
    .vs-about-content h2 { font-size: 30px; }
    .vs-about-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 575px) {
    .vs-about-stats { grid-template-columns: repeat(2, 1fr); }
    .vs-about-stat__num { font-size: 28px; }
}

/* ============================================================
   CONTACT FORM + MAP (Phase 5)
   ============================================================ */
.vs-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: stretch;
}
.vs-contact-info {
    background: linear-gradient(135deg, var(--vs-teal) 0%, var(--vs-primary-dark) 100%);
    color: #fff;
    border-radius: var(--vs-radius);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.vs-contact-info h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 4px;
}
.vs-contact-info p {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.vs-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}
.vs-contact-info li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: #fff;
    font-size: 14px;
}
.vs-contact-info li .icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--vs-radius-sm);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vs-contact-info li strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}
.vs-contact-info li span { color: rgba(255, 255, 255, .85); }
.vs-contact-form {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 32px;
    box-shadow: var(--vs-shadow-sm);
}
.vs-contact-form h3 { font-size: 22px; margin-bottom: 20px; }
.vs-contact-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.vs-contact-form .form-group { margin-bottom: 14px; }
.vs-contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-gray-900);
    margin-bottom: 6px;
}
.vs-contact-form input,
.vs-contact-form textarea,
.vs-contact-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--vs-text);
    background: var(--vs-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vs-contact-form input:focus,
.vs-contact-form textarea:focus,
.vs-contact-form select:focus {
    outline: none;
    border-color: var(--vs-teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.vs-contact-form textarea { resize: vertical; min-height: 120px; }
.vs-contact-form button[type=submit] {
    width: 100%;
    padding: 12px 20px;
    background: var(--vs-teal); color: var(--vs-surface, #fff);
    border: none;
    border-radius: var(--vs-radius-sm);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.vs-contact-form button[type=submit]:hover {
    background: var(--vs-primary-dark);
    transform: translateY(-1px);
}
.vs-contact-form button[type=submit]:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}
.vs-contact-map {
    margin-top: 24px;
    border-radius: var(--vs-radius);
    overflow: hidden;
    box-shadow: var(--vs-shadow);
    aspect-ratio: 21 / 9;
    background: var(--vs-surface-alt);
}
.vs-contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 991px) {
    .vs-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .vs-contact-form .row-2 { grid-template-columns: 1fr; }
    .vs-contact-form, .vs-contact-info { padding: 24px 20px; }
}
/* ============================================================
   SCROLL ANIMATIONS (reusable reveal-on-scroll)
   ============================================================ */
.vs-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
}
.vs-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.vs-reveal[data-delay="100"] { transition-delay: .1s; }
.vs-reveal[data-delay="200"] { transition-delay: .2s; }
.vs-reveal[data-delay="300"] { transition-delay: .3s; }
.vs-reveal[data-delay="400"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
    .vs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NEWSLETTER FOOTER (Phase 6)
   ============================================================ */
.vs-newsletter {
    background: linear-gradient(135deg, color-mix(in srgb, var(--vs-primary) 9%, transparent) 0%, color-mix(in srgb, var(--vs-primary) 3%, transparent) 100%);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 28px;
}
.vs-newsletter__text h4 {
    font-size: 18px;
    margin: 0 0 6px;
    color: #ffffff;
}
.vs-newsletter__text p {
    font-size: 14px;
    color: #ffffff;
    opacity: .8;
    margin: 0;
}
.vs-newsletter__form {
    display: flex;
    gap: 8px;
}
.vs-newsletter__form input {
    padding: 10px 16px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    font-size: 14px;
    min-width: 260px;
    background: var(--vs-surface);
}
.vs-newsletter__form input:focus {
    outline: none;
    border-color: var(--vs-teal);
}
.vs-newsletter__form button {
    padding: 10px 20px;
    background: var(--vs-teal); color: var(--vs-surface, #fff);
    border: none;
    border-radius: var(--vs-radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease;
}
.vs-newsletter__form button:hover { background: var(--vs-primary-dark); }
@media (max-width: 767px) {
    .vs-newsletter { grid-template-columns: 1fr; padding: 22px; }
    .vs-newsletter__form { flex-direction: column; }
    .vs-newsletter__form input { min-width: 0; }
}


/* sr-only utility (accessibility) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



/* Button size variants (shared utility) */
.vs-btn--sm { padding: 8px 14px; font-size: 13px; }
.vs-btn--lg { padding: 14px 26px; font-size: 16px; }
.vs-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--vs-radius-sm);
    font-weight: 600; font-size: 14px;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
    border: 1px solid transparent; cursor: pointer;
}
.vs-btn--primary { background: var(--vs-teal); color: var(--vs-surface, #fff); }
.vs-btn--primary:hover { background: var(--vs-primary-dark); color: #fff; transform: translateY(-1px); }
/* Ghost trang cho nen toi: CHI ap dung trong slider (hero anh toi).
   Truoc day 2 rule nay de GLOBAL -> icon gio hang + nut Dang nhap/Tai khoan
   o header trang bien mau trang tren nen trang (vo hinh). */
.vs-slider .vs-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.vs-slider .vs-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
/* (rule .vs-slider .vs-btn--ghost cu da gop vao 2 rule ngay tren) */


/* === Pagination tieng Viet (vs-pagination) ============================== */
.vs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vs-pagination__pages {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vs-pagination__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--vs-border);
    background: var(--vs-surface);
    color: var(--vs-text);
    border-radius: var(--vs-radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
    user-select: none;
}
.vs-pagination__item:hover:not(.vs-pagination__item--active):not(.vs-pagination__item--disabled) {
    border-color: var(--vs-primary);
    color: var(--vs-primary);
    background: color-mix(in srgb, var(--vs-primary) 6%, var(--vs-surface));
}
.vs-pagination__item:focus-visible {
    outline: 2px solid var(--vs-primary);
    outline-offset: 2px;
}
.vs-pagination__item--active {
    background: var(--vs-primary);
    border-color: var(--vs-primary);
    color: #fff;
    cursor: default;
}
.vs-pagination__item--disabled {
    background: var(--vs-bg-soft);
    color: var(--vs-muted);
    border-color: var(--vs-border);
    cursor: not-allowed;
    opacity: .65;
}
.vs-pagination__item--dots {
    background: transparent;
    border-color: transparent;
    color: var(--vs-muted);
    cursor: default;
    min-width: 32px;
    padding: 0 4px;
}
.vs-pagination__label {
    font-weight: 600;
}
.vs-pagination__item i {
    font-size: 12px;
    line-height: 1;
}
.vs-pagination__info {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    color: var(--vs-muted);
    font-size: 13px;
    font-weight: 500;
    background: var(--vs-bg-soft);
    border-radius: var(--vs-radius-md);
    white-space: nowrap;
}

@media (max-width: 575px) {
    .vs-pagination__item {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
    .vs-pagination__info {
        height: 36px;
        font-size: 12px;
        padding: 0 10px;
    }
    .vs-pagination__label {
        display: none;
    }
}

/* ============================================================
   Mini cart (dropdown trên header client)
   ============================================================ */
.vs-minicart { position: relative; display: inline-flex; }
.vs-minicart__toggle { position: relative; }
.vs-minicart__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--vs-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}
.vs-minicart__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm);
    box-shadow: var(--vs-shadow-lg);
    z-index: 1000;
}
.vs-minicart__panel[hidden] { display: none; }
.vs-minicart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vs-border);
    font-family: var(--vs-font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--vs-gray-900);
}
.vs-minicart__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vs-muted);
    padding: 4px 8px;
    font-size: 14px;
    transition: color .2s ease;
}
.vs-minicart__close:hover { color: var(--vs-danger); }
.vs-minicart__body { max-height: 320px; overflow-y: auto; }
.vs-minicart__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vs-border);
    align-items: center;
}
.vs-minicart__item-thumb {
    width: 56px;
    height: 56px;
    background: var(--vs-bg-soft);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vs-minicart__item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vs-minicart__item-thumb .fa-box { color: var(--vs-border); font-size: 18px; }
.vs-minicart__item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--vs-text);
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.vs-minicart__item-name:hover { color: var(--vs-primary); }
.vs-minicart__item-meta { font-size: 12px; color: var(--vs-muted); margin-top: 2px; }
.vs-minicart__item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vs-minicart__item-price { font-weight: 700; color: var(--vs-primary); font-size: 13px; white-space: nowrap; }
.vs-minicart__item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vs-muted);
    font-size: 12px;
    padding: 2px 4px;
    transition: color .2s ease;
}
.vs-minicart__item-remove:hover { color: var(--vs-danger); }
.vs-minicart__item-remove[disabled] { opacity: .5; cursor: default; }
.vs-minicart__empty { padding: 32px 16px; text-align: center; color: var(--vs-muted); }
.vs-minicart__empty i { display: block; font-size: 32px; color: var(--vs-border); margin-bottom: 8px; }
.vs-minicart__body--guest { padding: 24px 16px; text-align: center; color: var(--vs-muted); }
.vs-minicart__body--guest a { color: var(--vs-primary); font-weight: 600; }
.vs-minicart__foot { border-top: 1px solid var(--vs-border); padding: 12px 16px 16px; }
.vs-minicart__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}
.vs-minicart__subtotal strong { font-size: 17px; color: var(--vs-primary); }
.vs-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs-minicart__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    transition: all .2s ease;
}
@media (max-width: 575px) {
    .vs-minicart__panel {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
    }
    .vs-minicart__actions { grid-template-columns: 1fr; }
}

/* ============================================================
   Nút "Thêm vào giỏ" trên product card (overlay + row)
   ============================================================ */
.vs-cart-add {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--vs-primary); color: var(--vs-surface, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--vs-shadow);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.vs-product-card:hover .vs-cart-add,
.vs-cart-add:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.vs-cart-add:hover { background: var(--vs-primary-dark); }
.vs-cart-add[disabled] { opacity: .4 !important; cursor: not-allowed; }
.vs-cart-add--row {
    position: static;
    width: auto;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    opacity: 1;
    transform: none;
    align-self: flex-start;
    margin-top: auto;
    transition: background-color .2s ease, transform .2s ease;
}
.vs-cart-add--row:hover { transform: translateY(-1px); }
@media (max-width: 767px) {
    .vs-cart-add { opacity: 1; transform: none; }
}

/* ============================================================
   Nút yêu thích (wishlist) trên product card + link header
   ============================================================ */
.vs-wishlist-add {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--vs-surface);
    color: var(--vs-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--vs-shadow);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, color .2s ease, background-color .2s ease;
}
.vs-product-card:hover .vs-wishlist-add,
.vs-wishlist-add:focus-visible,
.vs-wishlist-add.is-active {
    opacity: 1;
    transform: translateY(0);
}
.vs-wishlist-add:hover { color: #e11d48; }
.vs-wishlist-add.is-active { color: #e11d48; }
.vs-wishlist-add[disabled] { opacity: .4 !important; cursor: not-allowed; }
.vs-wishlist-link { position: relative; }
.vs-wishlist-add--detail {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    cursor: pointer;
}
.vs-wishlist-add--detail.is-active { border-color: #e11d48; }
@media (max-width: 767px) {
    .vs-wishlist-add { opacity: 1; transform: none; }
}
.store-branches-section{ background: linear-gradient(180deg, var(--vs-surface-alt) 0%, var(--vs-surface) 100%); }
.sb-head .sb-desc{ margin:10px auto 0; max-width:640px; font-size:14px; line-height:1.7; color:var(--vs-muted); text-align:center; }
.sb-grid{ display:grid; grid-template-columns: 380px 1fr; gap:18px; align-items:stretch; }
.sb-list-wrap{ display:flex; flex-direction:column; min-width:0; background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:var(--vs-radius); box-shadow:var(--vs-shadow-sm); overflow:hidden; height: var(--sb-h); }
.sb-list{ flex:1 1 auto; overflow:auto; display:grid; gap:10px; padding:14px; align-content:start; scrollbar-width:thin; scrollbar-color: var(--vs-border) transparent; }
.sb-list::-webkit-scrollbar{ width:6px; } .sb-list::-webkit-scrollbar-thumb{ background:var(--vs-border); border-radius:999px; }
.sb-list:focus-visible{ outline:2px solid var(--vs-teal); outline-offset:-2px; }
.sb-item{ text-align:left; width:100%; display:grid; gap:7px; padding:14px; border-radius:12px; border:1px solid var(--vs-border); background:var(--vs-surface); cursor:pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
.sb-item:hover{ border-color: color-mix(in srgb, var(--vs-teal) 28%, var(--vs-border)); transform: translateY(-1px); box-shadow: var(--vs-shadow-sm); }
.sb-item:focus-visible{ outline:2px solid var(--vs-teal); outline-offset:2px; }
.sb-item.is-active{ border-color: var(--vs-teal); background: color-mix(in srgb, var(--vs-teal) 7%, var(--vs-surface)); box-shadow: 0 8px 20px rgba(15,118,110,.10); }
.sb-item__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sb-item__name{ font-size:14px; font-weight:800; color:var(--vs-gray-900); line-height:1.35; }
.sb-item__badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:var(--vs-teal); color:#fff; }
.sb-item__row{ font-size:13px; color:var(--vs-text); line-height:1.55; display:flex; gap:7px; align-items:flex-start; }
.sb-item__row i{ color:var(--vs-teal); margin-top:3px; font-size:12px; flex:none; }
.sb-item__meta{ display:flex; flex-wrap:wrap; gap:6px; }
.sb-item__pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; background:var(--vs-surface-alt); border:1px solid var(--vs-border); color:var(--vs-text); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.sb-item__pill i{ color:var(--vs-teal); font-size:11px; flex:none; }
.sb-item__pill--link{ text-decoration:none; } .sb-item__pill--link:hover{ border-color:var(--vs-teal); color:var(--vs-teal); }
.sb-item__go a{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; background:var(--vs-teal); color:#fff; text-decoration:none; border:1px solid var(--vs-teal); transition: transform .16s ease, background .16s ease; }
.sb-item__go a:hover{ transform: translateY(-1px); background:var(--vs-primary-dark); border-color:var(--vs-primary-dark); }
.sb-list__count{ padding:10px 14px; border-top:1px solid var(--vs-border); font-size:12px; font-weight:600; color:var(--vs-muted); background:var(--vs-surface-alt); }
.sb-map-wrap{ position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; border-radius:var(--vs-radius); overflow:hidden; border:1px solid var(--vs-border); background:var(--vs-surface-alt); box-shadow:var(--vs-shadow-sm); height: var(--sb-h); }
.sb-map{ flex:1 1 auto; min-height: 260px; background:var(--vs-surface-alt); }
.sb-map--iframe{ flex:1 1 auto; }
.sb-map--iframe iframe{ width:100%; height:100%; border:0; display:block; }
.sb-detail{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px; background:var(--vs-surface); border-top:1px solid var(--vs-border); }
.sb-detail__name{ font-size:14px; font-weight:800; color:var(--vs-gray-900); }
.sb-detail__addr{ font-size:12px; color:var(--vs-muted); display:flex; gap:6px; align-items:center; }
.sb-detail__addr i{ color:var(--vs-teal); }
.sb-detail__actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sb-detail__actions a{ font-size:12px; font-weight:700; display:inline-flex; gap:6px; align-items:center; padding:7px 12px; border-radius:999px; border:1px solid var(--vs-border); background:var(--vs-surface); color:var(--vs-text); text-decoration:none; }
.sb-detail__go{ background:var(--vs-teal) !important; color:#fff !important; border-color:var(--vs-teal) !important; }
.sb-pin{ width:36px; height:36px; border-radius:50% 50% 50% 0; transform: rotate(-45deg); background:var(--vs-surface); border:2px solid var(--vs-teal); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(15,23,42,.18); transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.sb-pin i{ transform: rotate(45deg); color:var(--vs-teal); font-size:14px; }
.sb-pin.is-active{ background:var(--vs-teal); border-color:var(--vs-teal); transform: rotate(-45deg) scale(1.08); }
.sb-pin.is-active i{ color:#fff; }
.sb-pin-wrap{ background:transparent !important; border:none !important; }
@media (max-width: 991px){
    .sb-grid{ grid-template-columns:1fr; }
    .sb-list-wrap{ height:auto; max-height: 420px; }
    .sb-map-wrap{ height: 460px; }
    .sb-detail__actions{ margin-left:0; width:100%; }
}
@media (max-width: 575px){
    .sb-list{ padding:10px; }
    .sb-item{ padding:12px; }
    .sb-map-wrap{ height: 380px; }
}