/* style.css */

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #121212;
    color: #E0E0E0;
}

.hero-bg {
    background-image: linear-gradient(to bottom, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 1)), url('img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.brand-green {
    color: #1DB954;
}

.bg-brand-green {
    background-color: #1DB954;
}

.border-brand-green {
    border-color: #1DB954;
}

.card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(29, 185, 84, 0.1);
}

.section-title {
    font-weight: 900;
    font-size: 2.5rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === PHẦN CẬP NHẬT MỚI CHO HÌNH ẢNH DỰ ÁN === */

/* Khung chứa ảnh */
#projects .group {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 0.5rem; /* Bo góc */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Thêm bóng đổ nhẹ ban đầu */
    border: 2px solid transparent; /* Thêm viền trong suốt để chống giật layout khi hover */
}

/* Ảnh bên trong */
#projects .group img {
    transition: transform 0.4s ease, filter 0.4s ease;
    border-radius: 0.5rem; /* Bo góc cho ảnh */
}

/* Lớp phủ chứa text */
#projects .group .overlay {
    /* Lớp nền gradient chỉ ở dưới để đọc chữ, không che toàn bộ ảnh */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 80%);
    transition: opacity 0.4s ease;
    opacity: 1; /* Luôn hiển thị để đọc chữ */
}

/* --- HIỆU ỨNG KHI DI CHUỘT --- */

/* Khung ảnh khi hover */
#projects .group:hover {
    transform: translateY(-8px); /* Nhấc nhẹ ảnh lên */
    box-shadow: 0 0 35px rgba(29, 185, 84, 0.5); /* Tăng hiệu ứng toả sáng */
    border-color: #1DB954; /* CẬP NHẬT: Hiện viền màu xanh lá */
}

/* Ảnh khi hover */
#projects .group:hover img {
    transform: scale(1.08); /* CẬP NHẬT: Tăng độ phóng to */
    filter: brightness(1.1); /* Làm ảnh sáng và rực rỡ hơn */
}