KSD e-Service – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\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=Kanit:wght@400;500;700&family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n :root {\n --primary-color: #004d40; \/* Deep Teal *\/\n --secondary-color: #00796b; \/* Lighter Teal *\/\n --accent-color: #ffab40; \/* Amber Accent *\/\n --background-color: #e0f2f1; \/* Very Light Teal *\/\n --card-background: #ffffff;\n --text-color: #263238;\n --light-text-color: #546e7a;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n overflow-x: hidden;\n }\n \n h1, h2, h3, h4, h5, h6 {\n font-family: 'Kanit', sans-serif;\n font-weight: 700;\n }\n\n \/* --- Hero Header --- *\/\n .hero-header {\n padding: 1rem 0;\n background: linear-gradient(135deg, rgba(0, 77, 64, 0.9), rgba(0, 121, 107, 0.8)), url('https:\/\/images.pexels.com\/photos\/3184339\/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');\n background-size: cover;\n background-position: center;\n color: white;\n text-align: center;\n }\n\n .hero-header h1 {\n font-size: clamp(2.5rem, 5vw, 3.5rem);\n text-shadow: 2px 2px 8px rgba(0,0,0,0.4);\n }\n \n \/* --- Rotary Dial Container --- *\/\n .dial-container {\n position: relative;\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n justify-content: center;\n perspective: 1000px;\n }\n\n .rotary-dial {\n position: relative;\n width: 600px;\n height: 600px;\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .dial-item {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n margin: -60px;\n transition: transform 0.5s ease;\n }\n\n .dial-item a {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: var(--card-background);\n box-shadow: 0 10px 20px rgba(0, 77, 64, 0.1);\n text-decoration: none;\n color: var(--primary-color);\n transition: all 0.3s ease;\n }\n \n .dial-item a:hover {\n background-color: var(--primary-color);\n color: white;\n transform: scale(1.1);\n box-shadow: 0 15px 30px rgba(0, 77, 64, 0.3);\n }\n\n .dial-icon {\n font-size: 2.5rem;\n margin-bottom: 5px;\n }\n\n .dial-text {\n font-family: 'Kanit', sans-serif;\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n }\n\n .dial-info-box {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 250px;\n height: 250px;\n background: var(--card-background);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px;\n flex-direction: column;\n box-shadow: inset 0 0 20px rgba(0, 77, 64, 0.1);\n border: 5px solid white;\n z-index: 1;\n overflow: hidden;\n }\n \n .dial-info-box::before {\n content: '';\n position: absolute;\n top: 15%;\n left: 15%;\n right: 15%;\n bottom: 15%;\n background-image: url('https:\/\/www.ksd.ac.th\/logo\/ksdlogo-2.png');\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0.1; \/* For the blurred\/faded effect *\/\n z-index: -1; \/* Place it behind the text *\/\n }\n \n .dial-info-box h3 {\n color: var(--primary-color);\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n }\n \n .dial-info-box p {\n color: var(--light-text-color);\n font-size: 0.9rem;\n line-height: 1.4;\n }\n\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"hero-header\">\n <div class=\"container\">\n <h1><i class=\"bi bi-cpu-fill me-3\"><\/i>KSD e-Service<\/h1>\n <p class=\"lead\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/header>\n\n \n <main class=\"dial-container\">\n <div class=\"rotary-dial\" id=\"rotary-dial\">\n <div class=\"dial-info-box\">\n <h3 id=\"dial-info-title\">KSD e-Service<\/h3>\n <p id=\"dial-info-desc\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n <\/div>\n \n <\/div>\n <\/main>\n\n \n <footer class=\"text-center p-4\">\n <div class=\"container\">\n <p class=\"mb-0 text-muted\">© \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 | \u0e2a\u0e1e\u0e1b.\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27 \u0e40\u0e02\u0e15 1<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const dial = document.getElementById('rotary-dial');\n const infoTitle = document.getElementById('dial-info-title');\n const infoDesc = document.getElementById('dial-info-desc');\n\n const services = [\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', desc: '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-person-check-fill', url: 'https:\/\/ksd.ac.th\/std\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e04\u0e27\u0e32\u0e21\u0e14\u0e35', desc: '\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e14\u0e35', icon: 'bi-award-fill', url: 'https:\/\/ksd.ac.th\/school_good' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e37\u0e1a\u0e04\u0e49\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07', desc: '\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e41\u0e25\u0e30\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-search', url: 'https:\/\/file.ksd.ac.th' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e40\u0e25\u0e02\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01', desc: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21', icon: 'bi-file-earmark-ruled-fill', url: 'https:\/\/ksd.ac.th\/no\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e0b\u0e37\u0e49\u0e2d-\u0e02\u0e2d\u0e08\u0e49\u0e32\u0e07', desc: '\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-cart-plus-fill', url: 'https:\/\/ksd.ac.th\/passadu\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07 QR Code', desc: '\u0e2a\u0e23\u0e49\u0e32\u0e07 QR Code \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e48\u0e32\u0e07\u0e46', icon: 'bi-qr-code-scan', url: 'https:\/\/ksd.ac.th\/qrcode2\/index.php' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2a\u0e37\u0e48\u0e2d\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22', desc: '\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2a\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22', icon: 'bi-printer-fill', url: 'https:\/\/ksd.ac.th\/thai\/thai.php' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19', desc: '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 \u0e2a\u0e48\u0e07 \u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49', icon: 'bi-journal-check', url: 'https:\/\/ksd.ac.th\/plan' }\n ];\n\n const radius = 250; \/\/ Radius of the circle\n const totalItems = services.length;\n const angleStep = (2 * Math.PI) \/ totalItems;\n\n services.forEach((service, i) => {\n const angle = i * angleStep - (Math.PI \/ 2); \/\/ Start from top\n const x = radius * Math.cos(angle);\n const y = radius * Math.sin(angle);\n\n const itemEl = document.createElement('div');\n itemEl.className = 'dial-item';\n itemEl.style.transform = `translate(${x}px, ${y}px)`;\n\n itemEl.innerHTML = `\n <a href=\"${service.url}\" target=\"_blank\">\n <i class=\"bi ${service.icon} dial-icon\"><\/i>\n <span class=\"dial-text\">${service.title}<\/span>\n <\/a>\n `;\n\n itemEl.addEventListener('mouseenter', () => {\n infoTitle.textContent = service.title;\n infoDesc.textContent = service.desc;\n });\n\n itemEl.addEventListener('mouseleave', () => {\n infoTitle.textContent = 'KSD e-Service';\n infoDesc.textContent = '\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23';\n });\n\n dial.appendChild(itemEl);\n });\n\n const dialItems = document.querySelectorAll('.dial-item');\n let currentRotation = 0;\n\n document.body.addEventListener('mousemove', (e) => {\n const centerX = window.innerWidth \/ 2;\n const mouseX = e.clientX;\n const rotationSpeed = 0.05;\n \n \/\/ Calculate rotation based on mouse position from center\n const rotationDelta = (mouseX - centerX) * rotationSpeed;\n \n \/\/ Apply a subtle rotation to the main dial\n dial.style.transform = `rotate(${rotationDelta}deg)`;\n\n \/\/ Counter-rotate each item so it stays upright\n dialItems.forEach(item => {\n const currentTransform = item.style.transform.split(')')[0] + ')'; \/\/ Get only the translate part\n item.style.transform = `${currentTransform} rotate(${-rotationDelta}deg)`;\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>KSD e-Service – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 KSD e-Servi…<\/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-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=57"}],"version-history":[{"count":3,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":57,"date":"2025-08-05T12:03:57","date_gmt":"2025-08-05T05:03:57","guid":{"rendered":"https:\/\/ksd.ac.th\/web\/?page_id=57"},"modified":"2025-08-05T12:57:38","modified_gmt":"2025-08-05T05:57:38","slug":"ksd-e-service","status":"publish","type":"page","link":"https:\/\/ksd.ac.th\/web\/?page_id=57","title":{"rendered":"KSD e-Service"},"content":{"rendered":"\n\n\n\n \n \n KSD e-Service – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/title>\n\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\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=Kanit:wght@400;500;700&family=Sarabun:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n :root {\n --primary-color: #004d40; \/* Deep Teal *\/\n --secondary-color: #00796b; \/* Lighter Teal *\/\n --accent-color: #ffab40; \/* Amber Accent *\/\n --background-color: #e0f2f1; \/* Very Light Teal *\/\n --card-background: #ffffff;\n --text-color: #263238;\n --light-text-color: #546e7a;\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n overflow-x: hidden;\n }\n \n h1, h2, h3, h4, h5, h6 {\n font-family: 'Kanit', sans-serif;\n font-weight: 700;\n }\n\n \/* --- Hero Header --- *\/\n .hero-header {\n padding: 1rem 0;\n background: linear-gradient(135deg, rgba(0, 77, 64, 0.9), rgba(0, 121, 107, 0.8)), url('https:\/\/images.pexels.com\/photos\/3184339\/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');\n background-size: cover;\n background-position: center;\n color: white;\n text-align: center;\n }\n\n .hero-header h1 {\n font-size: clamp(2.5rem, 5vw, 3.5rem);\n text-shadow: 2px 2px 8px rgba(0,0,0,0.4);\n }\n \n \/* --- Rotary Dial Container --- *\/\n .dial-container {\n position: relative;\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n justify-content: center;\n perspective: 1000px;\n }\n\n .rotary-dial {\n position: relative;\n width: 600px;\n height: 600px;\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .dial-item {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n margin: -60px;\n transition: transform 0.5s ease;\n }\n\n .dial-item a {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: var(--card-background);\n box-shadow: 0 10px 20px rgba(0, 77, 64, 0.1);\n text-decoration: none;\n color: var(--primary-color);\n transition: all 0.3s ease;\n }\n \n .dial-item a:hover {\n background-color: var(--primary-color);\n color: white;\n transform: scale(1.1);\n box-shadow: 0 15px 30px rgba(0, 77, 64, 0.3);\n }\n\n .dial-icon {\n font-size: 2.5rem;\n margin-bottom: 5px;\n }\n\n .dial-text {\n font-family: 'Kanit', sans-serif;\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n }\n\n .dial-info-box {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 250px;\n height: 250px;\n background: var(--card-background);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 20px;\n flex-direction: column;\n box-shadow: inset 0 0 20px rgba(0, 77, 64, 0.1);\n border: 5px solid white;\n z-index: 1;\n overflow: hidden;\n }\n \n .dial-info-box::before {\n content: '';\n position: absolute;\n top: 15%;\n left: 15%;\n right: 15%;\n bottom: 15%;\n background-image: url('https:\/\/www.ksd.ac.th\/logo\/ksdlogo-2.png');\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0.1; \/* For the blurred\/faded effect *\/\n z-index: -1; \/* Place it behind the text *\/\n }\n \n .dial-info-box h3 {\n color: var(--primary-color);\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n }\n \n .dial-info-box p {\n color: var(--light-text-color);\n font-size: 0.9rem;\n line-height: 1.4;\n }\n\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"hero-header\">\n <div class=\"container\">\n <h1><i class=\"bi bi-cpu-fill me-3\"><\/i>KSD e-Service<\/h1>\n <p class=\"lead\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e34\u0e40\u0e25\u0e47\u0e01\u0e17\u0e23\u0e2d\u0e19\u0e34\u0e01\u0e2a\u0e4c \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32<\/p>\n <\/div>\n <\/header>\n\n \n <main class=\"dial-container\">\n <div class=\"rotary-dial\" id=\"rotary-dial\">\n <div class=\"dial-info-box\">\n <h3 id=\"dial-info-title\">KSD e-Service<\/h3>\n <p id=\"dial-info-desc\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n <\/div>\n \n <\/div>\n <\/main>\n\n \n <footer class=\"text-center p-4\">\n <div class=\"container\">\n <p class=\"mb-0 text-muted\">© \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 | \u0e2a\u0e1e\u0e1b.\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27 \u0e40\u0e02\u0e15 1<\/p>\n <\/div>\n <\/footer>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const dial = document.getElementById('rotary-dial');\n const infoTitle = document.getElementById('dial-info-title');\n const infoDesc = document.getElementById('dial-info-desc');\n\n const services = [\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e0a\u0e47\u0e04\u0e0a\u0e37\u0e48\u0e2d\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', desc: '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19\u0e02\u0e2d\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-person-check-fill', url: 'https:\/\/ksd.ac.th\/std\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e04\u0e27\u0e32\u0e21\u0e14\u0e35', desc: '\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21\u0e41\u0e25\u0e30\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e14\u0e35', icon: 'bi-award-fill', url: 'https:\/\/ksd.ac.th\/school_good' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e37\u0e1a\u0e04\u0e49\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07', desc: '\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e41\u0e25\u0e30\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-search', url: 'https:\/\/file.ksd.ac.th' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e40\u0e25\u0e02\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01', desc: '\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21', icon: 'bi-file-earmark-ruled-fill', url: 'https:\/\/ksd.ac.th\/no\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e0b\u0e37\u0e49\u0e2d-\u0e02\u0e2d\u0e08\u0e49\u0e32\u0e07', desc: '\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d\u0e08\u0e31\u0e14\u0e08\u0e49\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'bi-cart-plus-fill', url: 'https:\/\/ksd.ac.th\/passadu\/' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07 QR Code', desc: '\u0e2a\u0e23\u0e49\u0e32\u0e07 QR Code \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e48\u0e32\u0e07\u0e46', icon: 'bi-qr-code-scan', url: 'https:\/\/ksd.ac.th\/qrcode2\/index.php' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2a\u0e37\u0e48\u0e2d\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22', desc: '\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e2a\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22', icon: 'bi-printer-fill', url: 'https:\/\/ksd.ac.th\/thai\/thai.php' },\n { title: '\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19', desc: '\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 \u0e2a\u0e48\u0e07 \u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49', icon: 'bi-journal-check', url: 'https:\/\/ksd.ac.th\/plan' }\n ];\n\n const radius = 250; \/\/ Radius of the circle\n const totalItems = services.length;\n const angleStep = (2 * Math.PI) \/ totalItems;\n\n services.forEach((service, i) => {\n const angle = i * angleStep - (Math.PI \/ 2); \/\/ Start from top\n const x = radius * Math.cos(angle);\n const y = radius * Math.sin(angle);\n\n const itemEl = document.createElement('div');\n itemEl.className = 'dial-item';\n itemEl.style.transform = `translate(${x}px, ${y}px)`;\n\n itemEl.innerHTML = `\n <a href=\"${service.url}\" target=\"_blank\">\n <i class=\"bi ${service.icon} dial-icon\"><\/i>\n <span class=\"dial-text\">${service.title}<\/span>\n <\/a>\n `;\n\n itemEl.addEventListener('mouseenter', () => {\n infoTitle.textContent = service.title;\n infoDesc.textContent = service.desc;\n });\n\n itemEl.addEventListener('mouseleave', () => {\n infoTitle.textContent = 'KSD e-Service';\n infoDesc.textContent = '\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23';\n });\n\n dial.appendChild(itemEl);\n });\n\n const dialItems = document.querySelectorAll('.dial-item');\n let currentRotation = 0;\n\n document.body.addEventListener('mousemove', (e) => {\n const centerX = window.innerWidth \/ 2;\n const mouseX = e.clientX;\n const rotationSpeed = 0.05;\n \n \/\/ Calculate rotation based on mouse position from center\n const rotationDelta = (mouseX - centerX) * rotationSpeed;\n \n \/\/ Apply a subtle rotation to the main dial\n dial.style.transform = `rotate(${rotationDelta}deg)`;\n\n \/\/ Counter-rotate each item so it stays upright\n dialItems.forEach(item => {\n const currentTransform = item.style.transform.split(')')[0] + ')'; \/\/ Get only the translate part\n item.style.transform = `${currentTransform} rotate(${-rotationDelta}deg)`;\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>KSD e-Service – \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e01\u0e48\u0e07\u0e2a\u0e30\u0e40\u0e14\u0e32 KSD e-Servi…<\/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-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=57"}],"version-history":[{"count":3,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/ksd.ac.th\/web\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}