{"id":73,"date":"2019-11-29T10:41:24","date_gmt":"2019-11-29T03:41:24","guid":{"rendered":"http:\/\/www.ivecr5.ac.th\/web2020\/?page_id=73"},"modified":"2026-06-26T11:27:49","modified_gmt":"2026-06-26T04:27:49","slug":"%e0%b8%a7%e0%b8%b4%e0%b8%aa%e0%b8%b1%e0%b8%a2%e0%b8%97%e0%b8%b1%e0%b8%a8%e0%b8%99%e0%b9%8c%e0%b9%81%e0%b8%a5%e0%b8%b0%e0%b8%9e%e0%b8%b1%e0%b8%99%e0%b8%98%e0%b8%81%e0%b8%b4%e0%b8%88","status":"publish","type":"page","link":"https:\/\/www.ivecr5.ac.th\/web2020\/%e0%b8%a7%e0%b8%b4%e0%b8%aa%e0%b8%b1%e0%b8%a2%e0%b8%97%e0%b8%b1%e0%b8%a8%e0%b8%99%e0%b9%8c%e0%b9%81%e0%b8%a5%e0%b8%b0%e0%b8%9e%e0%b8%b1%e0%b8%99%e0%b8%98%e0%b8%81%e0%b8%b4%e0%b8%88\/","title":{"rendered":"\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08"},"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-fc9ac1c4\" data-vce-do-apply=\"all el-fc9ac1c4\"><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-97f304ed\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-97f304ed\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-97f304ed\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-4813c164\" data-vce-do-apply=\"all el-4813c164\"><!-- \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<!-- \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07: \u0e25\u0e47\u0e2d\u0e01\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e02\u0e2d\u0e07 Babel \u0e40\u0e1b\u0e47\u0e19 v7.24.0 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19 Error \u0e43\u0e19\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e44\u0e1e\u0e25\u0e4c\u0e02\u0e2d\u0e07 Babel 8 -->\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.24.0\/babel.min.js\"><\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/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 *\/\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 } = React;\n\n    \/\/ \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07: \u0e43\u0e0a\u0e49 Pure React Inline SVG \u0e41\u0e17\u0e19\u0e44\u0e25\u0e1a\u0e23\u0e32\u0e23\u0e35\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49 DOM \u0e1e\u0e31\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e0a\u0e19\u0e01\u0e31\u0e1a React DOM Tree\n    const Icon = ({ name, size = 24, className = \"\" }) => {\n        const svgProps = {\n            width: size,\n            height: size,\n            viewBox: \"0 0 24 24\",\n            fill: \"none\",\n            stroke: \"currentColor\",\n            strokeWidth: \"2\",\n            strokeLinecap: \"round\",\n            strokeLinejoin: \"round\",\n            className: className\n        };\n\n        switch (name) {\n            case \"award\":\n                return (\n                    <svg {...svgProps}>\n                        <circle cx=\"12\" cy=\"8\" r=\"7\" \/>\n                        <polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\" \/>\n                    <\/svg>\n                );\n            case \"telescope\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"m10.07 13.93 4.71-4.72\" \/>\n                        <path d=\"m11.18 17.29-4.72-4.71\" \/>\n                        <path d=\"m15.89 12.52 4.71-4.71\" \/>\n                        <circle cx=\"14\" cy=\"14\" r=\"2\" \/>\n                        <path d=\"M16 4a2 2 0 1 0-4 0\" \/>\n                        <path d=\"m16.42 16.42 3.58 3.58\" \/>\n                        <path d=\"M7.58 7.58 4 11\" \/>\n                        <path d=\"m8.5 19 1-5\" \/>\n                        <path d=\"m19 8.5-5 1\" \/>\n                    <\/svg>\n                );\n            case \"eye\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" \/>\n                        <circle cx=\"12\" cy=\"12\" r=\"3\" \/>\n                    <\/svg>\n                );\n            case \"fingerprint\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M12 10a4 4 0 0 0-4 4v3\" \/>\n                        <path d=\"M12 6a8 8 0 0 0-8 8v7\" \/>\n                        <path d=\"M12 2a12 12 0 0 0-12 12v1\" \/>\n                        <path d=\"M12 14a2 2 0 0 0-2 2v5\" \/>\n                        <path d=\"M16 14a6 6 0 0 0-6-6\" \/>\n                        <path d=\"M20 14a10 10 0 0 0-10-10\" \/>\n                    <\/svg>\n                );\n            case \"badge-check\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.74z\" \/>\n                        <path d=\"m9 12 2 2 4-4\" \/>\n                    <\/svg>\n                );\n            case \"rocket\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M4.5 16.5c-1.5 1.26-2 3.5-2 3.5s2.24-.5 3.5-2\" \/>\n                        <path d=\"M12 15c-1.8 0-3.3-1.5-3.3-3.3 0-2.2 2.1-4.7 3.3-6.7 1.2 2 3.3 4.5 3.3 6.7 0 1.8-1.5 3.3-3.3 3.3Z\" \/>\n                        <path d=\"M9.8 11.2c-.8.8-1.5 1.5-2 2.3-.4.6-.6 1.3-.6 2a1.8 1.8 0 0 0 1.8 1.8c.7 0 1.4-.2 2-.6.8-.5 1.5-1.2 2.3-2\" \/>\n                        <path d=\"M12 15v5a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-3.5\" \/>\n                        <path d=\"M12 15h5a2 2 0 0 0 2 2h3.5a2 2 0 0 0 2-2V13\" \/>\n                    <\/svg>\n                );\n            case \"target\":\n                return (\n                    <svg {...svgProps}>\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <circle cx=\"12\" cy=\"12\" r=\"6\" \/>\n                        <circle cx=\"12\" cy=\"12\" r=\"2\" \/>\n                    <\/svg>\n                );\n            case \"palette\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M12 22C17.52 22 22 17.52 22 12S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10zm0-18c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z\" \/>\n                        <circle cx=\"7.5\" cy=\"10.5\" r=\"1.5\" fill=\"currentColor\"\/>\n                        <circle cx=\"11.5\" cy=\"7.5\" r=\"1.5\" fill=\"currentColor\"\/>\n                        <circle cx=\"16.5\" cy=\"9.5\" r=\"1.5\" fill=\"currentColor\"\/>\n                        <circle cx=\"15.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\"\/>\n                    <\/svg>\n                );\n            case \"flag\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\" \/>\n                        <line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\" \/>\n                    <\/svg>\n                );\n            case \"trees\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M10 10v.01\" \/>\n                        <path d=\"M16 14v.01\" \/>\n                        <path d=\"M8 14v.01\" \/>\n                        <path d=\"M12 18v.01\" \/>\n                        <path d=\"M12 20H8a6 6 0 0 1-5.36-8.75A5 5 0 0 1 7.2 5a6.47 6.47 0 0 1 12.13 2.5 5 5 0 0 1 2.31 8.75A6 6 0 0 1 16 20h-4v-4\" \/>\n                    <\/svg>\n                );\n            case \"users\":\n                return (\n                    <svg {...svgProps}>\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" \/>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\" \/>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" \/>\n                        <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" \/>\n                    <\/svg>\n                );\n            default:\n                return null;\n        }\n    };\n\n    const InfoCard = ({ title, icon, children, className = \"\" }) => (\n        <div className={`bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-all duration-300 ${className}`}>\n            <div className=\"flex items-center gap-3 mb-4\">\n                <div className=\"p-2 bg-blue-50 text-blue-600 rounded-lg shrink-0\">\n                    <Icon name={icon} size={24} \/>\n                <\/div>\n                <h3 className=\"text-xl font-bold text-slate-800\">{title}<\/h3>\n            <\/div>\n            <div className=\"text-slate-600 leading-relaxed font-light\">\n                {children}\n            <\/div>\n        <\/div>\n    );\n\n    const ListSection = ({ items, title, icon }) => (\n        <div className=\"bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-slate-100 h-full\">\n            <div className=\"flex items-center gap-3 mb-6 pb-4 border-b border-slate-50\">\n                <div className=\"p-2 bg-orange-50 text-orange-600 rounded-lg shrink-0\">\n                    <Icon name={icon} size={24} \/>\n                <\/div>\n                <h3 className=\"text-xl font-bold text-slate-800\">{title}<\/h3>\n            <\/div>\n            <ul className=\"space-y-4\">\n                {items.map((item, idx) => (\n                    <li key={idx} className=\"flex items-start gap-3 text-slate-600 font-light hover:text-slate-900 transition-colors\">\n                        <span className=\"flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-bold mt-0.5\">\n                            {idx + 1}\n                        <\/span>\n                        <span className=\"leading-relaxed\">{item}<\/span>\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n\n    const App = () => {\n        \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c PDF\n        const missionItems = [\n            \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28\u0e17\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e \u0e15\u0e32\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\",\n            \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e23\u0e39 \u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e2a\u0e21\u0e23\u0e23\u0e16\u0e19\u0e30\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 \u0e17\u0e31\u0e01\u0e29\u0e30\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e17\u0e35\u0e48\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e01\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22 \u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 \u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\u0e2a\u0e39\u0e48\u0e04\u0e27\u0e32\u0e21\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e43\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e\",\n            \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e35 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\u0e17\u0e38\u0e01\u0e17\u0e35\u0e48 \u0e17\u0e38\u0e01\u0e40\u0e27\u0e25\u0e32 \u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 AI \u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 \u0e01\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e1b\u0e23\u0e30\u0e14\u0e34\u0e29\u0e10\u0e4c \u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e39\u0e07 \u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e41\u0e23\u0e07\u0e07\u0e32\u0e19\u0e2a\u0e21\u0e23\u0e23\u0e16\u0e19\u0e30\u0e2a\u0e39\u0e07 \u0e16\u0e48\u0e32\u0e22\u0e17\u0e2d\u0e14\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\u0e2a\u0e39\u0e48\u0e0a\u0e38\u0e21\u0e0a\u0e19 \u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\",\n            \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19 \u0e17\u0e31\u0e49\u0e07\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a \u0e19\u0e2d\u0e01\u0e23\u0e30\u0e1a\u0e1a \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e19\u0e33\u0e23\u0e30\u0e1a\u0e1a\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07\u0e20\u0e32\u0e04\u0e35\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\",\n            \"\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e20\u0e32\u0e1e\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e22\u0e38\u0e04\u0e43\u0e2b\u0e21\u0e48 (\u0e01\u0e49\u0e32\u0e27\u0e14\u0e35)\"\n        ];\n\n        const goalItems = [\n            \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e \u0e15\u0e32\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\",\n            \"\u0e04\u0e23\u0e39 \u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e21\u0e35\u0e2a\u0e21\u0e23\u0e23\u0e16\u0e19\u0e30\u0e43\u0e19\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e17\u0e35\u0e48\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e21\u0e35\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e43\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e \u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\",\n            \"\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e17\u0e31\u0e01\u0e29\u0e30\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e \u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 AI \u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e01\u0e32\u0e23\u0e21\u0e35\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e43\u0e2b\u0e49\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e41\u0e23\u0e07\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e2a\u0e21\u0e23\u0e23\u0e16\u0e19\u0e30\u0e2a\u0e39\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e31\u0e49\u0e07\u0e16\u0e48\u0e32\u0e22\u0e17\u0e2d\u0e14\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\u0e2a\u0e39\u0e48\u0e0a\u0e38\u0e21\u0e0a\u0e19\",\n            \"\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2f \u0e21\u0e35\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19 \u0e42\u0e14\u0e22\u0e19\u0e33\u0e23\u0e30\u0e1a\u0e1a\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e21\u0e41\u0e02\u0e47\u0e07\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e14\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\",\n            \"\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e04\u0e23\u0e39 \u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c \u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21\u0e35\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21 \u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21 \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e20\u0e32\u0e04\u0e20\u0e39\u0e21\u0e34\u0e43\u0e08\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e17\u0e22 \u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e20\u0e32\u0e1e\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e14\u0e35 (\u0e01\u0e49\u0e32\u0e27\u0e14\u0e35) \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21 \u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\"\n        ];\n\n        return (\n            <div className=\"max-w-6xl mx-auto\">\n                \n                {\/* HEADER SECTION *\/}\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                {\/* CONTENT SECTION *\/}\n                <div className=\"space-y-8 animate-fade-in delay-100\">\n                    \n                    {\/* Row 1: Vision & Identity *\/}\n                    <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                        <div className=\"bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-8 text-white shadow-lg relative overflow-hidden group\">\n                            <div className=\"absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform duration-500\">\n                                <Icon name=\"telescope\" size={120} \/>\n                            <\/div>\n                            <div className=\"relative z-10\">\n                                <div className=\"flex items-center gap-3 mb-4 text-blue-200\">\n                                    <Icon name=\"eye\" size={24} \/>\n                                    <h3 className=\"font-bold text-lg uppercase tracking-wider\">\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c (Vision)<\/h3>\n                                <\/div>\n                                <p className=\"text-xl md:text-2xl font-semibold leading-relaxed\">\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                        <\/div>\n\n                        <div className=\"bg-white rounded-2xl p-8 shadow-sm border border-slate-100 relative overflow-hidden group\">\n                             <div className=\"absolute top-0 right-0 p-4 text-slate-100 group-hover:text-orange-50 transition-colors duration-500\">\n                                <Icon name=\"fingerprint\" size={120} \/>\n                            <\/div>\n                            <div className=\"relative z-10\">\n                                <div className=\"flex items-center gap-3 mb-4 text-orange-500\">\n                                    <Icon name=\"badge-check\" size={24} \/>\n                                    <h3 className=\"font-bold text-lg uppercase tracking-wider\">\u0e2d\u0e31\u0e15\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c (Identity)<\/h3>\n                                <\/div>\n                                <p className=\"text-xl md:text-2xl font-semibold text-slate-800 leading-relaxed\">\n                                    \"\u0e19\u0e31\u0e01\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e14\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e30\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2a\u0e32\u0e01\u0e25\"\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    {\/* Row 2: Mission & Goals *\/}\n                    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                        <ListSection title=\"\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 (Mission)\" icon=\"rocket\" items={missionItems} \/>\n                        <ListSection title=\"\u0e40\u0e1b\u0e49\u0e32\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c (Goals)\" icon=\"target\" items={goalItems} \/>\n                    <\/div>\n\n                    {\/* Row 3: Symbols & Tree *\/}\n                    <div className=\"bg-white rounded-2xl p-8 shadow-sm border border-slate-100\">\n                        <div className=\"flex items-center gap-3 mb-8\">\n                            <div className=\"p-2 bg-purple-50 text-purple-600 rounded-lg shrink-0\">\n                                <Icon name=\"palette\" size={24} \/>\n                            <\/div>\n                            <h2 className=\"text-2xl font-bold text-slate-800\">\u0e2a\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/h2>\n                        <\/div>\n\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12\">\n                            {\/* Color & Flag *\/}\n                            <div className=\"space-y-6\">\n                                <div>\n                                    <h4 className=\"font-bold text-lg text-slate-700 mb-3 flex items-center gap-2\">\n                                        <span className=\"w-4 h-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600\"><\/span>\n                                        \u0e2a\u0e35\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 : \u0e2a\u0e35\u0e1f\u0e49\u0e32 - \u0e02\u0e32\u0e27\n                                    <\/h4>\n                                    <ul className=\"space-y-3 pl-6 border-l-2 border-slate-100\">\n                                        <li className=\"text-slate-600 font-light\">\n                                            <strong className=\"text-blue-500\">\u0e2a\u0e35\u0e1f\u0e49\u0e32:<\/strong> \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c \u0e04\u0e27\u0e32\u0e21\u0e08\u0e23\u0e34\u0e07\u0e43\u0e08\u0e17\u0e35\u0e48\u0e08\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e04\u0e07 \u0e21\u0e31\u0e48\u0e07\u0e04\u0e31\u0e48\u0e07 \u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19 (\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e17\u0e30\u0e40\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e31\u0e49\u0e07 4 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14)\n                                        <\/li>\n                                        <li className=\"text-slate-600 font-light\">\n                                            <strong className=\"text-slate-400\">\u0e2a\u0e35\u0e02\u0e32\u0e27:<\/strong> \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e0b\u0e37\u0e48\u0e2d\u0e2a\u0e31\u0e15\u0e22\u0e4c \u0e2a\u0e38\u0e08\u0e23\u0e34\u0e15 \u0e40\u0e17\u0e35\u0e48\u0e22\u0e07\u0e18\u0e23\u0e23\u0e21 \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e19\n                                        <\/li>\n                                    <\/ul>\n                                <\/div>\n                                <div>\n                                    <h4 className=\"font-bold text-lg text-slate-700 mb-4 flex items-center gap-2\">\n                                        <Icon name=\"flag\" size={18} className=\"text-slate-400\" \/>\n                                        \u0e18\u0e07\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\n                                    <\/h4>\n                                    \n                                    {\/* Flag Image Update *\/}\n                                    <div className=\"mb-4 rounded-xl overflow-hidden shadow-md border border-slate-100 group\">\n                                        <img decoding=\"async\" \n                                            src=\"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-08-175537.png\" \n                                            alt=\"\u0e18\u0e07\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\" \n                                            className=\"w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-500\"\n                                            onError={(e) => {\n                                                e.target.onerror = null;\n                                                e.target.src = \"https:\/\/placehold.co\/600x400\/e2e8f0\/475569?text=Flag+Image+Not+Found\";\n                                            }}\n                                        \/>\n                                    <\/div>\n\n                                    <p className=\"text-slate-600 font-light leading-relaxed pl-6 border-l-2 border-slate-100\">\n                                        \u0e18\u0e07\u0e2a\u0e35\u0e1f\u0e49\u0e32-\u0e02\u0e32\u0e27 \u0e2a\u0e37\u0e48\u0e2d\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c \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\u0e43\u0e19\u0e17\u0e49\u0e2d\u0e07\u0e17\u0e30\u0e40\u0e25\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19 (\u0e2a\u0e35\u0e1f\u0e49\u0e32) \u0e20\u0e32\u0e22\u0e43\u0e15\u0e49\u0e2b\u0e25\u0e31\u0e01\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e18\u0e23\u0e23\u0e21\u0e32\u0e20\u0e34\u0e1a\u0e32\u0e25 (\u0e2a\u0e35\u0e02\u0e32\u0e27\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07)\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n\n                            {\/* Tree *\/}\n                            <div className=\"flex flex-col h-full\">\n                                <div className=\"bg-green-50\/50 rounded-xl p-6 border border-green-100 flex-grow\">\n                                    <div className=\"flex items-center gap-3 mb-4 text-green-700\">\n                                        <Icon name=\"trees\" size={24} \/>\n                                        <h3 className=\"font-bold text-lg\">\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 : \u0e15\u0e49\u0e19\u0e08\u0e34\u0e01\u0e17\u0e30\u0e40\u0e25<\/h3>\n                                    <\/div>\n                                    \n                                    {\/* Tree Image Added *\/}\n                                    <div className=\"mb-4 rounded-lg overflow-hidden shadow-sm border border-green-100 group\">\n                                        <img decoding=\"async\" \n                                            src=\"https:\/\/www.ivecr5.ac.th\/web2020\/wp-content\/uploads\/2026\/01\/43d4317cdf0b5af8299b9be12b5723f91006f109.jpg\" \n                                            alt=\"\u0e15\u0e49\u0e19\u0e08\u0e34\u0e01\u0e17\u0e30\u0e40\u0e25\" \n                                            className=\"w-full h-48 object-cover transform group-hover:scale-105 transition-transform duration-500\"\n                                        \/>\n                                        <div className=\"bg-green-800 text-white text-xs py-1 px-3 text-center\">\n                                            Barringtonia asiatica\n                                        <\/div>\n                                    <\/div>\n\n                                    <div className=\"space-y-4 text-slate-600 font-light text-sm md:text-base leading-relaxed\">\n                                        <p>\n                                            \u0e44\u0e21\u0e49\u0e22\u0e37\u0e19\u0e15\u0e49\u0e19\u0e23\u0e34\u0e21\u0e17\u0e30\u0e40\u0e25\u0e2d\u0e48\u0e32\u0e27\u0e44\u0e17\u0e22 \u0e2a\u0e39\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 10 \u0e40\u0e21\u0e15\u0e23 \u0e41\u0e1c\u0e48\u0e01\u0e34\u0e48\u0e07\u0e01\u0e49\u0e32\u0e19\u0e2a\u0e32\u0e02\u0e32 \u0e40\u0e1b\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e15\u0e32\u0e25\/\u0e40\u0e17\u0e32 \u0e43\u0e1a\u0e40\u0e02\u0e35\u0e22\u0e27\u0e40\u0e02\u0e49\u0e21\u0e21\u0e31\u0e19\u0e27\u0e32\u0e27 \u0e14\u0e2d\u0e01\u0e2a\u0e35\u0e02\u0e32\u0e27\u0e40\u0e01\u0e2a\u0e23\u0e0a\u0e21\u0e1e\u0e39 \u0e1c\u0e25\u0e02\u0e19\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48\n                                        <\/p>\n                                        <div className=\"bg-white p-4 rounded-lg shadow-sm border border-green-100\/50\">\n                                            <p className=\"font-medium text-green-800 mb-2\">\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e2d\u0e31\u0e19\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e04\u0e48\u0e32:<\/p>\n                                            <ul className=\"space-y-2 list-disc list-inside\">\n                                                <li>\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49\u0e17\u0e35\u0e48\u0e21\u0e35\u0e43\u0e19 4 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/li>\n                                                <li>\u0e01\u0e34\u0e48\u0e07\u0e01\u0e49\u0e32\u0e19\u0e43\u0e2b\u0e0d\u0e48 \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07 \u0e01\u0e32\u0e23\u0e42\u0e2d\u0e1a\u0e2d\u0e49\u0e2d\u0e21\u0e2d\u0e32\u0e23\u0e35 \u0e14\u0e39\u0e41\u0e25\u0e2a\u0e23\u0e23\u0e1e\u0e2a\u0e34\u0e48\u0e07<\/li>\n                                                <li>\u0e40\u0e01\u0e2a\u0e23\u0e14\u0e2d\u0e01\u0e41\u0e15\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e1d\u0e2d\u0e22 \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d\u0e23\u0e48\u0e27\u0e21\u0e43\u0e08\u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e20\u0e32\u0e04\u0e2a\u0e48\u0e27\u0e19<\/li>\n                                                <li>\u0e1c\u0e25\u0e02\u0e19\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07 \u0e01\u0e32\u0e23\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e48\u0e21\u0e40\u0e07\u0e32\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e2d\u0e37\u0e48\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/li>\n                                            <\/ul>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\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: 57<\/p>","protected":false},"excerpt":{"rendered":"<p>Views: 57<\/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,"footnotes":""},"class_list":["post-73","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/73","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=73"}],"version-history":[{"count":17,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/73\/revisions"}],"predecessor-version":[{"id":18446,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/73\/revisions\/18446"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}