/* ==========================================================================
   MỤC LỤC - HEADER.CSS (CHUẨN MATERIAL DESIGN 3 x XIAOMI)
   1. Bố cục Header & Store Notice
   2. Main Navigation (Thanh điều hướng chính & Hover)
   3. Header Actions & Contact (Nút bấm trên Header, Thông tin liên hệ)
   4. Vertical Menu & Fly-out (Menu dọc & Dropdown)
   5. Sidebar Canvas Menu (Menu Mobile)
   6. Header Search Form & Icons
   7. Popup Store List (M3 Dialog)
   ========================================================================== */

/* ==========================================================================
   1. BỐ CỤC HEADER & STORE NOTICE
   ========================================================================== */
@media screen and (max-width: 849px) {
    .header-wrapper {
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }
}

.header-bottom {
    border-bottom: 0px solid var(--md-sys-color-outline-variant);
}

.page-header-wrapper {
    background-color: var(--md-sys-color-surface-container);
}

/* Thông báo toàn trang (Store Notice) */
.demo_store {
    padding: 8px 0;
    margin: 0;
    text-align: center;
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-secondary);
    font: var(--md-sys-typescale-body-medium);
}

.woocommerce-store-notice__dismiss-link {
    display: none;
}

/* ==========================================================================
   2. MAIN NAVIGATION (THANH ĐIỀU HƯỚNG CHÍNH)
   ========================================================================== */
.nav li a,
.nav-dropdown li a,
.nav-column li a,
.nav-vertical-fly-out li a,
.nav-vertical li ul li a {
    color: var(--md-sys-color-on-surface) !important;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

.nav li a:hover,
.nav-dropdown li a:hover,
.nav-column li a:hover,
.nav-vertical-fly-out li a:hover {
    color: var(--md-sys-color-primary) !important;
    background: transparent !important;
}

/* Hiệu ứng thanh gạch dưới (Tab Indicator) chuẩn M3 */
.header-bottom-nav.nav-line-bottom li a:before,
.header-bottom-nav.nav-line-grow li a:before,
.header-bottom-nav.nav-line li a:before,
.header-bottom-nav.nav-box li a:hover,
.header-bottom-nav.nav-box li.active a,
.header-bottom-nav.nav-pills li a:hover,
.header-bottom-nav.nav-pills li.active a {
    width: 50% !important;
    height: 3px !important;
    background-color: var(--md-sys-color-on-primary) !important;
    border-radius: 3px 3px 0 0;
}

/* Menu chữ trắng trên nền Cam (Thanh Bottom) */
.header:not(.transparent) .header-bottom-nav.nav > li > a {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-primary) !important;
}

.header:not(.transparent) .header-bottom-nav.nav > li > a:hover {
    color: var(--md-sys-color-on-primary) !important;
    opacity: 0.8;
}

/* ==========================================================================
   3. HEADER ACTIONS (NÚT DEAL TỐT HÔM NAY - CHUẨN M3 TONAL BUTTON)
   ========================================================================== */
.header-button-1 .header-button a {
    background-color: var(--md-sys-color-surface-container-high) !important;
    font: var(--md-sys-typescale-label-large) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-radius: var(--md-sys-shape-corner-full) !important; /* Viên thuốc chuẩn M3 */
    padding: 0 16px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: none !important;
    /* Dùng Snappy motion tạo độ nảy mượt mà */
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy) !important;
}

.header-button-1 .header-button a:hover {
    background-color: var(--md-sys-color-surface-container-high) !important; 
    color: var(--md-sys-color-on-surface) !important; 
    transform: translateY(-1px); /* Nổi nhẹ khi hover */
}

.header-button-1 .button:not(.icon) > span + i {
    margin-left: 4px !important;
    margin-right: 0 !important;
}

/* Hiệu ứng SVG Icon Material */
.header-button-1 .header-button a .icon-angle-right:before {
    display: none;
}

.header-button-1 .header-button a:hover .icon-angle-right:before {
    content: ''; 
    display: inline-block;
    width: 20px; 
    height: 20px;
    vertical-align: middle;
    background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M646-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h446L532-634q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T589-691l183 183q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L589-269q-12 12-28.5 11.5T532-270q-11-12-11.5-28t11.5-28l114-114Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M646-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h446L532-634q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T589-691l183 183q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L589-269q-12 12-28.5 11.5T532-270q-11-12-11.5-28t11.5-28l114-114Z'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateX(4px);
    transition: transform var(--md-sys-duration-short) var(--md-sys-motion-snappy);
}

.header-item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-item .header-item-logo {
    width: 24px;
    height: 24px;
    fill: var(--md-sys-color-primary);
}

.header-item .header-item-info {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
}

.header-item-info-title {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   4. VERTICAL MENU & FLY-OUT (MENU DỌC & DROPDOWN)
   ========================================================================== */
.header-vertical-menu__opener {
    font: var(--md-sys-typescale-label-large);
    border-radius: var(--md-sys-shape-corner-sm);
}

.header-vertical-menu__fly-out .nav-top-link {
    font: var(--md-sys-typescale-label-medium);
}

/* Khung Fly-out (Nổi khối M3) */
.header-vertical-menu__fly-out.has-shadow {
    box-shadow: var(--md-sys-elevation-level-1);
    margin-top: 12px;
    border: 1px solid var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-md);
    background-color: var(--md-sys-color-surface);
}

.header-vertical-menu__fly-out.has-shadow:hover {
    box-shadow: var(--md-sys-elevation-level-2);
}

.header-vertical-menu__fly-out .sub-menu {
    background-color: var(--md-sys-color-surface);
    margin-left: 11px;
    margin-bottom: 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-md);
    box-shadow: var(--md-sys-elevation-level-2);
    margin-top: -1px;
}

.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a {
    height: 35px !important;
}

.header-vertical-menu__fly-out .nav-vertical-fly-out li.menu-item a {
    padding: 8px 12px;
    font: var(--md-sys-typescale-label-medium);
}
.header-vertical-menu__fly-out .sub-menu li.menu-item a {
    font: var(--md-sys-typescale-body-small);
}

.nav-vertical li li {
    font: var(--md-sys-typescale-label-large);
}

/* Vertical Menu trong Widget (Trang danh mục/Blog) */
.vertical-menu .ux-menu-title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
    padding: 0;
    min-height: 24px;
}

.vertical-menu .ux-menu-link__link {
    min-height: 0;
    padding: 4px 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-secondary);
}

.vertical-menu .ux-menu-link__link:hover {
    color: var(--md-sys-color-primary);
}

.vertical-menu-post ul { list-style: none; }
.vertical-menu-post ul li {
    margin: 4px 0;
    font: var(--md-sys-typescale-body-medium);
}

.vertical-menu-post ul li .vertical-menu-cat-title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
    padding: 0; min-height: 24px; margin-bottom: 8px;
}

.vertical-menu-post ul li .vertical-menu-post-title {
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
    padding: 2px 8px 2px 16px !important;
    transition: color var(--md-sys-duration-short) ease;
}

.vertical-menu-post ul li .vertical-menu-post-title:hover {
    color: var(--md-sys-color-primary);
}

.vertical-menu-post ul li .vertical-menu-post-title::before {
    content: '';
    background-image: url(/wp-content/uploads/2024/06/arrow-bg.png);
    position: absolute;
    width: 5px !important;
    height: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0;
}

/* ==========================================================================
   5. SIDEBAR CANVAS MENU (MENU BÊN TRÊN MOBILE)
   ========================================================================== */
#main-menu { font: var(--md-sys-typescale-label-large); }

.off-canvas .sidebar-menu {
    padding: 0;
    background-color: var(--md-sys-color-surface);
}

.sidebar-menu .nav li.active a,
.off-canvas .sidebar-menu .nav-vertical li.current-menu-item a,
.off-canvas .sidebar-menu .nav-vertical li.current-menu-parent a,
.off-canvas .sidebar-menu .nav-vertical li.menu-item-has-children.current-menu-item a,
.sidebar-menu .nav-vertical li ul li.current-menu-item a {
    color: var(--md-sys-color-primary) !important; 
    background-color: var(--md-sys-color-primary-container) !important;
    border-radius: var(--md-sys-shape-corner-md);
}

.sidebar-menu .nav-sidebar.nav-vertical > li.menu-item.active,
.sidebar-menu .nav-sidebar.nav-vertical > li.menu-item:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

.sidebar-menu .nav-sidebar.nav-vertical > li + li {
    border-top: 0px solid var(--md-sys-color-outline-variant);
}

/* Các link phụ trợ dưới cùng của Menu */
#menu-item-44001 a, #menu-item-44002 a, #menu-item-44003 a,
#menu-item-44013 a, #menu-item-44022 a, #menu-item-44036 a {
    color: var(--md-sys-color-secondary) !important;
    font: var(--md-sys-typescale-label-medium);
    padding-top: 24px;
    padding-bottom: 8px;
}

.sidebar-menu .nav li.has-icon-left > a > i,
.sidebar-menu .nav li.has-icon-left > a > img,
.sidebar-menu .nav li.has-icon-left > a > svg {
    margin-right: 12px;
}

.off-canvas .sidebar-menu .nav-vertical > li > a {
    padding-bottom: 12px;
    padding-top: 12px;
    font: var(--md-sys-typescale-label-large);
}

.sidebar-menu .account-item {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* ==========================================================================
   6. HEADER SEARCH FORM & ICONS (CHUẨN PILL SHAPE)
   ========================================================================== */

.header-nav-main .header-search-form {
    width: 90% !important;
    margin: 0 !important;
}

.header-search-form-wrapper {
    margin-right: 10px !important;
}

/* Form Search M3: Bề mặt Surface High, bo góc toàn phần (Pill shape) */
.header-search-form-wrapper .form-flat input:not([type=submit]) {
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full) !important;
    box-shadow: none !important;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

/* Khi bấm vào thanh Search: Tự động nổi lên và sáng bề mặt */
.header-search-form-wrapper .form-flat input:not([type=submit]):focus {
    background-color: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-level-2) !important;
}

.header-search-form-wrapper input[type="search"] {
    border: 0 solid var(--md-sys-color-outline);
}

/* Chấm đỏ báo số lượng trên Icon Giỏ hàng/Yêu thích */
[data-icon-label]:after,
.icon-label {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ==========================================================================
   7. POPUP DANH SÁCH CỬA HÀNG (M3 DIALOG & OUTLINED BUTTON)
   ========================================================================== */
.m3-btn-store {
    gap: 8px;
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: var(--md-sys-shape-corner-full) !important; /* Bo góc viên thuốc */
}

.m3-dialog-store {
    max-width: 600px !important;
    margin: 40px auto;
    background-color: var(--md-sys-color-surface) !important;
    border-radius: 28px !important; /* M3 Spec cho Dialog */
    box-shadow: var(--md-sys-elevation-level-3) !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    max-height: calc(100vh - 80px) !important; 
}

.m3-dialog-store .m3-dialog-header {
    background-color: var(--md-sys-color-primary-container);
    padding: 24px 24px 20px;
    text-align: center;
    flex-shrink: 0;
}

.m3-dialog-store .m3-dialog-title {
    margin: 0;
    color: var(--md-sys-color-on-primary-container);
    font: var(--md-sys-typescale-title-large);
    text-transform: uppercase;
}

.m3-dialog-store .m3-dialog-body {
    padding: 24px;
    overflow-y: auto; 
    scrollbar-width: thin; 
}

.m3-store-section { margin-bottom: 32px; }
.m3-store-section:last-child { margin-bottom: 0; }

.m3-store-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.m3-store-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m3-store-list a {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-md);
    text-decoration: none;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

.m3-store-list a:hover {
    background-color: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level-1); /* Tăng chiều sâu khi hover */
}

.m3-store-city {
    font: var(--md-sys-typescale-title-small);
    color: var(--md-sys-color-primary);
    margin-bottom: 4px;
    display: block;
}

.m3-store-address {
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface);
}

.m3-shopee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.m3-shopee-grid a {
    background-color: #ee4d2d; 
    color: #ffffff;
    padding: 12px 16px;
    text-align: center;
    border-radius: var(--md-sys-shape-corner-full); 
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    transition: filter var(--md-sys-duration-short) var(--md-sys-motion-snappy), box-shadow var(--md-sys-duration-short) ease;
}

.m3-shopee-grid a:hover {
    filter: brightness(0.9);
    box-shadow: var(--md-sys-elevation-level-1);
}

.top-info-bar {
    align-items: center;
    display: flex;
    gap: 24px;
    margin: 0 auto;
    max-width: 1280px;
    position: relative;
    z-index: 1000
}

.top-info-bar .promo-info {
    display: flex;
    overflow-x: auto
}

.top-info-bar .promo-info::-webkit-scrollbar {
    display: none
}

.top-info-bar .promo-info .promo-content {
    animation: scroll-left 20s linear infinite;
    display: flex;
    gap: 29px
}

@keyframes scroll-left {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-50%))
    }
}

.top-info-bar .promo-info .promo-content span.promo-item {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    justify-content: center;
    position: relative;
    white-space: nowrap
}

.top-info-bar .promo-info .promo-content span.promo-item strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700
}

.top-info-bar .promo-info .promo-content span.promo-item:before {
    background-color: var(--brand-orange-20);
    border-radius: 50%;
    content: "";
    height: 5px;
    left: -12px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5px
}