{"id":13668,"date":"2026-03-18T09:08:15","date_gmt":"2026-03-18T09:08:15","guid":{"rendered":"https:\/\/chetupon.ac.th\/?page_id=13668"},"modified":"2026-03-18T09:44:56","modified_gmt":"2026-03-18T09:44:56","slug":"download","status":"publish","type":"page","link":"https:\/\/chetupon.ac.th\/?page_id=13668","title":{"rendered":"download"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13668\" class=\"elementor elementor-13668\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ad2270 e-flex e-con-boxed e-con e-parent\" data-id=\"8ad2270\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-efa99f9 elementor-widget elementor-widget-shortcode\" data-id=\"efa99f9\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <!-- \u0e42\u0e2b\u0e25\u0e14 Tailwind CSS \u0e41\u0e25\u0e30 Fonts -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\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=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap\"\n        rel=\"stylesheet\">\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n    <script>\n        tailwind.config = {\n            corePlugins: { preflight: false },\n            theme: {\n                extend: {\n                    fontFamily: { sans: ['\"Noto Sans Thai\"', 'sans-serif'] },\n                    colors: {\n                        'brand-blue': '#2563eb',\n                        'brand-hover': '#1d4ed8',\n                        'sidebar-bg': '#efeff1',\n                        'sidebar-active': '#e2e4e9',\n                        'sidebar-border': '#555e70'\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        .custom-scrollbar::-webkit-scrollbar {\n            width: 6px;\n        }\n\n        .custom-scrollbar::-webkit-scrollbar-track {\n            background: #f1f1f1;\n            border-radius: 10px;\n        }\n\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n            background: #cbd5e1;\n            border-radius: 10px;\n        }\n\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n            background: #94a3b8;\n        }\n\n        \/* \u0e25\u0e49\u0e32\u0e07\u0e04\u0e48\u0e32\u0e08\u0e38\u0e14\u0e44\u0e02\u0e48\u0e1b\u0e25\u0e32\u0e02\u0e2d\u0e07\u0e18\u0e35\u0e21 WordPress *\/\n        .reset-list {\n            list-style: none !important;\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n\n        .reset-list li {\n            list-style: none !important;\n            margin-bottom: 0.5rem !important;\n        }\n\n        .reset-list li::before {\n            content: none !important;\n        }\n    <\/style>\n\n    <div id=\"wp-doc-center-app\" class=\"bg-white min-h-screen font-sans rounded-2xl relative\">\n        <div class=\"max-w-7xl mx-auto py-6\">\n\n            <!-- Header -->\n            <div class=\"mb-8 px-4 md:px-0\">\n                <h2 class=\"text-3xl md:text-4xl font-bold text-gray-800 mb-2 flex items-center gap-3\">\n                    <i data-lucide=\"folder-down\" class=\"w-8 h-8 text-brand-blue\"><\/i>\n                    \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\n                <\/h2>\n                <p class=\"text-gray-500 text-lg\">\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e25\u0e30\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e02\u0e2d\u0e07\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22<\/p>\n            <\/div>\n\n            <!-- Layout \u0e2b\u0e25\u0e31\u0e01 (Sidebar + Main Content) -->\n            <div class=\"flex flex-col md:flex-row gap-6 lg:gap-8\">\n\n                <div class=\"w-full md:w-72 lg:w-[340px] shrink-0\">\n                    <div\n                        class=\"bg-sidebar-bg border border-sidebar-border rounded-3xl p-5 sm:p-6 md:sticky md:top-6 shadow-sm\">\n                        <h3 class=\"text-gray-600 font-bold text-lg mb-4 px-2\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e07\u0e32\u0e19<\/h3>\n                        <ul id=\"sidebar-dept-list\" class=\"reset-list space-y-2\">\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flex-1 min-w-0 px-4 md:px-0\">\n\n                    <div\n                        class=\"bg-white p-4 rounded-2xl shadow-sm border border-gray-200 mb-6 flex flex-col items-center relative z-20\">\n                        <div class=\"w-full\">\n                            <label\n                                class=\"block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5 ml-1\">\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21<\/label>\n                            <div class=\"relative w-full\">\n                                <div\n                                    class=\"absolute inset-y-0 left-0 w-12 flex items-center justify-center pointer-events-none\">\n                                    <i data-lucide=\"search\" class=\"h-5 w-5 text-gray-400\"><\/i>\n                                <\/div>\n                                <input type=\"text\" id=\"filter-search\"\n                                    class=\"block w-full pr-4 py-3.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue bg-gray-50 hover:bg-white focus:bg-white outline-none transition-all duration-300 text-sm shadow-sm\"\n                                    style=\"padding-left: 3rem !important;\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48...\" \/>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div\n                        class=\"bg-white rounded-2xl shadow-sm border border-gray-200 flex flex-col overflow-hidden relative z-10\">\n\n                        <div\n                            class=\"hidden sm:grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b border-gray-200 text-sm font-bold text-gray-600\">\n                            <div class=\"col-span-8 md:col-span-8 lg:col-span-9\">\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21<\/div>\n                            <div class=\"col-span-4 md:col-span-4 lg:col-span-3 text-right pr-4\">\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c<\/div>\n                        <\/div>\n\n                        <div id=\"doc-list-container\" class=\"divide-y divide-gray-100 overflow-y-auto custom-scrollbar\"\n                            style=\"min-height: 400px;\">\n                            <div class=\"flex flex-col items-center justify-center h-full p-20 text-gray-400\">\n                                <i data-lucide=\"loader-2\" class=\"w-10 h-10 animate-spin text-brand-blue mb-4\"><\/i>\n                                <p>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a...<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div id=\"doc-pagination-container\" class=\"p-4 border-t border-gray-200 bg-gray-50 hidden\">\n                        <\/div>\n\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <script>\n            (function () {\n                const API_URLS = {\n                    categories: \"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/categories\",\n                    posts: \"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/posts\"\n                };\n\n                \/\/ ---- [\u0e41\u0e01\u0e49\u0e44\u0e02 1] \u0e14\u0e36\u0e07\u0e40\u0e09\u0e1e\u0e32\u0e30 fields \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e25\u0e14 payload \u0e25\u0e07\u0e21\u0e32\u0e01 ----\n                const POST_FIELDS = 'id,title,content,categories,tags';\n                const CAT_FIELDS  = 'id,name,slug';\n\n                function buildSafeUrl(baseUrl, params) {\n                    const url = new URL(baseUrl);\n                    for (const key in params) {\n                        url.searchParams.set(key, params[key]);\n                    }\n                    return url.toString();\n                }\n\n                const DEPARTMENTS = [\n                    {\n                        id: 'all',\n                        name: '\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14',\n                        icon: 'layout-grid',\n                        categories: []\n                    },\n                    {\n                        id: 'dept-academic',\n                        name: '\u0e1d\u0e48\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23',\n                        icon: 'book-open',\n                        categories: [\n                            { name: '\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49', slug: 'course' },\n                            { name: '\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\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23', slug: 'curriculumtechnology' },\n                            { name: '\u0e07\u0e32\u0e19\u0e27\u0e31\u0e14\u0e1c\u0e25\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25', slug: 'evaluation' },\n                            { name: '\u0e07\u0e32\u0e19\u0e27\u0e34\u0e17\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32', slug: 'library' },\n                            { name: '\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e27\u0e28\u0e36\u0e01\u0e29\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e27\u0e34\u0e20\u0e32\u0e04\u0e35\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e23\u0e48\u0e27\u0e21\u0e21\u0e37\u0e2d', slug: 'vocationaleducation' },\n                            { name: '\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e21\u0e2d\u0e20\u0e32\u0e04\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32', slug: 'specialeducation' }\n                        ]\n                    },\n                    {\n                        id: 'dept-resource',\n                        name: '\u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e32\u0e01\u0e23',\n                        icon: 'users',\n                        categories: [\n                            { name: '\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b', slug: 'generaladministration' },\n                            { name: '\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e32\u0e01\u0e23\u0e1a\u0e38\u0e04\u0e04\u0e25', slug: 'personnel' },\n                            { name: '\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19', slug: 'finance' },\n                            { name: '\u0e07\u0e32\u0e19\u0e1a\u0e31\u0e0d\u0e0a\u0e35', slug: 'accounting' },\n                            { name: '\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38', slug: 'procurement' },\n                            { name: '\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48', slug: 'buildings-locations' },\n                            { name: '\u0e07\u0e32\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19', slug: 'registration' },\n                        ]\n                    },\n                    {\n                        id: 'dept-plan',\n                        name: '\u0e1d\u0e48\u0e32\u0e22\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19',\n                        icon: 'briefcase',\n                        categories: [\n                            { name: '\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e22\u0e38\u0e17\u0e18\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13', slug: 'planning-budgeting' },\n                            { name: '\u0e07\u0e32\u0e19\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e27\u0e34\u0e08\u0e31\u0e22 \u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e1b\u0e23\u0e30\u0e14\u0e34\u0e29\u0e10\u0e4c', slug: 'research-invention' },\n                            { name: '\u0e07\u0e32\u0e19\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23', slug: 'cooperation' },\n                            { name: '\u0e07\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e', slug: 'quality-assurance' },\n                            { name: '\u0e07\u0e32\u0e19\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e01\u0e32\u0e23', slug: 'marketing' },\n                            { name: '\u0e07\u0e32\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23', slug: 'it-center' }\n                        ]\n                    },\n                    {\n                        id: 'dept-student',\n                        name: '\u0e1d\u0e48\u0e32\u0e22\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32',\n                        icon: 'graduation-cap',\n                        categories: [\n                            { name: '\u0e07\u0e32\u0e19\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32', slug: 'student-activities' },\n                            { name: '\u0e07\u0e32\u0e19\u0e04\u0e23\u0e39\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e41\u0e19\u0e30\u0e41\u0e19\u0e27', slug: 'advisory-teachers' },\n                            { name: '\u0e07\u0e32\u0e19\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32', slug: 'student-welfare' },\n                            { name: '\u0e07\u0e32\u0e19\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23', slug: 'special-projects' },\n                            { name: '\u0e07\u0e32\u0e19\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32', slug: 'discipline' }\n                        ]\n                    }\n                ];\n\n                let allDocuments = [];\n                let currentDeptId = 'all';\n                let expandedDeptId = null;\n                let currentWorkSlug = 'all';\n                let docSearchTerm = '';\n\n                let currentPage = 1;\n                const itemsPerPage = 20;\n\n                window.copyToClipboard = function (e, url, btn) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const originalHTML = btn.innerHTML;\n                    const successHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#16a34a\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><span class=\"text-[11px] font-bold text-green-700 leading-none mt-0.5\">\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27<\/span>`;\n\n                    const fallbackCopy = () => {\n                        const textArea = document.createElement(\"textarea\");\n                        textArea.value = url;\n                        textArea.style.position = \"fixed\";\n                        document.body.appendChild(textArea);\n                        textArea.focus();\n                        textArea.select();\n                        try {\n                            document.execCommand('copy');\n                            btn.innerHTML = successHTML;\n                            btn.style.setProperty('background-color', '#dcfce7', 'important');\n                            btn.style.setProperty('border-color', '#bbf7d0', 'important');\n                            setTimeout(() => {\n                                btn.innerHTML = originalHTML;\n                                btn.style.setProperty('background-color', '#f3f4f6', 'important');\n                                btn.style.setProperty('border-color', '#e5e7eb', 'important');\n                            }, 2000);\n                        } catch (err) { }\n                        document.body.removeChild(textArea);\n                    };\n\n                    if (navigator.clipboard && window.isSecureContext) {\n                        navigator.clipboard.writeText(url).then(() => {\n                            btn.innerHTML = successHTML;\n                            btn.style.setProperty('background-color', '#dcfce7', 'important');\n                            btn.style.setProperty('border-color', '#bbf7d0', 'important');\n                            setTimeout(() => {\n                                btn.innerHTML = originalHTML;\n                                btn.style.setProperty('background-color', '#f3f4f6', 'important');\n                                btn.style.setProperty('border-color', '#e5e7eb', 'important');\n                            }, 2000);\n                        }).catch(() => fallbackCopy());\n                    } else {\n                        fallbackCopy();\n                    }\n                };\n\n                function extractLinksFromHtml(htmlString) {\n                    const tempDiv = document.createElement('div');\n                    tempDiv.innerHTML = htmlString;\n                    const aTags = tempDiv.querySelectorAll('a');\n                    let links = [];\n                    \n                    aTags.forEach(a => {\n                        if (a.href) {\n                            const innerText = a.textContent ? a.textContent.toLowerCase() : '';\n                            const parentText = a.parentElement ? a.parentElement.textContent.toLowerCase() : '';\n                            \n                            if (!links.some(l => l.url === a.href)) {\n                                links.push({\n                                    url: a.href,\n                                    textContext: `${innerText} ${parentText}`\n                                });\n                            }\n                        }\n                    });\n                    return links;\n                }\n\n                function getFileTypeName(linkObj) {\n                    if (!linkObj || !linkObj.url || linkObj.url === '#') return '\u0e44\u0e1f\u0e25\u0e4c';\n                    \n                    const url = linkObj.url;\n                    const textToSearch = linkObj.textContext || '';\n                    let decodedUrl = url;\n                    try { decodedUrl = decodeURIComponent(url); } catch (e) { }\n                    const cleanUrl = decodedUrl.split('?')[0].toLowerCase();\n                    \n                    if (cleanUrl.match(\/\\.pdf$\/) || cleanUrl.includes('.pdf') || url.toLowerCase().includes('export=pdf')) return 'PDF';\n                    if (cleanUrl.match(\/\\.doc(x)?$\/) || cleanUrl.includes('.doc') || cleanUrl.includes('docs.google.com\/document')) return 'Word';\n                    if (cleanUrl.match(\/\\.xls(x)?$\/) || cleanUrl.includes('.xls') || cleanUrl.includes('docs.google.com\/spreadsheets')) return 'Excel';\n                    if (cleanUrl.match(\/\\.ppt(x)?$\/) || cleanUrl.includes('.ppt') || cleanUrl.includes('docs.google.com\/presentation')) return 'PowerPoint';\n                    if (cleanUrl.match(\/\\.(zip|rar|7z)$\/)) return 'Zip';\n                    if (cleanUrl.match(\/\\.(jpg|jpeg|png|gif|webp)$\/)) return '\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e';\n\n                    if (textToSearch.includes('pdf')) return 'PDF';\n                    if (textToSearch.includes('word') || textToSearch.includes('doc')) return 'Word';\n                    if (textToSearch.includes('excel') || textToSearch.includes('xls')) return 'Excel';\n                    if (textToSearch.includes('powerpoint') || textToSearch.includes('ppt')) return 'PowerPoint';\n                    \n                    if (cleanUrl.includes('drive.google.com') || cleanUrl.includes('\/folders\/')) return 'Drive';\n                    \n                    return '\u0e44\u0e1f\u0e25\u0e4c';\n                }\n\n                function getFileIconHTML(linkObj, title = '') {\n                    if (!linkObj || !linkObj.url || linkObj.url === '#') {\n                        return `<div class=\"w-11 h-11 bg-gray-100 rounded-xl flex items-center justify-center shadow-sm border border-gray-200 shrink-0\"><i data-lucide=\"link-2-off\" class=\"w-5 h-5 text-gray-400\"><\/i><\/div>`;\n                    }\n\n                    const urlLower = linkObj.url.toLowerCase();\n                    const titleLower = title.toLowerCase();\n                    const contextLower = linkObj.textContext || '';\n                    let type = 'unknown';\n\n                    let ext = '';\n                    try {\n                        const cleanUrl = linkObj.url.split('?')[0].split('#')[0].toLowerCase();\n                        const parts = cleanUrl.split('.');\n                        if (parts.length > 1) ext = parts.pop();\n                    } catch (e) { }\n\n                    if (['pdf'].includes(ext) || urlLower.includes('.pdf')) type = 'pdf';\n                    else if (['doc', 'docx'].includes(ext) || urlLower.includes('.doc') || urlLower.includes('docs.google.com\/document')) type = 'word';\n                    else if (['xls', 'xlsx', 'csv'].includes(ext) || urlLower.includes('.xls') || urlLower.includes('docs.google.com\/spreadsheets')) type = 'excel';\n                    else if (['ppt', 'pptx'].includes(ext) || urlLower.includes('.ppt') || urlLower.includes('docs.google.com\/presentation')) type = 'powerpoint';\n                    else if (['zip', 'rar', '7z'].includes(ext)) type = 'archive';\n                    else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) type = 'image';\n                    else if (urlLower.includes('sites.google.com')) type = 'sites';\n\n                    if (type === 'unknown') {\n                        if (contextLower.includes('pdf')) type = 'pdf';\n                        else if (contextLower.includes('word') || contextLower.includes('doc')) type = 'word';\n                        else if (contextLower.includes('excel') || contextLower.includes('xls')) type = 'excel';\n                        else if (contextLower.includes('powerpoint') || contextLower.includes('ppt')) type = 'powerpoint';\n                    }\n\n                    if (type === 'unknown') {\n                        if (titleLower.includes('.pdf') || titleLower.includes('pdf')) type = 'pdf';\n                        else if (titleLower.includes('.doc') || titleLower.includes('word')) type = 'word';\n                        else if (titleLower.includes('.xls') || titleLower.includes('excel')) type = 'excel';\n                        else if (titleLower.includes('.ppt') || titleLower.includes('powerpoint')) type = 'powerpoint';\n                    }\n\n                    if (type === 'unknown') {\n                        if (urlLower.includes('drive.google.com') || urlLower.includes('\/folders\/')) type = 'drive';\n                    }\n\n                    const baseClass = \"w-11 h-11 rounded-xl flex items-center justify-center shadow-sm relative overflow-hidden group-hover:shadow-md transition-all shrink-0\";\n                    const foldClass = \"absolute top-0 right-0 w-3 h-3 bg-white\/30 rounded-bl-lg\";\n\n                    switch (type) {\n                        case 'word':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-[#185abd] to-[#2b579a]\"><div class=\"${foldClass}\"><\/div><span class=\"font-black text-white text-[18px]\">W<\/span><\/div>`;\n                        case 'excel':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-[#107c41] to-[#185c37]\"><div class=\"${foldClass}\"><\/div><span class=\"font-black text-white text-[18px]\">X<\/span><\/div>`;\n                        case 'powerpoint':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-[#c43e1c] to-[#a4371a]\"><div class=\"${foldClass}\"><\/div><span class=\"font-black text-white text-[18px]\">P<\/span><\/div>`;\n                        case 'pdf':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-[#e11d48] to-[#be123c]\"><div class=\"${foldClass}\"><\/div><span class=\"font-black text-white text-[11px] tracking-wider\">PDF<\/span><\/div>`;\n                        case 'sites':\n                            return `<div class=\"${baseClass} bg-[#e0e7ff] border border-[#c7d2fe]\"><i data-lucide=\"layout-template\" class=\"w-6 h-6 text-[#4f46e5]\"><\/i><\/div>`;\n                        case 'drive':\n                            return `<div class=\"${baseClass} bg-white border border-gray-100\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 87.3 78\" class=\"w-[26px] h-[26px]\">\n                                    <path fill=\"#0066da\" d=\"M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L27.5 53H0c0 1.55.4 3.1 1.2 4.5z\"\/>\n                                    <path fill=\"#00ac47\" d=\"M43.65 25L29.9 1.2C28.55 2 27.4 3.1 26.6 4.5L1.2 48.5A9.06 9.06 0 000 53h27.5z\"\/>\n                                    <path fill=\"#ea4335\" d=\"M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5H59.8l5.85 11.5z\"\/>\n                                    <path fill=\"#00832d\" d=\"M43.65 25L57.4 1.2C56.05.45 54.5 0 52.9 0H34.4c-1.6 0-3.15.45-4.5 1.2z\"\/>\n                                    <path fill=\"#2684fc\" d=\"M59.8 53H27.5L13.75 76.8c1.35.75 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\/>\n                                    <path fill=\"#ffba00\" d=\"M73.4 26.5l-25.35-44A9.21 9.21 0 0043.65 25L59.8 53h27.5c0-1.55-.4-3.1-1.2-4.5z\"\/>\n                                <\/svg>\n                            <\/div>`;\n                        case 'archive':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-yellow-500 to-amber-600\"><i data-lucide=\"file-archive\" class=\"w-5 h-5 text-white\"><\/i><\/div>`;\n                        case 'image':\n                            return `<div class=\"${baseClass} bg-gradient-to-br from-pink-500 to-rose-500\"><i data-lucide=\"image\" class=\"w-5 h-5 text-white\"><\/i><\/div>`;\n                        default:\n                            return `<div class=\"${baseClass} bg-gray-50 border border-gray-200\"><div class=\"absolute top-0 right-0 w-3 h-3 bg-gray-200\/50 rounded-bl-lg\"><\/div><i data-lucide=\"file-text\" class=\"w-5 h-5 text-gray-400\"><\/i><\/div>`;\n                    }\n                }\n\n                function initSidebarHTML() {\n                    const sidebar = document.getElementById('sidebar-dept-list');\n                    let html = '';\n\n                    DEPARTMENTS.forEach(dept => {\n                        const hasCategories = dept.categories && dept.categories.length > 0;\n                        html += `<li class=\"relative\">`;\n\n                        html += `\n            <button \n                id=\"btn-dept-${dept.id}\"\n                onclick=\"window.toggleDept('${dept.id}')\"\n                class=\"w-full text-left px-4 py-3 rounded-2xl flex items-center justify-between transition-all duration-300 bg-transparent border-[1.5px] border-transparent font-medium text-gray-700 hover:bg-gray-200\"\n            >\n                <div class=\"flex items-center gap-3 w-full pr-2\">\n                    <i id=\"icon-dept-${dept.id}\" data-lucide=\"${dept.icon}\" class=\"w-5 h-5 shrink-0 transition-colors duration-300 text-gray-500\"><\/i>\n                    <span class=\"whitespace-normal break-words leading-tight w-full\">${dept.name}<\/span>\n                <\/div>\n                ${hasCategories ? `<i id=\"chevron-dept-${dept.id}\" data-lucide=\"chevron-right\" class=\"w-4 h-4 shrink-0 transition-transform duration-300 text-gray-400\"><\/i>` : ''}\n            <\/button>\n          `;\n\n                        if (hasCategories) {\n                            html += `\n              <div id=\"menu-dept-${dept.id}\" class=\"grid transition-all duration-300 ease-in-out\" style=\"grid-template-rows: 0fr; opacity: 0; margin-top: 0; margin-bottom: 0;\">\n                <div class=\"overflow-hidden min-h-0\">\n                  <ul class=\"reset-list pl-11 pr-2 mt-1 mb-2 space-y-1\">\n              `;\n\n                            dept.categories.forEach(cat => {\n                                html += `\n                    <li>\n                        <button id=\"btn-work-${cat.slug}\" onclick=\"window.selectWork('${cat.slug}', '${dept.id}')\" class=\"w-full text-left px-3 py-2 text-[14px] rounded-xl transition-all duration-300 flex items-center gap-2 text-gray-600 hover:bg-gray-200 hover:text-gray-900 border border-transparent\">\n                             <div id=\"dot-work-${cat.slug}\" class=\"w-1.5 h-1.5 rounded-full bg-gray-300 shrink-0 transition-colors duration-300\"><\/div>\n                            <span class=\"whitespace-normal break-words leading-tight w-full\">${cat.name}<\/span>\n                        <\/button>\n                    <\/li>\n                  `;\n                            });\n                            html += `<\/ul><\/div><\/div>`;\n                        }\n                        html += `<\/li>`;\n                    });\n\n                    sidebar.innerHTML = html;\n                    if (window.lucide) lucide.createIcons();\n                }\n\n                function updateSidebarUI() {\n                    DEPARTMENTS.forEach(dept => {\n                        const btn = document.getElementById(`btn-dept-${dept.id}`);\n                        const icon = document.getElementById(`icon-dept-${dept.id}`);\n                        const menu = document.getElementById(`menu-dept-${dept.id}`);\n                        const chevron = document.getElementById(`chevron-dept-${dept.id}`);\n\n                        const isDeptActive = (currentDeptId === dept.id);\n                        const isExpanded = (expandedDeptId === dept.id);\n\n                        if (btn) {\n                            btn.className = isDeptActive\n                                ? \"w-full text-left px-4 py-3 rounded-2xl flex items-center justify-between transition-all duration-300 bg-brand-blue text-white shadow-md font-bold\"\n                                : \"w-full text-left px-4 py-3 rounded-2xl flex items-center justify-between transition-all duration-300 bg-transparent border-[1.5px] border-transparent font-medium text-gray-700 hover:bg-sidebar-active\";\n                        }\n                        if (icon) {\n                            icon.className = isDeptActive\n                                ? \"w-5 h-5 shrink-0 transition-colors duration-300 text-white\"\n                                : \"w-5 h-5 shrink-0 transition-colors duration-300 text-gray-500\";\n                        }\n\n                        if (menu) {\n                            if (isExpanded) {\n                                menu.style.gridTemplateRows = \"1fr\";\n                                menu.style.opacity = \"1\";\n                                menu.style.marginTop = \"0.25rem\";\n                                menu.style.marginBottom = \"0.5rem\";\n                            } else {\n                                menu.style.gridTemplateRows = \"0fr\";\n                                menu.style.opacity = \"0\";\n                                menu.style.marginTop = \"0\";\n                                menu.style.marginBottom = \"0\";\n                            }\n\n                            if (chevron) {\n                                chevron.className = isDeptActive\n                                    ? \"w-4 h-4 shrink-0 transition-transform duration-300 text-blue-200\"\n                                    : \"w-4 h-4 shrink-0 transition-transform duration-300 text-gray-400\";\n                                chevron.style.transform = isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\";\n                            }\n\n                            dept.categories.forEach(cat => {\n                                const isActiveWork = (currentWorkSlug === cat.slug && currentDeptId === dept.id);\n                                const wBtn = document.getElementById(`btn-work-${cat.slug}`);\n                                const wDot = document.getElementById(`dot-work-${cat.slug}`);\n\n                                if (wBtn && wDot) {\n                                    wBtn.className = isActiveWork\n                                        ? \"w-full text-left px-3 py-2 text-[14px] rounded-xl transition-all duration-300 flex items-center gap-2 bg-blue-50 text-brand-blue font-bold shadow-sm border border-blue-200\"\n                                        : \"w-full text-left px-3 py-2 text-[14px] rounded-xl transition-all duration-300 flex items-center gap-2 text-gray-600 hover:bg-sidebar-active hover:text-gray-900 border border-transparent\";\n\n                                    wDot.className = isActiveWork\n                                        ? \"w-1.5 h-1.5 rounded-full shrink-0 transition-colors duration-300 bg-brand-blue\"\n                                        : \"w-1.5 h-1.5 rounded-full shrink-0 transition-colors duration-300 bg-gray-300\";\n                                }\n                            });\n                        }\n                    });\n                }\n\n                window.toggleDept = function (deptId) {\n                    if (currentDeptId === deptId) {\n                        expandedDeptId = (expandedDeptId === deptId) ? null : deptId;\n                    } else {\n                        currentDeptId = deptId;\n                        expandedDeptId = deptId;\n                    }\n                    currentWorkSlug = 'all';\n                    currentPage = 1;\n                    updateSidebarUI();\n                    renderDocuments();\n                };\n\n                window.selectWork = function (slug, deptId) {\n                    currentWorkSlug = slug;\n                    currentDeptId = deptId;\n                    currentPage = 1;\n                    updateSidebarUI();\n                    renderDocuments();\n                };\n\n                window.goToPage = function (page) {\n                    currentPage = page;\n                    renderDocuments();\n                };\n\n                \/\/ ---- [\u0e41\u0e01\u0e49\u0e44\u0e02 2] \u0e14\u0e36\u0e07 Tags \u0e41\u0e22\u0e01 batch \u0e41\u0e17\u0e19 _embed \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e14 payload ----\n                async function fetchTagNamesByIds(tagIds) {\n                    if (!tagIds || tagIds.length === 0) return {};\n                    const url = buildSafeUrl(API_URLS.posts.replace('\/posts', '\/tags'), {\n                        include: tagIds.join(','),\n                        per_page: 100,\n                        _fields: 'id,name'\n                    });\n                    try {\n                        const res = await fetch(url);\n                        if (!res.ok) return {};\n                        const tags = await res.json();\n                        const map = {};\n                        tags.forEach(t => { map[t.id] = t.name; });\n                        return map;\n                    } catch (e) { return {}; }\n                }\n\n                async function fetchPostsPage(catIds, page = 1, perPage = 40) {\n                    const url = buildSafeUrl(API_URLS.posts, {\n                        categories: catIds.join(','),\n                        per_page: perPage,\n                        page: page,\n                        _fields: POST_FIELDS\n                    });\n                    const res = await fetch(url);\n                    if (!res.ok) return { posts: [], totalPages: 0 };\n                    const posts = await res.json();\n                    const totalPages = parseInt(res.headers.get('X-WP-TotalPages') || '1', 10);\n                    return { posts: Array.isArray(posts) ? posts : [], totalPages };\n                }\n\n                function mapPostsToDocuments(posts, wpCatMap, tagNameMap) {\n                    const docs = [];\n                    posts.forEach(post => {\n                        const contentHTML = (post.content && post.content.rendered) ? post.content.rendered : '';\n                        const titleHTML = (post.title && post.title.rendered) ? post.title.rendered : '\u0e44\u0e21\u0e48\u0e21\u0e35\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23';\n                        const fileLinks = extractLinksFromHtml(contentHTML);\n                        if (fileLinks.length === 0) fileLinks.push({ url: '#', textContext: '' });\n                        const plainTitle = titleHTML.replace(\/&#8211;\/g, '-').replace(\/<[^>]+>\/g, '');\n\n                        let docCatInfo = null;\n                        if (post.categories && post.categories.length > 0) {\n                            for (let i = 0; i < post.categories.length; i++) {\n                                const catId = post.categories[i];\n                                if (wpCatMap[catId]) {\n                                    docCatInfo = wpCatMap[catId];\n                                    break;\n                                }\n                            }\n                        }\n\n                        let tagName = '';\n                        if (post.tags && post.tags.length > 0) {\n                            tagName = tagNameMap[post.tags[0]] || '';\n                        }\n\n                        if (docCatInfo) {\n                            docs.push({\n                                id: post.id,\n                                title: plainTitle,\n                                category: docCatInfo.catName,\n                                catSlug: docCatInfo.catSlug,\n                                department: docCatInfo.deptName,\n                                deptId: docCatInfo.deptId,\n                                links: fileLinks,\n                                groupHeading: tagName\n                            });\n                        }\n                    });\n                    return docs;\n                }\n\n                async function preloadRemainingPosts(catIds, wpCatMap, tagNameMap, totalPages, startPage = 2) {\n                    for (let page = startPage; page <= totalPages; page++) {\n                        const { posts } = await fetchPostsPage(catIds, page, 100);\n                        if (!posts || posts.length === 0) continue;\n\n                        const missingTagIds = [...new Set(posts.flatMap(p => p.tags || []))].filter(t => !tagNameMap[t]);\n                        if (missingTagIds.length > 0) {\n                            const extraTags = await fetchTagNamesByIds(missingTagIds);\n                            Object.assign(tagNameMap, extraTags);\n                        }\n\n                        const extraDocs = mapPostsToDocuments(posts, wpCatMap, tagNameMap);\n                        if (extraDocs.length > 0) {\n                            allDocuments = allDocuments.concat(extraDocs);\n                            renderDocuments();\n                        }\n\n                        await new Promise(r => setTimeout(r, 80));\n                    }\n                }\n\n                async function fetchWordPressData() {\n                    initSidebarHTML();\n                    const listContainer = document.getElementById('doc-list-container');\n\n                    try {\n                        \/\/ ---- [\u0e41\u0e01\u0e49\u0e44\u0e02 1] \u0e14\u0e36\u0e07\u0e40\u0e09\u0e1e\u0e32\u0e30 fields \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e08\u0e32\u0e01 categories ----\n                        const catUrl = buildSafeUrl(API_URLS.categories, {\n                            per_page: 100,\n                            _fields: CAT_FIELDS\n                        });\n                        const catResponse = await fetch(catUrl);\n\n                        if (!catResponse.ok) throw new Error();\n\n                        const wpCats = await catResponse.json();\n                        let targetCatIds = [];\n                        let wpCatMap = {};\n\n                        wpCats.forEach(wpCat => {\n                            DEPARTMENTS.forEach(dept => {\n                                if (dept.categories) {\n                                    dept.categories.forEach(ourCat => {\n                                        if (ourCat.name.trim() === wpCat.name.trim() || ourCat.slug === wpCat.slug) {\n                                            targetCatIds.push(wpCat.id);\n                                            wpCatMap[wpCat.id] = {\n                                                catName: ourCat.name,\n                                                catSlug: ourCat.slug,\n                                                deptName: dept.name,\n                                                deptId: dept.id\n                                            };\n                                        }\n                                    });\n                                }\n                            });\n                        });\n\n                        if (targetCatIds.length === 0) {\n                            listContainer.innerHTML = `<div class=\"p-10 text-center text-gray-500\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e41\u0e15\u0e48\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48\u0e0a\u0e37\u0e48\u0e2d\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a\u0e23\u0e30\u0e1a\u0e1a<\/div>`;\n                            return;\n                        }\n\n                        \/\/ ---- [\u0e41\u0e01\u0e49\u0e44\u0e02 3] \u0e14\u0e36\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\u0e01\u0e48\u0e2d\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e19\u0e17\u0e35 ----\n                        const firstResult = await fetchPostsPage(targetCatIds, 1, itemsPerPage * 2);\n                        allDocuments = [];\n\n                        const initialTagIds = [...new Set(firstResult.posts.flatMap(p => p.tags || []))];\n                        const tagNameMap = await fetchTagNamesByIds(initialTagIds);\n\n                        allDocuments = mapPostsToDocuments(firstResult.posts, wpCatMap, tagNameMap);\n\n                        \/\/ render \u0e41\u0e1a\u0e1a\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e17\u0e31\u0e19\u0e17\u0e35\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01\n                        updateSidebarUI();\n                        renderDocuments();\n\n                        \/\/ preload \u0e2b\u0e19\u0e49\u0e32\u0e16\u0e31\u0e14\u0e44\u0e1b\u0e0a\u0e48\u0e27\u0e07\u0e2b\u0e25\u0e31\u0e07 (\u0e44\u0e21\u0e48\u0e02\u0e31\u0e14 UI)\n                        if (firstResult.totalPages > 1) {\n                            preloadRemainingPosts(targetCatIds, wpCatMap, tagNameMap, firstResult.totalPages, 2).catch(() => {});\n                        }\n\n                    } catch (error) {\n                        listContainer.innerHTML = `<div class=\"p-8 m-4 bg-red-50 border border-red-200 rounded-2xl text-center\"><p class=\"text-red-600\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e23\u0e35\u0e40\u0e1f\u0e23\u0e0a\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/p><\/div>`;\n                        updateSidebarUI();\n                        if (window.lucide) lucide.createIcons();\n                    }\n                }\n\n                function renderPagination(totalItems, totalPages) {\n                    const container = document.getElementById('doc-pagination-container');\n\n                    if (totalItems <= itemsPerPage) {\n                        container.classList.add('hidden');\n                        return;\n                    }\n\n                    container.classList.remove('hidden');\n                    container.classList.add('flex');\n\n                    const startIndex = ((currentPage - 1) * itemsPerPage) + 1;\n                    const endIndex = Math.min(currentPage * itemsPerPage, totalItems);\n\n                    let html = `\n          <div class=\"flex flex-col sm:flex-row items-center justify-between w-full gap-4\">\n              <div class=\"text-sm text-gray-500\">\n                  \u0e41\u0e2a\u0e14\u0e07 <span class=\"font-bold text-gray-700\">${startIndex}<\/span> \u0e16\u0e36\u0e07 <span class=\"font-bold text-gray-700\">${endIndex}<\/span> \u0e08\u0e32\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 <span class=\"font-bold text-gray-700\">${totalItems}<\/span> \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\n              <\/div>\n              <div class=\"flex gap-1\">\n          `;\n\n                    html += `\n              <button onclick=\"window.goToPage(${currentPage - 1})\" ${currentPage === 1 ? 'disabled' : ''} class=\"px-3 py-1.5 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors bg-white shadow-sm\">\n                  <i data-lucide=\"chevron-left\" class=\"w-4 h-4\"><\/i>\n              <\/button>\n          `;\n\n                    let startPage = Math.max(1, currentPage - 2);\n                    let endPage = Math.min(totalPages, currentPage + 2);\n                    if (endPage - startPage < 4) {\n                        if (startPage === 1) endPage = Math.min(totalPages, 5);\n                        else if (endPage === totalPages) startPage = Math.max(1, totalPages - 4);\n                    }\n\n                    if (startPage > 1) {\n                        html += `<button onclick=\"window.goToPage(1)\" class=\"px-3 py-1.5 rounded-lg border border-gray-300 bg-white text-gray-600 hover:bg-gray-100 transition-colors shadow-sm\">1<\/button>`;\n                        if (startPage > 2) html += `<span class=\"px-2 py-1.5 text-gray-400\">...<\/span>`;\n                    }\n\n                    for (let i = startPage; i <= endPage; i++) {\n                        if (i === currentPage) {\n                            html += `<button class=\"px-3 py-1.5 rounded-lg bg-brand-blue text-white font-bold border border-brand-blue shadow-sm\">${i}<\/button>`;\n                        } else {\n                            html += `<button onclick=\"window.goToPage(${i})\" class=\"px-3 py-1.5 rounded-lg border border-gray-300 bg-white text-gray-600 hover:bg-gray-100 transition-colors shadow-sm\">${i}<\/button>`;\n                        }\n                    }\n\n                    if (endPage < totalPages) {\n                        if (endPage < totalPages - 1) html += `<span class=\"px-2 py-1.5 text-gray-400\">...<\/span>`;\n                        html += `<button onclick=\"window.goToPage(${totalPages})\" class=\"px-3 py-1.5 rounded-lg border border-gray-300 bg-white text-gray-600 hover:bg-gray-100 transition-colors shadow-sm\">${totalPages}<\/button>`;\n                    }\n\n                    html += `\n              <button onclick=\"window.goToPage(${currentPage + 1})\" ${currentPage === totalPages ? 'disabled' : ''} class=\"px-3 py-1.5 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors bg-white shadow-sm\">\n                  <i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i>\n              <\/button>\n          <\/div><\/div>`;\n                    container.innerHTML = html;\n                }\n\n                function renderDocuments() {\n                    const listContainer = document.getElementById('doc-list-container');\n                    const paginationContainer = document.getElementById('doc-pagination-container');\n\n                    const filtered = allDocuments.filter(doc => {\n                        const matchSearch = doc.title.toLowerCase().includes(docSearchTerm) || (doc.groupHeading && doc.groupHeading.toLowerCase().includes(docSearchTerm));\n                        const matchDept = (currentDeptId === \"all\") || (doc.deptId === currentDeptId);\n                        const matchWork = (currentWorkSlug === \"all\") || (doc.catSlug === currentWorkSlug);\n                        return matchSearch && matchDept && matchWork;\n                    });\n\n                    filtered.sort((a, b) => {\n                        let deptCompare = a.department.localeCompare(b.department, 'th');\n                        if (deptCompare !== 0) return deptCompare;\n                        \n                        let catCompare = a.category.localeCompare(b.category, 'th');\n                        if (catCompare !== 0) return catCompare;\n\n                        let hasGroupA = a.groupHeading ? 0 : 1;\n                        let hasGroupB = b.groupHeading ? 0 : 1;\n                        if (hasGroupA !== hasGroupB) return hasGroupA - hasGroupB;\n\n                        if (a.groupHeading && b.groupHeading) {\n                            let groupCompare = a.groupHeading.localeCompare(b.groupHeading, 'th');\n                            if (groupCompare !== 0) return groupCompare;\n                        }\n\n                        return a.title.localeCompare(b.title, 'th');\n                    });\n\n                    const uniqueCategories = [...new Set(filtered.map(d => d.category))];\n\n                    if (filtered.length === 0) {\n                        listContainer.innerHTML = `\n            <div class=\"flex flex-col items-center justify-center h-full p-16 text-center text-gray-400\">\n              <div class=\"bg-gray-50 p-4 rounded-full mb-4\">\n                <i data-lucide=\"file-question\" class=\"w-10 h-10 text-gray-300\"><\/i>\n              <\/div>\n              <p class=\"text-lg text-gray-500 font-medium\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02<\/p>\n              <button onclick=\"document.getElementById('filter-search').value=''; window.toggleDept('all');\" class=\"mt-4 text-brand-blue text-sm hover:underline transition-all duration-300\">\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\n            <\/div>`;\n                        paginationContainer.classList.add('hidden');\n                        paginationContainer.classList.remove('flex');\n                        if (window.lucide) lucide.createIcons();\n                        return;\n                    }\n\n                    const totalItems = filtered.length;\n                    const totalPages = Math.ceil(totalItems \/ itemsPerPage);\n                    if (currentPage > totalPages) currentPage = totalPages || 1;\n\n                    const startIndex = (currentPage - 1) * itemsPerPage;\n                    const paginatedDocs = filtered.slice(startIndex, startIndex + itemsPerPage);\n\n                    let htmlList = '';\n                    let currentCategoryDisplay = '';\n                    let currentGroupHeading = '';\n\n                    paginatedDocs.forEach(doc => {\n\n                        if (doc.category !== currentCategoryDisplay) {\n                            const catNum = uniqueCategories.indexOf(doc.category) + 1;\n                            htmlList += `\n                            <div class=\"bg-indigo-50\/60 px-5 py-3.5 flex items-center gap-3 relative border-l-4 border-brand-blue\">\n                                <div class=\"w-8 h-8 rounded-lg bg-brand-blue text-white flex items-center justify-center font-bold text-base shadow-sm shrink-0 z-10\">\n                                    ${catNum}\n                                <\/div>\n                                <h3 class=\"text-lg md:text-xl font-bold text-gray-800 m-0 z-10\">${doc.category}<\/h3>\n                            <\/div>\n                            `;\n                            currentCategoryDisplay = doc.category;\n                            currentGroupHeading = '';\n                        }\n\n                        if (doc.groupHeading && doc.groupHeading !== currentGroupHeading) {\n                            htmlList += `\n                            <div class=\"bg-gray-50 px-5 py-3 border-y border-gray-200 mt-2 flex items-center gap-2\">\n                                <i data-lucide=\"folder-tree\" class=\"w-5 h-5 text-brand-blue\"><\/i>\n                                <h4 class=\"text-base font-bold text-gray-800 m-0 tracking-wide\">${doc.groupHeading}<\/h4>\n                            <\/div>\n                            `;\n                            currentGroupHeading = doc.groupHeading;\n                        }\n\n                        let iconsHTML = '';\n                        let downloadBtnsHTML = '';\n                        let copyBtnsHTML = '';\n                        \n                        const validLinks = doc.links.filter(l => l.url !== '#');\n\n                        if (validLinks.length === 0) {\n                            iconsHTML = getFileIconHTML({ url: '#' }, doc.title);\n                            downloadBtnsHTML = `<span class=\"inline-flex items-center justify-center flex-1 sm:flex-none gap-2 px-5 py-2.5 bg-gray-50 border border-gray-200 text-gray-400 rounded-xl text-sm font-medium\"><i data-lucide=\"info\" class=\"w-4 h-4\"><\/i> \u0e44\u0e21\u0e48\u0e21\u0e35\u0e25\u0e34\u0e07\u0e01\u0e4c<\/span>`;\n                        } else {\n                            validLinks.forEach((link, index) => {\n                                iconsHTML += `<div>${getFileIconHTML(link, doc.title)}<\/div>`;\n                                \n                                const fileTypeName = getFileTypeName(link);\n                                \n                                let btnText = '';\n                                let shortName = fileTypeName;\n\n                                if (validLinks.length > 1) {\n                                    btnText = `\u0e42\u0e2b\u0e25\u0e14 ${fileTypeName}`;\n                                    const sameTypeCount = validLinks.filter(l => getFileTypeName(l) === fileTypeName).length;\n                                    if (sameTypeCount > 1) {\n                                        const currentTypeIndex = validLinks.slice(0, index + 1).filter(l => getFileTypeName(l) === fileTypeName).length;\n                                        btnText += ` ${currentTypeIndex}`; \n                                        shortName += ` ${currentTypeIndex}`;\n                                    }\n                                } else {\n                                    btnText = `\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 ${fileTypeName}`;\n                                }\n                                \n                                downloadBtnsHTML += `<a href=\"${link.url}\" target=\"_blank\" class=\"inline-flex items-center justify-center flex-1 sm:flex-none gap-2 px-5 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-xl hover:bg-brand-blue hover:text-white hover:border-brand-blue transition-all duration-300 text-sm font-medium shadow-sm\"><i data-lucide=\"download\" class=\"w-4 h-4\"><\/i> ${btnText}<\/a>`;\n                                \n                                copyBtnsHTML += `\n                                <button type=\"button\" onclick=\"window.copyToClipboard(event, '${link.url}', this)\" class=\"shrink-0 flex items-center justify-center gap-1.5 rounded-md transition-all cursor-pointer shadow-none group\/copy hover:opacity-80 px-2.5 py-1\" style=\"background-color: #f3f4f6 !important; border: 1px solid #e5e7eb !important; outline: none !important; margin-top: 2px;\" title=\"\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c ${shortName}\">\n                                    <span class=\"text-[11px] font-medium text-gray-500 group-hover\/copy:text-brand-blue transition-colors leading-none mt-0.5\">${shortName}<\/span>\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#6b7280\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"group-hover\/copy:stroke-[#2563eb] transition-colors\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg>\n                                <\/button>\n                                `;\n                            });\n                        }\n\n                        const indentClass = doc.groupHeading ? 'pl-8 sm:pl-12 border-l-[3px] border-brand-blue\/20 ml-1' : 'pl-4 sm:pl-5';\n\n                        htmlList += `\n            <div class=\"${indentClass} pr-4 py-4 sm:pr-5 hover:bg-blue-50\/40 transition-colors duration-300 grid grid-cols-1 sm:grid-cols-12 gap-4 items-center group border-b border-gray-100 last:border-0 relative\">\n              \n              <div class=\"col-span-1 sm:col-span-8 md:col-span-8 lg:col-span-9 flex items-start sm:items-center gap-4\">\n                \n                <div class=\"shrink-0 mt-1 sm:mt-0 flex flex-wrap gap-2\">\n                  ${iconsHTML}\n                <\/div>\n                \n                <div class=\"flex-1 min-w-0\">\n                  <div class=\"flex items-start gap-2 mb-1.5 flex-wrap\">\n                      <span class=\"font-medium text-gray-800 text-base group-hover:text-brand-blue transition-colors duration-300 leading-snug\">\n                        ${doc.title}\n                      <\/span>\n                      ${copyBtnsHTML !== '' ? `\n                      <div class=\"flex flex-wrap gap-1.5 items-center mt-0.5\">\n                        ${copyBtnsHTML}\n                      <\/div>\n                      ` : ''}\n                  <\/div>\n\n                  <div class=\"flex flex-wrap gap-2\">\n                      <span class=\"inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-gray-100 text-gray-600 border border-gray-200\">\n                        ${doc.department}\n                      <\/span>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"col-span-1 sm:col-span-4 md:col-span-4 lg:col-span-3 flex flex-wrap gap-2 mt-2 sm:mt-0 sm:justify-end w-full\">\n                ${downloadBtnsHTML}\n              <\/div>\n\n            <\/div>\n            `;\n                    });\n\n                    listContainer.innerHTML = htmlList;\n\n                    renderPagination(totalItems, totalPages);\n                    if (window.lucide) lucide.createIcons();\n                }\n\n                let searchDebounceTimer;\n                document.getElementById('filter-search').addEventListener('input', (e) => {\n                    clearTimeout(searchDebounceTimer);\n                    searchDebounceTimer = setTimeout(() => {\n                        docSearchTerm = e.target.value.toLowerCase();\n                        currentPage = 1;\n                        renderDocuments();\n                    }, 250);\n                });\n\n                fetchWordPressData();\n            })();\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-13668","page","type-page","status-publish","hentry"],"acf":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkarin","author_link":"https:\/\/chetupon.ac.th\/?author=5"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/13668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13668"}],"version-history":[{"count":4,"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/13668\/revisions"}],"predecessor-version":[{"id":13674,"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/13668\/revisions\/13674"}],"wp:attachment":[{"href":"https:\/\/chetupon.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}