/* NHA PHUONG BUNDLED CSS - AUTO-GENERATED */

/* --- Start variables.css --- */
/* ==========================================================================
   NHA PHUONG THEME - CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Chuẩn theo thiết kế Figma "Nha Phuong - Website Redesign" (Node 99:2)
   Tuân thủ Điều 12 & 13 trong rule_phat_trien_du_an_bang_base.md
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. BRAND COLORS (Màu sắc thương hiệu Nhã Phương)
       ---------------------------------------------------------------------- */
    /* Primary Red: Màu đỏ thương hiệu chủ đạo */
    --color-primary: #C41230;
    --color-primary-dark: #9E0E26;
    --color-primary-darker: #7E0A1E;
    --color-primary-light: #DE2B49;
    --color-primary-soft: #FDE8EB;
    --color-primary-subtle: #FFF1F3;

    /* Semantic Primary Aliases */
    --nhaphuong-primary: var(--color-primary);
    --nhaphuong-primary-dark: var(--color-primary-dark);
    --nhaphuong-primary-darker: var(--color-primary-darker);
    --nhaphuong-primary-light: var(--color-primary-light);
    --nhaphuong-primary-soft: var(--color-primary-soft);
    --nhaphuong-primary-subtle: var(--color-primary-subtle);

    /* Backward Compatibility Aliases for Base Components */
    --vtipz-primary: var(--color-primary);
    --vtipz-primary-dark: var(--color-primary-dark);
    --vtipz-primary-light: var(--color-primary-light);

    /* Accent & Gold (Hotline, Rating Stars, Huy hiệu) */
    --color-accent: #C41230;
    --color-accent-hover: #9E0E26;
    --color-gold: #F5BD06;
    --color-gold-dark: #D4A017;
    --nhaphuong-accent: var(--color-accent);
    --nhaphuong-accent-hover: var(--color-accent-hover);
    --nhaphuong-gold: var(--color-gold);
    --vtipz-accent: var(--color-accent);
    --vtipz-accent-hover: var(--color-accent-hover);
    --vtipz-gold: var(--color-gold);

    /* ----------------------------------------------------------------------
       2. NEUTRAL & BACKGROUND COLORS (Nền trắng, xám sáng, thẻ card)
       ---------------------------------------------------------------------- */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F8F9FA;
    --color-bg-soft: #F3F4F6;
    --color-bg-card: #FFFFFF;
    --color-bg-card-hover: #FFFFFF;

    --nhaphuong-bg-white: var(--color-bg-white);
    --nhaphuong-bg-light: var(--color-bg-light);
    --nhaphuong-bg-soft: var(--color-bg-soft);
    --nhaphuong-bg-card: var(--color-bg-card);

    --vtipz-bg-light: var(--color-bg-light);
    --vtipz-bg-soft: var(--color-bg-soft);
    --vtipz-bg-soft-blue: var(--color-primary-soft);
    --vtipz-bg-card: var(--color-bg-card);

    /* ----------------------------------------------------------------------
       3. DARK / NAVY / FOOTER & CONTRAST SECTIONS
       ---------------------------------------------------------------------- */
    --color-dark-navy: #111827;
    --color-footer-bg: #111827;
    --color-footer-surface: #1F2937;
    --color-topbar-bg: #181B1E;
    --color-bg-dark: #111827;

    --nhaphuong-bg-dark: var(--color-dark-navy);
    --nhaphuong-footer-bg: var(--color-footer-bg);
    --vtipz-bg-dark: var(--color-dark-navy);
    --vtipz-dark-navy: var(--color-dark-navy);

    /* ----------------------------------------------------------------------
       4. TEXT COLORS (Màu chữ chuẩn Figma)
       ---------------------------------------------------------------------- */
    --color-text-dark: #111827;
    --color-text-heading: #111827;
    --color-text-body: #374151;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;
    --color-text-white: #FFFFFF;

    --nhaphuong-text-heading: var(--color-text-heading);
    --nhaphuong-text-body: var(--color-text-body);
    --nhaphuong-text-muted: var(--color-text-muted);
    --nhaphuong-text-white: var(--color-text-white);

    --vtipz-text-dark: var(--color-text-dark);
    --vtipz-text-heading: var(--color-text-heading);
    --vtipz-text-body: var(--color-text-body);
    --vtipz-text-muted: var(--color-text-muted);
    --vtipz-text-white: var(--color-text-white);

    /* ----------------------------------------------------------------------
       5. STATUS COLORS
       ---------------------------------------------------------------------- */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    --vtipz-success: var(--color-success);
    --vtipz-warning: var(--color-warning);
    --vtipz-danger: var(--color-danger);

    /* ----------------------------------------------------------------------
       6. BORDERS & SHADOWS
       ---------------------------------------------------------------------- */
    --color-border: #E5E7EB;
    --color-border-light: #F3F4F6;
    --color-border-search: #E5E7EB;
    --color-border-primary: #FCA5A5;

    --nhaphuong-border: var(--color-border);
    --nhaphuong-border-light: var(--color-border-light);
    --vtipz-border: var(--color-border);
    --vtipz-border-light: var(--color-border-light);
    --vtipz-border-search: var(--color-border-search);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 16px rgba(196, 18, 48, 0.28);
    --shadow-primary-hover: 0 6px 20px rgba(196, 18, 48, 0.38);

    --vtipz-shadow-sm: var(--shadow-sm);
    --vtipz-shadow-md: var(--shadow-md);
    --vtipz-shadow-lg: var(--shadow-lg);

    /* ----------------------------------------------------------------------
       7. TYPOGRAPHY (Google Fonts theo Figma)
       ---------------------------------------------------------------------- */
    --font-primary: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --nhaphuong-font: var(--font-primary);
    --vtipz-font: var(--font-primary);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.25;
    --lh-snug: 1.375;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;

    /* ----------------------------------------------------------------------
       8. CONTAINER & SPACING (Max-width 1440px theo chuẩn Desktop Figma)
       ---------------------------------------------------------------------- */
    --nhaphuong-container-max: 1440px;
    --nhaphuong-container: 1320px;
    --nhaphuong-container-wide: 1440px;
    --vtipz-container: 1320px;
    --vtipz-container-wide: 1440px;

    --container-padding: 24px;
    --nhaphuong-section-pad: 56px 0;
    --vtipz-section-pad: 56px 0;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ----------------------------------------------------------------------
       9. BUTTON TOKENS (Nút chính đỏ chữ trắng, nút phụ outline đỏ)
       ---------------------------------------------------------------------- */
    /* Nút chính (Primary) */
    --btn-primary-bg: #C41230;
    --btn-primary-color: #FFFFFF;
    --btn-primary-border: #C41230;
    --btn-primary-hover-bg: #9E0E26;
    --btn-primary-hover-color: #FFFFFF;
    --btn-primary-hover-border: #9E0E26;
    --btn-primary-shadow: 0 4px 14px rgba(196, 18, 48, 0.28);

    /* Nút phụ (Secondary / Outline) */
    --btn-secondary-bg: transparent;
    --btn-secondary-color: #C41230;
    --btn-secondary-border: #C41230;
    --btn-secondary-hover-bg: #C41230;
    --btn-secondary-hover-color: #FFFFFF;
    --btn-secondary-hover-border: #C41230;

    /* Nút nổi bật (Accent / Gold) */
    --btn-accent-bg: #F5BD06;
    --btn-accent-color: #111827;
    --btn-accent-hover-bg: #D4A017;

    /* Quy chuẩn Button chung */
    --btn-radius: 8px;
    --btn-radius-pill: 9999px;
    --btn-padding-sm: 8px 16px;
    --btn-padding-md: 12px 24px;
    --btn-padding-lg: 14px 32px;
    --btn-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius chung cho Thẻ & UI */
    --vtipz-radius-sm: 6px;
    --vtipz-radius-md: 8px;
    --vtipz-radius-lg: 12px;
    --vtipz-radius-xl: 16px;
    --vtipz-radius-circle: 50%;
}


/* --- Start base.css --- */
/* --- Sub-module: Reset & Base Styles, Container & Utilities (Original Lines 101-272) --- */
/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
    font-family: var(--vtipz-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--vtipz-text-body);
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover {
    color: var(--vtipz-primary-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
}

button {
    cursor: pointer;
    background: none;
}

/* ==========================================================================
   CONTAINER & UTILITIES (Figma 1440px Desktop Standard)
   ========================================================================== */
.nhaphuong-container,
.vtipz-container {
    width: 100%;
    max-width: var(--nhaphuong-container, 1320px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 24px);
}

.nhaphuong-container-wide,
.vtipz-container-wide {
    width: 100%;
    max-width: var(--nhaphuong-container-wide, 1440px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 24px);
}

@media (max-width: 576px) {
    .nhaphuong-container,
    .vtipz-container,
    .nhaphuong-container-wide,
    .vtipz-container-wide {
        padding: 0 16px;
    }
}

.text-center { text-align: center; }
.w-100 { width: 100%; }
.mt-4 { margin-top: 1.5rem; }
.radius-lg { border-radius: var(--vtipz-radius-lg, 12px); }
.shadow-md { box-shadow: var(--shadow-md); }
.d-none-desktop { display: none !important; }
.d-none-mobile { display: inline-flex; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-12 { padding-bottom: 3rem; }

/* ==========================================================================
   BUTTON TOKENS (Nút chính đỏ chữ trắng, nút phụ outline đỏ chuẩn Figma)
   ========================================================================== */
.nhaphuong-btn,
.vtipz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--btn-padding-md, 12px 24px);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--btn-radius, 8px);
    transition: var(--btn-transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

/* Nút chính (Primary: Nền đỏ Nhã Phương, chữ trắng) */
.nhaphuong-btn-primary,
.vtipz-btn-primary {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF !important;
    border: 1.5px solid var(--color-primary, #C41230);
    box-shadow: var(--btn-primary-shadow, 0 4px 14px rgba(196, 18, 48, 0.28));
}

.nhaphuong-btn-primary:hover,
.vtipz-btn-primary:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    border-color: var(--color-primary-dark, #9E0E26);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover, 0 6px 20px rgba(196, 18, 48, 0.38));
}

/* Nút phụ (Secondary / Outline: Viền đỏ Nhã Phương, nền trong suốt/trắng, chữ đỏ) */
.nhaphuong-btn-secondary,
.nhaphuong-btn-outline,
.vtipz-btn-outline {
    background-color: transparent;
    color: var(--color-primary, #C41230) !important;
    border: 1.5px solid var(--color-primary, #C41230);
}

.nhaphuong-btn-secondary:hover,
.nhaphuong-btn-outline:hover,
.vtipz-btn-outline:hover {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary, 0 4px 16px rgba(196, 18, 48, 0.28));
}

/* Nút Accent (Vàng Gold / Cam / Hotline) */
.nhaphuong-btn-accent,
.vtipz-btn-accent {
    background-color: var(--color-gold, #F5BD06);
    color: #111827 !important;
    border: 1.5px solid var(--color-gold, #F5BD06);
    font-weight: 700;
}

.nhaphuong-btn-accent:hover,
.vtipz-btn-accent:hover {
    background-color: var(--color-gold-dark, #D4A017);
    border-color: var(--color-gold-dark, #D4A017);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 189, 6, 0.35);
}

/* Nút Hợp tác / Đại lý B2B */
.nhaphuong-btn-agency,
.vtipz-btn-agency {
    background: linear-gradient(135deg, #C41230 0%, #9E0E26 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.35);
}

.nhaphuong-btn-agency:hover,
.vtipz-btn-agency:hover {
    background: linear-gradient(135deg, #DE2B49 0%, #C41230 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.45);
}

.nhaphuong-btn-sm,
.vtipz-btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 6px; }
.nhaphuong-btn-lg,
.vtipz-btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 10px; }
.nhaphuong-btn-block,
.vtipz-btn-block { width: 100%; }

/* Section Headers */
.vtipz-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    gap: 16px;
}

@media (max-width: 768px) {
    .vtipz-section-header {
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }
}

.vtipz-section-subtitle {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--vtipz-primary-light);
    margin-bottom: 4px;
}

.vtipz-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--vtipz-primary);
    line-height: 1.3;
}

.vtipz-view-all-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--vtipz-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vtipz-view-all-link:hover {
    color: var(--vtipz-accent);
    transform: translateX(3px);
}

/* ==========================================================================
   SCREEN READER & SEO ONLY UTILITIES (.sc-only, .sr-only)
   Chuẩn thế giới di động & WCAG 2.1
   ========================================================================== */
.sc-only,
.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;
}






/* --- Start tailwind-output.css --- */
.container{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width:640px){.container{max-width:640px;padding-right:1.5rem;padding-left:1.5rem}}@media (min-width:768px){.container{max-width:768px;padding-right:2rem;padding-left:2rem}}@media (min-width:1024px){.container{max-width:1024px;padding-right:3rem;padding-left:3rem}}@media (min-width:1280px){.container{max-width:1280px;padding-right:5rem;padding-left:5rem}}@media (min-width:1440px){.container{max-width:1440px}}.nhaphuong-container{width:100%;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}@media (min-width:640px){.nhaphuong-container{padding-left:32px;padding-right:32px}}@media (min-width:1024px){.nhaphuong-container{padding-left:60px;padding-right:60px}}@media (min-width:1280px){.nhaphuong-container{padding-left:80px;padding-right:80px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-3{left:.75rem}.top-3{top:.75rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-28{margin-bottom:7rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-40{margin-bottom:10rem}.mb-48{margin-bottom:12rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-32{margin-top:8rem}.mt-4{margin-top:1rem}.mt-48{margin-top:12rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-10{height:2.5rem}.h-24{height:6rem}.h-full{height:100%}.w-10{width:2.5rem}.w-24{width:6rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-none{max-width:none}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-primary{--tw-border-opacity:1;border-color:rgb(183 0 0/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-\[\#EE4D2D\]{--tw-bg-opacity:1;background-color:rgb(238 77 45/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(183 0 0/var(--tw-bg-opacity,1))}.bg-primary-light\/30{background-color:rgba(253,232,235,.3)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-64{padding-top:16rem;padding-bottom:16rem}.py-72{padding-top:18rem;padding-bottom:18rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-80{padding-top:20rem;padding-bottom:20rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(183 0 0/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline{text-decoration-line:underline}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(183 0 0/var(--tw-border-opacity,1))}.hover\:bg-\[\#D73211\]:hover{--tw-bg-opacity:1;background-color:rgb(215 50 17/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-primary-dark:hover{--tw-bg-opacity:1;background-color:rgb(140 0 0/var(--tw-bg-opacity,1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(183 0 0/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.focus\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(183 0 0/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(183 0 0/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:self-auto{align-self:auto}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:p-12{padding:3rem}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}}

/* --- Start header.css --- */
/* --- Sub-module: Topbar, Main Header, Nav & Mega Menu (Original Lines 273-756) --- */
/* ==========================================================================
   1. THANH TRÊN CÙNG (TOP BAR)
   ========================================================================== */
.vtipz-topbar {
    background-color: var(--color-topbar-bg, #181B1E);
    color: #9CA3AF;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1000;
}

.vtipz-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38px;
}

.vtipz-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vtipz-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtipz-topbar-hotline {
    color: #F5BD06;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.vtipz-topbar-hotline a {
    color: #F5BD06;
    font-weight: 800;
    text-decoration: none;
}

.vtipz-topbar-link {
    color: var(--color-border, #E5E7EB);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.vtipz-topbar-link:hover {
    color: #FFFFFF;
}

.vtipz-topbar-btn-agency {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 0 0 12px 0 !important;
    text-decoration: none;
    transition: background 0.2s;
}

.vtipz-topbar-btn-agency:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    color: #FFFFFF;
}

/* ==========================================================================
   Order Tracking Compact Button (Topbar)
   ========================================================================== */
.vtipz-topbar-track-btn {
    background-color: var(--color-dark-navy, #111827);
    color: var(--color-border, #E5E7EB);
    font-size: 11px;
    font-weight: 600;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}

.vtipz-topbar-track-btn i {
    font-size: 11px;
    color: #F5BD06;
    transition: transform 0.2s ease, color 0.2s ease;
}

.vtipz-topbar-track-btn:hover {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.vtipz-topbar-track-btn:hover i {
    color: #FFD54F;
    transform: translateX(1px);
}

/* ==========================================================================
   Language Switcher (TranslatePress Integrated - VI / EN)
   ========================================================================== */
.vtipz-lang-switch-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    z-index: 1001;
}

.vtipz-lang-switch {
    background-color: var(--color-dark-navy, #111827);
    color: var(--color-border, #E5E7EB);
    font-size: 11px;
    font-weight: 600;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.vtipz-lang-switch:hover {
    background-color: var(--color-primary, #C41230);
    border-color: rgba(255, 255, 255, 0.25);
}

.vtipz-lang-opt {
    color: #8EAFCE;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.15s ease;
    display: inline-block;
    line-height: 1;
}

.vtipz-lang-opt:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
}

.vtipz-lang-opt.is-active {
    color: #FFFFFF;
    font-weight: 700;
}

.vtipz-lang-sep {
    color: #4D7397;
    font-size: 10px;
    line-height: 1;
}

.vtipz-lang-arrow {
    font-size: 8px;
    color: #8EAFCE;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.vtipz-lang-switch-dropdown:hover .vtipz-lang-arrow,
.vtipz-lang-switch-dropdown.is-open .vtipz-lang-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu - Seamless Hover Bridge */
.vtipz-lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    padding-top: 4px;
    min-width: 155px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

/* Invisible bridge so mouse never loses hover between topbar and menu */
.vtipz-lang-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

.vtipz-lang-switch-dropdown:hover .vtipz-lang-menu,
.vtipz-lang-menu:hover,
.vtipz-lang-switch-dropdown:focus-within .vtipz-lang-menu,
.vtipz-lang-switch-dropdown.is-open .vtipz-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.vtipz-lang-menu-inner {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(196, 18, 48, 0.22), 0 8px 10px -6px rgba(196, 18, 48, 0.12);
    border: 1px solid #E2ECF5;
    padding: 6px;
}

.vtipz-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #1E293B;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.vtipz-lang-item:hover {
    background-color: #F1F5F9;
    color: var(--color-primary, #C41230);
}

.vtipz-lang-item.is-active {
    background-color: #F0F7FF;
    color: var(--color-primary, #C41230);
    font-weight: 700;
}

.vtipz-lang-flag {
    font-size: 14px;
    line-height: 1;
}

.vtipz-lang-label {
    flex: 1;
}

.vtipz-lang-check {
    font-size: 10px;
    color: var(--color-primary, #C41230);
}

/* Mobile Drawer Language Switcher */
.vtipz-mobile-lang-switch {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #E2ECF5;
}

.vtipz-mobile-lang-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 8px;
}

.vtipz-mobile-lang-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.vtipz-mobile-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #F1F5F9;
    color: #1E293B;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.vtipz-mobile-lang-btn.is-active {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
}

/* Suppression of TranslatePress default floater / dropdown popup & ALD popup */
.trp-floating-switcher,
.trp-switcher-position-top,
.trp-switcher-position-bottom,
#trp-floater-ls,
.trp-floater-ls,
.trp-language-switcher-container,
#trp_ald_popup_select_container,
#trp_ald_no_text_select,
.trp-ald-popup-select,
.trp_ald_popup_backdrop,
div[data-no-translation][class*="trp-floating"],
div[data-no-translation][class*="trp-floater"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -9999 !important;
}


/* ==========================================================================
   2. ĐẦU TRANG (MAIN HEADER) - FIGMA NODE 174:11
   ========================================================================== */
.vtipz-main-header {
    background-color: #FFFFFF;
    padding: 14px 0;
    border-bottom: 1px solid #E2ECF5;
}

.vtipz-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.vtipz-logo-img {
    width: 150px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Header Search - Figma EL-53346e54 */
.vtipz-header-search {
    flex: 1;
    max-width: 620px;
}

.vtipz-search-input-wrapper {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 24px 0 !important;
    height: 44px;
    padding: 4px 4px 4px 16px;
    transition: all 0.25s ease;
}

.vtipz-search-input-wrapper:focus-within {
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.15);
}

.vtipz-search-icon {
    color: #8A929C;
    font-size: 16px;
    margin-right: 10px;
}

.vtipz-search-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: #1E293B;
}

.vtipz-search-field::placeholder {
    color: #8A929C;
}

.vtipz-search-btn {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    padding: 8px 20px;
    border-radius: 4px 4px 24px 4px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.vtipz-search-btn:hover {
    background-color: var(--color-primary, #C41230);
}

/* Header Actions - Figma Nhã Phương B2B */
.vtipz-header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nhaphuong-header-hotline {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nhaphuong-hotline-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(196, 18, 48, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #C41230);
    font-size: 16px;
    transition: all 0.25s ease;
}

.nhaphuong-header-hotline:hover .nhaphuong-hotline-icon {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    transform: scale(1.05);
}

.nhaphuong-hotline-info {
    display: flex;
    flex-direction: column;
}

.nhaphuong-hotline-label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.nhaphuong-hotline-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.nhaphuong-hotline-num:hover {
    color: var(--color-primary-dark, #9E0E26);
}

.nhaphuong-btn-quote-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.2);
    white-space: nowrap;
}

.nhaphuong-btn-quote-header:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.3);
}

/* ==========================================================================
   3. THANH ĐIỀU HƯỚNG CHÍNH (MAIN NAVBAR) - FIGMA NODE 174:28
   ========================================================================== */
.vtipz-navbar {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    height: 48px;
    position: relative;
    z-index: 100;
}

.vtipz-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    position: relative;
}

.vtipz-main-menu-nav {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
}

.vtipz-nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
}

.vtipz-nav-list > li,
.vtipz-nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vtipz-nav-list > li.menu-item-has-mega {
    position: static;
}

.vtipz-nav-list > li > a,
.vtipz-nav-link {
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 600;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .vtipz-nav-list > li > a,
    .vtipz-nav-link {
        padding: 0 16px;
    }
}

.vtipz-nav-list > li.active > a,
.vtipz-nav-list > li.current-menu-item > a,
.vtipz-nav-list > li.current_page_item > a,
.vtipz-nav-list > li:hover > a,
.vtipz-nav-item.active .vtipz-nav-link,
.vtipz-nav-item:hover .vtipz-nav-link {
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
}

.vtipz-nav-arrow {
    font-size: 10px;
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

.vtipz-nav-list > li:hover > a .vtipz-nav-arrow,
.vtipz-nav-item:hover .vtipz-nav-arrow {
    transform: rotate(180deg);
}

/* Submenu dropdown chuẩn WordPress */
.vtipz-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(196, 18, 48, 0.16);
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--vtipz-border-light);
    border-top: none;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    pointer-events: none;
}

.vtipz-nav-list > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.vtipz-nav-list .sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.vtipz-nav-list .sub-menu li a {
    display: block;
    padding: 9px 18px;
    color: var(--vtipz-text-body) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vtipz-nav-list .sub-menu li a:hover {
    background-color: var(--vtipz-bg-light) !important;
    color: var(--vtipz-primary) !important;
    padding-left: 22px;
}

.vtipz-nav-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
}

.vtipz-btn-nav-agency {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 0 0 14px 0 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.vtipz-btn-nav-agency:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    color: #FFFFFF !important;
}

/* ==========================================================================
   MEGA MENU DROPDOWN
   ========================================================================== */
.vtipz-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1060px;
    max-width: calc(100vw - 48px);
    background: #FFFFFF;
    box-shadow: 0 16px 36px rgba(196, 18, 48, 0.18);
    border-radius: 0 0 var(--vtipz-radius-xl) var(--vtipz-radius-xl);
    border: 1px solid var(--vtipz-border-light);
    border-top: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    pointer-events: none;
}

.menu-item-has-mega:hover > .vtipz-mega-menu,
.vtipz-nav-list > li.menu-item-has-mega:hover > .vtipz-mega-menu,
.vtipz-nav-item.menu-item-has-mega:hover > .vtipz-mega-menu,
.vtipz-category-toggle-wrap:hover .vtipz-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.vtipz-mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: 24px;
    padding: 28px;
}

.vtipz-mega-menu.no-banner .vtipz-mega-menu-inner {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ==========================================================================
   STANDARD NAV DROPDOWN (DYNAMIC MENU)
   ========================================================================== */
.vtipz-nav-list > li.menu-item-has-dropdown {
    position: relative;
}

.vtipz-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(196, 18, 48, 0.15);
    border-radius: var(--vtipz-radius-md);
    border: 1px solid var(--vtipz-border-light);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    pointer-events: none;
}

.menu-item-has-dropdown:hover > .vtipz-nav-dropdown,
.vtipz-nav-list > li.menu-item-has-dropdown:hover > .vtipz-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.vtipz-nav-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vtipz-nav-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vtipz-text-dark);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vtipz-nav-dropdown li a .mega-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.vtipz-nav-dropdown li a:hover {
    background-color: var(--vtipz-bg-light);
    color: var(--vtipz-primary);
    padding-left: 22px;
}

.vtipz-mega-heading a.vtipz-heading-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vtipz-mega-heading a.vtipz-heading-link:hover {
    color: var(--vtipz-accent);
}

.vtipz-mega-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--vtipz-primary);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--vtipz-border-light);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-mega-links li {
    margin-bottom: 10px;
}

.vtipz-mega-links li a {
    color: var(--vtipz-text-body);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--vtipz-radius-sm);
    transition: all 0.2s ease;
}

.vtipz-mega-links li a:hover {
    color: var(--vtipz-primary);
    background-color: var(--vtipz-bg-light);
    transform: translateX(4px);
}

.mega-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
}

.vtipz-mega-card {
    background: linear-gradient(145deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #FFFFFF;
    padding: 24px;
    border-radius: var(--vtipz-radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.vtipz-badge-agency {
    display: inline-block;
    background-color: var(--vtipz-accent);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.vtipz-mega-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.vtipz-mega-card p {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 18px;
}



/* --- Sub-module: Mobile Responsive Drawer & Header Breakpoints --- */
/* ==========================================================================
   MOBILE RESPONSIVE DRAWER & HEADER BREAKPOINTS
   ========================================================================== */

/* 1. Hamburger Toggle Button */
.vtipz-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-bg-light, #F8F9FA);
    color: var(--color-primary, #C41230);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.vtipz-mobile-menu-btn:hover,
.vtipz-mobile-menu-btn:focus {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
}

/* 2. Slide-out Navigation Drawer */
.vtipz-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1050;
}

.vtipz-mobile-drawer.open {
    opacity: 1;
    visibility: visible;
}

.vtipz-drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(196, 18, 48, 0.55);
    backdrop-filter: blur(3px);
}

.vtipz-drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 86vw;
    background: #FFFFFF;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.vtipz-mobile-drawer.open .vtipz-drawer-content {
    transform: translateX(0);
}

.vtipz-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    background: var(--color-bg-light, #F8F9FA);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-drawer-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.vtipz-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E5E7EB);
    color: var(--color-primary, #C41230);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vtipz-drawer-close:hover {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
}

.vtipz-drawer-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.vtipz-drawer-cta {
    margin-bottom: 16px;
}

.vtipz-drawer-cta .vtipz-btn-nav-agency {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 10px !important;
    display: flex;
    text-align: center;
}

/* Mobile Drawer B2B Price List Card */
.vtipz-mobile-b2b-highlight {
    margin-bottom: 16px;
}
.vtipz-mobile-b2b-cta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1.5px solid #FCD34D;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.08);
}
.vtipz-mobile-b2b-cta-card:hover {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.15);
}
.vtipz-b2b-cta-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F59E0B;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.vtipz-b2b-cta-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.vtipz-b2b-cta-title {
    font-size: 14px;
    font-weight: 800;
    color: #92400E;
    line-height: 1.3;
}
.vtipz-b2b-cta-sub {
    font-size: 11.5px;
    color: #B45309;
    line-height: 1.3;
}
.vtipz-b2b-cta-arrow {
    color: #D97706;
    font-size: 13px;
    margin-left: auto;
}

.vtipz-mobile-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vtipz-mobile-links > li {
    position: relative;
    border-bottom: 1px solid #EDF4FA;
}

.vtipz-mobile-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.vtipz-mobile-links > li a,
.vtipz-mobile-drawer .vtipz-mobile-links a,
.vtipz-mobile-drawer .vtipz-nav-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 14.5px;
    color: #1E293B !important;
    height: auto !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.vtipz-mobile-links > li a:hover,
.vtipz-mobile-drawer .vtipz-mobile-links a:hover,
.vtipz-mobile-drawer .vtipz-nav-link:hover {
    color: var(--color-primary, #C41230) !important;
    background-color: var(--color-bg-light, #F8F9FA) !important;
    padding-left: 14px;
}

.vtipz-sub-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748B;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.25s ease, color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.vtipz-sub-toggle:hover {
    background: #EBF2F8;
    color: var(--color-primary, #C41230);
}

.vtipz-mobile-links li.open > .vtipz-mobile-link-row .vtipz-sub-toggle,
.vtipz-mobile-links li.open > .vtipz-sub-toggle {
    transform: rotate(180deg);
    color: var(--color-primary, #C41230);
}

.vtipz-mobile-links .sub-menu {
    display: none;
    list-style: none;
    padding: 4px 0 6px 14px;
    margin: 0 0 8px 0;
    background: #F8FAFC;
    border-radius: 6px;
    border-left: 3px solid var(--color-primary, #C41230);
}

.vtipz-mobile-links .sub-menu li a {
    display: block;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.vtipz-mobile-links .sub-menu li a:hover {
    color: var(--color-primary, #C41230);
    padding-left: 14px;
}

.vtipz-mobile-links .sub-menu .sub-menu {
    background: #FFFFFF;
    border-left: 2px solid #CBD5E1;
    margin-top: 4px;
    margin-bottom: 6px;
    padding-left: 12px;
}

.vtipz-mobile-links .sub-menu .menu-item-has-children > .vtipz-mobile-link-row > a {
    font-size: 13.5px;
    font-weight: 600;
    color: #1E293B !important;
}

.vtipz-mobile-links .sub-menu .sub-menu li a {
    font-size: 12.5px;
    color: #64748B;
}

.vtipz-drawer-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-drawer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--color-bg-light, #F8F9FA);
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-drawer-contact-item:hover {
    background: var(--color-primary-soft, #FDE8EB);
}

.vtipz-drawer-contact-item i {
    font-size: 14px;
    color: var(--color-primary, #C41230);
}

/* ==========================================================================
   HEADER RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* 1. Large Tablets / Laptops (993px - 1280px) */
@media (min-width: 993px) and (max-width: 1280px) {
    .vtipz-header-inner {
        gap: 16px;
    }
    .vtipz-logo-img {
        width: 130px;
    }
    .vtipz-header-search {
        max-width: 460px;
    }
    .vtipz-header-actions {
        gap: 14px;
    }
    .vtipz-action-text {
        font-size: 11px;
    }
    .vtipz-nav-list > li > a,
    .vtipz-nav-link {
        padding: 0 8px !important;
        font-size: 12px;
        gap: 4px;
    }
    .vtipz-btn-nav-agency {
        padding: 7px 12px !important;
        font-size: 12px;
    }
    .vtipz-mega-menu {
        width: 880px;
    }
}

/* 2. Tablets & Below (<= 992px) */
@media (max-width: 992px) {
    .d-none-desktop { display: inline-flex !important; }
    .d-none-mobile { display: none !important; }

    /* Hide desktop navbar completely to avoid blank bar */
    .vtipz-navbar {
        display: none !important;
    }

    .vtipz-mobile-menu-btn {
        display: inline-flex !important;
    }

    .vtipz-topbar-inner {
        height: 34px;
    }

    .vtipz-topbar-hotline {
        font-size: 12.5px;
    }

    .vtipz-topbar-btn-agency {
        padding: 4px 10px;
        font-size: 11px;
    }

    .vtipz-lang-switch-dropdown {
        display: none !important;
    }

    .vtipz-mega-menu {
        display: none !important;
    }
}

/* 3. Mobile Screens (<= 768px) */
@media (max-width: 768px) {
    .vtipz-topbar {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .vtipz-topbar-inner {
        height: 32px;
        gap: 8px;
        justify-content: space-between;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .vtipz-topbar-left {
        display: flex;
        align-items: center;
    }

    .vtipz-topbar-hotline {
        font-size: 12px;
    }

    .vtipz-topbar-link {
        display: none !important;
    }

    .vtipz-topbar-btn-agency {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Main Header Mobile Grid */
    .vtipz-main-header {
        padding: 10px 0 12px;
    }

    .vtipz-header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
    }

    .vtipz-mobile-menu-btn {
        order: 1;
        width: 38px;
        height: 38px;
    }

    .vtipz-header-logo {
        order: 2;
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 6px;
    }

    .vtipz-logo-img {
        width: 120px;
        max-height: 40px;
    }

    .vtipz-header-actions {
        order: 3;
        gap: 12px;
        margin-left: auto;
    }

    .vtipz-action-col {
        position: relative;
        padding: 4px;
        gap: 0;
    }

    .vtipz-action-icon {
        width: 26px;
        height: 26px;
        font-size: 20px;
    }

    .vtipz-action-text {
        display: none !important;
    }

    .vtipz-cart-action {
        position: relative;
    }

    .vtipz-cart-action #cartCount {
        position: absolute;
        top: -4px;
        right: -6px;
        background: #E02B2B;
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 700;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        text-align: center;
        border-radius: 50%;
        padding: 0 3px;
        box-shadow: 0 2px 5px rgba(224, 43, 43, 0.4);
    }

    .vtipz-header-search {
        order: 4;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 4px;
    }

    .vtipz-search-input-wrapper {
        height: 38px;
        padding: 2px 4px 2px 12px;
        border-radius: 0 0 20px 0 !important;
    }

    .vtipz-search-icon {
        font-size: 14px;
        margin-right: 8px;
    }

    .vtipz-search-field {
        font-size: 12.5px;
    }

    .vtipz-search-btn {
        padding: 6px 14px;
        font-size: 12px;
        border-radius: 4px 4px 18px 4px;
    }
}

/* 4. Small Mobile Phones (<= 480px) */
@media (max-width: 480px) {
    .vtipz-topbar-inner {
        gap: 6px;
    }

    .vtipz-topbar-hotline {
        font-size: 11px;
    }

    .vtipz-topbar-btn-agency {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 0 0 8px 0 !important;
    }

    .vtipz-mobile-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .vtipz-logo-img {
        width: 106px;
        max-height: 36px;
    }

    .vtipz-header-actions {
        gap: 8px;
    }

    .vtipz-action-icon {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }

    .vtipz-search-input-wrapper {
        height: 36px;
        padding: 2px 3px 2px 10px;
    }

    .vtipz-search-btn {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .vtipz-topbar-track-btn {
        font-size: 10.5px;
        padding: 0 7px;
        height: 22px;
        gap: 4px;
    }
}

@media (max-width: 380px) {
    .vtipz-topbar-track-btn span {
        display: none;
    }

    .vtipz-topbar-track-btn {
        padding: 0 8px;
        height: 22px;
    }
}

/* ==========================================================================
   LIVE SEARCH AJAX DROPDOWN (Gợi ý tìm kiếm tức thì)
   ========================================================================== */
.vtipz-header-search {
    position: relative;
}

.vtipz-mobile-search-box {
    position: relative;
    padding: 8px 16px 6px;
}

.vtipz-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--color-border, #E5E7EB);
    box-shadow: 0 14px 36px rgba(196, 18, 48, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 1050;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    font-size: 14px;
    animation: vtipzFadeDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vtipzFadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vtipz-search-dropdown-header {
    padding: 8px 16px 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748B;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vtipz-search-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.vtipz-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1E293B;
    transition: background 0.15s ease;
    border-bottom: 1px solid #F8FAFC;
}

.vtipz-search-item:last-child {
    border-bottom: none;
}

.vtipz-search-item:hover,
.vtipz-search-item.is-active {
    background: var(--color-bg-light, #F8F9FA);
    color: var(--color-primary, #C41230);
}

.vtipz-search-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.vtipz-search-item-thumb img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.vtipz-search-item-info {
    flex: 1;
    min-width: 0;
}

.vtipz-search-item-brand {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.vtipz-search-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vtipz-search-item:hover .vtipz-search-item-title {
    color: var(--color-primary, #C41230);
}

.vtipz-search-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    margin-top: 2px;
}

.vtipz-search-item-price del {
    color: #94A3B8;
    font-size: 11px;
    font-weight: 400;
    margin-right: 4px;
}

.vtipz-search-dropdown-footer {
    padding: 10px 16px;
    background: #F8FAFC;
    border-top: 1px solid #EEF2F6;
    text-align: center;
}

.vtipz-search-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    transition: color 0.15s ease;
}

.vtipz-search-view-all:hover {
    color: var(--color-primary, #C41230);
    text-decoration: underline;
}

.vtipz-search-empty,
.vtipz-search-loading {
    padding: 24px 16px;
    text-align: center;
    color: #64748B;
    font-size: 13.5px;
}

.vtipz-search-loading i {
    font-size: 20px;
    color: var(--color-primary, #C41230);
    margin-bottom: 8px;
    display: block;
}






/* --- Start footer.css --- */
/* --- Sub-module: Footer (5 Columns) & Floating Action Buttons (Original Lines 1907-2174) --- */
/* ==========================================================================
   FOOTER (CHÂN TRANG 5 CỘT)
   ========================================================================== */
.vtipz-site-footer {
    background-color: var(--color-footer-bg, #111827);
    color: #D1D5DB;
    font-size: 13.5px;
    border-top: 3px solid var(--color-primary, #C41230);
}

.vtipz-footer-main {
    padding: 38px 0 24px;
}

.vtipz-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
}

.vtipz-footer-middle-group {
    display: contents;
}

.vtipz-footer-logo {
    height: 42px;
    filter: brightness(0) invert(1);
    margin-bottom: 12px;
}

.vtipz-site-footer .vtipz-company-name {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 6px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.vtipz-company-desc {
    font-size: 12.5px;
    color: #B8D4EE;
    line-height: 1.5;
    margin-bottom: 12px;
}

.vtipz-footer-contact li {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.vtipz-footer-contact i {
    color: var(--vtipz-accent);
    margin-top: 3px;
    flex-shrink: 0;
}

.vtipz-footer-contact a {
    color: #FFFFFF;
}

.vtipz-footer-title,
.footer-widget .wp-block-heading,
.footer-widget h2,
.footer-widget h3,
.footer-widget h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 6px;
}

.vtipz-footer-title::after,
.footer-widget .wp-block-heading::after,
.footer-widget h2::after,
.footer-widget h3::after,
.footer-widget h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 24px;
    height: 2px;
    background-color: var(--vtipz-accent);
}

.vtipz-footer-menu,
.footer-widget ul,
.footer-widget .wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.vtipz-footer-menu li,
.footer-widget ul li,
.footer-widget .wp-block-list li {
    margin-bottom: 6px;
}

.vtipz-footer-menu li a,
.footer-widget ul li a,
.footer-widget .wp-block-list li a {
    color: #B8D4EE;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-footer-menu li a:hover,
.footer-widget ul li a:hover,
.footer-widget .wp-block-list li a:hover {
    color: #FFFFFF;
    padding-left: 5px;
}

.footer-widget p,
.footer-widget .wp-block-paragraph {
    color: #B8D4EE;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Social & Payment */
.vtipz-social-links {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
}

.social-btn.zalo {
    width: auto;
    padding: 0 12px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
}

.social-btn:hover {
    background-color: var(--vtipz-accent);
    transform: translateY(-2px);
}

.vtipz-payment-methods {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vtipz-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: default;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
}

a.vtipz-pay-badge {
    cursor: pointer;
}

.vtipz-pay-badge:hover {
    transform: translateY(-2px);
}

.vtipz-pay-card-img {
    width: 60px;
    height: 38px;
    min-width: 60px;
    min-height: 38px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: #FFFFFF;
}

.vtipz-pay-badge:hover .vtipz-pay-card-img {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.vtipz-pay-custom-card {
    width: 60px;
    height: 38px;
    min-width: 60px;
    min-height: 38px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.vtipz-pay-badge:hover .vtipz-pay-custom-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.vtipz-pay-custom-img {
    max-width: 48px;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.vtipz-pay-icon-box {
    width: 60px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--vtipz-primary, #0F3E6D);
}

.bct-box {
    border: 1px dashed #B8D4EE;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #B8D4EE;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vtipz-footer-bottom {
    background-color: #062644;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vtipz-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
}

.vtipz-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   FLOATING ACTION BUTTONS (FIGMA NODE 174:492)
   ========================================================================= */
.vtipz-floating-actions {
    position: fixed;
    right: 24px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 998;
}

.vtipz-float-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    color: #FFFFFF;
    font-size: 20px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vtipz-float-btn:hover {
    transform: scale(1.1);
    color: #FFFFFF;
}

.vtipz-float-call {
    background-color: #E02B2B;
}

.vtipz-float-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E02B2B;
    opacity: 0.7;
    animation: vtipzPulse 1.8s infinite ease-in-out;
    z-index: -1;
}

@keyframes vtipzPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.vtipz-float-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* Trạng thái Không màu nền / Full ảnh tròn */
.vtipz-float-btn.is-no-bg {
    background-color: transparent !important;
}

.vtipz-float-btn.is-full-img {
    background-color: transparent !important;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    border: none;
}

.vtipz-float-btn.is-full-img .vtipz-float-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block;
}

.vtipz-float-btn.is-full-img:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.zalo-icon-text {
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}

.vtipz-float-zalo {
    background-color: #0088FF;
}

.vtipz-float-chat {
    background-color: var(--vtipz-accent);
}

.vtipz-float-top {
    background-color: #333333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.vtipz-float-top.show {
    opacity: 1;
    visibility: visible;
}

.vtipz-float-tooltip {
    position: absolute;
    right: 60px;
    background: #1F2A37;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.vtipz-float-btn:hover .vtipz-float-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ==========================================================================
   FOOTER RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* 1. Large Tablets (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    .vtipz-footer-main {
        padding: 34px 0 22px;
    }
    .vtipz-footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
        gap: 20px;
    }
    .vtipz-footer-logo {
        height: 38px;
    }
}

/* 2. Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .vtipz-footer-main {
        padding: 28px 0 18px;
    }
    .vtipz-footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .vtipz-footer-middle-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .vtipz-footer-connect {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* 3. Mobile Screens (<= 767px) */
@media (max-width: 767px) {
    .vtipz-footer-main {
        padding: 20px 0 14px !important;
    }

    .vtipz-footer-grid {
        display: flex;
        flex-direction: column;
        gap: 14px !important;
    }

    .vtipz-footer-col {
        width: 100%;
    }

    .vtipz-footer-company {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .vtipz-footer-logo {
        height: 34px;
        margin-bottom: 8px;
    }

    .vtipz-site-footer .vtipz-company-name {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 6px;
        word-break: break-word;
    }

    .vtipz-company-desc {
        font-size: 12px;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .vtipz-footer-contact {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

    .vtipz-footer-contact li {
        margin-bottom: 0 !important;
        font-size: 12px;
        line-height: 1.35;
        gap: 7px;
    }

    .vtipz-footer-contact li i {
        margin-top: 2px;
        font-size: 11.5px;
    }

    .vtipz-footer-contact li span,
    .vtipz-footer-contact li a {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 3 Cột Menu Giữa: 3 cột song song trên mobile, không bị rớt dòng lãng phí chiều dài */
    .vtipz-footer-middle-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px 8px !important;
        width: 100% !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-col,
    .vtipz-footer-middle-group .vtipz-footer-menu-col {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-title {
        white-space: nowrap !important;
    }

    .vtipz-footer-title,
    .footer-widget .wp-block-heading,
    .footer-widget h2,
    .footer-widget h3,
    .footer-widget h4 {
        font-size: 13px;
        margin-bottom: 8px;
        padding-bottom: 4px;
    }

    .vtipz-footer-title::after,
    .footer-widget .wp-block-heading::after,
    .footer-widget h2::after,
    .footer-widget h3::after,
    .footer-widget h4::after {
        width: 18px;
        height: 2px;
    }

    .vtipz-footer-menu li {
        margin-bottom: 5px;
        line-height: 1.3;
    }

    .vtipz-footer-menu li a {
        font-size: 11.5px;
        word-break: break-word;
    }

    /* Khối Kết nối & Thanh toán trên Mobile */
    .vtipz-footer-connect {
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
    }

    .vtipz-social-links {
        margin-bottom: 8px;
        gap: 6px;
    }

    .social-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .social-btn.zalo {
        padding: 0 8px;
        font-size: 10.5px;
    }

    .vtipz-payment-methods {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 8px;
    }

    .vtipz-pay-badge {
        line-height: 1;
    }

    .vtipz-pay-card-img,
    .vtipz-pay-custom-card,
    .vtipz-pay-icon-box {
        width: 46px;
        height: 28px;
        min-width: 46px;
        min-height: 28px;
    }

    .vtipz-pay-custom-img {
        max-width: 36px;
        max-height: 18px;
    }

    .vtipz-bct-badge {
        grid-column: 1 / -1;
    }

    .vtipz-bct-badge .bct-box {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Footer Bottom / Copyright */
    .vtipz-footer-bottom {
        padding: 10px 0;
    }

    .vtipz-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }

    .vtipz-copyright {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .vtipz-bottom-links {
        gap: 3px 6px;
        font-size: 11.5px;
        line-height: 1.35;
    }

    /* Floating Action Buttons on Mobile */
    .vtipz-floating-actions {
        right: 12px;
        bottom: 16px;
        gap: 8px;
    }

    .vtipz-float-btn {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .vtipz-float-icon-img {
        width: 20px;
        height: 20px;
    }

    .zalo-icon-text {
        font-size: 11px;
    }

    .vtipz-float-tooltip {
        display: none !important;
    }
}

/* Màn hình cực nhỏ (< 390px) */
@media (max-width: 390px) {
    .vtipz-footer-middle-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px 4px !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-title {
        font-size: 12px !important;
        letter-spacing: -0.2px;
    }

    .vtipz-footer-middle-group .vtipz-footer-menu li a {
        font-size: 11px !important;
        line-height: 1.25;
    }

    .vtipz-footer-connect {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}





/* --- Start components.css --- */
/* --- Sub-module: Breadcrumbs (Original Lines 757-788) --- */
/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.vtipz-breadcrumb-wrapper {
    background-color: var(--vtipz-bg-light);
    border-bottom: 1px solid var(--vtipz-border-light);
    padding: 12px 0;
}

.vtipz-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vtipz-text-muted);
}

.vtipz-breadcrumb li a {
    color: var(--vtipz-primary);
    font-weight: 500;
}

.vtipz-breadcrumb li.separator {
    color: var(--vtipz-border);
}

.vtipz-breadcrumb li.current {
    color: var(--vtipz-text-dark);
    font-weight: 600;
}



/* --- Sub-module: Product Card Base Component (Original Lines 1312-1536) --- */
/* ==========================================================================
   PRODUCT CARD COMPONENT
   ========================================================================== */
.vtipz-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-products-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.vtipz-product-card {
    background: #FFFFFF;
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
}

.vtipz-product-card:hover {
    border-color: var(--vtipz-primary-light);
    box-shadow: var(--vtipz-shadow-lg);
    transform: translateY(-4px);
}

.vtipz-card-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Square aspect ratio */
    border-radius: var(--vtipz-radius-md);
    background-color: var(--vtipz-bg-light);
    overflow: hidden;
    margin-bottom: 12px;
}

.vtipz-card-img-link {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vtipz-card-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.vtipz-product-card:hover .vtipz-card-img {
    transform: scale(1.08);
}

.vtipz-card-badges {
    position: absolute;
    top: 8px; left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.vtipz-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--vtipz-radius-sm);
    text-transform: uppercase;
}

.vtipz-badge-sale {
    background-color: var(--vtipz-accent);
    color: #FFFFFF;
}

.vtipz-badge-agency-ck {
    background-color: var(--vtipz-primary);
    color: #FFFFFF;
}

.vtipz-card-hover-actions {
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.25s ease;
    z-index: 2;
}

.vtipz-product-card:hover .vtipz-card-hover-actions {
    opacity: 1;
    transform: translateX(0);
}

.vtipz-btn-icon-round {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--vtipz-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.vtipz-btn-icon-round:hover {
    background-color: var(--vtipz-accent);
    color: #FFFFFF;
}

.vtipz-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vtipz-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    margin-bottom: 6px;
}

.vtipz-stars {
    color: var(--vtipz-warning);
    font-size: 11px;
}

.vtipz-review-count {
    color: var(--vtipz-text-muted);
}

.vtipz-card-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vtipz-card-title a {
    color: var(--vtipz-text-heading);
}

.vtipz-card-title a:hover {
    color: var(--vtipz-primary);
}

.vtipz-card-spec {
    font-size: 12px;
    color: var(--vtipz-text-muted);
    margin-bottom: 10px;
}

.vtipz-card-pricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 14px;
}

.vtipz-price-current {
    font-size: 17px;
    font-weight: 700;
    color: var(--vtipz-accent);
}

.vtipz-price-old {
    font-size: 13px;
    color: var(--vtipz-text-muted);
    text-decoration: line-through;
}

.vtipz-card-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vtipz-btn-cart {
    background-color: var(--vtipz-bg-soft);
    color: var(--vtipz-primary);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 6px;
}

.vtipz-btn-cart:hover {
    background-color: var(--vtipz-primary);
    color: #FFFFFF !important;
}

.vtipz-btn-wholesale {
    background-color: rgba(196, 18, 48, 0.1);
    color: var(--vtipz-accent);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 6px;
    border: 1px dashed var(--vtipz-accent);
}

.vtipz-btn-wholesale:hover {
    background-color: var(--vtipz-accent);
    color: #FFFFFF !important;
}



/* --- Sub-module: Modal Dialog (Original Lines 2687-2758) --- */
/* ==========================================================================
   MODAL DIALOG
   ========================================================================== */
.vtipz-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.vtipz-modal.show {
    opacity: 1;
    visibility: visible;
}

.vtipz-modal-overlay {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.vtipz-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #FFFFFF;
    border-radius: var(--vtipz-radius-xl);
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    z-index: 2;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.vtipz-modal.show .vtipz-modal-dialog {
    transform: translateY(0);
}

.vtipz-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.vtipz-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--vtipz-primary);
}

.vtipz-modal-close {
    font-size: 20px;
    color: var(--vtipz-text-muted);
}

.vtipz-modal-close:hover {
    color: var(--vtipz-danger);
}

.vtipz-modal-sub {
    font-size: 13px;
    color: var(--vtipz-text-muted);
    margin-bottom: 20px;
}

/* Voucher Details Modal Styles (Airy, Modern, Spacious) */
.vtipz-voucher-modal-dialog {
    max-width: 520px !important;
    width: 92% !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
    border: 1px solid #E2E8F0 !important;
}

.vtipz-voucher-modal-dialog .vtipz-modal-header {
    padding: 22px 28px 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.vtipz-voucher-modal-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vtipz-voucher-title-icon {
    color: var(--color-primary, #C41230) !important;
    font-size: 16px !important;
    background: #EFF6FF !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vtipz-voucher-modal-dialog .vtipz-modal-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
}

.vtipz-voucher-modal-dialog .vtipz-modal-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F8FAFC !important;
    border: none !important;
    cursor: pointer !important;
    color: #64748B !important;
    transition: all 0.2s ease !important;
}

.vtipz-voucher-modal-dialog .vtipz-modal-close:hover {
    background: #FEE2E2 !important;
    color: #EF4444 !important;
}

.vtipz-voucher-modal-dialog .vtipz-modal-body {
    padding: 26px 28px 30px !important;
    background: #FFFFFF !important;
}

.vtipz-modal-voucher-card {
    background: linear-gradient(135deg, #F8FAFC 0%, #F0F7FF 100%) !important;
    border: 1.5px dashed #93C5FD !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
}

.vtipz-modal-voucher-badge {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-primary, #C41230) !important;
    line-height: 1.2 !important;
}

.vtipz-modal-voucher-code-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vtipz-modal-voucher-code-wrap .code-label {
    font-size: 12px !important;
    color: #64748B !important;
    font-weight: 500 !important;
}

.vtipz-modal-voucher-code-wrap strong {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.vtipz-modal-copy-btn {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--color-primary, #C41230) !important;
    background: #FFFFFF !important;
    border: 1px solid #93C5FD !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.vtipz-modal-copy-btn:hover {
    background: #EFF6FF !important;
    border-color: var(--color-primary, #C41230) !important;
}

.vtipz-modal-terms-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
    background: #FFFFFF !important;
}

.vtipz-modal-term-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 13px 0 !important;
}

.vtipz-modal-term-row .term-label {
    color: #64748B !important;
    font-weight: 500 !important;
    min-width: 140px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vtipz-modal-term-row .term-label i {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
    width: 18px !important;
    text-align: center !important;
}

.vtipz-modal-term-row .term-val {
    color: #0F172A !important;
    font-weight: 600 !important;
    text-align: right !important;
    max-width: 65% !important;
}

.vtipz-modal-reason-box {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    border-left: 4px solid #F59E0B !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-top: 14px !important;
}

.vtipz-modal-reason-box .reason-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #B45309 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vtipz-modal-reason-box .reason-text {
    font-size: 12.5px !important;
    color: #92400E !important;
    line-height: 1.5 !important;
}

.vtipz-modal-footer-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.vtipz-btn-modal-action {
    flex: 1 !important;
    height: 46px !important;
    background: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25) !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}

.vtipz-btn-modal-action:hover {
    background: var(--color-primary, #C41230) !important;
}

.vtipz-btn-modal-action:disabled {
    background: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
}

.vtipz-btn-modal-cancel {
    height: 46px !important;
    padding: 0 22px !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.vtipz-btn-modal-cancel:hover {
    background: #E2E8F0 !important;
}



/* --- Sub-module: Figma Product Card 1:1 Spec & Breadcrumbs (Original Lines 2970-3221) --- */
/* ==========================================================================
   FIGMA UI STYLING — 100% FAITHFUL TO DESIGN (NODE 174:2, 174:501, 174:1187)
   ========================================================================== */

/* 1. THẺ SẢN PHẨM CHUẨN FIGMA (EL-1845ffdd) */
.vtipz-product-card {
    background: #FFFFFF;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 40px 0 !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s ease;
    position: relative;
    box-sizing: border-box;
}

.vtipz-product-card:hover {
    border-color: var(--color-primary, #C41230) !important;
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.12);
    transform: translateY(-3px);
}

.vtipz-card-thumb-wrap {
    position: relative;
    border-radius: 0 0 40px 0 !important;
    background-color: var(--color-bg-light, #F8F9FA) !important;
    padding-top: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Nhãn — Giảm giá (Figma EL-9705f5c3: top 10px, left 10px, var(--color-primary, #C41230), radius 0 0 12px 0, 11px Bold White) */
.vtipz-badge-discount {
    position: absolute;
    top: 10px !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 0 0 12px 0 !important;
    line-height: 1 !important;
    z-index: 2;
}

/* Nhãn — Chiết khấu đại lý (Figma EL-4dbd62e5: top 10px, right 10px, #009444, radius 12px 0 0 12px, 11px Bold White) */
.vtipz-badge-agency-rate {
    position: absolute;
    top: 10px !important;
    right: 0px !important;
    background-color: #009444 !important;
    color: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 12px 0 0 12px !important;
    line-height: 1 !important;
    z-index: 2;
}

/* Thương hiệu (Figma EL-8e6e105f: 11px Regular, #8A929C) */
.vtipz-card-brand {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #8A929C !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Tên sản phẩm (Figma EL-39922972: 14px SemiBold 600, line-height 20px, #101820) */
.vtipz-card-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    color: #101820 !important;
    margin-bottom: 8px !important;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtipz-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.vtipz-card-title a:hover {
    color: var(--color-primary, #C41230) !important;
}

/* Hàng giá (Figma EL-235879b0: gap 8px) */
.vtipz-card-pricing-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

/* Giá hiện tại (Figma EL-98b72d28: 16px ExtraBold 800, var(--color-primary, #C41230)) */
.vtipz-card-pricing-row .vtipz-price-current {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-primary, #C41230) !important;
}

/* Giá cũ (Figma EL-1deecd42: 12px Regular 400, #8A929C, line-through) */
.vtipz-card-pricing-row .vtipz-price-old {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #8A929C !important;
    text-decoration: line-through !important;
}

/* Chú thích giá sỉ (Figma EL-dafb8f9a: 12px SemiBold 600, #009444) */
.vtipz-card-wholesale-note {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #009444 !important;
    font-style: normal !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.vtipz-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important;
    width: 100% !important;
}

/* Nút — Thêm vào giỏ (Figma EL-f3057079: var(--color-primary, #C41230), 40px height, 100% width, 0 0 16px 0 radius, 14px Bold White) */
.vtipz-btn-add-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    padding: 0 12px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.vtipz-btn-add-cart:hover {
    background-color: var(--color-primary-dark, #9E0E26) !important;
    color: #FFFFFF !important;
}

.vtipz-btn-add-cart:active {
    transform: scale(0.98);
}

/* Nút — Xem giá sỉ (Figma EL-0260534f: #FFFFFF bg, 1.5px solid var(--color-primary, #C41230) border, 40px height, 100% width, 0 0 16px 0 radius, 13px SemiBold var(--color-primary, #C41230)) */
.vtipz-btn-view-wholesale {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background-color: #FFFFFF !important;
    color: var(--color-primary, #C41230) !important;
    border: 1.5px solid var(--color-primary, #C41230) !important;
    border-radius: 0 0 16px 0 !important;
    padding: 0 12px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.vtipz-btn-view-wholesale:hover {
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
}

.vtipz-btn-view-wholesale:active {
    transform: scale(0.98);
}

.vtipz-btn-add-cart span,
.vtipz-btn-view-wholesale span {
    display: inline-block;
    pointer-events: none;
}

/* 2. BREADCRUMB BAR (FIGMA NODE 174:546 & 174:1232) */
.vtipz-breadcrumb-bar {
    background: var(--color-bg-light, #F8F9FA);
    padding: 12px 0;
    border-bottom: 1px solid #E2ECF5;
}

.vtipz-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
}

.vtipz-breadcrumb a {
    color: var(--color-primary, #C41230);
    font-weight: 500;
    text-decoration: none;
}

.vtipz-breadcrumb a:hover {
    color: var(--color-primary, #C41230);
}

.vtipz-bc-sep {
    color: #94A3B8;
}

.vtipz-bc-current {
    color: #1E293B;
    font-weight: 600;
}



/* --- Sub-module: Wireframe Pagination (Original Lines 5426-5467) --- */
/* WIREFRAME PAGINATION */
.vtipz-wireframe-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px 0;
}

.vtipz-wireframe-pagination .page-link,
.vtipz-wireframe-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: #ffffff;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-wireframe-pagination .page-link.current,
.vtipz-wireframe-pagination .page-numbers.current {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.vtipz-wireframe-pagination .page-link.dots,
.vtipz-wireframe-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
}

.vtipz-wireframe-pagination .page-link:hover:not(.current):not(.dots),
.vtipz-wireframe-pagination .page-numbers:hover:not(.current):not(.dots) {
    background-color: var(--color-bg-light);
    border-color: var(--color-blue);
}



/* --- Sub-module: Figma Product Pagination 1:1 Spec (Original Lines 7733-7828) --- */
/* =====================================================================
   PHÂN TRANG SẢN PHẨM - FIGMA NODE 174:996 (100% DESIGN PARITY)
   SYSTEM_RULES.md DIRECTIVE 2 & 3
   ===================================================================== */
.vtipz-pagination-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 40px 0 24px !important;
    clear: both !important;
}

.vtipz-pagination {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Thẻ số trang cơ bản: Figma Frame template EL-552c4eda */
.vtipz-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 10px 14px !important;
    background-color: #F2F2F2 !important; /* Figma fill_c48813f8 */
    color: #4D4D4D !important;            /* Figma fill_e6bac9b0 */
    border-radius: 0 0 10px 0 !important; /* Bo góc bất đối xứng chuẩn Figma 0 0 10px 0 */
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

/* Hover link trang */
.vtipz-pagination a.page-numbers:hover {
    background-color: #E2E8F0 !important;
    color: var(--color-primary, #C41230) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Trang hiện tại: Figma Frame #174:999 */
.vtipz-pagination .page-numbers.current,
.vtipz-pagination span.page-numbers.current {
    background-color: var(--color-primary, #C41230) !important; /* Figma fill_8b14cf5e: Brand Secondary Blue */
    color: #FFFFFF !important;            /* Figma fill_658ab2fa: White */
    font-weight: 700 !important;
    border-radius: 0 0 10px 0 !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.28) !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Nút lùi ‹ và tới ›: Figma Frame #174:997 & #174:1011 */
.vtipz-pagination .page-numbers.prev,
.vtipz-pagination .page-numbers.next {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Trạng thái disabled cho nút điều hướng đầu/cuối */
.vtipz-pagination .page-numbers.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #F8F8F8 !important;
    color: #94A3B8 !important;
}

/* Dấu ba chấm phân trang: Figma Frame #174:1007 */
.vtipz-pagination .page-numbers.dots {
    background-color: transparent !important;
    color: #8A929C !important;
    border: none !important;
    cursor: default !important;
    pointer-events: none !important;
    min-width: 32px !important;
    padding: 0 4px !important;
}

/* ==========================================================================
   RESPONSIVE PRODUCT CARD & SHARED COMPONENTS
   ========================================================================== */
@media (max-width: 768px) {
    .vtipz-breadcrumb-bar {
        padding: 8px 0 !important;
    }

    .vtipz-breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    .vtipz-breadcrumb::-webkit-scrollbar {
        display: none !important;
    }

    .vtipz-product-card {
        padding: 8px !important;
        border-radius: 0 0 24px 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .vtipz-card-thumb-wrap {
        border-radius: 0 0 20px 0 !important;
        margin-bottom: 8px !important;
    }

    .vtipz-badge-discount {
        top: 6px !important;
        font-size: 9px !important;
        padding: 3px 6px !important;
        border-radius: 0 0 6px 0 !important;
    }

    .vtipz-badge-agency-rate {
        top: 6px !important;
        right: 0px !important;
        font-size: 9px !important;
        padding: 3px 6px !important;
        border-radius: 6px 0 0 6px !important;
    }

    .vtipz-card-brand {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    .vtipz-card-title {
        font-size: 12.5px !important;
        line-height: 17px !important;
        min-height: 34px !important;
        margin-bottom: 4px !important;
    }

    .vtipz-card-pricing-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 2px !important;
    }

    .vtipz-card-pricing-row .vtipz-price-current {
        font-size: 14px !important;
    }

    .vtipz-card-pricing-row .vtipz-price-old {
        font-size: 11px !important;
    }

    .vtipz-card-wholesale-note {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .vtipz-card-actions {
        gap: 6px !important;
        margin-top: auto !important;
    }

    .vtipz-btn-add-cart {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        font-size: 11.5px !important;
        padding: 0 6px !important;
        border-radius: 0 0 12px 0 !important;
    }

    .vtipz-btn-view-wholesale {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
        border-radius: 0 0 12px 0 !important;
    }

    /* Mobile pagination buttons */
    .vtipz-pagination .page-numbers,
    .vtipz-pagination a.page-numbers,
    .vtipz-pagination span.page-numbers {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12.5px !important;
        padding: 0 4px !important;
    }
}





/* --- Start home.css --- */
/* --- Sub-module: Homepage Hero, Commitments, Brands, Intro, Categories (Original Lines 789-1311) --- */
/* ==========================================================================
   HERO SECTION (BANNER CHÍNH) - FIGMA NODE 174:48
   ========================================================================== */
.vtipz-hero-section {
    padding: 24px 0;
    background-color: #FFFFFF;
}

.vtipz-hero-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 1. Hàng banner chính (Figma #174:49) */
.vtipz-hero-main-row {
    width: 100%;
}

.vtipz-slider-banner-box {
    position: relative;
    width: 100%;
    height: 460px;
    border-radius: 0 0 140px 0 !important;
    overflow: hidden;
    background-color: var(--color-bg-light, #F8F9FA);
    user-select: none;
}

.vtipz-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.vtipz-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.vtipz-slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
}

.vtipz-slider-content-overlay {
    position: absolute;
    left: 72px;
    top: 90px;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
}

.vtipz-slider-tag {
    color: var(--color-primary, #C41230);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vtipz-slider-headline {
    color: var(--color-primary, #C41230);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.vtipz-slider-sub {
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.vtipz-slider-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.vtipz-btn-slider-buy {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 0 0 16px 0 !important;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vtipz-btn-slider-buy:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.vtipz-btn-slider-agency {
    background-color: #FFFFFF;
    color: var(--color-primary, #C41230);
    border: 2px solid var(--color-primary, #C41230);
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 0 0 16px 0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vtipz-btn-slider-agency:hover {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Nút điều hướng Slide Prev / Next */
.vtipz-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(207, 227, 246, 0.8);
    color: var(--color-primary, #C41230);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.15);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
}

.vtipz-slider-banner-box:hover .vtipz-slider-nav {
    opacity: 1;
    visibility: visible;
}

.vtipz-slider-prev {
    left: 20px;
}

.vtipz-slider-next {
    right: 20px;
}

.vtipz-slider-nav:hover {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    transform: translateY(-50%) scale(1.08);
}

.vtipz-slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

.vtipz-dot {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 6px;
    border-radius: 4px;
    background-color: #CBD5E1;
    cursor: pointer;
    transition: all 0.25s ease;
}

.vtipz-dot:hover {
    background-color: #94A3B8;
}

.vtipz-dot.active {
    background-color: var(--color-primary, #C41230);
    width: 32px;
}

/* 2. Hàng banner phụ (Figma #174:57) */
.vtipz-hero-sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vtipz-sub-banner-card {
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 40px;
    transition: transform 0.25s ease;
}

.vtipz-sub-banner-card:hover {
    transform: translateY(-2px);
}

.banner-sub-1 {
    border-radius: 0 0 80px 0 !important;
    background-image: url('../images/banner-sub.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-sub-2 {
    border-radius: 80px 0 0 0 !important;
    background-image: url('../images/banner-promo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vtipz-sub-banner-card .sub-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin: 0 0 6px 0;
}

.vtipz-sub-banner-card .sub-content p {
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
    margin: 0;
}

/* ==========================================================================
   HERO BANNER RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (min-width: 993px) and (max-width: 1200px) {
    .vtipz-slider-banner-box {
        height: 420px;
        border-radius: 0 0 100px 0 !important;
    }
    .vtipz-slider-content-overlay {
        left: 48px;
        top: 60px;
        max-width: 520px;
    }
    .vtipz-slider-headline {
        font-size: 38px;
    }
}

@media (max-width: 992px) {
    .vtipz-slider-banner-box {
        height: 420px;
        border-radius: 0 0 80px 0 !important;
    }
    .vtipz-slider-content-overlay {
        left: 36px;
        top: 48px;
        right: 36px;
        max-width: 500px;
        gap: 10px;
    }
    .vtipz-slider-headline {
        font-size: 30px;
        line-height: 1.25;
    }
    .vtipz-slider-sub {
        font-size: 14.5px;
    }
    .vtipz-btn-slider-buy,
    .vtipz-btn-slider-agency {
        padding: 10px 22px;
        font-size: 13.5px;
    }
    .vtipz-slider-dots {
        bottom: 16px;
    }
}

@media (max-width: 768px) {
    .vtipz-hero-section {
        padding: 14px 0 20px;
    }
    .vtipz-slider-banner-box {
        height: auto;
        min-height: 480px;
        border-radius: 0 0 54px 0 !important;
    }
    .vtipz-slide {
        min-height: 480px;
        display: flex;
        align-items: flex-start;
        padding: 24px 20px 48px;
        position: relative;
        background-position: right bottom !important;
        background-size: auto 58% !important;
        background-repeat: no-repeat !important;
    }
    .vtipz-slide.has-mobile-img {
        background-image: var(--slide-bg-mobile) !important;
        background-position: center center !important;
        background-size: cover !important;
    }
    .vtipz-slide.has-mobile-img .vtipz-slide-img {
        display: none !important;
    }
    .vtipz-slide:not(.has-mobile-img) .vtipz-slide-img {
        object-position: right bottom;
        object-fit: contain;
        height: 58%;
        top: auto;
        bottom: 0;
    }
    .vtipz-slide::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(180deg, rgba(244, 248, 252, 0.97) 0%, rgba(244, 248, 252, 0.88) 45%, rgba(244, 248, 252, 0.15) 85%);
        z-index: 1;
        pointer-events: none;
    }
    .vtipz-slide.has-mobile-img::before {
        display: none !important;
    }
    .vtipz-slider-content-overlay {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        max-width: 100%;
        gap: 8px;
        z-index: 3;
    }
    .vtipz-slider-tag {
        font-size: 11.5px;
        letter-spacing: 0.8px;
    }
    .vtipz-slider-headline {
        font-size: 24px;
        line-height: 1.25;
    }
    .vtipz-slider-sub {
        font-size: 13px;
        line-height: 1.45;
    }
    .vtipz-slider-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 6px;
    }
    .vtipz-btn-slider-buy,
    .vtipz-btn-slider-agency {
        padding: 8px 16px;
        font-size: 12.5px;
        border-radius: 0 0 12px 0 !important;
        white-space: nowrap;
    }
    .vtipz-slider-dots {
        bottom: 12px;
        gap: 6px;
        z-index: 4;
    }
    .vtipz-dot {
        width: 16px;
        height: 5px;
    }
    .vtipz-dot.active {
        width: 24px;
    }
    .vtipz-slider-nav {
        display: none !important;
    }

    /* Sub banners on mobile */
    .vtipz-hero-sub-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .vtipz-sub-banner-card {
        height: 110px;
        padding-left: 24px;
        padding-right: 20px;
    }
    .banner-sub-1 {
        border-radius: 0 0 36px 0 !important;
    }
    .banner-sub-2 {
        border-radius: 36px 0 0 0 !important;
    }
    .vtipz-sub-banner-card .sub-content h3 {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .vtipz-sub-banner-card .sub-content p {
        font-size: 12.5px;
    }
}

@media (max-width: 480px) {
    .vtipz-slider-banner-box {
        min-height: 470px;
        border-radius: 0 0 44px 0 !important;
    }
    .vtipz-slide {
        min-height: 470px;
        padding: 20px 16px 42px;
    }
    .vtipz-slide:not(.has-mobile-img) {
        background-position: right -10px bottom !important;
        background-size: auto 56% !important;
    }
    .vtipz-slider-headline {
        font-size: 21px;
        line-height: 1.25;
    }
    .vtipz-slider-sub {
        font-size: 12.5px;
        line-height: 1.4;
    }
    .vtipz-slider-actions {
        gap: 6px;
    }
    .vtipz-btn-slider-buy,
    .vtipz-btn-slider-agency {
        padding: 7px 12px;
        font-size: 11.5px;
        border-radius: 0 0 10px 0 !important;
    }
    .vtipz-sub-banner-card {
        height: 96px;
        padding-left: 18px;
    }
    .vtipz-sub-banner-card .sub-content h3 {
        font-size: 16px;
    }
    .vtipz-sub-banner-card .sub-content p {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   CAM KẾT DỊCH VỤ (SERVICE COMMITMENTS)
   ========================================================================== */
.vtipz-commit-section {
    padding: 20px 0;
    background-color: var(--vtipz-bg-light);
    border-top: 1px solid var(--vtipz-border-light);
    border-bottom: 1px solid var(--vtipz-border-light);
}

.vtipz-commit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-commit-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    padding: 16px 20px;
    border-radius: var(--vtipz-radius-md);
    box-shadow: var(--vtipz-shadow-sm);
    border: 1px solid var(--vtipz-border-light);
}

.vtipz-commit-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--vtipz-bg-soft);
    color: var(--vtipz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.vtipz-commit-text h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtipz-primary);
    margin-bottom: 2px;
}

.vtipz-commit-text p {
    font-size: 12px;
    color: var(--vtipz-text-muted);
    line-height: 1.4;
}

/* ==========================================================================
   THƯƠNG HIỆU PHÂN PHỐI
   ========================================================================== */
.vtipz-brands-section {
    padding: 44px 0;
    background-color: #FFFFFF;
}

.vtipz-brands-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.vtipz-brand-item {
    background: var(--vtipz-bg-light);
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-lg);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    flex: 1;
    min-width: 140px;
    transition: all 0.25s ease;
}

.vtipz-brand-item:hover {
    border-color: var(--vtipz-primary-light);
    box-shadow: var(--vtipz-shadow-md);
    transform: translateY(-3px);
}

.brand-logo {
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
}

/* ==========================================================================
   GIỚI THIỆU CÔNG TY - FIGMA NODE 174:98
   ========================================================================== */
.vtipz-about-section {
    padding: 56px 0;
    background-color: var(--color-bg-light, #F8F9FA);
}

.vtipz-about-grid {
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 48px;
    align-items: center;
}

.vtipz-about-media {
    width: 100%;
}

.vtipz-about-img-box {
    width: 560px;
    height: 320px;
    border-radius: 0 0 120px 0 !important;
    overflow: hidden;
    background-color: #E2ECF5;
    box-shadow: 0 12px 32px rgba(196, 18, 48, 0.08);
}

.vtipz-about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vtipz-about-heading {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin-bottom: 14px;
}

.vtipz-about-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 28px;
}

.vtipz-stats-row {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.vtipz-stat-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vtipz-stat-box .stat-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    line-height: 1.1;
}

.vtipz-stat-box .stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}

.vtipz-about-action {
    display: flex;
}

.vtipz-btn-see-more {
    background-color: #FFFFFF;
    color: var(--color-primary, #C41230);
    border: 2px solid var(--color-primary, #C41230);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 0 0 16px 0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vtipz-btn-see-more:hover {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
}

/* ==========================================================================
   DANH MỤC SẢN PHẨM (GRID 12 CATEGORIES)
   ========================================================================== */
.vtipz-categories-section {
    padding: 56px 0;
    background-color: #FFFFFF;
}

.vtipz-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.vtipz-cat-card {
    background-color: var(--vtipz-bg-light);
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-lg);
    padding: 20px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vtipz-cat-card:hover {
    background-color: #FFFFFF;
    border-color: var(--vtipz-primary-light);
    box-shadow: var(--vtipz-shadow-md);
    transform: translateY(-4px);
}

.vtipz-cat-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    overflow: hidden;
}

.vtipz-cat-icon-wrap img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.vtipz-cat-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtipz-text-heading);
    margin-bottom: 4px;
}

.vtipz-cat-count {
    font-size: 11.5px;
    color: var(--vtipz-text-muted);
}

.vtipz-cat-more .vtipz-cat-icon-wrap {
    background-color: var(--vtipz-primary);
    color: #FFFFFF;
    font-size: 20px;
}



/* --- Sub-module: Featured Tabs, Promo Banner, Agency CTA, News/Gallery (Original Lines 1537-1906) --- */
/* ==========================================================================
   FEATURED TABS
   ========================================================================== */
.vtipz-section-header-tabs {
    align-items: center;
}

.vtipz-center-btn-wrap {
    text-align: center;
    margin-top: 36px;
}

/* ==========================================================================
   BANNER KHUYẾN MÃI (PROMO BANNER)
   ========================================================================== */
.vtipz-promo-banner-section {
    padding: 24px 0;
}

.vtipz-promo-banner-wrap {
    border-radius: var(--vtipz-radius-xl);
    overflow: hidden;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-promo-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.vtipz-promo-img:hover {
    transform: scale(1.01);
}

/* ==========================================================================
   KÊU GỌI ĐĂNG KÝ ĐẠI LÝ (AGENCY CTA BOX)
   ========================================================================== */
.vtipz-agency-cta-section {
    padding: 60px 0;
}

.vtipz-agency-cta-box {
    background: linear-gradient(135deg, var(--color-primary-dark, #9E0E26) 0%, var(--color-primary, #C41230) 60%, var(--color-primary, #C41230) 100%);
    border-radius: var(--vtipz-radius-xl);
    padding: 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    box-shadow: var(--vtipz-shadow-lg);
    color: #FFFFFF;
}

.vtipz-badge-cta {
    background-color: var(--vtipz-accent);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.vtipz-agency-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #FFFFFF;
}

.vtipz-agency-desc {
    font-size: 15px;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 24px;
}

.vtipz-agency-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
}

.benefit-item i {
    color: var(--vtipz-accent);
    font-size: 18px;
}

.vtipz-form-card {
    background: #FFFFFF;
    color: var(--vtipz-text-dark);
    padding: 32px;
    border-radius: var(--vtipz-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.form-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--vtipz-primary);
    margin-bottom: 6px;
    text-align: center;
}

.form-sub {
    font-size: 13px;
    color: var(--vtipz-text-muted);
    text-align: center;
    margin-bottom: 20px;
}

.vtipz-form-group {
    margin-bottom: 14px;
}

.vtipz-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--vtipz-border);
    border-radius: var(--vtipz-radius-md);
    background-color: var(--vtipz-bg-light);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.vtipz-input:focus {
    border-color: var(--vtipz-primary);
    background-color: #FFFFFF;
}

.vtipz-form-msg {
    margin-top: 12px;
    font-size: 13.5px;
    text-align: center;
    font-weight: 600;
}

.vtipz-form-msg.success { color: var(--vtipz-success); }
.vtipz-form-msg.error { color: var(--vtipz-danger); }

/* ==========================================================================
   GALLERY / TIN TỨC / NEWSLETTER
   ========================================================================== */
.vtipz-gallery-section, .vtipz-news-section {
    padding: 56px 0;
}

.vtipz-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.vtipz-gallery-item {
    position: relative;
    border-radius: var(--vtipz-radius-lg);
    overflow: hidden;
    height: 260px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.vtipz-gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
}

/* News Cards */
.vtipz-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vtipz-news-card {
    background: #FFFFFF;
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-lg);
    overflow: hidden;
    box-shadow: var(--vtipz-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.vtipz-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vtipz-shadow-md);
}

.news-thumb-link {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.vtipz-news-card:hover .news-img {
    transform: scale(1.06);
}

.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-meta {
    font-size: 12px;
    color: var(--vtipz-text-muted);
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.news-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.news-title a { color: var(--vtipz-text-heading); }
.news-title a:hover { color: var(--vtipz-primary); }

.news-excerpt {
    font-size: 13.5px;
    color: var(--vtipz-text-body);
    margin-bottom: 14px;
    line-height: 1.5;
}

.news-read-more {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtipz-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}




/* --- Sub-module: Homepage Figma Sections 1:1 Spec (Original Lines 4210-4828) --- */
/* ==========================================================================
   HOMEPAGE FIGMA SECTIONS (NODE 174:2)
   ========================================================================== */

/* KHỐI 2: CAM KẾT DỊCH VỤ (Figma #174:62) */
.vtipz-commit-section {
    padding: 20px 0;
    background-color: var(--color-bg-light, #F8F9FA);
    border-top: 1px solid var(--color-border, #E5E7EB);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-commit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-commit-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    padding: 14px 20px;
    border-radius: 0 0 16px 0 !important;
    box-shadow: 0 2px 8px rgba(196, 18, 48, 0.04);
    border: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-commit-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-bg-light, #F8F9FA);
    color: var(--color-primary, #C41230);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.vtipz-commit-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
}

/* KHỐI 3: THƯƠNG HIỆU PHÂN PHỐI (Figma #174:77) - SLIDER 1 HÀNG KÉO TRƯỢT & NÚT ĐIỀU HƯỚNG */
.vtipz-brands-section {
    padding: 44px 0;
    background-color: #FFFFFF;
    position: relative;
}

.vtipz-section-title-clean {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    line-height: 1.3;
}

.vtipz-brands-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.vtipz-brands-header-left {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
}

.vtipz-link-arrow {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.vtipz-link-arrow:hover {
    color: var(--color-primary, #C41230);
}

/* Nút điều hướng header góc phải */
.vtipz-brands-nav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-brand-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border, #E5E7EB);
    background: #FFFFFF;
    color: var(--color-primary, #C41230);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.08);
    padding: 0;
}

.vtipz-brand-nav-btn:hover:not(:disabled) {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.22);
}

.vtipz-brand-nav-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.95);
}

.vtipz-brand-nav-btn:disabled,
.vtipz-brand-nav-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #E2E8F0;
    color: #94A3B8;
    background: #F8FAFC;
    transform: none !important;
    box-shadow: none !important;
}

/* Khung bọc Track + Nút nổi (Floating Arrows) */
.vtipz-brands-slider-track-wrap {
    position: relative;
    width: 100%;
}

.vtipz-brands-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
    padding: 6px 2px 14px 2px;
    cursor: grab;
    user-select: none;
}

.vtipz-brands-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.vtipz-brands-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
    user-select: none;
}

.vtipz-brands-track.is-dragging a {
    pointer-events: none;
}

/* Item thương hiệu 1 dòng:
   Mặc định PC: 8 thương hiệu hiển thị vừa vặn trong 1 khung nhìn (100% - 7*16px)/8 = calc((100% - 112px) / 8)
*/
.vtipz-brand-item {
    flex: 0 0 calc((100% - 112px) / 8);
    width: calc((100% - 112px) / 8);
    min-width: 135px;
    scroll-snap-align: start;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 16px 0 !important;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.04);
    transition: all 0.25s ease;
}

.vtipz-brand-item:hover {
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 8px 20px rgba(196, 18, 48, 0.12);
    transform: translateY(-2px);
}

.vtipz-brand-item .brand-logo {
    max-height: 44px;
    max-width: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Nút điều hướng nổi 2 bên (Floating Arrows) */
.vtipz-brand-float-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    color: var(--color-primary, #C41230);
    box-shadow: 0 4px 16px rgba(196, 18, 48, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s ease;
    opacity: 0;
    visibility: hidden;
    padding: 0;
}

.vtipz-brands-slider-track-wrap:hover .vtipz-brand-float-arrow {
    opacity: 1;
    visibility: visible;
}

.vtipz-brand-float-prev {
    left: -18px;
}

.vtipz-brand-float-next {
    right: -18px;
}

.vtipz-brand-float-arrow:hover:not(:disabled) {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.28);
}

.vtipz-brand-float-arrow:disabled,
.vtipz-brand-float-arrow.is-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* Responsive cho thương hiệu 1 dòng */
@media (max-width: 1200px) {
    .vtipz-brand-item {
        flex: 0 0 calc((100% - 80px) / 6);
        width: calc((100% - 80px) / 6);
        min-width: 125px;
    }
}

@media (max-width: 991px) {
    .vtipz-brand-float-arrow {
        display: none !important;
    }
    .vtipz-brand-item {
        flex: 0 0 calc((100% - 64px) / 5);
        width: calc((100% - 64px) / 5);
        min-width: 115px;
    }
}

@media (max-width: 768px) {
    .vtipz-brands-header {
        align-items: center;
    }
    .vtipz-brand-item {
        flex: 0 0 calc((100% - 48px) / 3.8);
        width: calc((100% - 48px) / 3.8);
        min-width: 105px;
        height: 68px;
        padding: 8px 10px;
    }
    .vtipz-brand-item .brand-logo {
        max-height: 36px;
    }
}

@media (max-width: 480px) {
    .vtipz-brand-item {
        flex: 0 0 calc((100% - 32px) / 2.6);
        width: calc((100% - 32px) / 2.6);
        min-width: 95px;
    }
}

/* KHỐI 5: DANH MỤC SẢN PHẨM (Figma #174:117) - SLIDER 1 HÀNG KÉO TRƯỢT & NÚT ĐIỀU HƯỚNG */
.vtipz-categories-section {
    padding: 56px 0 40px;
    background-color: #FFFFFF;
}

.vtipz-cat-group-slider-wrap {
    position: relative;
    margin-bottom: 38px;
}

.vtipz-cat-group-slider-wrap:last-child {
    margin-bottom: 0;
}

.vtipz-cat-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 16px;
}

.vtipz-cat-group-header .vtipz-cat-group-title,
.vtipz-cat-group-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin-bottom: 0;
    letter-spacing: -0.2px;
}

/* Cụm nút điều hướng góc phải Header */
.vtipz-cat-nav-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-cat-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border, #E5E7EB);
    background: #FFFFFF;
    color: var(--color-primary, #C41230);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.08);
    padding: 0;
}

.vtipz-cat-nav-btn:hover:not(:disabled) {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.22);
}

.vtipz-cat-nav-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.95);
}

.vtipz-cat-nav-btn:disabled,
.vtipz-cat-nav-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #E2E8F0;
    color: #94A3B8;
    background: #F8FAFC;
    transform: none !important;
    box-shadow: none !important;
}

/* Khung bọc Track + Nút nổi (Floating Arrows) */
.vtipz-cat-slider-track-wrap {
    position: relative;
    width: 100%;
}

.vtipz-category-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
    padding: 8px 4px 14px 4px;
    cursor: grab;
    user-select: none;
}

.vtipz-category-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.vtipz-category-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
    user-select: none;
}

.vtipz-category-track.is-dragging a {
    pointer-events: none;
}

/* Category card bên trong track 1 hàng (Mặc định PC: 5 item / hàng) */
.vtipz-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

.vtipz-category-track .vtipz-cat-card {
    flex: 0 0 calc((100% - 80px) / 5);
    width: calc((100% - 80px) / 5);
    max-width: calc((100% - 80px) / 5);
    scroll-snap-align: start;
}

.vtipz-cat-img-box {
    width: 124px;
    height: 124px;
    border-radius: 50% !important;
    background-color: var(--color-bg-light, #F8F9FA);
    border: 2px solid var(--color-border, #E5E7EB);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.06);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vtipz-cat-img-box img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    transition: transform 0.25s ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.vtipz-cat-card:hover .vtipz-cat-img-box {
    border-color: var(--color-primary, #C41230);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.22);
    background-color: #EBF4FC;
}

.vtipz-cat-card:hover .vtipz-cat-img-box img {
    transform: scale(1.08);
}

.vtipz-cat-label {
    margin-top: 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1E293B;
    text-align: center;
    line-height: 1.35;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px;
}

.vtipz-cat-card:hover .vtipz-cat-label {
    color: var(--color-primary, #C41230);
}

/* Nút điều hướng nổi 2 bên (Floating Arrows) */
.vtipz-cat-float-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    color: var(--color-primary, #C41230);
    box-shadow: 0 4px 16px rgba(196, 18, 48, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s ease;
    opacity: 0;
    visibility: hidden;
    padding: 0;
}

.vtipz-cat-slider-track-wrap:hover .vtipz-cat-float-arrow {
    opacity: 1;
    visibility: visible;
}

.vtipz-cat-float-prev {
    left: -18px;
}

.vtipz-cat-float-next {
    right: -18px;
}

.vtipz-cat-float-arrow:hover:not(:disabled) {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.28);
}

.vtipz-cat-float-arrow:disabled,
.vtipz-cat-float-arrow.is-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* Tương thích ngược nếu còn dùng vtipz-category-grid */
.vtipz-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

/* Responsive cho slider danh mục */
@media (max-width: 991px) {
    .vtipz-cat-float-arrow {
        display: none !important;
    }
    .vtipz-category-track {
        gap: 16px;
    }
    .vtipz-category-track .vtipz-cat-card {
        flex: 0 0 calc((100% - 48px) / 4);
        width: calc((100% - 48px) / 4);
        max-width: calc((100% - 48px) / 4);
        min-width: 130px;
    }
    .vtipz-cat-img-box {
        width: 104px;
        height: 104px;
    }
    .vtipz-cat-img-box img {
        width: 68px;
        height: 68px;
    }
    .vtipz-cat-label {
        font-size: 13px;
        min-height: 34px;
    }
}

@media (max-width: 767px) {
    .vtipz-category-track {
        gap: 14px;
    }
    .vtipz-category-track .vtipz-cat-card {
        flex: 0 0 calc((100% - 28px) / 3);
        width: calc((100% - 28px) / 3);
        max-width: calc((100% - 28px) / 3);
        min-width: 115px;
    }
}

@media (max-width: 576px) {
    .vtipz-category-track {
        gap: 12px;
        padding-bottom: 10px;
    }
    .vtipz-category-track .vtipz-cat-card {
        flex: 0 0 calc((100% - 16px) / 2.35);
        width: calc((100% - 16px) / 2.35);
        max-width: calc((100% - 16px) / 2.35);
        min-width: 105px;
    }
    .vtipz-cat-img-box {
        width: 92px;
        height: 92px;
    }
    .vtipz-cat-img-box img {
        width: 60px;
        height: 60px;
    }
    .vtipz-cat-label {
        font-size: 12px;
        min-height: 32px;
        margin-top: 8px;
    }
    .vtipz-cat-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* KHỐI 6: SẢN PHẨM MỚI (Figma #174:173) */
.vtipz-new-products-section {
    padding: 48px 0;
    background-color: var(--color-bg-light, #F8F9FA);
}

/* KHỐI 7: SẢN PHẨM NỔI BẬT (Figma #174:230) */
.vtipz-featured-products-section {
    padding: 56px 0;
    background-color: #FFFFFF;
}

.vtipz-featured-products-section .vtipz-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.vtipz-filter-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
    background: transparent;
    padding: 0;
    margin: 0;
}

.vtipz-tab-btn {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 24px !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    line-height: 1.2;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    user-select: none;
}

.vtipz-tab-btn.active {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25);
    transform: translateY(-1px);
}

.vtipz-tab-btn:hover:not(.active) {
    background-color: #E2EEF9;
    color: var(--color-primary, #C41230);
    border-color: var(--color-border, #E5E7EB);
}

/* Responsive riêng biệt cho Khối Sản phẩm nổi bật */
@media (max-width: 992px) {
    .vtipz-featured-products-section .vtipz-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px;
    }

    .vtipz-featured-products-section .vtipz-section-title-clean {
        width: 100%;
        font-size: 22px;
        line-height: 1.3;
        white-space: normal;
    }

    .vtipz-featured-products-section .vtipz-filter-tabs {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 4px 2px 8px 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .vtipz-featured-products-section .vtipz-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .vtipz-tab-btn {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 20px !important;
    }
}

@media (max-width: 576px) {
    .vtipz-featured-products-section {
        padding: 36px 0;
    }

    .vtipz-featured-products-section .vtipz-section-header {
        gap: 12px !important;
        margin-bottom: 18px;
    }

    .vtipz-featured-products-section .vtipz-section-title-clean {
        font-size: 20px;
    }

    .vtipz-tab-btn {
        padding: 7px 14px;
        font-size: 12.5px;
    }
}

/* Container bọc Grid sản phẩm + Loader AJAX */
.vtipz-featured-grid-wrap {
    position: relative;
    min-height: 280px;
}

.vtipz-featured-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.vtipz-spinner {
    width: 42px;
    height: 42px;
    border: 3.5px solid var(--color-border, #E5E7EB);
    border-top-color: var(--color-primary, #C41230);
    border-radius: 50%;
    animation: vtipzSpin 0.75s linear infinite;
}

@keyframes vtipzSpin {
    to { transform: rotate(360deg); }
}

.vtipz-featured-grid-wrap.is-loading #vtipzFeaturedGrid {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(15%);
}

#vtipzFeaturedGrid {
    transition: opacity 0.25s ease;
}

.vtipz-btn-outline-figma {
    background-color: #FFFFFF;
    color: var(--color-primary, #C41230);
    border: 2px solid var(--color-primary, #C41230);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 0 0 16px 0 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.vtipz-btn-outline-figma:hover {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
}

/* KHỐI 8: BANNER KHUYẾN MÃI (Figma #174:350) */
.vtipz-promo-banner-section {
    padding: 24px 0;
    background-color: var(--color-bg-light, #F8F9FA);
}

.vtipz-promo-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vtipz-promo-card {
    height: 170px;
    border-radius: 0 0 64px 0 !important;
    overflow: hidden;
    display: block;
    box-shadow: 0 4px 16px rgba(196, 18, 48, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vtipz-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.16);
}

.vtipz-promo-card .vtipz-promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* KHỐI 9: KÊU GỌI ĐĂNG KÝ ĐẠI LÝ (Figma #174:358) */
.vtipz-agency-cta-section {
    padding: 32px 0 48px;
    background-color: #FFFFFF;
}

.vtipz-agency-cta-box {
    background-color: var(--color-primary, #C41230);
    border-radius: 0 0 100px 0 !important;
    padding: 44px 56px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: center;
    box-shadow: 0 12px 36px rgba(196, 18, 48, 0.22);
}

.vtipz-agency-title {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
    line-height: 1.3;
}

.vtipz-agency-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
}

.vtipz-agency-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.vtipz-btn-agency-primary {
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 0 0 18px 0 !important;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transition: background 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vtipz-btn-agency-primary:hover {
    background-color: var(--color-primary-dark, #9E0E26);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.vtipz-btn-agency-secondary {
    background-color: #FFFFFF;
    color: var(--color-primary, #C41230);
    font-size: 14.5px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 0 0 18px 0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vtipz-btn-agency-secondary:hover {
    background-color: var(--color-bg-light, #F8F9FA);
    color: var(--color-primary, #C41230);
}

.vtipz-agency-media {
    width: 420px;
    height: 220px;
    border-radius: 100px 0 0 0 !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.vtipz-agency-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* KHỐI 10: HÌNH ẢNH & VIDEO (Figma #174:371) */
.vtipz-gallery-section {
    padding: 48px 0;
    background-color: #FFFFFF;
}

.vtipz-gallery-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.vtipz-gallery-video-card {
    height: 320px;
    border-radius: 0 0 100px 0 !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.12);
    cursor: pointer;
    background-color: var(--color-primary, #C41230);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vtipz-gallery-video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(196, 18, 48, 0.2);
}

.vtipz-video-link-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.vtipz-gallery-video-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vtipz-gallery-video-card:hover .vtipz-gallery-video-img {
    transform: scale(1.06);
}

.vtipz-video-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(196, 18, 48, 0.1) 0%, rgba(10, 35, 60, 0.65) 100%);
    pointer-events: none;
    transition: background 0.3s ease;
}

.vtipz-gallery-video-card:hover .vtipz-video-overlay-gradient {
    background: linear-gradient(180deg, rgba(196, 18, 48, 0.2) 0%, rgba(10, 35, 60, 0.75) 100%);
}

.vtipz-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 2;
}

.vtipz-video-play-btn::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(196, 18, 48, 0.6);
    animation: vtipzPulse 2s infinite;
}

.vtipz-gallery-video-card:hover .vtipz-video-play-btn {
    transform: translate(-50%, -50%) scale(1.12);
    background-color: #ff772e;
    box-shadow: 0 10px 30px rgba(196, 18, 48, 0.6);
}

.vtipz-video-zoom-hint {
    position: absolute;
    bottom: 18px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(196, 18, 48, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FFFFFF;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    z-index: 2;
}

.vtipz-gallery-video-card:hover .vtipz-video-zoom-hint {
    background: var(--color-primary, #C41230);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.5);
}

.vtipz-gallery-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vtipz-gallery-photo-item {
    height: 152px;
    border-radius: 0 0 48px 0 !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.08);
    cursor: pointer;
    background-color: #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vtipz-gallery-photo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(196, 18, 48, 0.16);
}

.vtipz-gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vtipz-gallery-photo-item:hover img {
    transform: scale(1.08);
}

.vtipz-photo-zoom-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(196, 18, 48, 0.15) 0%, rgba(196, 18, 48, 0.82) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.vtipz-gallery-photo-item:hover .vtipz-photo-zoom-overlay {
    opacity: 1;
}

.vtipz-zoom-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vtipz-gallery-photo-item:hover .vtipz-zoom-icon {
    transform: scale(1);
}

.vtipz-zoom-text {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.2px;
}

@keyframes vtipzPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(196, 18, 48, 0.6);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(196, 18, 48, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(196, 18, 48, 0);
    }
}

/* =========================================================================
   MEDIA LIGHTBOX GALLERY MODAL
   ========================================================================= */
.vtipz-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
    user-select: none;
    overflow: hidden;
}

.vtipz-lightbox-modal.show {
    opacity: 1;
    visibility: visible;
}

.vtipz-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(9, 21, 37, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.vtipz-lightbox-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: max(16px, env(safe-area-inset-top, 16px)) 24px max(14px, env(safe-area-inset-bottom, 14px)) 24px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Top Toolbar */
.vtipz-lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    z-index: 10;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 12px;
}

.vtipz-lightbox-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #E2E8F0;
    font-size: 14px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.vtipz-lightbox-counter {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px 12px;
    border-radius: 14px;
    font-weight: 600;
    color: #F5BD06;
    font-size: 13px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.vtipz-lightbox-divider {
    opacity: 0.4;
    flex-shrink: 0;
}

.vtipz-lightbox-title {
    font-weight: 500;
    color: #F8FAFC;
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.vtipz-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.vtipz-lightbox-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    outline: none;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .vtipz-lightbox-btn:hover {
        background: var(--color-primary, #C41230);
        border-color: var(--color-primary, #C41230);
        transform: scale(1.08);
        box-shadow: 0 4px 14px rgba(196, 18, 48, 0.4);
    }
}

.vtipz-lightbox-btn:active {
    transform: scale(0.94);
}

.vtipz-lightbox-btn-close {
    font-size: 18px;
    background: rgba(196, 18, 48, 0.25);
    border-color: rgba(196, 18, 48, 0.5);
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .vtipz-lightbox-btn-close:hover {
        background: #e0550d;
        border-color: #e0550d;
    }
}

/* Viewport & Navigation */
.vtipz-lightbox-viewport {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.vtipz-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    outline: none;
}

.vtipz-lightbox-nav-prev {
    left: 14px;
}

.vtipz-lightbox-nav-next {
    right: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .vtipz-lightbox-nav:hover {
        background: var(--color-primary, #C41230);
        border-color: var(--color-primary, #C41230);
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 6px 18px rgba(196, 18, 48, 0.4);
    }
}

.vtipz-lightbox-nav:active {
    background: var(--color-primary, #C41230);
    transform: translateY(-50%) scale(0.95);
}

.vtipz-lightbox-stage {
    flex: 1;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.vtipz-lightbox-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary, #C41230);
    font-size: 32px;
    display: none;
    z-index: 5;
}

.vtipz-lightbox-loading.show {
    display: block;
}

.vtipz-lightbox-media-wrap {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Image Presentation */
.vtipz-lightbox-img {
    max-width: 86vw;
    max-height: calc(100dvh - 170px);
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    user-select: none;
    cursor: zoom-in;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.vtipz-lightbox-img.is-zoomed {
    cursor: zoom-out;
    transform: scale(1.55);
}

/* Video Presentation */
.vtipz-lightbox-video-container {
    width: 82vw;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    background: #000000;
    position: relative;
}

.vtipz-lightbox-video-container iframe,
.vtipz-lightbox-video-container video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Bottom Thumbnails Strip */
.vtipz-lightbox-thumbs-bar {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
    z-index: 10;
    box-sizing: border-box;
}

.vtipz-lightbox-thumbs-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 12px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.vtipz-lightbox-thumbs-track::-webkit-scrollbar {
    display: none;
}

.vtipz-lightbox-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    opacity: 0.55;
    transition: all 0.22s ease;
    position: relative;
    flex-shrink: 0;
    background: #111827;
}

.vtipz-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .vtipz-lightbox-thumb:hover {
        opacity: 0.88;
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-2px);
    }
}

.vtipz-lightbox-thumb.active {
    border-color: var(--color-primary, #C41230);
    opacity: 1;
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.6);
}

.vtipz-lightbox-thumb-video-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    font-size: 14px;
}

/* Mobile & Tablet Responsiveness for Lightbox */
@media (max-width: 768px) {
    .vtipz-lightbox-dialog {
        padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(10px, env(safe-area-inset-bottom, 10px)) 12px;
    }

    .vtipz-lightbox-toolbar {
        padding-bottom: 8px;
        gap: 8px;
    }

    .vtipz-lightbox-meta {
        gap: 6px;
        font-size: 12px;
    }

    .vtipz-lightbox-counter {
        padding: 3px 9px;
        font-size: 12px;
        border-radius: 12px;
    }

    .vtipz-lightbox-title {
        max-width: 140px;
        font-size: 12px;
    }

    .vtipz-lightbox-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .vtipz-lightbox-btn-close {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .vtipz-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 15px;
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .vtipz-lightbox-nav-prev {
        left: 6px;
    }

    .vtipz-lightbox-nav-next {
        right: 6px;
    }

    .vtipz-lightbox-img {
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 145px);
        border-radius: 8px;
    }

    .vtipz-lightbox-img.is-zoomed {
        transform: scale(1.3);
    }

    .vtipz-lightbox-video-container {
        width: 96vw;
        border-radius: 10px;
    }

    .vtipz-lightbox-thumbs-bar {
        height: auto;
        min-height: 52px;
        padding-top: 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
    }

    .vtipz-lightbox-thumbs-track {
        gap: 8px;
        padding: 4px 10px;
    }

    .vtipz-lightbox-thumb {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
}

@media (max-width: 520px) {
    /* Ẩn các nút phóng to và toàn màn hình trên điện thoại nhỏ để thanh công cụ không bị tràn */
    #vtipzLightboxZoom,
    #vtipzLightboxFullscreen {
        display: none !important;
    }

    .vtipz-lightbox-toolbar {
        justify-content: space-between;
    }

    .vtipz-lightbox-meta {
        max-width: calc(100% - 46px);
    }

    .vtipz-lightbox-title {
        max-width: calc(100vw - 160px);
    }

    .vtipz-lightbox-btn-close {
        margin-left: auto;
    }

    .vtipz-lightbox-thumbs-track {
        justify-content: flex-start;
    }

    .vtipz-lightbox-thumbs-track:not(:has(.vtipz-lightbox-thumb:nth-child(6))) {
        justify-content: safe center;
    }
}


/* KHỐI 11: TIN TỨC MỚI (Figma #174:389) */
.vtipz-news-section {
    padding: 48px 0;
    background-color: var(--color-bg-light, #F8F9FA);
}

.vtipz-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.vtipz-news-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 24px 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.04);
    transition: all 0.25s ease;
}

.vtipz-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(196, 18, 48, 0.12);
}

.news-thumb-box {
    height: 170px;
    border-radius: 0 0 40px 0 !important;
    overflow: hidden;
}

.news-thumb-box .news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.vtipz-news-card:hover .news-thumb-box .news-img {
    transform: scale(1.06);
}

.news-content {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-cat-date {
    font-size: 11px;
    font-weight: 700;
    color: #8A929C;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.news-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-excerpt {
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.news-read-more:hover {
    color: var(--color-primary, #C41230);
}

/* KHỐI 12: ĐĂNG KÝ NHẬN TIN (Figma #174:422) */
.vtipz-newsletter-section {
    padding: 32px 0;
    background-color: var(--color-bg-light, #F8F9FA);
    border-top: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-newsletter-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 32px !important;
}

.newsletter-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.newsletter-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-primary, #C41230) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.newsletter-desc {
    font-size: 14px !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.vtipz-newsletter-form-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 1 !important;
    max-width: 480px !important;
    width: 100% !important;
}

/* Fallback Native Form */
.newsletter-form {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.newsletter-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
}

.newsletter-input {
    width: 320px !important;
    height: 48px !important;
    padding: 0 18px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-border, #E5E7EB) !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.newsletter-input:focus {
    border-color: var(--color-primary, #C41230) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.newsletter-input::placeholder {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
}

.newsletter-btn {
    height: 48px !important;
    padding: 0 28px !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.newsletter-btn:hover {
    background-color: var(--color-primary-dark, #9E0E26) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.3) !important;
}

.newsletter-btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Fluent Form 5 (Newsletter) 100% Figma Node #174:422 */
.vtipz-newsletter-form-container .fluentform,
.vtipz-newsletter-form-container .fluentform_wrapper_5 {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform form,
.fluentform_wrapper_5 form {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.vtipz-newsletter-form-container .fluentform form fieldset,
.fluentform_wrapper_5 form fieldset {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.vtipz-newsletter-form-container .ff_screen_reader_title,
.fluentform_wrapper_5 .ff_screen_reader_title,
.vtipz-newsletter-form-container .ff-el-input--label,
.fluentform_wrapper_5 .ff-el-input--label {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-group:not(.ff_submit_btn_wrapper),
.fluentform_wrapper_5 .ff-el-group:not(.ff_submit_btn_wrapper) {
    flex: 1 1 auto !important;
    max-width: 330px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-input--content,
.fluentform_wrapper_5 .ff-el-input--content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control,
.fluentform_wrapper_5 .ff-el-form-control {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 18px !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-border, #E5E7EB) !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control:focus,
.fluentform_wrapper_5 .ff-el-form-control:focus {
    border-color: var(--color-primary, #C41230) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control::placeholder,
.fluentform_wrapper_5 .ff-el-form-control::placeholder {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
}

.vtipz-newsletter-form-container .fluentform .ff_submit_btn_wrapper,
.fluentform_wrapper_5 .ff_submit_btn_wrapper {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit,
.vtipz-newsletter-form-container .fluentform button[type="submit"],
.fluentform_wrapper_5 .ff-btn-submit,
.fluentform_wrapper_5 button[type="submit"] {
    height: 48px !important;
    padding: 0 28px !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit:hover,
.vtipz-newsletter-form-container .fluentform button[type="submit"]:hover,
.fluentform_wrapper_5 .ff-btn-submit:hover,
.fluentform_wrapper_5 button[type="submit"]:hover {
    background-color: var(--color-primary-dark, #9E0E26) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.3) !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit:active,
.vtipz-newsletter-form-container .fluentform button[type="submit"]:active,
.fluentform_wrapper_5 .ff-btn-submit:active,
.fluentform_wrapper_5 button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.fluentform_wrapper_5 .ff-errors-in-stack,
.vtipz-newsletter-form-container .fluentform .ff-errors-in-stack,
.fluentform_wrapper_5 .ff-error-text,
.vtipz-newsletter-form-container .fluentform .ff-error-text {
    color: #EF4444 !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
}

.fluentform_wrapper_5 .ff-message-success,
.vtipz-newsletter-form-container .fluentform .ff-message-success {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 0 0 16px 0 !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

@media (max-width: 768px) {
    .vtipz-newsletter-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    .vtipz-newsletter-form-container {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .vtipz-newsletter-form-container .fluentform,
    .vtipz-newsletter-form-container .fluentform_wrapper_5 {
        max-width: 100% !important;
    }
    .vtipz-newsletter-form-container .fluentform form fieldset,
    .fluentform_wrapper_5 form fieldset {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .vtipz-newsletter-form-container .fluentform form fieldset,
    .fluentform_wrapper_5 form fieldset,
    .newsletter-input-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .vtipz-newsletter-form-container .fluentform .ff-el-group:not(.ff_submit_btn_wrapper),
    .fluentform_wrapper_5 .ff-el-group:not(.ff_submit_btn_wrapper),
    .newsletter-input {
        max-width: 100% !important;
        width: 100% !important;
    }
    .vtipz-newsletter-form-container .fluentform .ff_submit_btn_wrapper,
    .fluentform_wrapper_5 .ff_submit_btn_wrapper,
    .vtipz-newsletter-form-container .fluentform .ff-btn-submit,
    .fluentform_wrapper_5 .ff-btn-submit,
    .newsletter-btn {
        width: 100% !important;
    }
}





/* --- Start nhaphuong-home.css --- */
/* ==========================================================================
   NHA PHUONG FIGMA DESIGN SYSTEM (100% MATCH CANVAS NODE 77:3)
   Primary Red: #B70000 | Dark: #141414 | Gray Light: #F7F2F2 | White: #FFFFFF
   Font Family: 'Inter', sans-serif
   ========================================================================== */

:root {
    --np-red: #B70000;
    --np-red-hover: #960000;
    --np-dark: #141414;
    --np-gray-bg: #F7F2F2;
    --np-border: #E8E5E5;
    --np-text-muted: #555555;
    --np-gold: #D4AF37;
    --np-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--np-font) !important;
    color: var(--np-dark);
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

/* Universal Container: 1440px Canvas with 80px Figma Side Padding (1280px content box) */
.nhaphuong-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .nhaphuong-container {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 1024px) {
    .nhaphuong-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (min-width: 1280px) {
    .nhaphuong-container {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* Typography Utilities */
.np-eyebrow-red {
    display: inline-block;
    color: var(--np-red);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.np-eyebrow-red-muted {
    display: inline-block;
    color: #FF6B6B;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.np-section-title-40 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--np-dark);
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.np-card-title-20 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--np-dark);
    margin: 0 0 10px 0;
}

.np-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--np-text-muted);
    margin: 0;
}

.np-card-link-red {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--np-red);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.np-card-link-red:hover {
    gap: 10px;
    color: var(--np-red-hover);
}

/* Spacing Helpers (Figma 96px & 80px) */
.py-80, .py-96 { padding: 96px 0; }
@media (max-width: 768px) {
    .py-80, .py-96 { padding: 56px 0; }
}
.bg-gray-f7 { background-color: var(--np-gray-bg); }
.bg-dark-14 { background-color: var(--np-dark); }
.bg-red-b7  { background-color: var(--np-red); }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.text-center { text-align: center; }
.text-white { color: #FFFFFF !important; }

/* Buttons */
.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.np-btn-red {
    background-color: var(--np-red);
    color: #FFFFFF !important;
    border: 1px solid var(--np-red);
}

.np-btn-red:hover {
    background-color: var(--np-red-hover);
    border-color: var(--np-red-hover);
    transform: translateY(-1px);
}

.np-btn-outline-white {
    background-color: transparent;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.np-btn-outline-white:hover {
    background-color: #FFFFFF;
    color: var(--np-dark) !important;
    transform: translateY(-1px);
}

.np-btn-outline-black {
    background-color: transparent;
    color: var(--np-dark) !important;
    border: 1px solid var(--np-dark);
}

.np-btn-outline-black:hover {
    background-color: var(--np-dark);
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.np-btn-white-red {
    background-color: #FFFFFF;
    color: var(--np-red) !important;
    border: 1px solid #FFFFFF;
}

.np-btn-white-red:hover {
    background-color: #F8F8F8;
    transform: translateY(-1px);
}

/* ==========================================================================
   HEADER (FIGMA NODE 77:4)
   ========================================================================== */
.nhaphuong-site-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

/* Topbar #141414 */
.nhaphuong-topbar {
    background-color: var(--np-dark);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    padding: 10px 0;
    line-height: 1.4;
}

.nhaphuong-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nhaphuong-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #CCCCCC;
}

.nhaphuong-topbar-left a {
    color: #FFFFFF;
    text-decoration: none;
}

.nhaphuong-topbar-left a:hover {
    text-decoration: underline;
}

.topbar-sep {
    color: #666666;
    margin: 0 4px;
}

.nhaphuong-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-link {
    color: #CCCCCC;
    text-decoration: none;
    transition: color 0.2s ease;
}

.topbar-link:hover {
    color: #FFFFFF;
}

.topbar-btn-mua-online {
    display: inline-block;
    background-color: var(--np-red);
    color: #FFFFFF !important;
    padding: 5px 14px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    margin-left: 8px;
    transition: background-color 0.2s ease;
}

.topbar-btn-mua-online:hover {
    background-color: var(--np-red-hover);
}

/* Main Navbar #FFFFFF */
.nhaphuong-navbar {
    background-color: #FFFFFF;
    padding: 18px 0;
    border-bottom: 1px solid #ECECEC;
}

.nhaphuong-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nhaphuong-brand-logo {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.nhaphuong-nav-menu .nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 26px;
}

.nav-item {
    position: relative;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--np-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.nav-item.current-menu-item > a,
.nav-item a:hover {
    color: var(--np-red);
    font-weight: 600;
}

.nav-arrow {
    font-size: 10px;
    opacity: 0.6;
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
    border: 1px solid #EFEFEF;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown li a {
    padding: 9px 18px;
    font-size: 13.5px;
    color: #333333;
    font-weight: 400;
}

.nav-dropdown li a:hover {
    background-color: #F8FAFC;
    color: var(--np-red);
}

/* Mobile Toggle */
.nhaphuong-mobile-toggle {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--np-dark);
    cursor: pointer;
    padding: 6px;
}

.d-none-desktop { display: none; }
@media (max-width: 1080px) {
    .d-none-mobile { display: none !important; }
    .d-none-desktop { display: block !important; }
}

/* Mobile Drawer */
.nhaphuong-mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 2px 0 15px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.nhaphuong-mobile-drawer.open {
    left: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #EAEAEA;
}

.drawer-logo {
    height: 38px;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.drawer-body {
    padding: 20px;
    overflow-y: auto;
}

.drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.drawer-nav li {
    border-bottom: 1px solid #F0F0F0;
}

.drawer-nav li a {
    display: block;
    padding: 12px 0;
    color: var(--np-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-hotline {
    color: var(--np-red);
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
}

.drawer-btn-mua {
    background: var(--np-red);
    color: #FFFFFF;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* ==========================================================================
   1. HERO BANNER SECTION (FIGMA NODE 77:25 - 1440x660)
   ========================================================================== */
.np-hero-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.np-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.25) 100%);
    z-index: 1;
}

.np-hero-section .nhaphuong-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.np-hero-content {
    max-width: 720px;
    padding: 60px 0;
}

.np-hero-badge {
    display: inline-block;
    background-color: var(--np-red);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.np-hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.18;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.np-hero-desc {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
    max-width: 620px;
}

.np-hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
}

.np-hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.np-hero-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.np-hero-dots .dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--np-red);
}

/* ==========================================================================
   2. STATS BAR SECTION (FIGMA NODE 77:42 - 1440x166)
   ========================================================================== */
.np-stats-section {
    background-color: var(--np-red);
    color: #FFFFFF;
    padding: 36px 0;
}

.np-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: flex-start;
}

.np-stat-item {
    display: flex;
    flex-direction: column;
}

.np-stat-number {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    color: #FFFFFF;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.np-stat-desc {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   3. STORY INTRO SECTION (FIGMA NODE 77:55 - 1440x753)
   ========================================================================== */
.np-story-section {
    background-color: #FFFFFF;
}

.np-story-grid {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 60px;
    align-items: center;
}

.np-story-visual {
    width: 100%;
}

.np-story-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.np-story-lead {
    font-size: 16px;
    line-height: 1.65;
    color: #444444;
    margin: 0 0 28px 0;
}

.np-milestones-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.np-milestone-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.np-milestone-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--np-red);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.np-milestone-text {
    font-size: 15.5px;
    color: #222222;
}

/* ==========================================================================
   4. BUSINESS MODELS SECTION (FIGMA NODE 78:22 - 1440x766)
   ========================================================================== */
.np-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.np-model-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.np-model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.np-card-img-wrap {
    height: 220px;
    overflow: hidden;
}

.np-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.np-card-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.np-model-number {
    font-size: 26px;
    font-weight: 700;
    color: var(--np-red);
    margin-bottom: 8px;
    display: block;
}

.np-card-body .np-card-desc {
    margin-bottom: 20px;
    flex-grow: 1;
}

/* ==========================================================================
   5. CAPABILITIES SECTION (FIGMA NODE 78:48 - 1440x846)
   ========================================================================== */
.np-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.np-cap-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 10px;
    padding: 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.np-cap-card:hover {
    border-color: var(--np-red);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.np-cap-pill-num {
    display: inline-block;
    padding: 3px 9px;
    background: #FAEDED;
    color: var(--np-red);
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 12px;
}

.np-cap-title {
    font-size: 17.5px;
    font-weight: 600;
    color: var(--np-dark);
    margin: 0 0 8px 0;
}

.np-cap-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--np-text-muted);
    margin: 0;
}

/* ==========================================================================
   6. SUPPLY CHAIN SECTION (FIGMA NODE 78:101 - 1440x814)
   ========================================================================== */
.np-supply-chain-section {
    position: relative;
}

.np-process-timeline-wrap {
    position: relative;
    padding-top: 20px;
}

.np-process-line {
    position: absolute;
    top: 42px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: #333333;
    z-index: 1;
}

.np-process-steps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    position: relative;
    z-index: 2;
}

.np-process-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.np-step-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #222222;
    border: 2px solid #444444;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.25s ease;
}

.np-process-step-item.is-active .np-step-node {
    background: var(--np-red);
    border-color: var(--np-red);
}

.np-step-num {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.np-step-title {
    font-size: 15.5px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.np-step-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #999999;
    margin: 0;
}

.np-ops-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.np-ops-photo-item {
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
}

.np-ops-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   7. PRODUCTS & BRANDS SECTION (FIGMA NODE 79:22 - 1440x776)
   ========================================================================== */
.np-section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.np-product-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.np-prod-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.np-prod-card:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
    border-color: #D6D0D0;
}

.np-prod-img-wrap {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.np-prod-img {
    max-height: 190px;
    max-width: 100%;
    object-fit: contain;
}

.np-prod-desc {
    font-size: 14px;
    color: var(--np-text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 42px;
}

.np-prod-sub-tags {
    font-size: 12px;
    color: #888888;
    margin-bottom: 20px;
    display: block;
}

.np-prod-link-wrap {
    margin-top: auto;
}

/* ==========================================================================
   8. LEGEND CAFE SECTION (FIGMA NODE 79:52 - 1440x761)
   ========================================================================== */
.np-legend-cafe-section {
    padding: 0;
    overflow: hidden;
}

.np-cafe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 70px 0;
}

.np-cafe-visual {
    width: 100%;
}

.np-cafe-main-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.np-badge-gold {
    display: inline-block;
    background-color: var(--np-gold);
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 4px;
}

.np-sub-rose {
    display: inline-block;
    color: #F87171;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    margin-left: 12px;
}

.np-cafe-lead {
    font-size: 15.5px;
    line-height: 1.65;
    color: #CCCCCC;
}

.np-cafe-bullets-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.np-cafe-bullets-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: #E2E8F0;
}

.bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--np-gold);
    flex-shrink: 0;
}

.np-cafe-thumbs-row {
    display: flex;
    gap: 14px;
}

.np-cafe-thumb-item {
    width: 110px;
    height: 75px;
    border-radius: 6px;
    overflow: hidden;
}

.np-cafe-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.np-cafe-actions {
    display: flex;
    gap: 16px;
}

/* ==========================================================================
   9. PARTNERS SECTION (FIGMA NODE 79:83 - 1440x398)
   ========================================================================== */
.np-partner-logos-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.np-partner-logo-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 8px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.np-partner-logo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.np-partner-img {
    max-height: 52px;
    max-width: 100%;
    object-fit: contain;
}

/* ==========================================================================
   10. COOPERATION SECTION (FIGMA NODE 79:98 - 1440x649)
   ========================================================================== */
.np-coop-tracks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.np-coop-track-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    padding: 32px 28px;
    box-sizing: border-box;
}

.np-coop-wide-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wide-card-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--np-dark);
    margin: 0 0 6px 0;
}

.wide-card-desc {
    font-size: 14.5px;
    color: var(--np-text-muted);
    margin: 0;
}

/* ==========================================================================
   11. NEWS SECTION (FIGMA NODE 79:121 - 1440x783)
   ========================================================================== */
.np-category-pills-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.np-cat-pill {
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 13.5px;
    color: #444444;
    background: #F2F2F2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.np-cat-pill.is-active,
.np-cat-pill:hover {
    background: var(--np-red);
    color: #FFFFFF;
}

.np-news-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.np-news-card {
    background: #FFFFFF;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.np-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.np-news-img-wrap {
    height: 220px;
    overflow: hidden;
}

.np-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.np-news-body {
    padding: 24px 20px;
}

.np-news-meta {
    font-size: 12.5px;
    color: var(--np-red);
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

.np-news-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.np-news-title a {
    color: var(--np-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.np-news-title a:hover {
    color: var(--np-red);
}

.np-news-desc {
    font-size: 13.5px;
    color: var(--np-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   12. CAREERS CTA SECTION (FIGMA NODE 79:161 - 1440x318)
   ========================================================================== */
.np-careers-cta-section {
    padding: 0;
    overflow: hidden;
}

.np-careers-grid {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 40px;
    align-items: center;
}

.np-careers-content {
    padding: 50px 0;
}

.np-careers-lead {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.np-careers-photo-wrap {
    height: 318px;
    overflow: hidden;
}

.np-careers-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   13. FOOTER (FIGMA NODE 79:168 - 1440x452)
   ========================================================================== */
.nhaphuong-site-footer {
    padding: 70px 0 30px;
}

.nhaphuong-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
    gap: 36px;
    margin-bottom: 50px;
}

.footer-brand-logo {
    display: block;
}

.footer-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.footer-brand-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #999999;
}

.footer-brand-contact p {
    font-size: 13.5px;
    color: #999999;
    line-height: 1.5;
}

.footer-brand-contact a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-brand-contact a:hover {
    color: var(--np-red);
}

.footer-col-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 18px 0;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links-list li a {
    color: #999999;
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-list li a:hover {
    color: #FFFFFF;
}

.nhaphuong-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #282828;
    font-size: 12.5px;
    color: #888888;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-social-links a {
    color: #888888;
    text-decoration: none;
}

.footer-social-links a:hover {
    color: #FFFFFF;
}

/* Floating Actions */
.nhaphuong-floating-actions {
    position: fixed;
    right: 20px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999;
}

.float-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}

.float-btn:hover {
    transform: scale(1.08);
}

.float-zalo {
    background-color: #0068FF;
    font-size: 11px;
    font-weight: 700;
}

.float-hotline {
    background-color: var(--np-red);
    font-size: 18px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Mobile 375px, Tablet 768px, Desktop 1200px+)
   ========================================================================== */
@media (max-width: 1140px) {
    .nhaphuong-footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .np-story-grid {
        grid-template-columns: 1fr;
    }
    .np-cafe-grid {
        grid-template-columns: 1fr;
    }
    .np-careers-grid {
        grid-template-columns: 1fr;
    }
    .np-careers-photo-wrap {
        height: 260px;
    }
}

@media (max-width: 900px) {
    .np-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-models-grid,
    .np-product-groups-grid,
    .np-coop-tracks-grid,
    .np-news-cards-grid {
        grid-template-columns: 1fr;
    }
    .np-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-partner-logos-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .np-process-steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
    .np-process-line {
        display: none;
    }
    .np-ops-photos-grid {
        grid-template-columns: 1fr;
    }
    .np-coop-wide-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .np-hero-title {
        font-size: 38px;
    }
    .np-section-title-40 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .nhaphuong-topbar {
        display: none;
    }
    .np-stats-grid {
        grid-template-columns: 1fr;
    }
    .np-capabilities-grid {
        grid-template-columns: 1fr;
    }
    .np-partner-logos-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-process-steps-grid {
        grid-template-columns: 1fr;
    }
    .nhaphuong-footer-grid {
        grid-template-columns: 1fr;
    }
    .nhaphuong-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .np-hero-title {
        font-size: 28px;
    }
    .np-section-title-40 {
        font-size: 24px;
    }
    .np-hero-buttons {
        flex-direction: column;
    }
    .np-hero-buttons .np-btn {
        width: 100%;
    }
}


/* --- Start about.css --- */
/* ==========================================================================
   VỀ NHÃ PHƯỢNG - FIGMA NODE 80:3 (UI 1440) STYLES
   ========================================================================== */

/* 1. Page Banner (Node 80:25) */
.np-about-banner-section {
    position: relative;
    min-height: 340px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.np-about-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.78);
    z-index: 1;
}

.np-about-banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.np-about-banner-content .np-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #A3A3A3;
    margin-bottom: 16px;
}

.np-about-banner-content .np-breadcrumb a {
    color: #A3A3A3;
    text-decoration: none;
    transition: color 0.2s;
}

.np-about-banner-content .np-breadcrumb a:hover {
    color: #FFFFFF;
}

.np-about-banner-content .np-breadcrumb .sep {
    color: #737373;
}

.np-about-banner-content .np-breadcrumb .current {
    color: #E4E4E4;
}

.np-about-banner-title {
    font-size: 52px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.np-about-banner-sub {
    font-size: 18px;
    font-weight: 400;
    color: #E4E4E4;
    margin: 0;
    line-height: 1.6;
}

/* 2. Intro Section (Node 80:32) */
.np-about-intro-section {
    background: #FFFFFF;
}

.np-about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 64px;
    align-items: center;
}

.np-about-intro-texts p {
    font-size: 16px;
    line-height: 1.75;
    color: #374151;
}

.np-about-story-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* 3. Milestones Timeline (Node 80:42) */
.np-about-milestones-section {
    background: #F6F6F6;
}

.np-about-milestones-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.np-about-milestone-card {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 26px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.np-about-milestone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.np-milestone-num {
    font-size: 14px;
    font-weight: 700;
    color: #B70000;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.np-milestone-title {
    font-size: 17px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 10px;
    line-height: 1.3;
}

.np-milestone-desc {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.55;
    margin: 0;
}

/* 4. Vision & Values (Node 80:77) */
.np-about-vision-section {
    background: #FFFFFF;
}

.np-about-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.np-vision-col {
    background: #F7F2F2;
    border-radius: 10px;
    padding: 36px 32px;
}

.np-vision-col-title {
    font-size: 26px;
    font-weight: 700;
    color: #161616;
}

.np-vision-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.np-vision-point-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.np-vision-point-item .check-bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FDE8EB;
    color: #B70000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

.np-vision-point-item .text {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

.np-values-col {
    background: #141414;
    border-radius: 10px;
    padding: 36px 32px;
}

.np-values-col-title {
    font-size: 26px;
    font-weight: 700;
}

.np-values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.np-value-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 20px;
    transition: background 0.2s;
}

.np-value-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.np-value-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.np-value-desc {
    font-size: 14px;
    font-weight: 400;
    color: #A3A3A3;
    line-height: 1.55;
    margin: 0;
}

/* 5. Capabilities (Node 80:110) */
.np-about-capabilities-section {
    background: #F6F6F6;
}

.np-about-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.np-about-cap-card {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.np-about-cap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.np-cap-num {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #B70000;
    background: #FDE8EB;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.np-cap-title {
    font-size: 18px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 10px;
}

.np-cap-desc {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.55;
    margin: 0;
}

/* 6. Branches System (Node 94:54) */
.np-about-branches-section {
    background: #FFFFFF;
}

.np-about-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.np-about-branch-card {
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}

.np-about-branch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
    border-color: #D4D4D4;
}

.branch-img-wrap {
    height: 180px;
    overflow: hidden;
    background: #F0F0F0;
}

.branch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.np-about-branch-card:hover .branch-img {
    transform: scale(1.04);
}

.branch-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.branch-name {
    font-size: 17px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 8px;
}

.branch-address {
    font-size: 13px;
    color: #666666;
    line-height: 1.55;
    margin: 0 0 14px;
    flex-grow: 1;
}

.branch-tag-wrap {
    margin-top: auto;
}

.branch-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #B70000;
    background: #FDE8EB;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.3;
}

/* 7. Certifications (Node 80:154) */
.np-about-cert-section {
    background: #FFFFFF;
}

.np-about-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.np-about-cert-card {
    background: #F6F6F6;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
}

.np-about-cert-card:hover {
    background: #F0EDED;
    transform: translateY(-3px);
}

.cert-icon-wrap {
    font-size: 32px;
    color: #B70000;
    margin-bottom: 16px;
}

.cert-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 8px;
}

.cert-card-desc {
    font-size: 13px;
    color: #737373;
    line-height: 1.5;
    margin: 0;
}

/* 8. CTA Section (Node 80:167) */
.np-about-cta-section {
    background: #B70000;
}

.np-about-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.np-about-cta-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
}

.np-about-cta-desc {
    font-size: 16px;
    color: #F3D6D6;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .np-about-milestones-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .np-about-branches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .np-about-intro-grid {
        grid-template-columns: 1fr;
    }
    .np-about-story-img {
        height: 320px;
    }
    .np-about-vision-grid {
        grid-template-columns: 1fr;
    }
    .np-about-cap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .np-about-banner-title {
        font-size: 34px;
    }
    .np-about-milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .np-about-cap-grid {
        grid-template-columns: 1fr;
    }
    .np-about-branches-grid {
        grid-template-columns: 1fr;
    }
    .np-about-cert-grid {
        grid-template-columns: 1fr;
    }
    .np-values-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .np-about-milestones-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Start archive.css --- */
/* --- Sub-module: Archive Page Base Layout (Original Lines 2175-2325) --- */
/* ==========================================================================
   ARCHIVE PAGE (DANH MỤC SẢN PHẨM - NODE 174:501)
   ========================================================================= */
.vtipz-archive-page {
    padding: 36px 0 60px;
}

.vtipz-archive-header {
    margin-bottom: 28px;
}

.vtipz-archive-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--vtipz-primary);
    margin-bottom: 6px;
}

.vtipz-archive-desc {
    color: var(--vtipz-text-muted);
    font-size: 14.5px;
}

.vtipz-archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

.vtipz-filter-card {
    background: #FFFFFF;
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-lg);
    padding: 24px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-filter-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vtipz-primary);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--vtipz-border-light);
    margin-bottom: 18px;
}

.vtipz-filter-group {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--vtipz-border-light);
}

.vtipz-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vtipz-text-heading);
    margin-bottom: 12px;
}

.vtipz-filter-list li {
    margin-bottom: 8px;
}

.vtipz-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
}

.vtipz-filter-radio {
    accent-color: var(--vtipz-primary);
}

.vtipz-sidebar-banner {
    background: linear-gradient(145deg, var(--color-primary, #C41230), var(--color-primary, #C41230));
    color: #FFFFFF;
    padding: 20px;
    border-radius: var(--vtipz-radius-md);
    text-align: center;
}

.vtipz-sidebar-banner h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.vtipz-sidebar-banner p {
    font-size: 12.5px;
    opacity: 0.9;
    margin-bottom: 14px;
}

.vtipz-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--vtipz-bg-light);
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-md);
    padding: 12px 20px;
    margin-bottom: 24px;
}

.vtipz-toolbar-count {
    font-size: 13.5px;
    color: var(--vtipz-text-muted);
}

.vtipz-toolbar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}

.vtipz-select-sm {
    padding: 6px 12px;
    border: 1px solid var(--vtipz-border);
    border-radius: var(--vtipz-radius-sm);
    background: #FFFFFF;
}

.vtipz-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.vtipz-pagination ul.page-numbers {
    display: flex;
    gap: 6px;
}

.vtipz-pagination .page-numbers {
    padding: 8px 16px;
    border: 1px solid var(--vtipz-border);
    border-radius: var(--vtipz-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--vtipz-text-heading);
}

.vtipz-pagination .page-numbers.current {
    background-color: var(--vtipz-primary);
    color: #FFFFFF;
    border-color: var(--vtipz-primary);
}



/* --- Sub-module: Figma Archive Layout 1:1 Spec (Original Lines 3222-3504) --- */
/* 3. TRANG DANH MỤC SẢN PHẨM (FIGMA NODE 174:501) */
.vtipz-archive-page {
    padding: 32px 0 60px;
    background: #FFFFFF;
}

.vtipz-archive-header {
    margin-bottom: 28px;
}

.vtipz-archive-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin-bottom: 8px;
}

.vtipz-archive-desc {
    font-size: 14.5px;
    color: #64748B;
    max-width: 820px;
    line-height: 1.6;
}

.vtipz-archive-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: flex-start;
}

.vtipz-archive-sidebar {
    width: 100%;
}

.vtipz-filter-box {
    background: var(--color-bg-light, #F8F9FA);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 24px 0 !important;
    padding: 24px;
}

.vtipz-filter-main-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border, #E5E7EB);
}

.vtipz-filter-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2ECF5;
}

.vtipz-filter-group:last-child {
    border-bottom: none;
}

.vtipz-filter-group-title {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12px;
}

.vtipz-filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vtipz-filter-scrollable {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #F1F5F9;
}

.vtipz-filter-scrollable::-webkit-scrollbar {
    width: 5px;
}

.vtipz-filter-scrollable::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 4px;
}

.vtipz-filter-scrollable::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.vtipz-filter-scrollable::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.vtipz-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    user-select: none;
}

.vtipz-filter-option input {
    display: none;
}

.vtipz-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 1.5px solid #94A3B8;
    border-radius: 4px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.vtipz-filter-option input:checked + .vtipz-checkbox-custom {
    background: var(--color-primary, #C41230);
    border-color: var(--color-primary, #C41230);
}

.vtipz-filter-option input:checked + .vtipz-checkbox-custom::after {
    content: '✓';
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
}

.vtipz-price-range-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vtipz-price-slider-track {
    height: 6px;
    background: #E2ECF5;
    border-radius: 3px;
    position: relative;
}

.vtipz-price-slider-bar {
    height: 100%;
    width: 100%;
    background: var(--color-primary, #C41230);
    border-radius: 3px;
}

.vtipz-price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vtipz-price-input-box input {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 6px;
    background: #FFFFFF;
    color: #1E293B;
    font-weight: 600;
    text-align: center;
}

.vtipz-btn-apply-filter {
    width: 100%;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border: none;
    border-radius: 0 0 16px 0 !important;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.vtipz-btn-apply-filter:hover {
    background: var(--color-primary-dark, #9E0E26);
}

/* Nút Xóa bộ lọc */
.vtipz-btn-reset-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 0 0 12px 0 !important;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.vtipz-btn-reset-filter i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.vtipz-btn-reset-filter:hover {
    color: #EF4444;
    background: #FEF2F2;
    border-color: #FCA5A5;
    text-decoration: none;
}

.vtipz-btn-reset-filter:hover i {
    transform: rotate(-45deg);
}

/* Khối trạng thái trống khi bộ lọc không có sản phẩm */
.vtipz-filter-empty-state {
    grid-column: 1 / -1;
    width: 100%;
    padding: 56px 24px;
    background: #FFFFFF;
    border: 1.5px dashed #CBD5E1;
    border-radius: 0 0 24px 0 !important;
    text-align: center;
    margin: 16px 0 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.vtipz-empty-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #F0F7FF 0%, #E0EFFE 100%);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #C41230);
    font-size: 32px;
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.1);
}

.vtipz-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 10px;
    line-height: 1.45;
}

.vtipz-empty-desc {
    font-size: 14.5px;
    color: #64748B;
    margin: 0 auto 24px;
    max-width: 520px;
    line-height: 1.55;
}

.vtipz-empty-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0 0 14px 0 !important;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.22);
}

.vtipz-empty-cta-btn:hover {
    background: var(--color-primary, #C41230);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.3);
    color: #FFFFFF !important;
    text-decoration: none;
}

@media (max-width: 768px) {
    .vtipz-filter-empty-state {
        padding: 40px 16px;
        margin: 12px 0 24px;
    }
    .vtipz-empty-icon-wrap {
        width: 64px;
        height: 64px;
        font-size: 26px;
        margin-bottom: 16px;
    }
    .vtipz-empty-title {
        font-size: 16px;
    }
    .vtipz-empty-desc {
        font-size: 13.5px;
        margin-bottom: 20px;
    }
    .vtipz-empty-cta-btn {
        width: 100%;
        padding: 12px 18px;
        font-size: 13.5px;
        box-sizing: border-box;
    }
}

/* Sắp xếp & Lưới Archive */
.vtipz-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-light, #F8F9FA);
    padding: 12px 18px;
    border-radius: 0 0 20px 0 !important;
    margin-bottom: 24px;
    border: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-sort-count {
    font-size: 13.5px;
    color: #475569;
    font-weight: 500;
}

.vtipz-sort-dropdown {
    padding: 8px 14px;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 12px 0 !important;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #C41230);
    outline: none;
    cursor: pointer;
}

.vtipz-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-archive-grid.vtipz-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.vtipz-archive-grid.vtipz-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.vtipz-pagination-wrap {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.vtipz-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vtipz-page-item {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, #C41230);
    text-decoration: none;
    transition: all 0.2s;
    background: #FFFFFF;
}

.vtipz-page-item.active,
.vtipz-page-item:hover {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
}

.vtipz-page-dots {
    border: none;
    background: transparent;
    color: #94A3B8;
}

/* Các khối sản phẩm chân trang Archive & Single */
.vtipz-related-section {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #E2ECF5;
}

.vtipz-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.vtipz-section-heading {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin: 0;
}

.vtipz-section-more-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-decoration: none;
}

.vtipz-section-more-link:hover {
    color: var(--color-primary, #C41230);
}

.vtipz-products-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ==========================================================================
   MOBILE FILTER BUTTON & OFFCANVAS DRAWER STYLES
   ========================================================================== */
.vtipz-btn-mobile-filter {
    display: none;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: var(--color-primary, #C41230);
    border: 1.5px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 12px 0 !important;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.06);
}

.vtipz-btn-mobile-filter:hover,
.vtipz-btn-mobile-filter:active {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-color: var(--color-primary, #C41230);
}

.vtipz-btn-mobile-filter i {
    font-size: 14px;
}

.vtipz-active-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    line-height: 1;
}

.vtipz-filter-drawer-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.vtipz-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

.vtipz-drawer-title-group .vtipz-active-filter-badge {
    background: var(--color-primary, #C41230);
}

.vtipz-filter-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vtipz-filter-drawer-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.vtipz-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vtipz-filter-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR ARCHIVE / CATALOG
   ========================================================================== */
@media (max-width: 1200px) {
    .vtipz-archive-layout {
        grid-template-columns: 260px 1fr;
        gap: 24px;
    }
    .vtipz-archive-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .vtipz-products-row-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .vtipz-archive-layout {
        display: block !important;
    }

    .vtipz-btn-mobile-filter {
        display: inline-flex !important;
    }

    .vtipz-filter-drawer-header {
        display: flex !important;
    }

    /* Offcanvas filter drawer */
    .vtipz-archive-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 320px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #FFFFFF !important;
        z-index: 99999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .vtipz-archive-sidebar.open {
        transform: translateX(0) !important;
    }

    .vtipz-filter-box {
        background: #FFFFFF !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 20px 18px 40px !important;
        flex: 1;
    }

    .vtipz-filter-main-title {
        display: none !important;
    }

    .vtipz-sort-bar {
        padding: 10px 14px !important;
        margin-bottom: 20px !important;
        border-radius: 0 0 14px 0 !important;
    }

    .vtipz-archive-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    .vtipz-products-row-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) {
    .vtipz-archive-page {
        padding: 20px 0 44px !important;
    }

    .vtipz-archive-header {
        margin-bottom: 16px !important;
    }

    .vtipz-archive-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .vtipz-archive-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .vtipz-sort-count {
        display: none !important;
    }

    .vtipz-sort-bar {
        padding: 8px 10px !important;
        margin-bottom: 16px !important;
        gap: 8px !important;
    }

    .vtipz-btn-mobile-filter {
        padding: 7px 12px !important;
        font-size: 12.5px !important;
    }

    .vtipz-sort-dropdown {
        padding: 7px 10px !important;
        font-size: 12px !important;
        max-width: 180px;
    }

    /* 2 columns on mobile */
    .vtipz-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .vtipz-products-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .vtipz-related-section {
        margin-top: 36px !important;
        padding-top: 24px !important;
    }

    .vtipz-section-heading {
        font-size: 18px !important;
    }

    .vtipz-section-more-link {
        font-size: 12.5px !important;
    }

    .vtipz-pagination-wrap {
        margin-top: 28px !important;
    }

    .vtipz-page-item {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .vtipz-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .vtipz-products-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .vtipz-sort-dropdown {
        max-width: 155px;
        font-size: 11.5px !important;
        padding: 6px 8px !important;
    }
}





/* --- Start single-product.css --- */
/* --- Sub-module: Single Product Base Layout (Original Lines 2326-2686) --- */
/* ==========================================================================
   SINGLE PRODUCT PAGE (CHI TIẾT SẢN PHẨM - NODE 174:1187)
   ========================================================================= */
.vtipz-single-product-page {
    padding: 36px 0 60px;
}

.vtipz-product-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    margin-bottom: 48px;
}

.vtipz-main-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 90%;
    background: var(--vtipz-bg-light);
    border-radius: var(--vtipz-radius-xl);
    border: 1px solid var(--vtipz-border-light);
    overflow: hidden;
    margin-bottom: 14px;
}

.vtipz-product-main-img {
    position: absolute;
    width: 90%; height: 90%;
    object-fit: contain;
}

.vtipz-badge-sale-lg {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--vtipz-accent);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--vtipz-radius-sm);
    z-index: 2;
}

.vtipz-gallery-thumbs {
    display: flex;
    gap: 12px;
}

.vtipz-thumb-btn {
    width: 100%;
    height: 131px;
    border-radius: 0 0 20px 0;
    border: 1px solid #D8DFE7;
    background: var(--color-bg-light, #F8F9FA);
    overflow: hidden;
    padding: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.vtipz-thumb-btn.active, .vtipz-thumb-btn:hover {
    border-color: var(--vtipz-primary);
}

.vtipz-thumb-btn img {
    width: 100%; height: 100%;
    object-fit: contain;
}

.vtipz-single-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--vtipz-text-heading);
    line-height: 1.3;
    margin-bottom: 12px;
}

.vtipz-product-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.vtipz-meta-stock.in-stock {
    color: var(--vtipz-success);
    font-weight: 600;
}

.vtipz-price-box {
    background: var(--vtipz-bg-light);
    padding: 16px 20px;
    border-radius: var(--vtipz-radius-md);
    margin-bottom: 20px;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.price-main .current-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--vtipz-accent);
}

.price-main .old-price {
    font-size: 16px;
    color: var(--vtipz-text-muted);
    text-decoration: line-through;
}

.save-tag {
    background-color: rgba(196, 18, 48, 0.12);
    color: var(--vtipz-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--vtipz-radius-sm);
}

.vtipz-wholesale-card {
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #FFFFFF;
    padding: 20px;
    border-radius: var(--vtipz-radius-md);
    margin-bottom: 24px;
}

.wholesale-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.wholesale-list {
    margin-bottom: 14px;
}

.wholesale-list li {
    font-size: 13px;
    margin-bottom: 6px;
}

.vtipz-variants-wrap {
    margin-bottom: 24px;
}

.variant-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtipz-text-heading);
    margin-bottom: 10px;
}

.variant-options {
    display: flex;
    gap: 10px;
}

.variant-btn {
    padding: 8px 18px;
    border: 1.5px solid var(--vtipz-border);
    border-radius: var(--vtipz-radius-md);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.variant-btn.active, .variant-btn:hover {
    border-color: var(--vtipz-primary);
    color: var(--vtipz-primary);
    background-color: var(--vtipz-bg-soft);
}

.vtipz-purchase-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.vtipz-qty-selector {
    display: flex;
    border: 1.5px solid var(--vtipz-border);
    border-radius: var(--vtipz-radius-md);
    overflow: hidden;
}

.qty-btn {
    width: 38px;
    height: 46px;
    background: var(--vtipz-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.vtipz-qty-selector input {
    width: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.vtipz-btn-cart-lg {
    background-color: var(--vtipz-accent);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    padding: 0 24px;
    border-radius: var(--vtipz-radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-btn-cart-lg:hover {
    background-color: var(--vtipz-accent-hover);
    color: #FFFFFF !important;
}

.vtipz-btn-buy-now {
    background-color: var(--vtipz-primary);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    padding: 0 24px;
    border-radius: var(--vtipz-radius-md);
    display: flex;
    align-items: center;
}

.vtipz-guarantees-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--vtipz-border-light);
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--vtipz-text-muted);
}

.guarantee-item i {
    color: var(--vtipz-primary);
    font-size: 16px;
}

/* Tabs */
.vtipz-tabs-section {
    background: #FFFFFF;
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-xl);
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-tabs-nav {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid var(--vtipz-border-light);
    margin-bottom: 28px;
}

.vtipz-tab-nav-btn {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vtipz-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.vtipz-tab-nav-btn.active {
    color: var(--vtipz-primary);
    border-bottom-color: var(--vtipz-primary);
}

.vtipz-tab-pane {
    display: none;
}

.vtipz-tab-pane.active {
    display: block;
}

.vtipz-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.vtipz-specs-table tr:nth-child(even) {
    background: var(--vtipz-bg-light);
}

.vtipz-specs-table td {
    padding: 12px 18px;
    border: 1px solid var(--vtipz-border-light);
    font-size: 14px;
}

.vtipz-specs-table td:first-child {
    font-weight: 700;
    color: var(--vtipz-text-heading);
    width: 250px;
}

/* Review comments */
.review-comment-card {
    padding: 18px;
    border: 1px solid var(--vtipz-border-light);
    border-radius: var(--vtipz-radius-md);
    margin-bottom: 14px;
}

.reviewer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--vtipz-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.badge-buyer {
    font-size: 11px;
    color: var(--vtipz-success);
    margin-left: 8px;
}

.review-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--vtipz-text-muted);
}



/* --- Sub-module: Figma Single Product Hero, Details, Wholesale 1:1 Spec (Original Lines 3505-4209) --- */
/* 4. TRANG CHI TIẾT SẢN PHẨM (FIGMA NODE 174:1187) */
.vtipz-single-product-page {
    padding: 36px 0 60px;
    background: #FFFFFF;
}

.vtipz-product-hero {
    display: grid !important;
    grid-template-columns: 560px 1fr !important;
    gap: 40px !important;
    margin-bottom: 48px !important;
    align-items: start;
}

@media (max-width: 1024px) {
    .vtipz-product-hero {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* Thư viện ảnh sản phẩm (#174:1240 - Width 560px) */
.vtipz-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.vtipz-main-image-wrap {
    position: relative;
    background-color: var(--color-bg-light, #F8F9FA) !important;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 80px 0 !important;
    overflow: hidden;
    height: 480px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.vtipz-main-discount-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

.vtipz-product-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

.vtipz-main-image-wrap:hover .vtipz-product-main-img {
    transform: scale(1.03);
}

/* Hình album (#174:1243 - 4 thumbs, height 131px, radius 0 0 20px 0) */
.vtipz-gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vtipz-thumb-btn {
    width: 100% !important;
    height: 131px !important;
    background: var(--color-bg-light, #F8F9FA) !important;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 20px 0 !important;
    padding: 6px !important;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.vtipz-thumb-btn.active {
    border: 2px solid var(--color-primary, #C41230) !important;
    background: #FFFFFF !important;
}

.vtipz-thumb-btn:hover {
    border-color: var(--color-primary, #C41230) !important;
}

.vtipz-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 0 16px 0 !important;
    display: block !important;
}

@media (max-width: 576px) {
    .vtipz-thumb-btn {
        height: 80px !important;
        padding: 4px !important;
    }
}

/* Thông tin mua hàng (#174:1252) */
.vtipz-product-info {
    display: flex;
    flex-direction: column;
}

/* Meta: Thương hiệu & Mã SP (#174:1253: 11px Regular, #8A929C) */
.vtipz-single-meta-top {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #8A929C !important;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-meta-brand {
    color: #8A929C !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.vtipz-meta-brand:hover {
    color: var(--color-primary, #C41230) !important;
    text-decoration: underline !important;
}

.vtipz-meta-sep {
    color: #CBD5E1;
    margin: 0 2px;
}

.vtipz-meta-sku {
    color: #8A929C !important;
    font-weight: 600 !important;
}

/* Badge tồn kho chi tiết sản phẩm */
.vtipz-single-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.25s ease;
}

.vtipz-single-stock-badge.in-stock {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.vtipz-single-stock-badge.low-stock {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.vtipz-single-stock-badge.out-of-stock {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.vtipz-single-stock-badge .vtipz-stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    display: inline-block;
    animation: vtipzStockPulse 2s infinite ease-in-out;
}

.vtipz-single-stock-badge.low-stock .vtipz-stock-dot {
    background: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    animation: vtipzStockPulse 1.5s infinite ease-in-out;
}

.vtipz-single-stock-badge.out-of-stock .vtipz-stock-dot {
    background: #EF4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    animation: none;
}

/* Alert sắp hết hàng dưới nút mua */
.vtipz-low-stock-alert {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    font-size: 13px;
    color: #92400E;
    animation: vtipzStockFadeIn 0.3s ease;
}

.vtipz-low-stock-alert.is-visible {
    display: flex;
}

.vtipz-low-stock-alert i {
    color: #EA580C;
    font-size: 14px;
}

.vtipz-low-stock-alert strong {
    font-weight: 700;
    color: #C2410C;
}

/* Pill tình trạng kho trong bảng thông số kỹ thuật */
.vtipz-specs-stock-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.vtipz-specs-stock-pill.in-stock {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.vtipz-specs-stock-pill.low-stock {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.vtipz-specs-stock-pill.out-of-stock {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

@keyframes vtipzStockPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.7;
    }
}

@keyframes vtipzStockFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tiêu đề sản phẩm (#174:1254: 26px Bold 700, line-height 34px, #101820) */
.vtipz-single-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    color: #101820 !important;
    margin-bottom: 12px !important;
}

/* Đánh giá sao (#174:1255) */
.vtipz-single-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    margin-bottom: 16px;
}

.vtipz-stars-yellow {
    color: #FFB800 !important;
    font-size: 14px;
    letter-spacing: 2px;
}

.vtipz-rating-text {
    font-weight: 700;
    color: #101820 !important;
}

.vtipz-review-count-link {
    color: #5A6572 !important;
    text-decoration: none;
}

.vtipz-review-count-link:hover {
    color: var(--color-primary, #C41230) !important;
    text-decoration: underline;
}

.vtipz-sold-count {
    color: #5A6572 !important;
}

/* Khối giá (#174:1258: var(--color-bg-light, #F8F9FA), border-radius 0 0 32px 0, padding 16px 20px, no border) */
.vtipz-single-price-box {
    background-color: var(--color-bg-light, #F8F9FA) !important;
    border-radius: 0 0 32px 0 !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.vtipz-single-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 4px !important;
}

/* Giá bán lẻ hiện tại (#174:1260: 30px ExtraBold 800, var(--color-primary, #C41230) Vtipz Blue) */
.vtipz-single-price-current {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--color-primary, #C41230) !important;
    line-height: 1 !important;
}

/* Giá cũ (#174:1261: 14px Regular 400, #8A929C, line-through) */
.vtipz-single-price-old {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #8A929C !important;
    text-decoration: line-through !important;
}

/* Nhãn giảm giá (#174:1262: var(--color-primary, #C41230) Orange solid, radius 0 0 12px 0, white text 11px Bold) */
.vtipz-single-discount-tag {
    background: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 0 0 12px 0 !important;
    line-height: 1 !important;
}

.vtipz-single-vat-note {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    color: #5A6572 !important;
    margin: 4px 0 0 0 !important;
}

/* Bảng giá theo cấp đại lý (#174:1265: #FFFFFF, border 1px #D8DFE7, radius 0 0 24px 0) */
.vtipz-wholesale-tier-card {
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 24px 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}

/* Header bảng giá (#174:1266: var(--color-primary-soft, #FDE8EB), padding 10px 16px) */
.vtipz-wholesale-tier-header {
    background-color: var(--color-primary-soft, #FDE8EB) !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    border-bottom: 1px solid #E2ECF5 !important;
}

.vtipz-tier-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #101820 !important;
    margin: 0 !important;
}

/* Link Đăng nhập để xem giá (#174:1268: #009444 GREEN, 11px SemiBold 600) */
.vtipz-tier-login-link {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #009444 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.vtipz-tier-login-link:hover {
    text-decoration: underline !important;
}

/* Trạng thái cấp đại lý */
.vtipz-tier-status-text {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #009444 !important;
}

.vtipz-tier-status-text.pending {
    color: #C2410C !important;
}

.vtipz-tier-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.vtipz-tier-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #FFFFFF !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Cấp đại lý hiện tại của người dùng */
.vtipz-tier-row.is-current-tier {
    background-color: #F0FDF4 !important;
    border-left: 3px solid #009444 !important;
    padding-left: 13px !important;
}

.vtipz-tier-row.is-current-tier .tier-name {
    color: #009444 !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vtipz-tier-row.is-current-tier .tier-moq {
    color: #007536 !important;
    font-weight: 600 !important;
}

.current-tier-pill {
    display: inline-block !important;
    background-color: #009444 !important;
    color: #FFFFFF !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
}

.tier-name {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #3F4A57 !important;
}

.tier-moq {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #8A929C !important;
}

/* Dấu giá che sỉ (#EL-3d26ecee: #5A6572 Muted Grey, 13px SemiBold) */
.tier-price {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5A6572 !important;
    letter-spacing: 1px !important;
}

.tier-price.unlocked {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #101820 !important;
    letter-spacing: 0 !important;
}

.vtipz-tier-row.is-current-tier .tier-price.unlocked {
    color: #E53935 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.vtipz-tier-note {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    color: #5A6572 !important;
    font-style: normal !important;
    line-height: 17px !important;
    margin: 0 !important;
    padding: 10px 16px 12px !important;
}

.vtipz-tier-note a {
    color: #009444 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.vtipz-tier-note a:hover {
    color: #007536 !important;
}



/* =========================================================================
   KHỐI MÃ ƯU ĐÃI / VOUCHER (Clean, Neutral, Modern)
   ========================================================================= */
.vtipz-product-vouchers-card {
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 20px 0 !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    background: #FFFFFF !important;
}

.vtipz-vouchers-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.vtipz-vouchers-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #101820 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.vtipz-vouchers-hint {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    color: #8A929C !important;
}

.vtipz-vouchers-list,
.vtipz-vouchers-more-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.vtipz-vouchers-more-list {
    margin-top: 8px !important;
}

/* Thẻ voucher mini */
.vtipz-voucher-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

.vtipz-voucher-item:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.vtipz-voucher-item.not-eligible {
    opacity: 0.82 !important;
    background: #FAFAFA !important;
}

.vtipz-voucher-item.not-eligible .vtipz-voucher-badge {
    color: #475569 !important;
}

.vtipz-voucher-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.vtipz-voucher-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.vtipz-voucher-badge {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-primary, #C41230) !important;
    line-height: 1.2 !important;
}

.vtipz-voucher-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vtipz-voucher-info-btn {
    background: none !important;
    border: none !important;
    padding: 2px 4px !important;
    cursor: pointer !important;
    color: #94A3B8 !important;
    font-size: 14px !important;
    transition: color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vtipz-voucher-info-btn:hover {
    color: var(--color-primary, #C41230) !important;
}

.vtipz-voucher-btn {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-primary, #C41230) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-primary, #C41230) !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

.vtipz-voucher-btn:hover {
    background: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
}

.vtipz-voucher-btn.saved {
    background: #F0FDF4 !important;
    border-color: #009444 !important;
    color: #009444 !important;
    pointer-events: none !important;
}

.vtipz-voucher-meta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
}

.vtipz-voucher-meta-item {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    color: #64748B !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

.vtipz-voucher-code-bottom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #F8FAFC !important;
    border: 1px dashed #CBD5E1 !important;
    border-radius: 4px !important;
    padding: 2.5px 7px !important;
    font-size: 11px !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: all !important;
    margin-top: 0 !important;
}

.vtipz-voucher-code-bottom:hover {
    background: #EFF6FF !important;
    border-color: #93C5FD !important;
    color: var(--color-primary, #C41230) !important;
}

.vtipz-voucher-code-bottom .code-val {
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    color: inherit !important;
}

.vtipz-voucher-code-bottom .copy-icon {
    font-size: 10.5px !important;
    color: inherit !important;
}

/* Nút Xem thêm / Thu gọn voucher */
.vtipz-vouchers-toggle-btn {
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 8px 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--color-primary, #C41230) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.vtipz-vouchers-toggle-btn:hover {
    color: var(--color-primary, #C41230) !important;
    text-decoration: underline !important;
}

.vtipz-vouchers-toggle-btn i {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}

/* Biến thể quy cách (#174:1282) */
.vtipz-variant-group {
    margin-bottom: 20px;
}

.vtipz-variant-label {
    display: block;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #101820 !important;
    margin-bottom: 8px;
}

.vtipz-variant-options {
    display: flex;
    gap: 10px;
}

/* Biến thể không chọn (#EL-2e49228c: #FFFFFF bg, 1px #D8DFE7 border, radius 0 0 14px 0, #5A6572 text) */
.vtipz-variant-pill {
    padding: 8px 16px !important;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 14px 0 !important;
    background: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #5A6572 !important;
    cursor: pointer;
    transition: all 0.2s;
}

/* Biến thể đang chọn (#174:1287: var(--color-primary-soft, #FDE8EB) bg, 2px var(--color-primary, #C41230) border, radius 0 0 14px 0, var(--color-primary, #C41230) text) */
.vtipz-variant-pill.active {
    background-color: var(--color-primary-soft, #FDE8EB) !important;
    border: 2px solid var(--color-primary, #C41230) !important;
    color: var(--color-primary, #C41230) !important;
    font-weight: 600 !important;
}

.vtipz-variant-pill:hover:not(.active) {
    border-color: var(--color-primary, #C41230) !important;
}

/* Biến thể tạm hết hàng */
.vtipz-variant-pill.out-of-stock {
    opacity: 0.75 !important;
    border-style: dashed !important;
    background-color: #F8FAFC !important;
}

.vtipz-pill-stock-label {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #DC2626 !important;
    margin-left: 4px;
}

/* Nút đặt mua bị khóa khi biến thể hết hàng */
.vtipz-btn-single-cart.disabled,
.vtipz-btn-single-buynow.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background: #94A3B8 !important;
    border-color: #94A3B8 !important;
    pointer-events: none !important;
}

/* Chọn số lượng & mua (#174:1291) */
.vtipz-purchase-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Selector số lượng (#174:1292: 1px #D8DFE7 border, radius 0 0 14px 0, height 48px) */
.vtipz-qty-selector {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 14px 0 !important;
    overflow: hidden;
    background: #FFFFFF !important;
    height: 48px !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.vtipz-qty-btn {
    width: 38px !important;
    height: 100% !important;
    border: none !important;
    background: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #4D4D4D !important;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vtipz-qty-btn:hover {
    background: #F1F5F9 !important;
}

.vtipz-qty-field {
    width: 44px !important;
    height: 100% !important;
    border: none !important;
    text-align: center;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101820 !important;
    outline: none;
    -moz-appearance: textfield;
}

.vtipz-qty-field::-webkit-outer-spin-button,
.vtipz-qty-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Nút Thêm vào giỏ hàng (#174:1299: var(--color-primary, #C41230), radius 0 0 16px 0, 13px Bold White, flex 1, height 48px) */
.vtipz-btn-single-cart {
    flex: 1 !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    height: 48px !important;
    padding: 14px 20px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}

.vtipz-btn-single-cart:hover {
    background-color: var(--color-primary-dark, #9E0E26) !important;
}

.vtipz-btn-single-cart:active {
    transform: scale(0.98);
}

/* Nút Mua ngay (#174:1301: var(--color-primary, #C41230) / var(--color-primary, #C41230), radius 0 0 16px 0, 13px Bold White, flex 1, height 48px) */
.vtipz-btn-single-buynow {
    flex: 1 !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    height: 48px !important;
    padding: 14px 20px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}

.vtipz-btn-single-buynow:hover {
    background-color: #09375e !important;
}

.vtipz-btn-single-buynow:active {
    transform: scale(0.98);
}

/* Nút Yêu thích (#174:1303: #FFFFFF, border 1px #D8DFE7, radius 0 0 16px 0, height 48px, width 48px) */
.vtipz-btn-single-wishlist {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 16px 0 !important;
    background: #FFFFFF !important;
    font-size: 18px !important;
    color: #5A6572 !important;
    cursor: pointer;
    transition: all 0.2s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}

.vtipz-btn-single-wishlist:hover {
    border-color: #E02B2B !important;
    color: #E02B2B !important;
}

.vtipz-btn-single-wishlist.active {
    border-color: #E02B2B !important;
    background-color: #FFF5F5 !important;
    color: #E02B2B !important;
}

.vtipz-btn-single-wishlist.active i {
    color: #E02B2B !important;
    animation: vtipzHeartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes vtipzHeartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Cam kết dịch vụ (#174:1305: var(--color-bg-light, #F8F9FA) bg, radius 0 0 24px 0, padding 14px 18px) */
.vtipz-single-commitments {
    background-color: var(--color-bg-light, #F8F9FA) !important;
    border-radius: 0 0 24px 0 !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
    border: none !important;
}

.vtipz-commit-line {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 11px !important;
    color: #5A6572 !important;
}

.vtipz-commit-line i {
    color: var(--color-primary, #C41230) !important;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Tabs & Reviews (#174:1309: border 1px #D8DFE7, radius 0 0 40px 0) */
.vtipz-tabs-container {
    margin-top: 48px;
    border: 1px solid #D8DFE7 !important;
    border-radius: 0 0 40px 0 !important;
    overflow: hidden;
    background: #FFFFFF;
}

.vtipz-tabs-nav {
    display: flex;
    background: var(--color-bg-light, #F8F9FA) !important;
    border-bottom: 1px solid #D8DFE7 !important;
}

.vtipz-tab-nav-btn {
    padding: 14px 28px !important;
    border: none !important;
    background: transparent !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #5A6572 !important;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.vtipz-tab-nav-btn.active {
    color: #101820 !important;
    background: #FFFFFF !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--color-primary, #C41230) !important;
    margin-bottom: -1px;
}

.vtipz-tabs-content {
    padding: 36px;
}

.vtipz-tab-pane {
    display: none;
}

.vtipz-tab-pane.active {
    display: block;
}

.vtipz-desc-lead,
.vtipz-specs-lead {
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 24px;
}

.vtipz-user-content {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    max-width: 820px;
}

.vtipz-user-content h2,
.vtipz-user-content h3,
.vtipz-user-content h4 {
    font-family: 'Be Vietnam Pro', sans-serif;
    color: var(--color-primary, #C41230);
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
}

.vtipz-user-content h2 {
    font-size: 20px;
    border-bottom: 2px solid #E2ECF5;
    padding-bottom: 8px;
}

.vtipz-user-content h3 {
    font-size: 17px;
}

.vtipz-user-content p {
    margin-bottom: 16px;
}

.vtipz-user-content ul,
.vtipz-user-content ol {
    margin: 14px 0 20px 24px;
}

.vtipz-user-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.vtipz-user-content strong {
    color: var(--color-primary, #C41230);
}

.vtipz-user-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0 0 24px 0;
    margin: 20px 0 10px;
    display: block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2ECF5;
}

.vtipz-user-content figure {
    margin: 24px 0;
}

.vtipz-user-content figure figcaption {
    font-size: 13px;
    color: #64748B;
    font-style: italic;
    text-align: center;
    margin-top: 8px;
}

.vtipz-tab-image-wrap {
    max-width: 650px;
    margin-top: 24px;
    border-radius: 0 0 30px 0 !important;
    overflow: hidden;
}

.vtipz-tab-img {
    width: 100%;
    height: auto;
    display: block;
}

.vtipz-specs-table-wrap {
    max-width: 820px;
    margin-top: 20px;
    border: 1px solid #E2ECF5;
    border-radius: 0 0 20px 0 !important;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(196, 18, 48, 0.04);
}

.vtipz-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.vtipz-specs-table tr {
    border-bottom: 1px solid #EAF0F6;
    transition: background 0.15s ease;
}

.vtipz-specs-table tr:last-child {
    border-bottom: none;
}

.vtipz-specs-table tr:nth-child(even) {
    background: #F9FBFE;
}

.vtipz-specs-table tr:hover {
    background: #F0F6FC;
}

.vtipz-specs-table th {
    text-align: left;
    padding: 14px 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    width: 250px;
    vertical-align: middle;
    border: none;
}

.vtipz-spec-icon {
    color: var(--color-primary, #C41230);
    margin-right: 10px;
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.9;
}

.vtipz-specs-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    border: none;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .vtipz-specs-table th,
    .vtipz-specs-table td {
        padding: 10px 14px;
        font-size: 13px;
    }
    .vtipz-specs-table th {
        width: 140px;
    }
}

.vtipz-reviews-main-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    margin-bottom: 24px;
}

.vtipz-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vtipz-review-item {
    background: #F8FAFC;
    border: 1px solid #E2ECF5;
    border-radius: 0 0 16px 0 !important;
    padding: 18px 20px;
}

.vtipz-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.vtipz-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-border, #E5E7EB);
    color: var(--color-primary, #C41230);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.vtipz-review-author {
    font-size: 14.5px;
    font-weight: 700;
    color: #1E293B;
    display: block;
}

.vtipz-review-rating-date {
    font-size: 12.5px;
    color: #F59E0B;
    font-weight: 600;
}

.vtipz-review-body {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   HỆ THỐNG ĐÁNH GIÁ SẢN PHẨM ĐỘNG (FORM, SUMMARY, ITEMS, PHÂN TRANG)
   ========================================================================== */

/* Top bar đánh giá */
.vtipz-reviews-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2E8F0;
}

.vtipz-reviews-main-title {
    font-size: 20px;
    font-weight: 700;
    color: #101820;
    margin: 0 0 4px 0;
}

.vtipz-reviews-subtitle {
    font-size: 13px;
    color: #8A929C;
    margin: 0;
}

.vtipz-btn-toggle-review-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 0 0 12px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vtipz-btn-toggle-review-form:hover {
    background: var(--color-primary, #C41230);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.2);
}

/* Khối tổng quan điểm số (Summary Card) */
.vtipz-reviews-summary-card {
    display: flex;
    align-items: center;
    background: var(--color-bg-light, #F8F9FA);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 0 0 20px 0;
    padding: 20px 24px;
    margin-bottom: 28px;
    gap: 32px;
}

.vtipz-summary-score-col {
    text-align: center;
    padding-right: 28px;
    border-right: 1px solid var(--color-border, #E5E7EB);
    min-width: 140px;
}

.vtipz-summary-big-score {
    font-size: 38px;
    font-weight: 800;
    color: var(--color-primary, #C41230);
    line-height: 1;
    margin-bottom: 6px;
}

.vtipz-summary-stars {
    color: #F5BD06;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.vtipz-summary-count {
    font-size: 12.5px;
    color: #64748B;
    font-weight: 500;
}

.vtipz-summary-note-col {
    flex: 1;
}

.vtipz-summary-note-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #101820;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-summary-note-title i {
    color: #009444;
}

.vtipz-summary-note-text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* Khối Form gửi đánh giá */
.vtipz-review-form-wrap {
    margin-bottom: 32px;
    display: none; /* Mặc định ẩn, bấm Viết đánh giá sẽ trượt xuống */
}

.vtipz-review-form-card {
    background: #FFFFFF;
    border: 1.5px solid var(--color-primary, #C41230);
    border-radius: 0 0 20px 0;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(196, 18, 48, 0.08);
}

.vtipz-review-form-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-review-form-desc {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 20px 0;
}

/* Star Picker Widget */
.vtipz-star-picker-group {
    margin-bottom: 18px;
}

.vtipz-star-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.vtipz-star-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #D1D5DB;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.vtipz-star-btn.active,
.vtipz-star-btn.hover {
    color: #F5BD06;
}

.vtipz-star-btn:hover {
    transform: scale(1.2);
}

.vtipz-star-picker-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #C41230);
    margin-left: 10px;
}

/* Form Fields */
.vtipz-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.vtipz-form-group {
    margin-bottom: 16px;
}

.vtipz-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 6px;
}

.vtipz-req {
    color: #E02B2B;
}

.vtipz-form-input,
.vtipz-form-textarea {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #101820;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.vtipz-form-input:focus,
.vtipz-form-textarea:focus {
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.15);
}

.vtipz-review-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.vtipz-btn-submit-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 0 0 12px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vtipz-btn-submit-review:hover {
    background: var(--color-primary-dark, #9E0E26);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25);
}

.vtipz-btn-submit-review:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.vtipz-btn-cancel-review {
    background: none;
    border: 1px solid #CBD5E1;
    border-radius: 0 0 12px 0;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vtipz-btn-cancel-review:hover {
    background: #F1F5F9;
    color: #1E293B;
}

/* Thông báo phản hồi Form */
.vtipz-review-msg {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

.vtipz-review-msg.success {
    background: #E8F8F0;
    border: 1px solid #A7F3D0;
    color: #009444;
}

.vtipz-review-msg.error {
    background: #FDE8E8;
    border: 1px solid #FECACA;
    color: #E02B2B;
}

/* Danh sách nhận xét */
.vtipz-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vtipz-review-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0 0 16px 0;
    padding: 18px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vtipz-review-item:hover {
    border-color: var(--color-border, #E5E7EB);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.05);
}

.vtipz-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vtipz-review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.vtipz-review-author-info {
    flex: 1;
}

.vtipz-review-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.vtipz-review-author {
    font-size: 14.5px;
    font-weight: 700;
    color: #101820;
}

.vtipz-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #009444;
    background: #E8F8F0;
    padding: 2px 7px;
    border-radius: 4px;
}

.vtipz-review-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vtipz-review-stars {
    color: #F5BD06;
    font-size: 14px;
    letter-spacing: 1px;
}

.vtipz-review-divider {
    color: #CBD5E1;
    font-size: 12px;
}

.vtipz-review-date {
    font-size: 12px;
    color: #8A929C;
}

.vtipz-review-body {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* Empty State */
.vtipz-reviews-empty {
    text-align: center;
    padding: 40px 20px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 0 0 16px 0;
    color: #64748B;
}

.vtipz-reviews-empty i {
    font-size: 36px;
    color: #94A3B8;
    margin-bottom: 12px;
    display: block;
}

.vtipz-reviews-empty p {
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 4px 0;
}

.vtipz-reviews-empty span {
    font-size: 13px;
    color: #64748B;
}

/* Phân trang đánh giá (Pagination) */
.vtipz-reviews-pagination-wrap {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.vtipz-reviews-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vtipz-rev-page-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #101820;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vtipz-rev-page-btn:hover {
    border-color: var(--color-primary, #C41230);
    color: var(--color-primary, #C41230);
    background: var(--color-bg-light, #F8F9FA);
}

.vtipz-rev-page-btn.active {
    background: var(--color-primary, #C41230);
    border-color: var(--color-primary, #C41230);
    color: #FFFFFF;
    cursor: default;
}

.vtipz-rev-page-prev,
.vtipz-rev-page-next {
    font-size: 11px;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .vtipz-reviews-summary-card {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .vtipz-summary-score-col {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--color-border, #E5E7EB);
        padding-bottom: 16px;
        width: 100%;
    }

    .vtipz-form-row-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE STYLES FOR SINGLE PRODUCT PAGE
   ========================================================================== */
@media (max-width: 992px) {
    .vtipz-single-product-page {
        padding: 20px 0 44px !important;
    }

    .vtipz-product-hero {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 32px !important;
    }

    .vtipz-main-image-wrap {
        height: 380px !important;
        border-radius: 0 0 48px 0 !important;
    }
}

@media (max-width: 768px) {
    .vtipz-main-image-wrap {
        height: 320px !important;
        border-radius: 0 0 36px 0 !important;
    }

    .vtipz-gallery-thumbs {
        gap: 8px !important;
    }

    .vtipz-thumb-btn {
        height: 72px !important;
        border-radius: 0 0 12px 0 !important;
        padding: 4px !important;
    }

    .vtipz-single-title {
        font-size: 20px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .vtipz-single-rating-row {
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
        font-size: 12px !important;
    }

    .vtipz-single-price-box {
        padding: 12px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 0 0 16px 0 !important;
    }

    .vtipz-single-price-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .vtipz-single-price-current {
        font-size: 22px !important;
    }

    .vtipz-single-price-old {
        font-size: 13px !important;
    }

    .vtipz-wholesale-tier-card {
        border-radius: 0 0 16px 0 !important;
        margin-bottom: 16px !important;
    }

    .vtipz-wholesale-tier-header {
        padding: 8px 12px !important;
    }

    .vtipz-tier-title {
        font-size: 11.5px !important;
    }

    .vtipz-tier-row {
        padding: 8px 12px !important;
    }

    .tier-name {
        font-size: 11.5px !important;
    }

    .tier-moq {
        font-size: 10.5px !important;
    }

    .tier-price {
        font-size: 12px !important;
    }

    .vtipz-variant-options {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .vtipz-voucher-item {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .vtipz-voucher-right {
        align-items: flex-end !important;
    }

    .vtipz-variant-pill {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
    }

    /* Actions row: Qty + Wishlist + Cart on top row, Buy Now full width below */
    .vtipz-purchase-actions-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .vtipz-qty-selector {
        height: 42px !important;
        border-radius: 0 0 10px 0 !important;
    }

    .vtipz-qty-btn {
        width: 32px !important;
    }

    .vtipz-qty-field {
        width: 36px !important;
        font-size: 13px !important;
    }

    .vtipz-btn-single-cart {
        flex: 1 1 auto !important;
        height: 42px !important;
        font-size: 12.5px !important;
        padding: 0 10px !important;
        border-radius: 0 0 12px 0 !important;
    }

    .vtipz-btn-single-wishlist {
        width: 42px !important;
        height: 42px !important;
        border-radius: 0 0 12px 0 !important;
    }

    .vtipz-btn-single-buynow {
        width: 100% !important;
        flex: 1 1 100% !important;
        height: 44px !important;
        font-size: 13.5px !important;
        border-radius: 0 0 12px 0 !important;
    }

    .vtipz-single-commitments {
        gap: 6px !important;
        padding: 12px !important;
    }

    .vtipz-commit-line {
        font-size: 11px !important;
    }

    /* Tabs on mobile */
    .vtipz-tabs-container {
        margin-top: 32px !important;
        border-radius: 0 0 24px 0 !important;
    }

    .vtipz-tabs-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    .vtipz-tabs-nav::-webkit-scrollbar {
        display: none !important;
    }

    .vtipz-tab-nav-btn {
        padding: 12px 16px !important;
        font-size: 12.5px !important;
        flex-shrink: 0 !important;
    }

    .vtipz-tabs-content {
        padding: 18px 14px !important;
    }

    .vtipz-desc-lead,
    .vtipz-specs-lead {
        font-size: 13.5px !important;
        margin-bottom: 16px !important;
    }

    .vtipz-specs-table-wrap {
        border-radius: 0 0 14px 0 !important;
    }

    .vtipz-specs-table td,
    .vtipz-specs-table th {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .vtipz-main-image-wrap {
        height: 280px !important;
    }

    .vtipz-thumb-btn {
        height: 60px !important;
    }
}






/* --- Start pages.css --- */
/* --- Sub-module: Wireframe Account & News Categories (Original Lines 4918-5425) --- */
/* ==========================================================================
   WIREFRAME PAGES EXTENSION - FIGMA CANVAS #0:1 FIDELITY
   ========================================================================== */

/* (My Account styles moved to Section 9: Modern Dashboard Architecture) */

/* 2. DANH MỤC TIN TỨC (#109:1122) */
.vtipz-news-hero-banner {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    padding: 0 40px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-news-hero-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    object-fit: cover;
    opacity: 0.25;
    pointer-events: none;
}

.vtipz-news-hero-overlay {
    position: relative;
    z-index: 2;
    max-width: 620px;
    color: #ffffff;
}

.vtipz-news-hero-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.vtipz-news-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.vtipz-news-hero-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

.vtipz-news-tabs-wrap {
    margin-bottom: 32px;
}

.vtipz-news-tabs {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.vtipz-news-tab-btn {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: #ffffff;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-news-tab-item.active .vtipz-news-tab-btn,
.vtipz-news-tab-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.vtipz-news-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.vtipz-wireframe-news-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--vtipz-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vtipz-wireframe-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vtipz-shadow-md);
    border-color: var(--color-blue);
}

.vtipz-wireframe-news-thumb-wrap {
    display: block;
    height: 180px;
    overflow: hidden;
    background-color: var(--color-primary-soft, #FDE8EB);
}

.vtipz-wireframe-news-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
    transition: transform 0.3s ease;
}

.vtipz-wireframe-news-card:hover .vtipz-wireframe-news-thumb {
    transform: scale(1.05);
}

.vtipz-wireframe-news-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vtipz-wireframe-news-meta {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.vtipz-wireframe-news-title {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-heading);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtipz-wireframe-news-title a {
    color: inherit;
    text-decoration: none;
}

.vtipz-wireframe-news-title a:hover {
    color: var(--color-blue);
}

.vtipz-wireframe-news-desc {
    font-size: 13px;
    color: var(--color-text-body);
    line-height: 1.5;
    margin-bottom: 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtipz-wireframe-news-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vtipz-wireframe-news-link:hover {
    color: var(--color-accent);
}



/* --- Sub-module: Wireframe Post, About, Contact, Policies, Brand Hub (Original Lines 5468-6644) --- */
/* 3. CHI TIẾT BÀI VIẾT (#109:1234) */
.vtipz-single-post-page {
    padding-top: 40px;
    padding-bottom: 60px;
}

.vtipz-single-post-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
}

.vtipz-single-post-main {
    max-width: 800px;
}

.vtipz-article-meta-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.vtipz-article-category {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.vtipz-article-heading {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-text-heading);
    margin-bottom: 20px;
}

.vtipz-article-cover-wrap {
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 24px;
    max-height: 440px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-article-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.vtipz-article-sapo {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-dark-navy);
    padding: 18px 24px;
    background-color: var(--color-bg-light);
    border-left: 4px solid var(--color-blue);
    border-radius: 0 12px 12px 0;
    margin-bottom: 24px;
}

.vtipz-article-rich-body {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-body);
}

.vtipz-article-rich-body p {
    margin-bottom: 16px;
}

.vtipz-article-rich-body h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 28px;
    margin-bottom: 14px;
}

.vtipz-article-rich-body blockquote {
    font-style: italic;
    border-left: 3px solid var(--color-gold);
    background-color: #FFFDF5;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    color: #78350F;
    border-radius: 0 8px 8px 0;
}

.vtipz-article-inline-media {
    margin: 24px 0;
    text-align: center;
}

.vtipz-inline-img {
    border-radius: var(--radius-thumb);
    max-width: 100%;
    height: auto;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-caption {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 8px;
    font-style: italic;
}

.vtipz-article-share-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid #E2E8F0;
}

.vtipz-share-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-heading);
}

.vtipz-share-buttons {
    display: flex;
    gap: 10px;
}

.vtipz-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease;
}

.vtipz-share-btn:hover {
    opacity: 0.88;
}

.vtipz-share-btn.fb {
    background-color: #1877F2;
    color: #ffffff;
}

.vtipz-share-btn.zl {
    background-color: #0068FF;
    color: #ffffff;
}

.vtipz-share-btn.x {
    background-color: #000000;
    color: #ffffff;
}

.vtipz-share-btn.copy-link {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    border: 1px solid var(--color-border-light);
}

.vtipz-single-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vtipz-sidebar-block {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-sidebar-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border-light);
}

.vtipz-related-posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vtipz-related-post-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vtipz-related-thumb-wrap {
    width: 72px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-thumb);
    overflow: hidden;
    background-color: var(--color-primary-soft, #FDE8EB);
}

.vtipz-related-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vtipz-related-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-heading);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtipz-related-title a {
    color: inherit;
    text-decoration: none;
}

.vtipz-related-title a:hover {
    color: var(--color-blue);
}

.vtipz-related-date {
    font-size: 11px;
    color: var(--color-text-muted);
}

.vtipz-sidebar-agency-banner {
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-dark-navy, #111827) 100%);
    color: #ffffff;
    padding: 24px;
    border-radius: var(--radius-cta);
    box-shadow: var(--vtipz-shadow-md);
}

.vtipz-agency-badge-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.vtipz-sidebar-agency-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.vtipz-sidebar-agency-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 18px;
}

.vtipz-sidebar-agency-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background-color: var(--color-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-agency-btn);
    text-decoration: none;
    transition: background 0.2s ease;
}

.vtipz-sidebar-agency-btn:hover {
    background-color: var(--color-accent-hover);
}

/* 4. GIỚI THIỆU (#109:1346) */
.vtipz-about-cover-section {
    margin-bottom: 32px;
}

.vtipz-about-cover-wrapper {
    position: relative;
    height: 380px;
    overflow: hidden;
    border-radius: var(--radius-about);
    box-shadow: var(--vtipz-shadow-md);
}

.vtipz-about-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vtipz-about-cover-badge {
    position: absolute;
    bottom: 24px;
    left: 28px;
    background: rgba(196, 18, 48, 0.9);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: var(--radius-badge);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.vtipz-about-main-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
}

.vtipz-about-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-about-stat-box {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 24px;
    text-align: center;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-about-stat-box .stat-number {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.vtipz-about-stat-box .stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.vtipz-about-feature-block {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-about);
    padding: 40px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.vtipz-feature-grid.reverse {
    direction: rtl;
}

.vtipz-feature-grid.reverse > * {
    direction: ltr;
}

.vtipz-feature-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    box-shadow: var(--vtipz-shadow-md);
}

.vtipz-feature-img.left-radius {
    border-radius: var(--radius-sub-1);
}

.vtipz-feature-img.right-radius {
    border-radius: var(--radius-sub-2);
}

.vtipz-feature-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.vtipz-feature-heading {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.vtipz-feature-p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-body);
    margin-bottom: 14px;
}

.vtipz-feature-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vtipz-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-body);
}

.vtipz-about-brands-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    padding: 0 24px;
}

.vtipz-about-brand-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: var(--color-primary);
    box-shadow: var(--vtipz-shadow-sm);
    transition: all 0.2s ease;
}

.vtipz-about-brand-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--vtipz-shadow-md);
}

/* 5. LIÊN HỆ (#109:1458) */
.vtipz-contact-wireframe-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 28px;
    align-items: start;
}

.vtipz-contact-form-box {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

.vtipz-contact-box-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F1F5F9;
}

.vtipz-contact-box-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, var(--color-primary, #C41230));
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-contact-box-sub {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

.vtipz-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

.vtipz-field-group {
    margin-bottom: 12px;
}

.vtipz-form-grid-2col .vtipz-field-group {
    margin-bottom: 0;
}

.vtipz-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.vtipz-wireframe-input,
.vtipz-wireframe-textarea {
    width: 100%;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    background-color: #F8FAFC;
    color: #1E293B;
    transition: all 0.2s ease;
}

.vtipz-wireframe-input {
    height: 40px;
}

.vtipz-wireframe-textarea {
    height: 84px;
    min-height: 84px;
    resize: vertical;
}

.vtipz-wireframe-input:focus,
.vtipz-wireframe-textarea:focus {
    background-color: #FFFFFF;
    border-color: var(--color-primary, var(--color-primary, #C41230));
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

.vtipz-wireframe-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 28px;
    height: 42px;
    background: linear-gradient(135deg, var(--color-primary, var(--color-primary, #C41230)) 0%, #1565C0 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25);
    transition: all 0.25s ease;
}

.vtipz-wireframe-submit-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-dark, var(--color-primary-dark, #9E0E26)) 0%, var(--color-primary, #C41230) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.35);
}

.vtipz-company-info-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    margin-bottom: 18px;
}

.vtipz-company-info-card .vtipz-company-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary, var(--color-primary, #C41230)) !important;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #E2E8F0 !important;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.vtipz-company-lines-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vtipz-company-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.vtipz-company-line .line-title {
    color: #475569;
    font-weight: 600;
    min-width: 105px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.vtipz-company-line .line-title i {
    color: var(--color-primary, var(--color-primary, #C41230));
    width: 14px;
    text-align: center;
}

.vtipz-company-line .line-val {
    color: #0F172A;
    font-weight: 500;
    word-break: break-word;
}

.vtipz-company-line .line-val a {
    color: #0F172A;
    text-decoration: none;
    transition: color 0.2s;
}

.vtipz-company-line .line-val a:hover {
    color: var(--color-primary, var(--color-primary, #C41230));
}

.vtipz-embedded-map-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

.vtipz-map-header {
    padding: 10px 18px;
    background-color: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, var(--color-primary, #C41230));
}

.vtipz-map-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vtipz-map-iframe {
    display: block;
    width: 100%;
    height: 240px;
    border: 0;
}

/* 6. CHÍNH SÁCH (#109:1570) */
.vtipz-policy-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
}

.vtipz-policy-menu-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-policy-menu-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-menu-swipe-note {
    display: none;
}

.vtipz-table-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11.5px;
    font-weight: 500;
    border-bottom: 1px solid #E2E8F0;
}

.vtipz-policy-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtipz-policy-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: var(--radius-btn-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-body);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-policy-menu-item.active .vtipz-policy-menu-link {
    background-color: var(--color-primary);
    color: #ffffff;
}

.vtipz-policy-menu-item:not(.active) .vtipz-policy-menu-link:hover {
    background-color: var(--color-bg-light);
    color: var(--color-blue);
}

.vtipz-policy-help-box {
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #ffffff;
    padding: 22px;
    border-radius: var(--radius-card);
    text-align: center;
}

.vtipz-policy-help-box h3 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.vtipz-policy-help-box p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    line-height: 1.4;
}

.vtipz-policy-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    background-color: #ffffff;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-btn-sm);
    text-decoration: none;
    transition: background 0.2s ease;
}

.vtipz-policy-help-btn:hover {
    background-color: var(--color-bg-light);
}

.vtipz-policy-article-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 36px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-policy-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 1px;
}

.vtipz-policy-article-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary);
}

.vtipz-policy-clause {
    margin-bottom: 28px;
}

.vtipz-policy-clause h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.vtipz-policy-clause p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-body);
    margin-bottom: 10px;
}

.vtipz-policy-clause ul {
    padding-left: 20px;
    margin-bottom: 14px;
    color: var(--color-text-body);
    font-size: 14px;
}

.vtipz-policy-clause li {
    margin-bottom: 6px;
}

.vtipz-policy-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.vtipz-policy-table th {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 2px solid var(--color-border-light);
}

.vtipz-policy-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #E2E8F0;
    color: var(--color-text-body);
}

/* WordPress WYSIWYG Editor Content Styling for Policy Pages */
.vtipz-policy-wp-content {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--color-text-body, #334155);
}

.vtipz-policy-wp-content h2,
.vtipz-policy-wp-content .wp-block-heading:is(h2) {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, var(--color-primary, #C41230));
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    padding-left: 12px;
    border-left: 3.5px solid var(--color-secondary, var(--color-primary, #C41230));
}

.vtipz-policy-wp-content h3,
.vtipz-policy-wp-content .wp-block-heading:is(h3) {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.vtipz-policy-wp-content p {
    margin-bottom: 1rem;
}

.vtipz-policy-wp-content ul,
.vtipz-policy-wp-content ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 24px;
}

.vtipz-policy-wp-content ul {
    list-style-type: disc;
}

.vtipz-policy-wp-content ol {
    list-style-type: decimal;
}

.vtipz-policy-wp-content li {
    margin-bottom: 0.5rem;
}

.vtipz-policy-wp-content strong,
.vtipz-policy-wp-content b {
    color: #0F172A;
    font-weight: 600;
}

.vtipz-policy-wp-content a {
    color: var(--color-secondary, var(--color-primary, #C41230));
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.vtipz-policy-wp-content a:hover {
    color: var(--color-accent, var(--color-primary, #C41230));
    text-decoration: underline;
}

.vtipz-policy-wp-content table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-light, #E2E8F0);
}

.vtipz-policy-wp-content th {
    background-color: var(--color-bg-light, var(--color-bg-light, #F8F9FA));
    color: var(--color-primary, var(--color-primary, #C41230));
    font-weight: 700;
    padding: 10px 14px;
    border: 1px solid var(--color-border-light, #E2E8F0);
}

.vtipz-policy-wp-content td {
    padding: 10px 14px;
    border: 1px solid var(--color-border-light, #E2E8F0);
}

.vtipz-policy-wp-content blockquote {
    border-left: 4px solid var(--color-accent, var(--color-primary, #C41230));
    background: #FFF7ED;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 1.25rem 0;
    color: #9A3412;
}

/* 7. THƯƠNG HIỆU (Chuẩn thiết kế mẫu & Đồng bộ màu sắc layout) */
.vtipz-brand-hero-section {
    background-color: var(--color-bg-light, var(--color-bg-light, #F8F9FA));
    border: 1px solid var(--color-border-light, #D6E8F7);
    border-radius: 16px 16px 80px 16px;
    padding: 32px 36px;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.vtipz-brand-logo-card {
    width: 136px;
    height: 136px;
    background-color: #FFFFFF;
    border: 1.5px solid var(--color-border, #E5E7EB);
    border-radius: 10px 10px 42px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.06);
}

.vtipz-brand-logo-symbol {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, var(--color-primary, #C41230));
    text-align: center;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vtipz-brand-logo-symbol img {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
}

.vtipz-brand-intro-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vtipz-brand-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary, var(--color-primary, #C41230));
    margin: 0 0 10px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.vtipz-brand-bio {
    font-size: 14px;
    color: var(--color-text-muted, #64748B);
    line-height: 1.6;
    margin: 0 0 12px 0;
    max-width: 820px;
}

.vtipz-brand-meta-count {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-blue, var(--color-primary, #C41230));
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .vtipz-brand-hero-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
        border-radius: 14px 14px 44px 14px;
        margin-bottom: 24px;
    }
    .vtipz-brand-logo-card {
        width: 100px;
        height: 100px;
        border-radius: 8px 8px 30px 8px;
    }
    .vtipz-brand-title {
        font-size: 22px;
        margin-bottom: 6px;
    }
    .vtipz-brand-bio {
        font-size: 13.5px;
        margin-bottom: 8px;
    }
    .vtipz-brand-meta-count {
        font-size: 13px;
    }
}

/* Layout Catalogue: 2 Cột (Bộ lọc 280px + Danh sách sản phẩm) */
.vtipz-catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

.vtipz-filter-sidebar {
    width: 100%;
}

.vtipz-filter-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-filter-heading-row {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: 16px;
}

.vtipz-filter-heading {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.vtipz-filter-group {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}

.vtipz-filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vtipz-filter-group-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 12px;
}

.vtipz-filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vtipz-radio-label,
.vtipz-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--color-text-body);
    cursor: pointer;
    user-select: none;
}

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

.vtipz-price-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.vtipz-price-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 8px;
}

.vtipz-price-box-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.vtipz-price-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
    outline: none;
}

.vtipz-price-separator {
    color: var(--color-text-muted);
    font-weight: 700;
}

.vtipz-btn-apply-filter {
    width: 100%;
    height: 38px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-btn-sm);
    cursor: pointer;
    transition: background 0.2s ease;
}

.vtipz-btn-apply-filter:hover {
    background-color: var(--color-primary-dark);
}

.vtipz-catalog-main {
    min-width: 0;
}

.vtipz-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    margin-bottom: 24px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-results-count {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.vtipz-dropdown-trigger {
    background: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-heading);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vtipz-products-grid-4col {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vtipz-product-card-wireframe {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--vtipz-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.vtipz-product-card-wireframe:hover {
    transform: translateY(-4px);
    box-shadow: var(--vtipz-shadow-md);
    border-color: var(--color-blue);
}

.vtipz-product-thumb-container {
    position: relative;
    height: 220px;
    background-color: var(--color-primary-soft, #FDE8EB);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vtipz-corner-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    color: var(--color-primary, #C41230);
    text-align: right;
    line-height: 1.2;
    opacity: 0.7;
    pointer-events: none;
}

.vtipz-product-card-wireframe .vtipz-product-img {
    max-height: 75%;
    max-width: 75%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.vtipz-product-card-wireframe:hover .vtipz-product-img {
    transform: scale(1.06);
}

.vtipz-product-details {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vtipz-product-brand-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.vtipz-product-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-heading);
    line-height: 1.4;
    margin-bottom: 8px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtipz-product-title a {
    color: inherit;
    text-decoration: none;
}

.vtipz-product-title a:hover {
    color: var(--color-blue);
}

.vtipz-product-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.vtipz-current-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-accent);
}

.vtipz-old-price {
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.vtipz-agency-price-note {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.vtipz-product-card-wireframe .vtipz-btn-add-cart {
    width: 100%;
    padding: 10px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-btn-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s ease;
}

.vtipz-product-card-wireframe .vtipz-btn-add-cart:hover {
    background-color: var(--color-primary-dark);
}

.vtipz-sec-title-large {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
}



/* --- Sub-module: Auth Login & Registration Forms (Original Lines 6645-7097) --- */
/* ==========================================================================
   8. ĐĂNG NHẬP & ĐĂNG KÝ (#109:786 & #109:898 - SYSTEM_RULES)
   ========================================================================== */
.vtipz-auth-page {
    background-color: var(--color-bg-light);
    min-height: 520px;
    padding-top: 48px !important;
    padding-bottom: 80px !important;
}

.vtipz-page-intro-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 36px auto;
}

.vtipz-auth-page-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.vtipz-auth-page-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Mobile Segmented Form Switcher (Wireframe Mobile - Hiển thị 1 form trên mobile) */
.vtipz-mobile-tab-toggle {
    display: none;
    background: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 5px;
    margin: 0 auto 28px auto;
    max-width: 520px;
    width: 100%;
    gap: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vtipz-tab-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    padding: 0 12px;
}

.vtipz-tab-btn i {
    font-size: 15px;
}

.vtipz-tab-btn.active {
    background: #ffffff;
    color: var(--color-primary);
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(196, 18, 48, 0.12);
}

.vtipz-link-back-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vtipz-link-back-login:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .vtipz-mobile-tab-toggle {
        display: flex !important;
    }

    /* Đăng ký: Chỉ hiển thị 1 form trên mobile theo tab được chọn */
    .vtipz-register-grid.show-member .col-agency {
        display: none !important;
    }
    .vtipz-register-grid.show-member .col-member {
        display: flex !important;
        animation: vtipzFadeIn 0.25s ease;
    }

    .vtipz-register-grid.show-agency .col-member {
        display: none !important;
    }
    .vtipz-register-grid.show-agency .col-agency {
        display: flex !important;
        animation: vtipzFadeIn 0.25s ease;
    }

    /* Đăng nhập: Chỉ hiển thị 1 form trên mobile theo tab được chọn */
    .vtipz-login-layout.show-main .vtipz-login-side-col {
        display: none !important;
    }
    .vtipz-login-layout.show-main .vtipz-login-main-col {
        display: block !important;
        animation: vtipzFadeIn 0.25s ease;
    }

    .vtipz-login-layout.show-side .vtipz-login-main-col {
        display: none !important;
    }
    .vtipz-login-layout.show-side .vtipz-login-side-col {
        display: flex !important;
        animation: vtipzFadeIn 0.25s ease;
    }
}

@keyframes vtipzFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2-Column Login Layout (Rải đều, mở rộng theo container 1200px) */
.vtipz-login-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-items: start !important;
}

.vtipz-login-main-col {
    width: 100% !important;
    max-width: 100% !important;
}

.vtipz-login-side-col {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 2-Column Register Grid (Rải đều, mở rộng theo container 1200px) */
.vtipz-register-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.vtipz-reg-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}

.vtipz-auth-card {
    background: #ffffff !important;
    border: 1.5px solid var(--color-border-light) !important;
    border-radius: 0 0 32px 0 !important;
    padding: 36px 40px !important;
    box-shadow: 0 4px 20px rgba(196, 18, 48, 0.08) !important;
    transition: box-shadow 0.2s ease;
}

.vtipz-auth-card:hover {
    box-shadow: 0 8px 30px rgba(196, 18, 48, 0.14) !important;
}

.vtipz-auth-card.card-agency,
.vtipz-auth-card.card-agency.is-target {
    border: 1.5px solid var(--color-border-light) !important;
    border-top: 1.5px solid var(--color-border-light) !important;
}

.vtipz-interested-prod-alert {
    background: #FFF7ED !important;
    border: 1.5px solid #FDBA74 !important;
    border-radius: 0 0 16px 0 !important;
    padding: 16px 20px !important;
    margin-bottom: 28px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    color: #9A3412 !important;
}

.vtipz-interested-prod-alert i {
    font-size: 22px !important;
    color: var(--color-accent) !important;
    margin-top: 2px !important;
}

.vtipz-interested-prod-alert strong {
    font-size: 15px !important;
    color: #7C2D12 !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.vtipz-interested-prod-alert p {
    font-size: 13.5px !important;
    color: #9A3412 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.vtipz-auth-title,
.vtipz-form-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.vtipz-form-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.vtipz-auth-desc,
.vtipz-form-sub {
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 22px;
}

.vtipz-badge-pending {
    display: inline-flex;
    align-items: center;
    background-color: #FFF8E1;
    color: #B78103;
    border: 1px solid #FFE082;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0 0 12px 0;
    white-space: nowrap;
}

.vtipz-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 20px;
}

.vtipz-alert-danger {
    background-color: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.vtipz-alert-success {
    background-color: #DCFCE7;
    color: #16A34A;
    border: 1px solid #BBF7D0;
}

/* Form Controls */
.vtipz-auth-form {
    display: flex;
    flex-direction: column;
}

.vtipz-form-group {
    margin-bottom: 18px !important;
}

.vtipz-form-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text-heading) !important;
    margin-bottom: 7px !important;
}

.vtipz-form-input {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: var(--color-text-dark) !important;
    background-color: #ffffff !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 0 0 14px 0 !important;
    outline: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.vtipz-form-input {
    height: 48px !important;
    padding: 12px 16px !important;
}

textarea.vtipz-form-input {
    height: auto !important;
    min-height: 96px !important;
}

.vtipz-form-input:focus {
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.15) !important;
}

.vtipz-form-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 13.5px;
}

.vtipz-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--color-text-body);
    font-size: 13.5px;
    user-select: none;
}

.vtipz-check-label input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.vtipz-link-forgot {
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vtipz-link-forgot:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.vtipz-form-submit-wrap {
    margin-bottom: 18px;
}

.vtipz-btn-auth-submit {
    width: 100% !important;
    height: 52px !important;
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.25) !important;
}

.vtipz-btn-auth-submit:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.35) !important;
}

.vtipz-btn-auth-submit:active {
    transform: translateY(0);
}

.vtipz-btn-auth-submit.btn-member {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.25) !important;
}

.vtipz-btn-auth-submit.btn-member:hover {
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.35) !important;
}

.vtipz-auth-footer-link {
    text-align: center;
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.vtipz-auth-footer-link a {
    color: var(--color-blue);
    font-weight: 700;
    text-decoration: none;
}

.vtipz-auth-footer-link a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* File Upload Dropzone */
.vtipz-dropzone-box {
    position: relative;
    border: 1.5px dashed var(--color-border-search);
    background-color: #F8FAFC;
    border-radius: 0 0 16px 0;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vtipz-dropzone-box:hover {
    background-color: #F0F7FD;
    border-color: var(--color-blue);
}

.vtipz-dropzone-box i {
    font-size: 26px;
    color: var(--color-blue);
}

.vtipz-dropzone-box .dropzone-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.vtipz-dropzone-box .vtipz-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Side Column Box: Quên mật khẩu & Quyền lợi đại lý */
.vtipz-side-card {
    background: #ffffff;
    border: 1.5px solid var(--color-border-light);
    border-radius: 0 0 24px 0;
    padding: 24px 28px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-side-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.vtipz-side-card-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.vtipz-btn-outline-action {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 0 0 16px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.vtipz-btn-outline-action:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.vtipz-agency-benefits-card {
    background: linear-gradient(135deg, var(--color-bg-light, #F8F9FA) 0%, var(--color-primary-soft, #FDE8EB) 100%);
    border: 1.5px solid var(--color-border-light);
    border-radius: 0 0 24px 0;
    padding: 24px 28px;
}

.vtipz-benefits-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtipz-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vtipz-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-heading);
}

.vtipz-benefit-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-accent);
    margin-top: 6px;
    flex-shrink: 0;
}

/* Note Boxes (Wireframe #120:38 & #120:87 - Đồng bộ background chuẩn Quyền lợi tài khoản đại lý) */
.vtipz-reg-note-box,
.vtipz-reg-note-box.note-agency {
    background: linear-gradient(135deg, var(--color-bg-light, #F8F9FA) 0%, var(--color-primary-soft, #FDE8EB) 100%) !important;
    border: 1.5px solid var(--color-border-light) !important;
    border-radius: 0 0 24px 0 !important;
    padding: 24px 28px !important;
    box-shadow: var(--vtipz-shadow-sm) !important;
}

.vtipz-note-title,
.vtipz-reg-note-box.note-agency .vtipz-note-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vtipz-note-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--color-text-heading) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.vtipz-note-list li {
    position: relative !important;
    padding-left: 18px !important;
}

.vtipz-note-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: var(--color-accent) !important;
}



/* --- Sub-module: My Account Dashboard (Redesigned & Modernized) --- */
/* ==========================================================================
   9. TÀI KHOẢN CỦA TÔI (#109:1010 - MODERN DASHBOARD ARCHITECTURE)
   ========================================================================== */
.vtipz-account-page {
    background-color: #F8FAFC;
    min-height: 600px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.vtipz-account-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* --- Left Sidebar --- */
.vtipz-account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vtipz-account-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vtipz-account-profile-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vtipz-account-avatar-box {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
}

.vtipz-account-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #EFF6FF;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.12);
}

.vtipz-avatar-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #10B981;
    border: 2px solid #ffffff;
}

.vtipz-account-user-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.vtipz-account-name {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
    line-height: 1.3;
}

.vtipz-account-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: #EFF6FF;
    color: #0088FF;
    border: 1px solid #DBEAFE;
    margin-bottom: 4px;
    max-width: 100%;
}

.vtipz-account-badge.approved {
    background-color: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

.vtipz-account-badge.pending {
    background-color: #FFFBEB;
    color: #D97706;
    border-color: #FDE68A;
}

.vtipz-account-role-desc {
    display: block;
    font-size: 12px;
    color: #64748B;
    font-weight: 500;
    margin-top: 2px;
}

/* Sidebar Navigation */
.vtipz-account-nav {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.vtipz-account-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtipz-account-menu-item {
    border: none;
}

.vtipz-account-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vtipz-account-menu-link i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    color: #64748B;
    transition: color 0.2s ease;
}

.vtipz-account-menu-link:hover {
    background-color: #F8FAFC;
    color: var(--color-primary, #C41230);
}

.vtipz-account-menu-link:hover i {
    color: #0088FF;
}

.vtipz-account-menu-item.active .vtipz-account-menu-link {
    background-color: #EFF6FF;
    color: var(--color-primary, #C41230);
    font-weight: 700;
}

.vtipz-account-menu-item.active .vtipz-account-menu-link i {
    color: #0088FF;
}

.vtipz-account-menu-item.logout {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #F1F5F9;
}

.vtipz-account-menu-item.logout .vtipz-account-menu-link {
    color: #DC2626;
}

.vtipz-account-menu-item.logout .vtipz-account-menu-link i {
    color: #DC2626;
}

.vtipz-account-menu-item.logout .vtipz-account-menu-link:hover {
    background-color: #FEF2F2;
    color: #B91C1C;
}

.vtipz-menu-count-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #F26522 0%, #EA580C 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.3;
}

.vtipz-tab-badge-b2b {
    display: inline-block;
    background: #FEF3C7;
    color: #B45309;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid #FCD34D;
    margin-left: 6px;
    line-height: 1.3;
}
.vtipz-account-menu-item.active .vtipz-tab-badge-b2b {
    background: #FFFFFF;
    color: var(--color-primary, #C41230);
    border-color: #FFFFFF;
}

/* --- Top Stat Cards Grid --- */
.vtipz-account-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vtipz-stat-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.25s ease;
}

.vtipz-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-color: #CBD5E1;
}

.vtipz-stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vtipz-stat-icon-wrap.bg-blue {
    background-color: #EFF6FF;
    color: #0088FF;
}

.vtipz-stat-icon-wrap.bg-emerald {
    background-color: #ECFDF5;
    color: #059669;
}

.vtipz-stat-icon-wrap.bg-orange {
    background-color: #FFF7ED;
    color: #EA580C;
}

.vtipz-stat-icon-wrap.bg-amber {
    background-color: #FEF3C7;
    color: #D97706;
}

.vtipz-stat-body {
    flex: 1;
    min-width: 0;
}

.vtipz-stat-label {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vtipz-stat-value {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vtipz-stat-value.text-primary { color: var(--color-primary, #C41230); }
.vtipz-stat-value.text-success { color: #059669; }
.vtipz-stat-value.text-accent  { color: #F26522; }
.vtipz-stat-value.text-gold    { color: #B45309; }

.vtipz-stat-sub {
    font-size: 12px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vtipz-stat-sub i {
    font-size: 11px;
}

/* --- Account Content Sections --- */
.vtipz-account-section {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin-bottom: 24px;
}

.vtipz-section-title-row {
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid #F1F5F9;
}

.vtipz-section-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtipz-account-sec-title {
    font-size: 19px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.vtipz-account-sec-title i {
    color: #0088FF;
}

.vtipz-account-sec-subtitle {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

/* Form Styling */
.vtipz-account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.vtipz-form-group {
    display: flex;
    flex-direction: column;
}

.vtipz-form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 7px;
    display: block;
}

.vtipz-form-label .req {
    color: #EF4444;
    font-weight: 700;
}

.vtipz-form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 14px;
    color: #1E293B;
    background: #FFFFFF;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.vtipz-form-input:focus {
    border-color: #0088FF;
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.12);
}

.vtipz-form-input.disabled {
    background-color: #F8FAFC;
    color: #64748B;
    border-color: #E2E8F0;
    cursor: not-allowed;
}

.vtipz-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.vtipz-input-lock {
    position: absolute;
    right: 14px;
    color: #94A3B8;
    font-size: 13px;
    pointer-events: none;
}

.vtipz-form-hint {
    font-size: 12px;
    color: #64748B;
    margin-top: 5px;
    display: block;
}

.vtipz-form-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F1F5F9;
    flex-wrap: wrap;
}

.vtipz-btn-account-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-width: 165px;
    padding: 0 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F26522 0%, #D94E0E 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.vtipz-btn-account-save:hover {
    background: linear-gradient(135deg, #D94E0E 0%, #C03E03 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(242, 101, 34, 0.35);
    color: #ffffff;
}

.vtipz-btn-account-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================== */
/* TAB: THÔNG TIN TÀI KHOẢN & DOANH NGHIỆP (#thong-tin)          */
/* ============================================================== */

/* Status Pill in Title Row */
.vtipz-profile-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.vtipz-profile-status-pill.status-approved {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}
.vtipz-profile-status-pill.status-pending {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}

/* 1. Profile Overview Banner */
.vtipz-profile-overview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    border: 1px solid #DBEAFE;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(196, 18, 48, 0.04);
}

.vtipz-overview-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vtipz-overview-avatar-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.vtipz-overview-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.vtipz-overview-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: #10B981;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
}

.vtipz-overview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtipz-overview-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vtipz-overview-name {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.3;
}

.vtipz-badge-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: #EFF6FF;
    color: var(--color-primary, #C41230);
    border: 1px solid #BFDBFE;
}
.vtipz-badge-tier-pill.tier-1 {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FCD34D;
}
.vtipz-badge-tier-pill.tier-2 {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #93C5FD;
}
.vtipz-badge-tier-pill.tier-3 {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}

.vtipz-overview-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
}

.vtipz-overview-sep {
    color: #CBD5E1;
}

.vtipz-overview-right {
    flex: 0 0 40%;
    max-width: 380px;
}

.vtipz-privilege-box {
    background: #FFFFFF;
    border: 1px dashed #BFDBFE;
    border-radius: 12px;
    padding: 12px 16px;
}

.vtipz-privilege-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.vtipz-privilege-desc {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.45;
    margin: 0;
}
.vtipz-privilege-desc strong {
    color: var(--color-primary, #C41230);
}
.vtipz-privilege-desc a {
    color: #F26522;
    font-weight: 600;
    text-decoration: underline;
}

/* 2. Grid 2 Blocks: Cá nhân vs Doanh nghiệp */
.vtipz-profile-form {
    width: 100%;
}

.vtipz-profile-blocks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
}

.vtipz-profile-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.vtipz-profile-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.vtipz-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: #FAFAFC;
    border-bottom: 1px solid #F1F5F9;
}

.vtipz-card-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.vtipz-card-icon-badge.bg-blue-subtle {
    background: #EFF6FF;
    color: var(--color-primary, #C41230);
}
.vtipz-card-icon-badge.bg-amber-subtle {
    background: #FFF7ED;
    color: #EA580C;
}

.vtipz-card-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vtipz-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.25;
}

.vtipz-card-subtitle {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.25;
}

.vtipz-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.vtipz-field-group {
    display: flex;
    flex-direction: column;
}

.vtipz-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.vtipz-field-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vtipz-field-label .req {
    color: #EF4444;
}

.vtipz-chip-locked {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vtipz-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.vtipz-input-box .field-icon {
    position: absolute;
    left: 14px;
    color: #94A3B8;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.vtipz-field-input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 42px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 14px;
    color: #1E293B;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-sizing: border-box;
}

.vtipz-field-input:focus {
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 0 0 3.5px rgba(196, 18, 48, 0.12);
}

.vtipz-field-input:focus + .field-icon,
.vtipz-input-box:focus-within .field-icon {
    color: var(--color-primary, #C41230);
}

.vtipz-field-input.is-readonly {
    background-color: #F8FAFC !important;
    color: #64748B !important;
    border-color: #E2E8F0 !important;
    cursor: not-allowed !important;
}

.vtipz-field-tip {
    font-size: 12px;
    color: #64748B;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.vtipz-field-tip i {
    color: #94A3B8;
    flex-shrink: 0;
}

/* 3. Action Bar */
.vtipz-profile-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.vtipz-action-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vtipz-btn-account-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F26522 0%, #D94E0E 100%);
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(242, 101, 34, 0.28);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.vtipz-btn-account-save:hover {
    background: linear-gradient(135deg, #D94E0E 0%, #C03E03 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(242, 101, 34, 0.38);
    color: #FFFFFF;
}

.vtipz-btn-account-save:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.vtipz-profile-msg {
    font-size: 13.5px;
    font-weight: 600;
}

.vtipz-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748B;
    background: #F8FAFC;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
}
.vtipz-security-pill i {
    color: #10B981;
}

/* Responsive */
@media (max-width: 900px) {
    .vtipz-profile-overview-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .vtipz-overview-right {
        max-width: 100%;
        width: 100%;
    }
    .vtipz-profile-blocks-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vtipz-profile-action-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        text-align: center;
    }
    .vtipz-action-left {
        flex-direction: column;
        align-items: stretch;
    }
    .vtipz-btn-account-save {
        width: 100%;
    }
    .vtipz-security-pill {
        justify-content: center;
    }
}

.vtipz-password-form-box {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vtipz-password-form-box .vtipz-form-group {
    margin-bottom: 16px;
}

/* Orders Table */
.vtipz-table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.vtipz-account-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.vtipz-account-orders-table th {
    background-color: #F8FAFC;
    color: #334155;
    font-weight: 700;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.vtipz-account-orders-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.vtipz-account-orders-table tr:last-child td {
    border-bottom: none;
}

.vtipz-account-orders-table tr:hover td {
    background-color: #FBFDFF;
}

.vtipz-order-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.vtipz-order-badge.shipping {
    background-color: #E0F2FE;
    color: #0284C7;
}

.vtipz-order-badge.completed {
    background-color: #DCFCE7;
    color: #16A34A;
}

.vtipz-order-badge.cancelled {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* ==========================================================================
   B2B WHOLESALE PRICING SYSTEM & TABLE (#section-bang-gia)
   ========================================================================== */

/* 1. B2B Tier Status Banner */
.vtipz-b2b-tier-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 60%, #E6F7F0 100%);
    border: 1px solid #A7F3D0;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.05);
}

.vtipz-b2b-tier-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    flex-shrink: 0;
}

.vtipz-b2b-tier-info {
    flex: 1;
    min-width: 0;
}

.vtipz-b2b-tier-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.vtipz-b2b-tier-title {
    font-size: 17px;
    font-weight: 700;
    color: #064E3B;
    margin: 0;
}

.vtipz-b2b-tier-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #059669;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vtipz-b2b-tier-desc {
    font-size: 13.5px;
    color: #047857;
    margin: 0;
    line-height: 1.5;
}

/* 2. B2B Search & Filter Toolbar */
.vtipz-b2b-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.vtipz-b2b-search-box {
    position: relative;
    flex: 1;
    max-width: 440px;
    min-width: 250px;
}

.vtipz-b2b-search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
    pointer-events: none;
}

.vtipz-b2b-search-input {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 40px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 13.5px;
    color: #1E293B;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.vtipz-b2b-search-input:focus {
    border-color: var(--color-primary, #C41230);
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

.vtipz-b2b-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #64748B;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.2s ease;
}

.vtipz-b2b-search-clear:hover {
    background: #CBD5E1;
    color: #0F172A;
}

.vtipz-b2b-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
}

.vtipz-b2b-stats-pill i {
    color: var(--color-primary, #C41230);
}

/* 3. B2B Wholesale Pricing Table */
.vtipz-b2b-table-container {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.02);
    -webkit-overflow-scrolling: touch;
}

.vtipz-b2b-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    text-align: left;
    font-size: 13.5px;
    transition: opacity 0.2s ease;
}

.vtipz-b2b-table.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.vtipz-b2b-table thead th {
    background: #F8FAFC;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    border-bottom: 2px solid #E2E8F0;
    white-space: nowrap;
}

.vtipz-b2b-table thead th.col-product   { min-width: 320px; width: 35%; }
.vtipz-b2b-table thead th.col-spec      { min-width: 120px; width: 13%; }
.vtipz-b2b-table thead th.col-moq       { min-width: 135px; width: 14%; }
.vtipz-b2b-table thead th.col-retail    { min-width: 110px; width: 12%; }
.vtipz-b2b-table thead th.col-wholesale { min-width: 125px; width: 13%; }
.vtipz-b2b-table thead th.col-action    { min-width: 120px; width: 13%; text-align: center; }

.vtipz-b2b-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.vtipz-b2b-table tbody td.col-product   { min-width: 320px; }
.vtipz-b2b-table tbody td.col-spec      { white-space: nowrap; }
.vtipz-b2b-table tbody td.col-moq       { white-space: nowrap; }
.vtipz-b2b-table tbody td.col-retail    { white-space: nowrap; }
.vtipz-b2b-table tbody td.col-wholesale { white-space: nowrap; }
.vtipz-b2b-table tbody td.col-action    { text-align: center; white-space: nowrap; }

.vtipz-b2b-table tbody tr:last-child td {
    border-bottom: none;
}

.vtipz-b2b-table tbody tr.vtipz-b2b-row {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vtipz-b2b-table tbody tr.vtipz-b2b-row:hover {
    background-color: #FAFCFF;
    box-shadow: inset 3px 0 0 var(--color-primary, #C41230);
}

/* Product Cell Elements */
.vtipz-b2b-product-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 300px;
}

.vtipz-b2b-img-link {
    display: block;
    flex-shrink: 0;
}

.vtipz-b2b-thumb {
    width: 62px;
    height: 62px;
    min-width: 62px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.vtipz-b2b-img-link:hover .vtipz-b2b-thumb {
    transform: scale(1.06);
    border-color: #93C5FD;
    box-shadow: 0 4px 14px rgba(196, 18, 48, 0.14);
}

.vtipz-b2b-prod-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.vtipz-b2b-top-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.vtipz-b2b-cat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1D4ED8;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.vtipz-b2b-stock-badge {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.vtipz-b2b-stock-badge.in-stock {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.vtipz-b2b-stock-badge.out-of-stock {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.vtipz-stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    display: inline-block;
    animation: vtipzStockPulse 2s infinite ease-in-out;
}

@keyframes vtipzStockPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.7;
    }
}

.vtipz-b2b-title-link {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.vtipz-b2b-title-link:hover {
    color: var(--color-primary, #C41230);
    text-decoration: none;
}

.vtipz-b2b-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.vtipz-b2b-sku {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #F8FAFC;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #E2E8F0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.vtipz-b2b-sku strong {
    color: #334155;
    font-weight: 600;
}

/* Packaging & MOQ Badges */
.vtipz-b2b-badge-spec {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F8FAFC;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    white-space: nowrap;
}

.vtipz-b2b-badge-spec i {
    color: #64748B;
    font-size: 13px;
}

.vtipz-b2b-badge-moq {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EFF6FF;
    color: var(--color-primary, #C41230);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #BFDBFE;
    white-space: nowrap;
}

.vtipz-b2b-badge-moq i {
    color: var(--color-primary, #C41230);
    font-size: 13px;
}

/* Prices */
.vtipz-b2b-retail-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vtipz-b2b-strike-price {
    display: block;
    font-size: 13px;
    color: #94A3B8;
    text-decoration: line-through;
    font-weight: 500;
    white-space: nowrap;
}

.vtipz-b2b-retail-lbl {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}

.vtipz-b2b-price-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtipz-b2b-tier-price {
    font-size: 16.5px;
    font-weight: 800;
    color: #F26522;
    line-height: 1.2;
    white-space: nowrap;
}

.vtipz-b2b-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
    white-space: nowrap;
}

.vtipz-b2b-tier-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary, #C41230);
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
    white-space: nowrap;
}

.vtipz-b2b-tier-tag i {
    color: #F59E0B;
    font-size: 10px;
}

/* Action Button */
.vtipz-btn-b2b-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(196, 18, 48, 0.22);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: 110px;
}

.vtipz-btn-b2b-order:hover {
    background: linear-gradient(135deg, #0A3D68 0%, var(--color-primary, #C41230) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(196, 18, 48, 0.32);
}

.vtipz-btn-b2b-order i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.vtipz-btn-b2b-order:hover i {
    transform: translateX(3px);
}

/* Empty Search Result */
.vtipz-b2b-no-result {
    text-align: center;
    padding: 48px 20px;
    color: #64748B;
}

.vtipz-b2b-no-result i {
    font-size: 40px;
    color: #CBD5E1;
    margin-bottom: 12px;
}

.vtipz-b2b-no-result p {
    font-size: 14.5px;
    margin: 0;
}

/* 4. Responsive View for Mobile & Tablet */
@media (max-width: 900px) {
    .vtipz-b2b-tier-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 20px;
    }
}

@media (max-width: 991px) {
    .vtipz-b2b-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }
    .vtipz-b2b-search-box {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 38px;
    }
    .vtipz-b2b-search-input {
        font-size: 12.5px;
    }
    .vtipz-b2b-stats-pill {
        align-self: flex-start;
        font-size: 11.5px;
        padding: 4px 10px;
    }

    .vtipz-b2b-table-container {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .vtipz-b2b-table thead {
        display: none !important;
    }
    .vtipz-b2b-table,
    .vtipz-b2b-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Thẻ sản phẩm B2B Mobile gọn đẹp, chuẩn tỷ lệ & tinh tế */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px 6px !important;
        background: #ffffff !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row:hover {
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
        border-color: #CBD5E1 !important;
        transform: none !important;
    }

    /* Khối 1: Thông tin sản phẩm phía trên (Chiếm 100% bề ngang) */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-product {
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 0 8px 0 !important;
        border-bottom: 1px solid #F1F5F9 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-product::before {
        display: none !important;
    }
    .vtipz-b2b-product-cell {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .vtipz-b2b-img-link {
        flex-shrink: 0 !important;
    }
    .vtipz-b2b-thumb {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 8px !important;
        padding: 2px !important;
    }
    .vtipz-b2b-prod-meta {
        gap: 2px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .vtipz-b2b-top-badges {
        gap: 4px !important;
        flex-wrap: wrap !important;
        margin-bottom: 2px !important;
    }
    .vtipz-b2b-cat-label {
        font-size: 9.5px !important;
        padding: 1px 5px !important;
        border-radius: 3px !important;
    }
    .vtipz-b2b-stock-badge {
        font-size: 9.5px !important;
        padding: 1px 6px !important;
    }
    .vtipz-b2b-title-link {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        color: #0F172A !important;
    }
    .vtipz-b2b-subline {
        margin-top: 2px !important;
    }
    .vtipz-b2b-sku {
        font-size: 9.5px !important;
        padding: 1px 5px !important;
    }

    /* Khối 2: Quy cách & MOQ nằm song song 2 cột (50% - 50%) */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-spec,
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-moq {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
        padding: 5px 8px !important;
        border-radius: 6px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-spec {
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-moq {
        background: #EFF6FF !important;
        border: 1px solid #DBEAFE !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-spec::before,
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-moq::before {
        font-size: 10px !important;
        font-weight: 600 !important;
        margin-right: 2px !important;
        color: #64748B !important;
        flex-shrink: 0 !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-moq::before {
        color: #1D4ED8 !important;
    }
    .vtipz-b2b-badge-spec,
    .vtipz-b2b-badge-moq {
        display: inline-flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .vtipz-b2b-badge-spec span,
    .vtipz-b2b-badge-moq span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .vtipz-b2b-badge-spec i,
    .vtipz-b2b-badge-moq i {
        font-size: 10px !important;
    }

    /* Ẩn cột Giá niêm yết bán lẻ riêng để chống chiếm dòng thừa */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-retail {
        display: none !important;
    }

    /* Khối 3: Giá sỉ đại lý bên trái */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-wholesale {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 2px 0 0 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-wholesale::before {
        content: "Giá sỉ đại lý:" !important;
        font-size: 10px !important;
        color: #64748B !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    .vtipz-b2b-price-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .vtipz-b2b-tier-price {
        font-size: 15.5px !important;
        font-weight: 800 !important;
        color: #F26522 !important;
        line-height: 1.2 !important;
    }
    .vtipz-b2b-save-badge {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
        background: #FEF3C7 !important;
        color: #B45309 !important;
        border: 1px solid #FDE68A !important;
        line-height: 1.2 !important;
    }

    /* Nút đặt sỉ bên phải */
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-action {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        padding: 2px 0 0 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }
    .vtipz-b2b-table tbody tr.vtipz-b2b-row td.col-action::before {
        display: none !important;
    }
    .vtipz-btn-b2b-order {
        width: auto !important;
        height: 34px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        gap: 6px !important;
        background: linear-gradient(135deg, var(--color-primary, #C41230), var(--color-primary, #C41230)) !important;
        white-space: nowrap !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(196, 18, 48, 0.25) !important;
    }
    .vtipz-btn-b2b-order i {
        font-size: 10.5px !important;
    }
}

/* 5. B2B Wholesale Pagination */
.vtipz-b2b-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.vtipz-b2b-pagination-info {
    font-size: 13.5px;
    color: #475569;
}

.vtipz-b2b-pagination-info strong {
    color: var(--color-primary, #C41230);
    font-weight: 700;
}

.vtipz-b2b-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vtipz-b2b-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #CBD5E1;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vtipz-b2b-page-btn:hover:not(.disabled):not(.active) {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: var(--color-primary, #C41230);
}

.vtipz-b2b-page-btn.active {
    background: var(--color-primary, #C41230);
    border-color: var(--color-primary, #C41230);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(196, 18, 48, 0.25);
    cursor: default;
}

.vtipz-b2b-page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #94A3B8;
}

.vtipz-b2b-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: #94A3B8;
    font-size: 13px;
}

@media (max-width: 640px) {
    .vtipz-b2b-pagination-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 14px 12px;
    }
    .vtipz-b2b-pagination-controls {
        justify-content: center;
        width: 100%;
    }
    .vtipz-b2b-page-btn.prev-btn span,
    .vtipz-b2b-page-btn.next-btn span {
        display: none;
    }
    .vtipz-b2b-page-btn.prev-btn,
    .vtipz-b2b-page-btn.next-btn {
        padding: 0 10px;
    }
}

/* Empty State Box */
.vtipz-account-empty-box {
    text-align: center;
    padding: 44px 24px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
}

.vtipz-account-empty-box.pending-box {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.vtipz-account-empty-box.unlock-box {
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.vtipz-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0088FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.vtipz-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
}

.vtipz-empty-desc {
    color: #64748B;
    font-size: 13.5px;
    max-width: 440px;
    margin: 0 auto 20px;
    line-height: 1.55;
}

/* Vouchers Grid */
.vtipz-vouchers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.vtipz-voucher-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    background-color: #FFFFFF;
    transition: all 0.2s ease;
}

.vtipz-voucher-card:hover {
    border-color: #0088FF;
    box-shadow: 0 4px 14px rgba(0, 136, 255, 0.08);
}

.vtipz-voucher-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #EFF6FF;
    color: #0088FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vtipz-voucher-info {
    flex: 1;
    min-width: 0;
}

.vtipz-voucher-title {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.vtipz-voucher-desc {
    font-size: 12.5px;
    color: #64748B;
    margin-bottom: 10px;
    line-height: 1.4;
}

.vtipz-voucher-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #475569;
}

.vtipz-voucher-code-row strong {
    color: #0088FF;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.vtipz-voucher-btn {
    font-size: 12.5px;
    font-weight: 700;
    color: #F26522;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vtipz-voucher-btn:hover {
    color: #D94E0E;
    text-decoration: underline;
}



/* --- Sub-module: Brand Hub Overview (Original Lines 7487-7732) --- */
/* ==========================================================================
   10. BRAND HUB OVERVIEW (PAGE THƯƠNG HIỆU)
   ========================================================================== */
.vtipz-brand-hub-page {
    background-color: var(--color-bg-light);
}

.vtipz-brand-hub-hero {
    margin-bottom: 40px;
}

.vtipz-brand-hub-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
}

.vtipz-brand-hub-desc {
    font-size: 15px;
    color: var(--color-text-body);
    line-height: 1.7;
}

.vtipz-brand-hub-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vtipz-hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #ffffff;
    border: 1px solid var(--color-border-light);
    color: var(--color-primary);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-hub-badge i {
    color: var(--color-accent);
}

.vtipz-brand-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vtipz-brand-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--vtipz-shadow-sm);
    transition: all 0.25s ease;
}

.vtipz-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vtipz-shadow-md);
    border-color: var(--color-blue);
}

.vtipz-brand-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.vtipz-brand-avatar-box {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.2);
}

.vtipz-brand-count-pill {
    background-color: var(--color-primary-soft, #FDE8EB);
    color: var(--color-blue);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.vtipz-brand-card-body {
    flex-grow: 1;
    margin-bottom: 20px;
}

.vtipz-brand-card-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.vtipz-brand-card-name a {
    color: inherit;
    text-decoration: none;
}

.vtipz-brand-card-category {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.vtipz-brand-card-desc {
    font-size: 13px;
    color: var(--color-text-body);
    line-height: 1.6;
}

.vtipz-brand-card-footer {
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.vtipz-brand-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-btn-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-brand-card-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Commitments Block */
.vtipz-brand-commitments-block {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-card);
    padding: 40px 36px;
    box-shadow: var(--vtipz-shadow-sm);
}

.vtipz-commitments-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
}

.vtipz-commitments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.vtipz-commitment-card {
    padding: 20px;
    background-color: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
}

.vtipz-commitment-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.vtipz-commitment-heading {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.vtipz-commitment-text {
    font-size: 13px;
    color: var(--color-text-body);
    line-height: 1.6;
}

/* CTA Banner in Brand Hub */
.vtipz-btn-cta-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: #ffffff;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vtipz-btn-cta-white:hover {
    background-color: var(--color-gold);
    color: var(--color-primary-dark);
}

.vtipz-btn-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-btn-cta-outline:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
}

/* ==========================================================================
   TRANG SẢN PHẨM YÊU THÍCH (WISHLIST PAGE)
   ========================================================================== */
.vtipz-wishlist-page {
    background-color: var(--color-bg-light, #F8F9FA);
    min-height: 500px;
    padding-bottom: 60px;
}

.vtipz-wishlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.vtipz-wishlist-title {
    font-size: 26px;
    font-weight: 700;
    color: #101820;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtipz-wishlist-desc {
    font-size: 14px;
    color: #64748B;
    margin: 0;
}

.vtipz-wishlist-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vtipz-btn-clear-all-wishlist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #FFFFFF;
    color: #E02B2B;
    border: 1px solid #FECACA;
    border-radius: 0 0 12px 0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vtipz-btn-clear-all-wishlist:hover {
    background: #FEE2E2;
    border-color: #EF4444;
}

.vtipz-btn-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    border-radius: 0 0 12px 0;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-btn-continue-shopping:hover {
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.2);
}

/* Loading State */
.vtipz-wishlist-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-primary, #C41230);
    font-size: 16px;
    font-weight: 500;
}

.vtipz-wishlist-loading i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

/* Wishlist Grid */
.vtipz-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.vtipz-wishlist-card-wrapper {
    position: relative;
    transition: transform 0.2s ease;
}

.vtipz-wishlist-card-wrapper:hover {
    transform: translateY(-4px);
}

.vtipz-btn-remove-wishlist {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 15;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #EF4444;
    color: #EF4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.vtipz-btn-remove-wishlist:hover {
    background: #EF4444;
    color: #FFFFFF;
    transform: scale(1.15);
}

/* Empty State */
.vtipz-wishlist-empty {
    text-align: center;
    padding: 60px 24px;
    background: #FFFFFF;
    border: 1px dashed var(--color-border, #E5E7EB);
    border-radius: 0 0 24px 0;
    max-width: 600px;
    margin: 0 auto;
}

.vtipz-empty-heart-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #EF4444;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.vtipz-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #101820;
    margin: 0 0 8px 0;
}

.vtipz-empty-text {
    font-size: 14px;
    color: #64748B;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.vtipz-btn-explore-products {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--color-primary, #C41230);
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 0 0 12px 0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vtipz-btn-explore-products:hover {
    background: var(--color-primary-dark, #9E0E26);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(196, 18, 48, 0.3);
}

@media (max-width: 1024px) {
    .vtipz-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .vtipz-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .vtipz-wishlist-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-wishlist-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   FLUENT FORMS INTEGRATION - VTIPZ THEME FIGMA SPEC ALIGNMENT
   ========================================================================== */
.vtipz-fluentform-wrapper,
.fluentform {
    font-family: inherit;
    width: 100%;
}

.fluentform .ff-el-group {
    margin-bottom: 18px;
}

.fluentform .ff-el-input--label label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-heading, #0F172A);
    margin-bottom: 6px;
    display: block;
}

.fluentform .ff-el-is-required .asterisk-right label::after,
.fluentform .asterisk-right label::after,
.fluentform .ff-el-is-required label::after {
    content: " *" !important;
    color: #EF4444 !important;
    font-weight: 700 !important;
}

.fluentform .ff-el-form-control {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    font-size: 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #1E293B;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fluentform .ff-el-form-control::placeholder {
    color: #94A3B8;
    font-size: 13.5px;
}

.fluentform .ff-el-form-control:focus {
    border-color: var(--color-blue, var(--color-primary, #C41230)) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.fluentform textarea.ff-el-form-control {
    height: auto;
    min-height: 110px;
    resize: vertical;
    padding: 12px 16px;
}

.fluentform select.ff-el-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   1. CONTACT PAGE FORM (Figma Node #109:1458 & Fluent Form 4)
   -------------------------------------------------------------------------- */
.vtipz-contact-form-box .fluentform {
    width: 100%;
}

.vtipz-contact-form-box .fluentform form fieldset {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-contact-form-box .fluentform form fieldset legend,
.vtipz-contact-form-box .fluentform form fieldset input[type="hidden"] {
    display: none !important;
}

/* 2-Column layout for standard input fields */
.vtipz-contact-form-box .fluentform .ff-el-group {
    width: calc(50% - 7px) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Full width for message textarea and submit */
.vtipz-contact-form-box .fluentform .ff-el-group:has(textarea),
.vtipz-contact-form-box .fluentform .ff-el-group:has(#ff_4_message),
.vtipz-contact-form-box .fluentform .ff-el-group:nth-of-type(5) {
    width: 100% !important;
}

.vtipz-contact-form-box .fluentform .ff-el-input--label {
    margin-bottom: 4px !important;
    padding: 0 !important;
}

.vtipz-contact-form-box .fluentform .ff-el-input--label label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.3 !important;
}

.vtipz-contact-form-box .fluentform input.ff-el-form-control {
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background-color: #F8FAFC !important;
    color: #1E293B !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.vtipz-contact-form-box .fluentform input.ff-el-form-control:focus {
    background-color: #FFFFFF !important;
    border-color: var(--color-primary, var(--color-primary, #C41230)) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.vtipz-contact-form-box .fluentform textarea.ff-el-form-control {
    height: 84px !important;
    min-height: 84px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background-color: #F8FAFC !important;
    color: #1E293B !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.vtipz-contact-form-box .fluentform textarea.ff-el-form-control:focus {
    background-color: #FFFFFF !important;
    border-color: var(--color-primary, var(--color-primary, #C41230)) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.vtipz-contact-form-box .fluentform .ff_submit_btn_wrapper,
.vtipz-contact-form-box .fluentform .ff-el-group:nth-of-type(6) {
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.vtipz-contact-form-box .fluentform .ff-btn-submit,
.vtipz-contact-form-box .fluentform button[type="submit"] {
    background: linear-gradient(135deg, var(--color-primary, var(--color-primary, #C41230)) 0%, #1565C0 100%) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 32px !important;
    height: 42px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25) !important;
    transition: all 0.25s ease !important;
}

.vtipz-contact-form-box .fluentform .ff-btn-submit:hover,
.vtipz-contact-form-box .fluentform button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--color-primary-dark, var(--color-primary-dark, #9E0E26)) 0%, var(--color-primary, #C41230) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.35) !important;
}

.vtipz-contact-form-box .fluentform .ff-btn-submit:active,
.vtipz-contact-form-box .fluentform button[type="submit"]:active {
    transform: translateY(0) !important;
}

@media (max-width: 640px) {
    .vtipz-contact-form-box {
        padding: 20px 16px !important;
    }
    .vtipz-contact-form-box .fluentform .ff-el-group {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   2. AGENCY REGISTRATION FORM (Figma Node #109:898 & #120:42)
   -------------------------------------------------------------------------- */
.card-agency .fluentform,
.vtipz-reg-col.col-agency .fluentform {
    width: 100%;
}

.card-agency .fluentform .ff-el-group,
.vtipz-reg-col.col-agency .fluentform .ff-el-group {
    margin-bottom: 16px;
}

.card-agency .fluentform .ff-el-form-control,
.vtipz-reg-col.col-agency .fluentform .ff-el-form-control {
    height: 46px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 14px;
}

.card-agency .fluentform textarea.ff-el-form-control,
.vtipz-reg-col.col-agency .fluentform textarea.ff-el-form-control {
    height: auto;
    min-height: 96px;
}

.card-agency .fluentform .ff_submit_btn_wrapper,
.vtipz-reg-col.col-agency .fluentform .ff_submit_btn_wrapper {
    width: 100% !important;
    margin-top: 10px;
    margin-bottom: 0;
}

.card-agency .fluentform .ff-btn-submit,
.card-agency .fluentform button[type="submit"],
.vtipz-reg-col.col-agency .fluentform .ff-btn-submit,
.vtipz-reg-col.col-agency .fluentform button[type="submit"] {
    width: 100% !important;
    height: 48px !important;
    background-color: var(--color-accent, var(--color-primary, #C41230)) !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.25) !important;
    transition: all 0.2s ease !important;
}

.card-agency .fluentform .ff-btn-submit:hover,
.card-agency .fluentform button[type="submit"]:hover,
.vtipz-reg-col.col-agency .fluentform .ff-btn-submit:hover,
.vtipz-reg-col.col-agency .fluentform button[type="submit"]:hover {
    background-color: var(--color-accent-hover, var(--color-primary-dark, #9E0E26)) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(196, 18, 48, 0.35) !important;
}

.card-agency .fluentform .ff-btn-submit:active,
.vtipz-reg-col.col-agency .fluentform .ff-btn-submit:active {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. HOMEPAGE NEWSLETTER FORM (Figma Node #174:422 / #174:2)
   -------------------------------------------------------------------------- */
.vtipz-newsletter-form-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 1 !important;
    max-width: 480px !important;
    width: 100% !important;
}

.vtipz-newsletter-form-container .fluentform,
.vtipz-newsletter-form-container .fluentform_wrapper_5 {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform form,
.fluentform_wrapper_5 form {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.vtipz-newsletter-form-container .fluentform form fieldset,
.fluentform_wrapper_5 form fieldset {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.vtipz-newsletter-form-container .ff_screen_reader_title,
.fluentform_wrapper_5 .ff_screen_reader_title,
.vtipz-newsletter-form-container .ff-el-input--label,
.fluentform_wrapper_5 .ff-el-input--label {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-group:not(.ff_submit_btn_wrapper),
.fluentform_wrapper_5 .ff-el-group:not(.ff_submit_btn_wrapper) {
    flex: 1 1 auto !important;
    max-width: 330px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-input--content,
.fluentform_wrapper_5 .ff-el-input--content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control,
.fluentform_wrapper_5 .ff-el-form-control {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 18px !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-border, #E5E7EB) !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control:focus,
.fluentform_wrapper_5 .ff-el-form-control:focus {
    border-color: var(--color-primary, #C41230) !important;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12) !important;
}

.vtipz-newsletter-form-container .fluentform .ff-el-form-control::placeholder,
.fluentform_wrapper_5 .ff-el-form-control::placeholder {
    color: #94A3B8 !important;
    font-size: 13.5px !important;
}

.vtipz-newsletter-form-container .fluentform .ff_submit_btn_wrapper,
.fluentform_wrapper_5 .ff_submit_btn_wrapper {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit,
.vtipz-newsletter-form-container .fluentform button[type="submit"],
.fluentform_wrapper_5 .ff-btn-submit,
.fluentform_wrapper_5 button[type="submit"] {
    height: 48px !important;
    padding: 0 28px !important;
    background-color: var(--color-primary, #C41230) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 0 16px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit:hover,
.vtipz-newsletter-form-container .fluentform button[type="submit"]:hover,
.fluentform_wrapper_5 .ff-btn-submit:hover,
.fluentform_wrapper_5 button[type="submit"]:hover {
    background-color: var(--color-primary-dark, #9E0E26) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.3) !important;
}

.vtipz-newsletter-form-container .fluentform .ff-btn-submit:active,
.vtipz-newsletter-form-container .fluentform button[type="submit"]:active,
.fluentform_wrapper_5 .ff-btn-submit:active,
.fluentform_wrapper_5 button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .vtipz-newsletter-form-container {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .vtipz-newsletter-form-container .fluentform,
    .vtipz-newsletter-form-container .fluentform_wrapper_5 {
        max-width: 100% !important;
    }
    .vtipz-newsletter-form-container .fluentform form fieldset,
    .fluentform_wrapper_5 form fieldset {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .vtipz-newsletter-form-container .fluentform form fieldset,
    .fluentform_wrapper_5 form fieldset {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .vtipz-newsletter-form-container .fluentform .ff-el-group:not(.ff_submit_btn_wrapper),
    .fluentform_wrapper_5 .ff-el-group:not(.ff_submit_btn_wrapper) {
        max-width: 100% !important;
        width: 100% !important;
    }
    .vtipz-newsletter-form-container .fluentform .ff_submit_btn_wrapper,
    .fluentform_wrapper_5 .ff_submit_btn_wrapper,
    .vtipz-newsletter-form-container .fluentform .ff-btn-submit,
    .fluentform_wrapper_5 .ff-btn-submit {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   4. SUCCESS & ERROR MESSAGES
   -------------------------------------------------------------------------- */
.fluentform .ff-message-success,
.fluentform .ff-el-success-message {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 14px !important;
    display: block !important;
}

.fluentform .text-danger,
.fluentform .ff-errors-in-stack,
.fluentform .ff-error-text {
    color: #EF4444 !important;
    font-size: 12.5px !important;
    margin-top: 5px !important;
    font-weight: 500 !important;
}

.fluentform .ff-el-is-error .ff-el-form-control {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* --------------------------------------------------------------------------
   5. FLUENT FORM: ACCOUNT & PROFILE UPDATE FORM (FORM ID 7)
   -------------------------------------------------------------------------- */
.vtipz-fluentform-profile-wrap {
    width: 100%;
}

.vtipz-fluentform-profile-wrap .fluentform {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

.vtipz-fluentform-profile-wrap .ff-t-container {
    margin-bottom: 0 !important;
}

.vtipz-fluentform-profile-wrap .vtipz-ff-row-2col {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 12px;
}

.vtipz-fluentform-profile-wrap .vtipz-ff-row-2col > .ff-t-cell,
.vtipz-fluentform-profile-wrap .vtipz-ff-row-2col > [class*="ff-t-cell"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .vtipz-fluentform-profile-wrap .vtipz-ff-row-2col > .ff-t-cell,
    .vtipz-fluentform-profile-wrap .vtipz-ff-row-2col > [class*="ff-t-cell"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
}

.vtipz-fluentform-profile-wrap .fluentform .ff-el-input--label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin-bottom: 7px !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-el-input--label label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-el-form-control,
.vtipz-fluentform-profile-wrap .fluentform input[type="text"],
.vtipz-fluentform-profile-wrap .fluentform input[type="email"],
.vtipz-fluentform-profile-wrap .fluentform input[type="tel"] {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    color: #0F172A !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.vtipz-fluentform-profile-wrap .fluentform input[readonly],
.vtipz-fluentform-profile-wrap .fluentform input.readonly-field {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #64748B !important;
    cursor: not-allowed !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-el-form-control:focus,
.vtipz-fluentform-profile-wrap .fluentform input:focus {
    border-color: var(--color-primary, #C41230) !important;
    box-shadow: 0 0 0 3.5px rgba(196, 18, 48, 0.12) !important;
    background-color: #FFFFFF !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-el-help-message {
    font-size: 12px !important;
    color: #64748B !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    height: 48px !important;
    background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, var(--color-primary, #C41230) 100%) !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(196, 18, 48, 0.2) !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff-btn-submit:hover {
    background: linear-gradient(135deg, #083761 0%, var(--color-primary, #C41230) 100%) !important;
    box-shadow: 0 6px 18px rgba(196, 18, 48, 0.3) !important;
    transform: translateY(-1px) !important;
}

.vtipz-fluentform-profile-wrap .fluentform .ff_submit_btn_wrapper {
    margin-top: 18px !important;
}

.vtipz-fluentform-profile-wrap .ff-el-tooltip {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    cursor: help !important;
}

.vtipz-fluentform-profile-wrap .ff-el-tooltip svg {
    fill: #94A3B8 !important;
    transition: fill 0.2s ease !important;
}

.vtipz-fluentform-profile-wrap .ff-el-tooltip:hover svg {
    fill: var(--color-primary, #C41230) !important;
}

.vtipz-fluentform-profile-wrap .ff-message-success,
.vtipz-fluentform-profile-wrap .ff-errors-in-stack {
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
}

.vtipz-fluentform-profile-wrap .ff-message-success {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
}


/* --- Start responsive.css --- */
/* --- Sub-module: Homepage & Global Responsive Media Queries (Original Lines 4829-4917) --- */
/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1200px) {
    .vtipz-brands-row {
        grid-template-columns: repeat(4, 1fr);
    }
    .vtipz-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .vtipz-about-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-about-img-box {
        width: 100%;
        height: 260px;
    }
    .vtipz-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
    .vtipz-promo-banner-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-agency-cta-box {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
    .vtipz-agency-media {
        width: 100%;
        height: 200px;
    }
    .vtipz-gallery-layout {
        grid-template-columns: 1fr;
    }
    .vtipz-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-commit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-newsletter-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .vtipz-hero-sub-row {
        grid-template-columns: 1fr;
    }
    .vtipz-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .vtipz-news-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-commit-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-brands-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-newsletter-input-wrap {
        flex-direction: column;
        width: 100%;
    }
    .newsletter-input {
        width: 100%;
    }
    .newsletter-btn {
        width: 100%;
    }
}



/* --- Sub-module: Wireframe Pages Responsive Media Queries (Original Lines 7829-7945) --- */
/* RESPONSIVE FOR NEW WIREFRAME PAGES */
@media (max-width: 1200px) {
    .vtipz-account-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-products-grid-4col {
        grid-template-columns: repeat(3, 1fr);
    }
    .vtipz-news-grid-4x4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .vtipz-about-brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .vtipz-brand-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-commitments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .vtipz-account-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-account-sidebar {
        position: static !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-account-profile-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 14px !important;
        padding: 14px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .vtipz-account-avatar-box {
        margin-bottom: 0 !important;
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
    }
    .vtipz-account-avatar {
        width: 54px !important;
        height: 54px !important;
    }
    .vtipz-avatar-status-dot {
        width: 12px !important;
        height: 12px !important;
        bottom: 1px !important;
        right: 1px !important;
    }
    .vtipz-account-user-meta {
        flex: 1 1 auto !important;
        width: 0 !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .vtipz-account-name {
        font-size: 16px !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .vtipz-account-badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .vtipz-account-role-desc {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .vtipz-account-nav {
        position: sticky !important;
        top: 54px !important;
        z-index: 35 !important;
        background: #FFFFFF !important;
        padding: 8px 6px !important;
        border-radius: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid #E2E8F0 !important;
        margin-bottom: 16px !important;
    }
    .vtipz-account-menu-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 2px 4px 6px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .vtipz-account-menu-list::-webkit-scrollbar {
        display: none !important;
    }
    .vtipz-account-menu-item {
        flex: 0 0 auto !important;
        border: none !important;
    }
    .vtipz-account-menu-item.logout {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    .vtipz-account-menu-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        background-color: #F8FAFC !important;
        color: #475569 !important;
        border: 1px solid #E2E8F0 !important;
        transition: all 0.2s ease !important;
    }
    .vtipz-account-menu-item.active .vtipz-account-menu-link {
        background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, #0088FF 100%) !important;
        border-color: var(--color-primary, #C41230) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: 0 3px 10px rgba(196, 18, 48, 0.25) !important;
    }
    .vtipz-account-menu-item.active .vtipz-account-menu-link i {
        color: #ffffff !important;
    }
    /* Tab Bảng giá đại lý nổi bật trên Mobile */
    .vtipz-account-menu-item[data-tab="bang-gia"] .vtipz-account-menu-link {
        background-color: #FFFBEB !important;
        border-color: #FCD34D !important;
        color: #B45309 !important;
        font-weight: 700 !important;
    }
    .vtipz-account-menu-item[data-tab="bang-gia"] .vtipz-account-menu-link i {
        color: #D97706 !important;
    }
    .vtipz-account-menu-item[data-tab="bang-gia"].active .vtipz-account-menu-link {
        background: linear-gradient(135deg, var(--color-primary, #C41230) 0%, #0088FF 100%) !important;
        border-color: var(--color-primary, #C41230) !important;
        color: #ffffff !important;
    }
    .vtipz-account-menu-item[data-tab="bang-gia"].active .vtipz-account-menu-link i {
        color: #FCD34D !important;
    }
    .vtipz-account-menu-item.logout .vtipz-account-menu-link {
        background-color: #FEF2F2 !important;
        border-color: #FECACA !important;
        color: #DC2626 !important;
    }
    .vtipz-account-menu-item.logout .vtipz-account-menu-link i {
        color: #DC2626 !important;
    }
    .vtipz-account-main {
        padding-bottom: 80px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    .vtipz-account-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .vtipz-vouchers-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-single-post-page {
        padding-top: 24px !important;
        padding-bottom: 40px !important;
    }
    .vtipz-single-post-layout {
        grid-template-columns: 1fr;
    }
    .vtipz-single-post-main {
        max-width: 100%;
    }
    .vtipz-news-grid-4x4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-about-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-feature-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-feature-grid.reverse {
        direction: ltr;
    }
    .vtipz-contact-wireframe-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-products-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-register-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 992px) {
    /* Policy Page Responsive */
    .vtipz-policy-page {
        padding-top: 20px !important;
        padding-bottom: 60px !important;
    }

    .vtipz-policy-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .vtipz-policy-sidebar {
        display: contents !important;
    }

    .vtipz-policy-menu-card {
        order: 1 !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .vtipz-policy-menu-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .vtipz-menu-swipe-note {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: var(--color-blue, var(--color-primary, #C41230)) !important;
    }

    .vtipz-policy-menu-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .vtipz-policy-menu-list::-webkit-scrollbar {
        display: none !important;
    }

    .vtipz-policy-menu-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .vtipz-policy-menu-link {
        display: inline-flex !important;
        align-items: center !important;
        padding: 7px 14px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        border-radius: 9999px !important;
        background: #F1F5F9 !important;
        border: 1px solid #E2E8F0 !important;
        color: #334155 !important;
    }

    .vtipz-policy-menu-link .arrow-icon {
        display: none !important;
    }

    .vtipz-policy-menu-item.active .vtipz-policy-menu-link {
        background: var(--color-blue, var(--color-primary, #C41230)) !important;
        color: #ffffff !important;
        border-color: var(--color-blue, var(--color-primary, #C41230)) !important;
        box-shadow: 0 2px 6px rgba(196, 18, 48, 0.3) !important;
    }

    .vtipz-policy-content-col {
        order: 2 !important;
        width: 100% !important;
    }

    .vtipz-policy-article-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    .vtipz-policy-article-title {
        font-size: 21px !important;
        line-height: 1.35 !important;
    }

    .vtipz-policy-clause {
        margin-bottom: 22px !important;
    }

    .vtipz-policy-clause h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .vtipz-policy-clause p,
    .vtipz-policy-clause li {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
    }

    .vtipz-policy-help-box {
        order: 3 !important;
        margin-top: 10px !important;
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }

    .vtipz-policy-help-box h3 {
        font-size: 15px !important;
    }

    .vtipz-policy-help-box p {
        font-size: 12.5px !important;
        margin-bottom: 12px !important;
    }

    .vtipz-policy-help-btn {
        width: 100% !important;
        padding: 11px !important;
        font-size: 13.5px !important;
    }

    .vtipz-table-scroll-hint {
        display: flex !important;
    }

    .vtipz-table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 14px 0 !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
    }

    .vtipz-policy-table {
        min-width: 580px !important;
        width: 100% !important;
        font-size: 12.5px !important;
    }

    .vtipz-policy-table th,
    .vtipz-policy-table td {
        padding: 10px 12px !important;
    }

    .vtipz-policy-table th:first-child,
    .vtipz-policy-table td:first-child {
        white-space: nowrap !important;
    }

    .vtipz-policy-table th:nth-child(2),
    .vtipz-policy-table td:nth-child(2) {
        white-space: nowrap !important;
    }

    .vtipz-policy-table th:nth-child(3),
    .vtipz-policy-table td:nth-child(3) {
        white-space: nowrap !important;
    }

    .vtipz-login-layout,
    .vtipz-register-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .vtipz-login-main-col,
    .vtipz-login-side-col {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .vtipz-login-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .vtipz-login-main-col,
    .vtipz-login-side-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vtipz-register-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .vtipz-auth-page {
        padding-top: 28px !important;
        padding-bottom: 48px !important;
    }

    .vtipz-policy-page {
        padding-top: 14px !important;
        padding-bottom: 80px !important;
    }

    .vtipz-policy-main-heading {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .vtipz-policy-subtitle {
        font-size: 12.5px !important;
    }

    .vtipz-policy-article-card {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }

    .vtipz-policy-article-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .vtipz-account-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-account-section {
        padding: 20px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .vtipz-account-form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-vouchers-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .vtipz-catalog-layout {
        grid-template-columns: 1fr;
    }
    .vtipz-archive-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vtipz-auth-card {
        padding: 24px 20px;
    }
    .vtipz-account-page {
        padding-top: 16px !important;
        padding-bottom: 28px !important;
        overflow-x: hidden !important;
    }
    .vtipz-page-title-wrap {
        margin-bottom: 14px !important;
    }
    .vtipz-page-title {
        font-size: 20px !important;
    }
    .vtipz-account-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 16px !important;
    }
    .vtipz-stat-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 12px 10px !important;
        gap: 6px !important;
        border-radius: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .vtipz-stat-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    .vtipz-stat-body {
        width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-stat-label {
        font-size: 10px !important;
        margin-bottom: 2px !important;
        color: #64748B !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .vtipz-stat-value {
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .vtipz-stat-sub {
        font-size: 10.5px !important;
        color: #94A3B8 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .vtipz-stat-sub i {
        font-size: 10px !important;
        margin-right: 2px !important;
    }
    .vtipz-account-section {
        padding: 16px 12px !important;
        border-radius: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }
    .vtipz-section-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
    }
    .vtipz-section-title-wrap {
        width: 100% !important;
    }
    .vtipz-account-sec-title {
        font-size: 16px !important;
        gap: 8px !important;
        line-height: 1.35 !important;
    }
    .vtipz-account-sec-subtitle {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin-top: 2px !important;
    }
    .vtipz-profile-status-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 5px 12px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        width: fit-content !important;
    }
    /* Profile Overview Card on Mobile */
    .vtipz-profile-overview-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-bottom: 18px !important;
    }
    .vtipz-overview-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-overview-avatar-wrap {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
    }
    .vtipz-overview-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    .vtipz-overview-meta {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .vtipz-overview-name-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .vtipz-overview-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }
    .vtipz-badge-tier-pill {
        font-size: 11px !important;
        padding: 2px 8px !important;
        white-space: nowrap !important;
    }
    .vtipz-overview-sub {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 4px !important;
    }
    .vtipz-overview-sub span {
        font-size: 12px !important;
        color: #64748B !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        word-break: break-all !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
    }
    .vtipz-overview-sep {
        display: none !important;
    }
    .vtipz-overview-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .vtipz-privilege-box {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    .vtipz-privilege-title {
        font-size: 12.5px !important;
    }
    .vtipz-privilege-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    /* Profile Cards Grid */
    .vtipz-profile-blocks-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .vtipz-profile-card {
        border-radius: 14px !important;
    }
    .vtipz-card-header {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .vtipz-card-icon-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }
    .vtipz-card-title {
        font-size: 14px !important;
    }
    .vtipz-card-subtitle {
        font-size: 11.5px !important;
    }
    .vtipz-card-body {
        padding: 14px 12px !important;
    }
    .vtipz-field-group {
        margin-bottom: 12px !important;
    }
    .vtipz-field-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    .vtipz-field-input,
    .vtipz-field-textarea {
        font-size: 13px !important;
    }
    .vtipz-input-box .vtipz-field-input {
        padding-left: 38px !important;
        height: 42px !important;
    }
    .vtipz-profile-action-bar {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .vtipz-account-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-form-group {
        width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-form-label {
        font-size: 12.5px !important;
        margin-bottom: 4px !important;
    }
    .vtipz-form-input {
        height: 42px !important;
        font-size: 13.5px !important;
        padding: 0 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .vtipz-form-actions-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
    }
    .vtipz-btn-account-save {
        width: 100% !important;
        height: 44px !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
    .vtipz-password-form-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .vtipz-table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .vtipz-account-orders-table {
        min-width: 500px !important;
    }
    .vtipz-voucher-card {
        padding: 12px !important;
        gap: 10px !important;
    }
    .vtipz-voucher-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    .vtipz-voucher-title {
        font-size: 14.5px !important;
    }
    .vtipz-voucher-code-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .vtipz-news-grid-4x4 {
        grid-template-columns: 1fr;
    }
    .vtipz-about-stats-row {
        grid-template-columns: 1fr;
    }
    .vtipz-about-brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vtipz-brand-cards-grid {
        grid-template-columns: 1fr;
    }
    .vtipz-commitments-grid {
        grid-template-columns: 1fr;
    }

    .vtipz-products-grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .vtipz-products-grid,
    .vtipz-products-grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .vtipz-product-card {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Footer Mobile Optimization - 3 Columns Side-by-Side */
@media (max-width: 767px) {
    .vtipz-footer-middle-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px 8px !important;
        width: 100% !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-col,
    .vtipz-footer-middle-group .vtipz-footer-menu-col {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-title {
        font-size: 13px !important;
        white-space: nowrap !important;
        margin-bottom: 8px !important;
        padding-bottom: 4px !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-menu li {
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }

    .vtipz-footer-middle-group .vtipz-footer-menu li a {
        font-size: 11.5px !important;
        word-break: break-word !important;
    }
}