/* ==========================================================================
Global Lazy Load - hieu ung spinner xoay tron khi anh chua load xong
Ap dung tu dong cho toan bo ![]()
tren site (xem js/lazyload-global.js)
========================================================================== */
img.js-lazy-img {
background-color: #f7f7f7;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: center;
background-size: 32px 32px;
/* Anh chua tai -> can kich thuoc toi thieu de thay spinner, neu the img
khong co width/height/aspect-ratio rieng trinh duyet co the render cao
0px, lam mat hieu ung */
min-height: 60px;
}
img.js-lazy-img.js-lazy-loaded {
background: none;
min-height: 0;
animation: js-lazy-fadein 0.35s ease;
}
@keyframes js-lazy-fadein {
from {
filter: brightness(0.9) blur(2px);
}
to {
filter: none;
}
}
/* Anh load loi -> tat shimmer, tranh giu hieu ung mai */
img.js-lazy-img.js-lazy-error {
opacity: 1;
animation: none;
background: #eceff1
url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' fill='%23b0bec5'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E")
center/32px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
img.js-lazy-img {
background-image: none;
}
}