*{box-sizing:border-box}body{margin:0;font-family:Kanit,sans-serif;background:#f5fbff;color:#123}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 6%;position:sticky;top:0;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.logo{font-size:2rem;font-weight:800;color:#0b51a8}
nav a{text-decoration:none;margin:0 10px;color:#123;font-weight:700}
.header-buttons,.actions{display:flex;gap:12px}
.linebtn,.phonebtn{padding:12px 22px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700}
.linebtn{background:#12aa4a}.phonebtn{background:#0b51a8}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:70px 6%;align-items:center}
.badge{background:#0b51a8;color:#fff;padding:8px 14px;border-radius:99px}
h1{font-size:5rem;color:#0b51a8;margin:.2em 0}h1 span{display:block;color:#12aa4a}
.heroimg{height:420px;border:3px dashed #0b51a8;border-radius:18px;display:flex;align-items:center;justify-content:center}
section{padding:50px 6%}.grid,.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card,.gallery div{background:#fff;padding:35px;border-radius:18px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.08)}
footer{background:#0b51a8;color:#fff;text-align:center;padding:30px}
.floating-group{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px}
.floating{padding:14px 18px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.phone{background:#0b51a8}.line{background:#12aa4a}
@media(max-width:900px){.hero,.grid,.gallery{grid-template-columns:1fr}.top{flex-wrap:wrap}h1{font-size:3.8rem}}