*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f6f7fb;
color:#333;
}

.container {
    max-width: 1200px; /* Thay width thành max-width */
    width: 90%;        /* Để có khoảng trống 2 bên trên mobile */
    margin: auto;
}

/* NAVBAR */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
font-weight:700;
font-size:22px;
}

.logo span{
color:#f6a623;
}

.menu a{
margin:0 15px;
text-decoration:none;
color:#333;
font-weight:500;
}

.btn-primary{
background:#f6a623;
color:white;
padding:10px 18px;
border-radius:25px;
text-decoration:none;
}

/* HERO */

.hero{
height:600px;
background:url("https://images.unsplash.com/photo-1523240795612-9a054b0db644") center/cover;
position:relative;
color:white;
}

.hero::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.55);
}

.hero-content{
position:relative;
z-index:2;
padding-top:120px;
max-width:600px;
}

.hero h1{
font-size:60px;
line-height:1.2;
margin-bottom:20px;
}

.hero h1 span{
color:#f6a623;
}

.hero p{
margin-bottom:25px;
}

.hero-buttons a{
margin-right:15px;
}

/* STATS */

.stats{
display:flex;
gap:40px;
margin-top:30px;
}

.stat{
font-size:18px;
}

.stat strong{
display:block;
font-size:28px;
}

/* PROGRAM */

.section{
padding:80px 0;
text-align:center;
}

.section h2{
font-size:34px;
margin-bottom:10px;
}

.section p{
color:#777;
margin-bottom:40px;
}

.program-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.card{
padding:30px;
border-radius:15px;
color:white;
text-align:left;
}

.card h3{
margin-bottom:10px;
}

.ielts{background:linear-gradient(135deg,#ff5f6d,#ffc371);}
.toeic{background:linear-gradient(135deg,#4776E6,#8E54E9);}
.toefl{background:linear-gradient(135deg,#43cea2,#185a9d);}
.cambridge{background:linear-gradient(135deg,#c471ed,#f64f59);}

/* WHY */

.why{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.why img{
width:100%;
border-radius:15px;
}

.why-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

.why-item{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* TESTIMONIAL */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.testimonial{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
text-align:left;
}

/* CTA */

.cta{
background:#0b1c3d;
color:white;
text-align:center;
padding:80px 20px;
}

.cta h2{
font-size:36px;
margin-bottom:10px;
}

.cta span{
color:#f6a623;
}

/* FOOTER */

footer{
background:#050d25;
color:#ccc;
padding:60px 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

footer h4{
margin-bottom:15px;
color:white;
}

footer p,footer a{
font-size:14px;
color:#ccc;
text-decoration:none;
display:block;
margin-bottom:8px;
}

.copyright{
text-align:center;
margin-top:40px;
font-size:14px;
color:#777;
}

.menu a{
margin:0 15px;
text-decoration:none;
color:#333;
font-weight:500;
position:relative;
transition:0.3s;
}

/* COURSE FILTER */

.course-filter{
display:flex;
justify-content:center;
gap:10px;
margin-top:-30px;
margin-bottom:40px;
}

.filter-btn{
border:none;
padding:10px 20px;
border-radius:25px;
background:#e9ecef;
cursor:pointer;
font-weight:500;
transition:0.3s;
}

.filter-btn:hover{
background:#d6dbe1;
}

.filter-btn.active{
background:#243b63;
color:white;
}

/* Hover đổi màu */
.menu a:hover{
color:#F2D479;
}

/* Gạch chân animation */
.menu a::after{
content:"";
position:absolute;
width:0;
height:2px;
left:0;
bottom:-4px;
background:#f6a623;
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}

/* POPUP */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.popup-box{
background:white;
padding:40px;
border-radius:15px;
text-align:center;
width:320px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
animation:popupFade 0.4s ease;
}

.popup-icon{
font-size:40px;
color:#4CAF50;
margin-bottom:10px;
}

@keyframes popupFade{
from{
transform:scale(0.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

@media (max-width: 768px) {
    /* Navbar: Chuyển menu thành dạng dọc hoặc ẩn bớt */
    nav {
        flex-direction: column;
        gap: 15px;
    }
    
    .menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* Hero: Giảm cỡ chữ tiêu đề */
    .hero h1 {
        font-size: 32px;
    }

    /* Grid: Chuyển từ 4 cột về 1 hoặc 2 cột */
    .program-grid, .testimonial-grid, .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Why Section: Chuyển ảnh lên trên, chữ xuống dưới */
    .why {
        grid-template-columns: 1fr;
    }
}