:root {
    --primary-orange: #f7941e;
    --text-dark: #333333;
    --text-gray: #666666;
    --text-light: #999999;
    --bg-gray: #f5f7f9;
    --border-color: #eeeeee;
}

body {
    background-color: var(--bg-gray);
    margin: 0;
    font-family: 'Prompt', 'Sarabun', sans-serif;
    color: var(--text-dark);
}

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* Header */
.page-header { margin-bottom: 40px; }

.breadcrumb {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--text-light);
}

.page-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: black;
    margin: 0;
    margin-bottom: 10px;
}

/* Grid */
.fame-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 400px;    /* บังคับให้ทุกแถวสูง 400px เท่ากันหมด */
    gap: 20px;
    margin-bottom: 50px;
    overflow: hidden;         /* ตัดส่วนที่เกินออก */
}
.fame-card {
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: 0.2s;
    cursor: pointer;
}

.fame-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.fame-img-box {
    width: 100%;
    height: 200px;    
    background: #f0f0f0;
    overflow: hidden;
}

.fame-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    display: block;
}

.fame-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.fame-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-orange);
    margin: 0 0 10px 0;
}

.fame-description {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 12px;
    flex-grow: 1;
}

.fame-footer {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 40px;
}

.page-item {
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.page-item.active {
    background: var(--primary-orange);
    color: white;
}

.page-title {
    font-family: sans-serif;
}

/* Modal */
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    /* display: none;  */
}

/* Optional: Add a background to the image area if the image is small */
.modal-body {
    background-color: #f9f9f9; 
    text-align: center;   /* Centers the image */
    /* padding: 20px; */
}

.modal-text {
    padding: 30px;
}



/* hall-of-fame.css */

.modal-overlay {
    position: fixed; /* Keep it stuck to the screen */
    top: 0;
    left: 0;
    width: 100vw;    /* Force full width */
    height: 100vh;   /* Force full height of the screen */
    background: rgba(0, 0, 0, 0.4);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 9999;
    margin: 0;       /* Ensure no margins are pushing it */
    padding: 0;
}

/* hall-of-fame.css */

.modal-content {
    background: white;
    /* --- EXPAND SIZE HERE --- */
    width: 85%;
    max-width: 800px;     /* Increase from 600px to 750px for a "medium-large" feel */
    max-height: 95vh;     /* Allow it to take up more vertical space if needed */
    border-radius: 15px;  /* Slightly more rounded for a modern look */
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);

    /* --- CRITICAL: Force vertical behavior --- */
    overflow-x: hidden; /* Hide the horizontal scrollbar */
    overflow-y: auto;   /* Show vertical scrollbar when needed */
    
    display: flex;
    flex-direction: column;
    position: relative;
}

/* hall-of-fame.css */

.modal-text {
    padding: 30px;
    background-color: #ffffff;
    
    /* --- การจัดเรียงข้อความให้เหมือน Facebook --- */
    text-align: left;           /* ชิดซ้ายเหมือนต้นฉบับ */
    line-height: 1.6;           /* เพิ่มระยะห่างระหว่างบรรทัดให้อ่านง่ายขึ้น */
    white-space: pre-line;      /* สำคัญมาก: เพื่อให้ขึ้นบรรทัดใหม่ตามที่เราพิมพ์ใน JS */
    color: #1c1e21;             /* สีตัวอักษรโทน Facebook */
    font-size: 1rem;
}

.modal-text h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #050505;
}

.modal-text p {
    margin: 0;                  /* ลด margin ของ p เพื่อให้ควบคุมด้วย pre-line แทน */
}

/* Ensure the image scales nicely with the larger box */
.modal-body img {
    /* width: 100%; */
    width: 100%;
    height: 400px;
    max-height: 400px;    /* Increased max-height to match the wider box */
    object-fit: contain;
    display: block;

}


* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden; /* Prevents side-to-side blank space */
}

/* hall-of-fame.css */

/* 2. Style the X button and pin it to the top-right */
/* hall-of-fame.css */

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 50px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    border: none;
    line-height: 1;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #f7941e;
    transform: scale(1.1);
}


/* hall-of-fame.css */

/* ปรับแต่งปุ่ม Slide Nav */
.slide-nav {
    position: absolute;
    /* เปลี่ยนจากค่าคงที่ (เช่น 200px) เป็น 50% ของความสูงพื้นที่รูป */
    top: 50%; 
    transform: translateY(-50%); /* ดึงกลับขึ้นมาครึ่งหนึ่งของตัวปุ่มเพื่อให้กลางเป๊ะ */
    
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10002;
    border-radius: 4px;
    transition: 0.3s;
}

.slide-nav:hover {
    background: #f7941e;
}

/* ตำแหน่งปุ่ม ซ้าย-ขวา */
.prev { left: 10px; }
.next { right: 10px; }

.slide-nav:hover { background: #f7941e; }
.prev { left: 10px; }
.next { right: 10px; }


/* ส่วนเนื้อหาใน Modal */
.modal-body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* แก้ไขส่วน Wrapper ของรูปภาพ */
.modal-image-wrapper {
    width: 100%;
    height: auto;            /* เปลี่ยนจาก 500px เป็น auto เพื่อให้ยืดตามรูป */
    background-color: #fff;  /* เปลี่ยนจากสีดำเป็นสีขาว (หรือสีพื้น Modal) */
    display: block;          /* ไม่ต้องใช้ flex จัดกลางแล้วเพราะรูปจะเต็มความกว้าง */
    overflow: hidden;
}

.modal-image-wrapper img {
    width: 100%;             /* ให้รูปขยายเต็มความกว้างของ Modal */
    height: auto;            /* ให้ความสูงปรับตามอัตราส่วนของรูปจริง */
    display: block;
    object-fit: initial;     /* ไม่ต้องใช้ contain แล้ว */
}

/* ปรับส่วนข้อความด้านล่าง */
.modal-text {
    padding: 25px;
    background: white;
}

/* แก้ไขส่วนรูปภาพใน Modal */
.modal-image-wrapper img, 
.modal-body img {
    width: 100%;             /* ให้กว้างเต็มพื้นที่คอนเทนเนอร์ */
    height: 500px;            /* ให้ความสูงปรับตามสัดส่วนรูปจริงอัตโนมัติ */
    max-height: 500px;       /* จำกัดความสูงสูงสุดไม่ให้ล้นจอเกินไป */
    display: block;
    object-fit: contain;     /* ✅ หัวใจสำคัญ: ถ้ารูปสัดส่วนไม่พอดี มันจะรักษาทรงเดิมไว้ ไม่ยืด */
    background-color: white; /* ใส่สีพื้นหลังกันเหวอะถ้ารูปเล็กกว่าพื้นที่ */
}

/* สำหรับหน้าจอมือถือ (ความกว้างน้อยกว่า 768px) */
@media (max-width: 950px) {
    .modal-content {
        width: 100%;        /* ให้กว้างเต็มจอ */
        max-width: 100%;    /* ปลดล็อคความกว้างสูงสุด */
        height: 100vh;      /* ให้สูงเต็มหน้าจอ */
        max-height: 100vh;
        border-radius: 0;   /* ลบขอบมนออกเพื่อให้ดูเป็นหน้าจอใหม่ของมือถือ */
        margin: 0;          /* ลบช่องว่างรอบๆ ออก */
    }

    .modal-overlay {
        padding: 0;         /* ลบช่องว่างของตัวครอบพื้นหลัง */
    }

    .modal-image-wrapper {
        height: auto;       /* ให้รูปปรับความสูงตามสัดส่วนจริง */
    }

    /* ปรับปุ่มปิดให้เด่นชัดขึ้นบนมือถือ */
    .close-btn {
        top: 10px;
        right: 10px;
        position: fixed;
        /* fbackground: rgba(0, 0, 0, 0.3);  */
        /* color: white; */
        /* border-radius: 50%;  */
    }
}

/* 1. ลบ Padding ออกจากตัว Modal Body */
.modal-body {
    padding: 0 !important; /* บังคับให้ไม่มีช่องว่างรอบๆ เนื้อหาข้างใน */
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

/* 2. จัดการ Wrapper และรูปภาพให้ไม่มีช่องว่าง */
.modal-image-wrapper {
    width: 100%;
    margin: 0;             /* ลบ Margin ออกให้หมด */
    padding: 0;            /* ลบ Padding ออกให้หมด */
    line-height: 0;        /* ป้องกันช่องว่างเล็กๆ ด้านล่างรูปภาพ (Ghost space) */
}

.modal-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;        /* เปลี่ยนเป็น block เพื่อไม่ให้มีช่องว่างบรรทัดด้านล่าง */
}

/* 3. (เพิ่มเติม) ถ้าคุณมี Padding ใน modal-content ให้ปรับออกด้วย */
.modal-content {
    padding: 0;            /* ตรวจดูว่าไม่ได้เผลอใส่ padding ไว้ตรงนี้ */
    /* ส่วนประกอบอื่นยังคงเดิม */
}

@media (max-width: 950px) {
    .fame-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .fame-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Container หลักของ Slider */
.latest-highlights {
    margin-bottom: 50px;
    position: relative;
    padding: 0 40px;
}

/* ปุ่มเลื่อนซ้าย-ขวา */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }
.carousel-btn:hover { background: var(--primary-orange); color: white; }

/* ค้นหาและแทนที่ส่วนที่เกี่ยวข้องกับ Slider ใน hall-of-fame.css */


/* ปรับให้ Responsive ตามขนาดหน้าจอ */
@media (max-width: 1200px) {
    .slider-track .fame-card { min-width: calc(75% - 14px); } /* โชว์ 3 อัน */
}
@media (max-width: 768px) {
    .slider-track .fame-card { min-width: calc(50% - 10px); }    /* โชว์ 2 อัน */
}
@media (max-width: 480px) {
    .slider-track .fame-card { min-width: 100%; }                /* โชว์ 1 อัน */
}

/* --- ชุดโค้ดแก้ไขสำหรับ Home Slider --- */

/* --- ส่วนนี้คือจุดที่ทำให้ก่อนหน้านี้มันเพี้ยน --- */
.slider-track-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 50px 0;
    display: block; /* สำคัญมาก: ห้ามใช้ flex และ justify-content: center ตรงนี้เด็ดขาด */
}

.slider-track {
    display: flex;
    justify-content: flex-start; /* บังคับให้การ์ดเริ่มเรียงจากขอบซ้ายสุดเสมอ */
    margin: 0;
    padding: 0;
    gap: 50px; 
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    align-items: center; 
}

/* ส่วนสไตล์การ์ดยังคงเดิม */
.slider-track .fame-card {
    width: 260px;
    min-width: 300px;
    height: 350px; 
    flex-shrink: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer; /* ให้มีลูกศรชี้ว่ากดได้ */
    
    /* opacity: 0.6; */
    opacity: 1;
    transform: scale(1); 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.slider-track .fame-card.active {
    opacity: 1;
    transform: scale(1.15); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    z-index: 10;
}