.header-desktop {
    transition: background-color 0.3s ease;
}
.hdr-group-left, .hdr-nav-box, .hdr-group-right {
    background-color: transparent;
}

header.is-hidden {
    transform: translateY(-110%);
}

/* Default (scrolled down or hover) state */
#mainHeader {
    color: var(--c-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s ease-in-out;
}
#mainHeader .hdr-nav-text,
#mainHeader svg:not(.icon-box svg):not(.mobile-submenu-toggle svg),
#mainHeader .uploaded-svg-logo,
#mainHeader .mobile-menu-trigger {
    color: var(--c-primary) !important;
    transition: color 0.3s ease;
}

/* Hovering the header itself should also force scrolled-like styling */
#mainHeader:hover {
    background-color: var(--c-light) !important;
}

/* Initial state (at top, not hovered, mobile menu closed) */
body:not(.header-mobile-open) #mainHeader.header-transparent:not(:hover) .hdr-nav-text,
body:not(.header-mobile-open) #mainHeader.header-transparent:not(:hover) svg,
body:not(.header-mobile-open) #mainHeader.header-transparent:not(:hover) .uploaded-svg-logo,
body:not(.header-mobile-open) #mainHeader.header-transparent:not(:hover) .mobile-menu-trigger {
    color: var(--c-light) !important;
}

/* Fix mobile menu background if opened */
body.header-mobile-open #mainHeader {
    background-color: transparent !important;
}


.hdr-nav-btn:hover .hdr-char {
    animation: blurRevealNav 0.4s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

@keyframes blurRevealNav {
    0% {
        filter: blur(5px);
        opacity: 0;
        transform: translateX(-5px);
    }
    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateX(0);
    }
}

/* Allow svg stroke to inherit color */
.mobile-menu-trigger svg,
.mobile-menu-trigger svg line,
.mobile-menu-trigger svg path {
    stroke: currentColor !important;
}

/* Main Menu Overlay Background */
#mobile-menu {
  background-color: var(--c-light) !important;
}

/* Text color for links in the menu overlay */
.mobile-menu-item-group .menu-link-parent,
.mobile-menu-item-group .menu-link,
.mobile-menu-item-group .mobile-submenu a {
  color: var(--c-primary) !important;
}

/* SVG toggle arrow color */
.mobile-submenu-toggle svg {
    stroke: var(--c-primary) !important;
}

/* Submenu color adjustments */
#mobile-menu .mobile-submenu {
    background-color: var(--c-light) !important;
}

/* Product details background in submenu - stick to system colors, add border for distinction */
#mobile-menu .mobile-submenu [style*="background-color: var(--c-light)"] {
    border: 1px solid rgba(0,0,0,0.05);
}
#mobile-menu .mobile-submenu img[style*="mix-blend-mode: multiply"] {
    mix-blend-mode: normal !important;
}

/* "XEM TẤT CẢ" link button styling */
#mobile-menu .mobile-submenu .btn-view-all {
    background-color: var(--c-light) !important; 
    color: var(--c-primary) !important;
    border: 1px solid rgba(0,0,0,0.1);
}
#mobile-menu .mobile-submenu .btn-view-all span.icon-box {
    background-color: var(--c-light) !important; 
    color: var(--c-primary) !important;
}
#mobile-menu .mobile-submenu .btn-view-all span.icon-box svg {
    stroke: var(--c-primary) !important;
}

/* Footer links */
#mobile-menu .menu-link-footer a {
    color: var(--c-primary) !important;
}
#mobile-menu .menu-link-footer a.social-link {
    background-color: var(--c-light) !important;
    color: var(--c-primary) !important;
    border: 1px solid rgba(0,0,0,0.1);
}
#mobile-menu .menu-link-footer a img {
    filter: brightness(0) !important; /* Đảm bảo icon màu đen */
}

/* Scripted display states for icons inside the trigger */
.mobile-menu-trigger .icon-hamburger { display: block !important; }
.mobile-menu-trigger .icon-close { display: none !important; }

/* Body class added by script when mobile menu is open */
.header-mobile-open .mobile-menu-trigger .icon-hamburger { display: none !important; }
.header-mobile-open .mobile-menu-trigger .icon-close { display: block !important; }

/* Class for toggling the menu display via script */
.header-mobile-menu-open {
    visibility: visible !important;
    opacity: 1 !important;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}