/** 
* 
* lazyImageLoading 
*/

/* รูปที่ยังไม่โหลด หรือกำลังโหลด */
.lazy-load {
    filter: blur(10px);
    transition: filter 0.5s ease-in-out;
    opacity: 0.3;
    background-color: #f0f0f0; /* สีพื้นหลังระหว่างรอ */
}

/* รูปที่โหลดเสร็จแล้ว (จะถูกเติม Class นี้ด้วย JS) */
.lazy-load.loaded {
    filter: blur(0);
    opacity: 1;
    background:#FFF;
}

.img-thumbnail-lazy-load {
     
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

}



/* สร้างตัวหมุนด้วย ::after */
.img-thumbnail-lazy-load::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top: 3px solid #3498db; /* สีที่เข้ากับ itbstock */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.lazy-bg {
    opacity: 0.5; /* หรี่ไว้ก่อนรูปมา */
    transition: opacity 0.8s ease-in-out, background-image 0.3s ease-in;
    background-size: cover !important;
    background-position: center;
    background-color:#CCC;
}

.lazy-bg.bg-loaded {
    opacity: 1; /* พอรูปมาแล้วก็ให้สว่างปกติ */
}

/** 
* End  lazyImageLoading 
*/