/* Suriya9 — Swiper sliders styling (เนียนหรู โทนทอง) */

/* ─── โปรโมชั่นแนะนำ (หน้าแรก) ─── */
/* ขยายตัวกลางด้วย transform: scale ทั้งใบ → รูปสเกลไปพร้อมกัน ไม่ crop ไม่ยืด
   และ transform ไม่กระทบ layout → container สูงคงที่ ไม่สั่น "หุบๆขยายๆ" */
.s9-promo__cards.swiper { width: 100%; padding: 40px 0; overflow: hidden; box-sizing: border-box; }
.s9-promo__cards.swiper .swiper-wrapper { align-items: center; }
.s9-promo__cards.swiper .swiper-slide { width: auto; height: auto; display: flex; }
/* รีเซ็ตการ์ดกลางที่ล็อก height ถาวร (--tall 600px) ให้ทุกใบเท่ากัน (565px)
   แล้วให้ "ตัวที่เลื่อนมาอยู่กลาง (active)" เป็นตัวขยายแทน */
.s9-promo__cards.swiper .s9-promo__card--tall { height: 565px; }
/* ตัวข้าง = ขนาดปกติ (scale 1) */
.s9-promo__cards.swiper .s9-promo__card {
  margin: 0; transform: scale(1); transform-origin: center center;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease;
}
/* ตัวที่มาอยู่กลาง (active) — ขยายทั้งใบ ~9% (รูปไม่ crop) + ยกเงาให้เด่น */
.s9-promo__cards.swiper .swiper-slide-active .s9-promo__card {
  transform: scale(1.09); box-shadow: 0 5px 10px rgba(90,60,15,0.28);
}

/* จุด pagination (ใช้ .s9-dots เดิม) */
.s9-promo__pager { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.s9-promo__pager .s9-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(148,100,30,0.28); cursor: pointer;
  transition: all .3s ease; display: inline-block;
}
.s9-promo__pager .s9-dot.is-active { background: var(--gold); width: 26px; border-radius: 5px; }

/* ─── แกลเลอรี carousel ─── */
/* รีเซ็ต container เดิม (flex-column ฯลฯ) เมื่อกลายเป็น Swiper */
.wk-grid.swiper, .sv-gallery__grid.swiper, .svf-grid.swiper {
  display: block !important; width: 100%; align-items: stretch; gap: 0;
}
.s9-gal-swiper .swiper-wrapper { align-items: stretch; }
.s9-gal-swiper .swiper-slide { height: auto; }
.s9-gal-swiper { position: relative; overflow: hidden; padding: 8px 0; }
.s9-gal-slide { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,.12); }
.s9-gal-slide img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .5s ease; }
.s9-gal-slide:hover img { transform: scale(1.05); }

/* ปุ่มลูกศร — วงกลมทองบาง ๆ */
.s9-swnav {
  --swiper-navigation-size: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--gold-deep);
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  transition: background .25s ease, color .25s ease;
}
.s9-swnav:hover { background: var(--gold); color: #fff; }
.s9-swnav::after { font-size: 16px; font-weight: 700; }
.s9-swnav.swiper-button-disabled { opacity: 0; }