/* การตั้งค่าพื้นฐานและโทนสี */
:root {
    --primary-pink: #F48FB1; /* ชมพูหลัก (Muted Pink) */
    --primary-pink-dark: #E91E63; /* ชมพูเข้ม */
    --secondary-blue: #81D4FA; /* ฟ้าหลัก (Light Blue) */
    --secondary-blue-light: #E1F5FE; /* ฟ้าอ่อนมาก */
    --text-dark: #333;
    --text-light: #fefefe;
    --bg-light: #FCE4EC; /* พื้นหลังสีชมพูอ่อนมาก */
    --bg-white: #ffffff;
}

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

body {
    font-family: 'Sarabun', sans-serif;
    line-height: 1.6;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

a {
    text-decoration: none;
    color: var(--text-dark);
}

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

/* --- 1. ส่วนหัว (Header) และเมนู --- */
.main-header {
    background-color: var(--primary-pink);
    color: var(--text-light);
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: 700;
}

.school-logo {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%; /* ทำให้โลโก้กลม */
    border: 2px solid var(--text-light);
    background-color: var(--secondary-blue); /* Placeholder BG */
}

/* Menu Hover Style */
.nav-item:hover {
    background-color: var(--primary-pink-dark);
    border-radius: 5px;
}

.submenu {
    border-top: 3px solid var(--secondary-blue);
    /* ... (โค้ด Submenu อื่นๆ เหมือนเดิม) ... */
}

/* --- 2. ส่วนสไลด์รูปภาพ --- */
/* --- ส่วนสไลด์รูปภาพ --- */
.slider-container {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 450px; /* กำหนดความสูงของสไลด์ */
    position: relative; /* สำคัญ: เพื่อให้รูปภาพและข้อความอยู่ในตำแหน่งที่ถูกต้อง */
    display: flex; /* ทำให้เนื้อหาในสไลด์จัดกึ่งกลางได้ง่ายขึ้น */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ซ่อนส่วนเกินของรูปภาพ */
}

.slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* รูปภาพเต็มความกว้างของสไลด์ */
    height: 100%; /* รูปภาพเต็มความสูงของสไลด์ */
    object-fit: cover; /* สำคัญ: ทำให้รูปภาพครอบคลุมพื้นที่โดยไม่บิดเบี้ยว */
    z-index: 0; /* ให้อยู่ด้านหลังข้อความ */
}

.slide-caption {
    position: relative; /* ให้อยู่เหนือรูปภาพ */
    z-index: 2; /* ให้อยู่เหนือ Overlay */
    color: var(--text-light);
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay สำหรับข้อความ */
    border-radius: 8px;
    max-width: 80%;
}

.slide-caption h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.slide-caption p {
    font-size: 1.2em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* ลบโค้ด background-image: url(...) ในแต่ละ .slide:nth-child ออก */
/* .slide:nth-child(1) { background-image: url('...'); } */ 
/* ... และสไลด์อื่นๆ ... */


/* --- Overlay สำหรับรูปภาพ --- */
/* หากยังต้องการ Overlay ทับรูปภาพทั้งหมด 
   สามารถคงโค้ดนี้ไว้ หรือปรับให้ใช้กับ .slide-caption แทน */
/* .slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 1;
} */


/* --- Media Query สำหรับ Mobile (ปรับขนาดข้อความ) --- */
@media (max-width: 768px) {
    .slide {
        height: 300px; /* ปรับความสูงสไลด์บนมือถือ */
    }
    .slide-caption h1 {
        font-size: 1.8em; /* ปรับขนาดตัวอักษรบนมือถือ */
    }
    .slide-caption p {
        font-size: 1em;
    }
}
/* Dot Navigation */
.slider-nav-dots {
    /* ... (โค้ด Dots เหมือนเดิม) ... */
}


/* --- ส่วนสไลด์รูปภาพ (ต่อจากโค้ดเดิม) --- */

/* เพิ่ม Placeholder สำหรับ 5 Slides */
.slide:nth-child(1) { background-image: url('https://via.placeholder.com/1200x450/F48FB1/FFFFFF?text=Slide+1+Welcome'); }
.slide:nth-child(2) { background-image: url('https://via.placeholder.com/1200x450/81D4FA/FFFFFF?text=Slide+2+Activity'); }
.slide:nth-child(3) { background-image: url('https://via.placeholder.com/1200x450/B39DDB/FFFFFF?text=Slide+3+Science+Lab'); } /* สีใหม่ */
.slide:nth-child(4) { background-image: url('https://via.placeholder.com/1200x450/FFCC80/FFFFFF?text=Slide+4+Club+Activity'); } /* สีใหม่ */
.slide:nth-child(5) { background-image: url('https://via.placeholder.com/1200x450/A5D6A7/FFFFFF?text=Slide+5+Open+House'); } /* สีใหม่ */

/* --- สไตล์ปุ่มควบคุม (Arrows) --- */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ปรับ Dot Navigation ให้อยู่ด้านบน Arrows */
.slider-nav-dots {
    z-index: 6; 
    /* ... (โค้ด dots อื่นๆ เหมือนเดิม) ... */
}










/* --- 3. ส่วนเนื้อหาหลัก 2 คอลัมน์ (Desktop) --- */
.container {
    display: flex;
}

.content-left {
    flex: 80%;
    padding: 20px;
    background-color: var(--bg-white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-right: 20px;
}

.sidebar-right {
    flex: 20%;
    padding: 20px;
    background-color: var(--secondary-blue-light);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* สไตล์ข่าวสาร */
.content-left h2 {
    color: var(--primary-pink-dark);
    border-bottom: 3px solid var(--secondary-blue);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.news-item {
    transition: transform 0.2s;
}

.news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-pink);
}

/* สไตล์ผู้บริหาร */
.admin-photo {
    border: 4px solid var(--primary-pink);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.admin-name {
    color: var(--primary-pink-dark);
}

/* --- 4. Enhanced Footer --- */
.main-footer {
    background-color: #333;
    color: var(--text-light);
    padding: 40px 5%;
    margin-top: 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    flex-wrap: wrap; 
}

.footer-section {
    width: 30%; 
    margin-bottom: 20px;
}

.footer-section h3 {
    color: var(--secondary-blue);
    border-bottom: 2px solid var(--primary-pink);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.contact-info p i {
    color: var(--primary-pink);
}

.social-media a {
    color: var(--text-light);
    font-size: 1.8em;
    margin-right: 20px;
}

.social-icon.facebook:hover { color: #3b5998; }
.social-icon.line:hover { color: #00B900; }
.social-icon.youtube:hover { color: #FF0000; }

.map-placeholder {
    height: 200px;
    background-color: #555;
}

/* --- 5. การแสดงผลในโทรศัพท์มือถือ (Responsive Design) --- */
@media (max-width: 900px) {
    /* ปรับ Layout 2 คอลัมน์เป็น 1 คอลัมน์ */
    .container {
        flex-direction: column;
    }
    
    /* สลับลำดับให้รูปผู้บริหารอยู่ด้านบนก่อน (Mobile First) */
    .content-left {
        flex: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        order: 2; 
    }
    
    .sidebar-right {
        flex: 100%;
        margin-bottom: 20px;
        order: 1; 
    }

    /* ปรับ Footer เป็นคอลัมน์เดียว */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-section {
        width: 80%;
    }
}

@media (max-width: 768px) {
    /* ปรับ Header สำหรับ Mobile */
    .main-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar {
        width: 100%;
        margin-top: 10px;
    }
    .navbar .nav-list {
        display: none; /* ซ่อนเมนูทั้งหมดบนมือถือ (สามารถเพิ่ม Hamburger Icon ได้) */
    }
    
    .slide {
        height: 300px;
    }
    .slide h1 {
        font-size: 1.5em;
    }

    /* ปรับรูปแบบข่าวสารบนมือถือ */
    .news-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .news-thumb {
        margin-bottom: 10px;
        margin-right: 0;
        width: 100%;
        max-height: 150px;
    }
}

/* การตั้งค่าพื้นฐาน */
:root {
    --primary-pink: #F48FB1; /* ชมพูหลัก */
    --secondary-blue: #81D4FA; /* ฟ้าหลัก */
    --text-dark: #333;
    --text-light: #fefefe;
    --bg-light: #f9f9f9;
}

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

body {
    font-family: 'Sarabun', sans-serif;
    line-height: 1.6;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

a {
    text-decoration: none;
    color: var(--text-dark);
}

/* --- ส่วนหัว (Header) และเมนู --- */
.main-header {
    background-color: var(--primary-pink);
    color: var(--text-light);
    padding: 8px 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* ทำให้แถบเมนูติดด้านบน */
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.0em;
    font-weight: 500;
}

.navbar .nav-list {
    list-style: none;
    display: flex;
}

.nav-item {
    position: relative;
    padding: 10px 15px;
}

.nav-item a {
    color: var(--text-light);
    font-weight: 600;
    transition: background-color 0.3s;
}

.nav-item:hover {
    background-color: #E91E63; /* ชมพูเข้มเมื่อ Hover */
}

/* Submenu (เมนูย่อย) */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 180px;
    list-style: none;
    z-index: 10;
}

.submenu li a {
    color: var(--text-dark);
    padding: 10px 15px;
    display: block;
}

.submenu li a:hover {
    background-color: var(--secondary-blue);
    color: var(--text-light);
}

.has-submenu:hover .submenu {
    display: block; /* แสดงเมนูย่อยเมื่อ Hover บนเมนูหลัก */
}

/* --- ส่วนเนื้อหาหลัก 2 คอลัมน์ --- */
.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}

.content-left {
    flex: 80%; /* 80% */
    padding-right: 30px;
}

.sidebar-right {
    flex: 20%; /* 20% */
    padding: 10px;
    background-color: var(--secondary-blue);
    border-radius: 5px;
    text-align: center;
    color: var(--text-dark);
}


/* สไตล์ข่าวสาร */
.news-item {
    display: flex;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.news-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.news-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 3px;
}

.news-details h3 {
    color: var(--primary-pink);
    margin-top: 5px;
}

.news-date {
    font-size: 0.8em;
    color: #999;
}

.btn-all-news {
    background-color: var(--primary-pink);
    color: var(--text-light);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.btn-all-news:hover {
    background-color: #E91E63;
}

/* สไตล์ผู้บริหาร */
.admin-profile img {
    width: 100%; /* ทำให้รูปภาพเต็มความกว้างของคอลัมน์ 20% */
    max-width: 200px;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.admin-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-dark);
}

.admin-title {
    font-size: 0.9em;
    margin-top: 2px;
}




/* --- ส่วนเนื้อหาหลัก 2 คอลัมน์ (Desktop) --- */

/* โค้ดเดิม: .content-left, .sidebar-right ... */

/* --- สไตล์ส่วนบุคลากรใหม่ --- */

.content-left h2 {
    /* ใช้สไตล์เดียวกับหัวข้อเดิม */
    color: var(--primary-pink-dark);
    border-bottom: 3px solid var(--secondary-blue);
    padding-bottom: 10px;
    margin-bottom: 30px; /* เพิ่มระยะห่างด้านล่าง */
    font-size: 1.8em;
}

.personnel-row {
    margin-bottom: 40px;
    padding: 15px;
    background-color: var(--secondary-blue-light); /* ใช้สีฟ้าอ่อนเป็นพื้นหลังแถว */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.row-header {
    color: var(--text-dark);
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary-pink); /* เน้นหัวข้อแถวด้วยสีชมพู */
}

.personnel-grid-director-head {
    /* ใช้ CSS Grid เพื่อจัดเรียง 4 คอลัมน์ */
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 คอลัมน์เท่ากัน */
    gap: 20px; /* ระยะห่างระหว่างคอลัมน์และแถว */
}

.personnel-grid-head {
    /* ใช้ CSS Grid เพื่อจัดเรียง 4 คอลัมน์ */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 คอลัมน์เท่ากัน */
    gap: 20px; /* ระยะห่างระหว่างคอลัมน์และแถว */
}

.personnel-grid {
    /* ใช้ CSS Grid เพื่อจัดเรียง 4 คอลัมน์ */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 คอลัมน์เท่ากัน */
    gap: 20px; /* ระยะห่างระหว่างคอลัมน์และแถว */
}



/* ปรับปรุงขนาดและรูปแบบการ์ด */
.personnel-card {
    text-align: center;
    background-color: var(--bg-white);
    padding: 15px;
    /* เพิ่มขอบมนเล็กน้อยให้กับการ์ด */
    border-radius: 10px; 
    border: 1px solid #ddd;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* --- ปรับปรุงรูปภาพบุคลากร --- */
.personnel-img {
    width: 100%;
    /* กำหนดขนาดรูปภาพให้ใหญ่ขึ้น เช่น ความกว้างสูงสุด 150px */
    max-width: 200px; 
    /* กำหนดความสูงเพื่อให้รูปภาพเป็นสี่เหลี่ยมจัตุรัส */
    height: 300px; 
    object-fit: cover;
    /* ลบการทำรูปภาพเป็นวงกลม (ลบ border-radius: 50%) */
    border-radius: 5px; /* ทำให้ขอบรูปมนเล็กน้อย */
    border: 3px solid var(--primary-pink);
    margin-bottom: 10px;
    /* จัดกึ่งกลางรูปภาพในพื้นที่ที่กำหนด */
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

.person-name {
    font-size: 1.15em; /* ปรับให้ใหญ่ขึ้นเล็กน้อย */
    font-weight: 700;
    color: var(--primary-pink-dark);
    margin-top: 5px;
}

/* --- การแสดงผลในโทรศัพท์มือถือ (Responsive Design) --- */

@media (max-width: 400px) {
    /* บน Mobile จอเล็ก: ปรับขนาดรูปภาพให้เล็กลงตามสัดส่วน */
    .personnel-grid {
        grid-template-columns: 1fr;
    }
    .personnel-img {
        max-width: 120px;
        height: 120px;
    }
}

.person-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-pink-dark);
    margin-top: 5px;
}

.person-position {
    font-size: 0.85em;
    color: #555;
}

/* --- การแสดงผลในโทรศัพท์มือถือ (Responsive Design) --- */

@media (max-width: 900px) {
    /* บน Tablet/ขนาดกลาง: ปรับเป็น 3 คอลัมน์ */
    .personnel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    /* บน Mobile: ปรับเป็น 2 คอลัมน์ */
    .personnel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .row-header {
        font-size: 1.3em;
    }
}

@media (max-width: 400px) {
     /* บน Mobile จอเล็ก: ปรับเป็น 1 คอลัมน์ */
    .personnel-grid {
        grid-template-columns: 1fr;
    }
    .personnel-img {
        max-width: 80px;
        height: 80px;
    }
}






/* --- ส่วนเมนูปุ่มกดหน้าบุคลากร -- */

.promo-grid {
    /* ใช้ Grid ในการจัดเรียง 2 คอลัมน์ต่อแถว */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์เท่ากัน */
    gap: 20px; /* ระยะห่างระหว่างปุ่ม */
    max-width: 900px;
    margin: 0 auto;
}

.promo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-light);
    background-color: var(--primary-pink); /* ปุ่มสีชมพู */
    border-radius: 8px;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.promo-button i {
    font-size: 1.5em;
    margin-right: 15px;
}

.promo-button:hover {
    background-color: var(--primary-pink-dark); /* สีเข้มขึ้นเมื่อ Hover */
    transform: translateY(-3px);
}




/* --- Responsive สำหรับ Mobile (1 คอลัมน์) --- */
@media (max-width: 650px) {
    .promo-grid {
        /* บนมือถือขนาดเล็ก ปรับให้เป็น 1 คอลัมน์ */
        grid-template-columns: 1fr;
    }
    .promo-button {
        font-size: 1em;
        padding: 15px;
    }
}











/* --- ส่วนท้าย (Footer) --- */
.main-footer {
    background-color: var(--text-dark);
    color: var(--text-light);
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}