{"id":4191,"date":"2026-01-07T08:23:45","date_gmt":"2026-01-07T01:23:45","guid":{"rendered":"https:\/\/www.trakanhospital.go.th\/newsite2025\/?page_id=4191"},"modified":"2026-01-23T14:14:55","modified_gmt":"2026-01-23T07:14:55","slug":"application","status":"publish","type":"page","link":"https:\/\/www.trakanhospital.go.th\/newsite2025\/?page_id=4191","title":{"rendered":"Application"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4191\" class=\"elementor elementor-4191\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3a8118 e-flex e-con-boxed e-con e-parent\" data-id=\"f3a8118\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-881ab3b elementor-widget elementor-widget-html\" data-id=\"881ab3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e42\u0e04\u0e49\u0e14 App Portal \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a WordPress -->\r\n<!-- \u0e41\u0e19\u0e30\u0e19\u0e33: \u0e2b\u0e32\u0e01\u0e18\u0e35\u0e21\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e21\u0e35\u0e01\u0e32\u0e23\u0e25\u0e07 Tailwind CSS \u0e44\u0e27\u0e49\u0e41\u0e25\u0e49\u0e27 \u0e43\u0e2b\u0e49\u0e25\u0e1a script \u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e19\u0e35\u0e49\u0e2d\u0e2d\u0e01\u0e04\u0e23\u0e31\u0e1a -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n<script>\r\n    tailwind.config = {\r\n        \/\/ prefix: 'tw-', \/\/ \u0e41\u0e19\u0e30\u0e19\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e16\u0e49\u0e32 CSS \u0e0a\u0e19\u0e01\u0e31\u0e1a\u0e18\u0e35\u0e21\u0e2b\u0e25\u0e31\u0e01\r\n        theme: {\r\n            extend: {\r\n                fontFamily: {\r\n                    sans: ['Inter', 'Prompt', 'sans-serif'],\r\n                },\r\n                colors: {\r\n                    primary: {\r\n                        50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4',\r\n                        400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e',\r\n                        800: '#115e59', 900: '#134e4a',\r\n                    },\r\n                    secondary: { 500: '#06b6d4' }\r\n                }\r\n            }\r\n        }\r\n    }\r\n<\/script>\r\n\r\n<style>\r\n    \/* Scoped Styles \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e01\u0e23\u0e30\u0e17\u0e1a\u0e18\u0e35\u0e21 WordPress *\/\r\n    #wp-portal-wrapper .no-scrollbar::-webkit-scrollbar { display: none; }\r\n    #wp-portal-wrapper .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\r\n    \r\n    #wp-portal-wrapper .glass-panel {\r\n        background: rgba(255, 255, 255, 0.7);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border: 1px solid rgba(255, 255, 255, 0.5);\r\n    }\r\n\r\n    #wp-portal-wrapper .card-hover {\r\n        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    }\r\n    #wp-portal-wrapper .card-hover:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 10px 30px -10px rgba(20, 184, 166, 0.2);\r\n    }\r\n    \r\n    \/* \u0e41\u0e01\u0e49\u0e44\u0e02 Reset \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a WordPress themes *\/\r\n    #wp-portal-wrapper ul, #wp-portal-wrapper li { list-style: none; margin: 0; padding: 0; }\r\n    #wp-portal-wrapper a { text-decoration: none; box-shadow: none; }\r\n<\/style>\r\n\r\n<!-- Main Wrapper -->\r\n<br><br>\r\n<div id=\"wp-portal-wrapper\" class=\"relative bg-gray-50 text-slate-800 font-sans w-full min-h-[800px] rounded-xl overflow-hidden border border-gray-200 flex shadow-sm\">\r\n\r\n    <!-- Notification Toast -->\r\n    <div id=\"portal-toast\" class=\"absolute bottom-5 right-5 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none\">\r\n        <div class=\"bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3\">\r\n            <i class=\"ph-fill ph-check-circle text-primary-400 text-xl\"><\/i>\r\n            <span id=\"portal-toast-message\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19...<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Sidebar Backdrop (Mobile) -->\r\n    <div id=\"portal-backdrop\" class=\"absolute inset-0 bg-gray-900\/50 z-20 hidden lg:hidden transition-opacity opacity-0\" onclick=\"togglePortalSidebar()\"><\/div>\r\n\r\n    <!-- Sidebar -->\r\n    <aside id=\"portal-sidebar\" class=\"bg-white w-64 absolute lg:static h-full flex flex-col transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-30 shadow-xl lg:shadow-none border-r border-gray-100\">\r\n        <!-- Header \/ Logo -->\r\n        <div class=\"p-6 flex items-center gap-3\">\r\n            <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-primary-400 to-secondary-500 flex items-center justify-center text-white shadow-lg shadow-primary-500\/30\">\r\n                <i class=\"ph-bold ph-squares-four text-xl\"><\/i>\r\n            <\/div>\r\n            <h2 class=\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-500 m-0 leading-tight\">TkApp<span class=\"text-gray-400 font-normal\">Center<\/span><\/h2>\r\n        <\/div>\r\n\r\n        <!-- Navigation -->\r\n        <nav class=\"flex-1 px-4 space-y-1 overflow-y-auto no-scrollbar\">\r\n            <p class=\"px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 mt-4\">\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48<\/p>\r\n            \r\n            <button onclick=\"filterPortalApps('all')\" class=\"w-full text-left flex items-center gap-3 px-4 py-3 rounded-xl bg-primary-50 text-primary-700 font-medium hover:bg-primary-100 transition-colors mb-1\">\r\n                <i class=\"ph ph-squares-four text-lg\"><\/i>\r\n                <span>\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\r\n            <\/button>\r\n            <button onclick=\"filterPortalApps('Mainsystem')\" class=\"w-full text-left flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary-600 transition-colors mb-1\">\r\n                <i class=\"ph ph-briefcase text-lg\"><\/i>\r\n                <span>\u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19\u0e2b\u0e25\u0e31\u0e01<\/span>\r\n            <\/button>\r\n            <button onclick=\"filterPortalApps('Communication')\" class=\"w-full text-left flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary-600 transition-colors mb-1\">\r\n                <i class=\"ph ph-chat-circle-dots text-lg\"><\/i>\r\n                <span>\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23<\/span>\r\n            <\/button>\r\n            <button onclick=\"filterPortalApps('Design')\" class=\"w-full text-left flex items\t\t\t\t\t-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary-600 transition-colors mb-1\">\r\n                <i class=\"ph ph-paint-brush text-lg\"><\/i>\r\n                <span>\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a<\/span>\r\n            <\/button>\r\n             <button onclick=\"filterPortalApps('Morpromt')\" class=\"w-full text-left flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary-600 transition-colors mb-1\">\r\n                <i class=\"ph ph-chart-line-up text-lg\"><\/i>\r\n                <span>\u0e2b\u0e21\u0e2d\u0e1e\u0e23\u0e49\u0e2d\u0e21<\/span>\r\n            <\/button>\r\n        <\/nav>\r\n        \r\n        <!-- Profile Mini -->\r\n        <div class=\"p-4 border-t border-gray-100\">\r\n            <div class=\"flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 cursor-pointer\">\r\n                <div class=\"w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-bold text-xs\">AU<\/div>\r\n                <div class=\"flex-1 min-w-0\">\r\n                    <p class=\"text-sm font-semibold text-gray-900 truncate m-0\">Admin User<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/aside>\r\n\r\n    <!-- Content Area -->\r\n    <main class=\"flex-1 flex flex-col h-full relative overflow-hidden bg-gradient-to-br from-gray-50 via-gray-50 to-primary-50\/30\">\r\n        \r\n        <!-- Top Bar -->\r\n        <header class=\"h-20 glass-panel sticky top-0 z-10 px-6 flex items-center justify-between shadow-sm\">\r\n            <div class=\"flex items-center gap-4\">\r\n                <button onclick=\"togglePortalSidebar()\" class=\"lg:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100\">\r\n                    <i class=\"ph ph-list text-2xl\"><\/i>\r\n                <\/button>\r\n                <div class=\"relative w-full max-w-xs\">\r\n                    <i class=\"ph ph-magnifying-glass absolute left-3 top-1\/2 transform -translate-y-1\/2 text-gray-400\"><\/i>\r\n                    <input type=\"text\" id=\"portalSearchInput\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32...\" \r\n                           class=\"pl-10 pr-4 py-2 w-full bg-gray-100\/50 border-none rounded-xl focus:ring-2 focus:ring-primary-500 focus:bg-white transition-all text-sm outline-none m-0\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <!-- Scroll Area -->\r\n        <div class=\"flex-1 overflow-y-auto p-6 lg:p-10 scroll-smooth h-full\">\r\n            \r\n            <!-- Banner -->\r\n            <div class=\"rounded-3xl bg-gradient-to-r from-primary-600 to-secondary-500 p-8 mb-10 text-white shadow-lg relative overflow-hidden\">\r\n                <div class=\"relative z-10\">\r\n                    <h2 class=\"text-2xl lg:text-3xl font-bold mb-2 text-white\">Application for Administrator<\/h2>\r\n                    <p class=\"text-primary-50 mb-4 text-sm lg:text-base opacity-90\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25<\/p>\r\n                <\/div>\r\n                <!-- Decor -->\r\n                <div class=\"absolute top-0 right-0 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl transform translate-x-10 -translate-y-10\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- Grid Container -->\r\n            <div id=\"portalAppsContainer\" class=\"pb-10\">\r\n                \r\n                <!-- Group: Mainsystem -->\r\n                <div class=\"portal-section mb-8\" data-category=\"Mainsystem\">\r\n                    <h3 class=\"text-base font-bold text-gray-700 mb-4 flex items-center gap-2\">\r\n                        <span class=\"w-1.5 h-5 bg-primary-500 rounded-full\"><\/span> \u0e23\u0e30\u0e1a\u0e1a\u0e07\u0e32\u0e19\u0e2b\u0e25\u0e31\u0e01\r\n                    <\/h3>\r\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5\">\r\n                        <!-- Card 1 -->\r\n\t\t\t\t\t\t<a href=\"https:\/\/himpro.trakanhospital.go.th:444\/Account\/Login?ReturnUrl=%2Fhimpro\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master1')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Himpro Online<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Himpro Online<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                        <!-- Card 2 -->\r\n                        <a href=\"https:\/\/hrm.trakanhospital.go.th:444\/\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master2')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">HRM Himpro<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 HRM Himpro<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                        <!-- Card 3 -->\r\n                        <a href=\"http:\/\/192.168.19.23\/\/#\/login\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master3')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">IPD Paperless<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 IPD Paperless<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t<!-- Card 4 -->\r\n\t\t\t\t\t\t<a href=\"http:\/\/192.168.63.30\/smart-or-web\/login\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master4')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Smart OR<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Smart OR<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                        <!-- Card 5 -->\r\n                        <a href=\"http:\/\/192.168.63.161:8080\/#\/login\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master5')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Smart Refer<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Smart Refer<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                        <!-- Card 6 -->\r\n                        <a href=\"https:\/\/referzone2.trakanhospital.go.th\/\">\r\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Task Master6')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-check-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Refer Back<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Refer Back<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Group: Communication -->\r\n                <div class=\"portal-section mb-8\" data-category=\"Communication\">\r\n                    <h3 class=\"text-base font-bold text-gray-700 mb-4 flex items-center gap-2\">\r\n                        <span class=\"w-1.5 h-5 bg-secondary-500 rounded-full\"><\/span> \u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\r\n                    <\/h3>\r\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5\">\r\n                         <!-- Card 4 -->\r\n                         <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Connect Chat')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-chat-teardrop-text\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Connect Chat<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e0a\u0e17\u0e20\u0e32\u0e22\u0e43\u0e19<\/p>\r\n                        <\/div>\r\n                        <!-- Card 5 -->\r\n                         <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Company Mail')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-envelope-simple\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Company Mail<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                 <!-- Group: Design -->\r\n                 <div class=\"portal-section mb-8\" data-category=\"Design\">\r\n                    <h3 class=\"text-base font-bold text-gray-700 mb-4 flex items-center gap-2\">\r\n                        <span class=\"w-1.5 h-5 bg-pink-500 rounded-full\"><\/span> \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\r\n                    <\/h3>\r\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5\">\r\n                         <!-- Card 6 -->\r\n                         <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\" onclick=\"portalLaunch('Brand Assets')\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-image-square\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">Brand Assets<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e25\u0e42\u0e01\u0e49\u0e41\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                 <!-- Group: Morpromt -->\r\n                 <div class=\"portal-section mb-8\" data-category=\"Morpromt\">\r\n                    <h3 class=\"text-base font-bold text-gray-700 mb-4 flex items-center gap-2\">\r\n                        <span class=\"w-1.5 h-5 bg-emerald-500 rounded-full\"><\/span> \u0e2b\u0e21\u0e2d\u0e1e\u0e23\u0e49\u0e2d\u0e21\r\n                    <\/h3>\r\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5\">\r\n                         <!-- Card 7 -->\r\n\t\t\t\t\t\t <a href=\"https:\/\/cvp1.moph.go.th\/appointment\/\">\r\n                         <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover cursor-pointer group\">\r\n                            <div class=\"flex items-start justify-between mb-3\">\r\n                                <div class=\"w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\">\r\n                                    <i class=\"ph-fill ph-money\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <h4 class=\"text-gray-900 font-bold text-base m-0 mb-1\">\u0e08\u0e2d\u0e07\u0e04\u0e34\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/h4>\r\n                            <p class=\"text-gray-500 text-xs m-0 line-clamp-2\">\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e1b\u0e34\u0e14 Slot \u0e08\u0e2d\u0e07\u0e04\u0e34\u0e27\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c<\/p>\r\n                        <\/div>\r\n\t\t\t\t\t\t<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/main>\r\n<\/div>\r\n\r\n<!-- Scripts Logic for WordPress -->\r\n<script>\r\n    (function() {\r\n        \/\/ Scoped Variables to avoid conflict with WP\r\n        const wrapper = document.getElementById('wp-portal-wrapper');\r\n        const sidebar = document.getElementById('portal-sidebar');\r\n        const backdrop = document.getElementById('portal-backdrop');\r\n        const searchInput = document.getElementById('portalSearchInput');\r\n        const toast = document.getElementById('portal-toast');\r\n        const toastMsg = document.getElementById('portal-toast-message');\r\n\r\n        \/\/ Functions exposed to window for inline onclicks, \r\n        \/\/ but prefixed to avoid conflict\r\n        window.togglePortalSidebar = function() {\r\n            const isClosed = sidebar.classList.contains('-translate-x-full');\r\n            if (isClosed) {\r\n                sidebar.classList.remove('-translate-x-full');\r\n                backdrop.classList.remove('hidden');\r\n                setTimeout(() => backdrop.classList.remove('opacity-0'), 10);\r\n            } else {\r\n                sidebar.classList.add('-translate-x-full');\r\n                backdrop.classList.add('opacity-0');\r\n                setTimeout(() => backdrop.classList.add('hidden'), 300);\r\n            }\r\n        };\r\n\r\n        window.filterPortalApps = function(category) {\r\n            const sections = wrapper.querySelectorAll('.portal-section');\r\n            searchInput.value = ''; \r\n\r\n            sections.forEach(section => {\r\n                if (category === 'all' || section.getAttribute('data-category') === category) {\r\n                    section.classList.remove('hidden');\r\n                    section.animate([\r\n                        { opacity: 0, transform: 'translateY(10px)' },\r\n                        { opacity: 1, transform: 'translateY(0)' }\r\n                    ], { duration: 300, easing: 'ease-out' });\r\n                } else {\r\n                    section.classList.add('hidden');\r\n                }\r\n            });\r\n        };\r\n\r\n        window.portalLaunch = function(appName) {\r\n            toastMsg.textContent = `\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 ${appName}...`;\r\n            toast.classList.remove('translate-y-20', 'opacity-0');\r\n            toast.classList.add('translate-y-0', 'opacity-100');\r\n            setTimeout(() => {\r\n                toast.classList.remove('translate-y-0', 'opacity-100');\r\n                toast.classList.add('translate-y-20', 'opacity-0');\r\n            }, 3000);\r\n        };\r\n\r\n        \/\/ Search Listener\r\n        if(searchInput) {\r\n            searchInput.addEventListener('keyup', function(e) {\r\n                const searchText = e.target.value.toLowerCase();\r\n                \/\/ Select all cards inside the wrapper\r\n                const cards = wrapper.querySelectorAll('.portal-section .grid > div');\r\n                \r\n                cards.forEach(card => {\r\n                    const title = card.querySelector('h4').textContent.toLowerCase();\r\n                    const desc = card.querySelector('p').textContent.toLowerCase();\r\n                    if (title.includes(searchText) || desc.includes(searchText)) {\r\n                        card.style.display = 'block'; \/\/ Or flex\/grid depending on parent\r\n                    } else {\r\n                        card.style.display = 'none';\r\n                    }\r\n                });\r\n\r\n                \/\/ Hide empty sections\r\n                const sections = wrapper.querySelectorAll('.portal-section');\r\n                sections.forEach(section => {\r\n                    const allCards = section.querySelectorAll('.grid > div');\r\n                    let hasVisible = false;\r\n                    allCards.forEach(c => {\r\n                        if (c.style.display !== 'none') hasVisible = true;\r\n                    });\r\n                    if (hasVisible) section.classList.remove('hidden');\r\n                    else section.classList.add('hidden');\r\n                });\r\n            });\r\n        }\r\n    })();\r\n<\/script>\r\n<!-- \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e42\u0e04\u0e49\u0e14 App Portal -->\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>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19&#8230; TkAppCenter \u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e23\u0e30\u0e1a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4191","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/pages\/4191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4191"}],"version-history":[{"count":27,"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/pages\/4191\/revisions"}],"predecessor-version":[{"id":4934,"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=\/wp\/v2\/pages\/4191\/revisions\/4934"}],"wp:attachment":[{"href":"https:\/\/www.trakanhospital.go.th\/newsite2025\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}