/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* 1. Thiết lập trạng thái ban đầu của lớp ánh sáng */
.product-small .box-image::before {
  position: absolute;
  top: 0;
  left: -100%; /* Đẩy hẳn ra ngoài bên trái */
  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);
  /* THIẾU 1: Thời gian chuyển động */
  transition: all 0.75s ease;
  /* THIẾU 2: Chặn ánh sáng tràn ra ngoài khung ảnh */
  pointer-events: none;
}

/* 2. Hiệu ứng khi di chuột vào sản phẩm */
.product-small:hover .box-image::before {
  /* THIẾU 3: Lệnh di chuyển ánh sáng sang phải */
  left: 125%;
}

/* 3. Đảm bảo khung ảnh của Flatsome không bị tràn */
.product-small .box-image {
  overflow: hidden;
}
/* Ẩn nhãn Sale (Giảm giá) trên toàn trang */
.badge-container .onsale {
  display: none !important;
}

/* Ẩn nhãn Out of Stock (Hết hàng) */
.badge-container .out-of-stock-label {
  display: none !important;
}

/* Nếu muốn ẩn toàn bộ các loại nhãn trong Flatsome */
.badge-container {
  display: none !important;
}
/* Ẩn nút Quick View (Xem nhanh) trên danh sách sản phẩm */
.quick-view,
.box-image .image-tools .quick-view,
.tagged_as {
  display: none !important;
}

/* Ẩn các công cụ trên ảnh (Nút Phóng to, Nút yêu thích nếu có) */
.image-tools {
  display: none !important;
}

/* Ẩn icon phóng to (Zoom) ở góc ảnh trong trang chi tiết sản phẩm */
.product-image .image-tools {
  display: none !important;
}

/* Đảm bảo ảnh không hiển thị lớp phủ khi di chuột vào (nếu cần) */
.image-overlay {
  display: none !important;
}
/* Đổi màu tên sản phẩm ở trang danh mục */
.product-title a {
  color: #000 !important;
}

/* Đổi màu tên sản phẩm ở trang chi tiết */
.product-main .product-title {
  color: #000 !important;
}
.breadcrumbs a {
  color: var(--primary-color);
}

/* Đổi màu khi di chuột vào tên sản phẩm (tùy chọn) */
.product-title a:hover {
  color: #446084 !important; /* Hoặc màu thương hiệu của bạn */
}
.product-title .product_title .entry-title {
  color: var(--fs-color-secondary);
}
.banner-layers.container {
    height: auto !important;
}

.banner-bg img {
    object-fit: contain !important;
    height: auto !important;
    position: relative !important;
}


.absolute-footer {
  display: none !important;
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
}
@media (max-width: 768px) {
  .our-commitment-container {
    grid-template-columns: 1fr;
  }
}