/* --- frontend_style.css (อัปเดต: เพิ่ม Navbar มือถือ) --- */

:root {
    --color-primary: #D14201; 
    --color-primary-dark: #B53700; 
    --color-secondary: #007bff; 
    --color-text: #333333;
    --color-text-light: #555555;
    --color-bg: #f8f9fa; 
    --color-white: #ffffff;
    --color-border: #dee2e6; 
    --color-gray: #6c757d;
	--color-top: #2255c5;
	--color-vdoborder: #f5f5f5;  	
}

body {
    font-family: 'Noto Sans Thai', sans-serif; 
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: 400; 
}
/* (เพิ่ม) รีเซ็ต Margin (แก้ปัญหาขอบขาว) */
h1, h2, h3 {
    margin-top: 0;
}

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

/* --- Header --- */
.header {
    background-color: var(--color-top); 
    color: var(--color-white);
    padding: 20px 0 0px 0;
    text-align: center;
    /* (แก้ไข) แก้ปัญหาขอบขาว (ถ้ายังอยู่) */
    display: flow-root;
	margin-top:-24px;
}
.header-text { 
    max-width: 800px;
    margin: 0 auto;
}
.header-text h1 {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 10px; 
    margin-top: 0; /* (แก้ไข) แก้ปัญหาขอบขาว */
}
.header-text h1 .header-icon {
    font-size: 2.5em; 
    color: var(--color-white); 
    opacity: 0.9;
}
.header-text h1 span {
    font-size: 1.5em; 
    font-weight: 700;
    color: var(--color-white);
}
.header-text .search-help-text {
    font-size: 1.1em; 
    color: var(--color-white);
    opacity: 0.9;
    margin-top: 0;
    font-weight: 300;
}
@media (max-width: 768px) {
    .header-text h1 { flex-direction: column; gap: 5px; }
    .header-text h1 .header-icon { font-size: 2.2em; }
    .header-text h1 span { font-size: 1.3em; }
    .header-text .search-help-text { font-size: 1em; }
}


/* --- (แก้ไข) Navbar (เพิ่มสไตล์มือถือ) --- */
.main-navbar {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 0; /* (แก้ไข) ลบ padding เดิม */
    position: relative; /* (เพิ่ม) สำหรับยึดเมนูมือถือ */
}
/* (แก้ไข) คอนเทนเนอร์เมนู Desktop */
.main-navbar .container.desktop-nav-container {
    display: flex;
    justify-content: center; /* (แก้ไข) จัดกึ่งกลาง */
    align-items: center;
    gap: 10px; 
    overflow-x: auto; /* (ยังคงไว้ เผื่อเมนูยาว) */
    scrollbar-width: none; /* (Firefox) */
    padding: 5px 15px; /* (แก้ไข) เพิ่ม padding ซ้าย/ขวา เพื่อความสวยงาม */
}
.main-navbar .container.desktop-nav-container::-webkit-scrollbar {
    display: none; /* (Chrome, Safari) */
}
.main-navbar a {
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-text-light); /* สีเทาอ่อน */
    font-weight: 500;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    font-size: 0.95em;
    white-space: nowrap; /* (เพิ่ม) ป้องกันการตัดคำ */
    
    /* (ข้อ 2) เพิ่มพื้นหลังสีเทาอ่อน */
    background-color: #f0f0f0; 
}
.main-navbar a i {
    margin-right: 8px;
    color: var(--color-gray); 
    width: 1.1em;
}
.main-navbar a:hover {
    background-color: #fef5ef; /* สีส้มอ่อน (พื้นหลัง hover) */
    color: var(--color-primary); /* สีส้ม (ตัวอักษร hover) */
}
.main-navbar a:hover i {
    color: var(--color-primary); /* สีส้ม (ไอคอน hover) */
}
.main-navbar .container.desktop-nav-container a:first-child {
    margin-left: 10px;
}
.main-navbar .container.desktop-nav-container a:last-child {
    margin-right: 10px;
}

/* (เพิ่ม) 1. ปุ่ม Toggle (Hamburger) */
.navbar-toggle-button {
    display: none; /* ซ่อนบน Desktop */
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 1.5em;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 15px; /* (แสดงในกรอบ .main-navbar) */
}

/* (เพิ่ม) 2. เมนู Mobile Container (ซ่อน) */
.mobile-navbar-menu {
    display: none; /* ซ่อนไว้ก่อน */
    position: absolute;
    top: 100%; /* (ต่อจาก .main-navbar) */
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}
/* (เพิ่ม) 3. คลาส .active (แสดง) */
.mobile-navbar-menu.active {
    display: block;
}
/* (เพิ่ม) 4. ลิงก์ในเมนู Mobile (แนวตั้ง) */
.mobile-navbar-menu a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0; /* (เส้นคั่นบางๆ) */
}
.mobile-navbar-menu a:last-child {
    border-bottom: none;
}
.mobile-navbar-menu a:hover {
    background-color: #fef5ef;
    color: var(--color-primary);
}
.mobile-navbar-menu a i {
    margin-right: 10px;
    color: var(--color-gray);
    width: 1.1em;
}
.mobile-navbar-menu a:hover i {
    color: var(--color-primary);
}

/* (เพิ่ม) 5. Media Query (สลับการแสดงผล) */
@media (max-width: 992px) {
    .main-navbar .container.desktop-nav-container { /* (ซ่อน Desktop Nav) */
        display: none; 
    }
    .navbar-toggle-button { /* (แสดงปุ่ม Hamburger) */
        display: block;
    }
}


/* --- Search Section --- */
.search-section {
    background-color: var(--color-white);
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
	margin-bottom:20px
}
.search-section form {
    display: flex;
    max-width: 700px;
    margin: 0 auto;
}
.search-box {
    flex-grow: 1; 
    padding: 15px 20px;
    font-size: 1.1em;
    border: 1px solid var(--color-primary); 
    border-radius: 5px 0 0 5px;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 400;
    box-shadow: 0 0 5px rgba(209, 66, 1, 0.3);
    outline: none;
}
.search-box:focus { outline: none; }
.search-button {
    flex-shrink: 0; padding: 15px; width: 55px; 
    text-align: center; font-size: 1.1em; border: none;
    background-color: var(--color-primary); color: white;
    cursor: pointer; border-radius: 0; 
    transition: background-color 0.2s; font-weight: 600;
}
.search-button:hover { background-color: var(--color-primary-dark); }
.search-button i { margin-right: 0; }
.reset-button {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 15px; width: 55px; 
    text-align: center; font-size: 1.1em;
    background-color: var(--color-border); 
    color: var(--color-gray); 
    text-decoration: none;
    border-radius: 0 5px 5px 0; 
    transition: all 0.2s;
    border: none; /* (เพิ่ม) */
    cursor: pointer; /* (เพิ่ม) */
}
.reset-button:hover {
    background-color: var(--color-gray); 
    color: var(--color-white); 
}

/* --- Content Layout (Main + Sidebar) --- */
.content-section {
    padding: 0px 0;
}
.top-content-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px;
    margin-bottom: 30px;
	margin-top: 20px;
}
.main-content {
    flex-basis: 0;
    flex-grow: 9;
    min-width: 70%; 
}
.sidebar {
    flex-basis: 0;
    flex-grow: 3;
    min-width: 25%; 
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    height: fit-content; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* หัวข้อสำหรับ Main Content (บทความล่าสุด) */
.main-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}
.main-content-header h2 {
    font-size: 2em;
    font-weight: 600;
    color: var(--color-top); 
    margin: 0;
    display: flex; 
    align-items: center; 
}
.view-all-button {
    display: block;
    width: fit-content;
    padding: 8px 20px;
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 0.9em;
}
.view-all-button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Section บทความล่าสุด (List) */
.latest-articles-list {
    list-style: none; padding: 0; margin: 0;
}
.latest-articles-list li {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
}
.latest-articles-list li:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}
.latest-articles-list li a {
    display: flex; align-items: center;
    padding: 15px 20px; text-decoration: none;
    color: var(--color-text);
}
.latest-articles-list .icon {
    font-size: 1em; color: var(--color-primary);
    margin-right: 10px;
}
.latest-articles-list .title {
    font-size: 1em; font-weight: 400;
    flex-grow: 1;
}
.latest-articles-list .meta {
    font-size: 0.7em; color: var(--color-text-light);
    font-weight: 300; flex-shrink: 0;
}
.latest-articles-list .meta i { margin-right: 4px; }


/* --- Category Grid --- */
.category-section {
    /* (ส่วนนี้แยกออกมา) */
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}
.category-card {
    display: block; background-color: var(--color-white);
    border: 1px solid var(--color-border); padding: 25px 20px;
    border-radius: 8px; text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease-in-out;
}
.category-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: var(--color-primary);
}
.category-card .card-header {
    display: flex; align-items: center; 
    margin-bottom: 15px; 
}
.category-card .icon { 
    font-size: 2.5em; color: var(--color-primary);
    margin-right: 15px; flex-shrink: 0; 
}
.category-card h3 {
    margin: 0; font-weight: 600;
    color: var(--color-primary); line-height: 1.3; 
}
.category-card p {
    font-size: 0.9em; color: var(--color-text-light);
    margin: 0 0 15px 0; font-weight: 400;
}
.category-card span {
    font-size: 0.9em; font-weight: 500;
    color: var(--color-secondary);
}

/* --- Popular List (Sidebar) --- */
.sidebar h3 {
    margin: 0; padding: 20px;
    background-color: var(--color-primary); 
    color: var(--color-white);
    font-weight: 600; font-size: 1.3em;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}
.popular-list {
    list-style: none; padding: 0 10px 10px 15px; 
    margin: 0;
	
}
.popular-list li {
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.popular-list li:last-child { border-bottom: none; }
.popular-list a {
    text-decoration: none; color: var(--color-secondary);
    font-weight: 400; line-height: 1.4;
}
.popular-list a:hover { text-decoration: underline; }
.popular-list .popular-meta { 
    display: block; font-size: 0.9em;
    color: var(--color-text-light); margin-top: 5px;
    font-weight: 400;
}
.popular-list .popular-meta i { margin-right: 5px; }
.sidebar-footer {
    padding: 0 20px 20px 20px;
    text-align: center;
}

/* --- Footer --- */
.footer {
    text-align: center; padding: 30px 0;
    background-color: #343a40; color: #adb5bd;
    margin-top: 30px; font-weight: 300;
}
.footer p { margin: 5px 0; }
.footer a { color: #e9ecef; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --- CSS สำหรับหน้า Search.php --- */
.search-header {
    background-color: var(--color-white);
    padding: 30px 0;
    border-bottom: 1px solid var(--color-border);
}
.search-results-list { list-style: none; padding: 0; }
.result-item {
    background-color: var(--color-white); border: 1px solid var(--color-border);
    border-radius: 5px; padding: 15px;
    margin-bottom: 15px;
}
.result-item-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 20px; 
    margin-bottom: 10px; 
}
.result-title { margin: 0; flex-grow: 1; }
.result-title a {
    text-decoration: none; color: var(--color-primary);
    font-weight: 400;
	font-size:0.9em
}
.result-title a:hover { text-decoration: underline; }
.result-meta {
    font-size: 0.8em; color: var(--color-text-light); 
    font-weight: 300; display: flex;
    gap: 15px; flex-shrink: 0; 
    white-space: nowrap; padding-top: 5px; 
}
.result-meta span { margin-right: 0; }
.result-meta span i {
    margin-right: 6px; color: var(--color-gray); 
    width: 1.1em; 
}
.result-item p {
    margin: 0 0 0 0; color: var(--color-text-light);
    font-weight: 300; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.result-icon-prefix {
    margin-right: 6px;
    color: var(--color-gray); 
    font-size: 0.9em; 
}
.no-results {
    background-color: var(--color-white); border: 1px solid var(--color-border);
    padding: 30px; text-align: center;
    border-radius: 5px;
}
.filter-bar {
    background-color: var(--color-white); padding: 15px 20px;
    border: 1px solid var(--color-border); border-radius: 5px;
    margin-bottom: 20px; display: flex;
    justify-content: space-between; align-items: center;
    flex-wrap: wrap; 
}
.filter-bar form { display: inline-flex; gap: 10px; align-items: center; }
.filter-bar select {
    padding: 8px; border-radius: 4px;
    border: 1px solid #ccc; font-family: 'Noto Sans Thai', sans-serif;
}
mark { 
    background-color: #fcf061; border-radius: 3px;
    padding: 0 2px;
}

/* --- CSS สำหรับหน้า View.php --- */
.article-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}
.breadcrumbs {
    font-size: 0.9em; color: var(--color-text-light);
    margin-bottom: 10px; font-weight: 400; 
    display: flex; align-items: center;
    gap: 8px; 
}
.breadcrumbs a {
    text-decoration: none; color: var(--color-primary); 
    font-weight: 500; background-color: #fef5ef; 
    border: 1px solid #fde0ce; padding: 4px 12px; 
    border-radius: 20px; transition: all 0.2s;
}
.breadcrumbs a:hover { 
    text-decoration: none; background-color: var(--color-primary); 
    color: var(--color-white); border-color: var(--color-primary);
}
.article-header h1 {
    font-size: 2.5em; font-weight: 600;
    color: var(--color-text);
}
.article-content {
    background-color: var(--color-vdoborder); padding: 15px;
    border: 1px solid var(--color-border); border-radius: 5px;
    margin-top: 30px; font-size: 1.1em;
    line-height: 1.7; font-weight: 400;
    max-width: 1200px; margin-left: auto;
    margin-right: auto;
}
.article-content h1, .article-content h2, .article-content h3, 
.article-content h4, .article-content h5 {
    color: var(--color-primary); font-weight: 600;
}
.article-content img { max-width: 100%; height: auto; border-radius: 5px; }
.article-content a { color: var(--color-secondary); }

/* --- Embed Containers --- */
.article-content .embed-container { 
    position: relative; padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; margin: 20px -30px; 
    background-color: #000; 
}
.article-content .embed-container iframe { 
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: none; 
}
.article-content .note-video-clip-wrap,
.article-content .note-video-container {
    position: relative !important; padding-bottom: 56.25% !important; 
    height: 0 !important; overflow: hidden !important;
    margin-left: -30px !important; margin-right: -30px !important;
}
.article-content .note-video-clip-wrap iframe,
.article-content .note-video-container iframe {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* --- PDF และ Link --- */
.pdf-embed {
    width: 100%; max-width: 100%; 
    height: 800px; border: 1px solid #ccc;
    display: block; margin: 20px auto; 
}
.article-content .pdf-embed {
    margin-left: -30px; margin-right: -30px;
    width: calc(100% + 60px); 
}
.external-link-button {
    display: block; background-color: var(--color-white); 
    border: 1px solid var(--color-border); padding: 20px 25px; 
    border-radius: 8px; text-decoration: none;
    color: var(--color-primary); font-weight: 600; 
    margin: 20px 0; transition: all 0.2s ease-in-out; 
    word-break: break-all; 
}
.external-link-button:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    transform: translateY(-3px);
    border-color: var(--color-primary);
    background-color: #fef5ef; 
    color: var(--color-primary-dark); 
}
.external-link-button::after {
    content: " \f35d"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900; margin-left: 8px;
    opacity: 0.7;
}

/* --- Responsive Media Queries --- */
@media (max-width: 992px) {
    .top-content-grid {
        flex-direction: column;
    }
    .main-content, .sidebar {
        min-width: 100%;
    }
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .result-item-header {
        flex-direction: column; align-items: flex-start; 
        gap: 10px; 
    }
    .result-meta {
        flex-direction: row; flex-wrap: wrap; 
        white-space: normal; padding-top: 0; 
        gap: 10px;
    }
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* (เพิ่ม) สไตล์สำหรับไอคอนหัวข้อเล็ก */
.header-icon-small {
    margin-right: 12px;
    font-size: 0.9em; 
    color: var(--color-primary);
}
.sidebar h3 .header-icon-small {
    margin-right: 12px;
    font-size: 0.9em;
    color: var(--color-white); /* สีขาว (สำหรับหัวข้อสีส้ม) */
}
/* (เพิ่ม) สไตล์สำหรับปุ่ม Admin ใน Navbar */
.main-navbar .admin-nav-link {
    margin-left: auto; /* (สำคัญ!) ดันปุ่มนี้ไปชิดขวาสุด */
    background-color: #fef5ef; /* (สีพื้นหลังแสดอ่อน) */
    color: var(--color-primary);
}
.main-navbar .admin-nav-link i {
    color: var(--color-primary);
}
.main-navbar .admin-nav-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.main-navbar .admin-nav-link:hover i {
    color: var(--color-white);
}

/* (ปรับ) ลิงก์เว็บหลัก (ตัวสุดท้าย) ไม่ต้องมี margin-left */
.main-navbar .container.desktop-nav-container a:last-child {
    margin-left: 0;
}

/* (ปรับ) ในจอมือถือ ให้ปุ่ม Admin อยู่ปกติ */
.mobile-navbar-menu .admin-nav-link {
    margin-left: 0;
}
/* (เพิ่ม) สไตล์สำหรับหน้า Contact.php */
.contact-page-header {
    text-align: center;
    margin-bottom: 40px;
}
.contact-page-header h1 {
    font-size: 2.5em;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.contact-page-header p {
    font-size: 1.1em;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
}

/* (เพิ่ม) สไตล์การ์ดติดต่อ (FB, Phone) */
.contact-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 25px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease-in-out;
}
.contact-card.static { /* การ์ดที่คลิกไม่ได้ (โทรศัพท์) */
    color: var(--color-text);
}
a.contact-card:hover { /* การ์ดที่คลิกได้ (FB) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateY(-3px);
    border-color: var(--color-primary);
}
.contact-card-icon {
    font-size: 2.5em;
    flex-shrink: 0;
}
.contact-card-icon.fb { color: #1877F2; }
.contact-card-icon.phone { color: var(--color-primary); }
.contact-card-content h3 {
    margin: 0 0 5px 0;
    font-weight: 600;
    color: var(--color-text);
}
.contact-card-content p {
    font-size: 0.95em;
    color: var(--color-text-light);
    margin: 0;
    font-weight: 300;
}
.contact-card-content .contact-card-data {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 10px;
    display: block;
}
.video-wrapper {
  max-width: 100%;       /* ✅ ปรับตรงนี้ เช่น 600px, 800px หรือ 70% ก็ได้ */
  margin: 0 auto;          /* ✅ จัดให้อยู่กึ่งกลาง */
  padding: 0px;           /* ✅ เผื่อระยะขอบ */
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  /* อัตราส่วน 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

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