:root{
  --brand:#0b3b7e;      /* กรมท่า SML */
  --brand-2:#00c2ff;    /* ฟ้า SML */
  --accent:#f7b801;     /* เหลืองพลังงาน */
  --ink:#0f172a;        /* ตัวอักษรหลัก */
  --muted:#475569;      /* ตัวอักษรรอง */
  --bg:#f8fafc;         /* พื้นหลัง */
  --card:#ffffff;       /* สีการ์ด */
  --radius:22px;
  --shadow:0 12px 30px rgba(2,8,23,.08);
  --maxw: 80%; /*--------------------- --maxw:1200px; ------------------------*/
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Prompt",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}

img{
    height: 260px;
    width: 100%;
    object-fit: cover;
    max-width:100%;
    display:block
}

a{color:inherit;text-decoration:none}

.container{
    max-width:var(--maxw);
    margin:auto;
    padding:0 20px
}

.br-md{display:none}

/* NAV */
.site-header{
    position:sticky;
    top:0;z-index:40;
    background:rgba(255,255,255,.75);
    backdrop-filter:saturate(140%) blur(10px);
    box-shadow:0 2px 12px rgba(15,23,42,.06)
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0
}

.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--brand)}

.logo{
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:contain;
    background:#fff;
    box-shadow:var(--shadow)
}

nav ul{
    display:flex;
    gap:22px;
    list-style:none;
    margin:0;
    padding:0
}

nav a{
    font-weight:500;
    color:var(--muted)
}

/*----------------- nav effect ---------------------*/

nav ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}

nav ul li:hover::after{
    width: 100%;
}





/* CTA */



.cta{display:flex;gap:10px}

.btn{
    padding:10px 16px;
    border-radius:12px;
    font-weight:600;
    border:1px solid transparent;
    display:inline-flex;
    align-items:center;
    gap:8px
}

/*----------------------- add btn hover ----------------------------*/

.btn{
    position: relative;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
}

.btn::after{
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    background: #00c2ff;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .3s;
}

.btn:hover{
    background: #fff;
    border:1px solid black;
    color: black;
}

.btn:hover::after{
    width: 100%;
}

/*----------------------- add btn hover ----------------------------*/

.btn-primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;
    box-shadow:var(--shadow)
}

.btn-outline{
    border-color:rgba(2,8,23,.12);
    background:#fff;
    color:var(--brand)
}

/* HERO */
.hero{position:relative;overflow:hidden;background:radial-gradient(1000px 400px at 20% -10%, rgba(0,194,255,.15), transparent 60%),radial-gradient(1200px 600px at 90% 10%, rgba(247,184,1,.18), transparent 60%), linear-gradient(180deg,#fff, #f0f9ff 60%, #fff)}
.hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;padding:74px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(2,8,23,.1);border-radius:999px;padding:6px 12px;color:var(--brand);background:#fff;font-weight:600}

.hero h1{
    font-size:clamp(28px,4.6vw,48px);
    line-height:1.1;
    margin:16px 0
}

.hero .accent{color:var(--accent)}
.hero p{color:var(--muted);font-size:clamp(15px,1.9vw,18px)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px}
.badge{background:#fff;border:1px solid rgba(2,8,23,.08);border-radius:999px;padding:8px 12px;font-size:14px;color:var(--ink)}
.frame{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #e6eef7}
.hero-actions{display:flex;gap:10px}

/* SECTIONS */
section{
    padding:10px 0
}

.sec-head{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;margin-bottom:28px}
.sec-head h2{font-size:clamp(22px,3.2vw,34px);margin:0}
.sec-head p{color:var(--muted);max-width:820px}



button{
    padding: 15px 30px;
    font-size: 1.5rem;
    cursor: pointer;
    border: 0px;
    background: transparent;
    position: relative;
    margin: 20px;
    transition: all 0.25s ease;
}

.btn-1{
    left: 40%;
    background: #000;
    color: #fff;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.btn-1:hover{
    transform: translate(-12px, -12px);
}

.btn-1:hover::before{
    transform: translate(12px, 12px);
}

.btn-1:hover::after{
    transform: translate(6px, 6px);
}

.btn-1::before,
.btn-1::after{
    content: '';
    position: absolute;
    opacity: 0.3;
    border-radius: inherit;
    background: #000;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: all 0.25s ease;
}




/* GRID & CARDS */
.grid{
    display:grid;gap:18px
}

.grid-3{
    grid-template-columns:repeat(3,1fr)
}

.grid-2{
    grid-template-columns:repeat(2,1fr)
}

.card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    border:1px solid #eaf0f7;
    height: 450px;  /*-------------------- add ---------------------*/
}

.card h3{
    
    margin:10px 0 15px;
    font-size:18px
}

.muted{color:var(--muted)}
.icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(11,59,126,.08)}

.thumb{
    height:250px;   /*--------------------- height:170px;  ------------------------*/
    border-radius:16px;
    overflow:hidden;
    margin-bottom:12px
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:16px;
    margin-bottom: 20px;
    box-shadow:var(--shadow);
    border:1px solid #e6eef7;
    justify-content: center;
    align-items: center;
}

.service-card.callout{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start
}

.info{text-align:left}
.footnote{margin-top:8px}

/* GALLERY */
.gallery{
    display:grid;
    grid-template-columns:repeat(1fr,1fr,1fr); 
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    height: 460px;
   
}
/*
.gallery .g1{grid-column:span 5}
.gallery .g2{grid-column:span 3}
.gallery .g3{grid-column:span 4}

*/

.gallery img{
    width: 600px;
    height: 60%;
    object-fit: cover;
    border-radius:16px;
    box-shadow:var(--shadow);
    border:1px solid #e6eef7
}

/* CONTACT */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.form-card label{display:block;margin:10px 0 6px;font-weight:600}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-family:inherit}
.form-card textarea{min-height:120px}
.form-card .subtext{font-size:13px;color:var(--muted)}
.form-notice{margin-top:8px;color:var(--brand)}
.map{height:260px}

/* FOOTER */
footer{background:#0b233f;color:#e2e8f0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:28px 0}
.footer-grid a{color:#c8d5e5}

.footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff
}

.footer-desc{margin:10px 0 0;color:#c8d5e5}

.footer-desc span{
    color: #f7b801;
    font-weight: 700;
    font-size: 20px;
}



.copyright{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;color:#9fb0c7}

/* FAB */
.fab{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:50}
.fab-btn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow);border:1px solid rgba(2,8,23,.08);background:#fff}
.fab-btn.line{background:#fff}
.fab-btn.line svg{width:28px;height:28px}
.fab-btn.call{color:#0b3b7e}

/* Bottom Bar (mobile) */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;z-index:49;background:#fff;border-top:1px solid #e6eef7;padding:8px 12px;box-shadow:0 -6px 20px rgba(2,8,23,.06)}
.bar-btn{flex:1;text-align:center;padding:12px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .gallery .g1{grid-column:span 6}
  .gallery .g2{grid-column:span 6}
  .gallery .g3{grid-column:span 12}
}
@media (max-width:760px){
  .br-md{display:inline}
}
@media (max-width:640px){
  nav ul,.cta{display:none}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .bottom-bar{display:flex}
}



.grid-3 .info img{
    width: 100%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
}