@font-face {
  font-family: "UTM Sharnay";
  src: url("../fonts/custom/UTMSharnay.woff2") format("woff2"), url("../fonts/custom/UTMSharnay.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@-moz-keyframes spin {
  to {
    -moz-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes blink {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes skeleton {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .1
  }
}

@-moz-keyframes skeleton {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .1
  }
}

@keyframes skeleton {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .1
  }
}

.inset-0 {
  inset: 0
}

.pointer {
  cursor: pointer
}

.z--1 {
  z-index: -1
}

.z-1 {
  z-index: 1
}

.z-2 {
  z-index: 2
}

.z-3 {
  z-index: 3
}

.isolate {
  isolation: isolate
}

.ovf-hidden {
  overflow: hidden
}

.square {
  aspect-ratio: 1/1
}

.floating-compare_product {
  bottom: 0;
  -webkit-filter: drop-shadow(0px 0px 6px rgba(107, 107, 107, 0.6235294118));
  filter: drop-shadow(0px 0px 6px rgba(107, 107, 107, 0.6235294118))
}

.floating-compare_product .accodion-slide {
  display: grid;
  grid-template-rows: 0fr
}

.floating-compare_product input:checked+label+.accodion-slide {
  grid-template-rows: 1fr
}

.floating-compare_product label {
  font-size: 14px;
  color: var(--primary-color);
  padding: 8px 10px;
  border-radius: 5px;
  translate: 0 2px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-bottom: 0;
  bottom: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-compare_product .badge-pill {
  line-height: 1.2;
  font-size: 12px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex
}

#compare_product th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: -0.5px;
  background: #fff
}

#compare_product tbody>tr {
  position: relative
}

:root {
  --max-width: min(1200px, -webkit-calc(100% - 30px));
  --max-width: min(1200px, -moz-calc(100% - 30px));
  --max-width: min(1200px, calc(100% - 30px));
  --max-padding: 1fr;
  --primary-color: #0253a4;
  --secondary-color: #d83831;
  --font-family: "Inter", sans-serif;
  --font-secondary: "UTM Sharnay";
  --line: 3
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px
}

::-webkit-scrollbar-track {
  background: #fff
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 5px
}

body {
  min-width: 1366px;
  top: 0 !important;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 25px;
  background-color: #f5f5fa
}

body .home-body {
  background-color: #dddde3
}

img {
  height: auto !important;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: inline-block
}

img.lazy {
  display: block;
  opacity: 0
}

img:not(.initial) {
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  transition: opacity .3s
}

img:not([src]) {
  visibility: hidden
}

img:is(.error, .initial, .loaded) {
  opacity: 1
}

a,
input,
textarea {
  outline: none;
  padding: 0
}

input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.w-clear:after {
  clear: both;
  content: "";
  display: block
}

.hidden,
.none {
  display: none
}

.clear {
  clear: both
}

.hidden-seoh {
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden
}

.wrap-content {
  display: grid;
  width: 100% !important;
  grid-column: main;
  grid-template-columns: [main-start] var(--max-padding) [content-start] var(--max-width) [content-end] var(--max-padding) [main-end]
}

.wrap-content>*:not(.fw, .wrap-content) {
  grid-column: content
}

.wrap-content>.fw {
  grid-column: main
}

.title-main {
  font-size: clamp(18px, 2.0325203252vw, 25px);
  line-height: 1.64;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center
}

.title-main h1 {
  margin-bottom: 0;
  font-size: clamp(18px, 2.0325203252vw, 25px);
  line-height: 1.64;
}

.time-main {
  color: #999;
  margin-bottom: .75rem
}

.time-main i {
  margin: 3px 7px 0 0;
  vertical-align: top
}

.time-main span {
  display: inline-block;
  vertical-align: top
}

.share {
  background: rgba(128, 128, 128, .15);
  border-radius: 5px;
  line-height: normal;
  margin-top: 15px;
  padding: 17px 15px 10px
}

.share b {
  display: block;
  margin-bottom: 5px
}

.form-control {
  height: -webkit-calc(1em + 1.25rem + 8px);
  height: -moz-calc(1em + 1.25rem + 8px);
  height: calc(1em + 1.25rem + 8px)
}

.form-control-plaintext:not(textarea) {
  height: -webkit-calc(1em + 1.25rem + 8px);
  height: -moz-calc(1em + 1.25rem + 8px);
  height: calc(1em + 1.25rem + 8px)
}

.footer-article {
  padding-top: clamp(20px, 3.0081300813vw, 37px);
  padding-bottom: clamp(20px, 2.4390243902vw, 30px)
}

.footer-article-group {
  font-size: 13px;
  line-height: 25px;
  color: #666
}

.footer-article-group a {
  color: #666
}

.footer-article-group p {
  margin-bottom: 0
}

.footer-powered {
  font-size: 12px;
  line-height: 22px;
  color: #666;
  text-align: center;
  padding: clamp(10px, 1.1382113821vw, 14px) 0;
  padding-bottom: 45px;
}

.footer-title {
  font-size: clamp(14px, 1.3008130081vw, 16px);
  line-height: 1.5625;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 8px
}

.footer-ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.footer-ul li:last-child {
  margin-bottom: 0
}

.footer-ul li a:hover {
  color: var(--primary-color);
  -webkit-text-decoration: none;
  text-decoration: none
}

#footer-map {
  height: 500px;
  position: relative
}

#footer-map iframe {
  height: 100% !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  width: 100% !important
}

.social-plugin {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  justify-content: flex-start;
  margin-top: 10px
}

.social-plugin .at-share-btn {
  margin-bottom: 0 !important
}

.social-plugin .zalo-share-button {
  margin-left: 3px
}

.social-plugin iframe {
  z-index: 1 !important
}

.pagination-ajax a {
  display: inline-block;
  font-size: 13px;
  width: 35px
}

.pagination-ajax a:is(:hover, .current) {
  color: #fff !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important
}

.pagination-ajax a:is(:hover, .current)::before {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)
}

.pagination-ajax a:is(.first, .last, .next, .prev) {
  text-indent: -9999px
}

.pagination-ajax a:is(.first, .last, .next, .prev):before {
  background-color: rgba(0, 0, 0, 0);
  background-position: 50%;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2
}

.pagination-ajax a.first::before {
  background-image: url(../images/page-first.png)
}

.pagination-ajax a.last::before {
  background-image: url(../images/page-last.png)
}

.pagination-ajax a.next::before {
  background-image: url(../images/page-next.png)
}

.pagination-ajax a.prev::before {
  background-image: url(../images/page-prev.png)
}

.grecaptcha-badge {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  overflow: hidden
}

coccocgrammar {
  display: none
}

.scrollToTop {
  bottom: 65px;
  color: #444;
  cursor: pointer;
  display: none;
  font-weight: 700;
  height: 41px;
  position: fixed;
  right: 25px;
  text-align: center;
  text-decoration: none;
  width: 41px;
  z-index: 10
}

.text-split {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line);
  box-orient: vertical;
  line-clamp: var(--line);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal
}

.btn-frame {
  width: 50px
}

.btn-frame>i {
  background-color: var(--primary-color)
}

.btn-frame .kenit-alo-circle {
  width: 58px
}

.btn-frame .kenit-alo-circle-fill {
  width: 66px
}

.scale-img {
  display: block;
  overflow: hidden
}

.scale-img img {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1)
}

:is([class*=_item]:hover .scale-img, .scale-img:hover)>:is(img, picture>img) {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1)
}

[class*=-xemthem] {
  -webkit-transition: all .6s;
  -moz-transition: all .6s;
  transition: all .6s;
  position: relative;
  overflow: hidden
}

[class*=-xemthem]::before {
  -webkit-transition: all .6s;
  -moz-transition: all .6s;
  transition: all .6s;
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background-image: -webkit-linear-gradient(70deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%);
  background-image: -moz-linear-gradient(70deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%);
  background-image: linear-gradient(20deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%);
  -webkit-background-size: 600% 600%;
  background-size: 600%
}

[class*=-xemthem]:hover {
  color: #fff;
  -webkit-transform: translateX(0.5rem);
  -moz-transform: translateX(0.5rem);
  transform: translateX(0.5rem)
}

[class*=-xemthem]:hover::before {
  background-position: 100%
}

.transition {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}

.cart-fixed {
  color: #fff !important;
  z-index: 10
}

.cart-fixed i {
  font-size: 20px
}

.cart-fixed span {
  background: var(--primary-color);
  border-radius: 100%;
  color: #fff;
  font-size: 11px;
  height: 25px;
  position: absolute;
  right: -5px;
  text-align: center;
  top: 0;
  width: 25px
}

.floating-button {
  bottom: 50%;
  gap: 33px;
  right: 20px;
  translate: 0 50%;
  z-index: 101
}

.floating-button .floating-button-items {
  gap: 33px;
}

.a2a_kit .a2a_svg {
  height: 30px;
  line-height: 30px;
  width: 30px
}

.js-facebook-messenger-container.closed {
  display: none !important
}

.js-facebook-messenger-tooltip {
  display: none;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .1);
  -webkit-box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt;
  box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt;
  z-index: 999;
  color: #404040;
  background: #fff;
  bottom: 97px;
  right: 97px
}

.js-facebook-messenger-tooltip.closed {
  display: none !important
}

.js-facebook-messenger-box svg {
  -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
  transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
  -moz-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -moz-transform 160ms ease-in-out;
  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
  transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out, -moz-transform 160ms ease-in-out
}

.js-facebook-messenger-box svg#fb-msng-icon {
  width: 32px;
  height: 33px;
  opacity: 1;
  overflow: hidden
}

.js-facebook-messenger-box svg#close-icon {
  opacity: 0;
  width: 19px;
  height: 20px
}

.js-facebook-messenger-button {
  z-index: 999
}

.js-facebook-messenger-close-tooltip {
  width: 10px;
  height: 10px;
  display: inline-block;
  cursor: pointer;
  margin-left: 10px
}

.js-facebook-messenger-box.rubberBand {
  -webkit-animation-name: rubberBand;
  -moz-animation-name: rubberBand;
  animation-name: rubberBand
}

.js-facebook-messenger-box.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

.js-facebook-messenger-box.rotate svg {
  translate: -50% -50%
}

.js-facebook-messenger-box.rotate svg#fb-msng-icon {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg)
}

.js-facebook-messenger-box.rotate svg#close-icon {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.js-facebook-messenger-container {
  pointer-events: none;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
  -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
  transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
  -moz-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -moz-transform 160ms ease-in-out;
  transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
  transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out, -moz-transform 160ms ease-in-out
}

.js-facebook-messenger-container iframe {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px
}

.js-facebook-messenger-container-button {
  z-index: 1000;
  z-index: 1000
}

.js-facebook-messenger-container-button iframe {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px
}

.js-facebook-messenger-top-header {
  width: clamp(20px, 16.1054172767vw, 220px)
}

.js-facebook-messenger-container.open {
  -webkit-transform: translateY(0px) translateX(-16px);
  -moz-transform: translateY(0px) translateX(-16px);
  transform: translateY(0px) translateX(-16px);
  opacity: 1;
  pointer-events: all
}

.js-facebook-messenger-box.open svg#fb-msng-icon {
  opacity: 0
}

.js-facebook-messenger-box.open svg#close-icon {
  opacity: 1
}

.js-facebook-messenger-box.rotate.open svg#close-icon {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg)
}

.skeleton :is([class*="-pic "], [class*="-title "], [class*="-desc "], [class*="-content "]) {
  background: #e4e4e4 !important;
  border-radius: 5px;
  -webkit-animation: skeleton 2s ease-in-out infinite;
  -moz-animation: skeleton 2s ease-in-out infinite;
  animation: skeleton 2s ease-in-out infinite
}

.skeleton p,
.skeleton span,
.skeleton button {
  background: -webkit-linear-gradient(bottom, transparent 2px, #e4e4e4 2px, #e4e4e4 -webkit-calc(100% - 2px), transparent -webkit-calc(100% - 2px)) !important;
  background: -moz-linear-gradient(bottom, transparent 2px, #e4e4e4 2px, #e4e4e4 -moz-calc(100% - 2px), transparent -moz-calc(100% - 2px)) !important;
  background: linear-gradient(0deg, transparent 2px, #e4e4e4 2px, #e4e4e4 calc(100% - 2px), transparent calc(100% - 2px)) !important;
  border-color: rgba(0, 0, 0, 0) !important;
  -webkit-animation: skeleton 2s ease-in-out infinite;
  -moz-animation: skeleton 2s ease-in-out infinite;
  animation: skeleton 2s ease-in-out infinite;
  box-shadow: unset !important;
  filter: unset !important;
  text-shadow: unset !important;
  -webkit-text-stroke: unset !important;
  paint-order: unset !important;
}

.skeleton p,
.skeleton a,
.skeleton span,
.skeleton button {
  color: rgba(0, 0, 0, 0) !important
}

.skeleton .pagination-ajax {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  position: relative
}

.skeleton .pagination-ajax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3
}

.skeleton_img {
  opacity: 0
}

[x-cloak] {
  display: none !important
}

.menu {
  z-index: 100;
  position: relative;
}

.menu[x-cloak] {
  position: relative;
  display: grid;
}

@keyframes menu_animation {
  0% {
    translate: 0 -100%
  }

  100% {
    translate: 0 0
  }
}

.menu:not(.position-relative) {
  position: sticky;
  top: 0;
  translate: 0 -100%;
  animation: menu_animation 0.3s linear both;
}

.menu-product-dropdown {
  width: 20.8333333333%
}

.menu-product-dropdown-title {
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  padding: 5px clamp(10px, 1.4634146341vw, 18px);
  border-radius: 10px;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s
}

.menu-product-dropdown-title.dropdowned {
  border-radius: 10px 10px 0 0
}

.menu-product-dropdown-list {
  padding: 8px 0;
  aspect-ratio: 250/408;
  overflow: auto
}

.menu-product-dropdown-list_item {
  padding: 7.5px 20px;
  font-size: 14px;
  line-height: 25px;
  color: #1a1a1a
}

.menu-product-dropdown-cat {
  width: 480%;
  aspect-ratio: 1200/408;
  padding-left: 100%;
  overflow: auto
}

.menu-product-dropdown-cat-grid {
  width: 100%;
  display: grid;
  --gap: 20px;
  gap: 0 var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - (var(--gap) * 3)) / 4)), 1fr));
}

.menu-product-dropdown-cat_item {
  font-size: 14px;
  line-height: 40px;
  color: #1a1a1a
}

[x-bind=menu_brand_state]>.position-absolute {
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 400px
}

.menu-flex>a {
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 500
}

.menu-flex>a.active,
.menu-flex>a:hover {
  color: var(--secondary-color)
}

.menu-index {
  -webkit-filter: saturate(0%) brightness(0%) invert(20%) opacity(1);
  filter: saturate(0%) brightness(0%) invert(20%) opacity(1);
  filter: url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="col-0.2-0.2-0.2-1" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 0.2            0 0 0 0 0.2            0 0 0 0 0.2            0 0 0 1 0          "/>        </filter>      </svg>      #col-0.2-0.2-0.2-1')
}

.menu-index.active {
  -webkit-filter: saturate(0%) brightness(0%) invert(51.9607843137%) opacity(1);
  filter: saturate(0%) brightness(0%) invert(51.9607843137%) opacity(1);
  filter: url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="col-0.8470588235-0.2196078431-0.1921568627-1" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 0.8470588235            0 0 0 0 0.2196078431            0 0 0 0 0.1921568627            0 0 0 1 0          "/>        </filter>      </svg>      #col-0.8470588235-0.2196078431-0.1921568627-1')
}

.menu-flashsale.active {
  -webkit-filter: saturate(0%) brightness(0%) invert(32.5490196078%) opacity(1);
  filter: saturate(0%) brightness(0%) invert(32.5490196078%) opacity(1);
  filter: url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="col-0.0078431373-0.3254901961-0.6431372549-1" color-interpolation-filters="sRGB">          <feColorMatrix type="matrix" values="            0 0 0 0 0.0078431373            0 0 0 0 0.3254901961            0 0 0 0 0.6431372549            0 0 0 1 0          "/>        </filter>      </svg>      #col-0.0078431373-0.3254901961-0.6431372549-1')
}

.menu-res {
  background: var(--primary-color);
  z-index: 100;
}

#menu {
  display: none
}

/* #hamburger {
  display: block;
  height: 23px;
  position: relative;
  width: 45px
}

#hamburger span,
#hamburger:after,
#hamburger:before {
  background: #fff;
  content: "";
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  width: 100%;
  top: 10px;
  -webkit-transition: none .5s ease .5s;
  -moz-transition: none .5s ease .5s;
  transition: none .5s ease .5s;
  -webkit-transition-property: top, bottom, left, opacity, -webkit-transform;
  transition-property: top, bottom, left, opacity, -webkit-transform;
  -moz-transition-property: transform, top, bottom, left, opacity, -moz-transform;
  transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity, -webkit-transform, -moz-transform
}

#hamburger:after {
  top: 20px
}

#hamburger:before {
  top: 0
} */

.search-res {
  position: relative
}

.search-res input[type=checkbox]:checked+label {
  border-radius: 50%;
  background-color: #fff;
  color: var(--primary-color)
}

.search-res input[type=checkbox]:checked+label+.search-grid {
  opacity: 1;
  grid-template-columns: 1fr
}

.search-res .search-grid {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 2;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content
}

.grid-sp {
  --sl-x: 5;
  --x: 10px;
  --y: 10px;
  display: grid;
  grid-template-columns: repeat(var(--sl-x), 1fr);
  gap: var(--x) var(--y)
}

.sp_item {
  border: 1px solid #f5f5fa;
  padding: 15px
}

.sp-title {
  font-size: 13px;
  color: #1a1a1a;
  height: -webkit-calc(25px*var(--line));
  height: -moz-calc(25px*var(--line));
  /* height: calc(25px*var(--line)); */
  margin-top: 20px;
  margin-bottom: 0
}

.sp-desc {
  display: none !important;
}

.sp-properties:not(:has(> :not(template))) {
  display: none !important;
}

.sp-title+template+.sp-price {
  margin-top: 28px
}

.sp-price {
  font-size: 14px;
  color: var(--secondary-color);
  font-weight: 700;
  margin-bottom: 0
}

.sp-price span.jj-line-through {
  font-size: 12px;
  color: gray
}

.sp-discount {
  top: 10px;
  right: 10px;
  font-size: 12px;
  line-height: 20px;
  color: #fff
}

.sp-discount-price {
  font-size: 12px;
  color: var(--primary-color)
}

.sp-properties {
  font-size: 12px;
  line-height: 20px;
  color: #1a1a1a;
  height: 20px
}

.sp-properties span {
  background-color: #ebebf0;
  white-space: nowrap;
}

.sp-comment-star {
  line-height: normal
}

.sp-comment-star i {
  font-size: 12px !important;
  color: #ffc107
}

.sp-comment-star .comment-count {
  font-size: 12px;
  color: var(--primary-color)
}

.sp-compare-btn {
  font-size: 12px;
  line-height: 20px;
  -webkit-transform: .3s;
  -moz-transform: .3s;
  transform: .3s
}

.sp-compare-btn.active {
  color: #fff !important;
  border-color: var(--primary-color);
  background-color: var(--primary-color)
}

.sp_item .sp-compare-btn {
  color: #666
}

.sp-desc {
  font-size: 12px;
  color: #1a1a1a;
  height: 25px
}

.sp-soldout {
  position: relative;
}

.sp-soldout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #333;
  opacity: .5;
  z-index: 20;
}

.sp-soldout::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  aspect-ratio: 300/128;
  width: 80%;
  background: url(../images/sp_soldout.webp) no-repeat center/contain;
  z-index: 30;
}

.header-top {
  font-size: 13px;
  line-height: 30px;
  color: #1a1a1a
}

.header-top [class^=wrap-header-] {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 48%;
  -moz-box-flex: 1;
  flex: 1 1 48%
}

.header-bottom {
  z-index: 101
}

.header-bottom_item {
  max-width: 10%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 13px;
  line-height: 20px;
  color: #1a1a1a;
  font-weight: 400
}

.header-bottom_item .header-bottom-pic {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-box-flex: 1;
  flex: 1 1 auto
}

.header-bottom_item .header-bottom-pic+span {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 -webkit-calc(100% - 40px);
  -moz-box-flex: 1;
  flex: 1 1 calc(100% - 40px)
}

.header-bottom-notify {
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  font-weight: 400;
  display: block;
  width: 16px;
  text-align: center
}

.header-bottom-user {
  background: #fff;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  -webkit-box-shadow: 0px 0px 5px rgba(51, 51, 51, .3843137255);
  box-shadow: 0px 0px 5px rgba(51, 51, 51, .3843137255)
}

.header-bottom-user a {
  color: var(--primary-color);
  white-space: nowrap
}

.header-bottom-user a i {
  font-size: 14px
}

.btn-xemthem {
  font-size: 14px;
  color: #fff;
  padding: 3px 19px
}

.btn-xemthem.jj-bg-primary {
  --xemthem-color: var(--secondary-color)
}

.btn-xemthem.jj-bg-secondary {
  --xemthem-color: var(--primary-color)
}

.wrap-search {
  width: 33.3333333333%
}

.search {
  border-radius: 6px;
  background-color: #f5f5fa;
  height: 40px;
  font-size: 13px;
  line-height: 30px;
  color: gray;
  padding: 0 15px
}

.search button {
  font-size: 16px
}

.search-keywords-slide {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  min-height: 30px
}

.search-keywords-slide a {
  font-size: 12px;
  line-height: 30px;
  color: gray
}

[x-ref="search_suggestion"] {
  position: absolute;
  top: -webkit-calc(100% + 8px);
  top: -moz-calc(100% + 8px);
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  width: 100%;
  -webkit-filter: drop-shadow(0 0 4px rgba(51, 51, 51, 0.4901960784));
  filter: drop-shadow(0 0 4px rgba(51, 51, 51, 0.4901960784))
}

[x-ref="search_suggestion"] .arrow {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  height: 8px;
  width: 16px;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #f5f5f5
}

[x-ref="search_suggestion"] .spinner-border {
  display: none
}

[x-ref="search_suggestion"] .paging-out {
  display: block
}

[x-ref="search_suggestion"].htmx-request {
  padding: 10px
}

[x-ref="search_suggestion"].htmx-request .spinner-border {
  display: block
}

[x-ref="search_suggestion"].htmx-request .paging-out {
  display: none
}

.search_auto_complete-title-main {
  padding: 10px;
  background: #f5f5f5;
  font-size: 13px;
  line-height: 18px;
  color: #666;
  font-weight: 400
}

.search_auto_complete_item,
.search_auto_complete-title-main {
  padding: 10px
}

.search_auto_complete_item:not(:first-child),
.search_auto_complete-title-main:not(:first-child) {
  border-top: 1px solid #dddde3
}

.search_auto_complete-info {
  width: -webkit-calc(100% - 60px - 8px);
  width: -moz-calc(100% - 60px - 8px);
  width: calc(100% - 60px - 8px)
}

.grid-brand {
  --sl-x: 6;
  --x: 20px;
  --y: 20px;
  display: grid;
  grid-template-columns: repeat(var(--sl-x), 1fr);
  gap: var(--x) var(--y)
}

.grid-brand-responsive {
  display: grid;
  --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px);
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(max(100px, calc((100% - (var(--gap) * 5)) / 6)), 1fr));
}

.grid-brand.menu {
  --sl-x: 5
}

.grid-brand.menumb {
  --sl-x: 3
}

.flashsale-countdown-clock {
  min-height: 30px
}

.flashsale-countdown-clock>span {
  font-size: 14px;
  color: #fff
}

.flashsale-countdown-clock-group {
  border-radius: 4px;
  background-color: #fff;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center
}

.flashsale-countdown-clock-group.countDays,
.flashsale-countdown-clock-group.countDays+.cham {
  display: none
}

.flashsale-countdown-clock-group>.position-relative {
  width: 11px;
  height: 25px;
  display: block
}

.flashsale-countdown-clock-group .digit {
  position: absolute;
  font-size: 16px;
  color: var(--secondary-color);
  font-weight: 700
}

#paging-out .flashsale-countdown-clock-group {
  background-color: var(--primary-color)
}

#paging-out .flashsale-countdown-clock-group .digit {
  color: #fff
}

#paging-out .flashsale-countdown-clock-group+.cham {
  color: var(--primary-color);
}

#paging-out .countdownHolder.has-day :is(.flashsale-countdown-clock-group.countDays, .flashsale-countdown-clock-group+.cham) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}

.htmx-indicator:not(.htmx-request) {
  display: none !important
}

.pro-detail-cart-btn {
  grid-template-rows: repeat(2, 40px)
}

@keyframes border_rotate {

  0%,
  100% {
    clip-path: polygon(25% -50%, 75% -50%, 75% 150%, 25% 150%);
  }

  25% {
    clip-path: polygon(150% 25%, 150% 75%, -50% 75%, -50% 25%);
  }

  50% {
    clip-path: polygon(75% 150%, 25% 150%, 25% -50%, 75% -50%);
  }

  75% {
    clip-path: polygon(-50% 75%, -50% 25%, 150% 25%, 150% 75%);
  }
}

.fancybox__slide {
  padding: 0;
}

.floating-button-auto_item:hover :is(p, span) {
  color: var(--primary-color) !important;
}

.menu-product-dropdown-cat_title {
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  margin-bottom: 4px;
}


.content_under_grid {
  margin-top: clamp(10px, 2.4390243902vw, 30px)
}

.content_under_grid.minimize.has_mask>div[x-ref=content_under_grid] {
  max-height: 138px;
  overflow: hidden
}

.content_under_grid.minimize.has_mask>div[x-ref=content_under_grid]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(245, 245, 250)), to(rgba(245, 245, 250, 0)));
  background-image: -webkit-linear-gradient(bottom, rgb(245, 245, 250) 0%, rgba(245, 245, 250, 0) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(245, 245, 250) 0%, rgba(245, 245, 250, 0) 100%);
  background-image: linear-gradient(0deg, rgb(245, 245, 250) 0%, rgba(245, 245, 250, 0) 100%);
  height: 100px
}

.content_under_grid>[x-bind=trigger_btn_bind] {
  line-height: 32px
}

marquee.header-top-slogan>p {
  margin-bottom: 0;
}

.menu-product-dropdown-cat *:last-child:not(.brand-pic) {
  margin-bottom: 0 !important;
  border-bottom: unset !important;
}

/* *,
*::before,
*::after {
  outline: 2px solid lime;
} */

.menu_item_hover:hover {
  background-color: #dae0e5;
  border-radius: 8px;
}

#filter_boundary {
  margin-top: -8px;
}

@media (min-width: 992px) {
  #filter_boundary {
    margin-top: -40px !important;
  }
}

.brand_item.active .brand-pic {
  border-color: var(--primary-color) !important;
}

@media (max-width:610px) {
  .brand-flex>* {
    flex: 0 0 calc((100% / 3) - 8px);
  }
}

.grid-brand_nb {
  padding: clamp(10px, 1.6260162602vw, 20px);
  --sl-x: 6;
  --x: 20px;
  --y: 20px;
  display: grid;
  grid-template-columns: repeat(var(--sl-x), 1fr);
  gap: var(--x) var(--y)
}



.payment-info {
  background: #f5efef;
}

.zalo-chat-widget {
  bottom: 62px !important;
  left: 10px !important;
}