{"id":68,"date":"2019-11-29T10:41:24","date_gmt":"2019-11-29T03:41:24","guid":{"rendered":"http:\/\/www.ivecr5.ac.th\/web2020\/?page_id=68"},"modified":"2026-01-08T17:50:17","modified_gmt":"2026-01-08T10:50:17","slug":"%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%a7%e0%b8%b1%e0%b8%95%e0%b8%b4%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99%e0%b8%a1%e0%b8%b2","status":"publish","type":"page","link":"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%a7%e0%b8%b1%e0%b8%95%e0%b8%b4%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99%e0%b8%a1%e0%b8%b2\/","title":{"rendered":"\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32"},"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-41feacf3\" data-vce-do-apply=\"all el-41feacf3\"><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-c63d8fba\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-c63d8fba\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-c63d8fba\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-cec48866\" data-vce-do-apply=\"all el-cec48866\"><span class=\"vcv-ui-content-editable-helper-loader vcv-ui-wp-spinner\"><\/span><!-- \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 \u0e20\u0e32\u0e22\u0e43\u0e19 vocational-root \u0e1e\u0e23\u0e49\u0e2d\u0e21 !important \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e31\u0e19 Theme \u0e17\u0e31\u0e1a *\/\n    #vocational-root, \n    #vocational-root * { \n        font-family: 'Kanit', sans-serif !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; \/* \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e0b\u0e48\u0e2d\u0e19\u0e44\u0e27\u0e49\u0e01\u0e48\u0e2d\u0e19 *\/\n    }\n    \n    .delay-100 { animation-delay: 0.1s; }\n    .delay-200 { animation-delay: 0.2s; }\n    .delay-300 { animation-delay: 0.3s; }\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    \/* Custom Scrollbar for aesthetic *\/\n    .custom-scrollbar::-webkit-scrollbar {\n        width: 8px;\n    }\n    .custom-scrollbar::-webkit-scrollbar-track {\n        background: #f1f1f1; \n    }\n    .custom-scrollbar::-webkit-scrollbar-thumb {\n        background: #cbd5e1; \n        border-radius: 4px;\n    }\n    .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: #94a3b8; \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, useMemo } = React;\n\n    \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\n    const contentParagraphs = [\n        \"\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 \u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22 7 \u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e44\u0e14\u0e49\u0e41\u0e01\u0e48 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e27\u0e31\u0e07\u0e44\u0e01\u0e25\u0e01\u0e31\u0e07\u0e27\u0e25 \u0e41\u0e25\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e1a\u0e32\u0e07\u0e2a\u0e30\u0e1e\u0e32\u0e19\",\n        \"\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e21\u0e38\u0e48\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e15\u0e32\u0e21\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\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 \u0e41\u0e25\u0e30\u0e44\u0e14\u0e49\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e43\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e44\u0e14\u0e49\u0e41\u0e01\u0e48 \u0e23\u0e31\u0e10\u0e18\u0e23\u0e23\u0e21\u0e19\u0e39\u0e0d\u0e41\u0e2b\u0e48\u0e07\u0e23\u0e32\u0e0a\u0e2d\u0e32\u0e13\u0e32\u0e08\u0e31\u0e01\u0e23\u0e44\u0e17\u0e22\u0e1e\u0e38\u0e17\u0e18\u0e28\u0e31\u0e01\u0e23\u0e32\u0e0a 2550 \u0e2b\u0e21\u0e27\u0e14 5 \u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e48\u0e32 \u0e23\u0e31\u0e10\u0e15\u0e49\u0e2d\u0e07\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e19\u0e17\u0e38\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e41\u0e25\u0e30\u0e17\u0e38\u0e01\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\u0e17\u0e32\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e2a\u0e31\u0e07\u0e04\u0e21 \u0e08\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e0a\u0e32\u0e15\u0e34 \u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e2d\u0e07\u0e0a\u0e32\u0e15\u0e34 \u0e08\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e2b\u0e49\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\u0e02\u0e2d\u0e07\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e42\u0e25\u0e01 \u0e1b\u0e25\u0e39\u0e01\u0e1d\u0e31\u0e07\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e08\u0e34\u0e15\u0e2a\u0e33\u0e19\u0e36\u0e01\u0e02\u0e2d\u0e07\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e17\u0e22 \u0e21\u0e35\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e27\u0e34\u0e19\u0e31\u0e22\u0e04\u0e33\u0e19\u0e36\u0e07\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e27\u0e21\u0e41\u0e25\u0e30\u0e22\u0e36\u0e14\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e2d\u0e1a\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e18\u0e34\u0e1b\u0e44\u0e15\u0e22\u0e2d\u0e31\u0e19\u0e21\u0e35\u0e1e\u0e23\u0e30\u0e21\u0e2b\u0e32\u0e01\u0e29\u0e31\u0e15\u0e23\u0e34\u0e22\u0e4c\u0e17\u0e23\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e21\u0e38\u0e02\",\n        \"\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e35\u0e41\u0e19\u0e27\u0e04\u0e34\u0e14\u0e17\u0e35\u0e48\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e41\u0e1c\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34 \u0e09\u0e1a\u0e31\u0e1a\u0e17\u0e35\u0e48 11 \u0e1e.\u0e28. 2555 \u2013 2559 \u0e17\u0e35\u0e48\u0e21\u0e35\u0e41\u0e19\u0e27\u0e04\u0e34\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e32\u0e21\u0e1b\u0e23\u0e31\u0e0a\u0e0d\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e42\u0e14\u0e22\u0e22\u0e36\u0e14\u0e04\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e25\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e35\u0e48\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e17\u0e38\u0e01\u0e21\u0e34\u0e15\u0e34\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e1a\u0e39\u0e23\u0e13\u0e32\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e07\u0e04\u0e4c\u0e23\u0e27\u0e21 \u0e17\u0e31\u0e49\u0e07\u0e21\u0e34\u0e15\u0e34\u0e15\u0e31\u0e27\u0e04\u0e19 \u0e2a\u0e31\u0e07\u0e04\u0e21 \u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e21\u0e37\u0e2d\u0e07\",\n        \"\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34\u0e09\u0e1a\u0e31\u0e1a\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07 (\u0e1e.\u0e28. 2552 \u2013 2559) \u0e17\u0e35\u0e48\u0e2a\u0e32\u0e23\u0e30\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e22\u0e31\u0e07\u0e04\u0e07\u0e40\u0e19\u0e49\u0e19\u0e43\u0e19\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e1b\u0e23\u0e31\u0e0a\u0e0d\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e22\u0e36\u0e14\u0e04\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e25\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e0a\u0e48\u0e19\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e42\u0e14\u0e22\u0e21\u0e35\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c\u0e27\u0e48\u0e32\u0e04\u0e19\u0e44\u0e17\u0e22\u0e44\u0e14\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e15\u0e25\u0e2d\u0e14\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e0b\u0e36\u0e48\u0e07\u0e21\u0e35\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e19\u0e33\u0e2a\u0e39\u0e48\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e27\u0e48\u0e32\u0e04\u0e19\u0e44\u0e17\u0e22\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e19\u0e14\u0e35 \u0e40\u0e01\u0e48\u0e07 \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02 \u0e2a\u0e31\u0e07\u0e04\u0e21\u0e44\u0e17\u0e22\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e31\u0e07\u0e04\u0e21\u0e41\u0e2b\u0e48\u0e07\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21 \u0e20\u0e39\u0e21\u0e34\u0e1b\u0e31\u0e0d\u0e0d\u0e32\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e21\u0e35\u0e2a\u0e20\u0e32\u0e1e\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e17\u0e35\u0e48\u0e40\u0e2d\u0e37\u0e49\u0e2d\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\",\n        \"\u0e2d\u0e35\u0e01\u0e17\u0e31\u0e49\u0e07\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e1a\u0e31\u0e0d\u0e0d\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34 \u0e1e.\u0e28. 2542 \u0e41\u0e01\u0e49\u0e44\u0e02\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 (\u0e09\u0e1a\u0e31\u0e1a\u0e17\u0e35\u0e48 2) \u0e1e.\u0e28. 2545 \u0e41\u0e25\u0e30\u0e17\u0e35\u0e48\u0e41\u0e01\u0e49\u0e44\u0e02\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 (\u0e09\u0e1a\u0e31\u0e1a\u0e17\u0e35\u0e48 3) \u0e1e.\u0e28. 2553 \u0e40\u0e1b\u0e47\u0e19\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e23\u0e31\u0e10\u0e18\u0e23\u0e23\u0e21\u0e19\u0e39\u0e0d\u0e41\u0e2b\u0e48\u0e07\u0e23\u0e32\u0e0a\u0e2d\u0e32\u0e13\u0e32\u0e08\u0e31\u0e01\u0e23\u0e44\u0e17\u0e22 \u0e1e.\u0e28. 2540 \u0e17\u0e35\u0e48\u0e21\u0e32\u0e15\u0e23\u0e32 81 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e1a\u0e31\u0e0d\u0e0d\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34 \u0e1e.\u0e28. 2542 \u0e44\u0e14\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e1a\u0e17\u0e1a\u0e31\u0e0d\u0e0d\u0e31\u0e15\u0e34\u0e44\u0e27\u0e49\",\n        \"\u0e43\u0e19\u0e2b\u0e21\u0e27\u0e14 3 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e21\u0e35\u0e2a\u0e32\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e19\u0e2d\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e32\u0e21\u0e2d\u0e31\u0e18\u0e22\u0e32\u0e28\u0e31\u0e22\",\n        \"\u0e43\u0e19\u0e2b\u0e21\u0e27\u0e14 4 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e41\u0e19\u0e27\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e42\u0e14\u0e22\u0e22\u0e36\u0e14\u0e2b\u0e25\u0e31\u0e01\u0e27\u0e48\u0e32\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e38\u0e01\u0e04\u0e19\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49 \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e41\u0e25\u0e30\u0e40\u0e15\u0e47\u0e21\u0e15\u0e32\u0e21\u0e28\u0e31\u0e01\u0e22\u0e20\u0e32\u0e1e\u0e17\u0e31\u0e49\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30 \u0e19\u0e2d\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e19\u0e49\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e17\u0e31\u0e49\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49 \u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\",\n        \"\u0e42\u0e14\u0e22\u0e43\u0e19\u0e2b\u0e21\u0e27\u0e14 6 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e38\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e20\u0e32\u0e22\u0e43\u0e19\u0e17\u0e38\u0e01\u0e1b\u0e35\u0e41\u0e25\u0e30\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\u0e17\u0e38\u0e01 5 \u0e1b\u0e35 \u0e17\u0e31\u0e49\u0e07\u0e2a\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e2a\u0e19\u0e2d\u0e15\u0e48\u0e2d\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e0a\u0e19\u0e42\u0e14\u0e22\u0e23\u0e31\u0e10\u0e08\u0e31\u0e14\u0e2a\u0e23\u0e23\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e41\u0e25\u0e30\u0e01\u0e2d\u0e07\u0e17\u0e38\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e23\u0e39\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1e\u0e2d \u0e21\u0e35\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e27\u0e48\u0e32\u0e14\u0e49\u0e27\u0e22\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e04\u0e48\u0e32\u0e15\u0e2d\u0e1a\u0e41\u0e17\u0e19\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e23\u0e31\u0e10\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e31\u0e14\u0e2a\u0e23\u0e23\u0e04\u0e25\u0e37\u0e48\u0e19\u0e04\u0e27\u0e32\u0e21\u0e16\u0e35\u0e48\u0e2a\u0e37\u0e48\u0e2d\u0e15\u0e31\u0e27\u0e19\u0e33\u0e41\u0e25\u0e30\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e17\u0e35\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e01\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e19\u0e15\u0e33\u0e23\u0e32\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e17\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2d\u0e37\u0e48\u0e19\",\n        \"\u0e2d\u0e35\u0e01\u0e17\u0e31\u0e49\u0e07\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e23\u0e39\u0e1b\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e19\u0e17\u0e28\u0e27\u0e23\u0e23\u0e29\u0e17\u0e35\u0e48 2 (\u0e1e.\u0e28.2552-2556) \u0e21\u0e35\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c\u0e44\u0e27\u0e49\u0e27\u0e48\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e33\u0e25\u0e31\u0e07\u0e04\u0e19\u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a\u0e19\u0e32\u0e19\u0e32\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e42\u0e14\u0e22\u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e20\u0e32\u0e04\u0e2a\u0e48\u0e27\u0e19\"\n    ];\n\n    const colleges = [\n        { id: 1, name: \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\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 (\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21)\", address: \"89 \u0e2b\u0e21\u0e39\u0e48 12 \u0e15\u0e33\u0e1a\u0e25\u0e25\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21\", phone: \"0-3471-1811\", fax: \"0-3471-1811 \u0e15\u0e48\u0e2d 106\", website: \"www.ivecr5.ac.th\", highlight: true },\n        { id: 2, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\", address: \"927 \u0e16\u0e19\u0e19\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08 1 \u0e15\u0e33\u0e1a\u0e25\u0e21\u0e2b\u0e32\u0e0a\u0e31\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\", phone: \"0-3441-1248 , 086-301-8051\", fax: \"0-3441-1185\", website: \"www.skntc.ac.th\", highlight: false },\n        { id: 3, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\", address: \"115 \u0e16\u0e19\u0e19\u0e1a\u0e23\u0e34\u0e1e\u0e31\u0e15\u0e23 \u0e15\u0e33\u0e1a\u0e25\u0e17\u0e48\u0e32\u0e23\u0e32\u0e1a \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\", phone: \"0-3242-5432\", fax: \"0-3242-5705 \u0e15\u0e48\u0e2d 105\", website: \"www.pbtc.ac.th\", highlight: false },\n        { id: 4, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\", address: \"300 \u0e15\u0e33\u0e1a\u0e25\u0e04\u0e25\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e41\u0e0a\u0e07 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\", phone: \"0-3242-5557\", fax: \"0-3242-5557 \u0e15\u0e48\u0e2d 111\", website: \"www.pbpvc.ac.th\", highlight: false },\n        { id: 5, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c\", address: \"302 \u0e16\u0e19\u0e19\u0e2a\u0e25\u0e30\u0e0a\u0e35\u0e1e \u0e15\u0e33\u0e1a\u0e25\u0e40\u0e01\u0e32\u0e30\u0e2b\u0e25\u0e31\u0e01\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c\", phone: \"0-3261-1130\", fax: \"0-3260-1588\", website: \"www.pktc.ac.th\", highlight: false },\n        { id: 6, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e27\u0e31\u0e07\u0e44\u0e01\u0e25\u0e01\u0e31\u0e07\u0e27\u0e25\", address: \"3\/64 \u0e16\u0e19\u0e19\u0e40\u0e25\u0e35\u0e22\u0e1a\u0e27\u0e31\u0e07 \u0e15\u0e33\u0e1a\u0e25\u0e2b\u0e31\u0e27\u0e2b\u0e34\u0e19 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e31\u0e27\u0e2b\u0e34\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c\", phone: \"0-3252-0500\", fax: null, website: \"www.kkwind.ac.th\", highlight: false },\n        { id: 7, name: \"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e1a\u0e32\u0e07\u0e2a\u0e30\u0e1e\u0e32\u0e19\", address: \"101 \u0e2b\u0e21\u0e39\u0e48 1 \u0e15\u0e33\u0e1a\u0e25\u0e17\u0e2d\u0e07\u0e21\u0e07\u0e04\u0e25 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1a\u0e32\u0e07\u0e2a\u0e30\u0e1e\u0e32\u0e19 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c\", phone: \"0-3252-0500\", fax: null, website: \"www.bspc.ac.th\", highlight: false }\n    ];\n\n    const Icon = ({ name, size = 18, 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        const [searchTerm, setSearchTerm] = useState(\"\");\n        \n        \/\/ Filter Logic\n        const filteredColleges = useMemo(() => {\n            return colleges.filter(c => \n                c.name.includes(searchTerm) || \n                c.address.includes(searchTerm)\n            );\n        }, [searchTerm]);\n\n        return (\n            <div className=\"max-w-6xl mx-auto\">\n                \n                {\/* Header Section with Modern Design *\/}\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                    \n                    {\/* Animated Background Blobs *\/}\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                        {\/* Floating 3D-like Icon Badge *\/}\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                {\/* Main Content Card *\/}\n                <div className=\"bg-white rounded-2xl shadow-sm border border-slate-100 p-8 md:p-10 mb-12 animate-fade-in delay-100\">\n                    <div className=\"flex items-center gap-3 mb-6\">\n                        <div className=\"p-2 bg-orange-100 text-orange-600 rounded-lg\">\n                            <Icon name=\"book-open\" size={24} \/>\n                        <\/div>\n                        <h2 className=\"text-2xl font-bold text-slate-800\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e41\u0e25\u0e30\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22<\/h2>\n                    <\/div>\n                    \n                    <div className=\"prose prose-lg max-w-none text-slate-600 font-light leading-loose text-justify space-y-4\">\n                        {contentParagraphs.map((paragraph, index) => (\n                            <p key={index} className=\"indent-8 hover:text-slate-900 transition-colors duration-300\">\n                                {paragraph}\n                            <\/p>\n                        ))}\n                    <\/div>\n                <\/div>\n\n                {\/* Locations Section with Search *\/}\n                <div className=\"animate-fade-in delay-200\">\n                    <div className=\"flex flex-col md:flex-row justify-between items-center mb-8 gap-4\">\n                        <div className=\"flex items-center gap-3 self-start md:self-center\">\n                            <div className=\"p-2 bg-blue-100 text-blue-600 rounded-lg\">\n                                <Icon name=\"map\" size={24} \/>\n                            <\/div>\n                            <h2 className=\"text-2xl font-bold text-slate-800\">\u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/h2>\n                        <\/div>\n                        \n                        {\/* Search Input Gimmick *\/}\n                        <div className=\"relative w-full md:w-80 group\">\n                            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition\">\n                                <Icon name=\"search\" size={18} \/>\n                            <\/div>\n                            <input \n                                type=\"text\" \n                                placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22...\" \n                                className=\"pl-10 pr-4 py-2 w-full rounded-full border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all shadow-sm\"\n                                value={searchTerm}\n                                onChange={(e) => setSearchTerm(e.target.value)}\n                            \/>\n                        <\/div>\n                    <\/div>\n\n                    {\/* Grid *\/}\n                    <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                        {filteredColleges.length > 0 ? (\n                            filteredColleges.map((college) => (\n                                <div key={college.id} className={`\n                                    relative bg-white rounded-xl p-6 border transition-all duration-300 group\n                                    ${college.highlight ? 'border-blue-200 shadow-md ring-1 ring-blue-100' : 'border-slate-100 shadow-sm'}\n                                    hover:shadow-xl hover:-translate-y-1 hover:border-blue-300\n                                `}>\n                                    {college.highlight && (\n                                        <div className=\"absolute top-4 right-4 text-orange-500 animate-pulse\" title=\"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\">\n                                            <Icon name=\"star\" size={20} fill=\"currentColor\" \/>\n                                        <\/div>\n                                    )}\n                                    \n                                    <div className=\"mb-4\">\n                                        <div className=\"w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center text-blue-600 mb-3 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-300\">\n                                            <Icon name=\"building-2\" size={24} \/>\n                                        <\/div>\n                                        <h3 className=\"font-bold text-lg text-slate-800 group-hover:text-blue-700 transition leading-snug min-h-[3.5rem] flex items-center\">\n                                            {college.name}\n                                        <\/h3>\n                                    <\/div>\n\n                                    <div className=\"space-y-3 text-sm text-slate-500 font-light\">\n                                        <div className=\"flex items-start gap-2\">\n                                            <Icon name=\"map-pin\" size={16} className=\"mt-0.5 text-slate-400 shrink-0\" \/>\n                                            <span className=\"leading-tight\">{college.address}<\/span>\n                                        <\/div>\n                                        <div className=\"flex items-center gap-2\">\n                                            <Icon name=\"phone\" size={16} className=\"text-slate-400 shrink-0\" \/>\n                                            <span>{college.phone}<\/span>\n                                        <\/div>\n                                        {college.fax && (\n                                            <div className=\"flex items-center gap-2\">\n                                                <Icon name=\"printer\" size={16} className=\"text-slate-400 shrink-0\" \/>\n                                                <span>{college.fax}<\/span>\n                                            <\/div>\n                                        )}\n                                    <\/div>\n\n                                    <div className=\"mt-5 pt-4 border-t border-slate-50\">\n                                        <a \n                                            href={`http:\/\/${college.website}`} \n                                            target=\"_blank\" \n                                            rel=\"noopener noreferrer\" \n                                            className=\"inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-orange-500 transition-colors\"\n                                        >\n                                            \u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e0a\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c <Icon name=\"arrow-right\" size={14} \/>\n                                        <\/a>\n                                    <\/div>\n                                <\/div>\n                            ))\n                        ) : (\n                            <div className=\"col-span-full text-center py-12 text-slate-400 bg-slate-50 rounded-xl border border-dashed border-slate-200\">\n                                <Icon name=\"search-x\" size={48} className=\"mx-auto mb-3 opacity-50\" \/>\n                                <p>\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/p>\n                            <\/div>\n                        )}\n                    <\/div>\n                <\/div>\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>\n<p>Views: 36<\/p>","protected":false},"excerpt":{"rendered":"<p>Views: 36<\/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-68","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/68","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=68"}],"version-history":[{"count":12,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":18134,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/68\/revisions\/18134"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}