.elementor-1308 .elementor-element.elementor-element-1d6520d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-1308 .elementor-element.elementor-element-fc9dc7f{--display:flex;}.elementor-1308 .elementor-element.elementor-element-f8c361a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1308 .elementor-element.elementor-element-5f628a7{--display:flex;}.elementor-1308 .elementor-element.elementor-element-53f354f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1308 .elementor-element.elementor-element-b421c8f{--display:flex;}.elementor-1308 .elementor-element.elementor-element-c93dc8d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1308 .elementor-element.elementor-element-049f3dd{--display:flex;}.elementor-1308 .elementor-element.elementor-element-5b75f9f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1308 .elementor-element.elementor-element-a800d41{--display:flex;}.elementor-1308 .elementor-element.elementor-element-5d32089{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1308 .elementor-element.elementor-element-925e3a3{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-font-size:14px;}.elementor-1308 .elementor-element.elementor-element-925e3a3.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#7D1925;}.elementor-1308 .elementor-element.elementor-element-925e3a3.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1308 .elementor-element.elementor-element-925e3a3.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#7D1925;}.elementor-1308 .elementor-element.elementor-element-925e3a3.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Noto Sans Thai", Sans-serif;font-weight:600;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1308 .elementor-element.elementor-element-bfab3d7{width:100%;max-width:100%;}.elementor-1308 .elementor-element.elementor-element-bdc62bb{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-1308 .elementor-element.elementor-element-fc9dc7f{--width:80%;}}/* Start custom CSS for shortcode, class: .elementor-element-0adb71e *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-0adb71e {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-0adb71e select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-0adb71e select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-0adb71e select:focus,
.elementor-1308 .elementor-element.elementor-element-0adb71e select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-0adb71e option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-0adb71e select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bfab3d7 */.elementor-1308 .elementor-element.elementor-element-bfab3d7 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bb188ca */.elementor-1308 .elementor-element.elementor-element-bb188ca {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bdc62bb *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus,
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-bdc62bb option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-bdc62bb select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Media Query สำหรับมือถือ */
/* Scroll เฉพาะตารางบนมือถือ */
@media (max-width: 480px) {
    .volunteer-table-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-table-wrapper table {
        min-width: 600px; /* ให้ table กว้างตาม column */
        border-collapse: collapse;
    }

    .volunteer-table-wrapper th,
    .volunteer-table-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกันข้อความ wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-282a8a4 *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus,
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-282a8a4 option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-282a8a4 select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Scroll เฉพาะตาราง volunteer_statistics บนมือถือ */
@media (max-width: 480px) {
    .volunteer-statistics-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-statistics-wrapper table {
        min-width: 600px; /* กว้างพอสำหรับทุก column */
        border-collapse: collapse;
    }

    .volunteer-statistics-wrapper th,
    .volunteer-statistics-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกัน wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bfab3d7 */.elementor-1308 .elementor-element.elementor-element-bfab3d7 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bb188ca */.elementor-1308 .elementor-element.elementor-element-bb188ca {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bdc62bb *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus,
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-bdc62bb option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-bdc62bb select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Media Query สำหรับมือถือ */
/* Scroll เฉพาะตารางบนมือถือ */
@media (max-width: 480px) {
    .volunteer-table-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-table-wrapper table {
        min-width: 600px; /* ให้ table กว้างตาม column */
        border-collapse: collapse;
    }

    .volunteer-table-wrapper th,
    .volunteer-table-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกันข้อความ wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-282a8a4 *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus,
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-282a8a4 option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-282a8a4 select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Scroll เฉพาะตาราง volunteer_statistics บนมือถือ */
@media (max-width: 480px) {
    .volunteer-statistics-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-statistics-wrapper table {
        min-width: 600px; /* กว้างพอสำหรับทุก column */
        border-collapse: collapse;
    }

    .volunteer-statistics-wrapper th,
    .volunteer-statistics-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกัน wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bfab3d7 */.elementor-1308 .elementor-element.elementor-element-bfab3d7 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bb188ca */.elementor-1308 .elementor-element.elementor-element-bb188ca {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bdc62bb *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus,
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-bdc62bb option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-bdc62bb select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Media Query สำหรับมือถือ */
/* Scroll เฉพาะตารางบนมือถือ */
@media (max-width: 480px) {
    .volunteer-table-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-table-wrapper table {
        min-width: 600px; /* ให้ table กว้างตาม column */
        border-collapse: collapse;
    }

    .volunteer-table-wrapper th,
    .volunteer-table-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกันข้อความ wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-282a8a4 *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus,
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-282a8a4 option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-282a8a4 select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Scroll เฉพาะตาราง volunteer_statistics บนมือถือ */
@media (max-width: 480px) {
    .volunteer-statistics-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-statistics-wrapper table {
        min-width: 600px; /* กว้างพอสำหรับทุก column */
        border-collapse: collapse;
    }

    .volunteer-statistics-wrapper th,
    .volunteer-statistics-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกัน wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bfab3d7 */.elementor-1308 .elementor-element.elementor-element-bfab3d7 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bb188ca */.elementor-1308 .elementor-element.elementor-element-bb188ca {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bdc62bb *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus,
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-bdc62bb option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-bdc62bb select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Media Query สำหรับมือถือ */
/* Scroll เฉพาะตารางบนมือถือ */
@media (max-width: 480px) {
    .volunteer-table-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-table-wrapper table {
        min-width: 600px; /* ให้ table กว้างตาม column */
        border-collapse: collapse;
    }

    .volunteer-table-wrapper th,
    .volunteer-table-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกันข้อความ wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-282a8a4 *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus,
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-282a8a4 option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-282a8a4 select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Scroll เฉพาะตาราง volunteer_statistics บนมือถือ */
@media (max-width: 480px) {
    .volunteer-statistics-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-statistics-wrapper table {
        min-width: 600px; /* กว้างพอสำหรับทุก column */
        border-collapse: collapse;
    }

    .volunteer-statistics-wrapper th,
    .volunteer-statistics-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกัน wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bfab3d7 */.elementor-1308 .elementor-element.elementor-element-bfab3d7 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bb188ca */.elementor-1308 .elementor-element.elementor-element-bb188ca {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bdc62bb *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:focus,
.elementor-1308 .elementor-element.elementor-element-bdc62bb select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-bdc62bb option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-bdc62bb select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Media Query สำหรับมือถือ */
/* Scroll เฉพาะตารางบนมือถือ */
@media (max-width: 480px) {
    .volunteer-table-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-table-wrapper table {
        min-width: 600px; /* ให้ table กว้างตาม column */
        border-collapse: collapse;
    }

    .volunteer-table-wrapper th,
    .volunteer-table-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกันข้อความ wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-282a8a4 *//*
 * Selector Wrapper: ใช้สำหรับกำหนดตำแหน่งของ Select Box
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 {
    /* ใช้ฟอนต์ตามที่คุณกำหนด */
    font-family: "Noto Sans Thai", Sans-serif;
    position: relative;
    display: inline-block;
}

/*
 * Select Element: การกำหนดสไตล์หลักของกล่อง Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select {
    /* --- Style หลัก & การซ่อนลูกศร Native --- */
    -webkit-appearance: none; /* ซ่อนลูกศรดั้งเดิม (สำคัญมากสำหรับ iOS/Safari) */
    -moz-appearance: none;
    appearance: none;

    /* การจัดการสีพื้นหลัง/ข้อความบนกล่อง Select หลัก */
    background-color: white; /* พื้นหลังเริ่มต้น (เปลี่ยนได้ตามต้องการ) */
    color: black; /* สีตัวอักษรเริ่มต้น (เปลี่ยนได้ตามต้องการ) */

    /* การแก้ไขเฉพาะสำหรับ iOS/Mobile */
    -webkit-tap-highlight-color: transparent; /* ลบสีไฮไลท์จากการแตะของ iOS */

    /* กำหนด Style ทั่วไป */
    border-style: solid;
    border-width: 1px; /* รวม border-width ทั้ง 4 ด้าน */
    /* กำหนดสีขอบปกติ */
    border-color: #00000033;
    border-radius: 0px;

    /* เพิ่ม Padding ด้านขวาเพื่อไม่ให้ข้อความไปทับไอคอนใหม่ */
    padding-right: 1.5em;

    /* เพิ่มไอคอนลูกศรลงแบบกำหนดเอง (ควรแสดงผลได้ดีบน iOS) */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 1.2em;
    box-sizing: border-box;
    width: 150px;
}

/*
 * Focus State: จัดการเมื่อ Select Box ถูกแตะ/เลือก
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus {
    /* 1. ยกเลิกการเปลี่ยนสีขอบอัตโนมัติของเบราว์เซอร์ */
    outline: none;

    /* 2. ตั้งค่า border-color ให้เป็นสีเดียวกับสีปกติ (ตามที่ร้องขอ) */
    border-color: #00000033; /* ใช้สีเดียวกับ border-color ปกติ */

    /* 3. ยกเลิก box-shadow ที่บางเบราว์เซอร์อาจเพิ่มมา */
    box-shadow: none;
}

/*
 * การจัดการสีพื้นหลัง/ตัวอักษรของ Select Box เมื่อถูกโฟกัส/แตะ
 * หมายเหตุ: ส่วนนี้เปลี่ยนสีของกล่อง Select หลัก ไม่ใช่เมนู Dropdown
 */
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:focus,
.elementor-1308 .elementor-element.elementor-element-282a8a4 select:active {
    /* หากต้องการให้กล่อง Select เปลี่ยนเป็นสีแดงเมื่อแตะ */
    /* background-color: #7D1925; */
    /* color: white; */
}


/*
 * Option Styles: การจัดรูปแบบตัวเลือกภายใน Dropdown
 * ข้อควรระวัง: สไตล์เหล่านี้ (โดยเฉพาะ :hover, background-color, padding) 
 * จะ **ถูกละเลย** บน iOS/Android เพราะจะแสดงผลเป็น Native UI ของระบบปฏิบัติการ
 */

.elementor-1308 .elementor-element.elementor-element-282a8a4 option:hover {
    /* กำหนดพื้นหลังเป็นสี #7D1925 */
    background-color: #7D1925;
    /* กำหนดสีตัวอักษรเป็นสีขาว */
    color: white;
}

.elementor-1308 .elementor-element.elementor-element-282a8a4 select option {
    font-size: 16px;
    padding: 10px;
    border: none;
}

/* Scroll เฉพาะตาราง volunteer_statistics บนมือถือ */
@media (max-width: 480px) {
    .volunteer-statistics-wrapper {
        overflow-x: auto; /* scroll แนวนอนเฉพาะ div */
        -webkit-overflow-scrolling: touch; /* smooth scroll บน iOS */
        width: 100%;
    }

    .volunteer-statistics-wrapper table {
        min-width: 600px; /* กว้างพอสำหรับทุก column */
        border-collapse: collapse;
    }

    .volunteer-statistics-wrapper th,
    .volunteer-statistics-wrapper td {
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap; /* ป้องกัน wrap */
        border: 1px solid #ddd;
    }
}/* End custom CSS */