/*
Theme Name: PPRHOSP Theme
Theme URI: https://phromhosp.moph.go.th/web/
Author: vongsapatk
Author URI: https://www.facebook.com/vongsapatk/
Description: ธีมนี้พัฒนาโดย vongsapatk โดยมีแนวคิดหลักในการออกแบบที่เรียบง่าย ทันสมัย และเหมาะสมกับการใช้งานในหน่วยงานด้านสาธารณสุขและโรงพยาบาล ธีมนี้ถูกสร้างขึ้นมาเพื่อเป็นมากกว่าเว็บไซต์ แต่เป็นแพลตฟอร์มการสื่อสารและการจัดการข้อมูลที่สมบูรณ์แบบ รองรับฟีเจอร์ระดับสูง เช่น ระบบ Single Sign-On (SSO) ที่เชื่อมต่อกับ Provider ID ภายนอก พร้อมระบบอนุมัติผู้ใช้โดย Admin เพื่อความปลอดภัยสูงสุด โครงสร้างของธีมถูกออกแบบมาเพื่อให้จัดการง่ายผ่านหลังบ้านทั้งหมด ด้วยการใช้ Theme Customizer และ Custom Post Types ที่สร้างขึ้นโดยเฉพาะสำหรับเนื้อหาประเภทต่างๆ เช่น เอกสารมาตรฐาน (HA, HS4, MOITA), อินโฟกราฟิก, และเอกสารดาวน์โหลดทั่วไป ทำให้ผู้ดูแลระบบสามารถอัปเดตข้อมูลได้อย่างสะดวกและรวดเร็ว ดีไซน์เน้นความเป็นมิตรต่อผู้ใช้, รองรับการแสดงผลทุกอุปกรณ์ (Responsive Design), และสามารถปรับแต่งองค์ประกอบต่างๆ ในหน้าแรกได้อย่างอิสระเพื่อตอบสนองต่อทุกความต้องการขององค์กรยุคดิจิทัล (English: Developed by vongsapatk, this theme is designed with a clean, modern, and professional aesthetic, perfectly suited for healthcare organizations and hospitals. It's engineered to be more than just a website, serving as a complete communication and data management platform. The theme features advanced capabilities, including a fully integrated Single Sign-On (SSO) system for external Provider IDs, complete with an administrator-level user approval system for maximum security. The theme's architecture is built for effortless backend management, leveraging the Theme Customizer and dedicated Custom Post Types for specialized content such as standard documents (HA, HS4, MOITA), infographics, and general file downloads. This allows administrators to update information quickly and conveniently. With a strong focus on user experience, the theme is fully responsive and offers extensive customization options for the front page, enabling organizations to build a dynamic and engaging digital presence tailored to their unique needs.)
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vongsapatk
*/

/* ===================================================================
   1. GLOBAL SETTINGS & TYPOGRAPHY
   =================================================================== */

body {
  font-family: 'Noto Sans Thai', sans-serif;
  transition: padding-top 0.3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
  font-weight: 500;
}


/* ===================================================================
   2. HEADER & NAVIGATION BAR STRUCTURE
   =================================================================== */

.site-header .main-navbar {
    transition: all 0.3s ease-in-out;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); 
    position: relative;
}

.custom-logo-link img {
    height: 80px;
    width: auto;
    transition: height 0.3s ease-in-out;
}

.navbar-brand-text {
    text-decoration: none;
}

.site-title {
    font-size: 1.5rem; /* <-- ปรับขนาดฟอนต์ที่นี่ */
    color: #222;
    
    /* --- ป้องกันการขึ้นบรรทัดใหม่ --- */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-tagline {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    font-size: 0.85rem; /* <-- ปรับขนาดฟอนต์ที่นี่ */
    font-weight: 500;

    /* --- ป้องกันการขึ้นบรรทัดใหม่ --- */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Rainbow Line --- */
.main-navbar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient( to right, #1abc9c, #3498db, #9b59b6, #e67e22, #34495e, #e74c3c );
    z-index: 1;
}


/* ===================================================================
   3. MAIN MENU (LEVEL 1) STYLING
   =================================================================== */

/* --- Vertical Separator (Stable Border Method) --- */
.navbar-nav > .nav-item:not(:first-child) {
    border-left: 1px solid #e0e0e0;
}

/* Hide separator on mobile */
@media (max-width: 991.98px) {
    .navbar-nav > .nav-item:not(:first-child) {
        border-left: none;
    }
}

/* --- General Link Styling --- */
.navbar-nav > .nav-item > .nav-link {
    font-weight: 500;
    color: #333;
    position: relative;
    padding: 0.8rem 1.5rem !important; /* Adjusted padding to look good with border */
}

.navbar-nav > .nav-item:hover > .nav-link {
    color: #000 !important;
}



.navbar-nav > .nav-item:hover > .nav-link::before {
    width: 80%;
}

/* --- Underline Hover/Active Effect (Using ::before to avoid conflict) --- */
.navbar-nav > .nav-item > .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #5a8a4a;
    transition: width 0.3s ease-in-out;
}

/* --- Dropdown Arrow (▾) for Level 1 --- */
.navbar-nav > .menu-item-has-children > .nav-link::after {
    content: '▾';
    font-size: 1.2em;
    line-height: 0;
    margin-left: 0.4em;
    vertical-align: middle;
}

.navbar-collapse .navbar-nav,
.navbar-collapse .ms-lg-3 {
    flex-shrink: 0; /* ป้องกันไม่ให้เมนูและช่องค้นหาหดตัว */
}

.navbar-nav .nav-link {
    white-space: nowrap; /* บังคับไม่ให้ข้อความในเมนูตัดคำ */
}

/*
============================================================
   --- Dropdown Menu Arrow Fixes ---
============================================================
*/

/* 1. Ensure the default dropdown arrow (▾) is visible on the main navbar */
.navbar-nav > .menu-item-has-children > .nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* 2. Style the right-pointing arrow (▸) for sub-sub menus */
/* This targets a link that has a dropdown, inside another dropdown menu */
.dropdown-menu .menu-item-has-children > .nav-link.dropdown-toggle::after {
    /* Use transform to rotate the default arrow */
    display: inline-block;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
    vertical-align: middle; /* Better vertical alignment */
    
    /* Position it to the far right */
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}


/* ===================================================================
   4. DROPDOWN MENUS (LEVEL 2+) STYLING
   =================================================================== */

/* --- Dropdown Container --- */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.175);
    padding: .5rem 0;
    margin-top: 0;
    list-style: none;
    min-width: 260px;
}

/* --- Dropdown Item --- */
.dropdown-item {
    display: block;
    width: 100%;
    padding: .5rem 1.5rem;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125;
    background-color: #f0f0f0;
}

.dropdown-item.current-menu-item {
    color: #fff;
    background-color: #5a8a4a;
    font-weight: bold;
}

/* --- Arrow (▸) for Sub-Sub Menus --- */
.dropdown-menu .menu-item-has-children > a::after {
    content: '▸';
    font-size: 1.1em;
    line-height: 0;
    font-weight: normal;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(1px);
    color: #888;
}

/* --- Sub-Sub Menu Positioning --- */
.dropdown-menu .dropdown-menu {
    top: -0.5rem;
    left: 100%;
    margin-left: 0.125rem;
}

/* --- Enable Hover on Desktop --- */
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/*
===================================================================
   --- Mobile Navigation Styling (Improved) ---
===================================================================
*/

@media (max-width: 991.98px) {

    /* --- 1. Main Navbar Container --- */
    /* We use Flexbox to align all three items on a single row */
    .main-navbar > .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap; /* Prevent wrapping */
        width: 100%;
    }

    /* --- 2. The Brand Section (Logo & Title) --- */
    /* We'll use a new class for this group if needed, but we can target it directly */
    .main-navbar .navbar-brand {
        /* This is the logo link from the_custom_logo() */
        padding: 0;
        margin-right: 10px;
    }
    
    .main-navbar .custom-logo {
        height: 40px; /* Adjust mobile logo size */
        width: auto;
    }

    /* --- 3. The Title & Tagline --- */
    .main-navbar .site-title-container {
        /* This div wraps the title and tagline */
        flex-grow: 1; /* Allow it to take up the remaining space */
        margin-right: 10px;
    }
    
    .main-navbar .site-title {
        font-size: 1.1rem; /* Adjust title font size for mobile */
    }
    
    /* Hide tagline on mobile to save space */
    .main-navbar .site-tagline {
        display: none;
    }

    /* --- 4. The Toggler (Hamburger Button) --- */
    .main-navbar .navbar-toggler {
        /* No extra styles needed, Bootstrap handles it well */
        flex-shrink: 0; /* Prevent it from shrinking */
    }
    
    /* --- 5. The Collapsible Menu --- */
    /* This is the panel that opens down */
    .main-navbar .navbar-collapse {
        /* This needs to be outside the flex flow of the main bar */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-basis: 100%;
        order: 99; /* Make sure it's last */

        /* Other styles for the dropdown panel */
        background-color: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 999;
    }
    
    /* Add this to hide the search form in the collapsed menu for a cleaner look */
    .main-navbar .navbar-collapse .search-form {
        padding: 1rem 1.5rem;
        border-top: 1px solid #eee;
    }

    /* --- Submenu Toggler (Chevron) --- */
    .navbar-nav .menu-item-has-children > a {
        padding-right: 50px; /* Make space for the toggler */
        position: relative;
    }

    .navbar-nav .menu-item-has-children > a::after {
        content: '\f078'; /* Font Awesome Chevron Down */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        color: #5a8a4a;
        cursor: pointer;
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }
    
    .navbar-nav .menu-item-has-children.open > a::after {
        transform: rotate(180deg); /* Rotate icon when open */
    }

    /* --- Submenu (Dropdown) Styling --- */
    .dropdown-menu {
        position: static;
        display: block;
        border: none;
        box-shadow: none;
        background-color: #f8f9fa;
        width: 100%;
        padding-left: 1.5rem;
        
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        transition: max-height 0.4s ease, padding-top 0.3s, padding-bottom 0.3s;
    }
    
    .dropdown-menu.open {
        max-height: 1000px; /* large enough for multiple sub-items */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .dropdown-menu .nav-link {
        font-size: 0.9rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Hide right arrow in submenu */
    .dropdown-menu .nav-link.dropdown-toggle::after {
        display: none !important;
    }
}


/*
===================================================================
   --- Sticky Header (Simple & Reliable) ---
===================================================================
*/

/* This class is added to the <header> tag by JavaScript */
.header-sticky .main-navbar {
    /* These properties make the navbar stick to the top */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    
    /* Apply the shrunken style */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Smooth transition for the size change */
    transition: padding 0.3s ease;
}

.header-sticky .custom-logo-link img {
    height: 40px; /* Smaller logo */
}

.header-sticky .site-tagline {
    /* Hide the tagline */
    display: none !important;
}

/* ===================================================================
   6. FOOTER STYLING
   =================================================================== */

.site-footer {
    position: relative;
    background-color: #212529; /* Dark background */
    color: #adb5bd; /* Lighter text color */
}

/* --- Rainbow Line on Top --- */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient( to right, #1abc9c, #3498db, #9b59b6, #e67e22, #34495e, #e74c3c );
}

/* --- Widget Title Styling (h6) --- */
.site-footer .widget-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #ffffff;
}
.site-footer .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}
.site-footer .widget-title::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #5a8a4a;
    z-index: 1;
}

/* --- Footer Links Styling (inside Widgets) --- */
/* Target default WordPress menu widget and text widget links */
.site-footer .widget_nav_menu ul, 
.site-footer .widget_text .textwidget {
    list-style: none;
    padding: 0;
}
.site-footer .widget_nav_menu li,
.site-footer .widget_text p {
    margin-bottom: 0.5rem;
}
.site-footer .widget a {
    font-size: 0.9rem;
    color: #adb5bd;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    display: inline-block;
}
.site-footer .widget a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #5a8a4a;
    transition: width 0.3s ease;
}
.site-footer .widget a:hover {
    color: #ffffff !important;
}
.site-footer .widget a:hover::after {
    width: 100%;
}

/* --- Footer Google Map --- */
.footer-map-wrapper {
    border-radius: 8px;
    overflow: hidden; /* Important for keeping iframe corners rounded */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-map-wrapper iframe {
    display: block; /* Remove extra space below iframe */
}

/*
============================================================
--- Footer Bottom Bar & Policy Links ---
============================================================
*/

/* 1. จัดสไตล์ลิงก์และเตรียมพื้นที่สำหรับเส้นขีด */
.footer-bottom .policy-link {
    position: relative; /* สำหรับ ::after */
    padding: 0 10px; /* เพิ่มระยะห่างซ้ายขวา */
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block; /* ทำให้ ::after ทำงานได้ถูกต้อง */
    padding-bottom: 3px; /* เพิ่มพื้นที่ใต้ข้อความสำหรับเส้นขีด */
}

/* 2. สร้างเส้นคั่น "|" ด้านซ้ายของแต่ละลิงก์ (ยกเว้นอันแรก) */
.footer-bottom .policy-link:not(:first-child)::before {
    content: '|';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.2);
}

/* 3. สร้างเส้นขีดล่าง (ซ่อนไว้ก่อน) */
.footer-bottom .policy-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px; /* ให้เริ่มตรงกับขอบข้อความ (เพราะมี padding) */
    
    height: 1px;
    width: 0; /* ซ่อนไว้ก่อน */
    background-color: #5a8a4a; /* สีเขียว */
    transition: width 0.3s ease;
}

/* 4. เมื่อ hover ให้เส้นขยายตัว และเปลี่ยนสีข้อความ */
.footer-bottom .policy-link:hover {
    color: #ffffff !important;
}

.footer-bottom .policy-link:hover::after {
    width: calc(100% - 20px); /* ขยายความกว้าง (100% ลบ padding ซ้ายขวา) */
}

/*
============================================================
--- Footer Column Separator Lines ---
============================================================
*/

/* 1. เตรียมพื้นที่ให้คอลัมน์สามารถเป็นจุดอ้างอิงตำแหน่งได้ */
.site-footer .row > [class*="col-"] {
    position: relative;
}

/* 2. สร้างเส้นขีดทางด้านขวาของทุกคอลัมน์ ยกเว้นคอลัมน์สุดท้าย */
.site-footer .row > [class*="col-"]:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%; /* ให้เส้นสูงเต็มคอลัมน์ */
    background-color: rgba(255, 255, 255, 0.15); /* สีขาวโปร่งแสง ดูดีบนพื้นหลังสีเข้ม */
}

/* 3. (สำคัญ) ซ่อนเส้นขีดเมื่อแสดงผลบนจอมือถือ */
/* เราจะใช้ breakpoint ของ Bootstrap (md) เป็นเกณฑ์ */
@media (max-width: 767.98px) {
    .site-footer .row > [class*="col-"]:not(:last-child)::after {
        display: none;
    }
}

/*
============================================================
--- Footer Bottom Column Vertical Alignment Fix ---
============================================================
*/

/* ใช้ Media Query เพื่อให้โค้ดนี้ทำงานเฉพาะบนจอ Desktop (lg) ขึ้นไป */
@media (min-width: 992px) {
    .footer-bottom .row > [class*="col-lg-"] {
        display: flex;
        align-items: center; /* ---> นี่คือหัวใจสำคัญของการแก้ไข <--- */
    }

    /* 
       ทำให้ class text-align ของ Bootstrap ทำงานร่วมกับ Flexbox ได้ถูกต้อง
       โดยการเปลี่ยนไปใช้ justify-content แทน
    */
    .footer-bottom .text-lg-start {
        justify-content: flex-start;
    }
    .footer-bottom .text-center {
        justify-content: center;
    }
    .footer-bottom .text-lg-end {
        justify-content: flex-end;
    }
}

/*
============================================================
--- Visitor Counter Styling ---
============================================================
*/

.visitor-counter-container {
    display: inline-flex;
    gap: 8px; /* ระยะห่างระหว่างกล่อง "วันนี้" และ "ทั้งหมด" */
    justify-content: center;
    align-items: center;
}

.visitor-box {
    display: flex;
    flex-direction: column; /* จัดเรียง ป้าย และ ตัวเลข เป็นแนวตั้ง */
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 6px;
    color: #ffffff;
    font-weight: bold;
    min-width: 80px;
}

.visitor-box.today {
    background-color: #0d6efd; /* สีน้ำเงิน */
}

.visitor-box.total {
    background-color: #198754; /* สีเขียว */
}

.visitor-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.visitor-count {
    font-size: 1.2rem;
    line-height: 1.2;
}


/* --- Back to Top Button --- */
#back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none; /* Hidden by default */
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    background-color: #343a40;
    border: 2px solid #5a8a4a;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 1000;
}
#back-to-top:hover {
    background-color: #5a8a4a;
    border-color: #5a8a4a;
}

/*
===================================================================
   --- COOKIE CONSENT BANNER (Floating Frosted Glass Card) ---
===================================================================
*/

.cookie-consent-banner {
    /* Positioning */
    position: fixed;
    bottom: 20px; /* <-- ลอยขึ้นจากขอบล่าง */
    left: 20px;   /* <-- เว้นระยะจากขอบซ้าย */
    right: 20px;  /* <-- เว้นระยะจากขอบขวา */
    width: auto;  /* <-- ให้ความกว้างเป็นไปตามเนื้อหาและ padding */
    max-width: 1200px; /* (Optional) กำหนดความกว้างสูงสุด */
    margin: 0 auto; /* จัดให้อยู่กึ่งกลางแนวนอน */
    
    z-index: 9999;
    
    /* --- Floating Frosted Glass Card Style --- */
    background-color: rgba(255, 255, 255, 0.7); /* <-- พื้นหลังสีขาวโปร่งแสง */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px; /* <-- ขอบมน */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 1.25rem 1.5rem;
    
    /* --- Animation --- */
    opacity: 0; /* Start hidden */
    transform: translateY(30px); /* Start slightly lower */
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

/* Class added by JavaScript to show the banner */
.cookie-consent-banner.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}

.cookie-consent-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%; /* Ensure container inside fills the space */
    padding: 0; /* Remove default container padding */
}

/* --- Text and Link Styling (for Light Background) --- */
.cookie-consent-text {
    font-size: 0.9rem;
    color: #333; /* <-- ตัวอักษรสีเข้ม */
    flex-grow: 1;
}

.cookie-consent-text a {
    color: #5a8a4a; /* Green for the link */
    text-decoration: underline;
    font-weight: bold;
}
.cookie-consent-text a:hover {
    color: #1e6a1e;
}

.btn-accept {
    /* Styles remain the same */
    background-color: #5a8a4a;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.btn-accept:hover {
    background-color: #4a753c;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .cookie-consent-banner {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }
    .cookie-consent-banner .container {
        flex-direction: column;
        text-align: center;
    }
    .cookie-consent-text {
        margin-bottom: 1rem;
    }
}


/*
===================================================================
   7. SINGLE POST STYLING (Full-width Image Top)
===================================================================
*/

/*
===================================================================
   --- Featured Image Styling (Using Aspect Ratio Trick) ---
===================================================================
*/

.featured-image-top-bg {
    position: relative;
    width: 100%;
    
    /* The Aspect Ratio Trick */
    height: 0;
    /* Calculation: (Height / Width) * 100% */
    /* (547 / 1918) * 100 = 28.519...% */
    padding-top: 28.52%; 
    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.featured-image-top img {
    width: 100%;
    height: auto;
}

/* --- 2. Content & Meta Section --- */
.entry-content-wrapper .entry-header {
    margin-bottom: 2.5rem !important;
}

/* --- Styling for Categories --- */
.entry-meta-categories a {
    background-color: #5a8a4a;
    color: #ffffff !important; /* Use important to override default link color */
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin: 0 5px;
    display: inline-block; /* Ensure proper spacing and background */
}

.entry-meta-categories a:hover {
    background-color: #4a753c;
}

/* --- Title Underline using ::before and ::after (section-title) --- */
.section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* Long gray line */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Full width */
    max-width: 400px; /* Optional: Set a max-width for the line */
    height: 1px;
    background-color: #e0e0e0;
}

/* Short green highlight line */
.section-title::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #5a8a4a;
    z-index: 1;
}

/* --- Content Area Styling --- */
.entry-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- Single Post Meta Links --- */
.entry-meta a {
    color: inherit; /* Inherit the muted text color */
    text-decoration: none;
}

.entry-meta a:hover {
    color: #5a8a4a; /* Green on hover */
    text-decoration: underline;
}

/*
===================================================================
   8. COMMENTS SECTION STYLING (Minimal & Green Theme)
   ===================================================================
*/

/* --- Main Container --- */
.comments-area {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.comments-title,
.comment-reply-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    margin-bottom: 2rem;
}

/* --- Comment List --- */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
}

.comment-body {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* ขอบมน */
    background-color: #f9f9f9;
}

.comment-author .avatar {
    border-radius: 50%; /* ทำให้รูปโปรไฟล์กลม */
    margin-right: 15px;
    float: left;
}

.comment-meta {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.comment-author .fn {
    font-weight: bold;
    font-style: normal;
}

.reply .comment-reply-link {
    font-size: 0.85rem;
    font-weight: bold;
    color: #5a8a4a; /* สีเขียว */
    text-decoration: none;
    border: 1px solid #5a8a4a;
    padding: 5px 12px;
    border-radius: 20px; /* ขอบมนแบบแคปซูล */
    transition: all 0.2s ease;
}

.reply .comment-reply-link:hover {
    background-color: #5a8a4a;
    color: #ffffff;
}

/* --- Comment Form --- */
.comment-form {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.comment-form p {
    margin-bottom: 1.5rem;
}

.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* --- Input Fields & Textarea --- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px; /* ขอบมน */
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #5a8a4a; /* เส้นขอบสีเขียวเมื่อ focus */
    box-shadow: 0 0 0 3px rgba(90, 138, 74, 0.2); /* เพิ่มเงาฟุ้งๆ สีเขียว */
}

/* --- Submit Button --- */
.comment-form .form-submit .submit {
    /* รีเซ็ตสไตล์เดิมๆ */
    -webkit-appearance: none;
    
    /* สไตล์ใหม่ */
    background-color: transparent; /* พื้นหลังโปร่งใส */
    color: #5a8a4a; /* ตัวอักษรสีเขียว */
    border: 2px solid #5a8a4a; /* เส้นขอบสีเขียว */
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px; /* ขอบมนแบบแคปซูล */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Effect for Submit Button */
.comment-form .form-submit .submit:hover {
    background-color: #5a8a4a; /* พื้นหลังเปลี่ยนเป็นสีเขียว */
    color: #ffffff; /* ตัวอักษรเปลี่ยนเป็นสีขาว */
}

/*
===================================================================
   --- Single Post Navigation (Older/Newer Posts) ---
===================================================================
*/

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.post-navigation .nav-links {
    display: flex;
    width: 100%;
    gap: 20px; /* ระยะห่างระหว่าง 2 กล่อง */
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1; /* ทำให้ 2 กล่องมีความกว้างเท่ากัน */
    max-width: 50%;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: block;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #555;
    transition: all 0.2s ease;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    border-color: #5a8a4a;
    color: #222;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.post-navigation .nav-previous {
    text-align: left;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
    display: block;
    font-weight: bold;
}

/* --- Related Posts Section --- */
.related-posts-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #eee;
}

.related-posts-section .section-title {
    margin-bottom: 2rem;
}

/* Make sure grid cards look good here */
.related-posts-section .card-post-grid {
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

/*
===================================================================
   10. ARCHIVE & BLOG INDEX STYLING (Grid Card Layout)
===================================================================
*/

/* --- Archive Header --- */
.page-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

/* --- Post Card Styling --- */
.card-post {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

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

/* --- Card Thumbnail --- */
.card-post-thumbnail {
    position: relative;
    overflow: hidden;
    line-height: 0;
    
    /* --- นี่คือส่วนที่เพิ่มเข้ามา --- */
    aspect-ratio: 16 / 9; /* กำหนดสัดส่วนภาพเป็น 16:9 (Widescreen) */
    background-color: #f0f0f0; /* สีพื้นหลังเผื่อรูปโหลดไม่ทัน */
}

.card-post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.card-post-thumbnail .card-img-top {
    /* ทำให้รูปภาพเต็มพื้นที่ของ Container ที่มี Aspect Ratio */
    width: 100%;
    height: 100%;
    object-fit: cover; /* --- หัวใจของการแก้ไข --- */
    transition: transform 0.4s ease;
}

.card-post:hover .card-img-top {
    transform: scale(1.05);
}

/* --- "New" Badge --- */
.badge-new {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #d9534f; /* สีแดงสำหรับ "ใหม่" */
    color: #fff;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}

/* --- Card Body & Content --- */
.card-body {
    padding: 1.5rem;
    flex-grow: 1; /* ทำให้ card-body ขยายเต็มพื้นที่ที่เหลือ */
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.card-title a {
    text-decoration: none;
    color: #222;
}

.card-title a:hover {
    color: #5a8a4a;
}

.entry-summary {
    font-size: 0.95rem;
    color: #666;
}

/* --- Card Footer --- */
.card-footer {
    background-color: #f9f9f9;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.btn-read-more-card {
    color: #5a8a4a;
    text-decoration: none;
    font-weight: bold;
}

.btn-read-more-card:hover {
    text-decoration: underline;
}

/* 1. ทำให้ Header ของหน้า Archive จัดตำแหน่งชิดซ้าย */
.archive .page-header {
    text-align: left;
}

/* 2. กำหนดให้เส้นขีดของ Title ในหน้า Archive เริ่มต้นที่ด้านซ้าย */
.archive .page-header .section-title::after,
.archive .page-header .section-title::before {
    left: 0; /* เปลี่ยนจาก 50% เป็น 0 */
    transform: translateX(0); /* เอา transform เดิมออก */
}

/* (Optional) ปรับความกว้างของเส้นยาวให้เต็มคอลัมน์ */
.archive .page-header .section-title::after {
    width: 100%;
    max-width: none; /* เอา max-width ออกเพื่อให้ยาวเต็ม */
}

/* --- Search Results Page Title --- */
.search-results .page-title span {
    color: #5a8a4a; /* ทำให้คำค้นหาเป็นสีเขียว */
    font-style: italic;
}

/*
============================================================
   --- Category Badge Styling ---
============================================================
*/

.category-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px; /* Capsule shape */
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.category-badge:hover {
    opacity: 0.8;
}

/* --- Color Palette for Categories --- */
/* You can define as many colors as you have in the PHP function */

/* Color 1 (Green) */
.category-badge.cat-color-1 {
    color: #146c43;
    background-color: #d1e7dd;
}

/* Color 2 (Blue) */
.category-badge.cat-color-2 {
    color: #084298;
    background-color: #cfe2ff;
}

/* Color 3 (Orange) */
.category-badge.cat-color-3 {
    color: #995400;
    background-color: #ffe5c8;
}

/* Color 4 (Purple) */
.category-badge.cat-color-4 {
    color: #6f42c1;
    background-color: #f1eefa;
}

/* Color 5 (Red) */
.category-badge.cat-color-5 {
    color: #842029;
    background-color: #f8d7da;
}

/* Color 6 (Teal) */
.category-badge.cat-color-6 {
    color: #055160;
    background-color: #cff4fc;
}

/*
===================================================================
   --- No Search Results Found Styling ---
===================================================================
*/

.no-results-found {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 5px solid #5a8a4a; /* เส้นขอบหนาสีเขียวด้านซ้าย */
    border-radius: 8px;
    padding: 2.5rem;
    text-align: center;
    margin: 2rem 0;
}

.no-results-icon {
    font-size: 3.5rem;
    color: #5a8a4a; /* ไอคอนสีเขียว */
    margin-bottom: 1.5rem;
}

.no-results-title {
    font-family: 'Kanit', sans-serif;
    margin-bottom: 1rem;
}

.no-results-text {
    color: #6c757d;
    margin-bottom: 2rem;
}

/* --- Styling the Search Form inside the box --- */
.no-results-search-form .search-form {
    max-width: 400px;
    margin: 0 auto; /* จัดให้อยู่กึ่งกลาง */
}

/* We can reuse some styles from the header search form if needed,
   but this ensures it looks good inside the box. */
/* .no-results-search-form .search-field {
    border-radius: 50px 0 0 50px;
    padding-left: 20px;
}

.no-results-search-form .search-submit {
    border-radius: 0 50px 50px 0;
    background-color: #5a8a4a;
    border-color: #5a8a4a;
    color: #fff;
}

.no-results-search-form .search-submit:hover {
    background-color: #4a753c;
    border-color: #4a753c;
} */

/*
============================================================
   12. UNIFIED SEARCH FORM STYLING (Minimal Outline Style)
============================================================
*/

.search-form {
    /* This is the main form container */
}

/* --- Style for the Search Input Field --- */
.search-form .search-field {
    height: 42px;
    border-radius: 6px; /* ขอบมนเล็กน้อย */
    border-color: #ced4da; /* สีเทาอ่อน */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form .search-field:focus {
    border-color: #5a8a4a; /* เส้นขอบสีเขียวเมื่อ focus */
    box-shadow: 0 0 0 3px rgba(90, 138, 74, 0.25); /* เงาฟุ้งสีเขียว */
    outline: none;
}

/* --- Style for the Search Submit Button --- */
.search-form .search-submit {
    /* รีเซ็ตสไตล์พื้นฐานของ Bootstrap */
    padding: 0;
    
    /* กำหนดขนาดและรูปร่าง */
    width: 50px;  /* กว้าง */
    height: 42px; /* สูง (เท่ากับความสูง input ของ Bootstrap) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* สไตล์ Outline */
    background-color: transparent;
    border: 2px solid #5a8a4a; /* เส้นขอบสีเขียว */
    color: #5a8a4a; /* สีไอคอน */
    border-radius: 6px; /* ขอบมนเล็กน้อย */
    
    /* การเปลี่ยนแปลงเมื่อ Hover */
    transition: all 0.2s ease-in-out;
}

.search-form .search-submit:hover {
    background-color: #5a8a4a; /* พื้นหลังเปลี่ยนเป็นสีเขียว */
    color: #ffffff; /* ไอคอนเปลี่ยนเป็นสีขาว */
}

/* Container for the form in the "No Results" box */
.no-results-search-form .search-form {
    max-width: 450px;
    margin: 0 auto;
}

/*
===================================================================
   11. SIDEBAR & WIDGET STYLING (Corrected Specificity)
===================================================================
*/

/* We use the #secondary ID to target ONLY the main sidebar */

#secondary.widget-area {
    padding-left: 30px;
}

#secondary .widget {
    margin-bottom: 2rem;
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
}

#secondary .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary .widget ul li {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

#secondary .widget ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#secondary .widget ul li a {
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease;
}

#secondary .widget ul li a:hover {
    color: #5a8a4a;
}

/* Responsive adjustment for the main sidebar */
@media (max-width: 991.98px) {
    #secondary.widget-area {
        padding-left: 0;
        margin-top: 3rem;
    }
}

/*
===================================================================
   13. 404 PAGE (NOT FOUND) STYLING
===================================================================
*/

.error-404-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* ทำให้เนื้อหาอยู่กึ่งกลางแนวตั้งของหน้าจอ */
    padding: 4rem 0;
}

.error-404-box {
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}

.error-404-icon {
    font-size: 4rem;
    color: #ffc107; /* สีเหลืองอำพัน (Warning Color) */
    margin-bottom: 1.5rem;
}

.error-404-title {
    font-size: 6rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.error-404-subtitle {
    font-family: 'Kanit', sans-serif;
    font-size: 1.75rem;
    color: #495057;
    margin-bottom: 1.5rem;
}

.error-404-text {
    color: #6c757d;
    margin-bottom: 2rem;
}

/* --- Action Buttons & Search --- */
.btn-go-home {
    background-color: #5a8a4a; /* ปุ่มหลักยังคงเป็นสีเขียว */
    border-color: #5a8a4a;
    color: #fff;
    padding: 10px 25px;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-go-home:hover {
    background-color: #4a753c;
    border-color: #4a753c;
    color: #fff;
}

.error-404-search-form {
    max-width: 400px;
    margin: 0 auto;
}

/*
===================================================================
   15. SPLASH PAGE STYLING (Button at Bottom)
===================================================================
*/

.splash-page-occasions {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    /* เปลี่ยนจาก display:flex เป็น display:block */
    display: block;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-page-occasions.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.splash-content {
    /* 
       เราจะไม่ใช้ส่วนนี้จัดตำแหน่งปุ่มแล้ว
       แต่จะใช้เป็น container ทั่วไปเผื่ออยากเพิ่มเนื้อหาอื่นในอนาคต
    */
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex; /* ใช้ flex เพื่อจัดตำแหน่งปุ่ม */
    flex-direction: column;
    justify-content: flex-end; /* ---> นี่คือหัวใจสำคัญ <--- */
    align-items: center;
    padding-bottom: 5%; /* ระยะห่างจากขอบล่างของหน้าจอ */
}

.splash-enter-btn {
    background-color: #5a8a4a;
    color: #fff;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    display: inline-block; /* ทำให้ปุ่มมีขนาดตามเนื้อหาและ padding */
}

.splash-enter-btn:hover {
    background-color: #4a753c;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    color: #fff;
}

/*
===================================================================
   --- Hero Slider (Fixed Aspect Ratio Style) ---
===================================================================
*/

.hero-slider-section .swiper-slide {
    position: relative;
    width: 100%;
    
    /* The Aspect Ratio Trick */
    height: 0;
    /* Calculation: (Height / Width) * 100% */
    /* (800 / 1920) * 100 = 41.666...% */
    padding-top: 41.67%;
    
    /* The actual background image is applied inline from PHP */
    background-size: cover;
    background-position: center;
}

/* We can also add a max-height to prevent it from being too tall on ultra-wide screens */
.hero-slider-section {
    max-height: 800px;
    overflow: hidden; /* Hide anything that exceeds the max-height */
}

/* Navigation and Pagination styles remain the same */
.hero-slider-section .swiper-button-prev, 
.hero-slider-section .swiper-button-next { 
    color: #fff; 
    text-shadow: 0 1px 4px rgba(0,0,0,0.5); /* Add shadow for better visibility */
}

.hero-slider-section .swiper-pagination-bullet-active { 
    background: #fff; 
}

/*
============================================================
   --- Interactive Quick Links (Title/Icon Bar) ---
============================================================
*/

.quick-links-section {
    background-color: #f0f2f5; /* Section background color */
}

/* Main container using Flexbox */
.ql-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between cards */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Each menu item card */
.ql-item {
    flex: 1; /* Allow cards to grow and fill space */
    min-width: 150px; /* Minimum width for each card */
    max-width: 200px; /* Maximum width for each card */
    position: relative;
    height: 120px; /* Total height */
    text-decoration: none;
    display: block;
    overflow: hidden;
    border-radius: 12px; /* A bit more rounded */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    background-color: #ffffff; /* Add base background color */
}

/* Top part: Menu Title */
.ql-title-box {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
}
.ql-title {
    color: #555;
    font-weight: 500;
    font-size: 0.9rem;
    font-family: 'Kanit', sans-serif;
    transition: all 0.35s ease;
}

/* Bottom part: Icon Box */
.ql-icon-box {
    height: 80px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.35s ease;
}

/* Number Badge */
.ql-number-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    opacity: 0.3;
    font-family: sans-serif;
}


/* --- Hover State Animation --- */

/* When hovering over .ql-item */
.ql-item:hover .ql-icon-box {
    /* Make the icon box expand to full height */
    height: 120px; 
}

.ql-item:hover .ql-title-box {
    /* Make the title box background transparent */
    background-color: transparent;
}

.ql-item:hover .ql-title {
    /* Move the title down, change color to white, and make it visible */
    transform: translateY(45px); /* Move it down to the center of the new space */
    color: #fff;
    z-index: 10;
    position: relative; /* Make z-index work */
}

/*
===================================================================
   --- News Tabs Module (Upgraded Version) ---
===================================================================
*/

.news-tabs-module .nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.news-tabs-module .nav-tabs .nav-link {
    color: #666;
    font-weight: bold;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.8rem 1.2rem;
}

.news-tabs-module .nav-tabs .nav-link.active {
    color: #5a8a4a;
    background-color: transparent;
    border-color: #5a8a4a;
}

.news-tabs-module .tab-content {
    padding: 2rem 0 0 0;
}

/* --- Layout Grid for News --- */
.news-tab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns grid */
    gap: 20px;
}

.featured-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 20px;
    margin-bottom: 20px; /* Space between featured and grid cards */
}

.grid-cards-wrapper {
    grid-column: 1 / -1; /* Make this wrapper also span all columns */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Nested 3-column grid */
    gap: 20px;
}

/*
===================================================================
   --- Featured Card Style (Based on Simpler HTML) ---
===================================================================
*/

/* --- 1. The Main Card Container (<article>) --- */
.card-post-featured {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* --- 2. The Thumbnail on the Left (<div>) --- */
.card-post-featured .card-thumbnail {
    width: 100%; /* Make the image container full-width */
    position: relative;
    aspect-ratio: 16 / 9; /* Use a standard landscape aspect ratio */
}

.card-post-featured .card-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.card-post-featured .card-thumbnail .img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-post-featured:hover .card-thumbnail .img-fluid {
    transform: scale(1.05);
}

/* --- 3. The "New" Badge --- */
.card-post-featured .badge-new {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #dc3545;
    color: #fff;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 6px;
    text-transform: uppercase;
    z-index: 10;
}

/* --- 4. The Content on the Right (<div>) --- */
.card-post-featured .card-content {
    padding: 1.5rem; /* Adjust padding for vertical layout */
}

.card-post-featured .entry-header {
    flex-grow: 1; /* Push the meta/summary to the bottom */
}

.card-post-featured .entry-title {
    font-family: 'Kanit', sans-serif;
    font-size: 1.6rem; /* Slightly smaller for vertical card */
    line-height: 1.4;
    margin-top: 0.75rem;
}

.card-post-featured .entry-title a {
    color: #222;
    text-decoration: none;
}
.card-post-featured .entry-title a:hover {
    color: #5a8a4a;
}

.card-post-featured .entry-meta {
    font-size: 0.9rem;
    margin-bottom: 0.75rem; /* Space between meta and summary */
}

.card-post-featured .entry-summary {
    font-size: 0.95rem;
    color: #666;
    /* Limit excerpt to 2-3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* --- 5. Responsive Adjustments --- */
@media (max-width: 767.98px) {
    .card-post-featured {
        flex-direction: column; /* Stack on mobile */
    }
    .card-post-featured .card-thumbnail {
        width: 100%;
        flex: 0 0 auto;
        aspect-ratio: 16/9; /* Change to landscape on mobile */
    }
    .card-post-featured .entry-title {
        font-size: 1.4rem;
    }
}

/* --- Grid Card Style (Upgraded) --- */
.card-post-grid {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    height: 100%; /* Make card fill the wrapper height */
    transition: background-color 0.3s ease; /* Add transition for hover effect */
}

.card-post-grid .card-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
}
.card-post-grid .card-thumbnail img {
    width: 100%; height: 100%; object-fit: cover;
}

.card-post-grid .card-content {
    padding: 1rem;
    flex-grow: 1; /* Allow content to fill remaining space */
    display: flex;
    flex-direction: column;
}

.card-post-grid .entry-header {
    flex-grow: 1; /* Push meta and summary down */
}

.card-post-grid .entry-title {
    font-size: 1rem;
    margin-bottom: 0.5rem; /* Space between title and meta */
}
.card-post-grid .entry-title a {
    color: #333; text-decoration: none;
}

.card-post-grid .entry-meta {
    font-size: 0.8rem;
    margin-bottom: 0.75rem; /* Space between meta and summary */
}

.card-post-grid .entry-summary {
    font-size: 0.9rem;
    color: #666;
    /* Limit excerpt to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* --- Hover Effect for Grid Card --- */
.card-post-grid:hover {
    background-color: #f8f9fa; /* Change background to light gray, same as featured card */
}
.card-post-grid:hover .entry-title a {
    color: #5a8a4a; /* Change title color to green on hover */
}

/* --- General Card Elements --- */
.card-thumbnail .badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #dc3545;
    color: #fff;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}

/* --- "View All" Button --- */
.btn-view-all {
    border-radius: 50px;
    font-weight: bold;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
    .grid-cards-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}
@media (max-width: 767.98px) {
    .news-tab-grid, .grid-cards-wrapper {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .card-post-featured {
        flex-direction: column;
    }
}

.card-stack-menu-widget .card-stack-item { display: block; padding: 1.5rem; border-radius: 12px; text-decoration: none; color: #fff; font-weight: bold; font-size: 1.2rem; margin-bottom: -20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.card-stack-menu-widget .card-stack-item:hover { transform: translateY(-5px) scale(1.02); }
.card-stack-menu-widget .card-stack-item i { margin-right: 1rem; }
.card-stack-menu-widget .card-stack-item.color-1 { background-color: #20c997; }
.card-stack-menu-widget .card-stack-item.color-2 { background-color: #0dcaf0; }
.card-stack-menu-widget .card-stack-item.color-3 { background-color: #fd7e14; }


/*
===================================================================
   --- Front Page Sidebar (Overlapping with Extended Bottom Space) ---
===================================================================
*/

/* 1. Base style for all widgets in this sidebar */
.sidebar-widget {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 2. The Overlapping Effect */
#front-page-sidebar .widget:not(:first-child) {
    margin-top: -60px; /* Pull widget UP to overlap */
}

.sidebar-widget .widget-title {
    font-family: 'Kanit', sans-serif;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
    font-size: 1.2rem;
    color: #fff;
    position: relative;
}

.sidebar-widget .widget-title::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 1.5rem;
    width: 40px;
    height: 3px;
    background-color: #5a8a4a;
    z-index: 1;
}

/* --- 3. Director's Widget Styling --- */
.director-widget-new {
    background-color: #ffffff;
    text-align: center;
    padding: 1.5rem;
    padding-bottom: 80px; /* Add extra space at the bottom */
}
.director-widget-new .director-image img {
    border-radius: 8px;
    width: 80%; /* --- เปลี่ยนเป็น width 100% --- */
    height: 400px; /* --- กำหนดความสูงคงที่ --- */
    object-fit: cover; /* --- ทำให้ภาพเต็มกรอบโดยไม่เสียสัดส่วน --- */
    object-position: top center; /* --- โฟกัสที่ส่วนบนของภาพ --- */
    
    /* --- เพิ่มเงาเข้าไป --- */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.director-widget-new .director-info { margin-top: 1rem; }
.director-widget-new .director-title { font-size: 0.9rem; color: #6c757d; margin-bottom: 0.25rem; }
.director-widget-new .director-name { font-family: 'Kanit', sans-serif; font-size: 1.25rem; color: #212529; margin: 0; }

/* --- 4. Media Widget Styling --- */
.media-widget-new {
    background-color: #212529;
    padding-bottom: 80px; /* Add extra space at the bottom */
}
.media-widget-new .widget-title::before { background-color: #fff; }
.media-widget-new .ratio { padding: 0.5rem 1.5rem 0 1.5rem; }

.media-widget-new .embedded-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make the video fill the container */
}

/* --- Video Player Controls --- */
.video-player-wrapper {
    position: relative;
}

.video-mute-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    
    /* Button Styling */
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%; /* Make it circular */
    width: 40px;
    height: 40px;
    font-size: 1rem;
    cursor: pointer;
    
    /* Centering the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-mute-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* --- 5. Recent Posts Widget Styling --- */
.recent-posts-widget {
    background-color: #5a8a4a;
    padding-bottom: 0; 
}
.recent-posts-widget .widget-title::before { background-color: #fff; }
.recent-posts-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    padding-bottom: 80px; /* Add extra space at the bottom of the list */
}
.recent-posts-widget li { border-bottom: 1px solid #f0f0f0; }
.recent-posts-widget li:last-child { border-bottom: none; }
.recent-posts-widget li a { display: block; padding: 0.8rem 1.5rem; text-decoration: none; color: #333; font-weight: 500; transition: all 0.2s ease; }
.recent-posts-widget li a:hover { background-color: #f8f9fa; color: #5a8a4a; }

/* --- 6. Social Media Widget Styling --- */
.social-widget {
    background-color: #fff;
    padding: 0;
    overflow: hidden;
    /* The last widget does not need extra bottom padding */
    padding-bottom: 80px; /* Add extra space at the bottom of the list */
}
.social-widget .widget-title { color: #fff; background-color: #3b5998; border-bottom: 1px solid #2f477a; margin-bottom: 0; }
.social-widget .widget-title::before { background-color: #DDEFFF; }
.social-widget .facebook-page-plugin iframe { display: block; width: 100% !important; }

/*
============================================================
   --- E-Donation Widget Styling (Title Bar Style) ---
============================================================
*/

.edonation-widget {
    background-color: #ffffff; /* พื้นหลังหลักเป็นสีขาว */
    padding: 0; /* ไม่มี padding ที่ตัว widget หลัก */
    overflow: hidden; /* สำคัญมากสำหรับขอบมน */
    padding-bottom: 80px;
}

.edonation-widget .widget-title {
    color: #333; /* ตัวอักษรสีเข้ม */
    background-color: #f8f9fa; /* พื้นหลัง Title Bar สีเทาอ่อน */
    border-bottom: 1px solid #eee;
}

/* Override the default green underline to match the title's dark text */
.edonation-widget .widget-title::before {
    background-color: #5a8a4a; /* เส้นขีดยังคงเป็นสีเขียว */
}

.edonation-widget .edonation-content {
    padding: 1.5rem; /* เพิ่ม padding ให้กับเนื้อหาข้างในแทน */
}

.edonation-widget .edonation-content img {
    display: block;
    margin: 0 auto;
    border-radius: 8px; /* (Optional) ทำให้ QR Code มีขอบมนเล็กน้อย */
}

.edonation-widget .edonation-description {
    margin-top: 1.5rem; /* Add space between the QR code and the notice box */
    padding: 1rem;
    background-color: #fffbe6; /* A soft yellow background for notices */
    border-left: 5px solid #ffc107; /* A solid yellow accent line */
    border-radius: 0 4px 4px 0; /* Rounded corners on the right side */
    
    font-size: 0.9rem;
    line-height: 1.6;
    color: #664d03; /* Darker text color for readability on yellow */
}

/* Remove the default margin from the paragraph inside the box */
.edonation-widget .edonation-description p {
    margin-bottom: 0;
}

/*
===================================================================
   --- Donor Widget (Flowing Sparkle & Glow Effect) ---
===================================================================
*/

.donor-widget {
    position: relative; /* Crucial for positioning sparkles */
    overflow: hidden;   /* Keeps effects contained */
    padding-bottom: 90px;

    /* The base gradient background */
    background: linear-gradient(-45deg, #f0c765, #d4af37, #f7dfa5, #c59d5f);
    background-size: 400% 400%;
    animation: gold-gradient-animation 15s ease infinite;
}

/* We will use multiple pseudo-elements on a child div to create the sparkles */
.donor-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;

    /* Create the sparkle effect using multiple animated gradients */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.4), transparent 10%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.3), transparent 8%),
        radial-gradient(circle at 30% 90%, rgba(255, 255, 255, 0.4), transparent 12%),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.3), transparent 7%);
    
    animation: sparkle-flow 25s linear infinite;
}

/* Ensure the actual content is on top of the effects */
.donor-widget .widget-title,
.donor-widget .donor-slider-content {
    position: relative;
    z-index: 2;
}

/* Keyframes for the background gradient (same as before) */
@keyframes gold-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Keyframes for the flowing sparkle effect */
@keyframes sparkle-flow {
    0% { background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%; }
    25% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%; }
    50% { background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
    75% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%; }
    100% { background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%; }
}

/* ... The rest of your donor widget styles remain the same ... */

/* The rest of the donor widget styles remain the same */
.donor-widget .widget-title {
    color: #785a28;
    background-color: transparent;
}

.donor-widget .widget-title::before {
    background-color: #c59d5f; /* Gold underline */
}

.donor-widget .donor-slider-content {
    padding: 0 1.5rem;
}

.donor-swiper {
    width: 100%;
    height: auto;
}

.donor-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    aspect-ratio: 4/3; /* Adjust aspect ratio as needed */
}

.donor-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.donor-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
}

/* --- Swiper Navigation Arrows for Donor Slider --- */
.donor-swiper .swiper-button-prev,
.donor-swiper .swiper-button-next {
    color: #fff;
    --swiper-navigation-size: 24px; /* Make arrows smaller */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/*
===================================================================
   --- Hospital Stats Widget Styling ---
===================================================================
*/

.hospital-stats-widget {
    background-color: #ffffff;
    padding-bottom: 1.5rem; /* Add some bottom padding */
}

.hospital-stats-widget .widget-title {
    color: #333;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.hospital-stats-widget .widget-title::before {
    background-color: #5a8a4a;
}

.hospital-stats-list {
    padding: 0 1.5rem;
}

.stat-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.hospital-stats-list .stat-item:last-child {
    border-bottom: none;
}

.stat-icon {
    flex: 0 0 50px; /* Fixed width for the icon area */
    height: 50px;
    margin-right: 1rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #e8f3ee; /* Light green background */
    color: #198754; /* Darker green icon */
    border-radius: 8px;
    font-size: 1.5rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: 'Kanit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #212529;
}

.stat-label {
    font-size: 0.9rem;
    color: #6c757d;
}


/*
===================================================================
   --- Testimonials Widget Styling (Vibrant & Lively Design) ---
===================================================================
*/

.testimonials-widget {
    background-color: #f0f9ff; /* A very light, cheerful blue */
    background-image: linear-gradient(135deg, #f0f9ff 0%, #e6f7f5 100%);
    padding-bottom: 1.5rem;
}

.testimonials-widget .widget-title {
    color: #00796b; /* Dark Teal */
    background-color: transparent;
    padding-top: 1.5rem; /* More space on top */
}

.testimonials-widget .widget-title::before {
    background-color: #00796b; /* Dark Teal underline */
}

.testimonial-slider-content {
    padding: 1.5rem;
    padding-top: 1rem;
}

.testimonial-card {
    text-align: center;
    background-color: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 83, 115, 0.08);
    border: 1px solid #fff;
    position: relative;
}

/* Add a small quote icon */
.testimonial-card::before {
    content: '\f10d'; /* Font Awesome "quote-left" icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    
    font-size: 2rem;
    color: #e0f2f1; /* Very light teal */
    z-index: 1;
}

.star-rating {
    color: #ffc107; /* Gold color for stars */
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.star-rating .fa-star:not(.filled) {
    color: #e0e0e0;
}

.testimonial-message {
    font-style: italic;
    color: #555;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    font-size: 1rem;
    line-height: 1.7;
}

.testimonial-author {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #5a8a4a; /* Main theme green */
}

/* --- Swiper Pagination Styling --- */
.testimonial-swiper .swiper-pagination {
    position: static; /* Move pagination below the card */
    margin-top: 1.5rem;
}

.testimonial-swiper .swiper-pagination-bullet {
    background-color: #b2dfdb; /* Light teal */
    opacity: 1;
    transition: background-color 0.2s ease;
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: #00796b; /* Dark teal for active bullet */
}


/*
===================================================================
   --- Custom ACF Form Styling (Green Theme) ---
===================================================================
*/

.acf-form-wrapper {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border: 1px solid #eee;
}

.acf-form-wrapper .acf-fields.-top > .acf-field {
    border: none;
    padding: 0 0 1.8em 0;
}

.acf-form-wrapper .acf-label {
    font-weight: 500;
    font-family: 'Kanit', sans-serif;
}

.acf-form-wrapper .acf-input input[type="text"],
.acf-form-wrapper .acf-input textarea,
.acf-form-wrapper .acf-input select {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px;
}

.acf-form-wrapper .acf-input input[type="text"]:focus,
.acf-form-wrapper .acf-input textarea:focus,
.acf-form-wrapper .acf-input select:focus {
    border-color: #5a8a4a;
    box-shadow: 0 0 0 2px rgba(90, 138, 74, 0.2);
}

/* --- Star Rating Field Styling (Corrected) --- */
/* .acf-field[data-name="rating"] .acf-input .acf-radio-list {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.acf-field[data-name="rating"] .acf-radio-list label {
    position: relative;
    cursor: pointer;
    color: #ddd;
    font-size: 2.5rem;
    transition: color 0.2s ease;
}

.acf-field[data-name="rating"] .acf-radio-list label:hover,
.acf-field[data-name="rating"] .acf-radio-list label:hover ~ label,
.acf-field[data-name="rating"] .acf-radio-list input[type="radio"]:checked ~ label {
    color: #ffc107;
}

.acf-field[data-name="rating"] .acf-radio-list label input[type="radio"] {
    position: absolute;
    opacity: 0;
} */

/* --- Submit Button (Outline Style) --- */
.acf-form-wrapper .acf-button {
    background-color: transparent !important;
    color: #5a8a4a !important;
    border: 2px solid #5a8a4a !important;
    padding: 10px 30px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

.acf-form-wrapper .acf-button:hover {
    background-color: #5a8a4a !important;
    color: #fff !important;
}

/* --- Success Message Styling --- */
.acf-notice.-success {
    background-color: #d1e7dd !important; /* Light Green */
    border-left: 5px solid #198754 !important; /* Dark Green */
    color: #0f5132 !important;
    border-radius: 8px;
}
.acf-notice.-success p {
    margin: 0 !important;
}


/*
===================================================================
   --- Front Page Section Title Alignment ---
===================================================================
*/

/*
 * The .home class is automatically added by WordPress to the <body> tag
 * on the front page. We use it to specifically target titles on this page.
*/

/* 1. Make the title text align to the left */
/* .home .section-title {
    text-align: left;
} */

/* 2. Move the ::before and ::after pseudo-elements to the left */
/* .home .section-title::before,
.home .section-title::after {
    left: 0;
    transform: translateX(0);
} */

/* --- Policy Gallery Module --- */
.gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4/3; /* ให้รูปมีสัดส่วนเท่ากัน */
    object-fit: cover;
    width: 100%;
}

.gallery-item:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- Google Calendar Module --- */
.calendar-embed-wrapper {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    padding: 1rem;
    background-color: #fff;
}

.calendar-embed-wrapper iframe {
    width: 100%;
    min-height: 500px;
}

/* --- Calendar Note Styling --- */
.calendar-note {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fffbe6; /* สีเหลืองอ่อน (Warning/Info background) */
    border-left: 5px solid #ffc107; /* เส้นขอบหนาสีเหลือง */
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: #664d03; /* สีตัวอักษรโทนเข้ม */
}

/*
===================================================================
   --- Link URL Slider (Infinite Marquee Effect) ---
===================================================================
*/

#link-slider-section .section-title {
    text-align: center;
}

.link-swiper {
    overflow: hidden; /* Hide the scrollbar */
}

/* Add this class via JS to the swiper-wrapper to enable animation */
.link-swiper .swiper-wrapper {
    /* This is the key for the continuous scroll */
    transition-timing-function: linear !important;
}

/* --- The individual slide item --- */
.link-slide-item {
    display: block;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.3s ease;
}

.link-slide-item:hover {
    opacity: 0.7;
}

/* --- The Logo inside the slide --- */
.link-slide-logo {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.link-slide-logo img {
    max-height: 100%;
    max-width: 150px; /* Set a max-width for logos */
    width: auto;
}

/* --- The Name below the logo --- */
.link-slide-name {
    color: #333;
    font-weight: 500;
    font-size: 0.9rem;
}

/* --- Swiper Navigation Arrows (Hide them for marquee effect) --- */
.link-swiper .swiper-button-prev,
.link-swiper .swiper-button-next {
    display: none;
}

/* --- Define the width of each slide --- */
.link-swiper .swiper-slide {
    width: 180px; /* <-- กำหนดความกว้างคงที่ให้แต่ละโลโก้ */
}

/* --- Infographic Slider Module (Increased Size) --- */
.infographic-swiper {
    padding-bottom: 40px;
}

.infographic-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* --- Define the size of each slide here --- */
.infographic-swiper .swiper-slide {
    width: 300px; /* <--- ปรับขนาดความกว้างของการ์ดที่นี่ */
}

.infographic-slide-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infographic-slide-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.infographic-slide-item img {
    width: 100%;
    height: auto;
    /* --- ปรับสัดส่วนให้เหมาะสมกับความกว้างใหม่ --- */
    aspect-ratio: 3 / 4; 
    object-fit: cover;
    display: block;
}

/* --- Swiper Pagination Styling --- */
.infographic-swiper .swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 1;
}

.infographic-swiper .swiper-pagination-bullet-active {
    background-color: #5a8a4a; /* Green for active bullet */
}


/*
===================================================================
   --- Reusable Section Title Styling ---
===================================================================
*/

/* --- 1. Base Style (for all section titles) --- */
.section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

/* Long gray line */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
}

/* Short green highlight line */
.section-title::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 80px;
    height: 3px;
    background-color: #5a8a4a;
    z-index: 1;
}

/* --- 2. Centered Style (for single.php, page.php, and specific front-page titles) --- */
/* This is the default alignment for the lines */
.section-title::after,
.section-title::before {
    left: 50%;
    transform: translateX(-50%);
}

/* We also center the text itself if the parent is centered */
.text-center .section-title {
    text-align: center;
}

/* Example Usage in front-page.php for "ลิงก์ที่เกี่ยวข้อง":
   <h2 class="section-title text-center">ลิงก์ที่เกี่ยวข้อง</h2>
*/


/* --- 3. Left-Aligned Style (specifically for front-page news/calendar titles) --- */
/* Use the .home class to target the front page */
.home .col-lg-8 .section-title {
    text-align: left;
}

.home .col-lg-8 .section-title::before,
.home .col-lg-8 .section-title::after {
    left: 0;
    transform: translateX(0);
}

/* Override: Left Alignment */
.section-title.title-align-left {
    text-align: left;
}

.section-title.title-align-left::after,
.section-title.title-align-left::before {
    left: 0;
    transform: translateX(0);
}
/*
===================================================================
   --- Custom Download Table Styling ---
===================================================================
*/

/* Target our custom table on any page */
.download-table {
    margin-top: 2rem;
    font-size: 1rem;
}

/* Style the table header */
.download-table thead th {
    background-color: #f8f9fa; /* Light gray background for header */
    color: #333;
    font-family: 'Kanit', sans-serif;
    border-bottom-width: 2px;
}

/* Style the table rows */
.download-table tbody td,
.download-table tbody th {
    vertical-align: middle; /* Center text vertically */
}

/* --- Custom Download Button Style --- */
.btn-download {
    background-color: #5a8a4a; /* Main theme green */
    border-color: #5a8a4a;
    color: #fff;
    padding: 6px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 50px; /* Capsule shape */
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.btn-download:hover {
    background-color: #4a753c;
    border-color: #4a753c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/*
===================================================================
   --- PDF Embedder Plugin Styling (Green Theme) ---
===================================================================
*/

/* 1. The main container for the PDF viewer */
.pdfemb-viewer {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    margin: 2rem 0;
    overflow: hidden; /* Ensure toolbar corners are clipped */
}

/* 2. The toolbar at the top/bottom */
.pdfemb-toolbar {
    background-color: #5a8a4a !important; /* ---> Use our theme's green color <--- */
    border-bottom: 1px solid #4a753c; /* A slightly darker green border */
    color: #ffffff !important; /* Make all text inside the toolbar white */
}

/* 3. The next/prev arrows and zoom buttons */
.pdfemb-arrow,
.pdfemb-zoom {
    color: #ffffff !important; /* Make icons white */
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.pdfemb-arrow:hover,
.pdfemb-zoom:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* Add a subtle hover effect */
}

/* 4. The page number input area */
.pdfemb-page-area {
    color: #ffffff !important;
}

.pdfemb-page-area input {
    border-radius: 4px !important;
    border: 1px solid #4a753c !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
    font-weight: bold;
}

/* 5. Hide the "Fullscreen" button (Optional, as it can sometimes break layouts) */
.pdfemb-fullscreen {
    display: none !important;
}

/*
============================================================
   --- Clinics Section Styling (Frosted Glass Effect) ---
============================================================
*/

/* --- 1. The Main Section Container --- */
.clinics-section-frosted {
    position: relative;
    overflow: hidden; /* Important for the background effect */
}

/* --- 2. The Background Image --- */
.clinics-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* You can change this background image */
    background-image: url('https://images.unsplash.com/photo-1503149779833-1de50ebe5f8a?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    
    /* Optional: Add a blur to the background itself */
    /* filter: blur(3px); */
    z-index: 1;
}

/* --- Make all content sit on top of the background --- */
.clinics-section-frosted .container,
.clinics-section-frosted .container-fluid {
    position: relative;
    z-index: 2;
}

.clinics-section-frosted .section-title,
.clinics-section-frosted .section-subtitle {
    color: #fff; /* Make text white to be visible on the background */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Add shadow to text */
}
.clinics-section-frosted .section-title::before,
.clinics-section-frosted .section-title::after {
    background-color: #fff; /* Make underline white */
}

/* --- 3. The Frosted Glass Card --- */
.clinic-icon-card {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    height: 100%;
    text-decoration: none;
    
    /* --- Frosted Glass Effect --- */
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    transition: all 0.3s ease;
}

.clinic-icon-card:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
}

/* --- 4. Content inside the card --- */
.clinic-icon-wrapper {
    flex: 0 0 60px;
    height: 60px;
    margin-right: 1rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Make the icon background semi-transparent as well */
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 8px;
    font-size: 1.8rem;
}

.clinic-card-title {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff; /* White text */
    margin-bottom: 0.25rem;
}

.clinic-card-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8); /* Semi-transparent white text */
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* --- Reusable Section Subtitle Styling --- */
.section-subtitle {
    max-width: 700px; /* Limit the width of the subtitle */
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px; /* Pull it up slightly closer to the title */
    margin-bottom: 2rem; /* Add space below it */
    font-size: 1.1rem;
    line-height: 1.7;
    color: #6c757d; /* Muted text color */
}


/*
===================================================================
   --- Custom Login Page V2 (Centered Card Design) ---
===================================================================
*/
.custom-login-page-body-v2 {
    background-color: #E0F2F1; /* A light teal/blue background */
    background-image: linear-gradient(to top, #cce3f1, #e9f5f4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
}

.login-page-wrapper {
    width: 100%;
    max-width: 600px;
    padding: 20px;
}

.login-card {
    background-color: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0, 83, 115, 0.15);
    text-align: center;
}

.login-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.login-card-header .custom-logo { height: 40px; width: auto; }
.login-card-header .ncds-logo { height: 35px; width: auto; }

.login-card-illustration {
    margin-bottom: 2rem;
}
.login-card-illustration img {
    max-width: 80%;
    height: auto;
}

.login-card-content .welcome-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
}
.login-card-content .welcome-title .text-highlight {
    color: #009688; /* Teal color for highlight */
    font-weight: 600;
}
.login-card-content .welcome-subtitle {
    font-size: 1rem;
    color: #666;
    margin-top: 0.5rem;
}
.login-card-content .login-prompt {
    font-size: 0.9rem;
    color: #888;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.login-card-action .btn-provider-id {
    display: inline-flex; /* Use inline-flex for better centering */
    align-items: center;
    justify-content: center;
    
    width: 100%; /* --- ทำให้ปุ่มยาวเต็มความกว้างของการ์ด --- */
    max-width: 370px; /* --- กำหนดความกว้างสูงสุด (ปรับค่าได้) --- */
    
    border: 1px solid #009688;
    border-radius: 50px;
    padding: 1px 20px; /* ปรับ padding แนวตั้ง-แนวนอน */
    transition: all 0.2s ease;
}

.login-card-action .btn-provider-id img {
    height: 50px; /* ปรับขนาดโลโก้เล็กน้อย */
    width: auto;
}
.login-card-action .btn-provider-id:hover {
    background-color: #f0faf9;
    box-shadow: 0 4px 10px rgba(0, 150, 136, 0.2);
}


.login-page-footer {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 1rem 0 1rem;
    font-size: 0.8rem;
    color: #547b8c;
    font-weight: 500;
}

/* --- HA Documents Page Styling --- */
.cs9-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.cs9-header h1.section-title { margin-bottom: 0.5rem !important; }
.cs9-subtitle { font-size: 1.1rem; color: #666; margin: 0; }
.cs9-header .badge { background-color: #e8f3ee; color: #198754; font-weight: bold; padding: 0.5em 1em; border-radius: 50px; font-size: 0.9em; }

.cs9-tablewrap table { width: 100%; border-collapse: collapse; }
.cs9-tablewrap th, .cs9-tablewrap td { padding: 1rem; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.cs9-tablewrap thead th { background-color: #f8f9fa; font-family: 'Kanit', sans-serif; }
.cs9-tablewrap .code { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: #f0f0f0; border-radius: 50%; font-weight: bold; }

.cs9-tablewrap .download { display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; color: #5a8a4a; background-color: #e8f3ee; padding: 8px 16px; border-radius: 50px; transition: all 0.2s ease; }
.cs9-tablewrap .download:hover { background-color: #5a8a4a; color: #fff; }
.cs9-tablewrap .download svg { width: 18px; height: 18px; margin-right: 8px; }

.cs9-child-subheader td {
    background-color: #f8f9fa; /* A lighter gray */
    font-weight: 500;
    padding-left: 2rem !important; /* Indent the sub-subheader */
}

/*
===================================================================
   --- MOPH Projects Page Styling (with Descriptions) ---
===================================================================
*/

.project-card {
    display: flex;
    align-items: flex-start; /* Align to the top */
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.project-card:hover {
    border-color: #5a8a4a;
    background-color: #f8fcf9;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(90, 138, 74, 0.15);
}

.project-card i {
    font-size: 1.8rem;
    color: #5a8a4a;
    margin-right: 1rem;
    transition: color 0.3s ease;
    /* Give the icon a fixed width to align text vertically */
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}

.project-card:hover i {
    color: #198754;
}

/* --- New Text Wrapper --- */
.project-card-text {
    flex-grow: 1;
}

.project-card-title {
    display: block; /* Make it a block element */
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    font-family: 'Kanit', sans-serif;
    margin-bottom: 0.25rem; /* Space between title and description */
}

/* --- New Description Style --- */
.project-card-description {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 0;
    /* Truncate to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.developer-credit {
    color: #5a8a4a !important;
    font-weight: bold;
    font-size: 1.1em; /* เพิ่มขนาด 10% จากปกติ */
}