/* ==========================================================================
   📌 SEMINAR SLIDER SYSTEM (ระบบสไลด์ภาพบรรยากาศสัมมนา)
   ========================================================================== */

/* 1. กล่องครอบสไลด์เดอร์ทั้งหมด */
.slider-container {
    position: relative;
    max-width: 100%;
    margin: 20px auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 2. กรอบหน้าต่างแสดงรูปภาพ (ตัวล็อกสัดส่วนและตัดขอบ) */
.slider-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;         /* ล็อกสัดส่วนทองคำ 16:9 เพื่อให้รูปสัมมนาเท่ากันทุกใบ */
    background-color: #111111;    /* สีพื้นหลังสีดำเวลารูปภาพกำลังเฟด */
    border-radius: 12px;          /* ทำมุมมนให้การ์ดดูทันสมัย */
    overflow: hidden;             /* 👑 ตัวสำคัญ: บังคับให้รูปที่เกินมุดซ่อนอยู่ด้านใน ไม่เด้งทะลุกรอบ */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* ใส่เงาหนาๆ สไตล์ Dark Mode */
    border: 1px solid rgba(241, 196, 15, 0.2); /* ตัดขอบสีทองจางๆ เพิ่มความพรีเมียม */
}

.slider-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🎯 เปลี่ยนเป็น contain เพื่อรักษาสัดส่วนจริงของรูปเอาไว้ 100% */
    object-position: center; 
    transition: opacity 0.25s ease-in-out; 
}
/* 4. ปุ่มลูกศร ซ้าย-ขวา (Slider Buttons) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);  /* จัดให้อยู่กึ่งกลางแนวตั้งเป๊ะๆ */
    background: rgba(0, 0, 0, 0.7); /* พื้นหลังปุ่มสีดำโปร่งแสง */
    color: #ffffff;               /* สีไอคอนลูกศร */
    border: 1px solid #f1c40f;    /* ขอบปุ่มสีทอง */
    width: 45px;
    height: 45px;
    border-radius: 50%;           /* ทำปุ่มเป็นวงกลม */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    z-index: 10;                  /* ดันให้อยู่เหนือน้ำ เพื่อไม่ให้รูปภาพบังปุ่ม */
    transition: all 0.3s ease;
}

/* เอฟเฟกต์ตอนเอาเมาส์ไปชี้ปุ่ม */
.slider-btn:hover {
    background: #f1c40f;          /* เปลี่ยนปุ่มเป็นสีทอง */
    color: #000000;               /* เปลี่ยนไอคอนเป็นสีดำ */
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5); /* ใส่แสงเรืองรองสีทอง */
}

/* จัดตำแหน่งปุ่มซ้ายและขวา */
.prev-btn { 
    left: 25px; 
}
.next-btn { 
    right: 25px; 
}

/* 5. จุดกลมๆ ด้านล่าง (Pagination Dots) */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

/* หน้าตาของจุดปกติ */
.dot {
    width: 8px;
    height: 8px;
    background: #444444;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* หน้าตาของจุดที่กำลังแสดงรูปภาพนั้นอยู่ (Active) */
.dot.active {
    background: #f1c40f;          /* จุดไฮไลท์สีทอง */
    transform: scale(1.2);        /* ขยายขนาดขึ้นเล็กน้อย */
}

/* ==========================================================================
   📱 RESPONSIVE DESIGN (ปรับแต่งหน้าจอมือถือ)
   ========================================================================== */
@media (max-width: 768px) {
    .slider-btn {
        width: 35px;
        height: 35px;
        font-size: 0.85rem;
    }
    .prev-btn { left: 15px; }
    .next-btn { right: 15px; }
}

.album-year-title {
    font-size: 1.3rem;
    color: #f1c40f; /* สีทองหรูหรา */
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #f1c40f; /* ขีดสีทองหนาข้างๆ หัวข้อ */
    font-weight: 500;
}
.seminar-album-section {
    margin-bottom: 30px;
}