\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a E-Service<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" xintegrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f8fafc; \/* Tailwind's gray-50 *\/\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"text-gray-700\">\n\n \n <header class=\"bg-white shadow-md sticky top-0 z-10\">\n <div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"flex items-center space-x-3\">\n <i class=\"fas fa-book-open text-2xl text-emerald-600\"><\/i>\n <h1 class=\"text-xl font-bold text-gray-800\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 E-Service<\/h1>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"container mx-auto px-6 py-12\">\n\n \n <section id=\"how-to-use\" class=\"mb-16 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6 border-l-4 border-emerald-500 pl-4\">1. \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h2>\n <div class=\"space-y-6\">\n <div class=\"flex items-start\">\n <div class=\"flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-emerald-500 text-white font-bold text-xl mr-4\">1<\/div>\n <div>\n <h4 class=\"font-bold text-xl text-gray-800\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39<\/h4>\n <p class=\"mt-1\">\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39 \u0e08\u0e30\u0e40\u0e01\u0e34\u0e14\u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49:<\/p>\n <ul class=\"list-disc list-inside mt-2 space-y-1 text-gray-600\">\n <li>\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e25\u0e2d\u0e22\u0e2a\u0e39\u0e07\u0e02\u0e36\u0e49\u0e19<\/span> \u0e41\u0e25\u0e30\u0e21\u0e35\u0e40\u0e07\u0e32\u0e0a\u0e31\u0e14\u0e02\u0e36\u0e49\u0e19<\/li>\n <li>\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e02\u0e22\u0e32\u0e22\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19<\/span> \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e35<\/li>\n <li>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e21\u0e19\u0e39\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"flex items-start\">\n <div class=\"flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-emerald-500 text-white font-bold text-xl mr-4\">2<\/div>\n <div>\n <h4 class=\"font-bold text-xl text-gray-800\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h4>\n <p class=\"mt-1\">\n \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e49\u0e19\u0e46 \u0e08\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32\u0e43\u0e19 <span class=\"font-semibold\">\u0e41\u0e17\u0e47\u0e1a\u0e43\u0e2b\u0e21\u0e48 (New Tab)<\/span> \u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"services\" class=\"section-fade-in\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6 border-l-4 border-emerald-500 pl-4\">2. \u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e21\u0e19\u0e39\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/h2>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-file-invoice-dollar\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e2a\u0e1e\u0e21.\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e1b\u0e23\u0e32\u0e01\u0e32\u0e23<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e41\u0e25\u0e30\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a-\u0e08\u0e48\u0e32\u0e22\u0e15\u0e48\u0e32\u0e07\u0e46<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-graduation-cap\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a SGS<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14 \u0e2a\u0e1e\u0e10.<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-database\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a DMC 68<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25 (Data Management Center)<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-id-card\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e43\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e02\u0e49\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e23\u0e38\u0e2a\u0e20\u0e32 (KSP Self-Service)<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n\n <script>\n const sections = document.querySelectorAll('.section-fade-in');\n\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n }\n });\n }, {\n threshold: 0.1\n });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 E-Service<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" xintegrity=\"sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9\/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n\n <style>\n \/* Custom styles to integrate Sarabun font with Tailwind *\/\n body {\n font-family: 'Sarabun', sans-serif;\n }\n\n \/* Animation for cards on load *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Class to apply animation *\/\n .card-animate {\n \/* Set initial state for animation *\/\n opacity: 0; \n \/* Apply animation *\/\n animation: fadeInUp 0.6s ease-out forwards;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <div class=\"container mx-auto px-6 py-12\">\n \n <header class=\"text-center mb-16\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-gray-800 mb-3\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 E-Service<\/h1>\n <p class=\"text-lg text-gray-600\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1e\u0e39\u0e25\u0e40\u0e08\u0e23\u0e34\u0e0d\u0e27\u0e34\u0e17\u0e22\u0e32\u0e04\u0e21<\/p>\n <\/header>\n\n <main class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10\">\n \n \n <a href=\"https:\/\/salary.sesaosp.go.th\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-file-invoice-dollar fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/sgs.bopp-obec.info\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-graduation-cap fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a SGS\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/portal.bopp-obec.info\/obec68\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-database fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a DMC 68\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/www.ksp.or.th\/ksp-selfservice\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-id-card fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e43\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\n <\/h2>\n <\/a>\n\n <\/main>\n \n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Apply staggered animation to service cards\n const cards = document.querySelectorAll('.service-card');\n cards.forEach((card, index) => {\n \/\/ Set animation delay for each card to create a staggered effect\n card.style.animationDelay = `${index * 150}ms`;\n card.classList.add('card-animate');\n });\n \n \/\/ Define styles for reuse (can be done in a <style> tag as well)\n const cardBaseStyles = 'bg-white rounded-2xl shadow-md p-8 text-center flex flex-col items-center justify-center gap-y-5 cursor-pointer transition-all duration-300 ease-in-out';\n const cardHoverStyles = 'hover:shadow-xl hover:-translate-y-2 hover:border-green-500';\n const iconContainerStyles = 'w-20 h-20 rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:bg-green-600 group-hover:text-white';\n \n \/\/ Apply styles using Tailwind's utility classes via JavaScript\n cards.forEach(card => {\n card.setAttribute('class', `service-card group ${cardBaseStyles} ${cardHoverStyles}`);\n const iconContainer = card.querySelector('.icon-container');\n if(iconContainer) {\n iconContainer.setAttribute('class', `icon-container ${iconContainerStyles} ${card.classList.contains('card-animate') ? 'card-animate' : ''}`);\n }\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a E-Service \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 E-Ser […]<\/p>\n","protected":false},"author":31,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33424","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/comments?post=33424"}],"version-history":[{"count":29,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424\/revisions"}],"predecessor-version":[{"id":39065,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424\/revisions\/39065"}],"wp:attachment":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/media?parent=33424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33424,"date":"2022-09-19T15:50:55","date_gmt":"2022-09-19T08:50:55","guid":{"rendered":"https:\/\/pwschool.ac.th\/?page_id=33424"},"modified":"2025-07-15T22:48:20","modified_gmt":"2025-07-15T15:48:20","slug":"e-service","status":"publish","type":"page","link":"https:\/\/pwschool.ac.th\/home\/e-service","title":{"rendered":"E-SERVICE"},"content":{"rendered":"\n\n\n\n \n \n \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a E-Service<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" xintegrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #f8fafc; \/* Tailwind's gray-50 *\/\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"text-gray-700\">\n\n \n <header class=\"bg-white shadow-md sticky top-0 z-10\">\n <div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"flex items-center space-x-3\">\n <i class=\"fas fa-book-open text-2xl text-emerald-600\"><\/i>\n <h1 class=\"text-xl font-bold text-gray-800\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 E-Service<\/h1>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"container mx-auto px-6 py-12\">\n\n \n <section id=\"how-to-use\" class=\"mb-16 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6 border-l-4 border-emerald-500 pl-4\">1. \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h2>\n <div class=\"space-y-6\">\n <div class=\"flex items-start\">\n <div class=\"flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-emerald-500 text-white font-bold text-xl mr-4\">1<\/div>\n <div>\n <h4 class=\"font-bold text-xl text-gray-800\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39<\/h4>\n <p class=\"mt-1\">\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39 \u0e08\u0e30\u0e40\u0e01\u0e34\u0e14\u0e41\u0e2d\u0e19\u0e34\u0e40\u0e21\u0e0a\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07 \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49:<\/p>\n <ul class=\"list-disc list-inside mt-2 space-y-1 text-gray-600\">\n <li>\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e25\u0e2d\u0e22\u0e2a\u0e39\u0e07\u0e02\u0e36\u0e49\u0e19<\/span> \u0e41\u0e25\u0e30\u0e21\u0e35\u0e40\u0e07\u0e32\u0e0a\u0e31\u0e14\u0e02\u0e36\u0e49\u0e19<\/li>\n <li>\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e02\u0e22\u0e32\u0e22\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19<\/span> \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e35<\/li>\n <li>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e21\u0e19\u0e39\u0e08\u0e30 <span class=\"font-semibold text-emerald-600\">\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"flex items-start\">\n <div class=\"flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-emerald-500 text-white font-bold text-xl mr-4\">2<\/div>\n <div>\n <h4 class=\"font-bold text-xl text-gray-800\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h4>\n <p class=\"mt-1\">\n \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e19\u0e39\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e19\u0e31\u0e49\u0e19\u0e46 \u0e08\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32\u0e43\u0e19 <span class=\"font-semibold\">\u0e41\u0e17\u0e47\u0e1a\u0e43\u0e2b\u0e21\u0e48 (New Tab)<\/span> \u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"services\" class=\"section-fade-in\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6 border-l-4 border-emerald-500 pl-4\">2. \u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e21\u0e19\u0e39\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/h2>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-file-invoice-dollar\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e2a\u0e1e\u0e21.\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e1b\u0e23\u0e32\u0e01\u0e32\u0e23<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e41\u0e25\u0e30\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a-\u0e08\u0e48\u0e32\u0e22\u0e15\u0e48\u0e32\u0e07\u0e46<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-graduation-cap\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a SGS<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e43\u0e19\u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14 \u0e2a\u0e1e\u0e10.<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-database\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e23\u0e30\u0e1a\u0e1a DMC 68<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25 (Data Management Center)<\/p>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center flex flex-col items-center hover:shadow-xl hover:-translate-y-1 transition-all duration-300\">\n <div class=\"mb-4 text-4xl text-emerald-600\"><i class=\"fa-solid fa-id-card\"><\/i><\/div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">\u0e43\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e<\/h4>\n <p class=\"text-sm text-gray-600\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e02\u0e49\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e23\u0e38\u0e2a\u0e20\u0e32 (KSP Self-Service)<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n\n <script>\n const sections = document.querySelectorAll('.section-fade-in');\n\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n }\n });\n }, {\n threshold: 0.1\n });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 E-Service<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" xintegrity=\"sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9\/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n\n <style>\n \/* Custom styles to integrate Sarabun font with Tailwind *\/\n body {\n font-family: 'Sarabun', sans-serif;\n }\n\n \/* Animation for cards on load *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Class to apply animation *\/\n .card-animate {\n \/* Set initial state for animation *\/\n opacity: 0; \n \/* Apply animation *\/\n animation: fadeInUp 0.6s ease-out forwards;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n <div class=\"container mx-auto px-6 py-12\">\n \n <header class=\"text-center mb-16\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-gray-800 mb-3\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 E-Service<\/h1>\n <p class=\"text-lg text-gray-600\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1e\u0e39\u0e25\u0e40\u0e08\u0e23\u0e34\u0e0d\u0e27\u0e34\u0e17\u0e22\u0e32\u0e04\u0e21<\/p>\n <\/header>\n\n <main class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10\">\n \n \n <a href=\"https:\/\/salary.sesaosp.go.th\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-file-invoice-dollar fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e07\u0e34\u0e19\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23\u0e04\u0e23\u0e39\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/sgs.bopp-obec.info\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-graduation-cap fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a SGS\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/portal.bopp-obec.info\/obec68\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-database fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e23\u0e30\u0e1a\u0e1a DMC 68\n <\/h2>\n <\/a>\n\n \n <a href=\"https:\/\/www.ksp.or.th\/ksp-selfservice\/\" target=\"_blank\" class=\"service-card group\">\n <div class=\"icon-container bg-green-100 text-green-600\">\n <i class=\"fa-solid fa-id-card fa-2x\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-semibold text-gray-700 group-hover:text-green-600 transition-colors duration-300\">\n \u0e43\u0e1a\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e27\u0e34\u0e0a\u0e32\u0e0a\u0e35\u0e1e\n <\/h2>\n <\/a>\n\n <\/main>\n \n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Apply staggered animation to service cards\n const cards = document.querySelectorAll('.service-card');\n cards.forEach((card, index) => {\n \/\/ Set animation delay for each card to create a staggered effect\n card.style.animationDelay = `${index * 150}ms`;\n card.classList.add('card-animate');\n });\n \n \/\/ Define styles for reuse (can be done in a <style> tag as well)\n const cardBaseStyles = 'bg-white rounded-2xl shadow-md p-8 text-center flex flex-col items-center justify-center gap-y-5 cursor-pointer transition-all duration-300 ease-in-out';\n const cardHoverStyles = 'hover:shadow-xl hover:-translate-y-2 hover:border-green-500';\n const iconContainerStyles = 'w-20 h-20 rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:bg-green-600 group-hover:text-white';\n \n \/\/ Apply styles using Tailwind's utility classes via JavaScript\n cards.forEach(card => {\n card.setAttribute('class', `service-card group ${cardBaseStyles} ${cardHoverStyles}`);\n const iconContainer = card.querySelector('.icon-container');\n if(iconContainer) {\n iconContainer.setAttribute('class', `icon-container ${iconContainerStyles} ${card.classList.contains('card-animate') ? 'card-animate' : ''}`);\n }\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a E-Service \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 E-Ser […]<\/p>\n","protected":false},"author":31,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33424","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/comments?post=33424"}],"version-history":[{"count":29,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424\/revisions"}],"predecessor-version":[{"id":39065,"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/pages\/33424\/revisions\/39065"}],"wp:attachment":[{"href":"https:\/\/pwschool.ac.th\/home\/wp-json\/wp\/v2\/media?parent=33424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}