/* CSS สำหรับจัดการรูปภาพใน Card */
.card-img-cover {
    object-fit: contain; /* ให้ภาพแสดงเต็มและไม่ถูกยืด/ตัด */
    height: 120px;
    width: 100px;
    max-width: 100%;
}

/* CSS สำหรับ Hover Effect */
.card-hover-effect {
    /* ทำให้การเปลี่ยนแปลงต่างๆ ดูราบรื่น */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    /* กำหนด Curser เป็น Pointer เพื่อให้รู้ว่าคลิกได้ */
    cursor: pointer; 
}

.card-hover-effect:hover {
    /* ขยับการ์ดขึ้นเล็กน้อยเมื่อถูกชี้ */
    transform: translateY(-5px); 
    /* เพิ่มความเข้มของเงา (Shadow) ให้ดูเด่นขึ้น */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; 
}