.menu-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.4); z-index: 21; opacity: 0; visibility: hidden; transition: opacity .3s ease }
.menu-backdrop.active { opacity: 1; visibility: visible }
.menu { position: relative; z-index: 20 }
.menu-main { width: 100%; padding: 0; margin: 0; list-style: none }
.menu-main ul { width: 100%; padding: 0; margin: 0; list-style: none }
.menu-main li { position: relative; z-index: 1; }
.menu-main li:last-child { padding-right: 0 }
.menu-main li.line { display: none; width: 1px; height: 59px; margin: 0; background-color: rgba(0,0,0,.1) }
.menu-main li a { display: block; position: relative; padding: 0; text-decoration: none; border-bottom: 2px solid transparent; z-index: 2; color: #333; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase }
.menu-main li a::after { display: none }
.menu-main>li:hover>a,.menu-main>li>a.active { color: var(--color-main) }
.menu-main li a.active::after,.menu-main li:hover>a::after { display: block }
.menu-main li a.has-child { padding: 0 15px 0 0 }
.menu-main li a.has-child:after { content: ""; display: block; position: absolute; bottom: calc(50% - 3.5px / 2); right: 0; width: 9px; height: 9px; border: 2px solid #000; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.menu-main>li>ul { position: absolute; min-width: 250px; width: max-content; top: 100%; left: 0; padding: 8px 0; background-color: #fff; border-radius: 8px; box-shadow: 0 10px 28px rgba(8, 25, 76, .14); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; z-index: 50 }
.menu-main>li:hover { z-index: 5 }
.menu-main>li:hover>ul, .menu-main>li:focus-within>ul { opacity: 1; visibility: visible }
.menu-main li ul li a { font-size: 14px; border-bottom: 0; padding: 8px 16px; text-transform: capitalize; line-height: 22px; font-weight: 600; white-space: nowrap }
.menu-main li ul li a.has-child { margin-right: 0 }
.menu-main li ul li a.has-child:after { border-color: #313131; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.menu-main li ul li a.active { color: var(--color-submain); background: 0 0 }
.menu-main li ul li a.active.has-child:after { border-color: var(--color-main) }
.menu-main li ul li:last-child>a { border-bottom: 0 }
.menu-main li ul li:hover>a { color: var(--color-main) }
.menu-main li ul li:hover>a.has-child:after { border-color: var(--color-main) }
.menu-main li ul li ul { top: 0; left: 98%; margin-top: 0 }
.menu-category { margin: 0; padding: 0; width: 300px; position: relative }
.menu-category>.category-title { position: relative; cursor: pointer; display: block; padding: 20px 20px 10px 40px; margin-bottom: -5px; background: url(../images/bg_menu.png) no-repeat left center; background-size: 100% auto; font-family: Oswald; font-size: 21px; font-weight: 500; text-transform: uppercase; color: #fff }
.menu-category ul { display: none; position: absolute; z-index: 100; width: 100%; left: 5px; top: 100%; margin: 0; padding: 0 0 4px; list-style: none; background-color: #fff }
.menu-category ul.index { display: block; width: 87%; padding: 20px 0 4px; border-right: 1px solid var(--color-main); border-bottom: 1px solid var(--color-main) }
.menu-category ul.index::before { content: ''; display: block; position: absolute; top: 0; right: -1px; width: 2px; height: 10px; background: #fff }
.menu-category ul>li { padding-right: 4px }
.menu-category ul li a { position: relative; display: block; font-family: 'SF Pro Display',sans-serif; font-size: 16px; padding: 11px 10px 11px 35px; background: #fff; background: linear-gradient(180deg,rgba(255,255,255,1) 0,rgba(246,246,246,1) 100%) }
.menu-category ul>li>a::before { content: ''; display: block; position: absolute; top: 17px; left: 13px; width: 14px; height: 12px; background: url(../images/icon-category.png) no-repeat center }
.menu-category li:hover>ul { display: block }
.menu-category ul ul { position: absolute; top: 0; left: 100%; width: auto; height: 100%; display: none; z-index: 10; border: 0; padding: 0; background-color: #fff }
.menu-category ul.index ul { top: 10px; height: calc(100% - 10px) }
.menu-category ul ul::before { display: none }
.menu-category .submenu { width: 300px; height: 100%; padding: 10px; box-shadow: 0 0 2px #ccc }
.menu-category .submenu li a { padding: 5px 10px; background: 0 0; text-transform: none }
.menu-main li ul.submenu { display: flex; flex-wrap: wrap; align-content: baseline; padding: 5px; min-width: 1100px; max-height: calc(100vh - 100px); overflow: auto; transform: translateX(-35%) }
.menu-main li ul.submenu>li { padding: 5px; margin: 0; width: 20% }
.menu-main li ul.submenu>li a { display: flex; align-items: center }
.menu-main li ul.submenu>li a:hover { color: var(--color-submain) }
.menu-main li ul.submenu>li>a { margin: 0 auto; background: 0 0; border-bottom: 2px solid #000; border-radius: 0 }
.menu-main li ul.submenu li { margin: 0 }
.menu-main li ul.submenu ul { z-index: 20 }
.menu-main li ul.submenu ul li a { padding: 0 }
.mm-menu_offcanvas { width: 86%; min-width: 240px; max-width: 360px }
.mm-navbar__title { text-transform: none; font-size: 16px }
.search-wrapper { height: 56px; display: flex; align-items: center; justify-content: end; outline: 0; overflow: hidden; transition: .4s ease-in-out; position: relative }
.search-wrapper.active { width: 240px; border-radius: 69px; background: #f1f1f1; position: relative }
.search-wrapper.active input { color: #8d8d8d; display: block; text-indent: 15px }
.search-wrapper.active .btn svg { color: #8d8d8d }
.search-wrapper input { position: absolute; top: 0; left: 0; width: calc(100% - 50px); height: 100%; outline: 0!important; border: 0!important; display: none; z-index: 1; background: 0 0; box-shadow: none!important; font-weight: 400; font-size: 14px }
.search-wrapper input::placeholder { font-weight: 400; font-size: 14px }
button#btn-clear-keyword { width: 0 }
.search-wrapper .btn { margin-right: 7px; position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 30px; width: 40px; height: 40px; cursor: pointer; background: 0 0; border-color: transparent; z-index: 2; background: #fff; padding: 11px }
.search-wrapper .btn svg { color: #333 }
.search-wrapper .btn-close { font-size: 20px; background: 0 0 }
#search-result { position: absolute; right: 0; top: 100%; width: 100%; min-width: 300px; background: #fff; border-radius: 5px; overflow: hidden; display: none }
#search-result.show { display: block; box-shadow: 0 0 10px 0 #0000001a }
#search-result ul { list-style: none; margin: 0; padding: 0 }
#search-result ul li { display: block!important }
#search-result ul li:hover { background: #f1f1f1 }
#search-result .image { width: 60px }
#search-result .code { line-height: 1 }
#search-result .info { width: calc(100% - 70px) }
#search-result .name { color: #333; font-size: 12px; font-weight: 600; margin-bottom: 0 }
#search-result .price { font-size: 13px }
#search-result .price-new { font-size: 14px }
#languageSelect { color: #8d8d8d }
.menu-wrapper { position: relative; z-index: 100; width: 285px; background-color: var(--color-main); margin: auto; text-align: center; margin-right: 47px }
.menu-toggle { position: relative; padding: 6px 10px; z-index: 2 }
.menu-dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background: #fff; width: 900px; height: 400px; padding: 5px 0; max-height: 500px; box-shadow: 0 2px 8px rgba(0,0,0,.2); border-radius: 5px }
.menu-wrapper:before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; border-radius: 10px 10px 0 0; background-color: var(--color-main) }
.menu-wrapper:hover .btn-main { background: var(--color-main) }
.menu-wrapper:hover .menu-dropdown { display: flex }
.menu-left { list-style: none; margin: 0; padding: 0; width: 230px; border-right: 1px solid #eee; background: #f9f9f9; border-bottom-left-radius: 5px; border-top-left-radius: 5px }
.menu-left li { padding: 7px 10px; cursor: pointer; border-left: 3px solid transparent; font-size: 13px; font-weight: 500 }
.menu-left li.active,.menu-left li:hover { border-left: 3px solid var(--color-main); background: #fff; color: var(--color-main) }
.menu-right { flex: 1; padding: 15px }
.menu-panel { display: none }
.menu-panel.active { display: block }
.menu-panel .category-item { width: calc(100% / 5 - 7px) }
.menu-panel .category-item .image img { max-width: 48px }
.menu-panel .category-item .name { font-weight: 500; font-size: 13px }
a.category__btn { border-radius: 9px; border: 1px solid silver; background: #fff; padding: 15px; display: inline-block; color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal }
a.category__btn svg { margin-right: 4px }
.HeaderTop__wrap { display: flex; align-items: center; justify-content: space-between; padding: 10px 0px; border-bottom: 1px solid #ddd }
.CategoryWrap { position: relative; z-index: 50; flex-shrink: 0 }
.CategoryBtn { border-radius: 9px; border: 1px solid silver; background: #fff; color: #000; font-family: Inter,sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; padding: 12px 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease; position: relative }
.CategoryBtn svg { margin-right: 0; flex-shrink: 0 }
.CategoryBtn__chev { margin-left: 2px; transition: transform .2s ease }
.CategoryWrap.is-open .CategoryBtn,.CategoryWrap:hover .CategoryBtn { border-color: #40b604; color: #40b604; box-shadow: 0 0 0 3px rgba(64,182,4,.12) }
.CategoryWrap.is-open .CategoryBtn__chev,.CategoryWrap:hover .CategoryBtn__chev { transform: rotate(180deg) }
.CategoryMega { position: absolute; top: calc(100% + 10px); left: 0; display: flex; width: min(920px,calc(100vw - 30px)); min-height: 360px; max-height: min(520px,calc(100vh - 120px)); background: #fff; border-radius: 14px; border: 1px solid #ececec; box-shadow: 0 18px 48px rgba(20,20,20,.14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease,transform .18s ease,visibility .18s ease; overflow: hidden; z-index: 60 }
.CategoryWrap.is-open .CategoryMega,.CategoryWrap:hover .CategoryMega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) }
.CategoryMega::before { content: ''; position: absolute; top: -12px; left: 0; width: 100%; height: 12px }
.CategoryMega__nav { list-style: none; margin: 0; padding: 10px 0; width: 250px; flex-shrink: 0; background: #f7f8f7; border-right: 1px solid #eee; overflow-y: auto }
.CategoryMega__navItem a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #2a2a2a; font-size: 13.5px; font-weight: 500; border-left: 3px solid transparent; transition: background .15s ease,color .15s ease,border-color .15s ease }
.CategoryMega__navItem a span { flex: 1 1 auto; min-width: 0; line-height: 1.35 }
.CategoryMega__navItem a svg:last-child { opacity: .35; flex-shrink: 0 }
.CategoryMega__navIcon { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex-shrink: 0 }
.CategoryMega__navItem.is-active a,.CategoryMega__navItem:hover a { background: #fff; color: #40b604; border-left-color: #40b604 }
.CategoryMega__navItem.is-active a svg:last-child,.CategoryMega__navItem:hover a svg:last-child { opacity: 1; color: #40b604 }
.CategoryMega__panels { flex: 1 1 auto; min-width: 0; position: relative; background: #fff }
.CategoryMega__panel { display: none; height: 100%; padding: 18px 20px 20px; overflow-y: auto; animation: categoryMegaIn .18s ease }
.CategoryMega__panel.is-active { display: block }
@keyframes categoryMegaIn {
    from { opacity: 0; transform: translateY(4px) }
    to { opacity: 1; transform: translateY(0) }
}
.CategoryMega__panelHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0 }
.CategoryMega__panelTitle { font-size: 16px; font-weight: 700; color: #1a1a1a }
.CategoryMega__panelTitle:hover { color: #40b604 }
.CategoryMega__viewAll { font-size: 12.5px; font-weight: 600; color: #40b604; white-space: nowrap }
.CategoryMega__viewAll:hover { text-decoration: underline }
.CategoryMega__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px }
.CategoryMega__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 8px; border-radius: 10px; border: 1px solid transparent; background: #fafafa; transition: border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease }
.CategoryMega__item:hover { background: #fff; border-color: rgba(64,182,4,.35); box-shadow: 0 8px 20px rgba(64,182,4,.08); transform: translateY(-2px); color: #40b604 }
.CategoryMega__thumb { width: 64px; height: 64px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #eee }
.CategoryMega__thumb img { width: 100%; height: 100%; object-fit: contain }
.CategoryMega__name { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.CategoryMega__item:hover .CategoryMega__name { color: #40b604 }
.CategoryMega__empty { padding: 40px 10px; text-align: center; color: #888; font-size: 14px }
.CategoryMega__empty a { color: #40b604; font-weight: 600 }
.CategoryBackdrop { position: fixed; inset: 0; background: rgba(16,16,16,.28); z-index: 40; opacity: 0; visibility: hidden; transition: opacity .18s ease,visibility .18s ease; pointer-events: none }
.CategoryBackdrop.is-active { opacity: 1; visibility: visible; pointer-events: auto }
@media only screen and (max-width: 991px) {
    .CategoryMega { width:min(100vw - 20px,640px); min-height: 300px; left: 50%; transform: translate(-50%,8px) }
    .CategoryWrap.is-open .CategoryMega,.CategoryWrap:hover .CategoryMega { transform: translate(-50%,0) }
    .CategoryMega__nav { width: 190px }
    .CategoryMega__grid { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media only screen and (max-width: 767px) {
    .CategoryMega { position:fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 75vh; min-height: 280px; border-radius: 16px 16px 0 0; transform: translateY(100%) }
    .CategoryWrap.is-open .CategoryMega { transform: translateY(0) }
    .CategoryWrap:not(.is-open):hover .CategoryMega { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%) }
    .CategoryMega__nav { width: 140px }
    .CategoryMega__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
    .CategoryMega__panel { padding: 14px }
}
.SearchFullWrap .search-wrapper { border-radius: 96px; border: 1px solid #cfcfcf; background: 0 0 }
.SearchFullWrap #keyword::placeholder { color: #4e4e4e; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal }
.HotlineHeader { color: #333; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px }
.HotlineHeader .hotline { gap: 10px }
.cart { border-radius: 9px; border: 1.5px solid #40b604; background: #fff; padding: 14px 18px; gap: 8px }
.cart span { color: #40b604; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 600; line-height: 19px }
button.CategoryBtn:before { position: absolute; content: ''; top: 100%; background: 0 0; width: 100%; height: 0%; left: 0 }
button.CategoryBtn:hover:before { height: 100% }
.HeaderMenu__Wrapper,.HeaderMenu__Wrapper .widthBox { overflow: visible }
.HeaderMenu__Mid-Category.CategoryWrap { z-index: 70 }
.HeaderMenu__Mid-Category.CategoryWrap.is-open .CategoryBtn,.HeaderMenu__Mid-Category.CategoryWrap:hover .CategoryBtn { background: #064a29; border-color: #064a29; color: #fff; box-shadow: 0 10px 24px rgba(8,91,50,.25) }
.HeaderMenu__Mid-Category .CategoryMega { z-index: 80 }
.HeaderMenu__Mid-Category .CategoryMega__navItem.is-active a,.HeaderMenu__Mid-Category .CategoryMega__navItem:hover a { color: var(--primary-color); border-left-color: var(--primary-color) }
.HeaderMenu__Mid-Category .CategoryMega__empty a,.HeaderMenu__Mid-Category .CategoryMega__item:hover,.HeaderMenu__Mid-Category .CategoryMega__item:hover .CategoryMega__name,.HeaderMenu__Mid-Category .CategoryMega__navItem.is-active a svg:last-child,.HeaderMenu__Mid-Category .CategoryMega__navItem:hover a svg:last-child,.HeaderMenu__Mid-Category .CategoryMega__panelTitle:hover,.HeaderMenu__Mid-Category .CategoryMega__viewAll { color: var(--primary-color) }
.HeaderMenu__Mid-Category .CategoryMega__item:hover { border-color: rgba(8,91,50,.35); box-shadow: 0 8px 20px rgba(8,91,50,.08) }
.menu-main li ul li a:before { content: unset; }