.product-view {
  margin: auto;
  padding: 20px;
}

.carousel {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.carousel-images {
  position: relative;
  width: 100%;
  height: auto;
}

.carousel-slide {
  display: none;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.carousel-slide.active {
  display: block;
}

h2 {
  content: "";
  font-family: sans-serif;
  /* margin-left: 190px; */
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
}

h2::after {
    font-weight: bold;
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #c49b63;
    margin: 10px auto 0;
    }

h3 {
  font-family: sans-serif;
  font-size: 24px;
  text-align: center;
  margin: 50px;
  
}

.product-gallery {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.product-item {
  flex: 0 0 auto;
  margin-bottom: 15px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #eee;
  background-color: #fafafa;  
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; /* (tuỳ chọn) giúp nổi lên mượt */
}

.product-gallery :hover {
   transform: translateY(-5px); /* Nổi lên một chút */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    border-color: #ccc; 
     z-index: 1; /* (tuỳ chọn) tránh bị che khi nổi lên */
}

.product-item img {
  width: 300px;
  height: 400px;
  display: block;
}

.product-item p {
  align-items: center;
  margin: 20px;
  font-weight: bold;
  font-size: 14px;
}

.search {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
  /* margin: 20px 0; */
}

.search .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search .header h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: brown;
}

.search .header a {
  font-size: 14px;
  color: #555;
  text-decoration: none;
}

.search .header a:hover {
  text-decoration: underline;
}

.search .products {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  overflow-x: auto;
}

.product {
  margin: 20px;
  flex: 0 0 120px;
  text-align: center;
}

.product img {
  width: 300px;
  border-radius: 6px;
  border: 1px solid #eee;
}

.product p {
  font-family: sans-serif;
  font-weight: bold;
  padding-left: 120px;
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

.product-detail {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eee;
}

.product-gallery {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thumbnails img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.thumbnails img:hover {
  border-color: #007bff;
}

.thumbnails img.active {
  border-color: #007bff;
}

.main-image img {
  width: 320px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.product-info {
  flex: 1;
}

.product-info h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #222;
}

.product-info h3 {
  font-size: 18px;
  color: #007bff;
  margin: 10px 0;
}

.product-info ul {
  padding-left: 20px;
  margin: 0;
}

.product-info ul li {
  margin: 6px 0;
}

.product-gallery a {
  text-decoration: none;
  color: #222;
}

.product-gallery a:hover {
  text-decoration: underline;
}


/* MOBILE: 3 sản phẩm / hàng (căn giữa) */
@media (max-width: 768px) {
  body {
    background-color: #f4f4f4 !important;
  }

  .product-view,
  .product-gallery,
  .product-item {
    background-color: transparent !important;
  }

  .product-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 cột */
    gap: 8px;
    justify-content: center;   /* căn giữa toàn bộ grid */
    justify-items: center;     /* căn giữa từng item */
  }

  .product-item {
    width: 100% !important;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 6px;
    text-align: center;
  }

  .product-item img {
    width: 100% !important;
    height: auto !important;
    max-height: 140px;
    object-fit: contain;
    background-color: #fff;
    display: block;
  }

  .product-item p {
    font-size: 12px;
    margin: 4px 0;
    color: #333;
    text-align: center;
  }

  /* Carousel không tạo khoảng đen */
  .carousel,
  .carousel-images {
    height: auto !important;
    background: transparent !important;
  }
  .carousel-slide { display: none !important; }
  .carousel-slide.active { display: block !important; }

    .product-detail {
    flex-direction: column;   /* xếp dọc thay vì ngang */
    align-items: center;      /* căn giữa */
    padding: 15px;
    gap: 15px;
  }

  /* Gallery */
  .product-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px; /* chừa chỗ cho scrollbar */
  }

  .thumbnails img {
    width: 50px;
    height: 50px;
  }

  .main-image img {
    width: 220px;             /* thu nhỏ ảnh chính */
    height: auto;
  }

  /* Thông tin sản phẩm */
  .product-info h2 {
    font-size: 18px;
    text-align: center;
  }

  .product-info h3 {
    font-size: 16px;
    margin: 10px 0;
    text-align: center;
  }

  .product-info ul {
    padding-left: 18px;
  }

  .product-info ul li {
    font-size: 13px;
    margin: 4px 0;
  }

    .page-gach-marble .product-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cột, tự wrap */
    gap: 12px;
    align-items: start;
    justify-items: center; /* card ở giữa cột */
  }

  .page-gach-marble .product {
    width: 100%;
    max-width: 220px;        /* tránh quá rộng */
    text-align: center;
  }

  /* Ảnh vuông, hiển thị đầy đủ, không méo */
  .page-gach-marble .product img {
    width: 100%;
    aspect-ratio: 1 / 1;     /* ô vuông cho gạch */
    height: auto;            /* để trình duyệt tính theo ratio */
    object-fit: contain;     /* hiện rõ toàn bộ viên gạch */
    background: #fff;        /* nền trắng cho phần trống */
    border: 1px solid #eee;
    border-radius: 10px;
    display: block;
  }

  /* Tên mã gạch gọn & căn giữa */
  .page-gach-marble .product p {
    margin: 6px 0 2px;
    padding-left: 0 !important; /* chặn rule cũ nếu có */
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
  }

  /* Khoảng cách tiêu đề & link “Xem Tất Cả” gọn hơn */
  .page-gach-marble .search .header {
    padding: 0 6px;
    margin: 8px 0 10px;
  }

  
}

/* VERY SMALL MOBILE: 2 sản phẩm / hàng (căn giữa) */
@media (max-width: 480px) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 cột */
  }

  .product-item img {
    max-height: 120px;
  }

  .product-item p {
    font-size: 11px;
  }
    .main-image img {
    width: 180px;             /* nhỏ hơn trên màn nhỏ */
  }
  .product-info ul li {
    font-size: 12px;
  }

    .page-gach-marble .product-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .page-gach-marble .product {
    max-width: 180px;
  }
  .page-gach-marble .product p {
    font-size: 11px;
  }

    .page-gach-marble .header {
    display: flex;
    justify-content: space-between; /* chữ bên trái, link bên phải */
    align-items: center;
    padding: 6px 10px;              /* giảm padding cho gọn */
    border-bottom: 1px solid #eee;  /* gạch mảnh để phân cách */
  }

  .page-gach-marble .header h2 {
    font-size: 13px;   /* nhỏ lại cho vừa màn hình */
    margin: 0;
    color: #b94a00;    /* giữ màu nâu đỏ nổi bật */
    font-weight: bold;
  }

  .page-gach-marble .header a {
    font-size: 13px;
    text-decoration: none;
    /* color: #007bff; */
  }

  .page-gach-marble .header a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 1024px) {
  .page-gach-marble .product-gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .page-gach-marble .product img {
    max-width: 160px;
    max-height: 160px;
  }
}