/* Reset mặc định */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Thiết lập font và màu nền chung */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #003087; /* Màu xanh dương đậm làm nền chính */
    color: #ffffff; /* Màu chữ trắng để nổi bật */
    line-height: 1.6;
}

/* Header */
header {
    background-color: #ffffff; /* Nền trắng cho logo nổi bật */
    padding: 20px 0;
}

header img {
    transition: transform 0.3s ease-in-out;
}

header img:hover {
    transform: scale(1.1); /* Phóng to nhẹ khi hover */
}

/* Banner */
#banner-section {
    margin-bottom: 30px; /* Khoảng cách với section tiếp theo */
}

#banner-section img {
    animation: bannerFade 5s infinite; /* Animation cho banner */
}

/* Animation cho banner */
@keyframes bannerFade {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* Main content */
main {
    background-color: rgba(255, 255, 255, 0.1); /* Nền trắng mờ để nổi bật nội dung */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Đổ bóng cho nội dung */
    padding: 20px;
    border-radius: 10px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    color: #FFD700; /* Màu vàng cho tiêu đề chính */
    font-size: 2.5rem;
    margin-bottom: 30px;
}

h2 {
    font-family: 'Roboto', sans-serif;
    color: #FFD700; /* Màu vàng cho tiêu đề phụ */
    font-size: 1.8rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Khoảng cách giữa các section */
#intro-content, #image-section, #data-table, #main-content {
    margin-bottom: 30px;
}

/* Liên kết */
a {
    color: #FFD700; /* Màu vàng cho liên kết */
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #ffffff; /* Chuyển sang trắng khi hover */
    transform: scale(1.05); /* Phóng to nhẹ */
    text-decoration: underline; /* Gạch chân khi hover */
}

/* Ảnh minh họa */
#image-section img {
    transition: transform 0.3s ease-in-out;
    border: 2px solid #FFD700; /* Viền vàng */
}

#image-section img:hover {
    transform: rotate(5deg) scale(1.05); /* Xoay nhẹ và phóng to khi hover */
}

#image-section p {
    color: #ffffff; /* Chữ trắng cho chú thích ảnh */
    font-style: italic;
}

/* Bảng dữ liệu */
#data-table table {
    background-color: #ffffff; /* Nền trắng cho bảng */
    color: #003087; /* Chữ xanh dương đậm */
    border-radius: 10px;
    overflow: hidden;
}

#data-table th {
    background-color: #FFD700; /* Đầu bảng màu vàng */
    color: #003087;
    font-weight: bold;
}

#data-table td, #data-table th {
    padding: 10px;
    text-align: center;
}

/* Nội dung chính */
#main-content p {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Footer */
footer {
    background-color: #ffffff; /* Nền trắng cho footer */
    color: #003087; /* Chữ xanh dương đậm */
    padding: 20px 0;
}

footer img {
    transition: transform 0.3s ease-in-out;
}

footer img:hover {
    transform: scale(1.1); /* Phóng to nhẹ khi hover */
}

footer p {
    margin-top: 15px;
}

footer a {
    color: #003087; /* Màu xanh dương đậm cho liên kết footer */
    text-decoration: underline; /* Gạch chân liên kết trong footer */
}

footer a:hover {
    color: #FFD700; /* Chuyển sang vàng khi hover */
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    main {
        padding: 15px;
    }

    #data-table table {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    #image-section img {
        max-width: 100%;
    }
}