:root{
  --blue:#0b66c3;
  --light:#e3effa;		/* สีพื้นหลังเว็บไซต์ */
  --card:#ffffff;
  --accent:#ffd166;
  --muted:#556;
}
*{box-sizing:border-box;font-family: "Kanit", "Noto Sans Thai", Arial, sans-serif}
body{margin:0;background:var(--light);color:#123;}
.header{background:transparent;padding:20px                                                                                                                             ;border-bottom:6px solid rgba(11,102,195,0.03)}
.container{max-width:1140px;margin:0 auto;padding:0 18px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:120px;height:120px;		/* --- ปรับโลโก้ใหญ่ขึ้น --- */
border-radius:80px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 100px rgba(11,66,120,0.06)}
.logo img{height:120px;  width:120px;			/* --- ปรับโลโก้ใหญ่ขึ้น --- */
    border-radius:100%;
    background:#ffffff; 		
    padding:1px;
    border:3px solid #ffffff;
    box-shadow:0 0 20px rgba(0,0,0,0.35);}
.site-title{font-size:30px;font-weight:800;margin:0}
.site-sub{font-size:25px;
    font-weight:700;
    color:#FFFF00;
    margin-top:8px}
.title h5{margin:0;font-size:30px;color:var(--blue)}
.title p{margin:4px 0 0;color:var(--muted);font-size:25px} 
.header-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{background:var(--blue);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.btn.secondary{background:var(--accent);color:#111}

.nav{background:var(--blue);margin-top:12px}
.nav .links{display:flex;gap:18px;justify-content:center;align-items:center;padding:12px 0}
.nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:6px;font-weight:600}

.layout{display:grid;grid-template-columns:300px 1fr 320px;gap:20px;margin:22px 0}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 8px 22px rgba(11,66,120,0.04)}
.left .card h3{margin-top:0}
.course-list li{margin-bottom:8px}
.slideshow{height:340px;border-radius:12px;overflow:hidden;position:relative;background:#fff;display:flex;align-items:center;justify-content:center}
.slideshow img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px}

.feature-buttons{display:flex;gap:12px;justify-content:center;margin:18px 0}
.feature-buttons a{padding:10px 18px;border-radius:8px;border:1px solid var(--blue);background:#fff;color:var(--blue);text-decoration:none;font-weight:700}

.footer{padding:22px 0;text-align:center;color:var(--muted);margin-top:30px}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr;padding:0 12px}
  .nav .links{flex-wrap:wrap}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}


.award-box{
    background: #ffffff;
    padding: 30px 35px;
    margin: 30px 0;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(11,66,120,0.08);
    text-align: center;
}

.award-box h3{
    font-size: 26px;
    font-weight: 800;
    color: #0b66c3;
    margin-bottom: 10px;
}

.award-box p{
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 22px;
}

.award-images{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* === กรอบรูปสำหรับรางวัล (เวอร์ชันสวยสุด) === */
.award-images img{
    width: 150px;
    background: #ffffff;
    padding: 10px;
    border-radius: 25px;          /* มุมโค้งนุ่มสวย */
    border: 3px solid #0b66c3;    /* กรอบฟ้าเข้ม */
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

/* เอฟเฟกต์เวลาเอาเมาส์ชี้ */
.award-images img:hover{
    transform: scale(1.05);
}


/* === Award Horizontal Layout === */
.award-box.horizontal{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.award-box.horizontal .award-text{
    flex: 1;
    text-align: left;
}

.award-box.horizontal .award-images{
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.award-box.horizontal .award-images img{
    width: 70px;
    height: 70px;
    object-fit: cover;
    padding: 6px;
    border-radius: 12px;
    border: 3px solid #0b66c3;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.award-box.horizontal .award-images img:hover{
    transform: scale(1.08);
}

.award-box.vertical{
    text-align: center;
    padding: 25px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(11,66,120,0.08);
    margin: 25px 0;
}

.award-box.vertical .award-text h3{
    font-size: 24px;
    font-weight: 800;
    color: #0b66c3;
    margin-bottom: 10px;
    line-height: 1.4;
}

.award-box.vertical .award-text p{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
}

.award-box.vertical .award-images{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.award-box.vertical .award-images img{
    width: 90px;
    background: #fff;
    padding: 10px;
    border-radius: 18px;
    border: 3px solid #0b66c3;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.award-box.vertical .award-images img:hover{
    transform: scale(1.05);
}