/* --- การตั้งค่าพื้นฐานและตัวแปรสี --- */
/* --- CSS สำหรับไอคอน Messenger --- */

.messenger-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
    animation: pulse 2s infinite;
    border-radius: 50%;
}

.messenger-icon img {
    width: 60px;
    height: 60px;
    transition: width 0.3s, height 0.3s; /* เพิ่ม transition ให้การปรับขนาดดูนุ่มนวล */
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(0, 132, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
    }
}

/* --- ✨ ส่วนที่เพิ่มเข้ามาสำหรับ Responsive ✨ --- */
/* เมื่อความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 768px */
@media (max-width: 768px) {
    .messenger-icon {
        bottom: 20px; /* ขยับเข้ามาใกล้ขอบมากขึ้น */
        right: 20px;
    }

    .messenger-icon img {
        width: 50px;  /* ลดขนาดไอคอนลง */
        height: 50px;
    }
}

/* สร้างอนิเมชัน "pulse" (การเต้น) */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(0, 132, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
    }
}
        
:root {
    --primary-color: hotpink; /* สีน้ำเงินหลัก */
    --secondary-color: rgb(231, 252, 109);/* สีเหลือง/ทอง */
    --light-bg: #f4f7f6;
    --text-color: #333;
    --heading-color: #f13596;
    --white-color: #fff;
    --grey-color: #777;
    --border-radius: 8px;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Sarabun', sans-serif;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--white-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding { padding: 80px 0; }
.section-title { text-align: center; font-size: 2.5rem; color: var(--heading-color); margin-bottom: 50px; font-weight: 700; }
.bg-light { background-color: var(--light-bg); }
.text-center { text-align: center; margin-top: 40px; }

/* === เมนูนำทาง (Navigation) === */
.main-header { background-color: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000; }
.navbar { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--heading-color); font-size: 1.5rem; font-weight: 700; }
.nav-logo img { height: 50px; margin-right: 12px; border-radius: 50%; }
.nav-menu { display: flex; list-style: none; gap: 1rem; align-items: center; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 0.3rem; padding: 1rem; text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s; }
.nav-link:hover { color: var(--primary-color); }
.cta-button { background-color: var(--primary-color); color: var(--white-color); padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 500; transition: background-color 0.3s, transform 0.3s; }
.cta-button:hover { background-color: #00487a; transform: translateY(-2px); }
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--heading-color); transition: all 0.3s ease-in-out; }

/* --- เมนูย่อย (Dropdown) --- */
.dropdown-menu { list-style: none; position: absolute; top: 110%; left: 0; background-color: var(--white-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); min-width: 230px; padding: 10px 0; z-index: 1001; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a { display: block; padding: 12px 20px; color: var(--text-color); text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.dropdown-menu li a:hover { background-color: var(--primary-color); color: var(--white-color); }


/*
================================================
  สไตล์สำหรับ Hero Slider
================================================
*/
.hero-slider {
    position: relative; /* เป็นจุดอ้างอิงให้ hero-content */
    height: 85vh;
    color: var(--white-color);
    display: flex; /* เพื่อจัด hero-content ให้อยู่กลาง */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- ส่วน Swiper (พื้นหลัง) --- */
.swiper.heroSwiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* ให้อยู่ด้านหลังสุด */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปภาพเต็มพื้นที่โดยไม่เสียสัดส่วน */
}

/* เพิ่ม Overlay สีดำโปร่งแสงเพื่อให้ข้อความอ่านง่ายขึ้น */
.swiper.heroSwiper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 44, 82, 0.5); /* สีน้ำเงินเข้มโปร่งแสง */
    z-index: 2;
}


/* --- ส่วนเนื้อหา (ด้านหน้า) --- */
.hero-content {
    position: relative; /* จัดตำแหน่งเทียบกับ hero-slider */
    z-index: 3; /* ให้อยู่บนสุด */
    max-width: 800px;
    padding: 20px;
}
.hero-buttons {
    position: absolute; /*จัดตำแหน่งเทียบกับ hero-slider */
    /* bottom: -100px; **ปรับระยะห่างจากขอบล่างที่นี่** */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 4; /* ให้ปุ่มอยู่บนสุดเสมอ */
    display: flex;
    gap: 15px;
}
/* --- ปรับแต่งสีของปุ่ม Navigation และ Pagination --- */
.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next {
    color: var(--white-color);
    opacity: 0.7;
    transition: opacity 0.3s;
}
.heroSwiper .swiper-button-prev:hover,
.heroSwiper .swiper-button-next:hover {
    opacity: 1;
}

.heroSwiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.7);
}

.heroSwiper .swiper-pagination-bullet-active {
    background: var(--white-color);
}
/* === Hero Banner === */

.btn { padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; transition: all 0.3s; border: 2px solid transparent; }
.btn-primary { background-color: var(--primary-color); color: var(--white-color); }
.btn-primary:hover { background-color: #00487a; }
.btn-secondary { background-color: transparent; color: var(--white-color); border: 2px solid var(--white-color); margin-left: 15px; }
.btn-secondary:hover { background-color: var(--white-color); color: var(--primary-color); }

/* === แถบประกาศด่วน (Marquee) === */
.announcement-bar { background-color: var(--secondary-color); color: var(--heading-color); padding: 12px 0; font-weight: 500; overflow: hidden; }
.marquee-container { display: inline-block; white-space: nowrap; animation: marquee-animation 35s linear infinite; }
.announcement-bar:hover .marquee-container { animation-play-state: paused; }
@keyframes marquee-animation { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* === ลิงก์ด่วน === */
.quick-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.quick-link-card { background: var(--white-color); padding: 35px; text-align: center; border-radius: var(--border-radius); box-shadow: var(--box-shadow); text-decoration: none; color: var(--text-color); transition: transform 0.3s, box-shadow 0.3s; }
.quick-link-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }
.quick-link-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 15px; }
.quick-link-card h3 { color: var(--heading-color); font-size: 1.4rem; margin-bottom: 5px; }
.quick-link-card p { color: var(--grey-color); }

/* === ข่าวสาร === */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.news-card { background: var(--white-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.news-card img { width: 100%; height: 220px; object-fit: cover; }
.news-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.news-category { background-color: var(--primary-color); color: var(--white-color); font-size: 0.8rem; padding: 5px 12px; border-radius: 50px; align-self: flex-start; margin-bottom: 15px; text-transform: uppercase; }
.news-content h3 { color: var(--heading-color); font-size: 1.4rem; margin-bottom: 10px; line-height: 1.4; }
.news-content p { flex-grow: 1; margin-bottom: 20px; color: var(--grey-color); }
.read-more { color: var(--primary-color); text-decoration: none; font-weight: 700; }

/* === ส่วนท้ายเว็บ (Footer) === */
.main-footer { background-color: var(--heading-color); color: rgba(255, 255, 255, 0.8); padding-top: 60px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding-bottom: 40px; }
.footer-col h4 { font-size: 1.3rem; margin-bottom: 20px; color: var(--white-color); }
.footer-col ul { list-style: none; }
.footer-col a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--secondary-color); }
.social-icons a { color: var(--white-color); background-color: rgba(255,255,255,0.1); font-size: 1.2rem; margin-right: 10px; height: 40px; width: 40px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; transition: background-color 0.3s; }
.social-icons a:hover { background-color: var(--primary-color); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: center; padding: 20px 0; }

/* === การออกแบบสำหรับอุปกรณ์ต่างๆ (Responsive) === */
@media (max-width: 992px) {
    .nav-menu { display: none; } /* ซ่อนเมนูปกติในโหมดมือถือ */
    .cta-button { display: none; }
    .hamburger { display: block; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .nav-menu.active { display: flex; position: absolute; left: 0; top: 80px; flex-direction: column; background-color: var(--white-color); width: 100%; text-align: left; box-shadow: 0 10px 10px rgba(0,0,0,0.1); padding-bottom: 20px; }
    .nav-item { width: 100%; border-bottom: 1px solid #eee; }
    .nav-link { width: 100%; justify-content: space-between; }
    
    /* --- Dropdown บนมือถือ --- */
    .dropdown-menu { position: static; box-shadow: none; width: 100%; opacity: 1; visibility: visible; transform: none; padding: 0; background-color: var(--light-bg); max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
    .dropdown.active > .dropdown-menu { max-height: 300px; }
    .dropdown.active > .nav-link .fa-caret-down { transform: rotate(180deg); }
    .dropdown-menu li a { padding-left: 2.5rem; }

    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }
    .section-title { font-size: 2rem; }
    .news-grid { grid-template-columns: 1fr; }
    .hero-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
    .btn-secondary { margin-left: 0; }
}

/*
=========================================
  สไตล์สำหรับหน้าเกี่ยวกับเรา (About Us)
=========================================
*/

/* --- Hero ของแต่ละหน้า --- */
.page-hero {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 60px 0;
    text-align: center;
}

.page-hero h1 {
    font-size: 3rem;
    font-weight: 700;
}

.page-hero p {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-top: 10px;
    font-style: italic;
}

/* --- ส่วน Vision --- */
.grid-col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.value-card {
    text-align: center;
}

.value-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.value-card h4 {
    font-size: 1.2rem;
    color: var(--heading-color);
    margin-bottom: 5px;
}

/* --- Timeline Section --- */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* เส้นกลางของไทม์ไลน์ */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--primary-color);
    opacity: 0.3;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* วงกลมบนเส้นไทม์ไลน์ */
.timeline-dot {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--white-color);
    border: 4px solid var(--primary-color);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

/* จัดสลับซ้าย-ขวา */
.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

/* จัดการจุดของฝั่งขวา */
.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
}

/* กล่องเนื้อหา */
.timeline-content {
    padding: 20px 30px;
    background-color: var(--white-color);
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.timeline-content img {
    width: 100%;
    border-radius: var(--border-radius);
    margin-top: 15px;
}

.timeline-date {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.timeline-content h3 {
    font-size: 1.4rem;
    color: var(--heading-color);
}

/* --- ส่วน Call to Action --- */
.cta-section {
    background-color: var(--primary-color);
    color: var(--white-color);
    text-align: center;
}
.cta-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
}
.cta-section p {
    opacity: 0.9;
    margin: 10px 0 30px 0;
}
.cta-section .btn {
    background-color: var(--secondary-color);
    color: var(--heading-color);
}


/* --- Responsive สำหรับ Timeline --- */
@media screen and (max-width: 768px) {
    .grid-col-2 {
        grid-template-columns: 1fr;
    }

    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 15px;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 21px;
    }
}


/*
=========================================
  สไตล์สำหรับหน้าติดต่อเรา (Contact Us)
=========================================
*/

/* --- กำหนดตัวแปรสีชมพู --- */
:root {
    /* ... สีเดิม ... */
    --pink-light: #FADADD; /* ชมพูอ่อน */
    --pink-strong: #F4ACB7; /* ชมพูเข้ม */
}

/* --- Hero Section Theme สีชมพู --- */
.page-hero.pink-theme {
    background-color: var(--pink-light);
}
.page-hero.pink-theme h1,
.page-hero.pink-theme p {
    color: var(--heading-color); /* ใช้สีเทาเข้มเพื่อให้ตัดกับพื้นหลังชมพูอ่อน */
}
.page-hero.pink-theme p {
    opacity: 1;
    font-style: normal;
}


/* --- โครงสร้างหลักหน้าติดต่อ --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* ให้ฟอร์มมีพื้นที่มากกว่า */
    gap: 50px;
    align-items: flex-start;
}

/* --- ส่วนข้อมูลการติดต่อ (ซ้าย) --- */
.contact-info h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}

.contact-info p {
    margin-bottom: 30px;
    line-height: 1.8;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.info-list i {
    font-size: 1.5rem;
    color: var(--pink-strong);
    margin-right: 20px;
    width: 25px; /* กำหนดความกว้างให้ไอคอน */
    text-align: center;
    margin-top: 5px;
}

.info-list a {
    color: var(--primary-color);
    text-decoration: none;
}
.info-list a:hover {
    text-decoration: underline;
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--heading-color);
}

.social-icons-contact a {
    color: var(--pink-strong);
    background-color: var(--pink-light);
    font-size: 1.2rem;
    margin-right: 10px;
    height: 45px;
    width: 45px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}
.social-icons-contact a:hover {
    background-color: var(--pink-strong);
    color: var(--white-color);
}


/* --- ส่วนฟอร์ม (ขวา) --- */
.contact-form {
    background-color: #fff;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.contact-form h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 25px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--pink-strong);
    box-shadow: 0 0 0 3px var(--pink-light);
}

.btn-submit {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--pink-strong);
    color: var(--white-color);
    font-size: 1.1rem;
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-submit:hover {
    background-color: #e69aaf; /* สีชมพูที่เข้มขึ้นเล็กน้อย */
    transform: translateY(-2px);
}

/* --- ส่วนแผนที่ --- */
.map-section iframe {
    width: 100%;
    height: 450px;
    border: 0;
}


/* --- Responsive สำหรับหน้าติดต่อ --- */
@media screen and (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}


/*
=========================================
  สไตล์สำหรับหน้าข่าวสาร (News Page)
=========================================
*/

/* --- ส่วนข่าวเด่น (Featured News) --- */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 30px;
    /* กำหนดพื้นที่สำหรับแต่ละส่วน */
    grid-template-areas:
        "main main"
        "sub1 sub2";
}

.news-card.featured-main {
    grid-area: main; /* ให้ข่าวหลักใช้พื้นที่ main */
    position: relative;
    color: var(--white-color);
}
.news-card.featured-secondary {
    background-color: var(--white-color);
}
.featured-grid .news-card:nth-child(2) { grid-area: sub1; }
.featured-grid .news-card:nth-child(3) { grid-area: sub2; }

.news-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.news-card.featured-main img {
    min-height: 400px;
}

/* สร้าง overlay ทับรูปสำหรับข่าวเด่น */
.featured-main .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.featured-main .card-overlay h3 {
    font-size: 2rem;
    line-height: 1.3;
    margin-top: 10px;
}
.featured-main .card-overlay .news-category {
    background-color: var(--pink-strong);
}

.featured-secondary img {
    height: 200px;
}
.featured-secondary .card-content {
    padding: 20px;
}
.featured-secondary .card-content h4 {
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-top: 10px;
}


/* --- ส่วนข่าวทั้งหมด (All News) --- */
.news-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ใช้ .news-card เดิม แต่เพิ่มส่วน meta */
.news-list-grid .news-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.news-list-grid .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.news-list-grid .news-card img {
    height: 200px;
}
.news-list-grid .card-content {
    padding: 20px;
}
.news-list-grid .card-content h4 {
    color: var(--heading-color);
    font-size: 1.3rem;
    margin: 10px 0;
}
.news-meta {
    font-size: 0.9rem;
    color: var(--grey-color);
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.news-meta i {
    margin-right: 8px;
    color: var(--pink-strong);
}


/* --- ส่วนแบ่งหน้า (Pagination) --- */
.pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
}
.page-item {
    margin: 0 5px;
}
.page-link {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    color: var(--primary-color);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 500;
}
.page-link:hover {
    background-color: var(--pink-light);
    border-color: var(--pink-strong);
}
.page-link.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    cursor: default;
}
.page-link.disabled {
    color: #aaa;
    pointer-events: none;
    background-color: #f8f9fa;
}


/* --- Responsive สำหรับหน้าข่าว --- */
@media screen and (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        /* เปลี่ยน layout เป็นแถวเดียว */
        grid-template-areas:
            "main"
            "sub1"
            "sub2";
    }
    .featured-main .card-overlay h3 {
        font-size: 1.5rem;
    }
}

/*
================================================
  สไตล์สำหรับหน้าวิสัยทัศน์และพันธกิจ
================================================
*/

/* --- ส่วน Vision --- */
.vision-statement-section {
    text-align: center;
    background-color: var(--white-color);
}
.vision-icon {
    font-size: 3rem;
    color: var(--secondary-color); /* สีเหลืองทอง */
    margin-bottom: 20px;
}
.vision-statement-section h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--grey-color);
    margin-bottom: 20px;
}
.vision-statement-section blockquote {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto;
    border-left: 5px solid var(--primary-color);
    padding-left: 30px;
    text-align: left;
}

/* --- ส่วน Mission --- */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.mission-card {
    background: var(--white-color);
    padding: 40px;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}
.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.mission-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.mission-card h3 {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}
.mission-card p {
    color: var(--grey-color);
    line-height: 1.8;
}

/* --- ส่วน Core Values --- */
.values-grid-simple {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    min-width: 200px;
}
.value-item i {
    font-size: 2.5rem;
    color: var(--grey-color);
    transition: color 0.3s;
}
.value-item span {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--heading-color);
}
.value-item:hover i {
    color: var(--primary-color);
}

/* --- ส่วนเป้าประสงค์ (Accordion) --- */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--white-color);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    overflow: hidden;
}
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px;
    font-size: 1.3rem;
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    color: var(--heading-color);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}
.accordion-header:hover {
    background-color: #f9f9f9;
}
.accordion-header i {
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-content p {
    padding: 0 20px 20px 20px;
    line-height: 1.8;
}

/* สไตล์เมื่อ Accordion เปิด */
.accordion-item.active .accordion-content {
    max-height: 200px; /* ตั้งค่าให้สูงพอที่จะแสดงเนื้อหาได้ */
}
.accordion-item.active .accordion-header {
    color: var(--primary-color);
}
.accordion-item.active .accordion-header i {
    transform: rotate(45deg); /* หมุนไอคอน + */
}

/*
================================================
  สไตล์สำหรับหน้าคณะผู้บริหาร (Executives Page)
================================================
*/

/* --- ส่วนผู้อำนวยการ --- */
.director-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
}

.director-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.director-info .director-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.director-info h2 {
    font-size: 2.5rem;
    color: var(--heading-color);
    margin-bottom: 20px;
}

.director-info .director-quote {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text-color);
    line-height: 1.6;
    border-left: 4px solid var(--pink-strong);
    padding-left: 20px;
    margin-bottom: 25px;
}

.director-info p {
    line-height: 1.8;
    margin-bottom: 30px;
}

/* --- ส่วนทีมบริหาร --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.profile-card {
    background: var(--white-color);
    text-align: center;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.profile-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid var(--pink-light);
}
.profile-name {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 5px;
}
.profile-title {
    color: var(--grey-color);
    margin-bottom: 20px;
}
.profile-more {
    color: var(--primary-color);
    font-weight: 700;
}
.profile-more i {
    transition: transform 0.3s;
}
.profile-card:hover .profile-more i {
    transform: translateX(5px);
}

/* --- ส่วน Modal (Pop-up) --- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* ซ่อนไว้เริ่มต้น */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
}
.modal-container.active {
    display: flex; /* แสดงผลเมื่อมีคลาส active */
}
.modal-content {
    background: var(--white-color);
    padding: 40px;
    border-radius: var(--border-radius);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 300;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--grey-color);
}
/* สไตล์เนื้อหาใน Modal */
#modal-body { text-align: left; }
.modal-profile-img { float: left; width: 150px; height: 150px; border-radius: 50%; margin-right: 25px; margin-bottom: 15px;}
.modal-profile-name { font-size: 2rem; color: var(--heading-color); }
.modal-profile-title { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 20px; }
#modal-body hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; }
#modal-body p { margin-bottom: 15px; line-height: 1.8; }
#modal-body p strong { color: var(--heading-color); }


/* --- Responsive --- */
@media (max-width: 992px) {
    .director-grid { grid-template-columns: 1fr; text-align: center; }
    .director-image { margin-bottom: 30px; }
}
@media (max-width: 768px) {
    .modal-profile-img { float: none; display: block; margin: 0 auto 20px auto; }
    .modal-content { padding: 25px; }
}

/*
================================================
  สไตล์สำหรับหน้าหลักสูตร (Curriculum Page)
================================================
*/

/* --- ส่วนปรัชญาการสอน --- */
.text-center-mw {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.curriculum-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* --- ส่วนเลือกระดับชั้น --- */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.program-card {
    display: block;
    background-color: var(--white-color);
    padding: 40px;
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}
.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.program-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}
.program-icon i {
    font-size: 2.5rem;
    color: var(--white-color);
}
/* กำหนดสีพื้นหลังไอคอน */
.program-icon.pink-bg { background-color: var(--pink-strong); }
.program-icon.blue-bg { background-color: var(--primary-color); }
.program-icon.yellow-bg { background-color: var(--secondary-color); }

.program-card h3 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}
.program-card p {
    color: var(--grey-color);
    line-height: 1.7;
}

/* --- ส่วนรายละเอียดระดับชั้น --- */
.level-detail-section {
    border-top: 1px solid #eee;
}

/* ใช้สไตล์ Accordion เดิมจากหน้า Vision/Mission */
.curriculum-accordion {
    max-width: 900px;
    margin: 40px auto;
}

/* ปรับสไตล์ปุ่ม Download */
.level-detail-section .btn {
    margin-top: 40px;
    padding: 15px 30px;
    font-size: 1.1rem;
}
.level-detail-section .btn i {
    margin-right: 10px;
}

/*
================================================
  สไตล์สำหรับ Video Modal (Pop-up)
================================================
*/

/* ใช้ .modal-container เดิม แต่ปรับแต่งสำหรับวิดีโอ */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* ทำให้พื้นหลังทึบขึ้น */
    display: none; /* ซ่อนไว้เริ่มต้น */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-container.active {
    display: flex; /* แสดงผลเมื่อมีคลาส active */
}

/* ปรับแต่งกล่องเนื้อหาสำหรับวิดีโอโดยเฉพาะ */
.video-modal-content {
    background: none; /* ไม่ต้องมีพื้นหลังสีขาว */
    padding: 0;
    width: 90%;
    max-width: 900px;
    box-shadow: none;
    position: relative;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ทำให้วิดีโอ responsive */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ปรับปุ่มปิดให้เห็นชัดบนพื้นหลังสีดำ */
.video-modal-content .close-modal {
    position: absolute;
    top: -40px; /* ย้ายไปอยู่เหนือวิดีโอ */
    right: 0;
    font-size: 3rem;
    color: var(--white-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    background: none;
    border: none;
    cursor: pointer;
}

/*
================================================
  สไตล์สำหรับหน้าปฏิทิน (Calendar Page)
================================================
*/

/* --- ส่วนควบคุมปฏิทิน --- */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.month-navigation {
    display: flex;
    align-items: center;
    gap: 15px;
}
.month-navigation h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin: 0;
}
.nav-arrow {
    background: none;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.nav-arrow:hover {
    background-color: var(--pink-light);
}
.view-switcher {
    display: flex;
    gap: 10px;
}
.view-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}
.view-btn.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.view-btn i {
    margin-right: 8px;
}

/* --- ส่วนคำอธิบายสัญลักษณ์ --- */
.event-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}
.legend-item { display: flex; align-items: center; }
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}
.dot.academic { background-color: #005A9C; }
.dot.sports { background-color: #28a745; }
.dot.holiday { background-color: #dc3545; }
.dot.activity { background-color: #ffc107; }

/* --- ส่วนแสดงผล --- */
.calendar-view { display: none; }
.calendar-view.active { display: grid; } /* สำหรับ Grid View */
#list-view.active { display: block; } /* สำหรับ List View */

/* --- สไตล์ Grid View --- */
#grid-view {
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.day-header {
    text-align: center;
    font-weight: 700;
    padding: 10px 0;
    color: var(--heading-color);
}
.day-cell {
    border: 1px solid #eee;
    min-height: 120px;
    padding: 8px;
    font-weight: 500;
    transition: background-color 0.2s;
}
.day-cell:not(.other-month):hover {
    background-color: #f9f9f9;
}
.day-cell.other-month {
    color: #ccc;
    background-color: #fafafa;
}
.event {
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event.academic { background-color: #005A9C; }
.event.sports { background-color: #28a745; }
.event.holiday { background-color: #dc3545; }
.event.activity { background-color: #ffc107; color: #333; }

/* --- สไตล์ List View --- */
#list-view { max-width: 900px; margin: 0 auto; }
.event-list-item {
    display: flex;
    background: var(--white-color);
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}
.event-date {
    flex-shrink: 0;
    width: 100px;
    padding: 20px;
    color: white;
    text-align: center;
}
.event-date .day {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    line-height: 1;
}
.event-date .month {
    font-size: 1rem;
    font-weight: 500;
}
.academic-bg { background-color: #005A9C; }
.sports-bg { background-color: #28a745; }
.holiday-bg { background-color: #dc3545; }
.activity-bg { background-color: #ffc107; color: #333; }

.event-details {
    padding: 20px;
}
.event-details h4 {
    font-size: 1.4rem;
    color: var(--heading-color);
    margin: 0 0 10px 0;
}
.event-details p {
    margin: 0;
    color: var(--grey-color);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .calendar-controls { flex-direction: column; align-items: stretch; }
    .month-navigation, .view-switcher { justify-content: space-between; }
    .day-cell { min-height: 80px; font-size: 0.9rem;}
    .event { font-size: 0.7rem; padding: 2px 4px; }
}


/*
================================================
  สไตล์สำหรับหน้าฝ่ายวิชาการ (Academic Affairs)
================================================
*/

/* --- ส่วนบทบาทและหน้าที่ --- */
.role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    align-items: center;
}
.role-image img {
    width: 100%;
    border-radius: var(--border-radius);
}
.role-info h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 20px;
}
.role-info p {
    margin-bottom: 25px;
    line-height: 1.8;
}
.role-list {
    list-style: none;
    padding: 0;
}
.role-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.role-list i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

/* --- ส่วนทีมงาน --- */
.team-grid-academics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.profile-card-academic {
    background: var(--white-color);
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    padding-bottom: 25px;
}
.card-header-bg {
    height: 100px;
    margin-bottom: -50px;
}
.profile-img-academic {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    border: 5px solid var(--white-color);
    object-fit: cover;
    position: relative;
    z-index: 2;
}
.profile-card-academic .profile-name { margin-top: 15px; font-size: 1.5rem; color: var(--heading-color); }
.profile-card-academic .profile-title { color: var(--grey-color); margin-bottom: 15px; }
.profile-card-academic .profile-desc { padding: 0 20px; color: var(--text-color); }
.profile-card-academic .profile-contact {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.profile-card-academic .profile-contact a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}
.profile-card-academic .profile-contact a:hover {
    text-decoration: underline;
}

/* --- ส่วนแหล่งข้อมูล --- */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}
.resource-card {
    display: block;
    background: var(--light-bg);
    padding: 30px;
    text-align: center;
    border-radius: var(--border-radius);
    text-decoration: none;
    border: 1px solid #eee;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
    border-color: var(--pink-strong);
}
.resource-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.resource-card h4 {
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-bottom: 10px;
}
.resource-card p {
    color: var(--grey-color);
    font-size: 0.9rem;
}

/* --- ส่วน FAQ ใช้ accordion เดิม --- */
.faq-section .accordion {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .role-grid {
        grid-template-columns: 1fr;
    }
    .role-image {
        margin-bottom: 30px;
    }
}

/*
================================================
  สไตล์สำหรับหน้าฝ่ายการเงิน (Finance Page)
================================================
*/

/* --- ส่วนบริการของเรา --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.service-card {
    text-align: center;
    padding: 30px;
}
.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.service-card h3 {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 10px;
}
.service-card p { color: var(--grey-color); }

/* --- ส่วนประกาศล่าสุด --- */
.announcement-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
    background-color: var(--white-color);
    padding: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--pink-light);
}
.announcement-icon i {
    font-size: 4rem;
    color: var(--pink-strong);
}
.announcement-tag {
    display: inline-block;
    background-color: var(--pink-strong);
    color: var(--white-color);
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 15px;
}
.announcement-details h3 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin: 0;
}
.announcement-details p {
    color: var(--grey-color);
    margin: 5px 0 20px 0;
}
.announcement-details .btn i {
    margin-right: 8px;
}

/* --- ส่วนดาวน์โหลดแบบฟอร์ม --- */
.download-list {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}
.download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    transition: box-shadow 0.3s;
}
.download-item:hover {
    box-shadow: var(--box-shadow);
}
.file-info {
    display: flex;
    align-items: center;
}
.file-info i {
    font-size: 2rem;
    color: #dc3545; /* สีแดงสำหรับ PDF */
    margin-right: 20px;
}
.file-info span {
    font-size: 1.1rem;
    font-weight: 500;
}
.btn-download {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}
.btn-download:hover {
    background-color: var(--heading-color);
}

/* --- ส่วนช่องทางการชำระเงิน --- */
.bank-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.bank-logos img {
    height: 60px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}
.bank-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- ส่วน FAQ ใช้ accordion เดิม --- */
.faq-section {
    border-top: 1px solid #eee;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .announcement-grid { grid-template-columns: 1fr; text-align: center; }
    .announcement-icon { margin-bottom: 20px; }
    .download-item { flex-direction: column; gap: 20px; }
}

/*
================================================
  สไตล์สำหรับ Tab Component
================================================
*/

.subsection-title {
    font-size: 1.8rem;
    color: var(--heading-color);
    text-align: center;
    margin-bottom: 30px;
}

.tab-buttons {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 40px;
}
.tab-btn {
    padding: 15px 30px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--grey-color);
    border-bottom: 4px solid transparent;
    margin-bottom: -2px; /* ทำให้เส้นขอบล่างติดกับเส้นหลัก */
    transition: color 0.3s, border-color 0.3s;
}
.tab-btn:hover {
    color: var(--heading-color);
}
.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.tab-btn i {
    margin-right: 10px;
}

.tab-panel {
    display: none; /* ซ่อนเนื้อหาทั้งหมดไว้เริ่มต้น */
    animation: fadeIn 0.5s ease;
}
.tab-panel.active {
    display: block; /* แสดงเฉพาะเนื้อหาของแท็บที่ active */
}

/* ปรับปรุงสไตล์ของส่วนที่อยู่ในแท็บให้สวยงาม */
.tab-panel .latest-announcement-section {
    padding: 0;
}
.tab-panel .downloads-section,
.tab-panel .payment-channels-section {
    padding-top: 40px;
}
.tab-panel .downloads-section .download-item .file-info i {
    color: var(--primary-color);
}

/*
================================================
  สไตล์สำหรับหน้าสมัครเรียน (Admissions Page)
================================================
*/

.btn-lg {
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 700;
}

/* --- ส่วนขั้นตอนการสมัคร (Stepper) --- */
.stepper-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 50px;
}
/* เส้นเชื่อมระหว่าง Step */
.stepper-container::before {
    content: '';
    position: absolute;
    top: 35px; /* กึ่งกลางวงกลม */
    left: 5%;
    right: 5%;
    height: 4px;
    background-color: var(--pink-light);
    z-index: 1;
}
.step-item {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 20%;
}
.step-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 4px solid var(--pink-strong);
    color: var(--pink-strong);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 20px auto;
}
.step-item:first-child .step-circle,
.step-item:last-child .step-circle {
    background-color: var(--pink-strong);
    color: var(--white-color);
}
.step-content h4 {
    font-size: 1.3rem;
    color: var(--heading-color);
}
.step-content p {
    color: var(--grey-color);
    font-size: 0.9rem;
}

/* --- ส่วนข้อมูล กำหนดการและเอกสาร --- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
}
.info-column h3 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}
.info-column h3 i {
    color: var(--primary-color);
    margin-right: 15px;
}
/* Timeline List */
.timeline-list { list-style: none; padding: 0; }
.timeline-list li {
    padding-left: 25px;
    border-left: 3px solid var(--pink-light);
    position: relative;
    padding-bottom: 25px;
}
.timeline-list li::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--pink-strong);
    position: absolute;
    left: -9px;
    top: 5px;
}
.timeline-list li strong { display: block; font-size: 1.1rem; }
.timeline-list li span { color: var(--grey-color); }

/* Document List */
.document-list { list-style: none; padding: 0; }
.document-list li {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
}
.document-list i {
    color: #28a745; /* สีเขียว */
    font-size: 1.2rem;
    margin-right: 15px;
}

/* --- ส่วน Apply Now --- */
.apply-now-section { text-align: center; }
.apply-now-section i {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}
.apply-now-section h2 { font-size: 2.5rem; color: var(--heading-color); }
.apply-now-section p { font-size: 1.2rem; line-height: 1.8; margin: 20px auto 30px auto; max-width: 600px; }
.apply-now-section .form-note { font-size: 0.9rem; color: var(--grey-color); margin-top: 20px; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .stepper-container { flex-direction: column; gap: 30px; }
    .stepper-container::before {
        top: 5%; bottom: 5%; left: 35px; right: auto; width: 4px; height: 90%;
    }
    .step-item {
        display: flex; text-align: left; gap: 20px; align-items: center;
    }
    .step-circle { margin: 0; }
}

@media (max-width: 768px) {
    .stepper-container::before { left: 25px; }
    .step-circle { width: 50px; height: 50px; font-size: 1.5rem; }
}

/*
================================================
  สไตล์สำหรับหน้าบริหารงานบุคคล (HR Page)
================================================
*/

/* --- ส่วนพันธกิจ --- */
/* สามารถใช้ .role-grid, .role-image, .role-info, .role-list จากหน้าฝ่ายวิชาการได้เลย */
.hr-mission-section .role-list i {
    color: var(--pink-strong);
}

/* --- ส่วนร่วมงานกับเรา --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.benefit-card {
    background: var(--white-color);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--pink-light);
    border-radius: var(--border-radius);
    transition: transform 0.3s, box-shadow 0.3s;
}
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}
.benefit-card i {
    font-size: 3rem;
    color: var(--pink-strong);
    margin-bottom: 20px;
}
.benefit-card h3 {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 10px;
}
.benefit-card p {
    color: var(--grey-color);
}

/* --- ส่วนตำแหน่งงาน (Accordion) --- */
.job-accordion.accordion {
    max-width: 900px;
    margin: 0 auto;
}
.job-accordion .accordion-content {
    padding: 0 20px 20px 20px;
}
.job-accordion .accordion-content h4 {
    font-size: 1.2rem;
    color: var(--heading-color);
    margin-top: 20px;
    margin-bottom: 10px;
}
.job-accordion .accordion-content ul {
    list-style-position: inside;
    padding-left: 10px;
}
.job-accordion .accordion-content li {
    margin-bottom: 8px;
}
.apply-btn {
    margin-top: 25px;
}

/* --- ส่วนข้อมูลสำหรับบุคลากร --- */
/* สามารถใช้ .download-list, .download-item จากหน้าฝ่ายการเงินได้เลย */
.hr-resources-section .download-item .file-info i {
    color: var(--primary-color);
}


/*
================================================
  สไตล์สำหรับหน้าบริหารทั่วไป (General Admin)
================================================
*/

/* --- ส่วนโครงการเด่น --- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.project-card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform 0.3s;
}
.project-card:hover {
    transform: translateY(-5px);
}
.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.project-content {
    padding: 25px;
}
.project-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.project-status.completed {
    color: #155724;
    background-color: #d4edda;
}
.project-status.in-progress {
    color: #0c5460;
    background-color: #d1ecf1;
}
.project-content h4 {
    font-size: 1.4rem;
    color: var(--heading-color);
    margin-bottom: 10px;
}

/* --- ส่วนแกลเลอรีภาพ --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    grid-auto-rows: 250px;
}
.gallery-item {
    overflow: hidden;
    border-radius: var(--border-radius);
    cursor: pointer;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item:hover img {
    transform: scale(1.1);
}
/* ทำให้บางภาพกว้างหรือสูงกว่าปกติ (Masonry effect) */
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }

/* --- สไตล์ Lightbox --- */
.lightbox {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none; /* ซ่อนไว้เริ่มต้น */
    justify-content: center;
    align-items: center;
}
.lightbox.active {
    display: flex;
}
.lightbox-content {
    max-width: 90%;
    max-height: 85%;
    animation: zoomIn 0.3s ease;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Responsive for Gallery --- */
@media (max-width: 768px) {
    /* ในจอมือถือ ให้ทุกภาพขนาดเท่ากันเพื่อความเรียบง่าย */
    .gallery-item.wide, .gallery-item.tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/*
================================================
  สไตล์สำหรับหน้าโครงสร้างองค์กร (Org Chart)
================================================
*/

.org-chart-section {
    padding: 80px 0;
    overflow-x: auto; /* ทำให้เลื่อนซ้ายขวาได้ถ้าผังกว้างเกินจอ */
}

.org-chart {
    text-align: center;
    white-space: nowrap; /* ป้องกันการตัดข้อความในผัง */
}

.org-chart ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    display: inline-flex; /* ทำให้ li เรียงต่อกันแนวนอน */
}

.org-chart li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}

/* --- ส่วนสำคัญ: การวาดเส้นเชื่อม --- */

/* เส้นแนวตั้งด้านบนและเส้นแนวนอนที่เชื่อมพี่น้อง */
.org-chart li::before, .org-chart li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid var(--pink-strong);
    width: 50%;
    height: 20px;
}
.org-chart li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--pink-strong);
}

/* ซ่อนเส้นที่ไม่จำเป็นสำหรับ Node ที่ไม่มีพี่น้อง */
.org-chart li:only-child::after, .org-chart li:only-child::before {
    display: none;
}

/* จัดการเส้นสำหรับ Node แรกสุดและท้ายสุดในกลุ่ม */
.org-chart li:first-child::before, .org-chart li:last-child::after {
    border: 0 none;
}
.org-chart li:last-child::before {
    border-right: 2px solid var(--pink-strong);
    border-radius: 0 5px 0 0;
}
.org-chart li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* เส้นแนวนอนที่เชื่อมกลุ่มลูก */
.org-chart ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid var(--pink-strong);
    width: 0;
    height: 20px;
}

/* --- สไตล์ของแต่ละ Node --- */
.org-chart .node {
    border: 2px solid #ccc;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--white-color);
    display: inline-block;
    border-radius: var(--border-radius);
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.org-chart .node:hover {
    border-color: var(--primary-color);
}
.org-chart .node i {
    font-size: 1.2rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 8px;
}
.org-chart .node strong {
    display: block;
    font-size: 1.1rem;
    color: var(--heading-color);
}
.org-chart .node span {
    display: block;
    font-size: 0.9rem;
    color: var(--grey-color);
}

/* สไตล์พิเศษสำหรับแต่ละระดับ */
.org-chart .board { background-color: var(--heading-color); color: var(--white-color); border:none; }
.org-chart .board strong, .org-chart .board i { color: var(--white-color); }
.org-chart .director { background-color: var(--primary-color); color: var(--white-color); border:none; }
.org-chart .director strong, .org-chart .director span, .org-chart .director i { color: var(--white-color); }
.org-chart .vp { background-color: var(--pink-light); }

/* --- ส่วนการ์ดอธิบายหน้าที่ --- */
.department-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.dept-card {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.dept-card-header {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 20px;
    display: flex;
    align-items: center;
}
.dept-card-header i {
    font-size: 2rem;
    margin-right: 15px;
}
.dept-card-header h3 { font-size: 1.5rem; }
.dept-card-body {
    padding: 25px;
    background-color: var(--white-color);
}
.dept-card-body ul {
    list-style-position: inside;
    padding-left: 5px;
}

/* --- Responsive สำหรับ Org Chart --- */
@media (max-width: 768px) {
    .org-chart {
        white-space: normal; /* อนุญาตให้ตัดข้อความ */
    }
    .org-chart ul {
        display: block; /* เปลี่ยนเป็นแนวตั้ง */
        padding-left: 0;
    }
    .org-chart li {
        float: none;
        display: block; /* เปลี่ยนเป็นแนวตั้ง */
    }
    /* ซ่อนเส้นแนวนอนทั้งหมดในจอมือถือ */
    .org-chart li::before, .org-chart li::after {
        display: none;
    }
    /* วาดเส้นแนวตั้งใหม่ */
    .org-chart li {
        border-left: 2px solid var(--pink-strong);
        margin-left: 20px;
    }
    .org-chart li:first-child {
        border-top-left-radius: 5px;
    }
     .org-chart li:last-child {
        border-bottom-left-radius: 5px;
        border-left: none; /* เส้นสุดท้ายไม่ต้องมี */
    }
    .org-chart li .node {
        margin-left: 20px;
        position: relative;
    }
    /* วาดเส้นเชื่อมจากเส้นหลักมาหา node */
    .org-chart li .node::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -22px; /* ระยะห่าง + ความหนาเส้น */
        width: 20px;
        height: 2px;
        background-color: var(--pink-strong);
    }
    .org-chart ul > li:first-child > div::before {
        display: none;
    }
}

/*
================================================
  สไตล์สำหรับส่วน E-Service และเอกสารเผยแพร่
================================================
*/

.main-content-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr; /* แบ่ง 2 ส่วน โดยส่วนซ้ายกว้างกว่า */
    gap: 40px;
}

.section-header-bar {
    padding: 12px 20px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: var(--white-color);
}
.section-header-bar h3 {
    margin: 0;
    font-size: 1.3rem;
}
.section-header-bar i {
    margin-right: 10px;
}

.section-header-bar.yellow-bar { background-color: #F59E0B; } /* สีเหลืองส้ม */
.section-header-bar.blue-bar { background-color: var(--primary-color); }

.services-grid-container, .documents-sidebar {
    background: var(--white-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.services-button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
}

.service-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--white-color);
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
    line-height: 1.3;
}
.service-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.service-btn i {
    font-size: 1.8rem;
    opacity: 0.8;
}
.service-btn small {
    font-weight: 400;
    font-size: 0.8rem;
    display: block;
    opacity: 0.9;
}

/* --- กำหนดสีปุ่ม --- */
.service-btn.blue { background-color: #3B82F6; }
.service-btn.green { background-color: #10B981; }
.service-btn.orange { background-color: #F97316; }

/* --- ส่วนเอกสารเผยแพร่ --- */
.document-list-container {
    padding: 20px;
}
.document-cover {
    display: block;
    text-decoration: none;
    margin-bottom: 25px;
    text-align: center;
}
.document-cover img {
    width: 100%;
    max-width: 250px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.document-cover:hover img {
    transform: scale(1.05);
}
.document-cover p {
    margin-top: 15px;
    color: var(--heading-color);
    font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .main-content-grid {
        grid-template-columns: 1fr; /* ในจอ Tablet และมือถือ ให้แสดงเป็น 1 คอลัมน์ */
    }
}
@media (max-width: 768px) {
    .services-button-grid {
        grid-template-columns: repeat(2, 1fr); /* ในจอมือถือ แสดง 2 คอลัมน์ */
    }
}
@media (max-width: 576px) {
    .services-button-grid {
        grid-template-columns: 1fr; /* ในจอมือถือเล็กสุด แสดง 1 คอลัมน์ */
    }
}

/*
================================================
  สไตล์สำหรับส่วนแบนเนอร์ข้อมูล (Info Banners)
================================================
*/

.info-banners-section {
    padding-top: 0; /* เอา padding ด้านบนออกเพื่อให้ติดกับส่วนก่อนหน้า */
}

.banners-container {
    display: grid;
    gap: 25px;
}

.info-banner {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--white-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.info-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* --- แบนเนอร์ที่ 1: ร้องเรียนทุจริต --- */
.banner-corruption {
    background-color: #16A34A; /* สีเขียว */
}
.banner-icon-bg {
    background-color: var(--white-color);
    border-radius: 50%;
    padding: 15px;
    margin-right: 25px;
    flex-shrink: 0;
}
.banner-icon-bg img {
    display: block;
    width: 80px;
    height: 80px;
}
.banner-text h2 {
    font-size: 1.8rem;
    margin: 0;
}
.banner-text p {
    margin: 5px 0 0 0;
    opacity: 0.8;
}
.click-icon {
    font-size: 1.5rem;
    margin-left: auto;
    align-self: flex-start;
}

/* --- แบนเนอร์ที่ 2: O-NET --- */
.banner-onet {
    background-color: #2563EB; /* สีน้ำเงิน */
    padding: 40px;
}
.banner-logo-small {
    flex-shrink: 0;
    margin-right: 25px;
}
.banner-logo-small img {
    display: block;
    width: 60px;
    height: 60px;
}
.banner-text.large-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
}
/* สร้างลายจุดด้วย CSS */
.banner-onet::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 15px 15px;
}

/* --- แบนเนอร์ที่ 3: ประเมินผล --- */
.banner-evaluation {
    background-color: #16A34A; /* สีเขียว */
    padding: 30px;
}
.banner-evaluation .banner-text h3 {
    font-size: 1.5rem;
    font-weight: 500;
}
/* สร้างลายกราฟิกด้วย CSS */
.banner-evaluation::before {
    content: '';
    position: absolute;
    left: -30px;
    top: -30px;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-48 0c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zM11 68c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill='%23FFFFFF' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .info-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .banner-icon-bg, .banner-logo-small {
        margin: 0;
    }
    .click-icon {
        display: none;
    }
    .banner-text h2 { font-size: 1.5rem; }
    .banner-text.large-text h2 { font-size: 1.8rem; }
    .banner-evaluation .banner-text h3 { font-size: 1.3rem; }
}


/*
================================================
  สไตล์สำหรับหน้าดาวน์โหลดแบบฟอร์ม
================================================
*/

/* ปรับ Hero Section สำหรับหน้าพื้นหลังขาว */
.page-hero.white-bg {
    background: none;
    padding: 60px 0;
}
.page-hero .dark-text {
    color: var(--heading-color);
}

.downloads-page-section {
    padding-top: 0;
}

.downloads-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}

.download-column .column-header {
    background-color: var(--light-bg);
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}
.download-column .column-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--heading-color);
}

.form-download-list {
    list-style: none;
    padding: 0;
}

.form-download-list li {
    margin-bottom: 5px;
}

.form-download-list a {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}

.form-download-list a:hover {
    background-color: var(--pink-light);
    color: var(--heading-color);
}

.form-download-list .file-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    width: 25px;
    text-align: center;
}
.form-download-list .fa-file-pdf { color: #dc3545; }
.form-download-list .fa-file-word { color: #2b579a; }

.form-download-list .file-name {
    flex-grow: 1; /* ทำให้ชื่อไฟล์ยืดเต็มพื้นที่ที่เหลือ */
    font-weight: 500;
}

.form-download-list .file-size {
    color: var(--grey-color);
    font-size: 0.9rem;
    margin-left: 15px;
    white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .downloads-grid-container {
        grid-template-columns: 1fr; /* ในจอเล็กให้แสดง 1 คอลัมน์ */
    }
}

/* --- bot --- */
.forum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.forum-header h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.8rem;
}

.new-topic-btn {
    background-color: #3498db; /* สีฟ้า */
    color: #fff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.new-topic-btn:hover {
    background-color: #2980b9; /* สีฟ้าเข้มขึ้น */
}

.forum-topics .topic-item {
    padding: 1.2rem 0;
    border-bottom: 1px dashed #eee;
}

.forum-topics .topic-item:last-child {
    border-bottom: none;
}

.topic-title {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.topic-title a {
    color: #333;
    text-decoration: none;
}

.topic-title a:hover {
    color: #3498db;
    text-decoration: underline;
}

.topic-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 0.8rem;
}

.topic-meta .author, .topic-meta .replies {
    font-weight: bold;
    color: #555;
}

.topic-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

.pagination {
    text-align: center;
    margin-top: 2rem;
}

.pagination a {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    margin: 0 0.3rem;
    background-color: #eee;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover,
.pagination a.active {
    background-color: #3498db;
    color: #fff;
}

/*
================================================
  สไตล์สำหรับเมนูย่อยซ้อน (Multi-level Dropdown)
================================================
*/

/* --- สไตล์สำหรับ Desktop --- */

/* ตั้งค่าให้ li ที่มีเมนูย่อยเป็นจุดอ้างอิง */
.dropdown-menu .has-submenu {
    position: relative;
}

/* ทำให้ลิงก์ของเมนูย่อยเรียงสวยงามกับไอคอน */
.dropdown-menu .has-submenu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ซ่อนเมนูย่อยระดับที่ 2 ไว้เริ่มต้น */
.has-submenu .submenu {
    position: absolute;
    left: 100%; /* แสดงผลด้านขวาของเมนูแม่ */
    top: -10px; /* จัดตำแหน่งเริ่มต้นให้อยู่ตรงกลางเล็กน้อย */
    background-color: var(--white-color);
    list-style: none;
    min-width: 220px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* แสดงเมนูย่อยระดับที่ 2 เมื่อนำเมาส์ไปชี้ */
.has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* --- สไตล์สำหรับ Mobile (ใน @media query เดิม) --- */
@media (max-width: 992px) {
    /* ปรับปรุงสไตล์เดิมให้รองรับเมนูย่อยซ้อน */
    .dropdown.active > .dropdown-menu {
        /* ไม่ต้องกำหนด max-height ที่นี่แล้ว */
        /* ปล่อยให้มันขยายตาม content */
    }

    /* รีเซ็ตสไตล์ของ submenu สำหรับ mobile */
    .has-submenu .submenu {
        position: static; /* ไม่ลอยแล้ว */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        width: 100%;
        padding: 0;
        background-color: #f8f9fa; /* ทำให้สีพื้นหลังแตกต่างเล็กน้อย */
        
        /* ซ่อนไว้เริ่มต้น */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }

    .has-submenu .submenu a {
        padding-left: 3rem; /* ย่อหน้าเข้ามาอีกระดับ */
    }

    /* แสดง submenu เมื่อ li.has-submenu ถูกกด (มีคลาส active) */
    .has-submenu.active > .submenu {
        max-height: 500px; /* ตั้งค่าให้สูงพอที่จะแสดงเนื้อหา */
    }

    /* หมุนไอคอนลูกศรขวา */
    .has-submenu.active > a > .fa-caret-right {
        transform: rotate(90deg);
    }
}