.content
{
  width: 100%;
}
.wrap-content{
  width: 100%;
  background-color: #010f31; /* Màu nền tối */

}

/*------------SLIDER------------ */


.slider_container {
  position: relative;
  width: 100%;
  height: 40rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  margin: 0 auto;
}

.slider {
  position: relative;
  width: 300%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  animation: 10s cubic-bezier(1, 0.95, 0.565, 1) sliding infinite;
}

.slide {
  position: relative;
  min-width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
}


@keyframes sliding {
  0% {
    transform: translateX(0%);
  }
  33.333% {
    transform: translateX(0%);
  }
  36.666% {
    transform: translateX(-100%);
  }
  66.666% {
    transform: translateX(-100%);
  }
  69.999% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}




@media (max-width: 1024px) {
  .lovepik-com{
    height: 30rem;
    width: 30rem;
  }
}

#voucher-container::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}
/* Frame-3----------------------------- */
.voucher-item{
  border-left: 5px solid #FBD500;
}
.frame-3{
  position: relative;
  background-color: #082967;
  width: 1440px;
  padding: 0 1rem;
  margin: 3rem auto;
}
.frame-4{
  position: absolute;
  right: 20%;
}
.frame-5{
  padding-top: 2rem;
}
.product-card{
  margin: 0.5rem;
  position: relative;
}
.value-wrapper .sale-off{
  position: absolute;
  color: #010f31;
  background-color: #F7D200;
  border-radius: 8px;
  font-weight: 700;
  top: 8px;
  right: 8px;
  padding: 5px;
}
.value-wrapper .discount{
  background-color: #F7D200;
  border-radius: 10px;

}
.price div{
  margin: 0 5px;
}
.rating-icons{
  margin: 10px 0;
}
.productContainer {
  display: flex;
  flex-direction: row;
  overflow-x: auto; /* Kích hoạt cuộn ngang */
  scroll-snap-type: x mandatory; /* Tự động dừng tại các điểm nhất định khi cuộn */
  gap: 16px; 
  padding: 10px;
  width: 100%; 
}

.product-card {
  width: 20%;
  min-width: 250px; 
  scroll-snap-align: start; /* Đảm bảo mỗi thẻ dừng ở đầu container khi cuộn */
  flex-shrink: 0; /* Ngăn chặn thẻ thu nhỏ khi có nhiều thẻ hơn */
  position: relative;
  
}

.productContainer::-webkit-scrollbar {
  display: none; /* Ẩn thanh cuộn cho các trình duyệt Webkit */
}

.product-voucher{
  border-top: 0.1px solid #1E3D6D;

}
.voucher-icon{
  border-left: 3px solid #F6CE3A ;
  padding: 15px 25px;
  background-color: white;
  border-radius: 10px;
}
.productContainer .li-chevron-right-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: 2vh;
  top:40%;
  padding: 1.5rem;
  border-radius: 50%;
  background-color: white;
}
.productContainer .li-chevron-left-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  left: 2vh;
  top:40%;
  padding: 1.5rem;
  border-radius: 50%;
  background-color: white;
  color: black;
  z-index: 100;
}
.vocher-desc{
  padding: 15px 10px;
  background-color: white;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}




.voucher-btn{
  padding: 10px 10px;
  background-color: white;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.btn-pin{
  padding: 10px 25px;
  background-color: #082967;
  color: white;
  border-radius: 5px;
  font-weight: 600;
}
.rectangle-6{
  border-left: 1px dashed rgb(245, 242, 242);
  height: 80%;
  margin-top: 10px;
  color: #F5F6F9;
}


/* NewProduct ----*/
.overlap-8{
  position: relative;
  
}
.ProductWrapper{
  position: relative;
  width: 1440px;
  margin: 0 auto;
}
.newProductWrapper{
  width: 1440px;
  margin: 0 auto;
}
.menuProduct li{
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}
.menuProduct-selected {
  background-color: #03132a;
  color: white;
}

/* CATEGORY------------------- */

.category{
  width: 1440px;
  margin: 3rem auto;
}

.categoryContainer img{
  height: 80%;
  width: 100%;
 object-fit: cover;
 position: relative;
}
.category-item{
  width: 25%;
  background-color: #F5F6F9;
  padding: 1rem 1.5rem;
  margin: 0 5px;
  border-radius: 5px;
}

/* --overlap-10------------ */
.wrapper{
  width: 100%;
  position: relative;

}
.overlap-10{
  position: relative;
  max-height: 500px;
  width: 100%;
  background-color: #E8E8E8;
  overflow: hidden;

}
.display-horizontal-2{
  position: absolute;
  padding: 0 3%;
  width: 1440px;

  padding: 2rem 0;
}
.overlap-12{
  position: relative;
  top: -20vh;
  z-index: 20;
}
.content-3{
  position: relative;
  z-index: 0;
}
.running-product{
  margin: 0 auto;
  width: 1440px;
  margin-top: 5%;
}
.RunningProductContainer{
  position: relative;
  width: 1440px;
  margin: 0 auto;
}
.wrapper .li-chevron-left-wrapper,.wrapper .li-chevron-right-wrapper{
  top: 90vh;
}



/* ---------dealContainer-------------- */
.productOption{
  width: 1440px;
  margin: 0 auto;
  margin-bottom: 3rem;
}


.section-2-left,.section-2-right{
  width: 50%;
}
.productOption .option-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 5px;
  align-items: center;

}
.productOption .option-item img{
  padding: 10px;
  border: 0.5px solid rgb(209, 202, 202);
  height: 10rem;
  border-radius: 8px;
}
.productOption .option-item p{
  font-weight: 500;
  margin-top: 10px;
}

.deal-section-1 img{
  width: 100%;
}

.deal-section-2 img{
  width: 100%;
}

/* -----------news------------ */
.news{
  width: 1440px;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
.news-left img{
  width: 100%;
}
.news-right-items{
  margin: 1rem; 
}
.news-right-items img{
  height: 10rem;
  margin-right: 1rem;
}


.password-container {
  position: relative;
}

#toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
}

#eye-icon, #eye-icon-slash {
  font-size: 1.2em; /* Tùy chỉnh kích thước biểu tượng nếu cần */
}

.hidden {
  display: none;
}

.password-login-container {
  position: relative;
}

#toggle-password-login {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
}

#eye-icon-login, #eye-icon-slash-login {
  font-size: 1.2em; /* Tùy chỉnh kích thước biểu tượng nếu cần */
}

.hidden {
  display: none;
}