/* ==============================================================
   VANDE NATURE · HERBAL ATELIER  (v4 — brand new)
   Pure white background · logo green accent · single font family
   Bricolage Grotesque (300–800, variable optical)
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Sans+Gujarati:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
    /* Colour — STRICTLY white + greens */
    --vn-white:        #FFFFFF;
    --vn-ink:          #0B1F10;
    --vn-ink-2:        #1A3322;
    --vn-muted:        #6B7A6E;
    --vn-muted-soft:   #9BA69D;
    --vn-g-primary:    #1E6B34;   /* logo wreath */
    --vn-g-mid:        #2F9C4C;   /* logo text */
    --vn-g-accent:     #7FC142;   /* LOGO LIGHT — hover everywhere */
    --vn-g-light:      #E8F4DD;   /* tinted section */
    --vn-g-soft:       #F2F9EB;
    --vn-line:         #EAEEE7;
    --vn-line-2:       #D7E2CF;

    --vn-whatsapp:     #25D366;
    --vn-whatsapp-d:   #128C7E;

    /* Font — SINGLE family */
    --vn-font: 'Bricolage Grotesque', 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Segoe UI', system-ui, sans-serif;

    /* Fluid type scale */
    --vn-s-xs:   clamp(.72rem, .68rem + .2vw, .8rem);
    --vn-s-sm:   clamp(.82rem, .78rem + .25vw, .92rem);
    --vn-s-0:    clamp(1rem,  .95rem + .25vw, 1.08rem);
    --vn-s-1:    clamp(1.15rem, 1.05rem + .45vw, 1.3rem);
    --vn-s-2:    clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
    --vn-s-3:    clamp(1.65rem, 1.35rem + 1.4vw, 2.4rem);
    --vn-s-4:    clamp(2.1rem, 1.65rem + 2.3vw, 3.5rem);
    --vn-s-5:    clamp(2.6rem, 1.85rem + 3.6vw, 4.8rem);
    --vn-s-6:    clamp(3.4rem, 2rem + 6vw, 7rem);
    --vn-s-7:    clamp(4.5rem, 2.2rem + 9vw, 11rem);

    /* Geometry */
    --vn-r-xs:  10px;
    --vn-r-sm:  16px;
    --vn-r:     24px;
    --vn-r-lg:  36px;
    --vn-r-xl:  56px;
    --vn-pill:  999px;

    /* Shadow (subtle, green-tinted) */
    --vn-sh-xs: 0 1px 2px rgba(11,31,16,.05), 0 4px 16px rgba(11,31,16,.04);
    --vn-sh-sm: 0 6px 20px rgba(11,31,16,.06);
    --vn-sh:    0 22px 60px rgba(11,31,16,.09);
    --vn-sh-glow: 0 0 0 1.5px rgba(127,193,66,.55), 0 18px 60px rgba(127,193,66,.25);

    --vn-ease:   cubic-bezier(.22, .61, .36, 1);
    --vn-ease-o: cubic-bezier(.2, .9, .2, 1);
    --vn-ease-b: cubic-bezier(.34, 1.56, .64, 1);
    --vn-ease-io:cubic-bezier(.65, 0, .35, 1);
}

/* -------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body,
body.vertical-layout {
    font-family: var(--vn-font) !important;
    font-weight: 400;
    font-size: var(--vn-s-0);
    line-height: 1.65;
    color: var(--vn-ink) !important;
    background: var(--vn-white) !important;
    letter-spacing: -0.005em;
    overflow-x: hidden;
    font-optical-sizing: auto;
}

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

/* Links */
a { color: var(--vn-g-primary); transition: color .3s var(--vn-ease); text-decoration: none; }
a:hover { color: var(--vn-g-accent); }

::selection { background: var(--vn-g-accent); color: var(--vn-ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vn-white); }
::-webkit-scrollbar-thumb { background: var(--vn-g-primary); border: 2px solid var(--vn-white); border-radius: var(--vn-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--vn-g-accent); }

/* -------------------------------------------------------------
   3. TYPOGRAPHY (single family, weight-driven)
   ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand,
.vn-display {
    font-family: var(--vn-font) !important;
    font-weight: 700;
    color: var(--vn-ink);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: 0;
}
h1, .display-1, .display-2, .display-3 { font-size: var(--vn-s-6); font-weight: 800; line-height: .96; letter-spacing: -0.045em; }
.display-4                              { font-size: var(--vn-s-5); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
h2, .display-5                          { font-size: var(--vn-s-5); font-weight: 700; letter-spacing: -0.035em; }
.display-6, h3                          { font-size: var(--vn-s-4); font-weight: 700; }
h4                                      { font-size: var(--vn-s-3); font-weight: 600; line-height: 1.15; }
h5                                      { font-size: var(--vn-s-2); font-weight: 600; line-height: 1.2; }
h6                                      { font-size: var(--vn-s-1); font-weight: 600; line-height: 1.3; }

p, li, a, span, label, input, textarea, button, small, select, option,
.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 { font-family: var(--vn-font) !important; }
p { margin-bottom: 1rem; color: var(--vn-ink-2); }

/* Italic green accent */
h1 em, h2 em, h3 em, h4 em,
.display-1 em, .display-2 em, .display-3 em,
.display-4 em, .display-5 em, .display-6 em,
.vn-italic {
    font-style: italic;
    font-weight: 500;
    color: var(--vn-g-primary);
}

/* Eyebrow label */
.divider-right, .vn-eyebrow {
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: var(--vn-s-xs) !important;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--vn-g-primary) !important;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .9rem .4rem .5rem;
    background: var(--vn-g-soft);
    border-radius: var(--vn-pill);
}
.divider-right::before, .vn-eyebrow::before {
    content: '';
    width: 22px; height: 22px;
    background: var(--vn-g-accent);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.divider-right::after { display: none !important; }

/* Justify 2+ line paragraphs */
main p, footer p, section p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}
main p.text-center, footer p.text-center, .text-center > p,
.text-md-end p, .text-end p, .breadcrumb-item, .counter-box p { text-align: inherit !important; }

/* -------------------------------------------------------------
   4. SCROLL PROGRESS BAR
   ------------------------------------------------------------- */
.vn-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0%;
    background: var(--vn-g-accent);
    z-index: 2100;
    box-shadow: 0 0 10px rgba(127,193,66,.7);
    transition: width .08s linear;
}

/* -------------------------------------------------------------
   5. BOOTSTRAP OVERRIDES
   ------------------------------------------------------------- */
.text-theme, .text-success { color: var(--vn-g-primary) !important; }
.theme-bg, .bg-theme       { background: var(--vn-g-primary) !important; color: var(--vn-white) !important; }
.border-theme              { border-color: var(--vn-line) !important; }
.text-dark, .text-black    { color: var(--vn-ink) !important; }
.text-black-50             { color: var(--vn-muted) !important; }
.font-outfit, .font-sansation { font-family: var(--vn-font) !important; }
.bg-light                  { background: var(--vn-g-soft) !important; }
.background-1              { background: var(--vn-white) !important; position: relative; }
.background-2              { background: var(--vn-g-light) !important; position: relative; overflow: hidden; }
.about-bg                  { background: var(--vn-white) !important; }
.nav-theme                 { background: var(--vn-white) !important; }

.container { max-width: 1340px; }

/* -------------------------------------------------------------
   6. TOPBAR (thin, green)
   ------------------------------------------------------------- */
.topbar {
    background: var(--vn-g-primary) !important;
    color: var(--vn-white) !important;
    font-size: var(--vn-s-xs);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    padding: .55rem 0 !important;
    overflow: hidden;
    position: relative;
}
.topbar::before, .topbar::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 60px;
    z-index: 2; pointer-events: none;
}
.topbar::before { left: 0; background: linear-gradient(90deg, var(--vn-g-primary), transparent); }
.topbar::after  { right: 0; background: linear-gradient(-90deg, var(--vn-g-primary), transparent); }
.topbar .topbar-text { animation: vn-marquee 50s linear infinite; white-space: nowrap; }
.topbar p, .topbar p.text-black {
    color: var(--vn-white) !important;
    margin: 0;
    padding: 0 1.75rem;
    position: relative;
}
.topbar p::after {
    content: "✦";
    position: absolute;
    right: -.2rem; top: 50%;
    transform: translateY(-50%);
    color: var(--vn-g-accent);
    font-size: .65rem;
    letter-spacing: 0;
}
@keyframes vn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------
   7. MAIN NAVIGATION
   ------------------------------------------------------------- */
.main-header,
.navbar.main-header {
    padding: .75rem 0;
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    transition: all .45s var(--vn-ease);
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
}
.main-header.vn-scrolled {
    background: rgba(255,255,255,.97) !important;
    padding: .45rem 0;
    box-shadow: 0 10px 32px rgba(11,31,16,.06);
    border-bottom-color: var(--vn-line) !important;
}
.navbar-brand { padding: 0 !important; }
.navbar-brand .logo {
    max-height: 58px; width: auto;
    transition: transform .55s var(--vn-ease), filter .4s var(--vn-ease);
}
.navbar-brand:hover .logo {
    transform: scale(1.06) rotate(-2deg);
    filter: drop-shadow(0 6px 18px rgba(127,193,66,.45));
}

.navbar-nav { gap: .2rem; }
.navbar-nav .nav-link {
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    color: var(--vn-ink) !important;
    padding: .7rem 1.1rem !important;
    position: relative;
    transition: color .35s var(--vn-ease), background .35s var(--vn-ease);
    text-transform: capitalize !important;
    letter-spacing: 0;
    border-radius: var(--vn-pill);
}
.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    left: 50%; bottom: .42rem;
    width: 0; height: 2px;
    background: var(--vn-g-accent);
    border-radius: 2px;
    transition: width .4s var(--vn-ease), left .4s var(--vn-ease);
}
.navbar-nav .nav-link:hover { color: var(--vn-g-accent) !important; }
.navbar-nav .nav-link:hover::before { width: calc(100% - 2.2rem); left: 1.1rem; }

/* Active state — clearly different, premium */
.navbar-nav .nav-link.active {
    color: var(--vn-g-primary) !important;
    background: var(--vn-g-soft);
}
.navbar-nav .nav-link.active::before {
    width: calc(100% - 2.2rem);
    left: 1.1rem;
    background: var(--vn-g-primary);
}
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    top: 50%; left: .45rem;
    transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--vn-g-accent);
    box-shadow: 0 0 0 3px rgba(127,193,66,.25);
}
.navbar-nav .nav-link.active { padding-left: 1.3rem !important; }

/* -------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------- */
.theme-btn,
.theme-btn.login-btn {
    background: var(--vn-g-primary) !important;
    color: var(--vn-white) !important;
    border: 1.5px solid var(--vn-g-primary) !important;
    border-radius: var(--vn-pill) !important;
    padding: .85rem 1.6rem !important;
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    letter-spacing: 0;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--vn-ease), box-shadow .4s var(--vn-ease), color .4s var(--vn-ease), background .4s var(--vn-ease), border-color .4s var(--vn-ease);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    line-height: 1 !important;
    isolation: isolate;
    text-transform: none;
}
.theme-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vn-ink);
    transform: translateY(102%);
    transition: transform .55s var(--vn-ease-o);
    z-index: -1;
}
.theme-btn:hover,
.theme-btn.login-btn:hover {
    color: var(--vn-white) !important;
    background: var(--vn-ink) !important;
    border-color: var(--vn-ink) !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(11,31,16,.28);
}
.theme-btn:hover::before { transform: translateY(0); }
.theme-btn i,
.theme-btn span { color: inherit !important; position: relative; z-index: 1; }

/* Outline variant — Sign up */
.theme-btn.vn-signup-btn {
    background: transparent !important;
    color: var(--vn-g-primary) !important;
    border-color: var(--vn-g-primary) !important;
}
.theme-btn.vn-signup-btn::before { background: var(--vn-g-primary); }
.theme-btn.vn-signup-btn:hover {
    color: var(--vn-white) !important;
    background: var(--vn-g-primary) !important;
    border-color: var(--vn-g-primary) !important;
    box-shadow: 0 14px 34px rgba(30,107,52,.28);
}

.vn-auth-group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: .5rem;
}

/* Pill link w/ arrow */
.vn-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--vn-ink);
    padding: .5rem .25rem;
    position: relative;
    transition: color .3s var(--vn-ease), gap .3s var(--vn-ease);
}
.vn-arrow-link i { transition: transform .35s var(--vn-ease); }
.vn-arrow-link:hover { color: var(--vn-g-accent); gap: .7rem; }
.vn-arrow-link:hover i { transform: translateX(4px) rotate(-15deg); }

/* -------------------------------------------------------------
   9. MOBILE MENU TOGGLER
   ------------------------------------------------------------- */
.navbar-toggler {
    border: 1.5px solid var(--vn-ink) !important;
    color: var(--vn-ink) !important;
    border-radius: var(--vn-pill) !important;
    padding: .45rem .65rem !important;
    box-shadow: none !important;
}
.navbar-toggler:hover { background: var(--vn-g-accent) !important; color: var(--vn-ink) !important; border-color: var(--vn-g-accent) !important; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(127,193,66,.3) !important; }

/* -------------------------------------------------------------
   10. HERO — BENTO SPLIT (the signature new look)
   ------------------------------------------------------------- */
.hero-section {
    padding: 140px 0 90px !important;
    position: relative;
    background: var(--vn-white) !important;
    overflow: hidden;
}
.hero-section::before {
    content: 'EST · 1947';
    position: absolute;
    top: 130px; right: 40px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .32em;
    color: var(--vn-muted-soft);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    z-index: 2;
}
.hero-section .container { position: relative; z-index: 2; }
.hero-section .row { min-height: 78vh; }

/* Left typography-dominant column */
.hero-section .col-md-6:first-child,
.hero-section .col-lg-5:first-child,
.hero-section .col-lg-6:first-child { padding-right: 3vw; }
.hero-section h6 { display: inline-flex; }
.hero-section h2 {
    font-size: var(--vn-s-6) !important;
    font-weight: 800 !important;
    line-height: .96 !important;
    letter-spacing: -0.045em;
    color: var(--vn-ink);
    margin: 1rem 0 1.5rem;
}
.hero-section p {
    font-size: var(--vn-s-1) !important;
    line-height: 1.55;
    color: var(--vn-muted);
    max-width: 48ch;
}

/* Right: premium layered canvas panel */
.vn-hero-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    background:
        radial-gradient(closest-side at 30% 20%, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(closest-side at 85% 90%, rgba(30,107,52,.35), transparent 65%),
        linear-gradient(145deg, #7FC142 0%, #5FB238 55%, #2F9C4C 100%);
    border-radius: var(--vn-r-xl);
    overflow: hidden;
    box-shadow:
        0 40px 90px rgba(30,107,52,.28),
        0 12px 30px rgba(11,31,16,.12),
        inset 0 1px 0 rgba(255,255,255,.35);
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.25);
}
/* soft inner grain / noise for premium depth */
.vn-hero-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .18;
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* Concentric ring pattern for depth */
.vn-hero-canvas::after {
    content: '';
    position: absolute;
    width: 150%; height: 150%;
    top: -25%; left: -25%;
    background:
        radial-gradient(closest-side, transparent 50%, rgba(255,255,255,.08) 51%, rgba(255,255,255,.08) 52%, transparent 53%),
        radial-gradient(closest-side, transparent 65%, rgba(255,255,255,.06) 66%, rgba(255,255,255,.06) 67%, transparent 68%),
        radial-gradient(closest-side, transparent 80%, rgba(255,255,255,.05) 81%, rgba(255,255,255,.05) 82%, transparent 83%);
    pointer-events: none;
}

.vn-hero-canvas img.vn-hero-product {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    max-width: 78%;
    max-height: 84%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 26px 40px rgba(11,31,16,.3));
    transition: transform .9s var(--vn-ease), filter .9s var(--vn-ease);
}
.hero-section .vn-hero-canvas:hover img.vn-hero-product {
    transform: translate(-50%, -50%) scale(1.03) rotate(-1.5deg);
    filter: drop-shadow(0 32px 50px rgba(11,31,16,.35));
}

/* Premium sticker chips */
.vn-sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--vn-ink);
    border-radius: var(--vn-pill);
    padding: .6rem 1.05rem;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .01em;
    box-shadow:
        0 12px 30px rgba(11,31,16,.18),
        0 1px 2px rgba(11,31,16,.06),
        inset 0 1px 0 rgba(255,255,255,.8);
    z-index: 3;
    gap: .5rem;
    transition: transform .45s var(--vn-ease-b), box-shadow .45s var(--vn-ease);
    border: 1px solid rgba(255,255,255,.6);
}
.vn-sticker i { color: var(--vn-g-primary); font-size: 1.02rem; }
.vn-sticker:hover { transform: rotate(-3deg) scale(1.06) translateY(-3px); box-shadow: 0 18px 40px rgba(11,31,16,.25); }
.vn-sticker--tl { top: 6%;  left: 4%;  transform: rotate(-7deg); }
.vn-sticker--tr { top: 12%; right: 4%; transform: rotate(5deg); }
.vn-sticker--bl { bottom: 10%; left: 5%; transform: rotate(4deg); }

/* Premium stat card */
.vn-stat-card {
    position: absolute;
    top: 38%; right: -30px;
    background: var(--vn-white);
    color: var(--vn-ink);
    border-radius: var(--vn-r);
    padding: 1.15rem 1.4rem;
    box-shadow:
        0 28px 60px rgba(11,31,16,.2),
        0 4px 10px rgba(11,31,16,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
    z-index: 4;
    min-width: 190px;
    border: 1px solid rgba(11,31,16,.06);
}
.vn-stat-card::before {
    content: '';
    position: absolute;
    top: 1rem; left: 1.4rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--vn-g-accent);
    box-shadow: 0 0 0 3px rgba(127,193,66,.28);
}
.vn-stat-card__num {
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--vn-g-primary);
    letter-spacing: -.035em;
    padding-left: 1rem;
}
.vn-stat-card__num sup { font-size: .45em; color: var(--vn-g-accent); top: -1em; font-weight: 700; }
.vn-stat-card__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vn-muted);
    margin-top: .45rem;
    padding-left: 1rem;
}

/* Spinning circle badge */
.vn-stamp {
    position: absolute;
    left: -40px; bottom: -40px;
    width: 130px; height: 130px;
    z-index: 4;
    animation: vn-spin 18s linear infinite;
    color: var(--vn-ink);
}
@keyframes vn-spin { to { transform: rotate(360deg); } }

/* Hero image fallback for existing carousel content (keeps hero-section img centered) */
.hero-section .carousel img.img-fluid {
    border-radius: var(--vn-r-lg);
}

/* Existing h2/h6 inside hero-section carousel keep styling */
.hero-section .slide-1, .hero-section .slide-2, .hero-section .slide-3 { padding: 2rem 0; }

/* Inner hero banners (About/Shop/Contact/Gallery) */
.hero-about, .hero-contact, .hero-shop, .hero-gallery {
    min-height: 60vh;
    padding: 160px 0 60px !important;
    background: var(--vn-g-soft) !important;
    position: relative;
    overflow: hidden;
}
.hero-about::before, .hero-contact::before, .hero-shop::before, .hero-gallery::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    right: -150px; top: -150px;
    background: var(--vn-g-accent);
    border-radius: 50%;
    opacity: .35;
    filter: blur(20px);
    pointer-events: none;
}
.hero-about h2, .hero-contact h2, .hero-shop h2, .hero-gallery h2 {
    color: var(--vn-ink) !important;
    font-size: var(--vn-s-7) !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em;
    line-height: .95 !important;
}
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb .breadcrumb-item a {
    color: var(--vn-g-primary) !important;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.breadcrumb .breadcrumb-item.active {
    color: var(--vn-ink) !important;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.breadcrumb-item + .breadcrumb-item::before { content: "→"; color: var(--vn-g-accent); padding: 0 .6rem; font-weight: 700; }

.carousel-indicators { bottom: -3rem; }
.carousel-indicators button {
    width: 8px !important; height: 8px !important;
    border-radius: 50%;
    background: var(--vn-line-2) !important;
    opacity: 1 !important;
    border: 0 !important;
    margin: 0 5px !important;
    transition: all .4s var(--vn-ease);
}
.carousel-indicators button.active {
    width: 34px !important;
    border-radius: var(--vn-pill) !important;
    background: var(--vn-g-accent) !important;
}

/* -------------------------------------------------------------
   11. RUNNING MARQUEE STRIP (between sections)
   ------------------------------------------------------------- */
.vn-marquee-band {
    background: var(--vn-ink);
    color: var(--vn-white);
    padding: 1.3rem 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.vn-marquee-band__track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    animation: vn-marquee 35s linear infinite;
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: var(--vn-s-3);
    letter-spacing: -.015em;
    color: var(--vn-white);
    align-items: center;
}
.vn-marquee-band__track span { display: inline-flex; align-items: center; gap: 3rem; }
.vn-marquee-band__track em {
    font-style: italic;
    color: var(--vn-g-accent);
    font-weight: 500;
}
.vn-marquee-band__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--vn-g-accent);
    display: inline-block;
}

/* -------------------------------------------------------------
   12. SECTION RHYTHM + WAVY DIVIDERS
   ------------------------------------------------------------- */
section {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
}
section > img.position-absolute { opacity: .4; mix-blend-mode: multiply; }

.vn-wave-divider {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -1px;
    color: var(--vn-g-light);
}

/* -------------------------------------------------------------
   13. FEATURE STRIP (shipping icons)
   ------------------------------------------------------------- */
.shipping .d-flex {
    background: var(--vn-white);
    padding: 1.6rem 1.4rem;
    border-radius: var(--vn-r);
    border: 1px solid var(--vn-line);
    transition: all .5s var(--vn-ease);
    position: relative;
    overflow: hidden;
}
.shipping .d-flex::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 120px; height: 120px;
    background: var(--vn-g-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .5s var(--vn-ease), transform .5s var(--vn-ease);
    transform: scale(.6);
    filter: blur(20px);
}
.shipping .d-flex:hover {
    transform: translateY(-8px);
    border-color: var(--vn-g-accent);
    box-shadow: var(--vn-sh-glow);
}
.shipping .d-flex:hover::before { opacity: .4; transform: scale(1); }
.shipping h5 { font-weight: 700 !important; margin: 0; color: var(--vn-ink); font-size: 1.1rem; position: relative; z-index: 1; }
.shipping p {
    color: var(--vn-g-primary) !important;
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin: 0 0 .4rem !important;
    text-align: left !important;
    position: relative; z-index: 1;
}
.shipping img {
    width: 56px; height: 56px;
    object-fit: contain;
    padding: 10px;
    background: var(--vn-g-light);
    border-radius: var(--vn-r-sm);
    transition: background .4s var(--vn-ease);
}
.shipping .d-flex:hover img { background: var(--vn-white); }

/* -------------------------------------------------------------
   14. BENTO CATEGORY TILES (optional)
   ------------------------------------------------------------- */
.vn-bento { display: grid; gap: 1.25rem; grid-template-columns: repeat(6, 1fr); }
.vn-bento__item {
    background: var(--vn-g-light);
    border-radius: var(--vn-r-lg);
    padding: 1.75rem;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    transition: transform .5s var(--vn-ease), box-shadow .5s var(--vn-ease);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vn-bento__item:hover { transform: translateY(-6px); box-shadow: var(--vn-sh); }
.vn-bento__item--wide { grid-column: span 4; background: var(--vn-g-primary); color: var(--vn-white); min-height: 280px; }
.vn-bento__item--tall { grid-column: span 2; grid-row: span 2; min-height: 460px; }
.vn-bento__item--md   { grid-column: span 2; }
.vn-bento__item--sm   { grid-column: span 2; }
.vn-bento__tag {
    align-self: flex-start;
    padding: .35rem .8rem;
    background: rgba(255,255,255,.85);
    color: var(--vn-ink);
    border-radius: var(--vn-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.vn-bento__title { font-size: var(--vn-s-3); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin-bottom: .4rem; }
.vn-bento__item--wide .vn-bento__title { color: var(--vn-white); }
.vn-bento__item img {
    position: absolute;
    right: -30px; bottom: -30px;
    width: 55%;
    object-fit: contain;
    transition: transform .8s var(--vn-ease);
}
.vn-bento__item:hover img { transform: scale(1.1) rotate(-3deg); }
@media (max-width: 991.98px) {
    .vn-bento { grid-template-columns: repeat(2, 1fr); }
    .vn-bento__item--wide, .vn-bento__item--tall, .vn-bento__item--md, .vn-bento__item--sm { grid-column: span 2; grid-row: span 1; min-height: 220px; }
}

/* -------------------------------------------------------------
   15. IMAGE HOVER
   ------------------------------------------------------------- */
.img-hover {
    border-radius: var(--vn-r);
    overflow: hidden;
    position: relative;
    box-shadow: var(--vn-sh-xs);
}
.img-hover img { transition: transform 1.1s var(--vn-ease); display: block; width: 100%; height: auto; }
.img-hover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(11,31,16,.35) 100%);
    opacity: 0;
    transition: opacity .6s var(--vn-ease);
    pointer-events: none;
}
.img-hover:hover img { transform: scale(1.08); }
.img-hover:hover::after { opacity: 1; }

/* -------------------------------------------------------------
   16. HORIZONTAL-SCROLL PRODUCTS + CARDS
   ------------------------------------------------------------- */
.vn-hscroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .5rem .5rem 2rem;
    margin: 0 -.5rem;
    scrollbar-width: none;
    cursor: grab;
}
.vn-hscroll::-webkit-scrollbar { display: none; }
.vn-hscroll.vn-dragging { cursor: grabbing; }
.vn-hscroll > * {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

.product-box {
    background: var(--vn-white);
    border-radius: var(--vn-r);
    padding: 1.25rem 1.25rem 1.75rem;
    border: 1px solid var(--vn-line);
    transition: transform .55s var(--vn-ease), box-shadow .55s var(--vn-ease), border-color .4s var(--vn-ease);
    position: relative;
    overflow: hidden;
}
.product-box::before {
    content: '';
    position: absolute;
    top: 14px; right: 14px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--vn-g-accent);
    opacity: 0;
    transform: scale(.5);
    transition: all .5s var(--vn-ease-b);
    z-index: 3;
}
.product-box:hover {
    transform: translateY(-8px);
    border-color: var(--vn-g-accent);
    box-shadow: var(--vn-sh-glow);
}
.product-box:hover::before { opacity: 1; transform: scale(1); }

.product-box .img-hover {
    background: var(--vn-g-soft);
    border-radius: var(--vn-r-sm);
    padding: 1.25rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.product-box .img-hover img { object-fit: contain; width: auto; max-width: 100%; max-height: 100%; }
.product-box p {
    margin-bottom: 0;
    color: var(--vn-ink);
    font-weight: 600 !important;
    font-size: 1.08rem !important;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.product-box .text-theme {
    color: var(--vn-g-primary) !important;
    font-size: .7rem !important;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .35rem !important;
}
.product-btn {
    transform: translateY(120%);
    transition: transform .55s var(--vn-ease-o);
}
.product-box:hover .product-btn { transform: translateY(0); }
.product-btn .theme-btn { padding: .8rem 1.1rem !important; width: 100%; justify-content: center; }

/* -------------------------------------------------------------
   17. CATEGORY TABS — single-line scrollable
   ------------------------------------------------------------- */
.nav-tabs {
    border: 0;
    gap: .4rem;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    mask-image: linear-gradient(90deg, #000 0, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 95%, transparent 100%);
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
    background: var(--vn-g-soft);
    border: 1.5px solid var(--vn-g-soft) !important;
    border-radius: var(--vn-pill) !important;
    color: var(--vn-ink) !important;
    padding: .6rem 1.25rem !important;
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: 0;
    text-transform: none;
    transition: all .35s var(--vn-ease);
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-tabs .nav-link:hover {
    background: var(--vn-white);
    border-color: var(--vn-g-accent) !important;
    color: var(--vn-g-primary) !important;
}
.nav-tabs .nav-link.active {
    background: var(--vn-ink) !important;
    color: var(--vn-white) !important;
    border-color: var(--vn-ink) !important;
    box-shadow: 0 10px 24px rgba(11,31,16,.2);
}

/* -------------------------------------------------------------
   18. STATS / COUNTER
   ------------------------------------------------------------- */
.counter-box {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem;
    text-align: left !important;
    transition: transform .4s var(--vn-ease);
    border-left: 1px solid var(--vn-line);
    padding-left: 2rem;
}
.counter-box:first-child { border-left: 0; padding-left: 1rem; }
.counter-box:hover { transform: translateY(-4px); }
.counter-box span,
.counter-box .display-5 {
    display: block;
    font-weight: 800 !important;
    font-size: var(--vn-s-5) !important;
    line-height: 1 !important;
    letter-spacing: -.045em;
    color: var(--vn-g-primary) !important;
}
.counter-box span sup {
    font-size: .4em !important;
    color: var(--vn-g-accent) !important;
    top: -1.1em;
}
.counter-box p {
    font-weight: 600 !important;
    color: var(--vn-muted) !important;
    font-size: .8rem !important;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-top: .9rem !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* -------------------------------------------------------------
   19. TESTIMONIAL
   ------------------------------------------------------------- */
#testimonialcarousel { padding-bottom: 5rem; }
#testimonialcarousel .carousel-inner {
    background: var(--vn-g-light);
    border-radius: var(--vn-r-lg);
    padding: 4rem 3rem !important;
    position: relative;
    overflow: hidden;
}
#testimonialcarousel .carousel-inner::before {
    content: '“';
    position: absolute;
    top: -1.5rem; left: 2rem;
    font-size: 14rem;
    line-height: 1;
    font-weight: 800;
    color: var(--vn-g-accent);
    opacity: .45;
    font-family: Georgia, serif;
    pointer-events: none;
}
#testimonialcarousel .text-center p {
    font-size: var(--vn-s-3) !important;
    font-weight: 500 !important;
    line-height: 1.4;
    color: var(--vn-ink);
    max-width: 780px;
    margin: 0 auto;
    font-style: normal;
    position: relative; z-index: 1;
}
#testimonialcarousel .text-center h5 {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--vn-ink) !important;
    margin-top: 1.6rem;
}
#testimonialcarousel .text-center h5 .text-theme {
    color: var(--vn-g-primary) !important;
    font-weight: 500 !important;
    margin-left: .35rem;
}
.t-img {
    width: 90px !important; height: 90px;
    object-fit: cover;
    border: 3px solid var(--vn-white);
    box-shadow: 0 10px 24px rgba(30,107,52,.25);
    padding: 0;
    background: var(--vn-white);
    border-radius: 50%;
}

/* Swiper pagination */
.swiper-pagination-bullet { background: var(--vn-line-2) !important; opacity: 1 !important; width: 8px; height: 8px; transition: all .4s var(--vn-ease); }
.swiper-pagination-bullet-active { background: var(--vn-g-accent) !important; width: 28px; border-radius: var(--vn-pill); }

/* -------------------------------------------------------------
   20. GALLERY
   ------------------------------------------------------------- */
.gallery { border-radius: var(--vn-r); position: relative; overflow: hidden; }
.gallery img { transition: transform 1.1s var(--vn-ease); }
.gallery::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(30,107,52,.55), rgba(127,193,66,.3));
    opacity: 0;
    transition: opacity .5s var(--vn-ease);
}
.gallery:hover img { transform: scale(1.09); }
.gallery:hover::after { opacity: 1; }
.gallery-icon { z-index: 2; }
.gallery-icon i { color: var(--vn-white) !important; }
.gallery:hover .gallery-icon { opacity: 1 !important; }

/* -------------------------------------------------------------
   21. FORMS
   ------------------------------------------------------------- */
.form-control {
    background: var(--vn-white) !important;
    border: 1.5px solid var(--vn-line) !important;
    color: var(--vn-ink) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: .95rem 1.1rem !important;
    transition: border-color .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
    font-size: var(--vn-s-0);
    box-shadow: none !important;
}
.form-control:focus {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
    background: var(--vn-white) !important;
}
.form-control::placeholder { color: var(--vn-muted); }

.input-group.border-theme {
    border: 1.5px solid var(--vn-line) !important;
    border-radius: var(--vn-pill) !important;
    padding: .3rem !important;
    background: var(--vn-white);
    overflow: hidden;
}
.input-group:focus-within { border-color: var(--vn-g-accent) !important; box-shadow: 0 0 0 4px rgba(127,193,66,.18); }
.input-group .form-control { border: 0 !important; background: transparent !important; padding: .7rem 1rem !important; }
.input-group .theme-btn { border-radius: var(--vn-pill) !important; padding: .75rem 1.2rem !important; }

/* -------------------------------------------------------------
   22. NEWSLETTER BAND
   ------------------------------------------------------------- */
.vn-newsletter {
    background: var(--vn-ink);
    color: var(--vn-white);
    border-radius: var(--vn-r-lg);
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
}
.vn-newsletter::before {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 360px; height: 360px;
    background: var(--vn-g-accent);
    border-radius: 50%;
    opacity: .2;
    filter: blur(20px);
}
.vn-newsletter h3 { color: var(--vn-white) !important; font-size: var(--vn-s-4); font-weight: 700; }
.vn-newsletter p { color: rgba(255,255,255,.75) !important; }

/* -------------------------------------------------------------
   22.4 AUTH PAGES (Login · Register · Forgot)
   ------------------------------------------------------------- */
.vn-auth-page {
    background: var(--vn-white);
    min-height: 100vh;
    overflow-x: hidden;
}
.vn-auth {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    min-height: 100vh;
    width: 100%;
}

/* Left brand panel */
.vn-auth__brand {
    position: relative;
    background:
      radial-gradient(closest-side at 85% 10%, rgba(127,193,66,.45), transparent 60%),
      radial-gradient(closest-side at 10% 90%, rgba(127,193,66,.3), transparent 60%),
      linear-gradient(160deg, var(--vn-g-primary) 0%, #165128 55%, var(--vn-g-800) 100%);
    color: var(--vn-white);
    padding: 3rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
.vn-auth__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .08;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.vn-auth__brand::after {
    content: '';
    position: absolute;
    right: -120px; bottom: -120px;
    width: 460px; height: 460px;
    border-radius: 50%;
    border: 1px dashed rgba(216,242,204,.25);
    pointer-events: none;
    animation: vn-spin 60s linear infinite;
}
.vn-auth__brand > * { position: relative; z-index: 1; }

.vn-auth__home-link {
    position: absolute;
    top: 1.75rem; left: 2rem;
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--vn-pill);
    transition: all .35s var(--vn-ease);
    z-index: 2;
}
.vn-auth__home-link:hover {
    color: var(--vn-ink);
    background: var(--vn-g-accent);
    border-color: var(--vn-g-accent);
}
.vn-auth__home-link i { font-size: 1rem; }

.vn-auth__logo {
    display: inline-block;
    margin-top: 3rem;
    margin-bottom: auto;
}
.vn-auth__logo img {
    max-height: 80px;
    filter: brightness(0) invert(1);
    transition: transform .55s var(--vn-ease);
}
.vn-auth__logo:hover img { transform: scale(1.05) rotate(-2deg); }

.vn-auth__story {
    margin: 2rem 0;
    max-width: 440px;
}
.vn-auth__story h2 {
    color: var(--vn-white) !important;
    font-size: var(--vn-s-4) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em;
}
.vn-auth__story h2 em {
    color: var(--vn-g-accent) !important;
    font-style: italic;
    background: none !important;
    -webkit-text-fill-color: var(--vn-g-accent) !important;
}
.vn-auth__story p {
    color: rgba(255,255,255,.78) !important;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left !important;
}

.vn-auth__perks {
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 440px;
}
.vn-auth__perks li {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .95rem;
    color: rgba(255,255,255,.9);
}
.vn-auth__perks li i {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127,193,66,.18);
    color: var(--vn-g-accent);
    font-size: 1.05rem;
    border: 1px solid rgba(127,193,66,.3);
}

.vn-auth__footnote {
    color: rgba(255,255,255,.55) !important;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 2rem;
    margin-bottom: 0;
    text-align: left !important;
}

/* Hero product image on brand panel */
.vn-auth__brand .vn-auth__hero-img {
    position: absolute;
    right: -5%;
    bottom: -4%;
    width: 56%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    z-index: 0 !important;
    filter: drop-shadow(0 32px 55px rgba(11,31,16,.5));
    animation: vn-auth-float 7s cubic-bezier(.65, 0, .35, 1) infinite;
    pointer-events: none;
    opacity: .95;
}
.vn-auth__brand .vn-auth__leaf { z-index: 0 !important; }
@keyframes vn-auth-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-14px) rotate(-1.5deg); }
}

/* Floating botanical leaves */
.vn-auth__leaf {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    animation: vn-auth-leaf 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.vn-auth__leaf--a {
    top: 12%;
    right: 18%;
    width: 72px; height: 72px;
    color: #A8E29A;
    transform: rotate(-25deg);
    animation-duration: 8s;
}
.vn-auth__leaf--b {
    top: 42%;
    right: 6%;
    width: 54px; height: 54px;
    color: #7FC142;
    transform: rotate(35deg);
    animation-duration: 11s;
    animation-delay: .7s;
}
.vn-auth__leaf--c {
    bottom: 32%;
    left: 10%;
    width: 44px; height: 44px;
    color: #D8F2CC;
    transform: rotate(-15deg);
    animation-duration: 10s;
    animation-delay: 1.4s;
}
@keyframes vn-auth-leaf {
    0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
    50%      { transform: translate(-14px, -10px) rotate(calc(var(--r, 0deg) + 12deg)); }
}
.vn-auth__leaf--a { --r: -25deg; }
.vn-auth__leaf--b { --r: 35deg; }
.vn-auth__leaf--c { --r: -15deg; }

/* Right form panel */
.vn-auth__panel {
    padding: 4rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: var(--vn-white);
    position: relative;
}
.vn-auth__panel::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 320px; height: 320px;
    background: var(--vn-g-soft);
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    opacity: .6;
}
.vn-auth__panel::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -60px;
    width: 240px; height: 240px;
    background: var(--vn-g-soft);
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    opacity: .5;
}
.vn-auth__card {
    width: 100%;
    max-width: 480px;
    position: relative;
    z-index: 1;
}
.vn-auth__panel--wide .vn-auth__card { max-width: 640px; }

.vn-auth__heading { margin-bottom: 2rem; }
.vn-auth__eyebrow {
    display: inline-block;
    color: var(--vn-g-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    padding: .3rem .8rem;
    background: var(--vn-g-soft);
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
    margin-bottom: 1.1rem;
}
.vn-auth__heading h1 {
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
    letter-spacing: -.035em !important;
    color: var(--vn-ink) !important;
    margin: 0 0 .6rem !important;
    line-height: 1.1 !important;
}
.vn-auth__heading p {
    color: var(--vn-muted) !important;
    font-size: 1rem;
    margin: 0;
    text-align: left !important;
}

.vn-auth__form { display: flex; flex-direction: column; gap: 1.2rem; }

/* Field structure */
.vn-field { display: flex; flex-direction: column; gap: .45rem; }
.vn-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    margin-bottom: 0;
}
.vn-field-help { font-size: .78rem; color: var(--vn-muted); margin: 0; line-height: 1.4; }
.vn-field-error {
    font-size: .78rem;
    color: #B63C3C;
    margin-top: .15rem;
    display: block;
    min-height: 0;
}
.vn-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vn-input-wrap {
    position: relative;
    display: block;
}
.vn-input-wrap .form-control {
    padding: .95rem 1.1rem .95rem 2.85rem !important;
    border-radius: var(--vn-r-sm) !important;
    background: var(--vn-white) !important;
    border: 1.5px solid var(--vn-line) !important;
    color: var(--vn-ink) !important;
    font-size: .98rem;
    height: 52px;
    line-height: 1.2;
    box-shadow: none !important;
}
.vn-input-wrap .form-control:focus {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
}
.vn-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vn-g-primary);
    font-size: 1.05rem;
    pointer-events: none;
}
.vn-input-wrap--select .form-control { appearance: none; padding-right: 2.5rem !important; background-image: none !important; }
.vn-input-wrap--select::after {
    content: '';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    width: 10px; height: 10px;
    border-right: 2px solid var(--vn-g-primary);
    border-bottom: 2px solid var(--vn-g-primary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL: every <select> gets a clear down-chevron on the right
   so users can immediately tell it's a dropdown, not a textbox.
   Applies regardless of whether it's wrapped in vn-input-wrap.
   Skip the rule for selects that are:
     - native multi-select / size>1 (shows a list, not a popup)
     - hidden behind Select2 (it renders its own UI)
     - explicitly opted out via .vn-no-arrow
   ───────────────────────────────────────────────────────────── */
select.form-control:not([multiple]):not([size]):not(.vn-no-arrow):not(.select2-hidden-accessible),
select.form-select:not([multiple]):not([size]):not(.vn-no-arrow):not(.select2-hidden-accessible),
.form-group select:not([multiple]):not([size]):not(.vn-no-arrow):not(.select2-hidden-accessible) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Inline SVG chevron (encoded once, no extra HTTP request).
       stroke colour matches --vn-g-primary (#1E6B34). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E6B34' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,6 8,11 13,6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.95rem center !important;
    background-size: 14px 14px !important;
    padding-right: 2.4rem !important;
    cursor: pointer;
}

/* Hover / focus emphasis for the chevron */
select.form-control:not([multiple]):not([size]):not(.vn-no-arrow):not(.select2-hidden-accessible):hover,
select.form-select:not([multiple]):not([size]):not(.vn-no-arrow):not(.select2-hidden-accessible):hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237FC142' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,6 8,11 13,6'/></svg>") !important;
}

/* Hide the legacy IE / old Edge arrow so we don't show two arrows */
select.form-control::-ms-expand,
select.form-select::-ms-expand,
.form-group select::-ms-expand { display: none; }
.vn-input-toggle {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: .5rem .6rem;
    color: var(--vn-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: color .3s var(--vn-ease), background .3s var(--vn-ease);
}
.vn-input-toggle:hover { color: var(--vn-g-primary); background: var(--vn-g-soft); }

/* Checkbox */
.vn-check {
    display: inline-flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    user-select: none;
    color: var(--vn-ink-2);
    font-size: .92rem;
    line-height: 1.45;
}
.vn-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.vn-check__box {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border: 1.5px solid var(--vn-line-2);
    border-radius: 6px;
    display: inline-block;
    position: relative;
    transition: all .3s var(--vn-ease);
    background: var(--vn-white);
    margin-top: 1px;
}
.vn-check__box::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 11px;
    border: solid var(--vn-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s var(--vn-ease-b);
}
.vn-check input:checked + .vn-check__box {
    background: var(--vn-g-primary);
    border-color: var(--vn-g-primary);
}
.vn-check input:checked + .vn-check__box::after { transform: rotate(45deg) scale(1); }
.vn-check:hover .vn-check__box { border-color: var(--vn-g-accent); }
.vn-check input:focus + .vn-check__box { box-shadow: 0 0 0 3px rgba(127,193,66,.22); }

/* Submit button */
.vn-auth__submit {
    width: 100%;
    justify-content: center;
    padding: 1.05rem 1.8rem !important;
    font-size: .95rem !important;
}

.vn-auth__switch {
    margin: 1.4rem 0 0;
    text-align: center !important;
    color: var(--vn-muted);
    font-size: .9rem;
}
.vn-auth__switch a {
    color: var(--vn-g-primary);
    font-weight: 700;
    margin-left: .35rem;
    position: relative;
}
.vn-auth__switch a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 0; height: 1.5px;
    background: var(--vn-g-accent);
    transition: width .3s var(--vn-ease);
}
.vn-auth__switch a:hover { color: var(--vn-g-accent); }
.vn-auth__switch a:hover::after { width: 100%; }

.vn-link {
    color: var(--vn-g-primary);
    font-weight: 600;
    font-size: .85rem;
    transition: color .3s var(--vn-ease);
}
.vn-link:hover { color: var(--vn-g-accent); }

/* Alerts */
.vn-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--vn-r-sm);
    font-size: .9rem;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
    line-height: 1.4;
}
.vn-alert p { margin: 0; text-align: left !important; }
.vn-alert p + p { margin-top: .35rem; }
.vn-alert--danger { background: #FDEFEF; color: #8B2A2A; border-color: #F5C8C8; }
.vn-alert--success { background: var(--vn-g-soft); color: var(--vn-g-primary); border-color: var(--vn-g-100); }

/* Responsive: stack on small screens */
@media (max-width: 991.98px) {
    .vn-auth { grid-template-columns: 1fr; }
    .vn-auth__brand {
        padding: 6rem 1.5rem 2.5rem;
        min-height: 320px;
    }
    .vn-auth__home-link { top: 1rem; left: 1rem; }
    .vn-auth__logo { margin-top: 1.5rem; }
    .vn-auth__logo img { max-height: 64px; }
    .vn-auth__story { margin: 1.5rem 0 1.25rem; max-width: 100%; }
    .vn-auth__perks { gap: .65rem; max-width: 100%; }
    .vn-auth__perks li { font-size: .88rem; }
    .vn-auth__perks li i { flex: 0 0 34px; width: 34px; height: 34px; font-size: .95rem; }
    .vn-auth__panel { padding: 2.5rem 1.25rem; }
    .vn-auth__card, .vn-auth__panel--wide .vn-auth__card { max-width: 540px; }
    .vn-auth__footnote { display: none; }

    .vn-auth__brand .vn-auth__hero-img {
        width: 200px;
        max-width: 42%;
        right: -8%;
        bottom: -8%;
        opacity: .8;
    }
    .vn-auth__brand .vn-auth__leaf--a { top: 6%;  right: 8%;  width: 48px; height: 48px; }
    .vn-auth__brand .vn-auth__leaf--b { top: auto; bottom: 8%; right: 42%; width: 36px; height: 36px; }
    .vn-auth__brand .vn-auth__leaf--c { display: none; }
}
@media (max-width: 575.98px) {
    .vn-auth__brand .vn-auth__hero-img { display: none; }
    .vn-auth__brand .vn-auth__leaf { opacity: .6; }
}

/* ------------------------------------------------------------
   MOBILE (≤767px): show ONLY the form. The decorative brand
   panel (with logo/story/perks/leaves) is hidden so the user
   lands directly on the login / signup form — nothing else
   above it to scroll past.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .vn-auth-page { background: #FFFFFF; }
    .vn-auth {
        grid-template-columns: 1fr !important;
        min-height: 100vh;
    }
    /* Kill the brand panel completely on phones — no logo, no leaves,
       no perks, no hero image — so the form takes the whole viewport. */
    .vn-auth__brand,
    .vn-auth__brand::before,
    .vn-auth__brand::after,
    .vn-auth__brand .vn-auth__hero-img,
    .vn-auth__brand .vn-auth__leaf,
    .vn-auth__brand .vn-auth__story,
    .vn-auth__brand .vn-auth__perks,
    .vn-auth__brand .vn-auth__footnote,
    .vn-auth__brand .vn-auth__home-link,
    .vn-auth__brand .vn-auth__logo {
        display: none !important;
    }
    /* Form panel takes the full viewport */
    .vn-auth__panel {
        padding: 1.25rem 1rem !important;
        background: #FFFFFF !important;
        min-height: 100vh;
    }
    .vn-auth__panel::before,
    .vn-auth__panel::after { display: none !important; }

    .vn-auth__card,
    .vn-auth__panel--wide .vn-auth__card {
        max-width: 100% !important;
        padding: 1.4rem 1.1rem !important;
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(11,31,16,.06);
    }
    .vn-auth__heading h1 { font-size: 1.45rem; }
    .vn-auth__heading p  { font-size: .9rem; }

    /* Form inputs get a touch-friendly size */
    .vn-auth__form .form-control { padding: .75rem 1rem !important; font-size: 1rem !important; }
    .vn-auth__form .vn-input-wrap > i:first-child { font-size: 1.05rem; }

    /* Buttons span full width on phones for big tap targets */
    .vn-auth__submit,
    .vn-rs-pay-btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------
   22.5 CONTACT PAGE COMPONENTS
   ------------------------------------------------------------- */
.vn-contact-card {
    background: var(--vn-white);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-lg);
    padding: 2.75rem 2.5rem;
    height: 100%;
    box-shadow: 0 18px 50px rgba(11,31,16,.06);
    position: relative;
    overflow: hidden;
    transition: box-shadow .4s var(--vn-ease);
}
.vn-contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vn-g-accent), var(--vn-g-primary));
}
.vn-contact-card h3 {
    font-weight: 700;
    font-size: var(--vn-s-3);
    letter-spacing: -.025em;
    color: var(--vn-ink);
}

.vn-contact-card--dark {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: var(--vn-white);
}
.vn-contact-card--dark::before {
    background: var(--vn-g-accent);
}
.vn-contact-card--dark::after {
    content: '';
    position: absolute;
    right: -80px; bottom: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(127,193,66,.28), transparent 70%);
    pointer-events: none;
    filter: blur(10px);
}
.vn-contact-card--dark h3,
.vn-contact-card--dark h6 { color: var(--vn-white) !important; }
.vn-contact-card--dark p  { color: rgba(255,255,255,.72) !important; }

.vn-contact-list { display: flex; flex-direction: column; gap: 1.4rem; position: relative; z-index: 1; }
.vn-contact-list li {
    display: flex; gap: 1rem;
    align-items: flex-start;
}
.vn-contact-list__icon {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127,193,66,.15);
    color: var(--vn-g-accent);
    font-size: 1.1rem;
    border: 1px solid rgba(127,193,66,.3);
}
.vn-contact-card:not(.vn-contact-card--dark) .vn-contact-list__icon {
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    border-color: var(--vn-line-2);
}
.vn-contact-list__label {
    display: block;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vn-g-accent);
    margin-bottom: .25rem;
}
.vn-contact-card:not(.vn-contact-card--dark) .vn-contact-list__label { color: var(--vn-g-primary); }
.vn-contact-list p { margin: 0; color: rgba(255,255,255,.85) !important; font-size: .95rem; line-height: 1.55; text-align: left !important; }
.vn-contact-card:not(.vn-contact-card--dark) .vn-contact-list p { color: var(--vn-ink-2) !important; }
.vn-contact-list__link {
    color: var(--vn-white) !important;
    font-size: 1.05rem;
    font-weight: 600;
    transition: color .3s var(--vn-ease);
}
.vn-contact-card:not(.vn-contact-card--dark) .vn-contact-list__link { color: var(--vn-ink) !important; }
.vn-contact-list__link:hover { color: var(--vn-g-accent) !important; }

.vn-contact-social {
    display: flex;
    gap: .6rem;
    border-top: 1px solid rgba(255,255,255,.12);
    position: relative; z-index: 1;
}
.vn-contact-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: var(--vn-white) !important;
    font-size: 1rem;
    transition: all .35s var(--vn-ease);
    border: 1px solid rgba(255,255,255,.15);
}
.vn-contact-social a:hover {
    background: var(--vn-g-accent);
    color: var(--vn-ink) !important;
    border-color: var(--vn-g-accent);
    transform: translateY(-3px);
}

.vn-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    margin-bottom: .5rem;
}

.vn-map-wrap {
    margin: 0;
    border-top: 1px solid var(--vn-line);
    border-bottom: 1px solid var(--vn-line);
    overflow: hidden;
    position: relative;
    filter: saturate(.95) contrast(1.02);
}
.vn-map-wrap iframe { display: block; filter: grayscale(.15); }

/* -------------------------------------------------------------
   23. FOOTER — WHITE
   ------------------------------------------------------------- */
footer {
    background: var(--vn-white) !important;
    color: var(--vn-ink) !important;
    padding-top: 5rem !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--vn-line);
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 280px; height: 4px;
    background: var(--vn-g-accent);
    border-radius: 0 0 4px 0;
}
footer .container { position: relative; z-index: 1; }
footer .f-logo { max-height: 78px; filter: drop-shadow(0 6px 20px rgba(30,107,52,.18)); }
footer h3 {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--vn-ink) !important;
    padding-bottom: .75rem;
    margin-bottom: 1.4rem !important;
    position: relative;
}
footer h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 30px; height: 3px;
    background: var(--vn-g-accent);
    border-radius: 2px;
}
footer .nav-link {
    color: var(--vn-ink-2) !important;
    font-weight: 500;
    font-size: .93rem;
    transition: all .35s var(--vn-ease);
    padding: 0 !important;
}
footer .nav-link:hover { color: var(--vn-g-accent) !important; padding-left: .4rem !important; }
footer p { color: var(--vn-ink-2) !important; font-size: .95rem; }
footer .border-theme { border-color: var(--vn-line) !important; }

.social-icon a i {
    width: 44px; height: 44px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    background: var(--vn-white) !important;
    border: 1.5px solid var(--vn-line);
    color: var(--vn-g-primary) !important;
    transition: all .45s var(--vn-ease);
    font-size: 1rem;
    border-radius: 50%;
}
.social-icon a:hover i {
    background: var(--vn-g-accent) !important;
    color: var(--vn-white) !important;
    transform: translateY(-4px) rotate(-6deg);
    border-color: var(--vn-g-accent);
    box-shadow: 0 10px 22px rgba(127,193,66,.4);
}

/* -------------------------------------------------------------
   24. FLOATING: WHATSAPP + BACK TO TOP
   ------------------------------------------------------------- */
.vn-whatsapp-fab {
    position: fixed;
    right: 26px; bottom: 26px;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--vn-whatsapp);
    color: var(--vn-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 14px 34px rgba(37,211,102,.45);
    z-index: 1060;
    transition: transform .45s var(--vn-ease-b);
}
.vn-whatsapp-fab::before,
.vn-whatsapp-fab::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(37,211,102,.55);
    animation: vn-wa-ring 2.4s ease-out infinite;
}
.vn-whatsapp-fab::after { animation-delay: 1.2s; }
.vn-whatsapp-fab:hover { transform: scale(1.12) rotate(-6deg); color: var(--vn-white); }

.vn-whatsapp-label {
    position: absolute;
    right: 78px; top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--vn-ink);
    color: var(--vn-white);
    font-family: var(--vn-font) !important;
    font-size: .75rem;
    font-weight: 600;
    padding: .55rem .85rem;
    border-radius: var(--vn-pill);
    white-space: nowrap;
    box-shadow: var(--vn-sh);
    opacity: 0; pointer-events: none;
    transition: all .4s var(--vn-ease);
}
.vn-whatsapp-label::after {
    content: '';
    position: absolute;
    right: -6px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--vn-ink);
}
.vn-whatsapp-fab:hover .vn-whatsapp-label { opacity: 1; transform: translateY(-50%) translateX(0); }

@keyframes vn-wa-ring {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* Dedicated class — no collision with .theme-btn */
.vn-top-btn,
.top-btn {
    position: fixed !important;
    right: 26px;
    bottom: 104px;
    width: 48px; height: 48px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--vn-white) !important;
    color: var(--vn-g-primary) !important;
    border: 1.5px solid var(--vn-line-2) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(11,31,16,.08), 0 2px 6px rgba(11,31,16,.05) !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.9);
    transition: opacity .4s var(--vn-ease), transform .4s var(--vn-ease), background .4s var(--vn-ease), color .4s var(--vn-ease), border-color .4s var(--vn-ease), box-shadow .4s var(--vn-ease);
    z-index: 1055;
    text-decoration: none;
    isolation: isolate;
}
.vn-top-btn::before,
.vn-top-btn::after,
.top-btn::before,
.top-btn::after { display: none !important; }
.vn-top-btn.vn-show,
.top-btn.vn-show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.vn-top-btn:hover,
.top-btn:hover {
    background: var(--vn-g-primary) !important;
    color: var(--vn-white) !important;
    border-color: var(--vn-g-primary) !important;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 40px rgba(30,107,52,.32) !important;
}
.vn-top-btn i,
.top-btn i { color: inherit !important; font-size: 1.25rem; line-height: 1; display: inline-block; }

/* -------------------------------------------------------------
   25. ANIMATIONS
   ------------------------------------------------------------- */
.vn-reveal       { opacity: 0; transform: translateY(40px); transition: opacity .95s var(--vn-ease), transform .95s var(--vn-ease); }
.vn-reveal.vn-in { opacity: 1; transform: none; }

.vn-float { animation: vn-float 7s var(--vn-ease-io) infinite; }
@keyframes vn-float {
    0%,100% { transform: translateY(0) rotate(0); }
    50%     { transform: translateY(-14px) rotate(-1.5deg); }
}

/* -------------------------------------------------------------
   26. RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--vn-white);
        margin-top: .75rem;
        padding: 1.4rem 1.5rem 1.2rem;
        border-radius: var(--vn-r);
        box-shadow: var(--vn-sh);
        border: 1px solid var(--vn-line);
    }
    .navbar-nav .nav-link::before { display: none; }
    .navbar-nav .nav-link {
        border-bottom: 1px solid var(--vn-line);
        padding: .85rem 0 !important;
        border-radius: 0;
    }
    .navbar-nav .nav-link:hover { padding-left: .35rem !important; }
    .vn-auth-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: .6rem;
        margin: 1.2rem 0 0;
    }
    .vn-auth-group .theme-btn { justify-content: center; }
    .hero-section { padding: 120px 0 60px !important; min-height: auto; }
    .hero-section .row { min-height: auto; }
    .hero-section h2 { font-size: clamp(2.5rem, 10vw, 4.2rem) !important; }
    .hero-section::before { display: none; }
    .vn-hero-canvas { aspect-ratio: 1 / 1; margin-top: 2rem; border-radius: var(--vn-r-lg); }
    .vn-stat-card { right: 10px; top: 70%; min-width: 150px; padding: .8rem 1rem; }
    .vn-stat-card__num { font-size: 1.4rem; }
    .vn-stamp { width: 90px; height: 90px; left: -20px; bottom: -20px; }
    .hero-about h2, .hero-contact h2, .hero-shop h2, .hero-gallery h2 { font-size: clamp(2.8rem, 11vw, 5rem) !important; }
    .vn-marquee-band__track { font-size: var(--vn-s-2); gap: 2rem; }
    .vn-marquee-band__track span { gap: 2rem; }
    .counter-box { border-left: 0; padding-left: 1rem; }
    #testimonialcarousel .carousel-inner { padding: 2.5rem 1.5rem !important; border-radius: var(--vn-r); }
    #testimonialcarousel .carousel-inner::before { font-size: 9rem; top: -.8rem; left: 1rem; }
    .vn-whatsapp-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 1.6rem; }
    .top-btn { right: 16px; bottom: 84px; }
    footer { padding-top: 3.5rem !important; }
    .vn-newsletter { padding: 2rem 1.5rem; border-radius: var(--vn-r); }
}

@media (max-width: 575.98px) {
    .topbar { font-size: .7rem; letter-spacing: .18em; }
    .vn-sticker { font-size: .7rem; padding: .4rem .75rem; }
    section { padding: 3.5rem 0; }
}

/* =============================================================
   28. MEMBER DASHBOARD (sidebar + topbar + stat cards)
   ============================================================= */
:root {
    --vn-dash-side-w: 280px;
    --vn-dash-top-h: 76px;
    --vn-dash-bg: #F5F8F2;
}

body.vn-dash-body {
    background: var(--vn-dash-bg) !important;
    padding-left: var(--vn-dash-side-w);
    padding-top: var(--vn-dash-top-h);
    overflow-x: hidden;
}
body.vn-dash-body::before { display: none; }
body.vn-dash-body .app-content { background: transparent !important; }

/* -------------------------- Sidebar -------------------------- */
.vn-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--vn-dash-side-w);
    background: var(--vn-ink);
    color: #D8E5D8;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.04);
    transition: transform .4s var(--vn-ease);
}
.vn-side::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-g-primary), var(--vn-g-accent));
    z-index: 1;
}
.vn-side::after {
    content: '';
    position: absolute;
    bottom: -140px; right: -140px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(127,193,66,.12), transparent 70%);
    pointer-events: none;
    filter: blur(10px);
}

.vn-side__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    position: relative;
    z-index: 2;
}
.vn-side__brand img {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(127,193,66,.25));
    transition: transform .45s var(--vn-ease);
}
.vn-side__brand:hover img { transform: scale(1.05) rotate(-2deg); }
.vn-side__close {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #D8E5D8;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .3s var(--vn-ease);
}
.vn-side__close:hover { background: var(--vn-g-accent); color: var(--vn-ink); border-color: var(--vn-g-accent); }

.vn-side__user {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.5rem 1.25rem;
    margin: 0 1rem 1rem;
    background: rgba(127,193,66,.08);
    border: 1px solid rgba(127,193,66,.15);
    border-radius: var(--vn-r-sm);
    position: relative;
    z-index: 2;
}
.vn-side__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--vn-g-accent);
    background: #fff;
    padding: 2px;
    flex-shrink: 0;
}
.vn-side__user-info { min-width: 0; flex: 1; }
.vn-side__name {
    margin: 0;
    font-weight: 700;
    font-size: .92rem;
    color: #fff !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-side__id {
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vn-g-accent);
    font-weight: 600;
}

.vn-side__nav {
    padding: 0 .9rem 2rem;
    overflow-y: auto;
    flex: 1;
    position: relative;
    z-index: 2;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.vn-side__nav::-webkit-scrollbar { width: 6px; }
.vn-side__nav::-webkit-scrollbar-track { background: transparent; }
.vn-side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.vn-side__group {
    margin: 1.25rem .75rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(216,229,216,.45);
}
.vn-side__group:first-child { margin-top: 0; }

.vn-side__link,
.vn-side__link:visited {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .85rem;
    color: rgba(216,229,216,.85) !important;
    font-size: .9rem;
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    transition: all .3s var(--vn-ease);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    line-height: 1.25;
    font-family: var(--vn-font) !important;
}
.vn-side__link > i:first-child {
    font-size: 1.08rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    color: var(--vn-g-accent);
    opacity: .85;
}
.vn-side__link > span { flex: 1; min-width: 0; }
.vn-side__link:hover {
    background: rgba(127,193,66,.1);
    color: #fff !important;
}
.vn-side__link:hover > i:first-child { opacity: 1; }

.vn-side__link.active,
.vn-side__link--active {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 0 var(--vn-g-accent), 0 8px 20px rgba(127,193,66,.2) !important;
}
.vn-side__link.active > i:first-child { opacity: 1; color: var(--vn-g-accent) !important; }
.vn-side__link.active:hover { background: var(--vn-g-primary) !important; color: #fff !important; }

/* Collapsible groups using <details> */
.vn-side__group-item {
    list-style: none;
    margin: 0;
}
.vn-side__group-item > summary {
    list-style: none;
    cursor: pointer;
    justify-content: space-between;
}
.vn-side__group-item > summary::-webkit-details-marker { display: none; }
.vn-side__caret {
    font-size: 1rem !important;
    transition: transform .35s var(--vn-ease);
    opacity: .6;
    width: auto !important;
    color: inherit !important;
}
.vn-side__group-item[open] > summary .vn-side__caret { transform: rotate(180deg); }
.vn-side__group-item[open] > summary { background: rgba(127,193,66,.08); color: #fff !important; }

.vn-side__submenu {
    padding: .25rem 0 .25rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.vn-side__sublink {
    display: flex;
    padding: .55rem .8rem;
    color: rgba(216,229,216,.65) !important;
    font-size: .86rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all .3s var(--vn-ease);
    position: relative;
    line-height: 1.3;
    font-family: var(--vn-font) !important;
}
.vn-side__sublink::before {
    content: '';
    position: absolute;
    left: -.75rem; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(127,193,66,.35);
    transition: all .3s var(--vn-ease);
}
.vn-side__sublink:hover {
    background: rgba(127,193,66,.08);
    color: #fff !important;
}
.vn-side__sublink:hover::before { background: var(--vn-g-accent); }
.vn-side__sublink.active {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    font-weight: 700;
}
.vn-side__sublink.active:hover { background: var(--vn-g-primary) !important; color: #fff !important; }
.vn-side__sublink.active::before {
    background: var(--vn-g-accent);
    box-shadow: 0 0 0 3px rgba(127,193,66,.25);
}

.vn-side__logout {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.vn-side__logout form { margin: 0; }
.vn-side__link--logout {
    color: rgba(216,229,216,.8) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .65rem .85rem !important;
}
.vn-side__link--logout > i:first-child { color: #D97979 !important; }
.vn-side__link--logout:hover { background: rgba(217,121,121,.1) !important; color: #fff !important; }

/* Scrim (mobile) */
.vn-side__scrim {
    position: fixed;
    inset: 0;
    background: rgba(11,31,16,.55);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--vn-ease);
}
body.vn-side-open .vn-side__scrim { opacity: 1; pointer-events: auto; }

/* -------------------------- Topbar -------------------------- */
.vn-topbar {
    position: fixed;
    top: 0;
    left: var(--vn-dash-side-w);
    right: 0;
    height: var(--vn-dash-top-h);
    background: #fff;
    border-bottom: 1px solid var(--vn-line);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 1.25rem;
    box-shadow: 0 1px 3px rgba(11,31,16,.03);
}
.vn-topbar__toggle {
    background: var(--vn-g-soft);
    border: 1px solid var(--vn-line-2);
    color: var(--vn-g-primary);
    border-radius: var(--vn-pill);
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all .3s var(--vn-ease);
}
.vn-topbar__toggle:hover { background: var(--vn-g-accent); color: var(--vn-ink); border-color: var(--vn-g-accent); }

.vn-topbar__crumb { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.vn-topbar__hello {
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    font-weight: 700;
}
.vn-topbar__title {
    font-family: var(--vn-font) !important;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--vn-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vn-topbar__actions { display: flex; align-items: center; gap: .75rem; }
.vn-topbar__cta {
    padding: .6rem 1.15rem !important;
    font-size: .82rem !important;
}
.vn-topbar__cta i { font-size: 1rem; }

/* User dropdown */
.vn-topbar__user { position: relative; }
.vn-topbar__user-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--vn-white);
    border: 1.5px solid var(--vn-line);
    color: var(--vn-ink);
    padding: .35rem .9rem .35rem .4rem;
    border-radius: var(--vn-pill);
    cursor: pointer;
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1;
    transition: all .3s var(--vn-ease);
}
.vn-topbar__user-btn:hover { border-color: var(--vn-g-accent); box-shadow: 0 8px 20px rgba(127,193,66,.2); }
.vn-topbar__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--vn-g-accent);
    background: #fff;
    padding: 1px;
}
.vn-topbar__username {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-topbar__user-btn i:last-child { color: var(--vn-muted); transition: transform .3s var(--vn-ease); }
.vn-topbar__user-btn[aria-expanded="true"] i:last-child { transform: rotate(180deg); color: var(--vn-g-primary); }

.vn-topbar__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--vn-white);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-sm);
    box-shadow: 0 22px 60px rgba(11,31,16,.12);
    padding: .5rem;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    transition: all .3s var(--vn-ease);
    z-index: 1040;
}
.vn-topbar__menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.vn-topbar__menu::before {
    content: '';
    position: absolute;
    top: -6px; right: 24px;
    width: 10px; height: 10px;
    background: var(--vn-white);
    border-left: 1px solid var(--vn-line);
    border-top: 1px solid var(--vn-line);
    transform: rotate(45deg);
}
.vn-topbar__menu-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    color: var(--vn-ink) !important;
    font-weight: 500;
    font-size: .9rem;
    border-radius: 8px;
    transition: background .25s var(--vn-ease);
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--vn-font) !important;
    text-decoration: none;
}
.vn-topbar__menu-item i { color: var(--vn-g-primary); font-size: 1.05rem; width: 20px; text-align: center; }
.vn-topbar__menu-item:hover { background: var(--vn-g-soft); color: var(--vn-g-primary) !important; }
.vn-topbar__menu-item--danger { color: #B63C3C !important; }
.vn-topbar__menu-item--danger i { color: #B63C3C !important; }
.vn-topbar__menu-item--danger:hover { background: #FDEFEF; color: #B63C3C !important; }
.vn-topbar__menu-div { height: 1px; background: var(--vn-line); margin: .4rem 0; }
.vn-topbar__menu-form { margin: 0; padding: 0; }

/* -------------------------- Content -------------------------- */
.vn-dash__content {
    min-height: calc(100vh - var(--vn-dash-top-h));
    padding: .85rem 1rem;
    background: var(--vn-dash-bg);
}
.vn-dash__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vn-dash__container > * + * { margin-top: .15rem; }

/* Welcome hero — light background so the Vande Nature logo is visible naturally */
.vn-dash-hero {
    background:
      radial-gradient(closest-side at 88% 20%, rgba(127,193,66,.22), transparent 60%),
      radial-gradient(closest-side at 8% 85%, rgba(47,156,76,.14), transparent 62%),
      linear-gradient(135deg, #FFFFFF 0%, #F4FBEC 55%, #E8F4DD 100%);
    color: var(--vn-ink);
    border-radius: var(--vn-r-lg);
    padding: 1.1rem 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vn-g-100);
    box-shadow: 0 12px 30px rgba(30,107,52,.06);
    isolation: isolate;
}
.vn-dash-hero::after {
    content: '';
    position: absolute;
    right: -90px; bottom: -90px;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 1px dashed rgba(127,193,66,.35);
    pointer-events: none;
    animation: vn-spin 50s linear infinite;
}
.vn-dash-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .04;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.vn-dash-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vn-dash-hero__text { flex: 1; min-width: 280px; max-width: 680px; }
.vn-dash-hero__eyebrow {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    padding: .22rem .7rem;
    background: rgba(127,193,66,.14);
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
    margin-bottom: .2rem;
}
.vn-dash-hero h1 {
    font-family: var(--vn-font) !important;
    color: var(--vn-ink) !important;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em;
    line-height: 1.05 !important;
    margin: .1rem 0 .15rem !important;
}
.vn-dash-hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--vn-g-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--vn-g-primary) !important;
}
.vn-dash-hero p {
    color: var(--vn-ink-2) !important;
    font-size: .9rem;
    line-height: 1.4;
    margin: 0 0 .7rem;
    text-align: left !important;
    max-width: 60ch;
}
.vn-dash-hero__cta { display: flex; gap: .55rem; flex-wrap: wrap; }
.vn-dash-hero__cta .theme-btn { padding: .55rem 1.1rem !important; font-size: .82rem !important; }

.vn-dash-hero__art { flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.vn-dash-hero__art img {
    height: 82px;
    filter: drop-shadow(0 10px 20px rgba(30,107,52,.2));
    animation: vn-float 6s var(--vn-ease-io) infinite;
}

/* Dash section heading */
.vn-dash-section { display: flex; flex-direction: column; gap: .25rem; }
.vn-dash-section__head { line-height: 1.1; padding: .1rem 0 .05rem; }
.vn-dash-section__head h2 {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem) !important;
    color: var(--vn-ink) !important;
    letter-spacing: -.02em;
    margin: 0 !important;
    line-height: 1.1 !important;
}
.vn-dash-section__head p {
    color: var(--vn-muted) !important;
    font-size: .8rem;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.25;
}

/* Stat cards */
.vn-stat {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1.05rem 1.1rem .95rem;
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--vn-ease), box-shadow .4s var(--vn-ease), border-color .3s var(--vn-ease), background .4s var(--vn-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.vn-stat::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 90px; height: 90px;
    background: radial-gradient(closest-side, rgba(127,193,66,.18), transparent 70%);
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
    transition: opacity .4s var(--vn-ease);
}
.vn-stat:hover {
    transform: translateY(-4px);
    border-color: var(--vn-g-accent);
    background: linear-gradient(160deg, var(--vn-g-soft) 0%, #FFFFFF 70%);
    box-shadow: 0 18px 40px rgba(127,193,66,.22);
}
.vn-stat:hover::before { opacity: 1.4; }
.vn-stat:hover .vn-stat__icon {
    background: var(--vn-g-primary);
    color: #fff;
    border-color: var(--vn-g-primary);
}
.vn-stat:hover .vn-stat__value { color: var(--vn-g-primary) !important; }
.vn-stat__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: .3rem;
    position: relative;
    z-index: 1;
    border: 1px solid var(--vn-g-100);
    transition: background .4s var(--vn-ease), color .4s var(--vn-ease), border-color .4s var(--vn-ease);
}
.vn-stat__value { transition: color .4s var(--vn-ease); }
.vn-stat__label {
    color: var(--vn-muted) !important;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 0 !important;
    position: relative; z-index: 1;
    text-align: left !important;
    line-height: 1.2;
}
.vn-stat__value {
    font-family: var(--vn-font) !important;
    font-weight: 800 !important;
    font-size: clamp(1.25rem, 1.7vw, 1.6rem) !important;
    letter-spacing: -.03em;
    color: var(--vn-ink) !important;
    line-height: 1.05 !important;
    margin: .12rem 0 .15rem !important;
    position: relative; z-index: 1;
}
.vn-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--vn-g-primary);
    margin-top: auto;
    position: relative; z-index: 1;
    line-height: 1.2;
}
.vn-stat__trend i { color: var(--vn-g-accent); }
.vn-stat--primary { background: linear-gradient(160deg, var(--vn-g-soft) 0%, #fff 70%); }
.vn-stat--primary .vn-stat__icon { background: var(--vn-g-primary); color: #fff; border-color: var(--vn-g-primary); }
.vn-stat--accent { background: linear-gradient(160deg, var(--vn-ink) 0%, #1A3322 100%); color: #fff; }
.vn-stat--accent::before { background: radial-gradient(closest-side, rgba(127,193,66,.35), transparent 70%); }
.vn-stat--accent .vn-stat__label { color: var(--vn-g-accent) !important; }
.vn-stat--accent .vn-stat__value { color: #fff !important; }
.vn-stat--accent .vn-stat__trend { color: var(--vn-g-accent); }
.vn-stat--accent .vn-stat__icon { background: rgba(127,193,66,.18); color: var(--vn-g-accent); border-color: rgba(127,193,66,.3); }

/* Shortcut cards */
.vn-shortcut {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-decoration: none;
    color: var(--vn-ink) !important;
    transition: transform .4s var(--vn-ease), box-shadow .4s var(--vn-ease), border-color .3s var(--vn-ease), background .4s var(--vn-ease);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.vn-shortcut > i:first-child {
    color: var(--vn-g-primary);
    font-size: 1.25rem;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--vn-g-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .4rem;
    border: 1px solid var(--vn-g-100);
    transition: all .4s var(--vn-ease);
}
.vn-shortcut:hover {
    transform: translateY(-3px);
    border-color: var(--vn-g-accent);
    background: linear-gradient(160deg, var(--vn-g-soft) 0%, #FFFFFF 70%);
    box-shadow: 0 14px 32px rgba(127,193,66,.2);
    color: var(--vn-ink) !important;
}
.vn-shortcut:hover > i:first-child { background: var(--vn-g-primary); color: #fff; border-color: var(--vn-g-primary); transform: rotate(-5deg); }
.vn-shortcut__title {
    font-weight: 700;
    font-size: .97rem;
    color: var(--vn-ink);
    letter-spacing: -.01em;
    line-height: 1.2;
}
.vn-shortcut__desc { color: var(--vn-muted); font-size: .78rem; line-height: 1.3; }

/* Dashboard page-header, sponsor card, form sections, payment chips */
.vn-page-header {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    position: relative;
    overflow: hidden;
}
.vn-page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 180px; height: 3px;
    background: linear-gradient(90deg, var(--vn-g-accent), var(--vn-g-primary));
    border-radius: 0 0 3px 0;
}
.vn-page-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vn-page-header__crumb {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    letter-spacing: .1em;
    color: var(--vn-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.vn-page-header__crumb a {
    color: var(--vn-g-primary);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .3s var(--vn-ease);
}
.vn-page-header__crumb a:hover { color: var(--vn-g-accent); }
.vn-page-header__sep { color: var(--vn-g-accent); }
.vn-page-header__title { display: flex; flex-direction: column; gap: .2rem; }
.vn-page-header__eyebrow {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    padding: .25rem .7rem;
    background: var(--vn-g-soft);
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
    width: fit-content;
    margin-bottom: .35rem;
}
.vn-page-header__title h1 {
    font-family: var(--vn-font) !important;
    font-weight: 800 !important;
    font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
    letter-spacing: -.035em;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    line-height: 1.05 !important;
}
.vn-page-header__title h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--vn-g-primary) !important;
    -webkit-text-fill-color: var(--vn-g-primary) !important;
    background: none !important;
}
.vn-page-header__title p {
    color: var(--vn-muted) !important;
    font-size: .9rem;
    margin: .2rem 0 0 !important;
    text-align: left !important;
    max-width: 70ch;
    line-height: 1.4;
}

/* Sponsor summary card */
.vn-sponsor-card {
    background:
      radial-gradient(closest-side at 95% 0%, rgba(127,193,66,.18), transparent 60%),
      linear-gradient(135deg, #fff 0%, var(--vn-g-soft) 100%);
    border: 1px solid var(--vn-g-100);
    border-radius: var(--vn-r);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.vn-sponsor-card__avatar {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--vn-g-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.vn-sponsor-card__info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .1rem; }
.vn-sponsor-card__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
}
.vn-sponsor-card__name {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.vn-sponsor-card__id { font-size: .82rem; color: var(--vn-muted); }
.vn-sponsor-card__balance {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-sm);
    padding: .6rem .9rem;
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 160px;
}
.vn-sponsor-card__balance-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vn-muted);
}
.vn-sponsor-card__balance-value {
    font-family: var(--vn-font) !important;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--vn-g-primary);
    letter-spacing: -.02em;
}

/* Form card */
.vn-form-card {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.vn-form-section { display: flex; flex-direction: column; gap: .75rem; }
.vn-form-section + .vn-form-section { border-top: 1px dashed var(--vn-line); padding-top: 1.25rem; }
.vn-form-section__head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: .1rem;
}
.vn-form-section__step {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .02em;
    border: 1px solid var(--vn-g-100);
}
.vn-form-section__head h2 {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em;
}
.vn-form-section__head p {
    color: var(--vn-muted) !important;
    font-size: .82rem;
    margin: .1rem 0 0 !important;
    text-align: left !important;
    line-height: 1.35;
}
.vn-form-section--footer {
    border-top: 1px dashed var(--vn-line);
    padding-top: 1.25rem;
    gap: 1rem;
}

.vn-field-sub { color: var(--vn-muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .76em; margin-left: .25rem; }

/* Payment mode chips */
.vn-pay-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
}
.vn-pay-option { cursor: pointer; display: block; margin: 0; }
.vn-pay-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.vn-pay-option__box {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--vn-line);
    border-radius: var(--vn-r-sm);
    background: #fff;
    transition: all .35s var(--vn-ease);
    position: relative;
}
.vn-pay-option:hover .vn-pay-option__box { border-color: var(--vn-g-accent); box-shadow: 0 10px 24px rgba(127,193,66,.16); }
.vn-pay-option input:checked ~ .vn-pay-option__box {
    border-color: var(--vn-g-primary);
    background: linear-gradient(160deg, var(--vn-g-soft) 0%, #fff 70%);
    box-shadow: 0 14px 30px rgba(30,107,52,.14);
}
.vn-pay-option__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 1px solid var(--vn-g-100);
    flex-shrink: 0;
    transition: all .35s var(--vn-ease);
}
.vn-pay-option input:checked ~ .vn-pay-option__box .vn-pay-option__icon {
    background: var(--vn-g-primary);
    color: #fff;
    border-color: var(--vn-g-primary);
}
.vn-pay-option__body { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.vn-pay-option__title {
    font-weight: 700;
    font-size: .98rem;
    color: var(--vn-ink);
}
.vn-pay-option__desc { color: var(--vn-muted); font-size: .82rem; line-height: 1.35; }
.vn-pay-option__tick {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--vn-line-2);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all .3s var(--vn-ease);
    flex-shrink: 0;
}
.vn-pay-option input:checked ~ .vn-pay-option__box .vn-pay-option__tick {
    background: var(--vn-g-primary);
    border-color: var(--vn-g-primary);
    color: #fff;
}

.vn-form-footer {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.vn-form-footer .theme-btn { padding: .9rem 1.5rem !important; }
@media (max-width: 575.98px) {
    .vn-form-footer { justify-content: stretch; }
    .vn-form-footer .theme-btn { flex: 1; justify-content: center; }
}

/* Dashboard responsive */
@media (max-width: 1199.98px) {
    body.vn-dash-body { padding-left: 0; }
    .vn-side {
        transform: translateX(-100%);
        box-shadow: 12px 0 60px rgba(11,31,16,.3);
    }
    body.vn-side-open .vn-side { transform: translateX(0); }
    .vn-topbar { left: 0; padding: 0 1.25rem; }
}
@media (max-width: 767.98px) {
    .vn-topbar { gap: .5rem; padding: 0 1rem; height: 64px; }
    :root { --vn-dash-top-h: 64px; }
    .vn-topbar__cta span { display: none; }
    .vn-topbar__cta { padding: .55rem .75rem !important; }
    .vn-topbar__cta i { font-size: 1.05rem; }
    .vn-topbar__username { display: none; }
    .vn-topbar__crumb { display: none; }
    .vn-dash__content { padding: 1.25rem; }
    .vn-dash-hero { padding: 2rem 1.5rem; border-radius: var(--vn-r); }
    .vn-dash-hero__art { display: none; }
    .vn-dash__container { gap: 1.5rem; }
}
@media (max-width: 575.98px) {
    .vn-topbar__user-btn { padding: .35rem; }
    .vn-topbar__user-btn i:last-child { display: none; }
    .vn-dash-hero__cta { flex-direction: column; align-items: stretch; }
    .vn-dash-hero__cta .theme-btn { justify-content: center; }
}

/* =============================================================
   28.4 UNIVERSAL ADMIN-TEMPLATE OVERRIDES
   Any member-area page using the original admin template
   (.app-content, .content-wrapper, .card, .breadcrumb-new, etc.)
   inherits the new dashboard chrome automatically via these rules.
   ============================================================= */
body.vn-dash-body .app-content,
body.vn-dash-body .content,
body.vn-dash-body .content-wrapper {
    background: transparent !important;
    padding: 1rem !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.vn-dash-body .content-body { padding: 0 !important; }

/* Page header strip (admin template) */
body.vn-dash-body .content-header-title {
    font-family: var(--vn-font) !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    letter-spacing: -.03em;
    color: var(--vn-ink) !important;
    margin-bottom: .25rem !important;
}
body.vn-dash-body .breadcrumb-new,
body.vn-dash-body .content-header {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1rem 1.25rem !important;
    margin-bottom: .15rem !important;
    position: relative;
    overflow: hidden;
}
body.vn-dash-body .content-body > * + * { margin-top: .15rem; }
body.vn-dash-body .breadcrumb-new::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 180px; height: 3px;
    background: linear-gradient(90deg, var(--vn-g-accent), var(--vn-g-primary));
    border-radius: 0 0 3px 0;
}
body.vn-dash-body .breadcrumbs-top { margin-top: .25rem; }
body.vn-dash-body .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    gap: .35rem;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vn-muted);
    font-weight: 600;
}
body.vn-dash-body .breadcrumb-item a {
    color: var(--vn-g-primary) !important;
    text-decoration: none;
}
body.vn-dash-body .breadcrumb-item a:hover { color: var(--vn-g-accent) !important; }
body.vn-dash-body .breadcrumb-item.active a,
body.vn-dash-body .breadcrumb-item.active { color: var(--vn-ink) !important; }
body.vn-dash-body .breadcrumb-item + .breadcrumb-item::before {
    content: '/' !important;
    color: var(--vn-g-accent) !important;
    padding: 0 .25rem;
    font-weight: 700;
}

/* Cards */
body.vn-dash-body .card {
    background: #fff !important;
    border: 1px solid var(--vn-line) !important;
    border-radius: var(--vn-r) !important;
    box-shadow: 0 4px 14px rgba(14,37,20,.04) !important;
    margin-bottom: .35rem !important;
}

/* =============================================================
   AGGRESSIVE COMPACT MODE for every admin/member page
   Goal: zero "wasted" vertical space between blocks. Minimum
   spacing everywhere — cards, sections, forms, grids — so a
   typical admin page fits much more above the fold.
   ============================================================= */
body.vn-dash-body .app-content,
body.vn-dash-body .content,
body.vn-dash-body .content-wrapper { padding: .65rem .85rem !important; }
body.vn-dash-body .content-body { padding: 0 !important; }

/* Stack everything in content-body with a tiny consistent gap */
body.vn-dash-body .content-body > * { margin: 0 0 .35rem 0 !important; }
body.vn-dash-body .content-body > *:last-child { margin-bottom: 0 !important; }

/* Sections collapse to nothing (their inner card holds the padding) */
body.vn-dash-body .content-body section,
body.vn-dash-body section[id="form-control-repeater"],
body.vn-dash-body section[id="initialization"] {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
body.vn-dash-body .content-body section + section { margin-top: 0 !important; }
body.vn-dash-body .content-body section > .row { margin: 0 !important; }
body.vn-dash-body .content-body section > .row + .row { margin-top: .35rem !important; }

/* Hidden rows (display:none) take zero space */
body.vn-dash-body .content-body [style*="display:none"],
body.vn-dash-body .content-body [style*="display: none"] { display: none !important; }

/* Cards — tight, almost adjacent */
body.vn-dash-body .card { margin-bottom: .35rem !important; }
body.vn-dash-body .card-header { padding: .55rem .9rem !important; }
body.vn-dash-body .card-body,
body.vn-dash-body .card-content,
body.vn-dash-body .card-dashboard { padding: .65rem .9rem !important; }
body.vn-dash-body .card .card { box-shadow: none !important; border: 0 !important; }

/* Form rows / form groups — minimal vertical stride */
body.vn-dash-body form.row,
body.vn-dash-body form .row { row-gap: .4rem !important; --bs-gutter-y: .4rem !important; }
body.vn-dash-body .form-group,
body.vn-dash-body form > div { margin-bottom: .35rem !important; }
body.vn-dash-body .form-group.mb-2 { margin-bottom: .35rem !important; }
body.vn-dash-body .form-group.mb-3 { margin-bottom: .5rem !important; }
body.vn-dash-body .form-group label,
body.vn-dash-body .form-group .form-label,
body.vn-dash-body form label { margin-bottom: .15rem !important; padding-bottom: 0 !important; font-size: .82rem; }
body.vn-dash-body .form-group .help-text { margin-top: .15rem !important; line-height: 1.2; }

/* Buttons inside the body — collapse Bootstrap mb-* spacing */
body.vn-dash-body .content-body .btn { margin: 0 !important; }
body.vn-dash-body .content-body > .btn,
body.vn-dash-body .content-body > button.btn { align-self: flex-start; display: inline-flex; }
body.vn-dash-body .content-body .btn.mb-1 { margin-bottom: .15rem !important; }
body.vn-dash-body .content-body .btn.mb-2 { margin-bottom: .25rem !important; }
body.vn-dash-body .content-body .btn.mb-3,
body.vn-dash-body .content-body .btn.mb-4,
body.vn-dash-body .content-body .btn.mb-5 { margin-bottom: .35rem !important; }

/* Alerts — tight */
body.vn-dash-body .alert { margin-bottom: .35rem !important; padding: .55rem .85rem !important; }

/* DataTables wrapper inside admin cards — kill its own outer spacing */
body.vn-dash-body .dataTables_wrapper { margin: 0 !important; }
body.vn-dash-body .vn-dt-top { margin-bottom: .4rem !important; }
body.vn-dash-body .vn-dt-foot { margin-top: .4rem !important; }
body.vn-dash-body table.dataTable { margin: .15rem 0 !important; }

/* Bootstrap utility overrides that admin pages use heavily */
body.vn-dash-body .pt-3,
body.vn-dash-body .pt-4,
body.vn-dash-body .pt-5 { padding-top: .5rem !important; }
body.vn-dash-body .pb-3,
body.vn-dash-body .pb-4,
body.vn-dash-body .pb-5 { padding-bottom: .5rem !important; }
body.vn-dash-body .py-3,
body.vn-dash-body .py-4,
body.vn-dash-body .py-5 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
body.vn-dash-body .mt-3,
body.vn-dash-body .mt-4,
body.vn-dash-body .mt-5 { margin-top: .35rem !important; }
body.vn-dash-body .my-3,
body.vn-dash-body .my-4,
body.vn-dash-body .my-5 { margin-top: .35rem !important; margin-bottom: .35rem !important; }
body.vn-dash-body .row + .row { margin-top: .35rem !important; }

/* Modal bodies — they appear over the page so spacing is fine,
   but inputs and buttons inside should be tight too */
body.vn-dash-body .modal-body { padding: .85rem 1rem !important; }
body.vn-dash-body .modal-body .form-group { margin-bottom: .35rem !important; }

/* New-theme containers (.vn-form-card / .vn-page-header / .vn-stat etc.)
   keep their own spacing — those rules already win over these. */
body.vn-dash-body .card-header {
    background: var(--vn-g-soft) !important;
    border-bottom: 1px solid var(--vn-g-100) !important;
    padding: .9rem 1.15rem !important;
    border-top-left-radius: var(--vn-r) !important;
    border-top-right-radius: var(--vn-r) !important;
}
body.vn-dash-body .card-title {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    letter-spacing: -.015em;
}
body.vn-dash-body .card-body,
body.vn-dash-body .card-content { padding: 1rem 1.15rem !important; }
body.vn-dash-body .card-dashboard { padding: 1rem !important; }

/* Tables inside member area */
body.vn-dash-body .table,
body.vn-dash-body table.dataex-colvis-basic,
body.vn-dash-body table.table-bordered,
body.vn-dash-body table.table-striped {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    border: 0 !important;
    font-family: var(--vn-font) !important;
    font-size: .9rem;
    width: 100%;
}
body.vn-dash-body .table thead th,
body.vn-dash-body table.dataex-colvis-basic thead th {
    background: var(--vn-g-soft) !important;
    color: var(--vn-g-primary) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    padding: .7rem .85rem !important;
    border: 1px solid var(--vn-g-100) !important;
    white-space: nowrap;
}
body.vn-dash-body .table thead th:first-child,
body.vn-dash-body table.dataex-colvis-basic thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.vn-dash-body .table thead th:last-child,
body.vn-dash-body table.dataex-colvis-basic thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.vn-dash-body .table tbody td,
body.vn-dash-body table.dataex-colvis-basic tbody td {
    background: #fff !important;
    color: var(--vn-ink) !important;
    border: 1px solid var(--vn-line) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: .7rem .85rem !important;
    vertical-align: middle !important;
}
body.vn-dash-body .table tbody tr td:first-child { border-left: 1px solid var(--vn-line) !important; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.vn-dash-body .table tbody tr td:last-child  { border-right: 1px solid var(--vn-line) !important; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.vn-dash-body .table tbody tr:hover td { background: var(--vn-g-soft) !important; }
body.vn-dash-body .table-striped > tbody > tr:nth-of-type(odd) > td { background: #fff !important; }
body.vn-dash-body .table-striped > tbody > tr:nth-of-type(odd):hover > td { background: var(--vn-g-soft) !important; }

/* Form controls inside member area */
body.vn-dash-body .form-control:not(.vn-no-restyle),
body.vn-dash-body .form-select:not(.vn-no-restyle) {
    border: 1.5px solid var(--vn-line) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: .7rem 1rem !important;
    background-color: #fff !important;
    color: var(--vn-ink) !important;
    font-family: var(--vn-font) !important;
    font-size: .92rem !important;
    box-shadow: none !important;
    transition: border-color .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
}
/* keep chevron visible on dashboard <select> by leaving background-image alone */
body.vn-dash-body select.form-control:not(.vn-no-restyle):not([multiple]):not([size]),
body.vn-dash-body select.form-select:not(.vn-no-restyle):not([multiple]):not([size]) {
    padding-right: 2.4rem !important;
}
body.vn-dash-body .form-control:not(.vn-no-restyle):focus,
body.vn-dash-body .form-select:not(.vn-no-restyle):focus {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
}
body.vn-dash-body label,
body.vn-dash-body .form-label {
    font-family: var(--vn-font) !important;
    font-weight: 600;
    color: var(--vn-ink);
    font-size: .85rem;
    margin-bottom: .3rem;
}
body.vn-dash-body label b { font-weight: 700; }
body.vn-dash-body .help-text {
    font-size: .78rem;
    color: var(--vn-muted);
    margin-top: .25rem;
}

/* Buttons inside member area */
body.vn-dash-body .btn-primary,
body.vn-dash-body .btn-login,
body.vn-dash-body .btn-info,
body.vn-dash-body .btn-success {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    border: 1.5px solid var(--vn-g-primary) !important;
    border-radius: var(--vn-pill) !important;
    padding: .65rem 1.35rem !important;
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    letter-spacing: 0;
    transition: all .35s var(--vn-ease);
}
body.vn-dash-body .btn-primary:hover,
body.vn-dash-body .btn-login:hover,
body.vn-dash-body .btn-info:hover,
body.vn-dash-body .btn-success:hover {
    background: var(--vn-ink) !important;
    border-color: var(--vn-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11,31,16,.22);
}
body.vn-dash-body .btn-danger {
    background: #B84A4A !important;
    border-color: #B84A4A !important;
    color: #fff !important;
    border-radius: var(--vn-pill) !important;
    padding: .55rem 1.2rem !important;
    font-family: var(--vn-font) !important;
    font-weight: 600;
}
body.vn-dash-body .btn-danger:hover { background: #7A2A2A !important; border-color: #7A2A2A !important; }
body.vn-dash-body .btn-secondary,
body.vn-dash-body .btn-outline-primary,
body.vn-dash-body .vn-form-cancel {
    background: transparent !important;
    color: var(--vn-ink) !important;
    border: 1.5px solid var(--vn-line-2) !important;
    border-radius: var(--vn-pill) !important;
    padding: .55rem 1.2rem !important;
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    transition: all .3s var(--vn-ease);
}
body.vn-dash-body .btn-secondary:hover,
body.vn-dash-body .btn-outline-primary:hover,
body.vn-dash-body .vn-form-cancel:hover {
    background: var(--vn-g-soft) !important;
    color: var(--vn-g-primary) !important;
    border-color: var(--vn-g-accent) !important;
}

/* Alerts */
body.vn-dash-body .alert {
    border: 1px solid transparent;
    border-radius: var(--vn-r-sm);
    padding: .85rem 1.1rem;
    font-family: var(--vn-font) !important;
    font-size: .9rem;
    margin-bottom: .75rem;
}
body.vn-dash-body .alert-success { background: var(--vn-g-soft); color: var(--vn-g-primary); border-color: var(--vn-g-100); }
body.vn-dash-body .alert-danger  { background: #FDEFEF; color: #8B2A2A; border-color: #F5C8C8; }
body.vn-dash-body .alert-warning { background: #FFF8E1; color: #8B6A1D; border-color: #FCE0A0; }
body.vn-dash-body .alert-info    { background: var(--vn-g-soft); color: var(--vn-g-primary); border-color: var(--vn-g-100); }

/* Headings inside member content */
body.vn-dash-body h1, body.vn-dash-body h2, body.vn-dash-body h3,
body.vn-dash-body h4, body.vn-dash-body h5, body.vn-dash-body h6 {
    font-family: var(--vn-font) !important;
    color: var(--vn-ink) !important;
    letter-spacing: -.015em;
}

/* Misc: DataTables styling that appears in some pages */
body.vn-dash-body .dataTables_wrapper .dataTables_length,
body.vn-dash-body .dataTables_wrapper .dataTables_filter,
body.vn-dash-body .dataTables_wrapper .dataTables_info,
body.vn-dash-body .dataTables_wrapper .dataTables_paginate { margin: .4rem 0 !important; }
body.vn-dash-body .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important;
    border: 1px solid var(--vn-line) !important;
    color: var(--vn-ink) !important;
    border-radius: 6px;
    padding: .25rem .6rem !important;
    margin: 0 2px;
    font-family: var(--vn-font) !important;
}
body.vn-dash-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    border-color: var(--vn-g-primary) !important;
}

/* Groups like badges / pills / chips in admin pages */
body.vn-dash-body .badge {
    font-family: var(--vn-font) !important;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .4em .75em;
    border-radius: var(--vn-pill);
}
body.vn-dash-body .badge.bg-success, body.vn-dash-body .badge-success { background: var(--vn-g-primary) !important; color: #fff !important; }

/* =============================================================
   28.5 ORDER NOW / CATALOG
   ============================================================= */
.vn-page-header__actions { display: inline-flex; gap: .45rem; flex-wrap: wrap; }
.vn-page-header__actions .theme-btn { padding: .5rem 1rem !important; font-size: .8rem !important; }

/* Toolbar (search + category + view toggle) */
.vn-catalog-toolbar {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: .65rem .75rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}
.vn-catalog-toolbar__search {
    position: relative;
    flex: 1 1 260px;
    min-width: 240px;
}
.vn-catalog-toolbar__search i {
    position: absolute;
    left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--vn-g-primary);
    font-size: 1.05rem;
    pointer-events: none;
}
.vn-catalog-toolbar__search input {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.7rem;
    background: var(--vn-g-soft);
    border: 1.5px solid var(--vn-g-soft);
    border-radius: var(--vn-pill);
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-size: .92rem;
    transition: border-color .3s var(--vn-ease), background .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
    outline: 0;
}
.vn-catalog-toolbar__search input::placeholder { color: var(--vn-muted); }
.vn-catalog-toolbar__search input:focus {
    border-color: var(--vn-g-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18);
}

.vn-catalog-toolbar__filter { flex: 0 0 240px; min-width: 200px; }

/* Match select2 height to toolbar */
.vn-catalog-toolbar .select2-container--default .select2-selection--single {
    height: 44px !important;
    padding: 0 1rem !important;
    border-radius: var(--vn-pill) !important;
    background: var(--vn-g-soft) !important;
    border: 1.5px solid var(--vn-g-soft) !important;
}
.vn-catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }

/* View toggle */
.vn-catalog-toolbar__view {
    display: inline-flex;
    background: var(--vn-g-soft);
    border: 1px solid var(--vn-g-soft);
    border-radius: var(--vn-pill);
    padding: 3px;
    gap: 3px;
}
.vn-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: var(--vn-pill);
    background: transparent;
    border: 0;
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: all .3s var(--vn-ease);
    line-height: 1;
}
.vn-view-btn i { font-size: .95rem; }
.vn-view-btn:hover { color: var(--vn-g-primary); }
.vn-view-btn.is-active {
    background: var(--vn-g-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(30,107,52,.25);
}

/* Catalog grid */
.vn-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .65rem;
}

/* Product card — image-forward layout */
.vn-product {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--vn-ease), box-shadow .4s var(--vn-ease), border-color .3s var(--vn-ease);
    position: relative;
    overflow: hidden;
}
.vn-product:hover {
    transform: translateY(-4px);
    border-color: var(--vn-g-accent);
    box-shadow: 0 18px 40px rgba(127,193,66,.2);
}

.vn-product__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--vn-g-soft);
    overflow: hidden;
    border-bottom: 1px solid var(--vn-g-100);
}
.vn-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--vn-ease);
}
.vn-product:hover .vn-product__media img { transform: scale(1.05); }
.vn-product__cat {
    position: absolute;
    top: .55rem; left: .55rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    padding: .22rem .55rem;
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
}

.vn-product__body {
    padding: .75rem .85rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}
.vn-product__code {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--vn-muted);
}
.vn-product__name {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.vn-product__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--vn-line);
    margin-top: auto;
}
.vn-product__price-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.vn-product__price-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-muted);
}
.vn-product__price {
    font-family: var(--vn-font) !important;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--vn-g-primary);
    letter-spacing: -.02em;
    line-height: 1.05;
}
.vn-product__reward {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 700;
    color: #8B6A1D;
    background: rgba(201,164,74,.15);
    padding: .22rem .5rem;
    border-radius: var(--vn-pill);
    border: 1px solid rgba(201,164,74,.3);
    white-space: nowrap;
}
.vn-product__reward i { color: #C9A44A; }

.vn-product__cta {
    width: calc(100% - 1.7rem) !important;
    justify-content: center;
    padding: .6rem 1rem !important;
    font-size: .82rem !important;
    margin: 0 .85rem .85rem !important;
}

/* View Cart button + badge */
.theme-btn.vn-cart-btn {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    border-color: var(--vn-g-primary) !important;
    position: relative;
    padding-right: 1.25rem !important;
}
.vn-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--vn-g-primary);
    font-weight: 800;
    font-size: .7rem;
    margin-left: .25rem;
    border: 2px solid var(--vn-g-primary);
    line-height: 1;
}

/* Table: thumbnail inside rows */
.vn-row-item { display: inline-flex; align-items: center; gap: .6rem; }
.vn-row-thumb {
    width: 38px; height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--vn-line);
    background: var(--vn-g-soft);
    flex-shrink: 0;
}

/* Toast (add-to-cart confirmation) */
.vn-toast {
    position: fixed;
    right: 22px;
    bottom: 180px;
    z-index: 1070;
    background: var(--vn-ink);
    color: #fff;
    padding: .8rem 1.1rem;
    border-radius: var(--vn-pill);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 18px 40px rgba(11,31,16,.3);
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .88rem;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s var(--vn-ease), transform .3s var(--vn-ease);
    max-width: 320px;
}
.vn-toast.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.vn-toast i { color: var(--vn-g-accent); font-size: 1.15rem; }
.vn-toast--error { background: #6B2424; }
.vn-toast--error i { color: #FCA5A5; }

/* Spin animation for loading indicator */
.vn-spin { animation: vn-spin 1.1s linear infinite; display: inline-block; }

/* Empty state */
.vn-catalog-empty {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px dashed var(--vn-line-2);
    border-radius: var(--vn-r);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--vn-muted);
}
.vn-catalog-empty i {
    font-size: 3rem;
    color: var(--vn-g-primary);
    opacity: .55;
    margin-bottom: .5rem;
    display: inline-block;
}
.vn-catalog-empty h3 { color: var(--vn-ink); font-weight: 700; margin-bottom: .25rem; font-size: 1.15rem; }
.vn-catalog-empty p { color: var(--vn-muted); margin: 0; text-align: center !important; }

/* Table view */
.vn-catalog-table { background: #fff; border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: .6rem; }
.vn-table-wrap { overflow-x: auto; }
.vn-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-family: var(--vn-font) !important;
    font-size: .88rem;
}
.vn-table thead th {
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--vn-g-100);
    border-top: 1px solid var(--vn-g-100);
    white-space: nowrap;
}
.vn-table thead th:first-child { border-left: 1px solid var(--vn-g-100); border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.vn-table thead th:last-child  { border-right: 1px solid var(--vn-g-100); border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.vn-table tbody td {
    padding: .7rem .85rem;
    background: #fff;
    border-top: 1px solid var(--vn-line);
    border-bottom: 1px solid var(--vn-line);
    color: var(--vn-ink);
    vertical-align: middle;
}
.vn-table tbody tr { transition: background .3s var(--vn-ease); }
.vn-table tbody tr:hover td { background: var(--vn-g-soft); }
.vn-table tbody td:first-child { border-left: 1px solid var(--vn-line); border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: var(--vn-muted); font-size: .82rem; font-weight: 600; }
.vn-table tbody td:last-child  { border-right: 1px solid var(--vn-line); border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* Small pills used inside the table */
.vn-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: .75rem;
    font-weight: 700;
    color: var(--vn-g-primary);
    background: var(--vn-g-soft);
    border: 1px solid var(--vn-g-100);
    letter-spacing: .02em;
}
.vn-pill--muted {
    background: #F2F5F0;
    color: var(--vn-ink-2);
    border-color: var(--vn-line);
    font-family: var(--vn-font) !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .65rem;
}
.vn-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: var(--vn-pill);
    background: rgba(201,164,74,.15);
    border: 1px solid rgba(201,164,74,.35);
    color: #8B6A1D;
    font-weight: 700;
    font-size: .78rem;
}
.theme-btn--sm {
    padding: .45rem .85rem !important;
    font-size: .78rem !important;
}

@media (max-width: 767.98px) {
    .vn-catalog-toolbar { padding: .55rem; gap: .5rem; }
    .vn-catalog-toolbar__search, .vn-catalog-toolbar__filter { flex: 1 1 100%; min-width: 0; }
    .vn-view-btn span { display: none; }
    .vn-page-header__actions .theme-btn span { display: none; }
    .vn-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* =============================================================
   28.6 CART PAGE
   ============================================================= */
.vn-cart-empty {
    background: #fff;
    border: 1px dashed var(--vn-line-2);
    border-radius: var(--vn-r);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--vn-muted);
}
.vn-cart-empty img { max-height: 160px; margin-bottom: 1rem; opacity: .9; }
.vn-cart-empty h3 { color: var(--vn-ink); font-weight: 700; font-size: 1.25rem; margin-bottom: .35rem; }
.vn-cart-empty p { color: var(--vn-muted); margin: 0 auto 1.25rem; max-width: 46ch; text-align: center !important; }

.vn-cart-card {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    overflow: hidden;
}
.vn-cart-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--vn-line);
    background: var(--vn-g-soft);
}
.vn-cart-card__head h2 {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.vn-cart-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 999px;
    background: var(--vn-g-primary);
    color: #fff;
    font-weight: 800;
    font-size: .75rem;
}
.vn-cart-clear {
    background: transparent;
    border: 1px solid var(--vn-line-2);
    color: var(--vn-ink-2);
    padding: .4rem .85rem;
    border-radius: var(--vn-pill);
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
    transition: all .3s var(--vn-ease);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.vn-cart-clear:hover { background: #FDEFEF; color: #B63C3C; border-color: #F5C8C8; }

.vn-cart-list { list-style: none; padding: 0; margin: 0; }
.vn-cart-item {
    display: grid;
    grid-template-columns: 52px 1fr auto auto 34px;
    gap: .85rem;
    align-items: center;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--vn-line);
}
.vn-cart-item:last-child { border-bottom: 0; }
.vn-cart-item__thumb {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid var(--vn-g-100);
}
.vn-cart-item__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.vn-cart-item__name {
    font-family: var(--vn-font) !important;
    font-weight: 700;
    font-size: .95rem;
    color: var(--vn-ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-cart-item__price { color: var(--vn-muted); font-size: .8rem; }
.vn-cart-item__pricelabel {
    background: #E8F4DD;
    color: #1E6B34;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .05rem .35rem;
    border-radius: 4px;
    margin-left: .3rem;
}
.vn-cart-item__sub {
    color: var(--vn-muted);
    font-size: .72rem;
    margin-top: .1rem;
}
.vn-cart-item__sub small {
    color: #1E6B34;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .62rem;
}
.vn-cart-item__total {
    font-family: var(--vn-font) !important;
    font-weight: 800;
    color: var(--vn-g-primary);
    font-size: 1.05rem;
    letter-spacing: -.02em;
    min-width: 90px;
    text-align: right;
}
.vn-cart-item__remove {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--vn-line-2);
    background: #fff;
    color: var(--vn-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s var(--vn-ease);
}
.vn-cart-item__remove:hover { background: #FDEFEF; color: #B63C3C; border-color: #F5C8C8; }

/* Qty control */
.vn-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--vn-line);
    border-radius: var(--vn-pill);
    padding: 2px;
    background: #fff;
}
.vn-qty__btn {
    width: 28px; height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s var(--vn-ease);
    line-height: 1;
}
.vn-qty__btn:hover { background: var(--vn-g-primary); color: #fff; }
.vn-qty__input {
    width: 40px;
    border: 0;
    text-align: center;
    font-family: var(--vn-font) !important;
    font-weight: 700;
    color: var(--vn-ink);
    background: transparent;
    outline: 0;
    font-size: .9rem;
    -moz-appearance: textfield;
}
.vn-qty__input::-webkit-inner-spin-button,
.vn-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Summary card */
.vn-cart-summary {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: 1.15rem;
    position: sticky;
    top: calc(var(--vn-dash-top-h) + .75rem);
}
.vn-cart-summary__title {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--vn-ink) !important;
    margin: 0 0 .75rem !important;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--vn-line);
}
.vn-cart-summary__rows { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.vn-cart-summary__rows > div {
    display: flex; align-items: center; justify-content: space-between;
    padding: .2rem 0;
    gap: .75rem;
}
.vn-cart-summary__rows dt, .vn-cart-summary__rows dd {
    margin: 0; padding: 0;
    font-family: var(--vn-font) !important;
    font-size: .85rem;
    color: var(--vn-ink-2);
    font-weight: 500;
}
.vn-cart-summary__rows dd { font-weight: 600; color: var(--vn-ink); }
.vn-cart-summary__strong dt, .vn-cart-summary__strong dd { font-weight: 700 !important; }
.vn-cart-summary__wallet { color: #B84A4A !important; font-weight: 700 !important; }

.vn-cart-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    margin: .7rem 0;
    background: var(--vn-g-primary);
    color: #fff;
    border-radius: var(--vn-r-sm);
}
.vn-cart-summary__total span { color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.vn-cart-summary__total strong {
    font-family: var(--vn-font) !important;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    color: #fff;
}

.vn-cart-checkout { display: flex; flex-direction: column; gap: .75rem; }
.vn-cart-checkout .vn-textarea { min-height: 78px; resize: vertical; padding: .7rem 1rem .7rem 2.85rem !important; }

.vn-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.vn-delivery__opt { cursor: pointer; margin: 0; }
.vn-delivery__opt input { position: absolute; opacity: 0; pointer-events: none; }
.vn-delivery__opt span {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .55rem .5rem;
    border: 1.5px solid var(--vn-line);
    border-radius: var(--vn-r-sm);
    background: #fff;
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .85rem;
    transition: all .3s var(--vn-ease);
}
.vn-delivery__opt:hover span { border-color: var(--vn-g-accent); color: var(--vn-g-primary); }
.vn-delivery__opt input:checked + span {
    background: var(--vn-g-soft);
    border-color: var(--vn-g-primary);
    color: var(--vn-g-primary);
}
.vn-delivery__opt i { color: var(--vn-g-primary); }

.vn-cart-checkout__btn { width: 100%; justify-content: center; padding: 1rem 1.5rem !important; margin-top: .25rem; }

@media (max-width: 767.98px) {
    .vn-cart-item { grid-template-columns: 44px 1fr auto 30px; gap: .6rem; padding: .75rem .9rem; }
    .vn-cart-item__thumb { width: 44px; height: 44px; font-size: 1.2rem; }
    .vn-cart-item__total { grid-column: 1 / -1; text-align: left; min-width: 0; padding-left: 3.4rem; }
    .vn-cart-summary { position: static; }
}

/* =============================================================
   29. SELECT2 — match theme, match .form-control shape
   ============================================================= */
.select2-container--default .select2-selection--single {
    height: 52px !important;
    background: var(--vn-white) !important;
    border: 1.5px solid var(--vn-line) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: 0 1.1rem 0 1.1rem !important;
    display: flex;
    align-items: center;
    transition: border-color .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
    font-family: var(--vn-font) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    color: var(--vn-ink) !important;
    font-family: var(--vn-font) !important;
    font-size: .98rem;
    line-height: 1.2 !important;
    width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--vn-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    right: .8rem !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--vn-g-primary) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-top: 0 !important;
    margin-left: -5px !important;
    transition: transform .3s var(--vn-ease);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
    outline: 0 !important;
}

/* Dropdown panel */
.select2-container--default .select2-dropdown {
    background: var(--vn-white) !important;
    border: 1.5px solid var(--vn-g-accent) !important;
    border-radius: var(--vn-r-sm) !important;
    box-shadow: 0 24px 60px rgba(11,31,16,.14);
    overflow: hidden;
    margin-top: 6px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-radius: var(--vn-r-sm) !important;
}

/* Search input */
.select2-container--default .select2-search--dropdown {
    padding: .65rem .65rem .35rem !important;
    background: var(--vn-g-soft) !important;
    border-bottom: 1px solid var(--vn-g-100);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--vn-line) !important;
    border-radius: var(--vn-pill) !important;
    padding: .55rem 1rem !important;
    background: #fff !important;
    color: var(--vn-ink) !important;
    font-family: var(--vn-font) !important;
    font-size: .92rem;
    outline: 0 !important;
    box-shadow: none !important;
    transition: border-color .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 3px rgba(127,193,66,.2) !important;
}

/* Options list */
.select2-container--default .select2-results__options {
    padding: .35rem;
    max-height: 280px;
    scrollbar-width: thin;
    scrollbar-color: var(--vn-g-primary) transparent;
}
.select2-container--default .select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--vn-g-primary);
    border-radius: 3px;
}
.select2-container--default .select2-results__option {
    padding: .55rem .75rem !important;
    color: var(--vn-ink) !important;
    font-family: var(--vn-font) !important;
    font-size: .92rem;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background .2s var(--vn-ease), color .2s var(--vn-ease);
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--vn-g-soft) !important;
    color: var(--vn-g-primary) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.select2-container--default .select2-results__option--disabled {
    color: var(--vn-muted-soft) !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* Inside our icon-prefixed inputs: match spacing so the combo sits right */
.vn-input-wrap--select .select2-container--default .select2-selection--single {
    padding-left: 2.85rem !important;
}
.vn-input-wrap--select .vn-input-icon { z-index: 2; }
/* Hide the custom CSS caret — Select2 draws its own */
.vn-input-wrap--select:has(.select2-container)::after { display: none; }
/* Fallback for browsers without :has(): hide caret whenever select is Select2-ified */
.vn-input-wrap--select select.select2-hidden-accessible ~ .select2-container { width: 100% !important; }
.vn-input-wrap--select select.select2-hidden-accessible + .select2-container { width: 100% !important; }

/* Mobile refinements */
@media (max-width: 575.98px) {
    .select2-container--default .select2-selection--single { height: 48px !important; padding: 0 1rem !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: .92rem; }
}

/* =============================================================
   28.65 SESSION LOCK SCREEN
   ============================================================= */
body.vn-locked { overflow: hidden; }
.vn-lock {
    position: fixed;
    inset: 0;
    z-index: 2080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--vn-ease);
    background: rgba(11, 31, 16, 0.72);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.vn-lock.is-open { opacity: 1; pointer-events: auto; }

.vn-lock__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-lg);
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 40px 100px rgba(11,31,16,.45);
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: transform .4s var(--vn-ease-b), opacity .4s var(--vn-ease);
}
.vn-lock.is-open .vn-lock__card { transform: translateY(0) scale(1); opacity: 1; }
.vn-lock__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--vn-r-lg) var(--vn-r-lg) 0 0;
    background: linear-gradient(90deg, var(--vn-g-accent), var(--vn-g-primary), var(--vn-g-accent));
}
.vn-lock__brand {
    display: inline-block;
    margin-bottom: 1rem;
}
.vn-lock__brand img {
    height: 52px;
    filter: drop-shadow(0 6px 16px rgba(30,107,52,.22));
}
.vn-lock__avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    padding: 3px;
    background: linear-gradient(135deg, var(--vn-g-primary), var(--vn-g-accent));
    position: relative;
    box-shadow: 0 14px 30px rgba(30,107,52,.22);
}
.vn-lock__avatar::after {
    content: "\f21c"; /* ri-lock-2-fill */
    font-family: 'remixicon';
    position: absolute;
    right: -4px; bottom: -4px;
    width: 30px; height: 30px;
    background: var(--vn-g-accent);
    color: var(--vn-ink);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    border: 3px solid #fff;
}
.vn-lock__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
}
.vn-lock__eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    padding: .25rem .75rem;
    background: var(--vn-g-soft);
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
    margin-bottom: .6rem;
}
.vn-lock__title {
    font-family: var(--vn-font) !important;
    font-weight: 800 !important;
    font-size: 1.45rem !important;
    color: var(--vn-ink) !important;
    margin: 0 !important;
    letter-spacing: -.025em;
    line-height: 1.15 !important;
}
.vn-lock__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--vn-g-primary) !important;
    -webkit-text-fill-color: var(--vn-g-primary) !important;
}
.vn-lock__subtitle {
    color: var(--vn-muted) !important;
    font-size: .9rem;
    margin: .5rem 0 1.4rem !important;
    text-align: center !important;
    line-height: 1.5;
}
.vn-lock__form { text-align: left; display: flex; flex-direction: column; gap: .75rem; }
.vn-lock__form .form-control {
    padding: .85rem 1.1rem .85rem 2.85rem !important;
    height: 52px;
    border-radius: var(--vn-r-sm) !important;
    background: #fff !important;
    border: 1.5px solid var(--vn-line) !important;
    color: var(--vn-ink) !important;
    font-family: var(--vn-font) !important;
    font-size: .98rem;
    box-shadow: none !important;
}
.vn-lock__form .form-control:focus {
    border-color: var(--vn-g-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
}
.vn-lock__error {
    color: #8B2A2A;
    background: #FDEFEF;
    border: 1px solid #F5C8C8;
    border-radius: var(--vn-r-sm);
    padding: .6rem .85rem;
    font-size: .85rem;
    margin: 0;
}
.vn-lock__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .35rem;
}
.vn-lock__actions .theme-btn {
    width: 100%;
    justify-content: center;
    padding: .85rem 1.25rem !important;
    font-size: .88rem !important;
}

/* =============================================================
   28.68 GENEOLOGY TREE (Leveltree/Index)
   ============================================================= */
.vn-tree-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: .65rem .75rem;
    flex-wrap: wrap;
}
.vn-tree-bar__search {
    position: relative;
    flex: 1 1 260px;
    min-width: 240px;
}
.vn-tree-bar__search i {
    position: absolute;
    left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--vn-g-primary);
    font-size: 1.05rem;
    pointer-events: none;
}
.vn-tree-bar__search input {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.7rem;
    background: var(--vn-g-soft);
    border: 1.5px solid var(--vn-g-soft);
    border-radius: var(--vn-pill);
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-size: .92rem;
    transition: border-color .3s var(--vn-ease), background .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
    outline: 0;
}
.vn-tree-bar__search input:focus {
    border-color: var(--vn-g-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18);
}
.vn-tree-bar .theme-btn { padding: .55rem 1rem !important; font-size: .82rem !important; }
.vn-tree-bar__err { color: #B63C3C; font-weight: 600; font-size: .85rem; margin-left: auto; }

/* Tree viewport — scrollable, pan/drag */
.vn-tree-wrap {
    background: linear-gradient(180deg, #fff 0%, var(--vn-g-soft) 100%);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    overflow: auto;
    min-height: 520px;
    max-height: 80vh;
    cursor: grab;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(30,107,52,.08) 1px, transparent 1.5px),
        linear-gradient(180deg, #fff 0%, var(--vn-g-soft) 100%);
    background-size: 24px 24px, 100% 100%;
}
.vn-tree-wrap--drag { cursor: grabbing; user-select: none; }
.vn-tree-viewport {
    padding: 2rem 1rem;
    width: max-content;
    min-width: 100%;
    transition: transform .3s var(--vn-ease);
}

/* CSS tree (horizontal with connectors) */
.vn-tree,
.vn-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.vn-tree ul { padding-top: 2rem; position: relative; }
.vn-tree li {
    position: relative;
    padding: 2rem .5rem 0;
    text-align: center;
}
.vn-tree > li { padding-top: 0; }
.vn-tree li::before,
.vn-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    border-top: 2px solid var(--vn-g-100);
    width: 50%;
    height: 2rem;
}
.vn-tree li::before { right: 50%; }
.vn-tree li::after  { left: 50%; border-left: 2px solid var(--vn-g-100); }
.vn-tree li:only-child::before,
.vn-tree li:only-child::after { display: none; }
.vn-tree li:only-child { padding-top: 2rem; }
.vn-tree > li::before,
.vn-tree > li::after { display: none; }
.vn-tree li:first-child::before,
.vn-tree li:last-child::after { border-top: 0; }
/* Connector line from parent down */
.vn-tree li > ul::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    height: 2rem;
    border-left: 2px solid var(--vn-g-100);
}

/* Node card */
.vn-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .65rem .9rem .7rem;
    background: #fff;
    border: 1.5px solid var(--vn-line);
    border-radius: var(--vn-r-sm);
    box-shadow: 0 10px 22px rgba(11,31,16,.06);
    cursor: pointer;
    position: relative;
    min-width: 170px;
    max-width: 200px;
    transition: transform .35s var(--vn-ease), border-color .3s var(--vn-ease), box-shadow .35s var(--vn-ease), background .3s var(--vn-ease);
}
.vn-node:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--vn-g-accent);
    box-shadow: 0 18px 34px rgba(127,193,66,.22);
    background: linear-gradient(180deg, #fff, var(--vn-g-soft));
}
.vn-node__ring {
    width: 58px; height: 58px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vn-g-primary), var(--vn-g-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .15rem;
}
.vn-node__ring--sm { width: 48px; height: 48px; padding: 2px; }
.vn-node__avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vn-g-primary);
    font-size: 1.4rem;
}
.vn-node__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vn-g-accent);
    color: var(--vn-ink);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: var(--vn-pill);
    box-shadow: 0 6px 14px rgba(127,193,66,.3);
}
.vn-node__id {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: .68rem;
    color: var(--vn-muted);
    font-weight: 700;
    letter-spacing: .02em;
}
.vn-node__name {
    font-family: var(--vn-font) !important;
    font-weight: 700;
    color: var(--vn-ink);
    font-size: .9rem;
    letter-spacing: -.01em;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vn-node__count {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    background: var(--vn-g-soft);
    padding: .1rem .5rem;
    border-radius: var(--vn-pill);
    border: 1px solid var(--vn-g-100);
    margin-top: .2rem;
}
.vn-node__count--mute { color: var(--vn-muted); background: #F4F6F1; border-color: var(--vn-line); }

/* Variants */
.vn-node--root {
    background: linear-gradient(135deg, var(--vn-g-primary), #165128);
    color: #fff;
    border-color: var(--vn-g-primary);
    box-shadow: 0 18px 34px rgba(30,107,52,.32);
}
.vn-node--root .vn-node__avatar { background: rgba(255,255,255,.15); color: #fff; }
.vn-node--root .vn-node__id { color: var(--vn-g-accent); }
.vn-node--root .vn-node__name { color: #fff; }
.vn-node--root .vn-node__ring { background: linear-gradient(135deg, var(--vn-g-accent), #fff); }

.vn-node--has-sub .vn-node__avatar { background: var(--vn-g-soft); color: var(--vn-g-primary); }
.vn-node--leaf .vn-node__avatar { background: #F4F6F1; color: var(--vn-muted); }
.vn-node--leaf .vn-node__ring { background: linear-gradient(135deg, var(--vn-line-2), var(--vn-line)); }

.vn-node--match {
    border-color: var(--vn-g-accent) !important;
    background: var(--vn-g-soft) !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(127,193,66,.35) !important;
}

/* Hover tooltip */
.vn-node__tip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--vn-ink);
    color: #fff;
    border-radius: var(--vn-r-sm);
    padding: .55rem .75rem;
    min-width: 200px;
    text-align: left;
    font-size: .8rem;
    line-height: 1.3;
    z-index: 6;
    box-shadow: 0 18px 34px rgba(11,31,16,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--vn-ease), transform .2s var(--vn-ease);
}
.vn-node__tip::before {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: var(--vn-ink);
}
.vn-node__tip p { margin: 0; display: flex; justify-content: space-between; gap: .8rem; color: rgba(255,255,255,.8) !important; text-align: left !important; }
.vn-node__tip span { color: var(--vn-g-accent); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.vn-node__tip strong { color: #fff; font-weight: 700; }
.vn-node:hover .vn-node__tip { opacity: 1; transform: translateX(-50%) translateY(10px); }

/* Branch show/hide */
.vn-tree-branch { display: none; }
.vn-tree-branch.show { display: flex; }
.vn-tree-hidden { display: none !important; }

/* Legend */
.vn-tree-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r);
    padding: .75rem 1rem;
    color: var(--vn-muted);
    font-size: .82rem;
}
.vn-tree-legend__item { display: inline-flex; align-items: center; gap: .4rem; }
.vn-tree-legend__dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.vn-tree-legend__dot--root { background: var(--vn-g-primary); box-shadow: 0 0 0 3px rgba(30,107,52,.2); }
.vn-tree-legend__dot--sub  { background: var(--vn-g-accent); }
.vn-tree-legend__dot--leaf { background: var(--vn-line-2); }
.vn-tree-legend__hint { margin-left: auto; color: var(--vn-muted); font-size: .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.vn-tree-legend__hint i { color: var(--vn-g-primary); }

@media (max-width: 767.98px) {
    .vn-tree-bar { flex-direction: column; align-items: stretch; }
    .vn-tree-bar .theme-btn { justify-content: center; }
    .vn-tree-bar__search { min-width: 0; }
    .vn-tree-legend__hint { margin-left: 0; }
    .vn-node { min-width: 140px; }
}

/* =============================================================
   28.7 SHARED HELPERS (balance chip, status pill, info card)
   ============================================================= */
.vn-balance-chip {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--vn-g-primary) 0%, #165128 100%);
    color: #fff;
    border-radius: var(--vn-r-sm);
    box-shadow: 0 12px 28px rgba(30,107,52,.2);
    position: relative;
    overflow: hidden;
}
.vn-balance-chip::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(127,193,66,.28), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}
.vn-balance-chip__label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vn-g-accent);
    flex-shrink: 0;
}
.vn-balance-chip__value {
    font-family: var(--vn-font) !important;
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: -.025em;
    margin-left: auto;
}

/* Status pill used in tables (Success / Pending / Failed) */
.vn-status {
    display: inline-flex;
    align-items: center;
    padding: .22rem .65rem;
    border-radius: var(--vn-pill);
    font-family: var(--vn-font) !important;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    background: var(--vn-g-soft);
    color: var(--vn-muted);
    border: 1px solid var(--vn-line);
}
.vn-status--success {
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
    border-color: var(--vn-g-100);
}
.vn-status--pending {
    background: #FFF8E1;
    color: #8B6A1D;
    border-color: #F5D98A;
}
.vn-status--danger {
    background: #FDEFEF;
    color: #8B2A2A;
    border-color: #F5C8C8;
}

/* Info / help card */
.vn-info-card {
    background: linear-gradient(160deg, var(--vn-g-soft) 0%, #fff 75%);
    border: 1px solid var(--vn-g-100);
    border-radius: var(--vn-r);
    padding: 1.25rem 1.25rem 1rem;
    height: 100%;
}
.vn-info-card h3 {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    color: var(--vn-ink) !important;
    margin: 0 0 .85rem !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: -.01em;
}
.vn-info-card h3 i { color: var(--vn-g-primary); font-size: 1.15rem; }
.vn-info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.vn-info-card li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--vn-ink-2);
    line-height: 1.4;
}
.vn-info-card li i {
    color: var(--vn-g-primary);
    font-size: 1.05rem;
    margin-top: 1px;
    flex-shrink: 0;
}
.vn-info-card li span { text-align: left; }

/* Persistent in-page alert with close button (used on AdminOrder etc.) */
.vn-alert.vn-alert--inline {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem 1rem !important;
    margin: 0 0 .35rem !important;
    border-radius: var(--vn-r-sm);
    font-size: .9rem;
    line-height: 1.4;
}
.vn-alert.vn-alert--inline > i:first-child { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.vn-alert.vn-alert--inline > span { flex: 1; word-break: break-word; }
.vn-alert__close {
    background: transparent;
    border: 0;
    padding: .15rem .35rem;
    border-radius: 6px;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: opacity .25s var(--vn-ease), background .25s var(--vn-ease);
    flex-shrink: 0;
}
.vn-alert__close:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* Variants — error (default red) & success (green). Both auto-grab focus. */
.vn-alert.vn-alert--inline.vn-alert--danger {
    background: #FDECEC;
    border: 1px solid #F5B5B5;
    color: #9F2A2A;
}
.vn-alert.vn-alert--inline.vn-alert--success {
    background: #ECF8E2;
    border: 1px solid #B8E29B;
    color: #1E6B34;
}
.vn-alert.vn-alert--inline:focus,
.vn-alert.vn-alert--inline:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(255, 99, 99, .22), 0 8px 24px rgba(159, 42, 42, .18);
}
.vn-alert.vn-alert--inline.vn-alert--success:focus,
.vn-alert.vn-alert--inline.vn-alert--success:focus-visible {
    box-shadow: 0 0 0 4px rgba(127, 193, 66, .28), 0 8px 24px rgba(30, 107, 52, .18);
}

/* Pulse animation — fired every time the alert is shown so the user can't miss it */
@keyframes vnAlertPulse {
    0%   { transform: scale(.985); box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
    50%  { transform: scale(1.012); box-shadow: 0 0 0 12px rgba(220, 53, 69, 0); }
    100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
@keyframes vnAlertPulseOk {
    0%   { transform: scale(.985); box-shadow: 0 0 0 0 rgba(30, 107, 52, .55); }
    50%  { transform: scale(1.012); box-shadow: 0 0 0 12px rgba(30, 107, 52, 0); }
    100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(30, 107, 52, 0); }
}
.vn-alert.vn-alert--inline.vn-alert--pulse.vn-alert--danger  { animation: vnAlertPulse   .9s var(--vn-ease, ease) 2; }
.vn-alert.vn-alert--inline.vn-alert--pulse.vn-alert--success { animation: vnAlertPulseOk .9s var(--vn-ease, ease) 2; }

/* AdminOrder Create — inline member / item lookup result lines */
.vn-member-name,
.vn-item-name {
    margin: .25rem 0 0 !important;
    padding: .35rem .65rem;
    background: #FDEFEF;
    border: 1px solid #F5C8C8;
    border-radius: 8px;
    color: #B63C3C !important;
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-align: left !important;
}
.vn-member-name i,
.vn-item-name i { color: #B63C3C; }
.vn-member-state,
.vn-item-price {
    color: #6B7A6E !important;
    font-weight: 500;
    font-size: .78rem;
    margin-left: .15rem;
}

/* Admin badge in topbar */
.vn-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    font-family: var(--vn-font) !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    background: var(--vn-g-soft);
    border: 1px solid var(--vn-g-100);
    border-radius: var(--vn-pill);
}
.vn-admin-badge i { color: #C9A44A; font-size: 1rem; }
@media (max-width: 767.98px) {
    .vn-admin-badge span { display: none; }
}

/* Admin sidebar accent — same dark sage but with a subtle gold strip */
.vn-side--admin::before {
    background: linear-gradient(90deg, var(--vn-g-primary), #C9A44A);
}

/* Hide any stray column-visibility / show-hide UI (old ColVis,
   buttons-colvis, ColVisGroup, dropdown toggles of column picker) */
.ColVis, .dt-button.buttons-colvis, .buttons-colvisGroup,
.dataTables_wrapper .dt-button.buttons-columnVisibility,
.dataTables_wrapper [class*="buttons-colvis"],
.dataTables_wrapper .dataex-colvis-basic + .colvis-selector,
.btn.buttons-colvis, .ColVis_Button,
.dt-button-collection.buttons-columnVisibility {
    display: none !important;
}

/* =============================================================
   30. DATATABLES — theme skin, export buttons, empty state
   ============================================================= */
.dataTables_wrapper {
    font-family: var(--vn-font) !important;
}

/* Toolbar layout */
.vn-dt-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
    flex-wrap: wrap;
}
.vn-dt-top__left  { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vn-dt-top__right { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; }
.vn-dt-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.vn-dt-foot__left  { color: var(--vn-muted); font-size: .82rem; }
.vn-dt-foot__right { margin-left: auto; }

/* Search field */
.dataTables_wrapper .dataTables_filter {
    margin: 0 !important;
    position: relative;
}
.dataTables_wrapper .dataTables_filter label {
    margin: 0;
    position: relative;
    display: block;
}
.dataTables_wrapper .dataTables_filter input {
    width: 280px;
    max-width: 100%;
    height: 40px;
    padding: 0 1rem 0 2.6rem !important;
    background: var(--vn-g-soft) !important;
    border: 1.5px solid var(--vn-g-soft) !important;
    border-radius: var(--vn-pill) !important;
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-size: .88rem !important;
    margin: 0 !important;
    transition: border-color .3s var(--vn-ease), background .3s var(--vn-ease), box-shadow .3s var(--vn-ease);
    outline: 0 !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--vn-muted); }
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--vn-g-accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(127,193,66,.18) !important;
}
.dataTables_wrapper .dataTables_filter label::before {
    content: "\ec25"; /* ri-search-2-line */
    font-family: 'remixicon';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vn-g-primary);
    pointer-events: none;
    font-size: 1.05rem;
    z-index: 2;
}

/* Length menu */
.dataTables_wrapper .dataTables_length {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--vn-muted);
    font-size: .8rem;
}
.dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--vn-muted);
    font-size: .8rem;
}
.dataTables_wrapper .dataTables_length select {
    height: 36px;
    padding: 0 .75rem;
    border: 1.5px solid var(--vn-line);
    border-radius: var(--vn-pill);
    background: #fff;
    color: var(--vn-ink);
    font-family: var(--vn-font) !important;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
}

/* Export buttons (DataTables Buttons extension) */
.dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 !important;
}
.dt-buttons .vn-dt-btn,
.dt-buttons .dt-button {
    background: #fff !important;
    border: 1.5px solid var(--vn-line) !important;
    color: var(--vn-g-primary) !important;
    padding: .4rem .8rem !important;
    border-radius: var(--vn-pill) !important;
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: .35rem;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all .3s var(--vn-ease);
    line-height: 1;
    margin: 0 !important;
}
.dt-buttons .vn-dt-btn i,
.dt-buttons .dt-button i { font-size: .95rem; }
.dt-buttons .vn-dt-btn:hover,
.dt-buttons .dt-button:hover {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    border-color: var(--vn-g-primary) !important;
    box-shadow: 0 8px 18px rgba(30,107,52,.22) !important;
    transform: translateY(-1px);
}

/* Info */
.dataTables_wrapper .dataTables_info {
    padding: 0 !important;
    color: var(--vn-muted);
    font-size: .82rem;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate { padding: 0 !important; margin: 0 !important; display: inline-flex; gap: 3px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important;
    border: 1px solid var(--vn-line) !important;
    color: var(--vn-ink) !important;
    padding: .35rem .7rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-family: var(--vn-font) !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    min-width: 32px;
    text-align: center;
    transition: all .3s var(--vn-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--vn-g-soft) !important;
    color: var(--vn-g-primary) !important;
    border-color: var(--vn-g-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--vn-g-primary) !important;
    color: #fff !important;
    border-color: var(--vn-g-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--vn-muted-soft) !important;
    border-color: transparent !important;
    cursor: not-allowed;
}

/* Table header sorting */
table.vn-dt.dataTable thead th,
table.dataTable.no-footer thead th {
    border-bottom: 0 !important;
    cursor: pointer;
    position: relative;
}
table.vn-dt.dataTable thead th.sorting::before,
table.vn-dt.dataTable thead th.sorting::after,
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after {
    right: .55rem !important;
    color: var(--vn-g-primary);
    opacity: .4;
}
table.vn-dt.dataTable thead th.sorting_asc::before,
table.vn-dt.dataTable thead th.sorting_desc::after { opacity: 1; }

/* Empty / zero state */
table.vn-dt.dataTable td.dataTables_empty,
table.dataTable td.dataTables_empty {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.vn-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--vn-muted);
    background: var(--vn-g-soft);
    border-radius: var(--vn-r);
    border: 1px dashed var(--vn-g-100);
    margin: .25rem 0;
}
.vn-empty-state i {
    font-size: 2.5rem;
    color: var(--vn-g-primary);
    opacity: .55;
    margin-bottom: .4rem;
    display: inline-block;
}
.vn-empty-state h3 {
    font-family: var(--vn-font) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--vn-ink) !important;
    margin: 0 0 .2rem !important;
    letter-spacing: -.015em;
}
.vn-empty-state p {
    color: var(--vn-muted) !important;
    margin: 0 !important;
    font-size: .88rem;
    text-align: center !important;
}
.vn-empty-state--sm { padding: 1.75rem 1rem; }
.vn-empty-state--sm i { font-size: 2rem; }
.vn-empty-state--sm h3 { font-size: .98rem; }

/* Print export clean-up */
@media print {
    .vn-side, .vn-topbar, .vn-dt-top, .vn-dt-foot, .vn-whatsapp-fab, .vn-top-btn, .vn-progress { display: none !important; }
    body.vn-dash-body { padding: 0 !important; }
    .vn-dash__content { padding: 0 !important; }
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .vn-dt-top, .vn-dt-foot { flex-direction: column; align-items: stretch; }
    .vn-dt-top__right, .vn-dt-foot__right { margin-left: 0; }
    .dt-buttons { flex-wrap: wrap; }
}

/* =============================================================
   31. REMOVE LEADING ICONS FROM ALL TEXTBOXES / FORM INPUTS
   ============================================================= */
/* Hide every leading icon that sits in front of an input/textarea/select */
.vn-input-icon,
.vn-catalog-toolbar__search > i,
.vn-tree-bar__search > i,
.vn-input-wrap > i:first-child,
.dataTables_wrapper .dataTables_filter label::before {
    display: none !important;
}

/* Restore normal left padding now that icons are gone */
.vn-input-wrap .form-control,
.vn-input-wrap textarea.form-control,
.vn-auth__form .form-control,
.vn-lock__form .form-control,
.vn-cart-checkout .vn-textarea {
    padding-left: 1.1rem !important;
}
.vn-input-wrap--select .select2-container--default .select2-selection--single {
    padding-left: 1rem !important;
}
.vn-input-wrap--select::after {
    display: block; /* re-show native caret when no Select2 (overridden elsewhere if Select2 active) */
}
.vn-catalog-toolbar__search input,
.vn-tree-bar__search input,
.dataTables_wrapper .dataTables_filter input {
    padding-left: 1rem !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        transition-duration: .001s !important;
    }
}

/* "View Cart" button on Shop page — shows live qty + amount inside
   the button so the user can tell what's already in the cart without
   opening it. */
.vn-cart-summary-inline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    margin-left: .45rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}
.vn-cart-summary-inline__qty,
.vn-cart-summary-inline__amt { white-space: nowrap; }
.vn-cart-summary-inline__sep { opacity: .5; }
.theme-btn.vn-signup-btn .vn-cart-summary-inline {
    background: var(--vn-g-soft);
    color: var(--vn-g-primary);
}

/* Topbar cart icon — sits before "New Register". Red dot badge
   shows the live cart qty; the floating tooltip lists every item
   with qty/amount on hover and a grand total at the bottom. */
.vn-topbar__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: var(--vn-g-primary);
    background: var(--vn-g-soft);
    border: 1px solid var(--vn-g-100);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.vn-topbar__cart:hover {
    background: var(--vn-g-primary);
    color: #fff;
    transform: translateY(-1px);
}
.vn-topbar__cart i { font-size: 1.25rem; }

.vn-topbar__cart-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #DC3545;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(220,53,69,.35);
}

.vn-topbar__cart-tip {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    min-width: 280px;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(11,31,16,.12);
    padding: .65rem .8rem;
    z-index: 1080;
    color: var(--vn-ink);
    font-size: .85rem;
    text-align: left;
    opacity: 1;
    transform-origin: top right;
    animation: vnTipPop .15s ease-out;
}
@keyframes vnTipPop { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.vn-topbar__cart-tip::before {
    content: '';
    position: absolute;
    top: -6px; right: 16px;
    width: 12px; height: 12px;
    background: #fff;
    border-left: 1px solid var(--vn-line);
    border-top:  1px solid var(--vn-line);
    transform: rotate(45deg);
}
.vn-topbar__cart-tip__head {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    margin-bottom: .35rem;
}
.vn-topbar__cart-tip__list {
    list-style: none; margin: 0; padding: 0 0 .35rem;
    max-height: 240px; overflow: auto;
    border-bottom: 1px dashed var(--vn-g-100);
}
.vn-topbar__cart-tip__list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .35rem .55rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--vn-line);
}
.vn-topbar__cart-tip__list li:last-child { border-bottom: 0; }
.vn-topbar__cart-tip__name { font-weight: 600; color: var(--vn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-topbar__cart-tip__qty  { color: var(--vn-muted); font-size: .78rem; }
.vn-topbar__cart-tip__amt  { font-weight: 700; color: var(--vn-g-primary); }
.vn-topbar__cart-tip__total {
    margin-top: .45rem;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700;
    color: var(--vn-ink);
}
.vn-topbar__cart-tip__total strong {
    font-weight: 800;
    color: var(--vn-g-primary);
    font-size: 1rem;
}
.vn-topbar__cart-tip__empty { margin: 0; color: var(--vn-muted); font-size: .85rem; }

@media (max-width: 600px) {
    .vn-topbar__cart-tip { right: -40px; min-width: 240px; }
}

/* Shop grid card: qty bar above the Add-to-Cart button */
.vn-product__qtybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .35rem .85rem .25rem;
    border-top: 1px dashed var(--vn-g-100);
}
.vn-product__qty-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-g-primary);
    margin: 0;
}
.vn-qty.vn-qty--sm .vn-qty__btn { padding: .25rem .55rem; font-size: .85rem; }
.vn-qty.vn-qty--sm .vn-qty__input { width: 46px; height: 32px; font-size: .85rem; }

/* View Cart — make every line wrap cleanly on phone screens so the
   total/qty/remove cluster doesn't get clipped off the right edge.
   Also style the new "Continue Shopping" footer that sits below
   the cart list. */
.vn-cart-item {
    flex-wrap: wrap;
    row-gap: .5rem;
    column-gap: .65rem;
}
.vn-cart-item__body { flex: 1 1 240px; min-width: 0; }
.vn-cart-item__name { word-break: break-word; }

.vn-cart-card__foot {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--vn-g-100);
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 600px) {
    .vn-cart-item {
        flex-direction: column;
        align-items: stretch;
    }
    .vn-cart-item__body { flex: 1 1 auto; }
    .vn-cart-item__total { align-self: flex-end; font-size: 1.1rem; }
    .vn-qty { align-self: flex-start; }
    .vn-cart-item__remove { align-self: flex-end; margin-top: -1.8rem; }
    .vn-cart-card__foot .theme-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FINAL COMPACT OVERLAY (loaded last so it wins)
   Tightens vertical rhythm across the dashboard, member area,
   admin panel and public pages. Goal: every page reads cleanly
   without the big empty bands between sections that the older
   layout used to have.
   ============================================================ */

/* — Dashboard sections / containers — */
body.vn-dash-body .vn-dash__container > * + * { margin-top: .55rem !important; }
body.vn-dash-body .vn-dash-section          { gap: .25rem !important; margin-bottom: 0 !important; }
body.vn-dash-body .vn-dash-section__head    { padding: 0 !important; margin-bottom: .15rem !important; }
body.vn-dash-body .vn-dash-section__head h2 { margin-bottom: 0 !important; }
body.vn-dash-body .vn-dash-section__head p  { margin: .05rem 0 0 !important; }

body.vn-dash-body .vn-dash-hero { padding: .9rem 1.25rem !important; margin-bottom: 0 !important; }
body.vn-dash-body .vn-dash-hero h1 { margin: .05rem 0 .1rem !important; }
body.vn-dash-body .vn-dash-hero p  { margin: 0 0 .5rem !important; }

/* — Page headers (used on every dashboard page) — */
body.vn-dash-body .vn-page-header        { padding: .85rem 1.1rem !important; margin-bottom: .5rem !important; }
body.vn-dash-body .vn-page-header__title { margin: .15rem 0 0 !important; }
body.vn-dash-body .vn-page-header__title h1 { margin: 0 !important; }
body.vn-dash-body .vn-page-header__title p  { margin: .15rem 0 0 !important; }
body.vn-dash-body .vn-page-header__top      { gap: .35rem !important; flex-wrap: wrap; }

/* — Form cards / sections (Cart, MemberSignup, Profile, etc.) — */
body.vn-dash-body .vn-form-card       { padding: .9rem 1.1rem !important; margin-bottom: .5rem !important; }
body.vn-dash-body .vn-form-section    { padding: 0 !important; margin: 0 0 .5rem !important; }
body.vn-dash-body .vn-form-section__head { margin-bottom: .35rem !important; }
body.vn-dash-body .vn-form-section__head h2 { margin: 0 !important; }
body.vn-dash-body .vn-form-section__head p  { margin: .1rem 0 0 !important; }
body.vn-dash-body .vn-form-footer     { margin-top: .5rem !important; padding-top: .5rem !important; }

/* — Bootstrap row gutters: pull every g-* / row-gap-* down a notch — */
body.vn-dash-body .row.g-3,
body.vn-dash-body .row.row-gap-3,
body.vn-dash-body .row-gap-3,
body.vn-dash-body .g-3 {
    --bs-gutter-x: .55rem !important;
    --bs-gutter-y: .55rem !important;
}
body.vn-dash-body .row.g-4,
body.vn-dash-body .row.g-5,
body.vn-dash-body .g-4,
body.vn-dash-body .g-5 {
    --bs-gutter-x: .65rem !important;
    --bs-gutter-y: .65rem !important;
}

/* — mb-* utilities (Bootstrap's biggest space culprits) — */
body.vn-dash-body .mb-2 { margin-bottom: .35rem !important; }
body.vn-dash-body .mb-3 { margin-bottom: .55rem !important; }
body.vn-dash-body .mb-4 { margin-bottom: .8rem  !important; }
body.vn-dash-body .mb-5 { margin-bottom: 1rem   !important; }
body.vn-dash-body .mt-3 { margin-top: .55rem    !important; }
body.vn-dash-body .mt-4 { margin-top: .8rem     !important; }
body.vn-dash-body .mt-5 { margin-top: 1rem      !important; }
body.vn-dash-body .py-3 { padding-top: .55rem !important; padding-bottom: .55rem !important; }
body.vn-dash-body .py-4 { padding-top: .8rem !important;  padding-bottom: .8rem !important; }
body.vn-dash-body .py-5 { padding-top: 1rem !important;   padding-bottom: 1rem !important; }

/* — Stat / shortcut / referral cards — bring inner padding in line — */
body.vn-dash-body .vn-stat       { padding: .8rem .95rem !important; }
body.vn-dash-body .vn-shortcut   { padding: .85rem .95rem !important; }
body.vn-dash-body .vn-ref-card   { padding: .85rem 1rem !important; margin-top: .55rem !important; }
body.vn-dash-body .vn-info-card  { padding: .85rem 1rem !important; }

/* — Admin panel (legacy bootstrap-admin shell) — */
.app-content .content-wrapper           { padding: .9rem 1rem !important; }
.app-content .content-wrapper > .row    { margin-bottom: .55rem !important; }
.app-content .card                      { margin-bottom: .55rem !important; box-shadow: 0 4px 14px rgba(11,31,16,.06); }
.app-content .card-header               { padding: .65rem 1rem !important; }
.app-content .card-body                 { padding: .9rem 1rem !important; }
.app-content .form-group.col-md-6,
.app-content .form-group.col-md-4,
.app-content .form-group.col-md-3,
.app-content .form-group.col-md-12      { margin-bottom: .45rem !important; }
.app-content .form-group label          { margin-bottom: .15rem; }

/* — Main public site sections (Vande/* views) — */
section.section-padding,
section[class*="ptb"],
section.about,
section.about-area,
section.contact,
section.team-area,
section.feature-area     { padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; }
.section-title           { margin-bottom: 1rem !important; }
.section-title p,
.section-title h2,
.section-title h3        { margin-bottom: .35rem !important; }

/* Print stays normal — don't tighten print pages */
@media print { body.vn-dash-body * { margin: revert !important; padding: revert !important; } }

/* ============================================================
   AGGRESSIVE TIGHTEN PASS — vertical rhythm pulled in further
   so two adjacent sections / rows / cards almost touch.
   Customer feedback: "2 row ni vachhe ni space bov j vadhare".
   ============================================================ */

/* Member-area dashboard: collapse everything */
body.vn-dash-body .vn-dash__container        { padding: .55rem .9rem !important; }
body.vn-dash-body .vn-dash__container > * + *{ margin-top: .35rem !important; }
body.vn-dash-body .vn-dash-section            { gap: .15rem !important; margin: 0 0 .35rem !important; }
body.vn-dash-body .vn-dash-section + .vn-dash-section { margin-top: 0 !important; }
body.vn-dash-body .vn-dash-section__head      { margin-bottom: .1rem !important; }
body.vn-dash-body .vn-dash-section__head h2   { margin: 0 !important; line-height: 1.15; }
body.vn-dash-body .vn-dash-section__head p    { margin: .05rem 0 0 !important; line-height: 1.25; font-size: .8rem; }

/* Hero / page header bands shrink */
body.vn-dash-body .vn-dash-hero               { padding: .7rem 1rem !important; }
body.vn-dash-body .vn-dash-hero__inner        { gap: .85rem !important; }
body.vn-dash-body .vn-dash-hero h1            { margin: .05rem 0 .05rem !important; }
body.vn-dash-body .vn-dash-hero p             { margin: 0 0 .35rem !important; }
body.vn-dash-body .vn-page-header             { padding: .65rem .95rem !important; margin-bottom: .35rem !important; }
body.vn-dash-body .vn-page-header__title h1   { line-height: 1.15; margin: .05rem 0 .05rem !important; }

/* Card / form internals */
body.vn-dash-body .vn-form-card               { padding: .75rem .95rem !important; margin-bottom: .35rem !important; }
body.vn-dash-body .vn-form-section            { margin: 0 0 .35rem !important; }
body.vn-dash-body .vn-form-section__head      { margin-bottom: .25rem !important; }
body.vn-dash-body .vn-form-section__head h2   { margin: 0 !important; line-height: 1.15; font-size: 1rem; }
body.vn-dash-body .vn-form-section__head p    { margin: .05rem 0 0 !important; }
body.vn-dash-body .vn-form-section + .vn-form-section { margin-top: 0 !important; }

/* Bootstrap row gutters — pull every g-* / row-gap-* down hard */
body.vn-dash-body .row.g-2,
body.vn-dash-body .row.row-gap-2,
body.vn-dash-body .row-gap-2,
body.vn-dash-body .g-2 {
    --bs-gutter-x: .35rem !important;
    --bs-gutter-y: .35rem !important;
}
body.vn-dash-body .row.g-3,
body.vn-dash-body .row.row-gap-3,
body.vn-dash-body .row-gap-3,
body.vn-dash-body .g-3 {
    --bs-gutter-x: .45rem !important;
    --bs-gutter-y: .45rem !important;
}

/* Stat cards / shortcut tiles: trim vertical padding */
body.vn-dash-body .vn-stat                    { padding: .65rem .85rem !important; }
body.vn-dash-body .vn-stat__icon              { width: 32px; height: 32px; }
body.vn-dash-body .vn-stat__label             { font-size: .7rem; margin: .15rem 0 .05rem !important; }
body.vn-dash-body .vn-stat__value             { font-size: 1.1rem; margin: 0 0 .15rem !important; line-height: 1.1; }
body.vn-dash-body .vn-stat__trend             { font-size: .7rem; }
body.vn-dash-body .vn-shortcut                { padding: .65rem .85rem !important; }
body.vn-dash-body .vn-info-card               { padding: .7rem .9rem !important; }
body.vn-dash-body .vn-ref-card                { padding: .7rem .85rem !important; margin-top: .35rem !important; }
body.vn-dash-body .vn-ref-card__head          { margin-bottom: .45rem !important; }
body.vn-dash-body .vn-ref-card__head h3       { margin: 0 !important; }
body.vn-dash-body .vn-ref-card__head p        { margin: .1rem 0 0 !important; }

/* Table row padding */
body.vn-dash-body .table > :not(caption) > * > * { padding: .5rem .65rem !important; }

/* Margin utility extreme overrides */
body.vn-dash-body .my-3 { margin-top: .35rem !important; margin-bottom: .35rem !important; }
body.vn-dash-body .my-4 { margin-top: .55rem !important; margin-bottom: .55rem !important; }
body.vn-dash-body .my-5 { margin-top: .75rem !important; margin-bottom: .75rem !important; }
body.vn-dash-body .pt-3 { padding-top: .35rem !important; }
body.vn-dash-body .pt-4 { padding-top: .55rem !important; }
body.vn-dash-body .pt-5 { padding-top: .75rem !important; }
body.vn-dash-body .pb-3 { padding-bottom: .35rem !important; }
body.vn-dash-body .pb-4 { padding-bottom: .55rem !important; }
body.vn-dash-body .pb-5 { padding-bottom: .75rem !important; }

/* Public marketing pages — close gaps between major sections */
section.section-padding, section[class*="ptb"],
section.about, section.about-area, section.contact,
section.team-area, section.feature-area,
.section-padding, .ptb-100, .ptb-90, .ptb-80, .ptb-70, .ptb-60 {
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
}
.pt-100, .pt-90, .pt-80, .pt-70 { padding-top: 1.6rem !important; }
.pb-100, .pb-90, .pb-80, .pb-70 { padding-bottom: 1.6rem !important; }
.mt-100, .mt-90, .mt-80, .mt-70 { margin-top: 1.6rem !important; }
.mb-100, .mb-90, .mb-80, .mb-70 { margin-bottom: 1.6rem !important; }

.section-title              { margin-bottom: .65rem !important; }
.section-title h2,
.section-title h3,
.section-title p            { margin-bottom: .25rem !important; }

/* Admin shell content body — tighter card stack */
.app-content .content-body          { padding-top: .35rem !important; }
.app-content .content-body section + section { margin-top: .35rem !important; }
.app-content .card + .card          { margin-top: .35rem !important; }
.app-content .card .card-header h4  { margin: 0; line-height: 1.2; font-size: 1rem; }

/* ============================================================
   AUTH SHELL CLEANUP (Login · Register · Forgot Password ·
   public Signup). Replaces the noisy overlapping hero-image
   layout with a calm, content-first split that holds together
   on every screen size.
   ============================================================ */

/* The hero-image was the main culprit — overflowing the column
   and obscuring the content. Drop it everywhere. */
.vn-auth__brand .vn-auth__hero-img,
.vn-auth__brand .vn-auth__leaf { display: none !important; }

/* Keep the gradient + texture but kill the spinning ring + dot
   patterns that interfered with the form column at narrow widths. */
.vn-auth__brand::after { display: none !important; }

/* A wider auth shell so the multi-section Signup form (sponsor,
   personal, mobile, address, payment callout) doesn't get cramped. */
.vn-auth { grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.6fr) !important; }
.vn-auth__brand   { padding: 2.2rem 2.4rem 2rem !important; }
.vn-auth__panel   { padding: 2.2rem 1.8rem !important; }
.vn-auth__card,
.vn-auth__panel--wide .vn-auth__card { max-width: 740px !important; }

/* Inside-card spacing: keep individual fields readable, but
   shorten the gap between sections so visitors can take the
   form in at a glance without scrolling. */
.vn-auth__form .vn-form-section        { margin: 0 0 .85rem !important; }
.vn-auth__form .vn-form-section__head  { margin-bottom: .35rem !important; }
.vn-auth__form .vn-form-section__head h2 { font-size: 1.05rem !important; line-height: 1.2; margin: 0 !important; }
.vn-auth__form .vn-form-section__head p  { margin: .1rem 0 0 !important; font-size: .85rem; line-height: 1.35; }
.vn-auth__form .row.row-gap-3.g-3      { --bs-gutter-x: .65rem !important; --bs-gutter-y: .65rem !important; }
.vn-auth__heading                       { margin-bottom: .85rem !important; }
.vn-auth__heading h1                    { line-height: 1.15; margin: .25rem 0 .35rem !important; }

/* Brand-side trim: tighter margins so the green panel never
   ends up taller than the form column. */
.vn-auth__logo                          { margin-top: 1.5rem !important; margin-bottom: .9rem !important; }
.vn-auth__logo img                      { max-height: 64px !important; }
.vn-auth__story                         { margin: 1rem 0 1rem !important; }
.vn-auth__story h2                      { font-size: 1.65rem !important; }
.vn-auth__story p                       { font-size: .95rem; line-height: 1.5; margin: .5rem 0 0 !important; }
.vn-auth__perks                         { gap: .55rem !important; }
.vn-auth__perks li                      { font-size: .88rem; }
.vn-auth__perks li i                    { flex: 0 0 32px; width: 32px; height: 32px; font-size: .9rem; }
.vn-auth__footnote                      { margin-top: 1rem !important; font-size: .7rem; letter-spacing: .14em; }

/* Mobile: keep dropping the brand panel (already done earlier)
   and tighten the form card so the signup fits in one viewport. */
@media (max-width: 767.98px) {
    .vn-auth { grid-template-columns: 1fr !important; }
    .vn-auth__panel        { padding: 1rem .9rem !important; min-height: 100vh; }
    .vn-auth__card         { padding: 1.1rem .95rem !important; border-radius: 14px; }
    .vn-auth__heading h1   { font-size: 1.3rem !important; }
    .vn-auth__form .vn-form-section { margin-bottom: .6rem !important; }
    .vn-auth__form .vn-form-section__head h2 { font-size: .95rem !important; }
    .vn-auth__form .form-control     { padding: .65rem .85rem !important; font-size: .92rem !important; }
}

/* ============================================================
   AUTH SHELL — TWO-COLUMN HERO LAYOUT (Login · Register · Forgot)
   Inspired by premium SaaS auth pages: a deep-green storytelling
   panel on the left with logo pill, italic accent heading, and
   a feature checklist; an airy white card on the right with the
   form. Same Vande Nature green theme — no security captcha.
   ============================================================ */
body.vn-auth-page {
    background:
      radial-gradient(1200px 800px at 100% 0%, rgba(127,193,66,.10), transparent 60%),
      radial-gradient(900px 600px at 0% 100%, rgba(30,107,52,.06), transparent 60%),
      #F8FBF3 !important;
    min-height: 100vh;
}

/* Two-column shell — stays edge-to-edge on desktop */
body.vn-auth-page .vn-auth {
    display: grid !important;
    grid-template-columns: 1.05fr 1.2fr !important;
    min-height: 100vh;
    padding: 0 !important;
}

/* ── LEFT BRAND PANEL: deep-green hero ───────────────────────── */
body.vn-auth-page .vn-auth__brand {
    display: flex !important;
    position: relative;
    padding: 3rem 3rem 2.5rem !important;
    background:
      radial-gradient(closest-side at 85% 8%, rgba(127,193,66,.45), transparent 62%),
      radial-gradient(closest-side at 8% 92%, rgba(127,193,66,.32), transparent 62%),
      linear-gradient(160deg, #1E6B34 0%, #165128 55%, #0E3F1E 100%) !important;
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}
body.vn-auth-page .vn-auth__brand::after { display: block !important; }

/* Brand pill logo (top-left, like TrackFlows) */
body.vn-auth-page .vn-auth__logo {
    display: inline-flex !important;
    align-items: center; gap: .6rem;
    margin: 4rem 0 2rem !important;
    padding: .55rem 1rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-self: flex-start;
}
body.vn-auth-page .vn-auth__logo img {
    max-height: 36px !important;
    filter: brightness(0) invert(1);
}
body.vn-auth-page .vn-auth__logo::after {
    content: 'Vande Nature';
    font-weight: 800; letter-spacing: -.01em;
    font-size: .98rem; color: #FFFFFF;
}

/* Story heading: large with italic accent word */
body.vn-auth-page .vn-auth__story {
    margin: 0 0 1.6rem !important;
    max-width: 480px;
}
body.vn-auth-page .vn-auth__story h2 {
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
    color: #FFFFFF !important;
    margin: 0 0 1rem !important;
}
body.vn-auth-page .vn-auth__story h2 em {
    font-style: italic;
    color: #B6E89A !important;
    -webkit-text-fill-color: #B6E89A !important;
}
body.vn-auth-page .vn-auth__story p {
    color: rgba(255,255,255,.78) !important;
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 !important;
}
/* Hide the small eyebrow chip on the brand side — heading speaks for itself */
body.vn-auth-page .vn-auth__story .divider-right { display: none !important; }

/* Feature checklist (replaces TrackFlows bullets) */
body.vn-auth-page .vn-auth__perks {
    display: flex; flex-direction: column;
    gap: .85rem !important;
    max-width: 460px;
    margin: 0 0 auto !important;
}
body.vn-auth-page .vn-auth__perks li {
    display: flex; align-items: center;
    gap: .85rem;
    color: rgba(255,255,255,.92);
    font-size: .95rem;
    line-height: 1.3;
}
body.vn-auth-page .vn-auth__perks li i {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(127,193,66,.22);
    border: 1px solid rgba(182,232,154,.35);
    color: #B6E89A;
    font-size: .95rem;
}

/* Footnote — small, low-emphasis */
body.vn-auth-page .vn-auth__footnote {
    margin: 1.4rem 0 0 !important;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55) !important;
}

/* "Back to home" pill — top right of brand panel */
body.vn-auth-page .vn-auth__home-link {
    position: absolute;
    top: 1.5rem; left: 2rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.92);
    font-size: .82rem; font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s ease, transform .25s ease, color .25s ease;
    z-index: 2;
}
body.vn-auth-page .vn-auth__home-link:hover {
    background: #B6E89A; color: #0E3F1E; transform: translateY(-1px);
}

/* Hero product image: tucked at the bottom-right of the brand panel */
body.vn-auth-page .vn-auth__brand .vn-auth__hero-img {
    display: block !important;
    position: absolute;
    right: -6%; bottom: -5%;
    width: 60%; max-width: 440px;
    height: auto; object-fit: contain;
    z-index: 0 !important;
    filter: drop-shadow(0 30px 50px rgba(11,31,16,.45));
    opacity: .92;
    pointer-events: none;
    animation: vn-auth-float 7s cubic-bezier(.65, 0, .35, 1) infinite;
}
body.vn-auth-page .vn-auth__brand .vn-auth__leaf { display: block !important; opacity: .65; }

/* ── RIGHT FORM PANEL: airy card ─────────────────────────────── */
body.vn-auth-page .vn-auth__panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem !important;
    background: transparent !important;
}
body.vn-auth-page .vn-auth__panel::before,
body.vn-auth-page .vn-auth__panel::after { display: none !important; }
body.vn-auth-page .vn-auth__card,
body.vn-auth-page .vn-auth__panel--wide .vn-auth__card {
    width: 100%;
    max-width: 520px !important;
    background: transparent;
    padding: 0 !important;
    box-shadow: none;
    border: 0;
}
body.vn-auth-page .vn-auth__panel--wide .vn-auth__card { max-width: 740px !important; }

/* In-card topbar (logo + back) — only visible on mobile when the
   brand panel collapses to a strip. Hidden on desktop. */
body.vn-auth-page .vn-auth-topbar { display: none !important; }

/* Heading block on right */
body.vn-auth-page .vn-auth__heading       { margin-bottom: 1.6rem !important; }
body.vn-auth-page .vn-auth__heading h1    {
    font-size: clamp(1.7rem, 2.3vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1.12 !important;
    margin: .5rem 0 .55rem !important;
    color: #0B1F10 !important;
}
body.vn-auth-page .vn-auth__heading p     {
    color: #495849; font-size: .98rem; margin: 0 !important;
}
body.vn-auth-page .vn-auth__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #E8F4DD;
    color: #1E6B34;
    font-size: .7rem; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .85rem;
    border: 1px solid #C8E6AA;
}
body.vn-auth-page .vn-auth__eyebrow::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: #2F9C4C;
    box-shadow: 0 0 0 3px rgba(127,193,66,.25);
}

/* Field labels: keep multi-line sub-labels from pushing the input
   out of row alignment in 2-up form rows. */
body.vn-auth-page .vn-field-label {
    display: flex; align-items: flex-start; flex-wrap: wrap;
    gap: .15rem .35rem;
    min-height: 2.1em;
    margin-bottom: .3rem !important;
    line-height: 1.05;
}
body.vn-auth-page .vn-field-sub {
    color: #6B7A6E; font-weight: 400; font-size: .72rem;
}

/* Section step badges (multi-step register form) */
body.vn-auth-page .vn-form-section__step {
    background: #E8F4DD; color: #1E6B34;
    width: 26px; height: 26px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .8rem;
}

/* Keep input rows lined up in 2-col layouts */
body.vn-auth-page .vn-auth__form .row > [class*="col-"] {
    display: flex; flex-direction: column;
}
body.vn-auth-page .vn-auth__form .vn-input-wrap { margin-top: auto; }

/* ── RESPONSIVE: stack on tablets, full-bleed card on phones ── */
@media (max-width: 991.98px) {
    body.vn-auth-page .vn-auth { grid-template-columns: 1fr !important; }
    body.vn-auth-page .vn-auth__brand {
        padding: 5rem 1.5rem 2rem !important;
        min-height: 320px;
    }
    body.vn-auth-page .vn-auth__home-link { top: 1rem; left: 1rem; }
    body.vn-auth-page .vn-auth__logo { margin: 1rem 0 1.25rem !important; }
    body.vn-auth-page .vn-auth__story h2 { font-size: 1.75rem !important; }
    body.vn-auth-page .vn-auth__panel { padding: 2rem 1.25rem !important; }
}
@media (max-width: 767.98px) {
    body.vn-auth-page .vn-auth__brand .vn-auth__hero-img { width: 220px; }
    body.vn-auth-page .vn-auth__heading h1 { font-size: 1.4rem !important; }
    body.vn-auth-page .vn-auth__panel { padding: 1.5rem 1rem !important; }
}

/* ============================================================
   DASHBOARD — TrackFlows-style horizontal stat tiles
   ------------------------------------------------------------
   Inspired by the SaaS dashboard sample provided by the customer.
   • Icon on the LEFT in a soft-tint rounded square (12-14 px).
   • Label uppercase letter-spaced grey, big bold value, soft
     muted trend line below.
   • Per-card colour variants (mint, peach, sun, sky, rose,
     lilac, primary) so each row reads at a glance — same Vande
     Nature green theme, just tinted gradients for personality.
   • Minimal vertical gap between sections (per customer ask).
   ------------------------------------------------------------
   Both Member (Views/Dashboard/Dashboard.cshtml) and Admin
   (Views/VNPanel/Dashboard.cshtml) use the same .vn-stat markup,
   so this single block redesigns both dashboards.
   ============================================================ */

/* Section spacing — adjacent sections, hero, ref-card all share
   the same minimal vertical rhythm. */
body.vn-dash-body .vn-dash__container       { padding: .8rem 1rem !important; }
body.vn-dash-body .vn-dash__container > * + *,
body.vn-dash-body .vn-dash-section + .vn-dash-section,
body.vn-dash-body .vn-dash-section + section,
body.vn-dash-body section + section {
    margin-top: .55rem !important;
}
body.vn-dash-body .vn-dash-section          { gap: .4rem !important; margin: 0 !important; }
body.vn-dash-body .vn-dash-section__head    { padding: 0 !important; margin: 0 0 .15rem !important; }
body.vn-dash-body .vn-dash-section__head h2 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0B1F10 !important;
    letter-spacing: -.01em;
    margin: 0 !important;
    line-height: 1.2;
}
body.vn-dash-body .vn-dash-section__head p  {
    font-size: .78rem !important;
    color: #6B7A6E !important;
    margin: .05rem 0 0 !important;
    line-height: 1.3;
}

/* Tighten the row gutters to match the airy-but-compact feel */
body.vn-dash-body .row.g-2,
body.vn-dash-body .row.row-gap-2 {
    --bs-gutter-x: .55rem !important;
    --bs-gutter-y: .55rem !important;
}

/* Stat card — horizontal layout */
body.vn-dash-body .vn-stat {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: .95rem;
    row-gap: 0;
    align-items: center;
    padding: 1rem 1.15rem !important;
    background: #FFFFFF !important;
    border: 1px solid #EFF3E8 !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(11, 31, 16, .04);
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: transform .25s var(--vn-ease, ease),
                box-shadow .25s var(--vn-ease, ease),
                border-color .25s var(--vn-ease, ease);
}
body.vn-dash-body .vn-stat::before { display: none !important; }
body.vn-dash-body .vn-stat:hover {
    transform: translateY(-2px);
    border-color: #C8E6AA !important;
    box-shadow: 0 14px 28px rgba(30, 107, 52, .12);
    background: #FFFFFF !important;
}

/* Icon: rounded square with soft gradient tint, spans 3 rows */
body.vn-dash-body .vn-stat__icon {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #E8F4DD 0%, #C8E6AA 100%) !important;
    color: #1E6B34 !important;
    border: 0 !important;
    margin: 0 !important;
    font-size: 1.4rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.vn-dash-body .vn-stat:hover .vn-stat__icon {
    background: linear-gradient(135deg, #1E6B34 0%, #2F9C4C 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

/* Label: uppercase, letter-spaced, grey */
body.vn-dash-body .vn-stat__label {
    grid-row: 1;
    grid-column: 2;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .22em;
    color: #6B7A6E !important;
    text-transform: uppercase;
    margin: 0 0 .15rem !important;
    line-height: 1.2;
    text-align: left !important;
}

/* Value: big, bold, ink */
body.vn-dash-body .vn-stat__value {
    grid-row: 2;
    grid-column: 2;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
    color: #0B1F10 !important;
    margin: 0 !important;
    line-height: 1.1;
    word-break: break-word;
}

/* Trend: subtle one-liner */
body.vn-dash-body .vn-stat__trend {
    grid-row: 3;
    grid-column: 2;
    font-size: .72rem !important;
    font-weight: 500 !important;
    color: #6B7A6E !important;
    margin: .2rem 0 0 !important;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
body.vn-dash-body .vn-stat__trend i { color: #2F9C4C; }

/* ── Per-card color variants ─────────────────────────────────
   The view sprinkles these on individual cards so each row has
   visual variety — same green palette, different tint families. */
body.vn-dash-body .vn-stat--mint .vn-stat__icon {
    background: linear-gradient(135deg, #D7F0C4 0%, #B6E89A 100%) !important;
    color: #166B2A !important;
}
body.vn-dash-body .vn-stat--peach .vn-stat__icon {
    background: linear-gradient(135deg, #FFE6D6 0%, #FFCFB1 100%) !important;
    color: #B5511D !important;
}
body.vn-dash-body .vn-stat--sun .vn-stat__icon {
    background: linear-gradient(135deg, #FFF1C2 0%, #FFE08A 100%) !important;
    color: #946A0F !important;
}
body.vn-dash-body .vn-stat--sky .vn-stat__icon {
    background: linear-gradient(135deg, #DCEFFF 0%, #B7DBFC 100%) !important;
    color: #1A5A99 !important;
}
body.vn-dash-body .vn-stat--rose .vn-stat__icon {
    background: linear-gradient(135deg, #FFE0E6 0%, #FFC2CD 100%) !important;
    color: #A52742 !important;
}
body.vn-dash-body .vn-stat--lilac .vn-stat__icon {
    background: linear-gradient(135deg, #ECE0FF 0%, #D5BFFF 100%) !important;
    color: #5526A0 !important;
}
body.vn-dash-body .vn-stat--teal .vn-stat__icon {
    background: linear-gradient(135deg, #D1F1EA 0%, #A6E2D2 100%) !important;
    color: #0F6E5A !important;
}

/* Primary variant — deep-green hero card (used for the headline
   metric in each section). */
body.vn-dash-body .vn-stat--primary {
    background: linear-gradient(135deg, #1E6B34 0%, #0E3F1E 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF;
}
body.vn-dash-body .vn-stat--primary::after {
    content: '';
    position: absolute;
    right: -25%; top: -45%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(127,193,66,.28), transparent 70%);
    pointer-events: none;
}
body.vn-dash-body .vn-stat--primary .vn-stat__icon {
    background: rgba(255,255,255,.14) !important;
    color: #B6E89A !important;
    border: 1px solid rgba(182,232,154,.35) !important;
}
body.vn-dash-body .vn-stat--primary .vn-stat__label { color: rgba(216,242,204,.85) !important; }
body.vn-dash-body .vn-stat--primary .vn-stat__value { color: #FFFFFF !important; }
body.vn-dash-body .vn-stat--primary .vn-stat__trend { color: rgba(216,242,204,.78) !important; }
body.vn-dash-body .vn-stat--primary .vn-stat__trend i { color: #B6E89A !important; }
body.vn-dash-body .vn-stat--primary:hover .vn-stat__icon {
    background: rgba(255,255,255,.22) !important;
    color: #FFFFFF !important;
}

/* Hero banner — keep the welcome card but trim its vertical
   weight so it doesn't dominate the page. */
body.vn-dash-body .vn-dash-hero            { padding: 1rem 1.25rem !important; margin: 0 !important; }
body.vn-dash-body .vn-dash-hero h1         { font-size: 1.35rem !important; line-height: 1.15; margin: .15rem 0 .3rem !important; }
body.vn-dash-body .vn-dash-hero p          { font-size: .85rem !important; margin: 0 0 .55rem !important; line-height: 1.35; }
body.vn-dash-body .vn-dash-hero__art img   { height: 70px !important; }

/* Page-header on internal dash pages */
body.vn-dash-body .vn-page-header          { padding: .85rem 1.1rem !important; margin-bottom: .35rem !important; }
body.vn-dash-body .vn-page-header__title h1{ font-size: 1.2rem !important; line-height: 1.2; margin: .1rem 0 .15rem !important; }
body.vn-dash-body .vn-page-header__title p { font-size: .8rem !important; margin: 0 !important; }

/* Shortcuts grid — match the new card chrome */
body.vn-dash-body .vn-shortcut             {
    background: #FFFFFF !important;
    border: 1px solid #EFF3E8 !important;
    border-radius: 14px !important;
    padding: .85rem 1rem !important;
    box-shadow: 0 3px 12px rgba(11, 31, 16, .04);
}
body.vn-dash-body .vn-shortcut:hover       { border-color: #C8E6AA !important; }

/* Mobile: stack icon above the text in stat cards */
@media (max-width: 575.98px) {
    body.vn-dash-body .vn-stat {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: .85rem 1rem !important;
    }
    body.vn-dash-body .vn-stat__icon  { grid-row: auto; grid-column: 1; width: 42px !important; height: 42px !important; margin-bottom: .35rem !important; }
    body.vn-dash-body .vn-stat__label { grid-column: 1; }
    body.vn-dash-body .vn-stat__value { grid-column: 1; font-size: 1.3rem !important; }
    body.vn-dash-body .vn-stat__trend { grid-column: 1; }
}

/* ============================================================
   DASHBOARD v2 — fresh layout namespace (vn-d2-*)
   ------------------------------------------------------------
   Member + Admin dashboards rebuilt against this conflict-free
   namespace. ALL spacing comes from a single CSS-Grid `gap` —
   no margin-collapsing surprises, no fighting older rules.
   ============================================================ */
body.vn-dash-body .vn-d2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    padding: .8rem 1rem !important;
    max-width: 1480px;
    margin: 0 auto !important;
}

/* ── Greeting bar ─────────────────────────────────────────── */
.vn-d2-greet {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.15rem;
    background:
      radial-gradient(900px 360px at 100% 0%, rgba(127,193,66,.12), transparent 60%),
      linear-gradient(135deg, #FFFFFF 0%, #F8FBF3 100%);
    border: 1px solid #EAF3DD;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(11,31,16,.04);
}
.vn-d2-greet__eyebrow {
    display: inline-block;
    font-size: .65rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: #2F9C4C;
    background: #E8F4DD;
    border: 1px solid #C8E6AA;
    padding: .2rem .65rem;
    border-radius: 999px;
    margin-bottom: .25rem;
}
.vn-d2-greet h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0B1F10;
    line-height: 1.2;
}
.vn-d2-greet h1 em {
    font-style: italic;
    color: #1E6B34;
    font-weight: 800;
}
.vn-d2-greet p {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: #6B7A6E;
}
.vn-d2-greet__actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.vn-d2-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    white-space: nowrap;
    cursor: pointer;
}
.vn-d2-btn i { font-size: 1.05rem; }
.vn-d2-btn:hover { transform: translateY(-1px); }
.vn-d2-btn--ghost  { background: #FFFFFF; color: #1E6B34; border-color: #C8E6AA; }
.vn-d2-btn--ghost:hover { background: #E8F4DD; color: #0B1F10; }
.vn-d2-btn--solid  { background: linear-gradient(135deg, #1E6B34 0%, #2F9C4C 100%); color: #FFFFFF; }
.vn-d2-btn--solid:hover { box-shadow: 0 8px 18px rgba(30,107,52,.25); color: #FFFFFF; }

/* ── Section heading ──────────────────────────────────────── */
/* A row that pairs a section heading with the View Guide button.
   Used on the member dashboard where the greeting bar was hidden
   and the View Guide moved next to the first section heading. */
.vn-d2-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin: .2rem 0 0;
}
.vn-d2-section-head .vn-d2-h { margin: 0; }
.vn-d2-h {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin: .2rem 0 0;
    padding: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #0B1F10;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.vn-d2-h span {
    font-size: .75rem;
    font-weight: 500;
    color: #6B7A6E;
    letter-spacing: 0;
}
.vn-d2-h::before {
    content: '';
    display: inline-block;
    width: 4px; height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1E6B34 0%, #7FC142 100%);
    flex-shrink: 0;
    align-self: center;
}

/* ── KPI grid ─────────────────────────────────────────────── */
.vn-d2-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}
.vn-d2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vn-d2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Stat card (icon-left, label/value/sub right) ────────── */
.vn-d2-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: .9rem;
    align-items: center;
    padding: .9rem 1.05rem;
    background: #FFFFFF;
    border: 1px solid #EFF3E8;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(11,31,16,.04);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vn-d2-card:hover {
    transform: translateY(-2px);
    border-color: #C8E6AA;
    box-shadow: 0 12px 28px rgba(30,107,52,.10);
    color: inherit;
}
.vn-d2-card__icon {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    background: linear-gradient(135deg, #E8F4DD 0%, #C8E6AA 100%);
    color: #1E6B34;
    flex-shrink: 0;
}
.vn-d2-card__label {
    grid-row: 1; grid-column: 2;
    margin: 0 0 .1rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: #6B7A6E;
    text-transform: uppercase;
    line-height: 1.2;
}
.vn-d2-card__value {
    grid-row: 2; grid-column: 2;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0B1F10;
    line-height: 1.1;
    word-break: break-word;
}
.vn-d2-card__sub {
    grid-row: 3; grid-column: 2;
    margin: .15rem 0 0;
    font-size: .7rem;
    font-weight: 500;
    color: #6B7A6E;
    line-height: 1.2;
    display: inline-flex; align-items: center; gap: .25rem;
}
.vn-d2-card__sub i { color: #2F9C4C; }

/* Color variants */
.vn-d2-card--mint  .vn-d2-card__icon { background: linear-gradient(135deg,#D7F0C4 0%,#B6E89A 100%); color: #166B2A; }
.vn-d2-card--peach .vn-d2-card__icon { background: linear-gradient(135deg,#FFE6D6 0%,#FFCFB1 100%); color: #B5511D; }
.vn-d2-card--sun   .vn-d2-card__icon { background: linear-gradient(135deg,#FFF1C2 0%,#FFE08A 100%); color: #946A0F; }
.vn-d2-card--sky   .vn-d2-card__icon { background: linear-gradient(135deg,#DCEFFF 0%,#B7DBFC 100%); color: #1A5A99; }
.vn-d2-card--rose  .vn-d2-card__icon { background: linear-gradient(135deg,#FFE0E6 0%,#FFC2CD 100%); color: #A52742; }
.vn-d2-card--lilac .vn-d2-card__icon { background: linear-gradient(135deg,#ECE0FF 0%,#D5BFFF 100%); color: #5526A0; }
.vn-d2-card--teal  .vn-d2-card__icon { background: linear-gradient(135deg,#D1F1EA 0%,#A6E2D2 100%); color: #0F6E5A; }

/* Primary card — deep green hero metric */
.vn-d2-card--primary {
    background: linear-gradient(135deg,#1E6B34 0%,#0E3F1E 100%);
    border-color: transparent;
    color: #FFFFFF;
}
.vn-d2-card--primary::after {
    content: '';
    position: absolute; right: -25%; top: -45%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(127,193,66,.30), transparent 70%);
    pointer-events: none;
}
.vn-d2-card--primary .vn-d2-card__icon {
    background: rgba(255,255,255,.16);
    color: #B6E89A;
    border: 1px solid rgba(182,232,154,.35);
}
.vn-d2-card--primary .vn-d2-card__label { color: rgba(216,242,204,.82); }
.vn-d2-card--primary .vn-d2-card__value { color: #FFFFFF; }
.vn-d2-card--primary .vn-d2-card__sub   { color: rgba(216,242,204,.78); }
.vn-d2-card--primary .vn-d2-card__sub i { color: #B6E89A; }
.vn-d2-card--primary:hover { color: #FFFFFF; }

/* ── Referral card (compact) ─────────────────────────────── */
.vn-d2-ref {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem;
    background: linear-gradient(135deg, #F4FBEA 0%, #E8F4DD 100%);
    border: 1px solid #C8E6AA;
    border-radius: 14px;
}
.vn-d2-ref__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #C8E6AA;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #1E6B34;
}
.vn-d2-ref__body { min-width: 0; }
.vn-d2-ref__title {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: #0B1F10;
}
.vn-d2-ref__title small { font-weight: 500; color: #6B7A6E; font-size: .72rem; margin-left: .35rem; }
.vn-d2-ref__row {
    display: flex; gap: .35rem;
    margin-top: .35rem;
    background: #FFFFFF;
    border: 1px solid #DCEAC9;
    border-radius: 10px;
    padding: .15rem .15rem .15rem .65rem;
}
.vn-d2-ref__input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font: 500 .76rem 'JetBrains Mono', ui-monospace, monospace;
    color: #0B1F10;
    padding: .35rem 0;
}
.vn-d2-ref__copy {
    border: 0;
    background: #1E6B34; color: #FFFFFF;
    padding: .35rem .75rem;
    border-radius: 8px;
    font-size: .76rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .3rem;
    cursor: pointer;
    transition: background .2s ease;
}
.vn-d2-ref__copy:hover { background: #2F9C4C; }
.vn-d2-ref__copy.is-copied { background: #7FC142; }
.vn-d2-ref__share { display: flex; gap: .35rem; flex-shrink: 0; }
.vn-d2-ref__share a {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: 1.05rem;
    text-decoration: none;
    transition: transform .25s ease;
}
.vn-d2-ref__share a:hover { transform: translateY(-1px); }
.vn-d2-ref__share .vn-d2-ref__wa  { background: #25D366; }
.vn-d2-ref__share .vn-d2-ref__fb  { background: #1877F2; }
.vn-d2-ref__share .vn-d2-ref__opn { background: #FFFFFF; color: #1E6B34; border: 1px solid #C8E6AA; }
.vn-d2-ref__share .vn-d2-ref__opn:hover { background: #E8F4DD; }

/* ── Quick-link tile ─────────────────────────────────────── */
.vn-d2-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1rem;
    background: #FFFFFF;
    border: 1px solid #EFF3E8;
    border-radius: 14px;
    text-decoration: none;
    color: #0B1F10;
    box-shadow: 0 3px 12px rgba(11,31,16,.04);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vn-d2-link:hover { transform: translateY(-2px); border-color: #C8E6AA; box-shadow: 0 12px 24px rgba(30,107,52,.10); color: #0B1F10; }
.vn-d2-link__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E8F4DD 0%, #C8E6AA 100%);
    color: #1E6B34;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.vn-d2-link__title { display: block; font-size: .85rem; font-weight: 700; line-height: 1.2; }
.vn-d2-link__sub   { display: block; font-size: .7rem; font-weight: 500; color: #6B7A6E; margin-top: .1rem; line-height: 1.2; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .vn-d2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .vn-d2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn-d2-greet { grid-template-columns: 1fr; }
    .vn-d2-greet__actions { flex-wrap: wrap; }
    .vn-d2-ref { grid-template-columns: 1fr; }
    .vn-d2-ref__share { justify-content: flex-start; }
}
@media (max-width: 479.98px) {
    .vn-d2-grid { grid-template-columns: 1fr; }
}