*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;font-family:"Noto Sans Thai",Tahoma,Arial,sans-serif}
body{background:#eaf8ff;color:#123d68}
a{text-decoration:none;color:inherit}
.site{min-height:100vh;background:#eaf8ff}
.exact-home{position:relative;width:100%;background:#fff;overflow:hidden}
.exact-home img{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:5;background:transparent;border-radius:12px}
.hotspot:hover{background:rgba(255,255,255,.08)}
.home-link{left:3.5%;top:2.2%;width:7%;height:7%}
.about-link{left:15%;top:2.2%;width:9%;height:7%}
.activity-link{left:27%;top:2.2%;width:8%;height:7%}
.news-link{left:39%;top:2.2%;width:8%;height:7%}
.contact-link{left:49%;top:2.2%;width:9%;height:7%}
.register-link{left:31%;top:76%;width:38%;height:15%}
.social-fb{right:12%;top:2%;width:4.5%;height:7%}
.social-line{right:7.2%;top:2%;width:4.5%;height:7%}
.social-search{right:2.5%;top:2%;width:4%;height:7%}

.inner-page{min-height:calc(100vh - 78px);background:linear-gradient(180deg,#16a8ee,#d8f6ff);padding:70px 20px}
.container{width:min(1120px,92%);margin:auto}
.panel{background:#fff;border-radius:24px;padding:40px;box-shadow:0 15px 40px rgba(0,70,120,.14)}
h1{color:#07559a;font-size:clamp(34px,5vw,58px);margin-bottom:15px}
h2{color:#07559a;margin:25px 0 10px}
p{font-size:18px;line-height:1.8;color:#41637c}
.btn{display:inline-block;margin-top:25px;background:#ffd21a;color:#07559a;padding:12px 28px;border-radius:999px;font-weight:900}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}
.card{background:#f1fbff;border:1px solid #d5f0fb;border-radius:18px;padding:25px}
.card h3{color:#07559a;margin-bottom:7px}
.form{max-width:850px;margin:auto}
.field{margin-bottom:16px}
label{display:block;font-weight:800;margin-bottom:6px;color:#245578}
input,select,textarea{width:100%;padding:12px;border:1px solid #c8e7f5;border-radius:10px;font:inherit}
button{border:0;cursor:pointer}
.footer{background:#07559a;color:#fff;text-align:center;padding:28px}
.footer p{color:#fff;font-size:15px}
.mobile-note{display:none}

@media(max-width:800px){
  .hotspot{z-index:10}
  .cards{grid-template-columns:1fr}
  .panel{padding:25px}
}
@media(max-width:600px){
  .mobile-note{display:block;text-align:center;padding:10px;background:#07559a;color:#fff;font-size:13px}
  .inner-page{padding:35px 12px}
}