.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.product-img {
  height: 220px;
  object-fit: contain;
  background-color: #fff;
}

.product-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.product-card:hover .product-hover {
  opacity: 1;
}

.product-hover .btn {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.product-card:hover .product-hover .btn {
  opacity: 1;
  transform: translateY(0);
}

/* Style riêng cho section sản phẩm liên quan */
.related-products .product-img {
  height: 180px;
}
.related-products .product-card {
  padding: 6px;
}
.related-products .card-body {
  font-size: 0.9rem;
}

/* ===========================
   Make product image + body equal height
   Put this at the end of your CSS to override older rules
   =========================== */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* fixed area for image */
.product-image {
  flex: 0 0 auto;
  height: 220px;               /* chiều cao vùng ảnh cố định */
  display: block;
  overflow: hidden;
  background: var(--bg-light);
  border-radius: 0.5rem;
  position: relative;
  text-align: center;
}

/* make the img fill the container so object-fit works */
.product-image img,
.product-image .product-img {
  width: 100% !important;      /* đảm bảo chiếm ngang của khung */
  height: 100% !important;     /* đảm bảo chiếm dọc của khung */
  object-fit: contain !important; /* giữ tỉ lệ, hiển thị toàn bộ ảnh */
  object-position: center center;
  display: block;
  max-width: none;             /* override max-width rules nếu có */
  max-height: none;            /* override max-height rules nếu có */
}

/* smaller variant for related-products */
.related-products .product-image {
  height: 180px;
}

/* responsive: giảm cao trên mobile */
@media (max-width: 576px) {
  .product-image { height: 160px; }
  .related-products .product-image { height: 140px; }
}