\u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01: \u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 ITA \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/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=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f8fafc; \/* Tailwind gray-50 *\/\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .kpi-score {\n font-size: 6rem;\n font-weight: 700;\n line-height: 1;\n color: #005A9C;\n }\n .flowchart-step {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #e0f2fe; \/* sky-100 *\/\n border: 2px solid #38bdf8; \/* sky-400 *\/\n border-radius: 0.5rem;\n padding: 1rem;\n text-align: center;\n font-weight: 600;\n color: #0c4a6e; \/* sky-900 *\/\n min-height: 80px;\n }\n .flowchart-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n color: #7dd3fc; \/* sky-300 *\/\n font-weight: bold;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <main class=\"container mx-auto p-4 md:p-8 max-w-7xl\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-800\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA)<\/h1>\n <h2 class=\"text-xl md:text-2xl font-semibold text-sky-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22 – \u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 \u0e1e.\u0e28. 2567<\/h2>\n <p class=\"text-gray-500 mt-1\">\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\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e22\u0e42\u0e2a\u0e18\u0e23\u0e40\u0e02\u0e15 1<\/p>\n <\/header>\n\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12\">\n <div class=\"bg-white rounded-lg shadow-md p-6 text-center\">\n <p class=\"text-xl font-semibold text-gray-600\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21<\/p>\n <p class=\"kpi-score my-4\">98.86<\/p>\n <p class=\"text-2xl font-bold text-green-600 bg-green-100 rounded-full px-4 py-2 inline-block\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19: \u0e1c\u0e48\u0e32\u0e19\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/p>\n <p class=\"mt-4 text-gray-600\">\n \u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e39\u0e07\u0e21\u0e32\u0e01\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\n <\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-center text-sky-800 mb-4\">\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2b\u0e25\u0e31\u0e01<\/h3>\n <div class=\"chart-container h-[300px] md:h-[350px]\">\n <canvas id=\"overallScoreChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-4\">\n \u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e19\u0e35\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e30\u0e41\u0e19\u0e19\u0e08\u0e32\u0e01 3 \u0e41\u0e2b\u0e25\u0e48\u0e07\u0e17\u0e35\u0e48\u0e21\u0e32\u0e2b\u0e25\u0e31\u0e01: \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT), \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT), \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30 (OIT)\n <\/p>\n <\/div>\n <\/section>\n\n <section class=\"bg-white rounded-lg shadow-md p-6 mb-12\">\n <h3 class=\"text-2xl font-bold text-center text-sky-800 mb-2\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e23\u0e32\u0e22\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\n \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e43\u0e19 10 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e2b\u0e25\u0e31\u0e01 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e43\u0e19\u0e21\u0e34\u0e15\u0e34\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07\u0e41\u0e25\u0e30\u0e2a\u0e21\u0e14\u0e38\u0e25\n <\/p>\n <div class=\"chart-container h-[400px] md:h-[500px] max-w-2xl\">\n <canvas id=\"indicatorRadarChart\"><\/canvas>\n <\/div>\n <\/section>\n\n <section class=\"mb-8\">\n <h3 class=\"text-2xl font-bold text-center text-sky-800 mb-6\">\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e04\u0e27\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32<\/h3>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h4 class=\"text-xl font-bold text-green-700 mb-4 flex items-center\">\n <span class=\"text-2xl mr-2\">\ud83d\udc4d<\/span> \u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\n <\/h4>\n <p class=\"text-gray-600 mb-4\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e43\u0e19 9 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14 \u0e42\u0e14\u0e22\u0e44\u0e14\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e15\u0e47\u0e21 100 \u0e04\u0e30\u0e41\u0e19\u0e19 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e16\u0e36\u0e07\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e17\u0e35\u0e48\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e21\u0e35\u0e18\u0e23\u0e23\u0e21\u0e32\u0e20\u0e34\u0e1a\u0e32\u0e25<\/p>\n <ul class=\"space-y-3\">\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13:<\/strong> \u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a \u0e41\u0e25\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23:<\/strong> \u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e40\u0e1b\u0e47\u0e19\u0e18\u0e23\u0e23\u0e21 \u0e41\u0e25\u0e30\u0e14\u0e39\u0e41\u0e25\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e35<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15:<\/strong> \u0e21\u0e35\u0e21\u0e32\u0e15\u0e23\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e23\u0e38\u0e01\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e31\u0e48\u0e19<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19:<\/strong> \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e41\u0e25\u0e30\u0e19\u0e33\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e21\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e0a\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h4 class=\"text-xl font-bold text-amber-700 mb-4 flex items-center\">\n <span class=\"text-2xl mr-2\">\ud83d\udca1<\/span> \u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e04\u0e27\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\n <\/h4>\n <p class=\"text-gray-600 mb-4\">\u0e41\u0e21\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19\u0e42\u0e14\u0e22\u0e23\u0e27\u0e21\u0e08\u0e30\u0e2a\u0e39\u0e07 \u0e41\u0e15\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e40\u0e14\u0e47\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e14\u0e35\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\u0e44\u0e14\u0e49 \u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n <div class=\"bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-4\">\n <p class=\"font-bold text-amber-800\">\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e17\u0e35\u0e48 9: \u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n <p class=\"text-3xl font-bold text-amber-600\">96.00 <span class=\"text-lg\">\u0e04\u0e30\u0e41\u0e19\u0e19<\/span><\/p>\n <p class=\"text-sm text-amber-700\">\u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 “\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19” \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e07\u0e48\u0e32\u0e22\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19<\/p>\n <\/div>\n\n <h5 class=\"font-bold text-gray-700 mb-2\">\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32<\/h5>\n <div class=\"grid grid-cols-5 items-center gap-2\">\n <div class=\"flowchart-step col-span-2\">\u0e17\u0e1a\u0e17\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step col-span-2\">\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19<\/div>\n <div class=\"flowchart-step col-span-2 mt-2\">\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23<\/div>\n <div class=\"flowchart-arrow mt-2\">\u2192<\/div>\n <div class=\"flowchart-step col-span-2 mt-2\">\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25\u0e41\u0e25\u0e30\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"text-center mt-12 pt-6 border-t border-gray-300\">\n <p class=\"text-gray-600\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e08\u0e30\u0e23\u0e31\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e2b\u0e49\u0e14\u0e35\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/p>\n <\/footer>\n\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \n const wrapLabel = (label) => {\n const maxLength = 16;\n if (label.length <= maxLength) return label;\n const words = label.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + ' ' + word).trim().length > maxLength) {\n lines.push(currentLine.trim());\n currentLine = word;\n } else {\n currentLine = (currentLine + ' ' + word).trim();\n }\n }\n if (currentLine) {\n lines.push(currentLine.trim());\n }\n return lines;\n };\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n };\n \n const chartColors = {\n primary: '#005A9C',\n secondary: '#2E86C1',\n tertiary: '#85C1E9',\n background: 'rgba(46, 134, 193, 0.2)',\n border: 'rgba(46, 134, 193, 1)',\n };\n\n const overallScoreCtx = document.getElementById('overallScoreChart').getContext('2d');\n new Chart(overallScoreCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT)', '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT)', '\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (OIT)'],\n datasets: [{\n label: '\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e30\u0e41\u0e19\u0e19',\n data: [30, 30, 38.86],\n backgroundColor: [chartColors.primary, chartColors.secondary, chartColors.tertiary],\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n }\n }\n }\n }\n }\n });\n\n const indicatorLabelsRaw = [\n '\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15', \n '\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19', \n '\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19', \n '\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25', \n '\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15'\n ];\n \n const indicatorLabelsProcessed = indicatorLabelsRaw.map(wrapLabel);\n \n const indicatorRadarCtx = document.getElementById('indicatorRadarChart').getContext('2d');\n new Chart(indicatorRadarCtx, {\n type: 'radar',\n data: {\n labels: indicatorLabelsProcessed,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19\u0e1b\u0e35 2567',\n data: [100, 100, 100, 100, 100, 100, 100, 100, 96, 100],\n fill: true,\n backgroundColor: chartColors.background,\n borderColor: chartColors.border,\n pointBackgroundColor: chartColors.border,\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: chartColors.border\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#d1d5db' \/\/ gray-300\n },\n grid: {\n color: '#e5e7eb' \/\/ gray-200\n },\n pointLabels: {\n font: {\n size: 12,\n family: \"'Sarabun', sans-serif\"\n },\n color: '#1f2937' \/\/ gray-800\n },\n ticks: {\n backdropColor: 'rgba(255, 255, 255, 0.75)',\n color: '#4b5563', \/\/ gray-600\n stepSize: 20\n },\n suggestedMin: 60,\n suggestedMax: 100\n }\n },\n plugins: {\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n }\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u0e21\u0e32\u0e15\u0e23\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/strong><\/p>\n\n\n\n\n\n<center><iframe loading=\"lazy\" src=\"https:\/\/drive.google.com\/file\/d\/1INARDu_UwPz3YxxJrXLKTT3BH2aW9LUc\/preview\" width=\"1000\" height=\"880\" allow=\"autoplay\"><\/iframe><\/center>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32 KPA \u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e41\u0e25\u0e30\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e40\u0e01\u0e13\u0e11\u0e4c “\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21”<\/strong><\/p>\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>Infographic: \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/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=Sarabun:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f0f4f8;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 320px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .kpi-card {\n background: linear-gradient(135deg, #004AAD, #009FFD);\n color: white;\n padding: 2rem;\n border-radius: 1.5rem;\n text-align: center;\n box-shadow: 0 10px 20px rgba(0, 91, 187, 0.2);\n }\n .kpi-score {\n font-size: 5rem;\n font-weight: 700;\n line-height: 1;\n }\n .kpi-label {\n font-size: 1.25rem;\n margin-top: 0.5rem;\n letter-spacing: 0.05em;\n }\n .section-icon {\n font-size: 3rem;\n line-height: 1;\n color: #004AAD;\n }\n .flowchart-step {\n border: 2px solid #B7D9F5;\n background-color: #ffffff;\n border-radius: 1rem;\n padding: 1.5rem;\n text-align: center;\n flex: 1;\n min-width: 180px;\n }\n .flowchart-arrow {\n font-size: 2.5rem;\n color: #009FFD;\n align-self: center;\n margin: 1rem;\n }\n @media (max-width: 768px) {\n .flowchart {\n flex-direction: column;\n }\n .flowchart-arrow {\n transform: rotate(90deg);\n }\n }\n <\/style>\n<\/head>\n<body class=\"antialiased text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8 max-w-7xl\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-gray-900\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA)<\/h1>\n <p class=\"text-lg text-gray-600 mt-4\">\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 \u0e1e.\u0e28. 2568: \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e21\u0e35\u0e18\u0e23\u0e23\u0e21\u0e32\u0e20\u0e34\u0e1a\u0e32\u0e25<\/p>\n <\/header>\n\n <section class=\"mb-16\">\n <div class=\"kpi-card\">\n <p class=\"kpi-label\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21<\/p>\n <div class=\"kpi-score\">100<\/div>\n <p class=\"text-lg mt-2\">\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e44\u0e14\u0e49\u0e41\u0e25\u0e30\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19: <span class=\"font-bold\">\u0e1c\u0e48\u0e32\u0e19\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/span><\/p>\n <\/div>\n <\/section>\n \n <section class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 (ITA)<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21 3 \u0e21\u0e34\u0e15\u0e34\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e21\u0e38\u0e21\u0e21\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e23\u0e2d\u0e1a\u0e14\u0e49\u0e32\u0e19<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udc65<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">IIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e08\u0e32\u0e01\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udde3\ufe0f<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">EIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e44\u0e14\u0e49\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07 \u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udcc2<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">OIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"mb-16\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\u0e21\u0e38\u0e21\u0e21\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT)<\/h3>\n <p class=\"text-gray-600 mb-6\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 5 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e08\u0e32\u0e01\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e32\u0e01\u0e10\u0e32\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/p>\n <div class=\"chart-container\">\n <canvas id=\"iitChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e08\u0e32\u0e01\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT)<\/h3>\n <p class=\"text-gray-600 mb-6\">\u0e1c\u0e39\u0e49\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e39\u0e07 \u0e41\u0e25\u0e30\u0e1e\u0e36\u0e07\u0e1e\u0e2d\u0e43\u0e08\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/p>\n <div class=\"chart-container\">\n <canvas id=\"eitChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e39\u0e48\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30 (OIT)<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e15\u0e32\u0e21\u0e40\u0e01\u0e13\u0e11\u0e4c OIT \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e44\u0e14\u0e49<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart1\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07, \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart2\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19, \u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart3\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e2b\u0e32\u0e1e\u0e31\u0e2a\u0e14\u0e38<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart4\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 No Gift Policy<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"mb-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e33\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/p>\n <\/div>\n <div class=\"flex items-start justify-center flowchart\">\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">1<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1c\u0e25<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e14\u0e47\u0e19\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 ITA<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">2<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e08\u0e31\u0e14\u0e17\u0e33\u0e41\u0e1c\u0e19<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e41\u0e1c\u0e19\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02\u0e17\u0e35\u0e48\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">3<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e25\u0e07\u0e21\u0e37\u0e2d\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e32\u0e07\u0e44\u0e27\u0e49\u0e42\u0e14\u0e22\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e48\u0e27\u0e21<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">4<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e25\u0e30\u0e27\u0e31\u0e14\u0e1c\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n\n <script>\n const brilliantBlues = ['#004AAD', '#009FFD', '#242F40', '#B7D9F5', '#86B6F6'];\n\n function wrapText(label, maxWidth) {\n if (typeof label !== 'string' || label.length <= maxWidth) {\n return label;\n }\n const words = label.split(' ');\n let lines = [];\n let currentLine = '';\n words.forEach(word => {\n if ((currentLine + ' ' + word).length > maxWidth && currentLine.length > 0) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine += (currentLine.length === 0 ? '' : ' ') + word;\n }\n });\n lines.push(currentLine);\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: {\n family: \"'Sarabun', sans-serif\",\n size: 14,\n }\n }\n },\n tooltip: {\n titleFont: { family: \"'Sarabun', sans-serif\" },\n bodyFont: { family: \"'Sarabun', sans-serif\" },\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n };\n\n const iitLabels = [\n '\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19', \n '\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15'\n ].map(label => wrapText(label, 16));\n\n new Chart(document.getElementById('iitChart'), {\n type: 'radar',\n data: {\n labels: iitLabels,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19 IIT',\n data: [95.2, 88.5, 85.1, 91.3, 96.0],\n backgroundColor: 'rgba(0, 159, 253, 0.2)',\n borderColor: '#009FFD',\n pointBackgroundColor: '#009FFD',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: '#009FFD'\n }]\n },\n options: {\n ...commonOptions,\n scales: {\n r: {\n angleLines: { color: '#e5e7eb' },\n grid: { color: '#e5e7eb' },\n pointLabels: { \n font: { family: \"'Sarabun', sans-serif\", size: 12 }\n },\n ticks: {\n backdropColor: 'transparent',\n color: '#6b7280',\n stepSize: 20\n },\n min: 60,\n max: 100\n }\n }\n }\n });\n\n const eitLabels = [\n '\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19', \n '\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19'\n ].map(label => wrapText(label, 16));\n \n new Chart(document.getElementById('eitChart'), {\n type: 'bar',\n data: {\n labels: eitLabels,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19 EIT',\n data: [94.7, 91.2, 92.8],\n backgroundColor: ['#004AAD', '#009FFD', '#86B6F6'],\n borderRadius: 8,\n barThickness: 30\n }]\n },\n options: {\n ...commonOptions,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: false,\n min: 80,\n grid: { display: false },\n ticks: {\n font: { family: \"'Sarabun', sans-serif\" }\n }\n },\n y: {\n grid: { display: false },\n ticks: {\n font: { family: \"'Sarabun', sans-serif\", size: 14 }\n }\n }\n },\n plugins: {\n ...commonOptions.plugins,\n legend: { display: false }\n }\n }\n });\n\n function createOitDonutChart(canvasId, label, dataValue) {\n new Chart(document.getElementById(canvasId), {\n type: 'doughnut',\n data: {\n labels: [label, '\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19'],\n datasets: [{\n data: [dataValue, 100 - dataValue],\n backgroundColor: ['#004AAD', '#e5e7eb'],\n borderColor: '#ffffff',\n borderWidth: 4,\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return `${context.label}: ${context.raw}%`;\n }\n }\n }\n }\n }\n });\n }\n\n createOitDonutChart('oitChart1', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 98);\n createOitDonutChart('oitChart2', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 95);\n createOitDonutChart('oitChart3', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 100);\n createOitDonutChart('oitChart4', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 97);\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1980","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1980"}],"version-history":[{"count":12,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980\/revisions"}],"predecessor-version":[{"id":2207,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980\/revisions\/2207"}],"wp:attachment":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1980,"date":"2024-08-05T03:55:26","date_gmt":"2024-08-05T03:55:26","guid":{"rendered":"https:\/\/namkumnoi.ac.th\/?page_id=1980"},"modified":"2025-06-27T13:12:53","modified_gmt":"2025-06-27T13:12:53","slug":"o34-%e0%b8%a1%e0%b8%b2%e0%b8%95%e0%b8%a3%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%aa%e0%b9%88%e0%b8%87%e0%b9%80%e0%b8%aa%e0%b8%a3%e0%b8%b4%e0%b8%a1%e0%b8%84%e0%b8%b8%e0%b8%93%e0%b8%98%e0%b8%a3%e0%b8%a3","status":"publish","type":"page","link":"https:\/\/namkumnoi.ac.th\/?page_id=1980","title":{"rendered":"O18 \u0e21\u0e32\u0e15\u0e23\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32"},"content":{"rendered":"\n

\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30
\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32
\u0e43\u0e19\u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 \u0e1e.\u0e28 .2567<\/strong><\/p>\n\n\n\n

<\/p>\n\n\n\n\n\n\n \n \n \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01: \u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 ITA \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/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=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f8fafc; \/* Tailwind gray-50 *\/\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .kpi-score {\n font-size: 6rem;\n font-weight: 700;\n line-height: 1;\n color: #005A9C;\n }\n .flowchart-step {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #e0f2fe; \/* sky-100 *\/\n border: 2px solid #38bdf8; \/* sky-400 *\/\n border-radius: 0.5rem;\n padding: 1rem;\n text-align: center;\n font-weight: 600;\n color: #0c4a6e; \/* sky-900 *\/\n min-height: 80px;\n }\n .flowchart-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n color: #7dd3fc; \/* sky-300 *\/\n font-weight: bold;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <main class=\"container mx-auto p-4 md:p-8 max-w-7xl\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-sky-800\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA)<\/h1>\n <h2 class=\"text-xl md:text-2xl font-semibold text-sky-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22 – \u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 \u0e1e.\u0e28. 2567<\/h2>\n <p class=\"text-gray-500 mt-1\">\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\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e22\u0e42\u0e2a\u0e18\u0e23\u0e40\u0e02\u0e15 1<\/p>\n <\/header>\n\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12\">\n <div class=\"bg-white rounded-lg shadow-md p-6 text-center\">\n <p class=\"text-xl font-semibold text-gray-600\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21<\/p>\n <p class=\"kpi-score my-4\">98.86<\/p>\n <p class=\"text-2xl font-bold text-green-600 bg-green-100 rounded-full px-4 py-2 inline-block\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19: \u0e1c\u0e48\u0e32\u0e19\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/p>\n <p class=\"mt-4 text-gray-600\">\n \u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e39\u0e07\u0e21\u0e32\u0e01\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\n <\/p>\n <\/div>\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-center text-sky-800 mb-4\">\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2b\u0e25\u0e31\u0e01<\/h3>\n <div class=\"chart-container h-[300px] md:h-[350px]\">\n <canvas id=\"overallScoreChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-4\">\n \u0e41\u0e1c\u0e19\u0e20\u0e39\u0e21\u0e34\u0e19\u0e35\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e30\u0e41\u0e19\u0e19\u0e08\u0e32\u0e01 3 \u0e41\u0e2b\u0e25\u0e48\u0e07\u0e17\u0e35\u0e48\u0e21\u0e32\u0e2b\u0e25\u0e31\u0e01: \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT), \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT), \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30 (OIT)\n <\/p>\n <\/div>\n <\/section>\n\n <section class=\"bg-white rounded-lg shadow-md p-6 mb-12\">\n <h3 class=\"text-2xl font-bold text-center text-sky-800 mb-2\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e23\u0e32\u0e22\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">\n \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e43\u0e19 10 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e2b\u0e25\u0e31\u0e01 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e43\u0e19\u0e21\u0e34\u0e15\u0e34\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07\u0e41\u0e25\u0e30\u0e2a\u0e21\u0e14\u0e38\u0e25\n <\/p>\n <div class=\"chart-container h-[400px] md:h-[500px] max-w-2xl\">\n <canvas id=\"indicatorRadarChart\"><\/canvas>\n <\/div>\n <\/section>\n\n <section class=\"mb-8\">\n <h3 class=\"text-2xl font-bold text-center text-sky-800 mb-6\">\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e04\u0e27\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32<\/h3>\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h4 class=\"text-xl font-bold text-green-700 mb-4 flex items-center\">\n <span class=\"text-2xl mr-2\">\ud83d\udc4d<\/span> \u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e02\u0e2d\u0e07\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32\n <\/h4>\n <p class=\"text-gray-600 mb-4\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e43\u0e19 9 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14 \u0e42\u0e14\u0e22\u0e44\u0e14\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e15\u0e47\u0e21 100 \u0e04\u0e30\u0e41\u0e19\u0e19 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e16\u0e36\u0e07\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e17\u0e35\u0e48\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e21\u0e35\u0e18\u0e23\u0e23\u0e21\u0e32\u0e20\u0e34\u0e1a\u0e32\u0e25<\/p>\n <ul class=\"space-y-3\">\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13:<\/strong> \u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a \u0e41\u0e25\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23:<\/strong> \u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e40\u0e1b\u0e47\u0e19\u0e18\u0e23\u0e23\u0e21 \u0e41\u0e25\u0e30\u0e14\u0e39\u0e41\u0e25\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e35<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15:<\/strong> \u0e21\u0e35\u0e21\u0e32\u0e15\u0e23\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e23\u0e38\u0e01\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e31\u0e48\u0e19<\/li>\n <li class=\"p-3 bg-green-50 rounded-md\"><strong>\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19 \u0e41\u0e25\u0e30 \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19:<\/strong> \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e41\u0e25\u0e30\u0e19\u0e33\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e21\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e0a\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white rounded-lg shadow-md p-6\">\n <h4 class=\"text-xl font-bold text-amber-700 mb-4 flex items-center\">\n <span class=\"text-2xl mr-2\">\ud83d\udca1<\/span> \u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e04\u0e27\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\n <\/h4>\n <p class=\"text-gray-600 mb-4\">\u0e41\u0e21\u0e49\u0e04\u0e30\u0e41\u0e19\u0e19\u0e42\u0e14\u0e22\u0e23\u0e27\u0e21\u0e08\u0e30\u0e2a\u0e39\u0e07 \u0e41\u0e15\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e40\u0e14\u0e47\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e14\u0e35\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\u0e44\u0e14\u0e49 \u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n <div class=\"bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-4\">\n <p class=\"font-bold text-amber-800\">\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e17\u0e35\u0e48 9: \u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/p>\n <p class=\"text-3xl font-bold text-amber-600\">96.00 <span class=\"text-lg\">\u0e04\u0e30\u0e41\u0e19\u0e19<\/span><\/p>\n <p class=\"text-sm text-amber-700\">\u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 “\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19” \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e07\u0e48\u0e32\u0e22\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19<\/p>\n <\/div>\n\n <h5 class=\"font-bold text-gray-700 mb-2\">\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32<\/h5>\n <div class=\"grid grid-cols-5 items-center gap-2\">\n <div class=\"flowchart-step col-span-2\">\u0e17\u0e1a\u0e17\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step col-span-2\">\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19<\/div>\n <div class=\"flowchart-step col-span-2 mt-2\">\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23<\/div>\n <div class=\"flowchart-arrow mt-2\">\u2192<\/div>\n <div class=\"flowchart-step col-span-2 mt-2\">\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25\u0e41\u0e25\u0e30\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"text-center mt-12 pt-6 border-t border-gray-300\">\n <p class=\"text-gray-600\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e04\u0e33\u0e19\u0e49\u0e2d\u0e22\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e08\u0e30\u0e23\u0e31\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e2b\u0e49\u0e14\u0e35\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/p>\n <\/footer>\n\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \n const wrapLabel = (label) => {\n const maxLength = 16;\n if (label.length <= maxLength) return label;\n const words = label.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + ' ' + word).trim().length > maxLength) {\n lines.push(currentLine.trim());\n currentLine = word;\n } else {\n currentLine = (currentLine + ' ' + word).trim();\n }\n }\n if (currentLine) {\n lines.push(currentLine.trim());\n }\n return lines;\n };\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n };\n \n const chartColors = {\n primary: '#005A9C',\n secondary: '#2E86C1',\n tertiary: '#85C1E9',\n background: 'rgba(46, 134, 193, 0.2)',\n border: 'rgba(46, 134, 193, 1)',\n };\n\n const overallScoreCtx = document.getElementById('overallScoreChart').getContext('2d');\n new Chart(overallScoreCtx, {\n type: 'doughnut',\n data: {\n labels: ['\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT)', '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT)', '\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (OIT)'],\n datasets: [{\n label: '\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e30\u0e41\u0e19\u0e19',\n data: [30, 30, 38.86],\n backgroundColor: [chartColors.primary, chartColors.secondary, chartColors.tertiary],\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n }\n }\n }\n }\n }\n });\n\n const indicatorLabelsRaw = [\n '\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15', \n '\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19', \n '\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19', \n '\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25', \n '\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15'\n ];\n \n const indicatorLabelsProcessed = indicatorLabelsRaw.map(wrapLabel);\n \n const indicatorRadarCtx = document.getElementById('indicatorRadarChart').getContext('2d');\n new Chart(indicatorRadarCtx, {\n type: 'radar',\n data: {\n labels: indicatorLabelsProcessed,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19\u0e1b\u0e35 2567',\n data: [100, 100, 100, 100, 100, 100, 100, 100, 96, 100],\n fill: true,\n backgroundColor: chartColors.background,\n borderColor: chartColors.border,\n pointBackgroundColor: chartColors.border,\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: chartColors.border\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#d1d5db' \/\/ gray-300\n },\n grid: {\n color: '#e5e7eb' \/\/ gray-200\n },\n pointLabels: {\n font: {\n size: 12,\n family: \"'Sarabun', sans-serif\"\n },\n color: '#1f2937' \/\/ gray-800\n },\n ticks: {\n backdropColor: 'rgba(255, 255, 255, 0.75)',\n color: '#4b5563', \/\/ gray-600\n stepSize: 20\n },\n suggestedMin: 60,\n suggestedMax: 100\n }\n },\n plugins: {\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n }\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u0e21\u0e32\u0e15\u0e23\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/strong><\/p>\n\n\n\n\n\n<center><iframe loading=\"lazy\" src=\"https:\/\/drive.google.com\/file\/d\/1INARDu_UwPz3YxxJrXLKTT3BH2aW9LUc\/preview\" width=\"1000\" height=\"880\" allow=\"autoplay\"><\/iframe><\/center>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32 KPA \u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e41\u0e25\u0e30\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e40\u0e01\u0e13\u0e11\u0e4c “\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21”<\/strong><\/p>\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>Infographic: \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/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=Sarabun:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f0f4f8;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 320px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .kpi-card {\n background: linear-gradient(135deg, #004AAD, #009FFD);\n color: white;\n padding: 2rem;\n border-radius: 1.5rem;\n text-align: center;\n box-shadow: 0 10px 20px rgba(0, 91, 187, 0.2);\n }\n .kpi-score {\n font-size: 5rem;\n font-weight: 700;\n line-height: 1;\n }\n .kpi-label {\n font-size: 1.25rem;\n margin-top: 0.5rem;\n letter-spacing: 0.05em;\n }\n .section-icon {\n font-size: 3rem;\n line-height: 1;\n color: #004AAD;\n }\n .flowchart-step {\n border: 2px solid #B7D9F5;\n background-color: #ffffff;\n border-radius: 1rem;\n padding: 1.5rem;\n text-align: center;\n flex: 1;\n min-width: 180px;\n }\n .flowchart-arrow {\n font-size: 2.5rem;\n color: #009FFD;\n align-self: center;\n margin: 1rem;\n }\n @media (max-width: 768px) {\n .flowchart {\n flex-direction: column;\n }\n .flowchart-arrow {\n transform: rotate(90deg);\n }\n }\n <\/style>\n<\/head>\n<body class=\"antialiased text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8 max-w-7xl\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-gray-900\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a (ITA)<\/h1>\n <p class=\"text-lg text-gray-600 mt-4\">\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 \u0e1e.\u0e28. 2568: \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e21\u0e35\u0e18\u0e23\u0e23\u0e21\u0e32\u0e20\u0e34\u0e1a\u0e32\u0e25<\/p>\n <\/header>\n\n <section class=\"mb-16\">\n <div class=\"kpi-card\">\n <p class=\"kpi-label\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21<\/p>\n <div class=\"kpi-score\">100<\/div>\n <p class=\"text-lg mt-2\">\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e44\u0e14\u0e49\u0e41\u0e25\u0e30\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19: <span class=\"font-bold\">\u0e1c\u0e48\u0e32\u0e19\u0e14\u0e35\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/span><\/p>\n <\/div>\n <\/section>\n \n <section class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 (ITA)<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21 3 \u0e21\u0e34\u0e15\u0e34\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e21\u0e38\u0e21\u0e21\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e23\u0e2d\u0e1a\u0e14\u0e49\u0e32\u0e19<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udc65<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">IIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e08\u0e32\u0e01\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e04\u0e34\u0e14\u0e40\u0e2b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e23\u0e39\u0e41\u0e25\u0e30\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udde3\ufe0f<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">EIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e44\u0e14\u0e49\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07 \u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300\">\n <div class=\"section-icon mb-4\">\ud83d\udcc2<\/div>\n <h3 class=\"text-xl font-bold text-gray-900\">OIT<\/h3>\n <p class=\"font-semibold text-gray-700\">\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30<\/p>\n <p class=\"mt-2 text-gray-600\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"mb-16\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\u0e21\u0e38\u0e21\u0e21\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e20\u0e32\u0e22\u0e43\u0e19 (IIT)<\/h3>\n <p class=\"text-gray-600 mb-6\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 5 \u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49\u0e27\u0e31\u0e14\u0e08\u0e32\u0e01\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e16\u0e36\u0e07\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15 \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e32\u0e01\u0e10\u0e32\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/p>\n <div class=\"chart-container\">\n <canvas id=\"iitChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e08\u0e32\u0e01\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (EIT)<\/h3>\n <p class=\"text-gray-600 mb-6\">\u0e1c\u0e39\u0e49\u0e1b\u0e01\u0e04\u0e23\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2a\u0e39\u0e07 \u0e41\u0e25\u0e30\u0e1e\u0e36\u0e07\u0e1e\u0e2d\u0e43\u0e08\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/p>\n <div class=\"chart-container\">\n <canvas id=\"eitChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"mb-16\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e39\u0e48\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e30 (OIT)<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e1c\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e15\u0e32\u0e21\u0e40\u0e01\u0e13\u0e11\u0e4c OIT \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e44\u0e14\u0e49<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart1\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07, \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart2\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e41\u0e1c\u0e19\u0e07\u0e32\u0e19, \u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart3\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e2b\u0e32\u0e1e\u0e31\u0e2a\u0e14\u0e38<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg text-center\">\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e01\u0e32\u0e23\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15<\/h4>\n <div class=\"chart-container mx-auto\" style=\"height:200px;\">\n <canvas id=\"oitChart4\"><\/canvas>\n <\/div>\n <p class=\"mt-2 text-gray-600\">\u0e40\u0e0a\u0e48\u0e19 No Gift Policy<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"mb-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-900\">\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34<\/h2>\n <p class=\"text-gray-600 mt-2\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e33\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/p>\n <\/div>\n <div class=\"flex items-start justify-center flowchart\">\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">1<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1c\u0e25<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e38\u0e14\u0e41\u0e02\u0e47\u0e07\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e14\u0e47\u0e19\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 ITA<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">2<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e08\u0e31\u0e14\u0e17\u0e33\u0e41\u0e1c\u0e19<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e41\u0e1c\u0e19\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02\u0e17\u0e35\u0e48\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">3<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e25\u0e07\u0e21\u0e37\u0e2d\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48\u0e27\u0e32\u0e07\u0e44\u0e27\u0e49\u0e42\u0e14\u0e22\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e48\u0e27\u0e21<\/p>\n <\/div>\n <div class=\"flowchart-arrow\">\u2192<\/div>\n <div class=\"flowchart-step\">\n <p class=\"font-bold text-xl mb-2 text-blue-600\">4<\/p>\n <h4 class=\"font-bold text-lg text-gray-900\">\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e1c\u0e25<\/h4>\n <p class=\"text-gray-600 text-sm\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e25\u0e30\u0e27\u0e31\u0e14\u0e1c\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n\n <script>\n const brilliantBlues = ['#004AAD', '#009FFD', '#242F40', '#B7D9F5', '#86B6F6'];\n\n function wrapText(label, maxWidth) {\n if (typeof label !== 'string' || label.length <= maxWidth) {\n return label;\n }\n const words = label.split(' ');\n let lines = [];\n let currentLine = '';\n words.forEach(word => {\n if ((currentLine + ' ' + word).length > maxWidth && currentLine.length > 0) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine += (currentLine.length === 0 ? '' : ' ') + word;\n }\n });\n lines.push(currentLine);\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: {\n family: \"'Sarabun', sans-serif\",\n size: 14,\n }\n }\n },\n tooltip: {\n titleFont: { family: \"'Sarabun', sans-serif\" },\n bodyFont: { family: \"'Sarabun', sans-serif\" },\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n };\n\n const iitLabels = [\n '\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e2d\u0e33\u0e19\u0e32\u0e08', \n '\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19', \n '\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e17\u0e38\u0e08\u0e23\u0e34\u0e15'\n ].map(label => wrapText(label, 16));\n\n new Chart(document.getElementById('iitChart'), {\n type: 'radar',\n data: {\n labels: iitLabels,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19 IIT',\n data: [95.2, 88.5, 85.1, 91.3, 96.0],\n backgroundColor: 'rgba(0, 159, 253, 0.2)',\n borderColor: '#009FFD',\n pointBackgroundColor: '#009FFD',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: '#009FFD'\n }]\n },\n options: {\n ...commonOptions,\n scales: {\n r: {\n angleLines: { color: '#e5e7eb' },\n grid: { color: '#e5e7eb' },\n pointLabels: { \n font: { family: \"'Sarabun', sans-serif\", size: 12 }\n },\n ticks: {\n backdropColor: 'transparent',\n color: '#6b7280',\n stepSize: 20\n },\n min: 60,\n max: 100\n }\n }\n }\n });\n\n const eitLabels = [\n '\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19', \n '\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23', \n '\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19'\n ].map(label => wrapText(label, 16));\n \n new Chart(document.getElementById('eitChart'), {\n type: 'bar',\n data: {\n labels: eitLabels,\n datasets: [{\n label: '\u0e04\u0e30\u0e41\u0e19\u0e19 EIT',\n data: [94.7, 91.2, 92.8],\n backgroundColor: ['#004AAD', '#009FFD', '#86B6F6'],\n borderRadius: 8,\n barThickness: 30\n }]\n },\n options: {\n ...commonOptions,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: false,\n min: 80,\n grid: { display: false },\n ticks: {\n font: { family: \"'Sarabun', sans-serif\" }\n }\n },\n y: {\n grid: { display: false },\n ticks: {\n font: { family: \"'Sarabun', sans-serif\", size: 14 }\n }\n }\n },\n plugins: {\n ...commonOptions.plugins,\n legend: { display: false }\n }\n }\n });\n\n function createOitDonutChart(canvasId, label, dataValue) {\n new Chart(document.getElementById(canvasId), {\n type: 'doughnut',\n data: {\n labels: [label, '\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19'],\n datasets: [{\n data: [dataValue, 100 - dataValue],\n backgroundColor: ['#004AAD', '#e5e7eb'],\n borderColor: '#ffffff',\n borderWidth: 4,\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: { display: false },\n tooltip: {\n callbacks: {\n label: function(context) {\n return `${context.label}: ${context.raw}%`;\n }\n }\n }\n }\n }\n });\n }\n\n createOitDonutChart('oitChart1', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 98);\n createOitDonutChart('oitChart2', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 95);\n createOitDonutChart('oitChart3', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 100);\n createOitDonutChart('oitChart4', '\u0e04\u0e27\u0e32\u0e21\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19', 97);\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1980","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1980"}],"version-history":[{"count":12,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980\/revisions"}],"predecessor-version":[{"id":2207,"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1980\/revisions\/2207"}],"wp:attachment":[{"href":"https:\/\/namkumnoi.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}