/* --- CẤU HÌNH CHUNG --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Mali', cursive;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }

        h1, h2, h3, .nav-link, .btn {
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* --- BANNER --- */
        .banner {
            width: 100%;
            min-height: 480px; 
            background: linear-gradient(135deg, #81D4FA 0%, #B39DDB 100%);
            display: flex;
            justify-content: center;
            align-items: center;     
            gap: 60px;               
            position: relative;
            overflow: hidden;
            padding: 0 20px;
        }

        .banner-content {
            flex: 0 1 550px; 
            z-index: 2;
            text-align: left;
        }

        .banner-content h1 {
            font-size: 3.5rem;
            text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
            margin-bottom: 5px;
            line-height: 1.2;
            animation: fadeInDown 1s ease-out;
        }

        .banner-content p {
            font-size: 1.4rem;
            font-weight: 600;
            opacity: 0.95;
        }

        .btn-cta {
            background: #FF9800;
            color: white;
            padding: 15px 45px;
            border-radius: 50px;
            font-size: 1.3rem;
            box-shadow: 0 5px 0 #E65100;
            transition: transform 0.1s;
            display: inline-block;
            font-weight: bold;
        }
        .btn-cta:active { transform: translateY(4px); box-shadow: none; }

        .banner-image {
            position: relative; 
            flex: 0 1 450px;
            z-index: 1;
            animation: slideUp 1s ease-out;
        }

        .banner-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 20px;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); 
        }

        @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes fadeInDown { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0); } }

        /* --- ABOUT --- */
        .about-section {
            padding: 60px 5%;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            /* Thêm khoảng cách đệm để menu sticky không che mất nội dung */
            scroll-margin-top: 100px; 
        }

        .about-img img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 10px 10px 0 #E3F2FD;
        }

        .about-text h2 { font-size: 2.5rem; color: #1565C0; margin-bottom: 20px; }
        .about-text p { font-size: 1.1rem; margin-bottom: 15px; color: #555; text-align: justify; }

        /* --- FOOTER --- */
        footer {
            background-color: #263238;
            color: white;
            padding: 40px 5%;
            text-align: center;
        }
        
        footer h3 { color: #FF9800; margin-bottom: 15px; }
        footer p { margin-bottom: 10px; font-size: 1rem; }
        
        /* --- RESPONSIVE MEDIA QUERIES --- */
        @media (max-width: 900px) {
            .banner {
                flex-direction: column;
                text-align: center;
                gap: 30px;
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .banner-content { flex: auto; width: 100%; text-align: center; }
            .banner-content h1 { font-size: 2.5rem; }
            .banner-image { flex: auto; width: 80%; max-width: 350px; }
        }

        @media (max-width: 768px) {
            .about-section { 
                grid-template-columns: 1fr; /* Chuyển thành 1 cột */
                gap: 30px;
                text-align: center; /* Căn giữa nội dung */
            }
            
            .about-img { 
                order: -1; /* Đưa ảnh lên trên */
                margin-bottom: 20px;
            }

            .about-text p {
                text-align: center; /* Căn giữa đoạn văn */
            }

            .about-text ul {
                text-align: left; /* List vẫn căn trái cho dễ đọc */
                display: inline-block; /* Để list nằm giữa khối */
            }
        }

/* --- STYLES FROM HEADER_MENU.PHP --- */
header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky; /* Giữ menu dính trên cùng */
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    color: #2196F3;
    font-weight: 900;
    text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}

.logo img { height: 50px; width: auto; object-fit: contain; }

.nav-menu { display: flex; gap: 20px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #555;
    padding: 10px 15px;
    transition: 0.3s;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.nav-link:hover, .nav-link.active { color: #FF9800; }

.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 200px; border-radius: 10px; overflow: hidden;
    border-top: 3px solid #FF9800; list-style: none; padding: 0;
    z-index: 1001;
}
.dropdown-menu li a { display: block; padding: 10px 20px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.dropdown-menu li a:hover { background-color: #FFF3E0; color: #E65100; }
.nav-item:hover .dropdown-menu { display: block; }

.hamburger { display: none; cursor: pointer; font-size: 2rem; color: #2196F3; }

@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-menu {
        position: fixed; left: -100%; top: 70px; gap: 0;
        flex-direction: column; background-color: white; width: 100%;
        text-align: center; transition: 0.3s; box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }
    .nav-menu.active { left: 0; }
    .dropdown-menu { position: static; box-shadow: none; background: #f9f9f9; display: none; }
    .nav-item.active .dropdown-menu { display: block; }
}

/* --- UTILITY CLASSES FROM INLINE STYLES --- */
.text-orange { color: #FF9800; }
.text-blue { color: #2196F3; }
.text-danger { color: red; }
.font-bold { font-weight: bold; }
.dropdown-menu-right { left: auto; right: 0; }
.btn-login {
    background: #2196F3;
    color: white !important; /* Dùng !important để ghi đè các style khác của nav-link */
    border-radius: 20px;
    padding: 8px 20px !important;
    margin-left: 10px;
}
.btn-login:hover {
    color: white !important;
    filter: brightness(110%);
}