/* Header + footer chung 2026 (Figma "Website – Trang chủ"). Tiền tố vh- (header) / vf- (footer). */
:root {
    --vh-indigo: #2D3682;
    --vh-indigo-900: #232870;
    --vh-indigo-50: #eef0fa;
    --vh-amber: #F59E0B;
    --vh-ink: #111827;
    --vh-muted: #6b7280;
    --vh-line: #e5e7eb;
    --vh-footer: #23286b;
}
.vh-body { font-family: Roboto, system-ui, sans-serif; }
.vh-wrap { width: 100%; margin: 0 auto; padding: 0 12px; }
@media (min-width: 576px) { .vh-wrap { max-width: 540px; } }
@media (min-width: 768px) { .vh-wrap { max-width: 720px; } }
@media (min-width: 992px) { .vh-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .vh-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .vh-wrap { max-width: 1320px; } }
.vh-top a, .vh-main a, .vh-nav a, .vh-drawer a, .vf a { text-decoration: none; }
.vh-top svg, .vh-main svg, .vh-nav svg, .vh-drawer svg, .vf svg { flex: none; }

/* ===== Thanh trên cùng ===== */
.vh-top { background: var(--vh-indigo-900); color: rgba(255, 255, 255, .85); font-size: 13px; }
.vh-top__inner { display: flex; align-items: center; gap: 24px; height: 36px; }
.vh-top__item { display: inline-flex; align-items: center; gap: 6px; color: inherit !important; white-space: nowrap; }
.vh-top__item svg { color: var(--vh-amber); }
.vh-top__hotline b, .vh-top__hello b { color: #fff; font-weight: 500; }
.vh-top__spacer { flex: 1; }
.vh-top a.vh-top__item:hover { color: #fff !important; }

/* ===== Hàng chính ===== */
.vh-main { position: sticky; top: 0; z-index: 1030; background: var(--vh-indigo); color: #fff; box-shadow: 0 2px 10px rgba(17, 24, 39, .12); }
.vh-main__inner { display: flex; align-items: center; gap: 20px; height: 88px; }
.vh-logo { flex: none; display: block; background: #fff; border-radius: 10px; padding: 4px 8px; }
.vh-logo img { display: block; height: 48px; width: auto; }
.vh-search { flex: 1; min-width: 0; display: flex; align-items: center; background: #fff; border-radius: 12px; padding: 4px 4px 4px 14px; height: 52px; border: 2px solid transparent; transition: border-color .2s; }
.vh-search:focus-within { border-color: var(--vh-amber); }
.vh-search__icon { color: #9ca3af; }
.vh-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--vh-ink); padding: 0 10px; height: 100%; }
.vh-search input::-webkit-search-cancel-button { cursor: pointer; }
.vh-search button { flex: none; border: 0; background: var(--vh-indigo); color: #fff; font-weight: 500; font-size: 15px; border-radius: 9px; height: 100%; padding: 0 22px; cursor: pointer; transition: background .2s; }
.vh-search button:hover { background: var(--vh-indigo-900); }
.vh-quick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 10px; background: var(--vh-amber); color: #1f1300 !important; font-weight: 500; font-size: 15px; transition: background .2s, transform .2s; }
.vh-quick:hover { background: #e08e00; transform: translateY(-1px); }
.vh-action { flex: none; display: inline-flex; align-items: center; gap: 10px; color: #fff !important; }
.vh-action__icon { position: relative; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; transition: background .2s; }
.vh-action:hover .vh-action__icon { background: rgba(255, 255, 255, .22); }
.vh-action__text { display: flex; flex-direction: column; line-height: 1.25; }
.vh-action__text small { font-size: 12px; color: rgba(255, 255, 255, .75); }
.vh-action__text b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.vh-cart .count-item-cart { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--vh-indigo); }
.vh-account { position: relative; flex: none; }
.vh-account__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(17, 24, 39, .18); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.vh-account__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.vh-account:hover .vh-account__menu, .vh-account:focus-within .vh-account__menu { opacity: 1; visibility: visible; transform: none; }
.vh-account__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--vh-ink) !important; font-size: 14px; }
.vh-account__menu a:hover { background: var(--vh-indigo-50); color: var(--vh-indigo) !important; }
.vh-icon-btn { border: 0; background: transparent; color: inherit; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.vh-burger { display: none; color: #fff; margin-left: -8px; }

/* ===== Thanh menu ===== */
.vh-nav { background: #fff; border-bottom: 1px solid var(--vh-line); position: relative; z-index: 1020; }
.vh-nav__inner { display: flex; align-items: center; gap: 20px; height: 52px; }
.vh-cats { position: relative; flex: none; }
.vh-cats__btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--vh-indigo-50); color: var(--vh-indigo); font-weight: 500; font-size: 15px; cursor: pointer; }
.vh-cats__panel { position: absolute; left: 0; top: calc(100% + 7px); width: min(880px, calc(100vw - 24px)); background: #fff; border-radius: 14px; box-shadow: 0 20px 48px rgba(17, 24, 39, .18); padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.vh-cats__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.vh-cats:hover .vh-cats__panel, .vh-cats.is-open .vh-cats__panel, .vh-cats:focus-within .vh-cats__panel { opacity: 1; visibility: visible; transform: none; }
.vh-cats__item { position: relative; }
.vh-cats__item > a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--vh-ink) !important; font-size: 14px; line-height: 1.35; }
.vh-cats__item > a:hover { background: var(--vh-indigo-50); color: var(--vh-indigo) !important; }
.vh-cats__sub { padding: 0 0 6px 24px; display: flex; flex-direction: column; }
.vh-cats__sub a { padding: 4px 0; font-size: 13px; color: var(--vh-muted) !important; }
.vh-cats__sub a:hover { color: var(--vh-indigo) !important; }
.vh-cats__all { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 8px; padding: 8px 12px; color: var(--vh-indigo) !important; font-weight: 500; font-size: 14px; }
.vh-menu { display: flex; align-items: stretch; gap: 4px; list-style: none; margin: 0; padding: 0; height: 100%; }
.vh-menu > li { position: relative; display: flex; }
.vh-menu > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 0 14px; color: var(--vh-ink) !important; font-weight: 500; font-size: 15px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; transition: color .15s, border-color .15s; }
.vh-menu > li > a svg { color: var(--vh-muted); }
.vh-menu > li > a:hover, .vh-menu > li > a.is-active { color: var(--vh-indigo) !important; }
.vh-menu > li > a.is-active { border-bottom-color: var(--vh-indigo); }
.vh-menu__drop { position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(17, 24, 39, .16); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.vh-menu__has:hover .vh-menu__drop, .vh-menu__has:focus-within .vh-menu__drop { opacity: 1; visibility: visible; transform: none; }
.vh-menu__drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--vh-ink) !important; font-size: 14px; }
.vh-menu__drop a:hover { background: var(--vh-indigo-50); color: var(--vh-indigo) !important; }
.vh-nav__badges { margin-left: auto; display: flex; gap: 20px; font-size: 13px; color: #374151; }
.vh-nav__badges span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vh-nav__badges svg { color: #16a34a; }
.vh-chips { display: none; }

/* ===== Menu điện thoại ===== */
.vh-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
.vh-drawer.is-open { visibility: visible; }
.vh-drawer__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); opacity: 0; transition: opacity .25s; }
.vh-drawer.is-open .vh-drawer__backdrop { opacity: 1; }
.vh-drawer__panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(340px, 86vw); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
.vh-drawer.is-open .vh-drawer__panel { transform: none; }
.vh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--vh-line); color: var(--vh-ink); }
.vh-drawer__head img { height: 40px; width: auto; }
.vh-drawer__user { padding: 14px 16px; background: var(--vh-indigo-50); font-size: 14px; color: var(--vh-ink); }
.vh-drawer__user > span { display: block; margin-bottom: 10px; }
.vh-drawer__user div { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-drawer__user a { flex: 1; text-align: center; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--vh-line); color: var(--vh-indigo) !important; font-weight: 500; font-size: 14px; }
.vh-drawer__user a.is-primary { background: var(--vh-indigo); border-color: var(--vh-indigo); color: #fff !important; }
.vh-drawer__nav { padding: 8px; display: flex; flex-direction: column; }
.vh-drawer__nav > a, .vh-drawer__nav summary { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; color: var(--vh-ink) !important; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.vh-drawer__nav summary::-webkit-details-marker { display: none; }
.vh-drawer__nav > a svg, .vh-drawer__nav summary svg { color: var(--vh-indigo); }
.vh-drawer__nav > a:active, .vh-drawer__nav summary:active { background: var(--vh-indigo-50); }
.vh-drawer__nav .vh-caret { margin-left: auto; transition: transform .2s; }
.vh-drawer__nav details[open] .vh-caret { transform: rotate(180deg); }
.vh-drawer__cats { display: flex; flex-direction: column; padding: 0 0 8px 42px; }
.vh-drawer__cats a { padding: 8px 0; font-size: 14px; color: #374151 !important; border-bottom: 1px dashed #f0f0f0; }
.vh-drawer__cats a.is-child { padding-left: 14px; color: var(--vh-muted) !important; }
.vh-drawer__hotline { margin: auto 16px 16px; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--vh-indigo); color: #fff !important; }
.vh-drawer__hotline small { display: block; font-size: 12px; opacity: .8; }
.vh-drawer__hotline b { display: block; font-size: 18px; color: var(--vh-amber); }
body.vh-lock { overflow: hidden; }

/* gợi ý tìm kiếm (jQuery UI) phải nằm trên header dính */
.ui-autocomplete { z-index: 1050 !important; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(17, 24, 39, .16); border: 1px solid var(--vh-line) !important; padding: 4px !important; }

/* ===== Footer ===== */
.vf { background: var(--vh-footer); color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.6; margin-top: 48px; }
.vf h3, .vf h4, .vf p, .vf ul { margin: 0; }
.vf ul { list-style: none; padding: 0; }
.vf a { color: inherit; }
.vf-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 36px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vf-feature { display: flex; gap: 14px; }
.vf-feature__icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--vh-amber); display: grid; place-items: center; flex: none; }
.vf-feature strong { display: block; color: #fff; font-size: 16px; font-weight: 500; }
.vf-feature p { font-size: 13px; color: rgba(255, 255, 255, .7); }
.vf-feature a { display: inline-flex; align-items: center; gap: 4px; color: var(--vh-amber) !important; font-weight: 500; font-size: 13px; margin-top: 2px; }
.vf-main { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr .9fr; gap: 40px; padding: 40px 0 32px; }
.vf-logo { display: inline-block; background: #fff; border-radius: 10px; padding: 6px 14px; }
.vf-logo img { height: 46px; width: auto; display: block; }
.vf-brand h3 { color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; margin-top: 18px; }
.vf-brand p { font-size: 13px; margin-top: 10px; color: rgba(255, 255, 255, .7); }
.vf-social { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.vf-social a { display: grid; place-items: center; width: 32px; height: 32px; transition: transform .2s; }
.vf-social a:hover { transform: translateY(-2px); }
.vf-app { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 16px 8px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; color: #fff !important; transition: background .2s; }
.vf-app:hover { background: rgba(255, 255, 255, .08); }
.vf-app small { display: block; font-size: 11px; color: rgba(255, 255, 255, .7); line-height: 1.2; }
.vf-app b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.vf-col h4 { color: var(--vh-amber); font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.vf-contact li { display: flex; gap: 10px; margin-bottom: 12px; }
.vf-contact li svg { color: var(--vh-amber); margin-top: 2px; }
.vf-contact b { color: #fff; font-weight: 500; }
.vf-contact a:hover { color: #fff; }
.vf-links li { margin-bottom: 8px; }
.vf-links a:hover { color: #fff; text-decoration: underline !important; }
.vf-bct { display: inline-block; background: #fff; border-radius: 8px; padding: 4px 6px; margin-top: 10px; }
.vf-bct img { display: block; width: 132px; height: auto; }
.vf-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; font-size: 12px; color: rgba(255, 255, 255, .6); }
.vf-legal p + p { margin-top: 4px; }
.vf-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(255, 255, 255, .6); }

/* nút chat nổi */
.vh-float { left: auto !important; right: 10px; bottom: 10px; width: auto; z-index: 1025; }
.vh-float img { width: 50px; height: 50px; display: block; }

/* ===== Responsive ===== */
@media (max-width: 1399px) {
    .vh-main__inner { gap: 14px; }
    .vh-search button { padding: 0 16px; }
}
@media (max-width: 1199px) {
    .vh-nav__badges, .vh-top__ship { display: none; }
    .vh-quick { padding: 0 14px; }
    .vh-account .vh-action__text { display: none; }
    .vh-menu > li > a { padding: 0 10px; }
    .vf-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
    .vh-top__hotline, .vh-top__app, .vh-top__spacer { display: none; }
    .vh-top__inner { height: 30px; justify-content: flex-start; }
    .vh-main__inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px 10px; }
    .vh-burger { display: grid; order: 0; }
    .vh-logo { order: 1; padding: 3px 6px; }
    .vh-logo img { height: 38px; }
    .vh-quick, .vh-action__text { display: none; }
    .vh-account { order: 2; margin-left: auto; }
    .vh-cart { order: 3; }
    .vh-search { order: 4; flex-basis: 100%; height: 46px; }
    .vh-search button { display: none; }
    .vh-nav__inner { display: none; }
    .vh-nav { border-bottom: 0; background: transparent; }
    .vh-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px; scrollbar-width: none; max-width: 720px; margin: 0 auto; }
    .vh-chips::-webkit-scrollbar { display: none; }
    .vh-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--vh-line); color: var(--vh-ink) !important; font-size: 14px; font-weight: 500; }
    .vh-chip svg { color: var(--vh-indigo); }
    .vh-chip--amber { background: var(--vh-amber); border-color: var(--vh-amber); color: #1f1300 !important; }
    .vh-chip--amber svg { color: #1f1300; }
    .vf-features { grid-template-columns: 1fr; gap: 16px; padding: 24px 0 20px; }
    .vf-main { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 28px 0 24px; }
    .vf-brand, .vf-contact { grid-column: 1 / -1; }
    .vf-bottom { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
    body:has(.footer-cart-mobile) .vh-float { bottom: 84px; }
    body:has(.footer-cart-mobile) .vf { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .vh-drawer__panel, .vh-drawer__backdrop, .vh-cats__panel, .vh-menu__drop, .vh-account__menu { transition: none; }
}
@media (max-width: 767px) {
    /* nút chat nổi nhỏ lại để bớt che nút + của thẻ sản phẩm */
    .vh-float { right: 6px; }
    .vh-float img { width: 42px; height: 42px; }
}