{"id":15894,"date":"2026-02-27T12:59:51","date_gmt":"2026-02-27T05:59:51","guid":{"rendered":"https:\/\/scphtrang.ac.th\/?page_id=15894"},"modified":"2026-02-27T13:07:12","modified_gmt":"2026-02-27T06:07:12","slug":"%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%81%e0%b8%b4%e0%b8%88%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%99%e0%b8%b1%e0%b8%81%e0%b8%a8%e0%b8%b6%e0%b8%81%e0%b8%a9%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b8%b0%e0%b8%97%e0%b8%b0","status":"publish","type":"page","link":"https:\/\/scphtrang.ac.th\/?page_id=15894","title":{"rendered":"\u0e07\u0e32\u0e19\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e17\u0e30\u0e19\u0e38\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e28\u0e34\u0e25\u0e1b\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21"},"content":{"rendered":"\n<!-- \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e33\u0e40\u0e02\u0e49\u0e32 Font \u0e41\u0e25\u0e30 Icon (\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e15\u0e48\u0e2d WordPress) -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- \ud83d\udea8 \u0e41\u0e17\u0e47\u0e01\u0e40\u0e1b\u0e34\u0e14 Style \u0e17\u0e35\u0e48\u0e2b\u0e32\u0e22\u0e44\u0e1b \ud83d\udea8 -->\n<style>\n    \/* \u0e08\u0e33\u0e01\u0e31\u0e14\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e43\u0e19 ID \u0e19\u0e35\u0e49 *\/\n    #staff-directory-app {\n        font-family: 'Prompt', sans-serif;\n        max-width: 1100px;\n        margin: 0 auto;\n        color: #1f2937;\n        line-height: 1.5;\n        padding: 1rem;\n        background-color: transparent;\n    }\n    #staff-directory-app *, #staff-directory-app *::before, #staff-directory-app *::after {\n        box-sizing: border-box !important;\n    }\n    \n    .staff-dept-title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        margin-bottom: 1.5rem;\n        margin-top: 2.5rem;\n        color: #111827;\n        border-left: 4px solid #711D76; \/* \u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e35\u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e01\u0e31\u0e1a\u0e18\u0e35\u0e21 *\/\n        padding-left: 0.75rem;\n        letter-spacing: -0.5px;\n        line-height: 1.2;\n    }\n    \n    \/* Grid \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e40\u0e23\u0e35\u0e22\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19 3 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c *\/\n    .staff-grid {\n        display: grid !important;\n        grid-template-columns: 1fr !important;\n        gap: 1.5rem !important;\n        width: 100% !important;\n        align-items: start !important;\n    }\n    \n    \/* \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e41\u0e17\u0e47\u0e1a\u0e40\u0e25\u0e47\u0e15 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c *\/\n    @media (min-width: 768px) {\n        .staff-grid {\n            grid-template-columns: repeat(2, 1fr) !important;\n        }\n    }\n    \n    \/* \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c 3 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c *\/\n    @media (min-width: 1024px) {\n        .staff-grid {\n            grid-template-columns: repeat(3, 1fr) !important;\n        }\n    }\n    \n    \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e41\u0e1a\u0e1a ID Card *\/\n    .id-card {\n        width: 100% !important;\n        max-width: 340px !important; \/* \u0e08\u0e33\u0e01\u0e31\u0e14\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e22\u0e37\u0e14\u0e40\u0e01\u0e34\u0e19\u0e44\u0e1b *\/\n        margin: 0 auto !important; \/* \u0e08\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 *\/\n        background-color: #ffffff;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        border: 1px solid #e5e7eb;\n        border-radius: 12px;\n        overflow: hidden;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        height: 100%;\n    }\n    .id-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    }\n    \n    \/* \u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 *\/\n    .id-header {\n        background-color: #711D76; \/* \u0e2a\u0e35\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e01\u0e49\u0e15\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 *\/\n        width: 100%;\n        height: 80px;\n        flex-shrink: 0;\n    }\n    \n    \/* \u0e2a\u0e48\u0e27\u0e19\u0e23\u0e39\u0e1b\u0e42\u0e1b\u0e23\u0e44\u0e1f\u0e25\u0e4c *\/\n    .id-photo-container {\n        margin-top: -55px !important; \/* \u0e14\u0e36\u0e07\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e44\u0e1b\u0e17\u0e31\u0e1a\u0e01\u0e31\u0e1a\u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 *\/\n        width: 150px !important;\n        height: 150px !important;\n        border-radius: 50% !important; \/* \u0e25\u0e47\u0e2d\u0e01\u0e01\u0e23\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e07\u0e01\u0e25\u0e21 *\/\n        background-color: #ffffff !important;\n        padding: 4px !important;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;\n        z-index: 10 !important;\n        flex-shrink: 0 !important;\n    }\n    .id-photo {\n        width: 100% !important;\n        height: 100% !important;\n        border-radius: 50% !important; \/* \u0e25\u0e47\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e07\u0e01\u0e25\u0e21 \u0e2a\u0e39\u0e49\u0e01\u0e31\u0e1a\u0e18\u0e35\u0e21 WP *\/\n        object-fit: cover !important;\n        object-position: top !important;\n        display: block !important;\n        background-color: #e5e7eb !important;\n        border: none !important;\n        max-width: none !important; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e18\u0e35\u0e21\u0e08\u0e33\u0e01\u0e31\u0e14\u0e02\u0e19\u0e32\u0e14\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14 *\/\n    }\n    \n    \/* \u0e2a\u0e48\u0e27\u0e19\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e43\u0e19\u0e01\u0e32\u0e23\u0e4c\u0e14 *\/\n    .id-body {\n        padding: 1rem 1.5rem 0.5rem 1.5rem;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        flex-grow: 1; \/* \u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e02\u0e22\u0e32\u0e22\u0e40\u0e15\u0e47\u0e21\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e31\u0e19 footer \u0e25\u0e07\u0e25\u0e48\u0e32\u0e07\u0e2a\u0e38\u0e14\u0e40\u0e2a\u0e21\u0e2d *\/\n    }\n    \n    .id-name {\n        font-size: 1.35rem;\n        font-weight: 700;\n        color: #111827;\n        margin: 0.5rem 0 0.2rem 0;\n        text-align: center;\n        line-height: 1.2;\n    }\n    .id-name-en {\n        color: #711D76; \/* \u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e35\u0e15\u0e31\u0e27\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e01\u0e31\u0e1a\u0e18\u0e35\u0e21 *\/\n    }\n    \n    .id-position {\n        font-size: 0.95rem;\n        font-weight: 500;\n        color: #9ca3af;\n        margin: 0 0 1.5rem 0;\n        text-align: center;\n    }\n    \n    \/* \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e35\u0e22\u0e07\u0e41\u0e1a\u0e1a\u0e21\u0e35 Colon *\/\n    .id-details {\n        width: 100%;\n        margin-bottom: 1.5rem;\n        font-size: 0.9rem;\n    }\n    .id-detail-row {\n        display: flex;\n        align-items: flex-start;\n        margin-bottom: 0.6rem;\n    }\n    .id-detail-label {\n        width: 95px; \/* \u0e1b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e04\u0e33\u0e27\u0e48\u0e32 \u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d *\/\n        font-weight: 600;\n        color: #4b5563;\n        text-align: right;\n        flex-shrink: 0;\n    }\n    .id-detail-sep {\n        width: 20px;\n        text-align: center;\n        color: #4b5563;\n        flex-shrink: 0;\n    }\n    .id-detail-value {\n        flex: 1;\n        color: #374151;\n        word-break: break-all;\n    }\n    .id-detail-link {\n        color: inherit;\n        text-decoration: none;\n    }\n    .id-detail-link:hover {\n        color: #711D76; \/* \u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e35\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e44\u0e1b\u0e0a\u0e35\u0e49\u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e01\u0e31\u0e1a\u0e18\u0e35\u0e21 *\/\n        text-decoration: underline;\n    }\n    \n    \/* \u0e2a\u0e48\u0e27\u0e19 QR Code *\/\n    .id-qrcode {\n        margin-top: auto; \/* \u0e14\u0e31\u0e19\u0e25\u0e07\u0e44\u0e1b\u0e0a\u0e34\u0e14\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07 *\/\n        margin-bottom: 1.25rem;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    .id-qrcode img {\n        width: 70px !important; \/* \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07 QR Code *\/\n        height: 70px !important;\n        display: block !important;\n        border-radius: 0 !important; \/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e43\u0e2b\u0e49 QR code \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e48\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21\u0e40\u0e2a\u0e21\u0e2d *\/\n    }\n    \n    \/* \u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e14\u0e33\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07 *\/\n    .id-footer {\n        background-color: #111827;\n        color: #ffffff;\n        width: 100%;\n        padding: 0.75rem 1rem;\n        text-align: center;\n        font-size: 0.85rem;\n        font-weight: 600;\n        letter-spacing: 0.5px;\n        flex-shrink: 0;\n    }\n\n    \/* \u0e2a\u0e16\u0e32\u0e19\u0e30\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e41\u0e25\u0e30 \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19 *\/\n    .staff-message {\n        text-align: center;\n        padding: 3rem 1rem;\n        color: #6b7280;\n    }\n    .staff-error-box {\n        background-color: #fef2f2;\n        border: 1px solid #fecaca;\n        color: #b91c1c;\n        padding: 1.5rem;\n        border-radius: 0.5rem;\n        text-align: center;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        max-width: 500px;\n        margin: 0 auto;\n    }\n<\/style>\n\n<!-- \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 -->\n<div id=\"staff-directory-app\">\n    <div id=\"app-container\">\n        <div id=\"loading\" class=\"staff-message\">\n            <i class=\"fas fa-spinner fa-spin\" style=\"font-size: 2rem; margin-bottom: 0.5rem;\"><\/i>\n            <p>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23&#8230;<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- \u0e2a\u0e04\u0e23\u0e34\u0e1b\u0e15\u0e4c\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 -->\n<script>\n(function() {\n    \/\/ \ud83d\udea8 \u0e2a\u0e33\u0e04\u0e31\u0e0d: URL \u0e02\u0e2d\u0e07 Google Apps Script Web App\n    const API_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzwbG5BK3MJBN9mtoXAwI_Lo7iJOv-1PY9HmgSeChqEAe2W0veX6v5oQ50ozoG83ECXdg\/exec\"; \n    \n    \/\/ \ud83d\udea8 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Section ID \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e19\u0e35\u0e49 (\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19 \"1\", \"2\")\n    \/\/ \u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e27\u0e48\u0e32\u0e07 \"\" \u0e44\u0e27\u0e49 \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e04\u0e19\n    const FILTER_SECTION_ID = \"4\"; \n    \n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e41\u0e1b\u0e25\u0e07 URL \u0e02\u0e2d\u0e07 Google Drive\n    function getValidImageUrl(url) {\n        if (!url) return \"https:\/\/via.placeholder.com\/200x200?text=No+Photo\";\n        \n        const idRegex = \/[-\\w]{25,}\/;\n        const match = url.match(idRegex);\n        \n        if (match && match[0]) {\n            const fileId = match[0];\n            return `https:\/\/drive.google.com\/uc?export=view&id=${fileId}`;\n            \/\/ \u0e2b\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e44\u0e21\u0e48\u0e42\u0e2b\u0e25\u0e14 \u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\u0e41\u0e17\u0e19\n            \/\/ return `https:\/\/lh3.googleusercontent.com\/d\/${fileId}`;\n        }\n        \n        return url;\n    }\n\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 API\n    async function fetchData() {\n        try {\n            const response = await fetch(API_URL, {\n                method: 'GET',\n                redirect: 'follow'\n            });\n            \n            const rawText = await response.text();\n            \n            let result;\n            try {\n                result = JSON.parse(rawText);\n            } catch (parseError) {\n                console.error(\"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48 JSON:\", rawText);\n                showError(\"\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49: \u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e0a\u0e47\u0e04\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e02\u0e2d\u0e07 Google Apps Script\");\n                return;\n            }\n            \n            if (result.status === \"success\") {\n                renderData(result.data);\n            } else {\n                showError(\"\u0e23\u0e30\u0e1a\u0e1a\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19: \" + (result.message || \"\u0e44\u0e21\u0e48\u0e17\u0e23\u0e32\u0e1a\u0e2a\u0e32\u0e40\u0e2b\u0e15\u0e38\"));\n            }\n        } catch (error) {\n            console.error(\"Error fetching data:\", error);\n            showError(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e2b\u0e23\u0e37\u0e2d\u0e16\u0e39\u0e01\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e42\u0e14\u0e22\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\");\n        }\n    }\n\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d UI \u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\n    function renderData(dataList) {\n        const container = document.getElementById(\"app-container\");\n        container.innerHTML = \"\";\n\n        \/\/ \u0e01\u0e23\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e32\u0e21 section_id \u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e44\u0e27\u0e49\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\n        let displayData = dataList;\n        if (FILTER_SECTION_ID !== \"\") {\n            displayData = dataList.filter(member => String(member.section_id) === String(FILTER_SECTION_ID));\n        }\n\n        if (!displayData || displayData.length === 0) {\n            container.innerHTML = \"<div class='staff-message'><p>\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23<\/p><\/div>\";\n            return;\n        }\n\n        \/\/ \u0e08\u0e31\u0e14\u0e01\u0e25\u0e38\u0e48\u0e21\u0e15\u0e32\u0e21\u0e41\u0e1c\u0e19\u0e01 \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49 department_id \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e23\u0e35\u0e22\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\n        const groups = {};\n        displayData.forEach(curr => {\n            const deptName = curr.department || \"\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\";\n            \/\/ \u0e43\u0e0a\u0e49 department_id \u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a \u0e16\u0e49\u0e32\u0e44\u0e21\u0e48\u0e21\u0e35\u0e43\u0e2b\u0e49\u0e44\u0e1b\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e49\u0e32\u0e22\u0e46 (9999)\n            const deptId = curr.department_id || 9999; \n            \n            if (!groups[deptName]) {\n                groups[deptName] = { id: Number(deptId), members: [] };\n            }\n            groups[deptName].members.push(curr);\n        });\n\n        \/\/ \u0e40\u0e23\u0e35\u0e22\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e1c\u0e19\u0e01\u0e15\u0e32\u0e21 department_id \u0e08\u0e32\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e44\u0e1b\u0e21\u0e32\u0e01\n        const sortedDeptNames = Object.keys(groups).sort((a, b) => groups[a].id - groups[b].id);\n\n        \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 UI \u0e41\u0e22\u0e01\u0e15\u0e32\u0e21\u0e41\u0e1c\u0e19\u0e01\u0e17\u0e35\u0e48\u0e40\u0e23\u0e35\u0e22\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e41\u0e25\u0e49\u0e27\n        sortedDeptNames.forEach(department => {\n            const members = groups[department].members;\n            \n            \/\/ 1. \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e41\u0e1c\u0e19\u0e01\n            const sectionHeader = document.createElement(\"h2\");\n            sectionHeader.className = \"staff-dept-title\";\n            sectionHeader.textContent = department;\n            container.appendChild(sectionHeader);\n\n            \/\/ 2. \u0e2a\u0e23\u0e49\u0e32\u0e07 Grid Container \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e40\u0e23\u0e35\u0e22\u0e07 3 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\n            const gridContainer = document.createElement(\"div\");\n            gridContainer.className = \"staff-grid\";\n\n            \/\/ 3. \u0e27\u0e19\u0e25\u0e39\u0e1b\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e43\u0e2a\u0e48\u0e43\u0e19\u0e41\u0e1c\u0e19\u0e01\u0e19\u0e31\u0e49\u0e19\u0e46\n            members.forEach(member => {\n                const card = document.createElement(\"div\");\n                card.className = \"id-card\";\n                \n                const imgUrl = getValidImageUrl(member.image_url);\n                const nameTh = member.name_th || \"-\";\n                const nameEn = member.name_en ? `<span class=\"id-name-en\">${member.name_en}<\/span>` : \"\";\n                const position = member.position || \"General Staff\";\n                \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 activity \u0e41\u0e17\u0e19\u0e17\u0e35\u0e48 department \u0e40\u0e14\u0e34\u0e21\n                const activity = member.activity || \"-\"; \n                const level = member.level || \"-\"; \n                const phone = member.phone || \"-\";\n                const email = member.email || \"-\";\n                \n                \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e41\u0e1b\u0e25\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e33\u0e27\u0e48\u0e32 \"\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\"\n                let expertise = member.expertise || \"-\";\n                if (typeof expertise === 'string' && expertise.includes('https:\/\/phas-one.scphub.ac.th\/login')) {\n                    expertise = expertise.replace(\/https:\\\/\\\/phas-one\\.scphub\\.ac\\.th\\\/login\/g, '<a href=\"https:\/\/phas-one.scphub.ac.th\" target=\"_blank\" class=\"id-detail-link\" style=\"color: #711D76; text-decoration: underline;\">\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39<\/a>');\n                }\n                \n                \/\/ \u0e19\u0e33\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 ID \u0e21\u0e32\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19 QR Code\n                const idData = member.id || \"NO-ID\";\n\n                card.innerHTML = `\n                    <!-- \u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 -->\n                    <div class=\"id-header\"><\/div>\n                    \n                    <div class=\"id-body\">\n                        <!-- \u0e23\u0e39\u0e1b\u0e27\u0e07\u0e01\u0e25\u0e21 -->\n                        <div class=\"id-photo-container\">\n                            <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${nameTh}\" class=\"id-photo\" onerror=\"this.src='https:\/\/via.placeholder.com\/200x200?text=Error'\">\n                        <\/div>\n                        \n                        <!-- \u0e0a\u0e37\u0e48\u0e2d \u0e41\u0e25\u0e30 \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 -->\n                        <h3 class=\"id-name\">${nameTh} <br>${nameEn}<\/h3>\n                        <p class=\"id-position\">${position}<\/p>\n                        \n                        <!-- \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d -->\n                        <div class=\"id-details\">\n                            <div class=\"id-detail-row\">\n                                <span class=\"id-detail-label\">\u0e23\u0e30\u0e14\u0e31\u0e1a<\/span>\n                                <span class=\"id-detail-sep\">:<\/span>\n                                <span class=\"id-detail-value\">${level}<\/span>\n                            <\/div>\n                            <div class=\"id-detail-row\">\n                                <span class=\"id-detail-label\">\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e35\u0e48\u0e22\u0e27\u0e0a\u0e32\u0e0d<\/span>\n                                <span class=\"id-detail-sep\">:<\/span>\n                                <span class=\"id-detail-value\">${expertise}<\/span>\n                            <\/div>\n                            <div class=\"id-detail-row\">\n                                <span class=\"id-detail-label\">\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/span>\n                                <span class=\"id-detail-sep\">:<\/span>\n                                <span class=\"id-detail-value\">${phone}<\/span>\n                            <\/div>\n                            <div class=\"id-detail-row\">\n                                <span class=\"id-detail-label\">\u0e2d\u0e35\u0e40\u0e21\u0e25<\/span>\n                                <span class=\"id-detail-sep\">:<\/span>\n                                <span class=\"id-detail-value\"><a href=\"mailto:${email}\" class=\"id-detail-link\">${email}<\/a><\/span>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- QR Code -->\n                        <div class=\"id-qrcode\">\n                            <img decoding=\"async\" src=\"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=100x100&#038;data=${encodeURIComponent(idData)}\" alt=\"QR Code\" title=\"ID: ${idData}\">\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u0e41\u0e16\u0e1a\u0e2a\u0e35\u0e14\u0e33\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07 \u0e41\u0e2a\u0e14\u0e07 Activity -->\n                    <div class=\"id-footer\">\n                        ${activity}\n                    <\/div>\n                `;\n                gridContainer.appendChild(card);\n            });\n            \n            \/\/ \u0e19\u0e33 Grid Container \u0e44\u0e1b\u0e43\u0e2a\u0e48\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e15\u0e48\u0e2d\u0e08\u0e32\u0e01\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e41\u0e1c\u0e19\u0e01\n            container.appendChild(gridContainer);\n        });\n    }\n\n    function showError(message) {\n        const container = document.getElementById(\"app-container\");\n        container.innerHTML = `\n            <div class=\"staff-error-box\">\n                <i class=\"fas fa-exclamation-triangle\" style=\"font-size: 2rem; margin-bottom: 1rem;\"><\/i>\n                <h3 style=\"margin-top:0; margin-bottom: 0.5rem; font-size: 1.25rem;\">\u0e1e\u0e1a\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d<\/h3>\n                <p style=\"margin:0;\">${message}<\/p>\n            <\/div>\n        `;\n    }\n\n    \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\n    if(document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', fetchData);\n    } else {\n        fetchData();\n    }\n})(); \/\/ \u0e1b\u0e34\u0e14 IIFE\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/15894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15894"}],"version-history":[{"count":2,"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/15894\/revisions"}],"predecessor-version":[{"id":15907,"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/15894\/revisions\/15907"}],"wp:attachment":[{"href":"https:\/\/scphtrang.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}