{"id":69,"date":"2019-11-29T10:41:24","date_gmt":"2019-11-29T03:41:24","guid":{"rendered":"http:\/\/www.ivecr5.ac.th\/web2020\/?page_id=69"},"modified":"2026-01-08T20:14:50","modified_gmt":"2026-01-08T13:14:50","slug":"%e0%b8%84%e0%b8%93%e0%b8%b0%e0%b8%81%e0%b8%a3%e0%b8%a3%e0%b8%a1%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%a0%e0%b8%b2%e0%b8%aa%e0%b8%96%e0%b8%b2%e0%b8%9a%e0%b8%b1%e0%b8%99","status":"publish","type":"page","link":"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b8%84%e0%b8%93%e0%b8%b0%e0%b8%81%e0%b8%a3%e0%b8%a3%e0%b8%a1%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b8%a0%e0%b8%b2%e0%b8%aa%e0%b8%96%e0%b8%b2%e0%b8%9a%e0%b8%b1%e0%b8%99\/","title":{"rendered":"\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19"},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-content--top\" id=\"el-8ea8df3d\" data-vce-do-apply=\"all el-8ea8df3d\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-0b036acd\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-0b036acd\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-0b036acd\"><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-content--top\" id=\"el-8f1acecd\" data-vce-do-apply=\"all el-8f1acecd\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-f412b66d\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-f412b66d\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-f412b66d\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-1dba428a\" data-vce-do-apply=\"all el-1dba428a\"><!-- \n    SECTION: Dependencies \n    \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07 React \u0e41\u0e25\u0e30 Tailwind \u0e43\u0e19\u0e42\u0e2b\u0e21\u0e14 Standalone\n-->\n<script crossorigin=\"\" src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n<script crossorigin=\"\" src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n<!-- \n    SECTION: Fonts\n    \u0e42\u0e2b\u0e25\u0e14 Font Kanit \u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\n-->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@200;300;400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n\n<!-- \n    SECTION: Custom Styles\n    \u0e01\u0e33\u0e2b\u0e19\u0e14 Font Kanit \u0e41\u0e25\u0e30 Animation\n-->\n<style>\n    \/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e43\u0e0a\u0e49 Font Kanit \u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01 element *\/\n    #vocational-root, \n    #vocational-root * { \n        font-family: 'Kanit', sans-serif !important; \n        box-sizing: border-box;\n    }\n\n    \/* FIX: \u0e25\u0e1a\u0e02\u0e35\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e15\u0e49 \u0e41\u0e25\u0e30 Border \u0e17\u0e35\u0e48\u0e21\u0e32\u0e08\u0e32\u0e01 Theme \u0e02\u0e2d\u0e07 WordPress *\/\n    #vocational-root a {\n        text-decoration: none !important;\n        border: none !important;\n        box-shadow: none !important;\n        background-image: none !important;\n    }\n    \n    #vocational-root a:hover {\n        text-decoration: none !important;\n        border: none !important;\n    }\n\n    \/* Animation Keyframes *\/\n    @keyframes fadeInUp {\n        from { opacity: 0; transform: translateY(20px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n    \n    .animate-fade-in {\n        animation: fadeInUp 0.6s ease-out forwards;\n        opacity: 0;\n    }\n    \n    .delay-100 { animation-delay: 0.1s; }\n\n    \/* New Animations for Header *\/\n    @keyframes blob {\n        0% { transform: translate(0px, 0px) scale(1); }\n        33% { transform: translate(30px, -50px) scale(1.1); }\n        66% { transform: translate(-20px, 20px) scale(0.9); }\n        100% { transform: translate(0px, 0px) scale(1); }\n    }\n    .animate-blob {\n        animation: blob 7s infinite;\n    }\n    .animation-delay-2000 {\n        animation-delay: 2s;\n    }\n    \n    @keyframes shine {\n        to { background-position: 200% center; }\n    }\n    .animate-shine {\n        background-size: 200% auto;\n        animation: shine 3s linear infinite;\n    }\n\n    @keyframes float {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-10px); }\n    }\n    .animate-float {\n        animation: float 6s ease-in-out infinite;\n    }\n\n    \/* Modal Animation *\/\n    @keyframes zoomIn {\n        from { opacity: 0; transform: scale(0.95); }\n        to { opacity: 1; transform: scale(1); }\n    }\n    .animate-zoom-in {\n        animation: zoomIn 0.3s ease-out forwards;\n    }\n<\/style>\n\n<!-- \n    SECTION: Main Container \n-->\n<div id=\"vocational-root\" class=\"bg-slate-50 min-h-screen p-4 md:p-8\">\n    <!-- React \u0e08\u0e30 Render \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e25\u0e07\u0e43\u0e19\u0e19\u0e35\u0e49 -->\n<\/div>\n\n<!-- \n    SECTION: React Application\n-->\n<script type=\"text\/babel\">\n    const { useState, useEffect } = React;\n\n    const Icon = ({ name, size = 24, className }) => {\n        useEffect(() => {\n            lucide.createIcons();\n        }, [name]);\n        return <i data-lucide={name} className={className} style={{ width: size, height: size }}><\/i>;\n    };\n\n    const App = () => {\n        \/\/ State \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e19\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e2a\u0e14\u0e07 Pop-up\n        const [selectedMember, setSelectedMember] = useState(null);\n\n        \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\n        const councilGroups = [\n            {\n                title: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 \u0e21\u0e32\u0e15\u0e23\u0e32 23(1)\",\n                description: \"\u0e19\u0e32\u0e22\u0e01\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e2d\u0e23\u0e23\u0e16\u0e01\u0e32\u0e23 \u0e15\u0e24\u0e29\u0e13\u0e32\u0e23\u0e31\u0e07\u0e2a\u0e35\",\n                        position: \"\u0e19\u0e32\u0e22\u0e01\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e20\u0e32\u0e04\u0e01\u0e25\u0e32\u0e07 5\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/1\u0e19\u0e32\u0e22\u0e2d\u0e23\u0e23\u0e16\u0e01\u0e32\u0e23-\u0e15\u0e24\u0e29\u0e13\u0e32\u0e23\u0e31\u0e07\u0e2a\u0e35_\u0e01.5_231-1-e1668570088247.jpg\"\n                    }\n                ]\n            },\n            {\n                title: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 \u0e21\u0e32\u0e15\u0e23\u0e32 23(2)\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e1a\u0e23\u0e23\u0e22\u0e07\u0e04\u0e4c \u0e27\u0e07\u0e28\u0e4c\u0e2a\u0e01\u0e38\u0e25\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2025\/08\/21312312321.jpg\"\n                    }\n                ]\n            },\n            {\n                title: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 \u0e21\u0e32\u0e15\u0e23\u0e32 23(3)\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e19\u0e34\u0e23\u0e31\u0e19\u0e14\u0e23\u0e4c \u0e27\u0e07\u0e29\u0e4c\u0e08\u0e34\u0e4b\u0e27\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/3\u0e19\u0e32\u0e22\u0e19\u0e34\u0e23\u0e31\u0e19\u0e14\u0e23\u0e4c-\u0e27\u0e07\u0e29\u0e4c\u0e08\u0e34\u0e4b\u0e27_\u0e01.5_233-e1668570131247.jpg\"\n                    },\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e1e\u0e38\u0e17\u0e18\u0e1e\u0e23 \u0e1b\u0e23\u0e32\u0e42\u0e21\u0e17\u0e22\u0e4c\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/1.jpg\"\n                    }\n                ]\n            },\n            {\n                title: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 \u0e21\u0e32\u0e15\u0e23\u0e32 23(4)\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e19\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c \u0e41\u0e01\u0e49\u0e27\u0e17\u0e2d\u0e07\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/\u0e1c\u0e2d-\u0e27\u0e17-\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a-65-2.jpg\"\n                    },\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e18\u0e19\u0e27\u0e31\u0e12\u0e19\u0e4c \u0e2a\u0e35\u0e40\u0e21\u0e06\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2025\/11\/\u0e19\u0e32\u0e22\u0e18\u0e19\u0e27\u0e31\u0e12\u0e19\u0e4c-\u0e2a\u0e35\u0e40\u0e21\u0e06.jpg\"\n                    },\n                    {\n                        name: \"\u0e1c\u0e28.\u0e14\u0e23. \u0e1a\u0e38\u0e0d\u0e2a\u0e37\u0e1a \u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e28\u0e23\u0e35\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/9\u0e19\u0e32\u0e22\u0e1a\u0e38\u0e0d\u0e2a\u0e37\u0e1a-\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e28\u0e23\u0e35_\u0e01.5_234-e1668570283698.jpg\"\n                    },\n                    {\n                        name: \"\u0e19\u0e32\u0e07\u0e2a\u0e38\u0e19\u0e34\u0e2a\u0e32 \u0e2d\u0e34\u0e19\u0e17\u0e19\u0e34\u0e19\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/10\u0e19\u0e32\u0e07\u0e2a\u0e38\u0e19\u0e34\u0e2a\u0e32-\u0e2d\u0e34\u0e19\u0e17\u0e19\u0e34\u0e19_\u0e01.5_234.jpg\"\n                    }\n                ]\n            },\n            {\n                title: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 \u0e21\u0e32\u0e15\u0e23\u0e32 23(5)\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e1e\u0e35\u0e25\u0e34\u0e19 \u0e2a\u0e01\u0e38\u0e13\u0e32\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/12\u0e19\u0e32\u0e22\u0e1e\u0e35\u0e25\u0e34\u0e19-\u0e2a\u0e01\u0e38\u0e13\u0e32_\u0e01.5_235-e1668570502555.jpg\"\n                    },\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e23\u0e32\u0e40\u0e0a\u0e19\u0e17\u0e23\u0e4c \u0e21\u0e13\u0e35\u0e2a\u0e27\u0e48\u0e32\u0e07\u0e27\u0e07\u0e28\u0e4c\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/13\u0e19\u0e32\u0e22\u0e23\u0e32\u0e40\u0e0a\u0e19\u0e17\u0e23\u0e4c-\u0e21\u0e13\u0e35\u0e2a\u0e27\u0e48\u0e32\u0e07\u0e27\u0e07\u0e28\u0e4c_\u0e01.5_235.jpg\"\n                    },\n                    {\n                        name: \"\u0e19\u0e32\u0e22\u0e15\u0e15\u0e34\u0e22 \u0e2d\u0e31\u0e04\u0e23\u0e27\u0e32\u0e19\u0e34\u0e0a\u0e15\u0e23\u0e30\u0e01\u0e39\u0e25\",\n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2024\/05\/11\u0e19\u0e32\u0e22\u0e15\u0e15\u0e34\u0e22-\u0e2d\u0e31\u0e04\u0e23\u0e27\u0e32\u0e19\u0e34\u0e0a\u0e15\u0e23\u0e30\u0e01\u0e39\u0e25_\u0e01.5_235-2.jpg\"\n                    }\n                ]\n            },\n            {\n                title: \"\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                members: [\n                    {\n                        name: \"\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e18\u0e31\u0e0a\u0e21\u0e32\u0e28 \u0e1e\u0e34\u0e20\u0e31\u0e01\u0e14\u0e34\u0e4c\",\n                        position: \"\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\",\n                        image: \"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2022\/11\/6\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e18\u0e31\u0e0a\u0e21\u0e32\u0e28-\u0e1e\u0e34\u0e20\u0e31\u0e01\u0e14\u0e34\u0e4c_\u0e01.5_233-e1668570159129.jpg\"\n                    }\n                ]\n            }\n        ];\n\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14 Modal\n        const openModal = (member) => {\n            setSelectedMember(member);\n            document.body.style.overflow = 'hidden'; \/\/ \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e07\n        };\n\n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Modal\n        const closeModal = () => {\n            setSelectedMember(null);\n            document.body.style.overflow = 'auto'; \/\/ \u0e04\u0e37\u0e19\u0e04\u0e48\u0e32\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\n        };\n\n        return (\n            <div className=\"max-w-6xl mx-auto\">\n                \n                {\/* HEADER SECTION (\u0e04\u0e07\u0e44\u0e27\u0e49\u0e15\u0e32\u0e21\u0e40\u0e14\u0e34\u0e21) *\/}\n                <div className=\"relative bg-gradient-to-br from-indigo-900 via-blue-800 to-sky-900 rounded-3xl shadow-2xl overflow-hidden mb-12 p-8 md:p-14 animate-fade-in\">\n                    <div className=\"absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob\"><\/div>\n                    <div className=\"absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000\"><\/div>\n                    <div className=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/cubes.png')] opacity-5\"><\/div>\n\n                    <div className=\"relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 md:gap-12\">\n                        <div className=\"space-y-6 text-center md:text-left max-w-3xl\">\n                            <div className=\"inline-block px-4 py-1.5 rounded-full bg-white\/10 border border-white\/20 text-blue-100 text-sm font-medium backdrop-blur-sm shadow-sm\">\n                                Institute of Vocational Education Central Region 5\n                            <\/div>\n                            \n                            <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-tight drop-shadow-md\">\n                                \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32<br\/>\n                                <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-100 to-amber-300 animate-shine drop-shadow-sm\">\n                                    \u0e20\u0e32\u0e04\u0e01\u0e25\u0e32\u0e07 5\n                                <\/span>\n                            <\/h1>\n                            \n                            <p className=\"text-blue-100\/90 text-lg font-light leading-relaxed max-w-2xl mx-auto md:mx-0\">\n                                \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e19\u0e33\u0e14\u0e49\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e \u0e40\u0e19\u0e49\u0e19\u0e01\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22 \u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1c\u0e25\u0e34\u0e15\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e21\u0e35\u0e2a\u0e21\u0e23\u0e23\u0e16\u0e19\u0e30\u0e2a\u0e39\u0e07\n                            <\/p>\n                        <\/div>\n\n                        <div className=\"relative animate-float shrink-0 hidden md:block\">\n                            <div className=\"absolute inset-0 bg-amber-400 blur-2xl opacity-20 rounded-full transform scale-110\"><\/div>\n                            <div className=\"relative bg-gradient-to-b from-white\/10 to-white\/5 backdrop-blur-md border border-white\/20 p-8 rounded-2xl shadow-2xl ring-1 ring-white\/10\">\n                                <Icon name=\"award\" size={80} className=\"text-amber-300 drop-shadow-lg\" \/>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                {\/* COUNCIL SECTION (\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19) *\/}\n                <div className=\"animate-fade-in delay-100 mb-16\">\n                    <div className=\"flex items-center gap-3 mb-10 justify-center md:justify-start\">\n                        <div className=\"p-3 bg-orange-100 text-orange-600 rounded-xl shadow-sm\">\n                            <Icon name=\"users\" size={28} \/>\n                        <\/div>\n                        <h2 className=\"text-2xl md:text-3xl font-bold text-slate-800\">\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/h2>\n                    <\/div>\n\n                    <div className=\"space-y-12\">\n                        {councilGroups.map((group, groupIndex) => (\n                            <div key={groupIndex} className=\"bg-slate-50\/50 rounded-3xl p-6 md:p-8 border border-slate-100\">\n                                <h3 className=\"text-xl md:text-2xl font-bold text-blue-900 mb-8 flex items-center justify-center gap-2 border-b border-blue-100 pb-3\">\n                                    {group.title}\n                                <\/h3>\n                                \n                                {\/* \u0e43\u0e0a\u0e49 Flexbox + justify-center \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e08\u0e31\u0e14\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e40\u0e2a\u0e21\u0e2d *\/}\n                                <div className=\"flex flex-wrap justify-center gap-8\">\n                                    {group.members.map((member, idx) => (\n                                        <div \n                                            key={idx}\n                                            onClick={() => openModal(member)}\n                                            className=\"w-full sm:w-[calc(50%-2rem)] lg:w-[calc(33.33%-2rem)] xl:w-[calc(25%-2rem)] max-w-[280px] bg-white rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 overflow-hidden group flex flex-col border border-slate-100 cursor-pointer\"\n                                        >\n                                            {\/* Image Container - \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e19 *\/}\n                                            <div className=\"aspect-[3\/4] overflow-hidden bg-slate-100 relative\">\n                                                <div className=\"absolute inset-0 bg-gradient-to-t from-black\/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10\"><\/div>\n                                                <img \n                                                    src={member.image} \n                                                    alt={member.name} \n                                                    className=\"w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-110\"\n                                                    onError={(e) => {\n                                                        e.target.onerror = null;\n                                                        e.target.src = \"https:\/\/placehold.co\/300x400\/e2e8f0\/475569?text=Image+Not+Found\";\n                                                    }}\n                                                \/>\n                                                <div className=\"absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-[-10px] group-hover:translate-y-0\">\n                                                    <div className=\"bg-white\/90 backdrop-blur p-2 rounded-full text-blue-600 shadow-lg\">\n                                                        <Icon name=\"maximize-2\" size={18} \/>\n                                                    <\/div>\n                                                <\/div>\n                                            <\/div>\n                                            \n                                            {\/* Content Info *\/}\n                                            <div className=\"p-5 text-center flex-grow flex flex-col justify-center bg-white relative z-20\">\n                                                {\/* \u0e40\u0e1e\u0e34\u0e48\u0e21 whitespace-nowrap \u0e41\u0e25\u0e30 overflow-hidden \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e0a\u0e37\u0e48\u0e2d\u0e2d\u0e22\u0e39\u0e48\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27 *\/}\n                                                <h4 className=\"font-bold text-lg text-slate-800 group-hover:text-blue-700 transition-colors mb-2 whitespace-nowrap overflow-hidden text-ellipsis px-1\">\n                                                    {member.name}\n                                                <\/h4>\n                                                <p className=\"text-sm text-slate-500 font-light leading-relaxed\">\n                                                    {member.position}\n                                                <\/p>\n                                            <\/div>\n                                        <\/div>\n                                    ))}\n                                <\/div>\n                            <\/div>\n                        ))}\n                    <\/div>\n                <\/div>\n\n                {\/* MODAL \/ POPUP *\/}\n                {selectedMember && (\n                    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\" style={{ fontFamily: 'Kanit, sans-serif' }}>\n                        {\/* Backdrop *\/}\n                        <div \n                            className=\"absolute inset-0 bg-black\/80 backdrop-blur-sm transition-opacity\" \n                            onClick={closeModal}\n                        ><\/div>\n\n                        {\/* Modal Content - \u0e1b\u0e23\u0e31\u0e1a max-w-lg \u0e40\u0e1b\u0e47\u0e19 max-w-md \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e19\u0e32\u0e14 *\/}\n                        <div className=\"relative bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-zoom-in z-10\">\n                            <button \n                                onClick={closeModal}\n                                className=\"absolute top-4 right-4 p-2 bg-black\/10 hover:bg-black\/20 rounded-full text-slate-800 transition-colors z-20\"\n                            >\n                                <Icon name=\"x\" size={24} \/>\n                            <\/button>\n\n                            <div className=\"flex flex-col\">\n                                <div className=\"w-full bg-slate-100 aspect-[3\/4] relative\">\n                                    <img \n                                        src={selectedMember.image} \n                                        alt={selectedMember.name} \n                                        className=\"w-full h-full object-contain bg-slate-200\"\n                                        onError={(e) => {\n                                            e.target.onerror = null;\n                                            e.target.src = \"https:\/\/placehold.co\/600x800\/e2e8f0\/475569?text=Image+Not+Found\";\n                                        }}\n                                    \/>\n                                <\/div>\n                                <div className=\"p-8 text-center bg-white\">\n                                    {\/* \u0e40\u0e1e\u0e34\u0e48\u0e21 whitespace-nowrap \u0e43\u0e2b\u0e49\u0e0a\u0e37\u0e48\u0e2d\u0e43\u0e19 Pop-up \u0e14\u0e49\u0e27\u0e22 *\/}\n                                    <h3 className=\"text-2xl font-bold text-slate-800 mb-2 whitespace-nowrap overflow-hidden text-ellipsis\">\n                                        {selectedMember.name}\n                                    <\/h3>\n                                    <p className=\"text-blue-600 font-medium text-lg\">\n                                        {selectedMember.position}\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                )}\n\n            <\/div>\n        );\n    };\n\n    const root = ReactDOM.createRoot(document.getElementById('vocational-root'));\n    root.render(<App \/>);\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<p>Views: 143<\/p>","protected":false},"excerpt":{"rendered":"<p>Views: 143<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":46,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":18145,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/69\/revisions\/18145"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}