@charset "utf-8";
/* CSS Document */
/* Slide Show */

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {}
.mySlides img {
  width: 100%; height: auto;
  border-radius: 8px;
}

.sold-mask-image {
  position: absolute;
  width: 100%; /*  max-width: 70%;  */
  height: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  pointer-events: none;
  object-position: center;
  object-fit: contain;
  cursor:pointer;
  transition: 0.3s;  
}

.mySlides a,

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,255,255,0.8);
  color: #333;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  z-index: 5;
}

/* Add a transparency effect for thumnbail images */
.gallery .demo {
}

.gallery .active {
  cursor: pointer;
  border: 3px solid #e48b93;   
  transform: scale(1.08);
}

.gallery .demo:hover {
  cursor: pointer;  
  transform: scale(1.1);
}

/* Horizontal Slider */
.gallery-wrap{
  display: flex;
  align-items:center;
  justify-content:center;
  margin: 5px auto;
}
.gallery-wrap .fa-solid {
  color:#a91d3a;
  font-size: calc(25px + 0.1vw);
}
#backBtn, #nextBtn{
  width: 50px;
  cursor: pointer;
  margin: 5px;
}
.gallery{
  width: 100%;
  max-width: 900px;
  display: flex;
  overflow-x:scroll;
}
.gallery div{
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 15px;
  padding: 15px 5px;
  flex: none;  
}
@media (max-width: 1024px) {}
.gallery div img{
  width: auto; height: 100px; 
  border-radius: 5px;
  transition: transform 0.5s;
}
.gallery::-webkit-scrollbar{
  display: none;
}
#thumbnail-slider {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 10px;
}
.thumbnail {
  position: relative;  
  display: inline-flex;
  flex: 0 0 auto;
}
.thumbnail img {
  width: 100px;
  height: auto;
}
.sold-thumb-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  opacity: 0.95;
  pointer-events: none; /* ✅ ป้องกันไม่ให้ block การคลิกที่รูปหลัก */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /*z-index: 29;*/
}
/* ✅ เอฟเฟกต์เมื่อ hover ที่ span .thumbnail */
.thumbnail:hover .sold-thumb-mask {
  transform: scale(1.1);
  opacity: 0.9;
}