/* ============================== */
/* การตั้งค่าพื้นฐาน        */
/* ============================== */

body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #333366; /* สีพื้นหลัง */
    color: #f0f0f0; /* สีข้อความหลัก (ปรับเพื่อให้ตัดกับพื้นหลังเข้ม) */
}

h1 {
    text-align: center;
    color: #F0B5B5;
    margin-bottom: 30px;
}

/* ============================== */
/* ส่วนประกอบต่างๆ         */
/* ============================== */

/* --- ช่องค้นหา --- */
.search-container {
    text-align: center; /* จัดให้อยู่กลาง */
    margin-bottom: 25px; /* ระยะห่าง */
}

#searchInput {
    padding: 10px 15px;
    width: 80%; /* กว้างพอสมควร */
    max-width: 400px; /* ไม่กว้างเกินไปบนจอใหญ่ */
    border: 1px solid #ccc;
    border-radius: 20px; /* ทำให้มนๆ */
    font-size: 1em;
    box-sizing: border-box; /* รวม padding และ border ใน width */
    background-color: #fff; /* เพิ่มสีพื้นหลังให้ช่องค้นหา */
    color: #333; /* สีข้อความในช่องค้นหา */
}

#searchInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* ปรับเงาเล็กน้อย */
}

/* --- แถบนำทางกลุ่มวิดีโอ (Navbar) --- */
.group-navbar {
    text-align: center; /* จัดปุ่มให้อยู่กลาง */
    margin-bottom: 25px; /* ระยะห่างก่อนถึง grid วิดีโอ */
    padding-bottom: 15px; /* ระยะห่างด้านล่างเล็กน้อย */
    border-bottom: 1px solid #555; /* เส้นคั่น (ปรับสีให้เข้ากับพื้นหลัง) */
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ของปุ่ม */
    overflow-x: auto; /* ทำให้ scroll แนวนอนได้ถ้าปุ่มเยอะเกิน */
    -webkit-overflow-scrolling: touch; /* ทำให้ scroll ลื่นบน iOS */
}

.group-navbar .nav-item {
    display: inline-block; /* ทำให้ปุ่มเรียงแนวนอน */
    padding: 8px 15px;
    margin: 0 5px 5px 5px; /* ระยะห่างรอบปุ่ม */
    border: 1px solid #aaa; /* ปรับสีเส้นขอบ */
    background-color: #eee; /* สีพื้นหลังปุ่ม */
    color: #333; /* สีข้อความปุ่ม */
    cursor: pointer;
    border-radius: 20px; /* ทำให้ปุ่มมนๆ */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9em;
}

.group-navbar .nav-item:hover:not(.active) {
    background-color: #ddd;
    border-color: #999;
}

.group-navbar .nav-item.active {
    background-color: #007bff; /* สีปุ่มที่เลือก */
    color: #fff;
    border-color: #007bff;
    cursor: default;
}

/* --- Grid แสดงวิดีโอ --- */
.video-grid {
    display: grid;
    /* ค่าเริ่มต้นสำหรับจอใหญ่ (ปรับจำนวนคอลัมน์ตามต้องการ เช่น 4 หรือ 5) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* ปรับให้ยืดหยุ่นมากขึ้น */
    gap: 20px; /* ระยะห่างระหว่างวิดีโอ */
    margin-bottom: 30px; /* ระยะห่างก่อนถึงปุ่ม pagination */
}

/* --- รายการวิดีโอแต่ละอัน --- */
.video-item {
    background-color: #fff; /* พื้นหลังของการ์ดวิดีโอ */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ชัดขึ้น */
    overflow: hidden; /* ป้องกันไม่ให้เนื้อหาเกินขอบ */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* เพิ่ม animation ตอน hover */
}

.video-item:hover {
    transform: translateY(-5px); /* เลื่อนขึ้นเล็กน้อยเมื่อ hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.video-item a {
    text-decoration: none;
    color: inherit; /* ใช้สีจาก parent (.video-item) */
    display: block;
}

/* --- Container รูป Thumbnail (รักษาอัตราส่วน 16:9) --- */
.thumbnail-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* อัตราส่วน 16:9 (9 / 16 * 100) */
    background-color: #555; /* สีพื้นหลังเผื่อรูปยังไม่โหลด (เข้มขึ้น) */
    overflow: hidden;
}

.thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ให้รูปภาพเต็มกรอบโดยไม่เสียสัดส่วน */
    display: block; /* ลบช่องว่างใต้รูป */
    border-bottom: 1px solid #ddd; /* เส้นคั่นบางๆ ระหว่างรูปกับชื่อ */
}

/* --- ชื่อวิดีโอ --- */
.video-item p {
    margin: 0;
    padding: 12px 15px; /* เพิ่ม padding เล็กน้อย */
    text-align: center;
    font-size: 1.1em; /* ปรับขนาดฟอนต์ */
    color: #333; /* สีชื่อวิดีโอ */
    white-space: nowrap; /* ไม่ให้ขึ้นบรรทัดใหม่ */
    overflow: hidden; /* ซ่อนข้อความที่ยาวเกิน */
    text-overflow: ellipsis; /* แสดง ... ถ้าข้อความยาวเกิน */
    min-height: 2.4em; /* กำหนดความสูงขั้นต่ำเผื่อชื่อสั้น (ปรับได้) */
    display: flex; /* ใช้ flex เพื่อจัดกลางแนวตั้ง ถ้าต้องการ */
    align-items: center;
    justify-content: center;
}

/* --- ส่วน Pagination --- */
.pagination {
    text-align: center;
    margin-top: 30px; /* เพิ่มระยะห่างด้านบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
    padding: 10px 0;
}

.pagination button,
.pagination .page-number-btn { /* รวมสไตล์ปุ่ม */
    padding: 8px 16px;
    margin: 0 4px; /* เพิ่มระยะห่างเล็กน้อย */
    border: 1px solid #aaa; /* ปรับสีเส้นขอบ */
    background-color: #eee; /* สีพื้นหลังปุ่ม */
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    vertical-align: middle; /* จัดให้อยู่กลางแนวตั้ง */
    font-size: 0.95em;
}

.pagination button:hover:not(:disabled),
.pagination .page-number-btn:hover:not(.active) { /* สไตล์ hover */
    background-color: #ddd;
    border-color: #999;
}

.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* ทำให้จางลงเล็กน้อย */
    background-color: #f5f5f5; /* สีพื้นหลังตอน disabled */
}

.pagination .page-number-btn.active {
    background-color: #007bff; /* สีฟ้าสำหรับหน้าที่เลือก */
    color: #fff;
    border-color: #007bff;
    cursor: default;
}

.pagination span#pageNumbers {
    margin: 0 5px; /* ระยะห่างรอบๆ กลุ่มปุ่มหมายเลข */
    vertical-align: middle;
}

/* ============================== */
/* การแสดงผลบนจอขนาดเล็ก      */
/* ============================== */

@media (max-width: 768px) { /* ปรับ breakpoint กว้างขึ้นเล็กน้อย */
    .video-grid {
        /* ยังคงแสดงหลายคอลัมน์ แต่ปรับ minmax */
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 15px;
    }

    h1 {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px; /* ลด padding รอบนอก */
    }

    h1 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    #searchInput {
        width: 95%; /* กว้างขึ้นบนมือถือ */
        font-size: 0.9em;
    }

    .group-navbar {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .group-navbar .nav-item {
        padding: 6px 12px; /* ลดขนาดปุ่ม */
        font-size: 0.85em; /* ลดขนาดฟอนต์ */
        margin: 0 3px 5px 3px;
    }

    .video-grid {
        /* แก้ไข: แสดง 2 คอลัมน์ตามที่ต้องการ */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* ลดระยะห่าง */
        margin-bottom: 25px;
    }

    .video-item p {
        font-size: 1em; /* ลดขนาดฟอนต์ชื่อวิดีโอ */
        padding: 8px 10px;
        min-height: 2.2em;
    }

    .pagination {
        margin-top: 20px;
    }

    .pagination button,
    .pagination .page-number-btn {
        padding: 6px 10px; /* ลดขนาดปุ่ม */
        margin: 0 2px; /* ลดระยะห่าง */
        font-size: 0.9em;
    }
}