/* ============================================================
   HÒA CƯỜNG — SVG category icons fallback (data-cat driven)
   ============================================================ */

/* Ensure image area has min height */
.product-small .box-image,
.product-small .image-fade_in_back {
  min-height: 140px !important;
  background: #fff !important;
  position: relative;
}

/* Card icon fallback layer behind real img */
.product-small .box-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #f8fafc;
  background-image: var(--card-icon);
  background-size: 44% 44%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
  z-index: 0;
  transition: opacity 200ms;
}
.product-small:hover .box-image::before { opacity: 0.32; }
.product-small .box-image img,
.product-small .box-image picture {
  position: relative;
  z-index: 1;
}

/* Default fallback */
.product-small {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.4'%3E%3Cpath d='M20 7L12 3 4 7v10l8 4 8-4V7z'/%3E%3Cpath d='M12 11l8-4M12 11L4 7M12 11v10'/%3E%3C/svg%3E");
}

/* Per data-cat icons */
.product-small[data-cat="bon-cau"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v6H7zM5 10h14l-2 10H7zM10 14v2M14 14v2'/%3E%3C/svg%3E");
}
.product-small[data-cat="sen"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Cpath d='M12 7.5v6'/%3E%3Cpath d='M6 19h12l-1-5H7zM10 21v1M14 21v1M9 16v1M12 16v1M15 16v1'/%3E%3C/svg%3E");
}
.product-small[data-cat="bon-tam"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Cpath d='M2 12h20v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3z'/%3E%3Cpath d='M6 12V6a2 2 0 0 1 2-2c1.5 0 2 1 2 2'/%3E%3Cpath d='M5 18v2M19 18v2'/%3E%3C/svg%3E");
}
.product-small[data-cat="dieu-hoa"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2' y='6' width='20' height='8' rx='2'/%3E%3Cpath d='M6 14v2M10 14v2M14 14v2M18 14v2'/%3E%3Cpath d='M9 18l-1 2M13 18l-1 2M17 18l-1 2'/%3E%3C/svg%3E");
}
.product-small[data-cat="hut-mui"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Cpath d='M3 7l4-3h10l4 3v4H3zM5 11v8h14v-8'/%3E%3Cpath d='M9 14v2M12 14v2M15 14v2'/%3E%3C/svg%3E");
}
.product-small[data-cat="bep"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8' cy='12' r='2.5'/%3E%3Ccircle cx='16' cy='12' r='2.5'/%3E%3C/svg%3E");
}
.product-small[data-cat="guong"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Crect x='5' y='3' width='14' height='18' rx='3'/%3E%3Cpath d='M9 7l3 3M9 7v4'/%3E%3C/svg%3E");
}
.product-small[data-cat="den"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 1 4 10.5c-.5.5-1 1.5-1 2.5H9c0-1-.5-2-1-2.5A6 6 0 0 1 12 3z'/%3E%3C/svg%3E");
}
.product-small[data-cat="nang-luong"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Crect x='4' y='8' width='16' height='12'/%3E%3Cpath d='M4 14h16M8 8v12M12 8v12M16 8v12'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M18 1v1M18 8v1M22 5h-1M14 5h1'/%3E%3C/svg%3E");
}
.product-small[data-cat="ong"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Cpath d='M3 12h18M5 8h14v8H5z'/%3E%3Cpath d='M9 8v-3h6v3M9 16v3h6v-3'/%3E%3C/svg%3E");
}
.product-small[data-cat="lavabo"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Cpath d='M4 14h16v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-3z'/%3E%3Cpath d='M12 14V6M10 6h4'/%3E%3C/svg%3E");
}
.product-small[data-cat="phu-kien"] {
  --card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4d8c' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.65 1.65 0 0 0-1.8-.3 1.65 1.65 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.65 1.65 0 0 0 .3-1.8 1.65 1.65 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.65 1.65 0 0 0 1.8.3H9a1.65 1.65 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.65 1.65 0 0 0 1 1.5 1.65 1.65 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.65 1.65 0 0 0-.3 1.8V9a1.65 1.65 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.65 1.65 0 0 0-1.5 1z'/%3E%3C/svg%3E");
}

/* Fade icon when real image loaded */
.product-small img.loaded[src*="/wp-content/"] ~ .box-text,
.product-small:has(img.loaded[src*="/wp-content/"]) .box-image::before {
  opacity: 0.05 !important;
}

/* ============================================================
   FORCE: product card minimum height (fix collapsed cards in dense sections)
   ============================================================ */
.product-small.col,
.product-small {
  min-height: 360px !important;
}
.product-small .box-text {
  display: block !important;
}
.product-small .product-title,
.product-small .product-title a {
  display: block !important;
  visibility: visible !important;
}
.product-small .box {
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-small .box-image {
  flex: 0 0 auto !important;
}
.product-small .box-text {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}