.cis-slider { width:100%; max-width:800px; margin:auto; position:relative; }
.cis-main-image { position:relative; height:var(--height); overflow:hidden; }
.cis-main-image img { width:100%; height:100%; object-fit:cover; display:block; }
.cis-arrow { position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; cursor:pointer; z-index:10; color:#fff; background-color:rgba(0,0,0,0.4); padding:0.4rem 0.6rem; border-radius:50%; }
.cis-arrow.left { left:15px; } .cis-arrow.right { right:15px; }

.cis-thumbnails {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:10px 0;
  scroll-behavior: smooth;
}

.cis-thumb-wrap { text-align:center; flex:0 0 auto; }
.cis-thumb { width:100px; height:auto; cursor:pointer; border:2px solid transparent; margin:0 var(--thumb-gap); }
.cis-thumb.active { border-color:#0073aa; }
.cis-caption { font-size:0.8rem; margin-top:4px; }

.thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 6px 10px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
  cursor: pointer;
}

.thumb-left {
  left: 5px;
}

.thumb-right {
  right: 5px;
}

.cis-thumbnails {
  position: relative; /* ให้ .thumb-arrow ซ้อนทับ */
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 30px; /* มีช่องให้ปุ่มวาง */
}