/**
 * Ratio classes cho hiển thị ảnh (tương thích Bootstrap 5 --bs-aspect-ratio).
 * Dùng kèm .ratio và .object-fit-cover trên img.
 */
.ratio-2x3 {
  --bs-aspect-ratio: 150%;
  aspect-ratio: 2/3;
}
.ratio-9x16 {
  --bs-aspect-ratio: 177.77%;
  aspect-ratio: 9/16;
}
/* 16:9 */
.ratio-landscape {
  --bs-aspect-ratio: 56.25%;
  aspect-ratio: 16/9;
}
/* 2:3 (portrait) */
.ratio-portrait {
  --bs-aspect-ratio: 150%;
  aspect-ratio: 2/3;
}
/* 1:1 */
.ratio-square {
  --bs-aspect-ratio: 100%;
  aspect-ratio: 1/1;
}
/* Wrapper ratio: position relative để con absolute lấp đầy */
.responsive-img-wrap.ratio {
  position: relative;
  display: block;
  width: 100%;
}
/* Đảm bảo ảnh không méo trong khung ratio */
.ratio img.object-fit-cover,
.object-fit-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Picture trong ratio box lấp đầy (Bootstrap 5 style) */
.responsive-img-wrap.ratio {
  overflow: hidden;
  background-size: cover;
  background-position: center;
  /* Nền xám khi không có ảnh hoặc ảnh lỗi, tránh sụp layout */
  background-color: #e5e7eb;
}
.responsive-img-wrap.ratio.glide-no-image,
.responsive-img-wrap.ratio.glide-load-failed {
  background-color: #e5e7eb;
  background-image: none !important;
}
.responsive-img-wrap.ratio.glide-load-failed picture img {
  display: none !important;
}
.responsive-img-wrap.ratio > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.responsive-img-wrap.ratio > picture > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  pointer-events: auto;
}

/* Category product/post/design: bỏ padding-bottom cũ để khung = đúng ratio (không thừa vùng xám) */
.category-products .product-thumbnail .image_thumb,
.item_product_main2 .product-action2 .image_thumb,
.layout-blog .block-thumb .thumb,
.layout-collection .product-thumbnail .image_thumb,
.item-blog .block-thumb .thumb,
.list-blogs .item-blog .block-thumb .thumb {
  padding-bottom: 0 !important;
  height: auto !important;
  display: block !important;
  min-height: 0 !important;
  position: relative !important;
}
.category-products .product-thumbnail .image_thumb .responsive-img-wrap,
.item_product_main2 .product-action2 .image_thumb .responsive-img-wrap,
.layout-blog .block-thumb .thumb .responsive-img-wrap,
.layout-collection .product-thumbnail .image_thumb .responsive-img-wrap,
.item-blog .block-thumb .thumb .responsive-img-wrap {
  height: auto !important;
  max-width: 100%;
}
/* Ghi đè object-fit contain / width auto từ category_product, main, category, post_blog */
.item_product_main2 .product-action2 .image_thumb .responsive-img-wrap img,
.product-action .product-thumbnail .image_thumb .responsive-img-wrap img,
.layout-blog .block-thumb .thumb .responsive-img-wrap img,
.item-blog .block-thumb .thumb .responsive-img-wrap img,
.list-blogs .item-blog .block-thumb .thumb .responsive-img-wrap img {
  width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}