/* ==================================================================================================
   ẢNH: khung giữ chỗ (placeholder) + lazy load

   Vấn đề: rất nhiều ảnh trên site render dạng <img class="lazyload" data-src="..."> — KHÔNG có
   thuộc tính src. Trình duyệt coi đó là ảnh hỏng và vẽ ICON ẢNH VỠ cho tới khi script lazyload
   chạy xong. Ảnh nào chết link thật (file đã xoá trong admincp) thì icon vỡ nằm đó vĩnh viễn.

   Cách xử lý ở đây: mọi ảnh chưa tải xong / tải hỏng đều được phủ một nền xám nhạt có biểu tượng
   ảnh mờ — trông như khung giữ chỗ, không phải như lỗi. Nền nằm ở background nên tự lộ ra khi
   ảnh chưa có gì để vẽ, và tự bị ảnh thật che đi khi tải xong.
   ================================================================================================== */

/* Biểu tượng "ảnh" mờ, nhúng thẳng dạng data URI (không tốn thêm một request nào). */
img.lazyload,
img[data-src]:not([src]),
img.img-broken {
    background-color: #f2f4f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23c3cad2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
    /* ảnh nhỏ thì icon 48px sẽ tràn — thu nhỏ theo khung */
    min-height: 1px;
}

/* Ảnh hỏng thật (404): ẩn phần <img> vỡ đi, chỉ còn lại nền giữ chỗ ở trên.
   Đặt màu chữ trong suốt để alt text không hiện ra kèm icon vỡ. */
img.img-broken {
    color: transparent;
    font-size: 0;
}

/* Ảnh đã tải xong thì bỏ nền giữ chỗ, tránh nền xám lộ ra sau ảnh PNG trong suốt. */
img.img-loaded {
    background-image: none;
    background-color: transparent;
}