\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 – Internal Quick Contact Infographic<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom font for a clean, modern look *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');\n body {\n font-family: 'Noto Sans Thai', 'Inter', sans-serif;\n }\n \/* Sticky search bar appearance *\/\n .sticky-header {\n top: 0;\n z-index: 10;\n }\n \/* Hide content initially to prevent FOUC *\/\n #main-content-container {\n opacity: 0;\n transition: opacity 0.5s;\n }\n #main-content-container.ready {\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <div class=\"p-4 sm:p-8\">\n \n <header class=\"text-center mb-10\">\n <h1 class=\"text-4xl font-extrabold text-indigo-700 tracking-tight\">\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19\n <\/h1>\n <p class=\"text-lg text-gray-500 mt-2\">\n Internal Quick Contact Infographic\n <\/p>\n <p class=\"text-xs text-gray-400 mt-1\">\n \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 18 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\n <\/p>\n <\/header>\n\n \n <div class=\"max-w-3xl mx-auto mb-8 sticky-header bg-gray-50 pt-4 pb-2\">\n <div class=\"relative bg-white p-4 rounded-xl shadow-lg border-t-4 border-indigo-500\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"absolute left-3 top-1\/2 transform -translate-y-1\/2 w-5 h-5 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n <\/svg>\n <input\n type=\"text\"\n id=\"search-input\"\n placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e1c\u0e19\u0e01 \u0e2b\u0e23\u0e37\u0e2d\u0e07\u0e32\u0e19 (\u0e40\u0e0a\u0e48\u0e19 \u0e2d\u0e38\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e2b\u0e15\u0e38, IT, 105)\"\n oninput=\"handleSearch(this.value)\"\n class=\"w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-150 text-gray-700 shadow-sm outline-none\"\n \/>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-6xl mx-auto\" id=\"main-content-container\">\n \n <\/main>\n <\/div>\n\n <script>\n \/\/ --- DATA SECTION ---\n const phoneData = [\n \/\/ \u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 101, department: '\u0e07\u0e32\u0e19\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 102, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 104, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 167, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e1e\u0e31\u0e2a\u0e14\u0e38', icon: 'package', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 139, department: '\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38', icon: 'package', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 127, department: '\u0e42\u0e23\u0e07\u0e04\u0e23\u0e31\u0e27', icon: 'utensils', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 146, department: '\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30', icon: 'truck', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 145, department: '\u0e07\u0e32\u0e19\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07', icon: 'wrench', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 128, department: '\u0e07\u0e32\u0e19 IT', icon: 'settings', color: 'bg-indigo-100' },\n\n \/\/ \u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 123, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 159, department: '\u0e07\u0e32\u0e19\u0e1a\u0e31\u0e0d\u0e0a\u0e35', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 119, department: '\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 148, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e01\u0e47\u0e1a\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 164, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e1a\u0e31\u0e15\u0e23', icon: 'creditcard', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 147, department: '\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19', icon: 'shield', color: 'bg-green-100' },\n\n \/\/ \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 111, department: '\u0e07\u0e32\u0e19\u0e2d\u0e38\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e2b\u0e15\u0e38', icon: 'x', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 105, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e19\u0e2d\u0e01', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 106, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 1', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 125, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 2', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 107, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 3', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 114, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e43\u0e19', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 149, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e43\u0e19', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 109, department: '\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', icon: 'grid', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 129, department: '\u0e07\u0e32\u0e19 X-ray', icon: 'x', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 124, department: '\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e31\u0e19\u0e15\u0e01\u0e23\u0e23\u0e21', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 112, department: '\u0e07\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e25\u0e2d\u0e14', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 142, department: '\u0e01\u0e32\u0e22\u0e20\u0e32\u0e1e', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 108, department: '\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e20\u0e2a\u0e31\u0e0a\u0e01\u0e23\u0e23\u0e21', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 143, department: '\u0e04\u0e25\u0e31\u0e07\u0e40\u0e27\u0e0a\u0e20\u0e31\u0e13\u0e11\u0e4c', icon: 'package', color: 'bg-red-100' },\n\n \/\/ \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 135, department: '\u0e2a\u0e19\u0e07.\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e27\u0e0a 1', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 140, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e27\u0e0a', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 134, department: '\u0e42\u0e15\u0e4a\u0e30\u0e0b\u0e31\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 122, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e42\u0e23\u0e04\u0e40\u0e0a\u0e37\u0e49\u0e2d\u0e17\u0e32\u0e07\u0e40\u0e14\u0e34\u0e19\u0e2b\u0e32\u0e22\u0e43\u0e08', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 133, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 166, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e40\u0e1a\u0e32\u0e2b\u0e27\u0e32\u0e19', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 120, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e25\u0e38\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 163, department: '\u0e07\u0e32\u0e19\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 115, department: '\u0e07\u0e32\u0e19\u0e08\u0e48\u0e32\u0e22\u0e01\u0e25\u0e32\u0e07', icon: 'package', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 144, department: '\u0e07\u0e32\u0e19\u0e0b\u0e31\u0e01\u0e1f\u0e2d\u0e01', icon: 'package', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 155, department: '\u0e07\u0e32\u0e19\u0e1a\u0e33\u0e1a\u0e31\u0e14\u0e41\u0e25\u0e30\u0e22\u0e32\u0e40\u0e2a\u0e1e\u0e15\u0e34\u0e14', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 158, department: '\u0e2a\u0e19\u0e07.\u0e41\u0e1e\u0e17\u0e22\u0e4c\u0e41\u0e1c\u0e19\u0e44\u0e17\u0e22', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 137, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e27\u0e14\u0e41\u0e1c\u0e19\u0e44\u0e17\u0e22', icon: 'stethoscope', color: 'bg-blue-100' },\n ];\n\n \/\/ Define a map for simple SVG icons (Lucide-inspired)\n const iconMap = {\n 'briefcase': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"7\" rx=\"2\" ry=\"2\"\/><path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/><\/svg>',\n 'package': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.89 1.1c-.13-.51-.83-.51-.96 0l-3 11a1 1 0 0 0 .96 1.4h6a1 1 0 0 0 .96-1.4l-3-11z\"\/><path d=\"M14 13h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h6\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"13\"\/><\/svg>',\n 'utensils': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h3a2 2 0 0 0 2-2V2\"\/><path d=\"M15 2v7c0 1.1.9 2 2 2h3a2 2 0 0 0 2-2V2\"\/><path d=\"M11 21h2\"\/><path d=\"M12 21v-7\"\/><\/svg>',\n 'truck': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"7\" height=\"10\" x=\"14\" y=\"8\" rx=\"2\"\/><path d=\"M10 21V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"\/><path d=\"M17 19h4\"\/><circle cx=\"7\" cy=\"19\" r=\"2\"\/><circle cx=\"17\" cy=\"19\" r=\"2\"\/><\/svg>',\n 'wrench': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 10.3l-2.9 2.9c-.3.3-.8.3-1.1 0l-2.9-2.9c-.3-.3-.3-.8 0-1.1l2.9-2.9c.3-.3.8-.3 1.1 0l2.9 2.9c.3.3.3.8 0 1.1z\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>',\n 'settings': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.75 1.3a2 2 0 0 0 .73 2.73l.15.08a2 2 0 0 1 1 1.74v.44a2 2 0 0 1-1 1.74l-.15.08a2 2 0 0 0-.73 2.73l.75 1.3a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 1-1.74v.18a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.75-1.3a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.44a2 2 0 0 1 1-1.74l.15-.08a2 2 0 0 0 .73-2.73l-.75-1.3a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-1-1.74V4a2 2 0 0 0-2-2z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>',\n 'dollar': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg>',\n 'creditcard': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg>',\n 'shield': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>',\n 'x': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"\/><path d=\"m6 6 12 12\"\/><\/svg>',\n 'heartpulse': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><path d=\"M3.2 14H8l1.43-1.43a2 2 0 0 1 2.86 0L14 14h4.8\"\/><\/svg>',\n 'stethoscope': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 12l2 2 4-4\"\/><path d=\"M18 18h-4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2z\"\/><path d=\"M6 10H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2\"\/><path d=\"M12 2v2\"\/><path d=\"M12 20v2\"\/><\/svg>',\n 'grid': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\/><\/svg>',\n 'users': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>',\n };\n\n \/\/ --- HELPER FUNCTIONS ---\n\n \/\/ Function to get the correct Tailwind text color class from the background color\n function getTextColorClass(bgColor) {\n return bgColor.replace('-100', '-600').replace('bg-', 'text-');\n }\n\n \/\/ Function to get the correct Tailwind border color (in hex) from the background color\n function getHexColor(bgColor) {\n const colorMap = {\n 'bg-indigo-100': '#4f46e5', \/\/ Indigo 600\n 'bg-green-100': '#10b981', \/\/ Emerald 500\n 'bg-red-100': '#ef4444', \/\/ Red 500\n 'bg-blue-100': '#3b82f6', \/\/ Blue 500\n };\n return colorMap[bgColor] || '#e5e7eb'; \/\/ Default gray\n }\n\n \/\/ Function to render an individual phone card\n function renderPhoneCard(item) {\n const nickname = item.department.includes('(')\n ? item.department.substring(item.department.indexOf('(') + 1, item.department.indexOf(')'))\n : '';\n\n return `\n <div class=\"flex items-center justify-between p-3 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md ${item.color} bg-opacity-70 backdrop-blur-sm\">\n <div class=\"flex flex-col\">\n <p class=\"text-gray-700 font-medium text-sm md:text-base\">${item.department}<\/p>\n ${nickname ? `<p class=\"text-xs text-gray-500\">${nickname}<\/p>` : ''}\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 text-gray-600 hidden sm:block\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-5.78-5.78 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <span class=\"text-xl md:text-2xl font-extrabold text-gray-800\">${item.code}<\/span>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Function to render a department group\n function renderDepartmentGroup(groupName, items, iconKey, color) {\n const baseColorClass = getTextColorClass(color);\n const hexColor = getHexColor(color);\n const iconSvg = iconMap[iconKey] || '';\n\n \/\/ Default to open (true) unless we are in a search context (optional, keeping it simple here)\n const isInitiallyOpen = true;\n\n const contentHtml = items.map(renderPhoneCard).join('');\n\n return `\n <div class=\"w-full bg-white rounded-2xl shadow-xl overflow-hidden mb-8 border-t-8\" style=\"border-color: ${hexColor}\" data-group-name=\"${groupName}\">\n \n <div\n class=\"flex items-center justify-between p-4 cursor-pointer transition-colors duration-200 ${color.replace('100', '200')} hover:${color.replace('100', '300')}\"\n onclick=\"toggleGroup(this)\"\n >\n <div class=\"flex items-center space-x-6\">\n <span class=\"w-6 h-6 ${baseColorClass}\">${iconSvg}<\/span>\n <h2 class=\"text-xl font-bold text-gray-800\">${groupName}<\/h2>\n <\/div>\n <span class=\"${baseColorClass}\" data-chevron=\"true\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 15 6-6 6 6\"\/><\/svg>\n <\/span>\n <\/div>\n\n \n <div class=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4\" data-content=\"true\" style=\"max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease-in-out;\">\n ${contentHtml}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ --- LOGIC FUNCTIONS ---\n\n \/\/ Global variable to keep track of group order\n const groupOrder = ['\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35'];\n\n \/**\n * Groups and filters the phone data based on the search term.\n * @param {string} searchTerm\n * @returns {Object} Grouped and filtered data.\n *\/\n function getFilteredAndGroupedData(searchTerm) {\n const lowerCaseSearchTerm = searchTerm.toLowerCase();\n const groupedData = {};\n\n phoneData.forEach(item => {\n const isMatch = item.department.toLowerCase().includes(lowerCaseSearchTerm) ||\n item.code.toString().includes(lowerCaseSearchTerm);\n\n if (isMatch) {\n if (!groupedData[item.group]) {\n groupedData[item.group] = {\n items: [],\n icon: item.icon,\n color: item.color,\n };\n }\n groupedData[item.group].items.push(item);\n }\n });\n\n return groupedData;\n }\n\n \/**\n * Renders the infographic content based on filtered data.\n * @param {Object} filteredGroups\n *\/\n function renderInfographic(filteredGroups) {\n const container = document.getElementById('main-content-container');\n let html = '';\n\n if (Object.keys(filteredGroups).length > 0) {\n \/\/ Render groups in the preferred order\n groupOrder.forEach(groupName => {\n const group = filteredGroups[groupName];\n if (group) {\n html += renderDepartmentGroup(groupName, group.items, group.icon, group.color);\n }\n });\n } else {\n \/\/ Render No Results message\n html = `\n <div class=\"text-center p-10 bg-white rounded-xl shadow-lg mt-10\">\n <p class=\"text-xl text-gray-600\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32...<\/p>\n <p class=\"text-sm text-gray-400 mt-2\">\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2d\u0e37\u0e48\u0e19<\/p>\n <\/div>\n `;\n }\n \n container.innerHTML = html;\n }\n\n \/**\n * Toggles the collapse\/expand state of a department group.\n * @param {HTMLElement} headerElement The clicked group header element.\n *\/\n function toggleGroup(headerElement) {\n const groupDiv = headerElement.closest('[data-group-name]');\n const contentDiv = groupDiv.querySelector('[data-content]');\n const chevron = groupDiv.querySelector('[data-chevron] svg');\n\n \/\/ If currently open (max-height > 0)\n if (contentDiv.style.maxHeight !== '0px') {\n contentDiv.style.maxHeight = '0px';\n \/\/ Change icon to ChevronDown (closed state)\n chevron.innerHTML = '<path d=\"m6 9 6 6 6-6\"\/>';\n } else {\n \/\/ If currently closed (max-height = 0), expand it\n \/\/ Set max-height back to a large value to allow content to show\n contentDiv.style.maxHeight = '1000px';\n \/\/ Change icon to ChevronUp (open state)\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n }\n }\n\n \/**\n * Handles input from the search bar.\n * @param {string} value The current search input value.\n *\/\n function handleSearch(value) {\n const filteredGroups = getFilteredAndGroupedData(value);\n renderInfographic(filteredGroups);\n\n \/\/ In search context, if only one group remains, expand all content\n const contentContainers = document.querySelectorAll('[data-content]');\n const isSearching = value.trim() !== '';\n\n contentContainers.forEach(div => {\n const chevron = div.closest('[data-group-name]').querySelector('[data-chevron] svg');\n \n \/\/ When searching, force groups open\n if (isSearching) {\n div.style.maxHeight = '1000px';\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n } else {\n \/\/ When not searching, use default (open)\n div.style.maxHeight = '1000px';\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n }\n });\n }\n\n \/\/ --- INITIALIZATION ---\n window.onload = function() {\n \/\/ Initial render without search term\n const initialGroups = getFilteredAndGroupedData('');\n renderInfographic(initialGroups);\n \n \/\/ Fade in content after rendering\n document.getElementById('main-content-container').classList.add('ready');\n };\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 &<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"class_list":["post-92","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c","author_link":"https:\/\/dmdhospital.go.th\/?author=1"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 &","_links":{"self":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":12,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions\/577"}],"wp:attachment":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":92,"date":"2025-11-22T04:07:20","date_gmt":"2025-11-22T04:07:20","guid":{"rendered":"https:\/\/dmdhospital.go.th\/?page_id=92"},"modified":"2025-11-27T03:54:25","modified_gmt":"2025-11-27T03:54:25","slug":"%e0%b9%80%e0%b8%9a%e0%b8%ad%e0%b8%a3%e0%b9%8c%e0%b9%82%e0%b8%97%e0%b8%a3%e0%b8%a8%e0%b8%b1%e0%b8%9e%e0%b8%97%e0%b9%8c%e0%b8%a0%e0%b8%b2%e0%b8%a2%e0%b9%83%e0%b8%99","status":"publish","type":"page","link":"https:\/\/dmdhospital.go.th\/?page_id=92","title":{"rendered":"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19"},"content":{"rendered":"\n\n\n\n \n \n \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 – Internal Quick Contact Infographic<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom font for a clean, modern look *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');\n body {\n font-family: 'Noto Sans Thai', 'Inter', sans-serif;\n }\n \/* Sticky search bar appearance *\/\n .sticky-header {\n top: 0;\n z-index: 10;\n }\n \/* Hide content initially to prevent FOUC *\/\n #main-content-container {\n opacity: 0;\n transition: opacity 0.5s;\n }\n #main-content-container.ready {\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <div class=\"p-4 sm:p-8\">\n \n <header class=\"text-center mb-10\">\n <h1 class=\"text-4xl font-extrabold text-indigo-700 tracking-tight\">\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19\n <\/h1>\n <p class=\"text-lg text-gray-500 mt-2\">\n Internal Quick Contact Infographic\n <\/p>\n <p class=\"text-xs text-gray-400 mt-1\">\n \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e13 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 18 \u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19 2568\n <\/p>\n <\/header>\n\n \n <div class=\"max-w-3xl mx-auto mb-8 sticky-header bg-gray-50 pt-4 pb-2\">\n <div class=\"relative bg-white p-4 rounded-xl shadow-lg border-t-4 border-indigo-500\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"absolute left-3 top-1\/2 transform -translate-y-1\/2 w-5 h-5 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n <\/svg>\n <input\n type=\"text\"\n id=\"search-input\"\n placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e1c\u0e19\u0e01 \u0e2b\u0e23\u0e37\u0e2d\u0e07\u0e32\u0e19 (\u0e40\u0e0a\u0e48\u0e19 \u0e2d\u0e38\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e2b\u0e15\u0e38, IT, 105)\"\n oninput=\"handleSearch(this.value)\"\n class=\"w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-150 text-gray-700 shadow-sm outline-none\"\n \/>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-6xl mx-auto\" id=\"main-content-container\">\n \n <\/main>\n <\/div>\n\n <script>\n \/\/ --- DATA SECTION ---\n const phoneData = [\n \/\/ \u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 101, department: '\u0e07\u0e32\u0e19\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 102, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 104, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23', icon: 'briefcase', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 167, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e1e\u0e31\u0e2a\u0e14\u0e38', icon: 'package', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 139, department: '\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38', icon: 'package', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 127, department: '\u0e42\u0e23\u0e07\u0e04\u0e23\u0e31\u0e27', icon: 'utensils', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 146, department: '\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30', icon: 'truck', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 145, department: '\u0e07\u0e32\u0e19\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07', icon: 'wrench', color: 'bg-indigo-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', code: 128, department: '\u0e07\u0e32\u0e19 IT', icon: 'settings', color: 'bg-indigo-100' },\n\n \/\/ \u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 123, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 159, department: '\u0e07\u0e32\u0e19\u0e1a\u0e31\u0e0d\u0e0a\u0e35', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 119, department: '\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 148, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e01\u0e47\u0e1a\u0e40\u0e07\u0e34\u0e19', icon: 'dollar', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 164, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e1a\u0e31\u0e15\u0e23', icon: 'creditcard', color: 'bg-green-100' },\n { group: '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35', code: 147, department: '\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19', icon: 'shield', color: 'bg-green-100' },\n\n \/\/ \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 111, department: '\u0e07\u0e32\u0e19\u0e2d\u0e38\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e2b\u0e15\u0e38', icon: 'x', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 105, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e19\u0e2d\u0e01', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 106, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 1', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 125, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 2', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 107, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e15\u0e23\u0e27\u0e08\u0e42\u0e23\u0e04 3', icon: 'stethoscope', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 114, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e43\u0e19', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 149, department: '\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e43\u0e19', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 109, department: '\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', icon: 'grid', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 129, department: '\u0e07\u0e32\u0e19 X-ray', icon: 'x', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 124, department: '\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e31\u0e19\u0e15\u0e01\u0e23\u0e23\u0e21', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 112, department: '\u0e07\u0e32\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e25\u0e2d\u0e14', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 142, department: '\u0e01\u0e32\u0e22\u0e20\u0e32\u0e1e', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 108, department: '\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e20\u0e2a\u0e31\u0e0a\u0e01\u0e23\u0e23\u0e21', icon: 'heartpulse', color: 'bg-red-100' },\n { group: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', code: 143, department: '\u0e04\u0e25\u0e31\u0e07\u0e40\u0e27\u0e0a\u0e20\u0e31\u0e13\u0e11\u0e4c', icon: 'package', color: 'bg-red-100' },\n\n \/\/ \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 135, department: '\u0e2a\u0e19\u0e07.\u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e27\u0e0a 1', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 140, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32 \u0e01\u0e25\u0e38\u0e48\u0e21\u0e07\u0e32\u0e19\u0e40\u0e27\u0e0a', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 134, department: '\u0e42\u0e15\u0e4a\u0e30\u0e0b\u0e31\u0e01\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 122, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e42\u0e23\u0e04\u0e40\u0e0a\u0e37\u0e49\u0e2d\u0e17\u0e32\u0e07\u0e40\u0e14\u0e34\u0e19\u0e2b\u0e32\u0e22\u0e43\u0e08', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 133, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 166, department: '\u0e04\u0e25\u0e34\u0e19\u0e34\u0e01\u0e40\u0e1a\u0e32\u0e2b\u0e27\u0e32\u0e19', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 120, department: '\u0e2b\u0e31\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e25\u0e38\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 163, department: '\u0e07\u0e32\u0e19\u0e18\u0e38\u0e23\u0e01\u0e32\u0e23\/\u0e01\u0e25\u0e38\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', icon: 'users', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 115, department: '\u0e07\u0e32\u0e19\u0e08\u0e48\u0e32\u0e22\u0e01\u0e25\u0e32\u0e07', icon: 'package', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 144, department: '\u0e07\u0e32\u0e19\u0e0b\u0e31\u0e01\u0e1f\u0e2d\u0e01', icon: 'package', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 155, department: '\u0e07\u0e32\u0e19\u0e1a\u0e33\u0e1a\u0e31\u0e14\u0e41\u0e25\u0e30\u0e22\u0e32\u0e40\u0e2a\u0e1e\u0e15\u0e34\u0e14', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 158, department: '\u0e2a\u0e19\u0e07.\u0e41\u0e1e\u0e17\u0e22\u0e4c\u0e41\u0e1c\u0e19\u0e44\u0e17\u0e22', icon: 'stethoscope', color: 'bg-blue-100' },\n { group: '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', code: 137, department: '\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e27\u0e14\u0e41\u0e1c\u0e19\u0e44\u0e17\u0e22', icon: 'stethoscope', color: 'bg-blue-100' },\n ];\n\n \/\/ Define a map for simple SVG icons (Lucide-inspired)\n const iconMap = {\n 'briefcase': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"7\" rx=\"2\" ry=\"2\"\/><path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/><\/svg>',\n 'package': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.89 1.1c-.13-.51-.83-.51-.96 0l-3 11a1 1 0 0 0 .96 1.4h6a1 1 0 0 0 .96-1.4l-3-11z\"\/><path d=\"M14 13h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h6\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"13\"\/><\/svg>',\n 'utensils': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h3a2 2 0 0 0 2-2V2\"\/><path d=\"M15 2v7c0 1.1.9 2 2 2h3a2 2 0 0 0 2-2V2\"\/><path d=\"M11 21h2\"\/><path d=\"M12 21v-7\"\/><\/svg>',\n 'truck': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"7\" height=\"10\" x=\"14\" y=\"8\" rx=\"2\"\/><path d=\"M10 21V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"\/><path d=\"M17 19h4\"\/><circle cx=\"7\" cy=\"19\" r=\"2\"\/><circle cx=\"17\" cy=\"19\" r=\"2\"\/><\/svg>',\n 'wrench': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 10.3l-2.9 2.9c-.3.3-.8.3-1.1 0l-2.9-2.9c-.3-.3-.3-.8 0-1.1l2.9-2.9c.3-.3.8-.3 1.1 0l2.9 2.9c.3.3.3.8 0 1.1z\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>',\n 'settings': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.75 1.3a2 2 0 0 0 .73 2.73l.15.08a2 2 0 0 1 1 1.74v.44a2 2 0 0 1-1 1.74l-.15.08a2 2 0 0 0-.73 2.73l.75 1.3a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 1-1.74v.18a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.75-1.3a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.44a2 2 0 0 1 1-1.74l.15-.08a2 2 0 0 0 .73-2.73l-.75-1.3a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-1-1.74V4a2 2 0 0 0-2-2z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>',\n 'dollar': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg>',\n 'creditcard': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg>',\n 'shield': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>',\n 'x': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"\/><path d=\"m6 6 12 12\"\/><\/svg>',\n 'heartpulse': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><path d=\"M3.2 14H8l1.43-1.43a2 2 0 0 1 2.86 0L14 14h4.8\"\/><\/svg>',\n 'stethoscope': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 12l2 2 4-4\"\/><path d=\"M18 18h-4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2z\"\/><path d=\"M6 10H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2\"\/><path d=\"M12 2v2\"\/><path d=\"M12 20v2\"\/><\/svg>',\n 'grid': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\/><\/svg>',\n 'users': '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>',\n };\n\n \/\/ --- HELPER FUNCTIONS ---\n\n \/\/ Function to get the correct Tailwind text color class from the background color\n function getTextColorClass(bgColor) {\n return bgColor.replace('-100', '-600').replace('bg-', 'text-');\n }\n\n \/\/ Function to get the correct Tailwind border color (in hex) from the background color\n function getHexColor(bgColor) {\n const colorMap = {\n 'bg-indigo-100': '#4f46e5', \/\/ Indigo 600\n 'bg-green-100': '#10b981', \/\/ Emerald 500\n 'bg-red-100': '#ef4444', \/\/ Red 500\n 'bg-blue-100': '#3b82f6', \/\/ Blue 500\n };\n return colorMap[bgColor] || '#e5e7eb'; \/\/ Default gray\n }\n\n \/\/ Function to render an individual phone card\n function renderPhoneCard(item) {\n const nickname = item.department.includes('(')\n ? item.department.substring(item.department.indexOf('(') + 1, item.department.indexOf(')'))\n : '';\n\n return `\n <div class=\"flex items-center justify-between p-3 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md ${item.color} bg-opacity-70 backdrop-blur-sm\">\n <div class=\"flex flex-col\">\n <p class=\"text-gray-700 font-medium text-sm md:text-base\">${item.department}<\/p>\n ${nickname ? `<p class=\"text-xs text-gray-500\">${nickname}<\/p>` : ''}\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 text-gray-600 hidden sm:block\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-5.78-5.78 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <span class=\"text-xl md:text-2xl font-extrabold text-gray-800\">${item.code}<\/span>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Function to render a department group\n function renderDepartmentGroup(groupName, items, iconKey, color) {\n const baseColorClass = getTextColorClass(color);\n const hexColor = getHexColor(color);\n const iconSvg = iconMap[iconKey] || '';\n\n \/\/ Default to open (true) unless we are in a search context (optional, keeping it simple here)\n const isInitiallyOpen = true;\n\n const contentHtml = items.map(renderPhoneCard).join('');\n\n return `\n <div class=\"w-full bg-white rounded-2xl shadow-xl overflow-hidden mb-8 border-t-8\" style=\"border-color: ${hexColor}\" data-group-name=\"${groupName}\">\n \n <div\n class=\"flex items-center justify-between p-4 cursor-pointer transition-colors duration-200 ${color.replace('100', '200')} hover:${color.replace('100', '300')}\"\n onclick=\"toggleGroup(this)\"\n >\n <div class=\"flex items-center space-x-6\">\n <span class=\"w-6 h-6 ${baseColorClass}\">${iconSvg}<\/span>\n <h2 class=\"text-xl font-bold text-gray-800\">${groupName}<\/h2>\n <\/div>\n <span class=\"${baseColorClass}\" data-chevron=\"true\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-5 h-5\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 15 6-6 6 6\"\/><\/svg>\n <\/span>\n <\/div>\n\n \n <div class=\"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4\" data-content=\"true\" style=\"max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease-in-out;\">\n ${contentHtml}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ --- LOGIC FUNCTIONS ---\n\n \/\/ Global variable to keep track of group order\n const groupOrder = ['\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c', '\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', '\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19', '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e0d\u0e0a\u0e35'];\n\n \/**\n * Groups and filters the phone data based on the search term.\n * @param {string} searchTerm\n * @returns {Object} Grouped and filtered data.\n *\/\n function getFilteredAndGroupedData(searchTerm) {\n const lowerCaseSearchTerm = searchTerm.toLowerCase();\n const groupedData = {};\n\n phoneData.forEach(item => {\n const isMatch = item.department.toLowerCase().includes(lowerCaseSearchTerm) ||\n item.code.toString().includes(lowerCaseSearchTerm);\n\n if (isMatch) {\n if (!groupedData[item.group]) {\n groupedData[item.group] = {\n items: [],\n icon: item.icon,\n color: item.color,\n };\n }\n groupedData[item.group].items.push(item);\n }\n });\n\n return groupedData;\n }\n\n \/**\n * Renders the infographic content based on filtered data.\n * @param {Object} filteredGroups\n *\/\n function renderInfographic(filteredGroups) {\n const container = document.getElementById('main-content-container');\n let html = '';\n\n if (Object.keys(filteredGroups).length > 0) {\n \/\/ Render groups in the preferred order\n groupOrder.forEach(groupName => {\n const group = filteredGroups[groupName];\n if (group) {\n html += renderDepartmentGroup(groupName, group.items, group.icon, group.color);\n }\n });\n } else {\n \/\/ Render No Results message\n html = `\n <div class=\"text-center p-10 bg-white rounded-xl shadow-lg mt-10\">\n <p class=\"text-xl text-gray-600\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32...<\/p>\n <p class=\"text-sm text-gray-400 mt-2\">\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2d\u0e37\u0e48\u0e19<\/p>\n <\/div>\n `;\n }\n \n container.innerHTML = html;\n }\n\n \/**\n * Toggles the collapse\/expand state of a department group.\n * @param {HTMLElement} headerElement The clicked group header element.\n *\/\n function toggleGroup(headerElement) {\n const groupDiv = headerElement.closest('[data-group-name]');\n const contentDiv = groupDiv.querySelector('[data-content]');\n const chevron = groupDiv.querySelector('[data-chevron] svg');\n\n \/\/ If currently open (max-height > 0)\n if (contentDiv.style.maxHeight !== '0px') {\n contentDiv.style.maxHeight = '0px';\n \/\/ Change icon to ChevronDown (closed state)\n chevron.innerHTML = '<path d=\"m6 9 6 6 6-6\"\/>';\n } else {\n \/\/ If currently closed (max-height = 0), expand it\n \/\/ Set max-height back to a large value to allow content to show\n contentDiv.style.maxHeight = '1000px';\n \/\/ Change icon to ChevronUp (open state)\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n }\n }\n\n \/**\n * Handles input from the search bar.\n * @param {string} value The current search input value.\n *\/\n function handleSearch(value) {\n const filteredGroups = getFilteredAndGroupedData(value);\n renderInfographic(filteredGroups);\n\n \/\/ In search context, if only one group remains, expand all content\n const contentContainers = document.querySelectorAll('[data-content]');\n const isSearching = value.trim() !== '';\n\n contentContainers.forEach(div => {\n const chevron = div.closest('[data-group-name]').querySelector('[data-chevron] svg');\n \n \/\/ When searching, force groups open\n if (isSearching) {\n div.style.maxHeight = '1000px';\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n } else {\n \/\/ When not searching, use default (open)\n div.style.maxHeight = '1000px';\n chevron.innerHTML = '<path d=\"m6 15 6-6 6 6\"\/>';\n }\n });\n }\n\n \/\/ --- INITIALIZATION ---\n window.onload = function() {\n \/\/ Initial render without search term\n const initialGroups = getFilteredAndGroupedData('');\n renderInfographic(initialGroups);\n \n \/\/ Fade in content after rendering\n document.getElementById('main-content-container').classList.add('ready');\n };\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 &<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"class_list":["post-92","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"\u0e19\u0e31\u0e01\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c","author_link":"https:\/\/dmdhospital.go.th\/?author=1"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e20\u0e32\u0e22\u0e43\u0e19 &","_links":{"self":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":12,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions\/577"}],"wp:attachment":[{"href":"https:\/\/dmdhospital.go.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}