/* ========================================================= */
/* ========================= HERO ========================== */
/* ========================================================= */

.about-hero {
    padding: 100px 20px;
    text-align: center;
}



/* ========================================================= */
/* ==================== ABOUT HEAD BAR ===================== */
/* ========================================================= */

.about-head-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 100%;
    padding: 30px 20px; 

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 5, 77, 0.95) 45%,
        rgb(255, 85, 0) 100%
    );

    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* ทำให้มีมิติ */
.about-head-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%);
    pointer-events: none;
}

/* เนื้อหาด้านใน */
.about-head-bar-content {
    max-width: 700px;
    z-index: 2;
}

/* หัวข้อ */
.about-head-bar h1 {
    font-size: clamp(18px, 2vw, 30px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 1px;

    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpHead 1s ease forwards;
}

/* Animation */
@keyframes fadeUpHead {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ========================================================= */
/* ======================= ABOUT head-bar ====================== */
/* ========================================================= */

.about-club {
    max-width: 1360px; /* จำกัดความกว้างสูงสุด */
    margin: 100px auto;
    padding: 0 20px;
    line-height: 1.9;
    color: #ffffff;

    /* Animation */
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 1s ease forwards;
}

/* Heading */
.about-club h2 {
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 700;
}

.about-club h3 {
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Paragraph */
.about-club p {
    margin-bottom: 15px;
    font-size: 17px;
    color: #f1f1f1;
}

/* List */
.about-list {
    margin-left: 20px;
    margin-bottom: 20px;
}

.about-list li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #f1f1f1;
}

/* เส้น hr เป็นสี theme */
.about-club hr {
    border: none;
    height: 2px;
    margin: 50px 0;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-radius: 2px;
}

/* ========================================================= */
/* ===================== FLEX LAYOUT ======================= */
/* ========================================================= */

.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 100px;
}

.about-row.reverse {
    flex-direction: row-reverse;
}

.about-text {
    flex: 1;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    border-radius: 2px; /* มุมโค้ง */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: 0.4s ease;
}



/* ========================================================= */
/* ======================= ANIMATION ======================= */
/* ========================================================= */

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ========================================================= */
/* ====================== MEMBER LAYOUT ==================== */
/* ========================================================= */

.member-preview, 
.member-section { /* ส่วน preview และหน้ารวมสมาชิก */
    padding: 80px 20px; /* ระยะห่างภายใน */
    max-width: 1360px; /* ความกว้างสูงสุด */
    margin: auto; /* จัดกึ่งกลาง */
}


/* ========================================================= */
/* ========================== GRID ========================= */
/* ========================================================= */

.member-grid { /* Grid จัดเรียงการ์ด */
    display: grid; /* ใช้ CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); /* ขนาดการ์ด */
    justify-content: center; /* จัดให้อยู่กลาง */
    gap: 30px; /* ระยะห่างการ์ด */
    margin-top: 30px; /* เว้นด้านบน */
    transition: opacity 0.3s ease; /* ทำให้ fade ลื่น */
}


/* ========================================================= */
/* ======================= MEMBER CARD ===================== */
/* ========================================================= */

.member-card { /* กล่องการ์ด */
    background: rgba(100, 100, 100, 0.2); /* พื้นหลังโปร่งใส ขุ่นเล็กน้อย */
    backdrop-filter: blur(12px); /* เบลอพื้นหลัง */
    border-radius: 2px; /* มุมโค้ง */
    overflow: hidden; /* ซ่อนส่วนเกิน */
    text-align: center; /* ข้อความกลาง */
    display: flex; /* ใช้ flex */
    flex-direction: column; /* เรียงบนลงล่าง */
    box-shadow: 0 10px 25px rgba(0,0,0,0.4); /* เงา */
    transition: 0.3s; /* เอฟเฟกต์ลื่น */
}

.member-card:hover { /* hover การ์ด */
    transform: translateY(-10px); /* ลอยขึ้น */
}

.member-card img { /* รูปในการ์ด */
    width: 100%; /* เต็มความกว้าง */
    height: 320px; /* สูงคงที่ */
    object-fit: cover; /* ครอบรูป */
    object-position: top; /* โฟกัสด้านบน */
}

.member-card h3 { /* ชื่อ */
    margin: 12px 0 5px; /* ระยะ */
    font-size: 1rem; /* ขนาด */
}

.member-card p { /* ตำแหน่ง */
    margin-bottom: 15px; /* ระยะล่าง */
    font-size: 0.85rem; /* ขนาด */
    color: #ccc; /* สีเทา */
}

.member-card-link { /* ลิงก์ครอบการ์ด */
    text-decoration: none; /* เอาเส้นใต้ */
    color: inherit; /* ใช้สีเดิม */
    display: block; /* คลิกได้ทั้งการ์ด */
}


/* ========================================================= */
/* ====================== VIEW ALL BUTTON ================== */
/* ========================================================= */

.view-all-btn { /* ปุ่มดูทั้งหมด */
    display: block; /* เป็น block */
    width: fit-content; /* กว้างตามข้อความ */
    margin: 50px auto 0 auto; /* จัดกลาง */
    text-decoration: none; /* ไม่มีเส้นใต้ */
    padding: 16px 50px; /* ระยะภายใน */
    border-radius: 2px; /* มุมโค้ง */
    background: linear-gradient(135deg, #6a0dad, #ff5500); /* ม่วง+ส้ม */
    color: white; /* สีข้อความ */
    transition: 0.3s; /* ลื่น */
    font-size: 17px; /* ขนาด */
    font-weight: 600; /* ตัวหนา */
}

.view-all-btn:hover { /* hover ปุ่ม */
    transform: scale(1.10); /* ขยายขนาด  */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* เงา */
}


/* ========================================================= */
/* ===================== YEAR FILTER ======================= */
/* ========================================================= */

.year-filter { /* select แบบปกติ */
    margin: 20px 0; /* ระยะ */
    padding: 10px 15px; /* ระยะใน */
    border-radius: 2px; /* มุมโค้ง */
    border: 1px solid #ffcc00; /* เส้นทอง */
    background: rgba(0,0,0,0.6); /* พื้นหลัง */
    color: #fff; /* สีขาว */
    font-family: inherit; /* ฟอนต์เดิม */
    font-size: 0.95rem; /* ขนาด */
    cursor: pointer; /* เมาส์มือ */
    transition: 0.3s; /* ลื่น */
}

.year-filter:hover { /* hover */
    border-color: #fff; /* เปลี่ยนสี */
}

.year-filter:focus { /* focus */
    outline: none; /* เอาขอบฟ้า */
    box-shadow: 0 0 10px rgba(255,204,0,0.6); /* เรืองแสง */
}


/* ========================================================= */
/* ===================== CUSTOM DROPDOWN =================== */
/* ========================================================= */

.custom-select { /* container */
    position: relative; /* ใช้ absolute ภายใน */
    width: 200px; /* กว้าง */
    margin: 20px 0; /* ระยะ */
    font-family: inherit; /* ฟอนต์ */
}

.select-selected { /* กล่องแสดงค่าที่เลือก */
    background: linear-gradient(135deg, #6a0dad, #ff5500); /* ม่วง+ส้ม */
    padding: 12px 16px; /* ระยะ */
    border-radius: 2px; /* มุมโค้ง */
    cursor: pointer; /* เมาส์มือ */
    color: white; /* สี */
    font-weight: 600; /* หนา */
    transition: 0.3s; /* ลื่น */
}

.select-selected::after { /* ลูกศร */
    content: "▼"; /* สัญลักษณ์ */
    float: right; /* ชิดขวา */
    font-size: 12px; /* ขนาด */
}

.select-selected:hover {
    transform: scale(1.10); /* ขยายขนาด  */
}

.select-items { /* กล่องรายการ */
    position: absolute; /* ซ้อน */
    top: 110%; /* ใต้กล่อง */
    left: 0; /* ชิดซ้าย */
    right: 0; /* ชิดขวา */
    background: rgba(20,20,20,0.95); /* พื้นหลัง */
    backdrop-filter: blur(12px); /* เบลอ */
    border-radius: 2px; /* มุม */
    max-height: 200px; /* สูงสุด */
    overflow-y: auto; /* เลื่อน */
    scroll-behavior: smooth; /* เลื่อนลื่น */
    display: none; /* ซ่อน */
    z-index: 1000; /* อยู่บน */
}

.select-items div { /* ตัวเลือก */
    padding: 10px 16px; /* ระยะ */
    cursor: pointer; /* มือ */
    transition: 0.2s; /* ลื่น */
    color: #fff; /* สีขาว */
}

.select-items div:hover { /* hover */
    background: rgba(255,255,255,0.1); /* พื้นหลังจาง */
}

.select-items div.active { /* active */
    background: #ffcc00; /* ทอง */
    color: #000; /* ดำ */
    font-weight: 600; /* หนา */
}

.select-items.show { /* แสดง dropdown */
    display: block; /* เปิด */
}


/* ========================================================= */
/* ===================== MEMBER DETAIL ===================== */
/* ========================================================= */

.member-section{
    padding:120 40px; /* เว้นขอบซ้ายขวาของ section */
}

.member-detail-card {
    max-width:800px; /* ความกว้างสูงสุดของ card */
    margin:100px auto; /* จัดกลาง + เว้นด้านบน */
    padding:80px; /* ระยะด้านใน card */
    border-radius: 2px; /* มุมโค้ง */

    background:rgba(255,255,255,0.08); /* พื้นหลังโปร่ง */
    backdrop-filter:blur(10px); /* เบลอพื้นหลัง */

    text-align:left; /* จัดข้อความชิดซ้าย */
}

/* รูปสมาชิก */
.detail-img{
    width:100%; /* เต็ม container */
    max-width:300px; /* จำกัดขนาดรูป */
    display:block; /* ให้ margin ทำงาน */
    margin:0 auto 30px; /* จัดรูปกลาง + เว้นล่าง */
    border-radius: 2px; /* มุมโค้ง */
}

/* ชื่อ */
.member-detail-card h2{
    margin-bottom:5px; /* เว้นด้านล่าง */
    padding:0 0 2px 0; /* เว้นเล็กน้อย */
    font-size:1.4rem; /* ขนาดตัวอักษร */
}

/* ตำแหน่ง */
.member-detail-card .member-position{
    margin-bottom:20px; /* เว้นล่าง */
    opacity:0.8; /* ลดความเข้ม */
    padding:0 0 2px 0; /* เว้นระยะ */
    font-size:1rem; /* ขนาดตัวอักษร */
}

/* เนื้อหา */
.member-content{
    line-height:1.8; /* ระยะบรรทัด */
    margin-bottom:30px; /* เว้นด้านล่าง */
}

/* ปุ่มกลับ */
.back-btn{
    display:inline-block; /* ให้เป็นปุ่ม */
    padding:16px 50px; /* ระยะภายใน */
    border-radius: 2px; /* มุมโค้ง */

    background:linear-gradient(135deg,#6a0dad,#ff5500); /* gradient */
    color:white; /* สีตัวอักษร */
    text-decoration:none; /* เอาเส้นใต้ลิงก์ออก */

    margin-top:50px; /* เว้นด้านบน */
    margin-bottom:50px; /* เว้นด้านล่าง */

    transition:0.3s; /* ทำให้ hover smooth */
}

.back-btn:hover{
    transform:scale(1.08); /* ขยายตอน hover */
}