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

.slideshow {
    position: relative;
    width: 100%;
    height: calc(100vh - 40px);
    overflow: hidden;
  }

  .slide-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity: 0;
    transition: opacity 1s ease;
	cursor: grab;
  }
.slide-wrapper:active { cursor:grabbing; }
  .slide-wrapper.active {
    opacity:1;
    z-index:2;
  }

/* เดิมใน .slide มี animation อยู่ — ลบออก */
.slide {
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  /* ลบ animation ออกจากตรงนี้ */
}

/* เพิ่มอันนี้แทน */
.slide.animating {
  animation: zoomOut 8s linear forwards;
}

/* แนะนำเพิ่ม เพื่อให้ภาพกินเต็มเฟรมและกันลากภาพ */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* ให้ event ไปที่ .slide-wrapper แทน */
}


  @keyframes zoomOut {
    0% {transform: scale(1.1);}
    100% {transform: scale(1);}
  }

  /* ส่วนข้อความ */
.slide-content {
	width: 100%;
	padding: 0 0 80px 0;
	color: var(--white-color);
	text-align: center;
	background: linear-gradient(to bottom, rgba(0, 64, 48, 0), rgba(0, 64, 48, .9));
	position: absolute;
	bottom: 0; /* ให้อยู่เหนือ progress bar */
	display: flex;
	justify-content: center;
	align-items: center;
    z-index: 5;
  }
.slide-content h1 { font-size: clamp(30px, 14vw, 50px); font-weight: 900; cursor: text;}
.slide-content h2 { font-size: clamp(26px, 14vw, 34px); font-weight: 400; cursor: text;}
.slide-content h3 { font-size: clamp(22px, 14vw, 27px); font-family: var(--third-font); font-weight: 300; cursor: text;}
.slide-content a {
	margin: 10px 20px 20px;
	padding: 7px 30px;
	color: var(--white-color);
	display: inline-block;
	position: relative;
	text-transform:uppercase;
	text-decoration: none;
	background: linear-gradient(to right,
              var(--purple00-color) 0px, 
              var(--purple00-color) 5px,
              var(--purple00-color) 5px,
              var(--purple00-color) 100%);
}
.slide-content a:hover {
	padding: 7px 30px 7px 35px;
	background: linear-gradient(to right,
              var(--purple02-color) 0px, 
              var(--purple02-color) 5px,
              var(--purple00-color) 5px,
              var(--purple00-color) 100%);
}


  /* Progress bar container */
  .progress-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 6;
  }
.progress-bar {
  width: 60px;
  height: 30px;
  background: linear-gradient(
    to bottom,
    transparent calc(50% - 2px),   /* พื้นโปร่งครึ่งบน */
    rgba(114,151,98,0.3) calc(50% - 2px), /* เส้นสีสูง 4px */
    rgba(114,151,98,0.3) calc(50% + 2px),
    transparent calc(50% + 2px)    /* พื้นโปร่งครึ่งล่าง */
  );
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
}
.progress-bar span {
  height: 4px;
  width: 0%;
  background: rgba(114,151,98,1);
}


  /* Responsive */
  @media(max-width:768px) {
    .progress-bar {width: 40px;}
  }

  @media(max-width:575px) {

      .progress-container { bottom: 20px; }
  }

  @media(max-width:480px) {
    .progress-bar {width: 30px;}
  }