{"id":3523,"date":"2025-06-25T16:26:23","date_gmt":"2025-06-25T09:26:23","guid":{"rendered":"https:\/\/www.medicalrecords.kku.ac.th\/?page_id=3523"},"modified":"2025-08-04T18:48:38","modified_gmt":"2025-08-04T11:48:38","slug":"elementor-3523","status":"publish","type":"page","link":"https:\/\/www.medicalrecords.kku.ac.th\/?page_id=3523","title":{"rendered":"Elementor #3523"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e23\u0e30\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 | \u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e23\u0e35\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\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;800&display=swap\" rel=\"stylesheet\">\r\n <!-- \r\n Chosen Palette: Modern Medical \/ Calm Tech\r\n Application Structure Plan: This redesign transforms the manual into a full-fledged, single-page homepage for the assessment system. The information architecture is designed for a new user journey: 1. Hero Section: An immediate, impactful introduction with the system's mission and a primary Call-to-Action (CTA). 2. Key Features: Icon-driven cards to quickly communicate system value. 3. Interactive Dashboard Preview: A visually engaging, non-functional preview of the system's analytical power, using mock charts to entice users. 4. Streamlined User Guide: Integrates the original manual content into a cleaner, task-oriented format with tabs for different user roles. 5. Final CTA: A concluding, strong prompt to drive user action. This top-down structure guides the user from awareness to action, making it a true homepage rather than just a document.\r\n Visualization & Content Choices:\r\n - Hero Section: Goal: Create a strong first impression. Method: Large headline, mission statement, and a prominent, gradient button. Interaction: None, purely for impact.\r\n - Features Section: Goal: Quickly convey benefits. Method: 3-column grid with custom icons (HTML\/CSS) and concise text. Interaction: Subtle hover effects.\r\n - Dashboard Preview: Goal: Showcase system capabilities. Method: A visually rich layout with metric cards and dynamic-looking charts rendered by Chart.js on <canvas>. Interaction: Hover effects on cards and charts to simulate interactivity.\r\n - User Guide: Goal: Provide clear, role-specific instructions. Method: A tabbed interface (JS-driven) to separate content for Assessors and Admins, preventing information overload. The complex first-time login is presented as a clear, numbered list within this section.\r\n - CTA & Footer: Standard sections to round out the user journey.\r\n - Overall: Use of smooth scrolling, animated counters, and fade-in-on-scroll effects (IntersectionObserver API) to create a premium, engaging experience.\r\n CONFIRMATION: NO SVG graphics used. NO Mermaid JS used.\r\n -->\r\n <style>\r\n body {\r\n font-family: 'Kanit', sans-serif;\r\n background-color: #f7f9fc;\r\n }\r\n .gradient-text {\r\n background: linear-gradient(45deg, #0e7490, #0369a1, #0ea5e9);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.6);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n .nav-link.active {\r\n color: #0ea5e9;\r\n font-weight: 600;\r\n }\r\n .guide-tab-content { display: none; }\r\n .guide-tab-content.active { display: block; }\r\n .guide-tab.active {\r\n border-color: #0ea5e9;\r\n background-color: #f0f9ff;\r\n color: #0369a1;\r\n }\r\n .wizard-step-panel {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n .wizard-step-panel.active {\r\n display: flex;\r\n }\r\n .fade-in-section {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n }\r\n .fade-in-section.is-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-slate-700\">\r\n\r\n <!-- Header & Navigation -->\r\n <header id=\"main-header\" class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-50 transition-all duration-300 shadow-sm\">\r\n <div class=\"container mx-auto px-6 py-4\">\r\n <div class=\"flex justify-between items-center\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"w-10 h-10 bg-gradient-to-br from-cyan-500 to-sky-600 rounded-lg flex items-center justify-center\">\r\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"><\/path><\/svg>\r\n <\/div>\r\n <span class=\"text-xl font-bold text-slate-800\">\u0e23\u0e30\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/span>\r\n <\/div>\r\n <nav class=\"hidden md:flex items-center space-x-8 text-sm font-medium\">\r\n <a href=\"#features\" class=\"nav-link text-slate-600 hover:text-sky-600 transition-colors\">\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34<\/a>\r\n <a href=\"#dashboard\" class=\"nav-link text-slate-600 hover:text-sky-600 transition-colors\">\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14<\/a>\r\n <a href=\"#guide\" class=\"nav-link text-slate-600 hover:text-sky-600 transition-colors\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/a>\r\n <\/nav>\r\n <a href=\"https:\/\/kku.world\/assmt-md10\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"hidden md:inline-block bg-sky-600 text-white px-5 py-2.5 rounded-lg text-sm font-semibold hover:bg-sky-700 transition-colors shadow-md hover:shadow-lg\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\r\n <\/a>\r\n <button id=\"mobile-menu-btn\" class=\"md:hidden text-slate-700\">\r\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Mobile Menu -->\r\n <div id=\"mobile-menu\" class=\"hidden md:hidden px-6 pb-4 space-y-2\">\r\n <a href=\"#features\" class=\"nav-link block text-slate-600 hover:text-sky-600 transition-colors py-2\">\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34<\/a>\r\n <a href=\"#dashboard\" class=\"nav-link block text-slate-600 hover:text-sky-600 transition-colors py-2\">\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14<\/a>\r\n <a href=\"#guide\" class=\"nav-link block text-slate-600 hover:text-sky-600 transition-colors py-2\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/a>\r\n <a href=\"https:\/\/script.google.com\/macros\/s\/AKfycbzpbaXdy3DUBq0h9_8PNBlTMzgQM1J1-mxxy6B4xPLoWRXRpOoum3ubjmGm-GrZLm4e\/exec\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block w-full text-center bg-sky-600 text-white px-5 py-2.5 rounded-lg text-sm font-semibold hover:bg-sky-700 transition-colors mt-2\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\r\n <\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <main>\r\n <!-- Hero Section -->\r\n <section id=\"hero\" class=\"relative overflow-hidden bg-gradient-to-b from-sky-50 to-white pt-20 pb-24 sm:pt-28 sm:pb-32\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight\">\r\n <span class=\"block gradient-text\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33 \u0e23\u0e31\u0e01\u0e29\u0e32\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08<\/span>\r\n <span class=\"block text-slate-800 mt-2\">\u0e2a\u0e39\u0e48\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/span>\r\n <\/h1>\r\n <p class=\"mt-6 max-w-2xl mx-auto text-lg text-slate-600\">\r\n \u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e1e\u0e17\u0e22\u0e4c\u0e14\u0e49\u0e27\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e02\u0e31\u0e1a\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e14\u0e49\u0e27\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e23\u0e31\u0e01\u0e29\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\r\n <\/p>\r\n <div class=\"mt-10 flex justify-center space-x-4\">\r\n <a href=\"https:\/\/kku.world\/assmt-md10\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"bg-gradient-to-r from-sky-500 to-cyan-500 text-white px-8 py-3 rounded-full text-base font-semibold hover:scale-105 transform transition-all duration-300 shadow-lg\">\r\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a \/ \u0e02\u0e2d\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\r\n <\/a>\r\n <a href=\"#guide\" class=\"bg-white text-slate-700 px-8 py-3 rounded-full text-base font-semibold hover:bg-slate-100 transform transition-all duration-300 shadow-md border border-slate-200\">\r\n \u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e27\u0e34\u0e18\u0e35\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Features Section -->\r\n <section id=\"features\" class=\"py-20 sm:py-24 bg-white\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center fade-in-section\">\r\n <h2 class=\"text-3xl font-bold text-slate-900\">\u0e02\u0e31\u0e1a\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e14\u0e49\u0e27\u0e22\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e17\u0e23\u0e07\u0e1e\u0e25\u0e31\u0e07<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-slate-600\">\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\u0e16\u0e39\u0e01\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e21\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e17\u0e48\u0e32\u0e19\u0e43\u0e19\u0e17\u0e38\u0e01\u0e21\u0e34\u0e15\u0e34<\/p>\r\n <\/div>\r\n <div class=\"mt-16 grid grid-cols-1 md:grid-cols-3 gap-10\">\r\n <div class=\"text-center p-8 bg-slate-50 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 fade-in-section\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-sky-100 to-sky-200 rounded-2xl mb-6\">\r\n <svg class=\"w-8 h-8 text-sky-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold text-slate-800\">\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19<\/h3>\r\n <p class=\"mt-2 text-slate-500\">\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e2a\u0e32\u0e01\u0e25 \u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21\u0e17\u0e38\u0e01\u0e21\u0e34\u0e15\u0e34\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/p>\r\n <\/div>\r\n <div class=\"text-center p-8 bg-slate-50 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 fade-in-section\" style=\"transition-delay: 150ms;\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-teal-100 to-teal-200 rounded-2xl mb-6\">\r\n <svg class=\"w-8 h-8 text-teal-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold text-slate-800\">\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/h3>\r\n <p class=\"mt-2 text-slate-500\">\u0e41\u0e1b\u0e25\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22 \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e41\u0e19\u0e27\u0e42\u0e19\u0e49\u0e21\u0e41\u0e25\u0e30\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27<\/p>\r\n <\/div>\r\n <div class=\"text-center p-8 bg-slate-50 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-300 fade-in-section\" style=\"transition-delay: 300ms;\">\r\n <div class=\"inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-amber-100 to-amber-200 rounded-2xl mb-6\">\r\n <svg class=\"w-8 h-8 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-semibold text-slate-800\">\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07<\/h3>\r\n <p class=\"mt-2 text-slate-500\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e17\u0e35\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Dashboard Preview Section -->\r\n <section id=\"dashboard\" class=\"py-20 sm:py-24\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center fade-in-section\">\r\n <h2 class=\"text-3xl font-bold text-slate-900\">\u0e40\u0e2b\u0e47\u0e19\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e43\u0e19\u0e1e\u0e23\u0e34\u0e1a\u0e15\u0e32<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-slate-600\">\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25 \u0e17\u0e35\u0e48\u0e08\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e17\u0e48\u0e32\u0e19\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e23\u0e34\u0e07<\/p>\r\n <\/div>\r\n <div class=\"mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 fade-in-section\">\r\n <div class=\"glass-card p-6 rounded-2xl text-center shadow-md\">\r\n <h4 class=\"text-sm font-medium text-slate-500\">\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h4>\r\n <p class=\"text-4xl font-bold text-sky-600 mt-2\" data-counter=\"1248\">0<\/p>\r\n <\/div>\r\n <div class=\"glass-card p-6 rounded-2xl text-center shadow-md\">\r\n <h4 class=\"text-sm font-medium text-slate-500\">\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\u0e40\u0e09\u0e25\u0e35\u0e48\u0e22<\/h4>\r\n <p class=\"text-4xl font-bold text-teal-600 mt-2\" data-counter=\"92.7\" data-decimal=\"1\">0.0<\/p>\r\n <\/div>\r\n <div class=\"glass-card p-6 rounded-2xl text-center shadow-md\">\r\n <h4 class=\"text-sm font-medium text-slate-500\">\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19<\/h4>\r\n <p class=\"text-4xl font-bold text-indigo-600 mt-2\" data-counter=\"56\">0<\/p>\r\n <\/div>\r\n <div class=\"glass-card p-6 rounded-2xl text-center shadow-md\">\r\n <h4 class=\"text-sm font-medium text-slate-500\">\u0e1e\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e14\u0e47\u0e19 (\u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e19\u0e35\u0e49)<\/h4>\r\n <p class=\"text-4xl font-bold text-amber-600 mt-2\" data-counter=\"32\">0<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-10 grid grid-cols-1 lg:grid-cols-5 gap-8 fade-in-section\">\r\n <div class=\"lg:col-span-3 bg-white p-6 rounded-2xl shadow-lg\">\r\n <h3 class=\"font-semibold text-slate-800\">\u0e41\u0e19\u0e27\u0e42\u0e19\u0e49\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e23\u0e32\u0e22\u0e40\u0e14\u0e37\u0e2d\u0e19<\/h3>\r\n <div class=\"h-80 mt-4\"><canvas id=\"preview-line-chart\"><\/canvas><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-white p-6 rounded-2xl shadow-lg\">\r\n <h3 class=\"font-semibold text-slate-800\">\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e32\u0e21\u0e1a\u0e17\u0e1a\u0e32\u0e17<\/h3>\r\n <div class=\"h-80 mt-4\"><canvas id=\"preview-doughnut-chart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Guide Section -->\r\n <section id=\"guide\" class=\"py-20 sm:py-24 bg-white\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center fade-in-section\">\r\n <h2 class=\"text-3xl font-bold text-slate-900\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-slate-600\">\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e08\u0e19\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e02\u0e31\u0e49\u0e19\u0e2a\u0e39\u0e07<\/p>\r\n <\/div>\r\n <div class=\"mt-16 grid grid-cols-1 lg:grid-cols-3 gap-12 fade-in-section\">\r\n <div class=\"lg:col-span-1\">\r\n <h3 class=\"text-2xl font-semibold text-slate-800\">\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e04\u0e23\u0e31\u0e49\u0e07\u0e41\u0e23\u0e01<\/h3>\r\n <p class=\"mt-2 text-slate-500\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e43\u0e2b\u0e21\u0e48 \u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e04\u0e23\u0e31\u0e49\u0e07\u0e41\u0e23\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e42\u0e1b\u0e23\u0e14\u0e17\u0e33\u0e15\u0e32\u0e21\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/p>\r\n <div id=\"login-wizard\" class=\"mt-6 bg-slate-50 border border-slate-200 rounded-xl p-6 relative min-h-[480px] flex flex-col justify-between\">\r\n <!-- Wizard content is injected here by JS -->\r\n <\/div>\r\n <div class=\"mt-4 flex justify-between items-center\">\r\n <button id=\"wizard-prev\" class=\"bg-slate-200 text-slate-700 hover:bg-slate-300 font-bold py-2 px-4 rounded-lg transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed\">\u2190 \u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32<\/button>\r\n <div id=\"wizard-step-indicator\" class=\"text-sm font-medium text-slate-500\"><\/div>\r\n <button id=\"wizard-next\" class=\"bg-sky-600 text-white hover:bg-sky-700 font-bold py-2 px-4 rounded-lg transition duration-150 ease-in-out\">\u0e16\u0e31\u0e14\u0e44\u0e1b \u2192<\/button>\r\n <\/div>\r\n <p class=\"mt-6 text-sm text-slate-500 italic\">\u0e2b\u0e32\u0e01\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c \u0e43\u0e2b\u0e49\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e41\u0e25\u0e30\u0e04\u0e25\u0e34\u0e01 \"\u0e02\u0e2d\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\" \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e23\u0e2d\u0e01\u0e1f\u0e2d\u0e23\u0e4c\u0e21<\/p>\r\n <\/div>\r\n <div class=\"lg:col-span-2\">\r\n <div class=\"flex space-x-2 border-b border-slate-200 mb-6\">\r\n <button class=\"guide-tab active py-3 px-4 font-medium text-sm\" data-target=\"guide-assessor\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 (User)<\/button>\r\n <button class=\"guide-tab py-3 px-4 font-medium text-sm text-slate-500\" data-target=\"guide-admin\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (Admin)<\/button>\r\n <\/div>\r\n <div>\r\n <div id=\"guide-assessor\" class=\"guide-tab-content active\">\r\n <dl class=\"space-y-6\">\r\n <div>\r\n <dt class=\"font-semibold text-slate-800\">1. \u0e01\u0e32\u0e23\u0e17\u0e33\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19<\/dt>\r\n <dd class=\"mt-2 text-slate-600 pl-4 border-l-2 border-slate-200\">\u0e43\u0e19\u0e41\u0e17\u0e47\u0e1a \"\u0e17\u0e33\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\" \u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21 (\u0e40\u0e0a\u0e48\u0e19 IPD-\u0e41\u0e1e\u0e17\u0e22\u0e4c) \u0e04\u0e25\u0e34\u0e01 \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\" \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22\u0e41\u0e25\u0e30\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e43\u0e19\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e01\u0e48\u0e2d\u0e19\u0e01\u0e14 \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\"<\/dd>\r\n <\/div>\r\n <div>\r\n <dt class=\"font-semibold text-slate-800\">2. \u0e01\u0e32\u0e23\u0e14\u0e39\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34<\/dt>\r\n <dd class=\"mt-2 text-slate-600 pl-4 border-l-2 border-slate-200\">\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e41\u0e17\u0e47\u0e1a \"\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\" \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e17\u0e48\u0e32\u0e19\u0e40\u0e04\u0e22\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e27\u0e49\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/dd>\r\n <\/div>\r\n <\/dl>\r\n <\/div>\r\n <div id=\"guide-admin\" class=\"guide-tab-content\">\r\n <dl class=\"space-y-6\">\r\n <div>\r\n <dt class=\"font-semibold text-slate-800\">1. \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c<\/dt>\r\n <dd class=\"mt-2 text-slate-600 pl-4 border-l-2 border-slate-200\">\u0e43\u0e19\u0e41\u0e17\u0e47\u0e1a \"\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\" \u0e17\u0e48\u0e32\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34, \u0e1b\u0e0f\u0e34\u0e40\u0e2a\u0e18, \u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e01\u0e49\u0e44\u0e02\u0e04\u0e33\u0e02\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e17\u0e35\u0e48\u0e21\u0e35\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e49\u0e27<\/dd>\r\n <\/div>\r\n <div>\r\n <dt class=\"font-semibold text-slate-800\">2. \u0e01\u0e32\u0e23\u0e14\u0e39\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/dt>\r\n <dd class=\"mt-2 text-slate-600 pl-4 border-l-2 border-slate-200\">\u0e17\u0e48\u0e32\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07 \"\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\" \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e48\u0e07\u0e2d\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1f\u0e25\u0e4c Google Sheet \u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e19\u0e35\u0e49<\/dd>\r\n <\/div>\r\n <\/dl>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Final CTA Section -->\r\n <section class=\"bg-slate-800\">\r\n <div class=\"container mx-auto px-6 py-20 text-center\">\r\n <h2 class=\"text-3xl font-bold text-white\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e35\u0e48\u0e08\u0e30\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07?<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-slate-300\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19 \u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e02\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e41\u0e25\u0e49\u0e27\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/p>\r\n <div class=\"mt-8\">\r\n <a href=\"https:\/\/script.google.com\/macros\/s\/AKfycbzpbaXdy3DUBq0h9_8PNBlTMzgQM1J1-mxxy6B4xPLoWRXRpOoum3ubjmGm-GrZLm4e\/exec\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"bg-white text-sky-600 px-8 py-3 rounded-full text-base font-semibold hover:bg-slate-100 transform transition-all duration-300 shadow-lg\">\r\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e25\u0e22\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <footer class=\"bg-white border-t border-slate-200\">\r\n <div class=\"container mx-auto px-6 py-6 text-center text-sm text-slate-500\">\r\n <p>© 2024 \u0e23\u0e30\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 | \u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e23\u0e35\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c \u0e04\u0e13\u0e30\u0e41\u0e1e\u0e17\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c<\/p>\r\n <p class=\"mt-1\">\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e42\u0e14\u0e22: \u0e24\u0e17\u0e18\u0e34\u0e20\u0e1e | \u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e42\u0e14\u0e22: \u0e07\u0e32\u0e19\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e34\u0e15\u0e34<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \/\/ Mobile menu\r\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n mobileMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n \/\/ Sticky header\r\n const header = document.getElementById('main-header');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) {\r\n header.classList.add('shadow-md');\r\n } else {\r\n header.classList.remove('shadow-md');\r\n }\r\n });\r\n\r\n \/\/ Smooth scrolling for nav links\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n document.querySelector(this.getAttribute('href')).scrollIntoView({\r\n behavior: 'smooth'\r\n });\r\n if (mobileMenu.classList.contains('hidden') === false) {\r\n mobileMenu.classList.add('hidden');\r\n }\r\n });\r\n });\r\n\r\n \/\/ Active nav link highlighting on scroll\r\n const sections = document.querySelectorAll('section');\r\n const navLinks = document.querySelectorAll('.nav-link');\r\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.4 };\r\n const sectionObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n navLinks.forEach(link => {\r\n link.classList.toggle('active', link.getAttribute('href').includes(entry.target.id));\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n sections.forEach(section => sectionObserver.observe(section));\r\n\r\n \/\/ Guide tabs\r\n const guideTabs = document.querySelectorAll('.guide-tab');\r\n const guideTabContents = document.querySelectorAll('.guide-tab-content');\r\n guideTabs.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n guideTabs.forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n\r\n const target = document.getElementById(tab.dataset.target);\r\n guideTabContents.forEach(c => c.classList.remove('active'));\r\n target.classList.add('active');\r\n });\r\n });\r\n \r\n \/\/ Login Guide Wizard\r\n const loginWizardContainer = document.getElementById('login-wizard');\r\n const wizardPrevBtn = document.getElementById('wizard-prev');\r\n const wizardNextBtn = document.getElementById('wizard-next');\r\n const wizardStepIndicator = document.getElementById('wizard-step-indicator');\r\n\r\n const loginWizardSteps = [\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 1: \u0e04\u0e25\u0e34\u0e01 'REVIEW PERMISSIONS'\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/1.png\",\r\n description: \"\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e1e\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49 \u0e43\u0e2b\u0e49\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21\u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\"\r\n },\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 2: \u0e04\u0e25\u0e34\u0e01 '\u0e02\u0e31\u0e49\u0e19\u0e2a\u0e39\u0e07' (Advanced)\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/2.png\",\r\n description: \"\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d 'Google \u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e41\u0e2d\u0e1b\u0e19\u0e35\u0e49' \u0e43\u0e2b\u0e49\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e25\u0e34\u0e07\u0e01\u0e4c '\u0e02\u0e31\u0e49\u0e19\u0e2a\u0e39\u0e07' \u0e17\u0e35\u0e48\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\"\r\n },\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 3: \u0e44\u0e1b\u0e22\u0e31\u0e07\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/3.png\",\r\n description: \"\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e04\u0e25\u0e34\u0e01 '\u0e02\u0e31\u0e49\u0e19\u0e2a\u0e39\u0e07' \u0e08\u0e30\u0e21\u0e35\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e1b\u0e23\u0e32\u0e01\u0e0f\u0e02\u0e36\u0e49\u0e19 \u0e43\u0e2b\u0e49\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48 '\u0e44\u0e1b\u0e17\u0e35\u0e48 \u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e1c\u0e39\u0e49\u0e1b\u0e48\u0e27\u0e22 (\u0e44\u0e21\u0e48\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22)'\"\r\n },\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 4: \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/4.png\",\r\n description: \"\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35 Google \u0e02\u0e2d\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19 (@kku.ac.th) \u0e17\u0e35\u0e48\u0e17\u0e48\u0e32\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e01\u0e31\u0e1a\u0e23\u0e30\u0e1a\u0e1a\"\r\n },\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 5: \u0e01\u0e14 '\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15' (Allow)\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/5.png\",\r\n description: \"\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e17\u0e35\u0e48\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\u0e23\u0e49\u0e2d\u0e07\u0e02\u0e2d \u0e41\u0e25\u0e49\u0e27\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e21\u0e32\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e2a\u0e38\u0e14\u0e41\u0e25\u0e30\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21 '\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15'\"\r\n },\r\n {\r\n title: \"\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 6: \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!\",\r\n image: \"https:\/\/www.medicalrecords.kku.ac.th\/wp-content\/uploads\/2025\/06\/1-1.png\",\r\n description: \"\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e01\u0e14 '\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15' \u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e30\u0e19\u0e33\u0e17\u0e48\u0e32\u0e19\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\"\r\n }\r\n ];\r\n\r\n let currentLoginStep = 0;\r\n \r\n function setupLoginWizard() {\r\n loginWizardContainer.innerHTML = '';\r\n loginWizardSteps.forEach((step, index) => {\r\n const panel = document.createElement('div');\r\n panel.className = 'wizard-step-panel absolute inset-6 transition-opacity duration-300 ease-in-out';\r\n panel.style.opacity = '0';\r\n panel.innerHTML = `\r\n <div>\r\n <h4 class=\"font-semibold text-slate-700\">${step.title}<\/h4>\r\n <p class=\"text-sm text-slate-500 mt-1 mb-4\">${step.description}<\/p>\r\n <\/div>\r\n <div class=\"flex-grow flex items-center justify-center\">\r\n <img decoding=\"async\" src=\"${step.image}\" alt=\"${step.title}\" class=\"max-w-full h-auto max-h-64 rounded-lg border border-slate-200 shadow-md object-contain\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/400x250\/e2e8f0\/475569?text=Image+Not+Found';\">\r\n <\/div>\r\n `;\r\n loginWizardContainer.appendChild(panel);\r\n });\r\n updateLoginWizard();\r\n }\r\n\r\n function updateLoginWizard() {\r\n const panels = loginWizardContainer.querySelectorAll('.wizard-step-panel');\r\n panels.forEach((panel, index) => {\r\n if (index === currentLoginStep) {\r\n panel.classList.add('active');\r\n setTimeout(() => panel.style.opacity = '1', 50);\r\n } else {\r\n panel.classList.remove('active');\r\n panel.style.opacity = '0';\r\n }\r\n });\r\n wizardStepIndicator.textContent = `\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 ${currentLoginStep + 1} \/ ${loginWizardSteps.length}`;\r\n wizardPrevBtn.disabled = currentLoginStep === 0;\r\n wizardNextBtn.disabled = currentLoginStep === loginWizardSteps.length - 1;\r\n }\r\n\r\n wizardPrevBtn.addEventListener('click', () => {\r\n if (currentLoginStep > 0) {\r\n currentLoginStep--;\r\n updateLoginWizard();\r\n }\r\n });\r\n\r\n wizardNextBtn.addEventListener('click', () => {\r\n if (currentLoginStep < loginWizardSteps.length - 1) {\r\n currentLoginStep++;\r\n updateLoginWizard();\r\n }\r\n });\r\n\r\n \/\/ Fade-in sections on scroll\r\n const fadeInSections = document.querySelectorAll('.fade-in-section');\r\n const fadeInObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if(entry.isIntersecting){\r\n entry.target.classList.add('is-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n fadeInSections.forEach(section => fadeInObserver.observe(section));\r\n\r\n \/\/ Animated counter\r\n const counters = document.querySelectorAll('[data-counter]');\r\n const counterObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const el = entry.target;\r\n const target = +el.dataset.counter;\r\n const decimals = +el.dataset.decimal || 0;\r\n let current = 0;\r\n const duration = 1500;\r\n const stepTime = 20;\r\n const totalSteps = duration \/ stepTime;\r\n const increment = target \/ totalSteps;\r\n\r\n const updateCounter = () => {\r\n current += increment;\r\n if (current < target) {\r\n el.innerText = current.toFixed(decimals);\r\n requestAnimationFrame(updateCounter);\r\n } else {\r\n el.innerText = target.toFixed(decimals);\r\n }\r\n };\r\n updateCounter();\r\n observer.unobserve(el);\r\n }\r\n });\r\n }, { threshold: 0.8 });\r\n counters.forEach(counter => counterObserver.observe(counter));\r\n \r\n \/\/ Mock Charts\r\n const lineChartCtx = document.getElementById('preview-line-chart')?.getContext('2d');\r\n if(lineChartCtx){\r\n new Chart(lineChartCtx, {\r\n type: 'line',\r\n data: {\r\n labels: ['\u0e21.\u0e04.', '\u0e01.\u0e1e.', '\u0e21\u0e35.\u0e04.', '\u0e40\u0e21.\u0e22.', '\u0e1e.\u0e04.', '\u0e21\u0e34.\u0e22.'],\r\n datasets: [{\r\n label: '\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c',\r\n data: [88, 89, 91, 90, 92.5, 92.7],\r\n borderColor: '#0ea5e9',\r\n backgroundColor: 'rgba(14, 165, 233, 0.1)',\r\n fill: true,\r\n tension: 0.4\r\n }]\r\n },\r\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }\r\n });\r\n }\r\n\r\n const doughnutChartCtx = document.getElementById('preview-doughnut-chart')?.getContext('2d');\r\n if(doughnutChartCtx){\r\n new Chart(doughnutChartCtx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['\u0e41\u0e1e\u0e17\u0e22\u0e4c', '\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25', '\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19'],\r\n datasets: [{\r\n data: [55, 35, 10],\r\n backgroundColor: ['#0ea5e9', '#14b8a6', '#f59e0b'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: { responsive: true, maintainAspectRatio: false, cutout: '70%', plugins: { legend: { position: 'bottom' } } }\r\n });\r\n }\r\n \r\n \/\/ Initialize\r\n setupLoginWizard();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e40\u0e27\u0e0a\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 | \u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25\u0e28\u0e23\u0e35\u0e19\u0e04\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c \u0e23\u0e30\u0e1a\u0e1a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-3523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3523"}],"version-history":[{"count":22,"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3523\/revisions"}],"predecessor-version":[{"id":3721,"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/3523\/revisions\/3721"}],"wp:attachment":[{"href":"https:\/\/www.medicalrecords.kku.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}