.device-frame {
  position: relative;
  width: 85%;
  aspect-ratio: 1500 / 650;     
  overflow: hidden;
  margin: 0 auto;
}

.carousel-inner {
  width: 100%;
  height: 100%;

}

.carousel-item {
  position: relative; /* ให้ caption อิงกับ item */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;   
  justify-content: center; 
}

.carousel-item .carousel-caption {
  position: absolute;
  bottom: 0;        /* ชิดล่างของรูป */
  left: 0;
  width: 100%;
  padding: 8px 15px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
.carousel-img01 {
  max-width: 100%;         
  max-height: 100%;        
  object-fit: contain;
  transform: scale(.935);
  transform-origin: bottom center;
}


/* PNG Frame Overlay */
.frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  transform: scale(1);
}

/* ข้อความด้านล่าง */
/* .device-frame .carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 15px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  z-index: 20; 
  transform: scale(.95);
} */


/* Caption responsive */
.device-frame .carousel-caption {
  position: relative; 
  width: 95%;            
  max-width: 95%;        
  margin: 0px auto 0;
  padding-top: 1.5px;
  padding-bottom: 20px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border-radius: 6px;

  font-size: clamp(8px, 1vw, 16px);

  /* อยู่บรรทัดเดียว */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ป้องกันการซ้อนภาพ */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
  position: relative; /* ให้ภาพ active อยู่บนสุด */
}

/* ซ่อน slide ที่ไม่ active เพื่อไม่ให้ทับ */
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active.carousel-item-left,
.carousel-fade .carousel-item.active.carousel-item-right {
  opacity: 0;
}