/* Da Phuc header: full-width sticky navigation bar, category backdrop,
   sticky mobile header and drawer. Loads after daphuc-nav-carousel.css.
   Behaviour: daphuc-header.js (body classes dp-nav-stuck, dp-menu-engaged) and
   daphuc-carousel.js (category open/close state). */


/* Layout tokens (--dp-nav-h, --dp-sticky-top ...) are in the global token block of daphuc-modern.css. */

/* position: sticky needs an ancestor that is not a scroll container. The theme's
   #page { overflow: hidden } is one; "clip" clips the same way without scrolling,
   and flow-root keeps the floated footer inside #page. Browsers without
   overflow: clip keep "hidden" and the header simply scrolls with the page. */
@supports (overflow: clip) {
    html body #page.site { overflow: clip; display: flow-root; }
}

/* The theme animates every #masthead property for 0.5 s; header state changes must be instant. */
html #page #masthead { transition: none; }

/* ======================= Desktop (> 1050 px) ======================= */
@media (min-width: 1051px) {
    /* One full-width opaque bar, sticky at the top. Same layout in flow and stuck:
       nothing is added, removed, moved or animated when it sticks. */
    html #page #masthead {
        position: sticky;
        top: var(--dp-sticky-top);
        z-index: 999;
        height: var(--dp-nav-h);
        min-height: 0;
        background: var(--dp-surface);
        border-top: 0;
        border-bottom: 1px solid var(--dp-border);
        box-shadow: 0 1px 0 rgba(var(--dp-brand-surface-rgb), .04);
    }
    html #page #masthead > .container { height: var(--dp-nav-h); }
    html #page #masthead .head-wrap {
        height: 100%;
        align-items: center;
        gap: 20px;
    }

    /* "Danh mục" toggle: a compact brand button. */
    html #page #masthead .special-menu-container,
    html #page #masthead .special-menu-container ul.special-menu-wrapper,
    html #page #masthead .special-menu-container ul.special-menu-wrapper > li { height: var(--dp-nav-item-h); }
    html #page #masthead .special-menu-container ul.special-menu-wrapper a.special-menu {
        height: var(--dp-nav-item-h);
        padding: 0 44px 0 16px;
        border-radius: 10px;
        background: var(--dp-brand-surface);
        color: var(--dp-on-brand);
        font-size: 13px;
        letter-spacing: .06em;
        box-shadow: 0 1px 2px rgba(var(--dp-brand-surface-rgb), .2);
    }
    html #page #masthead .special-menu-container ul.special-menu-wrapper a.special-menu:hover,
    html #page #masthead .special-menu-container ul.special-menu-wrapper li:hover > a.special-menu,
    html #page #masthead .special-menu-container ul.special-menu-wrapper a.special-menu[aria-expanded="true"] { background: var(--dp-action); color: var(--dp-on-action); }
    html #page #masthead .special-menu-container ul.special-menu-wrapper li.menu-item-has-children > .angle-down {
        height: var(--dp-nav-item-h);
        line-height: var(--dp-nav-item-h);
        right: 6px;
        font-size: 16px;
        color: var(--dp-on-brand);
    }
    html #page #masthead .special-menu-container ul.special-menu-wrapper li:hover > .angle-down,
    html #page #masthead .special-menu-container ul.special-menu-wrapper li:has(> a.special-menu[aria-expanded="true"]) > .angle-down { color: var(--dp-on-action); }

    /* Drop-down panel: detached card with a transparent hover bridge over the 8 px gap. */
    html #page .special-menu-container ul.special-menu-wrapper ul.special-sub-menu {
        top: calc(100% + 8px);
        border: 1px solid var(--dp-border);
        border-radius: 12px;
        box-shadow: 0 24px 48px rgba(var(--dp-brand-surface-deep-rgb), .22), 0 2px 6px rgba(var(--dp-brand-surface-deep-rgb), .08);
    }
    html #page .special-menu-container ul.special-menu-wrapper ul.special-sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -9px;
        height: 9px;
    }

    /* Hover intent: the panel (and the backdrop) open after 120 ms of hover, so a
       pointer that only passes over the toggle never flashes the page. Keyboard
       and click opens stay immediate; the 150 ms close delay is unchanged. */
    html #page .special-menu-container ul.special-menu-wrapper li.menu-item-has-children:hover > ul.special-sub-menu {
        visibility: visible;
        transition-delay: .12s;
    }
    /* "transition: none" (not only a 0 s delay) cancels a hover-intent transition that
       is already running, so a click or keyboard open shows the panel at once. */
    html #page .special-menu-container ul.special-menu-wrapper li.menu-item-has-children.dp-open > ul.special-sub-menu,
    html #page .special-menu-container ul.special-menu-wrapper li.menu-item-has-children:has(:focus-visible) > ul.special-sub-menu {
        visibility: visible;
        transition: none;
    }
    html #page .special-menu-container ul.special-menu-wrapper li.menu-item-has-children.dp-closed > ul.special-sub-menu { visibility: hidden; transition-delay: 0s; }

    /* Home hero panel (open by design while the hero is in view): flush card. */
    html body.home.page-template-home-template:not(.dp-nav-stuck) #page .special-menu-container:not(.onhover) ul.special-menu-wrapper ul.special-sub-menu {
        box-shadow: 0 6px 18px rgba(var(--dp-brand-surface-rgb), .06);
    }

    /* Primary links */
    html #page #masthead .main-navigation ul.menu > li > a {
        height: var(--dp-nav-item-h);
        padding: 0 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
    }
    html #page #masthead .main-navigation ul.menu > li > a::before { inset: 0; border-radius: 8px; }
    html #page #masthead .main-navigation ul.menu > li > a::after,
    html #page #masthead .main-navigation ul.menu > li > a:hover::after {
        left: 14px;
        right: 14px;
        bottom: 6px;
        height: 2px;
        border-radius: 2px;
    }


    /* Home: while the bar is stuck, the hero panel cannot stay with the hero, so it
       becomes a normal drop-down (hidden until engaged). */
    html body.dp-nav-stuck.home.page-template-home-template #page .special-menu-container:not(.onhover) ul.special-menu-wrapper ul.special-sub-menu {
        visibility: hidden;
        max-height: var(--dp-dd-max, min(70vh, 480px));
        overflow-y: auto !important;
        box-shadow: 0 24px 48px rgba(var(--dp-brand-surface-deep-rgb), .22), 0 2px 6px rgba(var(--dp-brand-surface-deep-rgb), .08);
    }
    html body.dp-nav-stuck.home.page-template-home-template #page .special-menu-container:not(.onhover) ul.special-menu-wrapper li.menu-item-has-children:hover > ul.special-sub-menu {
        visibility: visible;
        transition-delay: .12s;
    }
    html body.dp-nav-stuck.home.page-template-home-template #page .special-menu-container:not(.onhover) ul.special-menu-wrapper li.menu-item-has-children.dp-open > ul.special-sub-menu,
    html body.dp-nav-stuck.home.page-template-home-template #page .special-menu-container:not(.onhover) ul.special-menu-wrapper li.menu-item-has-children:has(:focus-visible) > ul.special-sub-menu {
        visibility: visible;
        transition: none;
    }
    html body.dp-nav-stuck.home.page-template-home-template #page .special-menu-container:not(.onhover) ul.special-menu-wrapper li.menu-item-has-children.dp-closed > ul.special-sub-menu { visibility: hidden; transition-delay: 0s; }

    /* One-off instant switch when the home panel changes role (see daphuc-header.js). */
    html #page .special-menu-container ul.special-menu-wrapper li.menu-item-has-children.dp-instant > ul.special-sub-menu { transition: none !important; }

    /* Mobile-only controls (menu and search buttons) are not part of the desktop header. */
    html #page .mid-header .dp-icon-btn { display: none; }
}

/* ---------- Category backdrop (desktop) ----------
   Dims the page under the open drop-down; the nav bar (z 999) stays above it.
   Wheel over the backdrop still scrolls the page; a press on it closes the menu. */
.dp-nav-backdrop {
    position: fixed;
    z-index: 990;
    inset: 0;
    background: rgba(var(--dp-brand-surface-deep-rgb), .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
}
body.dp-menu-engaged .dp-nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .15s ease, visibility 0s;
}

/* ======================= Mobile and tablet (<= 1050 px) ======================= */
@media (max-width: 1050px) {
    /* One navigation: the drawer. The theme's category button and meanmenu bar go.
       The top bar would wrap into 2-3 rows here; its contact data is in the header
       call button and in the drawer. */
    html #page #masthead { display: none; }
    html #page #top-bar { display: none; }
    .dp-nav-backdrop { display: none; }

    /* Compact sticky header (independent of the desktop bar, which is hidden here). */
    html #page div.mid-header {
        position: sticky;
        top: var(--dp-sticky-top);
        z-index: 1000;
        height: var(--dp-mobile-h);
        padding: 0;
        border-bottom: 1px solid var(--dp-border);
        background: var(--dp-surface);
        box-shadow: 0 1px 0 rgba(var(--dp-brand-surface-rgb), .04);
    }
    /* [menu] [logo] [search field: tablets | search button: phones] [call], all
       centred on one line. The buttons are inserted in this DOM order by
       daphuc-header.js, so the Tab order matches what is seen. */
    html #page .mid-header > .container {
        height: var(--dp-mobile-h);
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        background: var(--dp-surface);
    }
    html #page .mid-header > .container > * { order: 0; align-self: center; margin-top: 0; margin-bottom: 0; }
    html #page .mid-header .site-branding { flex: 0 1 auto; width: auto; min-width: 0; margin: 0 0 0 2px; padding: 0; line-height: 0; }
    html #page .mid-header .custom-logo-link { display: block; line-height: 0; }
    html #page .mid-header .custom-logo { display: block; max-height: 40px; width: auto; }
    html #page .mid-header .ae-search-holder { flex: 1 1 auto; max-width: 560px; margin: 0 0 0 auto; padding: 0; }
    html #page .mid-header .product-search-wrapper form { height: 44px; }
    html #page .mid-header .product-search-wrapper select.product-cat { display: none; }
    html #page .mid-header .ae-cart-wishlist { flex: 0 0 auto; margin: 0; padding: 0; }

    html #page .mid-header button.dp-icon-btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--dp-border);
        border-radius: var(--dp-radius);
        background: var(--dp-surface);
        color: var(--dp-brand-surface);
        line-height: 1;
        box-shadow: none;
        cursor: pointer;
    }
    html #page .mid-header button.dp-icon-btn:hover,
    html #page .mid-header button.dp-icon-btn:focus-visible { border-color: var(--dp-primary); color: var(--dp-primary-ink); background: var(--dp-primary-subtle); }
    html #page .mid-header button.dp-menu-btn[aria-expanded="true"] { border-color: var(--dp-primary); color: var(--dp-primary-ink); }
    .dp-icon-btn .dp-icon { width: 22px; height: 22px; }
    /* Tablets show the search field itself. */
    html #page .mid-header button.dp-search-btn { display: none; }

    /* Call button: the filled call-to-action at the far right. */
    html #page .mid-header .dp-hotline { gap: 10px; padding: 0; }
    html #page .mid-header .dp-hotline__icon {
        width: 44px;
        height: 44px;
        border-radius: var(--dp-radius);
        background: var(--dp-action);
        color: var(--dp-on-action);
    }
}

@media (max-width: 767px) {
    /* Phones: search moves into the drawer (the search button opens it focused). */
    html #page .mid-header .ae-search-holder { display: none; }
    html #page .mid-header button.dp-search-btn { display: inline-flex; margin-left: auto; }
    html #page .mid-header .dp-hotline__text { display: none; }
    html #page .mid-header > .container { gap: 8px; }
}
@media (max-width: 359px) {
    html #page .mid-header .custom-logo { max-height: 32px; }
    html #page .mid-header .dp-hotline__icon,
    html #page .mid-header button.dp-icon-btn { width: 40px; height: 40px; }
    html #page .mid-header > .container { gap: 6px; }
}

/* ---------- Drawer ---------- */
html.dp-scroll-lock,
html.dp-scroll-lock body { overflow: hidden; }
/* Theme parts (logo, icons) use z-index up to 9999 in the root stacking context;
   while the drawer is open, #page becomes one layer under it. */
html.dp-scroll-lock #page { isolation: isolate; }
.dp-drawer-backdrop {
    position: fixed;
    z-index: 1090;
    inset: 0;
    background: rgba(var(--dp-brand-surface-deep-rgb), .5);
    opacity: 0;
    transition: opacity .2s ease;
}
.dp-drawer-backdrop.is-open { opacity: 1; }
.dp-drawer {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(88vw, 400px);
    background: var(--dp-surface);
    box-shadow: 18px 0 40px rgba(var(--dp-brand-surface-deep-rgb), .2);
    /* Slides in from the left, the side of the menu button. */
    transform: translateX(-100%);
    transition: transform .22s ease;
    color: var(--dp-text);
}
.dp-drawer.is-open { transform: none; }
.dp-drawer[hidden],
.dp-drawer-backdrop[hidden] { display: none; }
.dp-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    height: var(--dp-mobile-h);
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--dp-border);
}
/* ".woocommerce img { height: auto }" would win over a single class. */
html body .dp-drawer img.dp-drawer__logo { display: block; flex: 0 1 auto; width: auto; max-width: 180px; height: 36px; min-width: 0; object-fit: contain; }
.dp-drawer__title { font-size: 16px; font-weight: 700; }
html body .dp-drawer button.dp-drawer__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dp-border);
    border-radius: 12px;
    background: var(--dp-surface);
    color: var(--dp-brand-surface);
    box-shadow: none;
}
html body .dp-drawer button.dp-drawer__close:hover,
html body .dp-drawer button.dp-drawer__close:focus-visible { border-color: var(--dp-primary); color: var(--dp-primary-ink); }
.dp-drawer__close .dp-icon { width: 22px; height: 22px; }
.dp-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px 28px;
}
.dp-drawer__section + .dp-drawer__section { margin-top: 22px; }

/* Search inside the drawer */
.dp-drawer__search form {
    display: flex;
    height: 46px;
    margin: 0 0 20px;
    border: 1px solid var(--dp-border-strong);
    border-radius: 12px;
    overflow: hidden;
    background: var(--dp-surface);
}
.dp-drawer__search form:focus-within { border-color: var(--dp-primary); box-shadow: 0 0 0 3px rgba(var(--dp-primary-rgb), .15); }
html body .dp-drawer__search input.search-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    color: var(--dp-text);
}
html body .dp-drawer__search input.search-field:focus-visible { outline: none !important; }
html body .dp-drawer__search button.search-submit {
    position: static;
    flex: 0 0 50px;
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--dp-action);
    color: var(--dp-on-action);
}
.dp-drawer__search .search-submit i { font-family: FontAwesome; color: var(--dp-on-action); font-size: 17px; }

/* Primary links */
.dp-drawer__links,
.dp-drawer__cats { margin: 0; padding: 0; list-style: none; }
.dp-drawer__links li + li { border-top: 1px solid var(--dp-fill); }
.dp-drawer__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 4px;
    color: var(--dp-brand-surface);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dp-drawer__links a.is-current { color: var(--dp-primary-ink); box-shadow: inset 3px 0 0 var(--dp-accent); padding-left: 12px; }
.dp-drawer__chev { width: 18px; height: 18px; color: var(--dp-text-muted); }

/* Categories: a two-column chip grid on wider phones, one column on small ones. */
.dp-drawer__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--dp-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dp-drawer__heading .dp-icon { width: 14px; height: 14px; color: var(--dp-accent); }
.dp-drawer__cats { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--dp-border); border-radius: var(--dp-radius); overflow: hidden; }
.dp-drawer__cats li + li { border-top: 1px solid var(--dp-menu-separator); }
.dp-drawer__cats a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--dp-surface);
    color: var(--dp-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.dp-drawer__cats a:hover,
.dp-drawer__cats a.is-current { background: var(--dp-primary-subtle); color: var(--dp-primary-ink); box-shadow: inset 3px 0 0 var(--dp-primary); }

/* Contact */
.dp-drawer__contact { padding-top: 20px; border-top: 1px solid var(--dp-border); }
.dp-drawer__call {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--dp-brand-surface);
    color: var(--dp-on-brand);
}
.dp-drawer__call:hover,
.dp-drawer__call:focus-visible { background: var(--dp-action); color: var(--dp-on-action); }
.dp-drawer__call .dp-icon { width: 22px; height: 22px; }
.dp-drawer__call span { display: flex; flex-direction: column; line-height: 1.25; }
.dp-drawer__call small { color: inherit; font-size: 12px; }
.dp-drawer__call strong { font-size: 18px; }
.dp-drawer__social { display: flex; gap: 8px; margin-top: 10px; }
.dp-drawer__social a {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--dp-border);
    border-radius: 10px;
    color: var(--dp-brand-surface);
    font-size: 14px;
    font-weight: 600;
}
.dp-drawer__social a:hover { border-color: var(--dp-primary); color: var(--dp-primary-ink); }
.dp-drawer__social .dp-icon { width: 18px; height: 18px; }
.dp-drawer__line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    color: var(--dp-text-muted);
    font-size: 14px;
    line-height: 1.5;
}
a.dp-drawer__line:hover { color: var(--dp-primary-ink); }
.dp-drawer__line .dp-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--dp-primary-ink); }

@media (prefers-reduced-motion: reduce) {
    .dp-drawer,
    .dp-drawer-backdrop,
    .dp-nav-backdrop { transition: none; }
}