@charset "UTF-8";
:root {
  --w-container: 100%;
  --fs-size: 1.4rem;
  --fs-title-tab: 1.5rem;
  --fs-dot-tab: 1.5rem;
  --fs-num-slide: 2rem;
  --fs-text-tab: 1.4rem;
  --fs-time-tab: 1.4rem;
  --fs-title-main: 1.6rem;
  --fs-text: 1.4rem;
  --fs-min: 1.2rem;
  --fs-min-2: 1.3rem;
  --fs-price: 2.2rem;
  --fs-input: 2.3rem;
  --fs-title-store: 1.6rem;
  --h-header: 40px;
  --h-slide-top: 20.89px;
  --size-block: 10px;
  --color-main-linear-gradient: linear-gradient(90deg, #7ec2fc 0%, #b497fd 33%, #fa96cb 66%, #fccc97 100%);
  --color-main-linear-gradient-2: linear-gradient(90deg, #fccc97 0%, #fa96cb 33%, #b497fd 66%, #7ec2fc 100%);
  --color-main: #ec197a;
  --color-main-2: #fa96cb;
  --color-main-3: #fe4b3b;
  --color-main-4: #b497fd;
  --color-main-5: #7ec2fc;
  --color-white: #fff;
  --color-border: #E5E7EB;
  --color-text: #333;
  --color-bg: #f0f0f0;
}

@media (min-width: 576px) {
  :root {
    --w-container: 100%;
  }
}
@media (min-width: 700px) {
  :root {
    --h-header: 66px;
    --fs-time-tab: 1.6rem;
    --fs-price: 2.5rem;
    --fs-text-tab: 1.6rem;
    --fs-min: 1.6rem;
    --h-slide-top: 64.16px;
  }
}
@media (min-width: 992px) {
  :root {
    --w-container: 960px;
  }
}
@media (min-width: 1200px) {
  :root {
    --w-container: 1140px;
  }
}
@media (min-width: 1400px) {
  :root {
    --w-container: 1350px;
    --fs-size: 1.6rem;
    --fs-title-tab: 1.6rem;
    --fs-dot-tab: 2rem;
    --fs-num-slide: 2.2rem;
    --fs-title-main: 2rem;
    --fs-text: 1.6rem;
    --fs-min-2: 1.3rem;
    --fs-input: 2.6rem;
    --fs-title-store: 1.8rem;
    --size-block: 40px;
  }
}
* {
  font-family: "Inter", sans-serif;
  font-style: normal;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

strong, h2, h3 {
  font-weight: 700;
}

html {
  font-size: 62.5%;
  line-height: 1.5;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
  font-size: 18px !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

body {
  font-size: var(--fs-text);
  background-color: var(--color-bg);
  color: var(--color-text);
}
body.no-scroll {
  overflow: hidden;
}

#fb-root {
  display: none !important;
}

img {
  max-width: 100%;
  width: initial !important;
  height: auto;
  transition: all 0.3s linear;
  object-fit: contain;
  text-decoration: none;
  color: var(--color-text);
}

button {
  cursor: pointer;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  width: var(--w-container);
  margin: auto;
}
@media (max-width: 767px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

input, textarea {
  transition: border-color 0.5s linear, box-shadow 0.5s linear;
}
input:focus-visible, textarea:focus-visible {
  outline: none !important;
}
input:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(240, 116, 173, 0.2);
  border-color: #f074ad;
}

.py-block {
  padding-top: var(--size-block);
  padding-bottom: var(--size-block);
}

.d-none {
  display: none !important;
}

.mb-15 {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .mb-15 {
    margin-bottom: 10px;
  }
}

.mt-15 {
  margin-top: 15px;
}
@media (max-width: 767px) {
  .mt-15 {
    margin-top: 10px;
  }
}

.my-1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.pb-block {
  padding-bottom: var(--size-block);
}

.bg-block {
  background-color: var(--color-bg);
}

.bg-white {
  background-color: var(--color-white);
}

.pl-15 {
  padding-left: 15px;
}
@media (max-width: 767px) {
  .pl-15 {
    padding-left: 10px;
  }
}

.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .my-15 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.pt-block {
  padding-top: var(--size-block);
}

.bg-main {
  background: var(--color-main-linear-gradient);
}

.mt-header {
  margin-top: var(--h-header);
}
@media (min-width: 768px) {
  .mt-header {
    margin-top: 50px;
  }
}
@media (max-width: 767px) {
  .mt-header {
    margin-top: 66px;
  }
}

.text-uppercase {
  text-transform: uppercase;
}

.py-1 {
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-2 {
  padding-top: 15px;
  padding-bottom: 15px;
}
@media (max-width: 767px) {
  .py-2 {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.pt-2 {
  padding-top: 15px;
}
@media (max-width: 767px) {
  .pt-2 {
    padding-top: 10px;
  }
}

.pb-15 {
  padding-bottom: 15px;
}
@media (max-width: 767px) {
  .pb-15 {
    padding-bottom: 10px;
  }
}

.pb-10 {
  padding-bottom: 10px;
}

.pd-0 {
  padding-bottom: 0 !important;
}

.title-main {
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-top: 13px;
  padding-bottom: 10px;
}
.title-main > * {
  font-weight: 700;
}
@media (min-width: 768px) {
  .title-main {
    font-size: 2.2rem;
  }
}

.breadcrumb {
  position: relative;
  z-index: 2;
}
.breadcrumb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrumb ul::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .breadcrumb ul {
    flex-wrap: nowrap;
    row-gap: 5px;
    overflow-x: auto;
  }
}
.breadcrumb ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.breadcrumb ul li svg {
  margin-top: -2px;
}
@media (max-width: 767px) {
  .breadcrumb ul li svg {
    margin-top: 0;
  }
}
.breadcrumb ul li a {
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}
.breadcrumb ul li a:hover, .breadcrumb ul li a.active {
  color: var(--color-main);
}
.breadcrumb ul li span {
  white-space: nowrap;
}
.breadcrumb ul li .active {
  color: var(--color-main);
}

.content-block .wrapper {
  height: 400px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}
.content-block .wrapper .bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, #fff, transparent);
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: all;
}
.content-block .wrapper .bg-gradient.active {
  opacity: 0;
  pointer-events: none;
}
.content-block .view-all-index {
  cursor: pointer;
}
.content-block .view-all-index span:nth-child(2) {
  display: none;
}
.content-block .view-all-index.active span:nth-child(1) {
  display: none;
}
.content-block .view-all-index.active span:nth-child(2) {
  display: block;
}
@media (min-width: 768px) {
  .content-block .view-all-index {
    display: flex;
  }
}

.title-block-main {
  color: var(--color-text);
  font-size: var(--fs-dot-tab);
  font-weight: 700;
}
.title-block-main a {
  color: var(--color-text);
  text-decoration: none;
}
.title-block-main a:hover {
  color: var(--color-main);
}

.view-all {
  color: var(--color-text);
  text-decoration: none;
}
.view-all:hover {
  color: var(--color-main);
}

.box-shadow {
  position: relative;
  z-index: 2;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.title-detail-main {
  color: var(--color-text);
  font-size: var(--fs-title-main);
  font-weight: 700;
}
@media (min-width: 768px) {
  .title-detail-main {
    font-size: 2.6rem;
  }
}
@media (max-width: 767px) {
  .title-detail-main {
    margin-bottom: 5px;
  }
}

.cl-main {
  color: var(--color-main);
}

.promotion-tag {
  margin-bottom: 2px;
  display: inline-flex;
}
.promotion-tag a {
  text-decoration: none;
}
.promotion-tag p {
  padding: 1px 4px;
  color: var(--color-main-3);
  font-size: var(--fs-min-2);
  font-weight: 400;
  border-radius: 5px;
  border: 0.5px solid var(--color-main-3);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -webkit-inline-box;
}
@media (max-width: 767px) {
  .promotion-tag p {
    font-size: var(--fs-min);
  }
}
.promotion-tag p a {
  color: var(--color-main-3);
}
.promotion-tag:nth-child(even) p {
  color: var(--color-main-4);
  border-color: var(--color-main-4);
}
.promotion-tag:nth-child(even) p a {
  color: var(--color-main-4);
}
.promotion-tag.main-or p {
  color: var(--color-main-3);
  border-color: var(--color-main-3);
}
.promotion-tag.main-or p a {
  color: var(--color-main-3);
}
@media (min-width: 768px) {
  .promotion-tag p {
    font-size: 1.4rem;
  }
  .promotion-tag p a {
    font-size: 1.4rem;
  }
}

.star.none svg path {
  fill: #d5d6d4;
}

.text-center {
  text-align: center;
}

.title-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .title-block {
    gap: 15px;
  }
  .title-block .list-module-blog {
    margin-right: auto;
  }
}

.nav-slide-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.nav-slide-title .prev,
.nav-slide-title .next {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-slide-title .prev:hover svg path,
.nav-slide-title .next:hover svg path {
  stroke: var(--color-main);
}

.btn-like-share {
  width: 130px;
  height: 20px;
  overflow: hidden;
  display: block;
}

.my-block {
  margin-top: 15px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .my-block {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.border-top {
  border-top: 1px solid var(--color-border);
}

.bt-lr-radius {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.pr-15 {
  padding-right: 15px;
}
@media (max-width: 767px) {
  .pr-15 {
    padding-right: 10px;
  }
}

.pb-2 {
  padding-bottom: 15px;
}

.btn-center {
  display: flex;
  justify-content: center;
}

.width-100 {
  width: 100%;
}

.border-radius {
  border-radius: 8px;
}

.border-bot-radius {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.border-top-radius {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.img.hover:hover img {
  transform: scale(1.05);
}

a:hover {
  color: var(--color-main);
}

.pt-15 {
  padding-top: 15px;
}
@media (max-width: 767px) {
  .pt-15 {
    padding-top: 10px;
  }
}

.p-15 {
  padding: 15px;
}
@media (max-width: 767px) {
  .p-15 {
    padding: 10px;
  }
}

.p-10 {
  padding: 10px;
}

.pt-10 {
  padding-top: 10px;
}

.pl-30 {
  padding-left: 30px;
}

.pr-30 {
  padding-right: 30px;
}

.no-border {
  border: 0 !important;
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

.mt-15 {
  margin-top: 15px;
}
@media (max-width: 767px) {
  .mt-15 {
    margin-bottom: 10px;
  }
}

.border-bot {
  border-bottom: 1px solid var(--color-border);
}

.d-flex {
  display: flex;
}

.bg-gradient {
  background: var(--color-main-linear-gradient);
}

label.error {
  display: none !important;
}

.error {
  border: 1px solid red !important;
}

.pb-30 {
  padding-bottom: 30px;
}

.ml-15 {
  margin-left: 15px;
}
@media (max-width: 767px) {
  .ml-15 {
    margin-left: 10px;
  }
}

.no-image {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .title-author {
    font-size: 2.6rem !important;
  }
}

.tag-product .container {
  display: flex;
  align-items: center;
  gap: 15px;
}
.tag-product .container .name {
  font-weight: 700;
}
.tag-product .container .list-tag {
  width: calc(100% - 45px);
  overflow-x: auto;
  display: flex;
  gap: 15px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tag-product .container .list-tag::-webkit-scrollbar {
  display: none;
}
.tag-product .container .list-tag .item {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .tag-product {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .tag-product .list-tag {
    overflow-x: unset;
    flex-wrap: wrap;
    display: flex;
    gap: 15px;
  }
}

.alrt-email {
  font-size: var(--fs-text);
  color: red;
}
.alrt-email.text-success {
  color: green;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.p-0 {
  padding: 0;
}

.nav-center {
  position: relative;
  margin-top: 0;
}
.nav-center .owl-prev, .nav-center .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  border: 1px solid var(--color-border) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.nav-center .owl-prev:hover, .nav-center .owl-next:hover {
  background: var(--color-main) !important;
  border-color: var(--color-main) !important;
}
.nav-center .owl-prev:hover svg path, .nav-center .owl-next:hover svg path {
  stroke: #fff !important;
}
.nav-center .owl-prev {
  left: 0;
}
.nav-center .owl-next {
  right: 0;
}

.pl-0 {
  padding-left: 0 !important;
}

@media (max-width: 767px) {
  .hidden-sm {
    display: none;
  }
}
.scroll-top-mess {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 10;
}
.scroll-top-mess .item {
  width: 47.194px;
  height: 47.194px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: var(--color-main-linear-gradient);
  cursor: pointer;
}
.scroll-top-mess .item.message {
  position: relative;
}
.scroll-top-mess .item.message .list-message {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 55px;
  bottom: 0;
  background: #fff;
  padding: 0 10px;
  box-shadow: 0 0 10px -6px #333;
  border-radius: 15px;
  opacity: 0;
  transform: translateX(-50px);
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
.scroll-top-mess .item.message .list-message:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  position: absolute;
  right: -19px;
  bottom: 12px;
}
.scroll-top-mess .item.message .list-message a {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}
.scroll-top-mess .item.message .list-message a:last-child {
  border-bottom: none;
}
.scroll-top-mess .item.message:hover .list-message {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

.view-all-index {
  width: 100%;
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--fs-text-tab);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
@media (min-width: 768px) {
  .view-all-index {
    width: auto;
    display: inline-flex;
    gap: 10px;
    padding: 7px 30px;
  }
}
@media (max-width: 767px) {
  .view-all-index {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
.view-all-index:hover, .view-all-index.active {
  color: var(--color-white);
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.view-all-index:hover svg path, .view-all-index.active svg path {
  stroke: var(--color-white);
}

.btn-gradient {
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  border-radius: 4px;
  font-size: var(--fs-text);
  color: var(--color-white);
  background: var(--color-main-linear-gradient);
  border: 0;
  outline: none;
  transition: background 0.5s ease;
}
.btn-gradient:hover {
  background: var(--color-main-linear-gradient-2);
}
.btn-gradient.clear-filter {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.slide-header-top {
  height: var(--h-slide-top);
  overflow: hidden;
  background-color: var(--color-white);
  width: 100%;
}
@media (min-width: 768px) {
  .slide-header-top {
    aspect-ratio: 1904/64;
  }
}
@media (max-width: 767px) {
  .slide-header-top.slide-nav {
    position: fixed;
    top: 0;
  }
}
.slide-header-top .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-slide-top);
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.slide-header-top .item .link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.slide-header-top .item .icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.slide-header-top .item .icon .no-image {
  width: 100%;
  height: 100%;
}
.slide-header-top .item .info {
  flex: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  font-size: 1.5rem;
}
.slide-header-top .item .info strong {
  font-size: 1.7rem;
}
.slide-header-top.slide-nav .owl-prev {
  left: 0;
  display: flex;
}
.slide-header-top.slide-nav .owl-next {
  right: 0;
  display: flex;
}
@media (max-width: 991px) {
  .slide-header-top .item {
    text-align: center;
  }
  .slide-header-top .item span {
    font-size: 2rem !important;
  }
}
@media (max-width: 767px) {
  .slide-header-top .item {
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
  }
  .slide-header-top .item .icon {
    width: 20px;
    height: 20px;
  }
  .slide-header-top .item .info {
    font-size: 1.3rem;
    flex: unset;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  }
  .slide-header-top .item .info p {
    font-size: 1.3rem;
  }
  .slide-header-top .item .info strong {
    font-size: 1.3rem;
  }
  .slide-header-top .item p {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  }
  .slide-header-top .item span {
    font-size: 1.3rem !important;
  }
}

.slide-index {
  aspect-ratio: 390/150;
  border-radius: 6px;
}
.slide-index .item {
  aspect-ratio: 390/174;
  display: block;
}
.slide-index .item img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}
.slide-index .item .no-image {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .slide-index {
    aspect-ratio: initial;
  }
  .slide-index .item {
    border-radius: 8px;
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .slide-index {
    aspect-ratio: 400/183;
    border-radius: 0;
  }
  .slide-index .item {
    aspect-ratio: 400/183;
  }
}

@media (min-width: 768px) {
  .slide-module-index {
    aspect-ratio: 1320/81;
  }
}
@media (max-width: 767px) {
  .slide-module-index {
    display: flex;
    gap: 5px;
    align-items: start;
    position: relative;
    overflow: hidden;
  }
  .slide-module-index > .open-category {
    width: calc((100% - 5px) / 5);
  }
  .slide-module-index .carousel-category-mobile {
    width: calc((100% - 20px) * 5 / 6);
  }
  .slide-module-index .owl-carousel {
    position: initial;
  }
  .slide-module-index.dot-tabs .owl-dots {
    margin-top: 5px;
    width: 100vw;
    left: -15px;
    position: absolute;
  }
}

@media (min-width: 768px) {
  .slide-adv-index {
    aspect-ratio: 1320/161;
  }
}

@media (min-width: 768px) {
  .slide-modules-index {
    aspect-ratio: 1305/199;
  }
}

.slide-product-sale-2 .item {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .slide-product-sale-2 .item {
    margin-bottom: 10px;
  }
}
.slide-product-sale-2 .item .info {
  min-height: auto;
}
@media (min-width: 768px) {
  .slide-product-sale-2 {
    min-height: 380px;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .slide-product-sale-2 {
    min-height: 380px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .slide-product-sale-2 {
    min-height: 322px;
  }
}

@media (min-width: 768px) {
  .slide-adv-index-2 {
    aspect-ratio: 1305/215;
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .slide-adv-index-2 {
    aspect-ratio: 430/117;
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  .slide-best-seller {
    aspect-ratio: 1289/315;
    padding-bottom: 0;
  }
  .slide-best-seller.top-search {
    aspect-ratio: 1290/300;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .slide-best-seller.top-search {
    aspect-ratio: 1290/315;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .slide-best-seller.top-search {
    aspect-ratio: 1290/335;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .slide-best-seller {
    aspect-ratio: 1290/460;
  }
  .slide-best-seller.top-search {
    aspect-ratio: 1290/490;
  }
}
@media (max-width: 767px) {
  .slide-best-seller {
    aspect-ratio: 430/260;
    padding-bottom: 0;
  }
  .slide-best-seller.top-search {
    aspect-ratio: 430/268;
  }
}

.item-img-product-detai {
  position: relative;
}
.item-img-product-detai .free-ship {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .slide-module-index .item-module-index {
    margin-right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .slide-module-index .item-module-index h3 a {
    text-align: center;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: block;
  }
  .slide-module-index.dot-tabs .owl-dots {
    margin-top: 5px;
  }
}

@media (min-width: 768px) {
  .nav-lrc .owl-nav {
    margin-top: 0;
  }
  .nav-lrc {
    position: relative;
  }
  .nav-lrc .owl-prev,
  .nav-lrc .owl-next {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    background: var(--color-white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    width: 43px;
    height: 43px;
    margin: 0 !important;
  }
  .nav-lrc .owl-prev:hover,
  .nav-lrc .owl-next:hover {
    background: var(--color-main) !important;
  }
  .nav-lrc .owl-prev:hover svg path,
  .nav-lrc .owl-next:hover svg path {
    stroke: var(--color-white);
  }
  .nav-lrc .owl-next {
    right: -10px;
  }
  .nav-lrc .owl-prev {
    left: -10px;
  }
}

@media (min-width: 768px) {
  .slide-product-sale-2 .owl-prev,
  .slide-product-sale-2 .owl-next, .slide-group-product .owl-prev,
  .slide-group-product .owl-next {
    top: 29%;
  }
  .slide-product-sale-2 .owl-next, .slide-group-product .owl-next {
    right: -10px;
  }
  .slide-product-sale-2 .owl-prev, .slide-group-product .owl-prev {
    left: -10px;
  }
  .slide-product-sale-2 .item .info, .slide-group-product .item .info {
    position: relative;
  }
}
@media (min-width: 768px) {
  .slide-product-sale .item .info {
    position: initial;
    padding-bottom: 18px;
  }
  .slide-product-sale .item .info .wrapper-process {
    position: absolute;
    bottom: 5px;
    left: 10px;
    right: 0;
    z-index: 3;
    width: calc(100% - 20px);
  }
}
@media (min-width: 768px) {
  .slide-best-seller.top-search .owl-next,
  .slide-best-seller.top-search .owl-prev {
    top: 50%;
  }
}

@media (min-width: 768px) {
  .slide-banner-content.nav-lrc .owl-next,
  .slide-banner-content.nav-lrc .owl-prev {
    top: 50%;
  }
  .slide-banner-content.nav-lrc .owl-next {
    right: -15px;
  }
  .slide-banner-content.nav-lrc .owl-prev {
    left: -15px;
  }
}

@media (min-width: 768px) {
  .item-banner-content {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 636/291;
  }
  .item-banner-content img {
    display: block;
    height: 100%;
    width: 100% !important;
    object-fit: cover;
  }
}

@media (min-width: 768px) {
  .slide-news-blog .item {
    aspect-ratio: 309/212;
  }
  .slide-news-blog .owl-next,
  .slide-news-blog .owl-prev {
    top: 50%;
  }
}

.item-product-sale,
.item-product {
  background-color: var(--color-white);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  border: 1px solid var(--color-border);
}
.item-product-sale .discount,
.item-product .discount {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 40px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 0px 8px;
  background: linear-gradient(180deg, #ff4848 0%, #d40000 100%);
  color: var(--color-white);
  font-size: var(--fs-min);
  font-weight: 700;
}
.item-product-sale .img,
.item-product .img {
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  text-decoration: none;
}
.item-product-sale .img img,
.item-product .img img {
  object-fit: contain;
  width: initial;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
}
.item-product-sale .img .out-of-stock,
.item-product .img .out-of-stock {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  white-space: nowrap;
  color: #000;
  background: #f1f1f1;
  border-radius: 60px;
  border: 1px solid #c3c3c3;
  transform: rotate(-45deg);
  opacity: 0.5;
}
.item-product-sale .img .free-ship img,
.item-product .img .free-ship img {
  max-width: 100%;
}
.item-product-sale .img .frame-fls img,
.item-product .img .frame-fls img {
  max-width: 100%;
}
.item-product-sale .info .trademark,
.item-product .info .trademark {
  color: var(--color-main-4);
  font-size: var(--fs-time-tab);
  margin-bottom: 5px;
  font-weight: 700;
  text-decoration: none;
}
.item-product-sale .info .trademark a,
.item-product .info .trademark a {
  text-decoration: none;
  color: var(--color-main-4);
  font-size: var(--fs-time-tab);
}
.item-product-sale .info h3 a,
.item-product .info h3 a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-text-tab);
  font-weight: 400;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 7px;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 767px) {
  .item-product-sale .info h3 a,
  .item-product .info h3 a {
    margin-bottom: 0;
    line-height: 1.3;
  }
}
.item-product-sale .info h3 a:hover,
.item-product .info h3 a:hover {
  color: var(--color-main);
}
.item-product-sale .info .price,
.item-product .info .price {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  gap: 5px;
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .item-product-sale .info .price,
  .item-product .info .price {
    margin-bottom: 0;
  }
}
.item-product-sale .info .price .now,
.item-product .info .price .now {
  color: var(--color-main);
  font-size: var(--fs-time-tab);
  font-weight: 700;
}
.item-product-sale .info .price .old,
.item-product .info .price .old {
  font-size: var(--fs-min);
  color: #7a7a7a;
  font-weight: 400;
  text-decoration-line: line-through;
}
.item-product-sale .info .rating-sales-info,
.item-product .info .rating-sales-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .item-product-sale .info .rating-sales-info,
  .item-product .info .rating-sales-info {
    margin-bottom: 5px;
  }
}
.item-product-sale .info .rating-sales-info .sale-info,
.item-product .info .rating-sales-info .sale-info {
  color: #777;
  font-size: var(--fs-min);
  font-weight: 400;
  position: relative;
}
.item-product-sale .info .rating-sales-info .sale-info:after,
.item-product .info .rating-sales-info .sale-info:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  width: 2.8px;
  height: 2.8px;
  background-color: #777;
  border-radius: 50%;
}
.item-product-sale .info .rating-sales-info .star,
.item-product .info .rating-sales-info .star {
  display: flex;
  align-items: center;
  gap: 5px;
}
.item-product-sale .info .rating-sales-info .star p,
.item-product .info .rating-sales-info .star p {
  color: #777;
  font-size: var(--fs-min);
  font-weight: 600;
}
.item-product-sale .info .flex-wrap,
.item-product .info .flex-wrap {
  margin-top: 5px;
}
.item-product-sale .info .promotion-tag,
.item-product .info .promotion-tag {
  line-height: 1.5;
  width: 100%;
}
.item-product-sale .info .promotion-tag p, .item-product-sale .info .promotion-tag a,
.item-product .info .promotion-tag p,
.item-product .info .promotion-tag a {
  line-height: 1.5;
  margin-bottom: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .item-product-sale .discount,
  .item-product .discount {
    width: 45px;
    height: 23px;
    line-height: 23px;
  }
  .item-product-sale .info h3 a,
  .item-product .info h3 a {
    font-size: var(--fs-text);
  }
  .item-product-sale .info .price .now,
  .item-product .info .price .now {
    font-size: 1.5rem;
  }
  .item-product-sale .info .price .old,
  .item-product .info .price .old {
    font-size: 1.4rem;
  }
  .item-product-sale .info,
  .item-product .info {
    position: relative;
  }
  .item-product-sale .info .rating-sales-info .star p,
  .item-product .info .rating-sales-info .star p {
    font-size: 1.4rem;
  }
  .item-product-sale .info .rating-sales-info .sale-info,
  .item-product .info .rating-sales-info .sale-info {
    font-size: 1.4rem;
  }
}
.item-product-sale.min {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.item-product-sale.min .img {
  width: 60%;
}
@media (max-width: 767px) {
  .item-product-sale .info {
    position: relative;
  }
  .item-product-sale .info .wrapper-process {
    margin-top: 5px;
  }
}

.item-product {
  padding: 7px;
}
.item-product .unlike {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  width: 24px;
  height: 20px;
  z-index: 10;
  cursor: pointer;
}
.item-product .unlike svg path {
  fill: var(--color-main);
}
.item-product .img {
  position: relative;
  aspect-ratio: 1;
  text-decoration: none;
  overflow: hidden;
}
.item-product .img .free-ship, .item-product .img .frame-fls {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.item-product .img .free-ship {
  z-index: 2;
}
.item-product .price {
  margin-bottom: 7px;
}
.item-product .promotion-tag {
  margin-top: 5px;
  display: inline-flex;
  margin-right: 0;
}
.item-product .rating-sales-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-product .rating-sales-info .sale-info {
  color: #777;
  font-size: var(--fs-min);
  font-weight: 400;
  position: relative;
}
.item-product .rating-sales-info .sale-info:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  width: 2.8px;
  height: 2.8px;
  background-color: #777;
  border-radius: 50%;
}
.item-product .rating-sales-info .star {
  display: flex;
  align-items: center;
  gap: 5px;
}
.item-product .rating-sales-info .star p {
  color: #777;
  font-size: var(--fs-min);
  font-weight: 600;
  margin-bottom: 0;
}
.item-product:not(.grid) .info {
  position: relative;
  min-height: 167px;
}
@media (max-width: 767px) {
  .item-product:not(.grid) .info {
    min-height: initial;
  }
}
.item-product:not(.grid) .info .wrapper-process {
  margin-top: 10px;
}
@media (max-width: 767px) {
  .item-product:not(.grid) .info .wrapper-process {
    margin-top: 0;
  }
}
.item-product.grid {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.item-product.grid .img {
  width: calc((100% - 15px) / 2);
}
.item-product.grid .info {
  width: calc((100% - 15px) / 2);
}
.item-product.grid .info .trademark,
.item-product.grid .info h3 a,
.item-product.grid .info .rating-sales-info {
  margin-bottom: 5px;
}
.item-product.grid .info .promotion-tag {
  margin-bottom: 0;
  margin-right: 5px !important;
  width: initial;
}
@media (max-width: 767px) {
  .item-product.grid {
    gap: 10px;
  }
  .item-product.grid .img {
    width: calc((100% - 10px) / 2);
  }
  .item-product.grid .info {
    width: calc((100% - 10px) / 2);
  }
}
@media (min-width: 768px) {
  .item-product.grid .img {
    width: 20%;
  }
  .item-product.grid .info {
    width: 75%;
  }
  .item-product.grid .rating-sales-info {
    justify-content: flex-start;
    gap: 15px;
  }
  .item-product.grid .wrapper-process {
    width: 30%;
  }
  .item-product .rating-sales-info .star svg {
    width: 13px;
    height: 13px;
  }
}

.promotion-tag {
  line-height: 1;
}

.price.old {
  font-size: var(--fs-min);
  color: #777;
  text-decoration: line-through;
}

.menu-mb {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 75%;
  z-index: 110;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.menu-mb.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.menu-mb .login-menu {
  height: 65px;
  display: flex;
  align-items: center;
  border-radius: 0;
  padding-left: 10px;
  padding-right: 10px;
  gap: 10px;
}
.menu-mb .login-menu .block-login {
  display: flex;
  gap: 10px;
  row-gap: 0px;
  flex-wrap: wrap;
}
.menu-mb .login-menu .block-login * {
  line-height: 1.5;
}
.menu-mb .login-menu svg {
  width: 56px;
  height: 56px;
}
.menu-mb .login-menu .item {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.menu-mb .menu-mb-block {
  height: calc(100vh - 80px);
  overflow-y: auto;
  background-color: var(--color-bg);
}
.menu-mb .menu-mb-block .item-group-menu {
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f1f1;
  background-color: var(--color-white);
}
.menu-mb .menu-mb-block .item-group-menu .item-menu {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  height: 40px;
}
.menu-mb .menu-mb-block .item-group-menu .item-menu .link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.menu-mb .menu-mb-block .item-group-menu .item-menu svg {
  width: 24px;
  height: initial;
}
.menu-mb .menu-mb-block .item-group-menu .item-menu span {
  flex: 1;
}
.menu-mb .menu-mb-block .copyright-menu {
  padding: 10px 20px;
}
.menu-mb .menu-mb-block .copyright-menu .location {
  color: var(--color-main);
  text-decoration: none;
  margin-bottom: 15px;
  display: block;
  width: 100%;
}
.menu-mb .menu-mb-block .copyright-menu .copyright-menu-text {
  font-size: var(--fs-min);
}
.menu-mb .menu-mb-block .copyright-menu .copyright-menu-text strong {
  display: block;
}
.menu-mb .btn-close-menu {
  position: absolute;
  top: 15px;
  right: -40px;
  width: 32px;
  height: 32px;
}
.menu-mb .btn-close-menu svg {
  width: 32px;
  height: 32px;
}
.menu-mb .btn-close-menu svg path {
  fill: var(--color-white);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.overlay.active {
  opacity: 1;
  pointer-events: all;
}

.menu-product-mb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background-color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}
.menu-product-mb.active {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}
.menu-product-mb .title-main-block {
  padding: 10px 20px;
  font-weight: 400;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 15px;
}
.menu-product-mb .title-main-block .btn-close-menu-product {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-product-mb .title-main-block .btn-close-menu-product svg {
  width: 30px;
  height: 30px;
}
.menu-product-mb .title-main-block .btn-close-menu-product svg path {
  fill: var(--color-main);
}
.menu-product-mb .block-menu {
  display: flex;
}
.menu-product-mb .block-menu .left {
  width: 110px;
  height: calc(100vh - 55px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.menu-product-mb .block-menu .left::-webkit-scrollbar {
  display: none;
}
.menu-product-mb .block-menu .left .item {
  border: 1px solid var(--color-border);
  border-top: 0;
  padding: 10px;
  text-align: center;
  font-size: var(--fs-min);
}
.menu-product-mb .block-menu .left .item.active {
  border-left: 2px solid var(--color-main);
  border-right: 0;
  color: var(--color-main);
}
.menu-product-mb .block-menu .right {
  width: calc(100% - 110px);
  height: calc(100vh - 55px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.menu-product-mb .block-menu .right::-webkit-scrollbar {
  display: none;
}
.menu-product-mb .block-menu .right {
  position: relative;
}
.menu-product-mb .block-menu .right .block {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu-product-mb .block-menu .right .block.active {
  opacity: 1;
  pointer-events: all;
}
.menu-product-mb .block-menu .right .block .item {
  width: calc((100% - 20px) / 3);
  position: relative;
}
.menu-product-mb .block-menu .right .block .item .link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.menu-product-mb .block-menu .right .block .item .img {
  aspect-ratio: 1;
  margin-bottom: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-product-mb .block-menu .right .block .item .img span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.menu-product-mb .block-menu .right .block .item .name {
  font-size: var(--fs-min);
  text-align: center;
}

.table-content-top .wrapper-2 {
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .table-content-top .wrapper-2 {
    padding: 10px;
  }
}
.table-content-top .wrapper-2 .mucluc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: var(--fs-text-tab);
  cursor: pointer;
}
@media (min-width: 768px) {
  .table-content-top .wrapper-2 .mucluc {
    font-size: 2rem;
  }
}
.table-content-top .wrapper-2 .ctindxknh {
  margin-top: 15px;
}
.table-content-top .wrapper-2 .ctindxknh h3,
.table-content-top .wrapper-2 .ctindxknh h4,
.table-content-top .wrapper-2 .ctindxknh h5 {
  font-size: var(--fs-text-tab);
  font-weight: 400;
  margin-bottom: 5px;
  cursor: pointer;
}
.table-content-top .wrapper-2 .ctindxknh h3 {
  font-weight: 600;
}
.table-content-top .wrapper-2 .ctindxknh h4 {
  margin-left: 15px;
}
.table-content-top .wrapper-2 .ctindxknh h5 {
  padding-left: 25px;
}

.detail-content {
  text-align: justify;
}
.detail-content * {
  line-height: 1.5;
}
.detail-content a {
  color: #2196F3;
  text-decoration: none;
}
.detail-content a:hover {
  color: var(--color-main);
}
.detail-content h2,
.detail-content h3,
.detail-content h4,
.detail-content h5,
.detail-content h6 {
  font-weight: 600;
  margin-bottom: 15px;
}
.detail-content h2 {
  font-size: 1.8rem;
}
.detail-content h3 {
  font-size: 1.7rem;
}
.detail-content h4 {
  font-size: 1.6rem;
}
.detail-content h5 {
  font-size: 1.5rem;
}
.detail-content h6 {
  font-size: 1.4rem;
}
.detail-content p {
  line-height: 1.5;
  margin-bottom: 0px;
}
.detail-content ul, .detail-content ol {
  margin-bottom: 10px;
  padding-left: 20px;
}
.detail-content ul li, .detail-content ol li {
  line-height: 1.5;
}
.detail-content img {
  height: auto !important;
}
.detail-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  border: 1px solid var(--color-border);
}
.detail-content table th {
  background-color: var(--color-main);
  color: var(--color-white);
}
.detail-content table td,
.detail-content table th {
  padding: 5px 15px;
}
.detail-content table tbody tr:nth-child(even) td {
  background-color: #f1f1f1;
}

.accordion-item {
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  background: #FBFBFB;
  padding: 20px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .accordion-item {
    padding: 10px;
    margin-bottom: 10px;
  }
}
.accordion-item:last-child {
  margin-bottom: 0;
}
.accordion-item .accordion-header h4 {
  position: relative;
  transition: padding 0.5s ease, margin 0.5s ease;
}
.accordion-item .accordion-header h4 a {
  color: #333;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}
@media (max-width: 767px) {
  .accordion-item .accordion-header h4 a {
    font-size: 14px;
    font-weight: 500;
  }
}
.accordion-item .accordion-header h4 a:before {
  width: 11px;
  height: 11px;
  border: 1px solid #6A6A6A;
  border-top: none;
  border-left: none;
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  transform: rotate(45deg);
  transition: transform 0.5s ease;
}
@media (max-width: 767px) {
  .accordion-item .accordion-header h4 a:before {
    width: 7px;
    height: 7px;
  }
}
.accordion-item .accordion-header h4.active {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.accordion-item .accordion-header h4.active a:before {
  transform: rotate(-135deg);
}
.accordion-item .accordion-collapse ul, .accordion-item .accordion-collapse ol {
  padding-left: 15px;
}
.accordion-item .accordion-collapse p:last-child {
  margin-bottom: 0;
}

.item-cmt {
  margin-bottom: 15px;
}
.item-cmt.child {
  margin-left: 40px;
}
.item-cmt .it-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  position: relative;
  padding-right: 25px;
}
.item-cmt .it-person .user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.item-cmt .it-person .user .avt {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-main-2);
}
.item-cmt .it-person .user .avt.image {
  background: linear-gradient(90deg, #00c6f2 0%, #a788be 34.62%, #f173ac 67.79%, #fec465 100%);
}
.item-cmt .it-person .user .avt.image img {
  max-width: 70%;
  max-height: 70%;
}
.item-cmt .it-person .user .txt {
  font-size: var(--fs-text-tab);
  font-weight: 700;
}
.item-cmt .it-person .time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.item-cmt .it-person .remove-comment {
  position: absolute;
  right: 0;
  top: 5px;
}
.item-cmt .it-content {
  margin-left: 40px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #fbfbfb;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.item-cmt .it-content .txt-content {
  margin-bottom: 5px;
}
.item-cmt .it-content .action-answer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-main-5);
  font-size: var(--fs-time-tab);
  font-weight: 400;
  cursor: pointer;
}

.item-rate.child {
  margin-left: 40px;
}
.item-rate .it-person {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.item-rate .it-person .user {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.item-rate .it-person .user .avt {
  width: 30px;
  height: 30px;
  background-color: var(--color-main-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
}
.item-rate .it-person .user .avt.image {
  background: linear-gradient(90deg, #00c6f2 0%, #a788be 34.62%, #f173ac 67.79%, #fec465 100%);
}
.item-rate .it-person .user .avt.image img {
  max-width: 70%;
  max-height: 70%;
}
.item-rate .it-person .user .txt {
  padding-left: 10px;
  padding-top: 7px;
}
.item-rate .it-person .user .txt p {
  font-weight: 700;
  line-height: 1;
}
.item-rate .it-person .user .rate-star {
  display: flex;
  align-items: center;
}
.item-rate .it-person .user .rate-star .star {
  width: 12px;
  height: 12px;
}
.item-rate .it-person .user .rate-star .star svg {
  width: 100%;
  height: 100%;
}
.item-rate .it-person .time {
  display: flex;
  align-items: center;
  gap: 5px;
}
.item-rate .it-content {
  padding-left: 40px;
}
.item-rate .list-img-rate {
  display: flex;
  padding-left: 40px;
  flex-wrap: wrap;
  gap: 15px;
}
.item-rate .list-img-rate .img {
  width: 60px;
  height: 60px;
  background-color: #f1f1f1;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.item-rate .list-img-rate .img span.no-image {
  font-size: 12px;
}
.item-rate .list-img-rate .img img {
  object-fit: cover;
  width: 100% !important;
  height: 100%;
  font-size: 11px;
}

.faq-block h2 {
  margin-bottom: 22px;
}
@media (max-width: 767px) {
  .faq-block h2 {
    margin-bottom: 10px;
  }
}
.faq-block .delete-html-old > p {
  display: none;
}
.faq-block .collapsible-item {
  background-color: #FBFBFB;
  border: 1px solid var(--color-border);
  padding: 0;
  margin-bottom: 15px;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .faq-block .collapsible-item {
    margin-bottom: 10px;
  }
  .faq-block .collapsible-item:last-child {
    margin-bottom: 0;
  }
}
.faq-block h4 {
  margin-bottom: 0;
  position: relative;
  padding-right: 15px;
}
@media (max-width: 768px) {
  .faq-block h4 {
    padding-right: 10px;
  }
}
.faq-block h4 a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-title-store);
  font-weight: 700;
  padding: 20px 25px;
  display: block;
}
@media (max-width: 768px) {
  .faq-block h4 a {
    padding: 10px;
  }
}
.faq-block h4.active:after {
  transform: translateY(-50%) rotate(90deg);
}
.faq-block .panel-body {
  display: none;
  padding: 15px 25px;
  margin-top: 0;
  border-top: 1px solid var(--color-border);
}

.fillter-block {
  position: fixed;
  top: 0;
  left: 0;
  width: 75%;
  bottom: 0;
  background-color: var(--color-white);
  z-index: 120;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.fillter-block.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.fillter-block .btn-close-fillter {
  position: absolute;
  top: 25px;
  right: -45px;
}
.fillter-block .title-main {
  padding: 7px 20px;
  text-align: center;
  height: auto;
  border-radius: 0;
}
.fillter-block .wrapper {
  height: calc(100vh - 54px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fillter-block .wrapper::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .fillter-block .wrapper {
    padding-bottom: 72px;
  }
}
.fillter-block .list-fillter-product-block {
  border-bottom: 1px solid var(--color-border);
}
.fillter-block .list-fillter-product-block:last-child {
  border-bottom: none;
}
.fillter-block .list-fillter-product-block .title-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px;
}
@media (max-width: 767px) {
  .fillter-block .list-fillter-product-block .title-filter {
    padding: 5px 10px;
  }
}
.fillter-block .list-fillter-product-block .title-filter .icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fillter-block .list-fillter-product-block .title-filter .icon svg {
  width: 80%;
  height: 60%;
  transform: rotate(90deg);
  transition: all 0.3s ease;
}
.fillter-block .list-fillter-product-block .title-filter.active .icon svg {
  transform: rotate(-90deg);
}
.fillter-block .list-fillter-product-block .price-input {
  display: flex;
  gap: 13px;
  padding: 0 15px 15px 15px;
}
@media (max-width: 767px) {
  .fillter-block .list-fillter-product-block .price-input {
    padding: 0 10px 10px 10px;
    gap: 10px;
  }
}
.fillter-block .list-fillter-product-block .price-input input {
  width: calc((100% - 13px) / 2);
  height: 32px;
  padding-left: 10px;
  padding-bottom: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
@media (max-width: 767px) {
  .fillter-block .list-fillter-product-block .price-input input {
    width: calc((100% - 10px) / 2);
  }
}
.fillter-block .list-fillter-product-block .list-filter-product {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
@media (max-width: 767px) {
  .fillter-block .list-fillter-product-block .list-filter-product {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }
}
.fillter-block .list-fillter-product-block .item_filter_product {
  padding: 3px 6px;
  border-radius: 2px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: var(--fs-min);
}
.fillter-block .list-fillter-product-block .item_filter_product.active {
  border-color: var(--color-main);
  color: var(--color-main);
}

.page {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
  gap: 5px;
}
.page div,
.page span, .page a {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 35px;
  height: 35px;
  border: 1px solid var(--color-border);
  background-color: #f5f5f5;
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text);
}
.page div svg,
.page span svg, .page a svg {
  width: 10px;
  height: 10px;
}
.page div.active-page, .page div:hover,
.page span.active-page,
.page span:hover, .page a.active-page, .page a:hover {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: var(--color-white);
}
.page div.active-page svg, .page div:hover svg,
.page span.active-page svg,
.page span:hover svg, .page a.active-page svg, .page a:hover svg {
  fill: var(--color-white);
}
.page div.disabled,
.page span.disabled, .page a.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*
    <div class="skeleton">
        <div class="placeholder title"></div>
        <div class="placeholder content"></div>
    </div>
*/
.skeleton {
  width: 100%;
  margin: auto;
  height: 100%;
}
.skeleton .placeholder {
  position: relative;
  background: #f1f1f1;
  border-radius: 3px;
  overflow: hidden;
}
.skeleton .placeholder:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100px;
  left: -100px;
  top: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4392156863), transparent);
  animation: reflect 800ms ease-out infinite;
}
.skeleton .title {
  width: 80%;
  min-height: 20px;
  margin-bottom: 10px;
}
.skeleton .content {
  width: 100%;
  height: 100%;
}

@keyframes reflect {
  to {
    left: calc(100% + 100px);
  }
}
footer .it-ft {
  padding: 15px;
  padding-top: 0;
}
@media (max-width: 767px) {
  footer .it-ft {
    padding: 10px;
  }
}
footer .it-ft p {
  margin-bottom: 15px;
  line-height: 1.4;
}
@media (max-width: 767px) {
  footer .it-ft p {
    margin-bottom: 10px;
  }
  footer .it-ft p:last-child {
    margin-bottom: 0;
  }
}
footer .it-ft p a {
  color: var(--color-text);
  text-decoration: none;
}
footer .it-ft p a:hover {
  color: var(--color-main);
}
footer .it-ft:nth-of-type(1) {
  padding-top: 15px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
footer .it-ft:nth-of-type(4) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
footer .it-ft .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
footer .it-ft .logo img {
  object-fit: contain;
  width: initial;
}
footer .it-ft .ft-info {
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
footer .it-ft .ft-info p {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  footer .it-ft .ft-info p {
    margin-bottom: 10px;
  }
  footer .it-ft .ft-info p:last-child {
    margin-bottom: 0;
  }
}
footer .list-module-ft {
  position: relative;
}
footer .list-module-ft:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  border-bottom: 1px solid var(--color-border);
  height: 1;
  z-index: 1;
}
footer .list-module-ft .tit {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
}
footer .list-module-ft .tit p {
  margin-bottom: 0;
  font-size: var(--fs-size);
}
footer .list-module-ft ul {
  padding-left: 20px;
  display: none;
}
footer .list-module-ft ul li {
  margin-bottom: 15px;
}
footer .list-module-ft ul li a {
  text-decoration: none;
  color: var(--color-text);
}
footer .list-module-ft ul li a:hover {
  color: var(--color-main);
}
@media (min-width: 768px) {
  footer .it-ft {
    padding: 0;
  }
  footer .it-ft:first-child {
    width: 334px;
  }
  footer .it-ft:last-child {
    width: 30%;
    margin-top: 55px;
  }
  footer .it-ft .ft-info {
    border-bottom: 0;
    text-align: left;
  }
  footer .it-ft .logo {
    justify-content: flex-start;
    height: 65px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  footer .it-ft {
    width: calc((100% - 15px) / 2);
  }
  footer .it-ft .ft-info p:last-child {
    margin-bottom: 0;
  }
  footer .it-ft:first-child {
    width: 100%;
  }
  footer .it-ft:last-child {
    margin-top: 0;
    width: calc((100% - 30px) / 3);
  }
}
@media (min-width: 768px) {
  footer .list-module-ft {
    width: 20%;
    margin-top: 55px;
    padding: 0;
  }
  footer .list-module-ft:nth-child(2) {
    width: 24%;
  }
  footer .list-module-ft:nth-child(3) {
    width: 17%;
  }
  footer .list-module-ft:after {
    display: none;
  }
  footer .list-module-ft ul {
    display: block;
    list-style: none;
    padding-left: 0;
  }
  footer .list-module-ft ul li {
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  footer .list-module-ft {
    width: calc((100% - 30px) / 3);
    margin-top: 0;
  }
  footer .list-module-ft:nth-child(2) {
    width: calc((100% - 30px) / 3);
  }
  footer .list-module-ft:nth-child(3) {
    width: calc((100% - 30px) / 3);
  }
}
@media (min-width: 768px) {
  footer .block-footer-top {
    display: flex;
    gap: 15px;
    border-radius: 8px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  footer .block-footer-top {
    flex-wrap: wrap;
  }
}
@media (min-width: 768px) {
  footer .block-footer-bot {
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 8px;
    display: flex;
    line-height: 1.5;
  }
  footer .block-footer-bot .left {
    width: 70%;
  }
  footer .block-footer-bot .left .social-block {
    display: flex;
    margin-top: 15px;
    gap: 30px;
  }
  footer .block-footer-bot .left .social-block .social {
    width: 334px;
  }
  footer .block-footer-bot .left .social-block .connect-social {
    text-align: left;
  }
  footer .block-footer-bot .right {
    width: 30%;
    text-align: left;
  }
  footer .block-footer-bot .right p {
    text-align: left;
  }
  footer .block-footer-bot .right .form-register-email {
    padding: 0;
  }
  footer .block-footer-bot .right .bct {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  footer .block-footer-bot .right .bct p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 15px) / 2);
    margin-bottom: 0;
  }
  footer .block-footer-bot .right .bct p a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer .block-footer-bot .right .bct p:nth-child(2) a {
    height: 42px;
    justify-content: flex-start;
  }
  footer .block-footer-bot .right .bct p:nth-child(2) a img {
    height: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  footer .block-footer-bot {
    flex-wrap: wrap;
    gap: 15px;
  }
  footer .block-footer-bot .left, footer .block-footer-bot .right {
    width: 100%;
  }
  footer .block-footer-bot .left .social-block .social {
    width: 500px;
  }
  footer .block-footer-bot .right p:nth-child(2) {
    margin-bottom: 15px;
    width: 100%;
  }
  footer .block-footer-bot .right .bct p:nth-child(2) {
    width: calc((100% - 15px) / 2);
    margin-bottom: 0;
  }
  footer .block-footer-bot .right .bct p:nth-child(2) a {
    justify-content: center;
  }
}

.form-register-email {
  padding: 15px;
  border-radius: 12px;
  text-align: center;
}
@media (max-width: 767px) {
  .form-register-email {
    padding: 10px;
  }
}
.form-register-email form {
  display: flex;
}
.form-register-email form .form-input {
  height: 40px;
  flex: 1;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: 4px 0px 0px 4px;
  position: relative;
  overflow: hidden;
}
.form-register-email form .form-input svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.form-register-email form .form-input input {
  width: 100%;
  height: 100%;
  border: 0;
  padding-left: 45px;
}
.form-register-email form button {
  padding: 0 30px;
  border-radius: 0px 4px 4px 0px;
}

.form-cmt {
  display: flex;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.form-cmt .input {
  width: 75%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.form-cmt .input textarea {
  width: 100%;
  height: 90px;
  padding: 10px;
  resize: none;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #fbfbfb;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  outline: none;
}
.form-cmt .input textarea::placeholder {
  font-size: var(--fs-time-tab);
  text-align: justify;
  color: var(--color-text);
}
.form-cmt .input input {
  width: calc((100% - 15px) / 2);
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #fbfbfb;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  height: 40px;
  display: none;
  outline: none;
}
.form-cmt .input input[readonly] {
  background: #f1f1f1;
  border: none;
  color: #999999;
  cursor: not-allowed;
  box-shadow: none;
}
.form-cmt .input input[readonly]:focus {
  outline: none;
  box-shadow: none;
}
.form-cmt .btn {
  width: 25%;
  padding-left: 15px;
}
@media (max-width: 767px) {
  .form-cmt .btn {
    padding-left: 10px;
  }
}
.form-cmt .btn button {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.form-cmt .btn button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-cmt .action-faq {
  width: 100%;
  display: flex;
  justify-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}
.form-cmt .action-faq a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  padding: 0 20px;
  gap: 5px;
  transition: background 0.5s ease;
}
.form-cmt .action-faq a svg {
  fill: #fff;
}
@media (min-width: 768px) {
  .form-cmt .action-faq a {
    padding: 0 15px;
    gap: 10px;
  }
}
.form-cmt .action-faq .call-phone {
  border-radius: 8px;
  background: var(--color-main-linear-gradient);
  color: #fff;
}
.form-cmt .action-faq .call-phone:hover {
  background: linear-gradient(90deg, #fec465 0%, #f173ac 29.33%, #a788be 75.96%, #00c6f2 100%);
}
.form-cmt .action-faq .send-zalo {
  border-radius: 8px;
  color: #fff;
  background: var(--color-main-5);
}
@media (min-width: 768px) {
  .form-cmt .input {
    flex: 1;
  }
  .form-cmt .btn {
    width: 111px;
  }
}

.comment-form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 15px;
}
.comment-form textarea {
  width: 100%;
  height: 94px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  padding-top: 10px;
  padding-left: 10px;
  resize: none;
  outline: none;
}
.comment-form input {
  width: calc((100% - 85px) / 2);
  border-radius: 6px;
  height: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding-left: 10px;
}
.comment-form input[readonly] {
  background: #f1f1f1;
  border: none;
  color: #999999;
  cursor: not-allowed;
}
.comment-form input[readonly]:focus {
  outline: none;
  box-shadow: none;
}
.comment-form button {
  width: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.comment-form button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

form.login label {
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
  font-size: var(--fs-size);
}
form.login .input {
  margin-bottom: 15px;
}
form.login .input:last-of-type {
  margin-bottom: 5px;
}
form.login button {
  width: 100%;
  text-transform: uppercase;
}
form.login a {
  font-size: var(--fs-size);
  color: var(--color-main-5);
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

.input {
  height: 42px;
}
.input input {
  width: 100%;
  height: 100%;
  padding-left: 15px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

form label {
  display: block;
  margin-bottom: 10px;
}

form.register button,
form.forget-pass button {
  width: 100%;
  text-transform: uppercase;
}

.btn-show-rate {
  cursor: pointer;
}

#Stars-error {
  display: block !important;
  border: 0 !important;
  display: inline;
  color: red;
  font-size: 1.2rem;
}

.form-rate {
  display: none;
}
.form-rate .list-img-rate {
  display: flex;
  gap: 15px;
}
.form-rate .list-img-rate .item {
  position: relative;
}
.form-rate .list-img-rate .item .del-img {
  position: absolute;
  top: 10px;
  right: -5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.form-rate .list-img-rate .item .del-img svg {
  fill: #fff;
}
.form-rate .list-img-rate .item .img {
  height: 50px;
  border: 1px solid #ccc;
  padding: 2px;
}
.form-rate .list-img-rate .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.form-rate input,
.form-rate textarea {
  border: 1px solid var(--color-border);
  padding: 10px 15px;
  border-radius: 6px;
}
.form-rate .form-input {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.form-rate .form-input input {
  width: 50%;
}
.form-rate .form-input input[readonly] {
  background: #f1f1f1;
  border: none;
  color: #999999;
  cursor: not-allowed;
  box-shadow: none;
}
.form-rate .form-input input[readonly]:focus {
  outline: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  .form-rate .form-input {
    flex-direction: column;
  }
  .form-rate .form-input input {
    width: 100%;
  }
}
.form-rate .rate {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.form-rate .rate fieldset {
  margin: 0;
  padding: 0;
}
.form-rate .rate label {
  margin: 0;
  padding: 0;
}
.form-rate .rate .rating {
  border: none;
  display: flex;
  align-items: center;
  gap: 5px;
  direction: rtl;
}
.form-rate .rate .rating.first .item svg.active {
  fill: orange;
}
.form-rate .rate .rating.none {
  display: none;
}
.form-rate .rate .rating svg {
  fill: var(--color-border);
}
.form-rate .rate .rating label {
  cursor: pointer;
}
.form-rate .rate .rating input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.form-rate .rate .rating label:hover ~ label svg,
.form-rate .rate .rating input:checked ~ label svg,
.form-rate .rate .rating label:hover svg {
  fill: orange;
}
.form-rate .form-textarea {
  margin-bottom: 15px;
}
.form-rate .form-textarea textarea {
  width: 100%;
  height: 105px;
  display: block;
}
.form-rate .choose-img {
  margin-bottom: 15px;
}
.form-rate .choose-img input[type=file] {
  display: none;
}
.form-rate .choose-img label {
  width: 100%;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.form-rate .choose-img label span.btn-choose {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #8f8f9d;
  background: #e9e9ed;
  margin-right: 10px;
}
@media (max-width: 767px) {
  .form-rate .choose-img label span.btn-choose {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .form-rate .choose-img label {
    gap: 10px;
    display: flex;
    align-items: center;
  }
}

form input,
form textarea,
form select {
  font-size: var(--fs-text);
}
form input::placeholder,
form textarea::placeholder,
form select::placeholder {
  font-size: var(--fs-text);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.banner-content {
  aspect-ratio: 390/178;
}
.banner-content img {
  display: block;
  height: 100%;
}

.list-product-index {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.list-product-index .item {
  width: calc((100% - 10px) / 2);
}
.list-product-index.grid .item {
  width: 100%;
}
@media (min-width: 700px) {
  .list-product-index {
    gap: 15px;
  }
  .list-product-index .item {
    width: calc((100% - 45px) / 4);
  }
  .list-product-index.loading-5 .item, .list-product-index.loading-5 .load-product {
    width: calc((100% - 60px) / 5);
  }
  .list-product-index.loading-5 .load-product {
    aspect-ratio: 311/487;
  }
}
@media (min-width: 700px) and (max-width: 991px) {
  .list-product-index .item {
    width: calc((100% - 30px) / 3);
  }
  .list-product-index.loading-5 .item {
    width: calc((100% - 45px) / 4);
  }
}
@media (max-width: 767px) {
  .list-product-index.loading-5 .load-product {
    width: calc((100% - 15px) / 2);
    aspect-ratio: 247/410;
  }
}

.list-5-item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.list-5-item .item {
  width: calc((100% - 60px) / 5);
}
@media (max-width: 1199px) {
  .list-5-item .item {
    width: calc((100% - 45px) / 4);
  }
}
@media (max-width: 767px) {
  .list-5-item .item {
    width: calc((100% - 15px) / 2);
  }
}

.flex-4-item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.flex-4-item .item {
  width: calc((100% - 45px) / 4);
}

.flex-2-item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.flex-2-item .item {
  width: calc((100% - 15px) / 2);
}

@media (min-width: 768px) {
  .grid-blog-first {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 15px;
  }
  .grid-blog-first .item:nth-child(1) {
    grid-area: 1/1/4/3;
    aspect-ratio: 639/438;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .grid-blog-first .item:nth-child(1) {
    aspect-ratio: 639/493;
  }
}
@media (min-width: 768px) {
  .grid-blog-first .item:nth-child(2) {
    grid-area: 1/3/2/5;
  }
  .grid-blog-first .item:nth-child(3) {
    grid-area: 2/3/3/5;
  }
  .grid-blog-first .item:nth-child(4) {
    grid-area: 3/3/4/5;
  }
}
@media (min-width: 768px) and (max-width: 1600px) {
  .grid-blog-first {
    height: 450px;
  }
  .grid-blog-first .item:nth-child(1) {
    aspect-ratio: 639/450;
  }
}
@media (min-width: 768px) and (max-width: 1392px) {
  .grid-blog-first {
    height: 374px;
  }
  .grid-blog-first .item:nth-child(1) {
    aspect-ratio: 639/450;
  }
}
@media (min-width: 768px) and (max-width: 1192px) {
  .grid-blog-first .item:nth-child(1) {
    aspect-ratio: 639/540;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .grid-blog-first .item:nth-child(1) {
    aspect-ratio: 639/741;
  }
}

@media (min-width: 768px) {
  .list-news-block-more {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .list-news-block-more .item {
    width: calc((100% - 15px) / 2);
  }
}

@media (min-width: 768px) {
  .list-news-blog {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .list-news-blog .item, .list-news-blog .load-product {
    width: calc((100% - 30px) / 3);
    box-shadow: none;
  }
  .list-news-blog .item .img, .list-news-blog .load-product .img {
    height: auto;
    display: block;
  }
  .list-news-blog .load-product {
    aspect-ratio: 1;
  }
}
@media (max-width: 767px) {
  .list-news-blog .load-product {
    margin-bottom: 15px;
    aspect-ratio: 330/99;
  }
}

.flex-5-item {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.flex-5-item .item {
  width: calc((100% - 60px) / 5);
}

.flex-4-item {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.flex-4-item .item {
  width: calc((100% - 45px) / 4);
}

.flex-3-item {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.flex-3-item .item {
  width: calc((100% - 30px) / 3);
}

header {
  height: var(--h-header);
  background: var(--color-main-linear-gradient);
  position: sticky;
  top: 0;
  transition: top 0.3s ease;
  z-index: 100;
  left: 0;
  right: 0;
}
header.no-banner {
  top: 0;
}
header.mini {
  top: 0;
}
header .logo {
  aspect-ratio: 37/42;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
header .search-complete {
  height: 37px;
  flex: 1;
  overflow: hidden;
  border-radius: 50px;
  background: #fff;
}
@media (max-width: 767px) {
  header .search-complete {
    height: 30px;
  }
}
header .search-complete form {
  height: 100%;
  width: 100%;
  position: relative;
  border: 0;
}
header .search-complete form input {
  border: 0;
  border-radius: 50px;
  height: 100%;
  padding-left: 15px;
  width: 100%;
}
header .search-complete form button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: 0 0;
  border: 0;
  width: 48px;
  height: 37px;
}
@media (min-width: 768px) {
  header .container {
    gap: 40px;
  }
  header .logo {
    aspect-ratio: 175/36;
    width: 175px;
    overflow: hidden;
  }
  header .block-login-register {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--color-white);
    position: relative;
  }
  header .block-login-register .item {
    cursor: pointer;
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
  }
  header .block-login-register .item.account .name-account {
    line-height: 1.2;
    font-size: 15px;
  }
  header .block-login-register .item.account .sub-login {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    padding: 10px 0 0 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  header .block-login-register .item.account .sub-login:before {
    content: "";
    position: absolute;
    left: 60px;
    top: -3px;
    border: 7px solid transparent;
    border-bottom: 7px solid #fff;
  }
  header .block-login-register .item.account .sub-login a, header .block-login-register .item.account .sub-login .item {
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background: #fff;
    padding: 7px 10px;
    display: block;
    font-size: 15px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 5px;
    align-items: center;
  }
  header .block-login-register .item.account .sub-login a .icon, header .block-login-register .item.account .sub-login .item .icon {
    width: 30px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .block-login-register .item.account .sub-login a .icon .active, header .block-login-register .item.account .sub-login .item .icon .active {
    display: none;
  }
  header .block-login-register .item.account .sub-login a .icon svg, header .block-login-register .item.account .sub-login .item .icon svg {
    height: 20px;
  }
  header .block-login-register .item.account .sub-login a > span, header .block-login-register .item.account .sub-login .item > span {
    width: calc(100% - 30px);
  }
  header .block-login-register .item.account .sub-login a:hover, header .block-login-register .item.account .sub-login .item:hover {
    background: var(--color-main-linear-gradient);
    color: #fff;
  }
  header .block-login-register .item.account .sub-login a:hover .icon svg, header .block-login-register .item.account .sub-login .item:hover .icon svg {
    display: none;
  }
  header .block-login-register .item.account .sub-login a:hover .icon svg.active, header .block-login-register .item.account .sub-login .item:hover .icon svg.active {
    display: block;
  }
  header .block-login-register .item.account .sub-login a:first-child, header .block-login-register .item.account .sub-login .item:first-child {
    border-radius: 5px 5px 0 0;
    border-top: 1px solid var(--color-border);
  }
  header .block-login-register .item.account .sub-login a:last-child, header .block-login-register .item.account .sub-login .item:last-child {
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 5px 5px;
  }
  header .block-login-register .item.account:hover .sub-login {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  header .block-login-register .item:not(.account):hover {
    color: var(--color-main-5);
  }
  header .menu-bot {
    background: var(--color-white);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
  header .menu-bot .container {
    position: relative;
  }
  header .menu-bot ul {
    display: flex;
    gap: 32px;
    list-style: none;
    padding: 13px 0;
  }
  header .menu-bot ul li {
    display: flex;
    align-items: center;
    font-weight: 600;
    gap: 13px;
    cursor: pointer;
  }
  header .menu-bot ul li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .menu-bot ul li .menu-content {
    position: absolute;
    top: 100%;
    left: 15px;
    background-color: var(--color-white);
    width: 250px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 10px -9px #000;
  }
  header .menu-bot ul li .menu-content:after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
  }
  header .menu-bot ul li .menu-content .menu-item .menu-btn {
    position: relative;
    width: 100%;
    display: block;
    padding: 8px 16px;
    padding-right: 40px;
    border-bottom: 1px solid var(--color-border);
  }
  header .menu-bot ul li .menu-content .menu-item .menu-btn svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 15px;
    height: 15px;
  }
  header .menu-bot ul li .menu-content .menu-item:last-child .menu-btn {
    border-bottom: 0;
  }
  header .menu-bot ul li .menu-content .menu-item:hover {
    background: var(--color-main-linear-gradient);
    color: var(--color-white);
  }
  header .menu-bot ul li .menu-content .menu-item:hover > a {
    color: var(--color-white);
  }
  header .menu-bot ul li .menu-content .menu-item:hover svg {
    fill: var(--color-white);
  }
  header .menu-bot ul li .menu-content .menu-content {
    position: absolute;
    top: 0;
    left: 100%;
    width: calc(var(--w-container) - 278px);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  header .menu-bot ul li .menu-content .menu-content::-webkit-scrollbar {
    display: none;
  }
  header .menu-bot ul li .menu-content .menu-content {
    padding: 15px;
    border-left: 1px solid var(--color-border);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-top {
    margin-bottom: 15px;
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-top a {
    border: 1px solid var(--color-border);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 40px;
    margin-right: 5px;
    box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.1);
    background: var(--color-white);
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-top a:hover {
    background: var(--color-main-linear-gradient);
    color: var(--color-white);
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-bottom .menu-col-item {
    width: calc((100% - 30px) / 3);
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-bottom .menu-col-item .item-parent {
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
  }
  header .menu-bot ul li .menu-content .menu-content .menu-group-bottom .menu-col-item .item-child {
    font-weight: 400;
    display: block;
    margin-bottom: 10px;
  }
  header .menu-bot ul li .menu-content .menu-item:hover .menu-content {
    opacity: 1;
    pointer-events: all;
  }
  header .menu-bot ul li .menu-product {
    display: flex;
    align-items: center;
    gap: 13px;
  }
  header .menu-bot ul li:hover > .menu-content {
    opacity: 1;
    pointer-events: all;
  }
  header .menu-bot ul li a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
  }
  header .menu-bot ul li a:hover {
    color: var(--color-main);
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  header .menu-bot ul {
    gap: 15px;
    font-size: 1.3rem;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  header .container {
    gap: 15px;
  }
  header .block-login-register {
    gap: 10px;
  }
  header .menu-bot ul {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  header .menu-bot ul::-webkit-scrollbar {
    display: none;
  }
  header .menu-bot ul li {
    white-space: nowrap;
  }
}

.menu-mobile {
  display: none;
  cursor: pointer;
}
.menu-mobile .bar1,
.menu-mobile .bar2,
.menu-mobile .bar3 {
  width: 25px;
  height: 2px;
  background-color: var(--color-white);
  margin: 3px 0;
  transition: 0.4s;
}
.menu-mobile.active .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
.menu-mobile.active .bar2 {
  opacity: 0;
}
.menu-mobile.active .bar3 {
  transform: translate(0, -7px) rotate(45deg);
}
@media (max-width: 991px) {
  .menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: inline-flex;
  }
}

.cart {
  position: relative;
}
.cart .num-cart {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 600;
}

.ui-widget.ui-widget-content {
  z-index: 10000;
  border: none;
  box-shadow: 0 0 5px -3px #333333;
}

.ui-menu .ui-menu-item {
  padding: 0;
}
.ui-menu .ui-menu-item a {
  text-decoration: none;
}
.ui-menu .ui-menu-item .info {
  padding-left: 10px;
}
.ui-menu .ui-menu-item-wrapper {
  display: flex;
  transition: initial;
}
.ui-menu .ui-menu-item-wrapper ._img {
  width: 80px;
  height: 80px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-menu .ui-menu-item-wrapper ._img span.no-image {
  text-align: center;
  font-size: 14px;
  width: 100%;
  height: 100%;
}
.ui-menu .ui-menu-item-wrapper .info {
  width: calc(100% - 80px);
}
.ui-menu .ui-menu-item-wrapper.title-auto {
  background: #eeeeee;
  font-size: 12px;
  display: block;
  cursor: text;
}
.ui-menu .ui-menu-item-wrapper.title-keyword {
  font-size: 12px;
  display: block;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: none;
  background: transparent;
  color: red;
  margin: 0;
}

.title-auto.ui-state-active {
  color: #333333;
}

.location, .cart {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .location, .cart {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 30px;
  }
  .location svg, .cart svg {
    width: initial;
    height: initial;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.slide-nav {
  position: relative;
}
.slide-nav .owl-nav {
  margin-top: 0;
}
.slide-nav .owl-next,
.slide-nav .owl-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  background: 0 0 !important;
}
.slide-nav .owl-next:hover svg path,
.slide-nav .owl-prev:hover svg path {
  stroke: var(--color-main);
}
.slide-nav .owl-next {
  right: 15px;
}
.slide-nav .owl-prev {
  left: 15px;
}

.dot-slide-index {
  position: relative;
}
.dot-slide-index .owl-dots {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: var(--color-white);
  border-radius: 15px;
  padding: 4px 5px;
}
@media (max-width: 767px) {
  .dot-slide-index .owl-dots {
    padding: 3px 3px;
    display: flex;
    align-items: center;
    bottom: 15px;
  }
}
.dot-slide-index .owl-dots .owl-dot.active span {
  background-color: var(--color-main-2);
}
@media (min-width: 768px) {
  .dot-slide-index .owl-dots .owl-dot.active span {
    background-color: var(--color-main);
  }
}
.dot-slide-index .owl-dots .owl-dot span {
  margin: 4px;
  background-color: var(--color-border);
}
@media (max-width: 767px) {
  .dot-slide-index .owl-dots .owl-dot span {
    margin: 0 4px;
    width: 8px;
    height: 8px;
  }
}

.dot-tabs .owl-dots {
  margin-top: 15px;
}
.dot-tabs .owl-dots .owl-dot.active span {
  background: var(--color-main-2);
  width: 23px;
}
.dot-tabs .owl-dots .owl-dot span {
  background: var(--color-border);
  margin: 2px;
  transition: 0.3s ease;
}

.loading-flash-sale {
  width: 100%;
}
.loading-flash-sale .container {
  aspect-ratio: 1320/641;
  overflow: hidden;
}
@media (max-width: 700px) {
  .loading-flash-sale .container {
    padding: 0;
    aspect-ratio: 430/379;
  }
}
.loading-flash-sale.loaded .container {
  aspect-ratio: initial;
  overflow: initial;
}

.item-module-index {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  .item-module-index {
    padding-bottom: 5px;
  }
}
@media (max-width: 767px) {
  .item-module-index {
    aspect-ratio: 1;
  }
}
.item-module-index .img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 55px;
  aspect-ratio: 1;
  margin-bottom: 5px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .item-module-index .img {
    margin: 0;
    padding: 0px;
    width: 40px;
  }
  .item-module-index .img img {
    width: initial !important;
    height: initial !important;
    max-height: 80%;
  }
}
.item-module-index .img .no-image {
  width: 100%;
  height: 100%;
}
.item-module-index .name {
  display: block;
  font-size: var(--fs-min);
  text-align: center;
  color: var(--color-text);
}
.item-module-index .name h3 a {
  font-size: var(--fs-min);
}
.item-module-index:hover {
  border-color: var(--color-main);
}
.item-module-index:hover .name,
.item-module-index:hover h3 {
  color: var(--color-main);
}
.item-module-index:hover .name a,
.item-module-index:hover h3 a {
  color: var(--color-main);
}

@media (max-width: 767px) {
  .sale-onl {
    aspect-ratio: initial;
  }
  .sale-onl .product-sale {
    padding-bottom: 10px;
  }
  .sale-onl .product-sale, .sale-onl .tab-content-sale {
    height: 100%;
  }
}
.bn-sale {
  display: block;
  width: 100%;
  aspect-ratio: 390/40;
  position: relative;
}
.bn-sale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  width: 100% !important;
  object-fit: cover;
}
.bn-sale h2, .bn-sale p {
  position: absolute;
  top: 0;
  display: inline-flex;
  gap: 10px;
  color: #fff;
  justify-content: center;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  left: 0;
  right: 0;
  height: 100%;
  align-items: center;
}
.bn-sale h2 svg:first-child, .bn-sale p svg:first-child {
  animation: blink-smooth 0.3s ease-in-out infinite;
}
.bn-sale h2 svg:last-child, .bn-sale p svg:last-child {
  animation: blink-smooth 0.3s ease-in-out infinite;
  animation-delay: 150ms;
}
@media (max-width: 767px) {
  .bn-sale {
    aspect-ratio: 390/50;
  }
  .bn-sale h2 {
    justify-content: start;
    padding: 0 10px;
    font-size: 18px;
  }
  .bn-sale h2 svg {
    width: 10px;
  }
}
@media (min-width: 768px) {
  .bn-sale {
    aspect-ratio: 1321/58;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
  }
  .bn-sale h2, .bn-sale p {
    font-size: 28px;
  }
}

@keyframes blink-smooth {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
.tab-sale {
  width: calc(100% - 2px);
  display: flex;
  margin-left: 1px;
  margin-right: 1px;
}
.tab-sale .item {
  width: 50%;
}
@media (max-width: 767px) {
  .tab-sale {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40%;
    justify-content: space-between;
    padding-top: 0.5px;
  }
  .tab-sale .item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 10px;
    font-size: 13px;
  }
  .tab-sale .item:first-child {
    border-radius: 0 0 0 10px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
  }
  .tab-sale .item:last-child {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-radius: 10px 0 0 0;
  }
}

.item-tab-sale {
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: var(--color-white);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 2.2rem;
}
.item-tab-sale:hover, .item-tab-sale.active {
  background-color: var(--color-white);
  color: var(--color-main);
}
@media (max-width: 767px) {
  .item-tab-sale {
    height: calc(50% - 0.5px);
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }
}

.tab-content-sale {
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (max-width: 767px) {
  .tab-content-sale {
    padding-top: 5px;
    padding-bottom: 0px;
  }
}

.time-going {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.time-going .text {
  color: var(--color-white);
  font-size: var(--fs-text-tab);
  font-weight: 700;
}
@media (min-width: 768px) {
  .time-going .text {
    font-size: 1.7rem;
  }
}
@media (max-width: 767px) {
  .time-going {
    margin-bottom: 0;
  }
  .time-going .text {
    font-weight: 400;
  }
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.countdown .item {
  background-color: var(--color-white);
  aspect-ratio: 1;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.countdown .item p {
  color: #ec197a;
  font-size: var(--fs-text-tab);
  font-weight: 700;
}
@media (max-width: 767px) {
  .countdown .item {
    width: 25px;
  }
  .countdown .item p {
    font-weight: 400;
  }
}
.countdown .type {
  font-size: var(--fs-dot-tab);
  color: var(--color-white);
}

.date-voucher {
  display: flex;
  width: 100%;
  overflow-x: auto;
  gap: 15px;
  margin-bottom: 15px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.date-voucher::-webkit-scrollbar {
  display: none;
}
.date-voucher .item {
  white-space: nowrap;
  border: 1px solid var(--color-white);
  padding: 5px 20px;
  color: var(--color-white);
  border-radius: 40px;
  text-align: center;
  font-size: var(--fs-time-tab);
  font-weight: 700;
}
.date-voucher .item:hover, .date-voucher .item.active {
  color: var(--color-main);
  background-color: var(--color-white);
}

.list-module-sale {
  display: flex;
  width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-module-sale::-webkit-scrollbar {
  display: none;
}
.list-module-sale {
  gap: 30px;
  list-style: none;
  margin-bottom: 10px;
}
.list-module-sale li {
  padding-left: 15px;
  padding-bottom: 5px;
  white-space: nowrap;
  color: var(--color-white);
  font-size: var(--fs-text-tab);
  font-weight: 400;
  border-bottom: 1px solid transparent;
  position: relative;
  cursor: pointer;
}
.list-module-sale li p {
  cursor: pointer;
}
.list-module-sale li:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 1px;
  background-color: var(--color-white);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.list-module-sale li:hover, .list-module-sale li.active {
  font-weight: 700;
  border-color: var(--color-white);
  cursor: text;
}
.list-module-sale li:hover p, .list-module-sale li.active p {
  cursor: text;
}
@media (min-width: 768px) {
  .list-module-sale {
    padding-left: 15px;
  }
  .list-module-sale li {
    font-size: 1.7rem;
  }
}

@media (max-width: 767px) {
  .slide-product-sale {
    padding-bottom: 10px;
  }
}
.sale-going-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sale-going-bot .view-all {
  color: var(--color-white);
  font-size: var(--fs-text-tab);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 40px;
  border: 1px solid var(--color-white);
  border-radius: 40px;
}
@media (max-width: 767px) {
  .sale-going-bot .view-all {
    padding: 5px 20px;
    font-weight: 400;
  }
}
.sale-going-bot .view-all:hover, .sale-going-bot .view-all.active {
  background: var(--color-main);
  border-color: var(--color-main);
}
.sale-going-bot .num-slide-product-sale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.sale-going-bot .num-slide-product-sale .swiper-button-prev, .sale-going-bot .num-slide-product-sale .swiper-pagination, .sale-going-bot .num-slide-product-sale .swiper-button-next {
  position: unset;
  color: #fff;
  margin: 0;
}
.sale-going-bot .num-slide-product-sale .swiper-button-prev, .sale-going-bot .num-slide-product-sale .swiper-button-next {
  width: 11px;
  height: 18px;
}
.sale-going-bot .num-slide-product-sale .swiper-button-prev::after, .sale-going-bot .num-slide-product-sale .swiper-button-next::after {
  font-size: 14px;
}
.sale-going-bot .num-slide-product-sale .swiper-button-prev::after:hover, .sale-going-bot .num-slide-product-sale .swiper-button-next::after:hover {
  color: var(--color-main);
}
.sale-going-bot .num-slide-product-sale .swiper-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
}
.sale-going-bot .num-slide-product-sale .swiper-button-prev {
  left: 0;
}
.sale-going-bot .num-slide-product-sale span {
  color: var(--color-white);
}
@media (max-width: 767px) {
  .sale-going-bot .num-slide-product-sale span {
    font-size: 12px;
  }
}
.sale-going-bot .num-slide-product-sale span:nth-of-type(1) {
  font-weight: 700;
  font-size: var(--fs-num-slide);
}
@media (max-width: 767px) {
  .sale-going-bot .num-slide-product-sale span:nth-of-type(1) {
    font-weight: 400;
    font-size: 14px;
  }
}
.sale-going-bot .num-slide-product-sale .prev,
.sale-going-bot .num-slide-product-sale .next {
  cursor: pointer;
}
.sale-going-bot .num-slide-product-sale .prev:hover svg path,
.sale-going-bot .num-slide-product-sale .next:hover svg path {
  stroke: var(--color-main);
}
.sale-going-bot .num-slide-product-sale .prev,
.sale-going-bot .num-slide-product-sale .next {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .sale-going-bot {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sale-going-bot .view-all {
    padding: 7px 40px;
  }
}

.product-sale {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .product-sale {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.wrapper-process {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.progress-text {
  width: 35px;
  color: var(--color-main);
  font-size: 1.2rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .progress-text {
    font-size: 1.4rem;
  }
}

.progress-container {
  width: calc(100% - 30px);
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  height: 100%;
  border-radius: 6.999px;
  background: linear-gradient(90deg, #00c6f2 0%, #a788be 29.33%, #f173ac 63.94%, #fec465 100%);
  width: 0%;
  transition: width 0.4s ease-in-out;
}

.slide-adv-index {
  padding-left: 15px;
}
@media (min-width: 768px) {
  .slide-adv-index {
    padding-left: 0;
    padding-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .slide-adv-index {
    padding-left: 10px;
    aspect-ratio: 430/130;
    overflow: hidden;
    padding-top: 0;
  }
}

.adv-index {
  aspect-ratio: 318/108;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}
.adv-index a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.adv-index .no-image {
  width: 100%;
  height: 100%;
}
.adv-index img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100% !important;
  object-fit: cover;
}
@media (min-width: 768px) {
  .adv-index {
    aspect-ratio: 428/145;
    border-radius: 6px;
    overflow: hidden;
  }
  .adv-index img {
    object-fit: cover;
    width: 100% !important;
  }
}

.adv-index-2 {
  aspect-ratio: 640/215;
  overflow: hidden;
  border-radius: 8px;
  display: block;
}
.adv-index-2 img {
  display: block;
  object-fit: cover;
  width: 100% !important;
  height: 100%;
}

.module-index {
  padding-top: 0;
}
@media (max-width: 991px) {
  .module-index {
    padding-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .module-index {
    padding-bottom: 0;
    padding-top: 0;
    aspect-ratio: 430/74;
  }
  .module-index.dot-tabs {
    aspect-ratio: 430/220;
  }
}

.title-module {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.title-module a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-dot-tab);
  font-weight: 700;
}
.title-module .view-all-module {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.title-module .view-all-module span {
  font-size: 1.4rem;
}
@media (max-width: 767px) {
  .title-module .view-all-module span {
    font-weight: 400;
  }
}
@media (min-width: 768px) {
  .title-module .view-all-module {
    font-size: var(--fs-size);
  }
}
.title-module .view-all-module:hover {
  color: var(--color-main);
}
.title-module .view-all-module:hover svg path {
  stroke: var(--color-main);
}
@media (max-width: 1200px) {
  .title-module {
    margin-bottom: 10px;
  }
}

.slide-modules-index {
  margin-left: 15px;
}
@media (max-width: 767px) {
  .slide-modules-index {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-left: 10px;
  }
  .slide-modules-index.loaded {
    display: block;
  }
  .slide-modules-index.loaded .owl-dots {
    margin-top: 0;
  }
  .slide-modules-index .load-product {
    width: calc((100% - 30px) / 3);
    aspect-ratio: 119/171;
  }
}
.slide-modules-index .item-parent {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
@media (max-width: 767px) {
  .slide-modules-index .item-parent {
    gap: 10px;
  }
}
.slide-modules-index .item-parent .item {
  width: calc((100% - 30px) / 3);
}
@media (max-width: 767px) {
  .slide-modules-index .item-parent .item {
    width: 100%;
  }
}
.slide-modules-index .it-module .img {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-modules-index .it-module .img .no-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.slide-modules-index .it-module .img img {
  width: initial;
  height: initial;
  object-fit: contain;
}
.slide-modules-index .it-module h3 a {
  font-size: var(--fs-text-tab);
  text-decoration: none;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  color: var(--color-text);
  font-weight: 400;
}
@media (max-width: 767px) {
  .slide-modules-index .it-module h3 a {
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .slide-modules-index .it-module {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .slide-modules-index .it-module .img {
    width: 100%;
    aspect-ratio: 1;
  }
  .slide-modules-index .it-module:hover h3 a {
    color: var(--color-main);
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .slide-modules-index .it-module .img {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .slide-modules-index .it-module h3 a {
    font-size: 1.4rem;
  }
}
.slide-modules-index.nav-lrc .owl-prev,
.slide-modules-index.nav-lrc .owl-next {
  top: 36%;
}

.slide-trademark-index {
  margin-left: 15px;
}
@media (max-width: 767px) {
  .slide-trademark-index {
    aspect-ratio: 415/135;
    overflow: hidden;
  }
}

.it-trademark {
  padding-bottom: 15px;
  position: relative;
}
.it-trademark .img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.it-trademark .img .no-image {
  width: 100%;
  height: 100%;
}
.it-trademark .img span.no-image {
  width: 100%;
  height: 100%;
}
.it-trademark .img img {
  width: 100% !important;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.it-trademark .name {
  position: absolute;
  bottom: 5px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28.475px;
  background: var(--color-white);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  height: 40px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .it-trademark .name {
    height: 30px;
    padding: 0 5px;
  }
}
.it-trademark .name a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
}
.it-trademark .name img {
  object-fit: contain;
  width: initial;
  max-height: 100%;
}

.online-privileges {
  background-color: #f0f0f0;
}
.online-privileges .title {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  display: inline-flex;
  gap: 15px;
  border-radius: 25.5px;
  background: var(--color-main-linear-gradient);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  padding-left: 7px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 20px;
}
@media (max-width: 767px) {
  .online-privileges .title {
    gap: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.online-privileges .title .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 50%;
}
@media (max-width: 767px) {
  .online-privileges .title .icon {
    width: 30px;
    height: 30px;
  }
  .online-privileges .title .icon svg {
    width: 60%;
  }
}
.online-privileges .title .name {
  color: var(--color-white);
  text-align: center;
  font-size: var(--fs-dot-tab);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 767px) {
  .slide-product-sale-2 {
    padding-bottom: 0;
  }
  .slide-product-sale-2 .owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 0;
    display: flex;
    justify-content: center;
  }
  .slide-product-sale-2 .owl-theme .owl-dots .owl-dot span {
    margin: 2px;
  }
  .slide-product-sale-2 .owl-theme .owl-dots .owl-dot.active span {
    background: var(--color-main-2);
    width: 23px;
  }
}
@media (min-width: 768px) {
  .best-seller, .blog-index {
    border-radius: 8px;
  }
}
@media (max-width: 767px) {
  .best-seller .title-main, .blog-index .title-main {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .blog-index .title-main {
    padding-bottom: 0;
  }
}

.title-best-seller {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}

.nav-slide-best-seller {
  display: flex;
  gap: 20px;
}
.nav-slide-best-seller .prev,
.nav-slide-best-seller .next {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-slide-best-seller .prev:hover svg path,
.nav-slide-best-seller .next:hover svg path {
  stroke: var(--color-main);
}

.it-best-seller .img,
.it-best-search .img {
  border-radius: 50%;
  background: linear-gradient(0deg, #f0f0f0 0%, #f0f0f0 100%);
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.it-best-seller .img span.no-image,
.it-best-search .img span.no-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.it-best-seller .img .no-image,
.it-best-search .img .no-image {
  width: 100%;
  height: 100%;
}
.it-best-seller .img img,
.it-best-search .img img {
  object-fit: contain;
  width: initial;
}
.it-best-seller .info,
.it-best-search .info {
  text-align: center;
}
.it-best-seller .info a,
.it-best-search .info a {
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  font-size: var(--fs-text-tab);
  font-weight: 400;
  display: block;
  margin-bottom: 5px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.it-best-seller .info p,
.it-best-search .info p {
  color: #777;
  font-size: var(--fs-time-tab);
  font-weight: 400;
}
.it-best-seller:hover .info a,
.it-best-search:hover .info a {
  color: var(--color-main);
}
@media (min-width: 768px) {
  .it-best-seller .info a,
  .it-best-search .info a {
    font-size: 1.6rem;
  }
  .it-best-seller .info p,
  .it-best-search .info p {
    font-size: 1.4rem;
  }
}

.it-best-search .img span.no-image {
  border: 1px solid #fff;
}

.flex-item {
  display: flex;
  gap: 15px;
}
.flex-item .item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-right: 30px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .it-best-seller {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .it-best-seller .img {
    width: 70%;
  }
}

.it-best-search {
  border-radius: 12px;
  background: #f0f0f0;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.it-best-search .img {
  background: var(--color-white);
  text-decoration: none;
}

.it-main-gradient {
  background-color: var(--color-white);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .it-main-gradient {
    padding: 5px;
  }
}
.it-main-gradient .icon {
  width: 40px;
  height: 40px;
  background-color: var(--color-main-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.it-main-gradient .icon svg path {
  fill: var(--color-white);
}
@media (max-width: 767px) {
  .it-main-gradient .icon {
    width: 30px;
    height: 30px;
  }
  .it-main-gradient .icon svg {
    width: 60%;
  }
}
.it-main-gradient p, .it-main-gradient a {
  color: var(--color-main-2);
  flex: 1;
  text-align: center;
  font-size: var(--fs-dot-tab);
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 767px) {
  .it-main-gradient p br, .it-main-gradient a br {
    display: none;
  }
}
.it-main-gradient:hover, .it-main-gradient.active {
  background: var(--color-main-linear-gradient);
}
.it-main-gradient:hover .icon, .it-main-gradient.active .icon {
  background-color: var(--color-white);
}
.it-main-gradient:hover .icon svg path, .it-main-gradient.active .icon svg path {
  fill: var(--color-main-2);
}
.it-main-gradient:hover p, .it-main-gradient:hover a, .it-main-gradient.active p, .it-main-gradient.active a {
  color: var(--color-white);
}
@media (min-width: 768px) {
  .it-main-gradient p {
    font-size: 2.2rem;
  }
}
@media (max-width: 767px) {
  .it-main-gradient p, .it-main-gradient a {
    padding-right: 15px;
  }
}

.flex-2-item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flex-2-item .item {
  width: calc((100% - 10px) / 2);
}

.group-module-index {
  background: #fff;
  border-radius: 8px 8px 0 0;
  padding: 15px 15px 0 15px;
  align-items: center;
}
@media (max-width: 767px) {
  .group-module-index {
    overflow-x: auto;
    padding: 10px 10px 0 10px;
    border-radius: 0;
    gap: 10px;
  }
  .group-module-index::-webkit-scrollbar {
    height: 0;
  }
}
.group-module-index .item {
  padding: 5px 10px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  text-decoration: none;
}
@media (max-width: 767px) {
  .group-module-index .item {
    white-space: nowrap;
  }
}
.group-module-index .item.active {
  padding: 7.5px 25px;
  font-size: var(--fs-dot-tab);
  font-weight: 700;
  color: #fff;
  background: var(--color-main-linear-gradient);
}
.group-module-index .item:not(.active):hover {
  border-color: var(--color-main);
  color: var(--color-main);
}

@media (max-width: 767px) {
  .title-blog-index .title-main {
    padding: 0;
  }
}
.list-module-blog {
  padding-left: 15px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-module-blog::-webkit-scrollbar {
  display: none;
}
.list-module-blog {
  gap: 5px;
}
@media (max-width: 767px) {
  .list-module-blog {
    padding-left: 10px;
    padding-bottom: 5px;
  }
}
.list-module-blog .item {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .list-module-blog {
    padding-left: 0;
  }
  .list-module-blog.list-module-blog-index {
    padding-left: 15px;
  }
}

.item-module-blog {
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
}
@media (max-width: 767px) {
  .item-module-blog {
    padding: 5px 10px;
  }
}
.item-module-blog.min {
  padding: 4px 10px;
  font-size: var(--fs-min);
}
.item-module-blog:hover, .item-module-blog.active {
  border-color: var(--color-main);
  color: var(--color-main);
}

.item-blog {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 5px;
  margin-top: 5px;
}
.item-blog .img {
  aspect-ratio: 153/105;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}
.item-blog .img span.no-image {
  width: 100%;
  height: 100%;
}
.item-blog .img .no-image {
  width: 100%;
  height: 100%;
}
.item-blog .img img {
  width: 100% !important;
  object-fit: cover;
  height: 100%;
}
.item-blog .info {
  padding: 15px;
}
.item-blog .info a {
  color: var(--color-text);
  font-size: var(--fs-text-tab);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  font-weight: 400;
}
@media (min-width: 768px) {
  .item-blog .img {
    aspect-ratio: 308/211;
  }
  .item-blog h3 a:hover {
    color: var(--color-main);
  }
}

.blog-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px;
  border-radius: 12px;
}

span.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7b7b7;
  text-decoration: none;
  background: #f1f1f1;
  border-radius: 5px;
}

.btn-login {
  font-weight: 700;
  color: var(--color-main);
  cursor: pointer;
}
.btn-login:hover {
  color: #00c6f2;
}

.social {
  border-radius: 12px;
  overflow: hidden;
}
.social .fb-page {
  width: 100%;
}
.social .fb-page > span {
  width: 100% !important;
}
.social .fb-page > span iframe {
  display: block;
  width: 100% !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .social {
    width: 500px;
    margin: auto;
  }
}

.connect-social {
  text-align: center;
  padding-top: 15px;
}
.connect-social p {
  font-weight: 700;
  margin-bottom: 15px;
}
.connect-social .list-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.connect-social .list-social .it {
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connect-social .bct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.connect-social .bct a {
  display: block;
}
.connect-social .bct a img {
  object-fit: contain;
  width: initial;
}

@media (min-width: 768px) {
  .block-slide {
    display: flex;
    gap: 15px;
  }
  .block-slide .left {
    width: 66.6%;
    border-radius: 8px;
    position: relative;
  }
  .block-slide .left .slide-index {
    width: 100%;
    position: initial;
  }
  .block-slide .left .slide-index .item {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .block-slide .left .slide-index .item .no-image {
    width: 100%;
    height: 100%;
  }
  .block-slide .right {
    width: calc(33.4% - 15px);
  }
  .block-slide .right .adv-item {
    aspect-ratio: 880/410;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    font-size: 14px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .block-slide .right .adv-item {
    aspect-ratio: 880/392;
  }
}
@media (min-width: 768px) {
  .block-slide .right .adv-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .block-slide .right .adv-item .no-image {
    width: 100%;
    height: 100%;
  }
  .block-slide .right .adv-item:first-child {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .block-slide .left {
    height: 338px;
  }
  .block-slide .right {
    height: 338px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .block-slide .left {
    height: 282px;
  }
  .block-slide .right {
    height: 282px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .block-slide .left {
    height: 220px;
  }
  .block-slide .left .slide-index {
    height: 100%;
    width: 100%;
  }
  .block-slide .left .slide-index .item {
    height: 221px;
    width: 100%;
  }
  .block-slide .right {
    height: 220px;
  }
  .block-slide .right .adv-item img {
    height: 100%;
  }
}
@media (max-width: 767px) {
  #LoadFlashSale .list-module-sale {
    padding-left: 10px;
  }
  #LoadFlashSale .sale-going-bot {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#SuggestProduct {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  #SuggestProduct .container {
    background: #fff;
    padding-bottom: 0;
    margin-bottom: 15px;
  }
  #SuggestProduct .container .view-all-index {
    margin-bottom: 0;
  }
}

.load-best-sellter {
  display: flex;
  gap: 15px;
}
.load-best-sellter.loaded {
  display: block;
}
.load-best-sellter .load-product {
  aspect-ratio: 202/230;
  width: calc((100% - 60px) / 5);
}
@media (max-width: 767px) {
  .load-best-sellter .load-product {
    aspect-ratio: 180/262;
    width: calc((100% - 15px) / 2);
  }
}

.load-best-search {
  display: flex;
  gap: 15px;
}
.load-best-search.loaded {
  display: block;
}
.load-best-search .load-product {
  aspect-ratio: 202/291;
  width: calc((100% - 60px) / 5);
}
@media (max-width: 767px) {
  .load-best-search .load-product {
    aspect-ratio: 180/262;
    width: calc((100% - 15px) / 2);
  }
}

@media (max-width: 767px) {
  .block-title-main {
    box-shadow: 0 0 10px -5px;
    position: relative;
    z-index: 10;
  }
}

.slide-trademark {
  padding-left: 15px;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .slide-trademark {
    padding-right: 15px;
  }
}
@media (max-width: 767px) {
  .slide-trademark {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.item-trademark {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: start;
  padding: 15px 0 15px 0;
  aspect-ratio: 115/155;
}
.item-trademark.current {
  border-color: var(--color-main);
}
.item-trademark.current .name {
  color: var(--color-main);
}
.item-trademark.no-shadow {
  box-shadow: none;
}
.item-trademark .img {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-trademark .name {
  color: var(--color-text);
  text-align: center;
  font-size: var(--fs-time-tab);
  text-decoration: none;
  font-weight: 400;
}

.list-fillter {
  padding-bottom: 15px;
}
@media (max-width: 767px) {
  .list-fillter {
    padding-bottom: 10px;
  }
}
.list-fillter .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.item-fillter {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 5px;
  text-align: center;
  font-size: var(--fs-min);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.item-fillter .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-fillter .icon svg:nth-child(2) {
  display: none;
}
.item-fillter.grid .icon svg:nth-child(1) {
  display: none;
}
.item-fillter.grid .icon svg:nth-child(2) {
  display: block;
}
.item-fillter.active {
  border-color: var(--color-main);
  color: var(--color-main);
}
@media (min-width: 768px) {
  .item-fillter {
    padding: 2px 10px;
    height: 31px;
    font-size: var(--fs-text);
  }
}

.item-fillter-layout {
  width: 31px;
  aspect-ratio: 1;
}

.item-qa {
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  background: #fbfbfb;
  padding: 15px;
}
.item-qa:not(:last-child) {
  margin-bottom: 15px;
}
.item-qa .question {
  display: flex;
  align-items: center;
}
.item-qa .question span {
  width: 90%;
  font-weight: 600;
  font-size: var(--fs-text-tab);
}
.item-qa .question .icon {
  width: 10%;
  display: flex;
  justify-content: flex-end;
}
.item-qa .question .icon svg {
  transition: all 0.3s ease;
}
.item-qa .question.active .icon svg {
  transform: rotate(180deg);
}
.item-qa .reply {
  border-top: 1px solid var(--color-border);
  margin-top: 15px;
  padding-top: 15px;
  text-align: justify;
  font-size: var(--fs-text-tab);
  display: none;
}

@media (min-width: 768px) {
  .block-list-product {
    margin-top: 0;
    display: flex;
  }
  .block-list-product.no-border {
    border-top: 0;
  }
  .block-list-product .left {
    width: 20%;
    border-right: 1px solid var(--color-border);
    padding: 15px;
  }
  .block-list-product .left .clear-filter {
    text-align: center;
    margin-top: 15px;
    cursor: pointer;
  }
  .block-list-product .right {
    width: 80%;
    padding: 15px;
  }
  .block-list-product .right.full {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .block-list-product .left {
    width: 30%;
  }
  .block-list-product .right {
    width: 70%;
  }
  .block-list-product .right.full {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .block-fillter .text-main {
    font-weight: 700;
    margin-bottom: 10px;
  }
  .block-fillter .price-input {
    display: flex;
    gap: 13px;
    margin-bottom: 15px;
  }
  .block-fillter .price-input input {
    width: calc((100% - 13px) / 2);
    height: 32px;
    padding-left: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
  }
  .block-fillter .price-input input::placeholder {
    font-size: var(--fs-text);
  }
  .block-fillter .btn-gradient {
    text-align: center;
    height: 32px;
    line-height: 32px;
  }
  .block-fillter-attr {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--color-border);
  }
  .block-fillter-attr .text-main {
    font-weight: 700;
    margin-bottom: 10px;
  }
  .block-fillter-attr .list-attr ul {
    list-style: none;
  }
  .block-fillter-attr .list-attr ul li.filter-item {
    padding-left: 30px;
    margin-bottom: 7px;
    position: relative;
    font-weight: 400;
    cursor: pointer;
  }
  .block-fillter-attr .list-attr ul li.filter-item label {
    cursor: pointer;
  }
  .block-fillter-attr .list-attr ul li.filter-item .checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    border: 1px solid var(--color-border);
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }
  .block-fillter-attr .list-attr ul li.filter-item .checkmark:after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 16px;
    width: 16px;
    color: var(--color-main);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }
  .block-fillter-attr .list-attr ul li.filter-item input {
    display: none;
  }
  .block-fillter-attr .list-attr ul li.filter-item input:checked ~ .checkmark {
    border-color: var(--color-main);
  }
  .block-fillter-attr .list-attr ul li.filter-item input:checked ~ .checkmark:after {
    opacity: 1;
  }
  .order-block {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .order-block .title-main-block {
    font-weight: 700;
  }
  .order-block .list-order {
    flex: 1;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .order-block .list-order .item:last-child {
    margin-left: auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .order-block .list-order {
    gap: 5px;
  }
}
.image-product-detail {
  aspect-ratio: 1;
  margin-bottom: 15px;
  background: #fff;
}
@media (max-width: 767px) {
  .image-product-detail {
    aspect-ratio: 16/11;
  }
}
.image-product-detail .swiper-pagination {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 2.5px 5px;
}
.image-product-detail .swiper-slide {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .image-product-detail .swiper-slide {
    aspect-ratio: 16/11;
  }
}
.image-product-detail .swiper-slide span.no-image {
  width: 100%;
  height: 100%;
}
.image-product-detail .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: initial;
  height: initial;
  object-fit: contain;
}
@media (max-width: 767px) {
  .image-product-detail {
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
  }
  .image-product-detail .swiper-button-next, .image-product-detail .swiper-button-prev {
    background: var(--color-border);
    overflow: hidden;
  }
  .image-product-detail .swiper-button-next:after, .image-product-detail .swiper-button-prev:after {
    font-size: 20px;
    color: #333;
  }
  .image-product-detail .product-like {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #fff;
    padding: 3.5px;
    border-radius: 5px 0 0 0;
  }
  .image-product-detail .swiper-button-next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  .image-product-detail .swiper-button-prev {
    left: 0;
    border-radius: 0px 3px 3px 0px;
  }
}

@media (max-width: 767px) {
  .thumb-product-detail {
    aspect-ratio: 400/72;
    overflow: hidden;
  }
}
.thumb-product-detail .swiper-slide {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #dad7d7;
  overflow: hidden;
}
.thumb-product-detail .swiper-slide.swiper-slide-thumb-active {
  border-color: var(--color-main);
}
.thumb-product-detail .swiper-slide img {
  aspect-ratio: 1;
}

.code-trademark {
  position: relative;
  display: flex;
  gap: 5px;
  font-size: 1.5rem;
}
.code-trademark .main {
  color: var(--color-main-4);
  font-size: 1.5rem;
  font-weight: 700;
}
.code-trademark .main a {
  color: var(--color-main-4);
  font-size: 1.5rem;
  text-decoration: none;
}
.code-trademark .main a:hover {
  color: var(--color-main);
}
.code-trademark .main.available {
  color: forestgreen;
}
.code-trademark .main.out-of-stock {
  color: silver;
}
.code-trademark .main.out-of-bussiness {
  color: red;
}
.code-trademark .main.comming-soon {
  color: orange;
}

.product-code-trademark {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-time-tab);
  gap: 10px;
}
@media (max-width: 767px) {
  .product-code-trademark {
    margin-bottom: 5px;
  }
}
.product-code-trademark .product-code {
  margin-right: 5px;
}
@media (min-width: 768px) {
  .product-code-trademark .product-code {
    font-size: 15px;
  }
}

.price-main {
  display: flex;
  align-items: center;
}
.price-main .price {
  color: var(--color-main);
  font-size: var(--fs-price);
  font-weight: 700;
  margin-right: 10px;
}
.price-main p {
  margin-right: auto;
}
.price-main .vourcher {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voucher-price {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  padding: 15px;
  background-color: var(--color-white);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: all 0.3s ease;
}
.voucher-price.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.voucher-price .title-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.voucher-price .title-block p {
  font-size: var(--fs-dot-tab);
  font-weight: 700;
}
.voucher-price .title-block .icon-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.voucher-price p {
  font-size: var(--fs-text-tab);
}
.voucher-price .desc {
  text-align: justify;
}
.voucher-price ul {
  list-style: none;
}
.voucher-price ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.voucher-price ul li p.main {
  color: var(--color-main);
}
.voucher-price ul li p.main-2 {
  color: var(--color-main-4);
}
.voucher-price ul li p.main-3 {
  color: var(--color-main-2);
}
.voucher-price ul li:last-child {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .voucher-price {
    width: 450px;
    margin: auto;
    top: 50%;
    bottom: initial;
    border-radius: 15px;
  }
  .voucher-price.active {
    transform: translateY(-50%);
  }
  .voucher-price p {
    font-size: var(--fs-text);
  }
}

.price-origin p {
  font-size: var(--fs-text);
}

.rate-cmt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--fs-time-tab);
}
@media (max-width: 767px) {
  .rate-cmt {
    margin-bottom: 10px;
  }
}
.rate-cmt .star {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rate-cmt .rate {
  color: var(--color-main-5);
}
@media (min-width: 768px) {
  .rate-cmt .rate {
    font-size: 15px;
  }
}
.rate-cmt .cmt {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 10px;
  margin-right: 10px;
  border-left: 1px solid var(--color-main-5);
  border-right: 1px solid var(--color-main-5);
  color: var(--color-main-5);
  line-height: 1;
}
@media (min-width: 768px) {
  .rate-cmt .cmt {
    font-size: 15px;
    line-height: 1;
  }
}
@media (max-width: 767px) {
  .rate-cmt .cmt {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
  }
}

.product-classification > p > strong {
  font-size: var(--fs-title-tab);
  font-weight: 700;
}
@media (max-width: 767px) {
  .product-classification {
    margin-bottom: 0;
  }
  .product-classification > p {
    margin-bottom: 10px;
  }
}

.list-product-classification:not(.slide-version) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.list-product-classification:not(.slide-version) .item {
  width: calc((100% - 40px) / 6);
}
@media (min-width: 768px) {
  .list-product-classification:not(.slide-version) .item {
    width: calc((100% - 60px) / 7);
  }
}

.slide-version {
  position: relative;
}
.slide-version .owl-nav .owl-prev, .slide-version .owl-nav .owl-next {
  margin: 0;
  position: absolute;
  top: 25px;
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
}
.slide-version .owl-nav .owl-prev:hover, .slide-version .owl-nav .owl-next:hover {
  background: transparent;
}
.slide-version .owl-nav .owl-prev {
  left: -20px;
}
@media (max-width: 767px) {
  .slide-version .owl-nav .owl-prev {
    left: 0;
  }
}
.slide-version .owl-nav .owl-next {
  right: -20px;
}
@media (max-width: 767px) {
  .slide-version .owl-nav .owl-next {
    right: 0;
  }
}

.item-product-classification {
  text-align: center;
}
.item-product-classification .img {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.item-product-classification .img img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.item-product-classification .img .out-of-stock-label {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  white-space: nowrap;
  color: #000;
  background: #f1f1f1;
  border-radius: 60px;
  border: 1px solid #c3c3c3;
  transform: rotate(-45deg);
  opacity: 0.5;
}
.item-product-classification p {
  font-size: var(--fs-min);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.item-product-classification:hover .img, .item-product-classification.active .img {
  border-color: var(--color-main);
}
.item-product-classification:hover p, .item-product-classification.active p {
  color: var(--color-main);
}
@media (min-width: 768px) {
  .item-product-classification p {
    font-size: 14px;
  }
}

.flash-sale {
  background: url("../images/bg-gradient.jpg") no-repeat;
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.flash-sale .text {
  text-transform: uppercase;
  font-weight: 700;
}
.flash-sale .time-down,
.flash-sale .text {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-white);
}
.flash-sale .time-down p,
.flash-sale .text p {
  font-size: var(--fs-text-tab);
}
.flash-sale .countdown {
  gap: 2px;
}
.flash-sale .countdown .item {
  width: 22px;
}
.flash-sale .countdown .item p {
  font-size: var(--fs-min);
}
@media (min-width: 768px) {
  .flash-sale {
    padding: 5px;
  }
  .flash-sale .text {
    margin-left: 5px;
  }
  .flash-sale .text p {
    font-size: 1.8rem;
  }
  .flash-sale .countdown .item {
    width: 35px;
    height: 32px;
  }
  .flash-sale .countdown .item p {
    font-size: 1.8rem;
    font-weight: 700;
  }
}

.product-classification {
  aspect-ratio: 625/167;
}
.product-classification.loaded {
  aspect-ratio: initial;
}

.gift-product {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.gift-product.loaded {
  aspect-ratio: initial;
}
.gift-product .title-block {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  background-color: #f9fafb;
  border-bottom: 1px solid var(--color-border);
  justify-content: start;
}
.gift-product .title-block p {
  font-weight: 700;
}
.gift-product ol {
  padding: 10px;
  list-style: none;
}
.gift-product ol li {
  position: relative;
  padding-left: 30px;
}
.gift-product ol li span {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-main-2);
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}
.gift-product ol li:not(:last-child) {
  margin-bottom: 10px;
}

.action-cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}
@media (max-width: 767px) {
  .action-cart {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 10px;
    z-index: 10;
    box-shadow: 0 0 10px -5px #333;
    gap: 5px;
  }
}
.action-cart .quantity,
.action-cart .buy-now {
  width: 100%;
}
.action-cart .branch-num,
.action-cart .add-to-card {
  width: calc((100% - 10px) / 2);
}
@media (max-width: 767px) {
  .action-cart .branch-num,
  .action-cart .add-to-card {
    width: calc((100% - 5px) / 2);
  }
}
.action-cart .on-hand {
  width: 100%;
  text-align: right;
  font-size: 14px;
  margin-bottom: 10px;
}
.action-cart .on-hand b {
  color: #FF9800;
}
.action-cart .quantity {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .action-cart .quantity p {
    font-size: 18px;
  }
}
.action-cart .quantity .input-quantity {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.action-cart .quantity .input-quantity input {
  width: 73px;
  height: 47px;
  border: 0;
  text-align: center;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .action-cart .quantity .input-quantity input {
    height: 30px;
    width: 50px;
  }
}
.action-cart .quantity .input-quantity input:focus {
  outline: none;
}
.action-cart .quantity .input-quantity .minus,
.action-cart .quantity .input-quantity .plus {
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  cursor: pointer;
  font-size: var(--fs-input);
  font-weight: 400;
}
@media (max-width: 767px) {
  .action-cart .quantity .input-quantity .minus,
  .action-cart .quantity .input-quantity .plus {
    width: 30px;
    height: 30px;
  }
}
.action-cart .quantity .input-quantity .minus:hover,
.action-cart .quantity .input-quantity .plus:hover {
  color: var(--color-white);
  background-color: var(--color-main);
}
.action-cart .branch-num {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 5px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: #f9fafb;
}
@media (max-width: 767px) {
  .action-cart .branch-num {
    height: 40px;
    padding: 5px;
  }
}
.action-cart .branch-num .icon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: var(--color-main-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .action-cart .branch-num .icon {
    width: 20px;
    height: 20px;
  }
}
.action-cart .branch-num p {
  flex: 1;
  font-size: var(--fs-text-tab);
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
@media (min-width: 768px) and (max-width: 991px) {
  .action-cart .branch-num p {
    font-size: 1.3rem;
  }
}
@media (max-width: 767px) {
  .action-cart .branch-num p {
    font-size: 13px;
    font-weight: 400;
  }
}
.action-cart .add-to-card,
.action-cart .buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  gap: 5px;
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .action-cart .add-to-card,
  .action-cart .buy-now {
    height: 40px;
  }
}
.action-cart .add-to-card .icon,
.action-cart .buy-now .icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-cart .add-to-card .icon svg,
.action-cart .buy-now .icon svg {
  margin-left: 2px;
  margin-top: 2px;
}
.action-cart .add-to-card p,
.action-cart .buy-now p {
  color: var(--color-white);
  font-weight: 700;
}
.action-cart .add-to-card {
  background-color: var(--color-main-2);
  padding: 0 20px;
}
.action-cart .add-to-card p {
  flex: 1;
  text-align: center;
}
.action-cart .buy-now {
  gap: 15px;
}

.list-combo-discount {
  display: flex;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-combo-discount::-webkit-scrollbar {
  display: none;
}
.list-combo-discount {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 8px;
  padding-left: 15px;
  padding-bottom: 5px;
}
@media (min-width: 768px) {
  .list-combo-discount {
    gap: 60px;
    flex-wrap: wrap;
    padding-left: 0;
  }
}

.item-product-discount {
  min-width: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .item-product-discount {
    position: relative;
  }
}
.item-product-discount .wrapper {
  border: 1px solid var(--color-border);
  width: 130px;
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 15px;
}
.item-product-discount .wrapper .img {
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.item-product-discount .wrapper .img img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.item-product-discount .wrapper .info h3 a {
  color: var(--color-text);
  font-size: var(--fs-text);
  font-weight: 400;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 10px;
  line-height: 1.3;
}
.item-product-discount .wrapper .info h3 a:hover {
  color: var(--color-main);
}
.item-product-discount .wrapper .info .price {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.item-product-discount .wrapper .info .price .new {
  color: var(--color-main);
  font-weight: 700;
}
.item-product-discount .wrapper .info .price .old {
  color: #7a7a7a;
  font-size: 15px;
  text-decoration-line: line-through;
}
.item-product-discount .add-to-card {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-main-2);
  border-radius: 50%;
  color: var(--color-white);
  line-height: 15px;
  text-align: center;
}
@media (min-width: 768px) {
  .item-product-discount .add-to-card {
    position: absolute;
    right: -45px;
  }
}
@media (min-width: 768px) {
  .item-product-discount {
    gap: 15px;
    min-width: auto;
    width: calc((100% - 240px) / 5);
  }
  .item-product-discount .wrapper {
    width: auto;
    flex: 1;
  }
  .item-product-discount .add-to-card {
    width: 30px;
    height: 30px;
    font-size: var(--fs-dot-tab);
  }
}

.total-price {
  border-top: 1px solid var(--color-border);
  margin-top: 15px;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.total-price .total-price-discount p {
  font-size: var(--fs-text);
}
.total-price .total-price-discount p:nth-child(2) {
  color: #7a7a7a;
  margin-top: 5px;
}
@media (min-width: 768px) {
  .total-price .total-price-discount p strong {
    font-size: var(--fs-text);
  }
  .total-price .total-price-discount p .cl-main {
    font-size: 18px;
  }
  .total-price .total-price-discount p:nth-child(2) {
    font-size: 15px;
  }
}
.total-price .btn-gradient {
  width: 152.2px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.total-price .btn-gradient .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  gap: 15px;
}
@media (min-width: 768px) {
  .total-price {
    border-top: 0;
  }
  .total-price .btn-gradient {
    width: calc((100% - 240px) / 5);
  }
}

.list-coupons {
  display: flex;
  margin-left: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-coupons::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .list-coupons {
    margin-left: 10px;
  }
}
@media (min-width: 768px) {
  .list-coupons {
    flex-wrap: wrap;
    margin-left: 0;
  }
  .list-coupons .item-coupons {
    width: calc((100% - 30px) / 4);
    min-width: auto;
  }
  .list-coupons.list-coupons-3 .item-coupons {
    width: calc((100% - 20px) / 3);
    min-width: auto;
  }
}

.item-coupons {
  min-width: 330px;
  min-height: 90px;
  display: flex;
  border: 1px solid var(--color-border);
  border-left: 0;
}
.item-coupons .img {
  width: 60px;
  min-height: 90px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-coupons .img .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.item-coupons .img .bg svg {
  width: 100%;
  height: 100%;
}
.item-coupons .img img {
  position: relative;
  z-index: 2;
  width: 32px !important;
}
.item-coupons .info {
  flex: 1;
  min-height: 90px;
  padding: 7px 10px;
}
.item-coupons .info h3 {
  font-size: var(--fs-size);
  font-weight: 700;
}
.item-coupons .info p {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  font-size: 14px;
  font-weight: 400;
}
.item-coupons .info .action {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-min);
  align-items: center;
}
.item-coupons .info .action .cl-main {
  font-size: 1.2rem;
  cursor: pointer;
}
.item-coupons .info .action .copyclip {
  background-color: var(--color-main-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-white);
  cursor: pointer;
  font-size: 12px;
}
@media (min-width: 768px) {
  .item-coupons {
    min-width: unset;
    height: 103px;
  }
  .item-coupons .img,
  .item-coupons .info {
    height: 100px;
  }
  .item-coupons .img .bg {
    top: -3px;
    bottom: -4px;
  }
  .item-coupons .info h3 {
    font-size: 1.6rem;
  }
  .item-coupons .info p {
    font-size: 1.4rem;
  }
}

.border-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.table tr td {
  padding: 10px;
}
.table tr:nth-child(odd) td {
  background-color: #f2f2f2;
}

.blog-content {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .blog-content {
    padding-bottom: 10px;
  }
}
.blog-content:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.blog-content .title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-content .title-content p {
  font-weight: 700;
  font-size: var(--fs-dot-tab);
}
.blog-content .title-content .icon {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-content .title-content .icon svg {
  transition: all 0.3s ease;
}
.blog-content .title-content .icon.active svg {
  transform: rotate(90deg);
}
.blog-content .detail-content {
  display: none;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .blog-content {
    border-bottom: 0;
    display: none;
  }
  .blog-content .detail-content {
    display: block;
    padding-top: 0;
    margin-top: 15px;
    border-top: 0;
  }
  .blog-content .title-content {
    font-size: var(--fs-dot-tab);
  }
  .blog-content.active {
    display: block;
  }
}

.block-rate {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 15px;
  display: flex;
}
.block-rate .left {
  width: 35%;
  padding-right: 15px;
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.block-rate .left .point-rate {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 5px;
}
.block-rate .left .rate-star {
  display: flex;
  justify-content: center;
  gap: 3px;
}
.block-rate .left .num-rate {
  font-size: 14px;
  text-align: center;
  color: var(--color-main-5);
}
.block-rate .right {
  width: 65%;
  padding-left: 15px;
  gap: 10px;
}
.block-rate .right .star-num {
  display: flex;
  align-items: center;
  gap: 5px;
}
.block-rate .right .star-num p {
  width: 10px;
  text-align: center;
}
.block-rate .right .star-num .star {
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-rate .right .progress-bar {
  background: var(--color-main);
}
.block-rate .right .progress-text {
  font-size: var(--fs-title-tab);
}
.block-rate .right .progress-text.default {
  color: var(--color-text);
}
@media (min-width: 768px) {
  .block-rate .left {
    width: 20%;
  }
  .block-rate .right {
    width: 80%;
  }
  .block-rate .right .process-star {
    width: 50%;
  }
}

.item-rate .it-person {
  display: flex;
  align-items: start;
  margin-bottom: 10px;
  position: relative;
}
@media (max-width: 767px) {
  .item-rate .it-person {
    margin-bottom: 10px;
    justify-content: space-between;
  }
}
.item-rate .it-person .user {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.item-rate .it-person .user .avt {
  width: 30px;
  height: 30px;
  background-color: var(--color-main-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-white);
}
.item-rate .it-person .user .txt {
  padding-left: 10px;
  padding-top: 6px;
}
.item-rate .it-person .user .txt p {
  font-weight: 700;
  line-height: 1;
}
.item-rate .it-person .user .rate-star {
  display: flex;
  align-items: center;
  gap: 2.5px;
  margin-top: 7px;
}
.item-rate .it-person .user .rate-star .star {
  display: flex;
  align-items: center;
  width: 12px;
  height: 12px;
}
.item-rate .it-person .user .rate-star .star svg {
  width: 100%;
  height: 100%;
}
.item-rate .it-person .time {
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.item-rate .it-person .time span {
  line-height: 1;
}
.item-rate .it-person .remove-comment {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.item-rate .it-content {
  padding-left: 40px;
}

.detail-coupons, .popup-coupons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .detail-coupons, .popup-coupons {
    width: 450px;
    top: 50%;
    margin: auto;
    border-radius: 15px;
    bottom: initial;
  }
}
.detail-coupons.active, .popup-coupons.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .detail-coupons.active, .popup-coupons.active {
    transform: translateY(-50%);
  }
}
.detail-coupons .title, .popup-coupons .title {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-dot-tab);
  font-weight: 700;
  padding: 20px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
.detail-coupons .block-content, .popup-coupons .block-content {
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid var(--color-border);
}
.detail-coupons .block-content p, .popup-coupons .block-content p {
  font-size: var(--fs-size);
}
.detail-coupons .block-content h3, .popup-coupons .block-content h3 {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: var(--fs-size);
}
.detail-coupons .block-content .code,
.detail-coupons .block-content .date, .popup-coupons .block-content .code,
.popup-coupons .block-content .date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-coupons .block-content .date, .popup-coupons .block-content .date {
  padding-bottom: 10px;
}
.detail-coupons .block-content .code, .popup-coupons .block-content .code {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.detail-coupons .block-content .code .block, .popup-coupons .block-content .code .block {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.detail-coupons .action, .popup-coupons .action {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.detail-coupons .action .close-detail-coupons,
.detail-coupons .action .copy-btn, .popup-coupons .action .close-detail-coupons,
.popup-coupons .action .copy-btn {
  width: calc((100% - 10px) / 2);
  text-align: center;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  cursor: pointer;
}
.detail-coupons .action .close-detail-coupons, .popup-coupons .action .close-detail-coupons {
  border: 1px solid var(--color-border);
  background-color: #f9fafb;
  font-weight: 700;
}

@media (min-width: 768px) {
  .block-product-content-title {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: 44px;
    overflow: hidden;
  }
  .block-product-content-title .item-tit {
    width: 20%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-right: 1px solid var(--color-border);
    background: #f2f2f2;
    font-weight: 700;
    cursor: pointer;
  }
  .block-product-content-title .item-tit:last-child {
    border-right: 0;
  }
  .block-product-content-title .item-tit:hover, .block-product-content-title .item-tit.active {
    color: var(--color-white);
    background: var(--color-main-linear-gradient);
  }
}

.detai-product-main .left {
  position: relative;
}
@media (min-width: 768px) {
  .detai-product-main {
    display: flex;
    gap: 40px;
  }
  .detai-product-main .left {
    aspect-ratio: 625/772;
    overflow: hidden;
  }
  .detai-product-main .left,
  .detai-product-main .right {
    width: calc((100% - 40px) / 2);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .detai-product-main {
    flex-wrap: wrap;
    gap: 15px;
  }
  .detai-product-main .left,
  .detai-product-main .right {
    width: 100%;
  }
  .detai-product-main .left {
    aspect-ratio: unset;
    overflow: hidden;
  }
}

.product-like {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .product-like {
    gap: 5px;
  }
}
.product-like svg {
  width: 24px;
  height: 20px;
}
@media (max-width: 767px) {
  .product-like svg {
    height: 20px;
  }
}
.product-like svg path {
  width: 100%;
  height: 100%;
  stroke: var(--color-main);
}
.product-like.active svg path {
  fill: var(--color-main);
}

.product-share {
  margin-left: 5px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #1877F2;
  border-radius: 10px;
}
.product-share .share {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  transition: opacity 0.5s ease;
}
.product-share .share:hover {
  opacity: 0.5;
}

.loading-product {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .loading-product {
    gap: 10px;
  }
}
.loading-product .load-product {
  width: calc((100% - 60px) / 5);
  aspect-ratio: 311/487;
}
@media (max-width: 1200px) {
  .loading-product .load-product {
    width: calc((100% - 45px) / 4);
  }
}
@media (max-width: 767px) {
  .loading-product .load-product {
    width: calc((100% - 10px) / 2);
  }
}
.loading-product.loading-4 .load-product {
  width: calc((100% - 45px) / 4);
}
@media (max-width: 767px) {
  .loading-product.loading-4 .load-product {
    width: calc((100% - 10px) / 2);
  }
}

@media (max-width: 767px) {
  .swiper-pagination-bullet {
    margin: 0 5px !important;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--color-main);
  }
  .image-product-detail {
    position: relative;
  }
}
.gift-tags {
  position: absolute;
  top: calc((80% - 150px) / 2);
  z-index: 10;
  display: flex;
  width: 100%;
}
@media (max-width: 767px) {
  .gift-tags {
    top: 5px;
  }
}
.gift-tags .gift-tags-item {
  max-width: 150px;
  aspect-ratio: 1;
  overflow: hidden;
}
@media (max-width: 767px) {
  .gift-tags .gift-tags-item {
    max-width: 80px;
  }
}
.gift-tags .gift-tags-item:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 767px) {
  .gift-tags .gift-tags-item:nth-of-type(1) {
    left: 5px;
  }
}
.gift-tags .gift-tags-item:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 767px) {
  .gift-tags .gift-tags-item:nth-of-type(2) {
    right: 5px;
  }
}
.gift-tags .gift-tags-item img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.list-abc {
  display: flex;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-abc::-webkit-scrollbar {
  display: none;
}
.list-abc {
  gap: 30px;
}
.list-abc .item-abc {
  white-space: nowrap;
  font-size: var(--fs-time-tab);
  font-weight: 400;
}
@media (min-width: 768px) {
  .list-abc {
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
  }
}

.wrapper-trademark > h2 {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 15px;
  font-size: var(--fs-dot-tab);
}

.list-trademark-product {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.list-trademark-product .item {
  width: calc((100% - 15px) / 2);
}
@media (min-width: 768px) {
  .list-trademark-product .item {
    width: calc((100% - 75px) / 6);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .list-trademark-product .item {
    width: calc((100% - 45px) / 4);
  }
}

.item-news {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.item-news:last-child {
  margin-bottom: 0;
}
.item-news .img {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 145/99;
  text-decoration: none;
}
.item-news .img span.no-image {
  width: 100%;
  height: 100%;
}
.item-news .img img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}
.item-news .info {
  flex: 1;
  padding-left: 15px;
}
@media (max-width: 767px) {
  .item-news .info {
    padding-left: 10px;
  }
}
.item-news .info .tag {
  text-decoration: none;
  color: #777;
  font-size: var(--fs-min-2);
  font-weight: 400;
  border: 1px solid var(--color-border);
  display: inline-block;
  padding: 2px 5px;
  border-radius: 30px;
  margin-bottom: 5px;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
}
.item-news .info .tag:hover {
  color: var(--color-white);
  background: var(--color-main);
  border-color: var(--color-main);
}
.item-news .info h3 a {
  font-size: var(--fs-text-tab);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 5px;
}
.item-news .info h3 a:hover {
  color: var(--color-main);
}
.item-news .info .author-date {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-time-tab);
}
.item-news .info .author-date .name {
  color: var(--color-main-5);
  text-decoration: none;
}
.item-news .info .author-date .name:hover {
  color: var(--color-main);
}
.item-news .info .author-date .date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-min);
  color: #777;
}
.item-news .info .author-date .date .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-news .info .author-date .date .icon svg path {
  fill: #777;
}
.item-news.first {
  position: relative;
  aspect-ratio: 357/245;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.item-news.first span.no-image {
  width: 100%;
  height: 100%;
}
.item-news.first:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 1;
  background: linear-gradient(to top, #000, transparent);
}
.item-news.first .img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  text-decoration: none;
}
.item-news.first .info {
  width: auto;
  position: absolute;
  padding-left: 0;
  bottom: 15px;
  left: 15px;
  right: 15px;
  z-index: 2;
  color: var(--color-white);
}
.item-news.first .info h3 a,
.item-news.first .info .name,
.item-news.first .info .time {
  color: var(--color-white);
}
.item-news.first .info .tag {
  background-color: var(--color-white);
}
.item-news.first .info .tag:hover {
  background-color: var(--color-main);
}
.item-news.first .info h3 a {
  font-weight: 600;
}
.item-news.first .info .author-date {
  justify-content: flex-start;
  gap: 30px;
}
.item-news.first .info .author-date .date {
  color: var(--color-white);
}
.item-news.first .info .author-date .date .icon svg path {
  fill: var(--color-white);
}
@media (min-width: 768px) {
  .item-news {
    margin-bottom: 0;
  }
  .item-news .img {
    aspect-ratio: unset;
    width: 30%;
    height: 100%;
    text-decoration: none;
  }
  .item-news .img span.no-image {
    width: 100%;
    height: 100%;
  }
  .item-news .info .author-date {
    justify-content: flex-start;
    gap: 15px;
  }
  .item-news .info .author-date span {
    font-size: 1.4rem;
  }
  .item-news .info h3 a {
    font-size: 1.6rem;
  }
  .item-news .info .time,
  .item-news .info .name {
    font-size: 1.4rem;
  }
  .item-news.first {
    aspect-ratio: unset;
    margin-bottom: 0;
  }
  .item-news.first .img {
    aspect-ratio: 1;
  }
  .item-news.first .info h3 a {
    font-size: 1.8rem;
  }
  .item-news.first .info .time,
  .item-news.first .info .name {
    font-size: 1.4rem;
  }
  .item-news.first .info .author-date span {
    font-size: 1.4rem;
  }
}

.item-news-2 {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin-bottom: 15px;
}
.item-news-2 .img {
  aspect-ratio: 153/103;
  display: block;
  text-decoration: none;
}
.item-news-2 .img span.no-image {
  width: 100%;
  height: 100%;
}
.item-news-2 .img img {
  object-fit: cover;
  width: 100% !important;
  height: 100%;
}
.item-news-2 .info {
  padding: 10px 0;
}
.item-news-2 .info .tag {
  text-decoration: none;
  color: #777;
  font-size: var(--fs-min-2);
  border: 1px solid var(--color-border);
  display: inline-block;
  padding: 2px 5px;
  border-radius: 30px;
  font-weight: 400;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  margin-bottom: 5px;
}
.item-news-2 .info .tag:hover {
  color: var(--color-white);
  background: var(--color-main);
  border-color: var(--color-main);
}
.item-news-2 .info h3 a {
  color: var(--color);
  font-size: var(--fs-text-tab);
  font-weight: 400;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 10px;
}
.item-news-2 .info h3 a:hover {
  color: var(--color-main);
}
.item-news-2 .info .author-date {
  font-size: var(--fs-min);
}
.item-news-2 .info .author-date .name {
  color: var(--color-main-5);
  margin-bottom: 5px;
  text-decoration: none;
}
.item-news-2 .info .author-date .date {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777;
}
.item-news-2 .info .author-date .date .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-news-2 .info .author-date .date .icon svg path {
  fill: #777;
}
@media (min-width: 768px) {
  .item-news-2 .info .author-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
  }
  .item-news-2 .info .author-date .name {
    margin-bottom: 0;
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .item-news-2 .info .author-date {
    font-size: 1.4rem;
  }
  .item-news-2 .info .author-date .name {
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  .item-news-2 .img {
    border-radius: 8px;
    overflow: hidden;
    display: block;
    width: 100%;
    text-decoration: none;
  }
  .item-news-2 .img span.no-image {
    margin: auto;
    width: 100%;
    height: 100%;
  }
  .item-news-2 .img img {
    display: block;
  }
}

.slide-block-view {
  padding-left: 15px;
}
.slide-block-view .item-news-2 .info {
  padding: 10px;
}
@media (min-width: 768px) {
  .slide-block-view {
    padding-left: 0;
  }
}

.list-news {
  display: flex;
  padding-left: 15px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.list-news::-webkit-scrollbar {
  display: none;
}
.list-news {
  scroll-snap-type: x mandatory;
  gap: 15px;
}
.list-news .item {
  min-width: 323px;
  margin-bottom: 0;
}

.tag-news {
  border-bottom: 1px solid var(--color-border);
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.tag-news .name {
  font-weight: 700;
}
.tag-news .list-tag {
  width: calc(100% - 45px);
  overflow-x: auto;
  display: flex;
  gap: 15px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tag-news .list-tag::-webkit-scrollbar {
  display: none;
}
.tag-news .list-tag .item {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .tag-news {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .tag-news .list-tag {
    overflow-x: unset;
    flex-wrap: wrap;
    display: flex;
    gap: 15px;
  }
}

.item-tag {
  border-radius: 4px;
  background: #f5f5f5;
  padding: 5px 15px;
  font-size: var(--fs-time-tab);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
}
.item-tag:hover {
  background: var(--color-main);
  color: var(--color-white);
}

.blog-detail-block h1 {
  color: var(--color-text);
  font-size: var(--fs-title-main);
  margin-bottom: 10px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .blog-detail-block h1 {
    padding-bottom: 0;
  }
}
.blog-detail-block .name-author {
  color: var(--color-main-5);
  margin-bottom: 5px;
  font-size: var(--fs-min-2);
  font-weight: 400;
  text-decoration: none;
}
.blog-detail-block .date-time {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 5px;
  font-size: var(--fs-min-2);
}
.blog-detail-block .date-time p {
  line-height: 1.2;
}
.blog-detail-block .date-time .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1400px) {
  .blog-detail-block .flex-2-item .item {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .blog-detail-block .flex-2-item .item {
    width: calc((100% - 10px) / 2);
  }
}

@media (min-width: 768px) {
  .date-detail {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .date-detail .date-time,
  .date-detail .name-author {
    margin-bottom: 0;
    font-size: 1.4rem;
  }
}

.list-product-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
@media (min-width: 768px) {
  .list-product-suggest {
    gap: 15px;
  }
  .list-product-suggest .item {
    width: calc((100% - 60px) / 5);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .list-product-suggest {
    justify-content: center;
  }
  .list-product-suggest .item {
    width: calc((100% - 30px) / 3);
  }
}

.item-author {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.item-author:last-child {
  margin-bottom: 0;
}
.item-author .img {
  width: 40%;
  aspect-ratio: 144/99;
  border-radius: 6px;
  overflow: hidden;
}
.item-author .img img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}
.item-author .info {
  width: 60%;
  padding-left: 15px;
}
.item-author .info h3 a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-text-tab);
  font-weight: 700;
  margin-bottom: 5px;
}
.item-author .info .desc {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
@media (min-width: 768px) {
  .item-author {
    flex-direction: column;
  }
  .item-author .img,
  .item-author .info {
    width: 100%;
  }
  .item-author .info {
    padding-left: 0;
    padding-top: 15px;
  }
}

.avatar {
  border-radius: 12px;
  overflow: hidden;
}
.avatar img {
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .avatar {
    float: left;
    width: 50%;
    margin-right: 30px;
  }
}

@media (min-width: 768px) {
  .list-author {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .list-author .item {
    width: calc((100% - 30px) / 3);
  }
}

.data-list-content-by-author .btn-center {
  width: 100%;
}

.item-news-3 .img {
  border-radius: 8px;
  overflow: hidden;
  display: block;
  margin-bottom: 15px;
}
.item-news-3 .img img {
  display: block;
  height: 100%;
  object-fit: cover;
}
.item-news-3 .info h3 a {
  color: var(--color-text);
  font-size: var(--fs-title-main);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 10px;
  display: block;
}
.item-news-3 .info .author-date {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}
.item-news-3 .info .author-date .name {
  color: var(--color-main-5);
  text-decoration: none;
}
.item-news-3 .info .author-date .date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.item-news-3 .info .desc {
  text-align: justify;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

@media (min-width: 768px) {
  .item-news-2.first {
    width: 100%;
    display: flex;
  }
  .item-news-2.first .img {
    width: 40%;
    margin-bottom: 0;
  }
  .item-news-2.first .info {
    width: 60%;
    padding-left: 30px;
  }
  .item-news-2.first .info h3 a {
    font-weight: 700;
    font-size: var(--fs-title-main);
  }
}

.item-sale {
  margin-bottom: 15px;
  position: relative;
}
.item-sale .img {
  display: block;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}
.item-sale .img img {
  display: block;
}
.item-sale .link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.item-sale h3 a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-text-tab);
  font-weight: 700;
}
@media (min-width: 768px) {
  .item-sale {
    margin-bottom: 0;
  }
  .item-sale .img {
    aspect-ratio: 636/291;
    text-decoration: none;
  }
  .item-sale .img .no-image {
    width: 100%;
    height: 100%;
  }
  .item-sale p {
    font-weight: 700;
    font-size: 2rem;
  }
  .item-sale p a {
    font-weight: 700;
    font-size: 2rem;
    text-decoration: none;
    color: var(--color-text);
  }
  .item-sale:hover p a {
    color: var(--color-main);
  }
}

@media (min-width: 768px) {
  .list-sale {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .list-sale .item {
    width: calc((100% - 15px) / 2);
  }
}

.fillter-product-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fillter-product-suggest .select-deal,
.fillter-product-suggest .price-select {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f0f0f0;
  padding: 3px 10px;
}
.fillter-product-suggest .select-deal {
  flex: 1;
  position: relative;
}
.fillter-product-suggest .select-deal select {
  flex: 1;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  outline: none;
}
.fillter-product-suggest .select-deal svg {
  position: absolute;
  right: 15px;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}
.fillter-product-suggest .price-select {
  width: 65px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fillter-product-suggest .price-select span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.total-price-block {
  border-top: 1px solid var(--color-border);
}
.total-price-block .price-text {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: var(--fs-title-tab);
}
.total-price-block .btn-gradient {
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  display: block;
}
@media (min-width: 768px) {
  .total-price-block {
    border-top: 0;
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
  }
  .total-price-block .price-text {
    margin-bottom: 0;
    gap: 15px;
  }
  .total-price-block .btn-gradient {
    padding-left: 30px;
    padding-right: 30px;
    width: auto;
  }
}

.item-cart {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.item-cart .img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 68px;
  text-decoration: none;
}
.item-cart .img span {
  font-size: 13px;
}
.item-cart .img .free-ship {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.item-cart .img .free-ship img {
  width: 100% !important;
}
.item-cart .info {
  flex: 1;
}
.item-cart .info h3 a {
  font-size: var(--fs-text-tab);
  text-decoration: none;
  color: var(--color-text);
  display: block;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .item-cart .info h3 a {
    font-weight: 500;
  }
}
.item-cart .info h3 a:hover {
  color: var(--color-main);
}
.item-cart .info .price-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .item-cart .info .price-quantity {
    flex-wrap: wrap;
    justify-content: start;
  }
}
.item-cart .info .price-quantity .price p {
  color: var(--color-main);
  font-weight: 700;
  font-size: var(--fs-text-tab);
}
.item-cart .info .price-quantity .price p span {
  color: #7a7a7a;
}
.item-cart .info .price-quantity .price p.old {
  font-weight: 400;
  color: #7a7a7a;
  text-decoration: line-through;
}
.item-cart .info .price-quantity > span {
  margin-left: auto;
  margin-right: 10px;
}
@media (max-width: 767px) {
  .item-cart .info .price-quantity > span {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .item-cart .info .price-quantity .note-stock-pickamct {
    width: 100%;
    text-align: left;
  }
}
.item-cart .info .item-gift .no-image {
  font-size: 11px;
}
.item-cart .delete {
  width: 20px;
  margin-top: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-block {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #dad7d7;
  background: #f9fafb;
}
.quantity-block .input {
  width: 45px;
  height: 30px;
  border-left: 1px solid #dad7d7;
  border-right: 1px solid #dad7d7;
}
@media (max-width: 767px) {
  .quantity-block .input {
    height: 25px;
  }
}
.quantity-block .input input {
  text-align: center;
  width: 100%;
  height: 100%;
  border: 0;
  padding-left: 0;
  text-align: center;
}
.quantity-block .minus,
.quantity-block .plus {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .quantity-block .minus,
  .quantity-block .plus {
    width: 25px;
    height: 25px;
  }
}

@media (min-width: 768px) {
  .table-cart {
    width: 100%;
    border-collapse: collapse;
  }
  .table-cart thead {
    background-color: #f0f0f0;
    height: 44px;
    line-height: 44px;
  }
  .table-cart thead tr th {
    font-weight: 700;
  }
  .table-cart thead tr th:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    padding-left: 15px;
    text-align: left;
  }
  .table-cart thead tr th:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .table-cart thead tr th:not(:first-child) {
    text-align: center;
  }
  .table-cart tbody tr {
    border-bottom: 1px solid var(--color-border);
  }
  .table-cart tbody tr td {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
  }
  .table-cart tbody tr td:not(:first-child) {
    text-align: center;
  }
}

.item-gift {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}
.item-gift input {
  display: none;
}
.item-gift .checkmark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  position: relative;
}
.item-gift .checkmark:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--color-main);
  z-index: 1;
  opacity: 0;
}
.item-gift input:checked ~ .checkmark:after {
  opacity: 1;
}
.item-gift .img {
  width: 50px;
  height: 50px;
}
.item-gift .info-gift {
  flex: 1;
}
.item-gift .info-gift .name {
  font-size: var(--fs-min-2);
  line-height: 1.2;
  margin-bottom: 5px;
  text-decoration: none;
  color: #000;
}
.item-gift .info-gift .price-gift {
  display: flex;
  gap: 10px;
  font-size: var(--fs-min-2);
}
.item-gift .info-gift .price-gift p:nth-child(2), .item-gift .info-gift .price-gift span:nth-child(2) {
  font-weight: 700;
  color: var(--color-main);
}

.block-add-product-to-gift {
  font-size: var(--fs-size);
}
.block-add-product-to-gift .price-gift {
  text-align: right;
  font-size: var(--fs-size);
}
.block-add-product-to-gift .icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #d9d9d9;
  border-radius: 50%;
}
.block-add-product-to-gift .icon.main {
  background-color: var(--color-main);
}
.block-add-product-to-gift .icon.main svg path {
  fill: var(--color-white);
}

.process-gift {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .process-gift {
    margin-bottom: 5px;
  }
}
.process-gift .progress-bar {
  width: calc(100% - 31px);
  background: var(--color-main);
}
.process-gift .progress-container {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 767px) {
  .desc-gift-cart {
    margin-bottom: 5px;
  }
}
.popup-suggest-product,
.popup-suggest-gift {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70vh;
  z-index: 120;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.popup-suggest-product.active,
.popup-suggest-gift.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.popup-suggest-product .btn-close-popup-suggest-poduct,
.popup-suggest-product .btn-close-popup-suggest-gift,
.popup-suggest-gift .btn-close-popup-suggest-poduct,
.popup-suggest-gift .btn-close-popup-suggest-gift {
  position: absolute;
  top: 20px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-suggest-product .product-suggest,
.popup-suggest-gift .product-suggest {
  height: calc(70vh - 100px);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.popup-suggest-product .product-suggest::-webkit-scrollbar,
.popup-suggest-gift .product-suggest::-webkit-scrollbar {
  display: none;
}
.popup-suggest-product .product-suggest,
.popup-suggest-gift .product-suggest {
  overflow-y: auto;
}
.popup-suggest-product .product-suggest .list-product-index,
.popup-suggest-gift .product-suggest .list-product-index {
  padding-bottom: 15px;
}
.popup-suggest-product .product-suggest .list-product-index .btn-gradient,
.popup-suggest-gift .product-suggest .list-product-index .btn-gradient {
  height: 32px;
  line-height: 32px;
}
@media (min-width: 768px) {
  .popup-suggest-product,
  .popup-suggest-gift {
    left: 50%;
    top: 50%;
    right: unset;
    bottom: unset;
    width: calc(var(--w-container) - 30px);
    transform: translate(-50%, -40%);
    padding: 20px;
    height: unset;
    border-radius: 20px;
  }
  .popup-suggest-product .container,
  .popup-suggest-gift .container {
    width: 100%;
  }
  .popup-suggest-product.active,
  .popup-suggest-gift.active {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: all;
  }
  .popup-suggest-product .list-product-index .item,
  .popup-suggest-gift .list-product-index .item {
    width: calc((100% - 60px) / 5);
  }
  .popup-suggest-product .item-product .info,
  .popup-suggest-gift .item-product .info {
    min-height: auto;
    padding-bottom: 0;
  }
}

.popup-suggest-gift .product-suggest {
  height: calc(90vh - 60px);
}

@media (max-width: 767px) {
  .cart-block .py-block {
    padding-top: 15px;
    padding-bottom: 0;
  }
  .cart-block .list-cart-block .item-cart {
    padding: 15px 0;
    border-bottom: 1px solid #D2D2D2;
  }
  .cart-block .list-cart-block .item-cart:first-child {
    padding-top: 0;
  }
  .cart-block .list-cart-block .item-cart .img span.no-image {
    width: 100%;
    height: 100%;
  }
  .cart-block .list-cart-block .item-cart .delete {
    width: 40px;
  }
  .cart-block .total-price-block {
    border-top: none;
    padding-bottom: 15px;
  }
  .cart-block .total-price-block .price-text {
    font-size: 16px;
  }
}
.cart-block .skeleton {
  aspect-ratio: 1290/250;
}

.popup-coupons {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.popup-coupons > .action {
  padding: 15px 20px;
  margin-top: 0;
}
.popup-coupons .item-coupons {
  margin-bottom: 15px;
}
.popup-coupons .item-coupons h3, .popup-coupons .item-coupons p, .popup-coupons .item-coupons .time {
  font-size: 15px;
}
.popup-coupons .item-coupons .action {
  padding: 0;
  margin: 0;
}
.popup-coupons .view-all-index {
  width: 100%;
}

@media (max-width: 767px) {
  .form-payment .title-main:first-child {
    padding-top: 0;
  }
}
.item-payment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}
.item-payment input {
  display: none;
}
.item-payment .check-input {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  margin-top: 3px;
}
.item-payment .check-input:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  border: 5px solid #d40000;
  border-radius: 50%;
  opacity: 0;
}
.item-payment input:checked ~ .check-input {
  border-color: #d40000;
}
.item-payment input:checked ~ .check-input:after {
  opacity: 1;
}
.item-payment .txt {
  flex: 1;
}

.form-payment .title-main {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.form-payment .title-main.no-border {
  border-bottom: 0;
}
.form-payment .block-form > .input {
  width: 100%;
  margin-bottom: 15px;
  height: initial;
}
.form-payment .block-form > .input input,
.form-payment .block-form > .input select {
  height: 41px;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
}
.form-payment .textarea {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden;
}
.form-payment .textarea textarea {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  padding-left: 15px;
  padding-top: 15px;
  resize: none;
}
.form-payment .item-cart {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.form-payment .item-cart .img {
  width: 77px;
  height: 77px;
}
.form-payment .item-cart .info .quantity-block {
  border-radius: 0;
  border: transparent;
  background: #fff;
}
.form-payment .item-cart .info .input {
  margin-bottom: 0;
  height: inherit;
  background: #fff;
  border: none;
}
.form-payment .item-cart .info .input input {
  background: #fff;
}
.form-payment .total-price-form {
  list-style: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 15px;
}
.form-payment .total-price-form li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.form-payment .total-price-form li:last-child {
  margin-bottom: 0;
}
.form-payment .total-price-form li p:first-child {
  white-space: nowrap;
  padding-right: 10px;
}
.form-payment .total-price-form .check-voucher {
  display: flex;
  align-items: center;
}
.form-payment .total-price-form .check-voucher .input-voucher {
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 4px 0px 0px 4px;
  overflow: hidden;
}
.form-payment .total-price-form .check-voucher .input-voucher input {
  height: 100%;
  width: 100%;
  border: 0;
}
.form-payment .total-price-form .check-voucher .btn-check {
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
}
.form-payment .btn-submit {
  width: 100%;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .form-payment {
    display: flex;
    gap: 15px;
  }
  .form-payment .left {
    width: calc(70% - 15px);
  }
  .form-payment .right {
    width: 30%;
  }
}

.list-voucher {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
.list-voucher .item {
  width: calc((100% - 15px) / 2);
}

.it-voucher {
  border-radius: 6px;
  border: 1px solid #dad7d7;
  background: #f9fafb;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
}
.it-voucher .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.it-voucher:hover {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
}
.it-voucher:hover .icon svg path {
  fill: var(--color-white);
}

.total-cart {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.total-cart span {
  font-size: 14px;
  line-height: 1;
}

.popup-login {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.wrapper-login {
  width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .wrapper-login {
    width: 100%;
  }
}
.wrapper-login .tab-content {
  padding: 15px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .wrapper-login .tab-content {
    padding: 15px;
  }
}
.wrapper-login .tab-content > div {
  display: none;
}
.wrapper-login .tab-content > div.active {
  display: block;
}
.wrapper-login .nav-tab {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.wrapper-login .nav-tab .item {
  background: #fff;
  line-height: 50px;
  font-size: var(--fs-text);
  text-align: center;
  display: block;
  width: 50%;
  color: #fff;
  float: left;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-main-linear-gradient);
}
.wrapper-login .nav-tab .item.active {
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  background: #fff;
}
.wrapper-login .nav-tab .item:nth-child(2).active {
  border-right: 0;
  border-left: 1px solid #dadada;
}
.wrapper-login .nav-tab.nav-tab-full .item {
  width: 100%;
}
.wrapper-login .checkbox label {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  font-size: 14px;
}
.wrapper-login .checkbox input {
  border: 1px solid var(--color-border);
  width: 16px;
  height: 16px;
  border-radius: 1px;
  margin-right: 10px;
  margin-top: 3px;
}
.wrapper-login .checkbox .note-register {
  width: calc(100% - 30px);
}
.wrapper-login .checkbox .note-register a {
  color: #0A62F4;
  text-decoration: none;
}

.close-login {
  background: #fff;
  cursor: pointer;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  top: -17px;
  right: -15px;
  box-shadow: 0 0 7px rgb(0, 0, 0);
}
@media (max-width: 767px) {
  .close-login {
    top: -45px;
    right: 15px;
  }
}
.close-login:before {
  content: "";
  width: 70%;
  height: 1px;
  position: absolute;
  transform: rotate(45deg);
  background: #333;
  top: 16px;
  left: 6px;
}
.close-login:after {
  content: "";
  width: 70%;
  height: 1px;
  position: absolute;
  transform: rotate(-45deg);
  background: #333;
  top: 16px;
  left: 6px;
}

.from-login .form-group {
  display: flex;
  position: relative;
  margin-bottom: 15px;
}
.from-login .form-group ._input {
  width: 100%;
}
.from-login .form-group ._input input {
  height: 41px;
  width: 100%;
  background: #fff;
  border: 1px solid #DDD;
  padding-left: 15px;
  border-radius: 4px;
  font-size: 14px;
}
.from-login .form-group ._input input:disabled {
  background: #f1f1f1;
}
.from-login .form-group ._input input::placeholder {
  font-size: 14px;
}
.from-login .form-group ._input input:focus {
  outline: none;
}
.from-login .form-group ._input._select {
  display: flex;
  gap: 10px;
}
.from-login .form-group ._input._select select {
  height: 41px;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding-left: 10px;
  font-size: 14px;
}
.from-login .form-group ._input._select select:focus {
  outline: none;
}
.from-login .form-group ._input._select select:last-child {
  margin-right: 0;
}
.from-login .form-group.form-radio {
  gap: 15px;
  justify-content: space-between;
}
.from-login .form-group.form-radio .radio-inline {
  width: calc((100% - 30px) / 3);
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
.from-login .form-group.form-radio .radio-inline input {
  margin-right: 0;
}
.from-login .form-group.form-radio .radio-inline span {
  margin-left: 0;
  font-size: 15px;
  white-space: nowrap;
  color: var(--color-text);
}
.from-login .form-group a {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 38px;
  background: #05b1f1;
  color: #ffffff;
  padding: 0 10px;
  border-radius: 0 3px 3px 0;
}
.from-login .form-group label.error {
  font-size: 14px;
  color: red;
  margin-bottom: 0;
  font-weight: 400;
}
.from-login .form-group label:not(.error) {
  width: 30%;
  margin: 0;
  padding-top: 12px;
}
.from-login .form-group label:not(.error) > span {
  color: red;
}
.from-login .form-group label:not(.error) > span.text {
  color: silver;
  font-size: 11px;
}
.from-login .form-group label.checkbox_acc {
  margin-left: 30%;
  width: 70%;
}
.from-login .form-group.form-radio label:not(.error) {
  padding-top: 0;
}
.from-login .form-group.form-radio input {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  opacity: 1;
}
.from-login .form-group.form-radio input + span {
  display: block;
  margin-left: 7px;
}
.from-login .form-group.form-date label:not(.error) {
  padding-top: 0;
}
.from-login .form-group.form-date select {
  width: calc((100% - 10px) / 3);
}
.from-login .form-group.form-date input {
  width: calc(26.6666666667% - 7px);
}
.from-login .form-group.form-date input:nth-child(3) {
  margin: 0 10px;
}
@media (max-width: 991px) {
  .from-login .form-group.form-date input {
    width: 100%;
  }
}
.from-login.frm-edit .form-group {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .from-login.frm-edit .form-group {
    flex-direction: column;
  }
}
.from-login.frm-edit .form-group label:not(.error) {
  padding-top: 0;
}
@media (max-width: 767px) {
  .from-login.frm-edit .form-group label:not(.error) {
    display: block;
    margin-bottom: 5px;
  }
}
.from-login.frm-edit .form-group .gt-norn .radio-inline .checkmark:after {
  background: var(--main-color);
}
.from-login.frm-edit .action a {
  background: var(--color-main-linear-gradient);
  height: 46px;
  border-radius: 4px;
  border: initial;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
  font-size: var(--fs-text);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.from-login > span {
  width: 100%;
  float: right;
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
}
.from-login > span a {
  color: #006abf;
}
.from-login > span .forgot_password {
  color: #006abf;
  cursor: pointer;
}
.from-login button {
  background: var(--color-main-linear-gradient);
  height: 46px;
  border-radius: 4px;
  border: initial;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
  font-size: var(--fs-text);
  cursor: pointer;
}
.from-login button:last-child {
  margin-bottom: 0;
}

.alrt-login,
.alrt-regis,
.alrt-contact,
.alrt-cmt,
.alrt-rate,
.alrt-change {
  clear: both;
  text-align: center;
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
  display: none;
}
.alrt-login.text-success,
.alrt-regis.text-success,
.alrt-contact.text-success,
.alrt-cmt.text-success,
.alrt-rate.text-success,
.alrt-change.text-success {
  color: #4CAF50;
}

.alrt-lostpass {
  text-align: center;
  clear: both;
  color: red;
  display: none;
}
.alrt-lostpass .text {
  text-align: center;
}
.alrt-lostpass .coundown {
  display: none;
}
.alrt-lostpass.active {
  display: block;
}
.alrt-lostpass.text-success {
  color: green;
}
.alrt-lostpass.text-success .coundown {
  display: block;
  color: #333;
}

.lookup-system .filter-system.lookup-order.form-forgot form {
  width: 400px;
  margin: auto;
  flex-direction: column;
}
.lookup-system .filter-system.lookup-order.form-forgot form .input, .lookup-system .filter-system.lookup-order.form-forgot form .select {
  width: 100%;
}
.lookup-system .filter-system.lookup-order.form-forgot form .button {
  width: 100%;
}
.lookup-system .filter-system.lookup-order.form-forgot .validation-summary-errors {
  width: 400px;
  margin: auto;
}
.lookup-system .filter-system.lookup-order.form-forgot .validation-summary-errors ul {
  padding-top: 15px;
  padding-left: 15px;
}
.lookup-system .filter-system.lookup-order.form-forgot .validation-summary-errors ul li {
  color: red;
  font-size: 14px;
  padding-bottom: 5px;
}

#send-infor input, #send-infor select {
  font-size: var(--fs-text);
}
#send-infor input::placeholder, #send-infor select::placeholder {
  font-size: var(--fs-text);
}
#send-infor input.error, #send-infor textarea.error {
  border: 1px solid red !important;
}
#send-infor label.error {
  color: red;
  top: 0;
  right: 5px;
  position: absolute;
  float: none;
  width: auto;
  font-size: 12px;
  font-weight: normal;
  margin: auto;
}
#send-infor .form-group {
  position: relative;
}
@media (max-width: 767px) {
  #send-infor .form-group {
    flex-direction: column;
  }
  #send-infor .form-group label:not(.error) {
    margin-bottom: 5px;
    width: 100%;
  }
  #send-infor .form-group label.checkbox_acc {
    margin-left: 0;
  }
}
#send-infor .form-group .gt-norn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#send-infor .form-group .gt-norn .radio-inline {
  font-size: var(--fs-text);
}
@media (max-width: 767px) {
  #send-infor .form-group .gt-norn .radio-inline {
    width: initial;
  }
}

.section-sideaccount {
  gap: 15px;
  position: relative;
}
@media (min-width: 768px) {
  .section-sideaccount .left-side {
    padding-top: 0;
    background: #fff;
    border-radius: 7.5px;
  }
  .section-sideaccount .left-side .side-account {
    position: sticky;
    top: calc(var(--h-header) + 65px);
  }
}
.section-sideaccount .main-module {
  padding-left: 15px;
  box-shadow: 0 0 10px -9px #333;
}
.section-sideaccount .main-module.main-history {
  box-shadow: none;
  padding: 0;
  border-left: none;
}
.section-sideaccount .main-module.main-history .bg-white {
  box-shadow: 0 0 10px -9px #333;
}
.section-sideaccount .main-module .from-login .form-group label.checkbox_acc {
  margin-left: 23%;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil {
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block .order-code {
  color: var(--color-main);
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block .suppend-order {
  background: #ffc107;
  color: #333;
  border-radius: 4px;
  font-weight: 400;
  font-size: 13px;
  padding: 2.5px 10px;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block .success-order {
  background: #6ebb88;
  color: #fff;
  border-radius: 4px;
  font-weight: 400;
  font-size: 13px;
  padding: 2.5px 10px;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block .cancel-order {
  background: #f37970;
  color: #fff;
  border-radius: 4px;
  font-weight: 400;
  font-size: 13px;
  padding: 2.5px 10px;
}
.section-sideaccount .main-module .main-account .infac-rght .detailbil .timebil {
  font-size: 15px;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .detailbil {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .section-sideaccount .main-module .main-account .infac-rght .detailbil .title-main-block {
    justify-content: start;
    font-size: var(--fs-title-tab);
  }
  .section-sideaccount .main-module .main-account .infac-rght .detailbil .timebil {
    font-size: 13px;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action a svg {
  fill: #006abf;
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action .cancel-order {
  height: 35px;
  border-radius: 5px;
  background: var(--color-main-4);
  color: #fff;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action .cancel-order .cancel-order__cancel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.section-sideaccount .main-module .main-account .infac-rght .flex-action .cancel-order svg {
  fill: #fff;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .timeline-order {
    padding: 0;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .lst-inftran .itemtransb {
  background: #f1f1f1;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .lst-inftran {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .section-sideaccount .main-module .main-account .infac-rght .lst-inftran .itemtransb .txt-ittransb {
    padding: 10px 0 0 0;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table {
  border-collapse: collapse;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr th {
  background: #f1f1f1;
  border: none;
  font-weight: 600;
  white-space: nowrap;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr th:nth-of-type(1) {
  border-radius: 6px 0 0 6px;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr th:nth-of-type(1) {
    border-radius: 6px;
    text-align: left;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td {
  border-bottom: 1px solid #f1f1f1;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td {
    padding: 10px 0;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .img-ittable span.no-image {
  width: 100%;
  height: 100%;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .txt-ittable p {
  font-size: 14px;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .txt-ittable span {
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .txt-ittable {
    width: calc(100% - 72px);
    padding-left: 10px;
  }
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .txt-ittable p, .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .txt-ittable span {
    font-size: 13px;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .list-gift {
  position: relative;
  margin-top: 15px;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .list-gift:before {
  content: "";
  border: 7px solid transparent;
  border-bottom: 7px solid #f1f1f1;
  position: absolute;
  left: 9px;
  top: -14px;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .list-gift p {
  font-size: 13px;
  font-weight: 400;
  position: relative;
  padding: 5px 5px 5px 30px;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  border-bottom: 1px solid white;
  display: block;
  background: #f1f1f1;
  text-align: left;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .list-gift p a {
  color: #333;
  text-decoration: none;
  text-align: left;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .list-gift p svg {
  position: absolute;
  left: 10px;
  top: 8px;
  fill: var(--color-main);
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:first-child {
  padding-left: 0;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:first-child {
    padding-right: 0;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:nth-of-type(2) {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-main);
  vertical-align: top;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:nth-of-type(2) span {
  font-weight: 400;
  white-space: nowrap;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:nth-of-type(2) span.quality {
  color: #333;
}
.section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td:nth-of-type(2) .rebuy {
  font-size: 13px;
  color: #006abf;
  font-weight: 400;
  text-decoration: none;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .price-item {
    clear: both;
    font-weight: 600;
    color: var(--color-main);
    font-size: 13px;
  }
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .price-item span {
    font-weight: 400;
  }
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .price-item .quality {
    color: #333;
  }
  .section-sideaccount .main-module .main-account .infac-rght .tabitem table tr td .price-item .rebuy {
    color: #006abf;
    font-weight: 400;
    text-decoration: none;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .gtittb p {
  font-size: 14px;
}
.section-sideaccount .main-module .main-account .infac-rght .gtittb p span {
  font-weight: 600;
  font-size: 16px;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .gtittb p span {
    font-size: 14px;
  }
}
.section-sideaccount .main-module .main-account .infac-rght .gtittb p:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .gtittb {
    padding: 10px 0;
    margin-bottom: 0;
  }
  .section-sideaccount .main-module .main-account .infac-rght .gtittb p {
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .section-sideaccount .main-module .main-account .infac-rght .gobbil {
    display: flex;
    justify-content: center;
    gap: 10px;
    background: var(--color-main-linear-gradient);
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
  }
  .section-sideaccount .main-module .main-account .infac-rght .gobbil svg {
    fill: #fff;
  }
}
.section-sideaccount.offer .main-module {
  padding: 0;
  box-shadow: none;
  border-left: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-sideaccount .left-side {
    width: 35%;
  }
  .section-sideaccount .main-module {
    width: 65%;
  }
  .section-sideaccount .main-module .form-group {
    gap: 10px;
  }
}

.current-account {
  background: var(--color-main-5);
  border-radius: 7.5px;
  display: flex;
  gap: 10px;
  padding: 10px;
  align-items: start;
  margin-bottom: 15px;
  position: relative;
  flex-wrap: wrap;
  row-gap: 5px;
}
@media (max-width: 767px) {
  .current-account {
    align-items: center;
  }
}
.current-account .img {
  width: 50px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  margin-top: 5px;
}
.current-account .infor {
  color: #fff;
}
.current-account .infor .type-membership {
  position: absolute;
  top: 21px;
  right: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}
.current-account .infor .type-membership span {
  font-size: 12px;
  color: #333;
}
.current-account .infor .type-membership svg {
  height: 30px;
}
.current-account .infor .type-membership.diamond {
  padding: 0;
}
.current-account .infor .type-membership.diamond svg {
  height: 35px;
  fill: #a1a1a1;
}
.current-account .total-bought, .current-account .process-bought {
  width: 100%;
  color: #fff;
  line-height: 1;
  font-size: 14px;
  margin-top: 5px;
}
.current-account .total-bought {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.current-account .process-bought {
  height: 7px;
  border-radius: 7px;
  border: 1px solid #fff;
  position: relative;
}
.current-account .process-bought span {
  position: absolute;
  height: 100%;
  background: #fff;
  left: 0;
  top: 0;
  border-radius: 7px;
}
.current-account.white {
  background: url(/html/style/images/bg-member.jpg);
  background-size: cover;
}
.current-account.white .img {
  background: #a1a1a1;
}
.current-account.white .img svg {
  stroke: #fff;
}
.current-account.white .infor {
  color: #fff;
}
.current-account.white .infor .type-membership svg {
  fill: #fff;
}
@keyframes silverShine {
  0% {
    box-shadow: 0 0 5px #c0c0c0;
  }
  50% {
    box-shadow: 0 0 15px #f5f5f5;
  }
  100% {
    box-shadow: 0 0 5px #c0c0c0;
  }
}
.current-account.silver {
  background: url(/html/style/images/bg-silver.jpg);
  background-size: cover;
}
.current-account.silver .img {
  background: #a1a1a1;
}
.current-account.silver .img svg {
  stroke: #fff;
}
.current-account.silver .infor {
  color: #fff;
}
.current-account.silver .infor .type-membership svg {
  fill: #fff;
}
.current-account.gold {
  background: url(/html/style/images/bg-gold.jpg);
  background-size: cover;
}
.current-account.gold .img {
  background: #a1a1a1;
}
.current-account.gold .img svg {
  stroke: #fff;
}
.current-account.gold .infor {
  color: #fff;
}
.current-account.gold .infor .type-membership svg {
  fill: #fff;
}
.current-account.diamond {
  background: url(/html/style/images/bg-diamond.jpg);
  background-size: cover;
}
.current-account.diamond .img {
  background: #a1a1a1;
}
.current-account.diamond .img svg {
  stroke: #fff;
}
.current-account.diamond .infor {
  color: #fff;
}
.current-account.diamond .infor .type-membership svg {
  fill: #fff;
}

.nav-account {
  padding: 0 10px;
}
.nav-account .item a, .nav-account .item .log-out {
  display: flex;
  text-decoration: none;
  align-items: center;
  color: var(--color-text);
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}
.nav-account .item a .icon, .nav-account .item .log-out .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-account .item a .icon svg, .nav-account .item .log-out .icon svg {
  height: 30px;
  width: 30px;
}
.nav-account .item a .icon .active, .nav-account .item .log-out .icon .active {
  display: none;
}
.nav-account .item a span, .nav-account .item .log-out span {
  width: calc(100% - 40px);
}
.nav-account .item a:hover, .nav-account .item .log-out:hover {
  background: var(--color-main-linear-gradient);
}
.nav-account .item a:hover .icon svg, .nav-account .item .log-out:hover .icon svg {
  display: none;
}
.nav-account .item a:hover .icon svg.active, .nav-account .item .log-out:hover .icon svg.active {
  display: block;
}
.nav-account .item a:hover span, .nav-account .item .log-out:hover span {
  color: #fff;
}
.nav-account .item.active a {
  background: var(--color-main-linear-gradient);
}
.nav-account .item.active a .icon svg {
  display: none;
}
.nav-account .item.active a .icon svg.active {
  display: block;
}
.nav-account .item.active a span {
  color: #fff;
}
@media (max-width: 767px) {
  .nav-account .item .log-out {
    padding: 5px;
    margin-bottom: 0;
  }
  .nav-account .item .log-out .icon {
    width: 35px;
    height: 30px;
  }
}

.alrt-info {
  color: rgb(218, 32, 50);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0;
}
.alrt-info.text-success {
  color: green;
}

.my-order {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.my-order .item-order {
  text-decoration: none;
  background: #f1f1f1;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.my-order .item-order .item-order-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
}
.my-order .item-order .item-order-top .left-top {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #71717a;
}
@media (max-width: 767px) {
  .my-order .item-order .item-order-top .left-top {
    flex-direction: column;
    gap: 5px;
  }
  .my-order .item-order .item-order-top .left-top span {
    display: none;
  }
}
.my-order .item-order .item-order-top .left-top a {
  color: #71717a;
  text-decoration: none;
}
.my-order .item-order .item-order-top .left-top a strong {
  color: var(--color-main);
}
.my-order .item-order .item-order-top .right-top .cancel-order {
  background: #f37970;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 5px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-order .item-order .item-order-top .right-top .success-order {
  background: #6ebb88;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 5px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-order .item-order .item-order-top .right-top .suppend-order {
  background: #ffc107;
  color: #333;
  font-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 5px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-order .item-order .item-order-top .right-top .new-order {
  background: #20a8d8;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  padding: 0 5px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991px) {
  .my-order .item-order .item-order-top {
    gap: 10px;
  }
}
.my-order .item-order .first-product {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.my-order .item-order .first-product .left-bottom .item-product {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
}
.my-order .item-order .first-product .left-bottom .item-product .infor .name-product {
  font-weight: 600;
  font-size: 15px;
}
@media (max-width: 767px) {
  .my-order .item-order .first-product .left-bottom .item-product .infor .name-product {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  }
}
.my-order .item-order .first-product .left-bottom .item-product .infor .code-product {
  font-weight: 400;
  font-size: 14px;
}
.my-order .item-order .first-product .left-bottom .item-product .infor .price {
  font-weight: 700;
  color: var(--color-main);
}
.my-order .item-order .first-product .left-bottom .item-product .infor .more-order-detail {
  font-size: 14px;
  font-style: italic;
  color: #71717a;
}
.my-order .item-order .first-product .right-bottom {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
}
.my-order .item-order .first-product .right-bottom .total-money {
  font-size: 18px;
  color: var(--color-main);
  font-weight: 700;
}
.my-order .item-order .first-product .right-bottom .total-money b {
  font-weight: 600;
  color: var(--color-main);
  font-size: 16px;
}
.my-order .item-order .first-product .right-bottom .detail-history {
  display: flex;
  gap: 5px;
  font-size: 13px;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.my-order .item-order .first-product .right-bottom .detail-history:hover {
  color: var(--color-main);
}
.my-order .item-order .first-product .right-bottom .detail-history:hover svg path {
  stroke: var(--color-main);
}
@media (max-width: 767px) {
  .my-order .item-order .first-product {
    flex-direction: column;
  }
  .my-order .item-order .first-product .left-bottom, .my-order .item-order .first-product .right-bottom {
    width: 100%;
  }
  .my-order .item-order .first-product .left-bottom {
    padding-bottom: 5px;
  }
  .my-order .item-order .first-product .right-bottom {
    padding-top: 10px;
    border-top: 1px solid #fff;
    text-align: center;
    align-items: center;
  }
  .my-order .item-order .first-product .right-bottom .total-money span {
    font-weight: 400;
    color: #333;
  }
}
.my-order .empty-history {
  color: red;
}

.product-order .infor .name-product {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.product-order .infor .price {
  font-weight: 600;
  color: var(--color-main);
}
.product-order .infor .price .oldprice {
  font-weight: 400;
  font-size: 13px;
  color: #71717a;
  text-decoration: line-through;
}
.product-order .infor .other {
  font-size: 12px;
  color: #71717a;
}

.copy-ico {
  cursor: pointer;
}

.list-product-index .item .close-order {
  position: absolute;
  right: 4px;
  margin: auto;
  top: 5px;
  z-index: 10;
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 767px) {
  .section-sidebar .d-flex.section-sideaccount .left-side {
    display: block;
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account {
    display: flex;
    gap: 5px;
    padding: 0;
    flex-wrap: wrap;
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account::-webkit-scrollbar {
    height: 0;
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account .item {
    background: #fff;
    border-radius: 5px;
    width: calc((100% - 5px) / 2);
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account .item a {
    margin-bottom: 0;
    padding: 5px;
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account .item a .icon {
    width: 35px;
    height: 30px;
  }
  .section-sidebar .d-flex.section-sideaccount .left-side .nav-account .item a span {
    width: 100%;
    text-align: left;
    width: calc(100% - 40px);
    padding-left: 5px;
  }
  .list-coupons-account {
    margin-left: 0;
    overflow: initial;
    flex-direction: column;
  }
}
.grid-load-product .item-product {
  aspect-ratio: 247/410;
}
.grid-load-product .item-product.grid {
  aspect-ratio: initial;
}

.item-rank-acc {
  border-radius: 12px;
  overflow: hidden;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100px;
  width: 100%;
  transition: height 0.3s;
}
.item-rank-acc .it-rank {
  border: 1px solid var(--color-white);
  display: inline-block;
  border-radius: 30px;
  padding: 5px 20px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 10px;
}
.item-rank-acc .is-active, .item-rank-acc .is-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.2rem;
}
.item-rank-acc .info {
  color: #FFFEFD;
  display: none;
}
.item-rank-acc .info .user {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 5px;
}
.item-rank-acc .info .user .icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-rank-acc .info .user .name {
  font-weight: 700;
  font-size: 1.6rem;
  color: #FFFEFD;
}
.item-rank-acc .info .buy, .item-rank-acc .info .date-update, .item-rank-acc .info .max-buy {
  font-size: 1.2rem;
}
.item-rank-acc .info .wrapper-process {
  padding-top: 5px;
  padding-bottom: 5px;
}
.item-rank-acc .info .wrapper-process .progress-container {
  box-shadow: none;
  width: 100%;
}
.item-rank-acc.active {
  height: 193px;
}
.item-rank-acc.active.open .is-active, .item-rank-acc.active.open .is-lock {
  display: none;
}
.item-rank-acc.active.open .info {
  display: block;
}
.item-rank-acc.white {
  background: url(/html/style/images/bg-member.jpg) no-repeat;
  background-size: cover;
}
.item-rank-acc.silver {
  background: url(/html/style/images/bg-silver.jpg) no-repeat;
  background-size: cover;
}
.item-rank-acc.silver .progress-container {
  background: #a5a5a5;
}
.item-rank-acc.silver .progress-bar {
  background: #838383;
}
.item-rank-acc.gold {
  background: url(/html/style/images/bg-gold.jpg) no-repeat;
  background-size: cover;
}
.item-rank-acc.gold .progress-container {
  background: #E5CB7E;
}
.item-rank-acc.gold .progress-bar {
  background: #BA9329;
}
.item-rank-acc.diamond {
  background: url(/html/style/images/bg-diamond.jpg) no-repeat;
  background-size: cover;
}
.item-rank-acc.diamond .progress-container {
  background: #7e7e7e;
}
.item-rank-acc.diamond .progress-bar {
  background: #292929;
}

.slide-rank-acc .item {
  height: 193px;
  display: flex;
  align-items: center;
}
.slide-rank-acc .owl-item.center .item-rank-acc {
  height: 193px;
}
.slide-rank-acc .owl-item.center .item-rank-acc.open .is-active, .slide-rank-acc .owl-item.center .item-rank-acc.open .is-lock {
  display: none;
}
.slide-rank-acc .owl-item.center .item-rank-acc.open .info {
  display: block;
}

.content-detail-rank ul {
  padding-left: 20px;
}
.content-detail-rank .table-wrapper {
  overflow-x: auto;
}
.content-detail-rank .table-wrapper table {
  width: 100%;
}

.filter-history {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  background: #fff;
  padding: 15px;
  border-radius: 7.5px;
  position: sticky;
  top: 116px;
  z-index: 10;
  box-shadow: 0 0 10px -9px #333;
}
@media (max-width: 767px) {
  .filter-history {
    top: 50px;
    gap: 0;
    overflow-x: auto;
  }
  .filter-history::-webkit-scrollbar {
    height: 0;
  }
}
.filter-history .item {
  padding: 0px 15px;
  cursor: pointer;
  border-right: 1px solid #71717a;
  line-height: 1;
  text-decoration: none;
  color: #71717a;
}
@media (max-width: 767px) {
  .filter-history .item {
    white-space: nowrap;
  }
}
.filter-history .item:first-child {
  padding-left: 0;
}
.filter-history .item:last-child {
  border-right: none;
  padding-right: 0;
}
.filter-history .item.active {
  color: var(--color-main);
}

.left-side {
  width: 25%;
  padding-top: 15px;
  padding-bottom: 15px;
}

.main-module {
  width: 75%;
  padding-left: 30px;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  border-left: 1px solid var(--color-border);
}
.main-module .title-main-block {
  font-size: var(--fs-dot-tab);
}
.main-module .about-content .flex {
  display: flex;
  gap: 50px;
  margin-bottom: 50px;
}
.main-module .about-content .flex .left,
.main-module .about-content .flex .right {
  width: calc((100% - 50px) / 2);
}
.main-module .about-content .image img {
  width: 100% !important;
}
@media (max-width: 991px) {
  .main-module .about-content .flex {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
  .main-module .about-content .flex .left,
  .main-module .about-content .flex .right {
    width: 100%;
  }
  .main-module .about-content .flex:nth-of-type(2) {
    flex-direction: column-reverse;
  }
}

.side-menu {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  padding-left: 0;
}
.side-menu:first-child {
  border-top: 0;
  padding-top: 0;
}
.side-menu .title-aside {
  font-size: var(--fs-size);
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.side-menu nav {
  margin-bottom: 25px;
}
.side-menu nav a {
  display: flex;
  align-items: center;
  color: var(--color-text);
  gap: 10px;
  text-decoration: none;
  margin-bottom: 10px;
}
.side-menu nav a:hover, .side-menu nav a.active {
  color: var(--color-main);
}
.side-menu nav a:hover svg path, .side-menu nav a.active svg path {
  fill: var(--color-main);
}

@media (max-width: 767px) {
  .section-sidebar .d-flex {
    flex-direction: column-reverse;
  }
  .section-sidebar .d-flex .left-side,
  .section-sidebar .d-flex .main-module {
    width: 100%;
  }
  .section-sidebar .d-flex .main-module {
    padding-left: 15px;
    border-left: 0;
  }
  .section-sidebar .d-flex .left-side:first-child {
    border-top: 1px solid var(--color-border);
  }
  .section-sidebar .section-sideaccount {
    flex-direction: column;
  }
  .section-sidebar .section-sideaccount .main-module {
    padding-left: 0;
  }
  .section-sidebar .section-sideaccount .main-module.p-15 {
    padding-left: 15px;
  }
  .section-sidebar .section-sideaccount .main-module .infac-rght {
    padding-left: 15px;
  }
  .section-sidebar .section-sideaccount .left-side {
    padding: 0;
  }
}
.module-side-simple {
  position: relative;
}
@media (min-width: 768px) {
  .module-side-simple .left-side .side-simple {
    position: sticky;
    top: 130px;
  }
}

.fillter-block-store {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  border-radius: 4px;
  background: #F3F3F3;
  padding: 10px;
  margin-bottom: 15px;
}
.fillter-block-store .select {
  width: calc((100% - 13px) / 2);
  border: 1px solid var(--color-border);
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.fillter-block-store .select select {
  width: 100%;
  height: 42px;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 15px;
  font-size: var(--fs-text);
}
.fillter-block-store .select svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 11px;
  height: 6px;
}
@media (max-width: 1200px) {
  .fillter-block-store .select {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .fillter-block-store {
    padding: 0;
  }
}

.block-store {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.block-store .left {
  width: 35%;
}
.block-store .left h2 {
  font-size: var(--fs-title-store);
}
@media (max-width: 991px) {
  .block-store .left h2 {
    font-size: 1.4rem;
  }
}
.block-store .right {
  width: calc(65% - 15px);
  border-radius: 4px;
  overflow: hidden;
}
.block-store .right iframe {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .block-store {
    gap: 0;
  }
  .block-store .left,
  .block-store .right {
    width: 100%;
  }
  .block-store .right .data-iframe {
    aspect-ratio: 358/486;
  }
}

.title-store {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.title-store h2 {
  color: var(--color-white);
}

.data-store {
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 496px;
  overflow-y: auto;
}
@media (max-width: 991px) {
  .data-store {
    height: 372px;
  }
}
@media (max-width: 767px) {
  .data-store {
    height: 496px;
  }
}

.item-store {
  padding: 10px;
}
.item-store:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.item-store .name {
  font-weight: 700;
  margin-bottom: 10px;
}
.item-store .info-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.item-store .info-text .icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-store .info-text .txt {
  color: var(--color-text);
}
.item-store .info-text .txt a {
  text-decoration: none;
  color: var(--color-text);
}
.item-store .info-text .txt a:hover {
  color: var(--color-main);
}
.item-store .info-text.map .txt {
  color: var(--color-main-5);
}
.item-store .info-text.map .txt .show-map {
  color: var(--color-main-5);
  cursor: pointer;
}
.item-store .info-text.map .txt .show-map:hover {
  color: var(--color-main);
}

.block-flex {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .block-flex {
    gap: 0;
  }
}
@media (max-width: 767px) {
  .block-flex {
    gap: 15px;
  }
}
.block-flex .info-text {
  margin-bottom: 0;
}

.booking-makeup-block {
  margin-bottom: 15px;
  padding-right: 7.8%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.booking-makeup-block .booking-makeup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  height: 100%;
}
.booking-makeup-block .booking-makeup .logo {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.booking-makeup-block .booking-makeup .logo img {
  width: 314px !important;
  object-fit: contain;
  height: auto;
  display: block;
}
.booking-makeup-block .booking-makeup .title-main {
  text-align: center;
  color: #FFF;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "Be Vietnam Pro";
  font-size: 56px;
  font-style: normal;
  font-weight: 900;
  line-height: 75px; /* 133.929% */
  text-transform: uppercase;
}
.booking-makeup-block .booking-makeup > .detail-content {
  margin-bottom: 40px;
  color: #FFFEFE;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "Be Vietnam Pro";
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px; /* 144% */
}
.booking-makeup-block .booking-makeup .desc-booking {
  padding-top: 10px;
}
.booking-makeup-block .booking-makeup #days {
  font-weight: 700;
}
.booking-makeup-block .booking-makeup .left {
  display: none;
}
.booking-makeup-block .booking-makeup .right {
  width: 50%;
  max-width: 779px;
}
.booking-makeup-block .booking-makeup .right {
  padding-left: 15px;
}
.booking-makeup-block .booking-makeup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  padding: 25px;
}
.booking-makeup-block .booking-makeup-form .l, .booking-makeup-block .booking-makeup-form .r {
  width: calc((100% - 26px) / 2);
}
.booking-makeup-block .booking-makeup-form .form-group {
  width: calc((100% - 15px) / 2);
}
.booking-makeup-block .booking-makeup-form .form-group.w-100 {
  width: 100%;
}
.booking-makeup-block .booking-makeup-form label {
  margin-bottom: 0;
}
.booking-makeup-block .booking-makeup-form .l .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.booking-makeup-block .booking-makeup-form .l .top .num-empty {
  display: flex;
  align-items: center;
  gap: 5px;
}
.booking-makeup-block .booking-makeup-form .l .top .num-empty .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.booking-makeup-block .booking-makeup-form ._input {
  width: 100%;
  margin-bottom: 10px;
}
.booking-makeup-block .booking-makeup-form ._input input {
  height: 41px;
  width: 100%;
  background: #fff;
  border: 1px solid #DDD;
  padding-left: 15px;
  border-radius: 4px;
  font-size: 14px;
}
.booking-makeup-block .booking-makeup-form ._input input:disabled {
  background: #f1f1f1;
}
.booking-makeup-block .booking-makeup-form ._input input::placeholder {
  font-size: 14px;
}
.booking-makeup-block .booking-makeup-form ._input input:focus {
  outline: none;
}
.booking-makeup-block .booking-makeup-form ._input._select {
  display: flex;
  gap: 10px;
}
.booking-makeup-block .booking-makeup-form ._input._select select {
  width: 100%;
  height: 41px;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding-left: 10px;
  font-size: 14px;
}
.booking-makeup-block .booking-makeup-form ._input._select select:focus {
  outline: none;
}
.booking-makeup-block .booking-makeup-form ._input._select select:last-child {
  margin-right: 0;
}
.booking-makeup-block .booking-makeup-form button {
  width: 100%;
  text-transform: uppercase;
}
.booking-makeup-block .booking-makeup-form .item-empty {
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 15px;
}
.booking-makeup-block .booking-makeup-form .hotline {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.booking-makeup-block .booking-makeup-form .hotline a {
  text-decoration: none;
  color: var(--color-main);
}
.booking-makeup-block .booking-makeup-form .load {
  width: 100%;
}
.booking-makeup-block .booking-makeup-form .r .bot {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.booking-makeup-block .booking-makeup-form .r .bot .cancel-booking:hover {
  color: var(--color-main);
  cursor: pointer;
}
.booking-makeup-block .hide {
  display: none;
}
.booking-makeup-block .calendar-panel {
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 15px;
  background: #FFF;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day-text span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-makeup-block .calendar-panel .fc-day-disabled .fc-daygrid-day {
  aspect-ratio: 1;
}
.booking-makeup-block .calendar-panel .fc-day-disabled .fc-daygrid-day-top {
  aspect-ratio: 1;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day a {
  width: 100%;
  text-align: center;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day-top {
  width: 100%;
}
.booking-makeup-block .calendar-panel .fc .fc-toolbar-title {
  font-size: 16px;
  text-transform: capitalize;
}
.booking-makeup-block .calendar-panel .fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 5px;
}
.booking-makeup-block .calendar-panel .fc-col-header-cell-cushion {
  font-size: 14px;
}
.booking-makeup-block .calendar-panel .fc .fc-daygrid-day-number {
  font-size: 16px;
  padding: 0;
}
.booking-makeup-block .calendar-panel .fc .fc-col-header-cell-cushion {
  width: 100%;
  padding: 2px 0;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day-events {
  display: none;
}
.booking-makeup-block .calendar-panel .fc .fc-button {
  padding: 0;
  background: #fff;
  outline: none !important;
  color: var(--color-main);
  border-color: var(--color-main);
  border-radius: 50%;
  width: 28px;
  height: 28px;
}
.booking-makeup-block .calendar-panel .fc .fc-button span {
  width: 27px;
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.booking-makeup-block .calendar-panel .fc .fc-button span:before {
  display: block;
  width: 26px;
  height: 26px;
}
.booking-makeup-block .calendar-panel .fc .fc-button:hover {
  background: var(--color-main);
  color: #fff;
}
.booking-makeup-block .calendar-panel .fc-day-past {
  pointer-events: none;
  opacity: 0.1;
}
.booking-makeup-block .calendar-panel .fc-button-group {
  gap: 2px;
}
.booking-makeup-block .calendar-panel .fc-button-group button {
  background: #fff !important;
  color: var(--color-main) !important;
  border-color: var(--color-main) !important;
}
.booking-makeup-block .calendar-panel .fc-button-group button:active {
  outline: none !important;
  background: var(--color-main) !important;
  color: #fff !important;
}
.booking-makeup-block .calendar-panel .fc-button-group button:focus {
  box-shadow: none !important;
}
.booking-makeup-block .calendar-panel .fc-button-group button:hover {
  background: var(--color-main) !important;
  color: #fff !important;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day:not(.fc-day-disabled):hover {
  background: var(--color-main);
  cursor: pointer;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day:not(.fc-day-disabled):hover a {
  color: #fff;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day:not(.fc-day-disabled):hover .fc-daygrid-day-text {
  color: #fff;
}
.booking-makeup-block .calendar-panel .fc-daygrid-day:not(.fc-day-disabled):hover .fc-daygrid-day-text svg {
  fill: #fff;
}
.booking-makeup-block .calendar-panel .fc-day-today {
  background-color: #90ee90 !important;
}
.booking-makeup-block .calendar-panel .selected-range {
  background-color: var(--color-main) !important;
  cursor: pointer;
}
.booking-makeup-block .calendar-panel .selected-range a {
  color: #fff;
}
.booking-makeup-block .calendar-panel .selected-range a svg {
  fill: #fff;
}
.booking-makeup-block .booking-details {
  height: 100%;
}
.booking-makeup-block .booking-details .tit {
  font-weight: 700;
  margin-bottom: 15px;
}
.booking-makeup-block .booking-details .list-hour {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.booking-makeup-block .booking-details .list-hour .item_hours {
  width: calc((100% - 30px) / 4);
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-main);
  border: 1px solid var(--color-main);
  cursor: pointer;
}
.booking-makeup-block .booking-details .list-hour .item_hours:hover, .booking-makeup-block .booking-details .list-hour .item_hours.active {
  background: var(--color-main);
  color: #fff;
}
.booking-makeup-block .booking-details .list-hour .item_hours.none {
  background: red;
  border-color: var(--color-main);
  color: #fff;
  pointer-events: none;
  cursor: none;
}
@media (max-width: 1600px) {
  .booking-makeup-block .logo {
    margin-bottom: 15px;
  }
  .booking-makeup-block .logo img {
    width: 250px !important;
  }
  .booking-makeup-block .title-main {
    line-height: 1;
    font-size: 40px;
    margin-bottom: 15px;
  }
  .booking-makeup-block .detail-content {
    margin-bottom: 30px;
    font-size: 20px;
  }
}
@media (max-width: 1400px) {
  .booking-makeup-block {
    aspect-ratio: unset;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 15px;
  }
  .booking-makeup-block .booking-makeup .right {
    width: 50%;
  }
  .booking-makeup-block .logo {
    margin-bottom: 15px;
  }
  .booking-makeup-block .logo img {
    width: 200px !important;
  }
  .booking-makeup-block .title-main {
    line-height: 1;
    font-size: 30px;
    margin-bottom: 15px;
  }
  .booking-makeup-block .detail-content {
    margin-bottom: 30px;
    font-size: 16px;
  }
  .booking-makeup-block .booking-makeup-block .calendar-panel .fc-col-header-cell-cushion {
    font-size: 12px;
  }
}
@media (max-width: 1200px) {
  .booking-makeup-block {
    aspect-ratio: unset;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 15px;
  }
  .booking-makeup-block .booking-makeup .right {
    width: 70%;
  }
}
@media (max-width: 991px) {
  .booking-makeup-block {
    background: unset !important;
    padding: 0;
  }
  .booking-makeup-block .booking-makeup {
    justify-content: center;
  }
  .booking-makeup-block .booking-makeup .left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 152px);
    width: 100%;
  }
  .booking-makeup-block .booking-makeup .left .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .booking-makeup-block .booking-makeup .left .img {
    position: initial;
  }
}
@media (max-width: 991px) {
  .booking-makeup-block .booking-makeup .left .img img {
    width: 100% !important;
    max-width: 100% !important;
    object-position: bottom;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .booking-makeup-block .booking-makeup .left .title-main, .booking-makeup-block .booking-makeup .left .detail-content, .booking-makeup-block .booking-makeup .left .logo {
    position: relative;
    z-index: 2;
  }
  .booking-makeup-block .booking-makeup .left .logo {
    margin-bottom: 15px;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .booking-makeup-block .booking-makeup .left .logo {
    display: none;
  }
}
@media (max-width: 991px) {
  .booking-makeup-block .booking-makeup .left .logo img {
    width: 200px !important;
  }
  .booking-makeup-block .booking-makeup .left .title-main {
    line-height: 1;
    font-size: 26px;
    margin-bottom: 15px;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .booking-makeup-block .booking-makeup .left .title-main {
    color: var(--color-main);
    padding: 15px 0;
    margin-bottom: 0;
    display: none;
  }
}
@media (max-width: 991px) {
  .booking-makeup-block .booking-makeup .left .detail-content {
    margin-bottom: 30px;
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .booking-makeup-block .booking-makeup .left .detail-content {
    margin-bottom: 0;
    padding: 0 15px;
    display: none;
  }
}
@media (max-width: 991px) {
  .booking-makeup-block .booking-makeup .right {
    width: 100%;
    padding-right: 15px;
    padding-top: 15px;
  }
  .booking-makeup-block .booking-makeup .right .title-main, .booking-makeup-block .booking-makeup .right > .detail-content, .booking-makeup-block .booking-makeup .right .logo {
    display: none;
  }
}
@media (max-width: 767px) {
  .booking-makeup-block {
    background-position-x: 66% !important;
  }
  .booking-makeup-block .booking-makeup .left {
    height: initial;
  }
  .booking-makeup-block .booking-makeup-form {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
  }
  .booking-makeup-block .booking-makeup-form .l, .booking-makeup-block .booking-makeup-form .r {
    width: 100%;
  }
  .booking-makeup-block .booking-makeup-form .l .top {
    margin-bottom: 10px;
  }
  .booking-makeup-block .booking-makeup-form .item-empty {
    margin-bottom: 10px;
  }
  .booking-makeup-block .booking-makeup-form .booking-details .tit {
    margin-bottom: 10px;
  }
}

.info-booking-makeup {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #f1f1f1;
}

.info-booking-makeup-mb {
  padding-left: 25px;
}
.info-booking-makeup-mb li {
  margin-bottom: 10px;
}

.info-booking-makeup td {
  padding: 5px 20px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.info-booking-makeup tr:last-child td {
  border-bottom: none;
}

.info-booking-makeup td:first-child,
.info-booking-makeup td:nth-child(3) {
  font-weight: bold;
  color: #333;
  width: 20%;
  background-color: #f9f9f9;
}

.btn-cancel-booking {
  display: inline-block;
  padding: 0 16px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.btn-cancel-booking:hover {
  background-color: #d9363e;
}

.popup-cancel-booking {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}
.popup-cancel-booking .close-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.popup-cancel-booking .close-icon:hover {
  cursor: pointer;
}
.popup-cancel-booking .close-icon:hover svg {
  fill: var(--color-main);
}
.popup-cancel-booking .wrapper {
  width: 20%;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.3s ease;
}
.popup-cancel-booking .wrapper label {
  display: block;
  margin-bottom: 15px;
}
.popup-cancel-booking .wrapper input {
  width: 100%;
  display: block;
  height: 41px;
  background: #fff;
  border: 1px solid #DDD;
  padding-left: 15px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 15px;
}
.popup-cancel-booking .wrapper .btn-gradient {
  text-align: center;
  cursor: pointer;
}
.popup-cancel-booking.active {
  opacity: 1;
  pointer-events: all;
}
.popup-cancel-booking.active .wrapper {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 991px) {
  .popup-cancel-booking .wrapper {
    width: 40%;
  }
}
@media (max-width: 767px) {
  .popup-cancel-booking {
    align-items: flex-end;
  }
  .popup-cancel-booking .wrapper {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/*# sourceMappingURL=main.css.map */