{"id":22615,"date":"2026-09-08T01:40:08","date_gmt":"2026-09-07T18:40:08","guid":{"rendered":"https:\/\/www.ivecr5.ac.th\/web2020\/?page_id=22615"},"modified":"2026-09-08T10:04:42","modified_gmt":"2026-09-08T03:04:42","slug":"%e0%b8%84%e0%b8%93%e0%b8%b0%e0%b8%ad%e0%b8%99%e0%b8%b8%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%ad%e0%b8%99%e0%b8%b8%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\u0e2d\u0e19\u0e38\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-equal-height vce-row-content--top\" id=\"el-bf8e10fa\" data-vce-do-apply=\"all el-bf8e10fa\"><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-1ba1a6da\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1ba1a6da\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1ba1a6da\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-5571c5f8\" data-vce-do-apply=\"all el-5571c5f8\">\n\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e04\u0e13\u0e30\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\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 \u0e55<\/title>\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- FontAwesome Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <!-- Google Font: Sarabun & 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@400;500;600;700&amp;family=Sarabun:wght@300;400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n    \n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        navy: {\n                            50: '#f0f4f8',\n                            100: '#d9e2ec',\n                            800: '#102a43',\n                            900: '#0b1b2b',\n                            950: '#060f18',\n                        },\n                        gold: {\n                            400: '#f6ad55',\n                            500: '#d69e2e',\n                            600: '#b7791f',\n                            700: '#975a16',\n                        }\n                    },\n                    fontFamily: {\n                        sarabun: ['Sarabun', 'sans-serif'],\n                        kanit: ['Kanit', 'sans-serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        body {\n            font-family: 'Sarabun', sans-serif;\n            background-color: #f8fafc;\n        }\n        .font-kanit {\n            font-family: 'Kanit', sans-serif;\n        }\n        .card-shadow {\n            box-shadow: 0 4px 20px -2px rgba(11, 27, 43, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);\n        }\n        .card-shadow-lg {\n            box-shadow: 0 10px 25px -3px rgba(11, 27, 43, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06);\n        }\n    <\/style>\n\n\n\n    <main class=\"max-w-7xl mx-auto w-full flex-grow\">\n        \n        <!-- Header \/ Context Card -->\n        <div class=\"bg-white rounded-2xl p-5 sm:p-6 mb-8 border border-slate-200 card-shadow\">\n            <div class=\"flex items-center gap-4\">\n                <div class=\"p-3 bg-navy-900 text-amber-400 rounded-xl flex-shrink-0\">\n                    <i class=\"fa-solid fa-building-columns text-2xl sm:text-3xl\"><\/i>\n                <\/div>\n                <div>\n                    <span class=\"inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 mb-1\">\n                        <i class=\"fa-solid fa-scroll\"><\/i> \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 \u0e55\n                    <\/span>\n                    <h2 id=\"currentTitle\" class=\"text-xl sm:text-2xl font-bold font-kanit text-navy-900\">\n                        <!-- Dynamic Title -->\n                    <\/h2>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Navigation Tabs -->\n        <div class=\"flex flex-wrap gap-2 border-b border-slate-200 mb-8\">\n            <button id=\"tab-strat\" onclick=\"switchTab('strategy')\" class=\"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-transparent hover:text-navy-900\">\n                <i class=\"fa-solid fa-scale-balanced\"><\/i>\n                \u0e14\u0e49\u0e32\u0e19\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\n                <span id=\"badge-strat\" class=\"ml-1.5 px-2 py-0.5 text-xs rounded-full bg-slate-200 text-slate-700\">11<\/span>\n            <\/button>\n            <button id=\"tab-acad\" onclick=\"switchTab('academic')\" class=\"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-transparent hover:text-navy-900\">\n                <i class=\"fa-solid fa-graduation-cap\"><\/i>\n                \u0e14\u0e49\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\n                <span id=\"badge-acad\" class=\"ml-1.5 px-2 py-0.5 text-xs rounded-full bg-slate-200 text-slate-700\">7<\/span>\n            <\/button>\n        <\/div>\n\n        <!-- Committee Structure Container -->\n        <div id=\"committeeContainer\" class=\"space-y-12\">\n            \n            <!-- SECTION 1: PRESIDENT (Top Tier) -->\n            <section id=\"presidentSection\">\n                <div class=\"text-center mb-4\">\n                    <span class=\"inline-block px-4 py-1 text-xs font-semibold uppercase tracking-wider text-amber-700 bg-amber-50 rounded-full border border-amber-200\/60 font-kanit\">\n                        \u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\n                    <\/span>\n                <\/div>\n                <div id=\"presidentGrid\" class=\"flex justify-center\">\n                    <!-- Dynamic President Card -->\n                <\/div>\n            <\/section>\n\n            <!-- SECTION 2: MEMBERS (Middle Tier - Grid) -->\n            <section id=\"membersSection\">\n                <div class=\"flex items-center my-6\">\n                    <div class=\"flex-grow border-t border-slate-200\"><\/div>\n                    <span class=\"px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider font-kanit\">\n                        \u0e04\u0e13\u0e30\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\n                    <\/span>\n                    <div class=\"flex-grow border-t border-slate-200\"><\/div>\n                <\/div>\n                <div id=\"membersGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n                    <!-- Dynamic Member Cards -->\n                <\/div>\n            <\/section>\n\n            <!-- SECTION 3: SECRETARIAT (Bottom Tier) -->\n            <section id=\"secretariatSection\">\n                <div class=\"flex items-center my-6\">\n                    <div class=\"flex-grow border-t border-slate-200\"><\/div>\n                    <span class=\"px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider font-kanit\">\n                        \u0e1d\u0e48\u0e32\u0e22\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\n                    <\/span>\n                    <div class=\"flex-grow border-t border-slate-200\"><\/div>\n                <\/div>\n                <div id=\"secretariatGrid\" class=\"flex flex-wrap justify-center gap-6\">\n                    <!-- Dynamic Secretariat Cards -->\n                <\/div>\n            <\/section>\n\n        <\/div>\n\n    <\/main>\n\n    <script>\n        const APPS_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbx7zAuIasi0fgMxfschQ_JvjZoYg34NAaqOzwwglqhWHDShGnAKeo9EjRPWhPh7Z17e\/exec\";\n\n        let committeeData = {\n            strategy: {\n                title: \"\u0e41\u0e15\u0e48\u0e07\u0e15\u0e31\u0e49\u0e07\u0e04\u0e13\u0e30\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\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 \u0e55 \u0e14\u0e49\u0e32\u0e19\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\",\n                members: [\n                    { id: 's1', no: 1, name: \"\u0e1e\u0e31\u0e19\u0e08\u0e48\u0e32\u0e40\u0e2d\u0e01\u0e2a\u0e31\u0e19\u0e15\u0e34 \u0e40\u0e25\u0e34\u0e28\u0e44\u0e01\u0e23\", position: \"\u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"president\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's2', no: 2, name: \"\u0e19\u0e32\u0e22\u0e23\u0e32\u0e40\u0e0a\u0e19\u0e17\u0e23\u0e4c \u0e21\u0e13\u0e35\u0e2a\u0e27\u0e48\u0e32\u0e07\u0e27\u0e07\u0e28\u0e4c\", position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2f \u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's3', no: 3, name: \"\u0e19\u0e32\u0e22\u0e15\u0e15\u0e34\u0e22 \u0e2d\u0e31\u0e04\u0e23\u0e27\u0e32\u0e13\u0e34\u0e0a\u0e15\u0e23\u0e30\u0e01\u0e39\u0e25\", position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2f \u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's4', no: 4, name: \"\u0e19\u0e32\u0e22\u0e42\u0e01\u0e27\u0e34\u0e17 \u0e04\u0e39\u0e1e\u0e30\u0e40\u0e19\u0e35\u0e22\u0e14\", position: \"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e01\u0e25\u0e38\u0e48\u0e21\u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e19\u0e34\u0e15\u0e34\u0e01\u0e32\u0e23 \u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1b\u0e25\u0e31\u0e14\u0e01\u0e23\u0e30\u0e17\u0e23\u0e27\u0e07\u0e28\u0e36\u0e01\u0e29\u0e32\u0e18\u0e34\u0e01\u0e32\u0e23\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's5', no: 5, name: \"\u0e19\u0e32\u0e07\u0e22\u0e38\u0e1e\u0e34\u0e19 \u0e01\u0e32\u0e0d\u0e08\u0e19\u0e27\u0e34\u0e01\u0e31\u0e22\", position: \"\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32\u0e2a\u0e32\u0e22\u0e01\u0e25\u0e22\u0e38\u0e17\u0e18\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e35\u0e48\u0e22\u0e07\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e40\u0e2d\u0e2a \u0e41\u0e2d\u0e19\u0e14\u0e4c \u0e1e\u0e35 \u0e0b\u0e34\u0e19\u0e14\u0e34\u0e40\u0e04\u0e17 \u0e08\u0e33\u0e01\u0e31\u0e14 (\u0e21\u0e2b\u0e32\u0e0a\u0e19)\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"female\", imageUrl: \"\" },\n                    { id: 's6', no: 6, name: \"\u0e19\u0e32\u0e22\u0e18\u0e23\u0e32\u0e01\u0e23 \u0e18\u0e19\u0e32\u0e0a\u0e31\u0e22\u0e2a\u0e38\u0e17\u0e18\u0e34\", position: \"\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e17\u0e19\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's7', no: 7, name: \"\u0e19\u0e32\u0e22\u0e0a\u0e32\u0e15\u0e34\u0e1b \u0e15\u0e31\u0e07\u0e01\u0e38\u0e25\u0e44\u0e1e\u0e28\u0e32\u0e25\", position: \"\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2b\u0e2d\u0e01\u0e32\u0e23\u0e04\u0e49\u0e32\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's8', no: 8, name: \"\u0e19\u0e32\u0e22\u0e19\u0e34\u0e21\u0e34\u0e15\u0e23 \u0e28\u0e23\u0e35\u0e22\u0e32\u0e20\u0e31\u0e22\", position: \"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e1a\u0e32\u0e07\u0e2a\u0e30\u0e1e\u0e32\u0e19\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's9', no: 9, name: \"\u0e19\u0e32\u0e22\u0e02\u0e38\u0e19\u0e17\u0e2d\u0e07 \u0e08\u0e23\u0e34\u0e15\u0e1e\u0e31\u0e19\u0e18\u0e4c\", position: \"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e1a\u0e38\u0e23\u0e35\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's10', no: 10, name: \"\u0e19\u0e32\u0e22\u0e18\u0e35\u0e23\u0e27\u0e34\u0e17\u0e22\u0e4c \u0e2b\u0e17\u0e31\u0e22\u0e23\u0e31\u0e15\u0e19\u0e32\u0e19\u0e19\u0e17\u0e4c\", position: \"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2f \u0e23\u0e31\u0e01\u0e29\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e41\u0e17\u0e19 \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\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 \u0e55\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\", roleType: \"secretary\", gender: \"male\", imageUrl: \"\" },\n                    { id: 's11', no: 11, name: \"\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e2a\u0e38\u0e20\u0e32\u0e27\u0e14\u0e35 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e04\u0e07\", position: \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23 \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 \u0e55\", role: \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\", roleType: \"assistant_secretary\", gender: \"female\", imageUrl: \"\" }\n                ]\n            },\n            academic: {\n                title: \"\u0e41\u0e15\u0e48\u0e07\u0e15\u0e31\u0e49\u0e07\u0e04\u0e13\u0e30\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\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 \u0e55 \u0e14\u0e49\u0e32\u0e19\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\",\n                members: [\n                    { id: 'a1', no: 1, name: \"\u0e19\u0e32\u0e22\u0e1e\u0e35\u0e25\u0e34\u0e19 \u0e2a\u0e01\u0e38\u0e13\u0e32\", position: \"\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e2a\u0e20\u0e32\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2f \u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"president\", gender: \"male\", imageUrl: \"\" },\n                    { id: 'a2', no: 2, name: \"\u0e19\u0e32\u0e22\u0e0a\u0e32\u0e15\u0e23\u0e35 \u0e0a\u0e19\u0e19\u0e32\u0e19\u0e38\u0e0e\", position: \"\u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 'a3', no: 3, name: \"\u0e19\u0e32\u0e22\u0e19\u0e1e\u0e14\u0e25 \u0e1b\u0e34\u0e22\u0e30\u0e15\u0e23\u0e30\u0e20\u0e39\u0e21\u0e34\", position: \"\u0e1c\u0e39\u0e49\u0e17\u0e23\u0e07\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 'a4', no: 4, name: \"\u0e19\u0e32\u0e22\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34 \u0e20\u0e39\u0e48\u0e2b\u0e49\u0e2d\u0e22\", position: \"\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32 \u0e2b\u0e08\u0e01.\u0e42\u0e2a\u0e18\u0e23\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 'a5', no: 5, name: \"\u0e23\u0e28.\u0e14\u0e23.\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e0a\u0e31\u0e22 \u0e41\u0e01\u0e49\u0e27\u0e40\u0e01\u0e37\u0e49\u0e2d\u0e01\u0e39\u0e25\", position: \"\u0e2d\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e20\u0e32\u0e04\u0e27\u0e34\u0e0a\u0e32\u0e04\u0e23\u0e38\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2d\u0e38\u0e15\u0e2a\u0e32\u0e2b\u0e01\u0e32\u0e23 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e1e\u0e23\u0e30\u0e08\u0e2d\u0e21\u0e40\u0e01\u0e25\u0e49\u0e32\u0e18\u0e19\u0e1a\u0e38\u0e23\u0e35\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\", roleType: \"member\", gender: \"male\", imageUrl: \"\" },\n                    { id: 'a6', no: 6, name: \"\u0e19\u0e32\u0e07\u0e2a\u0e38\u0e19\u0e23\u0e35 \u0e02\u0e38\u0e19\u0e13\u0e23\u0e07\u0e04\u0e4c\", position: \"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", role: \"\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\", roleType: \"secretary\", gender: \"female\", imageUrl: \"\" },\n                    { id: 'a7', no: 7, name: \"\u0e19\u0e32\u0e22\u0e27\u0e34\u0e17\u0e39\u0e23\u0e22\u0e4c \u0e19\u0e38\u0e0a\u0e1b\u0e23\u0e30\u0e40\u0e2a\u0e23\u0e34\u0e10\", position: \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23 \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 \u0e55\", role: \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23\", roleType: \"assistant_secretary\", gender: \"male\", imageUrl: \"\" }\n                ]\n            }\n        };\n\n        let currentTab = 'strategy';\n\n        function getDefaultAvatar(gender, name) {\n            const bg = gender === 'female' ? '#e2e8f0' : '#cbd5e1';\n            const iconColor = gender === 'female' ? '#475569' : '#1e293b';\n            \/\/ SVG Vector Icon \u0e23\u0e39\u0e1b\u0e04\u0e19 (User Avatar) \u0e17\u0e35\u0e48\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19 URI \u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\n            const svg = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n                <rect width=\"100\" height=\"100\" fill=\"${bg}\"\/>\n                <path d=\"M50 20C40.06 20 32 28.06 32 38C32 47.94 40.06 56 50 56C59.94 56 68 47.94 68 38C68 28.06 59.94 20 50 20ZM50 62C35.33 62 18 70.33 18 82V86H82V82C82 70.33 64.67 62 50 62Z\" fill=\"${iconColor}\"\/>\n            <\/svg>`;\n            return 'data:image\/svg+xml;charset=utf-8,' + encodeURIComponent(svg);\n        }\n\n        function createPresidentCard(m) {\n            const card = document.createElement('div');\n            card.className = \"bg-white rounded-2xl p-6 border-2 border-amber-400 card-shadow-lg max-w-md w-full flex flex-col items-center text-center relative overflow-hidden transition-all hover:-translate-y-1\";\n            \n            const avatarUrl = m.imageUrl && m.imageUrl.trim() !== '' ? m.imageUrl : getDefaultAvatar(m.gender, m.name);\n            const defaultAvatar = getDefaultAvatar(m.gender, m.name);\n            \n            card.innerHTML = `\n                <div class=\"absolute top-0 right-0 bg-amber-400 text-slate-900 text-[10px] font-bold px-3 py-1 rounded-bl-lg uppercase tracking-wider font-kanit\">\n                    ${m.role || '\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23'}\n                <\/div>\n                <div class=\"relative mb-4 mt-2\">\n                    <img decoding=\"async\" src=\"${avatarUrl}\" alt=\"${m.name}\" \n                         onerror=\"this.onerror=null; this.src='${defaultAvatar}';\"\n                         class=\"w-32 h-32 sm:w-36 sm:h-36 rounded-full object-cover border-4 border-amber-300 shadow-md\">\n                    <span class=\"absolute bottom-0 right-0 bg-amber-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-xs font-bold shadow\">\n                        <i class=\"fa-solid fa-crown\"><\/i>\n                    <\/span>\n                <\/div>\n                <h3 class=\"text-lg sm:text-xl font-bold font-kanit text-navy-900 mb-1\">${m.name}<\/h3>\n                <p class=\"text-xs sm:text-sm text-slate-600 font-medium leading-relaxed max-w-xs mb-3\">${m.position || '-'}<\/p>\n                <span class=\"inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-amber-50 text-amber-800 border border-amber-200\">\n                    <i class=\"fa-solid fa-user-tie\"><\/i> ${m.role}\n                <\/span>\n            `;\n            return card;\n        }\n\n        function createMemberCard(m) {\n            const card = document.createElement('div');\n            card.className = \"bg-white rounded-xl p-5 border border-slate-200 card-shadow flex flex-col items-center text-center relative hover:border-amber-300 hover:shadow-md transition-all\";\n            \n            const avatarUrl = m.imageUrl && m.imageUrl.trim() !== '' ? m.imageUrl : getDefaultAvatar(m.gender, m.name);\n            const defaultAvatar = getDefaultAvatar(m.gender, m.name);\n            \n            card.innerHTML = `\n                <div class=\"relative mb-3\">\n                    <img decoding=\"async\" src=\"${avatarUrl}\" alt=\"${m.name}\" \n                         onerror=\"this.onerror=null; this.src='${defaultAvatar}';\"\n                         class=\"w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-2 border-slate-200 shadow-sm\">\n                    <span class=\"absolute bottom-0 right-0 bg-navy-800 text-white rounded-full w-6 h-6 flex items-center justify-center text-[10px] font-bold font-kanit\">\n                        ${m.no}\n                    <\/span>\n                <\/div>\n                <h4 class=\"text-base font-bold font-kanit text-navy-900 mb-1\">${m.name}<\/h4>\n                <p class=\"text-xs text-slate-600 font-normal leading-relaxed mb-3 flex-grow\">${m.position || '-'}<\/p>\n                <span class=\"inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-slate-100 text-slate-700 border border-slate-200\">\n                    ${m.role}\n                <\/span>\n            `;\n            return card;\n        }\n\n        function createSecretariatCard(m) {\n            const card = document.createElement('div');\n            card.className = \"bg-white rounded-xl p-5 border border-amber-200\/80 card-shadow flex flex-col sm:flex-row items-center gap-4 max-w-md w-full hover:border-amber-400 transition-all\";\n            \n            const avatarUrl = m.imageUrl && m.imageUrl.trim() !== '' ? m.imageUrl : getDefaultAvatar(m.gender, m.name);\n            const defaultAvatar = getDefaultAvatar(m.gender, m.name);\n            \n            card.innerHTML = `\n                <img decoding=\"async\" src=\"${avatarUrl}\" alt=\"${m.name}\" \n                     onerror=\"this.onerror=null; this.src='${defaultAvatar}';\"\n                     class=\"w-24 h-24 rounded-full object-cover border-2 border-amber-300 shadow-sm flex-shrink-0\">\n                <div class=\"text-center sm:text-left flex-grow\">\n                    <span class=\"inline-block px-2.5 py-0.5 text-[10px] font-semibold bg-amber-100 text-amber-900 rounded-md mb-1 font-kanit\">\n                        ${m.role}\n                    <\/span>\n                    <h4 class=\"text-base font-bold font-kanit text-navy-900\">${m.name}<\/h4>\n                    <p class=\"text-xs text-slate-600 font-normal leading-relaxed mt-0.5\">${m.position || '-'}<\/p>\n                <\/div>\n            `;\n            return card;\n        }\n\n        window.addEventListener('DOMContentLoaded', () => {\n            fetchData();\n        });\n\n        function switchTab(tabKey) {\n            currentTab = tabKey;\n            renderTabButtons();\n            renderDirectory();\n        }\n\n        function renderTabButtons() {\n            const stratBtn = document.getElementById('tab-strat');\n            const acadBtn = document.getElementById('tab-acad');\n\n            document.getElementById('badge-strat').textContent = committeeData.strategy.members.length;\n            document.getElementById('badge-acad').textContent = committeeData.academic.members.length;\n\n            if (currentTab === 'strategy') {\n                stratBtn.className = \"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-amber-500 bg-white text-navy-900 shadow-sm\";\n                acadBtn.className = \"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-transparent text-slate-500 hover:text-navy-900 hover:bg-slate-100\/50\";\n            } else {\n                acadBtn.className = \"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-amber-500 bg-white text-navy-900 shadow-sm\";\n                stratBtn.className = \"flex items-center gap-2 px-5 py-3 font-kanit font-medium text-base rounded-t-xl transition-all border-b-2 border-transparent text-slate-500 hover:text-navy-900 hover:bg-slate-100\/50\";\n            }\n        }\n\n        function renderDirectory() {\n            const data = committeeData[currentTab];\n            document.getElementById('currentTitle').textContent = data.title;\n\n            const presidentGrid = document.getElementById('presidentGrid');\n            const membersGrid = document.getElementById('membersGrid');\n            const secretariatGrid = document.getElementById('secretariatGrid');\n\n            presidentGrid.innerHTML = '';\n            membersGrid.innerHTML = '';\n            secretariatGrid.innerHTML = '';\n\n            const presidents = data.members.filter(m => m.roleType === 'president');\n            const members = data.members.filter(m => m.roleType === 'member');\n            const secretariat = data.members.filter(m => m.roleType === 'secretary' || m.roleType === 'assistant_secretary');\n\n            if (presidents.length > 0) {\n                document.getElementById('presidentSection').classList.remove('hidden');\n                presidents.forEach(p => presidentGrid.appendChild(createPresidentCard(p)));\n            } else {\n                document.getElementById('presidentSection').classList.add('hidden');\n            }\n\n            if (members.length > 0) {\n                document.getElementById('membersSection').classList.remove('hidden');\n                members.forEach(m => membersGrid.appendChild(createMemberCard(m)));\n            } else {\n                document.getElementById('membersSection').classList.add('hidden');\n            }\n\n            if (secretariat.length > 0) {\n                document.getElementById('secretariatSection').classList.remove('hidden');\n                secretariat.forEach(s => secretariatGrid.appendChild(createSecretariatCard(s)));\n            } else {\n                document.getElementById('secretariatSection').classList.add('hidden');\n            }\n        }\n\n        async function fetchData() {\n            if (APPS_SCRIPT_URL && APPS_SCRIPT_URL.trim() !== '') {\n                try {\n                    const res = await fetch(APPS_SCRIPT_URL.trim());\n                    if (res.ok) {\n                        const json = await res.json();\n                        parseAppsScriptJSON(json);\n                    }\n                } catch (e) {\n                    console.warn('Could not fetch from Apps Script Web App:', e);\n                }\n            }\n            \n            renderTabButtons();\n            renderDirectory();\n        }\n\n        function parseAppsScriptJSON(json) {\n            if (!json) return false;\n            let stratMembers = [];\n            let acadMembers = [];\n\n            if (typeof json === 'object' && !Array.isArray(json)) {\n                const stratData = json.strategy || json['\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c'] || json.strat;\n                const acadData = json.academic || json['\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23'] || json.acad;\n\n                if (stratData) stratMembers = normalizeArrayData(stratData);\n                if (acadData) acadMembers = normalizeArrayData(acadData);\n            }\n\n            if (stratMembers.length > 0) committeeData.strategy.members = stratMembers;\n            if (acadMembers.length > 0) committeeData.academic.members = acadMembers;\n\n            return (stratMembers.length > 0 || acadMembers.length > 0);\n        }\n\n        function normalizeArrayData(dataArray) {\n            if (!Array.isArray(dataArray)) return [];\n            return dataArray.map((item, i) => normalizeMemberItem(item, i + 1)).filter(Boolean);\n        }\n\n        function normalizeMemberItem(item, defaultNo) {\n            if (!item) return null;\n            const name = item.Name || item.name || item['\u0e0a\u0e37\u0e48\u0e2d'] || item['\u0e0a\u0e37\u0e48\u0e2d-\u0e2a\u0e01\u0e38\u0e25'] || '';\n            if (!name) return null;\n\n            const no = parseInt(item.No || item.no || item['\u0e25\u0e33\u0e14\u0e31\u0e1a'] || defaultNo) || defaultNo;\n            const position = item.Position || item.position || item['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07'] || '';\n            const role = item.Role || item.role || item['\u0e1a\u0e17\u0e1a\u0e32\u0e17'] || '\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23';\n            \n            let roleType = (item.RoleType || item.roleType || item['\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e1a\u0e17\u0e1a\u0e32\u0e17'] || '').toString().toLowerCase().trim();\n            if (!roleType || !['president', 'member', 'secretary', 'assistant_secretary'].includes(roleType)) {\n                if (role.includes('\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19')) roleType = 'president';\n                else if (role.includes('\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23')) roleType = 'assistant_secretary';\n                else if (role.includes('\u0e40\u0e25\u0e02\u0e32\u0e19\u0e38\u0e01\u0e32\u0e23')) roleType = 'secretary';\n                else roleType = 'member';\n            }\n\n            const gender = (item.Gender || item.gender || item['\u0e40\u0e1e\u0e28'] || 'male').toString().toLowerCase().trim();\n            const imageUrl = item.ImageUrl || item.imageUrl || item.image || item['\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e'] || '';\n\n            return {\n                id: `as_${defaultNo}_${Math.random().toString(36).substring(2, 6)}`,\n                no: no,\n                name: name,\n                position: position,\n                role: role,\n                roleType: roleType,\n                gender: gender,\n                imageUrl: imageUrl\n            };\n        }\n    <\/script>\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<p>Views: 8<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e13\u0e30\u0e2d\u0e19\u0e38\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\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 \u0e55 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e2d [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22615","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/22615","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/comments?post=22615"}],"version-history":[{"count":10,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/22615\/revisions"}],"predecessor-version":[{"id":22632,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/22615\/revisions\/22632"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=22615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}