/* ============================================
   PRODUCTS.CSS — 3 ô sản phẩm + hover crossfade + popup giá
   Sửa: cách 2 ảnh chuyển đổi, vị trí box giá, transition
   ============================================ */

/* === Crossfade 2 ảnh trong card sản phẩm === */
.crossfade-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.32, 0, 0.26, 1);
  z-index: 0;
}
.crossfade-img.visible {
  opacity: 1 !important;
  z-index: 1;
}

/* Khi hover vào card → ảnh thứ 2 (.bottom) hiện lên */
@media (pointer: fine) {
  .hero-prod-card:hover .crossfade-img.bottom,
  .hero-prod-card:focus .crossfade-img.bottom {
    opacity: 1;
    z-index: 2;
  }
}

/* === Box giá popup === */
/* Mặc định mobile: luôn hiển thị (không có hover trên touch) */
/* Desktop: ẩn → hover/focus mới hiện */
.prod-card-price {
  /* Style tổng thể đã set inline trong HTML qua Tailwind class */
  transition: opacity 0.25s cubic-bezier(0.32, 0, 0.26, 1),
              transform 0.25s cubic-bezier(0.32, 0, 0.26, 1);
}