{"id":4137,"date":"2026-01-08T07:07:46","date_gmt":"2026-01-08T07:07:46","guid":{"rendered":"https:\/\/humanlib2026.sru.ac.th\/?page_id=4137"},"modified":"2026-01-16T03:41:49","modified_gmt":"2026-01-16T03:41:49","slug":"%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%94%e0%b8%b4%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b8%88%e0%b8%b2%e0%b8%81%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b9%80%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%87%e0%b8%aa","status":"publish","type":"page","link":"https:\/\/humanlib2026.sru.ac.th\/?page_id=4137","title":{"rendered":"\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07"},"content":{"rendered":"\n\n\n\n \n \n SRU Navigator: \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e2a\u0e39\u0e48 \u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35<\/title>\n \n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Chart.js -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <!-- Google Fonts: Sarabun for Thai readability -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n\n <!-- Chosen Palette: Warm Neutrals with Orange Accent -->\n <!-- The palette uses a warm beige\/cream background to induce calmness, with a vibrant orange accent (#F97316) representing the iconic \"Orange Songthaew\" of Surat Thani. Text is dark grey for readability. -->\n \n <!-- Application Structure Plan: \n 1. Header: Clear title and purpose statement.\n 2. Interactive Route Selector (Main Dashboard): A tabbed interface allowing users to choose their starting point (City, Train Station, Airport). This is the primary interaction flow.\n 3. Dynamic Route Details: A content area that updates based on the selected starting point, showing step-by-step instructions, specific costs, and contacts.\n 4. Comparative Analysis Section: Two charts (Cost & Time) to help users decide the best mode based on their budget and schedule.\n 5. Summary & Tips: A static section with general advice and contact numbers.\n \n Why this structure? The user's primary goal is \"How do I get there from X?\". Grouping by starting point is the most logical information architecture. The comparison charts add value for planning.\n -->\n\n <!-- Visualization & Content Choices:\n 1. Route Selector Tabs: Interactive HTML buttons. Goal: Filter information by user context.\n 2. Step-by-Step Cards: Styled HTML cards using Unicode icons. Goal: Instructional clarity.\n 3. Cost Comparison Chart: Bar Chart (Chart.js). Goal: Compare estimated total costs (e.g., Taxi vs. Bus). Interaction: Hover for exact values. Justification: Bar charts are best for comparing values across categories.\n 4. Time Distribution Chart: Doughnut Chart (Chart.js). Goal: Visualize time breakdown for different routes. Interaction: Toggle datasets.\n 5. Confirmation: NO SVG graphics used. NO Mermaid JS used. All icons are Unicode or CSS shapes.\n -->\n\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n\n <style>\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: #FDFBF7; \/* Warm neutral background *\/\n color: #1F2937; \/* Dark gray text *\/\n }\n \n \/* Chart Container Styling - MANDATORY REQUIREMENT *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 500px; \/* Constraint width *\/\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 350px;\n }\n\n .active-tab {\n background-color: #F97316; \/* Orange-500 *\/\n color: white;\n border-color: #F97316;\n }\n \n .inactive-tab {\n background-color: white;\n color: #4B5563; \/* Gray-600 *\/\n border-color: #E5E7EB; \/* Gray-200 *\/\n }\n \n .inactive-tab:hover {\n background-color: #FFF7ED; \/* Orange-50 *\/\n }\n\n .step-card {\n transition: transform 0.2s;\n }\n .step-card:hover {\n transform: translateY(-2px);\n }\n <\/style>\n<\/head>\n<body class=\"flex flex-col min-h-screen\">\n\n <!-- Navigation \/ Header -->\n <nav class=\"bg-white shadow-sm sticky top-0 z-50\">\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16 items-center\">\n <div class=\"flex items-center\">\n <span class=\"text-3xl mr-2\">\ud83d\ude8c<\/span>\n <h1 class=\"text-xl font-bold text-gray-800\">SRU Navigator<\/h1>\n <\/div>\n <div class=\"text-sm text-gray-500 hidden sm:block\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e2a\u0e39\u0e48 \u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35<\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n <!-- Main Content -->\n <main class=\"flex-grow max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\n\n <!-- Intro Section -->\n <section class=\"mb-10 text-center max-w-3xl mx-auto\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-4\">\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/h2>\n <p class=\"text-lg text-gray-600\">\n \u0e22\u0e34\u0e19\u0e14\u0e35\u0e15\u0e49\u0e2d\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 \u0e40\u0e23\u0e32\u0e44\u0e14\u0e49\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e08\u0e32\u0e01\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e44\u0e1b\u0e16\u0e36\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\n <\/p>\n <div class=\"mt-6 flex justify-center gap-4 flex-wrap\">\n <div class=\"bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center\">\n <span class=\"text-2xl mr-3\">\ud83d\udccd<\/span>\n <div class=\"text-left\">\n <div class=\"text-xs text-gray-500\">\u0e23\u0e30\u0e22\u0e30\u0e17\u0e32\u0e07\u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07<\/div>\n <div class=\"font-bold text-orange-600\">10.7 \u0e01\u0e21.<\/div>\n <\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center\">\n <span class=\"text-2xl mr-3\">\u23f1\ufe0f<\/span>\n <div class=\"text-left\">\n <div class=\"text-xs text-gray-500\">\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e42\u0e14\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13<\/div>\n <div class=\"font-bold text-orange-600\">20 \u0e19\u0e32\u0e17\u0e35<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Interactive Route Selector Section -->\n <section class=\"mb-12\">\n <div class=\"text-center mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-800\">1. \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/h3>\n <p class=\"text-gray-500 text-sm mt-1\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e21<\/p>\n <\/div>\n\n <!-- Tab Buttons -->\n <div class=\"flex flex-wrap justify-center gap-4 mb-8\" role=\"tablist\">\n <button onclick=\"switchRoute('city')\" id=\"btn-city\" class=\"active-tab px-6 py-3 rounded-full border shadow-sm font-medium transition duration-200 flex items-center\">\n <span class=\"mr-2\">\ud83c\udfd9\ufe0f<\/span> \u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e2f\n <\/button>\n <button onclick=\"switchRoute('train')\" id=\"btn-train\" class=\"inactive-tab px-6 py-3 rounded-full border shadow-sm font-medium transition duration-200 flex items-center\">\n <span class=\"mr-2\">\ud83d\ude86<\/span> \u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f (\u0e1e\u0e38\u0e19\u0e1e\u0e34\u0e19)\n <\/button>\n <button onclick=\"switchRoute('airport')\" id=\"btn-airport\" class=\"inactive-tab px-6 py-3 rounded-full border shadow-sm font-medium transition duration-200 flex items-center\">\n <span class=\"mr-2\">\u2708\ufe0f<\/span> \u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19\u0e19\u0e32\u0e19\u0e32\u0e0a\u0e32\u0e15\u0e34\n <\/button>\n <\/div>\n\n <!-- Dynamic Content Area -->\n <div id=\"route-content\" class=\"bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 transition-all duration-300\">\n <!-- Content will be injected by JS -->\n <\/div>\n <\/section>\n\n <!-- Data Visualization Section -->\n <section class=\"mb-12 bg-gray-50 rounded-2xl p-6 md:p-10\">\n <div class=\"text-center mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-800\">2. \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07<\/h3>\n <p class=\"text-gray-600 mt-2 max-w-2xl mx-auto\">\n \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e42\u0e14\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e35\u0e49\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e08\u0e32\u0e01\u0e23\u0e32\u0e04\u0e32\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e08\u0e23\u0e32\u0e08\u0e23\u0e1b\u0e01\u0e15\u0e34\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <!-- Cost Chart -->\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\n <h4 class=\"text-lg font-bold text-gray-700 mb-4 text-center\">\ud83d\udcb8 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22 (\u0e1a\u0e32\u0e17)<\/h4>\n <div class=\"chart-container\">\n <canvas id=\"costChart\"><\/canvas>\n <\/div>\n <p class=\"text-xs text-center text-gray-400 mt-4\">*\u0e23\u0e32\u0e04\u0e32\u0e23\u0e27\u0e21\u0e04\u0e48\u0e32\u0e23\u0e16\u0e15\u0e48\u0e2d\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e41\u0e25\u0e49\u0e27<\/p>\n <\/div>\n\n <!-- Time Chart -->\n <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\n <h4 class=\"text-lg font-bold text-gray-700 mb-4 text-center\">\u23f3 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 (\u0e19\u0e32\u0e17\u0e35)<\/h4>\n <div class=\"chart-container\">\n <canvas id=\"timeChart\"><\/canvas>\n <\/div>\n <p class=\"text-xs text-center text-gray-400 mt-4\">*\u0e44\u0e21\u0e48\u0e23\u0e27\u0e21\u0e40\u0e27\u0e25\u0e32\u0e23\u0e2d\u0e23\u0e16<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Additional Info \/ Tips -->\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\n <div class=\"bg-orange-50 rounded-xl p-6 border border-orange-100\">\n <h3 class=\"font-bold text-orange-800 mb-3 text-lg\">\ud83d\udca1 \u0e02\u0e49\u0e2d\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/h3>\n <ul class=\"space-y-2 text-gray-700 text-sm\">\n <li class=\"flex items-start\"><span class=\"mr-2 text-orange-500\">\u25cf<\/span> \u0e04\u0e27\u0e23\u0e40\u0e1c\u0e37\u0e48\u0e2d\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e43\u0e19\u0e0a\u0e48\u0e27\u0e07\u0e40\u0e0a\u0e49\u0e32 (7:00-8:30) \u0e41\u0e25\u0e30\u0e40\u0e22\u0e47\u0e19 (16:00-18:00) \u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e23\u0e16\u0e15\u0e34\u0e14<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-orange-500\">\u25cf<\/span> \u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27\u0e2a\u0e35\u0e2a\u0e49\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-orange-500\">\u25cf<\/span> \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e07\u0e34\u0e19\u0e2a\u0e14\u0e18\u0e19\u0e1a\u0e31\u0e15\u0e23\u0e22\u0e48\u0e2d\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e2b\u0e23\u0e35\u0e22\u0e0d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e48\u0e32\u0e42\u0e14\u0e22\u0e2a\u0e32\u0e23\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"bg-white rounded-xl p-6 border border-gray-200 shadow-sm\">\n <h3 class=\"font-bold text-gray-800 mb-3 text-lg\">\ud83d\udcde \u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li class=\"flex justify-between items-center border-b border-gray-100 pb-2\">\n <span class=\"text-gray-600\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e41\u0e17\u0e47\u0e01\u0e0b\u0e35\u0e48\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35<\/span>\n <a href=\"tel:0806965216\" class=\"font-semibold text-orange-600 hover:text-orange-700\">080-696-5216<\/a>\n <\/li>\n <li class=\"flex justify-between items-center border-b border-gray-100 pb-2\">\n <span class=\"text-gray-600\">\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e1e\u0e31\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c \u0e17\u0e23\u0e32\u0e40\u0e27\u0e25 (\u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19)<\/span>\n <a href=\"tel:077272230\" class=\"font-semibold text-orange-600 hover:text-orange-700\">077-272-230<\/a>\n <\/li>\n <li class=\"flex justify-between items-center\">\n <span class=\"text-gray-600\">\u0e1e\u0e31\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c \u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d<\/span>\n <a href=\"tel:0611727000\" class=\"font-semibold text-orange-600 hover:text-orange-700\">061-172-7000<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"bg-gray-800 text-white py-8\">\n <div class=\"max-w-6xl mx-auto px-4 text-center\">\n <p class=\"mb-2\">\u00a9 2024 SRU Navigator – \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 \u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35<\/p>\n <p class=\"text-sm text-gray-400\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e35\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e01\u0e32\u0e23 \u0e42\u0e1b\u0e23\u0e14\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e27\u0e25\u0e32\u0e08\u0e23\u0e34\u0e07 \u0e13 \u0e08\u0e38\u0e14\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/p>\n <\/div>\n <\/footer>\n\n <!-- JavaScript Logic -->\n <script>\n \/\/ Data Store\n const routeData = {\n city: {\n title: \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19: \u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\",\n description: \"\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e34\u0e18\u0e35\u0e17\u0e35\u0e48\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e41\u0e25\u0e30\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e42\u0e14\u0e22\u0e21\u0e35\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e25\u0e32\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e17\u0e35\u0e48\u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23 1\",\n icon: \"\ud83c\udfd9\ufe0f\",\n options: [\n {\n type: \"\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27 (\u0e23\u0e16\u0e2a\u0e49\u0e21) \ud83d\ude8c\",\n highlight: \"\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 & \u0e22\u0e2d\u0e14\u0e19\u0e34\u0e22\u0e21\",\n details: [\n \"\u0e08\u0e38\u0e14\u0e02\u0e36\u0e49\u0e19\u0e23\u0e16: \u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23 1\",\n \"\u0e40\u0e27\u0e25\u0e32\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23: 06:00 \u2013 18:00 \u0e19.\",\n \"\u0e04\u0e48\u0e32\u0e42\u0e14\u0e22\u0e2a\u0e32\u0e23: 20 - 25 \u0e1a\u0e32\u0e17\",\n \"\u0e25\u0e31\u0e01\u0e29\u0e13\u0e30\u0e23\u0e16: \u0e23\u0e16\u0e01\u0e23\u0e30\u0e1a\u0e30\u0e14\u0e31\u0e14\u0e41\u0e1b\u0e25\u0e07\u0e2a\u0e35\u0e2a\u0e49\u0e21 \u0e1b\u0e49\u0e32\u0e22 '\u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f'\"\n ],\n color: \"bg-orange-100 border-orange-200\"\n },\n {\n type: \"\u0e23\u0e16\u0e41\u0e17\u0e47\u0e01\u0e0b\u0e35\u0e48 \/ Grab \ud83d\ude95\",\n highlight: \"\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e2a\u0e1a\u0e32\u0e22\",\n details: [\n \"\u0e40\u0e23\u0e35\u0e22\u0e01\u0e1c\u0e48\u0e32\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c: 080-696-5216\",\n \"\u0e40\u0e23\u0e35\u0e22\u0e01\u0e1c\u0e48\u0e32\u0e19\u0e41\u0e2d\u0e1b: Grab\",\n \"\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a: \u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2b\u0e23\u0e37\u0e2d\u0e21\u0e35\u0e2a\u0e31\u0e21\u0e20\u0e32\u0e23\u0e30\u0e40\u0e22\u0e2d\u0e30\"\n ],\n color: \"bg-blue-50 border-blue-100\"\n },\n {\n type: \"\u0e23\u0e16\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27 \ud83d\ude97\",\n highlight: \"\u0e2d\u0e34\u0e2a\u0e23\u0e30\",\n details: [\n \"\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07: \u0e16\u0e19\u0e19\u0e0a\u0e19\u0e40\u0e01\u0e29\u0e21 \u0e21\u0e38\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e34\u0e28\u0e43\u0e15\u0e49\",\n \"\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e16\u0e19\u0e19\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02 4009\",\n \"\u0e23\u0e30\u0e22\u0e30\u0e17\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 10.7 \u0e01\u0e21.\"\n ],\n color: \"bg-gray-50 border-gray-200\"\n }\n ]\n },\n train: {\n title: \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19: \u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f (\u0e1e\u0e38\u0e19\u0e1e\u0e34\u0e19)\",\n description: \"\u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f\u0e15\u0e31\u0e49\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e17\u0e35\u0e48\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e1e\u0e38\u0e19\u0e1e\u0e34\u0e19 \u0e15\u0e49\u0e2d\u0e07\u0e19\u0e31\u0e48\u0e07\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e48\u0e2d\u0e23\u0e16\u0e44\u0e1b\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\",\n icon: \"\ud83d\ude86\",\n steps: [\n {\n step: \"1\",\n action: \"\u0e19\u0e31\u0e48\u0e07\u0e23\u0e16\u0e1a\u0e31\u0e2a\u0e2a\u0e35\u0e2a\u0e49\u0e21 (\u0e1e\u0e38\u0e19\u0e1e\u0e34\u0e19-\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c)\",\n detail: \"\u0e02\u0e36\u0e49\u0e19\u0e23\u0e16\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\",\n cost: \"~20 \u0e1a\u0e32\u0e17\"\n },\n {\n step: \"2\",\n action: \"\u0e25\u0e07\u0e17\u0e35\u0e48 \u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23 1\",\n detail: \"\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e16\u0e32\u0e19\u0e35\u0e02\u0e19\u0e2a\u0e48\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08\u0e38\u0e14\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\",\n cost: \"-\"\n },\n {\n step: \"3\",\n action: \"\u0e15\u0e48\u0e2d\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27\u0e2a\u0e35\u0e2a\u0e49\u0e21\",\n detail: \"\u0e21\u0e2d\u0e07\u0e2b\u0e32\u0e1b\u0e49\u0e32\u0e22 '\u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f' \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\",\n cost: \"20-25 \u0e1a\u0e32\u0e17\"\n }\n ]\n },\n airport: {\n title: \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19: \u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19\u0e19\u0e32\u0e19\u0e32\u0e0a\u0e32\u0e15\u0e34\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\",\n description: \"\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e08\u0e32\u0e01\u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19\u0e21\u0e35 2 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e2b\u0e25\u0e31\u0e01 \u0e04\u0e37\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e15\u0e48\u0e2d\u0e23\u0e16\u0e44\u0e1b\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\",\n icon: \"\u2708\ufe0f\",\n steps: [\n {\n step: \"1\",\n action: \"\u0e0b\u0e37\u0e49\u0e2d\u0e15\u0e31\u0e4b\u0e27\u0e40\u0e02\u0e49\u0e32\u0e40\u0e21\u0e37\u0e2d\u0e07 (\u0e1e\u0e31\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c \u0e17\u0e23\u0e32\u0e40\u0e27\u0e25)\",\n detail: \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1e\u0e31\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c\u0e43\u0e19\u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19 (\u0e43\u0e0a\u0e49\u0e1a\u0e31\u0e15\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\/\u0e1e\u0e32\u0e2a\u0e1b\u0e2d\u0e23\u0e4c\u0e15)\",\n cost: \"100 \u0e1a\u0e32\u0e17\"\n },\n {\n step: \"2\",\n action: \"\u0e19\u0e31\u0e48\u0e07\u0e23\u0e16\u0e1a\u0e31\u0e2a\/\u0e21\u0e34\u0e19\u0e34\u0e1a\u0e31\u0e2a \u0e40\u0e02\u0e49\u0e32\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\",\n detail: \"\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 45 \u0e19\u0e32\u0e17\u0e35\",\n cost: \"-\"\n },\n {\n step: \"3\",\n action: \"\u0e25\u0e07\u0e17\u0e35\u0e48 \u0e15\u0e25\u0e32\u0e14\u0e40\u0e01\u0e29\u0e15\u0e23 1 \u0e41\u0e25\u0e30\u0e15\u0e48\u0e2d\u0e23\u0e16\",\n detail: \"\u0e15\u0e48\u0e2d\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27\u0e2a\u0e35\u0e2a\u0e49\u0e21 (\u0e2a\u0e32\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f) \u0e44\u0e1b\u0e22\u0e31\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\",\n cost: \"20-25 \u0e1a\u0e32\u0e17\"\n }\n ]\n }\n };\n\n \/\/ Charts Configuration\n let costChart = null;\n let timeChart = null;\n\n function initCharts() {\n \/\/ Cost Chart\n const ctxCost = document.getElementById('costChart').getContext('2d');\n costChart = new Chart(ctxCost, {\n type: 'bar',\n data: {\n labels: ['\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27 (\u0e08\u0e32\u0e01\u0e40\u0e21\u0e37\u0e2d\u0e07)', '\u0e41\u0e17\u0e47\u0e01\u0e0b\u0e35\u0e48 (\u0e08\u0e32\u0e01\u0e40\u0e21\u0e37\u0e2d\u0e07)', '\u0e08\u0e32\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f', '\u0e08\u0e32\u0e01\u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19'],\n datasets: [{\n label: '\u0e04\u0e48\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e42\u0e14\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 (\u0e1a\u0e32\u0e17)',\n data: [25, 150, 45, 125], \/\/ Estimated taxi cost ~150\n backgroundColor: [\n 'rgba(249, 115, 22, 0.7)', \/\/ Orange\n 'rgba(59, 130, 246, 0.7)', \/\/ Blue\n 'rgba(16, 185, 129, 0.7)', \/\/ Green\n 'rgba(139, 92, 246, 0.7)' \/\/ Purple\n ],\n borderColor: [\n 'rgba(249, 115, 22, 1)',\n 'rgba(59, 130, 246, 1)',\n 'rgba(16, 185, 129, 1)',\n 'rgba(139, 92, 246, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: '\u0e23\u0e32\u0e04\u0e32 (\u0e1a\u0e32\u0e17)'\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n\n \/\/ Time Chart\n const ctxTime = document.getElementById('timeChart').getContext('2d');\n timeChart = new Chart(ctxTime, {\n type: 'doughnut',\n data: {\n labels: ['\u0e08\u0e32\u0e01\u0e40\u0e21\u0e37\u0e2d\u0e07 (20 \u0e19\u0e32\u0e17\u0e35)', '\u0e08\u0e32\u0e01\u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19 (65+ \u0e19\u0e32\u0e17\u0e35)', '\u0e08\u0e32\u0e01\u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f (50+ \u0e19\u0e32\u0e17\u0e35)'],\n datasets: [{\n label: '\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07',\n data: [20, 65, 50],\n backgroundColor: [\n 'rgba(249, 115, 22, 0.8)',\n 'rgba(139, 92, 246, 0.8)',\n 'rgba(16, 185, 129, 0.8)'\n ],\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n padding: 20,\n font: {\n family: \"'Sarabun', sans-serif\"\n }\n }\n }\n }\n }\n });\n }\n\n function switchRoute(routeKey) {\n \/\/ Update Tab Styles\n const tabs = ['city', 'train', 'airport'];\n tabs.forEach(t => {\n const btn = document.getElementById(`btn-${t}`);\n if (t === routeKey) {\n btn.classList.remove('inactive-tab');\n btn.classList.add('active-tab');\n } else {\n btn.classList.add('inactive-tab');\n btn.classList.remove('active-tab');\n }\n });\n\n \/\/ Update Content\n const data = routeData[routeKey];\n const contentDiv = document.getElementById('route-content');\n \n \/\/ Generate HTML based on data type (options list or steps timeline)\n let innerHTML = `\n <div class=\"flex items-center mb-6 border-b pb-4\">\n <span class=\"text-4xl mr-4 bg-orange-100 p-3 rounded-full\">${data.icon}<\/span>\n <div>\n <h2 class=\"text-2xl font-bold text-gray-800\">${data.title}<\/h2>\n <p class=\"text-gray-600 mt-1\">${data.description}<\/p>\n <\/div>\n <\/div>\n `;\n\n if (data.options) {\n \/\/ List View (City)\n innerHTML += `<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">`;\n data.options.forEach(opt => {\n innerHTML += `\n <div class=\"step-card p-5 rounded-xl border ${opt.color} shadow-sm h-full flex flex-col justify-between\">\n <div>\n <h4 class=\"font-bold text-lg mb-2 text-gray-800\">${opt.type}<\/h4>\n <span class=\"inline-block px-2 py-1 text-xs font-semibold bg-white rounded-full mb-3 text-gray-600 border shadow-sm\">${opt.highlight}<\/span>\n <ul class=\"text-sm space-y-2 text-gray-700\">\n ${opt.details.map(d => `<li class=\"flex items-start\"><span class=\"mr-2 text-gray-400\">\u2022<\/span>${d}<\/li>`).join('')}\n <\/ul>\n <\/div>\n <\/div>\n `;\n });\n innerHTML += `<\/div>`;\n } else if (data.steps) {\n \/\/ Timeline View (Train\/Airport)\n innerHTML += `<div class=\"space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent\">`;\n data.steps.forEach((step, index) => {\n innerHTML += `\n <div class=\"relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active\">\n \n <!-- Icon -->\n <div class=\"flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-orange-500 text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1\/2 md:group-even:translate-x-1\/2 font-bold z-10\">\n ${step.step}\n <\/div>\n \n <!-- Content -->\n <div class=\"w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-4 rounded bg-white border border-gray-200 shadow-sm\">\n <div class=\"flex justify-between items-center mb-1\">\n <span class=\"font-bold text-gray-900\">${step.action}<\/span>\n ${step.cost !== '-' ? `<span class=\"text-xs font-bold text-orange-600 bg-orange-100 px-2 py-1 rounded\">${step.cost}<\/span>` : ''}\n <\/div>\n <p class=\"text-gray-500 text-sm\">${step.detail}<\/p>\n <\/div>\n <\/div>\n `;\n });\n innerHTML += `<\/div>`;\n }\n\n \/\/ Animate content change\n contentDiv.style.opacity = 0;\n setTimeout(() => {\n contentDiv.innerHTML = innerHTML;\n contentDiv.style.opacity = 1;\n }, 200);\n }\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n initCharts();\n switchRoute('city'); \/\/ Default tab\n });\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>SRU Navigator: \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e2a\u0e39\u0e48 \u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35 \ud83d\ude8c SRU Navigator \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e2a\u0e39\u0e48 \u0e21.\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35 \u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u0e22\u0e34\u0e19\u0e14\u0e35\u0e15\u0e49\u0e2d\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 \u0e40\u0e23\u0e32\u0e44\u0e14\u0e49\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e08\u0e32\u0e01\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e44\u0e1b\u0e16\u0e36\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \ud83d\udccd \u0e23\u0e30\u0e22\u0e30\u0e17\u0e32\u0e07\u0e08\u0e32\u0e01\u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07 10.7 \u0e01\u0e21. \u23f1\ufe0f \u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e42\u0e14\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 20 \u0e19\u0e32\u0e17\u0e35 1. \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e38\u0e48\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e39\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e21 \ud83c\udfd9\ufe0f \u0e15\u0e31\u0e27\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e2f \ud83d\ude86 \u0e2a\u0e16\u0e32\u0e19\u0e35\u0e23\u0e16\u0e44\u0e1f (\u0e1e\u0e38\u0e19\u0e1e\u0e34\u0e19) \u2708\ufe0f \u0e2a\u0e19\u0e32\u0e21\u0e1a\u0e34\u0e19\u0e19\u0e32\u0e19\u0e32\u0e0a\u0e32\u0e15\u0e34 2. \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e42\u0e14\u0e22\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07 \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e35\u0e49\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e08\u0e32\u0e01\u0e23\u0e32\u0e04\u0e32\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e08\u0e23\u0e32\u0e08\u0e23\u0e1b\u0e01\u0e15\u0e34 \ud83d\udcb8 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e04\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e08\u0e48\u0e32\u0e22 (\u0e1a\u0e32\u0e17) *\u0e23\u0e32\u0e04\u0e32\u0e23\u0e27\u0e21\u0e04\u0e48\u0e32\u0e23\u0e16\u0e15\u0e48\u0e2d\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e41\u0e25\u0e49\u0e27 \u23f3 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07 (\u0e19\u0e32\u0e17\u0e35) *\u0e44\u0e21\u0e48\u0e23\u0e27\u0e21\u0e40\u0e27\u0e25\u0e32\u0e23\u0e2d\u0e23\u0e16 \ud83d\udca1 \u0e02\u0e49\u0e2d\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u25cf \u0e04\u0e27\u0e23\u0e40\u0e1c\u0e37\u0e48\u0e2d\u0e40\u0e27\u0e25\u0e32\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e43\u0e19\u0e0a\u0e48\u0e27\u0e07\u0e40\u0e0a\u0e49\u0e32 (7:00-8:30) \u0e41\u0e25\u0e30\u0e40\u0e22\u0e47\u0e19 (16:00-18:00) \u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e23\u0e16\u0e15\u0e34\u0e14 \u25cf \u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27\u0e2a\u0e35\u0e2a\u0e49\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22 \u25cf \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e07\u0e34\u0e19\u0e2a\u0e14\u0e18\u0e19\u0e1a\u0e31\u0e15\u0e23\u0e22\u0e48\u0e2d\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e2b\u0e23\u0e35\u0e22\u0e0d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e48\u0e32\u0e42\u0e14\u0e22\u0e2a\u0e32\u0e23\u0e23\u0e16\u0e2a\u0e2d\u0e07\u0e41\u0e16\u0e27 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4137","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4137"}],"version-history":[{"count":4,"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4137\/revisions"}],"predecessor-version":[{"id":4273,"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/4137\/revisions\/4273"}],"wp:attachment":[{"href":"https:\/\/humanlib2026.sru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}