{"id":94,"date":"2024-07-25T20:41:57","date_gmt":"2024-07-25T13:41:57","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=94"},"modified":"2026-03-24T16:04:33","modified_gmt":"2026-03-24T09:04:33","slug":"%e0%b8%9a%e0%b8%a3%e0%b8%b4%e0%b8%ab%e0%b8%b2%e0%b8%a3%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%87%e0%b8%9a%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%a1%e0%b8%b2%e0%b8%93","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=94","title":{"rendered":"\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13"},"content":{"rendered":"\n<script>\n        \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\n\t\t\/\/ Add these lines at the end of style section\n        const additionalStyles = `\n\t\t\t.loading {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 350px;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tbackground: rgba(0, 0, 139, 0.9); \/* \u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e40\u0e02\u0e49\u0e21 *\/\n\t\t\t\tcolor: #ffffff; \/* \u0e2a\u0e35\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e02\u0e32\u0e27 *\/\n\t\t\t\tpadding: 20px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\t\t\tz-index: 1000;\n\t\t\t}\n\t\t\t .fa-spin {\n\t\t\t\t\tmargin-right: 8px;\n\t\t\t }\n        `;\n\n\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 element style \u0e43\u0e2b\u0e21\u0e48\n\t\tconst styleElement = document.createElement('style');\n\n\t\t\/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14 CSS \u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23 additionalStyles \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a styleElement\n\t\tstyleElement.textContent = additionalStyles;\n\n\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 styleElement \u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 <head> \u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\n\t\tdocument.head.appendChild(styleElement);\n\t\t\n        \/\/ Show loading indicator\n        function showLoading(show = true) {\n            const loadingDiv = document.createElement('div');\n            loadingDiv.id = 'loadingIndicator';\n            loadingDiv.className = 'loading';\n            loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i>  \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n            \n            if (show) {\n                document.body.appendChild(loadingDiv);\n            } else {\n                const existingLoader = document.getElementById('loadingIndicator');\n                if (existingLoader) {\n                    existingLoader.remove();\n                }\n            }\n        }\n        \n        \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\n        function delay(ms) {\n            return new Promise(resolve => setTimeout(resolve, ms));\n        }\n        \t\t\n\t\tshowLoading(true);\t\n                delay(1000);\t\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13<\/strong>\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e32\u0e01\u0e23\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e42\u0e14\u0e22\u0e21\u0e35\u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1b\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e40\u0e01\u0e34\u0e14\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e07\u0e32\u0e19\u0e19\u0e35\u0e49\u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e17\u0e33\u0e41\u0e1c\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e41\u0e25\u0e30\u0e04\u0e33\u0e02\u0e2d\u0e15\u0e31\u0e49\u0e07\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e2a\u0e19\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07 \u0e40\u0e0a\u0e48\u0e19 \u0e40\u0e25\u0e02\u0e32\u0e18\u0e34\u0e01\u0e32\u0e23\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e31\u0e49\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e21\u0e35\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e17\u0e33\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e40\u0e0a\u0e48\u0e19 \u0e41\u0e1c\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1b\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e32\u0e1a\u0e23\u0e37\u0e48\u0e19\u0e41\u0e25\u0e30\u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e \u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e01\u0e47\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e17\u0e35\u0e48\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e15\u0e23\u0e07\u0e40\u0e27\u0e25\u0e32 \u0e42\u0e14\u0e22\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e31\u0e14\u0e17\u0e33\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e16\u0e36\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e40\u0e02\u0e15\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e20\u0e32\u0e22\u0e43\u0e19\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e08\u0e36\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e25\u0e44\u0e01\u0e17\u0e35\u0e48\u0e0a\u0e48\u0e27\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e04\u0e25\u0e48\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e41\u0e25\u0e30\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1c\u0e25\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19.<\/p>\n\n\n\n<script>\n        const group = [\n            ['1', '\u0e07\u0e32\u0e19\u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22'],\n            ['2', '\u0e1e\u0e31\u0e2a\u0e14\u0e38'],\n            ['3', '\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19'],\n            ['4', '\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 - \u0e07\u0e32\u0e19\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13']\n        ];\n        const icon_link = [\n['1','1pitgjnIgPFXP2JfBMTMz1jTApTnXnmHj','https:\/\/drive.google.com\/file\/d\/1pqPD_et9XSnzg7nckiNOWr29UHJPav_L\/view?usp=drive_link','\u0e41\u0e1c\u0e19\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e232569'],\n['1','1Ttae3j0IXQ4OFjItKDmnQRsOJmqpga4S','https:\/\/drive.google.com\/file\/d\/1iT5GlfSDFBVRl3xVzI_F6SZdqAIHI5Ge\/view','\u0e41\u0e1c\u0e19\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e232568'],\n['1','19_OhQvM6SQQe23OZLk3WvbzXbPLnlaNW','https:\/\/drive.google.com\/file\/d\/10xS57AoVgbTgGJxC2-PyXtq7rr3GH4SU\/view','\u0e41\u0e1c\u0e19\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e322568'],\n['1','1F0e8t1z9ct4Tha2mgeRpDU1IwDO1kopT','https:\/\/drive.google.com\/file\/d\/1CBAsHn1s71ZJAJkttjdqvkimhf1jcpSl\/view','\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e04\u0e27\u0e32\u0e21\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e322568'],\n\n['1','1e8AnJIXLXoCUHaR-bDcGZl1i73BZDvmy','https:\/\/drive.google.com\/drive\/folders\/1CVQbLHY1aO7xEitGct_E-ik4Qo-FqVu3?usp=drive_link','\u0e41\u0e1c\u0e19\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e232567'],\n['1','1JAB7yNQAs92kmjMWAzZCYfA4ydypfAHH','https:\/\/drive.google.com\/file\/d\/1tQhGHX3xjrnSszZ1q5wgJazSwMMUUNJA\/view?usp=sharing','\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e012567-2571'],\n\n['2','1Sc3YnuA1yJpRb96DqMxeieWuikcZx1pc','https:\/\/drive.google.com\/file\/d\/18tvijhr5eZqrjqULHNjKeJHFxmII4A4G\/view?usp=sharing','\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d\u0e19\u0e49\u0e33\u0e21\u0e31\u0e19\u0e40\u0e0a\u0e37\u0e49\u0e2d\u0e40\u0e1e\u0e25\u0e34\u0e07'],\n\n['4','1Xn5EXuwcdusXK8iLb2ifaqOpp6fPfgLt','https:\/\/docs.google.com\/spreadsheets\/d\/1wfXnl7WtbOKzNTpqWK6cxEdK-l8EpmjgTu0HrBKROxA\/edit?usp=sharing','\u0e41\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e07\u0e32\u0e19\u0e1e\u0e31\u0e2a\u0e14\u0e38 \u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e132568'],\n['4','1bTuoQeWOjrdNPXZ91-045V_X-HY-ZCQ_','https:\/\/drive.google.com\/drive\/u\/1\/folders\/1i3dif6mKAGOAJfA28rfaV2QRrxuiHve1','\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e02\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e15\u0e32\u0e21\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23'],\n['4','1Bxul8DHr1SiST1nuQpFoIzwA9UaBsl5N','https:\/\/drive.google.com\/drive\/u\/1\/folders\/1i3dif6mKAGOAJfA28rfaV2QRrxuiHve1','\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e02\u0e2d\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\u0e15\u0e32\u0e21\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23']\n        ];\n<\/script>\n\n\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Icon Gallery Grouped<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Kanit', sans-serif;\n            background-color: #f0f0f0;\n            margin: 0;\n            padding: 0px;\n        }\n        .container {\n            width: 96%;\n            \/\/max-width: 1200px;\n            margin: 0 auto;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            padding: 20px;\n        }\n        .group-title {\n            font-size: 16px;\n            font-weight: bold;\n            margin-top: 1px;\n            margin-bottom: 15px;\n            color: #333;\n            border-bottom: 3px solid #3498db;\n            padding-bottom: 5px;\n            \n            \/\/background-color: #3498db;\n        }\n        .icon-gallery {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n        .icon-item {\n            background-color: white;\n            text-align: center;\n            height: 140px;\n            position: relative;\n            overflow: hidden;\n            border-radius: 5px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        .icon-item:hover {\n            \/\/transform: translateY(-5px);\n            transform: scale(1.05);\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);\n        }\n        .icon-item img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            cursor: pointer;\n        }\n        .icon-item .icon-name {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background-color: rgba(0, 0, 0, 0.7);\n            color: white;\n            font-size: 15px;\n            \/\/font-weight: bold;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 45px;\n            padding: 0 5px;\n            text-align: center;\n            cursor: pointer; \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e04\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c\u0e41\u0e1a\u0e1a\u0e04\u0e25\u0e34\u0e01\u0e44\u0e14\u0e49 *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\" id=\"mainContainer\"><\/div>\n\n    <script>\n        const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n\/*\n        const group = [\n            ['1', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 1 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e211'],\n            ['2', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 2 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e212'],\n            ['3', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 3 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e213'],\n            ['4', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 4 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e214'],\n            ['5', '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48 5 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e25\u0e38\u0e48\u0e215']\n        ];\n        const icon_link = [\n            ['1','1q1Ab1G2SsSfCak77Acbk8TU0ovTVPPk1','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['1','1qUjHFwtxTFd69JjG1aLfGRghKYOqAolC','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 2\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['1','1qRpTohsN3tTF0EXmSmB_cc78uZsNoGQ_','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 3\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1q09Dp3yiYAxnRrN9nh85ar23toBNXku9','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 4\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1pH56ab52Jl1Dzk6MR1-3ZAEXvw8FYjb3','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 5\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 1'],\n            ['2','1p8lBcGNPGIpPCd23MOYbxRNQtIr_ExTQ','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 6'],\n            ['3','1oqoiGoe6fpcyetZCr_4NUqiJsYMfIANS','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 7'],\n            ['3','1ok8RQ5DWivQMw5O-nrei-wiQvxufa2il','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 8'],\n            ['5','1ohOaplIzVHm_VdEDwFmiC-09bt2jyhyN','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 9'],\n            ['5','1ob0Ln-KqkNKr4PllDQS9vihE4OQjIKHp','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 10'],\n            ['5','1oX5JJV9YE46A3v63B7h05sX1rAEmrX4I','#','\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 11']\n        ];\n*\/\n\n        function displayGroupedIcons() {\n            const container = document.getElementById('mainContainer');\n            container.innerHTML = '';\n\n\t\t\tgroup.forEach(groupItem => {\n                const [groupId, groupTitle] = groupItem;\n                \n                const groupTitleElement = document.createElement('h2');\n                groupTitleElement.className = 'group-title';\n                groupTitleElement.textContent = groupTitle;\n                container.appendChild(groupTitleElement);\n\n                const galleryElement = document.createElement('div');\n                galleryElement.className = 'icon-gallery';\n                container.appendChild(galleryElement);\n\n                const groupIcons = icon_link.filter(icon => icon[0] === groupId);\n                \n\t\t\t\t\/*\n                groupIcons.forEach(icon => {\n                    const [, imageId, link, label] = icon;\n                    const iconElement = document.createElement('div');\n                    iconElement.className = 'icon-item';\n                    \n                    const img = document.createElement('img');\n                    img.src = `https:\/\/drive.google.com\/thumbnail?id=${imageId}&sz=w220-h110`;\n                    img.alt = `Icon ${label}`;\n                    img.title = `Icon ${label}`;\n                    \n                    img.onclick = () => window.open(link, '_blank');\n                    \n                    iconElement.appendChild(img);\n\n                    const nameElement = document.createElement('div');\n                    nameElement.className = 'icon-name';\n                    nameElement.textContent = label;\n                    iconElement.appendChild(nameElement);\n\n                    galleryElement.appendChild(iconElement);\n                });\n\t\t\t\t*\/\n\t\t\t\tgroupIcons.forEach(icon => {\n\t\t\t\t\tconst [, imageId, link, label] = icon;\n\t\t\t\t\tconst iconElement = document.createElement('div');\n\t\t\t\t\ticonElement.className = 'icon-item';\n\t\t\t\t\t\n\t\t\t\t\tconst img = document.createElement('img');\n\t\t\t\t\timg.src = `https:\/\/drive.google.com\/thumbnail?id=${imageId}&sz=w300`;\n\t\t\t\t\timg.alt = `Icon ${label}`;\n\t\t\t\t\timg.title = `Icon ${label}`;\n\t\t\t\t\t\n\t\t\t\t\tconst nameElement = document.createElement('div');\n\t\t\t\t\tnameElement.className = 'icon-name';\n\t\t\t\t\tnameElement.textContent = label;\n\t\t\t\t\t\n\t\t\t\t\t\/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e25\u0e34\u0e07\u0e04\u0e4c\n\t\t\t\t\tconst openLink = () => window.open(link, '_blank');\n\t\t\t\t\t\n\t\t\t\t\t\/\/ \u0e40\u0e1e\u0e34\u0e48\u0e21 event listener \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\n\t\t\t\t\timg.onclick = openLink;\n\t\t\t\t\tnameElement.onclick = openLink;\n\t\t\t\t\t\n\t\t\t\t\ticonElement.appendChild(img);\n\t\t\t\t\ticonElement.appendChild(nameElement);\n\n\t\t\t\t\tgalleryElement.appendChild(iconElement);\n\t\t\t\t});\n            });\n\t\t\t\n\t\t\t\n        }\n\n        \/\/ Display grouped icons when the page loads\n        window.onload = displayGroupedIcons;\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<script>\n\t\tdelay(1000);delay(1000);\n\t\tshowLoading(false);\t\t\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;&nbsp;&nbsp;&#038;n<\/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":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":20,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":7606,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions\/7606"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}