header {
    padding: 18px 0;
}

.header.affix {
    width: 100%;
    background-color: var(--color-1);
    top: 0;
    box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.15);
    animation: slide-down .5s linear forwards;
    z-index: 8;
    padding: 15px 0 10px;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-logo img {
    max-width: 103px;
}

.menu ul li{
    list-style: none;
    position: relative;
}

.menu ul .item-level1 {
    padding: 12px 0;
}

.menu .level1 {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu .name-level1 {
    text-transform: uppercase;
}

.menu .icon-arrow svg {
    width: 15px;
    height: 15px;
    transform: translateY(2px);
}

.menu .icon-arrow svg path {
    stroke: currentColor;
}

.menu .level2 {
    transition: .3s;
    background: rgba(41, 41, 41, 0.97);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .16);
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 3;
    /* min-width: 250px; */
    border-radius: 3px;
    width: max-content;
}

.menu .level2::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 35px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #292929;
}

.menu .level2 .name-level2 {
    display: block;
    padding: 11px 20px;
    color: #c2c2c2;
}

.menu .level2 .name-level2:hover {
    color: var(--color-2);
    background-color: rgba(30, 30, 30, 0.97);
}

.menu .level2 .name-level2:hover .btn-animate-y-1 {
    opacity: 0;
    transform: translate(0, -100%);
}

.menu .level2 .name-level2:hover .btn-animate-y-2 {
    opacity: 1;
    transform: translate(0, 0);
}

.menu ul .item-level1:hover .level2 {
    opacity: 1;
    visibility: visible;
    z-index: 9999999;
}

.search-wrap svg {
    width: 17px;
    height: 17px;
}

.search-wrap .icon {
    background: transparent;
}

.search-wrap {
    cursor: pointer;
    position: relative;
}

.form-search {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 2;
}

.search-wrap.active .form-search {
    opacity: 1;
    visibility: visible;
}

.form-search input {
    width: 100%;
    height: 34px;
    padding: 5px 50px 5px 10px;
}

.form-search button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 40px;
    height: 34px;
}

.form-search button svg {
    fill: #000 !important;
}

.header-right .cart img {
    width: 17px;
}

.header-right .cart {
    position: relative;
    display: block;
}

.header-right .cart-num {
    position: absolute;
    top: -10px;
    right: -13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--color-2);
    background-color: var(--color-1);
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 11px;
}

.header-right {
    background: rgb(51 51 51);
    border-radius: 30px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 15px;
}

.header-right .header-icon {
    display: flex;
    gap: 15px;
    justify-content: right;
    height: 20px;
}

.header-right .login {
    border-right: 1px solid var(--color-2);
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 26px;
}

.icon-menu-m {
    display: none;
    cursor: pointer;
}

.icon-menu-m svg {
    width: 18px;
    height: 18px;
}

.header-left-m {
	display: none;
}

.icon-search-close {
    display: none;
}























.menu-container {
	 display: flex;
	 background-color: white;
	 border-radius: 8px;
	 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	 overflow: hidden;
	 position: relative;
	 height: 100%;
}
 .menu-container .menu-header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 15px 20px;
	 background-color: white;
	 border-bottom: 1px solid #e0e0e0;
	 font-weight: bold;
	 font-size: 16px;
}
 .menu-container .close-btn {
	 background: #e0e0e0;
	 border: none;
	 width: 24px;
	 height: 24px;
	 border-radius: 50%;
	 cursor: pointer;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-size: 14px;
	 color: #666;
}
 .menu-container .sidebar {
	 width: 180px;
	 background-color: #f8f8f8;
	 border-right: 1px solid #e0e0e0;
}
 .menu-container .sidebar-item {
	 padding: 12px 20px;
	 cursor: pointer;
	 font-size: 14px;
	 color: #333;
	 border-bottom: 1px solid #e0e0e0;
	 transition: background-color 0.2s;
}
 .menu-container .sidebar-item:hover {
	 background-color: #ebebeb;
}
 .menu-container .sidebar-item.active {
	 background-color: white;
	 font-weight: 500;
}
 .menu-container .content {
	 flex: 1;
	 padding: 20px 30px;
}
 .menu-container .tabs {
	 display: flex;
	 gap: 30px;
	 margin-bottom: 25px;
	 border-bottom: 2px solid #f0f0f0;
}
 .menu-container .tab {
	 padding: 10px 0;
	 cursor: pointer;
	 font-size: 14px;
	 color: #666;
	 position: relative;
	 font-weight: 500;
}
 .menu-container .tab.active {
	 color: #333;
	 font-weight: 600;
}
 .menu-container .tab.active::after {
	 content: '';
	 position: absolute;
	 bottom: -2px;
	 left: 0;
	 right: 0;
	 height: 2px;
	 background-color: #fee500;
}
 .menu-container .promotions-grid {
	 display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 gap: 20px;
}
 .menu-container .promo-card {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 text-align: center;
	 cursor: pointer;
	 transition: transform 0.2s;
}
 .menu-container .promo-card:hover {
	 transform: translateY(-2px);
}
 .menu-container .promo-icon {
	 width: 80px;
	 height: 80px;
	 border-radius: 12px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 margin-bottom: 10px;
	 position: relative;
	 overflow: hidden;
}
 .menu-container .promo-icon img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
}
 .menu-container .flash-sale {
	 background: linear-gradient(135deg, #ff6b6b, #ff4757);
}
 .menu-container .flash-sale-text {
	 color: white;
	 font-weight: bold;
	 font-size: 18px;
	 text-transform: uppercase;
}
 .menu-container .flash-badge {
	 background: #ff4757;
	 color: white;
	 padding: 3px 8px;
	 border-radius: 3px;
	 font-size: 10px;
	 font-weight: bold;
	 margin-bottom: 3px;
}
 .menu-container .sale-badge {
	 background: #ffd700;
	 color: #333;
	 padding: 3px 8px;
	 border-radius: 3px;
	 font-size: 10px;
	 font-weight: bold;
	 margin-bottom: 3px;
}
 .menu-container .icon-yellow {
	 background-color: #fee500;
}
 .menu-container .icon-black {
	 background-color: #333;
}
 .menu-container .promo-text {
	 font-size: 13px;
	 color: #333;
	 line-height: 1.4;
}
 .menu-container .hot-badge {
	 position: absolute;
	 top: -5px;
	 right: -5px;
	 background: linear-gradient(135deg, #ff6b6b, #ff4757);
	 color: white;
	 padding: 3px 8px;
	 border-radius: 3px;
	 font-size: 10px;
	 font-weight: bold;
}
 .menu-container .icon-content {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 color: #333;
}
 .menu-container .icon-white {
	 color: white;
}
 .menu-container .icon-label {
	 font-size: 9px;
	 font-weight: bold;
	 background: rgba(0, 0, 0, 0.6);
	 color: white;
	 padding: 2px 6px;
	 border-radius: 3px;
	 margin-top: 5px;
}
 .menu-container .yellow-label {
	 background: rgba(0, 0, 0, 0.7);
}
 

.reveal-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: 0.7s ease;
}

/* khi active (scroll vào) */
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 1280px) { 
    li.item-level1.reveal-left {
    translate: none;
    rotate: none;
    scale: none;
    opacity: 0;
    transform: translate(-100%, 0px);
}


.menu.active li.item-level1.reveal-left{
   translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0%, 0px);
}

    .menu .level1 {
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .menu {
        background-image: none !important;
        position: relative;
        z-index: 999;
    }

    .text-menu-m,
    .menu .header-logo,
    .menu .name-level1 img,
    .close-menu-m,
    .menu-m-info {
        display: none;
    }

}

@media (max-width: 1200px) {
    .menu.active:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
}

.menu .name-level1:hover {
    opacity: 1;
}
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* max-width: 500px; */
        height: 100vh;
        background-color: var(--color-1);
        transition: .3s;
        z-index: 10;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
    }

    .menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        backdrop-filter: blur(20px) saturate(1.8);
        background: rgb(0 0 0 / 47%);
        z-index: 9999999;
    }

    .menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7);
    }

    .menu .level1 {
        display: grid;
        padding: 0 15px;
        gap: 20px 10px;
    }

    .menu .name-level1 {
        grid-template-columns: 30px auto;
        align-items: center;
        text-transform: unset;
        font-size: 16px;
        opacity: .5;
        text-transform: uppercase;
    }

    .menu .name-level1.home svg {
        transform: translateY(-2px);
    }

    .menu ul .item-level1 {
        padding: 8px;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: right;
        justify-content: right;
    }

    /* .menu ul .item-level1:nth-child(1) {
        display: none;
    } */

    .menu .header-logo {
        position: relative;
        z-index: 1;
        margin-bottom: 30px;
        padding: 15px 15px 0;
    }

    .menu .name-level1 img {
        width: 20px;
    }

    .menu .icon-arrow {
        width: 25px;
        text-align: center;
        position: absolute;
        top: 8px;
        right: 0;
        display: none;
    }

    .menu .icon-arrow:not(.active) {
        transform: rotate(-90deg);
    }

    .menu .level2 {
        position: unset;
        background: transparent;
        opacity: 1;
        visibility: visible;
        margin-left: 45px;
        padding: 10px 0 0;
        display: none;
        transition: unset;
    }

    .menu .level2 li {
        list-style: disc;
    }

    .menu .level2 .name-level2 {
        padding: 5px 0;
    }

    .menu .level2 .name-level2:hover {
        background-color: transparent;
        color: var(--color-3);
    }

    .close-menu-m {
        position: absolute;
        top: 10px;
        right: 13px;
        z-index: 2;

    }

    .close-menu-m svg {
        width: 20px;
        height: 20px;
    }

    .menu-m-info {
        border-top: 1px solid #444;
        position: relative;
        z-index: 2;
        padding: 25px 15px 15px 15px;
        margin-top: 30px;
    }

    .menu-m-info .footer-info h2,
    .menu-m-info .footer-col h2 {
        font-size: 14px;
        margin-bottom: 12px;
        position: relative;
    }

    .menu-m-info .footer-info h2::before,
    .menu-m-info .footer-col h2::before {
        content:'';
        position: absolute;
        top: calc(100% + 3px);
        width: 50px;
        height: 1px;
        background-color: var(--color-2);
    }

    .menu-m-info ul li {
        list-style: disc;
        line-height: 25px;
    }

    .menu-m-info ul {
        margin-left: 15px;
    }

    .icon-menu-m,
    .header-left-m .account {
        display: flex;
        width: 32px;
        height: 32px;
        justify-content: center;
        align-items: center;
        background: #282828;
        border-radius: 50%;
    }

    .header-right .login{
		display: none;
	}

	.header-left-m {
		display: flex;
        gap: 10px;
        align-items: center;
	} 

    .header-left-m .account svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 550px) {
    .header-right {
        gap: 12px;
        padding: 0px;
        background: transparent;
    }

    .header-right .login {
        padding-right: 15px;
    }

    .header-right .form-search {
        right: -30px;
    }

    .form-search {
        display: none;
    }

    .form-search-m {
        /* display: none; */
        position: relative;
        width: 100%;
        margin-top: 10px;
        opacity: 1;
        visibility: visible;
    }

    .form-search-m.active {
        display: block;
    }

    .search-wrap.active .icon-search-close {
        display: block;
    }

    .search-wrap.active .icon-search-show {
        display: none;
    }
}