:root{
  --gold:#f39f22; --gold-2:#ffb06a; --ink:#222; --text:#666; --line:rgba(0,0,0,.08);
  --bg:#f7f7f7; --surface:#fff;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Poppins, "Noto Sans Lao", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg)}
img{display:block; width:100%; height:auto;}
/* กว้างขึ้นให้ใกล้กับหน้าอื่น */
.container{max-width:1200px; margin:0 auto; padding:0 24px}

/* Header */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; color:var(--ink); text-decoration:none}
.nav a{margin:0 14px; color:var(--text); text-decoration:none; font-weight:600}
.nav a.active, .nav a:hover{color:var(--ink)}
.btn.small{border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:999px; margin-left:8px; cursor:pointer}

/* Hero */
.hero{padding:72px 0 28px; background:linear-gradient(180deg,#fff, #fafafa 60%, transparent)}
.hero-title{font-size:48px; margin:0 0 10px; line-height:1.1; font-weight:800}
.hero-sub{margin:0; color:var(--text); font-weight:500}

/* Grid: 2 per row on >=640px */
.activities-grid{display:grid; grid-template-columns:1fr; gap:26px; padding:36px 0 72px}
@media (min-width:640px){ .activities-grid{grid-template-columns:1fr 1fr; gap:28px} }

.activity-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease}
.activity-card:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.08)}
.card-body{padding:16px 18px 20px}
.card-body h3{margin:0 0 6px; font-size:22px; font-weight:700}
.card-body p{margin:0; color:var(--text)}

/* Slider */
.slider{position:relative; overflow:hidden; background:#000; aspect-ratio:16/9; border-top-left-radius:20px; border-top-right-radius:20px}
/* ให้รางสไลด์สูงเท่ากรอบ และภาพครอบเต็ม */
.slides{display:flex; width:100%; height:100%; touch-action:pan-y; user-select:none}
.slide{min-width:100%; height:100%}
.slide img{width:100%; height:100%; object-fit:cover; object-position:center}
/* ปุ่มนำทาง */
.slider .nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.95); border:none; width:36px; height:36px; border-radius:999px; cursor:pointer; font-size:22px; line-height:36px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.18)}
.slider .prev{left:12px} .slider .next{right:12px}
/* จุดบอกสถานะ */
.dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px}
.dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); border:none}
.dot.is-active{background:var(--gold)}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:#fff}
.foot-grid{display:grid; grid-template-columns:1fr; gap:16px; padding:32px 0}
@media (min-width:760px){ .foot-grid{grid-template-columns:2fr 1fr 1fr} }
.site-footer .brand{font-weight:800; margin-bottom:6px}
.copy{border-top:1px solid var(--line); text-align:center; padding:12px 0; color:var(--text)}

/* Motion safety */
@media (prefers-reduced-motion: reduce){ .slider .nav{transition:none} }

/* ---- global small-fix (ครั้งเดียวพอ) ---- */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
nav { width:100%; }
.nav-con { padding:0 12px; }

.rest .rest-container{ width:min(1200px,94vw); }
.rest .rest-hero{ min-height:60vh; }



/* ให้ตัวสไลด์รับทัชเองด้วย (ช่วย Safari/Android บางรุ่น) */
.slider{ touch-action: pan-y; }

/* รีเซ็ต margin ของ figure เพื่อไม่ให้เกิดขอบดำด้านข้าง */
figure{ margin:0; }

/* กันภาพ intercept pointer และห้ามถูกลากเป็นรูป */
.slide img{
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
  display:block;             /* กันช่องว่าง inline */
}

/* ย้ำให้ราง/สไลด์กินเต็มกรอบเสมอ */
.slides{ height:100%; }
.slide{ min-width:100%; height:100%; }

/* ===== Footer — Deluxe Theme ===== */
.site-footer.deluxe{
  --grad1:#000; --grad2:#2b2218;
  background:linear-gradient(180deg, var(--grad1), var(--grad2) 100%);
  color:#e8e6e3;
  border-top:none;
  position:relative;
  padding:64px 0 40px;
  text-align:left;
}
.site-footer.deluxe::before{
  /* เส้นไฮไลต์ทองบนสุด */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#f39f22,#ffb06a);
}

.footer-inner{
  display:grid; gap:24px;
  grid-template-columns:1fr;
  max-width:1200px; margin:0 auto; padding:0 24px;
}
@media (min-width:760px){
  .footer-inner{ grid-template-columns:2fr 1fr 1fr 1fr; }
}

.footer-logo{
  color:#f39f22; font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:8px;
}
.site-footer h4{
  color:#f39f22; font-weight:800; font-size:18px; margin:6px 0 10px;
}
.site-footer p{ margin:6px 0; color:#ddd; font-size:15px; line-height:1.7; }

.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:6px 0; }
.site-footer a{
  color:#ffb06a; text-decoration:none; transition:color .2s ease;
}
.site-footer a:hover{ color:#ffd48a; }

.copy{
  border-top:1px solid rgba(255,255,255,.08);
  color:#cfcfcf; margin-top:26px; padding-top:14px; text-align:center;
}

/* Mobile fine-tune */
@media (max-width:600px){
  .site-footer.deluxe{ padding:48px 0 32px; text-align:center; }
  .footer-inner{ text-align:center; }
  .site-footer h4{ margin-top:14px; }
}

/* ===== Partner logos ===== */
.partner-logos {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.partner-logos img {
  height: 36px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.partner-logos img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* บนมือถือเรียงกลาง */
@media (max-width: 600px) {
  .partner-logos {
    justify-content: center;
  }
}
/* ---- global small-fix (ครั้งเดียวพอ) ---- */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
nav { width:100%; }
.nav-con { padding:0 12px; }
@media (max-width:640px){
  .menu a{ padding:.35rem .5rem; font-size:.9rem; }
  .brand img{ width:64px; height:72px; }
}
.rest .rest-container{ width:min(1200px,94vw); }
.rest .rest-hero{ min-height:60vh; }