/* header.css — Vanan Services unified header (namespaced, self-contained) */

.d-inline-block{ display:inline-block; }
.img-fluid{ max-width:100%; height:auto; }

#vntopbar-root a, #vntopbar-root a:hover,
.vnhd a, .vnhd a:hover{ text-decoration:none !important; }

/* Exact font weights from the live site (Inter 400/500/600/700/800). */
@font-face{font-family:Inter;font-style:normal;font-weight:400;src:local("Inter Regular"),url(../fonts/Inter-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:Inter;font-style:normal;font-weight:500;src:local("Inter Medium"),url(../fonts/Inter-Medium.woff) format("woff");font-display:swap}
@font-face{font-family:Inter;font-style:normal;font-weight:600;src:local("Inter SemiBold"),url(../fonts/Inter-SemiBold.woff) format("woff");font-display:swap}
@font-face{font-family:Inter;font-style:normal;font-weight:700;src:local("Inter Bold"),url(../fonts/Inter-Bold.woff) format("woff");font-display:swap}
@font-face{font-family:Inter;font-style:normal;font-weight:800;src:local("Inter ExtraBold"),url(../fonts/Inter-ExtraBold.woff) format("woff");font-display:swap}

/* ===== 1. TOPBAR ===== */
/* Google Translate banner hide */
html, body{ top: 0 !important; }
.skiptranslate.goog-te-banner-frame, .goog-te-banner-frame, .goog-te-balloon-frame,
iframe.goog-te-banner-frame, iframe.skiptranslate, #goog-gt-tt, .goog-tooltip,
.goog-te-gadget, .goog-te-gadget-simple, .goog-te-gadget-icon, .goog-te-spinner-pos,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-yAWNEb-L7lbkb,
body > .skiptranslate{
    display:none !important; visibility:hidden !important; height:0 !important; width:0 !important; opacity:0 !important; pointer-events:none !important;
}
.goog-text-highlight{ background:transparent !important; box-shadow:none !important; }

html body div#vntopbar-root{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    z-index: 2147483647 !important;
    background: linear-gradient(90deg,#091452 0%,#0d1c6e 50%,#091452 100%) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    font-family: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

@media screen and (min-width: 1025px){
    html body{ padding-top: 36px !important; }
    html body > .vnhd,
    html body .vnhd{ margin-top: 0 !important; }
}
@media screen and (max-width: 1024px){
    html{ padding-top: 0 !important; }
    /* Drop the topbar below the live-chat overlay ONLY while the chat is open
       (body.vn-chat-open), so the chat's close/minimize controls are reachable.
       When the chat is closed the topbar keeps its normal max z-index, so the
       language dropdown renders ABOVE the mobile header instead of being
       clipped behind it — which had been hiding the first few languages
       (English, Spanish, French, German). */
    body.vn-chat-open #vntopbar-root{ z-index: 9990 !important; }
}

#vntopbar-root *{ box-sizing: border-box; }

#vntopbar-root .container{
    max-width: 1300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
    #vntopbar-root .container{
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px){
    #vntopbar-root .container{
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

#vntopbar-root .vntopbar__inner{
    height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 14px !important;
}
#vntopbar-root .vntopbar__left,
#vntopbar-root .vntopbar__right{
    display: flex !important; align-items: center !important; gap: 12px !important;
}
#vntopbar-root .vntopbar__right{ justify-content: flex-end !important; }

#vntopbar-root .vntopbar__link{
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    color: rgba(255,255,255,0.78) !important; text-decoration: none !important;
    font-weight: 500 !important; font-size: 12.5px !important; padding: 3px 2px !important;
    background: transparent !important; border: 0 !important;
    transition: color 200ms ease;
}
#vntopbar-root .vntopbar__link:hover{ color: #fff !important; }
#vntopbar-root .vntopbar__link svg{ width:12px !important; height:12px !important; opacity:.85 !important; }
#vntopbar-root .vntopbar__email-text{ white-space: nowrap !important; font-size: 12.5px !important; }

#vntopbar-root .vntopbar__divider{
    width:1px !important; height:14px !important;
    background:rgba(255,255,255,0.14) !important; display:inline-block !important;
}

#vntopbar-root .vntopbar__status{
    display:inline-flex !important; align-items:center !important; gap:6px !important;
    color: rgba(255,255,255,0.78) !important; font-weight:500 !important; font-size:12.5px !important;
}
#vntopbar-root .vntopbar__status svg{ width:12px !important; height:12px !important; opacity:.85 !important; }
#vntopbar-root .vntopbar__status-sep{ opacity:.5 !important; margin:0 1px !important; }
#vntopbar-root .vntopbar__status-live{ color:#5fe5a8 !important; font-weight:600 !important; }
#vntopbar-root .vntopbar__livedot{
    width:7px !important; height:7px !important; border-radius:50% !important;
    background:#22c55e !important; display:inline-block !important;
    animation: vntopbar-pulse 1.8s ease-out infinite;
}
@keyframes vntopbar-pulse{
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0);    }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);    }
}

#vntopbar-root .vntopbar__wa-link,
#vntopbar-root .vntopbar__sms-link{
    display: inline-flex !important; align-items: center !important;
    padding: 2px 3px !important;
    background: transparent !important; border: 0 !important;
    text-decoration: none !important;
    opacity: .88;
    transition: opacity 200ms ease, transform 200ms ease;
}
#vntopbar-root .vntopbar__wa-link:hover,
#vntopbar-root .vntopbar__sms-link:hover{
    opacity: 1 !important;
    transform: scale(1.12);
}
#vntopbar-root .vntopbar__wa-link img,
#vntopbar-root .vntopbar__sms-link img{
    width: 18px !important; height: 18px !important;
    display: block !important;
    object-fit: contain !important;
}
@media screen and (max-width: 1024px){
    #vntopbar-root .vntopbar__wa-link img,
    #vntopbar-root .vntopbar__sms-link img{
        width: 16px !important; height: 16px !important;
    }
}
@media screen and (max-width: 480px){
    #vntopbar-root .vntopbar__sms-link{ display: none !important; }
}

#vntopbar-root .vntopbar__pill{
    position: relative !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 4px 10px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 999px !important;
    color: #fff !important; font-size: 12px !important; font-weight: 500 !important;
    cursor: pointer !important; font-family: inherit !important; line-height: 1 !important;
}
#vntopbar-root .vntopbar__pill:hover{ background: rgba(255,255,255,0.10) !important; }
#vntopbar-root .vntopbar__pill .vntopbar__globe{ width:12px !important; height:12px !important; }
#vntopbar-root .vntopbar__pill .vntopbar__caret{ width:9px !important; height:9px !important; opacity:.7 !important; transition: transform 200ms ease; }
#vntopbar-root .vntopbar__pill[aria-expanded="true"] .vntopbar__caret{ transform: rotate(180deg); }

#vntopbar-root .vntopbar__dropdown{
    position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important;
    min-width: 210px !important; max-height: 420px !important; overflow-y: auto !important;
    background: #fff !important; border: 1px solid rgba(15,29,87,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(10,19,56,0.18) !important;
    padding: 6px !important;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index: 2147483647 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(22,128,240,0.3) transparent;
}
#vntopbar-root .vntopbar__pill[aria-expanded="true"] + .vntopbar__dropdown{
    opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
#vntopbar-root .vntopbar__dropdown::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -7px !important;
    right: 18px !important;
    left: auto !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.05) !important;
    border-left: 1px solid rgba(15,29,87,0.08) !important;
    border-top: 1px solid rgba(15,29,87,0.08) !important;
    z-index: 1 !important;
}
#vntopbar-root .vntopbar__dropdown a{
    display: flex !important; align-items: center !important; gap: 0 !important;
    padding: 8px 12px !important;
    color: #1a2547 !important; text-decoration: none !important;
    font-size: 13px !important; border-radius: 8px !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Twemoji Mozilla", "Segoe UI Symbol", sans-serif !important;
}
#vntopbar-root .vntopbar__dropdown a:hover{ background: #f3f6fc !important; color: #1680F0 !important; }

/* FIX 1: Real flag images via flag-icons. Emoji flags don't render on
   Windows/Chrome (shows GB/ES/FR letters); SVG flags work everywhere. */
#vntopbar-root .vntopbar__dropdown a .vntopbar__flag{
    width: 20px !important;
    height: 15px !important;
    margin-right: 10px !important;
    border-radius: 2px !important;
    flex: 0 0 auto !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

#vntopbar-root .vntopbar__track{
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    color: rgba(255,255,255,0.78) !important; text-decoration: none !important;
    font-size: 12.5px !important; font-weight: 500 !important;
}
#vntopbar-root .vntopbar__track:hover{ color:#fff !important; }
#vntopbar-root .vntopbar__track svg{ width:12px !important; height:12px !important; }

#vntopbar-root .vntopbar__cta{
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: linear-gradient(135deg,#1680F0 0%, #2a8df5 100%) !important;
    color: #fff !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 0 18px 18px 18px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(22,128,240,0.30) !important;
    border: none !important; cursor: pointer !important; font-family: inherit !important;
    transition: all 200ms ease;
}
#vntopbar-root .vntopbar__cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(22,128,240,0.50) !important;
    color:#fff !important;
}
#vntopbar-root .vntopbar__cta svg{ width:12px !important; height:12px !important; }
#vntopbar-root .vntopbar__cta .vntopbar__cta-caret{ transition: transform 200ms ease; }

#vntopbar-root .vntopbar__po-wrap{ position: relative !important; }
#vntopbar-root .vntopbar__po-wrap[aria-expanded="true"] .vntopbar__cta-caret{ transform: rotate(180deg); }
#vntopbar-root .vntopbar__po-wrap::after{
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 12px !important;
    background: transparent !important;
    pointer-events: auto !important;
}
#vntopbar-root .vntopbar__po-wrap:hover .vntopbar__cta-caret{ transform: rotate(180deg) !important; }
#vntopbar-root .vntopbar__po-wrap:hover .vntopbar__po-dropdown{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
#vntopbar-root .vntopbar__po-dropdown{
    position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important;
    min-width: 200px !important; list-style: none !important; margin: 0 !important; padding: 6px !important;
    background: #fff !important; border: 1px solid rgba(15,29,87,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(10,19,56,0.18) !important;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index: 2147483647 !important;
}
#vntopbar-root .vntopbar__po-wrap[aria-expanded="true"] .vntopbar__po-dropdown{
    opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
#vntopbar-root .vntopbar__po-dropdown::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -7px !important;
    right: 28px !important;
    left: auto !important;
    width: 14px !important;
    height: 14px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.05) !important;
    border-left: 1px solid rgba(15,29,87,0.08) !important;
    border-top: 1px solid rgba(15,29,87,0.08) !important;
    z-index: 1 !important;
}
#vntopbar-root .vntopbar__po-dropdown li{ list-style: none !important; margin: 0 !important; }
#vntopbar-root .vntopbar__po-dropdown a{
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 10px 16px !important;
    color: #334155 !important; text-decoration: none !important;
    font-size: 14px !important; font-weight: 600 !important; border-radius: 8px !important;
    transition: background 200ms ease, color 200ms ease !important;
}
#vntopbar-root .vntopbar__po-dropdown a:hover{ background: #f1f5ff !important; color: #1680F0 !important; }
#vntopbar-root .vntopbar__po-dropdown a::before{
    content:"" !important; width: 8px !important; height: 8px !important; border-radius: 50% !important;
    background: #cfd8e8 !important; flex-shrink: 0 !important;
    transition: background 200ms ease, transform 200ms ease !important;
}
#vntopbar-root .vntopbar__po-dropdown a:hover::before{ background: #1680F0 !important; }
#vntopbar-root .vntopbar__po-dropdown a.is-active{
    background: #eef2fb !important;
    color: #091452 !important;
    font-weight: 600 !important;
}
#vntopbar-root .vntopbar__po-dropdown a.is-active::before{
    background: #1680F0 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 0 3px rgba(22,128,240,0.15) !important;
}

@media screen and (max-width: 1024px){
    #vntopbar-root .vntopbar__email-text  { display: none !important; }
    #vntopbar-root .vntopbar__divider     { display: none !important; }
    #vntopbar-root .vntopbar__track       { display: none !important; }
    #vntopbar-root .vntopbar__po-wrap,
    #vntopbar-root .vntopbar__cta         { display: none !important; }
    /* NOTE: the language pill is intentionally NOT hidden on mobile so the
       topbar switcher still works; the mobile drawer also gets its own. */
    #vntopbar-root .container             { padding-left: 14px !important; padding-right: 14px !important; }
    #vntopbar-root .vntopbar__left        { gap: 8px !important; }
    #vntopbar-root .vntopbar__right       { gap: 8px !important; }
    #vntopbar-root .vntopbar__status      { font-size: 12px !important; }
    #vntopbar-root .vntopbar__status-live { font-size: 12px !important; }
    #vntopbar-root .vntopbar__link        { padding: 3px 4px !important; }
    #vntopbar-root .vntopbar__link svg    { width: 13px !important; height: 13px !important; opacity: 1 !important; }
    #vntopbar-root .vntopbar__pill        { padding: 3px 8px !important; font-size: 11.5px !important; }
}

@media screen and (max-width: 480px){
    #vntopbar-root .vntopbar__status > span:not(.vntopbar__livedot):not(.vntopbar__status-live):not([aria-hidden]){ display: none !important; }
    #vntopbar-root .vntopbar__status-sep  { display: none !important; }
    #vntopbar-root .vntopbar__status svg  { display: none !important; }
    #vntopbar-root .vntopbar__sms-link    { display: none !important; }
}

@media (max-width: 1199px){
    #vntopbar-root .vntopbar__link, #vntopbar-root .vntopbar__track, #vntopbar-root .vntopbar__email-text{ font-size: 12px !important; }
    #vntopbar-root .vntopbar__cta{ font-size: 12px !important; padding: 5px 12px !important; }
}

/* ===== 2. DESKTOP HEADER (>=1025px) ===== */

@media screen and (min-width:1025px){
    .vn-mh, body > .vn-mh{ display:none !important; }
    /* Header stays fixed under the 36px topbar while scrolling. */
    /* margin/padding forced so the legacy style-homepage.css `header{padding:17px 0 0!important}`
       (still loaded on sub-pages) can't change the header size. */
    .vnhd{ display:block; position:fixed; top:36px !important; left:0; right:0; width:100%; min-height:89px; height:89px; background:#fff; margin:0 !important; padding:0 !important; box-sizing:border-box; z-index:1000; box-shadow:0 2px 10px rgba(15,23,42,.06); font-family:Inter,sans-serif; }
    .vnhd *{ box-sizing:border-box; }
    main.page_main_content{ margin-top:89px !important; }
    .vnhd__container{ max-width:1300px !important; width:100% !important; height:89px; margin:0 auto !important; padding:0 24px !important; display:flex !important; align-items:center; }
    .vnhd__bar{ width:100% !important; height:89px; display:flex !important; align-items:center; justify-content:space-between !important; flex-wrap:nowrap !important; }
    .vnhd__logo{ flex:0 0 196px; width:196px; max-width:196px; margin:0 30px 0 -9px; display:flex; align-items:center; }
    .vnhd__logo > a{ display:inline-block; line-height:0; }
    .vnhd__logo img{ width:196px; height:40px; object-fit:contain; object-position:left center; display:block; }
    /* nav shrinks to its content and is pushed right by the bar's space-between,
       so links + phone + CTA form ONE right-aligned block with the logo on the
       left — matching the live site (not a centered cluster). */
    .vnhd__nav{ flex:0 1 auto !important; min-width:0; display:flex !important; align-items:center; width:auto !important; }
    .vnhd__menu-wrap{ width:auto; }
    .vnhd__menu{ display:flex !important; align-items:center; justify-content:flex-start !important; flex-wrap:nowrap !important; margin:0 !important; padding:0 !important; list-style:none; gap:4px !important; width:auto !important; }
    .vnhd__li{ position:relative; list-style:none; white-space:nowrap; flex:0 0 auto; margin:0; padding:0; }
    .vnhd__li.vnhd__contact:first-of-type{ margin-left:14px !important; }
    .vnhd__link{ display:inline-flex; align-items:center; padding:14px 14px; font-size:16px; font-weight:500; line-height:1.2; color:#334155; text-decoration:none; white-space:nowrap; cursor:pointer; transition:color .2s ease; font-family:Inter,sans-serif; }
    .vnhd__li:hover > .vnhd__link, .vnhd__link:hover{ color:#1680F0; }
    .vnhd__has-caret::after{ display:none; }
    .vnhd__sub{ position:absolute; top:100%; left:0; min-width:210px; margin:0; padding:6px 0; list-style:none; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); border-radius:0 0 10px 10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:1000; }
    .vnhd__li:hover > .vnhd__sub{ opacity:1; visibility:visible; transform:translateY(0); }
    .vnhd__sub::before{ content:""; position:absolute; top:-7px; left:24px; width:14px; height:14px; background:#fff; transform:rotate(45deg); box-shadow:-1px -1px 2px rgba(0,0,0,.05); }
    .vnhd__sub > li{ margin:0; padding:0; list-style:none; }
    .vnhd__sub > li > a{ display:block; padding:9px 20px; font-size:15px; font-weight:600; color:#334155; text-decoration:none; transition:color .15s ease, background .15s ease; }
    .vnhd__sub > li > a:hover{ color:#1680F0; background:#f1f5ff; }
    .vnhd__li:last-child > .vnhd__sub{ left:auto; right:0; }
    .vnhd__li:last-child > .vnhd__sub::before{ left:auto; right:24px; }
    .vnhd__phone{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px !important; margin:0 !important; font-size:16px; font-weight:600; color:#22c55e !important; text-decoration:none; white-space:nowrap; }
    .vnhd__phone img{ width:18px; height:18px; object-fit:contain; display:inline-block; }
    .vnhd__cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin:0 0 0 16px !important; padding:8px 11px !important; font-size:16px; font-weight:500; line-height:1.3; color:#334155; text-decoration:none; border:1px solid #1680F0; border-radius:0 25px 25px 25px; box-shadow:0 1px 4px rgba(0,0,0,.25); overflow:hidden; z-index:1; transition:color .7s ease; }
    .vnhd__cta:hover{ color:#fff; }
    .vnhd__blobs{ position:absolute; inset:0; z-index:-1; filter:url(#vnhd-goo); overflow:hidden; }
    .vnhd__blobs > span{ position:absolute; width:37%; height:100%; background:#1680F0; border-radius:100%; transform:scale(1.4) translateY(125%); transition:all .7s ease; }
    .vnhd__blobs > span:nth-child(1){ left:-3%; } .vnhd__blobs > span:nth-child(2){ left:30%; transition-delay:60ms; } .vnhd__blobs > span:nth-child(3){ left:64%; transition-delay:25ms; }
    .vnhd__cta:hover .vnhd__blobs > span{ transform:scale(1.4) translateY(0); }
}
@media screen and (min-width:1200px) and (max-width:1399px){ .vnhd__container{ padding:0 16px; } .vnhd__link{ padding:13px 12px; } .vnhd__cta{ padding:8px 14px; font-size:13px; } .vnhd__phone{ font-size:13px; padding:6px 8px; } .vnhd__logo{ flex:0 0 170px; width:170px; max-width:170px; margin-right:16px; } .vnhd__logo img{ width:170px; height:auto; } }
@media screen and (min-width:1025px) and (max-width:1199px){ .vnhd__container{ padding:0 12px; } .vnhd__menu{ gap:2px; } .vnhd__link{ padding:10px 9px; font-size:13px; } .vnhd__cta{ padding:7px 12px; font-size:12.5px; margin-left:8px; } .vnhd__phone{ font-size:13px; padding:6px 6px; gap:4px; } .vnhd__logo{ flex:0 0 150px; width:150px; max-width:150px; margin-right:10px; } .vnhd__logo img{ width:150px; max-width:150px; height:auto; } }


/* ===== 3. MOBILE HEADER (<=1024px) ===== */
@media screen and (max-width: 1024px) {
    .vnhd { display: none !important; }
    header .mobile_cta_btn, .mobile_cta_btn { display: none !important; }
    html, body { overflow-x: hidden !important; transform: none !important; filter: none !important; perspective: none !important; }
    .vn-mh {
        display: block; width: 100vw; max-width: 100vw; margin: 0; padding: 0;
        background: #fff; position: fixed !important;
        top: 36px !important;
        left: 0 !important; right: 0 !important;
        z-index: 9999 !important; box-sizing: border-box; font-family: inherit;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        padding-top: env(safe-area-inset-top, 0px);
    }
    .vn-mh * { box-sizing: border-box; }
    body { padding-top: calc(var(--vn-mh-height, 120px) + 36px + env(safe-area-inset-top, 0px)) !important; }
    html { padding-top: 0 !important; }
    main.page_main_content { margin-top: 0 !important; padding-top: 0 !important; }
    .vn-mh__top {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        width: 100% !important; padding: 10px 16px !important;
        background: #ffffff !important;
        height: 64px !important; min-height: 64px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #eef2f7 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .vn-mh__logo, .vn-mh__logo *, .vn-mh .vn-mh__logo, .vn-mh .vn-mh__logo > span {
        visibility: visible !important; opacity: 1 !important;
    }
    .vn-mh__logo {
        display: inline-flex !important; align-items: center !important; gap: 10px !important;
        line-height: 1 !important; text-decoration: none !important; height: 44px !important;
        flex: 0 1 auto !important; min-width: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .vn-mh__logo img,
    .vn-mh .vn-mh__logo img,
    div.vn-mh .vn-mh__top .vn-mh__logo img {
        display: block !important; width: auto !important; height: 40px !important;
        max-height: 40px !important; max-width: 180px !important;
        min-width: 120px !important;
        object-fit: contain !important;
        background: transparent !important;
        filter: none !important;
        -webkit-filter: none !important;
        visibility: visible !important; opacity: 1 !important;
        mix-blend-mode: normal !important;
    }
    .vn-mh__logo-fallback {
        display: none;
        color: #091452 !important;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
    .vn-mh__logo.is-fallback img { display: none !important; }
    .vn-mh__logo.is-fallback .vn-mh__logo-fallback { display: inline-block !important; }

    .vn-mh__burger {
        display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
        background: transparent; border: 0; padding: 8px; cursor: pointer; margin: 0; outline: none;
        width: 44px; height: 44px; flex: 0 0 auto;
        position: relative !important;
        z-index: 2 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .vn-mh__burger * { pointer-events: none !important; }
    .vn-mh__burger span {
        display: block; width: 26px; height: 3px; margin: 3px 0;
        background: #091452; border-radius: 2px;
        transition: transform 250ms ease, opacity 150ms ease;
    }
    .vn-mh.is-open .vn-mh__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .vn-mh.is-open .vn-mh__burger span:nth-child(2) { opacity: 0; }
    .vn-mh.is-open .vn-mh__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .vn-mh__cta {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 12px 16px; background: #fff;
        border-bottom: 1px solid #eef2f7; gap: 10px; min-height: 52px; box-sizing: border-box;
    }
    .vn-mh__phone {
        display: inline-flex; align-items: center; gap: 6px;
        color: #22c55e; font-weight: 600; font-size: 15px; text-decoration: none;
        white-space: nowrap; min-height: 44px; padding: 4px 6px;
    }
    .vn-mh__phone svg { flex: 0 0 auto; }
    .vn-mh__quote {
        display: inline-flex; align-items: center; justify-content: center;
        background: #1680F0; color: #fff; padding: 9px 18px;
        border-radius: 0 22px 22px 22px; font-size: 14px; font-weight: 500;
        text-decoration: none; white-space: nowrap; min-height: 40px;
    }

    .vn-mh.is-open { z-index: 2147483646 !important; }

    .vn-mh__drawer {
        position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
        width: 82% !important; max-width: 340px !important; min-width: 280px !important;
        height: 100vh !important; height: 100dvh !important;
        background: #ffffff !important; box-shadow: -4px 0 18px rgba(0,0,0,.15) !important;
        transform: translateX(100%) !important; transition: transform 320ms ease !important;
        z-index: 2 !important; overflow-y: auto !important; overflow-x: hidden !important;
        padding: 20px 0 calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important;
        box-sizing: border-box !important; -webkit-overflow-scrolling: touch;
    }
    .vn-mh.is-open .vn-mh__drawer { transform: translateX(0) !important; }
    .vn-mh__drawer-close {
        position: absolute; top: 8px; right: 8px;
        width: 44px; height: 44px; border: 0; background: transparent;
        cursor: pointer; font-size: 22px; color: #334155; line-height: 1;
        display: flex; align-items: center; justify-content: center;
    }
    .vn-mh__drawer-close:hover { color: #1680F0; }
    .vn-mh__drawer > nav { display: block; width: 100%; margin: 0; padding: 0; }
    .vn-mh__nav { list-style: none; margin: 48px 0 0; padding: 0; width: 100%; display: block; }
    .vn-mh__nav > li { border-bottom: 1px solid #eef2f7; display: block; width: 100%; }
    .vn-mh__nav > li > a, .vn-mh__nav > li > .vn-mh__group {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 48px; padding: 14px 20px;
        color: #091452; font-size: 15px; font-weight: 600;
        text-decoration: none; background: transparent; border: 0;
        cursor: pointer; text-align: left; font-family: inherit; box-sizing: border-box;
    }
    .vn-mh__nav > li > a:hover, .vn-mh__nav > li > .vn-mh__group:hover { color: #1680F0; }
    .vn-mh__group::after,
    .vn-mh__nav > li > a:not(.vn-mh__place-order)::after {
        content: ""; display: inline-block; width: 10px; height: 10px;
        border-right: 2px solid #334155; border-bottom: 2px solid #334155;
        transform: rotate(-45deg); margin-left: 10px; flex: 0 0 auto;
        transition: transform 250ms ease;
    }
    .vn-mh__nav > li.is-open .vn-mh__group::after { transform: rotate(45deg); }
    .vn-mh__nav > li > a.vn-mh__place-order::after { display: none !important; }
    .vn-mh__sub {
        list-style: none; margin: 0; padding: 0 0 8px; background: #f8fafc;
        display: none; width: 100%; box-sizing: border-box;
    }
    .vn-mh__nav > li.is-open > .vn-mh__sub { display: block !important; }
    .vn-mh__sub > li { display: block; width: 100%; }
    .vn-mh__sub > li > a {
        display: block; min-height: 44px; padding: 12px 32px;
        color: #475569; font-size: 14px; text-decoration: none;
        line-height: 1.4; box-sizing: border-box; width: 100%;
    }
    .vn-mh__sub > li > a:hover { color: #1680F0; background: #eef5ff; }

    .vn-mh__nav > li > a.vn-mh__place-order,
    .vn-mh__place-order {
        display: flex !important; width: calc(100% - 40px) !important;
        margin: 16px 20px !important; padding: 12px 18px !important;
        text-align: center !important; background: #1680F0 !important;
        color: #fff !important; border-radius: 0 25px 25px 25px !important;
        font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important;
        box-shadow: 0 2px 8px rgba(22, 128, 240, 0.25);
        justify-content: center !important; min-height: 44px; box-sizing: border-box !important;
    }
    .vn-mh__nav > li > a.vn-mh__place-order:hover,
    .vn-mh__place-order:hover { background: #0f6fd8 !important; color: #fff !important; }
    .vn-mh__nav > li:has(> a.vn-mh__place-order) { border-bottom: 0 !important; }
    .vn-mh__backdrop {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        inset: 0 !important; background: rgba(0,0,0,.45) !important;
        z-index: 1 !important; opacity: 0 !important; pointer-events: none !important;
        transition: opacity 320ms ease !important; display: block !important;
    }
    .vn-mh.is-open .vn-mh__backdrop { opacity: 1 !important; pointer-events: auto !important; }
    body.vn-mh-locked { overflow: hidden !important; }

    body.vn-mh-locked #vntopbar-root { display: none !important; }
    body.vn-mh-locked .vn-mh { top: 0 !important; }
    body.vn-mh-locked .vn-mh__drawer { top: 0 !important; height: 100vh !important; height: 100dvh !important; }
    body.vn-mh-locked .vn-mh__backdrop { top: 0 !important; }

    /* Topbar and mobile header intentionally stay FIXED and visible while the
       live chat is open — they are no longer hidden. (The previous rules that
       set display:none on #vntopbar-root / .vn-mh when chat opened are removed.) */
}

@media screen and (max-width: 480px) {
    .vn-mh__top { padding: 8px 14px !important; }
    .vn-mh__cta { padding: 10px 14px; }
    .vn-mh__logo { height: 40px !important; padding: 0 !important; }
    .vn-mh__logo img { max-width: 160px !important; height: 36px !important; max-height: 36px !important; }
    .vn-mh__phone { font-size: 14px; }
    .vn-mh__quote { padding: 8px 16px; font-size: 13px; }
}
@media screen and (max-width: 380px) {
    .vn-mh__logo { height: 36px !important; padding: 0 !important; }
    .vn-mh__logo img { max-width: 140px !important; height: 32px !important; max-height: 32px !important; }
    .vn-mh__drawer { width: 88% !important; }
    .vn-mh__quote { padding: 7px 12px; font-size: 12.5px; }
    .vn-mh__phone { font-size: 13px; }
}
@media screen and (max-width: 340px) {
    .vn-mh__cta { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
    .vn-mh__phone, .vn-mh__quote { width: 100%; justify-content: center; }
}