/*
Theme Name: Police Theme 1.0.2
Author: Dev By k.Natthawut
Description: Theme for WordPress
Version: 1.0.
Requires PHP: 8.0
Text Domain: police-theme
*/

/* --- Reset & Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   GLOBAL FONT SETUP (กำหนดฟอนต์ Prompt ทั้งเว็บไซต์)
   ========================================================================== */

/* บังคับใช้ฟอนต์กับ Body และ Element หลักทั้งหมด */
/* บังคับโหลดฟอนต์จาก Google โดยตรงแทนการโหลดจากเครื่องตัวเอง */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;700;900&display=swap');

body, h1, h2, h3, .site-title, .site-description, .custom-page-title {
    font-family: 'Prompt', sans-serif !important;
}

html, body, 
input, button, select, textarea, 
.site-title, .nav-menu, .custom-page-title, .news-title {
    font-family: 'Prompt', sans-serif !important;
}

/* บังคับใช้กับหัวข้อทุกระดับ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Prompt', sans-serif !important;
    font-weight: 600; /* ตั้งค่าความหนามาตรฐานสำหรับหัวข้อ */
}

/* บังคับให้ Elementor ใช้ฟอนต์ตามธีม (กรณีไม่ได้ตั้งค่าใน Elementor) */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor {
    font-family: 'Prompt', sans-serif !important;
}

/* --- ปรับสีพื้นหลังหลักของเว็บไซต์ --- */
body {
    background-color: #cce3f7 !important;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* บังคับให้สีพื้นหลังคลุมเต็มความสูงหน้าจอ */
}

/* หากมีส่วนคอนเทนเนอร์หลัก (Main Content) ที่ต้องการให้เป็นสีโปร่งใสเพื่อโชว์พื้นหลัง */
.site-main, 
#content {
    background-color: transparent !important;
}

a {
    text-align: inherit;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* --- Minimal Layout --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- จัดการ Header เมื่อเข้าสู่ระบบ Admin (Admin Bar Fix) --- */

/* เมื่อมีการล็อกอิน แถบ Admin Bar จะปรากฏ และคลาส .admin-bar จะทำงาน */
.admin-bar .site-header {
    top: 32px !important; /* ขยับ Header ลงมาให้พ้นแถบเครื่องมือ Admin */
}

.admin-bar .site-main {
    padding-top: 0 !important;
}

body.admin-bar .custom-page-header {
    margin-top: 0 !important;
}

/* สำหรับหน้าจอมือถือหรือแท็บเล็ต แถบ Admin Bar อาจจะมีความสูงเปลี่ยนไป */
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important; /* ปรับตามความสูง Admin Bar บนหน้าจอเล็ก */
    }
    .admin-bar .site-main {
        padding-top: 35px !important;
    }
}

/* กรณีหน้าจอเล็กมากๆ จน Admin Bar หายไป (บางกรณี) */
@media screen and (max-width: 600px) {
    .admin-bar .site-header {
        top: 0 !important;
        position: absolute !important; /* ปรับให้ขยับตามการ Scroll บนจอเล็ก */
    }
}

/* --- Site Header & Navbar --- */
/* --- 1. กำหนดสไตล์เริ่มต้นของ Header (ตอนอยู่บนสุด: สีใส + เส้นขาวจาง) --- */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 75px !important;
    background-color: transparent; /* ตอนอยู่บนสุด พื้นหลังใส */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    
    /* อนิเมชันเลื่อนเปลี่ยนสีพื้นหลัง */
    animation: policeHeaderSticky linear both;
    animation-timeline: scroll();
    animation-range: 0px 50px;
}

/* คลาสใหม่ขยายเต็มบราวเซอร์ซ้าย-ขวา */
.police-header-fullwidth {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
/* --- 2. อนิเมชันเปลี่ยนสีพื้นหลังเมื่อมีการเลื่อน (สีกรมท่าเดียวกับ Footer) --- */
@keyframes policeHeaderSticky {
    to {
        background-color: #001C59;
        border-bottom: 1px solid transparent;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* --- 3. โครงสร้างภายในเมนูบาร์ --- */
/* --- ปรับปรุงโครงสร้าง Header ให้กว้าง 100% เต็มจอ และเมนูชิดขวา --- */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100% !important;     /* ขยายคอนเทนเนอร์ให้เต็มจอ */
    max-width: 100% !important; /* ปลดล็อก Max-Width ทุกตัวที่อาจจะติดมาจากธีมหลัก */
    padding: 0 40px;            /* เว้นระยะห่างจากขอบจอนิดหน่อยเพื่อความสวยงาม */
    box-sizing: border-box;
}

.site-logo {
    position: absolute !important;
    left: 40px !important;       /* ระยะห่างจากขอบจอฝั่งซ้าย */
    top: 50% !important;
    transform: translateY(-50%) !important; /* สั่งให้อยู่กึ่งกลางระนาบแนวตั้ง */
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10000 !important;
}

.site-logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    height: 100% !important;
}

/* ปรับฟอนต์ข้อความชื่อ สภ.อมก๋อย */
.site-logo .logo-text {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px;
    line-height: 1 !important;
    white-space: nowrap !important; /* ป้องกันไม่ให้ชื่อเว็บแตกแถวหรือตัดบรรทัดลงมา */
}

.site-logo .custom-logo-link {
    display: flex !important;
    align-items: center !important; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    text-decoration: none !important;
    gap: 15px !important; /* ระยะห่างระหว่างรูปโลโก้กับตัวหนังสือ */
}

/* กลุ่มตัวหนังสือ 2 บรรทัด */
.logo-text-group {
    display: flex !important;
    flex-direction: column !important; /* เรียงบนลงล่าง */
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* ชื่อสถานี (บรรทัดบน) */
.site-title {
    font-family: 'Prompt', sans-serif !important;
    color: #ffffff !important;
    font-size: 24px !important; /* ปรับขนาดตามความเหมาะสม */
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    display: block !important;
}

/* ชื่อภาษาอังกฤษ (บรรทัดล่าง) */
.site-description {
    display: block !important;
    font-family: 'Prompt', sans-serif !important;
    
    /* เปลี่ยนเป็นสีเหลือง (สีเดียวกับชื่อหน้าและเส้นขอบ) */
    color: #DAA520 !important; margin-top: 5px !important; 
    
    /* ปรับขนาดให้พอเหมาะ */
    font-size: 16px !important; 
    font-weight: 400 !important;
    
    /* ขยับลงมาจากบรรทัดแรก (ปรับตัวเลขนี้ได้ตามความชอบครับ) */
    margin-top: 5px !important; 
    
    /* ให้ความโปร่งใสเต็มร้อยเพื่อให้สีเหลืองชัดเจน */
    opacity: 1 !important; 
    line-height: 1 !important;
}

/* จัดกล่อง Link ที่ WordPress สร้างให้รูปโลโก้คู่กับตัวหนังสือเรียงแถวตรงกลาง */
.custom-logo-link,
.logo-link {
    display: flex !important;
    flex-direction: row !important; /* บังคับเรียงจากซ้ายไปขวา */
    align-items: center !important;  /* จัดให้อยู่กึ่งกลางระนาบแนวตั้งเท่ากัน */
    text-decoration: none !important;
    gap: 12px !important;            /* ระยะห่างระหว่างรูปภาพโลโก้กับชื่อเว็บ */
    height: 100% !important;
}
/* รูปภาพโลโก้ สภ.อมก๋อย */
.custom-logo {
    display: block !important;
    width: auto !important;
    height: 50px !important; /* ความสูงขนาดปกติของรูปโลโก้ */
    max-height: 50px !important;
    flex-shrink: 0 !important; /* ป้องกันรูปภาพโดนบีบเบี้ยว */
    transition: all 0.3s ease !important;
}

/* ข้อความชื่อเว็บไซต์ */
.site-title {
    font-family: 'Prompt', sans-serif !important;
    color: #ffffff !important;      /* ตัวหนังสือสีขาวตามคำสั่ง */
    font-size: 1.3rem !important;   /* ขนาดตัวหนังสือสไตล์มินิมอล */
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important; /* บังคับให้ชื่อเว็บยาวเป็นเส้นตรง ไม่แตกบรรทัดลงมา */
    transition: all 0.3s ease !important;
}

/* ควบคุมการหดขนาดโลโก้และฟอนต์อัตโนมัติด้วย CSS Scroll-Driven เมื่อเลื่อนหน้าจอลง */
@keyframes policeLogoShrink {
    to {
        height: 42px !important;
        max-height: 42px !important;
    }
}
@keyframes policeTitleShrink {
    to {
        font-size: 1.15rem !important;
    }
}
.custom-logo {
    animation: policeLogoShrink linear both;
    animation-timeline: scroll();
    animation-range: 0px 60px;
}
.site-title {
    animation: policeTitleShrink linear both;
    animation-timeline: scroll();
    animation-range: 0px 60px;
}

/* 4. ระบบจัดการบล็อกเมนูบาร์ (ฝั่งขวา) */
.main-navigation {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    z-index: 99999 !important; /* ดันขึ้นมาให้อยู่เหนือเลเยอร์อื่น */
    height: 100% !important;   /* ให้สูงเท่า Header เพื่อให้ลูกเกาะได้ */
}

/* จัดระเบียบคอนเทนเนอร์เมนูหลังบ้าน WordPress ให้ชิดขวา */
.main-navigation ul.nav-menu {
    display: flex !important;
    flex-direction: row !important; /* สั่งเรียงจากซ้ายไปขวาในแถวเดียวกัน */
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-navigation .nav-menu a {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 1. ปรับระยะห่างระหว่าง "รายการเมนูหลัก" แต่ละปุ่ม */
.main-navigation .nav-menu > li {
    display: flex !important;
    align-items: center !important;
    height: 75px !important;
    margin-left: 12px !important; /* ปรับระยะห่างระหว่างปุ่มให้ชิดกันนิดนึง */
}

/* 4. จัดระเบียบไอคอนภายในปุ่ม (ถ้ามี) */
.main-navigation .nav-menu > li > a i, 
.main-navigation .nav-menu > li > a span.dashicons {
    margin-right: 8px !important;
    font-size: 1rem !important;
}
/* 1. สไตล์ปุ่มเมนูหลัก: ไม่มีพื้นหลัง มีแต่ขอบ และแสงฟุ้ง */
.main-navigation .nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    /* ลด Padding บน-ล่าง จาก 10px เหลือ 7px และลดซ้าย-ขวาลงเล็กน้อย */
    padding: 7px 18px !important; 
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important; /* ลดขนาดฟอนต์ลงนิดหน่อยเพื่อให้สมดุลกับกรอบ */
    transition: all 0.3s ease-in-out !important;
    
    /* แสงฟุ้งแบบละมุน (Soft Glow) */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05) !important;
}

.main-navigation .nav-menu > li:hover {
    z-index: 99999 !important; 
}

/* 2. เมื่อเลื่อนเมาส์มาชี้ (Hover) หรือเป็นหน้าปัจจุบัน (Current Page) */
.main-navigation .nav-menu > li:hover > a,
.main-navigation .nav-menu > li.current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.main-navigation .nav-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* จัดตำแหน่งกล่องเมนูย่อย (Dropdown) ให้บาลานซ์เมื่อเมนูหลักอยู่ชิดขวา */
.main-navigation .nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    
    width: 300px !important;
    
    /* [จุดแก้สำคัญ]: เปลี่ยนจาก 1fr 1fr เป็นแบบยืดหยุ่น */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    
    gap: 15px !important;
    padding: 20px !important;
    background-color: #0c1d3d !important;
    border-radius: 0 12px 12px 12px !important;
    border-top: 4px solid #ffde00 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
    
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease-in-out !important;
    z-index: 100000 !important;
}

/* สั่งให้เมนูย่อยแสดงผลลื่นไหลเมื่อ Hover และเปลี่ยนทิศทางการสไลด์ให้สัมพันธ์กับฝั่งขวา */
.main-navigation .nav-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* เอาการเลื่อนแกน X ออกเพื่อให้เกาะขอบขวาได้แม่นยำ */
}

.main-navigation .nav-menu > li:last-child .sub-menu,
.main-navigation .nav-menu > li:nth-last-child(2) .sub-menu {
    left: auto !important;     /* ยกเลิกการเริ่มจากซ้าย */
    right: 0 !important;       /* บังคับให้เริ่มจากขอบขวาของปุ่มแม่ */
    
    /* ปรับมุมมนให้เข้ากับฝั่งขวา */
    border-radius: 12px 0 12px 12px !important; 
    
    /* ถ้าต้องการให้มันขยับห่างจากปุ่มแม่นิดนึง (ป้องกันเมาส์หลุด) */
    margin-top: 10px !important;
}

/*
.main-navigation .nav-menu > li:last-child .sub-menu,
.main-navigation .nav-menu > li:nth-last-child(2) .sub-menu {
    left: auto !important;
    right: 0 !important;    เกาะขอบขวา 
    border-radius: 12px 0 12px 12px !important;
    transform: translateY(15px) !important;
}*/

/* --- 4. แถบเลื่อนสีเหลืองบอกสถานะหน้าจอ (Scroll Progress) --- */
.scroll-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #FFD700; /* สีเหลืองทอง */
    width: 0%; /* เริ่มต้นที่ 0% */
    
    /* ผูกให้ความกว้าง (width) วิ่งตามการ Scroll ตั้งแต่บนสุดยันล่างสุดของเว็บ */
    animation: policeScrollProgress linear both;
    animation-timeline: scroll();
    animation-range: var(--scroll-range, enter 0% to exit 100%);
}

@keyframes policeScrollProgress {
    to {
        width: 100%;
    }
}

/* --- ระบบเมนูย่อย (Dropdown Menu) สำหรับ Police Theme --- */

/* จัดการให้เมนูหลักที่เป็นตัวแม่ สามารถระบุตำแหน่งของเมนูย่อยได้ถูกต้อง */
.main-navigation .nav-menu li {
    position: relative;
    display: inline-block;
}

/* เพิ่มพื้นที่ให้ลูกศร และกำหนดสไตล์ */
.main-navigation .nav-menu .menu-item-has-children > a {
    padding-right: 20px !important; /* เพิ่มพื้นที่ฝั่งขวาของข้อความเพื่อวางลูกศร */
    position: relative !important;
}

/* เพิ่มลูกศรชี้ลง (▼) ให้เมนูหลักที่มีเมนูย่อยโดยอัตโนมัติ */
.main-navigation .nav-menu .menu-item-has-children > a::after {
    content: '▾' !important; /* ใช้สัญลักษณ์ลูกศรมินิมอล */
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.6) !important; /* สีขาวจางๆ ไม่ให้เด่นกว่าข้อความ */
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

/* เอฟเฟกต์หมุนลูกศรเมื่อเอาเมาส์ชี้ (Hover) */
.main-navigation .nav-menu .menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #ffffff !important;
}

/* กรณีลูกศรในเมนูย่อย (ถ้ามีเมนูย่อยซ้อนเมนูย่อย) */
.main-navigation .nav-menu .sub-menu .menu-item-has-children > a::after {
    content: '▸' !important; /* ให้ชี้ไปทางขวาแทน */
    right: 15px !important;
}

/* สไตล์ของเมนูย่อย (เริ่มต้นให้ซ่อนไว้ และจัดรูปแบบ) */
.main-navigation .nav-menu .sub-menu {
    position: absolute;
    top: 100%; /* แสดงใต้เมนูหลักพอดี */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* จัดให้อยู่ตรงกลางเมนูหลักและขยับลงไปนิดหน่อย */
    background-color: #001C59; /* พื้นหลังสีน้ำเงินเข้มตัวเดียวกับ Footer */
    min-width: 200px; /* กำหนดความกว้างขั้นต่ำของกล่องเมนูย่อย */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 4px; /* มนขอบเล็กน้อยเพิ่มความมินิมอล */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* เพิ่มเงาให้ลอยเด่นขึ้นมาจากเนื้อหาเว็บ */
    
    /* ซ่อนเมนูย่อยไว้เริ่มต้น */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}

/* 4. สไตล์ของรายการลิงก์ข้างในเมนูย่อย */
.main-navigation .nav-menu .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
}

.main-navigation .nav-menu .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
}

.main-navigation .nav-menu .sub-menu li a::before {
    content: '❯' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffde00 !important; /* สีเหลือง */
    border-radius: 6px !important;
    margin-right: 15px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

/* ตอน Hover รายการย่อย */
.main-navigation .nav-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: #ffde00 !important;
    transform: scale(1.02) !important;
}

/* เอฟเฟกต์ตอน Hover ให้ดูนุ่มนวลขึ้น */
.main-navigation .nav-menu > li > a:hover {
    color: #ffffff !important;
    transform: translateY(-1px); /* ขยับขึ้นเล็กน้อยตอนชี้ */
}

/* เอาเส้นใต้ของเมนูหลักออกเมื่อเป็นเมนูย่อย */
.main-navigation .nav-menu .sub-menu li a::after {
    display: none;
}


.main-navigation .nav-menu .sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    left: 0 !important;
    right: 0 !important;
    height: 10px !important;
    background: transparent !important;
}

/* 3. เมื่อ Hover ที่ตัวแม่ (li) ให้ตัวลูกแสดงผลทันทีและค้างไว้ */
.main-navigation .nav-menu > li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important; /* ปรับค่าให้คงที่เพื่อไม่ให้ตำแหน่งขยับไปมา */
}

/* ตอน Hover ลิงก์ในเมนูย่อย ให้มีไฮไลต์พื้นหลังจางๆ และขยับข้อความเล็กน้อย */
.main-navigation .nav-menu .sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding-left: 25px; 
}

/* 5. สั่งให้เมนูย่อยแสดงผลออกมาเมื่อมีการ Hover เมนูหลัก */
.main-navigation .nav-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* เลื่อนกล่องขึ้นมาในตำแหน่งปกติแบบนุ่มนวล */
}

/* แถบวิ่งสีเหลือง */
.scroll-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #FFD700;
    width: 0%;
    animation: policeScrollProgress linear both;
    animation-timeline: scroll();
}
@keyframes policeScrollProgress {
    to { width: 100%; }
}

/* ปรับแก้กรณีหน้าจอเล็ก (Responsive เบื้องต้น) */
@media (max-width: 1200px) {
    .main-navigation .nav-menu .sub-menu {
        width: 500px !important;
        grid-template-columns: 1fr !important; /* เหลือคอลัมน์เดียวบนจอเล็ก */
    }
}

/* ==========================================================================
   Desktop: ซ่อนปุ่ม 3 ขีด
   ========================================================================== */

/* --- การจัดวาง Layout หลักของ Header --- */
/* --- การจัดวาง Layout สำหรับมือถือ (ต่ำกว่า 991px) --- */
@media screen and (max-width: 991px) {

    .police-header-fullwidth {
        display: flex !important;
        /* ดันโลโก้ไปซ้ายสุด และดันปุ่ม 3 ขีดไปขวาสุด */
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 10px 8px !important;
        background: linear-gradient(180deg, #001a4d 0%, #003380 100%) !important;
        height: 70px;
    }

    /* ตกแต่งปุ่ม 3 ขีด */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        
        /* --- จุดสำคัญที่ทำให้ไปอยู่ขวาสุด --- */
        margin-left: auto !important; 
        position: relative;
        right: 5px; /* ขยับจากขอบขวาเข้ามานิดหน่อยให้ดูสมดุล */
    }

    /* เปลี่ยนสีขีดเป็นสีขาวตามคำขอ */
    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #ffffff !important; /* สีขาวสะอาดตา */
        border-radius: 5px;
        transition: 0.3s;
    }

    /* ซ่อนเมนูเดิมที่เคยเบี้ยวออกไปก่อน */
    .main-navigation {
        display: none !important;
    }

    .site-logo {
        display: flex !important;
        align-items: center !important;
        /* บังคับให้ชิดซ้ายสุด */
        margin-left: 0 !important; 
    }

    /* 1. ปรับขนาดชื่อหน่วยงาน (ภาษาไทย) */
    .site-title {
        font-size: 1.05rem !important; /* ลดขนาดลงมาพอเหมาะ */
        font-weight: 700 !important;
        line-height: 1.2 !important;
        display: block;
        letter-spacing: -0.5px;
    }

    /* 2. ปรับขนาดชื่อภาษาอังกฤษ (English Name) */
    .site-description {
        font-size: 0.7rem !important; /* ขนาดเล็กกะทัดรัด */
        font-weight: 400 !important;
        opacity: 0.8;
        display: block;
        letter-spacing: 0;
    }

    /* 3. จัดกลุ่มข้อความให้ชิดซ้ายและไม่เบียดขวามากเกินไป */
    .logo-text-group {
        margin-left: 8px;
        max-width: 250px; /* คุมความกว้างไม่ให้ไปชนปุ่ม 3 ขีด */
        white-space: nowrap;
    }

    /* 4. ปรับขนาดโลโก้ (ตราโล่) ให้เล็กลงนิดหน่อย */
    .custom-logo {
        height: 40px !important;
        width: auto !important;
    }
    
    .custom-page-header {
        margin-top: 0 !important;
    }

    /* จัดวาง Layout ใหม่ให้เป๊ะ */
    .police-header-fullwidth {
        padding: 10px 15px !important;
        height: 70px !important; /* ล็อกความสูงแถบให้ดูเพรียว */
    }

    .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        margin-top: 20px !important;
    }
}

/* --- ล็อกตำแหน่ง Header ให้เหมือนกันทั้งตอนเป็น Admin และหน้าปกติ --- */
@media screen and (max-width: 991px) {

    /* บังคับโครงสร้างหลักให้คงที่ */
    body.admin-bar .police-header-fullwidth {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 8px !important;
        /* ป้องกันธีมดัน margin ทิ้ง */
        margin-top: 0 !important; 
    }

    /* ล็อกตำแหน่งโลโก้ (ซ้ายสุด) */
    body.admin-bar .site-logo {
        display: flex !important;
        align-items: center !important;
        margin-left: 0 !important;
    }

    /* ล็อกตำแหน่งปุ่ม 3 ขีด (ขวาสุด) */
    body.admin-bar .menu-toggle {
        display: flex !important;
        margin-left: auto !important;
        margin-right: 5px !important;
        /* ดึงกลับมาอยู่ในระนาบเดียวกับโลโก้กรณีเจอ Admin Bar ดัน */
        position: relative !important;
        top: 0 !important;
    }

    /* กรณีแถบ Admin Bar ดันตัว Header ทั้งหมดลงมา (ให้ติดกับแถบดำพอดี) */
    /* ตอนเป็น Admin ให้ Header ขยับลงมาตามความสูงของแถบดำ */
    body.admin-bar .site-header {
        position: fixed !important;
        top: 46px !important;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 9999 !important;
        transition: top 0.2s ease-in-out; /* ใส่ความสมูทเวลาเลื่อนขึ้น-ลง */
    }

    /* คลาสพิเศษจาก JS: เมื่อเลื่อนจอลงและแถบแอดมินโดนซ่อน ให้ดึงขึ้นชิดขอบจอ 0 ทันที */
    body.admin-bar .site-header.admin-scrolled-top {
        top: 0 !important;
    }

    body.admin-bar .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        margin-top: 20px !important;
    }

    /* ป้องกันเนื้อหาหน้าหลักมุดหายตอนอยู่บนสุด */
    body.admin-bar #page, 
    body.admin-bar #content {
        padding-top: 0px !important; /* 46px (Admin Bar) + 70px (ความสูง Header) */
    }

    /* ดันเนื้อหาลงมาไม่ให้โดน Header ที่ลอยอยู่บัง */
    #content, #page {
        padding-top: 0px !important; 
    }

    @media screen and (max-width: 991px) {

        /* สั่งซ่อนเมนูแนวนอนของคอมพิวเตอร์ เพื่อเปิดทางให้ระบบมือถือ */
        .main-navigation {
            display: none !important;
        }

        .main-navigation-mobile {
            display: block !important;
            width: 100% !important;
            flex: 1 1 auto !important; /* ยืดหดตามพื้นที่หน้าจอที่เบราว์เซอร์เหลือให้ */
            min-height: 0 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            padding: 10px 0 20px 0 !important;
            box-sizing: border-box !important;
        }
        
        /* บังคับให้ปุ่ม 3 ขีดเดิมแสดงผลบนมือถือ */
        .menu-toggle {
            display: flex !important;
        }
    
        /* กล่องสไลด์เมนูจากฝั่งขวา (Off-Canvas Sidebar) */
        .mobile-offcanvas-menu {
            position: fixed !important;
            top: 0 !important;
            
            /* แก้ไขจุดนี้: เปลี่ยนจาก bottom: 75px กลับมาเป็นเกาะพื้นฐานล่างสุดที่ 0 */
            bottom: 0 !important; 
            
            right: -320px !important;
            width: 300px !important;
            
            /* สแตนบายค่าความสูงหน้าจอแบบไดนามิก */
            height: 100vh !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            
            background-color: #001a4d !important;
            z-index: 100000 !important;
            box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
            transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
            
            display: flex !important;
            flex-direction: column !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }

        body.admin-bar .mobile-offcanvas-menu {
            position: fixed !important;
            top: 46px !important; /* หลบใต้แอดมินบาร์ */
            right: -320px !important; /* ซ่อนไว้ฝั่งขวาเริ่มต้น */
            width: 300px !important;
            height: calc(100dvh - 46px) !important;
            max-height: calc(100dvh - 46px) !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }
    
        /* ==================================================
           2. เพิ่มชุดคำสั่งนี้: บังคับให้โหมด ADMIN ยอมเลื่อนเปิดออกมา
           ================================================== */
        body.admin-bar .mobile-offcanvas-menu.open {
            right: 0 !important; /* สั่งให้พุ่งออกมาแสดงผลฝั่งขวาพอดีหน้าจอ */
        }
    
        /* --- 3. ปรับโซนเมนูตรงกลาง (คงเดิมเพื่อบล็อกก้นมุด) --- */
        body.admin-bar .main-navigation-mobile {
            flex: 1 !important;
            height: auto !important;
            max-height: calc(100dvh - 46px - 140px) !important; 
            overflow-y: auto !important;
        }

        /* สั่งกางออกเมื่อคลิกปุ่ม 3 ขีด (ติดคลาส .open จาก JS) */
        .mobile-offcanvas-menu.open {
            right: 0 !important;
        }

        .menu-overlay.open {
            display: block !important;
            opacity: 1 !important;
        }
    
        /* หัวข้อ "เมนูหลัก" และปุ่มกากบาทปิด */
        .sidebar-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 25px 25px 20px 25px !important; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
    
        .sidebar-title {
            color: #ffffff !important;
            font-size: 1.3rem !important;
            font-weight: 700 !important;
        }
    
        .sidebar-close-btn {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
            color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer;
            font-size: 22px !important;
            padding: 0 !important;
        }

        .sidebar-footer {
            display: block !important;
            width: 100% !important;
            flex-shrink: 0 !important; /* ป้องกันไม่ให้โดนบีบแบน */
            margin-top: auto !important; /* ตรึงตำแหน่งไว้ที่ก้นกล่องเสมอ */
            
            /* เว้นระยะ Padding ภายในกล่องเพื่อดันตัวอักษรหนีขอบบาร์ขึ้นมา */
            padding: 20px 25px !important; 
            
            border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
            background-color: #00163f !important;
            box-sizing: border-box !important;
            
            /* ใช้ระยะปลอดภัยของระบบ (Safe Area) ในการดันตัวหนังสือหลบบาร์ OS อัตโนมัติ */
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
            -webkit-padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important;
        }
    
        .sidebar-footer p {
            margin: 0 !important;
            padding: 0 0 4px 0 !important;
            
            /* แก้ไขจุดนี้: เปลี่ยนจากสีเทาเข้มเดิม เป็นสีเทาอ่อนสว่าง (หรือใช้ #ffffff สว่างใส) */
            color: #abb3c4 !important; 
            
            font-size: 0.85rem !important;
            line-height: 1.4 !important;
            text-align: center !important;
            
            /* แถม: บังคับไม่ให้ระบบของ iOS/Safari แอบย้อมสีข้อความเป็นสีดำเอง */
            -webkit-text-fill-color: #abb3c4 !important; 
        }

        body.admin-bar .sidebar-footer {
            display: block !important;
            width: 100% !important;
            margin-top: auto !important;
            margin-bottom: 50px;
            flex-shrink: 0 !important;
            padding: 15px 25px !important;
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
            -webkit-padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important;
            background-color: #00163f !important;
            border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-sizing: border-box !important;
        }
    
        /* จัดรายการเมนูของ WordPress ให้เรียงแถวตอนลึกลงมาด้านล่าง */
        .main-navigation-mobile {
            display: block !important;
            width: 100% !important;
            
            /* จุดสำคัญ: สั่งเปิดพื้นที่ให้ยาวตามรายการเมนูจริง และเปิดระบบเลื่อนหน้าจอแนวตั้ง */
            flex: 1 !important;
            overflow-y: auto !important; 
            -webkit-overflow-scrolling: touch !important; /* บังคับให้รูดเลื่อนจอลื่นไหลสไตล์ iOS บน iPhone */
            
            /* เพิ่มระยะห่างด้านล่างสุด เผื่อพื้นที่นิ้วตอนรูดลงมาลึกสุด */
            padding: 15px 0 30px 0 !important; 
            box-sizing: border-box !important;
        }
    
        .nav-menu-mobile,
        .main-navigation-mobile ul {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            height: auto !important; /* ปล่อยให้ยาวตามธรรมชาติของจำนวนเมนู */
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
        }
    
        .nav-menu-mobile li {
            display: block !important;
            width: 100% !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        }
    
        .nav-menu-mobile li a {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
            padding: 16px 30px !important;
            color: #abb3c4 !important; /* สีเทาอ่อนเรียบหรู */
            font-size: 1.1rem !important;
            font-weight: 500 !important;
            text-decoration: none !important;
            text-align: left !important;
        }
    
        /* เอฟเฟกต์เวลาเอานิ้วสัมผัสเมนูย่อย */
        .nav-menu-mobile li a:hover {
            background: rgba(255, 255, 255, 0.03) !important;
            color: #ffffff !important;
            padding-left: 35px !important; /* ดันขวาเบาๆ */
        }
    
        /* ม่านดำฉากหลัง */
        .menu-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100vh !important;
            background: rgba(0, 0, 0, 0.6) !important;
            z-index: 99999 !important;
            display: none !important;
            opacity: 0;
        }
    
        .menu-overlay.open {
            display: block !important;
            opacity: 1 !important;
        }
    }


}

/* --- คุมหน้าจอโทรศัพท์ แท็บเล็ต และ iPad Pro ทุกรุ่น (กว้างไม่เกิน 1200px) --- */
@media screen and (min-width: 991px) and (max-width: 1440px) {
    
    /* 1. จัด Layout หลัก: ดันโลโก้ซ้าย ปุ่ม 3 ขีดขวา */
    .police-header-fullwidth {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        background: linear-gradient(180deg, #001a4d 0%, #003380 100%) !important;
        height: 75px !important;
        position: relative;
        overflow: visible !important; /* ป้องกันกล่องชั้นในบังเส้นสีเหลือง */
    }

    /* 2. ตั้งค่าการ Fixed ของ Header สำหรับคนทั่วไป */
    .site-header {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        top: 0 !important; /* ค่าเริ่มต้นสำหรับคนทั่วไป */
    }

    /* 3. ขนาดโลโก้และชื่อ สภ.อมก๋อย บนหน้าจอ iPad */
    .site-logo {
        display: flex !important;
        align-items: center !important;
    }

    .custom-logo {
        height: 50px !important;
        width: auto !important;
    }

    .logo-text-group {
        margin-left: 15px !important;
        white-space: nowrap;
    }

    .site-title {
        font-size: 1.25rem !important; /* ใหญ่ขึ้นเล็กน้อยให้สมส่วนกับจอ iPad */
        font-weight: 700 !important;
    }

    .site-description {
        font-size: 0.8rem !important;
    }

    /* บังคับตำแหน่งแถบความก้าวหน้าสีเหลืองทอง (Scroll Progress Bar) */
    .scroll-progress-bar {
        position: absolute !important;
        bottom: 0 !important; /* เกาะติดขอบล่างสุดของแถบสีน้ำเงิน */
        left: 0 !important;
        height: 4px !important; /* ความหนาของเส้น */
        background-color: #ffde00 !important; /* สีทองอร่ามตามธีม */
        z-index: 1005 !important; /* อยู่เหนือชั้นสีน้ำเงินขึ้นมา */
    }

    /* 4. เปิดใช้งานปุ่ม 3 ขีดสีขาวประจำการฝั่งขวาสุด */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: auto !important;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #ffffff !important;
        border-radius: 5px;
    }

    /* 5. ซ่อนเมนูปกติไม่ให้ล้นบนจอ iPad */
    .main-navigation {
        display: none !important;
    }


    /* --------------------------------------------------
       SECTION: จัดการหน้าจอ ADMIN สำหรับช่วงไม่เกิน 1200px
    -------------------------------------------------- */
    
    /* ตอนอยู่บนสุด: ให้ Header ต่อท้ายแถบเครื่องมือ Admin */
    body.admin-bar .site-header {
        top: 32px !important; /* ล็อกค่า 32px ตามขนาดจริง */
    }

    /* ดันพื้นที่เนื้อหาลงมา ไม่ให้ Header บังตอนอยู่บนสุด */
    body.admin-bar #page, 
    body.admin-bar #content {
        padding-top: 107px !important; 
    }

    .admin-bar .custom-page-header {
        padding-top: 135px !important;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar #page, 
        body.admin-bar #content {
            padding-top: 167px !important; /* 92px (Admin Bar 2 บรรทัด) + 75px (Header) */
        }
    }
}


/* ==========================================================================
   FORCE FIX: จัดรูปแบบตัวหนังสือเมนูด้านในสำหรับ iPad / Tablet ใน "แนวนอน"
   วางโค้ดชุดนี้ไว้ล่างสุดของไฟล์ CSS เสมอ เพื่อบังคับให้มีรูปแบบสวยงาม
   ========================================================================== */
   @media screen and (max-width: 1440px) and (orientation: landscape) {

    /* --- 1. ซ่อนเมนูแนวนอนคอมพิวเตอร์เดิมทิ้งให้มิด --- */
    .main-navigation, 
    .nav-menu, 
    #site-navigation,
    div.menu,
    .nav-menu-desktop,
    #site-navigation ul,
    .menu-main-menu-container {
        display: none !important;
    }

    /* --- 2. เปิดปุ่ม 3 ขีดบนไอแพดแนวนอน --- */
    .menu-toggle {
        display: flex !important;
    }

    /* --- 3. จัดการโครงสร้างกล่องใหญ่สไลด์ขวา --- */
    .mobile-offcanvas-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: -320px !important;
        width: 300px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background-color: #001a4d !important;
        z-index: 999999 !important; 
        box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-offcanvas-menu.open {
        right: 0 !important;
    }

    /* --- 4. จัดการระยะเมื่อเป็น ADMIN บนไอแพดแนวนอน --- */
    body.admin-bar .mobile-offcanvas-menu {
        top: 32px !important; 
        height: calc(100dvh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
    }
    body.admin-bar .mobile-offcanvas-menu.open {
        right: 0 !important;
    }

    /* --- 5. โซนแผงรายชื่อเมนูตรงกลาง (จำกัดความสูงและเปิดรูดเลื่อน) --- */
    .main-navigation-mobile {
        display: block !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: calc(100dvh - 140px) !important; 
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 0 15px 0 !important;
        box-sizing: border-box !important;
    }
    body.admin-bar .main-navigation-mobile {
        max-height: calc(100dvh - 32px - 130px) !important; 
    }

    /* ==================================================
       6. เพิ่มเติม: เสริมรูปแบบ (Style) ให้รายการเมนูด้านในยอมเรียงแถวสวยงาม
       ================================================== */
    .nav-menu-mobile,
    .main-navigation-mobile ul {
        display: flex !important;
        flex-direction: column !important; /* บังคับต่อแถวแนวตั้ง */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .main-navigation-mobile ul li {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; /* เส้นคั่นระหว่างเมนูบางๆ */
    }

    /* ตกแต่งลิงก์ตัวอักษรเมนูย่อยให้มีช่องไฟและสว่างขึ้น */
    .main-navigation-mobile ul li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 25px !important; /* ระยะห่างช่องไฟของแต่ละเมนู */
        color: #abb3c4 !important; /* สีเทาอ่อนสวยงามเหมือนเวอร์ชันมือถือ */
        -webkit-text-fill-color: #abb3c4 !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-align: left !important;
        transition: all 0.2s ease;
        background: transparent !important;
    }

    /* เอฟเฟกต์เวลาเมาส์ชี้หรือนิ้วสัมผัสเมนู */
    .main-navigation-mobile ul li a:hover {
        background: rgba(255, 255, 255, 0.03) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        padding-left: 30px !important; /* ดันขวาเบาๆ เพิ่มลูกเล่น */
    }

    /* --- จัดการตำแหน่งปุ่มกากบาทปิด (X) ให้แสดงผลถูกต้องในจอแนวนอน --- */
    .sidebar-close-btn {
        background: rgba(255, 255, 255, 0.1) !important; /* พื้นหลังวงกลมขาวโปร่งแสง */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        width: 38px !important;  /* ขยายขนาดให้จิ้มนิ้วง่ายขึ้น */
        height: 38px !important;
        border-radius: 50% !important; /* บังคับรูปทรงวงกลม */
        color: #ffffff !important; /* ตัวกากบาทสีขาวเคลียร์ */
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        position: relative !important;
        z-index: 9999999 !important; /* ดันเลเยอร์ปุ่ม X ให้ลอยอยู่เหนือทุกสิ่งในกล่องสไลด์ */
        cursor: pointer !important;
        padding: 0 !important;
        font-size: 24px !important; /* ปรับขนาดตัวกากบาท */
        line-height: 1 !important;
    }

    /* ตกแต่งส่วนหัวกล่อง มั่นใจว่าเปิดพื้นที่พอให้ปุ่มปิดแสดงตัว */
    /* --- จัดการตัวหนังสือคำว่า "เมนูหลัก" ให้สว่างเด่นชัดในจอแนวนอน --- */
    .sidebar-header h3,
    .sidebar-header h5,
    .sidebar-header .sidebar-title,
    .sidebar-header span {
        color: #ffffff !important; /* บังคับเปลี่ยนตัวหนังสือเป็นสีขาวเคลียร์ */
        -webkit-text-fill-color: #ffffff !important; /* บังคับสีบน Safari / iOS */
        font-size: 1.2rem !important; /* ปรับขนาดอักษรหัวข้อให้พอดีตา */
        font-weight: 600 !important; /* เพิ่มความหนาให้ดูเป็นระเบียบ */
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        background: transparent !important; /* ล้างแบคกราวด์ที่อาจหลุดมาจากธีมเดิม */
        text-decoration: none !important; /* มั่นใจว่าไม่มีเส้นใต้ */
    }

    /* ตรวจสอบโครงสร้างส่วนหัว (ขยายระดับ z-index เผื่อไว้) */
    .sidebar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px 25px !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background-color: #001a4d !important; 
        position: relative !important;
        z-index: 9999999 !important; /* ดันทั้งแถวหัวข้อให้ลอยพ้นแถบแอดมินบาร์ */
        box-sizing: border-box !important;
    }

    /* --- 7. กล่องข้อความลิขสิทธิ์ก้นเมนู --- */
    .sidebar-footer {
        display: block !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        padding: 12px 25px !important;
        background-color: #00163f !important; 
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-sizing: border-box !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        -webkit-padding-bottom: calc(15px + constant(safe-area-inset-bottom)) !important;
    }

    .sidebar-footer p,
    .sidebar-footer span,
    .sidebar-footer a {
        margin: 0 !important;
        padding: 0 0 2px 0 !important;
        color: #636e82 !important; /* สีเทาเข้มเรียบหรู ไม่แย่งสายตา */
        -webkit-text-fill-color: #636e82 !important;
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}


/* --- สำหรับหน้าจอไอแพด/แท็บเล็ต แนวตั้ง (เมื่อล็อกอินเป็น Admin) --- */
@media screen and (max-width: 1024px) {
    
    body.admin-bar .site-header {
        /* ขยายกล่อง Header ให้ครอบคลุมตั้งแต่ขอบบนสุดของจอภาพ (0px) เพื่อเตรียมพื้นที่หลัง */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* เทคนิคพิเศษ: ใส่ Pseudo-element (แผ่นพื้นหลังจำลอง) วิ่งขึ้นไปถมพื้นที่ด้านบนจนถึง 0px */
    body.admin-bar .site-header::before {
        content: "";
        position: absolute;
        /* ถมขึ้นไปด้านบนสุดของจอภาพครอบส่วนที่เป็นแถบ Admin */
        top: -100px; 
        left: 0;
        right: 0;
        height: 100px; /* ความหนาของผืนหลังที่ยืดขึ้นไป */
        /* ใช้สีน้ำเงินไล่เฉดเดียวกับ Header ของ สภ.อมก๋อย */
        background: #001a4d !important; 
        z-index: -1; /* ซ่อนไว้ข้างหลังข้อความและโลโก้ */
        display: block;
    }
}



/* --- สำหรับหน้าจอคอมพิวเตอร์ขนาดใหญ่จริงๆ (เริ่มต้นที่ 1441px ขึ้นไป) --- */
@media screen and (min-width: 1441px) {
    body.admin-bar #page, 
    body.admin-bar #content {
        padding-top: 0px !important; /* คืนค่าหน้าจอคอมตามที่คุณ Pop เทสไว้ก่อนหน้า */
    }
    
    body.admin-bar .site-header {
        top: 32px !important;
    }

    .menu-toggle {
        display: none !important;
    }

    body.admin-bar .site-header {
        top: 32px !important;
        position: fixed !important;
    }

    body.admin-bar #page, 
    body.admin-bar #content {
        padding-top: 30px !important; 
    }

    .main-navigation {
        display: block !important;
    }
    .menu-toggle {
        display: none !important; /* ซ่อนปุ่ม 3 ขีดบนคอม */
    }
    
    /* สั่งซ่อนระบบเมนูด้านข้างของมือถือ ไม่ให้มาโผล่บนจอคอม */
    .mobile-offcanvas-menu,
    .menu-overlay {
        display: none !important;
    }
}



/* ==========================================================================
   ELEMENTOR FULL WIDTH SUPPORT
   ========================================================================== */

/* เคลียร์ช่องว่างเริ่มต้นของเบราว์เซอร์ */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* จัดการส่วนเนื้อหาหลักให้รองรับ Header ที่เป็น Fixed */
.site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
}


/* ลบ Container พื้นฐานของ WordPress ออกเพื่อให้ Elementor คุมเอง */
.content-area {
    width: 100%;
}


/* ==========================================================================
   PAGE HEADER REBOOT (เริ่มใหม่: ต่อล่างเมนู กึ่งกลางเป๊ะ ไม่จม)
   ========================================================================== */


/* --- แก้ไขระยะห่างหน้า Archive สำหรับ Admin --- */

/* เมื่อมีการแสดงผล Admin Bar (แถบดำด้านบน) */
body.admin-bar .custom-page-header {
    /* ขยับขึ้นไปชิด Admin Bar โดยการลบ margin/padding ที่ธีมอาจจะแถมมา */
    margin-top: 0 !important;
}

/* หากหน้า Archive มีระยะห่างจากด้านบน (Header เว็บหลัก) มากเกินไป */
body.admin-bar .site-content, 
body.admin-bar #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* วิธีแก้แบบเด็ดขาด: ถ้าธีมใช้การดัน padding ที่ body */
body.admin-bar {
    padding-top: 0 !important; /* ให้เหลือพื้นที่แค่เท่ากับแถบดำพอดี */
}


/* 1. จัดระเบียบเนื้อหาหลัก ไม่ให้มี Margin/Padding ที่ค้างมาจากโค้ดเก่า */
.site-main {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. สร้างกล่อง Page Header ใหม่แบบ Block (ต่อท้ายเมนูตามธรรมชาติ) */
.custom-page-header {
    width: 100% !important;
    position: relative !important;
    z-index: 10;
    margin-top: 0 !important;
    display: block;
    
    /* บังคับความหนารวมของกล่อง (เพิ่มให้หนาขึ้นเพื่อให้กึ่งกลางชัดเจน) */
    min-height: 200px !important; 

    /* ระบบ Flexbox สำหรับจัดกึ่งกลาง */
    display: flex !important;
    flex-direction: column !important; /* จัดแนวตั้ง */
    justify-content: flex-end !important; /* ดันเนื้อหาลงไปด้านล่างของกล่อง */
    align-items: center !important;    /* จัดแนวนอนกึ่งกลาง */

    /* พื้นหลังสีน้ำเงินเข้มและเส้นเหลือง */
    background: linear-gradient(180deg, #001a4d 0%, #003380 100%) !important;
    border-bottom: 4px solid #ffde00 !important;

    /* ระยะห่างด้านล่าง (เพื่อไม่ให้ชื่อชิดเส้นสีเหลืองเกินไป) */
    padding-bottom: 40px !important;
    margin: 0 !important;

    padding: 60px 0 10 !important;
    text-align: center;
    margin-top: 0 !important; /* บังคับชิดขอบบนเสมอ */
}

/* กรณีล็อกอิน Admin ให้ดันเพิ่มอีกนิดเพื่อหลบแถบดำ 
.admin-bar .custom-page-header {
    padding-top: 35px !important;
}*/

.custom-page-title {
    font-family: 'Prompt', sans-serif !important;
    color: #ffde00 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    text-align: center !important;
    text-shadow: none !important;
    
    /* ดึงตัวหนังสือให้ลงมาห่างจากเมนู Header */
    /* ถ้ายังไม่กลาง ให้เพิ่มตัวเลข 20px นี้ขึ้นครับ */
    margin-top: 20px !important; 
}

/* 4. กรณีหน้าแรก (Front Page) ไม่ต้องแสดงแถบนี้ */
.home .custom-page-header {
    display: none !important;
}

@media screen and (max-width: 932px) {
    body.admin-bar {
        padding-top: 46px !important; /* สำหรับมือถือที่แถบดำสูงกว่าปกติ */
    }

    .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        margin-top: 20px !important; 
    }
}


/* บังคับให้ Header ของเราขึ้นไปชิด Admin Bar พอดี */
@media (min-width: 601px) {
    body.admin-bar .custom-page-header {
        top: 0; /* ความสูงของ Admin Bar มาตรฐาน */
        padding-top: 135px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .custom-page-header {
        top: 46px; /* ความสูงของ Admin Bar บนมือถือ */
    }

    .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        
        /* ดึงตัวหนังสือให้ลงมาห่างจากเมนู Header */
        /* ถ้ายังไม่กลาง ให้เพิ่มตัวเลข 20px นี้ขึ้นครับ */
        margin-top: 20px !important; 
    }
}


@media screen and (max-width: 1024px) {
    
    .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        margin-top: 20px !important; 
    }
}
@media screen and (max-width: 1200px) {
    
    .custom-page-title {
        font-family: 'Prompt', sans-serif !important;
        color: #ffde00 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 20px !important;
        text-align: center !important;
        text-shadow: none !important;
        margin-top: 20px !important; 
    }
}

/* ==========================================================================
   ENTRY CONTENT SPACING (เพิ่มระยะห่างก่อนเริ่มเนื้อหา)
   ========================================================================== */

   .entry-content {
    width: 100% !important;
    /* เพิ่มระยะห่างด้านบน 40px หรือปรับได้ตามความชอบครับ */
    padding-top: 20px !important; 
    padding-bottom: 60px !important; /* เผื่อระยะด้านล่างไว้ด้วยเพื่อให้ดูโปร่ง */
}

/* หากต้องการให้เนื้อหาในหน้าที่ไม่ได้ใช้ Elementor มีขอบซ้ายขวาที่สวยงาม */
.entry-content:not(.elementor-content) {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* ==========================================================================
   CATEGORY & NEWS GRID STYLE
   ========================================================================== */

/* จัด Layout ข่าวเป็น 3 คอลัมน์ */
.news-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 30px !important;
}

/* สไตล์การ์ดข่าว */
.news-card {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.news-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* รูปหน้าปกข่าว */
.news-thumb img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.news-card:hover .news-thumb img {
    transform: scale(1.1) !important;
}

/* ข้อมูลในข่าว */
.news-info {
    padding: 25px !important;
}

.news-date {
    font-size: 0.85rem !important;
    color: #888 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.news-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.news-title a {
    color: #001C59 !important;
    text-decoration: none !important;
}

/* --- ปรับปรุงส่วน news-excerpt ใน style.css --- */

.news-excerpt {
    font-family: 'Prompt', sans-serif !important;
    color: #666 !important;
    font-size: 15px !important; /* ใช้ค่า px เพื่อความเสถียร */
    margin-bottom: 15px !important;
    
    /* บังคับระยะบรรทัดและการตัดคำ */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.6em !important;
    text-overflow: ellipsis !important;
    
    /* ล็อกความสูงรวม 2 บรรทัด (24px * 2 = 48px) */
    height: 48px !important; 
    max-height: 48px !important;
    
    /* ป้องกัน Edge ดึงค่า white-space แปลกๆ มาใช้ */
    white-space: normal !important; 
}

/* --- เจาะจงเฉพาะ Microsoft Edge Chromium --- */
@supports (-ms-ime-align:auto) or (-webkit-mask:none) {
    .news-excerpt {
        /* บังคับระยะบรรทัดเป็นพิกเซลเพื่อให้ Edge ประมวลผลภาษาไทยได้แม่นยำ */
        line-height: 24px !important;
        height: 48px !important; 
        max-height: 48px !important;
    }
}

.read-more {
    color: #002855 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    border-bottom: 2px solid #ffde00 !important;
}

/* ระบบเปลี่ยนหน้า */
.police-pagination {
    margin-top: 50px !important;
    text-align: center !important;
}

.police-pagination .nav-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.police-pagination a, .police-pagination span {
    padding: 10px 18px !important;
    background: #fff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #001C59 !important;
    border: 1px solid #ddd !important;
}

.police-pagination .current {
    background: #ffde00 !important;
    border-color: #ffde00 !important;
    font-weight: bold !important;
}

/* ==========================================================================
   -------------------------------- Site Post -------------------------------
   ========================================================================== */

/* การจัดวางแบบ Grid สำหรับหน้าข่าว */
/* จัดการ Font และความหนา */
.card-title a {
    font-family: 'Prompt', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* จำกัดหัวข้อไม่ให้ยาวเกิน 2 บรรทัด */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ปุ่มอ่านเพิ่มเติมสีเหลือง DAA520 ตามที่ขอไว้ */
.btn-read-more {
    display: inline-block !important;
    padding: 6px 20px !important;
    color: #DAA520 !important;
    border: 2px solid #DAA520 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
}

.btn-read-more:hover {
    background: #DAA520 !important;
    color: #ffffff !important;
}

/* แก้ไขปัญหาการ์ดไม่เท่ากัน */
.card {
    transition: transform 0.3s ease !important;
}

.card:hover {
    transform: translateY(-5px) !important;
}


/* ==========================================================================
   -------------------------------- Site Footer -------------------------------
   ========================================================================== */

   
/* --- Police Theme Dark Blue Footer Styles --- */
.site-footer {
    background-color: #001C59; /* สีน้ำเงินเข้มกรมท่าตามที่ระบุ */
    color: #ffffff;            /* ตัวอักษรสีขาว */
    padding: 40px 0 0 0;       /* ขยับ Padding ด้านบนเพิ่มเล็กน้อยเพื่อให้ 3 คอลัมน์ดูไม่เบียดกันเกินไป */
    font-family: 'Prompt', sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff; /* ปรับหัวข้อเป็นสีขาว */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

/* เส้นใต้หัวข้อแบบมินิมอล (ปรับเป็นสีฟ้าอ่อนเพื่อให้ตัดกับพื้นหลังกรมท่า) */
.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 20px;
    border-bottom: 2px solid #38B2AC; 
}

.footer-content p {
    margin-bottom: 10px;
    line-height: 1.7;
    color: #E2E8F0; /* ปรับสี text ย่อยให้เป็นขาวอมเทาเล็กน้อย เพื่อความสบายตาในการอ่าน */
}

.footer-content strong {
    color: #ffffff;
}

/* ส่วนสถิติผู้เข้าชม */
.site-statistics {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2); /* เปลี่ยนเป็นเส้นประโปร่งแสง */
}

.footer-title-sub {
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 8px;
}

/* เมนูลิงก์ใน Footer (ใช้ตามที่คุณกำหนด) */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #E2E8F0; /* สีลิงก์ตอนปกติ */
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
    color: #63B3ED; /* ไฮไลต์สีฟ้าอ่อนตอนเอาเมาส์ชี้ */
    padding-left: 4px;
}

/* ส่วนล่างสุดลิขสิทธิ์ */
.footer-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* เส้นแบ่งโปร่งแสง */
    text-align: center;
    font-size: 0.8rem;
    color: #A0AEC0;
    line-height: 1.6;
}

/* --- ตกแต่งระบบแผงสถิติผู้เข้าชมเว็บไซต์ (เวอร์ชันคอลัมน์เดียวเรียงดิ่ง) --- */
.site-statistics {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-title-sub {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

/* บังคับให้เป็นคอลัมน์เดียวเรียงตัวลงมาในทุกขนาดหน้าจอ */
.stats-grid {
    display: flex !important;
    flex-direction: column !important; /* บังคับเรียงแนวดิ่งตอนลึก */
    gap: 10px; /* เพิ่มระยะห่างระหว่างกล่องให้ดูโปร่ง จิ้มง่ายอ่านสบายตา */
    width: 100% !important;
}

.stats-item {
    display: flex !important;
    justify-content: space-between !important; /* จัดป้ายชื่อไว้ซ้าย ตัวเลขไว้ขวา */
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 12px 18px !important; /* ขยายพื้นที่กล่องให้ดูเต็มสวยงาม */
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-sizing: border-box !important;
}

.stats-label {
    color: #abb3c4 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.stats-count {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* กล่องออนไลน์สีเขียวเด่นชัดแบบเรียลไทม์ */
.stats-online-box {
    background: rgba(34, 197, 94, 0.04) !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
}
.stats-online-box .stats-count {
    color: #22c55e !important;
}

/* จุดกะพริบสีเขียวออนไลน์ */
.online-pulse {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* กล่องยอดรวมทั้งหมด */
.stats-total-box {
    background: rgba(56, 189, 248, 0.05) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
}
.stats-total-box .stats-count {
    color: #38bdf8 !important;
}

/* การจัดสเปซขยับแบ่งคอลัมน์บนไอแพดและคอมพิวเตอร์ */
@media screen and (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .site-header-container {
        padding: 12px 20px !important;
        background-color: rgba(0, 28, 89, 0.9) !important;
    }
}
@media screen and (max-width: 1024px) {
    /* สั่งซ่อนเมนูแนวนอนของคอมพิวเตอร์ เพื่อเปิดทางให้ระบบมือถือ */
    .main-navigation {
        display: none !important;
    }

    .main-navigation-mobile {
        display: block !important;
        width: 100% !important;
        flex: 1 1 auto !important; /* ยืดหดตามพื้นที่หน้าจอที่เบราว์เซอร์เหลือให้ */
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 0 20px 0 !important;
        box-sizing: border-box !important;
    }
    
    /* บังคับให้ปุ่ม 3 ขีดเดิมแสดงผลบนมือถือ */
    .menu-toggle {
        display: flex !important;
    }

    /* กล่องสไลด์เมนูจากฝั่งขวา (Off-Canvas Sidebar) */
    .mobile-offcanvas-menu {
        position: fixed !important;
        top: 0 !important;
        
        /* แก้ไขจุดนี้: เปลี่ยนจาก bottom: 75px กลับมาเป็นเกาะพื้นฐานล่างสุดที่ 0 */
        bottom: 0 !important; 
        
        right: -320px !important;
        width: 300px !important;
        
        /* สแตนบายค่าความสูงหน้าจอแบบไดนามิก */
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        
        background-color: #001a4d !important;
        z-index: 100000 !important;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.admin-bar .mobile-offcanvas-menu {
        position: fixed !important;
        top: 46px !important; /* หลบใต้แอดมินบาร์ */
        right: -320px !important; /* ซ่อนไว้ฝั่งขวาเริ่มต้น */
        width: 300px !important;
        height: calc(100dvh - 46px) !important;
        max-height: calc(100dvh - 46px) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* ==================================================
       2. เพิ่มชุดคำสั่งนี้: บังคับให้โหมด ADMIN ยอมเลื่อนเปิดออกมา
       ================================================== */
    body.admin-bar .mobile-offcanvas-menu.open {
        right: 0 !important; /* สั่งให้พุ่งออกมาแสดงผลฝั่งขวาพอดีหน้าจอ */
    }

    /* --- 3. ปรับโซนเมนูตรงกลาง (คงเดิมเพื่อบล็อกก้นมุด) --- */
    body.admin-bar .main-navigation-mobile {
        flex: 1 !important;
        height: auto !important;
        max-height: calc(100dvh - 46px - 140px) !important; 
        overflow-y: auto !important;
    }

    /* สั่งกางออกเมื่อคลิกปุ่ม 3 ขีด (ติดคลาส .open จาก JS) */
    .mobile-offcanvas-menu.open {
        right: 0 !important;
    }

    .menu-overlay.open {
        display: block !important;
        opacity: 1 !important;
    }

    /* หัวข้อ "เมนูหลัก" และปุ่มกากบาทปิด */
    .sidebar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 25px 25px 20px 25px !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .sidebar-title {
        color: #ffffff !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
    }

    .sidebar-close-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        font-size: 22px !important;
        padding: 0 !important;
    }

    .sidebar-footer {
        display: block !important;
        width: 100% !important;
        flex-shrink: 0 !important; /* ป้องกันไม่ให้โดนบีบแบน */
        margin-top: auto !important; /* ตรึงตำแหน่งไว้ที่ก้นกล่องเสมอ */
        
        /* เว้นระยะ Padding ภายในกล่องเพื่อดันตัวอักษรหนีขอบบาร์ขึ้นมา */
        padding: 20px 25px !important; 
        
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        background-color: #00163f !important;
        box-sizing: border-box !important;
        
        /* ใช้ระยะปลอดภัยของระบบ (Safe Area) ในการดันตัวหนังสือหลบบาร์ OS อัตโนมัติ */
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        -webkit-padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important;
    }

    .sidebar-footer p {
        margin: 0 !important;
        padding: 0 0 4px 0 !important;
        
        /* แก้ไขจุดนี้: เปลี่ยนจากสีเทาเข้มเดิม เป็นสีเทาอ่อนสว่าง (หรือใช้ #ffffff สว่างใส) */
        color: #abb3c4 !important; 
        
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        
        /* แถม: บังคับไม่ให้ระบบของ iOS/Safari แอบย้อมสีข้อความเป็นสีดำเอง */
        -webkit-text-fill-color: #abb3c4 !important; 
    }

    body.admin-bar .sidebar-footer {
        display: block !important;
        width: 100% !important;
        margin-top: auto !important;
        margin-bottom: 50px;
        flex-shrink: 0 !important;
        padding: 15px 25px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        -webkit-padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important;
        background-color: #00163f !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-sizing: border-box !important;
    }

    /* จัดรายการเมนูของ WordPress ให้เรียงแถวตอนลึกลงมาด้านล่าง */
    .main-navigation-mobile {
        display: block !important;
        width: 100% !important;
        
        /* จุดสำคัญ: สั่งเปิดพื้นที่ให้ยาวตามรายการเมนูจริง และเปิดระบบเลื่อนหน้าจอแนวตั้ง */
        flex: 1 !important;
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch !important; /* บังคับให้รูดเลื่อนจอลื่นไหลสไตล์ iOS บน iPhone */
        
        /* เพิ่มระยะห่างด้านล่างสุด เผื่อพื้นที่นิ้วตอนรูดลงมาลึกสุด */
        padding: 15px 0 30px 0 !important; 
        box-sizing: border-box !important;
    }

    .nav-menu-mobile,
    .main-navigation-mobile ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important; /* ปล่อยให้ยาวตามธรรมชาติของจำนวนเมนู */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .nav-menu-mobile li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .nav-menu-mobile li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 30px !important;
        color: #abb3c4 !important; /* สีเทาอ่อนเรียบหรู */
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-align: left !important;
    }

    /* เอฟเฟกต์เวลาเอานิ้วสัมผัสเมนูย่อย */
    .nav-menu-mobile li a:hover {
        background: rgba(255, 255, 255, 0.03) !important;
        color: #ffffff !important;
        padding-left: 35px !important; /* ดันขวาเบาๆ */
    }

    /* ม่านดำฉากหลัง */
    .menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 99999 !important;
        display: none !important;
        opacity: 0;
    }

    .menu-overlay.open {
        display: block !important;
        opacity: 1 !important;
    }
}


/* ==================================================
    ------------ Login Page Container ------------
   ================================================== */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    background: transparent;
}

#officer-login-form {
    background: #0c1d3d; /* สีน้ำเงินเข้มเดียวกับ Mega Menu */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border-top: 5px solid #ffde00; /* ขอบเหลืองแบบเอกลักษณ์ สภ. */
    width: 100%;
    max-width: 400px;
    text-align: center;
}

#officer-login-form h2 {
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 700;
}

/* --- Input Fields --- */
#officer-login-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #ffffff;
    font-size: 1rem;
    transition: 0.3s;
}

#officer-login-form input:focus {
    outline: none;
    border-color: #ffde00;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Button --- */
#officer-login-form button {
    width: 100%;
    padding: 15px;
    background: #ffde00;
    border: none;
    border-radius: 10px;
    color: #001a4d;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

#officer-login-form button:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 222, 0, 0.3);
}

/* Responsive adjustment */
@media (max-width: 480px) {
    #officer-login-form { padding: 30px 20px; }
}


/* ==================================================
   ------------ Dashboard Header Styles ------------
   ================================================== */

/* ซ่อน Header หลักเฉพาะในหน้า Dashboard */
.page-template-page-dashboard .site-header {
    display: none !important;
}

/* ปรับระยะห่าง Dashboard Header ให้ชิดขอบบน */
.page-template-page-dashboard .dashboard-header {
    margin-top: 0 !important;
}

.dashboard-header {
    background-color: #001C59; /* สีน้ำเงินเข้ม สภ.อมก๋อย */
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #ffde00; /* ขอบสีเหลืองตามธีม */
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.dashboard-header .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.2rem;
}

.dashboard-header .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.officer-info {
    text-align: right;
}

.officer-info .name {
    display: block;
    font-weight: 700;
}

.officer-info .position {
    display: block;
    font-size: 0.85rem;
    color: #ffde00; /* สีเหลืองทอง */
}

.logout-btn {
    padding: 8px 16px;
    background: #ffde00;
    color: #001C59 !important;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: 0.3s;
}

.logout-btn:hover {
    background: #ffffff;
}

/* --- Dashboard Main Content --- */
.dashboard-main {
    background-color: #f8f9fa;
    padding: 40px 20px;
    min-height: 80vh;
}

.dashboard-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .dashboard-header { padding: 15px 20px; }
    .officer-info { display: none; } /* ซ่อนตำแหน่งบนมือถือเพื่อประหยัดที่ */
}

/* ==================================================
   DASHBOARD CUSTOM STYLES 
   ================================================== */

.page-template-page-dashboard .site-header {
    display: none !important;
}
.dashboard-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #eef2f7;
    margin-bottom: 1rem;
}

.dashboard-card h3 {
    color: #001C59;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}


#add-post-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#add-post-form input, #add-post-form select, #add-post-form textarea {
    width: 100%;
    padding: 14px;
    margin: 10px 0 20px 0;
    border: 1px solid #d1d9e6;
    border-radius: 12px;
    background: #fcfcfc;
    transition: 0.3s;
}

#add-post-form input:focus { border-color: #001C59; outline: none; }

#add-post-form label {
    font-weight: 600;
    color: #555;
    margin-top: 10px;
}

#add-post-form button {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #001C59, #0033a0);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s transform;
}
#add-post-form button:active { transform: scale(0.98); }

#add-post-form button:hover {
    background: #ffde00;
    color: #001C59;
}


#post-status {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
}


@media (max-width: 600px) {
    .dashboard-card {
        margin: 20px 10px;
        padding: 20px;
    }
}

#loader-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.9); 
    z-index: 9999; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
}
.toast { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    padding: 15px 30px; 
    background: #001C59; 
    color: #fff; 
    border-radius: 10px; 
    z-index: 10000; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}

.upload-box {
    border: 2px dashed #001C59;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 20px;
}
.upload-box:hover { 
    background: #eef2f7; 
    border-color: #ffde00; 
}

.preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    min-height: 50px;
    align-items: center;
    color: #888;
}
.preview-area img {
    max-width: 100px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.gallery-image {
    max-width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}
.entry-content br {
    display: none !important;
}

label {
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    display: block;
    font-size: 0.9em;
}

input[type="text"], input[type="file"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box; /* สำคัญ: ป้องกัน input ล้นขอบ */
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 5px rgba(0,115,170,0.2);
}

/* ปรับ Grid ให้รองรับมือถือ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

#slider-table { width: 100%; border-collapse: collapse; }
#slider-table th, #slider-table td { 
    padding: 10px; 
    border-bottom: 1px solid #eee; 
}
/* ทำให้ input ในตารางดูสวยขึ้น */
#slider-table input[type="text"] {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
}