{"id":6248,"date":"2026-05-24T01:22:27","date_gmt":"2026-05-23T18:22:27","guid":{"rendered":"https:\/\/www.tepleela.ac.th\/?page_id=6248"},"modified":"2026-05-24T01:36:49","modified_gmt":"2026-05-23T18:36:49","slug":"%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1%e0%b8%b9%e0%b8%a5%e0%b8%9a%e0%b8%b8%e0%b8%84%e0%b8%a5%e0%b8%b2%e0%b8%81%e0%b8%a3","status":"publish","type":"page","link":"https:\/\/www.tepleela.ac.th\/?page_id=6248","title":{"rendered":"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23"},"content":{"rendered":"\n<style>\n    \/* \ud83c\udf1f \u0e14\u0e36\u0e07\u0e1f\u0e2d\u0e19\u0e15\u0e4c Prompt *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap');\n\n    #tepleela-org-chart {\n        --primary-color: #e83e8c; \n        --primary-hover: #d63384; \n        --bg-color: #fffafb; \n        --card-bg: #ffffff;\n        --text-main: #2d2d2d;\n        --text-muted: #86868b;\n        --border-color: #fce4ec; \n        \n        font-family: 'Prompt', sans-serif !important;\n        background-color: var(--bg-color);\n        background-image: radial-gradient(#f8bbd0 1px, transparent 1px);\n        background-size: 24px 24px;\n        color: var(--text-main);\n        margin: 0;\n        padding: 30px 20px;\n        border-radius: 16px; \n        width: 100%;\n    }\n\n    #tepleela-org-chart * {\n        box-sizing: border-box;\n        font-family: 'Prompt', sans-serif !important; \n    }\n\n    #tepleela-org-chart p, \n    #tepleela-org-chart h2, \n    #tepleela-org-chart h3 {\n        margin: 0; \n        padding: 0;\n    }\n\n    #tepleela-org-chart .container-inner {\n        max-width: 1400px; \n        margin: 0 auto;\n    }\n\n    #tepleela-org-chart .header-wrapper {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 40px; \n        padding-bottom: 20px;\n        border-bottom: 2px dashed var(--border-color);\n        flex-wrap: wrap;\n        gap: 20px;\n    }\n\n    #tepleela-org-chart h2.main-title {\n        font-size: 2.2rem;\n        font-weight: 600;\n        color: var(--text-main);\n        line-height: 1.4;\n    }\n\n    #tepleela-org-chart .filter-container select {\n        padding: 10px 20px;\n        font-size: 1.1rem; \n        border-radius: 20px;\n        border: 1px solid #f48fb1;\n        background-color: white;\n        color: var(--primary-color);\n        outline: none;\n        cursor: pointer;\n        font-weight: 500;\n        box-shadow: 0 4px 10px rgba(232, 62, 140, 0.08);\n        transition: all 0.3s ease;\n    }\n\n    #tepleela-org-chart .filter-container select:hover {\n        border-color: var(--primary-color);\n        box-shadow: 0 6px 15px rgba(232, 62, 140, 0.15);\n    }\n\n    @media (max-width: 768px) {\n        #tepleela-org-chart .header-wrapper {\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n        }\n    }\n\n    #tepleela-org-chart .loading-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 200px;\n    }\n    \n    #tepleela-org-chart .spinner {\n        width: 40px;\n        height: 40px;\n        border: 4px solid rgba(232, 62, 140, 0.2);\n        border-top: 4px solid var(--primary-color);\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n    #tepleela-org-chart .org-tier {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 20px; \n        margin-bottom: 40px;\n    }\n\n    #tepleela-org-chart .dept-section {\n        margin-top: 40px;\n        background: rgba(255, 255, 255, 0.7);\n        backdrop-filter: blur(10px);\n        padding: 30px 25px; \n        border-radius: 24px;\n        box-shadow: 0 8px 30px rgba(232, 62, 140, 0.05);\n        border: 1px solid #fff;\n    }\n\n    #tepleela-org-chart .dept-title {\n        text-align: center;\n        font-size: 1.8rem; \n        color: var(--primary-color);\n        margin-bottom: 25px;\n        padding-bottom: 10px;\n        border-bottom: 2px solid var(--border-color);\n        font-weight: 600;\n    }\n\n    #tepleela-org-chart .personnel-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr); \n        gap: 20px; \n    }\n\n    @media (max-width: 1200px) {\n        #tepleela-org-chart .personnel-grid { grid-template-columns: repeat(3, 1fr); }\n    }\n    @media (max-width: 900px) {\n        #tepleela-org-chart .personnel-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n    @media (max-width: 600px) {\n        #tepleela-org-chart .personnel-grid { grid-template-columns: 1fr; }\n    }\n\n    #tepleela-org-chart .tl-card {\n        background-color: var(--card-bg);\n        border-radius: 20px;\n        padding: 20px 15px; \n        text-align: center;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.03);\n        border: 1px solid rgba(232, 62, 140, 0.1);\n        transition: all 0.3s ease;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start; \n        gap: 6px; \n    }\n\n    #tepleela-org-chart .tl-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 30px rgba(232, 62, 140, 0.12);\n        border-color: #f48fb1;\n    }\n\n    \/* \ud83c\udf1f \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e25\u0e39\u0e01\u0e40\u0e25\u0e48\u0e19\u0e43\u0e2b\u0e49\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e2d\u0e32\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e0a\u0e35\u0e49 \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e39\u0e1b\u0e19\u0e34\u0e49\u0e27 (\u0e04\u0e25\u0e34\u0e01\u0e44\u0e14\u0e49) *\/\n    #tepleela-org-chart .profile-img {\n        width: 140px;\n        height: 180px;\n        border-radius: 16px;\n        object-fit: cover;\n        margin-bottom: 6px; \n        background-color: #fce4ec;\n        box-shadow: 0 5px 15px rgba(232, 62, 140, 0.15);\n        cursor: pointer;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n\n    #tepleela-org-chart .profile-img:hover {\n        transform: scale(1.05);\n        box-shadow: 0 8px 25px rgba(232, 62, 140, 0.3);\n    }\n\n    #tepleela-org-chart .tl-name {\n        font-size: 1.4rem; \n        font-weight: 600;\n        color: #1a1a1a;\n        line-height: 1.2;\n    }\n\n    #tepleela-org-chart .info-group {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 2px; \n    }\n\n    #tepleela-org-chart .tl-position {\n        color: var(--text-main);\n        font-size: 1.1rem; \n        font-weight: 600;\n        line-height: 1.2;\n    }\n\n    #tepleela-org-chart .tl-academic {\n        color: var(--text-muted);\n        font-size: 1rem; \n        line-height: 1.2;\n    }\n\n    #tepleela-org-chart .major-badge {\n        display: inline-block;\n        background-color: #fce4ec;\n        color: var(--primary-hover);\n        padding: 4px 14px;\n        border-radius: 20px;\n        font-size: 0.95rem; \n        font-weight: 500;\n    }\n\n    #tepleela-org-chart .bottom-section {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 4px; \n    }\n\n    #tepleela-org-chart .tl-email {\n        font-size: 1.05rem; \n        color: var(--text-muted);\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: color 0.2s ease;\n    }\n    \n    #tepleela-org-chart .tl-email:hover {\n        color: var(--primary-color);\n    }\n\n    #tepleela-org-chart .admin-position {\n        color: var(--primary-color); \n        background: none; \n        padding: 0; \n        font-size: 1.1rem; \n        font-weight: 600; \n        width: auto;\n        box-shadow: none; \n    }\n\n    \/* \ud83c\udf1f CSS \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Popup Modal *\/\n    #tl-modal-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.6);\n        z-index: 99999; \/* \u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e1a\u0e19\u0e2a\u0e38\u0e14\u0e17\u0e31\u0e1a\u0e40\u0e21\u0e19\u0e39 WP *\/\n        display: none;\n        align-items: center;\n        justify-content: center;\n        backdrop-filter: blur(4px);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n\n    #tl-modal-overlay.show {\n        display: flex;\n        opacity: 1;\n    }\n\n    #tl-modal-box {\n        background: #fff;\n        padding: 40px 30px;\n        border-radius: 24px;\n        max-width: 400px;\n        width: 90%;\n        position: relative;\n        text-align: center;\n        box-shadow: 0 20px 50px rgba(232, 62, 140, 0.2);\n        transform: scale(0.9);\n        transition: transform 0.3s ease;\n    }\n\n    #tl-modal-overlay.show #tl-modal-box {\n        transform: scale(1);\n    }\n\n    .tl-modal-close {\n        position: absolute;\n        top: 15px;\n        right: 20px;\n        font-size: 2rem;\n        cursor: pointer;\n        color: #86868b;\n        transition: color 0.2s;\n        line-height: 1;\n    }\n\n    .tl-modal-close:hover {\n        color: var(--primary-color);\n    }\n\n    .tl-modal-img {\n        width: 200px;\n        height: 260px;\n        border-radius: 18px;\n        object-fit: cover;\n        margin-bottom: 20px;\n        box-shadow: 0 8px 25px rgba(232, 62, 140, 0.2);\n    }\n<\/style>\n\n<div id=\"tepleela-org-chart\">\n    <div class=\"container-inner\">\n        <div class=\"header-wrapper\">\n            <h2 class=\"main-title\">\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e17\u0e1e\u0e25\u0e35\u0e25\u0e32<\/h2>\n            <div class=\"filter-container\">\n                <select id=\"departmentFilter\" onchange=\"filterData()\">\n                    <option value=\"all\">\u0e14\u0e39\u0e17\u0e38\u0e01\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14 \/ \u0e1d\u0e48\u0e32\u0e22<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <div id=\"loading\" class=\"loading-container\">\n            <div class=\"spinner\"><\/div>\n        <\/div>\n\n        <div id=\"orgChartContainer\" style=\"display: none;\">\n            <div id=\"directorTier\" class=\"org-tier\"><\/div>\n            <div id=\"deputyTier\" class=\"org-tier\"><\/div>\n            <div id=\"teachersContainer\"><\/div>\n        <\/div>\n\n        <div id=\"tl-modal-overlay\" onclick=\"closeTlModal(event)\">\n            <div id=\"tl-modal-box\" onclick=\"event.stopPropagation()\">\n                <span class=\"tl-modal-close\" onclick=\"closeTlModal()\">&times;<\/span>\n                <div id=\"tl-modal-content\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const sheetCsvUrl = 'https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vQb005zQtn2ZPMBAmgt_xu9up9P4uyTZUaJxxF4pk7kXLG8HyZVn6uFCanOSgUIk9L5gAfZTIc6IKx0\/pub?gid=2021251970&single=true&output=csv';\n\n        let rawData = [];\n\n        Papa.parse(sheetCsvUrl, {\n            download: true,\n            header: true,\n            complete: function(results) {\n                rawData = results.data.filter(p => p['FULLNAME'] && p['FULLNAME'].trim() !== '');\n                document.getElementById('loading').style.display = 'none';\n                document.getElementById('orgChartContainer').style.display = 'block';\n                \n                populateFilter();\n                renderOrgChart(rawData);\n            }\n        });\n\n        function createCardHTML(person) {\n            let imgUrl = person['IMG'] ? person['IMG'].trim() : '';\n            let googleDriveId = '';\n            \n            if (imgUrl.includes('id=')) {\n                const urlParts = imgUrl.split('?');\n                if (urlParts.length > 1) {\n                    googleDriveId = new URLSearchParams(urlParts[1]).get('id');\n                }\n            } else if (imgUrl.includes('\/file\/d\/')) {\n                const parts = imgUrl.split('\/file\/d\/');\n                if (parts.length > 1) googleDriveId = parts[1].split('\/')[0];\n            }\n            \n            if (googleDriveId) {\n                imgUrl = `https:\/\/drive.google.com\/thumbnail?id=${googleDriveId}&sz=w500`;\n            } else if (!imgUrl) {\n                imgUrl = `https:\/\/ui-avatars.com\/api\/?name=${encodeURIComponent(person['FULLNAME'])}&background=e83e8c&color=fff&size=200`;\n            }\n\n            const name = person['FULLNAME'];\n            const mainPos = person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07'] || '-';\n            \n            const rawAcademic = person['\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30'] ? person['\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30'].trim() : '';\n            const academic = (rawAcademic && rawAcademic !== '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30' && rawAcademic !== '-') ? rawAcademic : '';\n            const major = person['\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32'] && person['\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32'].trim() !== '' ? person['\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32'] : '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32';\n            const email = person['Email'] && person['Email'].trim() !== '' ? person['Email'] : '-';\n            const adminPos = person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'] && person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'].trim() !== '' ? person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'] : '';\n\n            const hasEmail = email !== '-';\n            const hasAdmin = adminPos !== '';\n            \n            \/\/ \ud83c\udf1f \u0e41\u0e1e\u0e47\u0e04\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e40\u0e02\u0e49\u0e32\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19 Popup\n            const modalData = { imgUrl, name, mainPos, academic, major, email, adminPos, hasEmail, hasAdmin };\n            const dataStr = encodeURIComponent(JSON.stringify(modalData));\n\n            return `<div class=\"tl-card\"><img decoding=\"async\" src=\"${imgUrl}\" alt=\"${name}\" class=\"profile-img\" onclick=\"window.showTlModal(this)\" data-info=\"${dataStr}\" title=\"\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\" onerror=\"this.src='https:\/\/ui-avatars.com\/api\/?name=${encodeURIComponent(name)}&#038;background=e83e8c&#038;color=fff'\"><h3 class=\"tl-name\">${name}<\/h3><div class=\"info-group\"><p class=\"tl-position\">${mainPos}<\/p>${academic ? `<p class=\"tl-academic\">\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30: ${academic}<\/p>` : ''}<\/div>${major !== '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32' ? `<div class=\"major-badge\">\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e2d\u0e01: ${major}<\/div>` : ''}${(hasEmail || hasAdmin) ? `<div class=\"bottom-section\">${hasEmail ? `<a href=\"mailto:${email}\" class=\"tl-email\">\u2709\ufe0f ${email}<\/a>` : ''}${hasAdmin ? `<div class=\"admin-position\">${adminPos}<\/div>` : ''}<\/div>` : ''}<\/div>`;\n        }\n\n        window.renderOrgChart = function(dataList) {\n            const directorTier = document.getElementById('directorTier');\n            const deputyTier = document.getElementById('deputyTier');\n            const teachersContainer = document.getElementById('teachersContainer');\n            \n            directorTier.innerHTML = '';\n            deputyTier.innerHTML = '';\n            teachersContainer.innerHTML = '';\n\n            let director = [];\n            let deputies = [];\n            let departments = {}; \n\n            dataList.forEach(person => {\n                const pos = person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07'] || '';\n                const adminPos = person['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'] || '';\n                \n                if (pos === '\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32' || adminPos.includes('\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19')) {\n                    director.push(person);\n                } \n                else if (pos === '\u0e23\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32') {\n                    deputies.push(person);\n                } \n                else {\n                    const deptName = person['\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14'] && person['\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14'].trim() !== '' ? person['\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14'] : '\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b';\n                    if (!departments[deptName]) departments[deptName] = [];\n                    departments[deptName].push(person);\n                }\n            });\n\n            director.forEach(p => {\n                directorTier.innerHTML += createCardHTML(p);\n            });\n\n            deputies.sort((a, b) => (parseInt(a['\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e2d\u0e32\u0e27\u0e38\u0e42\u0e2a']) || 9999) - (parseInt(b['\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e2d\u0e32\u0e27\u0e38\u0e42\u0e2a']) || 9999));\n            deputies.forEach(p => {\n                deputyTier.innerHTML += createCardHTML(p);\n            });\n\n            for (const [dept, members] of Object.entries(departments)) {\n                members.sort((a, b) => {\n                    const aIsHead = (a['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'] || '').includes('\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32');\n                    const bIsHead = (b['\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23'] || '').includes('\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32');\n                    if (aIsHead && !bIsHead) return -1;\n                    if (!aIsHead && bIsHead) return 1;\n                    \n                    const aSeniority = parseInt(a['\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e2d\u0e32\u0e27\u0e38\u0e42\u0e2a']) || 9999;\n                    const bSeniority = parseInt(b['\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e2d\u0e32\u0e27\u0e38\u0e42\u0e2a']) || 9999;\n                    return aSeniority - bSeniority;\n                });\n\n                const deptSection = document.createElement('div');\n                deptSection.className = 'dept-section';\n                \n                const deptTitle = document.createElement('h2');\n                deptTitle.className = 'dept-title';\n                deptTitle.innerText = `\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14: ${dept}`;\n                deptSection.appendChild(deptTitle);\n\n                const grid = document.createElement('div');\n                grid.className = 'personnel-grid';\n                \n                members.forEach(p => {\n                    grid.innerHTML += createCardHTML(p);\n                });\n                \n                deptSection.appendChild(grid);\n                teachersContainer.appendChild(deptSection);\n            }\n        }\n\n        window.populateFilter = function() {\n            const filter = document.getElementById('departmentFilter');\n            filter.innerHTML = '<option value=\"all\">\u0e14\u0e39\u0e17\u0e38\u0e01\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14 \/ \u0e1d\u0e48\u0e32\u0e22<\/option>';\n            \n            const depts = [...new Set(rawData.map(p => p['\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14']).filter(d => d && d.trim() !== ''))];\n            depts.forEach(dept => {\n                if (dept !== '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23') { \n                    const option = document.createElement('option');\n                    option.value = dept;\n                    option.innerText = dept;\n                    filter.appendChild(option);\n                }\n            });\n        }\n\n        window.filterData = function() {\n            const selectedDept = document.getElementById('departmentFilter').value;\n            if (selectedDept === 'all') {\n                renderOrgChart(rawData);\n            } else {\n                const filtered = rawData.filter(p => p['\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14'] === selectedDept);\n                renderOrgChart(filtered);\n                document.getElementById('directorTier').innerHTML = '';\n                document.getElementById('deputyTier').innerHTML = '';\n            }\n        }\n\n        \/\/ \ud83c\udf1f \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14 Popup Modal\n        window.showTlModal = function(el) {\n            const dataStr = el.getAttribute('data-info');\n            const data = JSON.parse(decodeURIComponent(dataStr));\n            \n            \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19 Popup\n            let html = `\n                <img decoding=\"async\" src=\"${data.imgUrl}\" class=\"tl-modal-img\" onerror=\"this.src='https:\/\/ui-avatars.com\/api\/?name=${encodeURIComponent(data.name)}&#038;background=e83e8c&#038;color=fff'\">\n                <h3 class=\"tl-name\" style=\"font-size: 1.6rem; margin-bottom: 8px;\">${data.name}<\/h3>\n                \n                <div class=\"info-group\" style=\"gap: 5px; margin-bottom: 15px;\">\n                    <p class=\"tl-position\" style=\"font-size: 1.2rem;\">${data.mainPos}<\/p>\n                    ${data.academic ? `<p class=\"tl-academic\" style=\"font-size: 1.1rem;\">\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30: ${data.academic}<\/p>` : ''}\n                <\/div>\n                \n                ${data.major !== '\u0e44\u0e21\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32' ? `<div class=\"major-badge\" style=\"font-size: 1rem; padding: 6px 16px; margin-bottom: 15px;\">\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e2d\u0e01: ${data.major}<\/div>` : ''}\n                \n                <div class=\"bottom-section\" style=\"gap: 8px;\">\n                    ${data.hasEmail ? `<a href=\"mailto:${data.email}\" class=\"tl-email\" style=\"font-size: 1.1rem;\">\u2709\ufe0f ${data.email}<\/a>` : ''}\n                    ${data.hasAdmin ? `<div class=\"admin-position\" style=\"font-size: 1.2rem; margin-top: 5px;\">${data.adminPos}<\/div>` : ''}\n                <\/div>\n            `;\n            \n            document.getElementById('tl-modal-content').innerHTML = html;\n            const overlay = document.getElementById('tl-modal-overlay');\n            overlay.style.display = 'flex';\n            \n            \/\/ \u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49 Animation \u0e17\u0e33\u0e07\u0e32\u0e19\n            setTimeout(() => {\n                overlay.classList.add('show');\n            }, 10);\n        }\n\n        \/\/ \ud83c\udf1f \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Popup Modal\n        window.closeTlModal = function(e) {\n            const overlay = document.getElementById('tl-modal-overlay');\n            overlay.classList.remove('show');\n            \n            \/\/ \u0e23\u0e2d\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32 Animation \u0e40\u0e1f\u0e14\u0e2d\u0e2d\u0e01\u0e08\u0e1a \u0e04\u0e48\u0e2d\u0e22\u0e0b\u0e48\u0e2d\u0e19\n            setTimeout(() => {\n                overlay.style.display = 'none';\n            }, 300);\n        }\n    });\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e17\u0e1e\u0e25\u0e35\u0e25\u0e32 \u0e14\u0e39\u0e17\u0e38\u0e01 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6248","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/6248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6248"}],"version-history":[{"count":7,"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/6248\/revisions"}],"predecessor-version":[{"id":6256,"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/6248\/revisions\/6256"}],"wp:attachment":[{"href":"https:\/\/www.tepleela.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}