/* --- Styles สำหรับบทความข่าวสารและเนื้อหาโดยเฉพาะ (news_content.css) --- */

.news-article { /* ส่วนครอบเนื้อหาข่าว (ใน pages/news_detail.php) */
    padding: 20px 0;
}

.article-title {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--primary-blue-darker); /* ใช้สีเดียวกับ Navbar */
    margin-bottom: 10px;
    text-align: center;
}

.article-meta {
    font-size: 0.9em;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

.article-meta span {
    margin: 0 10px;
}

.article-image { /* ส่วนครอบรูปภาพหลักในบทความ */
    text-align: center;
    margin-bottom: 25px;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(177, 156, 217, 0.2); /* เงาสีม่วงอ่อน */
}

.article-content { /* ส่วนครอบเนื้อหาบทความ (content_1-4) */
    padding: 0 15px;
}

.article-content p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 15px;
    color: var(--text-dark);
    text-align: justify;
}

/* --- สไตล์สำหรับ Status Badges ในรายการข่าว (ถ้าใช้) --- */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-published {
    background: #d4edda;
    color: #155724;
}

.status-draft {
    background: #fff3cd;
    color: #856404;
}

/* --- สไตล์สำหรับหน้า Contact Page (ย้ายมาจาก style.css เดิม) --- */
.contact-section {
    padding: 20px 15px;
}

.section-title { /* ใช้สำหรับหัวข้อหลักของแต่ละ Section ทั่วไป */
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-blue-text-contrast);
    /* เปลี่ยนเป็นสีม่วงเข้ม */
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-blue-light);
    /* ขอบสีม่วงอ่อน */
}

.contact-info, .contact-map, .contact-form {
    margin-bottom: 40px;
}

.contact-info h3, .contact-map h3, .contact-form h3 {
    font-size: 1.8em;
    color: var(--primary-blue-text-contrast);
    /* เปลี่ยนเป็นสีม่วงเข้ม */
    margin-bottom: 15px;
    border-left: 5px solid var(--accent-yellow);
    padding-left: 10px;
}

.contact-info p {
    margin-bottom: 8px;
    font-size: 1.1em;
}

.contact-info a {
    color: var(--primary-blue-text-contrast);
    /* เปลี่ยนเป็นสีม่วงเข้ม */
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    color: var(--accent-yellow);
    text-decoration: underline;
}

.contact-map iframe {
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(177, 156, 217, 0.2);
    /* เงาสีม่วงอ่อน */
}

/* Form Styles ทั่วไป (สำหรับหน้าติดต่อ) */
.form-group {
    margin-bottom: 15px;
}

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

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #d4c5e8;
    /* กรอบสีม่วงอ่อน */
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Sarabun', sans-serif;
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue-light);
    /* สีม่วงอ่อนเมื่อ focus */
}

.form-group textarea {
    resize: vertical;
}

.btn-submit { /* ปุ่มทั่วไป */
    background-color: var(--primary-blue-text-contrast); /* สีม่วงเข้ม */
    color: var(--text-light);
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background-color: #553c9a; /* ม่วงเข้มขึ้นเมื่อ hover */
    transform: translateY(-2px);
}

/* --- สไตล์สำหรับ Home Page (ย้ายมาจาก style.css เดิม) --- */
.page-content {
    padding: 20px 15px;
}

.welcome-content {
    text-align: center;
    margin-bottom: 30px;
}

.welcome-content p {
    font-size: 1.2em;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.home-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.home-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* พื้นหลังสีฟ้าอ่อนพิเศษ */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(177, 156, 217, 0.15); /* เงาสีม่วงอ่อน */
    border: 1px solid #d4c5e8;
    /* กรอบสีม่วงอ่อน */
    text-align: center;
    transition: all 0.3s ease;
}

.home-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(177, 156, 217, 0.25);
}

.home-section h3 {
    font-size: 1.4em;
    color: var(--primary-blue-text-contrast);
    /* สีม่วงเข้ม */
    margin-bottom: 10px;
    font-weight: 600;
}

.home-section p {
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.6;
}

.btn-more {
    display: inline-block;
    background-color: var(--primary-blue-text-contrast); /* สีม่วงเข้ม */
    color: var(--text-light);
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-more:hover {
    background-color: #553c9a;
    /* ม่วงเข้มขึ้นเมื่อ hover */
    transform: translateY(-2px);
}

/* --- Responsive Adjustments สำหรับส่วนที่ย้ายมา --- */
@media (max-width: 768px) {
    .article-title, .section-title {
        font-size: 1.8em;
    }

    .article-content, .contact-section {
        padding: 0 10px;
    }

    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.5em;
    }

    .contact-info p {
        font-size: 1em;
        text-align: left;
    }
    
    .home-sections {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .home-section {
        padding: 20px;
    }
    
    .welcome-content p {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .article-title, .section-title {
        font-size: 1.5em;
    }
    .article-meta {
        font-size: 0.8em;
    }
    .article-content, .contact-section {
        padding: 0 5px;
    }
    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.3em;
    }
    .contact-info p {
        font-size: 0.95em;
        text-align: left;
    }
}

/* --- 1. Reset พื้นฐานและการกำหนดค่าเริ่มต้น --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Sarabun', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: var(--bg-dark); /* สีฟ้าอ่อนมากสำหรับพื้นหลัง body */
}

/* --- 2. การกำหนดสี (ปรับปรุงค่าสีตามที่คุณต้องการ) --- */
:root {
    --primary-blue-darker: #0357AF; /* สีฟ้าสำหรับ Navbar เดิม */
    --primary-blue-header-footer: #0180CC; /* สีฟ้าสำหรับ Header/Footer เดิม */
    --primary-blue-text-contrast: #6b46c1; /* สีม่วงเข้มสำหรับข้อความที่ต้องการ Contrast สูง */
    --primary-blue-light: #9b7bc7;  /* สีม่วงอ่อนสำหรับขอบและเส้น */

    --accent-yellow: #ffc107;        /* เหลืองเน้น */
    --accent-yellow-dropdown: #FFF444; /* สีเหลืองใหม่สำหรับ Dropdown */
    --accent-green: #28a745;         /* สีเขียวสำหรับปุ่มปรับปรุงข้อมูล */
    --accent-red: #dc3545;           /* สีแดงสำหรับปุ่มออกจากระบบ */
    
    --text-dark: #333; /* สีตัวอักษรเข้ม */
    --text-light: #f8f8f8; /* สีตัวอักษรขาว/อ่อน */
    --bg-light: #ffffff; /* พื้นหลัง container */
    --bg-dark: #E8DDE8; /* พื้นหลัง body - เปลี่ยนเป็นสีม่วงอ่อน */
}

/* --- 3. ฟอนต์ (Google Fonts: Sarabun) --- */
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* --- 4. Layout และ Container --- */
.container {
    max-width: 1400px;  /* เปลี่ยนจาก 1140px */
    width: 95%;         /* เพิ่มบรรทัดนี้ */
    margin: 20px auto;
    padding: 0 20px;
    background-color: var(--bg-light);
    box-shadow: 0 4px 15px rgba(177, 156, 217, 0.2);
    border-radius: 8px;
    border: 2px solid #d4c5e8;
}

/* --- 5. Site Header Styles --- */
.site-header {
    background-color: var(--primary-blue-header-footer);
    color: var(--text-light);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    margin-bottom: 20px;
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header .logo img {
    height: 60px;
    display: block;
}

.site-header .logo .school-name {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
}

/* --- Login Section --- */
.site-header .login-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ปุ่มเข้าสู่ระบบ */
.site-header .login-section .btn-login {
    background-color: var(--accent-yellow);
    color: var(--primary-blue-text-contrast);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.site-header .login-section .btn-login:hover {
    background-color: #ffd700;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 193, 7, 0.3);
}

/* ปุ่มปรับปรุงข้อมูล (สำหรับ Admin Header) */
.site-header .login-section .btn-admin {
    background-color: var(--accent-green);
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.site-header .login-section .btn-admin:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

/* ปุ่มออกจากระบบ (สำหรับ Admin Header) */
.site-header .login-section .btn-logout {
    background-color: var(--accent-red);
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.site-header .login-section .btn-logout:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
}

/* --- Main Navigation (Navbar) Styles --- */
.main-nav {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    padding: 10px 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav ul li {
    margin: 0 15px;
    position: relative;
}

.main-nav ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    padding: 5px 10px;
    display: block;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: var(--accent-yellow);
}

/* --- Dropdown Menu Styles --- */
.main-nav .submenu {
    list-style: none;
    display: none;
    position: absolute;
    background-color: var(--accent-yellow-dropdown);
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}

.main-nav .submenu li {
    margin: 0;
}

.main-nav .submenu li a {
    color: var(--primary-blue-darker);
    padding: 8px 15px;
    text-align: left;
    white-space: nowrap;
}

.main-nav .submenu li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--primary-blue-text-contrast);
}

.main-nav .has-submenu:hover > .submenu {
    display: block;
}

/* --- Site Footer Styles --- */
.site-footer {
    background-color: #4fc3f7;
    color: #01579b;
    padding: 12px 20px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-top: 20px;
    font-size: 0.75em;
    line-height: 1.3;
}

.site-footer .footer-info p {
    margin-bottom: 2px;
    color: #01579b;
}

.site-footer .social-media img {
    width: 24px;
    height: 24px;
    margin-top: 6px;
}

.site-footer .footer-info a {
    color: #0277bd;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.site-footer .footer-info a:hover {
    color: #01579b;
    text-decoration: underline;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
	.container {
		margin: 10px auto;
		padding: 0 15px;
		width: 95%;        /* เพิ่ม */
		max-width: none;   /* เพิ่ม */
	}

    .site-header {
        flex-direction: column;
        padding: 28px 20px;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -10px;
        margin-bottom: 15px;
    }

    .site-header .logo {
        margin-bottom: 15px;
    }

    /* Login Section Responsive */
    .site-header .login-section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        width: 100%;
    }

    .site-header .login-section a {
        font-size: 0.9em;
        padding: 8px 15px;
        flex: 1;
        text-align: center;
        min-width: auto;
    }

    /* สไตล์สำหรับ Navbar เมื่อจอเล็ก */
    .main-nav {
        padding: 10px 15px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 15px;
    }

    .main-nav ul {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
        justify-content: center;
    }

    .main-nav ul li {
        margin: 5px 0;
    }

    /* ปรับ Dropdown สำหรับ Mobile/Tablet */
    .main-nav .submenu {
        position: static;
        display: block;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: unset;
        left: unset;
        transform: unset;
        text-align: center;
    }

    .main-nav .submenu li a {
        padding: 5px 0;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
    }

    .main-nav .submenu li a:hover {
        background-color: transparent;
        color: var(--accent-yellow);
    }

    .main-nav .has-submenu > a {
        padding-bottom: 0;
    }

    /* สไตล์สำหรับ Footer เมื่อจอเล็ก */
    .site-footer {
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -10px;
        margin-top: 15px;
        padding: 10px 15px;
        font-size: 0.7em;
    }

    .article-title, .section-title {
        font-size: 1.8em;
    }

    .article-content, .contact-section {
        padding: 0 10px;
    }

    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.5em;
    }

    .contact-info p {
        font-size: 1em;
        text-align: left;
    }

    /* Home Page Responsive */
    .home-sections {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .home-section {
        padding: 20px;
    }
    
    .welcome-content p {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .site-header .login-section {
        flex-direction: column;
        gap: 8px;
    }

    .site-header .login-section a {
        font-size: 0.85em;
        padding: 8px 12px;
        width: 100%;
    }

    .article-title, .section-title {
        font-size: 1.5em;
    }

    .article-meta {
        font-size: 0.8em;
    }

    .article-content, .contact-section {
        padding: 0 5px;
    }

    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.3em;
    }

    .contact-info p {
        font-size: 0.95em;
        text-align: left;
    }
}

/* ========================================================================== */
/* ======== ส่วนปรับปรุง CSS สำหรับ home.php (โดยเฉพาะ) ======== */
/* ========================================================================== */

/* --- ข้อความ Error ที่แสดงบน Frontend --- */
.error-message-frontend {
    color: #dc3545; /* สีแดง */
    background-color: #f8d7da; /* พื้นหลังสีชมพูอ่อน */
    border: 1px solid #f5c6cb; /* ขอบสีแดงอ่อน */
    padding: 15px;
    margin: 20px auto; /* จัดกึ่งกลาง */
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    max-width: 90%; /* จำกัดความกว้าง */
}

/* --- การปรับปรุงสำหรับผู้บริหารสถานศึกษาใน Sidebar (รูปใหญ่ 1 คน) --- */
/* ใช้ class 'executive-single-image' ที่เพิ่มใน home.php */

.sidebar-section.executive-single-image .executives-list {
    padding: 0;
}

.sidebar-section.executive-single-image .executive-item {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 0;
}

.sidebar-section.executive-single-image .executive-link {
    display: block;
    width: 100%;
    text-align: center;
}

.sidebar-section.executive-single-image .executive-photo {
    width: 100%; /* ให้กว้างเต็ม parent */
    position: relative; /* สำคัญสำหรับ padding-bottom trick */
    padding-bottom: 133.33%; /* กำหนดสัดส่วน 3:4 (ความสูง 4 ส่วน, ความกว้าง 3 ส่วน) */
                            /* คำนวณจาก (height / width) * 100% = (4 / 3) * 100% */
    height: 0; /* ต้องตั้ง height เป็น 0 เมื่อใช้ padding-bottom trick */
    border-radius: 0;
    margin: 0;
    border: none;
    overflow: hidden; /* ซ่อนส่วนเกินของรูป */
}

.sidebar-section.executive-single-image .executive-photo img {
    position: absolute; /* ทำให้รูปภาพอยู่ภายใน executive-photo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* ทำให้รูปภาพเต็มพื้นที่ Box ที่มีสัดส่วนคงที่ */
    object-fit: cover; /* รูปภาพจะขยายเต็มพื้นที่และตัดส่วนเกินออก */
    display: block;
}

.sidebar-section.executive-single-image .no-photo {
    width: 100%;
    height: 100%; /* ทำให้ placeholder เต็มพื้นที่ Box */
    position: absolute; /* วาง placeholder เหมือนรูปภาพ */
    top: 0;
    left: 0;
    font-size: 5em;
    display: flex; /* กำหนดให้เป็น flex เพื่อจัดกึ่งกลาง */
    align-items: center;
    justify-content: center;
    background: #f8f9fa; /* สีพื้นหลังสำหรับ placeholder */
    color: #ccc;
}

.sidebar-section.executive-single-image .executive-info {
    padding: 15px 10px;
    text-align: center;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

.sidebar-section.executive-single-image .executive-name {
    font-size: 1.2em;
}

.sidebar-section.executive-single-image .executive-position {
    font-size: 1em;
    color: var(--primary-blue-text-contrast);
    font-weight: 600;
}

/* responsive adjustments for smaller screens, if different aspect ratio is desired */
@media (max-width: 1024px) {
    .sidebar-section.executive-single-image .executive-photo {
        padding-bottom: 150%; /* อาจปรับเป็นสัดส่วน 2:3 (ความสูง 3 ส่วน, ความกว้าง 2 ส่วน) */
                               /* (3 / 2) * 100% = 150% */
    }
}
@media (max-width: 768px) {
    .sidebar-section.executive-single-image .executive-photo {
        padding-bottom: 133.33%; /* กลับมาใช้ 3:4 หรือปรับตามความเหมาะสม */
    }
}

/* responsive adjustments for smaller screens, ensure the image still fits */
@media (max-width: 1024px) { /* Adjust based on your layout-grid breakpoint for right-column */
    .sidebar-section.executive-single-image .executive-photo {
        max-height: 250px; /* Limit height on smaller screens if needed */
        object-fit: cover; /* ใช้ cover เพื่อให้เต็มพื้นที่และอาจมีบางส่วนถูก crop */
    }
}
@media (max-width: 768px) {
    .sidebar-section.executive-single-image .executive-photo {
        max-height: 180px;
    }
}

/* --- การปรับปรุงสำหรับ Banner Slider --- */
.banner-slider {
    background: #f8f9fa;
    padding: 15px 0;
    border-top: 3px solid var(--primary-blue-text-contrast);
    border-bottom: 1px solid #e9ecef;
}

.slider-wrapper {
    position: relative;
    max-height: 200px; /* กำหนดความสูงสูงสุด */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slider-content {
    position: relative; /* สำคัญสำหรับ absolute positioning ของ banner-item */
    width: 100%;
    height: 200px; /* ควรระบุความสูงให้ชัดเจน (เท่ากับ max-height ของ slider-wrapper) */
}

.banner-item {
    position: absolute; /* ทำให้ภาพซ้อนทับกัน */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0; /* ซ่อนไว้ก่อน */
    transition: opacity 0.5s ease-in-out; /* เพิ่ม transition สำหรับการเปลี่ยนภาพ */
    display: flex; /* เพื่อจัด placeholder content */
    align-items: center; /* จัดกึ่งกลาง placeholder content */
    justify-content: center; /* จัดกึ่งกลาง placeholder content */
    flex-direction: column; /* เพื่อให้ h2, p อยู่ในแนวตั้ง */
}

.banner-item.active {
    opacity: 1; /* แสดงภาพที่ active */
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-placeholder {
    width: 100%;
    height: 100%; /* ให้เต็มความสูงของ .banner-item */
    background: linear-gradient(135deg, var(--primary-blue-text-contrast) 0%, var(--primary-blue-light) 100%);
    display: flex; /* กำหนดให้เป็น flex เพื่อควบคุมการแสดงผลด้วย JS */
    flex-direction: column; /* จัดเนื้อหาให้อยู่ในแนวตั้ง */
    align-items: center; /* จัดกึ่งกลางตามแนวนอน */
    justify-content: center; /* จัดกึ่งกลางตามแนวตั้ง */
}

.placeholder-content h2 {
    font-size: 1.8em;
    margin-bottom: 8px;
}

.placeholder-content p {
    font-size: 1.1em;
    opacity: 0.9;
}

.slider-nav {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10; /* ให้ปุ่มอยู่ด้านบนรูปภาพ */
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: white;
    transform: scale(1.2);
}

/* --- การปรับปรุงสำหรับ Main Layout และ News Grids --- */
/* ส่วนใหญ่ใช้ CSS เดิมที่มีอยู่แล้ว แต่เพิ่มความชัดเจน */
.main-layout {
    padding: 30px 0;
    background: #f8f9fa;
}

.layout-grid {
    display: grid;
    grid-template-columns: 1fr 175px; /* ลดจาก 350px เป็น 175px (ครึ่งหนึ่ง) */
    gap: 30px;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-section {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
    background: var(--primary-blue-text-contrast);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
}

.view-all-link {
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.view-all-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px; /* เพื่อให้เห็นเส้นแบ่ง Grid ชัดเจนขึ้น */
    background: #e9ecef; /* สีพื้นหลังสำหรับเส้นแบ่ง Grid */
}

.news-item {
    background: white;
    transition: all 0.3s ease;
}

.news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-item.placeholder {
    opacity: 0.6;
}

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

.news-image {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* เพิ่ม transition เมื่อ hover ที่ news-item */
}

.news-date {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
}

.news-content {
    padding: 12px;
    height: 80px; /* จำกัดความสูงเพื่อควบคุมขนาดการ์ดให้สม่ำเสมอ */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.news-title {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
    color: #333;
    display: -webkit-box; /* สำหรับ truncate text */
    -webkit-line-clamp: 2; /* จำกัดจำนวนบรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-subtitle {
    font-size: 0.75em;
    color: #666;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box; /* สำหรับ truncate text */
    -webkit-line-clamp: 2; /* จำกัดจำนวนบรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidebar Content */
.right-column .sidebar-section {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.executives-list {
    padding: 20px;
}

.executive-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

.executive-item:last-child {
    border-bottom: none;
}

.executive-item:hover {
    background: #f8f9fa;
}

.executive-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.executive-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 2px solid #e9ecef;
}

.executive-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #ccc;
    font-size: 1.5em;
}

.executive-info {
    flex: 1;
}

.executive-name {
    font-size: 1em;
    font-weight: 600;
    color: var(--primary-blue-text-contrast);
    margin-bottom: 3px;
}

.executive-position {
    font-size: 0.85em;
    color: #666;
    margin: 0;
}

/* Calendar Widget */
.calendar-widget {
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-nav {
    background: var(--primary-blue-text-contrast);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.calendar-nav:hover {
    background: var(--primary-blue-darker);
}

#currentMonth {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--primary-blue-text-contrast);
    margin: 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 5px;
}

.day-header {
    background: var(--primary-blue-light);
    color: white;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.8em;
    font-weight: 600;
}

.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e9ecef;
}

.calendar-date {
    background: white;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calendar-date:hover {
    background: var(--primary-blue-light);
    color: white;
}

.calendar-date.today {
    background: var(--primary-blue-text-contrast);
    color: white;
    font-weight: 600;
}

.calendar-date.other-month {
    color: #ccc;
}

/* ปรับขนาดเนื้อหาในคอลัมน์ขวาให้เหมาะสมกับความกว้างที่เล็กลง */
.right-column .sidebar-section .section-title {
    font-size: 1em; /* ลดขนาดจาก 1.1em */
}

.executives-list {
    padding: 15px; /* ลดจาก 20px */
}

.calendar-widget {
    padding: 15px; /* ลดจาก 20px */
}

.online-learning-mockup {
    padding: 15px; /* ลดจาก 20px */
}

.mockup-info h4 {
    font-size: 0.9em; /* ลดขนาด */
}

.mockup-info p {
    font-size: 0.8em; /* ลดขนาด */
}

/* ปรับขนาดปุ่มปฏิทิน */
.calendar-nav {
    width: 25px; /* ลดจาก 30px */
    height: 25px;
    font-size: 1em; /* ลดจาก 1.2em */
}

#currentMonth {
    font-size: 1em; /* ลดจาก 1.1em */
}

/* ปรับขนาดตัวอักษรในปฏิทิน */
.day-header {
    padding: 6px 2px; /* ลดจาก 8px 4px */
    font-size: 0.7em; /* ลดจาก 0.8em */
}

.calendar-date {
    padding: 6px 2px; /* ลดจาก 8px 4px */
    font-size: 0.7em; /* ลดจาก 0.8em */
}

.mockup-image {
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}

.mockup-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.mockup-placeholder {
    height: 150px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}

.mockup-icon {
    font-size: 3em;
    margin-bottom: 10px;
}

.mockup-info h4 {
    color: var(--primary-blue-text-contrast);
    margin-bottom: 8px;
    font-size: 1em;
}

.mockup-info p {
    color: #666;
    font-size: 0.85em;
    line-height: 1.4;
    margin-bottom: 15px;
}

.mockup-button {
    background: var(--primary-blue-text-contrast);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85em;
    transition: background 0.3s ease;
    display: inline-block;
}

.mockup-button:hover {
    background: var(--primary-blue-darker);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        margin: 10px auto;
        padding: 0 15px;
    }

    .site-header {
        flex-direction: column;
        padding: 28px 20px;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -10px;
        margin-bottom: 15px;
    }

    .site-header .logo {
        margin-bottom: 15px;
    }

    /* Login Section Responsive */
    .site-header .login-section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        width: 100%;
    }

    .site-header .login-section a {
        font-size: 0.9em;
        padding: 8px 15px;
        flex: 1;
        text-align: center;
        min-width: auto;
    }

    /* สไตล์สำหรับ Navbar เมื่อจอเล็ก */
    .main-nav {
        padding: 10px 15px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 15px;
    }

    .main-nav ul {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
        justify-content: center;
    }

    .main-nav ul li {
        margin: 5px 0;
    }

    /* ปรับ Dropdown สำหรับ Mobile/Tablet */
    .main-nav .submenu {
        position: static;
        display: block;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: unset;
        left: unset;
        transform: unset;
        text-align: center;
    }

    .main-nav .submenu li a {
        padding: 5px 0;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
    }

    .main-nav .submenu li a:hover {
        background-color: transparent;
        color: var(--accent-yellow);
    }

    .main-nav .has-submenu > a {
        padding-bottom: 0;
    }

    /* สไตล์สำหรับ Footer เมื่อจอเล็ก */
    .site-footer {
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -10px;
        margin-top: 15px;
        padding: 10px 15px;
        font-size: 0.7em;
    }

    .article-title, .section-title {
        font-size: 1.8em;
    }

    .article-content, .contact-section {
        padding: 0 10px;
    }

    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.5em;
    }

    .contact-info p {
        font-size: 1em;
        text-align: left;
    }

    /* Home Page Responsive */
    .home-sections {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .home-section {
        padding: 20px;
    }
    
    .welcome-content p {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .site-header .login-section {
        flex-direction: column;
        gap: 8px;
    }

    .site-header .login-section a {
        font-size: 0.85em;
        padding: 8px 12px;
        width: 100%;
    }

    .article-title, .section-title {
        font-size: 1.5em;
    }

    .article-meta {
        font-size: 0.8em;
    }

    .article-content, .contact-section {
        padding: 0 5px;
    }

    .contact-info h3, .contact-map h3, .contact-form h3 {
        font-size: 1.3em;
    }

    .contact-info p {
        font-size: 0.95em;
        text-align: left;
    }
}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // --- JavaScript สำหรับ Banner Slider ---
    let currentSlide = 0;
    const bannerItems = document.querySelectorAll('.banner-item');
    const navDots = document.querySelectorAll('.nav-dot');
    const totalSlides = bannerItems.length;

    function showSlide(index) {
        bannerItems.forEach((item, i) => {
            item.classList.remove('active');
            if (i === index) {
                item.classList.add('active');
            }
        });
        navDots.forEach((dot, i) => {
            dot.classList.remove('active');
            if (i === index) {
                dot.classList.add('active');
            }
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    // Event listeners สำหรับปุ่ม Nav Dot
    navDots.forEach(dot => {
        dot.addEventListener('click', function() {
            currentSlide = parseInt(this.dataset.slide);
            showSlide(currentSlide);
        });
    });
    
    // เริ่ม Autoplay Slider
    if (totalSlides > 1) { // Autoplay เฉพาะเมื่อมีมากกว่า 1 สไลด์
        setInterval(nextSlide, 5000); // เปลี่ยนสไลด์ทุก 5 วินาที
    }
    showSlide(currentSlide); // แสดงสไลด์เริ่มต้น

    // --- JavaScript สำหรับ Calendar Widget ---
    const monthNames = [
        'มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน',
        'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
    ];
    let currentDate = new Date();
    let currentMonth = currentDate.getMonth();
    let currentYear = currentDate.getFullYear();
    
    function generateCalendar(month, year) {
        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        const today = new Date();
        const daysInPrevMonth = new Date(year, month, 0).getDate();
        
        document.getElementById('currentMonth').textContent = `${monthNames[month]} ${year + 543}`;
        
        const calendarDates = document.getElementById('calendarDates');
        calendarDates.innerHTML = '';
        
        // เพิ่มวันจากเดือนก่อนหน้า
        for (let i = firstDay; i > 0; i--) {
            const dateCell = document.createElement('div');
            dateCell.className = 'calendar-date other-month';
            dateCell.textContent = daysInPrevMonth - i + 1;
            calendarDates.appendChild(dateCell);
        }
        
        // เพิ่มวันในเดือนปัจจุบัน
        for (let day = 1; day <= daysInMonth; day++) {
            const dateCell = document.createElement('div');
            dateCell.className = 'calendar-date';
            dateCell.textContent = day;
            
            if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {
                dateCell.classList.add('today');
            }
            
            dateCell.addEventListener('click', function() {
                document.querySelectorAll('.calendar-date.selected').forEach(cell => {
                    cell.classList.remove('selected');
                });
                this.classList.add('selected');
                console.log(`Selected date: ${day}/${month + 1}/${year}`);
            });
            
            calendarDates.appendChild(dateCell);
        }
        
        // เพิ่มวันจากเดือนถัดไปเพื่อเติมเต็ม Grid
        const totalCells = calendarDates.children.length;
        const remainingCells = 42 - totalCells; // 6 สัปดาห์ * 7 วัน = 42 ช่อง
        
        for (let day = 1; day <= remainingCells; day++) {
            const dateCell = document.createElement('div');
            dateCell.className = 'calendar-date other-month';
            dateCell.textContent = day;
            calendarDates.appendChild(dateCell);
        }
    }
    
    document.getElementById('prevMonth').addEventListener('click', function() {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        generateCalendar(currentMonth, currentYear);
    });
    
    document.getElementById('nextMonth').addEventListener('click', function() {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        generateCalendar(currentMonth, currentYear);
    });
    
    generateCalendar(currentMonth, currentYear); // โหลดปฏิทินครั้งแรก
    
    // --- JavaScript สำหรับ Animation และ Image Loading/Error Handling ---
    const observerOptions = {
        threshold: 0.1, // เมื่อ element ปรากฏ 10%
        rootMargin: '0px 0px -50px 0px' // เริ่ม trigger ก่อนเข้า view 50px
    };
    
    const observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 50); // Stagger animation
                observer.unobserve(entry.target); // หยุด observe เมื่อ animate แล้ว
            }
        });
    }, observerOptions);
    
    // ตั้งค่าเริ่มต้นสำหรับ Animation
    document.querySelectorAll('.news-item, .executive-item').forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(item); // เริ่ม observe
    });
    
    // Hover Effects (เพิ่มให้ชัดเจนใน JS)
    document.querySelectorAll('.news-item').forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px)';
            this.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.15)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none'; // ใช้ 'none' เพื่อกลับสู่ค่าเริ่มต้นของ box-shadow
        });
    });
    
    // Image Loading/Error Handling (เพิ่มให้ชัดเจนใน JS)
    document.querySelectorAll('.news-image img, .executive-photo img, .banner-item img, .mockup-image img').forEach(img => {
        img.addEventListener('load', function() {
            this.style.opacity = '1'; // ทำให้ภาพที่โหลดสำเร็จค่อยๆ แสดง
        });
        
        img.addEventListener('error', function() {
            this.style.display = 'none'; // ซ่อนแท็ก img ที่โหลดไม่สำเร็จ
            const fallback = this.nextElementSibling || this.parentElement.querySelector('.no-image, .no-photo, .banner-placeholder, .mockup-placeholder');
            if (fallback) fallback.style.display = 'flex'; // แสดง fallback element
        });
        
        // ตั้งค่าเริ่มต้นสำหรับภาพ
        img.style.opacity = '0';
        img.style.transition = 'opacity 0.3s ease';
    });
});
</script>