/* ปรับง่ายด้วยตัวแปร */
.swp-row{
  --small: 383;      /* px สำหรับรูปเล็ก */
  --large: 488;      /* px สำหรับรูปใหญ่ (ขวาสุดของชุดปัจจุบัน) */
  --gap:   24;       /* ช่องไฟระหว่างสไลด์ */
  --nav-offset: 12;  /* ขยับลูกศรเข้าซ้ายจากขอบซ้ายของรูปใหญ่ */
  position: relative;
  width: 100%;
  padding: 60px 0;
}

/* viewport แสดงพอดี 3 ใบ: เล็ก + เล็ก + ใหญ่  (และซ่อนใบถัดไปทางขวา) */
.swp-viewport{
  width: calc( (var(--small) * 2 + var(--large) + var(--gap) * 2) * 1px );
  overflow: hidden;
  margin: 0 auto;     /* กึ่งกลางบล็อก */
}

/* Swiper base (fallback กัน core ไม่โหลด) */
.swp-strip{ overflow: visible; }
.swp-strip .swiper-wrapper{ display:flex; align-items:flex-start; }

/* ดีฟอลต์: ใบเล็ก */
.swp-strip .swiper-slide{
  width:  calc(var(--small) * 1px);
  height: calc(var(--small) * 1px);
  border-radius: 24px;
  overflow: hidden;
}
.swp-strip .swiper-slide img{ width:100%; height:100%; object-fit:cover; }

/* ใบที่ "ใหญ่" (ตำแหน่งขวาสุดของชุดปัจจุบัน) — ถูกเติมคลาสด้วย JS */
.swp-strip .swiper-slide.is-large{
  width:  calc(var(--large) * 1px);
  height: calc(var(--large) * 1px);
}

/* ปุ่ม: ใต้รูปที่ 2, ตำแหน่งคำนวณจาก JS = small*2 + gap*2 - nav-offset */
.swp-nav{
  position: absolute;
  bottom: -44px;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.swp-nav .swiper-button-prev,
.swp-nav .swiper-button-next{
  position: static;
  width: 38px; height: 38px; border-radius: 50%;
  background: #e3f2fd; color:#003665;
}
.swp-nav .swiper-button-prev::after,
.swp-nav .swiper-button-next::after{ font-size:14px; font-weight:700; }
.swp-nav .swiper-button-prev:hover,
.swp-nav .swiper-button-next:hover{ background:#003665; color:#fff; }

/* Responsive */
@media (max-width: 991px){
  .swp-row{ --small: 320; --large: 380; --gap: 20; --nav-offset: 10; }
  .swp-viewport{
    width: calc( (var(--small) * 2 + var(--large) + var(--gap) * 2) * 1px );
  }
  .swp-nav{
    position: relative;
    bottom: auto;
    left: 0 !important;
    justify-content: center;
    margin-top: 16px;
  }
}
@media (max-width: 575px){
  .swp-row{ --small: 260; --large: 300; --gap: 16; --nav-offset: 8; }
  .swp-viewport{
    width: calc( (var(--small) * 2 + var(--large) + var(--gap) * 2) * 1px );
  }
}