{"id":72,"date":"2019-11-29T10:41:24","date_gmt":"2019-11-29T03:41:24","guid":{"rendered":"http:\/\/www.ivecr5.ac.th\/web2020\/?page_id=72"},"modified":"2026-05-22T11:25:00","modified_gmt":"2026-05-22T04:25:00","slug":"%e0%b9%82%e0%b8%84%e0%b8%a3%e0%b8%87%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%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%b9%82%e0%b8%84%e0%b8%a3%e0%b8%87%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%96%e0%b8%b2%e0%b8%9a%e0%b8%b1%e0%b8%99\/","title":{"rendered":"\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\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-27b8b4da\" data-vce-do-apply=\"all el-27b8b4da\"><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-c07fd90e\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-c07fd90e\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-c07fd90e\"><\/div><\/div><\/div><\/div><\/div><\/div><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-bd76f8fb\" data-vce-do-apply=\"all el-bd76f8fb\"><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-b458ece3\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-b458ece3\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-b458ece3\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-dc888554\" data-vce-do-apply=\"all el-dc888554\">\n\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 - IVECR5<\/title>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght=300;400;500;600;700&display=swap');\n\n        .org-chart-container {\n            font-family: 'Kanit', sans-serif !important;\n            background-color: #f8fafc;\n            padding: 3rem 1rem;\n            text-align: center;\n            width: 100%;\n            box-sizing: border-box;\n            line-height: 1.5;\n        }\n\n        .org-chart-container * {\n            font-family: 'Kanit', sans-serif !important;\n            box-sizing: border-box;\n        }\n\n        \/* Header Styles *\/\n        .chart-header { margin-bottom: 4rem; }\n        .chart-title-main { font-size: 2.25rem !important; font-weight: 700 !important; color: #1e293b !important; margin-bottom: 0.5rem !important; line-height: 1.2 !important; }\n        .chart-title-sub { font-size: 1.25rem !important; color: #2563eb !important; font-weight: 600 !important; }\n        .chart-date { color: #64748b; margin-top: 1rem; font-size: 0.875rem; background-color: white; display: inline-block; padding: 0.25rem 1rem; border-radius: 9999px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; }\n        .dot-indicator { width: 0.5rem; height: 0.5rem; background-color: #22c55e; border-radius: 50%; display: inline-block; margin-right: 0.5rem; }\n\n        \/* Executive Card *\/\n        .org-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; position: relative; margin: 0 auto; }\n        .org-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }\n        .card-lg { width: 18rem; } .card-md { width: 16rem; } .card-sm { width: 15rem; }\n\n        \/* Image Styling *\/\n        .img-box { position: relative; width: 100%; aspect-ratio: 3 \/ 4; overflow: hidden; background-color: #e2e8f0; cursor: pointer; }\n        .profile-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }\n\n        \/* Badge Styling *\/\n        .badge { position: absolute; top: 12px; right: -4px; color: white !important; padding: 6px 16px; border-radius: 20px 0 0 20px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 4px 6px rgba(0,0,0,0.15); z-index: 10; border: none; line-height: normal !important; }\n        @media (max-width: 767px) { .badge { top: auto !important; bottom: 12px; right: 0; border-radius: 20px 0 0 20px; } }\n\n        .badge.gold { background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 45%, #B38728 100%); color: #5d4037 !important; }\n        .badge.blue { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e3a8a 100%); }\n        .badge.green { background: linear-gradient(135deg, #065f46 0%, #10b981 50%, #064e3b 100%); }\n        .badge.orange { background: linear-gradient(135deg, #c2410c 0%, #f97316 50%, #9a3412 100%); }\n        .badge.teal { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #0d9488 100%); }\n        .badge.purple { background: linear-gradient(135deg, #6b21a8 0%, #a855f7 50%, #581c87 100%); }\n        .badge.indigo { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #3730a3 100%); }\n        .badge.slate { background: linear-gradient(135deg, #475569 0%, #94a3b8 50%, #1e293b 100%); }\n\n        \/* Borders *\/\n        .border-gold { border-top: 6px solid #BF953F; } .border-blue { border-top: 6px solid #3b82f6; } .border-green { border-top: 6px solid #10b981; } .border-teal { border-top: 6px solid #0d9488; } .border-orange { border-top: 6px solid #f97316; } .border-purple { border-top: 6px solid #a855f7; } .border-indigo { border-top: 6px solid #6366f1; } .border-slate { border-top: 6px solid #64748b; }\n\n        \/* Card Content *\/\n        .card-content { padding: 1.5rem; text-align: center; }\n        .card-name { font-size: 1.125rem; font-weight: 700; color: #1e293b; margin: 0; }\n        .card-role { font-size: 0.75rem; margin-top: 0.25rem; }\n        .role-pill { display: inline-block; background-color: #f1f5f9; padding: 0.25rem 0.75rem; border-radius: 9999px; font-weight: 500; color: #64748b; min-width: 80px; }\n        \n        \/* Text Colors *\/\n        .text-blue-600 { color: #2563eb !important; } .text-orange-600 { color: #ea580c !important; } .text-indigo-600 { color: #4f46e5 !important; } .text-teal-600 { color: #0d9488 !important; } .text-purple-600 { color: #9333ea !important; } .text-green-600 { color: #16a34a !important; } .text-slate-500 { color: #64748b !important; } .text-slate-800 { color: #1e293b !important; } .text-slate-900 { color: #0f172a !important; }\n\n        \/* Connectors *\/\n        .connector-v { width: 2px; background-color: #cbd5e1; margin: 0 auto; height: 3rem; }\n        .connector-h-container { display: flex; justify-content: center; margin-bottom: 2rem; position: relative; }\n        .connector-h-line { border-top: 2px solid #cbd5e1; width: 100%; max-width: 42rem; position: absolute; top: 3.125rem; z-index: 0; }\n\n        \/* Section Styles *\/\n        .section-block { margin-bottom: 3rem; position: relative; z-index: 10; }\n        .section-title { display: inline-block; background-color: #f1f5f9; color: #475569; padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 600; margin-bottom: 2rem; border: 1px solid #e2e8f0; }\n        \n        \/* Grid Layouts (\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21 justify-items \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e31\u0e19\u0e27\u0e31\u0e15\u0e16\u0e38\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07) *\/\n        .grid-exec { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center; max-width: 56rem; margin: 0 auto; justify-items: center; }\n        .grid-asst-prof { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center; max-width: 64rem; margin: 0 auto; justify-items: center; }\n        .grid-depts { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; text-align: left; }\n\n        @media (min-width: 768px) { \n            .chart-title-main { font-size: 3rem !important; } \n            .grid-exec { grid-template-columns: repeat(2, 1fr); gap: 4rem; } \n            .grid-asst-prof { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 52rem; } \n        }\n        @media (min-width: 1024px) { .grid-depts { grid-template-columns: repeat(2, 1fr); } }\n        @media (min-width: 1280px) { .grid-depts { grid-template-columns: repeat(3, 1fr); } }\n\n        \/* Department Box Styles *\/\n        .dept-title-group { font-size: 1.5rem; font-weight: 700; color: #334155; margin-bottom: 2rem; padding-left: 1rem; border-left: 4px solid #2563eb; text-align: left; }\n        .dept-card { background: white; border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; overflow: hidden; }\n        .dept-header { padding: 1rem; border-bottom-width: 1px; display: flex; align-items: center; gap: 0.75rem; }\n        .dept-icon svg { width: 1.5rem; height: 1.5rem; }\n        .dept-name { font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin: 0 !important; }\n        \n        .dept-body { padding: 1.25rem; }\n        .dept-head-box { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; border-width: 1px; margin-bottom: 1.5rem; }\n        .dept-head-img-wrapper { width: 3rem; height: 3rem; border-radius: 9999px; overflow: hidden; border: 2px solid white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); flex-shrink: 0; cursor: pointer; }\n        .dept-head-img { width: 100%; height: 100%; object-fit: cover; }\n        .dept-head-name { font-weight: 700; color: #1e293b; font-size: 0.875rem; margin: 0 !important; }\n        .dept-head-pos { font-size: 0.75rem; font-weight: 600; margin: 0 !important; }\n        \n        .group-title { font-size: 0.875rem; font-weight: 700; color: #334155; margin-bottom: 0.5rem; border-left-width: 2px; padding-left: 0.5rem; margin-top: 1rem; }\n        .staff-list { display: grid; gap: 0.25rem; margin-bottom: 1rem; }\n        .staff-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; }\n        .staff-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background-color: #e2e8f0; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; color: #64748b; cursor: pointer; }\n        .staff-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }\n        .staff-name { font-size: 0.875rem; color: #475569; margin: 0 !important; }\n\n        \/* Pop-up Modal Styles *\/\n        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 10000; padding: 20px; backdrop-filter: blur(5px); }\n        .modal-content-wrapper { position: relative; max-width: 500px; width: 100%; animation: modalFadeIn 0.3s ease-out; }\n        .modal-img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 30px rgba(0,0,0,0.5); display: block; }\n        .close-modal { position: absolute; top: -40px; right: 0; color: white; font-size: 30px; cursor: pointer; font-family: Arial, sans-serif; }\n        @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\n        .flex-center { display: flex; justify-content: center; width: 100%; }\n        \n        .loading-screen { font-size: 1.25rem; color: #64748b; padding: 5rem 0; text-align: center; font-family: 'Kanit', sans-serif; }\n    <\/style>\n\n\n\n<div class=\"org-chart-container\">\n    <header class=\"chart-header\">\n        <h1 class=\"chart-title-main\">\u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/h1>\n        <h2 class=\"chart-title-sub\">\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<\/h2>\n        <p class=\"chart-date\">\n            <span class=\"dot-indicator\"><\/span> \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e25\u0e32\u0e07\n        <\/p>\n    <\/header>\n\n    <div id=\"loading\" class=\"loading-screen\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23...<\/div>\n\n    <main id=\"chart-content\" style=\"display: none;\">\n        <section class=\"section-block\">\n            <div class=\"section-title\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/div>\n            <div class=\"flex-center\" id=\"lv1-container\"><\/div>\n            <div class=\"connector-v\"><\/div>\n        <\/section>\n\n        <section class=\"section-block\">\n            <div class=\"section-title\">\u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/div>\n            <div class=\"connector-h-container\"><div class=\"connector-h-line\"><\/div><\/div>\n            <div class=\"grid-exec\" id=\"lv2-container\"><\/div>\n            <div class=\"connector-v\" style=\"margin-top: 1rem;\"><\/div>\n        <\/section>\n\n        <section class=\"section-block\">\n            <div class=\"section-title\">\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/div>\n            <div class=\"flex-center\" id=\"lv3-container\"><\/div>\n            <div class=\"connector-v\" style=\"margin-top: 1rem;\"><\/div>\n        <\/section>\n\n        <section class=\"section-block\">\n            <div class=\"section-title\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01<\/div>\n            <div class=\"grid-exec\" id=\"lv4-container\"><\/div>\n            <div class=\"connector-v\" style=\"margin-top: 1rem;\"><\/div>\n        <\/section>\n\n        <section style=\"margin-bottom: 5rem;\">\n            <div class=\"section-title\">\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c<\/div>\n            <div class=\"grid-asst-prof\" id=\"lv5-container\"><\/div>\n        <\/section>\n\n        <h3 class=\"dept-title-group\">\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19<\/h3>\n        <div class=\"grid-depts\" id=\"lv6-container\"><\/div>\n\n        <div class=\"grid-depts\" style=\"margin-top: 1.5rem;\">\n            <div class=\"dept-card\">\n                <div class=\"dept-header bg-slate-50 border-slate-100\">\n                    <div class=\"dept-icon bg-slate-100 text-slate-600\">\n                        <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"><\/path><\/svg>\n                    <\/div>\n                    <h4 class=\"dept-name text-slate-900\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/h4>\n                <\/div>\n                <div class=\"dept-body\">\n                    <div class=\"staff-list\">\n                        <div class=\"staff-item\"><div class=\"staff-avatar\">\u0e1c\u0e2d.<\/div><span class=\"staff-name\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/span><\/div>\n                        <div class=\"staff-item\"><div class=\"staff-avatar\">\u0e23\u0e2d\u0e07<\/div><span class=\"staff-name\">\u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/span><\/div>\n                        <div class=\"staff-item\"><div class=\"staff-avatar\">\u0e2b\u0e19.<\/div><span class=\"staff-name\">\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e2a\u0e32\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e32\u0e22\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/span><\/div>\n                        <div class=\"staff-item\"><div class=\"staff-avatar\">\u0e2b\u0e19.<\/div><span class=\"staff-name\">\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e20\u0e32\u0e04\u0e27\u0e34\u0e0a\u0e32<\/span><\/div>\n                        <div class=\"staff-item\"><div class=\"staff-avatar\">\u0e04\u0e13.<\/div><span class=\"staff-name\">\u0e04\u0e13\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <footer class=\"footer-section\" style=\"margin-top: 4rem;\">\n            <p class=\"footer-main\">\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<\/p>\n        <\/footer>\n    <\/main>\n<\/div>\n\n<div id=\"profileImageModal\" class=\"modal-overlay\" onclick=\"closeProfileModal()\">\n    <div class=\"modal-content-wrapper\" onclick=\"event.stopPropagation()\">\n        <span class=\"close-modal\" onclick=\"closeProfileModal()\">\u00d7<\/span>\n        <img decoding=\"async\" id=\"modalImg\" src=\"\" class=\"modal-img\">\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ \ud83d\udce2 \u0e2a\u0e33\u0e04\u0e31\u0e0d: \u0e27\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c Web App URL \u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23 Deploy \u0e02\u0e2d\u0e07 Apps Script \u0e25\u0e07\u0e43\u0e19\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e04\u0e33\u0e1e\u0e39\u0e14\u0e19\u0e35\u0e49\n    const APPS_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbw1Bw42RlWH3Hs_U8nGXNqG_q2DKW5lm5XNcEROdgDMqPJcL9SGAW7HTMjVBLhJEZ6J\/exec\";\n\n    document.addEventListener('DOMContentLoaded', function() {\n        fetch(APPS_SCRIPT_URL)\n            .then(response => response.json())\n            .then(res => {\n                if(res.status === \"success\") {\n                    renderChart(res.data);\n                } else {\n                    document.getElementById('loading').innerText = \"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25: \" + res.message;\n                }\n            })\n            .catch(err => {\n                document.getElementById('loading').innerText = \"\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49: \" + err;\n            });\n    });\n\n    function renderChart(data) {\n        data.forEach(item => {\n            if (item.level == 1) createExecCard('lv1-container', item, 'card-lg');\n            else if (item.level == 2) createExecCard('lv2-container', item, 'card-md');\n            else if (item.level == 3) createExecCard('lv3-container', item, 'card-md');\n            else if (item.level == 4) createExecCard('lv4-container', item, 'card-md');\n            else if (item.level == 5) createExecCard('lv5-container', item, 'card-sm'); \n        });\n\n        renderDepartments(data.filter(item => item.level == 6));\n\n        document.getElementById('loading').style.display = 'none';\n        document.getElementById('chart-content').style.display = 'block';\n    }\n\n    function createExecCard(containerId, item, cardSizeClass) {\n        const container = document.getElementById(containerId);\n        const textClass = `text-${item.class_type}-600`;\n        const html = `\n            <div class=\"org-card border-${item.class_type} ${cardSizeClass}\">\n                <div class=\"img-box\" onclick=\"openProfileModal(this)\">\n                    <img decoding=\"async\" src=\"${item.img_url || 'https:\/\/via.placeholder.com\/300x400?text=No+Image'}\" alt=\"${item.name}\" class=\"profile-img\">\n                    <span class=\"badge ${item.class_type}\">${item.position}<\/span>\n                <\/div>\n                <div class=\"card-content\">\n                    <h3 class=\"card-name\">${item.name}<\/h3>\n                    <p class=\"card-role role-pill ${textClass}\">${item.group_name && item.group_name !== '-' ? item.group_name : item.position}<\/p>\n                <\/div>\n            <\/div>\n        `;\n        \/\/ \u0e22\u0e2d\u0e21\u0e43\u0e2b\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e31\u0e27\u0e02\u0e2d\u0e07 Grid \u0e04\u0e2d\u0e19\u0e42\u0e17\u0e23\u0e25\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e41\u0e1a\u0e1a Dynamic Auto-Center\n        if(containerId === 'lv1-container' || containerId === 'lv3-container') {\n            container.innerHTML = html;\n        } else {\n            container.innerHTML += html;\n        }\n    }\n\n    function renderDepartments(deptData) {\n        const container = document.getElementById('lv6-container');\n        container.innerHTML = ''; \/\/ \u0e25\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e08\u0e31\u0e14\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\n        const groups = {};\n        \n        deptData.forEach(item => {\n            if (!groups[item.department]) { groups[item.department] = { head: null, subGroups: {} }; }\n            if (item.position.includes(\"\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\") || item.position.includes(\"\u0e28\u0e39\u0e19\u0e22\u0e4c\")) { groups[item.department].head = item; } \n            else {\n                if (!groups[item.department].subGroups[item.group_name]) { groups[item.department].subGroups[item.group_name] = []; }\n                groups[item.department].subGroups[item.group_name].push(item);\n            }\n        });\n\n        const icons = {\n            \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\": `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/><\/svg>`,\n            \"\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\": `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\/><\/svg>`,\n            \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2f\": `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\/><\/svg>`,\n            \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e2f\": `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg>`,\n            \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\": `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>`\n        };\n\n        for (let deptName in groups) {\n            const currentDept = groups[deptName];\n            const type = currentDept.head ? currentDept.head.class_type : 'slate';\n            const defaultIcon = `<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16\"\/><\/svg>`;\n            \n            let cardHtml = `\n                <div class=\"dept-card\">\n                    <div class=\"dept-header bg-${type}-50 border-${type}-100\">\n                        <div class=\"dept-icon bg-${type}-100 text-${type}-600\">${icons[deptName] || defaultIcon}<\/div>\n                        <h4 class=\"dept-name text-${type}-900\">${deptName}<\/h4>\n                    <\/div>\n                    <div class=\"dept-body\">\n            `;\n\n            if (currentDept.head) {\n                cardHtml += `\n                    <div class=\"dept-head-box bg-${type}-50 border-${type}-100\">\n                        <div class=\"dept-head-img-wrapper\" onclick=\"openProfileModal(this)\">\n                            <img decoding=\"async\" src=\"${currentDept.head.img_url}\" class=\"dept-head-img\">\n                        <\/div>\n                        <div class=\"dept-head-info\">\n                            <p class=\"dept-head-name\">${currentDept.head.name}<\/p>\n                            <p class=\"dept-head-pos text-${type}-600\">${currentDept.head.position}<\/p>\n                        <\/div>\n                    <\/div>\n                `;\n            }\n\n            cardHtml += `<div>`;\n            for (let subGroupName in currentDept.subGroups) {\n                if(subGroupName && subGroupName !== '-') {\n                    cardHtml += `<div class=\"group-title border-${type}-300\">${subGroupName}<\/div>`;\n                }\n                cardHtml += `<div class=\"staff-list\">`;\n                \n                currentDept.subGroups[subGroupName].forEach(staff => {\n                    let avatarInner = staff.img_url ? `<img decoding=\"async\" src=\"${staff.img_url}\">` : staff.position.substring(0,2);\n                    cardHtml += `\n                        <div class=\"staff-item\">\n                            <div class=\"staff-avatar\" ${staff.img_url ? 'onclick=\"openProfileModal(this)\"' : ''}>${avatarInner}<\/div>\n                            <span class=\"staff-name\">${staff.name} ${staff.position && staff.group_name === '-' ? `(${staff.position})` : ''}<\/span>\n                        <\/div>\n                    `;\n                });\n                cardHtml += `<\/div>`;\n            }\n            cardHtml += `<\/div><\/div><\/div>`;\n            container.innerHTML += cardHtml;\n        }\n    }\n\n    function openProfileModal(element) {\n        const img = element.querySelector('img');\n        if (img) {\n            const modal = document.getElementById('profileImageModal');\n            const modalImg = document.getElementById('modalImg');\n            modalImg.src = img.src;\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden';\n        }\n    }\n\n    function closeProfileModal() {\n        const modal = document.getElementById('profileImageModal');\n        modal.style.display = 'none';\n        document.body.style.overflow = 'auto';\n    }\n\n    document.addEventListener('keydown', function(event) {\n        if (event.key === \"Escape\") { closeProfileModal(); }\n    });\n<\/script>\n\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><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-727d7317\" data-vce-do-apply=\"all el-727d7317\"><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-32b6ea45\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-32b6ea45\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-32b6ea45\"><div class=\"vcv-row-control-wrapper\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><p>Views: 452<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 &#8211; IVECR5 \u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/72","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=72"}],"version-history":[{"count":22,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":18411,"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/pages\/72\/revisions\/18411"}],"wp:attachment":[{"href":"https:\/\/www.ivecr5.ac.th\/web2020\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}