body {
    scroll-behavior: smooth;
}

.serif {
    font-family: 'Playfair Display', serif;
}

/* .hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/thumbnail.JPG');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
} */

.hero-bg {
    background-image: url('../images/thumbnail.JPG'); /* Đảm bảo đường dẫn này đúng */
    
    /* CÁC THUỘC TÍNH QUAN TRỌNG ĐỂ SỬA LỖI SCALE */
    
    /* 1. Đảm bảo hình phủ kín, không bị lặp và không bị méo */
    background-size: cover; 
    
    /* 2. Giữ tâm hình ở giữa, để khi crop trên màn hình dọc vẫn đẹp */
    background-position: center; 
    
    /* 3. Ngăn lặp lại hình nếu màn hình lớn hơn hình */
    background-repeat: no-repeat; 
    
    /* 4. Fix lỗi trên một số trình duyệt iOS cũ */
    background-attachment: scroll; 
    
    /* 5. (Tùy chọn) Thêm lớp phủ mờ để chữ trắng hiện rõ hơn */
    position: relative;
}

/* Thêm lớp phủ nếu cần để chữ nổi bật hơn trên nền ảnh */
.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Màu đen mờ 30% */
    z-index: 1; /* Nằm dưới chữ nhưng trên hình nền */
}

/* Đảm bảo nội dung chữ nằm trên lớp phủ */
.hero-bg > div {
    position: relative;
    z-index: 2;
}

.fade-in {
    animation: fadeInUp 2s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.gallery-img {
    filter: grayscale(100%);
    transition: all 0.8s ease;
}

.gallery-img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.event-card {
    transition: all 0.3s ease;
}