{"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-06-26T11:21:33","modified_gmt":"2026-06-26T04:21:33","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\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/title>\n\n    <!-- React & Babel (\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19 7 \u0e40\u0e2a\u0e16\u0e35\u0e22\u0e23\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) -->\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@7\/babel.min.js\"><\/script>\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n    <!-- Font Kanit -->\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    <style>\n        #vocational-root, \n        #vocational-root * { \n            font-family: 'Kanit', sans-serif !important; \n            box-sizing: border-box;\n        }\n\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        @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        @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 { animation: blob 7s infinite; }\n        .animation-delay-2000 { animation-delay: 2s; }\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 { animation: float 6s ease-in-out infinite; }\n        \n        \/* Loading Spinner *\/\n        .loader {\n            border: 4px solid #f3f4f6;\n            border-top: 4px solid #3b82f6;\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            animation: spin 1s linear infinite;\n        }\n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n    <\/style>\n\n\n\n    <div id=\"vocational-root\" class=\"bg-slate-50 min-h-screen p-4 md:p-8\"><\/div>\n\n    <script type=\"text\/babel\">\n        const { useState, useEffect } = React;\n\n        \/\/ Pure React SVG Icons \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e25\u0e35\u0e01\u0e40\u0e25\u0e35\u0e48\u0e22\u0e07\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e41\u0e17\u0e23\u0e01\u0e41\u0e0b\u0e07 DOM \u0e02\u0e2d\u0e07 React 18 \u0e42\u0e14\u0e22\u0e44\u0e25\u0e1a\u0e23\u0e32\u0e23\u0e35\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\n        const Icon = ({ name, size = 24, className = \"\" }) => {\n            const icons = {\n                \"alert-circle\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" \/>\n                        <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" \/>\n                    <\/svg>\n                ),\n                \"award\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\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                \"users\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\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                \"external-link\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n                        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" \/>\n                        <polyline points=\"15 3 21 3 21 9\" \/>\n                        <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" \/>\n                    <\/svg>\n                ),\n                \"help-circle\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n                        <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\n                        <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" \/>\n                        <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" \/>\n                    <\/svg>\n                ),\n                \"database\": (\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n                        <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\" \/>\n                        <path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\" \/>\n                        <path d=\"M3 12c0 1.66 4 3 9 3s9-1.34 9-3\" \/>\n                    <\/svg>\n                )\n            };\n            return icons[name] || null;\n        };\n\n        \/\/ \u0e0a\u0e38\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e33\u0e25\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e39\u0e07 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e23\u0e2d\u0e07\u0e01\u0e23\u0e13\u0e35\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d API \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\n        const mockData = [\n            {\n                title: \"\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2a\u0e20\u0e32\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e39\u0e07\",\n                members: [\n                    { \n                        name: \"\u0e14\u0e23.\u0e2a\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e23\u0e38\u0e48\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e07\", \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:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?w=400&auto=format&fit=crop&q=80\", \n                        sheetLink: \"https:\/\/docs.google.com\/spreadsheets\" \n                    },\n                    { \n                        name: \"\u0e19\u0e32\u0e22\u0e27\u0e34\u0e40\u0e0a\u0e35\u0e22\u0e23 \u0e1e\u0e23\u0e2b\u0e21\u0e2b\u0e21\u0e2d\", \n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", \n                        image: \"https:\/\/images.unsplash.com\/photo-1519085360753-af0119f7cbe7?w=400&auto=format&fit=crop&q=80\", \n                        sheetLink: \"https:\/\/docs.google.com\/spreadsheets\" \n                    }\n                ]\n            },\n            {\n                title: \"\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\",\n                members: [\n                    { \n                        name: \"\u0e23\u0e28.\u0e14\u0e23. \u0e19\u0e07\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c \u0e42\u0e01\u0e27\u0e34\u0e17\u0e42\u0e01\u0e2a\u0e38\u0e21\", \n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e14\u0e49\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e41\u0e25\u0e30\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\", \n                        image: \"https:\/\/images.unsplash.com\/photo-1573496359142-b8d87734a5a2?w=400&auto=format&fit=crop&q=80\", \n                        sheetLink: \"https:\/\/docs.google.com\/spreadsheets\" \n                    },\n                    { \n                        name: \"\u0e19\u0e32\u0e22\u0e40\u0e01\u0e23\u0e35\u0e22\u0e07\u0e44\u0e01\u0e23 \u0e40\u0e18\u0e35\u0e22\u0e23\u0e19\u0e38\u0e01\u0e38\u0e25\", \n                        position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e20\u0e32\u0e04\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e23\u0e23\u0e21\", \n                        image: \"https:\/\/images.unsplash.com\/photo-1472099645785-5658abf4ff4e?w=400&auto=format&fit=crop&q=80\", \n                        sheetLink: \"\" \n                    }\n                ]\n            }\n        ];\n\n        const App = () => {\n            const [councilGroups, setCouncilGroups] = useState([]);\n            const [loading, setLoading] = useState(true);\n            const [error, setError] = useState(null);\n            const [showNotification, setShowNotification] = useState({ show: false, message: \"\" });\n\n            \/\/ =========================================================================\n            \/\/ URL \u0e08\u0e32\u0e01\u0e01\u0e32\u0e23 Deploy Google Apps Script (Web App) \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\n            \/\/ =========================================================================\n            const API_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbz9_d7sH82kbAkEQN5pH-vFXIKfJ9xbJQSUPcP8xVeE9-UKmtkmmT_5QIl9TkNtICIDJg\/exec\"; \n\n            useEffect(() => {\n                \/\/ \u0e16\u0e49\u0e32\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e22\u0e31\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e17\u0e35\u0e48\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38 \u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e42\u0e2b\u0e21\u0e14\u0e08\u0e33\u0e25\u0e2d\u0e07\u0e17\u0e31\u0e19\u0e17\u0e35\n                if (API_URL.includes(\"AKfycbz_XXXXXXXXXXXX\")) {\n                    setCouncilGroups(mockData);\n                    setLoading(false);\n                    return;\n                }\n\n                \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e23\u0e34\u0e07\u0e08\u0e32\u0e01 API \u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\n                fetch(API_URL)\n                    .then(response => {\n                        if (!response.ok) throw new Error(\"\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e23\u0e31\u0e1a\u0e08\u0e32\u0e01\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22\u0e21\u0e35\u0e1b\u0e31\u0e0d\u0e2b\u0e32 (Network response failure)\");\n                        return response.json();\n                    })\n                    .then(data => {\n                        if (data && Array.isArray(data) && data.length > 0) {\n                            setCouncilGroups(data);\n                        } else {\n                            \/\/ \u0e2b\u0e32\u0e01\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e2a\u0e48\u0e07\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\n                            throw new Error(\"\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e0a\u0e35\u0e15\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e27\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e25\u0e48\u0e32\");\n                        }\n                        setLoading(false);\n                    })\n                    .catch(err => {\n                        console.error(\"Fetch Error:\", err);\n                        setError(\"\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 Google Sheets \u0e44\u0e14\u0e49\u0e43\u0e19\u0e02\u0e13\u0e30\u0e19\u0e35\u0e49 \u0e2d\u0e32\u0e08\u0e40\u0e01\u0e34\u0e14\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e41\u0e2d\u0e1b\u0e2b\u0e21\u0e14\u0e2d\u0e32\u0e22\u0e38 \u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e16\u0e39\u0e01\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e1b\u0e47\u0e19 '\u0e17\u0e38\u0e01\u0e04\u0e19 (Anyone)'\");\n                        setLoading(false);\n                    });\n            }, []);\n\n            \/\/ \u0e40\u0e1b\u0e34\u0e14\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\n            const handleCardClick = (member) => {\n                if (member.sheetLink && member.sheetLink.trim() !== '') {\n                    window.open(member.sheetLink, '_blank', 'noopener,noreferrer');\n                } else {\n                    \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e1c\u0e48\u0e32\u0e19 UI \u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21 \u0e41\u0e17\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 alert() \u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e2d\u0e32\u0e08\u0e16\u0e39\u0e01\u0e1a\u0e25\u0e47\u0e2d\u0e01\n                    setShowNotification({\n                        show: true,\n                        message: `\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e38\u0e13 ${member.name}`\n                    });\n                }\n            };\n\n            \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e40\u0e1b\u0e34\u0e14\u0e42\u0e2b\u0e21\u0e14\u0e08\u0e33\u0e25\u0e2d\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e02\u0e13\u0e30\u0e41\u0e01\u0e49\u0e44\u0e02 API\n            const handleLoadMockData = () => {\n                setError(null);\n                setLoading(true);\n                setTimeout(() => {\n                    setCouncilGroups(mockData);\n                    setLoading(false);\n                }, 500);\n            };\n\n            if (loading) {\n                return (\n                    <div className=\"flex flex-col items-center justify-center min-h-[60vh] gap-4\">\n                        <div className=\"loader\"><\/div>\n                        <p className=\"text-slate-500 font-medium animate-pulse\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c Google Sheets...<\/p>\n                    <\/div>\n                );\n            }\n\n            return (\n                <div className=\"max-w-6xl mx-auto\">\n                    \n                    {\/* UI \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e01\u0e39\u0e49\u0e04\u0e37\u0e19\u0e23\u0e30\u0e1a\u0e1a *\/}\n                    {error && (\n                        <div className=\"mb-8 p-6 bg-amber-50 border border-amber-200 rounded-3xl animate-fade-in\">\n                            <div className=\"flex flex-col md:flex-row items-start md:items-center justify-between gap-4\">\n                                <div className=\"flex items-start gap-4\">\n                                    <div className=\"p-3 bg-amber-100 text-amber-700 rounded-2xl shrink-0\">\n                                        <Icon name=\"alert-circle\" size={24} \/>\n                                    <\/div>\n                                    <div>\n                                        <h3 className=\"font-bold text-slate-800 text-lg\">\u0e15\u0e23\u0e27\u0e08\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (API Offline)<\/h3>\n                                        <p className=\"text-slate-600 text-sm mt-1 leading-relaxed\">{error}<\/p>\n                                        <div className=\"mt-2 text-xs text-slate-500 space-y-1\">\n                                            <p>\ud83d\udca1 \u0e27\u0e34\u0e18\u0e35\u0e41\u0e01\u0e49: \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n                                            <ul className=\"list-disc pl-5 space-y-1\">\n                                                <li>\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Deploy \u0e43\u0e19 Apps Script \u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17 <b>Web App<\/b><\/li>\n                                                <li>\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e40\u0e1b\u0e47\u0e19 <b>\"Anyone\" (\u0e17\u0e38\u0e01\u0e04\u0e19)<\/b> \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48 \"Only myself\"<\/li>\n                                                <li>\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e43\u0e19 Google Sheets \u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e08\u0e31\u0e14\u0e40\u0e23\u0e35\u0e22\u0e07\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/li>\n                                            <\/ul>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <button \n                                    onClick={handleLoadMockData}\n                                    className=\"px-6 py-3 bg-blue-600 hover:bg-blue-700 active:scale-95 text-white font-medium rounded-2xl transition duration-150 shrink-0 w-full md:w-auto shadow-md hover:shadow-lg flex items-center justify-center gap-2\"\n                                >\n                                    <Icon name=\"database\" size={18} \/>\n                                    \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e42\u0e2b\u0e21\u0e14\u0e17\u0e14\u0e25\u0e2d\u0e07 (Demo Mode)\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    )}\n\n                    {\/* Notification Modal *\/}\n                    {showNotification.show && (\n                        <div className=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm z-50 flex items-center justify-center p-4\">\n                            <div className=\"bg-white rounded-3xl p-6 md:p-8 max-w-md w-full shadow-2xl animate-fade-in relative overflow-hidden\">\n                                <div className=\"absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-300\"><\/div>\n                                <div className=\"flex items-center gap-4 mb-4\">\n                                    <div className=\"p-3 bg-amber-50 text-amber-500 rounded-2xl\">\n                                        <Icon name=\"help-circle\" size={28} \/>\n                                    <\/div>\n                                    <h3 className=\"text-xl font-bold text-slate-800\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/h3>\n                                <\/div>\n                                <p className=\"text-slate-600 text-base leading-relaxed mb-6\">{showNotification.message}<\/p>\n                                <button \n                                    onClick={() => setShowNotification({ show: false, message: \"\" })}\n                                    className=\"w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-2xl transition duration-150 active:scale-[0.98]\"\n                                >\n                                    \u0e15\u0e01\u0e25\u0e07\u0e41\u0e25\u0e30\u0e23\u0e31\u0e1a\u0e17\u0e23\u0e32\u0e1a\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    )}\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                    <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.length === 0 ? (\n                                <div className=\"text-center p-12 bg-white rounded-3xl border border-slate-100 shadow-sm\">\n                                    <p className=\"text-slate-400\">\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19...<\/p>\n                                <\/div>\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 text-center\">\n                                        {group.title}\n                                    <\/h3>\n                                    \n                                    <div className=\"flex flex-wrap justify-center gap-8\">\n                                        {group.members && group.members.map((member, idx) => (\n                                            <div \n                                                key={idx}\n                                                onClick={() => handleCardClick(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 ${member.sheetLink ? 'cursor-pointer' : 'cursor-default'}`}\n                                            >\n                                                <div className=\"aspect-[3\/4] overflow-hidden bg-slate-100 relative\">\n                                                    {member.sheetLink && (\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                                                    )}\n                                                    <img \n                                                        src={member.image || 'https:\/\/placehold.co\/300x400\/e2e8f0\/475569?text=No+Image'} \n                                                        alt={member.name} \n                                                        className={`w-full h-full object-cover object-top transition-transform duration-500 ${member.sheetLink ? 'group-hover:scale-110' : ''}`}\n                                                        onError={(e) => {\n                                                            e.target.onerror = null;\n                                                            e.target.src = \"https:\/\/placehold.co\/300x400\/e2e8f0\/475569?text=Image+Error\";\n                                                        }}\n                                                    \/>\n                                                    {member.sheetLink && (\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\" title=\"\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\">\n                                                                <Icon name=\"external-link\" size={18} \/>\n                                                            <\/div>\n                                                        <\/div>\n                                                    )}\n                                                <\/div>\n                                                \n                                                <div className=\"p-4 text-center flex-grow flex flex-col justify-center bg-white relative z-20\">\n                                                    <h4 className=\"font-bold text-[14px] sm:text-[15px] md:text-base text-slate-800 group-hover:text-blue-700 transition-colors mb-1 whitespace-nowrap tracking-tight w-full overflow-hidden text-ellipsis\">\n                                                        {member.name}\n                                                    <\/h4>\n                                                    <p className=\"text-xs sm: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                <\/div>\n            );\n        };\n\n        const root = ReactDOM.createRoot(document.getElementById('vocational-root'));\n        root.render(<App \/>);\n    <\/script>\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<p>Views: 201<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19 Views: 201<\/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-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":52,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":18443,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/69\/revisions\/18443"}],"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}]}}