@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap');

/* ===== Variables ===== */
:root{
  --bg:#0d0f13; --text:#0f172a; --muted:#64748b;
  --brand:#0ea5e9; --accent:#10b981;
  --surface:#fff; --surface-2:#f8fafc; --border:#e2e8f0;
  --shadow:0 8px 30px rgba(2,6,23,.06);
  --radius-xl:18px; --nav-h:64px;
  --gap:16px; --peek:20px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0}
p{margin:0}

/* ===== Layout ===== */
.container{max-width:1200px;margin-inline:auto;padding:0 16px}
.section{padding:30px 0;scroll-margin-top:var(--nav-h)}
@media(min-width:768px){.container{padding:0 20px}.section{padding:40px 0}}
@media(min-width:1200px){.container{padding:0 24px}}

/* ===== Navbar ===== */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e9eefb}
.nav .rowmenu{height:60px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}
.spacer{flex:1}
.menu{display:flex;gap:1rem;align-items:center;margin-left:auto}
.menu>li{position:relative;list-style:none}
.menu>li>a{padding:.5rem .6rem;font-weight:400;display:flex;align-items:center;gap:.25rem;border-radius:10px}
.menu>li>a:hover{background:#edf3ff;color:#0b3c9d}
.caret {
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0.9;
}
.dropdown{
  position:absolute;left:0;top:100%;min-width:220px;background:#fff;
  border:1px solid #e9eefb;border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,20,60,.08);
  display:none;flex-direction:column;padding:.5rem 0;z-index:200
}
.dropdown a{padding:.55rem 1rem;white-space:nowrap;border-radius:8px;margin:0 .25rem}
.dropdown a:hover{background:#edf3ff;color:#0b3c9d}
.menu>li:focus-within .dropdown,.menu>li:hover .dropdown{display:flex}
.hamburger {
  display: none;
  border: none;
  background: none;
  font-size: 2rem;
  margin: 0 auto;   /* เว้นซ้าย-ขวาอัตโนมัติ */
}

/* RESPONSIVE */
@media(max-width:575.98px){
  .hamburger{
    display:block;
  }
  .menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    position:absolute;
    top:40px;
    left:0;
    right:0;
    border-bottom:1px solid #e9eefb;
    padding:1rem;
    margin-left:0;
  }
  .menu.show{
    display:flex;
  }
  .menu>li{
    width:100%;
  }
  .dropdown{
    position:static;
    min-width:100%;
    border:none;
    box-shadow:none;
    display:none;
    padding:0;
  }
  .menu>li.open>.dropdown{
    display:flex;
  }
}
@media(min-width:576px) and (max-width:767.98px){

  .hamburger{
    display:block;
  }
  .menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    position:absolute;
    top:40px;
    left:0;
    right:0;
    border-bottom:1px solid #e9eefb;
    padding:1rem;
    margin-left:0;
  }
  .menu.show{
    display:flex;
  }
  .menu>li{
    width:100%;
  }
  .dropdown{
    position:static;
    min-width:100%;
    border:none;
    box-shadow:none;
    display:none;
    padding:0;
  }
  .menu>li.open>.dropdown{
    display:flex;
  }
}

.bg-grey{background:var(--surface-2); /*border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);*/}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(145deg,#009eff 0%,#33b8ff 60%,#80d4ff 100%)}
.hero-grid{position:relative;display:grid;gap:20px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:999px;padding:8px 12px;font-size:12px;color:#065f46}
.hero h1{font-size:clamp(26px,4vw,48px);font-weight:800}
.hero p{margin-top:0;color:var(--muted);font-size:clamp(14px,1.8vw,18px)}
.cta-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:6px 12px;font-weight:600;border:1px solid var(--border);background:#fff;min-height:20px}
.btn.primary{background:#111827;color:#fff;border-color:#111827}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.mockup{border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(2,6,23,.08);overflow:hidden}
.mockup-top{background:#0b1220}
.mockup-top img{width:100%;height:auto;display:block}

/* ===== Service cards ===== */
.service-card{position:relative;height:200px;border:none;padding:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:transparent;margin-bottom:10px}
.service-card::before{content:"";position:absolute;inset:0;background: var(--bg) center/cover no-repeat;transform:scale(1.02)}
.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.25) 20%,rgba(2,6,23,.55) 100%)}
.service-card .link{position:absolute;inset:0;display:block;z-index:3}
.service-card .content{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:2}
.service-card .title{margin:0;font-weight:800;font-size:20px;letter-spacing:.5px}
.service-card .subtitle{margin-top:0;font-size:12px;opacity:.95;text-transform:uppercase;letter-spacing:.6px}
.service-card:hover::before{transform:scale(1.05);transition:.35s ease}
.service-card:hover::after{background:linear-gradient(180deg,rgba(2,6,23,.3),rgba(2,6,23,.6))}

/* ===== Cards/Process ===== */
.grid-3{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:740px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow);padding:18px;margin-bottom:10px;position:relative}
.icon-top-right{position:absolute;top:8px;right:8px;width:50px;height:auto}
.step{font-size:12px;color:#475569}
.muted{color:var(--muted)}

/* ===== Gallery ===== */
.gallery{display:grid;gap:16px;grid-template-columns:1fr}
@media(max-width:575.98px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:576px) and (max-width:767.98px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px) and (max-width:991.98px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px) and (max-width:1199.98px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery .card{padding:0;overflow:hidden}
.gallery .caption{text-align:center;padding:10px 14px;border-top:1px solid var(--border);font-size:14px;color: #000}
.ph{display:grid;place-items:center;/* aspect-ratio:4/3 */;background:#e2e8f0;color:#475569;overflow:hidden;border-radius:0px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Pricing (structure only; content as-is) ===== */
.pricing{background:#0b1220;color:#e5e7eb}
.pricing h2{color:#fff}
.price-card{background:#0f172a;border:1px solid #1f2937}
.price{font-size:26px;font-weight:800}
.tag{display:inline-block;font-size:12px;border:1px solid #22c55e;color:#22c55e;border-radius:999px;padding:4px 8px}
.tag_sky{display:inline-block;font-size:12px;border:1px solid #00FFFF;color:#00FFFF;border-radius:999px;padding:4px 8px}
.price-carousel{position:relative}
.price-track{display:flex;gap:var(--gap);overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:none;-webkit-overflow-scrolling:touch;cursor:grab;touch-action:pan-x;scroll-padding-right:calc(var(--peek) + 4px);padding-right:calc(var(--peek) + 4px);scroll-behavior:smooth}
.price-track.dragging{cursor:grabbing;user-select:none}
.price-track::-webkit-scrollbar{height:0}
.price-slide {
  flex: 0 0 auto;       /* ไม่ fix % อีกต่อไป */
  width: fit-content;   /* ให้กว้างเท่าข้อความ */
  max-width: 100%;      /* กันไว้ไม่ให้ทะลุเกินจอ */
}
.price-slide .price-card{height:100%}
@media (min-width:900px){
  .price-slide {
    flex: 0 0 auto;
    width: fit-content;
  }
}

@media (min-width:1200px){
  .price-slide {
    flex: 0 0 auto;
    width: fit-content;
  }
}
.price-dots{display:flex;justify-content:center;gap:8px;margin-top:10px;padding-bottom:2px;--dot-active:#22c55e;--dot-focus:#22c55e}
.price-dots[data-theme="blue"]{--dot-active:#00FFFF;--dot-focus:#00FFFF}
.price-dot,.price-dots button{width:10px;height:10px;border-radius:999px;border:1px solid #6b7280;background:#374151;opacity:.6;transform:scale(1);transition:transform .2s,opacity .2s,background .2s;cursor:pointer}
.price-dot[aria-current="true"],.price-dots button.is-active{background:var(--dot-active);opacity:1;transform:scale(1.15)}
.price-dot:focus-visible,.price-dots button:focus-visible{outline:2px solid var(--dot-focus);outline-offset:3px;border-color:transparent}

/* ===== Booking/FAQ/Footer ===== */
.form{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.form{grid-template-columns:repeat(2,1fr)}}
.input,textarea{border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:16px}
textarea{grid-column:1 / -1;min-height:120px}
.form-actions{grid-column:1 / -1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.faq{background:var(--surface-2);border-top:1px solid var(--border)}
details{border:1px solid var(--border);background:#fff;border-radius:14px;padding:14px}
details+details{margin-top:12px}
summary{cursor:pointer;font-weight:600}
summary::marker{content:""}
footer{background:#009eff;color:#FFFFFF}
.copyright{border-top:1px solid #009eff;text-align:center;padding:12px 0;font-size:14px}

/* ===== Image Skeleton (ใส่บน <img> โดยตรง จึงไม่ทำให้ขนาดเพี้ยน) ===== */
img.img-skel {
  background: #e5e7eb;        /* สีเทารอโหลด */
  position: relative;
  overflow: hidden;           /* กัน overlay เกินกรอบภาพ */
}

/* แถบ shimmer */
img.img-skel::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: sk-shimmer 1.4s infinite;
}

/* โหลดเสร็จหรือ error -> เอา shimmer ออก */
img.img-skel.is-loaded::after,
img.img-skel.is-error::after {
  display: none;
}

@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}

/* ลด motion ตามระบบผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
  img.img-skel::after { animation: none; }
}

/* ===== Utilities ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #fff;border-radius:20px;background:transparent;color:#fff;font-size:14px;line-height:1;margin:4px;white-space:nowrap}
.chip svg{width:14px;height:14px;fill:#fff}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn.line{background:#06c755;color:#fff;border-color:#06c755}
.btn.line:hover{filter:brightness(0.95)}
.row{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}
[class*="col-"]{padding-left:0.5rem;padding-right:0.5rem;box-sizing:border-box}
@media(max-width:575.98px){.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}}
@media(min-width:576px) and (max-width:767.98px){.col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}.col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}}
@media(min-width:768px) and (max-width:991.98px){.col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}}
@media(min-width:992px) and (max-width:1199.98px){.col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}}
@media(min-width:1200px){.col-xl-1{width:8.3333%}.col-xl-2{width:16.6667%}.col-xl-3{width:25%}.col-xl-4{width:33.3333%}.col-xl-5{width:41.6667%}.col-xl-6{width:50%}.col-xl-7{width:58.3333%}.col-xl-8{width:66.6667%}.col-xl-9{width:75%}.col-xl-10{width:83.3333%}.col-xl-11{width:91.6667%}.col-xl-12{width:100%}}