{"id":154111,"date":"2026-06-29T14:36:08","date_gmt":"2026-06-29T07:36:08","guid":{"rendered":"https:\/\/www.pbru.ac.th\/pbru\/?page_id=154111"},"modified":"2026-07-11T11:20:26","modified_gmt":"2026-07-11T04:20:26","slug":"parinya2569","status":"publish","type":"page","link":"https:\/\/www.pbru.ac.th\/pbru\/parinya2569","title":{"rendered":"\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 | PBRU Graduation Portal<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- Google Fonts: Kanit -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <!-- FontAwesome for beautiful academic icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n pbru: {\r\n green: '#005A36', \/* \u0e40\u0e02\u0e35\u0e22\u0e27\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 *\/\r\n yellow: '#F9D423', \/* \u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e07\u0e17\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 *\/\r\n darkgreen: '#003d24',\r\n gold: '#C5A059',\r\n cream: '#F4F6F1'\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Kanit', 'sans-serif'],\r\n serif: ['Kanit', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body {\r\n font-family: 'Kanit', sans-serif;\r\n }\r\n .content-font {\r\n font-family: 'Kanit', sans-serif;\r\n }\r\n \/* Custom animation for gradient background *\/\r\n @keyframes gradientBG {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n .animated-bg {\r\n background: linear-gradient(-45deg, #005A36, #003d24, #1e3a1e, #C5A059);\r\n background-size: 400% 400%;\r\n animation: gradientBG 15s ease infinite;\r\n }\r\n \/* Card hover effects *\/\r\n .premium-card {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .premium-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 12px 30px rgba(0, 90, 54, 0.15);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800 selection:bg-pbru-green selection:text-white overflow-x-hidden\">\r\n\r\n <!-- TOP NAVIGATION \/ HEADER -->\r\n <header class=\"sticky top-0 z-50 bg-white\/95 backdrop-blur-md border-b border-gray-100 shadow-sm\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-center py-4 md:h-20 gap-4\">\r\n <!-- Logo & Title -->\r\n <div class=\"flex items-center space-x-3 mr-4\">\r\n <div class=\"w-12 h-12 bg-gradient-to-tr from-pbru-green to-pbru-yellow rounded-xl flex items-center justify-center text-white shadow-md shrink-0\">\r\n <i class=\"fa-solid fa-graduation-cap text-2xl text-white\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] sm:text-xs font-semibold tracking-wider text-pbru-green block uppercase\">PBRU Graduation Portal<\/span>\r\n <span class=\"text-xs sm:text-sm md:text-base lg:text-lg font-bold text-gray-900 block leading-tight\">\r\n \u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Action Buttons (Right Aligned) -->\r\n <div class=\"flex flex-wrap items-center gap-3 shrink-0\">\r\n <!-- PDF View Button -->\r\n <a href=\"#pdf-viewer\"\r\n class=\"inline-flex items-center justify-center px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold bg-amber-50 hover:bg-amber-100 text-amber-900 border border-amber-200 transition-all transform hover:-translate-y-0.5\">\r\n <i class=\"fa-solid fa-file-pdf mr-2 text-red-600\"><\/i> \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\r\n <\/a>\r\n \r\n <!-- CTA Register Button -->\r\n <a href=\"https:\/\/reg.pbru.ac.th\/register\/\" target=\"_blank\" rel=\"noopener noreferrer\" \r\n class=\"inline-flex items-center justify-center px-4 py-2.5 rounded-xl text-xs sm:text-sm font-semibold bg-pbru-green text-white hover:bg-pbru-darkgreen shadow-md shadow-emerald-900\/10 hover:shadow-emerald-900\/20 transition-all transform hover:-translate-y-0.5\">\r\n <i class=\"fa-solid fa-user-check mr-2\"><\/i> \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- HERO SECTION -->\r\n <section class=\"relative animated-bg text-white overflow-hidden py-16 sm:py-24\">\r\n <!-- Background Elements -->\r\n <div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\r\n \r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\r\n \r\n <!-- Hero Text Info -->\r\n <div class=\"lg:col-span-7 space-y-6 text-center lg:text-left\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white\/10 text-pbru-yellow border border-white\/10 text-xs sm:text-sm font-medium\">\r\n <span class=\"flex h-2 w-2 rounded-full bg-pbru-yellow animate-pulse\"><\/span>\r\n \u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2567 - 2568\r\n <\/div>\r\n \r\n <h1 class=\"text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight tracking-wide\">\r\n \u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 <br class=\"hidden sm:inline\">\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-pbru-yellow via-white to-pbru-yellow\">\r\n \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35\r\n <\/span>\r\n <\/h1>\r\n \r\n <p class=\"text-sm sm:text-base lg:text-lg text-emerald-100\/90 font-serif leading-relaxed max-w-2xl mx-auto lg:mx-0\">\r\n \u0e1e\u0e23\u0e30\u0e1a\u0e32\u0e17\u0e2a\u0e21\u0e40\u0e14\u0e47\u0e08\u0e1e\u0e23\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e31\u0e27 \u0e17\u0e23\u0e07\u0e1e\u0e23\u0e30\u0e01\u0e23\u0e38\u0e13\u0e32\u0e42\u0e1b\u0e23\u0e14\u0e40\u0e01\u0e25\u0e49\u0e32\u0e42\u0e1b\u0e23\u0e14\u0e01\u0e23\u0e30\u0e2b\u0e21\u0e48\u0e2d\u0e21\u0e43\u0e2b\u0e49 \u0e1e\u0e25\u0e40\u0e2d\u0e01 \u0e2a\u0e38\u0e23\u0e22\u0e38\u0e17\u0e18\u0e4c \u0e08\u0e38\u0e25\u0e32\u0e19\u0e19\u0e17\u0e4c \u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e2d\u0e07\u0e04\u0e21\u0e19\u0e15\u0e23\u0e35 \u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e39\u0e49\u0e41\u0e17\u0e19\u0e1e\u0e23\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e21\u0e2d\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e13 \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e34\u0e23\u0e34\u0e27\u0e23\u0e1b\u0e31\u0e0d\u0e0d\u0e32 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 \u0e42\u0e14\u0e22\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 \u0e21\u0e35\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e1e\u0e34\u0e18\u0e35\u0e08\u0e23\u0e34\u0e07\u0e43\u0e19 <strong class=\"text-pbru-yellow font-sans\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 4 \u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19 \u0e1e.\u0e28. 2569<\/strong>\r\n <\/p>\r\n\r\n <div class=\"pt-4 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\r\n <a href=\"#schedule\" class=\"px-8 py-3.5 bg-pbru-yellow text-pbru-darkgreen rounded-xl text-base font-bold hover:bg-yellow-400 transition-all shadow-lg hover:shadow-yellow-500\/20 text-center\">\r\n \u0e14\u0e39\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23 <i class=\"fa-solid fa-arrow-down ml-2\"><\/i>\r\n <\/a>\r\n <a href=\"#pdf-viewer\" class=\"px-8 py-3.5 bg-white\/10 hover:bg-white\/20 border border-white\/20 rounded-xl text-base font-semibold text-white transition-all text-center\">\r\n <i class=\"fa-solid fa-file-pdf mr-2\"><\/i> \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (PDF)\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Hero Registration Status Card -->\r\n <div class=\"lg:col-span-5\">\r\n <div class=\"bg-white\/95 backdrop-blur-lg p-6 sm:p-8 rounded-3xl text-gray-900 shadow-2xl border border-white\/20 relative\">\r\n <div class=\"absolute -top-3 left-1\/2 transform -translate-x-1\/2 whitespace-nowrap px-4 py-1 bg-pbru-yellow text-pbru-darkgreen text-xs font-bold rounded-full shadow-md tracking-wider\">\r\n \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e49\u0e27\r\n <\/div>\r\n \r\n <div class=\"text-center pt-3\">\r\n <span class=\"mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-pbru-green\">\r\n <i class=\"fa-solid fa-circle-check text-3xl\"><\/i>\r\n <\/span>\r\n <h3 class=\"mt-3 text-xl sm:text-2xl font-bold text-pbru-green\">\u0e40\u0e1b\u0e34\u0e14\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e25\u0e49\u0e27<\/h3>\r\n <p class=\"mt-1 text-sm font-semibold text-amber-700\">\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 24 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569<\/p>\r\n <p class=\"mt-2 text-xs sm:text-sm leading-relaxed text-gray-500 font-serif\">\r\n \u0e01\u0e23\u0e38\u0e13\u0e32\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27 \u0e23\u0e30\u0e1a\u0e38\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c \u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 \u0e41\u0e25\u0e30\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"mt-5 grid grid-cols-2 gap-2.5 text-left\">\r\n <div class=\"flex items-center gap-2.5 rounded-xl border border-emerald-100 bg-emerald-50 p-3\">\r\n <span class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-pbru-green text-xs font-bold text-white\">1<\/span>\r\n <span class=\"text-xs font-semibold text-gray-700\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2.5 rounded-xl border border-emerald-100 bg-emerald-50 p-3\">\r\n <span class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-pbru-green text-xs font-bold text-white\">2<\/span>\r\n <span class=\"text-xs font-semibold text-gray-700\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2.5 rounded-xl border border-emerald-100 bg-emerald-50 p-3\">\r\n <span class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-pbru-green text-xs font-bold text-white\">3<\/span>\r\n <span class=\"text-xs font-semibold text-gray-700\">\u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2.5 rounded-xl border border-emerald-100 bg-emerald-50 p-3\">\r\n <span class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-pbru-green text-xs font-bold text-white\">4<\/span>\r\n <span class=\"text-xs font-semibold text-gray-700\">\u0e0a\u0e33\u0e23\u0e30\u0e41\u0e25\u0e30\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e40\u0e07\u0e34\u0e19<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/reg.pbru.ac.th\/register\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mt-5 flex w-full items-center justify-center rounded-xl bg-pbru-green px-5 py-3 text-sm font-bold text-white shadow-md transition-all hover:-translate-y-0.5 hover:bg-pbru-darkgreen\">\r\n <i class=\"fa-solid fa-user-check mr-2\"><\/i> \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\r\n <i class=\"fa-solid fa-up-right-from-square ml-2 text-xs\"><\/i>\r\n <\/a>\r\n\r\n <!-- Mini Details -->\r\n <div class=\"mt-6 pt-6 border-t border-gray-100 space-y-2.5 text-xs sm:text-sm text-gray-600 font-serif\">\r\n <div class=\"flex justify-between items-center\">\r\n <span class=\"font-medium text-gray-900\">\u0e0a\u0e48\u0e27\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27 & \u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14<\/span>\r\n <span class=\"font-sans px-2.5 py-0.5 bg-yellow-100 text-yellow-800 rounded-full font-semibold\">11 - 24 \u0e01.\u0e04. 69<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center\">\r\n <span class=\"font-medium text-gray-900\">\u0e27\u0e31\u0e19\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21\u0e22\u0e48\u0e2d\u0e22 & \u0e0b\u0e49\u0e2d\u0e21\u0e43\u0e2b\u0e0d\u0e48<\/span>\r\n <span class=\"font-sans px-2.5 py-0.5 bg-blue-100 text-blue-800 rounded-full font-semibold\">1 - 2 \u0e01.\u0e22. 69<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between items-center\">\r\n <span class=\"font-medium text-gray-900\">\u0e27\u0e31\u0e19\u0e1e\u0e34\u0e18\u0e35\u0e08\u0e23\u0e34\u0e07 (\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21)<\/span>\r\n <span class=\"font-sans px-2.5 py-0.5 bg-emerald-100 text-emerald-800 rounded-full font-semibold\">4 \u0e01.\u0e22. 69<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Important Note Alert -->\r\n <div class=\"mt-5 p-3.5 bg-amber-50 rounded-2xl border border-amber-100 flex gap-2.5 text-xs text-amber-800 leading-relaxed font-serif\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-base text-amber-600 shrink-0 mt-0.5\"><\/i>\r\n <p><strong>\u0e42\u0e1b\u0e23\u0e14\u0e17\u0e23\u0e32\u0e1a:<\/strong> \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e38\u0e01\u0e04\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c \"\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\" \u0e2b\u0e23\u0e37\u0e2d \"\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\" \u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\u0e01\u0e47\u0e15\u0e32\u0e21<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- MAIN INTERACTIVE HUB (Quick Navigation Tabs) -->\r\n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative -mt-6\">\r\n \r\n <!-- Tab Quick Links Card -->\r\n <div class=\"bg-white rounded-2xl shadow-xl p-4 mb-16 border border-gray-100 grid grid-cols-2 md:grid-cols-4 gap-2\">\r\n <a href=\"#schedule\" class=\"flex flex-col items-center justify-center p-4 rounded-xl hover:bg-emerald-50 text-gray-700 hover:text-pbru-green transition-all group\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-50 group-hover:bg-white flex items-center justify-center text-pbru-green mb-2 shadow-sm transition-all\">\r\n <i class=\"fa-regular fa-calendar-check text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-xs sm:text-sm font-semibold\">\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23<\/span>\r\n <\/a>\r\n <a href=\"#pdf-viewer\" class=\"flex flex-col items-center justify-center p-4 rounded-xl hover:bg-emerald-50 text-gray-700 hover:text-pbru-green transition-all group\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-50 group-hover:bg-white flex items-center justify-center text-pbru-green mb-2 shadow-sm transition-all\">\r\n <i class=\"fa-solid fa-users text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-xs sm:text-sm font-semibold\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 PDF<\/span>\r\n <\/a>\r\n <a href=\"#expenses\" class=\"flex flex-col items-center justify-center p-4 rounded-xl hover:bg-emerald-50 text-gray-700 hover:text-pbru-green transition-all group\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-50 group-hover:bg-white flex items-center justify-center text-pbru-green mb-2 shadow-sm transition-all\">\r\n <i class=\"fa-solid fa-coins text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-xs sm:text-sm font-semibold\">\u0e15\u0e32\u0e23\u0e32\u0e07\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22<\/span>\r\n <\/a>\r\n <a href=\"#checklist\" class=\"flex flex-col items-center justify-center p-4 rounded-xl hover:bg-emerald-50 text-gray-700 hover:text-pbru-green transition-all group\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-50 group-hover:bg-white flex items-center justify-center text-pbru-green mb-2 shadow-sm transition-all\">\r\n <i class=\"fa-solid fa-list-check text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-xs sm:text-sm font-semibold\">\u0e40\u0e0a\u0e47\u0e04\u0e25\u0e34\u0e2a\u0e15\u0e4c\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e15\u0e31\u0e27<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- SECTION: TIMELINE -->\r\n <section id=\"schedule\" class=\"scroll-mt-24 mb-20\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-12\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-pbru-green px-3 py-1 bg-emerald-50 rounded-full\">Roadmap To Graduation<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-3\">\u0e41\u0e1c\u0e19\u0e1c\u0e31\u0e07\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19 & \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e01\u0e32\u0e23<\/h2>\r\n <p class=\"text-sm sm:text-base text-gray-500 font-serif mt-2\">\u0e42\u0e1b\u0e23\u0e14\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e15\u0e32\u0e21\u0e44\u0e17\u0e21\u0e4c\u0e44\u0e25\u0e19\u0e4c\u0e19\u0e35\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e04\u0e23\u0e48\u0e07\u0e04\u0e23\u0e31\u0e14 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e02\u0e2d\u0e07\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e38\u0e01\u0e17\u0e48\u0e32\u0e19<\/p>\r\n <\/div>\r\n\r\n <!-- Vertical \/ Responsive Timeline -->\r\n <div class=\"relative max-w-5xl mx-auto\">\r\n <!-- Center Line for Desktop -->\r\n <div class=\"absolute left-4 md:left-1\/2 top-0 bottom-0 w-1 bg-gradient-to-b from-pbru-green via-pbru-yellow to-gray-200 transform md:-translate-x-1\/2 rounded-full\"><\/div>\r\n\r\n <!-- Event Block 1 -->\r\n <div class=\"relative flex flex-col md:flex-row items-stretch mb-12 group\">\r\n <div class=\"flex items-center md:w-1\/2 md:pr-12 md:justify-end text-left md:text-right order-2 md:order-1\">\r\n <div class=\"premium-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md border border-gray-100 w-full\">\r\n <span class=\"inline-block px-3 py-1 rounded-full bg-emerald-100 text-pbru-green text-xs font-bold mb-3\">\u0e0a\u0e48\u0e27\u0e07\u0e17\u0e35\u0e48 1 (\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14)<\/span>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c & \u0e08\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e25\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22, \u0e2a\u0e39\u0e17<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-500 mt-1 font-semibold text-pbru-green\">11 - 24 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569<\/p>\r\n <p class=\"text-sm text-gray-600 font-serif mt-3 leading-relaxed\">\r\n \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e38\u0e01\u0e04\u0e19\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e19\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e27\u0e48\u0e32\u0e08\u0e30 <strong>\"\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\"<\/strong> \u0e2b\u0e23\u0e37\u0e2d <strong>\"\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\"<\/strong> \u0e43\u0e19\u0e1e\u0e34\u0e18\u0e35\u0e23\u0e31\u0e1a\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e31\u0e49\u0e07\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23<strong>\u0e25\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 \u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 \u0e41\u0e25\u0e30\u0e40\u0e0a\u0e48\u0e32\u0e0a\u0e38\u0e14\u0e2a\u0e39\u0e17<\/strong>\u0e43\u0e2b\u0e49\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19\u0e43\u0e19\u0e2b\u0e49\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e19\u0e35\u0e49\r\n <\/p>\r\n <div class=\"mt-4 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4 text-left shadow-sm\">\r\n <div class=\"flex items-start gap-3\">\r\n <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700\">\r\n <i class=\"fa-solid fa-key\"><\/i>\r\n <\/span>\r\n <div>\r\n <h4 class=\"text-sm font-bold text-amber-900\">\r\n \u0e08\u0e33 Username \u0e2b\u0e23\u0e37\u0e2d Password \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49? \u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e14\u0e49\u0e27\u0e22 ThaiD \u0e44\u0e14\u0e49\r\n <\/h4>\r\n <p class=\"mt-1 text-xs leading-relaxed text-amber-800 font-serif\">\r\n \u0e44\u0e1b\u0e17\u0e35\u0e48 <strong>Web Portal PBRU<\/strong> \u0e41\u0e25\u0e49\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e25\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e14\u0e49\u0e27\u0e22 <strong>ThaiD<\/strong> \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e25\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e2d\u0e01 <strong>\u201c\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u201d<\/strong> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e15\u0e48\u0e2d\u0e44\u0e1b\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 flex flex-col gap-2 sm:flex-row sm:flex-wrap md:justify-end\">\r\n <a href=\"https:\/\/reg.pbru.ac.th\/register\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"px-4 py-2.5 bg-pbru-green hover:bg-pbru-darkgreen text-white text-xs font-bold rounded-lg inline-flex items-center justify-center transition-all\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a PBRU Register <i class=\"fa-solid fa-up-right-from-square ml-1.5\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/portal.pbru.ac.th\/PortalPBRU\/Auth\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"px-4 py-2.5 bg-amber-500 hover:bg-amber-600 text-white text-xs font-bold rounded-lg inline-flex items-center justify-center transition-all shadow-sm\">\r\n \u0e40\u0e02\u0e49\u0e32 Web Portal \u0e14\u0e49\u0e27\u0e22 ThaiD <i class=\"fa-solid fa-id-card ml-1.5\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Node -->\r\n <div class=\"absolute left-4 md:left-1\/2 w-8 h-8 rounded-full bg-white border-4 border-pbru-green shadow-md transform -translate-x-1\/2 flex items-center justify-center z-10 order-1 md:order-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-pbru-green animate-ping\"><\/span>\r\n <\/div>\r\n <div class=\"hidden md:block w-1\/2 order-3\"><\/div>\r\n <\/div>\r\n\r\n <!-- Event Block 1.5 (Optional white gown fitting) -->\r\n <div class=\"relative flex flex-col md:flex-row items-stretch mb-12 group\">\r\n <div class=\"hidden md:block w-1\/2 order-1\"><\/div>\r\n <!-- Node -->\r\n <div class=\"absolute left-4 md:left-1\/2 w-8 h-8 rounded-full bg-white border-4 border-amber-400 shadow-md transform -translate-x-1\/2 flex items-center justify-center z-10 order-1 md:order-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-amber-400\"><\/span>\r\n <\/div>\r\n <div class=\"flex items-center md:w-1\/2 md:pl-12 order-2\">\r\n <div class=\"premium-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md border border-gray-100 w-full\">\r\n <span class=\"inline-block px-3 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-bold mb-3\">\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\/\u0e27\u0e48\u0e32\u0e17\u0e35\u0e48\u0e23\u0e49\u0e2d\u0e22\u0e15\u0e23\u0e35<\/span>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-500 mt-1 font-semibold text-amber-800\">18 - 19 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569<\/p>\r\n <p class=\"text-sm text-gray-600 font-serif mt-3 leading-relaxed\">\r\n \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23 \u0e2b\u0e23\u0e37\u0e2d\u0e1c\u0e39\u0e49\u0e21\u0e35\u0e22\u0e28\u0e27\u0e48\u0e32\u0e17\u0e35\u0e48\u0e23\u0e49\u0e2d\u0e22\u0e15\u0e23\u0e35 \u0e17\u0e35\u0e48\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e1a\u0e1a\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27\u0e44\u0e14\u0e49 \u0e13 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 (\u0e40\u0e27\u0e25\u0e32 09.00 - 14.30 \u0e19.)\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Event Block 2 -->\r\n <div class=\"relative flex flex-col md:flex-row items-stretch mb-12 group\">\r\n <div class=\"flex items-center md:w-1\/2 md:pr-12 md:justify-end text-left md:text-right order-2 md:order-1\">\r\n <div class=\"premium-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md border border-gray-100 w-full\">\r\n <span class=\"inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-bold mb-3\">\u0e0a\u0e48\u0e27\u0e07\u0e17\u0e35\u0e48 2 (\u0e1e\u0e34\u0e18\u0e35\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21)<\/span>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e1e\u0e34\u0e18\u0e35\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21 \u0e13 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-500 mt-1 font-semibold text-indigo-800\">1 - 2 \u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19 2569<\/p>\r\n <div class=\"space-y-2 mt-3 text-sm text-gray-600 font-serif\">\r\n <p><strong>\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21:<\/strong> \u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e32\u0e21\u0e17\u0e35\u0e48\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e01\u0e33\u0e2b\u0e19\u0e14<\/p>\r\n <p class=\"text-xs text-gray-500\"><strong>\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21:<\/strong> \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1e\u0e30\u0e19\u0e2d\u0e21\u0e41\u0e01\u0e49\u0e27\u0e01\u0e33\u0e40\u0e19\u0e34\u0e14 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e38\u0e40\u0e21\u0e18\u0e15\u0e31\u0e19\u0e15\u0e34\u0e40\u0e27\u0e0a\u0e01\u0e38\u0e25 \u0e21\u0e23\u0e20.\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Node -->\r\n <div class=\"absolute left-4 md:left-1\/2 w-8 h-8 rounded-full bg-white border-4 border-indigo-600 shadow-md transform -translate-x-1\/2 flex items-center justify-center z-10 order-1 md:order-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-indigo-600\"><\/span>\r\n <\/div>\r\n <div class=\"hidden md:block w-1\/2 order-3\"><\/div>\r\n <\/div>\r\n\r\n <!-- Event Block 3 -->\r\n <div class=\"relative flex flex-col md:flex-row items-stretch mb-6 group\">\r\n <div class=\"hidden md:block w-1\/2 order-1\"><\/div>\r\n <!-- Node -->\r\n <div class=\"absolute left-4 md:left-1\/2 w-8 h-8 rounded-full bg-white border-4 border-pbru-yellow shadow-md transform -translate-x-1\/2 flex items-center justify-center z-10 order-1 md:order-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-pbru-yellow\"><\/span>\r\n <\/div>\r\n <div class=\"flex items-center md:w-1\/2 md:pl-12 order-2\">\r\n <div class=\"premium-card bg-white p-6 rounded-2xl shadow-sm hover:shadow-md border border-gray-100 w-full\">\r\n <span class=\"inline-block px-3 py-1 rounded-full bg-yellow-100 text-yellow-900 text-xs font-bold mb-3\">\u0e0a\u0e48\u0e27\u0e07\u0e17\u0e35\u0e48 3 (\u0e1e\u0e34\u0e18\u0e35\u0e08\u0e23\u0e34\u0e07)<\/span>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e27\u0e31\u0e19\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\u0e08\u0e23\u0e34\u0e07 (\u0e23\u0e31\u0e1a\u0e08\u0e23\u0e34\u0e07)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-gray-500 mt-1 font-semibold text-yellow-800\">4 \u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19 2569<\/p>\r\n <p class=\"text-sm text-gray-600 font-serif mt-3 leading-relaxed\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e1e\u0e34\u0e18\u0e35\u0e08\u0e23\u0e34\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23 \u0e13 <strong>\u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e34\u0e23\u0e34\u0e27\u0e23\u0e1b\u0e31\u0e0d\u0e0d\u0e32 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21<\/strong> \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08.\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21\r\n <\/p>\r\n <div class=\"mt-4 p-3 bg-emerald-50 rounded-xl border border-emerald-100 text-xs text-pbru-green font-sans flex items-center gap-2\">\r\n <i class=\"fa-solid fa-bus\"><\/i>\r\n <span>\u0e21\u0e35\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e44\u0e1b-\u0e01\u0e25\u0e31\u0e1a\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e41\u0e25\u0e30\u0e0d\u0e32\u0e15\u0e34 (\u0e21\u0e35\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21 500 \u0e1a\u0e32\u0e17)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION: PDF DOCUMENT VIEWER -->\r\n <section id=\"pdf-viewer\" class=\"scroll-mt-24 mb-20 bg-white p-6 sm:p-10 rounded-3xl shadow-xl border border-gray-100\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-8\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-red-600 px-3 py-1 bg-red-50 rounded-full font-sans\">Graduate List<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-2\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2567 - 2568<\/h2>\r\n <p class=\"text-sm text-gray-500 font-serif mt-1\">\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35<\/p>\r\n <\/div>\r\n\r\n <!-- Tab Buttons for PDF selection -->\r\n <div class=\"flex justify-center gap-3 sm:gap-4 mb-6\">\r\n <button onclick=\"showPDF('bachelor')\" id=\"btn-bachelor\" class=\"px-6 py-2 bg-pbru-green text-white rounded-full text-sm font-bold shadow-md transition-all\">\r\n \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\r\n <\/button>\r\n <button onclick=\"showPDF('master')\" id=\"btn-master\" class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-full text-sm font-bold transition-all\">\r\n \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01 \u0e41\u0e25\u0e30 \u0e42\u0e17\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- PDF Embed Area: Bachelor -->\r\n <div id=\"pdf-bachelor\" class=\"relative bg-gray-100 rounded-2xl overflow-hidden shadow-inner border border-gray-200 block\">\r\n <div class=\"hidden sm:block\">\r\n <!-- Standard iframe viewer -->\r\n <iframe src=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/07\/\u0e1b.\u0e15\u0e23\u0e35-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru-\u0e09\u0e1a\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e15.pdf\" class=\"w-full h-[650px]\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n \r\n <!-- Fallback card for mobile or iframe block -->\r\n <div class=\"sm:hidden p-8 text-center space-y-4\">\r\n <div class=\"w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto text-red-600\">\r\n <i class=\"fa-solid fa-file-pdf text-3xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35)<\/h3>\r\n <p class=\"text-xs text-gray-500 max-w-sm mx-auto font-serif\">\u0e23\u0e30\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 PDF \u0e41\u0e1a\u0e1a\u0e2a\u0e15\u0e23\u0e35\u0e21\u0e21\u0e34\u0e48\u0e07\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e02\u0e19\u0e32\u0e14\u0e40\u0e25\u0e47\u0e01\u0e19\u0e35\u0e49\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e40\u0e15\u0e47\u0e21\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d<\/p>\r\n <a href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/07\/\u0e1b.\u0e15\u0e23\u0e35-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru-\u0e09\u0e1a\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e15.pdf\" target=\"_blank\" class=\"inline-flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-xl transition-all shadow-md\">\r\n <i class=\"fa-solid fa-up-right-from-square\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e21\u0e48\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PDF Embed Area: Master -->\r\n <div id=\"pdf-master\" class=\"relative bg-gray-100 rounded-2xl overflow-hidden shadow-inner border border-gray-200 hidden\">\r\n <div class=\"hidden sm:block\">\r\n <!-- Standard iframe viewer -->\r\n <iframe src=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/06\/\u0e1b.\u0e40\u0e2d\u0e01-\u0e1b.\u0e42\u0e17-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru.pdf\" class=\"w-full h-[650px]\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n \r\n <!-- Fallback card for mobile or iframe block -->\r\n <div class=\"sm:hidden p-8 text-center space-y-4\">\r\n <div class=\"w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto text-red-600\">\r\n <i class=\"fa-solid fa-file-pdf text-3xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold text-gray-900\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e14\u0e38\u0e29\u0e0e\u0e35\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e41\u0e25\u0e30\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e1b.\u0e40\u0e2d\u0e01 \u0e41\u0e25\u0e30 \u0e42\u0e17)<\/h3>\r\n <p class=\"text-xs text-gray-500 max-w-sm mx-auto font-serif\">\u0e23\u0e30\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 PDF \u0e41\u0e1a\u0e1a\u0e2a\u0e15\u0e23\u0e35\u0e21\u0e21\u0e34\u0e48\u0e07\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e02\u0e19\u0e32\u0e14\u0e40\u0e25\u0e47\u0e01\u0e19\u0e35\u0e49\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e40\u0e15\u0e47\u0e21\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d<\/p>\r\n <a href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/06\/\u0e1b.\u0e40\u0e2d\u0e01-\u0e1b.\u0e42\u0e17-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru.pdf\" target=\"_blank\" class=\"inline-flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-xl transition-all shadow-md\">\r\n <i class=\"fa-solid fa-up-right-from-square\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e43\u0e2b\u0e21\u0e48\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-4 flex flex-col sm:flex-row justify-between items-center gap-3 bg-emerald-50\/50 p-4 rounded-xl border border-emerald-100\/50\">\r\n <span class=\"text-xs text-pbru-green font-serif\">\u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e0a\u0e23\u0e4c\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/span>\r\n \r\n <!-- Download buttons matching the active tab -->\r\n <a id=\"dl-bachelor\" href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/07\/\u0e1b.\u0e15\u0e23\u0e35-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru-\u0e09\u0e1a\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e40\u0e14\u0e15.pdf\" download class=\"inline-flex items-center gap-2 text-xs font-bold text-white bg-pbru-green hover:bg-pbru-darkgreen px-4 py-2 rounded-lg transition-all block\">\r\n <i class=\"fa-solid fa-cloud-arrow-down\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 PDF (\u0e1b.\u0e15\u0e23\u0e35)\r\n <\/a>\r\n <a id=\"dl-master\" href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/06\/\u0e1b.\u0e40\u0e2d\u0e01-\u0e1b.\u0e42\u0e17-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru.pdf\" download class=\"inline-flex items-center gap-2 text-xs font-bold text-white bg-pbru-green hover:bg-pbru-darkgreen px-4 py-2 rounded-lg transition-all hidden\">\r\n <i class=\"fa-solid fa-cloud-arrow-down\"><\/i> \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 PDF (\u0e1b.\u0e40\u0e2d\u0e01 \u0e41\u0e25\u0e30 \u0e42\u0e17)\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION: EXPENSES TABLE -->\r\n <section id=\"expenses\" class=\"scroll-mt-24 mb-20\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-10\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-pbru-green px-3 py-1 bg-emerald-50 rounded-full font-sans\">Official Tariffs<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-2\">\u0e15\u0e32\u0e23\u0e32\u0e07\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21<\/h2>\r\n <p class=\"text-sm text-gray-500 font-serif mt-2\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27 \u0e2a\u0e31\u0e48\u0e07\u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 \u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e15\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n\r\n <div class=\"max-w-4xl mx-auto space-y-8\">\r\n <!-- Main Fees Table -->\r\n <div class=\"bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-pbru-green to-pbru-darkgreen p-4 sm:p-5 text-white\">\r\n <h3 class=\"font-bold text-base sm:text-lg flex items-center gap-2\">\r\n <i class=\"fa-solid fa-receipt\"><\/i> 1. \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2b\u0e25\u0e31\u0e01\u0e41\u0e25\u0e30\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e40\u0e25\u0e37\u0e2d\u0e01\r\n <\/h3>\r\n <\/div>\r\n \r\n <div class=\"overflow-x-auto\">\r\n <table class=\"w-full text-left border-collapse font-serif text-sm\">\r\n <thead>\r\n <tr class=\"bg-gray-50 border-b border-gray-100 text-gray-700 font-sans font-bold\">\r\n <th class=\"p-4 pl-6\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21 \/ \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/th>\r\n <th class=\"p-4 text-center\">\u0e2d\u0e31\u0e15\u0e23\u0e32 (\u0e1a\u0e32\u0e17)<\/th>\r\n <th class=\"p-4 pr-6\">\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-gray-100\">\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e04\u0e48\u0e32\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e02\u0e47\u0e21\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22<\/td>\r\n <td class=\"p-4 text-center font-sans font-semibold text-pbru-green\">1,300<\/td>\r\n <td class=\"p-4 pr-6 text-xs text-gray-500 leading-relaxed\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e31\u0e48\u0e07\u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30\u0e41\u0e25\u0e30\u0e40\u0e02\u0e47\u0e21\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23 \u0e0a\u0e33\u0e23\u0e30\u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e44\u0e1b-\u0e01\u0e25\u0e31\u0e1a\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 (\u0e01\u0e23\u0e13\u0e35\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23)<\/td>\r\n <td class=\"p-4 text-center font-sans font-semibold text-pbru-green\">500<\/td>\r\n <td class=\"p-4 pr-6 text-xs text-gray-500 leading-relaxed\">\u0e22\u0e32\u0e19\u0e1e\u0e32\u0e2b\u0e19\u0e30\u0e17\u0e35\u0e48\u0e17\u0e32\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e43\u0e19\u0e27\u0e31\u0e19\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e08\u0e23\u0e34\u0e07 (4 \u0e01.\u0e22. 69) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e41\u0e25\u0e30\u0e0d\u0e32\u0e15\u0e34<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21\u0e08\u0e31\u0e14\u0e2a\u0e48\u0e07\u0e44\u0e1b\u0e23\u0e29\u0e13\u0e35\u0e22\u0e4c (\u0e01\u0e23\u0e13\u0e35\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a)<\/td>\r\n <td class=\"p-4 text-center font-sans font-semibold text-pbru-green\">100<\/td>\r\n <td class=\"p-4 pr-6 text-xs text-gray-500 leading-relaxed\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e41\u0e08\u0e49\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c \"\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\" \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e2a\u0e48\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e16\u0e36\u0e07\u0e1a\u0e49\u0e32\u0e19<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e04\u0e48\u0e32\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e1a\u0e1a\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27 (\u0e17\u0e32\u0e07\u0e40\u0e25\u0e37\u0e2d\u0e01)<\/td>\r\n <td class=\"p-4 text-center font-sans font-semibold text-pbru-green\">2,800<\/td>\r\n <td class=\"p-4 pr-6 text-xs text-gray-500 leading-relaxed\">\u0e01\u0e23\u0e13\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27\u0e43\u0e2b\u0e21\u0e48\u0e01\u0e31\u0e1a\u0e23\u0e49\u0e32\u0e19\u0e04\u0e49\u0e32\u0e23\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e43\u0e19\u0e27\u0e31\u0e19\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Badges Individual Table -->\r\n <div class=\"bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden\">\r\n <div class=\"bg-gradient-to-r from-pbru-green to-pbru-darkgreen p-4 sm:p-5 text-white\">\r\n <div class=\"flex flex-col sm:flex-row justify-between sm:items-center gap-2\">\r\n <h3 class=\"font-bold text-base sm:text-lg flex items-center gap-2\">\r\n <i class=\"fa-solid fa-shirt\"><\/i> 2. \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e04\u0e48\u0e32\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 (\u0e41\u0e22\u0e01\u0e0a\u0e34\u0e49\u0e19)\r\n <\/h3>\r\n <span class=\"text-xs bg-white\/25 px-2.5 py-0.5 rounded-full font-sans text-white font-semibold self-start sm:self-auto\">* \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"overflow-x-auto\">\r\n <table class=\"w-full text-left border-collapse font-serif text-sm\">\r\n <thead>\r\n <tr class=\"bg-gray-50 border-b border-gray-100 text-gray-700 font-sans font-bold\">\r\n <th class=\"p-4 pl-6\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32<\/th>\r\n <th class=\"p-4 text-center\">\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e41\u0e22\u0e01\u0e0a\u0e34\u0e49\u0e19 (\u0e1a\u0e32\u0e17)<\/th>\r\n <th class=\"p-4 text-center\">\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e1c\u0e39\u0e49\u0e0a\u0e32\u0e22 (\u0e1a\u0e32\u0e17)<\/th>\r\n <th class=\"p-4 text-center pr-6\">\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e1c\u0e39\u0e49\u0e2b\u0e0d\u0e34\u0e07 (\u0e1a\u0e32\u0e17)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-gray-100\">\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e40\u0e19\u0e47\u0e01\u0e44\u0e17 (\u0e0a\u0e32\u0e22)<\/td>\r\n <td class=\"p-4 text-center font-sans\">100<\/td>\r\n <td class=\"p-4 text-center text-gray-400 font-sans\" rowspan=\"5\">\r\n <span class=\"text-sm font-bold text-pbru-green font-sans block\">300<\/span>\r\n <span class=\"text-[10px] text-gray-400 font-serif\">(\u0e04\u0e23\u0e1a\u0e17\u0e38\u0e01\u0e0a\u0e34\u0e49\u0e19\u0e0a\u0e32\u0e22)<\/span>\r\n <\/td>\r\n <td class=\"p-4 text-center text-gray-300 font-sans\" rowspan=\"5\">\r\n <span class=\"text-sm font-bold text-pbru-green font-sans block\">250<\/span>\r\n <span class=\"text-[10px] text-gray-400 font-serif\">(\u0e04\u0e23\u0e1a\u0e17\u0e38\u0e01\u0e0a\u0e34\u0e49\u0e19\u0e2b\u0e0d\u0e34\u0e07)<\/span>\r\n <\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e2a\u0e32\u0e22\u0e40\u0e02\u0e47\u0e21\u0e02\u0e31\u0e14 (\u0e0a\u0e32\u0e22 \/ \u0e2b\u0e0d\u0e34\u0e07)<\/td>\r\n <td class=\"p-4 text-center font-sans\">100<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e2b\u0e31\u0e27\u0e40\u0e02\u0e47\u0e21\u0e02\u0e31\u0e14 (\u0e0a\u0e32\u0e22 \/ \u0e2b\u0e0d\u0e34\u0e07)<\/td>\r\n <td class=\"p-4 text-center font-sans\">50<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e40\u0e02\u0e47\u0e21\u0e15\u0e34\u0e14\u0e2d\u0e01\u0e40\u0e2a\u0e37\u0e49\u0e2d & \u0e40\u0e02\u0e47\u0e21\u0e15\u0e34\u0e14\u0e40\u0e19\u0e47\u0e01\u0e44\u0e17 (\u0e0a\u0e32\u0e22 \/ \u0e2b\u0e0d\u0e34\u0e07)<\/td>\r\n <td class=\"p-4 text-center font-sans\">50<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-gray-50\/50 transition-all\">\r\n <td class=\"p-4 pl-6 font-bold text-gray-900 font-sans\">\u0e01\u0e23\u0e30\u0e14\u0e38\u0e21\u0e0a\u0e38\u0e14\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 (\u0e2b\u0e0d\u0e34\u0e07)<\/td>\r\n <td class=\"p-4 text-center font-sans\">50<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Highlight Banner -->\r\n <div class=\"p-4 bg-amber-50 rounded-2xl border border-amber-100 flex gap-3 text-xs text-amber-900 leading-relaxed font-serif\">\r\n <i class=\"fa-solid fa-circle-info text-lg text-amber-600 shrink-0 mt-0.5\"><\/i>\r\n <div>\r\n <strong class=\"font-sans text-sm block mb-1\">\u0e04\u0e33\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21:<\/strong>\r\n <p>\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e17\u0e33\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e31\u0e48\u0e07\u0e08\u0e2d\u0e07\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e1c\u0e48\u0e32\u0e19 \u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e41\u0e25\u0e30\u0e2a\u0e41\u0e01\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19\u0e17\u0e32\u0e07\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e14\u0e49\u0e27\u0e22 QR-Code \u0e2b\u0e23\u0e37\u0e2d Barcode \u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e42\u0e14\u0e22\u0e23\u0e30\u0e1a\u0e1a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION: CHECKLIST FOR GRADUATE -->\r\n <section id=\"checklist\" class=\"scroll-mt-24 mb-20\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-10\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-pbru-green px-3 py-1 bg-emerald-50 rounded-full font-sans\">Self tracking<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-2\">\u0e40\u0e0a\u0e47\u0e04\u0e25\u0e34\u0e2a\u0e15\u0e4c\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27<\/h2>\r\n <p class=\"text-sm text-gray-500 font-serif mt-2\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e17\u0e33\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19\u0e41\u0e25\u0e49\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e15\u0e31\u0e27\u0e43\u0e2b\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e43\u0e19\u0e17\u0e38\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e01\u0e32\u0e23\u0e13\u0e4c<\/p>\r\n <\/div>\r\n\r\n <div class=\"max-w-3xl mx-auto bg-white rounded-2xl shadow-md border border-gray-100 p-6 sm:p-8\">\r\n <!-- Progress bar -->\r\n <div class=\"mb-6\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <span class=\"text-xs font-bold text-gray-400\">\u0e04\u0e27\u0e32\u0e21\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/span>\r\n <span id=\"progress-percent\" class=\"text-sm font-bold text-pbru-green\">0%<\/span>\r\n <\/div>\r\n <div class=\"w-full bg-gray-100 rounded-full h-2.5\">\r\n <div id=\"progress-bar\" class=\"bg-gradient-to-r from-pbru-green to-pbru-yellow h-2.5 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Checklist Items -->\r\n <div class=\"space-y-3.5\">\r\n \r\n <!-- Item 1 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">1. \u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e19<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e41\u0e25\u0e30\u0e23\u0e30\u0e1a\u0e38\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c \"\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\" \u0e2b\u0e23\u0e37\u0e2d \"\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\" (11 - 24 \u0e01.\u0e04. 69)<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <!-- Item 2 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">2. \u0e08\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22\u0e27\u0e34\u0e17\u0e22\u0e10\u0e32\u0e19\u0e30 & \u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22 \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e2d\u0e07\u0e2a\u0e39\u0e17<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e2d\u0e07\u0e15\u0e32\u0e21\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e43\u0e19\u0e23\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e02\u0e19\u0e32\u0e14 (11 - 24 \u0e01.\u0e04. 69)<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <!-- Item 3 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">3. \u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e18\u0e23\u0e23\u0e21\u0e40\u0e19\u0e35\u0e22\u0e21\u0e41\u0e25\u0e30\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e2a\u0e41\u0e01\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e1c\u0e48\u0e32\u0e19 QR-Code \u0e2b\u0e23\u0e37\u0e2d Barcode \u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e42\u0e14\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <!-- Item 4 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">4. \u0e2a\u0e31\u0e48\u0e07\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27 (\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e01\u0e25\u0e38\u0e48\u0e21\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\/\u0e27\u0e48\u0e32\u0e17\u0e35\u0e48\u0e23\u0e49\u0e2d\u0e22\u0e15\u0e23\u0e35)<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e14\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e13 \u0e08\u0e38\u0e14\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 (18 - 19 \u0e01.\u0e04. 69)<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <!-- Item 5 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">5. \u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e0b\u0e49\u0e2d\u0e21\u0e23\u0e2d\u0e1a\u0e22\u0e48\u0e2d\u0e22\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e1a\u0e1a \u0e13 \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1e\u0e30\u0e19\u0e2d\u0e21\u0e41\u0e01\u0e49\u0e27\u0e01\u0e33\u0e40\u0e19\u0e34\u0e14 (1 - 2 \u0e01.\u0e22. 69)<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <!-- Item 6 -->\r\n <label class=\"flex items-start gap-4 p-4 rounded-xl border border-gray-100 hover:bg-gray-50 transition-all cursor-pointer\">\r\n <input type=\"checkbox\" class=\"checklist-item mt-1 w-5 h-5 rounded border-gray-300 text-pbru-green focus:ring-pbru-green\" onchange=\"updateProgress()\">\r\n <div class=\"flex-1\">\r\n <span class=\"text-sm sm:text-base font-bold text-gray-900 block leading-tight\">6. \u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\u0e08\u0e23\u0e34\u0e07<\/span>\r\n <span class=\"text-xs text-gray-500 font-serif mt-1 block\">\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e2a\u0e39\u0e48 \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e34\u0e23\u0e34\u0e27\u0e23\u0e1b\u0e31\u0e0d\u0e0d\u0e32 \u0e21\u0e23\u0e20.\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 (4 \u0e01.\u0e22. 69)<\/span>\r\n <\/div>\r\n <\/label>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION: FAQ -->\r\n <section id=\"faq\" class=\"scroll-mt-24 mb-20\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-10\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-pbru-green px-3 py-1 bg-emerald-50 rounded-full\">Frequently Asked Questions<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-2\">\u0e04\u0e33\u0e16\u0e32\u0e21\u0e1e\u0e1a\u0e1a\u0e48\u0e2d\u0e22 & \u0e02\u0e49\u0e2d\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/h2>\r\n <\/div>\r\n\r\n <div class=\"max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <!-- FAQ Item 1 -->\r\n <div class=\"bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all\">\r\n <div class=\"flex gap-3\">\r\n <span class=\"flex-shrink-0 w-8 h-8 rounded-full bg-emerald-50 text-pbru-green flex items-center justify-center font-bold text-sm\">Q1<\/span>\r\n <div>\r\n <h4 class=\"font-bold text-gray-900 text-sm sm:text-base\">\u0e01\u0e23\u0e13\u0e35\u0e44\u0e21\u0e48\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23?<\/h4>\r\n <p class=\"text-xs sm:text-sm text-gray-600 font-serif mt-2 leading-relaxed\">\r\n \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e41\u0e08\u0e49\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c \"\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\" \u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27 \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e2a\u0e48\u0e07\u0e1e\u0e31\u0e2a\u0e14\u0e38\u0e17\u0e32\u0e07\u0e44\u0e1b\u0e23\u0e29\u0e13\u0e35\u0e22\u0e4c\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23\u0e08\u0e33\u0e19\u0e27\u0e19 100 \u0e1a\u0e32\u0e17 \u0e1c\u0e48\u0e32\u0e19 QR Code \/ Barcode \u0e1a\u0e19\u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e2a\u0e48\u0e07\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FAQ Item 2 -->\r\n <div class=\"bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all\">\r\n <div class=\"flex gap-3\">\r\n <span class=\"flex-shrink-0 w-8 h-8 rounded-full bg-emerald-50 text-pbru-green flex items-center justify-center font-bold text-sm\">Q2<\/span>\r\n <div>\r\n <h4 class=\"font-bold text-gray-900 text-sm sm:text-base\">\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\/\u0e17\u0e2b\u0e32\u0e23\/\u0e15\u0e33\u0e23\u0e27\u0e08 \u0e21\u0e35\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e41\u0e15\u0e48\u0e07\u0e01\u0e32\u0e22\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48?<\/h4>\r\n <p class=\"text-xs sm:text-sm text-gray-600 font-serif mt-2 leading-relaxed\">\r\n \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e01\u0e25\u0e38\u0e48\u0e21\u0e19\u0e35\u0e49\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e1a\u0e1a\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27\u0e41\u0e25\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e22\u0e01\u0e40\u0e27\u0e49\u0e19\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e08\u0e30\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e31\u0e14\u0e0a\u0e38\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e1a\u0e1a\u0e1b\u0e01\u0e15\u0e34\u0e02\u0e32\u0e27\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27\u0e44\u0e14\u0e49\u0e43\u0e19\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 18 - 19 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569 \u0e40\u0e27\u0e25\u0e32 09.00 - 14.30 \u0e19.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FAQ Item 3 -->\r\n <div class=\"bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all\">\r\n <div class=\"flex gap-3\">\r\n <span class=\"flex-shrink-0 w-8 h-8 rounded-full bg-emerald-50 text-pbru-green flex items-center justify-center font-bold text-sm\">Q3<\/span>\r\n <div>\r\n <h4 class=\"font-bold text-gray-900 text-sm sm:text-base\">\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e27\u0e21\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e43\u0e14\u0e1a\u0e49\u0e32\u0e07?<\/h4>\r\n <p class=\"text-xs sm:text-sm text-gray-600 font-serif mt-2 leading-relaxed\">\r\n \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e0a\u0e32\u0e22\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e02\u0e47\u0e21\u0e02\u0e31\u0e14 \u0e2b\u0e31\u0e27\u0e40\u0e02\u0e47\u0e21\u0e02\u0e31\u0e14 \u0e40\u0e19\u0e01\u0e44\u0e17 \u0e41\u0e25\u0e30\u0e40\u0e02\u0e47\u0e21\u0e15\u0e34\u0e14\u0e40\u0e19\u0e01\u0e44\u0e17 \u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e2b\u0e0d\u0e34\u0e07\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e01\u0e23\u0e30\u0e14\u0e38\u0e21 \u0e40\u0e02\u0e47\u0e21\u0e15\u0e34\u0e14\u0e2d\u0e01 \u0e41\u0e25\u0e30\u0e2b\u0e31\u0e27\u0e40\u0e02\u0e47\u0e21\u0e02\u0e31\u0e14\u0e04\u0e23\u0e1a\u0e0a\u0e38\u0e14 \u0e42\u0e14\u0e22\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e31\u0e48\u0e07\u0e0b\u0e37\u0e49\u0e2d\u0e25\u0e48\u0e27\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e22\u0e01\u0e0a\u0e34\u0e49\u0e19\u0e15\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e44\u0e14\u0e49\u0e40\u0e0a\u0e48\u0e19\u0e01\u0e31\u0e19\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FAQ Item 4 -->\r\n <div class=\"bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all\">\r\n <div class=\"flex gap-3\">\r\n <span class=\"flex-shrink-0 w-8 h-8 rounded-full bg-emerald-50 text-pbru-green flex items-center justify-center font-bold text-sm\">Q4<\/span>\r\n <div>\r\n <h4 class=\"font-bold text-gray-900 text-sm sm:text-base\">\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e44\u0e1b\u0e01\u0e25\u0e31\u0e1a\u0e02\u0e2d\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e41\u0e25\u0e30\u0e42\u0e04\u0e27\u0e15\u0e32\u0e02\u0e2d\u0e07\u0e0d\u0e32\u0e15\u0e34?<\/h4>\r\n <p class=\"text-xs sm:text-sm text-gray-600 font-serif mt-2 leading-relaxed\">\r\n \u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07\u0e2a\u0e33\u0e23\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e44\u0e1b-\u0e01\u0e25\u0e31\u0e1a (\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 - \u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21) \u0e44\u0e14\u0e49\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 11 - 24 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569 \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e23\u0e30\u0e1a\u0e38\u0e08\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e19\u0e31\u0e48\u0e07\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e0d\u0e32\u0e15\u0e34\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e23\u0e48\u0e27\u0e21\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e22\u0e34\u0e19\u0e14\u0e35\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION: CONTACT & LOCATION -->\r\n <section id=\"contact\" class=\"scroll-mt-24 mb-16\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-10\">\r\n <span class=\"text-xs font-bold uppercase tracking-wider text-pbru-green px-3 py-1 bg-emerald-50 rounded-full\">Contact Support<\/span>\r\n <h2 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mt-2\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e41\u0e25\u0e30\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19<\/h2>\r\n <p class=\"text-sm text-gray-500 font-serif mt-2\">\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e02\u0e49\u0e2d\u0e2a\u0e07\u0e2a\u0e31\u0e22\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e27\u0e31\u0e14\u0e15\u0e31\u0e27, \u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19, \u0e23\u0e16\u0e19\u0e33\u0e02\u0e1a\u0e27\u0e19, \u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e07\u0e01\u0e32\u0e22 \u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/p>\r\n <\/div>\r\n\r\n <!-- Contacts Grid -->\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-start max-w-5xl mx-auto\">\r\n <!-- Tel Directory Card -->\r\n <div class=\"bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6\">\r\n <h3 class=\"font-bold text-lg text-gray-900 flex items-center gap-2 border-b border-gray-50 pb-4\">\r\n <i class=\"fa-solid fa-address-book text-pbru-green\"><\/i> \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e1d\u0e48\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\r\n <\/h3>\r\n \r\n <div class=\"space-y-4\">\r\n <!-- Contact 1 -->\r\n <div class=\"flex items-center justify-between p-3.5 rounded-xl bg-gray-50 hover:bg-emerald-50\/50 transition-all\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-full bg-emerald-100 text-pbru-green flex items-center justify-center\">\r\n <i class=\"fa-solid fa-user-tie\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm text-gray-900\">\u0e04\u0e38\u0e13\u0e19\u0e19\u0e17\u0e19\u0e32 \u0e14\u0e27\u0e07\u0e01\u0e23\u0e30\u0e42\u0e17\u0e01<\/h4>\r\n <p class=\"text-[11px] text-gray-500 font-serif\">\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 \/ \u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \/ \u0e01\u0e32\u0e23\u0e41\u0e15\u0e48\u0e07\u0e15\u0e31\u0e27\u0e15\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22<\/p>\r\n <\/div>\r\n <\/div>\r\n <a href=\"tel:032708648\" class=\"px-3.5 py-1.5 bg-white hover:bg-pbru-green text-pbru-green hover:text-white border border-emerald-200 hover:border-pbru-green text-xs font-bold rounded-lg flex items-center gap-1.5 transition-all shadow-sm\">\r\n <i class=\"fa-solid fa-phone\"><\/i> 032-708-648\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Contact 2 -->\r\n <div class=\"flex items-center justify-between p-3.5 rounded-xl bg-gray-50 hover:bg-emerald-50\/50 transition-all\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-full bg-emerald-100 text-pbru-green flex items-center justify-center\">\r\n <i class=\"fa-solid fa-bus-simple\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm text-gray-900\">\u0e04\u0e38\u0e13\u0e2a\u0e38\u0e20\u0e32\u0e27\u0e14\u0e35 \u0e40\u0e19\u0e35\u0e22\u0e21\u0e2b\u0e2d\u0e21<\/h4>\r\n <p class=\"text-[11px] text-gray-500 font-serif\">\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e44\u0e1b-\u0e01\u0e25\u0e31\u0e1a \u0e21\u0e23\u0e20.\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e11\u0e34\u0e15\u0e41\u0e25\u0e30\u0e1c\u0e39\u0e49\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21<\/p>\r\n <\/div>\r\n <\/div>\r\n <a href=\"tel:0633659241\" class=\"px-3.5 py-1.5 bg-white hover:bg-pbru-green text-pbru-green hover:text-white border border-emerald-200 hover:border-pbru-green text-xs font-bold rounded-lg flex items-center gap-1.5 transition-all shadow-sm\">\r\n <i class=\"fa-solid fa-phone\"><\/i> 063-365-9241\r\n <\/a>\r\n <\/div>\r\n \r\n <!-- Contact 3: LINE -->\r\n <div class=\"flex items-center justify-between p-3.5 rounded-xl bg-[#06C755]\/10 hover:bg-[#06C755]\/20 transition-all border border-[#06C755]\/30\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-full bg-[#06C755] text-white flex items-center justify-center\">\r\n <i class=\"fa-brands fa-line text-2xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-sm text-gray-900\">\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 (LINE)<\/h4>\r\n <p class=\"text-[11px] text-gray-600 font-serif\">\u0e41\u0e0a\u0e17\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a LINE<\/p>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/lin.ee\/ygxdrkx\" target=\"_blank\" class=\"px-3.5 py-1.5 bg-white hover:bg-[#06C755] text-[#06C755] hover:text-white border border-[#06C755]\/30 hover:border-[#06C755] text-xs font-bold rounded-lg flex items-center gap-1.5 transition-all shadow-sm\">\r\n <i class=\"fa-solid fa-user-plus\"><\/i> \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Location Map Guide Card -->\r\n <div class=\"bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6\">\r\n <h3 class=\"font-bold text-lg text-gray-900 flex items-center gap-2 border-b border-gray-50 pb-4\">\r\n <i class=\"fa-solid fa-location-dot text-pbru-green\"><\/i> \u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e31\u0e0d\u0e08\u0e23\u0e2a\u0e33\u0e04\u0e31\u0e0d\r\n <\/h3>\r\n\r\n <div class=\"space-y-4 font-serif text-sm text-gray-600\">\r\n <div class=\"p-4 rounded-xl bg-emerald-50\/30 border border-emerald-100\/50\">\r\n <h4 class=\"font-bold text-gray-900 font-sans text-xs uppercase tracking-wider mb-1 text-pbru-green\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e1d\u0e36\u0e01\u0e0b\u0e49\u0e2d\u0e21 & \u0e25\u0e2d\u0e07\u0e0a\u0e38\u0e14\u0e04\u0e23\u0e38\u0e22 (\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35)<\/h4>\r\n <p class=\"leading-relaxed\">\r\n \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e1e\u0e30\u0e19\u0e2d\u0e21\u0e41\u0e01\u0e49\u0e27\u0e01\u0e33\u0e40\u0e19\u0e34\u0e14 \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e2a\u0e38\u0e40\u0e21\u0e18\u0e15\u0e31\u0e19\u0e15\u0e34\u0e40\u0e27\u0e0a\u0e01\u0e38\u0e25 \u0e41\u0e25\u0e30\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e34\u0e19 \u0e0a\u0e31\u0e49\u0e19 M \u0e2d\u0e32\u0e04\u0e32\u0e23\u0e27\u0e34\u0e17\u0e22\u0e32\u0e20\u0e34\u0e23\u0e21\u0e22\u0e4c (\u0e2d\u0e32\u0e04\u0e32\u0e23 14)\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-amber-50\/30 border border-amber-100\/50\">\r\n <h4 class=\"font-bold text-gray-900 font-sans text-xs uppercase tracking-wider mb-1 text-amber-800\">\u0e2a\u0e16\u0e32\u0e19\u0e17\u0e35\u0e48\u0e08\u0e31\u0e14\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07<\/h4>\r\n <p class=\"leading-relaxed\">\r\n \u0e2b\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2a\u0e34\u0e23\u0e34\u0e27\u0e23\u0e1b\u0e31\u0e0d\u0e0d\u0e32 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Simulated Visual Map \/ Placeholder SVG Map -->\r\n <div class=\"relative bg-emerald-50 rounded-2xl p-4 border border-emerald-100 h-44 flex items-center justify-center overflow-hidden\">\r\n <i class=\"fa-solid fa-map-location-dot text-6xl text-pbru-green\/20 absolute z-0 transform scale-150\"><\/i>\r\n <div class=\"relative z-10 text-center space-y-2\">\r\n <p class=\"text-xs font-bold text-pbru-green font-sans\">\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 (PBRU)<\/p>\r\n <p class=\"text-[10px] text-gray-500 max-w-xs mx-auto\">38 \u0e2b\u0e21\u0e39\u0e48 8 \u0e16\u0e19\u0e19\u0e20\u0e39\u0e21\u0e34\u0e1e\u0e25\u0e2d\u0e14\u0e38\u0e25\u0e22\u0e40\u0e14\u0e0a \u0e15\u0e33\u0e1a\u0e25\u0e19\u0e32\u0e27\u0e38\u0e12\u0e34 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 76000<\/p>\r\n <a href=\"https:\/\/maps.google.com\" target=\"_blank\" class=\"inline-flex items-center gap-1.5 px-3 py-1 bg-pbru-green hover:bg-pbru-darkgreen text-white text-[10px] font-bold rounded-lg transition-all shadow-sm\">\r\n <i class=\"fa-solid fa-diamond-turn-right\"><\/i> \u0e19\u0e33\u0e17\u0e32\u0e07\u0e14\u0e49\u0e27\u0e22 Google Maps\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- MODAL FOR PAYMENT\/REGISTRATION GUIDE -->\r\n <div id=\"paymentModal\" class=\"hidden fixed inset-0 z-50 bg-black\/60 backdrop-blur-sm flex items-center justify-center p-4\">\r\n <div class=\"bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 relative shadow-2xl\">\r\n <!-- Close Button -->\r\n <button onclick=\"hidePaymentGuide()\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-all\">\r\n <i class=\"fa-solid fa-circle-xmark text-2xl\"><\/i>\r\n <\/button>\r\n\r\n <!-- Icon Header -->\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center mb-4\">\r\n <i class=\"fa-solid fa-circle-info text-2xl animate-pulse\"><\/i>\r\n <\/div>\r\n\r\n <!-- Text Content -->\r\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15<\/h3>\r\n <div class=\"text-sm text-gray-600 font-serif leading-relaxed space-y-4 mb-6\">\r\n <p>\u0e42\u0e1b\u0e23\u0e14\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e15\u0e32\u0e21\u0e41\u0e19\u0e27\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c\u0e17\u0e35\u0e48\u0e17\u0e32\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e04\u0e23\u0e48\u0e07\u0e04\u0e23\u0e31\u0e14:<\/p>\r\n \r\n <ol class=\"list-decimal list-inside space-y-2.5\">\r\n <li>\u0e40\u0e02\u0e49\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48 <a href=\"https:\/\/reg.pbru.ac.th\/register\/\" target=\"_blank\" class=\"text-pbru-green font-bold hover:underline\">reg.pbru.ac.th<\/a> \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 11 - 24 \u0e01.\u0e04. 69<\/li>\r\n <li>\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e41\u0e25\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e2a\u0e23\u0e34\u0e21 (\u0e16\u0e49\u0e32\u0e21\u0e35) \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 <strong>\u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49 (Invoice)<\/strong> \u0e17\u0e35\u0e48\u0e21\u0e35 QR-Code \u0e2b\u0e23\u0e37\u0e2d Barcode \u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/li>\r\n <li>\u0e43\u0e0a\u0e49\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\u0e18\u0e38\u0e23\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e02\u0e2d\u0e07\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e41\u0e01\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/li>\r\n <li>\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e33\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e41\u0e01\u0e19\u0e08\u0e48\u0e32\u0e22\u0e40\u0e07\u0e34\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27 <strong>\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e01\u0e14\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19<\/strong> \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e15\u0e31\u0e27<\/li>\r\n <\/ol>\r\n <\/div>\r\n\r\n <!-- Footer Action button -->\r\n <button onclick=\"hidePaymentGuide()\" class=\"w-full py-3 bg-pbru-green hover:bg-pbru-darkgreen text-white font-bold rounded-xl text-sm transition-all shadow-md\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27, \u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MODAL FOR DOWNLOAD ALERT \/ PLACEHOLDER -->\r\n <div id=\"downloadModal\" class=\"hidden fixed inset-0 z-50 bg-black\/60 backdrop-blur-sm flex items-center justify-center p-4\">\r\n <div class=\"bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 relative shadow-2xl\">\r\n <!-- Close Button -->\r\n <button onclick=\"hideDownloadAlert()\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-all\">\r\n <i class=\"fa-solid fa-circle-xmark text-2xl\"><\/i>\r\n <\/button>\r\n\r\n <!-- Icon Header -->\r\n <div class=\"w-12 h-12 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center mb-4\">\r\n <i class=\"fa-solid fa-file-pdf text-2xl text-red-600\"><\/i>\r\n <\/div>\r\n\r\n <!-- Text Content -->\r\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23<\/h3>\r\n <p class=\"text-xs text-gray-500 mb-4 font-serif\">\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 2567 - 2568 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35<\/p>\r\n \r\n <div class=\"text-sm text-gray-600 font-serif leading-relaxed space-y-4 mb-6 bg-gray-50 p-4 rounded-2xl border border-gray-100\">\r\n <p>\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14:<\/p>\r\n <div class=\"flex flex-col gap-2 mt-2\">\r\n <a href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/06\/\u0e1b.\u0e15\u0e23\u0e35\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru.pdf\" download class=\"inline-flex items-center justify-between px-4 py-2 border border-gray-200 rounded-lg hover:bg-emerald-50 transition-all\">\r\n <span class=\"text-xs font-bold text-gray-700\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35<\/span>\r\n <i class=\"fa-solid fa-download text-pbru-green\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.pbru.ac.th\/pbru\/wp-content\/uploads\/2026\/06\/\u0e1b.\u0e40\u0e2d\u0e01-\u0e1b.\u0e42\u0e17-\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32-pbru.pdf\" download class=\"inline-flex items-center justify-between px-4 py-2 border border-gray-200 rounded-lg hover:bg-emerald-50 transition-all\">\r\n <span class=\"text-xs font-bold text-gray-700\">\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17<\/span>\r\n <i class=\"fa-solid fa-download text-pbru-green\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Footer Action button -->\r\n <div class=\"flex\">\r\n <button onclick=\"hideDownloadAlert()\" class=\"w-full py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold rounded-xl text-sm transition-all\">\r\n \u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MAIN JAVASCRIPT LOGIC -->\r\n <script>\r\n \/\/ Modal Functionality\r\n function showPaymentGuide() {\r\n document.getElementById(\"paymentModal\").classList.remove(\"hidden\");\r\n }\r\n\r\n function hidePaymentGuide() {\r\n document.getElementById(\"paymentModal\").classList.add(\"hidden\");\r\n }\r\n\r\n \/\/ Download Modal Functionality\r\n function showDownloadAlert() {\r\n document.getElementById(\"downloadModal\").classList.remove(\"hidden\");\r\n }\r\n\r\n function hideDownloadAlert() {\r\n document.getElementById(\"downloadModal\").classList.add(\"hidden\");\r\n }\r\n\r\n \/\/ Checklist Progress Logic\r\n function updateProgress() {\r\n const checkboxes = document.querySelectorAll('.checklist-item');\r\n const total = checkboxes.length;\r\n let checkedCount = 0;\r\n\r\n checkboxes.forEach(box => {\r\n if (box.checked) {\r\n checkedCount++;\r\n }\r\n });\r\n\r\n const percent = total > 0 ? Math.round((checkedCount \/ total) * 100) : 0;\r\n document.getElementById(\"progress-percent\").innerText = `${percent}%`;\r\n document.getElementById(\"progress-bar\").style.width = `${percent}%`;\r\n }\r\n\r\n \/\/ PDF Tabs Logic\r\n function showPDF(level) {\r\n const btnB = document.getElementById('btn-bachelor');\r\n const btnM = document.getElementById('btn-master');\r\n const pdfB = document.getElementById('pdf-bachelor');\r\n const pdfM = document.getElementById('pdf-master');\r\n const dlB = document.getElementById('dl-bachelor');\r\n const dlM = document.getElementById('dl-master');\r\n\r\n if(level === 'bachelor') {\r\n btnB.className = \"px-6 py-2 bg-pbru-green text-white rounded-full text-sm font-bold shadow-md transition-all\";\r\n btnM.className = \"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-full text-sm font-bold transition-all\";\r\n \r\n pdfB.classList.remove('hidden');\r\n pdfB.classList.add('block');\r\n pdfM.classList.remove('block');\r\n pdfM.classList.add('hidden');\r\n \r\n dlB.classList.remove('hidden');\r\n dlB.classList.add('block');\r\n dlM.classList.remove('block');\r\n dlM.classList.add('hidden');\r\n } else {\r\n btnM.className = \"px-6 py-2 bg-pbru-green text-white rounded-full text-sm font-bold shadow-md transition-all\";\r\n btnB.className = \"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-full text-sm font-bold transition-all\";\r\n \r\n pdfM.classList.remove('hidden');\r\n pdfM.classList.add('block');\r\n pdfB.classList.remove('block');\r\n pdfB.classList.add('hidden');\r\n \r\n dlM.classList.remove('hidden');\r\n dlM.classList.add('block');\r\n dlB.classList.remove('block');\r\n dlB.classList.add('hidden');\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e1e\u0e34\u0e18\u0e35\u0e1e\u0e23\u0e30\u0e23\u0e32\u0e0a\u0e17\u0e32\u0e19\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e1a\u0e31\u0e15\u0e23 \u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35 | PBR […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/pages\/154111"}],"collection":[{"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/comments?post=154111"}],"version-history":[{"count":55,"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/pages\/154111\/revisions"}],"predecessor-version":[{"id":155331,"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/pages\/154111\/revisions\/155331"}],"wp:attachment":[{"href":"https:\/\/www.pbru.ac.th\/pbru\/wp-json\/wp\/v2\/media?parent=154111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}