/* General styles for the container bannerfirst nhatthem214 */
      /* Container để giữ hiệu ứng */
      .banner-item {
        position: relative;
        overflow: hidden;
      }
      
      /* Ảnh cơ bản */
      .banner-item img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.5s ease;
      }
      
      /* Hiệu ứng lấp lánh: từ trên phải xuống dưới trái */
      .banner-item::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(300deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 100%);
        transform: rotate(-30deg) translate(100%, -100%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s, transform 1s;
      }
      
      /* Khi hover vào banner */
      .banner-item:hover::before {
        opacity: 1;
        transform: rotate(-30deg) translate(-100%, 100%);
      }
      
    
      
  /*///////////////////////////////////////////////////////*/
.swiper{
  max-width: 1200px !important;
  margin: auto !important;
}


@media (min-width: 769px) {
  .container-sub .swiper-slide {
      width: 50% !important; 
  }

  .container-sub .banner_slider .swiper-button-prev,
  .container-sub .banner_slider .swiper-button-next {
      display: none; 
  }

  .container-sub .banner_slider .swiper-pagination {
      display: none; 
  }

  .container-sub .banner_slider {
      overflow: visible; 
  }
}


@media (max-width: 768px) {
  .container-sub .banner_slider {
      height: auto;
  }

  .container-sub .swiper-slide {
      width: 100% !important; /* Ensure 1 slide takes full width */
  }

  .container-sub .swiper-slide img {
      height: auto;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: contain;
      border-radius: 8px;
  }

  .swiper-button-prev,
  .swiper-button-next {
      width: 30px !important; /* Smaller buttons on mobile */
      height: 30px !important;
      font-size: 16px;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {

      font-size: 16px !important; /* Smaller arrow icons */
  }
  .fl-product-item .minh_hoa img
  {
        min-height: 150px!important;
  }
}
  /*Banner styles for the banner slider nhatthem214/*/
 /* Scoped container for the layout */

.container-sub {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  gap: 20px;
}

/* Navigation Categories (Left Sidebar) */
.container-sub .category-nav {
  width: 250px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.container-sub #menu2017 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-sub #menu2017 li {
  border: 1px solid #3333;
  border-radius: 7px;
  margin-bottom: 5px;
  padding: 5px;
}


.container-sub #menu2017 li h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

.container-sub #menu2017 li h3 a {
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.container-sub #menu2017 li h3 a:hover {
  color: #007bff;
}

/* Add a small icon before each menu item (similar to Image 1) */
.container-sub #menu2017 li h3 a::before {
  content: ''; /* Remove the URL from content */
  display: inline-block;
  background-image: url('/uploads/minh-hoa/default_menu_icon.png'); /* Use background-image instead */
  background-size: contain; /* Ensure the image fits within the defined dimensions */
  background-repeat: no-repeat;
  background-position: center;
  width: 20px; /* Desired width */
  height: 20px; /* Desired height */
  margin-right: 8px; /* Space between icon and text */
  vertical-align: middle; /* Align with text */
}

/* Slider Section */
.container-sub .awe-section-1 {
  flex: 1;
  position: relative;
}

.container-sub .home-slider {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.container-sub .swiper-wrapper {
  display: flex;
}

.container-sub .swiper-slide {
  width: 100% !important;
}

.container-sub .swiper-slide img {
  width: 100%;
  height: 400px; /* Adjust height as needed */
  object-fit: cover;
  border-radius: 8px;
}

/* Navigation Arrows */

.container-sub .swiper-button-prev,
.container-sub .swiper-button-next {
  background-color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007bff;
  font-size: 20px;
  cursor: pointer;
}

.container-sub .swiper-button-prev::after,
.container-sub .swiper-button-next::after {
  font-size: 20px;
  color: #007bff;
}

.container-sub .swiper-button-prev {
  left: 10px;
}

.container-sub .swiper-button-next {
  right: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .container-sub {
      flex-direction: column;
  }

  .container-sub .category-nav {
      width: 100%;
      display: none;
  }

  .container-sub .home-slider {
      height: auto; /* Let the height adjust dynamically */
  }

  .container-sub .swiper-slide img {
      height: auto; /* Remove fixed height */
      width: 100%; /* Ensure it takes full width */
      aspect-ratio: 16 / 9; /* Maintain a consistent aspect ratio (adjust as needed) */
      object-fit: contain; /* Use "contain" instead of "cover" to avoid cropping */
      border-radius: 8px;
  }
}
    
:root {
  --mainColor: #37bee3;
  --hoverColor: #0282a5;
  --textColor: #1b2830;
  --priceColor: #ff4440;
  --gradient1: #0282a5;
  --gradient2: #37bee3;
}
@media (min-width: 1200px) {
    .container {
        width: 1220px !important;
    }
}
.swiper-button-next, .swiper-button-prev
{
    align-items: center;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    display: flex
;
    font-size: 14px;
    height: 60px;
    justify-content: center;
    outline: none;
    top: 48%;
    transition: .3s;
    width: 30px;
}
@media (max-width: 480px) {
    .flash-sale_mySwiper .swiper-slide {
        width: calc(50% - 5px) !important; /* Mỗi hàng 2 sản phẩm */
        margin-top: 5px !important;
    }
    .flash-sale_mySwiper .fl-product-item {
        margin-top: 5px !important;
        width: 185px !important;
    }
}
.fl-product-item .minh_hoa img {
     height: 170px !important;

}
.swiper-button-next,
.swiper-button-prev {
    width: 44px;
    height: 44px;
    background-color: #e60000; /* Màu đỏ phù hợp với flash sale */
    border-radius: 50%;
    border: 2px solid #ffffff; /* Viền trắng */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Bóng nhẹ */
    color: #ffffff; /* Icon màu trắng */
    transition: all 0.3s ease;
    position: relative; /* Đảm bảo vị trí tương đối */
    overflow: hidden; /* Ngăn icon tràn ra ngoài */
}

/* Định dạng chung cho nút next và prev */
.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 60px;
    background-color: #ffffff; /* Nền trắng */
    border-radius: 8px; /* Góc bo tròn nhẹ */
    color: #000000; /* Màu mũi tên đen đậm */
    transition: opacity 0.3s ease; /* Hiệu ứng chuyển đổi nhẹ khi hover */
    opacity: 0.9; /* Độ mờ nhẹ để trông mềm mại */
}

/* Icon mũi tên */
.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: 'swiper-icons'; /* Sử dụng font của Swiper */
    font-size: 18px; /* Giảm kích thước mũi tên */
    font-weight: 900; /* Độ đậm của mũi tên */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Căn giữa icon */
    line-height: 1;
    color: #000000; /* Đảm bảo màu đen */
}

/* Cụ thể cho next và prev */
.swiper-button-next:after {
    content: '›'; /* Mũi tên sang phải */
    font-size: 15px !important;
}

.swiper-button-prev:after {
    content: '‹'; /* Mũi tên sang trái */
    font-size: 15px !important;
}

/* Hiệu ứng hover */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1; /* Tăng độ sáng khi hover */
}

/* Vị trí nút */
.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}

/* Khi nút bị vô hiệu hóa */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive cho mobile */
@media (max-width: 767px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px;
        height: 48px;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 14px; /* Giảm kích thước mũi tên trên mobile */
        color: #000000; /* Đảm bảo màu đen */
    }

    .swiper-button-next {
        right: 5px;
    }

    .swiper-button-prev {
        left: 5px;
    }
}