/* --------------------------------❗️index css ❗️--------------------------------- */



/* =========================================================
   ❗️ส่วนของ Video Slider❗️
   ========================================================= */

.video-slider {
  position: relative;        /* ใช้เป็นจุดอ้างอิงให้ element ด้านใน */
  width: 100%;
  aspect-ratio: 16 / 9;  /* ให้สูงตามสัดส่วนจอ */
  max-height: 100vh;     /* ไม่เกินหน้าจอ */
  overflow: hidden;          /* ซ่อนวิดีโอที่เกินขอบ */
  z-index: 1;                /* อยู่ใต้ navbar แต่เหนือพื้นหลัง */
}



.video-slider video {
  position: absolute;        /* ซ้อนวิดีโอทั้งหมดไว้ตำแหน่งเดียวกัน */
  top: 0;                    /* ชิดด้านบน */
  left: 0;                   /* ชิดด้านซ้าย */
  width: 100%;               /* กว้างเต็ม container */
  height: 100%;              /* สูงเต็ม container */
  object-fit: cover;         /* ครอบวิดีโอให้เต็มจอ */
  transform: translateY(-100%); /* เริ่มต้นอยู่นอกจอด้านบน */
  opacity: 0;                /* โปร่งใส มองไม่เห็น */
  transition: 
    transform 1s ease-in-out, /* เอฟเฟกต์เลื่อนลง */
    opacity 1s ease-in-out;   /* เอฟเฟกต์เฟด */
  z-index: 0;                /* อยู่หลังสไลด์ที่ active */
}

.video-slider video.active {
  transform: translateY(0);  /* เลื่อนเข้ามาในจอ */
  opacity: 1;                /* แสดงชัดเจน */
  z-index: 1;                /* อยู่ด้านหน้าสไลด์อื่น */
}

/* ปุ่มควบคุม */
.controls {
  position: absolute;        /* วางซ้อนบนวิดีโอ */
  top: 50%;                  /* กึ่งกลางแนวตั้ง */
  width: 100%;               /* กว้างเต็ม slider */
  display: flex;             /* ใช้ flexbox */
  justify-content: space-between; /* ปุ่มซ้าย–ขวาคนละฝั่ง */
  transform: translateY(-50%); /* ปรับให้อยู่กึ่งกลางจริง */
  pointer-events: none;      /* กันไม่ให้บังการคลิก */
  z-index: 2;                /* อยู่เหนือวิดีโอ */
}

.controls button {
  background: none;          /* พื้นหลังไม่มี */
  border: none;              /* ไม่มีเส้นขอบ */
  color: white;            /* สีลูกศร */
  font-size: 2rem;           /* ขนาดไอคอน */
  padding: 0.5rem 1rem;      /* ระยะห่างด้านในปุ่ม */
  cursor: pointer;           /* เมาส์เป็นรูปมือ */
  pointer-events: auto;      /* อนุญาตให้คลิกได้ */
}



/* =========================================================
   ❗️ส่วนคำอธิบายหลักของชมรม❗️
   ========================================================= */

/* ตกแต่งส่วนคำอธิบายหลักของชมรม */
.content-main {
  display: flex; /* ใช้ flex จัดตำแหน่ง */
  justify-content: center; /* จัดกลางแนวนอน */
  align-items: center; /* จัดกลางแนวตั้ง */
  text-align: center; /* ข้อความชิดกลาง */
  width: 100%; /* ความกว้างเต็มจอ */
padding: clamp(40px, 5vw, 80px) 20px; /* แทนเดิม 60–120px */

  box-sizing: border-box;

  background: linear-gradient( /* ทำพื้นหลังไล่สี */
    90deg, /* ไล่สีแนวนอน */
    rgba(0, 0, 0, 0.9) 0%, /* สีดำเข้มด้านซ้าย */
    rgba(0, 5, 77, 0.9) 45%, /* สีน้ำเงินเข้มตรงกลาง */
    rgb(255, 85, 0) 100% /* สีส้มด้านขวา */
  );
}

/* กล่องข้อความส่วนหัว */
.header {
  max-width: 900px; /* จำกัดความกว้างของข้อความ */
}

/* เส้นเเบ่งข้อความ */
.hero-divider{
  width: 100%;
  max-width: 400px;
  margin: 15px auto;
  border: none;
  height: 1px;
  background: white;
  opacity: 0.5;
}

/* =========================================================
   ❗️Scroll Animation + Blur Effect❗️
   ========================================================= */

/* ตั้งค่าเริ่มต้นให้ h1 เลื่อนมาจากซ้าย + เบลอ */
.content-main .header h1 {
  margin: 6px 0; /* ระยะห่างบนล่าง */
  line-height: 1.2; /* ความสูงบรรทัด */
  font-size: clamp(18px, 3vw, 32px); /* responsive font จอเล็ก กลาง ใหญ่*/
  color: #ffffff; /* สีตัวอักษร */

  opacity: 0; /* ซ่อนไว้ก่อน */
  transform: translateX(-120px); /* เริ่มต้นอยู่ทางซ้าย */
  filter: blur(10px); /* เบลอตอนเริ่ม */
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* ช้าลงและนุ่มขึ้น */
}

/* ตั้งค่าเริ่มต้นให้ p เลื่อนมาจากขวา + เบลอ */
.content-main .header p {
  margin: 8px 0; /* ระยะห่าง */
  line-height: 1.2; /* ความสูงบรรทัด */
  font-size: clamp(10px, 2vw, 16px); /* responsive font จอเล็ก กลาง ใหญ่*/
  color: #ffffff; /* สีตัวอักษร */

  opacity: 0; /* ซ่อนก่อน */
  transform: translateX(120px); /* เริ่มจากขวา */
  filter: blur(10px); /* เบลอ */
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* ช้าลง */
}

/* เมื่อ scroll มาถึง section */
.content-main.show .header h1 {
  opacity: 1; /* แสดง */
  transform: translateX(0); /* กลับตำแหน่งปกติ */
  filter: blur(0); /* หายเบลอ */
}

/* เพิ่ม delay ให้ p ตามมาทีหลังนิดนึง */
.content-main.show .header p {
  opacity: 1; /* แสดง */
  transform: translateX(0); /* กลับตำแหน่ง */
  filter: blur(0); /* หายเบลอ */
  transition-delay: 0.3s; /* ดีเลย์เล็กน้อย */
}


/* ===============================
   ✨ เมื่อ Scroll มาถึง (เพิ่ม class show)
   =============================== */

/* ทำให้ h1 แสดงและเลื่อนเข้าตำแหน่งปกติ */
.content-main.show .header h1 {
  opacity: 1; /* แสดง */
  transform: translateX(0); /* กลับมาตำแหน่งเดิม */
}

/* ทำให้ p แสดงและเลื่อนเข้าตำแหน่งปกติ */
.content-main.show .header p {
  opacity: 1; /* แสดง */
  transform: translateX(0); /* กลับมาตำแหน่งเดิม */
  transition-delay: 0.2s; /* หน่วงเวลาเล็กน้อยให้ตามหลัง h1 */
}




/* ===============================
   ✨ รูปเลื่อน preview
   =============================== */
.preview-sub-multi { /* container รวม 2 แถว */
  overflow: hidden; /* ซ่อนส่วนเกิน */
  width: 100%; /* กว้างเต็มหน้าจอ */
  display: flex; /* ใช้ flex layout */
  flex-direction: column; /* จัดเป็นแนวตั้ง (2 แถว) */
  gap: 0px; /* ระยะห่างระหว่างแถวบนและล่าง */
  margin-bottom: 100px;   /* เพิ่มระยะห่างด้านล่างก่อนส่วนต่อไป */
}

.preview-track { /* แต่ละแถว */
  display: flex; /* จัดรูปเป็นแถว */
  align-items: center; /* จัดกลางแนวตั้ง */
  width: max-content; /* ความกว้างตามเนื้อหา */
  will-change: transform; /* ช่วยให้ animation ลื่น */
}

.preview-track img { /* รูปแต่ละรูป */
  width: 300px; /* กว้าง 400px */
  height: 165px; /* สูง 220px */
  margin: 10px; /* ช่องว่างรอบด้าน 10px */
  flex-shrink: 0; /* ห้ามย่อขนาด */
  object-fit: cover; /* ครอบเต็มกล่องโดยไม่เสียอัตราส่วน */
  border-radius: 6px; /* มุมโค้งเล็กน้อย */
}



/* ===============================
   ✨ ข่าว 3 ข่าว เเสดงหน้าหลัก
   =============================== */

/* ปรับระยะ section หน้า home เท่านั้น */
.news-section {
  padding: 20px 20px;
}




/* =========================================================
   ❗️Swiper Card Slider การ์ดแสดงวิดีโอเลื่อน❗️
   ========================================================= */

/* Swiper Container: กล่องแสดงสไลด์ */
.swiper {
  width: 100%; /* ความกว้าง 100% */
  max-width: 100%; /* ไม่เกิน 1300px */
  margin-top: 100px; /* ระยะห่างจากด้านบน */
  margin-bottom: 120px; /* ระยะห่างจากด้านล่าง */
  padding: 40px 0; /* ระยะห่างบนล่างด้านใน */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* เพิ่ม effect fade ขอบซ้ายขวา */
}

/* สไลด์แต่ละอัน */
.swiper-slide {
  width: 60%;              /* ใช้ % แทน px */
  aspect-ratio: 16 / 9;    /* รักษาสัดส่วนวิดีโอ */
  border-radius: 6px; /* มุมโค้ง */
  overflow: hidden; /* ซ่อนส่วนเกิน */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* เงา */
  position: relative; /* สำหรับจัดวางซ้อน */
  transition: transform 0.4s ease, opacity 0.4s ease; /* เพิ่ม animation */
}

/* วิดีโอในสไลด์ */
.swiper-slide video {
  width: 100%; /* วิดีโอกว้างเต็ม */
  height: 100%; /* สูงเต็ม */
  object-fit: cover; /* ครอบวิดีโอให้เต็ม */
  border-radius: 2px; /* มุมโค้ง */
}

/* สไลด์ที่ไม่ถูกเลือก */
.swiper-slide:not(.swiper-slide-active) {
  opacity: 0.4; /* จางลงถ้าไม่ใช่ slide ที่แอคทีฟ */
  transform: scale(0.85); /* ย่อขนาดลงเล็กน้อย */
}

/* Slide Content เนื้อหาทับบนสไลด์ (ถ้ามี) */
.card-content {
  position: absolute; /* ซ้อนอยู่บนวิดีโอ */
  bottom: 0; /* ติดล่าง */
  background: rgba(0,0,0,0.6); /* พื้นหลังดำโปร่ง */
  color: white; /* สีข้อความ */
  width: 100%; /* เต็มความกว้าง */
  padding: 10px; /* ระยะห่างด้านใน */
  font-size: 16px; /* ขนาดตัวอักษร */
}

/* Swiper Pagination จุดบอกสถานะสไลด์ */
.swiper-pagination-bullet {
  background: #555; /* สีปุ่มวงกลมสถานะ */
}

.swiper-pagination-bullet-active {
  background: white; /* สีปุ่มเมื่อ active */
}




/* =========================================================
   ⭐ SECTION SPONSOR
   ========================================================= */

.sponsor-section{
    text-align: center; /* จัดกลาง */
    padding: 60px 0px 200px; /* เพิ่มระยะ */
    max-width: 1700px; /* จำกัดความกว้าง */
    margin: auto; /* จัดกลาง */
}

/* ===== หัวข้อ ===== */
.sponsor-section h2{
    font-size: 32px; /* ขนาด */
    margin-bottom: 10px; /* ระยะ */
}

/* ===== คำอธิบาย ===== */
.sponsor-desc{
    opacity: 0.8; /* จาง */
    margin-bottom: 60px; /* เว้น */
}

/* =========================================================
   ⭐ ROW
   ========================================================= */

.sponsor-row{
    display: flex; /* flex */
    justify-content: center; /* กลาง */
    align-items: center; /* กลาง */
    gap: 40px; /* ช่องว่าง */
    flex-wrap: wrap; /* ✅ ถ้าเกินขอบให้ลงบรรทัดใหม่ */
}

/* =========================================================
   ⭐ MAIN SPONSOR
   ========================================================= */

.sponsor-main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* ลงบรรทัดใหม่ได้ */
    gap: 20px;
}

.sponsor-main img{
    width: calc(50% - 20px); /* มือถือเหลือ 2 โลโก้ต่อแถว */
    max-width: 180px;
    height: auto;
}

/* =========================================================
   ⭐ DIVIDER (เส้นแบ่ง)
   ========================================================= */

.sponsor-divider{
    height: 2px; /* ความสูง */
    width: 70%; /* ความกว้าง */
    margin: 60px auto; /* เว้นระยะ */
    background: linear-gradient(to right, transparent, #ff5500, transparent); /* ไล่สี */
    opacity: 0.7; /* จาง */
}



/* =========================================================
   ⭐ SUB SPONSOR
   ========================================================= */
.sponsor-sub {
  overflow: hidden; /* ซ่อนส่วนเกิน */
  width: 100%;
  background: none; /* ปรับตามธีม */
}

.sponsor-track {
  display: flex;
  align-items: center;
  width: max-content; /* สำคัญ */
  will-change: transform; /* ทำให้ลื่น */
}

.sponsor-track img {
  max-width: 110px;
  margin-right: 40px;
  flex-shrink: 0; /* ❗ ห้ามหด */
}



/* =========================================================
   ❗️เเบบทดสอบ Quiz❗️
   ========================================================= */

/* ===== Quiz Section ===== */
.quiz-section{
  padding: 80px 20px; /* ระยะ */
  text-align: center; /* จัดกลาง */
  color: white; /* สีตัวอักษร */

  /* 🔥 ใส่รูปพื้นหลัง */
  background: 
    linear-gradient(rgba(42, 42, 42, 0.8), rgba(42, 42, 42, 0.8)), /* overlay มืด */
    url("../../asset/img/bg/mbti.png"); /* 🔁 เปลี่ยน path รูป */

  background-size: cover; /* เต็มพื้นที่ */
  background-position: center; /* จัดกลาง */
  background-repeat: no-repeat; /* ไม่ซ้ำ */

  position: relative; /* เผื่อ effect */
}

/* container */
.quiz-section .container{
  max-width: 800px; /* จำกัดความกว้าง */
  margin: 0 auto; /* จัดกลาง */
}

/* หัวข้อ */
.quiz-section h2{
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  margin-bottom: 20px;
  animation: fadeUp 0.8s ease;
}

/* ข้อความ */
.quiz-section p{
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
  opacity: 0.9;
  animation: fadeUp 1s ease;
}

.quiz-badge{
  display:inline-block;
  background: linear-gradient(135deg, #6a0dad, #ff5500); /* ม่วง+ส้ม */
  color:#ffffff;
  padding:6px 12px;
  border-radius: 2px; /* มุมโค้ง */
  font-size:14px;
  margin-bottom:15px;
  font-weight:bold;
}

.quiz-features{
  list-style:none;
  padding:0;
  margin:20px 0;
}

.quiz-features li{
  margin:8px 0;
  font-size:16px;
}

.quiz-highlight{
  margin:20px 0;
  font-weight:bold;
  font-size:18px;
}

/* ปุ่ม */
.btn-quiz{
  display: inline-block;
  padding: 14px 30px;
  border-radius: 2px; /* มุมโค้ง */

  background: linear-gradient(135deg, #6a0dad, #ff5500); /* ม่วง+ส้ม */; /* เปลี่ยนสี */;
  color: #ffffff;

  font-weight: bold;
  text-decoration: none;

  transition: all 0.3s ease;
  animation: fadeUp 1.2s ease;
}

/* hover ปุ่ม */
.btn-quiz:hover{
  transform: translateY(-3px) scale(1.05); /* ลอย + ขยาย */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* ===== Animation ===== */
@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}