/* Header closely follows the Cavaha reference while retaining VIPAutopro content and controls. */
.vap-auto-header { position: relative; z-index: 20; width: 100%; max-width: none; margin-inline: 0; background: var(--vap-primary); }
.vap-auto-header .wp-block-group { margin-block-start: 0; }
.vap-auto-utility { min-height: 43px; background: var(--vap-primary); color: var(--vap-white); border-bottom: 1px solid rgb(255 255 255 / 45%); font-size: 14px; }
.vap-auto-utility__inner { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: min(100% - 2 * var(--vap-gutter), var(--vap-container)); min-height: 43px; margin-inline: auto; padding-inline: 0; }
.vap-auto-utility__facts,.vap-auto-utility__meta { display: flex; align-items: center; gap: 22px; }
.vap-auto-utility__facts span { white-space: nowrap; }
.vap-auto-utility__facts i { margin-right: 5px; font-style: normal; }
.vap-auto-header-main { background: var(--vap-primary); }
.vap-auto-header-main__top { box-sizing: border-box; display: grid; grid-template-columns: 210px minmax(300px, 442px) minmax(130px, 1fr) auto; grid-template-rows: 44px; align-content: center; align-items: center; column-gap: 24px; width: min(100% - 2 * var(--vap-gutter), var(--vap-container)); height: 80px; margin-inline: auto; padding-inline: 0; }
.vap-auto-header .brand { grid-column: 1; grid-row: 1; justify-self: start; flex: 0 0 auto; align-items: flex-start; margin-inline: 0 !important; } /* The constrained layout adds auto side margins, which would centre the logo. */
.vap-auto-header .brand svg { width: auto; height: 48px; max-width: 205px; }
.vap-auto-header .brand .tagline { display: none; }
.vap-auto-header .vap-auto-search { grid-column: 2 / 4; grid-row: 1; width: 100%; max-width: 100%; min-width: 0; margin: 0; }
.vap-auto-header .vap-auto-search .wp-block-search__label.screen-reader-text { width: 1px; }
.vap-auto-header .vap-auto-search .wp-block-search__inside-wrapper { box-sizing: border-box; display: flex; align-items: stretch; height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--vap-white); overflow: hidden; }
.vap-auto-header .vap-auto-search .wp-block-search__input { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 14px; border: 0; border-radius: 0; background: var(--vap-white); color: var(--vap-dark); font: inherit; font-size: 15px; outline: none; }
.vap-auto-header .vap-auto-search .wp-block-search__button,.vap-auto-header .vap-auto-search .wp-block-search__button:hover,.vap-auto-header .vap-auto-search .wp-block-search__button:focus { flex: 0 0 130px; min-width: 130px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: var(--vap-dark); color: var(--vap-white); font-size: 16px; font-weight: 700; cursor: pointer; }
.vap-auto-header .vap-contact-inline { grid-column: 4; grid-row: 1; display: flex; align-items: center; gap: 12px; margin: 0; }
.vap-auto-header .vap-contact-inline__phone { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 24px; background: var(--vap-white); color: var(--vap-primary); white-space: nowrap; text-decoration: none; }
.vap-auto-header .vap-contact-inline__phone > svg { box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--vap-dark); color: var(--vap-white); }
.vap-auto-header .vap-contact-inline__phone span { color: var(--vap-primary); font-size: 0; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.vap-auto-header .vap-contact-inline__phone span::before { content: "GỌI MUA HÀNG"; display: block; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 2px; background: var(--vap-dark); color: var(--vap-white); font-size: 12px; font-weight: 700; }
.vap-auto-header .vap-contact-inline__phone b { display: block; color: var(--vap-primary); font-size: 16px; font-weight: 700; line-height: 1.1; }
.vap-auto-header .vap-contact-inline__cart { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; width: 64px; color: var(--vap-white); font-size: 14px; text-decoration: none; }
.vap-auto-header .vap-contact-inline__cart::after { content: "Giỏ hàng"; }
.vap-auto-header .vap-contact-inline__cart svg { width: 26px; height: 26px; }
.vap-auto-header .vap-contact-inline__cart .vap-cart-count { top: -2px; right: 10px; background: var(--vap-dark); color: var(--vap-white); font-size: 12px; font-weight: 700; }
.vap-auto-category-row { background: var(--vap-bg-2); }
.vap-auto-category-row__inner { box-sizing: border-box; display: flex; align-items: center; gap: 24px; width: min(100% - 2 * var(--vap-gutter), var(--vap-container)); height: 60px; margin-inline: auto; padding-inline: 0; }
.vap-auto-category-row .vap-car-menu { flex: 0 0 272px; gap: 0; }
.vap-auto-category-row .vap-car-menu > a { display: none; }
.vap-auto-category-row .vap-car-menu .vap-mega summary { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 272px; height: 44px; padding: 0 16px; border-radius: 3px; background: var(--vap-dark); color: var(--vap-white); font-size: 0; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.vap-auto-category-row .vap-car-menu .vap-mega summary::marker { content: ""; }
.vap-auto-category-row .vap-car-menu .vap-mega summary::before { content: "☰  DANH MỤC SẢN PHẨM"; font-size: 14px; }
.vap-auto-category-row .vap-car-menu .vap-mega summary svg { margin-left: 8px; }
.vap-auto-category-row .vap-car-menu { position: relative; }
/* Dropdown: a plain list right under the button, same width, left edges aligned. */
.vap-auto-category-row .vap-mega__list { position: absolute; top: calc(100% + 7px); left: 0; z-index: 40; box-sizing: border-box; width: 100%; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--vap-line); border-radius: 0 0 var(--vap-radius-sm) var(--vap-radius-sm); background: var(--vap-white); }
.vap-auto-category-row .vap-mega__list li + li { border-top: 1px solid var(--vap-line); }
.vap-auto-category-row .vap-mega__list a { display: block; padding: 10px 16px; color: var(--vap-text); font-size: 15px; line-height: 1.4; text-decoration: none; }
.vap-auto-category-row .vap-mega__list a:hover,
.vap-auto-category-row .vap-mega__list a:focus-visible { color: var(--vap-primary); }
.vap-auto-category-row .vap-mega__list .vap-mega__all { color: var(--vap-primary); font-weight: 700; }
.vap-auto-categories { display: flex; align-items: center; align-self: stretch; justify-content: flex-start; flex: 1 1 auto; gap: 32px; min-width: 0; margin: 0; }
.vap-auto-categories a { align-self: center; margin: 0; }
.vap-auto-categories a { color: var(--vap-dark); font-size: 15px; font-weight: 400; line-height: 1.25; text-decoration: none; white-space: nowrap; }
.vap-auto-categories a span { margin-right: 4px; color: var(--vap-primary); }
.vap-auto-categories a:hover,.vap-auto-categories a:focus-visible { color: var(--vap-primary); }
.vap-bottom-bar { display: none; }
.vap-bottom-bar__item[hidden] { display: none !important; }
@media (max-width: 1100px) and (min-width: 768px) {
 .vap-auto-header-main__top { grid-template-columns: 160px minmax(250px,1fr) auto; column-gap: 14px; }
 .vap-auto-header .brand svg { max-width: 160px; }
 .vap-auto-header .vap-auto-search { grid-column: 2; }
 .vap-auto-header .vap-contact-inline { grid-column: 3; }
 .vap-auto-header .vap-contact-inline__phone { display: none; }
 .vap-auto-category-row__inner { gap: 12px; }
 .vap-auto-category-row .vap-car-menu { flex-basis: 220px; }
 .vap-auto-category-row .vap-car-menu .vap-mega summary { width: 220px; }
 .vap-auto-categories { gap: 8px; }
 .vap-auto-categories a { font-size: 13px; }
}
@media (max-width: 767px) {
 .vap-auto-utility { min-height: 43px; }
 .vap-auto-utility__inner { min-height: 43px; }
 .vap-auto-utility__facts { display: none; }
 .vap-auto-utility__meta { width: 100%; justify-content: space-between; gap: 8px; font-size: 14px; }
 .vap-auto-header-main__top { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 34px 42px; gap: 6px 10px; min-height: 0; height: auto; padding: 10px 0; }
 .vap-auto-header .brand { grid-column: 1; grid-row: 1; max-width: 180px; }
 .vap-auto-header .brand svg { width: auto; height: 34px; max-width: 100%; }
 .vap-auto-header .vap-contact-inline { grid-column: 2; grid-row: 1; }
 .vap-auto-header .vap-contact-inline__phone { display: none; }
 .vap-auto-header .vap-contact-inline__cart { flex-direction: row; gap: 4px; width: auto; min-width: 44px; min-height: 44px; font-size: 14px; }
 .vap-auto-header .brand-link { display: flex; align-items: center; min-height: 44px; }
 .vap-auto-header .vap-contact-inline__cart::after { content: ""; }
 .vap-auto-header .vap-auto-search { grid-column: 1 / -1; grid-row: 2; }
 .vap-auto-header .vap-auto-search .wp-block-search__inside-wrapper { height: 42px; }
 .vap-auto-header .vap-auto-search .wp-block-search__button,.vap-auto-header .vap-auto-search .wp-block-search__button:hover,.vap-auto-header .vap-auto-search .wp-block-search__button:focus { flex-basis: 100px; min-width: 100px; font-size: 15px; }
 .vap-auto-category-row__inner { height: 48px; padding: 6px 0; }
 .vap-auto-category-row .vap-car-menu { display: none; }
 .vap-auto-categories { justify-content: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: none; }
 .vap-auto-categories::-webkit-scrollbar { display: none; }
 .vap-auto-categories a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--vap-line); border-radius: var(--vap-radius-sm); font-size: 14px; }
 .vap-auto-category-row { display: none; }
 .vap-bottom-bar { box-sizing: content-box; position: fixed; z-index: 50; inset: auto 0 0; display: flex; align-items: center; justify-content: stretch; height: 56px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--vap-line); background: var(--vap-surface); }
 .vap-bottom-bar__item:first-child { display: none; }
 .vap-bottom-bar__item { position: relative; box-sizing: border-box; display: flex; flex: 1 1 25%; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-width: 0; min-height: 56px; color: var(--vap-text); font-size: 14px; font-weight: 600; text-decoration: none; }
 .vap-bottom-bar__item svg { width: 20px; height: 20px; }
 .vap-bottom-bar__item > svg { margin: 5px 0; }
 .vap-bottom-bar__label { line-height: 1.2; }
 .vap-bottom-bar__item:hover,.vap-bottom-bar__item:focus-visible { color: var(--vap-primary); }
 .vap-bottom-bar__item .vap-bottom-bar__bubble { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 0; border-radius: 9px; color: #fff; }
 .vap-bottom-bar__item--zalo .vap-bottom-bar__bubble { background: var(--vap-zalo); }
 .vap-bottom-bar__item--messenger .vap-bottom-bar__bubble { background: var(--vap-messenger); }
 .vap-bottom-bar__item .vap-bottom-bar__bubble svg { width: 22px; height: 22px; }
 .vap-bottom-bar__item--zalo:hover,.vap-bottom-bar__item--messenger:hover { color: var(--vap-text); }
 .vap-bottom-bar__item .vap-cart-count { top: 2px; right: calc(50% - 19px); background: var(--vap-accent); color: var(--vap-text); }
 .vap-bottom-bar__item:last-child .vap-bottom-bar__label { font-size: 0 !important; }
 .vap-bottom-bar__item:last-child .vap-bottom-bar__label::after { content: "Giỏ hàng"; font-size: 14px; }
 body:has(.vap-bottom-bar) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
.vap-side-bar { position: fixed; z-index: 49; bottom: 24px; left: 12px; display: flex; flex-direction: column; gap: 14px; }
.vap-side-bar__item { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vap-primary); color: #fff; text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.vap-side-bar__item--zalo { background: var(--vap-zalo); }
.vap-side-bar__item--brand-messenger { background: var(--vap-messenger); }
.vap-side-bar__item:focus-visible { outline: 2px solid var(--vap-dark); outline-offset: 2px; }
.vap-side-bar__icon { display: grid; place-items: center; }
.vap-side-bar__icon svg { width: 24px; height: 24px; }
.vap-side-bar__label { position: absolute; left: calc(100% + 8px); padding: 6px 10px; border-radius: var(--vap-radius-sm); background: var(--vap-dark); color: #fff; font-size: 14px; line-height: 1.3; white-space: nowrap; clip-path: inset(50%); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.vap-side-bar__item:focus-visible .vap-side-bar__label { clip-path: none; opacity: 1; }
@media (hover: hover) {
 .vap-side-bar__item:hover { transform: scale(1.08); }
 .vap-side-bar__item:hover .vap-side-bar__label { clip-path: none; opacity: 1; }
}
body.woocommerce-cart .vap-side-bar,body.woocommerce-checkout .vap-side-bar { display: none; }
@media (max-width: 767px) {
 .vap-side-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vap-auto-header *, .vap-bottom-bar *, .vap-side-bar * { transition: none !important; } .vap-side-bar__item:hover { transform: none; } }