/* Ảnh tải lười (loading="lazy"): hiện một tấm ảnh chờ dùng chung cho tới khi ảnh thật vẽ xong.
   Ảnh chưa tải có thể rộng 0 điểm ảnh (width:auto) nên không vẽ nền lên chính thẻ img được:
   - khung thẻ brand (.hm-card-media, đã chừa sẵn chỗ hình vuông): vẽ ảnh chờ ở khung, ẩn đi khi ảnh bên trong đã tải (:has);
   - các ảnh có kích thước cố định (logo thanh toán, ảnh sản phẩm...): vẽ ảnh chờ lên chính thẻ img.
   JS pk-lazy.js thêm class .pk-loaded cho ảnh khi tải xong hoặc lỗi (bắt cả ảnh do JS tạo sau). */
img[loading="lazy"]:not(.pk-loaded) {
  background: transparent url(//cdn.premiumkey.co/image/loading.svg) center / 28px 28px no-repeat;
}
img[loading="lazy"].pk-loaded { background: none; }

/* Khung thẻ brand: nền chờ nằm ở khung (giữ trên nền trắng của khung) */
.hm-card-media:has(> img[loading="lazy"]:not(.pk-loaded)) {
  background-image: url(//cdn.premiumkey.co/image/loading.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
}
.hm-card-media > img[loading="lazy"]:not(.pk-loaded) { background: none; }

@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"]:not(.pk-loaded),
  .hm-card-media:has(> img[loading="lazy"]:not(.pk-loaded)) { background-image: none; }
}