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

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

.container{
width:1200px;
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;
}

/* HEADER */

.page-header{
background:#243b63;
color:white;
text-align:center;
padding:80px 0 60px;
}

.page-header h1{
font-size:40px;
margin-bottom:10px;
}

.page-header p{
opacity:0.8;
margin-bottom:30px;
}

/* COURSE GRID */

.course-section{
padding:60px 0;
}

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

.course-card{
background:white;
border-radius:14px;
padding:25px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
display:flex;
flex-direction:column;
justify-content:space-between;
}

.course-card h3{
margin-bottom:5px;
}

.level{
color:#f6a623;
font-size:14px;
margin-bottom:10px;
}

.course-meta{
font-size:14px;
color:#666;
margin-bottom:15px;
}

.course-card ul{
margin-bottom:20px;
}

.course-card ul li{
font-size:14px;
margin-bottom:8px;
}

.price{
font-size:20px;
font-weight:600;
margin-bottom:10px;
}

.btn-register{
background:#0b1c3d;
color:white;
padding:10px 20px;
border-radius:20px;
text-align:center;
text-decoration:none;
display:inline-block;
}

/* FOOTER */

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

.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;
}

@media (max-width: 768px) {
    .course-grid {
        grid-template-columns: 1fr; /* Xếp chồng các khóa học lên nhau */
    }
    
    .page-header h1 {
        font-size: 28px;
    }
}