/* ---------------------------------❗️ responsive css ❗️--------------------------------- */


  
/* สำหรับหน้าจอขนาดเล็ก */
@media (max-width: 768px) { /* ใช้ media query เพื่อปรับ layout เมื่อหน้าจอกว้างไม่เกิน 768px */
  .hamburger {
    display: flex; /* แสดง hamburger menu เมื่อหน้าจอเล็กกว่า 768px */
    margin-left: auto; /* ดันให้ไปชิดขวา */
  }



  .menu {
    position: fixed; /* ตำแหน่งคงที่ ไม่เลื่อนตามหน้า */
    top: 0px; /* ห่างจากด้านบนของหน้าจอ  */
    right: -100%; /* ซ่อนเมนูไว้ด้านขวานอกจอ */
    width: 200px; /* ความกว้างของเมนู */
    background: rgba(0, 0, 0, 0.95); /* พื้นหลังสีดำโปร่งใสนิดหน่อย */
    display: flex; /* ใช้ flexbox เพื่อจัดเรียงภายใน */
    flex-direction: column; /* เรียงเมนูในแนวตั้ง */
    align-items: flex-start; /* จัดแนว item ไปทางซ้าย */
    padding: 20px; /* ระยะห่างด้านใน 20px */
    transition: right 0.3s ease; /* เพิ่มเอฟเฟกต์เลื่อนตอนแสดงเมนู */
    z-index: 100; /* ซ้อนอยู่เหนือ element อื่น ๆ */
    border-left: 2px solid #a337e1; /* เส้นขอบด้านซ้ายสีส้ม */
    border-radius: 0 0 0 20px; /* มุมโค้งด้านซ้ายบนและล่าง */
    padding: 70px 20px 20px 20px; /* เพิ่ม padding-top เป็น 35px บน ขวา ล่าง ซ้าย */
    overflow: hidden; /* ให้เส้นโค้งทำงาน */
  }
  
  .menu.active {
    right: 0; /* แสดงเมนู โดยเลื่อนเข้ามาในจอ */
  }

  .menu a {
    margin: 10px 0; /* ระยะห่างระหว่างลิงก์แนวตั้ง */
    font-size: 16px; /* ขนาดตัวอักษรของลิงก์ */
    width: 100%; /* ให้ลิงก์กว้างเต็ม container */
    padding: 8px 0; /* ช่องว่างด้านบน-ล่างของลิงก์ */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* เส้นคั่นลิงก์แบบจาง ๆ */
  }
}



/* ==============================
   Tablet
================================= */
@media (max-width: 1024px) {

  .video-slider {
    aspect-ratio: 16 / 10;
  }

}

/* ==============================
   Mobile
================================= */
@media (max-width: 768px) {

  .video-slider {
    aspect-ratio: 16 / 10;
  }

  .content-main{
    padding: 40px 16px;
  }

  .swiper{
    margin-top: 20px;
    margin-bottom: 100px;
  }

  .video-container{
    max-width: 100%;
    padding:0px;
  }

}



@media (max-width: 480px) {

  .content-main {
    padding: 30px 15px;
  }

  .header{
    max-width: 100%;
  }

  .content-main .header h1 {
    font-size: clamp(14px, 4vw, 20px);
  }

  .content-main .header p {
    font-size: clamp(18px, 2vw, 12px);
  }
}



/* ===== Responsive sponsor ===== */
@media (max-width: 768px){

    .sponsor-row{
        gap: 25px; /* ลดช่องว่างให้พอดีมือถือ */
    }
    .sponsor-main img{
        width: calc(50% - 15px); /* 2 ตัวต่อแถว */
        max-width: 140px;
    }

    .sponsor-sub img{
        max-width: 80px;
    }

    .sponsor-divider{
        width: 80%;
    }

    .sponsor-main{
        gap: 15px;
    }


}


/* ===== Responsive quiz ===== */
@media (max-width:768px){
  .quiz-section h2{
    font-size: 28px;
  }

  .quiz-section p{
    font-size: 16px;
  }
}

@media (max-width:480px){
  .quiz-section{
    padding: 60px 15px;
  }

  .btn-quiz{
    width: 100%; /* ปุ่มเต็มจอ */
  }
}

/* =========================================================
   🔹 Responsive News (index)
   ========================================================= */

@media (max-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr); /* เหลือ 2 ใบ */
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr; /* เหลือ 1 ใบ */
  }
}

@media (max-width:768px) {
  .news-card{
    border-radius: 16px;
    overflow: hidden;
    width: 95%;
  }

  .news-card-content{
    padding: 14px;
  }

  .news-card h3{
    font-size: 18px;
    line-height:1.3;
  }
  .news-card p{
    font-size: 14px;
  }
}


/* ==============================
   📱 Mobile การ์ดเลื่อน
================================= */
@media (max-width: 768px) {

  .swiper {
    width: 100%;
    padding: 20px 0;
    mask-image: none; /* เอา fade ขอบออก */
  }

  .swiper-slide {
    width: 100% !important;  /* เต็มจอ */
    height: auto;            /* ให้ยืดตามสัดส่วน */
    aspect-ratio: 16 / 9;    /* คงสัดส่วนวิดีโอ */
    transform: scale(1) !important; /* ไม่ย่อ */
    opacity: 1 !important;   /* ไม่จาง */
  }

  .swiper-slide:not(.swiper-slide-active) {
    transform: scale(1);
    opacity: 1;
  }

}


/* ---------------------------------❗️ NEWS responsive css ❗️--------------------------------- */

/* ===============================
   TABLET
================================= */
@media (max-width: 992px) {

    .news-filter {
        gap: 10px; /* ลดช่องว่าง */
    }

    .news-filter button {
        padding: 8px 20px; /* ลดขนาดปุ่ม */
    }


/* ===============================
   MOBILE
================================= */
@media (max-width: 576px) {

    .news-filter {
        flex-direction: column; /* เรียงแนวตั้ง */
        align-items: stretch; /* ให้เต็มความกว้าง */
        gap: 12px;
    }

    .filter-label {
        text-align: center; /* จัด label กลาง */
    }

    .news-filter button {
        width: 50%; /* ปุ่มเต็มความกว้าง */
        padding: 12px; /* เพิ่มพื้นที่กด */
        font-size: 0.95rem; /* ขยายตัวหนังสือเล็กน้อย */
    }
  }
}



/* ---------------------------------❗️ NEWS-detail responsive css ❗️--------------------------------- */



.news-detail { /* กล่องหน้า detail */
    max-width: 1000px; /* จำกัดความกว้างเนื้อหา */
    margin: 120px auto; /* เว้นด้านบนล่าง + จัดกลาง */
    padding: 0 40px; /* เว้นขอบซ้ายขวา */
}

.news-detail h1 { /* หัวข้อข่าว */
    margin-bottom: 10px; /* เว้นด้านล่าง */
}

.news-date { /* วันที่ข่าว */
    color: gray; /* สีข้อความ */
    margin-bottom: 20px; /* เว้นด้านล่าง */
}

.news-cover { /* รูปปกข่าว */
    width: 100%; /* เต็ม container */
    border-radius: 12px; /* มุมมน */
    margin-bottom: 30px; /* เว้นด้านล่าง */
}

.news-content { /* เนื้อหาข่าว */
    line-height: 1.8; /* ระยะบรรทัด */
    padding: 40px 0; /* เว้นบนล่าง */
}

.news-content p { /* paragraph */
    text-indent: 2em; /* ย่อหน้า */
}

.news-content img { /* รูปในเนื้อข่าว */
    width: 100%; /* เต็ม container */
    max-width: 600px; /* จำกัดขนาด */
    display: block; /* ทำให้ margin ใช้ได้ */
    margin: 20px auto; /* จัดกลาง */
    border-radius: 10px; /* มุมมน */
}


/* ---------------------------------❗️ ABOUT responsive css ❗️--------------------------------- */

/* ========================================================= */
/* ====================== MOBILE FIX ======================= */
/* ========================================================= */

@media (max-width: 768px){

  .about-row{
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 20px;
  }

  .about-row.reverse{
    flex-direction: column !important;
  }

  .about-text,
  .about-image{
    width: 100%;
    flex: unset;
  }

  .about-image img{
    width: 100%;
    height: auto;
    display: block;
  }

}

/* =================================
   TABLET
================================= */

@media (max-width:1024px){

  .member-section{
    padding:0 30px; /* ลดขอบจอ */
  }

  .member-detail-card{
    padding:60px; /* ลด padding card */
    margin:80px auto; /* ลด margin บน */
  }

}



/* ---------------------------------❗️ ABOUT member responsive css ❗️--------------------------------- */

/* =================================
   MOBILE
================================= */

@media (max-width:768px){

  .member-section{
    padding:0 15px; /* ลดขอบจอเพื่อให้ card กว้างขึ้น */
  }

  .member-detail-card{
    max-width:100%; /* ให้ card เต็มพื้นที่มือถือ */
    padding:35px 25px; /* ลด padding ด้านใน */
    margin:70px auto; /* ลด margin บน */
  }

  .detail-img{
    max-width:200px; /* ลดขนาดรูปเล็กน้อย */
    margin-bottom:25px; /* ระยะใต้รูป */
  }

  .member-detail-card h2{
    font-size:1.25rem; /* ลดขนาดชื่อ */
    line-height:1.4;
  }

  .member-detail-card .member-position{
    font-size:0.95rem; /* ลดขนาดตำแหน่ง */
  }

  .member-content{
    font-size:15px; /* ลดขนาดเนื้อหา */
    line-height:1.7; /* ปรับระยะบรรทัด */
  }

  .back-btn{
    padding:14px 36px; /* ลดขนาดปุ่ม */
    font-size:15px;
  }

}


/* ---------------------------------❗️ ACTIVITIES responsive css ❗️--------------------------------- */


/* =================================================
   TABLET (แนวตั้ง + แนวนอน)
================================================= */

@media (max-width:1024px){ /* ใช้กับ tablet */

  .activity{
    display:flex; /* ใช้ flex layout */
    flex-direction:column !important; /* เรียงแนวตั้ง */
    align-items:flex-start; /* ชิดซ้าย */
    gap:25px; /* ระยะห่างรูปกับข้อความ */
    margin-bottom:70px; /* ระยะห่าง activity */
  }

  .activity.reverse{
    flex-direction:column !important; /* ยกเลิก row-reverse */
  }

  .activity-img{
    order:1; /* ให้รูปอยู่ก่อน */
    width:100%; /* เต็มความกว้าง */
  }

  .activity-text{
    order:2; /* ให้ข้อความอยู่หลัง */
    width:100%; /* เต็มความกว้าง */
  }

  .activity-img img{
    width:100%; /* ภาพเต็ม container */
    max-width:100%; /* กันภาพล้น */
    height:auto; /* รักษาสัดส่วน */
  }

}


/* =================================================
   MOBILE
================================================= */

@media (max-width:768px){ /* ใช้กับมือถือ */

  .activity{
    display:flex; /* ใช้ flex layout */
    flex-direction:column !important; /* บังคับเรียงบนลงล่าง */
    align-items:flex-start; /* ชิดซ้าย */
    gap:20px; /* ระยะห่างรูปกับข้อความ */
  }

  .activity.reverse{
    flex-direction:column !important; /* ยกเลิก row-reverse */
  }

  .activity-img{
    order:1; /* ให้รูปขึ้นก่อน */
    width:100%; /* เต็มความกว้าง */
  }

  .activity-text{
    order:2; /* ให้ข้อความตามหลัง */
    width:100%; /* เต็มความกว้าง */
  }

  .activity-img img{
    width:100%; /* ภาพเต็ม container */
    max-width:100%; /* กันภาพล้น */
    height:auto; /* รักษาสัดส่วน */
  }

}


/* =================================================
   SMALL MOBILE
================================================= */

@media (max-width:480px){ /* มือถือจอเล็ก */

  .section-title{
    font-size:26px; /* ลดขนาดหัวข้อ */
  }

  .activity-text p{
    font-size:14px; /* ลดขนาดข้อความ */
  }

}