{"id":12812,"date":"2026-02-11T10:49:13","date_gmt":"2026-02-11T03:49:13","guid":{"rendered":"https:\/\/www.doa.go.th\/rubberfund\/?page_id=12812"},"modified":"2026-03-05T09:04:53","modified_gmt":"2026-03-05T02:04:53","slug":"personal","status":"publish","type":"page","link":"https:\/\/www.doa.go.th\/rubberfund\/personal\/","title":{"rendered":"\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23"},"content":{"rendered":"<div class=\"gb-container gb-container-cd933a81 alignwide\">\n\n<!-- \n  \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33: \n  1. \u0e2b\u0e32\u0e01 WordPress \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e21\u0e35\u0e1f\u0e2d\u0e19\u0e15\u0e4c Sarabun \u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e25\u0e1a\u0e2a\u0e48\u0e27\u0e19 <link> \u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e2d\u0e2d\u0e01\u0e44\u0e14\u0e49\n  2. \u0e42\u0e04\u0e49\u0e14\u0e19\u0e35\u0e49\u0e23\u0e27\u0e21 CSS \u0e41\u0e25\u0e30 JS \u0e44\u0e27\u0e49\u0e43\u0e19\u0e15\u0e31\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e07\u0e48\u0e32\u0e22\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e27\u0e32\u0e07\u0e43\u0e19 Custom HTML Block\n-->\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<script>\n    tailwind.config = {\n        darkMode: 'class',\n        theme: {\n            extend: {\n                colors: {\n                    doa: '#2b542c',\n                    darkBg: '#121212',\n                    darkCard: '#1e1e1e'\n                }\n            }\n        }\n    }\n<\/script>\n\n<style>\n    .staff-section-wrapper {\n        font-family: 'Sarabun', sans-serif;\n        background-color: transparent; \/* \u0e43\u0e2b\u0e49\u0e01\u0e25\u0e37\u0e19\u0e44\u0e1b\u0e01\u0e31\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07 WordPress *\/\n        padding-top: 2rem;\n        padding-bottom: 4rem;\n    }\n\n    \/* Profile Image Wrapper *\/\n    .profile-wrapper {\n        position: relative;\n        width: 220px;\n        height: 220px;\n        margin-bottom: 1.5rem;\n        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    .profile-img-container {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        border-radius: 30px;\n        border: 6px solid white;\n        box-shadow: 0 10px 20px rgba(0,0,0,0.08);\n        background-color: #fff;\n    }\n    .dark .profile-img-container {\n        border-color: #2d2d2d;\n        background-color: #2d2d2d;\n    }\n    .profile-img-container img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center top;\n        transition: transform 0.5s ease;\n    }\n\n    \/* Hover Effects *\/\n    .staff-card:hover .profile-wrapper {\n        transform: translateY(-12px);\n    }\n    .staff-card:hover img {\n        transform: scale(1.1);\n    }\n    .staff-card {\n        background: rgba(255, 255, 255, 0.9);\n        backdrop-filter: blur(8px);\n        padding: 2.5rem 2rem;\n        border-radius: 40px;\n        transition: all 0.3s ease;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        max-width: 320px;\n        border: 1px solid rgba(255, 255, 255, 0.6);\n        position: relative;\n        overflow: hidden;\n        margin: 0 auto;\n    }\n    .dark .staff-card {\n        background: rgba(30, 30, 30, 0.8);\n        border-color: rgba(255, 255, 255, 0.1);\n    }\n    .staff-card:hover {\n        background: #ffffff;\n        box-shadow: 0 30px 60px -15px rgba(43, 84, 44, 0.15);\n        border-color: #2b542c;\n    }\n    .dark .staff-card:hover {\n        background: #252525;\n        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);\n        border-color: #4ade80;\n    }\n\n    \/* Section Title Style - \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27\u0e02\u0e35\u0e49\u0e21\u0e49\u0e32\u0e40\u0e02\u0e49\u0e21\u0e16\u0e32\u0e27\u0e23\u0e17\u0e31\u0e49\u0e07 2 \u0e42\u0e2b\u0e21\u0e14 *\/\n    .section-header {\n        text-align: center;\n        margin-bottom: 3.5rem;\n        padding-top: 1rem;\n    }\n    .section-title {\n        font-size: 1.85rem;\n        font-weight: 700;\n        color: #1a3a1b; \/* \u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27\u0e02\u0e35\u0e49\u0e21\u0e49\u0e32\u0e40\u0e02\u0e49\u0e21 *\/\n        position: relative;\n        display: inline-block;\n    }\n    \/* \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e35\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e32\u0e27\u0e43\u0e19\u0e42\u0e2b\u0e21\u0e14\u0e21\u0e37\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e02\u0e35\u0e22\u0e27\u0e02\u0e35\u0e49\u0e21\u0e49\u0e32\u0e15\u0e25\u0e2d\u0e14 *\/\n    .dark .section-title {\n        color: #1a3a1b; \n    }\n    \n    \/* \u0e01\u0e23\u0e13\u0e35\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e2d\u0e48\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\u0e43\u0e19\u0e42\u0e2b\u0e21\u0e14\u0e21\u0e37\u0e14 \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e07\u0e32\u0e2a\u0e35\u0e2a\u0e27\u0e48\u0e32\u0e07\u0e23\u0e2d\u0e1a\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22 *\/\n    .dark .section-title {\n        text-shadow: 0 0 1px rgba(255,255,255,0.1);\n    }\n\n    .section-title::after {\n        content: \"\";\n        position: absolute;\n        width: 50%;\n        height: 4px;\n        background: #2b542c;\n        bottom: -10px;\n        left: 25%;\n        border-radius: 10px;\n    }\n    .dark .section-title::after {\n        background: #4ade80;\n    }\n\n    #wp-theme-toggle {\n        position: fixed;\n        bottom: 2rem;\n        right: 2rem;\n        z-index: 9999; \/* \u0e2a\u0e39\u0e07\u0e01\u0e27\u0e48\u0e32 element \u0e02\u0e2d\u0e07 WP *\/\n        width: 50px;\n        height: 50px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n        transition: all 0.3s ease;\n        border: none;\n    }\n    \n    .text-doa { color: #2b542c; }\n    .dark .text-doa { color: #4ade80; }\n    .bg-doa { background-color: #2b542c; }\n<\/style>\n\n<div class=\"staff-section-wrapper dark:text-gray-100\">\n    <div class=\"container mx-auto max-w-7xl px-4\">\n        \n        <!-- 1. \u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 -->\n        <section class=\"mb-24\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32<\/h2>\n            <\/div>\n            <div class=\"flex justify-center\">\n                <div class=\"staff-card border-b-8 border-b-doa dark:border-b-green-500 scale-105 !bg-white dark:!bg-darkCard shadow-xl\">\n                    <div class=\"profile-wrapper\" style=\"width: 250px; height: 250px;\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2026\/02\/boss-300x300.png\" alt=\"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\">\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"font-bold text-2xl text-doa dark:text-white\">\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e07\u0e32\u0e21\u0e08\u0e34\u0e15\u0e23 \u0e14\u0e27\u0e07\u0e14\u0e35<\/h3>\n                    <p class=\"text-doa text-sm text-center mt-1\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e0a\u0e33\u0e19\u0e32\u0e0d\u0e01\u0e32\u0e23\u0e1e\u0e34\u0e40\u0e28\u0e29<\/p>\n                    <p class=\"text-doa font-bold text-sm text-center mt-1\">\u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e01\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e22\u0e32\u0e07<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 2. \u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19 -->\n        <section class=\"mb-24\">\n            <div class=\"flex justify-center\">\n                <!-- \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01 w-[380px] \u0e40\u0e1b\u0e47\u0e19 w-full max-w-[380px] -->\n                <div class=\"staff-card w-full max-w-[380px]\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/12.png\" alt=\"\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\">\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"font-bold text-xl text-doa dark:text-white text-center\">\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e01\u0e23\u0e23\u0e13\u0e32\u0e20\u0e23\u0e13\u0e4c \u0e21\u0e13\u0e35\u0e23\u0e31\u0e15\u0e19\u0e4c<\/h3>\n                    <p class=\"text-doa text-sm text-center mt-1\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e41\u0e25\u0e30\u0e41\u0e1c\u0e19<\/p>\n                    <p class=\"text-doa text-sm text-center mt-1\">\u0e0a\u0e33\u0e19\u0e32\u0e0d\u0e01\u0e32\u0e23\u0e1e\u0e34\u0e40\u0e28\u0e29<\/p>\n                    <p class=\"text-doa font-bold text-sm text-center\">\u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e22\u0e32\u0e07<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 3. \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b -->\n        <section class=\"mb-24\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/h2>\n            <\/div>\n            <div class=\"flex flex-wrap justify-center gap-8\">\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/11.png\" alt=\"\u0e18\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c \u0e41\u0e08\u0e48\u0e21\u0e14\u0e35\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e18\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c \u0e41\u0e08\u0e48\u0e21\u0e14\u0e35<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/4.png\" alt=\"\u0e28\u0e23\u0e38\u0e15\u0e32 \u0e2d\u0e34\u0e19\u0e17\u0e30\u0e2a\u0e38\u0e23\u0e30\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e28\u0e23\u0e38\u0e15\u0e32 \u0e2d\u0e34\u0e19\u0e17\u0e30\u0e2a\u0e38\u0e23\u0e30<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e08\u0e49\u0e32\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 4. \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35 -->\n        <section class=\"mb-24\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35<\/h2>\n            <\/div>\n            <div class=\"flex flex-wrap justify-center gap-8\">\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/\u0e41\u0e08\u0e07.png\" alt=\"\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e32 \u0e0a\u0e27\u0e14\u0e42\u0e15\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e32 \u0e0a\u0e27\u0e14\u0e42\u0e15<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2026\/01\/\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25-1.png\" alt=\"\u0e01\u0e21\u0e25\u0e0a\u0e19\u0e01 \u0e40\u0e04\u0e23\u0e37\u0e2d\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e01\u0e21\u0e25\u0e0a\u0e19\u0e01 \u0e40\u0e04\u0e23\u0e37\u0e2d\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/5.png\" alt=\"\u0e0a\u0e38\u0e25\u0e35\u0e1e\u0e23 \u0e1a\u0e27\u0e1a\u0e08\u0e34\u0e15\u0e23\u0e4c\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e0a\u0e38\u0e25\u0e35\u0e1e\u0e23 \u0e1a\u0e27\u0e1a\u0e08\u0e34\u0e15\u0e23\u0e4c<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 5. \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e27\u0e19\u0e22\u0e32\u0e07\u0e41\u0e25\u0e30\u0e01\u0e34\u0e48\u0e07\u0e15\u0e32 -->\n        <section class=\"mb-24\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e27\u0e19\u0e22\u0e32\u0e07\u0e41\u0e25\u0e30\u0e01\u0e34\u0e48\u0e07\u0e15\u0e32<\/h2>\n            <\/div>\n            <div class=\"flex flex-wrap justify-center gap-8\">\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/6-1.png\" alt=\"\u0e2a\u0e38\u0e23\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e22\u0e32\u0e40\u0e14\u0e47\u0e07\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e2a\u0e38\u0e23\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e22\u0e32\u0e40\u0e14\u0e47\u0e07<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/7.png\" alt=\"\u0e2a\u0e38\u0e13\u0e42\u0e18 \u0e1a\u0e38\u0e0d\u0e42\u0e1e\u0e41\u0e01\u0e49\u0e27\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e2a\u0e38\u0e13\u0e42\u0e18 \u0e1a\u0e38\u0e0d\u0e42\u0e1e\u0e41\u0e01\u0e49\u0e27<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e08\u0e49\u0e32\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/\u0e2a\u0e32\u0e27.png\" alt=\"\u0e19\u0e34\u0e20\u0e32\u0e20\u0e23\u0e13\u0e4c \u0e01\u0e32\u0e40\u0e25\u0e35\u0e48\u0e22\u0e07\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e19\u0e34\u0e20\u0e32\u0e20\u0e23\u0e13\u0e4c \u0e01\u0e32\u0e40\u0e25\u0e35\u0e48\u0e22\u0e07<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e08\u0e49\u0e32\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- 6. \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21 -->\n        <section class=\"mb-24\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21<\/h2>\n            <\/div>\n            <div class=\"flex flex-wrap justify-center gap-8\">\n                <div class=\"staff-card\">\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/1.png\" alt=\"\u0e13\u0e31\u0e10\u0e27\u0e38\u0e12\u0e34 \u0e42\u0e15\u0e19\u0e14\u0e17\u0e2d\u0e07\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e13\u0e31\u0e10\u0e27\u0e38\u0e12\u0e34 \u0e42\u0e15\u0e19\u0e14\u0e17\u0e2d\u0e07<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c<\/p>\n                <\/div>\n                <div class=\"staff-card\">\n                    <!-- \u0e25\u0e1a <div class=\"profile-wrapper\"> \u0e17\u0e35\u0e48\u0e0b\u0e49\u0e2d\u0e19\u0e01\u0e31\u0e19\u0e40\u0e01\u0e34\u0e19\u0e21\u0e32\u0e2d\u0e2d\u0e01 1 \u0e2d\u0e31\u0e19 -->\n                    <div class=\"profile-wrapper\">\n                        <div class=\"profile-img-container\">\n                            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/rubberfund\/wp-content\/uploads\/2025\/12\/\u0e0a\u0e31\u0e0a\u0e0a\u0e32\u0e22.png\" alt=\"\u0e0a\u0e31\u0e0a\u0e0a\u0e32\u0e22 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e18\u0e32\u0e23\u0e32\u0e2a\u0e01\u0e38\u0e25\">\n                        <\/div>\n                    <\/div>\n                    <h4 class=\"font-bold text-lg text-doa dark:text-white\">\u0e0a\u0e31\u0e0a\u0e0a\u0e32\u0e22 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e18\u0e32\u0e23\u0e32\u0e2a\u0e01\u0e38\u0e25<\/h4>\n                    <p class=\"text-sm text-gray-500 dark:text-gray-400\">\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e23<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/div>\n\n    <!-- Modal Container (Popup) -->\n    <div id=\"staff-modal\" class=\"fixed inset-0 z-[10000] hidden items-center justify-center bg-black\/60 backdrop-blur-sm opacity-0 transition-opacity duration-300\">\n        <!-- \u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e04\u0e25\u0e32\u0e2a\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49\u0e43\u0e2b\u0e49\u0e01\u0e27\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e2a\u0e39\u0e07 80% \u0e1a\u0e19\u0e08\u0e2d\u0e04\u0e2d\u0e21 \u0e41\u0e25\u0e30 90% \u0e1a\u0e19\u0e08\u0e2d\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d -->\n        <div class=\"bg-white dark:bg-darkCard w-[90%] md:w-[80%] h-[90%] md:h-[80%] rounded-[30px] p-6 md:p-12 relative transform scale-95 transition-transform duration-300 flex flex-col items-center justify-center overflow-y-auto shadow-2xl border border-gray-100 dark:border-gray-800\">\n            <!-- Close Button (\u0e02\u0e22\u0e32\u0e22\u0e1b\u0e38\u0e48\u0e21\u0e43\u0e2b\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19\u0e19\u0e34\u0e14\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e43\u0e2b\u0e49\u0e2a\u0e21\u0e14\u0e38\u0e25) -->\n            <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 md:top-6 md:right-6 text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400 transition-colors bg-gray-100 dark:bg-gray-800 rounded-full p-2 md:p-4 focus:outline-none z-50\">\n                <svg class=\"w-6 h-6 md:w-8 md:h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n            <\/button>\n            \n            <!-- Modal Content (\u0e02\u0e22\u0e32\u0e22\u0e02\u0e19\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e25\u0e30\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e43\u0e2b\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19) -->\n            <div class=\"flex flex-col items-center mt-2 w-full max-w-3xl\">\n                <div class=\"w-48 h-48 md:w-80 md:h-80 rounded-full overflow-hidden border-[6px] md:border-[8px] border-white shadow-2xl dark:border-[#2d2d2d] mb-6 md:mb-8 shrink-0\">\n                    <img decoding=\"async\" id=\"modal-img\" src=\"\" alt=\"Profile\" class=\"w-full h-full object-cover object-top\">\n                <\/div>\n                <h3 id=\"modal-name\" class=\"font-bold text-3xl md:text-5xl text-doa dark:text-white text-center mb-3 md:mb-5\"><\/h3>\n                <div id=\"modal-roles\" class=\"text-center w-full flex flex-col gap-2 md:gap-3\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Dark Mode Toggle Button (\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a WP) -->\n    <button id=\"wp-theme-toggle\" class=\"bg-doa text-white dark:bg-green-500 dark:text-black hover:scale-110 active:scale-90\" onclick=\"toggleDarkMode()\">\n        <svg id=\"theme-toggle-dark-icon\" class=\"hidden w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"><\/path><\/svg>\n        <svg id=\"theme-toggle-light-icon\" class=\"hidden w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"><\/path><\/svg>\n    <\/button>\n<\/div>\n\n<script>\n    (function() {\n        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');\n        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');\n\n        \/\/ Check initial state\n        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n            document.documentElement.classList.add('dark');\n            themeToggleLightIcon.classList.remove('hidden');\n        } else {\n            document.documentElement.classList.remove('dark');\n            themeToggleDarkIcon.classList.remove('hidden');\n        }\n\n        window.toggleDarkMode = function() {\n            themeToggleDarkIcon.classList.toggle('hidden');\n            themeToggleLightIcon.classList.toggle('hidden');\n\n            if (document.documentElement.classList.contains('dark')) {\n                document.documentElement.classList.remove('dark');\n                localStorage.setItem('color-theme', 'light');\n            } else {\n                document.documentElement.classList.add('dark');\n                localStorage.setItem('color-theme', 'dark');\n            }\n        }\n\n        \/\/ --- \u0e40\u0e23\u0e34\u0e48\u0e21\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07 Modal (Popup) ---\n        const modal = document.getElementById('staff-modal');\n        const modalImg = document.getElementById('modal-img');\n        const modalName = document.getElementById('modal-name');\n        const modalRoles = document.getElementById('modal-roles');\n\n        \/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 Event Click \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e17\u0e38\u0e01\u0e43\u0e1a\n        document.querySelectorAll('.staff-card').forEach(card => {\n            \/\/ \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e39\u0e1b\u0e19\u0e34\u0e49\u0e27\u0e0a\u0e35\u0e49\u0e43\u0e2b\u0e49\u0e23\u0e39\u0e49\u0e27\u0e48\u0e32\u0e01\u0e14\u0e44\u0e14\u0e49\n            card.style.cursor = 'pointer'; \n            \n            card.addEventListener('click', function() {\n                \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e17\u0e35\u0e48\u0e42\u0e14\u0e19\u0e04\u0e25\u0e34\u0e01\n                const img = this.querySelector('img').src;\n                const name = this.querySelector('h3, h4').innerText;\n                const roles = Array.from(this.querySelectorAll('p')).map(p => {\n                    \/\/ \u0e02\u0e22\u0e32\u0e22\u0e02\u0e19\u0e32\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19\u0e15\u0e32\u0e21\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e02\u0e22\u0e32\u0e22\n                    return `<p class=\"${p.className} !text-lg md:!text-2xl\">${p.innerText}<\/p>`;\n                }).join('');\n\n                \/\/ \u0e43\u0e2a\u0e48\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e25\u0e07\u0e43\u0e19 Modal\n                modalImg.src = img;\n                modalName.innerText = name;\n                modalRoles.innerHTML = roles;\n\n                \/\/ \u0e41\u0e2a\u0e14\u0e07 Modal (\u0e1e\u0e23\u0e49\u0e2d\u0e21 Animation)\n                modal.classList.remove('hidden');\n                modal.classList.add('flex');\n                \n                setTimeout(() => {\n                    modal.classList.remove('opacity-0');\n                    modal.querySelector('div').classList.remove('scale-95');\n                    modal.querySelector('div').classList.add('scale-100');\n                }, 10);\n            });\n        });\n\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Modal\n        window.closeModal = function() {\n            modal.classList.add('opacity-0');\n            modal.querySelector('div').classList.remove('scale-100');\n            modal.querySelector('div').classList.add('scale-95');\n\n            setTimeout(() => {\n                modal.classList.add('hidden');\n                modal.classList.remove('flex');\n            }, 300); \/\/ \u0e23\u0e2d\u0e43\u0e2b\u0e49 Animation \u0e40\u0e25\u0e48\u0e19\u0e08\u0e1a\u0e01\u0e48\u0e2d\u0e19\u0e0b\u0e48\u0e2d\u0e19\n        }\n\n        \/\/ \u0e1b\u0e34\u0e14 Modal \u0e2b\u0e32\u0e01\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e27\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e19\u0e2d\u0e01 (Backdrop)\n        modal.addEventListener('click', function(e) {\n            if (e.target === modal) {\n                closeModal();\n            }\n        });\n        \/\/ --- \u0e08\u0e1a\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07 Modal ---\n\n    })();\n<\/script>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e40\u0e07\u0e34\u0e19\u0e17\u0e38\u0e19\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e22\u0e32\u0e07\u0e1e\u0e32\u0e23\u0e32 \u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e07\u0e32 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-12812","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/comments?post=12812"}],"version-history":[{"count":18,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12812\/revisions"}],"predecessor-version":[{"id":13304,"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/pages\/12812\/revisions\/13304"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/rubberfund\/wp-json\/wp\/v2\/media?parent=12812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}