Best Practice – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Prompt', 'sans-serif'],\n },\n colors: {\n primary: '#1e3a8a', \/\/ Blue 900\n secondary: '#3b82f6', \/\/ Blue 500\n accent: '#fbbf24', \/\/ Amber 400\n }\n }\n }\n }\n <\/script>\n <style>\n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .bg-pattern {\n background-color: #f8fafc;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='#3b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n }\n .clip-wave {\n clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\n }\n <\/style>\n<\/head>\n<body class=\"font-sans text-gray-800 antialiased bg-gray-50\">\n\n \n <nav class=\"fixed w-full z-50 bg-white\/90 backdrop-blur-md shadow-sm transition-all duration-300\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl shadow-lg border-2 border-accent\/20\">\u0e01\u0e2a<\/div>\n <span class=\"font-bold text-xl text-primary tracking-wide\">\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"#home\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a>\n <a href=\"#problem\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e17\u0e35\u0e48\u0e21\u0e32\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32<\/a>\n <a href=\"#methodology\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19<\/a>\n <a href=\"#sadao-model\" class=\"text-primary font-bold hover:text-secondary transition\">SADAO Model<\/a>\n <a href=\"#results\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/a>\n <button onclick=\"openDownloadModal(event)\" class=\"bg-primary hover:bg-secondary text-white px-5 py-2 rounded-full font-medium transition shadow-md flex items-center gap-2 group\">\n <i class=\"fas fa-download text-sm group-hover:bounce\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\n <\/button>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center gap-4\">\n <button onclick=\"openDownloadModal(event)\" class=\"text-primary hover:text-secondary focus:outline-none p-2 bg-blue-50 rounded-full transition\">\n <i class=\"fas fa-download text-lg\"><\/i>\n <\/button>\n <button id=\"mobileMenuBtn\" class=\"text-gray-600 hover:text-primary focus:outline-none\">\n <i class=\"fas fa-bars text-2xl\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"mobileMenu\" class=\"hidden md:hidden bg-white border-t border-gray-100 px-4 py-4 space-y-3 shadow-xl\">\n <a href=\"#home\" class=\"block text-gray-600 font-medium py-2\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a>\n <a href=\"#problem\" class=\"block text-gray-600 font-medium py-2\">\u0e17\u0e35\u0e48\u0e21\u0e32\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32<\/a>\n <a href=\"#methodology\" class=\"block text-gray-600 font-medium py-2\">\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19<\/a>\n <a href=\"#sadao-model\" class=\"block text-primary font-bold py-2\">SADAO Model<\/a>\n <a href=\"#results\" class=\"block text-gray-600 font-medium py-2\">\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/a>\n <\/div>\n <\/nav>\n\n \n <section id=\"home\" class=\"relative pt-32 pb-20 lg:pt-40 lg:pb-28 clip-wave bg-gradient-to-br from-primary via-blue-800 to-secondary text-white overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-white\/10 rounded-full mix-blend-overlay filter blur-2xl -translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-accent\/20 rounded-full mix-blend-overlay filter blur-3xl translate-x-1\/3 translate-y-1\/3\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n <span class=\"inline-block py-1 px-3 rounded-full bg-accent\/20 border border-accent\/50 text-accent font-semibold text-sm mb-6 tracking-wider uppercase\">\n \u0e27\u0e34\u0e18\u0e35\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28 (Best Practice) \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569\n <\/span>\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6\">\n \u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-accent to-yellow-200\">\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (PLC)<\/span>\n <\/h1>\n <p class=\"mt-4 text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto font-light\">\n \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (Active Learning) \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 “\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49” \n <\/p>\n <div class=\"mt-10 flex flex-col md:flex-row justify-center items-center gap-6\">\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 px-8 py-4 rounded-2xl flex items-center gap-4\">\n <img decoding=\"async\" src=\"https:\/\/www.ksd.ac.th\/logo\/piamsak.png\" alt=\"\u0e19\u0e32\u0e22\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c\" class=\"w-14 h-14 rounded-full border-2 border-accent object-cover bg-white\">\n <div class=\"text-left\">\n <p class=\"font-bold text-lg\">\u0e19\u0e32\u0e22\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c<\/p>\n <p class=\"text-sm text-blue-200\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"problem\" class=\"py-20 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center fade-in\">\n <div>\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-6 flex items-center gap-3\">\n <i class=\"fas fa-search text-accent\"><\/i> \u0e2a\u0e20\u0e32\u0e1e\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32\n <\/h2>\n <p class=\"text-gray-600 text-lg leading-relaxed mb-6\">\n \u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\u0e40\u0e1b\u0e47\u0e19 <span class=\"text-secondary font-bold\">“\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e2b\u0e25\u0e31\u0e01”<\/span> \u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 \u0e15\u0e32\u0e21\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22 \u201c\u0e40\u0e14\u0e47\u0e01\u0e44\u0e17\u0e22\u0e27\u0e34\u0e16\u0e35\u0e43\u0e2b\u0e21\u0e48 \u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49 100%\u201d \u0e41\u0e15\u0e48\u0e08\u0e32\u0e01\u0e1a\u0e23\u0e34\u0e1a\u0e17\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e1e\u0e1a\u0e27\u0e48\u0e32\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e1b.\u0e15\u0e49\u0e19 \u0e22\u0e31\u0e07\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e1b\u0e31\u0e0d\u0e2b\u0e32:\n <\/p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-4 p-4 bg-red-50 rounded-xl border-l-4 border-red-400\">\n <i class=\"fas fa-exclamation-circle text-red-500 mt-1\"><\/i>\n <div>\n <h4 class=\"font-semibold text-gray-800\">\u0e14\u0e49\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e30\u0e01\u0e14\u0e04\u0e33\u0e44\u0e21\u0e48\u0e15\u0e23\u0e07\u0e21\u0e32\u0e15\u0e23\u0e32 \u0e1c\u0e31\u0e19\u0e27\u0e23\u0e23\u0e13\u0e22\u0e38\u0e01\u0e15\u0e4c\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49 \u0e02\u0e32\u0e14\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08 \u0e41\u0e25\u0e30\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e23\u0e31\u0e27\u0e02\u0e32\u0e14\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start gap-4 p-4 bg-orange-50 rounded-xl border-l-4 border-orange-400\">\n <i class=\"fas fa-chalkboard-teacher text-orange-500 mt-1\"><\/i>\n <div>\n <h4 class=\"font-semibold text-gray-800\">\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e04\u0e23\u0e39\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e0a\u0e31\u0e49\u0e19\u0e08\u0e1a\u0e44\u0e21\u0e48\u0e15\u0e23\u0e07\u0e40\u0e2d\u0e01\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22 \u0e02\u0e32\u0e14\u0e01\u0e32\u0e23\u0e41\u0e25\u0e01\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19 \u0e41\u0e25\u0e30\u0e15\u0e48\u0e32\u0e07\u0e04\u0e19\u0e15\u0e48\u0e32\u0e07\u0e2a\u0e2d\u0e19<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <div class=\"mt-8 p-6 bg-primary text-white rounded-2xl shadow-xl relative overflow-hidden\">\n <div class=\"absolute right-0 top-0 opacity-10 text-9xl\"><i class=\"fas fa-bullseye\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u0e17\u0e32\u0e07\u0e2d\u0e2d\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h3>\n <p class=\"relative z-10 text-blue-100\">\u0e43\u0e0a\u0e49\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 <strong>PLC<\/strong> \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1b\u0e31\u0e0d\u0e2b\u0e32 \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 <strong>“\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49”<\/strong> \u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e08\u0e38\u0e14<\/p>\n <\/div>\n <\/div>\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl group\">\n <div class=\"w-full h-[500px] bg-gray-200 flex items-center justify-center relative\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent z-10\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/www.ksd.ac.th\/logo\/pp1.jpg\" alt=\"\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-700\">\n <div class=\"absolute bottom-6 left-6 z-20 text-white\">\n <p class=\"text-sm font-medium text-accent mb-1\"><i class=\"fas fa-camera\"><\/i> \u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/p>\n <p class=\"font-semibold text-lg\">\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e41\u0e1a\u0e1a Active Learning<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"methodology\" class=\"py-20 bg-pattern\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-4\">\u0e27\u0e34\u0e18\u0e35\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23 (\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 PLC + PDCA)<\/h2>\n <p class=\"text-gray-600 text-lg\">\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32 <span class=\"font-bold text-secondary\">“\u0e04\u0e23\u0e39\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07”<\/span> \u0e02\u0e31\u0e1a\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e27\u0e07\u0e08\u0e23\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-blue-400 relative overflow-hidden fade-in\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-blue-50 font-bold\">P<\/div>\n <div class=\"w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-clipboard-list\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Plan (\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e08\u0e31\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e35\u0e21 “\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 PLC”<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e04\u0e31\u0e14\u0e01\u0e23\u0e2d\u0e07\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19-\u0e40\u0e02\u0e35\u0e22\u0e19<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-accent relative overflow-hidden fade-in\" style=\"transition-delay: 100ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-yellow-50 font-bold\">D<\/div>\n <div class=\"w-16 h-16 bg-yellow-100 text-accent rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-pencil-ruler\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Do (\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Co-Design:<\/b> \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a “\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49”<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e19\u0e33\u0e2a\u0e37\u0e48\u0e2d\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e08\u0e31\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 Active Learning<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-green-400 relative overflow-hidden fade-in\" style=\"transition-delay: 200ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-green-50 font-bold\">C<\/div>\n <div class=\"w-16 h-16 bg-green-100 text-green-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-search-plus\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Check (\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Buddy Teacher:<\/b> \u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e31\u0e25\u0e22\u0e32\u0e13\u0e21\u0e34\u0e15\u0e23<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>AAR:<\/b> \u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-red-400 relative overflow-hidden fade-in\" style=\"transition-delay: 300ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-red-50 font-bold\">A<\/div>\n <div class=\"w-16 h-16 bg-red-100 text-red-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Act (\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Refinement:<\/b> \u0e19\u0e33\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30\u0e21\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Reward & Share:<\/b> \u0e22\u0e01\u0e22\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sadao-model\" class=\"py-24 bg-primary text-white relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg class=\"h-full w-full\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <pattern id=\"grid-pattern\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M0 40L40 0H20L0 20M40 40V20L20 40\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\/>\n <\/pattern>\n <\/defs>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid-pattern)\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-16 fade-in\">\n <span class=\"text-accent font-bold tracking-widest uppercase text-sm mb-2 block\">\u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e43\u0e2b\u0e21\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19<\/span>\n <h2 class=\"text-4xl md:text-6xl font-extrabold mb-6\">SADAO Model<\/h2>\n <div class=\"w-24 h-1 bg-accent mx-auto rounded-full\"><\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-5 gap-6\">\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\">\n <div class=\"text-5xl font-black text-accent mb-4\">S<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Shared Vision<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e17\u0e38\u0e01\u0e04\u0e19\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e2d\u0e07\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e04\u0e37\u0e2d <br><span class=\"text-white font-semibold\">“\u0e40\u0e14\u0e47\u0e01\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e25\u0e48\u0e2d\u0e07”<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 100ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">A<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Active Coaching<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e19\u0e34\u0e40\u0e17\u0e28\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e01\u0e32\u0e23\u0e08\u0e31\u0e1a\u0e1c\u0e34\u0e14 \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23 <br><span class=\"text-white font-semibold\">“\u0e42\u0e04\u0e49\u0e0a” \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 200ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">D<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Data-Driven<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e43\u0e0a\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e23\u0e32\u0e22\u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e21\u0e32\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e37\u0e48\u0e2d <br><span class=\"text-white font-semibold\">\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e49\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 300ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">A<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Achievement<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e22\u0e01\u0e22\u0e48\u0e2d\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e40\u0e25\u0e47\u0e01\u0e46 \u0e02\u0e2d\u0e07\u0e40\u0e14\u0e47\u0e01\u0e41\u0e25\u0e30\u0e04\u0e23\u0e39 <br><span class=\"text-white font-semibold\">\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 400ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">O<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Ongoing Dev.<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14 \u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27\u0e15\u0e49\u0e2d\u0e07 <br><span class=\"text-white font-semibold\">“\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19” \u0e41\u0e25\u0e30 “\u0e40\u0e02\u0e35\u0e22\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c” \u0e44\u0e14\u0e49<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"results\" class=\"py-20 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\n \n <div class=\"fade-in\">\n <h2 class=\"text-3xl font-bold text-primary mb-8 border-b-2 border-secondary inline-block pb-2\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e20\u0e32\u0e04\u0e20\u0e39\u0e21\u0e34\u0e43\u0e08<\/h2>\n <div class=\"space-y-8\">\n <div class=\"bg-blue-50 rounded-2xl p-6 border border-blue-100 flex items-center gap-6\">\n <div class=\"flex-shrink-0 w-24 h-24 rounded-full bg-primary flex items-center justify-center text-white text-3xl font-bold shadow-lg border-4 border-white\">85%<\/div>\n <div>\n <h4 class=\"text-xl font-bold text-gray-800\">\u0e1c\u0e48\u0e32\u0e19\u0e40\u0e01\u0e13\u0e11\u0e4c\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/h4>\n <p class=\"text-gray-600 mt-2\">\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e2a\u0e30\u0e01\u0e14\u0e04\u0e33\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e40\u0e01\u0e13\u0e11\u0e4c\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-blue-50 rounded-2xl p-6 border border-blue-100 flex items-center gap-6\">\n <div class=\"flex-shrink-0 w-24 h-24 rounded-full bg-secondary flex items-center justify-center text-white text-3xl font-bold shadow-lg border-4 border-white\">80%+<\/div>\n <div>\n <h4 class=\"text-xl font-bold text-gray-800\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a RT<\/h4>\n <p class=\"text-gray-600 mt-2\">\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e1b.1 \u0e21\u0e35\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e09\u0e25\u0e35\u0e48\u0e22\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a RT (Reading Test) 80% \u0e02\u0e36\u0e49\u0e19\u0e44\u0e1b<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fade-in\" style=\"transition-delay: 200ms;\">\n <h2 class=\"text-3xl font-bold text-primary mb-8 border-b-2 border-accent inline-block pb-2\">\u0e1b\u0e31\u0e08\u0e08\u0e31\u0e22\u0e41\u0e2b\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/h2>\n <div class=\"grid gap-4\">\n <div class=\"flex items-start gap-4 p-5 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition\">\n <div class=\"w-12 h-12 bg-yellow-100 text-accent rounded-full flex items-center justify-center flex-shrink-0 text-xl\"><i class=\"fas fa-user-tie\"><\/i><\/div>\n <div>\n <h4 class=\"font-bold text-gray-800 text-lg\">\u0e1a\u0e17\u0e1a\u0e32\u0e17\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/h4>\n <p class=\"text-gray-600 text-sm mt-1\">\u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e25\u0e07\u0e21\u0e37\u0e2d\u0e17\u0e33\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19 \u0e2a\u0e23\u0e49\u0e32\u0e07 “\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22” \u0e43\u0e2b\u0e49\u0e04\u0e23\u0e39\u0e01\u0e25\u0e49\u0e32\u0e25\u0e2d\u0e07\u0e1c\u0e34\u0e14\u0e25\u0e2d\u0e07\u0e16\u0e39\u0e01<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4 p-5 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition\">\n <div class=\"w-12 h-12 bg-blue-100 text-secondary rounded-full flex items-center justify-center flex-shrink-0 text-xl\"><i class=\"fas fa-heart\"><\/i><\/div>\n <div>\n <h4 class=\"font-bold text-gray-800 text-lg\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e17\u0e31\u0e28\u0e19\u0e04\u0e15\u0e34<\/h4>\n <p class=\"text-gray-600 text-sm mt-1\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01 “\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e09\u0e31\u0e19” \u0e40\u0e1b\u0e47\u0e19 “\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32” \u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e04\u0e19<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-primary text-blue-100 py-12 border-t-4 border-accent\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6\">\n <div>\n <h3 class=\"text-white font-bold text-2xl tracking-wide mb-2\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\n\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (PLC)<\/h3>\n <p class=\"text-sm opacity-80\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e27\u0e34\u0e18\u0e35\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28 (Best Practice) \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569<\/p>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <a href=\"http:\/\/www.ksd.ac.th\" target=\"_blank\" class=\"flex items-center gap-2 bg-white\/10 hover:bg-white\/20 transition px-6 py-3 rounded-full text-white font-medium border border-white\/20\">\n <i class=\"fas fa-globe\"><\/i> www.ksd.ac.th\n <\/a>\n <\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pt-8 border-t border-white\/10 text-center text-sm opacity-60\">\n © 2569 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32. \u0e42\u0e14\u0e22 \u0e1c\u0e2d.\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c.\n <\/div>\n <\/footer>\n\n \n <div id=\"downloadModal\" class=\"fixed inset-0 z-[100] hidden\">\n <div class=\"absolute inset-0 bg-black\/50 backdrop-blur-sm transition-opacity\" onclick=\"closeDownloadModal()\"><\/div>\n <div class=\"flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0 pointer-events-none\">\n <div class=\"relative bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:max-w-lg w-full pointer-events-auto\">\n <div class=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n <div class=\"sm:flex sm:items-start\">\n <div class=\"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 sm:mx-0 sm:h-10 sm:w-10\">\n <i class=\"fas fa-file-pdf text-secondary text-xl\"><\/i>\n <\/div>\n <div class=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n <h3 class=\"text-lg leading-6 font-bold text-gray-900\">\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Best Practice<\/h3>\n <div class=\"mt-2 text-sm text-gray-500\">\n \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a PDF \u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3\">\n <a href=\"\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c Best practice 69.pdf\" download class=\"w-full inline-flex justify-center rounded-xl border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 sm:w-auto sm:text-sm items-center gap-2\">\n <i class=\"fas fa-download\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 PDF\n <\/a>\n <button type=\"button\" onclick=\"closeDownloadModal()\" class=\"mt-3 w-full inline-flex justify-center rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm transition\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ Modal logic\n function openDownloadModal(e) {\n if(e) e.preventDefault();\n document.getElementById('downloadModal').classList.remove('hidden');\n }\n function closeDownloadModal() {\n document.getElementById('downloadModal').classList.add('hidden');\n }\n\n \/\/ Mobile Menu logic\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n mobileMenuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n\n \/\/ Close mobile menu on click link\n document.querySelectorAll('#mobileMenu a').forEach(link => {\n link.addEventListener('click', () => mobileMenu.classList.add('hidden'));\n });\n\n \/\/ Navbar Scroll effect\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n if (window.scrollY > 50) {\n nav.classList.add('bg-white\/95', 'shadow-md');\n } else {\n nav.classList.remove('bg-white\/95', 'shadow-md');\n }\n });\n\n \/\/ Intersection Observer for animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<style>\n \/* \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e04\u0e25\u0e38\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e31\u0e01\u0e29\u0e32\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e2a\u0e48\u0e27\u0e19 (Aspect Ratio) *\/\n .video-container {\n position: relative;\n padding-bottom: 56.25%; \/* \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e2a\u0e48\u0e27\u0e19 16:9 (9 \u0e41\u0e1a\u0e48\u0e07\u0e14\u0e49\u0e27\u0e22 16 = 0.5625) *\/\n height: 0;\n overflow: hidden;\n max-width: 100%;\n background: #000;\n }\n\n \/* \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 iframe \u0e43\u0e2b\u0e49\u0e40\u0e15\u0e47\u0e21\u0e02\u0e19\u0e32\u0e14\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e04\u0e25\u0e38\u0e21 *\/\n .video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n<\/style>\n\n<div class=\"video-container\">\n <iframe \n src=\"https:\/\/drive.google.com\/file\/d\/1xVb31pWJ9C1n5b-vw1K6TcOXWLIUVW_P\/preview\" \n allow=\"autoplay\">\n <\/iframe>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Best Practice – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e01\u0e2a \u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07…<\/p>\n","protected":false},"author":1,"featured_media":86,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2,6],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3","category-2","category-6"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=82"}],"version-history":[{"count":3,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions\/88"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/media\/86"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":82,"date":"2026-03-19T16:53:29","date_gmt":"2026-03-19T09:53:29","guid":{"rendered":"https:\/\/ksd.ac.th\/web\/?p=82"},"modified":"2026-03-19T17:14:27","modified_gmt":"2026-03-19T10:14:27","slug":"%e0%b9%80%e0%b8%9c%e0%b8%a2%e0%b9%81%e0%b8%9e%e0%b8%a3%e0%b9%88-best-practice-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%9e%e0%b8%b1%e0%b8%92%e0%b8%99%e0%b8%b2%e0%b8%97%e0%b8%b1%e0%b8%81%e0%b8%a9%e0%b8%b0-2","status":"publish","type":"post","link":"https:\/\/ksd.ac.th\/web\/?p=82","title":{"rendered":"\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48 Best Practice \u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e17\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e (PLC)"},"content":{"rendered":"\n\n\n\n \n \n Best Practice – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Prompt', 'sans-serif'],\n },\n colors: {\n primary: '#1e3a8a', \/\/ Blue 900\n secondary: '#3b82f6', \/\/ Blue 500\n accent: '#fbbf24', \/\/ Amber 400\n }\n }\n }\n }\n <\/script>\n <style>\n .fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n .fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .bg-pattern {\n background-color: #f8fafc;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='#3b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n }\n .clip-wave {\n clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);\n }\n <\/style>\n<\/head>\n<body class=\"font-sans text-gray-800 antialiased bg-gray-50\">\n\n \n <nav class=\"fixed w-full z-50 bg-white\/90 backdrop-blur-md shadow-sm transition-all duration-300\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl shadow-lg border-2 border-accent\/20\">\u0e01\u0e2a<\/div>\n <span class=\"font-bold text-xl text-primary tracking-wide\">\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"#home\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a>\n <a href=\"#problem\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e17\u0e35\u0e48\u0e21\u0e32\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32<\/a>\n <a href=\"#methodology\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19<\/a>\n <a href=\"#sadao-model\" class=\"text-primary font-bold hover:text-secondary transition\">SADAO Model<\/a>\n <a href=\"#results\" class=\"text-gray-600 hover:text-primary font-medium transition\">\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/a>\n <button onclick=\"openDownloadModal(event)\" class=\"bg-primary hover:bg-secondary text-white px-5 py-2 rounded-full font-medium transition shadow-md flex items-center gap-2 group\">\n <i class=\"fas fa-download text-sm group-hover:bounce\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\n <\/button>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center gap-4\">\n <button onclick=\"openDownloadModal(event)\" class=\"text-primary hover:text-secondary focus:outline-none p-2 bg-blue-50 rounded-full transition\">\n <i class=\"fas fa-download text-lg\"><\/i>\n <\/button>\n <button id=\"mobileMenuBtn\" class=\"text-gray-600 hover:text-primary focus:outline-none\">\n <i class=\"fas fa-bars text-2xl\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"mobileMenu\" class=\"hidden md:hidden bg-white border-t border-gray-100 px-4 py-4 space-y-3 shadow-xl\">\n <a href=\"#home\" class=\"block text-gray-600 font-medium py-2\">\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/a>\n <a href=\"#problem\" class=\"block text-gray-600 font-medium py-2\">\u0e17\u0e35\u0e48\u0e21\u0e32\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32<\/a>\n <a href=\"#methodology\" class=\"block text-gray-600 font-medium py-2\">\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19<\/a>\n <a href=\"#sadao-model\" class=\"block text-primary font-bold py-2\">SADAO Model<\/a>\n <a href=\"#results\" class=\"block text-gray-600 font-medium py-2\">\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/a>\n <\/div>\n <\/nav>\n\n \n <section id=\"home\" class=\"relative pt-32 pb-20 lg:pt-40 lg:pb-28 clip-wave bg-gradient-to-br from-primary via-blue-800 to-secondary text-white overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-white\/10 rounded-full mix-blend-overlay filter blur-2xl -translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-accent\/20 rounded-full mix-blend-overlay filter blur-3xl translate-x-1\/3 translate-y-1\/3\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n <span class=\"inline-block py-1 px-3 rounded-full bg-accent\/20 border border-accent\/50 text-accent font-semibold text-sm mb-6 tracking-wider uppercase\">\n \u0e27\u0e34\u0e18\u0e35\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28 (Best Practice) \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569\n <\/span>\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6\">\n \u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-accent to-yellow-200\">\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (PLC)<\/span>\n <\/h1>\n <p class=\"mt-4 text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto font-light\">\n \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (Active Learning) \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 “\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49” \n <\/p>\n <div class=\"mt-10 flex flex-col md:flex-row justify-center items-center gap-6\">\n <div class=\"bg-white\/10 backdrop-blur-sm border border-white\/20 px-8 py-4 rounded-2xl flex items-center gap-4\">\n <img decoding=\"async\" src=\"https:\/\/www.ksd.ac.th\/logo\/piamsak.png\" alt=\"\u0e19\u0e32\u0e22\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c\" class=\"w-14 h-14 rounded-full border-2 border-accent object-cover bg-white\">\n <div class=\"text-left\">\n <p class=\"font-bold text-lg\">\u0e19\u0e32\u0e22\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c<\/p>\n <p class=\"text-sm text-blue-200\">\u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"problem\" class=\"py-20 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center fade-in\">\n <div>\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-6 flex items-center gap-3\">\n <i class=\"fas fa-search text-accent\"><\/i> \u0e2a\u0e20\u0e32\u0e1e\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e2b\u0e32\n <\/h2>\n <p class=\"text-gray-600 text-lg leading-relaxed mb-6\">\n \u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\u0e40\u0e1b\u0e47\u0e19 <span class=\"text-secondary font-bold\">“\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e2b\u0e25\u0e31\u0e01”<\/span> \u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 \u0e15\u0e32\u0e21\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22 \u201c\u0e40\u0e14\u0e47\u0e01\u0e44\u0e17\u0e22\u0e27\u0e34\u0e16\u0e35\u0e43\u0e2b\u0e21\u0e48 \u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49 100%\u201d \u0e41\u0e15\u0e48\u0e08\u0e32\u0e01\u0e1a\u0e23\u0e34\u0e1a\u0e17\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e1e\u0e1a\u0e27\u0e48\u0e32\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e1b.\u0e15\u0e49\u0e19 \u0e22\u0e31\u0e07\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e1b\u0e31\u0e0d\u0e2b\u0e32:\n <\/p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-4 p-4 bg-red-50 rounded-xl border-l-4 border-red-400\">\n <i class=\"fas fa-exclamation-circle text-red-500 mt-1\"><\/i>\n <div>\n <h4 class=\"font-semibold text-gray-800\">\u0e14\u0e49\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e30\u0e01\u0e14\u0e04\u0e33\u0e44\u0e21\u0e48\u0e15\u0e23\u0e07\u0e21\u0e32\u0e15\u0e23\u0e32 \u0e1c\u0e31\u0e19\u0e27\u0e23\u0e23\u0e13\u0e22\u0e38\u0e01\u0e15\u0e4c\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49 \u0e02\u0e32\u0e14\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08 \u0e41\u0e25\u0e30\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e23\u0e31\u0e27\u0e02\u0e32\u0e14\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19<\/p>\n <\/div>\n <\/li>\n <li class=\"flex items-start gap-4 p-4 bg-orange-50 rounded-xl border-l-4 border-orange-400\">\n <i class=\"fas fa-chalkboard-teacher text-orange-500 mt-1\"><\/i>\n <div>\n <h4 class=\"font-semibold text-gray-800\">\u0e14\u0e49\u0e32\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e04\u0e23\u0e39\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e0a\u0e31\u0e49\u0e19\u0e08\u0e1a\u0e44\u0e21\u0e48\u0e15\u0e23\u0e07\u0e40\u0e2d\u0e01\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22 \u0e02\u0e32\u0e14\u0e01\u0e32\u0e23\u0e41\u0e25\u0e01\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19 \u0e41\u0e25\u0e30\u0e15\u0e48\u0e32\u0e07\u0e04\u0e19\u0e15\u0e48\u0e32\u0e07\u0e2a\u0e2d\u0e19<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <div class=\"mt-8 p-6 bg-primary text-white rounded-2xl shadow-xl relative overflow-hidden\">\n <div class=\"absolute right-0 top-0 opacity-10 text-9xl\"><i class=\"fas fa-bullseye\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u0e17\u0e32\u0e07\u0e2d\u0e2d\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h3>\n <p class=\"relative z-10 text-blue-100\">\u0e43\u0e0a\u0e49\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 <strong>PLC<\/strong> \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e1b\u0e31\u0e0d\u0e2b\u0e32 \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21 <strong>“\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49”<\/strong> \u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e01\u0e49\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e43\u0e2b\u0e49\u0e15\u0e23\u0e07\u0e08\u0e38\u0e14<\/p>\n <\/div>\n <\/div>\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl group\">\n <div class=\"w-full h-[500px] bg-gray-200 flex items-center justify-center relative\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 to-transparent z-10\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/www.ksd.ac.th\/logo\/pp1.jpg\" alt=\"\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-700\">\n <div class=\"absolute bottom-6 left-6 z-20 text-white\">\n <p class=\"text-sm font-medium text-accent mb-1\"><i class=\"fas fa-camera\"><\/i> \u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/p>\n <p class=\"font-semibold text-lg\">\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e41\u0e1a\u0e1a Active Learning<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"methodology\" class=\"py-20 bg-pattern\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-primary mb-4\">\u0e27\u0e34\u0e18\u0e35\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23 (\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 PLC + PDCA)<\/h2>\n <p class=\"text-gray-600 text-lg\">\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32 <span class=\"font-bold text-secondary\">“\u0e04\u0e23\u0e39\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07”<\/span> \u0e02\u0e31\u0e1a\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e27\u0e07\u0e08\u0e23\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-blue-400 relative overflow-hidden fade-in\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-blue-50 font-bold\">P<\/div>\n <div class=\"w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-clipboard-list\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Plan (\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e08\u0e31\u0e14\u0e15\u0e31\u0e49\u0e07\u0e17\u0e35\u0e21 “\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 PLC”<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e04\u0e31\u0e14\u0e01\u0e23\u0e2d\u0e07\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19-\u0e40\u0e02\u0e35\u0e22\u0e19<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-accent relative overflow-hidden fade-in\" style=\"transition-delay: 100ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-yellow-50 font-bold\">D<\/div>\n <div class=\"w-16 h-16 bg-yellow-100 text-accent rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-pencil-ruler\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Do (\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Co-Design:<\/b> \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a “\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e40\u0e25\u0e48\u0e21\u0e40\u0e25\u0e47\u0e01\u0e40\u0e14\u0e47\u0e01\u0e2d\u0e48\u0e32\u0e19\u0e44\u0e14\u0e49”<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i>\u0e19\u0e33\u0e2a\u0e37\u0e48\u0e2d\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e08\u0e31\u0e14\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 Active Learning<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-green-400 relative overflow-hidden fade-in\" style=\"transition-delay: 200ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-green-50 font-bold\">C<\/div>\n <div class=\"w-16 h-16 bg-green-100 text-green-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-search-plus\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Check (\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Buddy Teacher:<\/b> \u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e31\u0e25\u0e22\u0e32\u0e13\u0e21\u0e34\u0e15\u0e23<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>AAR:<\/b> \u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e30\u0e17\u0e49\u0e2d\u0e19\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition duration-300 border-t-4 border-red-400 relative overflow-hidden fade-in\" style=\"transition-delay: 300ms;\">\n <div class=\"absolute -right-4 -top-4 text-8xl text-red-50 font-bold\">A<\/div>\n <div class=\"w-16 h-16 bg-red-100 text-red-600 rounded-2xl flex items-center justify-center text-3xl mb-6 relative z-10\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-3 relative z-10\">Act (\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07)<\/h3>\n <ul class=\"text-gray-600 space-y-2 text-sm relative z-10\">\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Refinement:<\/b> \u0e19\u0e33\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30\u0e21\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07<\/li>\n <li><i class=\"fas fa-check text-green-500 mr-2\"><\/i><b>Reward & Share:<\/b> \u0e22\u0e01\u0e22\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sadao-model\" class=\"py-24 bg-primary text-white relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-10\">\n <svg class=\"h-full w-full\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <pattern id=\"grid-pattern\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M0 40L40 0H20L0 20M40 40V20L20 40\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\/>\n <\/pattern>\n <\/defs>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#grid-pattern)\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-16 fade-in\">\n <span class=\"text-accent font-bold tracking-widest uppercase text-sm mb-2 block\">\u0e2d\u0e07\u0e04\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e43\u0e2b\u0e21\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19<\/span>\n <h2 class=\"text-4xl md:text-6xl font-extrabold mb-6\">SADAO Model<\/h2>\n <div class=\"w-24 h-1 bg-accent mx-auto rounded-full\"><\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-5 gap-6\">\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\">\n <div class=\"text-5xl font-black text-accent mb-4\">S<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Shared Vision<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e17\u0e38\u0e01\u0e04\u0e19\u0e43\u0e19\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e2d\u0e07\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e04\u0e37\u0e2d <br><span class=\"text-white font-semibold\">“\u0e40\u0e14\u0e47\u0e01\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e04\u0e25\u0e48\u0e2d\u0e07”<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 100ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">A<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Active Coaching<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e19\u0e34\u0e40\u0e17\u0e28\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e01\u0e32\u0e23\u0e08\u0e31\u0e1a\u0e1c\u0e34\u0e14 \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23 <br><span class=\"text-white font-semibold\">“\u0e42\u0e04\u0e49\u0e0a” \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 200ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">D<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Data-Driven<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e43\u0e0a\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\u0e23\u0e32\u0e22\u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e21\u0e32\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e37\u0e48\u0e2d <br><span class=\"text-white font-semibold\">\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e49\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 300ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">A<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Achievement<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e22\u0e01\u0e22\u0e48\u0e2d\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e40\u0e25\u0e47\u0e01\u0e46 \u0e02\u0e2d\u0e07\u0e40\u0e14\u0e47\u0e01\u0e41\u0e25\u0e30\u0e04\u0e23\u0e39 <br><span class=\"text-white font-semibold\">\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08<\/span><\/p>\n <\/div>\n <div class=\"bg-white\/10 backdrop-blur-md rounded-2xl p-6 border border-white\/20 hover:bg-white\/20 transition duration-300 transform hover:-translate-y-2 fade-in\" style=\"transition-delay: 400ms;\">\n <div class=\"text-5xl font-black text-accent mb-4\">O<\/div>\n <h3 class=\"text-xl font-bold mb-3\">Ongoing Dev.<\/h3>\n <p class=\"text-blue-100 text-sm\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14 \u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27\u0e15\u0e49\u0e2d\u0e07 <br><span class=\"text-white font-semibold\">“\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19” \u0e41\u0e25\u0e30 “\u0e40\u0e02\u0e35\u0e22\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c” \u0e44\u0e14\u0e49<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"results\" class=\"py-20 bg-white\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\n \n <div class=\"fade-in\">\n <h2 class=\"text-3xl font-bold text-primary mb-8 border-b-2 border-secondary inline-block pb-2\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e20\u0e32\u0e04\u0e20\u0e39\u0e21\u0e34\u0e43\u0e08<\/h2>\n <div class=\"space-y-8\">\n <div class=\"bg-blue-50 rounded-2xl p-6 border border-blue-100 flex items-center gap-6\">\n <div class=\"flex-shrink-0 w-24 h-24 rounded-full bg-primary flex items-center justify-center text-white text-3xl font-bold shadow-lg border-4 border-white\">85%<\/div>\n <div>\n <h4 class=\"text-xl font-bold text-gray-800\">\u0e1c\u0e48\u0e32\u0e19\u0e40\u0e01\u0e13\u0e11\u0e4c\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/h4>\n <p class=\"text-gray-600 mt-2\">\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e2a\u0e30\u0e01\u0e14\u0e04\u0e33\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e40\u0e01\u0e13\u0e11\u0e4c\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-blue-50 rounded-2xl p-6 border border-blue-100 flex items-center gap-6\">\n <div class=\"flex-shrink-0 w-24 h-24 rounded-full bg-secondary flex items-center justify-center text-white text-3xl font-bold shadow-lg border-4 border-white\">80%+<\/div>\n <div>\n <h4 class=\"text-xl font-bold text-gray-800\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a RT<\/h4>\n <p class=\"text-gray-600 mt-2\">\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e0a\u0e31\u0e49\u0e19 \u0e1b.1 \u0e21\u0e35\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e09\u0e25\u0e35\u0e48\u0e22\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a RT (Reading Test) 80% \u0e02\u0e36\u0e49\u0e19\u0e44\u0e1b<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"fade-in\" style=\"transition-delay: 200ms;\">\n <h2 class=\"text-3xl font-bold text-primary mb-8 border-b-2 border-accent inline-block pb-2\">\u0e1b\u0e31\u0e08\u0e08\u0e31\u0e22\u0e41\u0e2b\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/h2>\n <div class=\"grid gap-4\">\n <div class=\"flex items-start gap-4 p-5 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition\">\n <div class=\"w-12 h-12 bg-yellow-100 text-accent rounded-full flex items-center justify-center flex-shrink-0 text-xl\"><i class=\"fas fa-user-tie\"><\/i><\/div>\n <div>\n <h4 class=\"font-bold text-gray-800 text-lg\">\u0e1a\u0e17\u0e1a\u0e32\u0e17\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23<\/h4>\n <p class=\"text-gray-600 text-sm mt-1\">\u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e25\u0e07\u0e21\u0e37\u0e2d\u0e17\u0e33\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19 \u0e2a\u0e23\u0e49\u0e32\u0e07 “\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22” \u0e43\u0e2b\u0e49\u0e04\u0e23\u0e39\u0e01\u0e25\u0e49\u0e32\u0e25\u0e2d\u0e07\u0e1c\u0e34\u0e14\u0e25\u0e2d\u0e07\u0e16\u0e39\u0e01<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4 p-5 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition\">\n <div class=\"w-12 h-12 bg-blue-100 text-secondary rounded-full flex items-center justify-center flex-shrink-0 text-xl\"><i class=\"fas fa-heart\"><\/i><\/div>\n <div>\n <h4 class=\"font-bold text-gray-800 text-lg\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e17\u0e31\u0e28\u0e19\u0e04\u0e15\u0e34<\/h4>\n <p class=\"text-gray-600 text-sm mt-1\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01 “\u0e2b\u0e49\u0e2d\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e09\u0e31\u0e19” \u0e40\u0e1b\u0e47\u0e19 “\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32” \u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e04\u0e19<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-primary text-blue-100 py-12 border-t-4 border-accent\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6\">\n <div>\n <h3 class=\"text-white font-bold text-2xl tracking-wide mb-2\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\n\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (PLC)<\/h3>\n <p class=\"text-sm opacity-80\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e1c\u0e25\u0e27\u0e34\u0e18\u0e35\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28 (Best Practice) \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569<\/p>\n <\/div>\n <div class=\"flex items-center gap-4\">\n <a href=\"http:\/\/www.ksd.ac.th\" target=\"_blank\" class=\"flex items-center gap-2 bg-white\/10 hover:bg-white\/20 transition px-6 py-3 rounded-full text-white font-medium border border-white\/20\">\n <i class=\"fas fa-globe\"><\/i> www.ksd.ac.th\n <\/a>\n <\/div>\n <\/div>\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pt-8 border-t border-white\/10 text-center text-sm opacity-60\">\n © 2569 \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32. \u0e42\u0e14\u0e22 \u0e1c\u0e2d.\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c \u0e40\u0e14\u0e0a\u0e02\u0e31\u0e19\u0e18\u0e4c.\n <\/div>\n <\/footer>\n\n \n <div id=\"downloadModal\" class=\"fixed inset-0 z-[100] hidden\">\n <div class=\"absolute inset-0 bg-black\/50 backdrop-blur-sm transition-opacity\" onclick=\"closeDownloadModal()\"><\/div>\n <div class=\"flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0 pointer-events-none\">\n <div class=\"relative bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:max-w-lg w-full pointer-events-auto\">\n <div class=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n <div class=\"sm:flex sm:items-start\">\n <div class=\"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 sm:mx-0 sm:h-10 sm:w-10\">\n <i class=\"fas fa-file-pdf text-secondary text-xl\"><\/i>\n <\/div>\n <div class=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n <h3 class=\"text-lg leading-6 font-bold text-gray-900\">\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Best Practice<\/h3>\n <div class=\"mt-2 text-sm text-gray-500\">\n \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a PDF \u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3\">\n <a href=\"\u0e40\u0e1b\u0e35\u0e48\u0e22\u0e21\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c Best practice 69.pdf\" download class=\"w-full inline-flex justify-center rounded-xl border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 sm:w-auto sm:text-sm items-center gap-2\">\n <i class=\"fas fa-download\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 PDF\n <\/a>\n <button type=\"button\" onclick=\"closeDownloadModal()\" class=\"mt-3 w-full inline-flex justify-center rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm transition\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ Modal logic\n function openDownloadModal(e) {\n if(e) e.preventDefault();\n document.getElementById('downloadModal').classList.remove('hidden');\n }\n function closeDownloadModal() {\n document.getElementById('downloadModal').classList.add('hidden');\n }\n\n \/\/ Mobile Menu logic\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n mobileMenuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n\n \/\/ Close mobile menu on click link\n document.querySelectorAll('#mobileMenu a').forEach(link => {\n link.addEventListener('click', () => mobileMenu.classList.add('hidden'));\n });\n\n \/\/ Navbar Scroll effect\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n if (window.scrollY > 50) {\n nav.classList.add('bg-white\/95', 'shadow-md');\n } else {\n nav.classList.remove('bg-white\/95', 'shadow-md');\n }\n });\n\n \/\/ Intersection Observer for animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<style>\n \/* \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e04\u0e25\u0e38\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e31\u0e01\u0e29\u0e32\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e2a\u0e48\u0e27\u0e19 (Aspect Ratio) *\/\n .video-container {\n position: relative;\n padding-bottom: 56.25%; \/* \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e2a\u0e48\u0e27\u0e19 16:9 (9 \u0e41\u0e1a\u0e48\u0e07\u0e14\u0e49\u0e27\u0e22 16 = 0.5625) *\/\n height: 0;\n overflow: hidden;\n max-width: 100%;\n background: #000;\n }\n\n \/* \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 iframe \u0e43\u0e2b\u0e49\u0e40\u0e15\u0e47\u0e21\u0e02\u0e19\u0e32\u0e14\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e04\u0e25\u0e38\u0e21 *\/\n .video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n<\/style>\n\n<div class=\"video-container\">\n <iframe \n src=\"https:\/\/drive.google.com\/file\/d\/1xVb31pWJ9C1n5b-vw1K6TcOXWLIUVW_P\/preview\" \n allow=\"autoplay\">\n <\/iframe>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Best Practice – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 \u0e01\u0e2a \u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07…<\/p>\n","protected":false},"author":1,"featured_media":86,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2,6],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3","category-2","category-6"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=82"}],"version-history":[{"count":3,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions\/88"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/media\/86"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}