\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2e\u0e32\u0e25\u0e32\u0e25<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Sarabun', sans-serif;\r\n background-color: transparent; \r\n }\r\n\r\n \/* Modal specific styles *\/\r\n .modal-open {\r\n overflow: hidden;\r\n }\r\n \r\n .modal-overlay {\r\n background-color: rgba(0, 0, 0, 0.75);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n \/* Smooth reveal animation for cards *\/\r\n .course-card {\r\n transition: all 0.3s ease;\r\n }\r\n .course-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2), 0 8px 10px -6px rgba(16, 185, 129, 0.1);\r\n }\r\n \r\n \/* Custom scrollbar for modal content *\/\r\n .modal-content-scroll::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-track {\r\n background: #f1f1f1; \r\n border-radius: 4px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-thumb {\r\n background: #cbd5e1; \r\n border-radius: 4px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8; \r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"p-0 m-0 text-gray-800\">\r\n\r\n <div class=\"w-full bg-white rounded-xl shadow-lg overflow-hidden border border-green-100\">\r\n \r\n \r\n <div class=\"bg-gradient-to-r from-green-600 to-emerald-500 p-5 text-center relative overflow-hidden\">\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/islamic-pattern.png')] opacity-10\"><\/div>\r\n <h2 class=\"relative text-2xl md:text-3xl font-bold text-white mb-2 flex items-center justify-center gap-3 drop-shadow-md\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 \u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35\r\n <\/h2>\r\n <p class=\"relative text-green-50 text-md font-medium\">\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c (\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48 2\/2569)<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 md:p-8 bg-gray-50\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-1')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/2-e1791366544970.png\" alt=\"\u0e2e\u0e32\u0e25\u0e32\u0e25 360\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-101<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e2e\u0e32\u0e25\u0e32\u0e25 360°<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal 360°<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-location-dot text-red-500 mt-1 w-4\"><\/i> <span>\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 40 \u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-green-50 text-green-700 hover:bg-green-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-2')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/3-e1791366454472.png\" alt=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-102<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3 line-clamp-1\">Halal Science: Transforming World<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-location-dot text-red-500 mt-1 w-4\"><\/i> <span>\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 30 \u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-blue-50 text-blue-700 hover:bg-blue-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-4')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/4-e1791366219881.png\" alt=\"\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-teal-100 text-teal-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-104<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal Biotechnology<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-laptop text-teal-500 mt-1 w-4\"><\/i> <span>\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-teal-50 text-teal-700 hover:bg-teal-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-3')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/5-e1791365855277.png\" alt=\"\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-103<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal Food Management<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-laptop text-orange-500 mt-1 w-4\"><\/i> <span>\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-orange-50 text-orange-700 hover:bg-orange-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-6 md:p-8 border-t border-gray-200\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-6\">\r\n <div class=\"text-center lg:text-left flex-1\">\r\n <p class=\"text-gray-800 font-bold flex items-center gap-2 justify-center lg:justify-start text-lg\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-amber-500 text-xl\"><\/i> \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e19\u0e07\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\r\n <\/p>\r\n <div class=\"flex items-baseline justify-center lg:justify-start gap-2 mt-2\">\r\n <span class=\"text-gray-600 font-medium\">\u0e20\u0e32\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/span>\r\n <span class=\"text-2xl font-bold text-red-600\">5 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569<\/span>\r\n <\/div>\r\n <p class=\"text-sm text-gray-500 mt-2 bg-gray-50 inline-block px-4 py-2 rounded-full border border-gray-100\">\r\n <i class=\"fa-solid fa-circle-info text-blue-400 mr-1\"><\/i> \u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e19\u0e35\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e08\u0e30\u0e19\u0e33\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e44\u0e1b\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"w-full lg:w-auto\">\r\n <div class=\"bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border border-green-100 text-center\">\r\n <p class=\"text-sm font-bold text-green-800 mb-3\">\u0e2a\u0e41\u0e01\u0e19 QR Code \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07<\/p>\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full bg-green-600 hover:bg-green-700 text-white text-center font-bold py-4 px-8 rounded-xl transition duration-300 shadow-lg shadow-green-600\/30 flex items-center justify-center gap-3 text-lg transform hover:-translate-y-1\">\r\n <i class=\"fa-solid fa-pen-to-square text-xl\"><\/i> \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\r\n <\/a>\r\n <p class=\"mt-3 text-xs text-gray-500 font-mono\">link.psu.th\/RfS4rv<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-8 pt-6 border-t border-gray-200\">\r\n <h4 class=\"font-bold text-gray-800 mb-4 flex items-center gap-2\"><i class=\"fa-solid fa-calendar-days text-blue-600\"><\/i> \u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm\">\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">5 \u0e15.\u0e04. - 5 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">2 - 22 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">9 - 22 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a (SIS) (\u0e19\u0e28.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48)<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">20 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e1c\u0e48\u0e32\u0e19 (SIS) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e28.\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 bg-green-50 p-4 rounded-lg border border-green-200 text-center\">\r\n <p class=\"text-green-800 font-bold text-lg\"><i class=\"fa-regular fa-calendar-check mr-2 text-green-600\"><\/i> 16 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569 - \u0e27\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e20\u0e32\u0e04 2\/2569<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-8 flex flex-wrap justify-center gap-6 text-sm text-gray-600 pt-6 border-t border-dashed border-gray-300\">\r\n <a href=\"https:\/\/halalinst.psu.ac.th\/\" target=\"_blank\" class=\"flex items-center gap-2 hover:text-blue-600 transition-colors\"><i class=\"fa-solid fa-globe text-blue-500\"><\/i> halalinst.psu.ac.th<\/a>\r\n <a href=\"mailto:halinst.psu@gmail.com\" class=\"flex items-center gap-2 hover:text-red-600 transition-colors\"><i class=\"fa-solid fa-envelope text-red-500\"><\/i> halinst.psu@gmail.com<\/a>\r\n <a href=\"https:\/\/fb.me\/halalpsu\" target=\"_blank\" class=\"flex items-center gap-2 hover:text-blue-800 transition-colors\"><i class=\"fa-brands fa-facebook text-blue-700 text-lg\"><\/i> fb.me\/halalpsu<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-container\">\r\n \r\n \r\n <div id=\"modal-course-1\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-1')\"><\/div>\r\n \r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-green-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-green-800 flex items-center gap-2\">\r\n <span class=\"bg-green-600 text-white px-2 py-1 rounded text-sm\">842-101<\/span> \u0e2e\u0e32\u0e25\u0e32\u0e25 360°\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-1')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n \r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/2-e1791366544970.png\" alt=\"\u0e2e\u0e32\u0e25\u0e32\u0e25 360\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n \r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e2e\u0e32\u0e25\u0e32\u0e25 360°<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal 360°<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-purple-200\">\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-green-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 09.00 - 11.50 \u0e19.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2 mt-2 pt-2 border-t border-gray-200\">\r\n <i class=\"fa-solid fa-location-dot text-red-500 mt-1\"><\/i>\r\n <span>\u0e13 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \/ \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e14\u0e23.\u0e0b\u0e39\u0e40\u0e1f\u0e35\u0e22\u0e19\u0e32 \u0e0a\u0e32\u0e23\u0e35\u0e41\u0e0b<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 \u0e08\u0e33\u0e19\u0e27\u0e19 40 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-2\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-2')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-blue-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-blue-800 flex items-center gap-2\">\r\n <span class=\"bg-blue-600 text-white px-2 py-1 rounded text-sm\">842-102<\/span> \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-2')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/3-e1791366454472.png\" alt=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Science: Transforming World<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-purple-200\">\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-blue-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <div>\r\n <p><strong>\u0e27\u0e31\u0e19\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c<\/strong> \u0e40\u0e27\u0e25\u0e32 15.00 - 17.00 \u0e19.<\/p>\r\n <p><strong>\u0e27\u0e31\u0e19\u0e1e\u0e24\u0e2b\u0e31\u0e2a\u0e1a\u0e14\u0e35<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.00 \u0e19.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-start gap-2 mt-2 pt-2 border-t border-gray-200\">\r\n <i class=\"fa-solid fa-location-dot text-red-500 mt-1\"><\/i>\r\n <div>\r\n <p>\u0e13 \u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 (\u0e0a\u0e31\u0e49\u0e19 8)<\/p>\r\n <p>\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25 (\u0e0a\u0e31\u0e49\u0e19 7)<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e27\u0e34\u0e08\u0e31\u0e22\u0e14\u0e49\u0e32\u0e19\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e<\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e14\u0e23.\u0e19\u0e32\u0e2d\u0e35\u0e21 \u0e2b\u0e21\u0e31\u0e14\u0e2a\u0e30\u0e2b\u0e23\u0e34<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e08\u0e33\u0e19\u0e27\u0e19 30 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-3\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-3')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-orange-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-orange-800 flex items-center gap-2\">\r\n <span class=\"bg-orange-600 text-white px-2 py-1 rounded text-sm\">842-103<\/span> \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-3')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/5-e1791365855277.png\" alt=\"\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Food Management<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-emerald-200\"><i class=\"fa-solid fa-laptop text-xs mr-1\"><\/i> \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-orange-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li class=\"flex flex-col gap-1\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e2d\u0e31\u0e07\u0e04\u0e32\u0e23<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-600 ml-[85px]\"><i class=\"fa-solid fa-chalkboard-user mr-1\"><\/i> \u0e1c\u0e28.\u0e14\u0e23.\u0e2d\u0e17\u0e34\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e40\u0e2a\u0e35\u0e22\u0e21\u0e44\u0e2b\u0e21 \u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/li>\r\n <li class=\"flex flex-col gap-1 mt-1 pt-2 border-t border-gray-200\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 02<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-600 ml-[85px]\"><i class=\"fa-solid fa-chalkboard-user mr-1\"><\/i> \u0e14\u0e23.\u0e14\u0e23.\u0e19\u0e32\u0e2d\u0e35\u0e21 \u0e2b\u0e21\u0e31\u0e14\u0e2a\u0e30\u0e2b\u0e23\u0e34 \u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 \u0e08\u0e33\u0e19\u0e27\u0e19 100 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-4\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-4')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-teal-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-teal-800 flex items-center gap-2\">\r\n <span class=\"bg-teal-600 text-white px-2 py-1 rounded text-sm\">842-104<\/span> \u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-4')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/4-e1791366219881.png\" alt=\"\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Biotechnology<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-emerald-200\"><i class=\"fa-solid fa-laptop text-xs mr-1\"><\/i> \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-teal-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center text-teal-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e1c\u0e28.\u0e14\u0e23.\u0e2d\u0e17\u0e34\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e40\u0e2a\u0e35\u0e22\u0e21\u0e44\u0e2b\u0e21<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 \u0e08\u0e33\u0e19\u0e27\u0e19 100 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Modal functions\r\n function openModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n const modalContent = modal.querySelector('div.relative');\r\n \r\n \/\/ Show modal\r\n modal.classList.remove('hidden');\r\n \r\n \/\/ Trigger animation after a brief delay to allow display:block to apply\r\n setTimeout(() => {\r\n modal.classList.remove('opacity-0');\r\n modal.classList.add('opacity-100');\r\n modalContent.classList.remove('scale-95');\r\n modalContent.classList.add('scale-100');\r\n }, 10);\r\n \r\n \/\/ Prevent body scrolling\r\n document.body.classList.add('modal-open');\r\n }\r\n\r\n function closeModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n const modalContent = modal.querySelector('div.relative');\r\n \r\n \/\/ Start exit animation\r\n modal.classList.remove('opacity-100');\r\n modal.classList.add('opacity-0');\r\n modalContent.classList.remove('scale-100');\r\n modalContent.classList.add('scale-95');\r\n \r\n \/\/ Hide modal after animation completes\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 300); \/\/ matches duration-300\r\n \r\n \/\/ Restore body scrolling\r\n document.body.classList.remove('modal-open');\r\n }\r\n\r\n \/\/ Close modal when pressing Escape key\r\n document.addEventListener('keydown', function(event) {\r\n if (event.key === \"Escape\") {\r\n const modals = document.querySelectorAll('[id^=\"modal-course-\"]');\r\n modals.forEach(modal => {\r\n if (!modal.classList.contains('hidden')) {\r\n closeModal(modal.id);\r\n }\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e6a718 elementor-widget elementor-widget-text-editor\" data-id=\"0e6a718\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"font-family: Arial, sans-serif; width: 100%; box-sizing: border-box; margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background-color: #fff;\"><h3 style=\"color: #333; margin-top: 0; margin-bottom: 15px; font-size: 18px; border-bottom: 2px solid #0056b3; padding-bottom: 10px; display: inline-block;\">\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c<\/h3><ul style=\"list-style-type: none; padding-left: 0; margin: 0;\"><li style=\"margin-bottom: 12px; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">Email: <\/strong><a style=\"color: #0056b3; text-decoration: none;\" href=\"mailto:halinst.psu@gmail.com\">halinst.psu@gmail.com<\/a><\/div><\/li><li style=\"margin-bottom: 12px; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">Facebook Inbox: <\/strong><a style=\"color: #0056b3; text-decoration: none;\" href=\"https:\/\/fb.me\/halalpsu\" target=\"_blank\" rel=\"noopener noreferrer\">\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c<\/a><\/div><\/li><li style=\"margin-bottom: 0; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">\u0e42\u0e17\u0e23: <\/strong><a style=\"color: #333; text-decoration: none;\" href=\"tel:074289296\">074-28 9296<\/a><\/div><\/li><\/ul><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e40\u0e1b\u0e34\u0e14\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 \u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c (\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48 2\/2569) \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-101 \u0e2e\u0e32\u0e25\u0e32\u0e25 360° Halal 360° 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 \u0e23\u0e31\u0e1a 40 \u0e04\u0e19 \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-102 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01 Halal Science: Transforming World 3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e23\u0e31\u0e1a 30 \u0e04\u0e19 \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-104 \u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25 Halal Biotechnology 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2) \u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-103 \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25 Halal Food Management 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2) \u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e19\u0e07\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e20\u0e32\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 5 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569 \u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e19\u0e35\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e08\u0e30\u0e19\u0e33\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e44\u0e1b \u0e2a\u0e41\u0e01\u0e19 QR Code \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07 \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 link.psu.th\/RfS4rv \u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d 5 \u0e15.\u0e04. – 5 \u0e1e.\u0e22. 69 \u0e2a\u0e33\u0e23\u0e27\u0e08\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) 2 – 22 \u0e1e.\u0e22. 69<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1,82],"tags":[],"class_list":["post-7691","post","type-post","status-publish","format-standard","hentry","category-press-release-th","category-course-th"],"_links":{"self":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7691"}],"version-history":[{"count":10,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691\/revisions"}],"predecessor-version":[{"id":7707,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691\/revisions\/7707"}],"wp:attachment":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2e\u0e32\u0e25\u0e32\u0e25<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Sarabun', sans-serif;\r\n background-color: transparent; \r\n }\r\n\r\n \/* Modal specific styles *\/\r\n .modal-open {\r\n overflow: hidden;\r\n }\r\n \r\n .modal-overlay {\r\n background-color: rgba(0, 0, 0, 0.75);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n \/* Smooth reveal animation for cards *\/\r\n .course-card {\r\n transition: all 0.3s ease;\r\n }\r\n .course-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2), 0 8px 10px -6px rgba(16, 185, 129, 0.1);\r\n }\r\n \r\n \/* Custom scrollbar for modal content *\/\r\n .modal-content-scroll::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-track {\r\n background: #f1f1f1; \r\n border-radius: 4px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-thumb {\r\n background: #cbd5e1; \r\n border-radius: 4px;\r\n }\r\n .modal-content-scroll::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8; \r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"p-0 m-0 text-gray-800\">\r\n\r\n <div class=\"w-full bg-white rounded-xl shadow-lg overflow-hidden border border-green-100\">\r\n \r\n \r\n <div class=\"bg-gradient-to-r from-green-600 to-emerald-500 p-5 text-center relative overflow-hidden\">\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/islamic-pattern.png')] opacity-10\"><\/div>\r\n <h2 class=\"relative text-2xl md:text-3xl font-bold text-white mb-2 flex items-center justify-center gap-3 drop-shadow-md\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 \u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35\r\n <\/h2>\r\n <p class=\"relative text-green-50 text-md font-medium\">\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c (\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48 2\/2569)<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 md:p-8 bg-gray-50\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-1')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/2-e1791366544970.png\" alt=\"\u0e2e\u0e32\u0e25\u0e32\u0e25 360\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-101<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e2e\u0e32\u0e25\u0e32\u0e25 360°<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal 360°<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-location-dot text-red-500 mt-1 w-4\"><\/i> <span>\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 40 \u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-green-50 text-green-700 hover:bg-green-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-2')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/3-e1791366454472.png\" alt=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-102<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3 line-clamp-1\">Halal Science: Transforming World<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-location-dot text-red-500 mt-1 w-4\"><\/i> <span>\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 30 \u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-blue-50 text-blue-700 hover:bg-blue-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-4')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/4-e1791366219881.png\" alt=\"\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-teal-100 text-teal-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-104<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal Biotechnology<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-laptop text-teal-500 mt-1 w-4\"><\/i> <span>\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-teal-50 text-teal-700 hover:bg-teal-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"course-card bg-white rounded-xl border border-gray-200 overflow-hidden cursor-pointer shadow-sm flex flex-col h-full\" onclick=\"openModal('modal-course-3')\">\r\n <div class=\"aspect-[3\/4] w-full overflow-hidden border-b border-gray-100\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/5-e1791365855277.png\" alt=\"\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n <div class=\"p-5 flex flex-col flex-grow justify-between\">\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded-full mb-3\">\u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-103<\/span>\r\n <h3 class=\"text-xl font-bold text-gray-900 leading-tight mb-2\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25<\/h3>\r\n <p class=\"text-sm text-gray-500 mb-4 italic border-b pb-3\">Halal Food Management<\/p>\r\n \r\n <div class=\"text-sm text-gray-700 space-y-2 mb-4\">\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-book text-emerald-500 mt-1 w-4\"><\/i> <span class=\"font-medium\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-laptop text-orange-500 mt-1 w-4\"><\/i> <span>\u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span><\/p>\r\n <p class=\"flex items-start gap-3\"><i class=\"fa-solid fa-users text-blue-500 mt-1 w-4\"><\/i> <span>\u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-auto pt-4 text-center border-t border-gray-100\">\r\n <span class=\"inline-flex items-center justify-center w-full bg-orange-50 text-orange-700 hover:bg-orange-600 hover:text-white font-medium py-2 rounded transition-colors duration-300\">\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 <i class=\"fa-solid fa-arrow-right-long text-xs ml-2\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-6 md:p-8 border-t border-gray-200\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-6\">\r\n <div class=\"text-center lg:text-left flex-1\">\r\n <p class=\"text-gray-800 font-bold flex items-center gap-2 justify-center lg:justify-start text-lg\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-amber-500 text-xl\"><\/i> \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e19\u0e07\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\r\n <\/p>\r\n <div class=\"flex items-baseline justify-center lg:justify-start gap-2 mt-2\">\r\n <span class=\"text-gray-600 font-medium\">\u0e20\u0e32\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/span>\r\n <span class=\"text-2xl font-bold text-red-600\">5 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569<\/span>\r\n <\/div>\r\n <p class=\"text-sm text-gray-500 mt-2 bg-gray-50 inline-block px-4 py-2 rounded-full border border-gray-100\">\r\n <i class=\"fa-solid fa-circle-info text-blue-400 mr-1\"><\/i> \u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e19\u0e35\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e08\u0e30\u0e19\u0e33\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e44\u0e1b\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"w-full lg:w-auto\">\r\n <div class=\"bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border border-green-100 text-center\">\r\n <p class=\"text-sm font-bold text-green-800 mb-3\">\u0e2a\u0e41\u0e01\u0e19 QR Code \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07<\/p>\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full bg-green-600 hover:bg-green-700 text-white text-center font-bold py-4 px-8 rounded-xl transition duration-300 shadow-lg shadow-green-600\/30 flex items-center justify-center gap-3 text-lg transform hover:-translate-y-1\">\r\n <i class=\"fa-solid fa-pen-to-square text-xl\"><\/i> \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\r\n <\/a>\r\n <p class=\"mt-3 text-xs text-gray-500 font-mono\">link.psu.th\/RfS4rv<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-8 pt-6 border-t border-gray-200\">\r\n <h4 class=\"font-bold text-gray-800 mb-4 flex items-center gap-2\"><i class=\"fa-solid fa-calendar-days text-blue-600\"><\/i> \u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm\">\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">5 \u0e15.\u0e04. - 5 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15)<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">2 - 22 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">9 - 22 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a (SIS) (\u0e19\u0e28.\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48)<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col\">\r\n <span class=\"text-blue-600 font-bold mb-1 text-xs\">20 \u0e1e.\u0e22. 69<\/span>\r\n <span class=\"text-gray-700\">\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e1c\u0e48\u0e32\u0e19 (SIS) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e19\u0e28.\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 bg-green-50 p-4 rounded-lg border border-green-200 text-center\">\r\n <p class=\"text-green-800 font-bold text-lg\"><i class=\"fa-regular fa-calendar-check mr-2 text-green-600\"><\/i> 16 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569 - \u0e27\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e0a\u0e31\u0e49\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e20\u0e32\u0e04 2\/2569<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-8 flex flex-wrap justify-center gap-6 text-sm text-gray-600 pt-6 border-t border-dashed border-gray-300\">\r\n <a href=\"https:\/\/halalinst.psu.ac.th\/\" target=\"_blank\" class=\"flex items-center gap-2 hover:text-blue-600 transition-colors\"><i class=\"fa-solid fa-globe text-blue-500\"><\/i> halalinst.psu.ac.th<\/a>\r\n <a href=\"mailto:halinst.psu@gmail.com\" class=\"flex items-center gap-2 hover:text-red-600 transition-colors\"><i class=\"fa-solid fa-envelope text-red-500\"><\/i> halinst.psu@gmail.com<\/a>\r\n <a href=\"https:\/\/fb.me\/halalpsu\" target=\"_blank\" class=\"flex items-center gap-2 hover:text-blue-800 transition-colors\"><i class=\"fa-brands fa-facebook text-blue-700 text-lg\"><\/i> fb.me\/halalpsu<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-container\">\r\n \r\n \r\n <div id=\"modal-course-1\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-1')\"><\/div>\r\n \r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-green-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-green-800 flex items-center gap-2\">\r\n <span class=\"bg-green-600 text-white px-2 py-1 rounded text-sm\">842-101<\/span> \u0e2e\u0e32\u0e25\u0e32\u0e25 360°\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-1')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n \r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/2-e1791366544970.png\" alt=\"\u0e2e\u0e32\u0e25\u0e32\u0e25 360\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n \r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e2e\u0e32\u0e25\u0e32\u0e25 360°<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal 360°<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-purple-200\">\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-green-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 09.00 - 11.50 \u0e19.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2 mt-2 pt-2 border-t border-gray-200\">\r\n <i class=\"fa-solid fa-location-dot text-red-500 mt-1\"><\/i>\r\n <span>\u0e13 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \/ \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e27\u0e21 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e14\u0e23.\u0e0b\u0e39\u0e40\u0e1f\u0e35\u0e22\u0e19\u0e32 \u0e0a\u0e32\u0e23\u0e35\u0e41\u0e0b<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 \u0e08\u0e33\u0e19\u0e27\u0e19 40 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-2\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-2')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-blue-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-blue-800 flex items-center gap-2\">\r\n <span class=\"bg-blue-600 text-white px-2 py-1 rounded text-sm\">842-102<\/span> \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-2')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/3-e1791366454472.png\" alt=\"\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Science: Transforming World<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-purple-200\">\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-blue-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <div>\r\n <p><strong>\u0e27\u0e31\u0e19\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c<\/strong> \u0e40\u0e27\u0e25\u0e32 15.00 - 17.00 \u0e19.<\/p>\r\n <p><strong>\u0e27\u0e31\u0e19\u0e1e\u0e24\u0e2b\u0e31\u0e2a\u0e1a\u0e14\u0e35<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.00 \u0e19.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-start gap-2 mt-2 pt-2 border-t border-gray-200\">\r\n <i class=\"fa-solid fa-location-dot text-red-500 mt-1\"><\/i>\r\n <div>\r\n <p>\u0e13 \u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 (\u0e0a\u0e31\u0e49\u0e19 8)<\/p>\r\n <p>\u0e41\u0e25\u0e30\u0e2b\u0e49\u0e2d\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25 (\u0e0a\u0e31\u0e49\u0e19 7)<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e25\u0e30\u0e27\u0e34\u0e08\u0e31\u0e22\u0e14\u0e49\u0e32\u0e19\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e<\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e14\u0e23.\u0e19\u0e32\u0e2d\u0e35\u0e21 \u0e2b\u0e21\u0e31\u0e14\u0e2a\u0e30\u0e2b\u0e23\u0e34<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e08\u0e33\u0e19\u0e27\u0e19 30 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-3\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-3')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-orange-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-orange-800 flex items-center gap-2\">\r\n <span class=\"bg-orange-600 text-white px-2 py-1 rounded text-sm\">842-103<\/span> \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-3')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/5-e1791365855277.png\" alt=\"\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Food Management<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-emerald-200\"><i class=\"fa-solid fa-laptop text-xs mr-1\"><\/i> \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-orange-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li class=\"flex flex-col gap-1\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e2d\u0e31\u0e07\u0e04\u0e32\u0e23<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-600 ml-[85px]\"><i class=\"fa-solid fa-chalkboard-user mr-1\"><\/i> \u0e1c\u0e28.\u0e14\u0e23.\u0e2d\u0e17\u0e34\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e40\u0e2a\u0e35\u0e22\u0e21\u0e44\u0e2b\u0e21 \u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/li>\r\n <li class=\"flex flex-col gap-1 mt-1 pt-2 border-t border-gray-200\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 02<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-600 ml-[85px]\"><i class=\"fa-solid fa-chalkboard-user mr-1\"><\/i> \u0e14\u0e23.\u0e14\u0e23.\u0e19\u0e32\u0e2d\u0e35\u0e21 \u0e2b\u0e21\u0e31\u0e14\u0e2a\u0e30\u0e2b\u0e23\u0e34 \u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 \u0e08\u0e33\u0e19\u0e27\u0e19 100 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"modal-course-4\" class=\"fixed inset-0 z-50 hidden flex items-center justify-center p-4 sm:p-6 opacity-0 transition-opacity duration-300\">\r\n <div class=\"absolute inset-0 modal-overlay\" onclick=\"closeModal('modal-course-4')\"><\/div>\r\n <div class=\"relative bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] flex flex-col transform scale-95 transition-transform duration-300\">\r\n \r\n <div class=\"flex items-center justify-between p-4 border-b border-gray-200 bg-teal-50 rounded-t-xl\">\r\n <h3 class=\"text-xl font-bold text-teal-800 flex items-center gap-2\">\r\n <span class=\"bg-teal-600 text-white px-2 py-1 rounded text-sm\">842-104<\/span> \u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\r\n <\/h3>\r\n <button onclick=\"closeModal('modal-course-4')\" class=\"text-gray-500 hover:text-red-500 focus:outline-none transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200\">\r\n <i class=\"fa-solid fa-xmark text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"p-0 overflow-y-auto modal-content-scroll flex-grow flex flex-col lg:flex-row\">\r\n <div class=\"w-full lg:w-[65%] bg-gray-100 flex items-center justify-center p-4\">\r\n <img decoding=\"async\" src=\"https:\/\/halalinst.psu.ac.th\/th\/wp-content\/uploads\/2026\/10\/4-e1791366219881.png\" alt=\"\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25\" class=\"w-full max-h-[80vh] object-contain rounded shadow-sm\">\r\n <\/div>\r\n <div class=\"w-full lg:w-[35%] p-6 space-y-5 border-l border-gray-200\">\r\n \r\n <div>\r\n <h4 class=\"text-sm font-bold text-gray-500 uppercase tracking-wider mb-1\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32<\/h4>\r\n <p class=\"text-2xl font-bold text-gray-900\">\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25<\/p>\r\n <p class=\"text-gray-600 font-medium italic mb-3\">Halal Biotechnology<\/p>\r\n <div class=\"flex flex-wrap gap-2 mb-4\">\r\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200\">3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15<\/span>\r\n <span class=\"bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-emerald-200\"><i class=\"fa-solid fa-laptop text-xs mr-1\"><\/i> \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-4 rounded-lg border border-gray-100\">\r\n <h4 class=\"font-bold text-gray-800 mb-2 border-b pb-1\"><i class=\"fa-regular fa-clock text-teal-600 mr-2\"><\/i>\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h4>\r\n <ul class=\"space-y-2 text-sm\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"font-semibold bg-gray-200 px-2 rounded text-gray-700 min-w-[75px] text-center\">Section 01<\/span>\r\n <span><strong>\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18<\/strong> \u0e40\u0e27\u0e25\u0e32 13.00 - 15.50 \u0e19.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-chalkboard-user text-blue-600 mr-2\"><\/i>\u0e1c\u0e39\u0e49\u0e2a\u0e2d\u0e19<\/h4>\r\n <div class=\"flex items-center gap-3 bg-white border border-gray-200 p-3 rounded-lg\">\r\n <div class=\"w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center text-teal-600\">\r\n <i class=\"fa-solid fa-user-tie text-lg\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"font-bold text-gray-900\">\u0e1c\u0e28.\u0e14\u0e23.\u0e2d\u0e17\u0e34\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e40\u0e2a\u0e35\u0e22\u0e21\u0e44\u0e2b\u0e21<\/p>\r\n <p class=\"text-xs text-gray-500\">\u0e41\u0e25\u0e30\u0e04\u0e13\u0e30<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-2\"><i class=\"fa-solid fa-users-viewfinder text-orange-500 mr-2\"><\/i>\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22<\/h4>\r\n <p class=\"text-sm bg-orange-50 text-orange-800 p-3 rounded border border-orange-100\">\r\n \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e21.\u0e2d. \u0e17\u0e38\u0e01\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 (\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b)<br>\r\n <strong>5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 \u0e08\u0e33\u0e19\u0e27\u0e19 100 \u0e04\u0e19<\/strong>\r\n <\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl flex justify-end\">\r\n <a href=\"https:\/\/link.psu.th\/RfS4rv\" target=\"_blank\" class=\"bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-pen-to-square\"><\/i> \u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Modal functions\r\n function openModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n const modalContent = modal.querySelector('div.relative');\r\n \r\n \/\/ Show modal\r\n modal.classList.remove('hidden');\r\n \r\n \/\/ Trigger animation after a brief delay to allow display:block to apply\r\n setTimeout(() => {\r\n modal.classList.remove('opacity-0');\r\n modal.classList.add('opacity-100');\r\n modalContent.classList.remove('scale-95');\r\n modalContent.classList.add('scale-100');\r\n }, 10);\r\n \r\n \/\/ Prevent body scrolling\r\n document.body.classList.add('modal-open');\r\n }\r\n\r\n function closeModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n const modalContent = modal.querySelector('div.relative');\r\n \r\n \/\/ Start exit animation\r\n modal.classList.remove('opacity-100');\r\n modal.classList.add('opacity-0');\r\n modalContent.classList.remove('scale-100');\r\n modalContent.classList.add('scale-95');\r\n \r\n \/\/ Hide modal after animation completes\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 300); \/\/ matches duration-300\r\n \r\n \/\/ Restore body scrolling\r\n document.body.classList.remove('modal-open');\r\n }\r\n\r\n \/\/ Close modal when pressing Escape key\r\n document.addEventListener('keydown', function(event) {\r\n if (event.key === \"Escape\") {\r\n const modals = document.querySelectorAll('[id^=\"modal-course-\"]');\r\n modals.forEach(modal => {\r\n if (!modal.classList.contains('hidden')) {\r\n closeModal(modal.id);\r\n }\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e6a718 elementor-widget elementor-widget-text-editor\" data-id=\"0e6a718\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"font-family: Arial, sans-serif; width: 100%; box-sizing: border-box; margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background-color: #fff;\"><h3 style=\"color: #333; margin-top: 0; margin-bottom: 15px; font-size: 18px; border-bottom: 2px solid #0056b3; padding-bottom: 10px; display: inline-block;\">\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c<\/h3><ul style=\"list-style-type: none; padding-left: 0; margin: 0;\"><li style=\"margin-bottom: 12px; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">Email: <\/strong><a style=\"color: #0056b3; text-decoration: none;\" href=\"mailto:halinst.psu@gmail.com\">halinst.psu@gmail.com<\/a><\/div><\/li><li style=\"margin-bottom: 12px; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">Facebook Inbox: <\/strong><a style=\"color: #0056b3; text-decoration: none;\" href=\"https:\/\/fb.me\/halalpsu\" target=\"_blank\" rel=\"noopener noreferrer\">\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c<\/a><\/div><\/li><li style=\"margin-bottom: 0; display: flex; align-items: flex-start;\"><div><strong style=\"color: #555;\">\u0e42\u0e17\u0e23: <\/strong><a style=\"color: #333; text-decoration: none;\" href=\"tel:074289296\">074-28 9296<\/a><\/div><\/li><\/ul><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e40\u0e1b\u0e34\u0e14\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 \u0e23\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e2a\u0e23\u0e35 \u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e2a\u0e07\u0e02\u0e25\u0e32\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c (\u0e20\u0e32\u0e04\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48 2\/2569) \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-101 \u0e2e\u0e32\u0e25\u0e32\u0e25 360° Halal 360° 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35 \u0e23\u0e31\u0e1a 40 \u0e04\u0e19 \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-102 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e42\u0e25\u0e01 Halal Science: Transforming World 3(2)-2-5 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e2b\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48 \u0e23\u0e31\u0e1a 30 \u0e04\u0e19 \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-104 \u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2e\u0e32\u0e25\u0e32\u0e25 Halal Biotechnology 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2) \u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e23\u0e2b\u0e31\u0e2a\u0e27\u0e34\u0e0a\u0e32: 842-103 \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e2e\u0e32\u0e25\u0e32\u0e25 Halal Food Management 3(3)-0-6 \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e01\u0e34\u0e15 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c (LMS2) \u0e23\u0e31\u0e1a 100 \u0e04\u0e19 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) \u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e19\u0e07\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e20\u0e32\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 5 \u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19 2569 \u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2a\u0e33\u0e23\u0e27\u0e08\u0e19\u0e35\u0e49\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2e\u0e32\u0e25\u0e32\u0e25\u0e08\u0e30\u0e19\u0e33\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e44\u0e1b \u0e2a\u0e41\u0e01\u0e19 QR Code \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07 \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 link.psu.th\/RfS4rv \u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d 5 \u0e15.\u0e04. – 5 \u0e1e.\u0e22. 69 \u0e2a\u0e33\u0e23\u0e27\u0e08\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e02\u0e49\u0e32\u0e21\u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15 (5 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15) 2 – 22 \u0e1e.\u0e22. 69<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1,82],"tags":[],"class_list":["post-7691","post","type-post","status-publish","format-standard","hentry","category-press-release-th","category-course-th"],"_links":{"self":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7691"}],"version-history":[{"count":10,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691\/revisions"}],"predecessor-version":[{"id":7707,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=\/wp\/v2\/posts\/7691\/revisions\/7707"}],"wp:attachment":[{"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/halalinst.psu.ac.th\/th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}