{"id":967,"date":"2026-03-06T07:35:30","date_gmt":"2026-03-06T07:35:30","guid":{"rendered":"https:\/\/medkorat.mcu.ac.th\/?page_id=967"},"modified":"2026-03-10T09:23:11","modified_gmt":"2026-03-10T09:23:11","slug":"%e0%b8%a1%e0%b8%84%e0%b8%ad-%e0%b9%92","status":"publish","type":"page","link":"https:\/\/medkorat.mcu.ac.th\/?page_id=967","title":{"rendered":"\u0e21\u0e04\u0e2d.\u0e52"},"content":{"rendered":"

\u0e21\u0e04\u0e2d. \u0e52<\/p>\n\n\n\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e21\u0e04\u0e2d.2 – \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 MCU<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #f97316; \/* MCU Orange *\/\n --primary-dark: #ea580c;\n --primary-light: #fff7ed;\n --secondary: #1e293b;\n --bg-color: #f1f5f9;\n --card-bg: #ffffff;\n --text-main: #0f172a;\n --text-muted: #64748b;\n --border-color: #e2e8f0;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Prompt', sans-serif;\n background-color: var(--bg-color);\n color: var(--text-main);\n line-height: 1.6;\n }\n\n header {\n background: white;\n padding: 3rem 1rem;\n text-align: center;\n border-bottom: 4px solid var(--primary);\n box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n }\n\n .mcu-logo {\n font-weight: 700;\n color: var(--primary);\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n display: block;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem 1rem;\n }\n\n .search-box {\n position: sticky;\n top: 20px;\n z-index: 100;\n margin-bottom: 2.5rem;\n background: white;\n padding: 1rem;\n border-radius: 50px;\n box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);\n display: flex;\n align-items: center;\n }\n\n .search-input {\n width: 100%;\n border: none;\n padding: 0.5rem 1rem;\n font-size: 1.1rem;\n outline: none;\n font-family: inherit;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 1.5rem;\n }\n\n .doc-card {\n background: var(--card-bg);\n border-radius: 20px;\n padding: 1.5rem;\n border: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n }\n\n .doc-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);\n border-color: var(--primary);\n }\n\n .course-badge {\n display: inline-block;\n background: var(--primary-light);\n color: var(--primary-dark);\n padding: 4px 12px;\n border-radius: 999px;\n font-size: 0.85rem;\n font-weight: 600;\n margin-bottom: 1rem;\n }\n\n .doc-title {\n font-size: 1.2rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: var(--secondary);\n min-height: 3.6em;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .btn-group {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-top: auto;\n }\n\n .btn {\n padding: 12px;\n border-radius: 12px;\n text-align: center;\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 500;\n cursor: pointer;\n border: none;\n transition: all 0.2s;\n }\n\n .btn-view {\n background: #f1f5f9;\n color: var(--secondary);\n }\n\n .btn-view:hover { background: #e2e8f0; }\n\n .btn-dl {\n background: var(--primary);\n color: white;\n }\n\n .btn-dl:hover { background: var(--primary-dark); }\n\n \/* Modal Preview *\/\n .modal {\n display: none;\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(15, 23, 42, 0.8);\n z-index: 1000;\n backdrop-filter: blur(8px);\n justify-content: center;\n align-items: center;\n }\n\n .modal-container {\n background: white;\n width: 95%;\n max-width: 1100px;\n height: 90vh;\n border-radius: 24px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);\n }\n\n .modal-header {\n padding: 1.25rem 2rem;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #fafafa;\n }\n\n .modal-body {\n flex: 1;\n background: #525659; \/* Standard PDF viewer bg *\/\n position: relative;\n }\n\n .pdf-viewer {\n width: 100%;\n height: 100%;\n border: none;\n }\n\n .close-modal {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #fee2e2;\n color: #ef4444;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 1.5rem;\n font-weight: bold;\n }\n\n .no-preview {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: white;\n background: var(--secondary);\n text-align: center;\n padding: 2rem;\n }\n\n @media (max-width: 640px) {\n .grid { grid-template-columns: 1fr; }\n .modal-container { height: 95vh; width: 100%; border-radius: 0; }\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <span class=\"mcu-logo\">MAHACHULALONGKORNRAJAVIDYALAYA UNIVERSITY<\/span>\n <h1>\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e25\u0e31\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e21\u0e04\u0e2d.2 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/h1>\n <p style=\"color: var(--text-muted); margin-top: 0.5rem;\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e04\u0e13\u0e30\u0e04\u0e23\u0e38\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/p>\n<\/header>\n\n <div class=\"grid\" id=\"courseGrid\">\n <!-- Cards will be injected here -->\n <\/div>\n<\/div>\n\n<!-- Modal Structure -->\n<div id=\"previewModal\" class=\"modal\">\n <div class=\"modal-container\">\n <div class=\"modal-header\">\n <div>\n <span id=\"modalBadge\" class=\"course-badge\"><\/span>\n <h2 id=\"modalTitle\" style=\"font-size: 1.1rem; color: var(--secondary);\"><\/h2>\n <\/div>\n <div class=\"close-modal\" onclick=\"closeModal()\">×<\/div>\n <\/div>\n <div class=\"modal-body\" id=\"modalBody\">\n <iframe id=\"pdfIframe\" class=\"pdf-viewer\" src=\"\"><\/iframe>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const courseData = [\n { id: 1, code: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e04\u0e23\u0e38\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\", title: \"\u0e21\u0e2d\u0e04. 2 (\u0e01\u0e23\u0e2d\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e04\u0e38\u0e13\u0e27\u0e38\u0e12\u0e34\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34)\", url: \"https:\/\/medkorat.mcu.ac.th\/wp-content\/uploads\/2026\/03\/2-\u0e21\u0e04\u0e2d.2-\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32-\u0e21\u0e08\u0e23-\u0e19\u0e04\u0e23\u0e23\u0e32\u0e0a\u0e2a\u0e35\u0e21\u0e32.pdf\" },\n ];\n\n function renderCards(data) {\n const grid = document.getElementById('courseGrid');\n grid.innerHTML = data.map(item => `\n <div class=\"doc-card\">\n <div>\n <span class=\"course-badge\">${item.code}<\/span>\n <h3 class=\"doc-title\">${item.title}<\/h3>\n <\/div>\n <div class=\"btn-group\">\n <button class=\"btn btn-view\" onclick=\"openPreview('${item.code}')\">\u0e14\u0e39\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07<\/button>\n ${item.url ? \n `<a href=\"${item.url}\" class=\"btn btn-dl\" target=\"_blank\" download>\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14<\/a>` : \n `<button class=\"btn btn-dl\" style=\"opacity:0.5; cursor:not-allowed\" disabled>\u0e44\u0e21\u0e48\u0e21\u0e35\u0e44\u0e1f\u0e25\u0e4c<\/button>`\n }\n <\/div>\n <\/div>\n `).join('');\n }\n\n function openPreview(code) {\n const item = courseData.find(c => c.code === code);\n const modal = document.getElementById('previewModal');\n const iframe = document.getElementById('pdfIframe');\n const body = document.getElementById('modalBody');\n \n document.getElementById('modalBadge').innerText = item.code;\n document.getElementById('modalTitle').innerText = item.title;\n\n if (item.url) {\n iframe.style.display = \"block\";\n \/\/ Append #toolbar=0 to hide internal PDF UI for a cleaner look\n iframe.src = item.url + \"#toolbar=0&navpanes=0\";\n \n \/\/ Remove any existing error message\n const errorMsg = document.querySelector('.no-preview');\n if (errorMsg) errorMsg.remove();\n } else {\n iframe.style.display = \"none\";\n iframe.src = \"\";\n body.innerHTML += `\n <div class=\"no-preview\">\n <div style=\"font-size: 3rem; margin-bottom: 1rem;\">\ud83d\udcc1<\/div>\n <h3>\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\n <p style=\"margin-top: 10px; opacity: 0.7;\">\u0e02\u0e2d\u0e2d\u0e20\u0e31\u0e22 \u0e02\u0e13\u0e30\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e19\u0e35\u0e49<\/p>\n <\/div>\n `;\n }\n\n modal.style.display = 'flex';\n document.body.style.overflow = 'hidden'; \/\/ Prevent scroll\n }\n\n function closeModal() {\n const modal = document.getElementById('previewModal');\n const iframe = document.getElementById('pdfIframe');\n modal.style.display = 'none';\n iframe.src = \"\"; \/\/ Stop PDF loading\n document.body.style.overflow = 'auto';\n \n const errorMsg = document.querySelector('.no-preview');\n if (errorMsg) errorMsg.remove();\n }\n\n function filterCourses() {\n const term = document.getElementById('searchInput').value.toLowerCase();\n const filtered = courseData.filter(c => \n c.code.toLowerCase().includes(term) || \n c.title.toLowerCase().includes(term)\n );\n renderCards(filtered);\n }\n\n \/\/ Initial load\n renderCards(courseData);\n\n \/\/ Close on background click\n window.onclick = function(event) {\n if (event.target == document.getElementById('previewModal')) closeModal();\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e21\u0e04\u0e2d. \u0e52 \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e21\u0e04\u0e2d.2 – \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 MCU MAHACHULALONGKORNRAJAVIDYALAYA UNIVERSITY \u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e25\u0e31\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e21\u0e04\u0e2d.2 \u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e04\u0e13\u0e30\u0e04\u0e23\u0e38\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-967","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=967"}],"version-history":[{"count":26,"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/967\/revisions"}],"predecessor-version":[{"id":1358,"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/967\/revisions\/1358"}],"wp:attachment":[{"href":"https:\/\/medkorat.mcu.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}