/* home.css — หน้าแรกโอโซนลอยฟ้า (hero + sticky menu + แถบเลือกวันจอง) */
:root{ --hero-h:650px; --ink:#1f2a3a; --blue:#477a5b; --blue-2:#6aa883; }
*{box-sizing:border-box}
body{margin:0;font-family:'Sarabun',system-ui,-apple-system,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
[v-cloak]{display:none}
a,a:hover,a:focus{text-decoration:none}

/* ================= HERO (nuengdiao) ================= */
/* ============================================================================
   hero slideshow
   ซูมต่อเนื่องนุ่ม (Ken Burns) + crossfade ไร้รอยต่อ + โทน navy/gold
   ----------------------------------------------------------------------------
   วิธีใช้: แทนที่บล็อก .hero* เดิมใน assets/css/home.css ด้วยไฟล์นี้
            (คู่กับ home.js interval 6000ms + markup .hero__dots ใน index.php
             ตามหมายเหตุที่ส่งในแชท)
   ============================================================================ */

.hero{position:relative;width:100%;height:clamp(460px,80vh,760px);overflow:hidden;background:#223029}
.hero__slides{position:absolute;inset:0}

/* แต่ละสไลด์: ซ่อนไว้ด้วย opacity 0 + ตั้งซูมเริ่มที่ 1.12 (กันวูบตอนขึ้น) */
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.12);transition:opacity 2s ease-in-out;will-change:opacity,transform;backface-visibility:hidden}

/* สไลด์ที่แสดง: fade เข้า + ซูมเข้าช้า ๆ 8 วินาที (ยาวกว่ารอบเปลี่ยน 6 วิ
   → ขณะ crossfade ภาพทั้งคู่กำลังซูมพร้อมกัน จึง "ไม่มีรอยต่อ/ไม่สะดุด") */
.hero__slide.on{opacity:1;animation:ndKB 8s ease-out forwards}
@keyframes ndKB{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ม่านไล่เฉดกรมน้ำเงิน ให้ตัวอักษรอ่านง่าย */
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,34,26,.42) 0%,rgba(20,34,26,.12) 40%,rgba(20,34,26,.66) 100%)}

/* ข้อความ hero (eyebrow ทอง + หัวเรื่อง + เส้นคั่นทอง) */
.hero__cap{position:absolute;left:0;right:0;bottom:30%;z-index:3;text-align:center;padding:0 22px;color:#fff}
.hero__cap::before{content:var(--hero-eyebrow,'โอโซนลอยฟ้า');display:block;
  font-size:clamp(.74rem,1.5vw,.98rem);letter-spacing:.42em;text-transform:uppercase;
  color:#6aa883;font-weight:700;margin-bottom:.7rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero__title{font-family:'Trirong','Sarabun',serif;font-weight:600;line-height:1.14;margin:0;
  font-size:clamp(2.1rem,5.4vw,3.8rem);text-shadow:0 4px 26px rgba(0,0,0,.5)}
.hero__title::after{content:'';display:block;width:64px;height:3px;border-radius:2px;margin:.9rem auto 0;
  background:linear-gradient(90deg,#6aa883,#477a5b)}
.hero__sub{font-weight:300;margin:1rem 0 0;font-size:clamp(1rem,2.3vw,1.45rem);letter-spacing:.02em;
  color:rgba(255,255,255,.95);text-shadow:0 2px 14px rgba(0,0,0,.55)}

/* จุดบอกสไลด์ (ทอง) — กดเลือกได้ */
.hero__dots{position:absolute;left:0;right:0;bottom:7%;z-index:4;display:flex;gap:11px;justify-content:center}
.hero__dots button{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.hero__dots button:hover{background:rgba(255,255,255,.75)}
.hero__dots button.on{background:linear-gradient(145deg,#6aa883,#477a5b);width:30px;border-radius:7px}

/* ทรานซิชันข้อความ (นุ่ม) */
.cap-enter-active{transition:opacity 1s ease,transform 1s ease;transition-delay:.3s}
.cap-leave-active{transition:opacity .6s ease,transform .6s ease;position:absolute;left:0;right:0}
.cap-enter{opacity:0;transform:translateY(20px)}
.cap-leave-to{opacity:0;transform:translateY(-14px)}

/* พื้นสำรอง (เผื่อรูปยังไม่ขึ้น) — โทนกรม/ฟ้าสระ/ทอง */
.hero__slide.g0{background-image:linear-gradient(135deg,#223029,#2a4a39)}
.hero__slide.g1{background-image:linear-gradient(135deg,#2a4a39,#5a8f6b)}
.hero__slide.g2{background-image:linear-gradient(135deg,#5a8f6b,#86b199)}
.hero__slide.g3{background-image:linear-gradient(135deg,#223029,#3f7050)}
.hero__slide.g4{background-image:linear-gradient(135deg,#477a5b,#6aa883)}

@media(max-width:760px){.hero{height:clamp(420px,72vh,560px)}.hero__cap{bottom:26%}.hero__cap::before{letter-spacing:.32em}}
@media(prefers-reduced-motion:reduce){.hero__slide.on{animation:none}.hero__slide{transition:opacity .5s}}

/* ================= STICKY MENU ================= */
.topbar{position:fixed;top:0;left:0;right:0;z-index:1000;font-family:'Prompt',sans-serif}
.tb-nav{transition:background .28s ease,box-shadow .28s ease;background:transparent}
.topbar.scrolled .tb-nav{background:#0b0d10;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.tb-inner{max-width:1280px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:18px;height:84px}
.tb-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.tb-brand img{width:54px;height:54px;object-fit:contain;border-radius:50%;background:#fff;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.tb-brand__t{display:flex;flex-direction:column;line-height:1.05;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.tb-brand__t b{font-size:21px;font-weight:700}
.tb-brand__t small{font-size:11px;letter-spacing:2px;opacity:.85;font-weight:400}
.tb-menu{display:flex;align-items:center;gap:20px;margin-left:auto}
.tb-menu>a,.tb-has-mega>a{color:#fff;text-decoration:none;font-size:15.5px;font-weight:500;position:relative;text-shadow:0 1px 8px rgba(0,0,0,.45);padding:6px 0;transition:color .18s;white-space:nowrap}
.tb-menu>a:hover,.tb-has-mega>a:hover{color:#aecdb9}
.tb-menu>a.active::after,.tb-has-mega>a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2.5px;border-radius:2px;background:#6aa883}
.tb-caret{display:inline-block;width:0;height:0;margin-left:4px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}

/* mega dropdown บ้านพัก (พื้นหลังนาวี ไม่ขาว) */
.tb-has-mega{position:relative}
.tb-has-mega{position:relative}
.tb-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(14px);width:auto;max-width:94vw;background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(26,38,30,.28);padding:20px;opacity:0;visibility:hidden;transition:.22s;z-index:20;overflow:hidden}
/* ripple วงกลมซ้อนจาง ๆ */
.tb-mega::before,.tb-mega::after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle, rgba(90,143,107,.10), rgba(90,143,107,0) 70%)}
.tb-mega::before{width:420px;height:420px;top:-160px;right:-120px}
.tb-mega::after{width:320px;height:320px;bottom:-140px;left:-90px;background:radial-gradient(circle, rgba(226,177,60,.12), rgba(226,177,60,0) 70%)}
.tb-has-mega::after{content:'';position:absolute;top:100%;left:0;right:0;height:18px}
.tb-has-mega:hover .tb-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.tb-mega__grid{position:relative;z-index:1;display:flex;flex-wrap:nowrap;justify-content:center;gap:16px}
.tb-mega__card{width:238px;display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid #edf1f6;border-radius:16px;overflow:hidden;transition:.18s;box-shadow:0 3px 10px rgba(26,38,30,.05)}
.tb-mega__card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(26,38,30,.16);border-color:#dfeee6}
.tb-mega__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background-size:cover;background-position:center;background-color:#e9edf3}
.tb-mega__img.ph{display:grid;place-items:center;color:#b9c2d1;font-size:30px}
.tb-mega__b{padding:13px 14px 15px;display:flex;flex-direction:column;gap:4px}
.tb-mega__b b{color:#1f2a3a;font-size:17px;font-weight:600;font-family:'Trirong',serif}
.tb-mega__b small{color:#7a8698;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-mega__empty{grid-column:1/-1;color:#8a93a3;margin:8px 4px}
.tb-mega__foot{position:relative;z-index:1;display:flex;justify-content:flex-start;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid #eef1f5}
.tb-mega__foot span{color:#6a7382;font-size:13.5px;display:flex;align-items:center;gap:8px}
.tb-mega__foot span i{color:#6aa883}
.tb-mega__foot a{color:#e23b3b;font-weight:700;text-decoration:none;font-size:14.5px;display:flex;align-items:center;gap:8px}
.tb-mega__foot a:hover{gap:12px}

/* ปุ่มจอง + burger */
.tb-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:#e23b3b;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 22px;border-radius:12px;box-shadow:0 8px 20px rgba(226,59,59,.42);transition:.18s;white-space:nowrap}
.tb-cta:hover{background:#cf2f2f;color:#fff;transform:translateY(-1px)}
.tb-burger{display:none;width:44px;height:44px;background:transparent;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;margin-left:auto}
.tb-burger span{display:block;height:3px;border-radius:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ================= แถบเลือกวันจอง (พื้นฟ้า 75%) ================= */
.tb-book{background:rgba(47,92,66,.92);color:#fff;position:relative}
.bk-bar{max-width:1280px;margin:0 auto;padding:0 22px;min-height:92px;display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.bk-left{display:flex;flex-direction:column;justify-content:center;padding:12px 22px 12px 0;text-align:left}
.bk-title{font-size:19px;font-weight:600}
.bk-change{color:#d4e6da;font-size:13.5px;text-decoration:none;margin-top:4px}
.bk-change:hover{color:#fff}
.bk-sep{width:1px;background:rgba(255,255,255,.28);margin:16px 0;flex:0 0 auto}
.bk-date{background:transparent;border:none;color:#fff;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;justify-content:center;
  padding:10px 26px;text-align:center;transition:.15s;border-radius:14px 14px 0 0}
.bk-date:hover{background:rgba(255,255,255,.10)}
.bk-date.on{background:rgba(255,255,255,.18)}
.bk-date__cap{font-size:14px;opacity:.92;margin-bottom:2px}
.bk-date__main{display:flex;align-items:baseline;gap:6px;justify-content:center}
.bk-date__main b{font-size:36px;font-weight:700;line-height:1}
.bk-date__main i{font-size:14px;font-style:normal;opacity:.9}
.bk-cr{width:0;height:0;align-self:center;margin-left:2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,.85)}
.bk-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;border-radius:12px;cursor:pointer;text-decoration:none;transition:.16s;white-space:nowrap;margin:auto 0 auto 14px;padding:13px 22px;border:none}
.bk-btn--go{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.bk-btn--go:hover{background:rgba(255,255,255,.26);color:#fff;transform:translateY(-1px)}
.bk-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-family:inherit;font-weight:300;font-size:15px;margin:auto 0 auto 16px;white-space:nowrap;opacity:.95;cursor:pointer}
.bk-link:hover{color:#fff;text-decoration:none;opacity:1}
/* ---------- modal รูปเดี่ยว ---------- */
.bk-modal{position:fixed;inset:0;z-index:99999;background:rgba(6,12,24,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.bk-modal__box{position:relative;max-width:92vw;max-height:90vh}
.bk-modal__box img{display:block;max-width:92vw;max-height:90vh;width:auto;height:auto;border-radius:8px}
.bk-modal__x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;background:#fff;border:none;color:#e23b3b;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);display:grid;place-items:center}
.bk-modal__x:hover{background:#ffecec}

/* ---------- ปฏิทิน 2 เดือน ---------- */
.bk-cal2{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:flex-start;gap:6px;
  background:linear-gradient(165deg,#3f7050,#2a4a39);color:#fff;border-radius:20px;
  box-shadow:0 30px 70px rgba(6,18,40,.45);padding:20px 14px;max-width:calc(100vw - 24px)}
.bk-nav{flex:0 0 auto;width:40px;height:40px;margin-top:4px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:.15s}
.bk-nav:hover{background:rgba(255,255,255,.28)}
.bk-months{display:flex;gap:26px}
.bk-month{width:300px}
.bk-mtitle{text-align:center;font-family:'Prompt',sans-serif;font-weight:600;font-size:17px;margin-bottom:12px;text-decoration:underline;text-underline-offset:5px}
.bk-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:rgba(255,255,255,.72);font-size:12.5px;margin-bottom:6px}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bk-d{height:42px;border:none;background:transparent;color:#fff;border-radius:10px;cursor:pointer;font-family:'Prompt',sans-serif;font-size:15px;transition:.12s}
.bk-d:hover:not(:disabled){background:rgba(255,255,255,.16)}
.bk-d.empty{visibility:hidden}
.bk-d.mut{color:rgba(255,255,255,.30);cursor:not-allowed}
.bk-d.inr{background:rgba(255,255,255,.18);border-radius:0}
.bk-d.ci{background:#fff;color:#2a4a39;font-weight:700;border-radius:10px 0 0 10px}
.bk-d.co{background:#fff;color:#2a4a39;font-weight:700;border-radius:0 10px 10px 0}
.bk-d.ci.co{border-radius:10px}

/* ================= responsive ================= */
@media (max-width:992px){
  :root{--hero-h:540px}
  .tb-inner{height:70px}
  .tb-burger{display:flex}
  .tb-cta{margin-left:auto;padding:10px 15px;font-size:14px}
  .bk-bar{gap:0;padding:12px 16px;justify-content:flex-start}
  .bk-left{width:100%;padding:6px 0}
  .bk-sep{display:none}
  .bk-date{flex:1;padding:10px 8px;border-radius:12px}
  .bk-btn{flex:1;justify-content:center;margin:10px 0 0}
  .bk-btn--ghost{margin-right:5px}
  .bk-months{gap:0}
  .bk-month:nth-child(2){display:none}   /* มือถือ: โชว์เดือนเดียว */
  .bk-cal2{width:calc(100vw - 24px);gap:4px;padding:16px 8px}   /* พอดีจอ: ปุ่มเลื่อนเดือนไม่หลุดขอบ */
  .bk-months{flex:1;min-width:0}
  .bk-month{width:100%;min-width:0}
}
@media (max-width:480px){
  :root{--hero-h:440px}
  .tb-brand__t small{display:none}
  .tb-brand img{width:46px;height:46px}
  .bk-date__main b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:opacity .4s ease;animation:none!important}
  .cap-enter-active,.cap-leave-active{transition:opacity .3s ease}
}

/* fade modal */
.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}
.fade-enter,.fade-leave-to{opacity:0}

/* ===================================================================
   SECTION: ยินดีต้อนรับ (2 คอลัมน์ รูปซ้าย / ข้อความขวา)
   =================================================================== */
.welcome-sec{max-width:1160px;margin:0 auto;padding:66px 22px 24px}
.welcome-wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:stretch}
.welcome-wrap.no-img{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.welcome-img{height:100%}
.welcome-img img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 18px 46px rgba(26,38,30,.16);display:block}
.welcome-copy .eyebrow{color:#6aa883;font-family:'Prompt',sans-serif;font-weight:600;letter-spacing:1.5px;font-size:14px;margin-bottom:10px}
.welcome-copy h2{font-family:'Trirong',serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);color:#1a2432;line-height:1.25;margin:0 0 16px}
.welcome-copy{display:flex;flex-direction:column;min-height:0}
.welcome-copy p{color:#5a6675;font-size:16.5px;line-height:1.95;margin:0}
@media(max-width:820px){
  .welcome-sec{padding:44px 20px}
  .welcome-wrap{grid-template-columns:1fr;gap:24px;text-align:center}
  .welcome-img{order:1}
  .welcome-copy{order:2}
  .welcome-img img{max-height:300px}
}

/* ---------- Facebook page card (สวย) ---------- */
.fbcard{margin-top:20px;max-width:500px;background:#fff;border:1px solid #e7ecf3;border-radius:18px;overflow:hidden;box-shadow:0 14px 38px rgba(26,38,30,.12);flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.welcome-wrap.no-img .fbcard{margin-left:auto;margin-right:auto}
.fbcard__head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#1877f2,#0e5fd0);color:#fff}
.fbcard__ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:19px}
.fbcard__ht{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fbcard__ht b{font-family:"Prompt",sans-serif;font-weight:600;font-size:16px}
.fbcard__ht small{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbcard__follow{flex:0 0 auto;margin-left:auto;background:#fff;color:#1877f2;font-family:"Prompt",sans-serif;font-weight:600;font-size:13px;text-decoration:none;padding:7px 14px;border-radius:9px;transition:.15s}
.fbcard__follow:hover{background:#eaf2ff;color:#1465d8}
.fbcard__body{background:#f0f2f5;flex:1 1 auto;min-height:0;overflow:hidden}
.fbcard__body iframe{display:block;width:100%;height:100%;min-height:220px;border:0}
@media(max-width:820px){ .welcome-wrap{align-items:start} .welcome-img{height:auto} .welcome-img img{max-height:300px} .fbcard{margin-left:auto;margin-right:auto;flex:0 0 auto} .fbcard__body iframe{height:auto;min-height:360px} .fbcard__ht small{display:none} }

/* ===================================================================
   SECTION: ผังรีสอร์ท (mappbf.png)
   =================================================================== */
.map-sec{max-width:1160px;margin:0 auto;padding:10px 22px 60px}
.map-wrap{border-radius:20px;overflow:hidden;box-shadow:0 16px 44px rgba(26,38,30,.14);background:#eef2f7}
.map-img{display:block;width:100%;height:auto}
@media(max-width:820px){ .map-sec{padding:6px 16px 42px} .map-wrap{border-radius:14px} }

/* ===================================================================
   SECTION: ที่พักของเรา (การ์ดโซน) + พื้นหลัง bg2.jpg
   =================================================================== */
.rooms-sec{position:relative;padding:60px 22px 72px;
  background:linear-gradient(rgba(236,242,250,.50),rgba(236,242,250,.62)), url('../img/bg2.jpg') center/cover fixed no-repeat}
.rooms-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-eyebrow{color:#3f7050;font-family:'Prompt',sans-serif;font-weight:600;letter-spacing:2px;font-size:14px;margin-bottom:8px}
.sec-title{font-family:'Trirong',serif;font-weight:600;font-size:clamp(28px,4vw,44px);color:#1a2432;margin:0 0 14px;line-height:1.2}
.sec-sub{color:#5a6675;font-size:16.5px;line-height:1.85;margin:0}

.rooms-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.rcard{width:360px;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;
  box-shadow:0 14px 40px rgba(26,38,30,.14);transition:.2s;display:flex;flex-direction:column}
.rcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(26,38,30,.22)}
.rcard__img{position:relative;width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#dfe6ef;display:grid;place-items:center}
.rcard__ph{font-size:44px;color:#b7c1d1}
.rcard__badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(20,30,45,.72);color:#fff;font-family:'Prompt',sans-serif;font-weight:500;font-size:13px;
  padding:6px 13px;border-radius:999px}
.rcard__badge i{color:#6aa883;font-size:12px}
.rcard__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.rcard__name{font-family:'Trirong',serif;font-weight:600;font-size:22px;color:#1a2432;margin:0}
.rcard__desc{color:#6a7686;font-size:14.5px;line-height:1.6;margin:0;min-height:24px}
.rcard__more{margin-top:4px;color:#e23b3b;font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.rcard:hover .rcard__more{gap:12px}
.rooms-empty{color:#8a93a3;text-align:center;width:100%}

@media(max-width:820px){
  .rooms-sec{padding:44px 16px 52px;background-attachment:scroll}
  .rcard{width:calc(50% - 13px);min-width:0}
  .rcard__name{font-size:19px}
}
@media(max-width:520px){ .rcard{width:100%;max-width:420px} }

/* ===================================================================
   SECTION: แกลเลอรี่ (รูปใหญ่ซ้าย + thumbnail ขวา)
   =================================================================== */
.gallery-sec{max-width:1200px;margin:0 auto;padding:60px 22px 72px}
.gallery-inner{position:relative}
.g-main{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:stretch}
.g-big{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 16px 44px rgba(26,38,30,.16);background:#dfe6ef;min-height:340px}
.g-big img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.g-big::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.18));pointer-events:none}
.g-zoom{position:absolute;right:16px;bottom:16px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);color:#477a5b;display:grid;place-items:center;font-size:18px;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:.18s}
.g-big:hover .g-zoom{transform:scale(1.08);background:#fff}
.g-thumbs{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px}
.g-thumb{border:none;padding:0;cursor:pointer;border-radius:14px;background-size:cover;background-position:center;background-color:#dfe6ef;aspect-ratio:1/1;position:relative;overflow:hidden;transition:.16s;outline:3px solid transparent;outline-offset:-3px}
.g-thumb:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,38,30,.2)}
.g-thumb.on{outline-color:#6aa883;box-shadow:0 0 0 3px rgba(90,143,107,.25)}
.g-thumb.on::after{content:"";position:absolute;inset:0;background:rgba(31,95,176,.12)}

.g-more-wrap{text-align:center;margin-top:36px}
.g-more{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#6aa883,#477a5b);color:#fff;text-decoration:none;
  font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;padding:14px 34px;border-radius:999px;box-shadow:0 12px 28px rgba(31,95,176,.36);transition:.18s}
.g-more:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,95,176,.5)}
.g-more i{font-size:17px}

@media(max-width:820px){
  .gallery-sec{padding:44px 16px 54px}
  .g-main{grid-template-columns:1fr;gap:14px}
  .g-big{min-height:240px;aspect-ratio:16/10}
  .g-thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){ .g-thumbs{grid-template-columns:repeat(3,1fr)} }

/* ===================================================================
   SECTION: คลิปวิดีโอ (พื้นมืด bg3.jpg / ข้อความขาว)
   =================================================================== */
.video-sec{position:relative;padding:64px 22px 74px;color:#fff;
  background:linear-gradient(rgba(10,16,28,.82),rgba(10,16,28,.88)), url('../img/bg3.jpg') center/cover fixed no-repeat}
.video-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.sec-head--light .sec-title{color:#fff}
.sec-head--light .sec-sub{color:rgba(255,255,255,.85)}
.sec-head--light .sec-eyebrow{color:#3f7050}
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vcard{background:#fff;border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;box-shadow:0 14px 36px rgba(0,0,0,.32);display:flex;flex-direction:column}
.vcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.vcard__thumb{position:relative;width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#20304a}
.vcard__thumb::after{content:"";position:absolute;inset:0;background:rgba(10,16,28,.18)}
.vcard__play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(226,59,59,.92);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:.18s;padding-left:4px}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.1);background:#e23b3b}
.vcard__body{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column;gap:6px}
.vcard__title{font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;color:#1a2432;margin:0;line-height:1.35}
.vcard__desc{color:#6a7686;font-size:13px;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v-more{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#e23b3b;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;padding:13px 32px;border-radius:999px;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:.18s}
.v-more:hover{color:#e23b3b;transform:translateY(-2px)}
.v-more i{color:#e23b3b;font-size:18px}
/* video modal (16:9) */
.vmodal__box{position:relative;width:min(880px,92vw)}
.vmodal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===================================================================
   CTA band (น้ำเงิน-เขียว) + Footer
   =================================================================== */
.cta-band{background:linear-gradient(120deg,#477a5b 0%,#5a8f6b 55%,#2fae86 100%);color:#fff;text-align:center;padding:56px 22px}
.cta-inner{max-width:760px;margin:0 auto}
.cta-eyebrow{font-family:'Prompt',sans-serif;font-weight:600;letter-spacing:2px;font-size:14px;color:rgba(255,255,255,.9);margin-bottom:8px}
.cta-title{font-family:'Trirong',serif;font-weight:600;font-size:clamp(28px,4.4vw,46px);margin:0 0 14px;text-shadow:0 3px 18px rgba(0,0,0,.2)}
.cta-sub{font-size:16.5px;line-height:1.8;margin:0;color:rgba(255,255,255,.92)}

.site-footer{background:#14213a;color:#d7e4dc;font-family:'Sarabun',sans-serif}
.foot-grid{max-width:1160px;margin:0 auto;padding:56px 22px 30px;display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px}
.foot-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-bottom:14px}
.foot-logo img{width:48px;height:48px;object-fit:contain;border-radius:50%;background:#fff;padding:3px}
.foot-logo b{font-family:'Prompt',sans-serif;font-size:22px;font-weight:600}
.foot-desc{color:#93a3bd;font-size:14.5px;line-height:1.85;margin:0 0 16px;max-width:360px}
.foot-social{display:flex;gap:12px}
.foot-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#dbe7df;display:grid;place-items:center;font-size:17px;transition:.16s}
.foot-social a:hover{background:#6aa883;color:#fff;transform:translateY(-2px)}
.foot-col h4{color:#fff;font-family:'Prompt',sans-serif;font-weight:600;font-size:17px;margin:0 0 16px;position:relative;padding-bottom:10px}
.foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,#6aa883,#2fae86)}
.foot-col a{display:block;color:#a9b6cb;text-decoration:none;font-size:14.5px;padding:6px 0;transition:.15s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-contact{display:flex;align-items:flex-start;gap:10px;color:#a9b6cb;font-size:14.5px;line-height:1.6;margin-bottom:12px}
.foot-contact i{color:#2fae86;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#7e8ca5;font-size:13.5px;padding:18px}

@media(max-width:992px){ .vid-grid{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .foot-brand{grid-column:1/-1} }
@media(max-width:820px){ .video-sec{padding:44px 16px 54px;background-attachment:scroll} .cta-band{padding:44px 18px} }
@media(max-width:560px){ .vid-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} }

/* ===================================================================
   หน้าใน (inner pages): เมนูทึบ + เว้นบน + แบนเนอร์หัวหน้า
   =================================================================== */
.topbar.solid .tb-nav{background:#0b0d10;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.topbar-spacer{height:84px}
@media(max-width:992px){ .topbar-spacer{height:70px} }

.page-banner{background:linear-gradient(120deg,#477a5b 0%,#5a8f6b 58%,#2fae86 100%);color:#fff;text-align:center;padding:50px 22px}
.page-banner .container{max-width:900px;margin:0 auto;padding:0}
.page-banner .eyebrow{font-family:'Prompt',sans-serif;font-weight:600;letter-spacing:2px;font-size:14px;color:rgba(255,255,255,.9);margin-bottom:8px}
.page-banner h1{font-family:'Trirong',serif;font-weight:600;font-size:clamp(28px,4.4vw,42px);margin:0 0 12px;line-height:1.2}
.page-banner p{font-size:16px;line-height:1.8;margin:0;color:rgba(255,255,255,.92)}

.page-wrap{max-width:1160px;margin:0 auto;padding:52px 22px}
.page-wrap .sec-title{text-align:center}

/* ===================================================================
   หน้า แกลเลอรี่เต็ม (masonry + lightbox)
   =================================================================== */
.galp-grid{columns:4;column-gap:14px}
@media(max-width:1100px){.galp-grid{columns:3}}
@media(max-width:768px){.galp-grid{columns:2}}
@media(max-width:480px){.galp-grid{columns:1}}
.galp-item{break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 8px 24px rgba(26,38,30,.10)}
.galp-item img{width:100%;display:block;transition:transform .45s ease}
.galp-item:hover img{transform:scale(1.07)}
.galp-item::after{content:"";position:absolute;inset:0;background:rgba(15,30,55,0);transition:.2s}
.galp-item:hover::after{background:rgba(15,30,55,.22)}
.galp-zoom{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;font-size:26px;opacity:0;transition:.2s;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.galp-item:hover .galp-zoom{opacity:1}
/* lightbox */
.glb{position:fixed;inset:0;z-index:99999;background:rgba(6,12,24,.9);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:30px}
.glb img{max-width:90vw;max-height:82vh;border-radius:8px;box-shadow:0 24px 64px rgba(0,0,0,.55)}
.glb-x{position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%;background:#fff;border:none;color:#e23b3b;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.glb-x:hover{background:#ffecec}
.glb-nav{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;transition:.15s}
.glb-nav.prev{left:20px}
.glb-nav.next{right:20px}
.glb-nav:hover{background:rgba(255,255,255,.32)}
.glb-cap{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-family:'Sarabun',sans-serif;font-size:14.5px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media(max-width:560px){ .glb-nav{width:44px;height:44px;font-size:26px} .glb-nav.prev{left:8px} .glb-nav.next{right:8px} }

/* ===================================================================
   หน้า โปรโมชั่น (การ์ด) + empty-state + ปุ่ม pill (ใช้ร่วมหน้าอื่น)
   =================================================================== */
.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.promo-card{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(26,38,30,.12);transition:.2s}
.promo-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(26,38,30,.2)}
.promo-card__img{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e7edf4}
.promo-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.promo-card:hover .promo-card__img img{transform:scale(1.05)}
.promo-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.promo-card__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:rgba(90,143,107,.12);color:#477a5b;font-family:'Prompt',sans-serif;font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:999px}
.promo-card__body h3{font-family:'Trirong',serif;font-weight:600;font-size:22px;color:#1a2432;margin:0}
.promo-card__body p{color:#5a6675;font-size:15px;line-height:1.75;margin:0}
.promo-card__btn{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:8px;color:#e23b3b;font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;transition:.15s}
.promo-card__btn:hover{color:#e23b3b;gap:12px}

.empty-state{max-width:520px;margin:20px auto;text-align:center;padding:48px 24px;background:#fff;border-radius:22px;box-shadow:0 14px 40px rgba(26,38,30,.10)}
.empty-state__ico{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:36px;color:#6aa883;background:linear-gradient(135deg,rgba(90,143,107,.14),rgba(47,174,134,.14))}
.empty-state h3{font-family:'Trirong',serif;font-weight:600;font-size:24px;color:#1a2432;margin:0 0 10px}
.empty-state p{color:#6a7686;font-size:15.5px;line-height:1.8;margin:0 0 22px}
.btn-pill{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#6aa883,#477a5b);color:#fff;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:600;font-size:15.5px;padding:13px 30px;border-radius:999px;box-shadow:0 12px 28px rgba(31,95,176,.36);transition:.18s}
.btn-pill:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,95,176,.5)}

@media(max-width:768px){ .promo-grid{grid-template-columns:1fr} }

/* ===================================================================
   หน้า รีวิวลูกค้า
   =================================================================== */
.rv-summary{display:flex;align-items:center;gap:20px;justify-content:center;margin:0 auto 36px;background:#fff;border-radius:18px;box-shadow:0 12px 34px rgba(26,38,30,.10);padding:22px 34px;max-width:360px}
.rv-summary__score{font-family:'Trirong',serif;font-weight:600;font-size:52px;color:#1a2432;line-height:1}
.rv-summary__meta{display:flex;flex-direction:column;gap:6px}
.rv-stars{color:#5a8f6b;font-size:15px;letter-spacing:2px}
.rv-stars--lg{font-size:20px}
.rv-summary__count{color:#6a7686;font-size:14px}
.rv-grid{columns:3;column-gap:22px}
@media(max-width:992px){.rv-grid{columns:2}}
@media(max-width:600px){.rv-grid{columns:1}}
.rv-card{break-inside:avoid;margin:0 0 22px;background:#fff;border-radius:18px;padding:24px 24px 20px;box-shadow:0 12px 34px rgba(26,38,30,.10);position:relative}
.rv-quote{position:absolute;top:16px;right:20px;color:rgba(90,143,107,.14);font-size:38px}
.rv-card .rv-stars{margin-bottom:12px}
.rv-text{color:#465266;font-size:15.5px;line-height:1.85;margin:0 0 18px}
.rv-person{display:flex;align-items:center;gap:12px;border-top:1px solid #eef1f5;padding-top:14px}
.rv-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:'Prompt',sans-serif;font-weight:600;font-size:19px;color:#fff;background:linear-gradient(135deg,#6aa883,#2fae86)}
.rv-name{color:#1a2432;font-size:15.5px}

/* ===================================================================
   หน้า บทความ (list + single)
   =================================================================== */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.art-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 12px 34px rgba(26,38,30,.10);transition:.2s}
.art-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(26,38,30,.18)}
.art-card__img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#e7edf4}
.art-card__img.ph{display:grid;place-items:center;color:#b7c1d1;font-size:34px}
.art-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px}
.art-card__date{color:#8a95a6;font-size:13px;display:flex;align-items:center;gap:7px}
.art-card__body h3{font-family:'Trirong',serif;font-weight:600;font-size:19px;color:#1a2432;margin:0;line-height:1.4}
.art-card__body p{color:#5a6675;font-size:14.5px;line-height:1.7;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-card__more{margin-top:auto;color:#6aa883;font-family:'Prompt',sans-serif;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.art-card:hover .art-card__more{gap:12px}
/* single */
.art-single{max-width:820px;margin:0 auto;padding:44px 22px 60px}
.art-cover{border-radius:20px;overflow:hidden;box-shadow:0 16px 44px rgba(26,38,30,.16);margin-bottom:30px}
.art-cover img{width:100%;height:auto;display:block}
.art-content{color:#3f4a5a;font-size:17px;line-height:1.95}
.art-content p{margin:0 0 18px}
.art-content img{max-width:100%;height:auto;border-radius:12px;margin:10px 0}
.art-content h2,.art-content h3{font-family:'Trirong',serif;color:#1a2432;margin:26px 0 12px}
.art-back{margin-top:32px;text-align:center}
@media(max-width:992px){ .art-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .art-grid{grid-template-columns:1fr} }

/* ===================================================================
   หน้าเนื้อหา (prose ใช้ร่วม about/privacy)
   =================================================================== */
.page-prose{max-width:820px;margin:0 auto;color:#3f4a5a;font-size:17px;line-height:1.95}
.page-prose p{margin:0 0 18px}
.page-prose h2,.page-prose h3{font-family:'Trirong',serif;color:#1a2432;margin:26px 0 12px}
.page-prose img{max-width:100%;height:auto;border-radius:12px;margin:10px 0}
.page-prose ul,.page-prose ol{margin:0 0 18px;padding-left:22px}
.page-prose li{margin:6px 0}
.page-prose__note{margin-top:26px;padding:14px 18px;background:#eef4fb;border-radius:12px;color:#5a6c85;font-size:14.5px}
.page-prose__note i{color:#6aa883;margin-right:7px}

/* ===================================================================
   หน้า ติดต่อเรา
   =================================================================== */
.ct-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:stretch}
.ct-cards{display:flex;flex-direction:column;gap:14px}
.ct-item{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:16px 18px;text-decoration:none;box-shadow:0 10px 28px rgba(26,38,30,.08);transition:.16s;border:1px solid #eef1f5}
.ct-item:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(26,38,30,.16);border-color:#e1efe7}
.ct-ico{flex:0 0 auto;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:20px;background:linear-gradient(135deg,#6aa883,#477a5b)}
.ct-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-tx small{color:#8a95a6;font-size:13px}
.ct-tx b{color:#1a2432;font-size:16px;font-weight:600;word-break:break-word}
.ct-map{border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(26,38,30,.14);min-height:360px;background:#e7edf4}
.ct-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
@media(max-width:820px){ .ct-grid{grid-template-columns:1fr} .ct-map{min-height:300px} }

/* ===================================================================
   หน้า rooms — การ์ดแนวนอนต่อโซน (Agoda-style)
   =================================================================== */
.zone-list{display:flex;flex-direction:column;gap:28px;max-width:1080px;margin:0 auto}
.zcard{display:grid;grid-template-columns:420px 1fr;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(26,38,30,.12);transition:.2s}
.zcard:hover{box-shadow:0 22px 54px rgba(26,38,30,.2)}
/* สไลด์ */
.zc-media{position:relative}
.zc-slider{position:relative;width:100%;height:100%;min-height:300px;background:#dfe6ef;overflow:hidden}
.zc-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .4s ease;display:block}
.zc-slide.on{opacity:1}
.zc-slide.ph{display:grid;place-items:center;color:#b7c1d1;font-size:42px;opacity:1}
.zc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:#1f2a3a;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.25);transition:.15s}
.zc-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.zc-arrow.prev{left:12px}
.zc-arrow.next{right:12px}
.zc-count{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(15,25,45,.7);color:#fff;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px}
.zc-badge{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(31,95,176,.92);color:#fff;font-family:'Prompt',sans-serif;font-weight:500;font-size:12.5px;padding:5px 12px;border-radius:999px}
.zc-badge~.zc-badge{top:46px}
.zc-badge i{color:#6aa883;font-size:11px}
/* ข้อมูล */
.zc-body{padding:22px 24px 20px;display:flex;flex-direction:column}
.zc-title{font-family:'Trirong',serif;font-weight:600;font-size:24px;color:#1a2432;margin:0}
.zc-headline{color:#6aa883;font-size:14px;font-weight:600;margin-top:5px;display:flex;align-items:center;gap:7px}
.zc-headline i{color:#6aa883}
.zc-feats{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.zc-feats li{color:#4b5666;font-size:14.5px;display:flex;align-items:center;gap:9px}
.zc-feats li i{color:#2fae86;width:18px;text-align:center}
.zc-detail{margin-top:16px;color:#6aa883;font-family:'Prompt',sans-serif;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.zc-detail:hover{gap:12px}
.zc-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eef1f5}
.zc-price{display:flex;align-items:baseline;gap:6px}
.zc-price small{color:#8a95a6;font-size:13px}
.zc-price b{font-family:'Prompt',sans-serif;font-weight:700;font-size:26px;color:#e23b3b}
.zc-price span{color:#8a95a6;font-size:13px}
.zc-price b.ask{font-size:20px;color:#477a5b}
.zc-book{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#6aa883,#477a5b);color:#fff;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:600;font-size:15.5px;padding:12px 26px;border-radius:12px;box-shadow:0 10px 24px rgba(31,95,176,.35);transition:.18s}
.zc-book:hover{color:#fff;transform:translateY(-2px)}
@media(max-width:820px){
  .zcard{grid-template-columns:1fr}
  .zc-slider{min-height:0;aspect-ratio:16/10}
  .zc-feats{grid-template-columns:1fr}
}
@media(max-width:480px){
  .zc-foot{flex-direction:column;align-items:stretch}
  .zc-book{justify-content:center}
}

/* rooms: หมายเหตุราคาตามฤดูกาล (แทนราคา/ปุ่มจอง) */
.zc-note{margin-top:auto;padding-top:16px;border-top:1px solid #eef1f5;color:#8a95a6;font-size:13.5px;font-style:italic}

/* ===================================================================
   หน้า room — รายละเอียดโซน + แกลเลอรียูนิต
   =================================================================== */
.room-wrap{max-width:1160px;margin:0 auto;padding:26px 22px 60px}
/* แกลเลอรีบน */
.rm-gallery{position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-bottom:28px}
.rm-g-main{position:relative;border-radius:18px 0 0 18px;min-height:380px;background-size:cover;background-position:center;background-color:#dfe6ef;cursor:pointer}
.rm-g-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rm-g-thumb{position:relative;border-radius:4px;background-size:cover;background-position:center;background-color:#dfe6ef;cursor:pointer;min-height:185px}
.rm-g-side .rm-g-thumb:nth-child(2){border-top-right-radius:18px}
.rm-g-side .rm-g-thumb:last-child{border-bottom-right-radius:18px}
.rm-g-main:hover,.rm-g-thumb:hover{filter:brightness(.94)}
.rm-g-zoom{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:#477a5b;display:grid;place-items:center;font-size:17px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.rm-g-more{position:absolute;inset:0;background:rgba(15,25,45,.5);color:#fff;display:grid;place-items:center;font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;border-radius:inherit}
.rm-g-all{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1f2a3a;border:none;font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;padding:10px 18px;border-radius:10px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.rm-g-all:hover{background:#f2f6fb}
/* เลย์เอาต์ */
.room-grid{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:start}
.rm-head{margin-bottom:8px}
.rm-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(31,95,176,.1);color:#477a5b;font-family:'Prompt',sans-serif;font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:999px;margin:0 6px 10px 0}
.rm-badge i{color:#6aa883;font-size:11px}
.rm-title{font-family:'Trirong',serif;font-weight:600;font-size:clamp(26px,3.6vw,36px);color:#1a2432;margin:0}
.rm-headline{color:#6aa883;font-weight:600;font-size:15px;margin-top:6px;display:flex;align-items:center;gap:7px}
.rm-headline i{color:#6aa883}
.rm-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;color:#4b5666;font-size:15px}
.rm-meta i{color:#2fae86;margin-right:7px}
.rm-meta b{color:#1a2432}
.rm-sec{margin-top:34px;padding-top:28px;border-top:1px solid #eef1f5}
.rm-sec-title{font-family:'Trirong',serif;font-weight:600;font-size:22px;color:#1a2432;margin:0 0 6px}
.rm-sec-sub{color:#8a95a6;font-size:14px;margin:0 0 18px}
.rm-amen{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-top:6px}
.rm-amen-i{color:#3f4a5a;font-size:15px;display:flex;align-items:center;gap:11px}
.rm-amen-i i{color:#2fae86;width:20px;text-align:center}
/* ยูนิต */
.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.unit-card{background:#fff;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 8px 24px rgba(26,38,30,.1);transition:.18s}
.unit-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,38,30,.18)}
.unit-card__img{position:relative;width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#e2e8f0;display:grid;place-items:center;color:#b7c1d1;font-size:30px}
.unit-card__count{position:absolute;right:8px;bottom:8px;background:rgba(15,25,45,.72);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.unit-card__code{position:absolute;top:8px;left:8px;background:#477a5b;color:#fff;font-family:'Prompt',sans-serif;font-weight:600;font-size:12.5px;padding:3px 11px;border-radius:8px}
.unit-card__body{padding:11px 13px;font-family:'Prompt',sans-serif}
.unit-card__body b{color:#1a2432;font-size:14.5px;font-weight:600}
/* กล่องจอง */
.room-side{position:sticky;top:100px}
.rm-book{background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(26,38,30,.14);padding:22px}
.rm-book__price{display:flex;align-items:baseline;gap:6px;margin-bottom:16px}
.rm-book__price small{color:#8a95a6;font-size:13px}
.rm-book__price b{font-family:'Prompt',sans-serif;font-weight:700;font-size:30px;color:#e23b3b}
.rm-book__price span{color:#8a95a6;font-size:13px}
.rm-book__price b.ask{font-size:22px;color:#477a5b}
.rm-book__btn{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#6aa883,#477a5b);color:#fff;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;padding:14px;border-radius:12px;box-shadow:0 10px 24px rgba(31,95,176,.35);transition:.18s}
.rm-book__btn:hover{color:#fff;transform:translateY(-2px)}
.rm-book__ghost{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;color:#477a5b;text-decoration:none;font-size:14.5px;padding:10px}
.rm-book__note{margin:14px 0 0;color:#8a95a6;font-size:12.5px;font-style:italic;text-align:center}
/* lightbox */
.rlb{position:fixed;inset:0;z-index:99999;background:rgba(6,12,24,.92);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:30px}
.rlb[hidden]{display:none}
.rlb-stage{display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:82vh}
.rlb-stage img{max-width:90vw;max-height:82vh;border-radius:8px;box-shadow:0 24px 64px rgba(0,0,0,.55)}
.rlb-empty{display:flex;flex-direction:column;align-items:center;gap:12px;color:#cfd8e6;font-size:16px}
.rlb-empty i{font-size:48px;opacity:.6}
.rlb-x{position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%;background:#fff;border:none;color:#e23b3b;font-size:28px;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.rlb-nav{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);border:none;color:#fff;font-size:34px;cursor:pointer}
.rlb-nav.prev{left:20px}.rlb-nav.next{right:20px}
.rlb-nav:hover{background:rgba(255,255,255,.32)}
.rlb-cap{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-size:14.5px}
@media(max-width:900px){
  .room-grid{grid-template-columns:1fr}
  .room-side{position:static}
  .rm-gallery{grid-template-columns:1fr}
  .rm-g-main{border-radius:16px;min-height:0;aspect-ratio:16/10}
  .rm-g-side{display:none}
  .rm-amen{grid-template-columns:1fr}
  .unit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){ .unit-grid{grid-template-columns:1fr 1fr} .rlb-nav{width:44px;height:44px;font-size:26px} .rlb-nav.prev{left:8px}.rlb-nav.next{right:8px} }

/* room: กล่องแยกฟีเจอร์/สิ่งอำนวยฯ/อาหารเช้า */
.rm-box{margin-top:20px;background:#fff;border:1px solid #eef1f5;border-radius:16px;padding:22px 24px;box-shadow:0 8px 24px rgba(26,38,30,.07)}
.rm-box-title{font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;color:#1a2432;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.rm-box-title i{color:#6aa883;font-size:17px}
.rm-box .rm-amen{margin-top:0}

/* ===================================================================
   เมนูมือถือ/แท็บเล็ต — DRAWER (ดีไซน์ใหม่ สว่าง คมชัด)
   =================================================================== */
.tb-drawer-head{display:none}
.mnav-ico{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,20,40,.32);z-index:999;opacity:0;visibility:hidden;transition:.25s}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
@media(max-width:992px){
  .tb-menu{
    position:fixed;top:0;left:0;height:100vh;height:100dvh;width:84%;max-width:390px;z-index:1001;
    background:linear-gradient(180deg,#6aa883 0%,#6aa883 55%,#5a8f6b 100%);
    flex-direction:column;align-items:stretch;gap:0;padding:0 0 30px;overflow-y:auto;
    transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:8px 0 40px rgba(6,18,40,.45)}
  body.nav-open .tb-menu{transform:none}

  /* หัว drawer */
  .tb-drawer-head{display:flex;align-items:center;gap:13px;padding:20px 20px 18px;position:sticky;top:0;z-index:2;
    background:#477a5b}
  .tb-drawer-brand{display:flex;align-items:center;gap:12px;color:#fff}
  .tb-drawer-brand img{width:46px;height:46px;border-radius:50%;background:#fff;padding:2px;object-fit:contain;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .tb-drawer-brand b{font-family:'Prompt',sans-serif;font-size:19px;font-weight:600;letter-spacing:.3px}
  .tb-drawer-x{margin-left:auto;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
  .tb-drawer-x:hover{background:rgba(255,255,255,.34);transform:rotate(90deg)}

  /* รายการเมนู */
  .tb-menu>a,.tb-has-mega>a{display:flex;align-items:center;gap:13px;width:100%;color:#ffffff;
    font-family:'Prompt',sans-serif;font-size:16.5px;font-weight:600;padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,.14);text-shadow:none;position:relative;transition:.15s;cursor:pointer}
  .tb-menu>a>span,.tb-has-mega>a>span{flex:1}
  .tb-menu>a::after,.tb-has-mega>a::after{display:none}
  .mnav-ico{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.16);font-size:15px;color:#fff}
  .tb-menu>a:active,.tb-has-mega>a:active{background:rgba(255,255,255,.14)}
  .tb-menu>a:hover,.tb-has-mega>a:hover{background:rgba(255,255,255,.14);color:#fff}
  .tb-menu>a.active{background:rgba(255,255,255,.20);box-shadow:inset 5px 0 0 #9ac4ab}
  .tb-menu>a.active .mnav-ico{background:#9ac4ab;color:#2a4a39}
  .tb-caret{display:none}
  .tb-acc-caret{margin-left:auto;transition:transform .28s;font-size:14px;color:#fff}
  .tb-has-mega.open .tb-acc-caret{transform:rotate(180deg);color:#fff}

  /* accordion บ้านพัก (A/B ไม่มีรูป) */
  .tb-has-mega{position:static}
  .tb-mega{position:static;transform:none;visibility:visible;opacity:1;width:100%;
    background:rgba(0,0,0,.22);border:none;border-radius:0;box-shadow:none;padding:0;margin:0;
    display:none}
  .tb-has-mega.open .tb-mega{display:block}
  .tb-mega::before,.tb-mega::after{display:none}
  .tb-mega__grid{display:block;padding:0}
  .tb-mega__card{display:flex !important;flex-direction:row !important;align-items:center;gap:13px;width:auto !important;
    background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:none;
    padding:11px 20px 11px 26px;transform:none;color:#fff;overflow:visible}
  .tb-mega__card:hover,.tb-mega__card:active{background:rgba(255,255,255,.12);transform:none}
  .tb-mega__img{display:block !important;width:76px !important;height:56px !important;aspect-ratio:auto !important;
    flex:0 0 auto;border-radius:9px;object-fit:cover;background-size:cover;background-position:center;background-color:rgba(255,255,255,.18)}
  .tb-mega__img.ph{display:grid !important;place-items:center;color:#fff;font-size:18px}
  .tb-mega__b{display:flex !important;flex-direction:column;gap:2px;min-width:0;padding:0 !important}
  .tb-mega__b b{color:#fff;font-size:16px;font-weight:600;font-family:"Prompt",sans-serif;line-height:1.25}
  .tb-mega__b small{color:#dcefe4;font-size:13px;line-height:1.25}
  .tb-mega__foot{display:none}
  .tb-cta{display:none}
}