.avatar_user img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}
/* .header-bottom-nav .menu-item a:hover{
    color: var(--cl-s1);
}
.menu-item.current_page_item{
    color: var(--cl-s1);
} */
.header-bottom ul li a{
    font-weight: 400 !important;
}
.header-bottom ul ul{
  border: none !important;
}
.header-bottom ul ul li a{
  white-space: nowrap;
}
.header-bottom ul li a:hover{
    color: var(--cl-s1);
}
.header-block{
    color: #000;
}
.header-bottom {
    box-shadow: 0px 4px 4px 0px #00000040;
}
.about_home  .box-image{
    background:white;
    box-shadow: 12px 12px 20px 0px #0000001A;
    border-radius: 0.5rem;
}
.img_about{
    border-radius: 0.5rem;
    overflow: hidden;
}
.bg_shadow_login{
    box-shadow: 10px 10px 30px 0px #00000029;
  
  }
  .ux-menu-link__link {
    border-bottom-width: 0 !important;

}
.absolute-footer{
    display: none !important;
}
.mb-0{
    margin-bottom: 0;
}
.select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection, input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea{
    box-shadow: none!important;
    border-radius: 8px !important;
}


.bg_colection{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(196, 196, 196, 0) 156.08%);
    backdrop-filter: blur(20px);
    width: 136px;
  }
  .bg_colection::before {
    content: '';
    /* position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%); */
    background-image: url(../images/search.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  
  .bg_top_user1{
    background: linear-gradient(90deg, #DD5E89 0%, #F7BB97 100%);
  
  }
  .bg_top_user2{
    background: linear-gradient(90deg, #00D2FF 0%, #3A7BD5 100%);
  
  }
  
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .slide_pro .woocommerce-product-gallery__image{
    border-radius: 0.5rem !important;
    overflow: hidden;
  }
  .slide_pro .image-tools {
    display: none !important;
  }
  .slide_pro .flickity-button{
    display: none!important;
  }
  .slide_pro .flickity-viewport .col a {
    border-radius: 0.5rem !important;
    overflow: hidden;
    border: none!important;
  }
  .product-tabs .tab-panels{
    background-color: #F9F9F9 !important;
    padding: 3.75rem;
    border-bottom-left-radius: 6px!important;
    border-bottom-right-radius: 6px!important;
    overflow: hidden;
  }
  .product-tabs .description_tab,
  .product-tabs .reviews_tab {
    padding: 0 2rem !important ;
    background-color: #FDF1F3 !important;
    color: #6A6767 !important;
    font-size: 1rem;
    margin: 0 0 !important;
  }
  .product-tabs .description_tab a,
  .product-tabs .reviews_tab a{
    font-size: 1rem;
  }
  .product-tabs .description_tab{
    border-top-left-radius: 6px !important;
    overflow: hidden;
  }
  .product-tabs .reviews_tab{
    border-top-right-radius: 6px !important;
    overflow: hidden;
  }
  .product-tabs .description_tab.active,
  .product-tabs .reviews_tab.active{
    background-color: var(--cl-s1)!important;
    color: #fff! important;
  }
  .product-tabs .description_tab.active a,
  .product-tabs .reviews_tab.active a{
    color: #fff! important;
  }
  .product-tabs .nav-line-bottom > li > a::before,
.nav-line-grow > li > a::before,
.nav-line > li > a::before {
    display: none !important;
}
.product-tabs .more_seller_product_tab{
  display: none!important;
}
span.amount{
  color: var(--cl-s1) !important;
}

.hover_pro_related:hover{
  box-shadow: 10px 10px 16px 0px #00000029;

}

.border_car_title{
  box-shadow: 10px 10px 30px 0px #00000029;

}
.bg_checkout_form{
  box-shadow: 0px 4px 20px 5px #0000000A;
}
.cart-count{
  position: absolute;
  left: 23px;
  top: -8px;
  color: red;
  font-weight: 600;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.left-1\/2 {
  left: 50%;
}
.top-1\/2 {
  top: 50%;
}
.text-\[\#98A1B0\] {
  --tw-text-opacity: 1;
  color: rgb(152 161 176 / var(--tw-text-opacity)) /* #98a1b0 */;
}
.rounded-\[0\.75rem\] {
  border-radius: 0.75rem /* 12px */;
}
.bg-\[\#FCFAF9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 250 249 / var(--tw-bg-opacity)) /* #fcfaf9 */;
}
.mr-0{
  margin-right: 0!important;
}
.text-\[\#C2C2C2\] {
  --tw-text-opacity: 1;
  color: rgb(194 194 194 / var(--tw-text-opacity)) /* #c2c2c2 */;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem /* 32px */ * var(--tw-space-x-reverse));
  margin-left: calc(2rem /* 32px */ * calc(1 - var(--tw-space-x-reverse)));
}
/* .dokan-dash-sidebar{
  display: none!important;
} */
/* .dokan-dashboard-wrap .dokan-dashboard-content{
  padding: 2rem;
  border-radius: 10px;

} */
 .header-button .icon.circle {
  background: var(--cl-s1) !important;
  color: white !important;
 }
 .font-extrabold {
  font-weight: 800;
}
.border-none{
  border: none!important;
}
.py-4{
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
}

.dokan-dashboard .dokan-dash-sidebar{
  width: 25% !important;
  background-color: transparent !important;
  margin-top: -3.5rem;
}
.dokan-dashboard .dokan-dashboard-content{
  width: 75%!important;
  padding-top: 30px !important;
}
.dokan-dashboard .dokan-dashboard-wrap{
  overflow: visible!important;
}
#store-form.dokan-form-horizontal{
  display: flex;
  flex-wrap: wrap;
}
#store-form.dokan-form-horizontal > .dokan-banner{
  width: 100% !important;
}
#store-form.dokan-form-horizontal .dokan-form-group{
  width: 100%!important;
  /* padding: 4px; */
}
#store-form.dokan-form-horizontal .dokan-form-group:nth-of-type(4) {
  width: 100% !important;
}
#store-form.dokan-form-horizontal .dokan-form-group:last-of-type {
  width: 100% !important;
}
.form_city_zip{
  width: 100% !important;
}
#store-form.dokan-form-horizontal #dokan-address-fields-wrapper{
  display: flex;
  flex-wrap: wrap;
}
#store-form.dokan-form-horizontal #dokan-address-fields-wrapper .dokan-w6.dokan-left{
  margin-right: 0 !important;
}
.dokan-form-group input{
  margin-bottom: 0 !important;
}

.dokan-form-horizontal .dokan-control-label{
  text-align: left !important;
}
.dokan-form-horizontal label{
  display: block !important;
  margin-bottom: 0.5rem !important;
}
.invisible {
  visibility: hidden;
}
.group:hover .group-hover\:visible {
  visibility: visible;
}
.opacity-0 {
  opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.top-full {
  top: 100%;
}
.top-full {
  top: 100%;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.z-50 {
  z-index: 50;
}


/* Mega Menu Styles */
.mega-menu-trigger {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 50;
}

.mega-menu-trigger:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Product Grid Hover Effects */
.product-item img {
  transition: transform 0.3s ease;
}

.product-item:hover img {
  transform: scale(1.05);
}
/* Mega Menu Styles */
.group {
  position: relative;
}

.group:hover .invisible {
  visibility: visible;
}

.group:hover .opacity-0 {
  opacity: 1;
}

.transition-all {
  transition: all 0.3s ease;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Ensure mega menu stays visible while hovering */
.group:hover .group-hover\:visible.group-hover\:opacity-100 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.py-1\.5 {
  padding-top: 0.375rem /* 6px */;
  padding-bottom: 0.375rem /* 6px */;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-\[\#D9D9D9\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity)) /* #d9d9d9 */;
}
.search_header::placeholder{
  color: #000 !important;
}
.border_footer{
  border-top: 2px solid #D9D9D9;
}
.vn_pay_{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.vn_pay_ img{
 width: 32px !important;
}

.pagination-wrapper {
  text-align: center;
}
.pagination-wrapper .page-numbers {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}
.pagination-wrapper .page-numbers li {
  margin: 0;
}
.pagination-wrapper .page-numbers a,
.pagination-wrapper .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #F1F1F1;
  border-radius: 8px;
  color: #333333;
  text-decoration: none;
  transition: all 0.3s ease;
}
.pagination-wrapper .page-numbers a:hover {
  background-color: var(--cl-s1);
  color: white;
  border-color: var(--cl-s1);
}
.pagination-wrapper .page-numbers .current {
  background-color: var(--cl-s1);
  color: white;
  border-color: var(--cl-s1);
}
.pagination-wrapper .page-numbers .dots {
  border: none;
  padding: 0 4px;
}
.pagination-wrapper .page-numbers i {
  font-size: 12px;
}

.tab-panels .review-form-inner{
  border: 2px solid var(--cl-s1) !important;
  border-radius: 8px;
}

#commentform .submit{
  background-color: var(--cl-s1)!important;
  color: #fff!important;
  border-radius: 9999px!important;
}
.stars a.active:after, .stars a:hover:after{
  color: var(--cl-s1)!important;
}
.ajax_prev >.dokan-btn{
  max-width: fit-content !important;
  background: var(--cl-s1)!important;
}
/* .dokan-address-fields >.dokan-form-group{
  width: 31% !important;

} */
.dokan-w3{
  width: auto!important;
  float: none !important;
}
.dokan-w5 {
  width: auto!important;
  float: none!important;
}
.h-\[20rem\] {
  height: 20rem;
}
.hidden_c {
  display: none;
}
.slide_pro .badge-container {
  display: none;
}
.header-bottom .header-bottom-nav .menu-item a:hover{
  color: var(--cl-s1)!important;
  transition: all 0.3s ease;
}
.header-bottom .header-bottom-nav .menu-item.active a{
  color: var(--cl-s1)!important;
}
.star-rating span:before{
  color: var(--cl-s1)!important;
}
.breakrumb_ .rank-math-breadcrumb p{
  margin-bottom: 0;
  font-size: 1.15rem !important;
}
.breakrumb_ .rank-math-breadcrumb p a{
  color: #000000;
}
.breakrumb_ .rank-math-breadcrumb p a:hover{
  color: #CC862A;
  transition: all 0.3s ease;
}
.breakrumb_ .rank-math-breadcrumb p span{
  color: #CC862A;
}
.breakrumb_ .rank-math-breadcrumb{
  padding-top: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #0000004D;
}


.breakrumb_c .rank-math-breadcrumb p{
  margin-bottom: 0;
  font-size: 1.15rem !important;
}
.breakrumb_c .rank-math-breadcrumb p a{
  color: #000000;
}
.breakrumb_c .rank-math-breadcrumb p a:hover{
  color: #CC862A;
  transition: all 0.3s ease;
}
.breakrumb_c .rank-math-breadcrumb p span{
  color: #CC862A;
}
.breakrumb_c .rank-math-breadcrumb{
  padding-top: 24px;
  padding-bottom: 10px;
}
.banner_news img {
  width: 100vw;     /* bằng chiều rộng màn hình */
  max-height: 650px;     /* tự điều chỉnh chiều cao theo tỷ lệ gốc */
  display: block;   /* loại bỏ khoảng trắng dưới ảnh */
}

/* Avatar container */
.avatar-container {
  width: 3.75rem;
  height: 3.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

/* Avatar preview wrapper */
.avatar-preview {
  width: 100%;
  height: 100%;
}

/* Upload label overlay */
.avatar-upload-label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Show overlay on container hover */
.avatar-container:hover .avatar-upload-label {
  display: flex;
}

/* Camera icon */
.avatar-upload-label i {
  color: white;
}

/* Hide file input */
.avatar-input {
  display: none;
}


.about_home .box-image {
  position: relative;

  overflow: hidden;
  cursor: pointer;
}

.about_home .box-image:hover::after {
  -webkit-animation: shine 0.75s;

  animation: shine 0.75s;
}

.about_home .box-image::after {
  position: absolute;

  top: 0;

  left: -75%;

  z-index: 2;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

  background: linear-gradient(
    to right,

    rgba(255, 255, 255, 0) 0%,

    rgba(255, 255, 255, 0.3) 100%
  );

  transform: skewX(-25deg);
}
.about_home .box-text-inner:hover{
  color: var(--cl-s1)!important;
  transition: all 0.3s ease;
}

.top-2 {
  top: 0.5rem /* 8px */;
}
.left-2 {
  left: 0.5rem /* 8px */;
}
.top-5 {
  top: 1.25rem /* 8px */;
}
.left-5 {
  left: 1.25rem /* 8px */;
}
.z-\[1\] {
  z-index: 1;
}
.px-2\.5 {
  padding-left: 0.625rem /* 10px */;
  padding-right: 0.625rem /* 10px */;
}
.text-xs {
  font-size: 0.75rem /* 12px */;
  line-height: 1rem /* 16px */;
}
.bg-\[\#0000008A\] {
  background-color: #0000008A;
}
.rounded-\[4px\] {
  border-radius: 4px;
}

.seller-items .products{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -24px;
}

.product-hover-link {
    position: relative;
    overflow: hidden;
}

.product-image {
    transition: transform 0.3s ease;
}

.product-hover-link:hover .product-image {
    transform: scale(1.05);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: background-color 0.3s ease;
    pointer-events: none; /* Ngăn overlay chặn click vào link ảnh */
}

.product-hover-link:hover .product-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.product-overlay-text {
    color: white;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
    text-align: center;
    padding: 8px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--cl-s1);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    pointer-events: auto; /* Chỉ cho phép click vào text */
}

.product-hover-link:hover .product-overlay-text {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.product-overlay-text:hover {
    background: var(--cl-s2);
    transition: all 0.3s ease;
}


/* Quick View Styles */
.quick-view-modal {
  background: white;
  max-width: 1000px;
  margin: 0 auto;
}

.quick-view-modal img {
  border-radius: 0.5rem;
}

.fancybox__content {
  padding: 0 !important;
}

.quick-view-modal {
  padding: 2rem;
}

.quick-view-swiper {
  border-radius: 0.5rem;
  overflow: hidden;
}

.quick-view-swiper .swiper-slide {
  aspect-ratio: 1;
}

.quick-view-swiper .swiper-pagination {
  bottom: 1rem;
}

.quick-view-swiper .swiper-pagination-bullet {
  background: white;
  opacity: 0.5;
}

.quick-view-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.carousel__button.is-close{
  margin-right: -2rem !important;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.back-to-top {
  border: 1px solid var(--cl-s1) !important;
  color: var(--cl-s1) !important;
}
.back-to-top:hover {
  background-color: var(--cl-s1) !important;
  transition: all 0.3s ease;
  color: #fff !important;
}
.woocommerce-breadcrumb.breadcrumbs{
  color: #CC862A !important;
  font-weight: 500;
} 
.woocommerce-breadcrumb.breadcrumbs a{
  color: black !important;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}


.text-\[0\.875rem\] {
    font-size: 0.875rem /* 14px */;
}
.mb-8 {
    margin-bottom: 2rem /* 32px */;
}

.dokan-widget-area .parent-cat-wrap{
  margin-left: 0 !important;
}
.dokan-widget-area .dokan-form-group{
  margin-left: 0 !important;
}
.dokan-widget-area .widget-title{
  font-size: 1rem !important;;
}
.dokan-store-description{
  text-align: center;
}