body{
font-family: "Prompt", sans-serif;
margin:0;
background:#0d4a8c;
color:white;
}
/* เมนูด้านบน */
.navbar{
    position: sticky;
    top: 0;
    z-index: 999;
    background: #0d4a8c;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.nav-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}

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

nav ul{
    list-style:none;
    display:flex;
    gap:25px;
}

nav ul li a{
    text-decoration:none;
    color:white;
    font-size:16px;
    transition:0.3s;
}

nav ul li a:hover{
    color:#ffd000;
}
.banner{
width:100%;
}

.hero{
text-align:center;
padding:40px;
background:linear-gradient(#5fa9e6,#0d4a8c);
}

.hero h1{
font-size:50px;
margin:10px;
}

.hero h2{
font-size:28px;
}

.subtitle{
opacity:0.9;
}

.promo{
display:flex;
justify-content:center;
gap:40px;
margin-top:30px;
}

.promo-text{
background:rgba(255,255,255,0.2);
padding:20px;
border-radius:10px;
font-size:22px;
}

.price{
background:#ff3d3d;
padding:20px;
border-radius:10px;
font-size:20px;
}

.price b{
font-size:36px;
}

.content{
display:flex;
padding:50px;
gap:40px;
}

.left,.right{
flex:1;
}

h3{
background:#1b75d1;
padding:10px 20px;
border-radius:20px;
display:inline-block;
}

ul{
line-height:1.8;
}

.register{
text-align:center;
padding:40px;
background:#0b3a70;
}

.batch{
margin:10px;
font-size:20px;
}

.btn{
display:inline-block;
margin-top:20px;
background:#D11A1A;
padding:15px 30px;
border-radius:30px;
color:white;
text-decoration:none;
font-size:20px;
}

.qr img{
width:120px;
margin-top:20px;
}

footer{
background:#08315d;
padding:30px;
}

.contact{
display:flex;
justify-content:center;
gap:60px;
}

.person{
line-height:1.8;
}


.content-box {
    background: #fff;
    margin: 25px;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 10px #ccc;
}

.content-box h2 {
    color: #0057b8;
}


footer{
background:#08315d;
color:white;
padding:40px 20px;
text-align:center;
}

.contact-title{
margin-bottom:20px;
}

.footer-container{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
}

.footer-logo img{
width:100px;
height:auto;
margin:5px;
}
.footer-logo2 img{
width:70px;
height:auto;
margin:5px;
}
.person{
line-height:1.8;
font-size:15px;
}


@media (max-width:768px){

.content{
flex-direction:column;
padding:20px;
}

.left{
margin-bottom:30px;
}

}