{"id":37067,"date":"2026-05-14T14:44:15","date_gmt":"2026-05-14T07:44:15","guid":{"rendered":"https:\/\/ubongeopark.org\/geopark\/?page_id=37067"},"modified":"2026-05-18T17:23:57","modified_gmt":"2026-05-18T10:23:57","slug":"%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b8%9e%e0%b8%b1%e0%b8%81","status":"publish","type":"page","link":"https:\/\/ubongeopark.org\/geopark\/%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b8%9e%e0%b8%b1%e0%b8%81\/","title":{"rendered":"\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01"},"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 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 - Ubon Accommodation<\/title>\r\n <!-- IMPORT FONTS FOR CONSISTENCY WITH MAIN PAGE -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&family=Playfair+Display:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary: #d4865e;\r\n --primary-dark: #1a472a;\r\n --secondary: #2c3e50;\r\n --accent: #e8b4a3;\r\n --light-bg: #faf8f6;\r\n --dark-text: #1a1a1a;\r\n --border-color: #e0d5cc;\r\n --secondary-accent: #d4865e;\r\n }\r\n\r\n body {\r\n font-family: 'Kanit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #faf8f6 0%, #f5f1ed 100%);\r\n color: var(--dark-text);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ===== NAVBAR STYLE MATCHING MAIN PAGE ===== *\/\r\n nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n z-index: 1000;\r\n box-shadow: 0 2px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .nav-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 80px;\r\n }\r\n\r\n .logo {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--primary-dark);\r\n text-decoration: none;\r\n letter-spacing: -0.5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n }\r\n\r\n .logo-icon {\r\n font-size: 2rem;\r\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\r\n }\r\n\r\n .nav-right-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n text-decoration: none;\r\n color: var(--dark-text);\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n position: relative;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--secondary-accent);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* ===== LANGUAGE SWITCHER BUTTON ===== *\/\r\n .lang-switch-btn {\r\n background: white;\r\n border: 2px solid var(--primary-dark);\r\n color: var(--primary-dark);\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n font-size: 0.85rem;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n }\r\n\r\n .lang-switch-btn:hover {\r\n background: var(--primary-dark);\r\n color: white;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Header (Offset with margin-top for fixed Navbar) *\/\r\n header {\r\n margin-top: 80px;\r\n background: linear-gradient(135deg, var(--secondary) 0%, #34495e 100%);\r\n color: white;\r\n padding: 3rem 2rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n animation: movePattern 20s linear infinite;\r\n }\r\n\r\n @keyframes movePattern {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(50px, 50px); }\r\n }\r\n\r\n header > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n h1 {\r\n font-size: 3rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n letter-spacing: -1px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Container *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n }\r\n\r\n \/* Filter Bar *\/\r\n .filter-bar {\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 3rem;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n .search-box {\r\n flex: 1;\r\n min-width: 200px;\r\n }\r\n\r\n .search-box input {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n border: 2px solid var(--border-color);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .search-box input:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(212, 134, 94, 0.1);\r\n }\r\n\r\n .filter-btn {\r\n padding: 0.75rem 1.5rem;\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-btn:hover {\r\n background: #c47350;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(212, 134, 94, 0.3);\r\n }\r\n\r\n .filter-btn.active {\r\n background: var(--secondary);\r\n box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);\r\n }\r\n\r\n \/* Grid Layout *\/\r\n .accommodations-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 2rem;\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Card *\/\r\n .accommodation-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n border: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n\r\n .accommodation-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .card-image {\r\n width: 100%;\r\n height: 200px;\r\n background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 3rem;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .card-image::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent);\r\n pointer-events: none;\r\n }\r\n\r\n .card-number {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n background: rgba(0, 0, 0, 0.3);\r\n color: white;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .card-content {\r\n padding: 1.5rem;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: var(--secondary);\r\n margin-bottom: 0.75rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .card-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-bottom: 1.5rem;\r\n flex-grow: 1;\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.75rem;\r\n font-size: 0.95rem;\r\n color: #555;\r\n }\r\n\r\n .info-label {\r\n font-weight: 600;\r\n min-width: 60px;\r\n color: var(--primary);\r\n }\r\n\r\n .info-text {\r\n flex: 1;\r\n line-height: 1.4;\r\n }\r\n\r\n .card-footer {\r\n display: flex;\r\n gap: 0.5rem;\r\n padding: 0 1.5rem 1.5rem 1.5rem;\r\n margin-top: auto;\r\n }\r\n\r\n .btn-call, .btn-location {\r\n flex: 1;\r\n padding: 0.75rem 1rem;\r\n border: none;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n font-size: 0.9rem;\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-call {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n\r\n .btn-call:hover {\r\n background: #c47350;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-location {\r\n background: var(--light-bg);\r\n color: var(--secondary);\r\n border: 2px solid var(--border-color);\r\n }\r\n\r\n .btn-location:hover {\r\n background: var(--border-color);\r\n color: var(--dark-text);\r\n }\r\n\r\n \/* Stats Section *\/\r\n .stats {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 1.5rem;\r\n margin-bottom: 3rem;\r\n background: white;\r\n padding: 2rem;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .stat {\r\n text-align: center;\r\n }\r\n\r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n }\r\n\r\n .stat-label {\r\n color: #888;\r\n font-size: 0.95rem;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: var(--secondary);\r\n color: white;\r\n text-align: center;\r\n padding: 2rem;\r\n margin-top: 3rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .footer-back-box {\r\n margin-top: 1rem;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .nav-links {\r\n gap: 1.2rem;\r\n }\r\n .nav-right-container {\r\n gap: 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 890px) {\r\n .nav-links {\r\n gap: 0.8rem;\r\n }\r\n .nav-links a {\r\n font-size: 0.85rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .accommodations-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .filter-bar {\r\n flex-direction: column;\r\n }\r\n\r\n .search-box {\r\n min-width: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- NAVBAR (Same structure & translation integration as index.html) -->\r\n <nav>\r\n <div class=\"nav-container\">\r\n <a href=\"index.html\" class=\"logo\">\r\n <span class=\"logo-icon\">\ud83c\udf0d<\/span>\r\n <span data-translate=\"nav-title\">\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35<\/span>\r\n <\/a>\r\n <div class=\"nav-right-container\">\r\n <ul class=\"nav-links\">\r\n <li><a href=\"https:\/\/ubongeopark.org\/geopark\/\" data-translate=\"nav-home\">\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01<\/a><\/li>\r\n <li><a href=\"index.html#features\" data-translate=\"nav-features\">\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/a><\/li>\r\n <li><a href=\"#\" data-translate=\"nav-accommodation\">\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01<\/a><\/li>\r\n <li><a href=\"restaurants.html\" data-translate=\"nav-restaurants\">\u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23<\/a><\/li>\r\n <li><a href=\"communities.html\" data-translate=\"nav-communities\">\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08<\/a><\/li>\r\n <li><a href=\"#contact\" data-translate=\"nav-contact\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/a><\/li>\r\n <\/ul>\r\n <!-- BUTTON FOR CHANGING LANGUAGE -->\r\n <button onclick=\"toggleLanguage()\" class=\"lang-switch-btn\" id=\"langBtn\">\r\n \ud83c\udf10 <span>EN<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HEADER -->\r\n <header>\r\n <h1 data-translate=\"header-title\">\ud83c\udfe8 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35<\/h1>\r\n <p class=\"subtitle\" data-translate=\"header-subtitle\">Accommodation Guide - Ubon Ratchathani<\/p>\r\n <\/header>\r\n\r\n <div class=\"container\">\r\n <!-- STATS SECTION -->\r\n <div class=\"stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">4<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-1\">\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e25\u0e31\u0e01<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">16<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-2\">\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">46<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-3\">\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e18\u0e23\u0e13\u0e35<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">24\/7<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-4\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e40\u0e27\u0e25\u0e32<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FILTER BAR -->\r\n <div class=\"filter-bar\">\r\n <div style=\"width: 100%; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;\" id=\"districtFilters\">\r\n <button class=\"filter-btn active\" onclick=\"filterByDistrict('all')\" data-translate=\"filter-all\">\ud83c\udf10 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (16)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('khongchiam')\" data-translate=\"filter-khongchiam\">\ud83c\udfd5\ufe0f \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 (7)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('sirindhorn')\" data-translate=\"filter-sirindhorn\">\ud83c\udf0a \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 (4)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('phosai')\" data-translate=\"filter-phosai\">\ud83c\udfde\ufe0f \u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23 (1)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('other')\" data-translate=\"filter-other\">\ud83c\udfd9\ufe0f \u0e2d\u0e37\u0e48\u0e19\u0e46 (4)<\/button>\r\n <\/div>\r\n <div class=\"search-box\" style=\"width: 100%;\">\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01...\" onkeyup=\"searchAccommodations()\" data-translate-placeholder=\"search-placeholder\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GRID LAYOUT FOR CARDS -->\r\n <div class=\"accommodations-grid\" id=\"accommodationsGrid\">\r\n <!-- Cards will be inserted here by JavaScript -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FOOTER WITH CONTACT ID -->\r\n <footer id=\"contact\">\r\n <p data-translate=\"footer-text-1\">\ud83d\udccd \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 | \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2026<\/p>\r\n <div class=\"footer-back-box\">\r\n <a href=\"index.html\" class=\"back-link\" data-translate=\"footer-back-link\">\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01<\/a>\r\n <\/div>\r\n <p style=\"margin-top: 1rem; opacity: 0.8;\" data-translate=\"footer-text-2\">\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e42\u0e1b\u0e23\u0e14\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e17\u0e35\u0e48\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e44\u0e27\u0e49<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n const accommodations = [\r\n \/\/ \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 (Khong Chiam) - 7 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\r\n {\r\n id: 5,\r\n name: '\u0e41\u0e01\u0e48\u0e07\u0e1e\u0e34\u0e28\u0e21\u0e31\u0e22 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e44\u0e0b\u0e14\u0e4c',\r\n address: '\u0e15\u0e33\u0e1a\u0e25 \u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220',\r\n phone: '093 321 9889',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfde\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/Sk1UvfWRJgkNhtct9'\r\n },\r\n {\r\n id: 6,\r\n name: '\u0e17\u0e2d\u0e41\u0e2a\u0e07 \u0e40\u0e2e\u0e2d\u0e23\u0e34\u0e40\u0e17\u0e08',\r\n address: '68 \u0e2b\u0e21\u0e39\u0e48 7 \u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e27\u0e22\u0e2b\u0e21\u0e32\u0e01\u0e43\u0e15\u0e49 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n phone: '045 351 174',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfe8',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/CKdA3tNxZxVJNeNR6'\r\n },\r\n {\r\n id: 7,\r\n name: '\u0e17\u0e2d\u0e41\u0e2a\u0e07 \u0e04\u0e2d\u0e15\u0e15\u0e2d\u0e25 \u0e27\u0e34\u0e25\u0e40\u0e25\u0e08',\r\n address: '68\/1 \u0e2b\u0e21\u0e39\u0e487 \u0e15\u0e33\u0e1a\u0e25\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21, \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n phone: '045 210 324',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfd8\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/6tcADzSSzdTzai8q8'\r\n },\r\n {\r\n id: 8,\r\n name: '\u0e1e\u0e35\u0e23\u0e14\u0e32 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e27\u0e34\u0e27 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17',\r\n address: '\u0e15\u0e33\u0e1a\u0e25 \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220',\r\n phone: '045 351 213',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfde\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/Pzb1GPYGuQkeJNCcA'\r\n },\r\n {\r\n id: 9,\r\n name: '\u0e2d\u0e32\u0e23\u0e22\u0e32 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17',\r\n address: '\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 642 \u0e2b\u0e21\u0e39\u0e48 1 \u0e16.\u0e23\u0e34\u0e21\u0e42\u0e02\u0e07 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220',\r\n phone: '092-3895231 \/ 083-9370510',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfde\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/4n9rZ4pqXgo4nKM1A'\r\n },\r\n {\r\n id: 10,\r\n name: '\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34\u0e1c\u0e32\u0e41\u0e15\u0e49\u0e21',\r\n address: '\u0e15.\u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220',\r\n phone: '045-252581',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\ud83c\udfd5\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/yHN4vMHFCRDcpJLr6'\r\n },\r\n {\r\n id: 16,\r\n name: '234 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c \u0e40\u0e21\u0e32\u0e17\u0e4c\u0e40\u0e17\u0e48\u0e19',\r\n address: '\u0e2b\u0e21\u0e39\u0e48 3 \u0e15.\u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220',\r\n phone: '096 417 9292 \/ 080 959 6592',\r\n area: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: 'khongchiam',\r\n icon: '\u26f0\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/5adjEUx5gCm1y1mMA'\r\n },\r\n\r\n \/\/ \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 (Sirindhorn) - 4 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\r\n {\r\n id: 12,\r\n name: '\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e40\u0e02\u0e37\u0e48\u0e2d\u0e19\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n address: '30 \u0e19\u0e34\u0e04\u0e21\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e25\u0e33\u0e42\u0e14\u0e21\u0e19\u0e49\u0e2d\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34350',\r\n phone: '045 366 081',\r\n area: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n district: 'sirindhorn',\r\n icon: '\ud83c\udfe8',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/zs436oHyZkxoHFabA'\r\n },\r\n {\r\n id: 13,\r\n name: '\u0e20\u0e32\u0e27\u0e34\u0e13\u0e35\u0e04\u0e32\u0e40\u0e1f\u0e48',\r\n address: '\u0e16\u0e19\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e22\u0e4c\u0e19\u0e34\u0e21\u0e32\u0e19\u0e01\u0e32\u0e25, Ubon Ratchathani',\r\n phone: '087 100 5135',\r\n area: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n district: 'sirindhorn',\r\n icon: '\u2615',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/bDzrBks288vFsVwQ9'\r\n },\r\n {\r\n id: 14,\r\n name: '\u0e2a\u0e27\u0e19\u0e23\u0e34\u0e21\u0e40\u0e02\u0e37\u0e48\u0e2d\u0e19 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17',\r\n address: '279 \u0e2b\u0e21\u0e39\u0e48 2 \u0e16\u0e19\u0e19\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23-\u0e0a\u0e48\u0e2d\u0e07\u0e40\u0e21\u0e47\u0e01, Ubon Ratchathani',\r\n phone: '081 725 8431',\r\n area: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n district: 'sirindhorn',\r\n icon: '\ud83c\udfde\ufe0f',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/kXAtbYbEb284hhjYA'\r\n },\r\n {\r\n id: 15,\r\n name: '\u0e2a\u0e21\u0e32\u0e22\u0e25\u0e4c\u0e41\u0e25\u0e19\u0e14\u0e4c\u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17',\r\n address: '\u0e16\u0e19\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e22\u0e4c\u0e19\u0e34\u0e21\u0e32\u0e19\u0e01\u0e32\u0e25 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23, Ubon Ratchathani',\r\n phone: '098 101 7777',\r\n area: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n district: 'sirindhorn',\r\n icon: '\ud83d\ude0a',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/3xLqbAREwmjfZu9Z6'\r\n },\r\n\r\n \/\/ \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23 (Pho Sai) - 1 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\r\n {\r\n id: 3,\r\n name: '\u0e1b\u0e25\u0e32\u0e22\u0e1f\u0e49\u0e32 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17',\r\n address: '114 Moo 9 Songkhon, Phosai, Ubon Ratchathani',\r\n phone: '085 495 2373',\r\n area: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n district: 'phosai',\r\n icon: '\ud83c\udfe9',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/mh9G2KzZ1kfhvjCo7'\r\n },\r\n\r\n \/\/ \u0e2d\u0e37\u0e48\u0e19\u0e46 (\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2d\u0e38\u0e1a\u0e25 \/ \u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b) - 4 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\r\n {\r\n id: 1,\r\n name: '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e2a\u0e38\u0e19\u0e35\u0e41\u0e01\u0e23\u0e19\u0e14\u0e4c',\r\n address: '512\/8 \u0e16.\u0e0a\u0e22\u0e32\u0e07\u0e01\u0e39\u0e23 \u0e15.\u0e43\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35',\r\n phone: '081 265 3388',\r\n area: '\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2d\u0e38\u0e1a\u0e25',\r\n district: 'other',\r\n icon: '\ud83c\udfe9',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/sRq5DvpPRWX42LLs5'\r\n },\r\n {\r\n id: 2,\r\n name: '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e17\u0e2d\u0e41\u0e2a\u0e07',\r\n address: '251 \u0e16.\u0e1e\u0e42\u0e25\u0e0a\u0e31\u0e22, Ubon Ratchathani',\r\n phone: '045 245 531',\r\n area: '\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2d\u0e38\u0e1a\u0e25',\r\n district: 'other',\r\n icon: '\ud83c\udfe8',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/xa7uYesaTrqnbKos6'\r\n },\r\n {\r\n id: 4,\r\n name: '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e1a\u0e25\u0e34\u0e0a\u0e27\u0e34\u0e27',\r\n address: 'Ubon Ratchathani',\r\n phone: '084 037 3888',\r\n area: '\u0e2d\u0e37\u0e48\u0e19\u0e46',\r\n district: 'other',\r\n icon: '\ud83c\udfe8',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/9ayga58w3DS8hxm79'\r\n },\r\n {\r\n id: 11,\r\n name: '\u0e0b\u0e30\u0e0b\u0e2d\u0e21\u0e42\u0e2e\u0e21\u0e2a\u0e40\u0e15\u0e22\u0e4c',\r\n address: '\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35',\r\n phone: '085 414 9176',\r\n area: '\u0e2d\u0e37\u0e48\u0e19\u0e46',\r\n district: 'other',\r\n icon: '\ud83c\udfe0',\r\n mapUrl: 'https:\/\/maps.app.goo.gl\/VBJ3HmkTPC6SEgpt7'\r\n }\r\n ];\r\n\r\n \/\/ ===== TRANSLATIONS DICTIONARY FOR NAVBAR AND STATIC ITEMS =====\r\n const translations = {\r\n th: {\r\n \"nav-home\": \"\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\",\r\n \"nav-title\": \"\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\",\r\n \"nav-features\": \"\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\",\r\n \"nav-accommodation\": \"\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\",\r\n \"nav-restaurants\": \"\u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23\",\r\n \"nav-communities\": \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\",\r\n \"nav-contact\": \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\",\r\n \"header-title\": \"\ud83c\udfe8 \u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35\",\r\n \"header-subtitle\": \"Accommodation Guide - Ubon Ratchathani\",\r\n \"stat-label-1\": \"\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e25\u0e31\u0e01\",\r\n \"stat-label-2\": \"\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\",\r\n \"stat-label-3\": \"\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e18\u0e23\u0e13\u0e35\",\r\n \"stat-label-4\": \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e40\u0e27\u0e25\u0e32\",\r\n \"filter-all\": \"\ud83c\udf10 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (16)\",\r\n \"filter-khongchiam\": \"\ud83c\udfd5\ufe0f \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 (7)\",\r\n \"filter-sirindhorn\": \"\ud83c\udf0a \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 (4)\",\r\n \"filter-phosai\": \"\ud83c\udfde\ufe0f \u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23 (1)\",\r\n \"filter-other\": \"\ud83c\udfd9\ufe0f \u0e2d\u0e37\u0e48\u0e19\u0e46 (4)\",\r\n \"search-placeholder\": \"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01...\",\r\n \"footer-text-1\": \"\ud83d\udccd \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 | \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2026\",\r\n \"footer-back-link\": \"\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\",\r\n \"footer-text-2\": \"\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e42\u0e1b\u0e23\u0e14\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e17\u0e35\u0e48\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\u0e44\u0e27\u0e49\"\r\n },\r\n en: {\r\n \"nav-home\": \"Home\",\r\n \"nav-title\": \"Geopark\",\r\n \"nav-features\": \"Categories\",\r\n \"nav-accommodation\": \"Accommodations\",\r\n \"nav-restaurants\": \"Restaurants\",\r\n \"nav-communities\": \"Enterprises\",\r\n \"nav-contact\": \"Contact\",\r\n \"header-title\": \"\ud83c\udfe8 Ubon Accommodations\",\r\n \"header-subtitle\": \"Find cozy resorts, hotels, and homestays in Ubon Ratchathani\",\r\n \"stat-label-1\": \"Main Districts\",\r\n \"stat-label-2\": \"Total Stays\",\r\n \"stat-label-3\": \"Geo-Sites\",\r\n \"stat-label-4\": \"Always Responsive\",\r\n \"filter-all\": \"\ud83c\udf10 All (16)\",\r\n \"filter-khongchiam\": \"\ud83c\udfd5\ufe0f Khong Chiam (7)\",\r\n \"filter-sirindhorn\": \"\ud83c\udf0a Sirindhorn (4)\",\r\n \"filter-phosai\": \"\ud83c\udfde\ufe0f Pho Sai (1)\",\r\n \"filter-other\": \"\ud83c\udfd9\ufe0f Others (4)\",\r\n \"search-placeholder\": \"\ud83d\udd0d Search accommodations...\",\r\n \"footer-text-1\": \"\ud83d\udccd Ubon Ratchathani Accommodation Guide | Last updated 2026\",\r\n \"footer-back-link\": \"\u2190 Back to Homepage\",\r\n \"footer-text-2\": \"For further inquiries, please contact the businesses directly via the numbers provided.\"\r\n }\r\n };\r\n\r\n let currentLang = 'th';\r\n let selectedDistrict = 'all';\r\n\r\n \/\/ ===== TRANSLATED TEXT RENDERING FOR CARDS =====\r\n function renderAccommodations(data) {\r\n const grid = document.getElementById('accommodationsGrid');\r\n grid.innerHTML = '';\r\n\r\n if (data.length === 0) {\r\n const noFoundText = currentLang === 'th' ? '\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32' : 'No accommodations found';\r\n grid.innerHTML = `<div style=\"grid-column: 1\/-1; text-align: center; padding: 3rem; color: #999;\">${noFoundText}<\/div>`;\r\n return;\r\n }\r\n\r\n data.forEach(acc => {\r\n const card = document.createElement('div');\r\n card.className = 'accommodation-card';\r\n\r\n \/\/ Real-time EN Translation for names\r\n let displayName = acc.name;\r\n if (currentLang === 'en') {\r\n if (acc.name === '\u0e41\u0e01\u0e48\u0e07\u0e1e\u0e34\u0e28\u0e21\u0e31\u0e22 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e44\u0e0b\u0e14\u0e4c') displayName = 'Kaeng Phitsamai Riverside';\r\n else if (acc.name === '\u0e17\u0e2d\u0e41\u0e2a\u0e07 \u0e40\u0e2e\u0e2d\u0e23\u0e34\u0e40\u0e17\u0e08') displayName = 'Tohsang Heritage Khong Chiam';\r\n else if (acc.name === '\u0e17\u0e2d\u0e41\u0e2a\u0e07 \u0e04\u0e2d\u0e15\u0e15\u0e2d\u0e25 \u0e27\u0e34\u0e25\u0e40\u0e25\u0e08') displayName = 'Tohsang Cotton Village';\r\n else if (acc.name === '\u0e1e\u0e35\u0e23\u0e14\u0e32 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e27\u0e34\u0e27 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17') displayName = 'Peerada Riverview Resort';\r\n else if (acc.name === '\u0e2d\u0e32\u0e23\u0e22\u0e32 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17') displayName = 'Araya Resort Khong Chiam';\r\n else if (acc.name === '\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e41\u0e2b\u0e48\u0e07\u0e0a\u0e32\u0e15\u0e34\u0e1c\u0e32\u0e41\u0e15\u0e49\u0e21') displayName = 'Pha Taem National Park Bungalows';\r\n else if (acc.name === '234 \u0e23\u0e34\u0e40\u0e27\u0e2d\u0e23\u0e4c \u0e40\u0e21\u0e32\u0e17\u0e4c\u0e40\u0e17\u0e48\u0e19') displayName = '234 River Mountain';\r\n else if (acc.name === '\u0e1a\u0e49\u0e32\u0e19\u0e1e\u0e31\u0e01\u0e40\u0e02\u0e37\u0e48\u0e2d\u0e19\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23') displayName = 'Sirindhorn Dam Guesthouse';\r\n else if (acc.name === '\u0e20\u0e32\u0e27\u0e34\u0e13\u0e35\u0e04\u0e32\u0e40\u0e1f\u0e48') displayName = 'Pawinee Cafe & Homestay';\r\n else if (acc.name === '\u0e2a\u0e27\u0e19\u0e23\u0e34\u0e21\u0e40\u0e02\u0e37\u0e48\u0e2d\u0e19 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17') displayName = 'Suan Rim Khuean Resort';\r\n else if (acc.name === '\u0e2a\u0e21\u0e32\u0e22\u0e25\u0e4c\u0e41\u0e25\u0e19\u0e14\u0e4c\u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17') displayName = 'Smileland Resort';\r\n else if (acc.name === '\u0e1b\u0e25\u0e32\u0e22\u0e1f\u0e49\u0e32 \u0e23\u0e35\u0e2a\u0e2d\u0e23\u0e4c\u0e17') displayName = 'Plai Fah Resort';\r\n else if (acc.name === '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e2a\u0e38\u0e19\u0e35\u0e41\u0e01\u0e23\u0e19\u0e14\u0e4c') displayName = 'Sunee Grand Hotel';\r\n else if (acc.name === '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e17\u0e2d\u0e41\u0e2a\u0e07') displayName = 'Tohsang Hotel Ubon';\r\n else if (acc.name === '\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e1a\u0e25\u0e34\u0e0a\u0e27\u0e34\u0e27') displayName = 'Bliss View Hotel';\r\n else if (acc.name === '\u0e0b\u0e30\u0e0b\u0e2d\u0e21\u0e42\u0e2e\u0e21\u0e2a\u0e40\u0e15\u0e22\u0e4c') displayName = 'Sa Som Homestay';\r\n }\r\n\r\n \/\/ Real-time EN Translation for districts\r\n let displayArea = acc.area;\r\n if (currentLang === 'en') {\r\n if (acc.area === '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21') displayArea = 'Khong Chiam';\r\n else if (acc.area === '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23') displayArea = 'Sirindhorn';\r\n else if (acc.area === '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23') displayArea = 'Pho Sai';\r\n else if (acc.area === '\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e2d\u0e38\u0e1a\u0e25') displayArea = 'Mueang Ubon';\r\n else if (acc.area === '\u0e2d\u0e37\u0e48\u0e19\u0e46') displayArea = 'Others';\r\n }\r\n\r\n \/\/ Real-time EN Translation for address\r\n let displayAddress = acc.address;\r\n if (currentLang === 'en') {\r\n if (acc.address === '\u0e15\u0e33\u0e1a\u0e25 \u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220') {\r\n displayAddress = 'Huai Phai, Khong Chiam District, Ubon Ratchathani 34220';\r\n } else if (acc.address === '68 \u0e2b\u0e21\u0e39\u0e48 7 \u0e1a\u0e49\u0e32\u0e19\u0e2b\u0e49\u0e27\u0e22\u0e2b\u0e21\u0e32\u0e01\u0e43\u0e15\u0e49 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21') {\r\n displayAddress = '68 Moo 7 Ban Huai Mak Tai, Khong Chiam District';\r\n } else if (acc.address === '68\/1 \u0e2b\u0e21\u0e39\u0e487 \u0e15\u0e33\u0e1a\u0e25\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21, \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21') {\r\n displayAddress = '68\/1 Moo 7, Khong Chiam Sub-district, Khong Chiam';\r\n } else if (acc.address === '\u0e15\u0e33\u0e1a\u0e25 \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220') {\r\n displayAddress = 'Khong Chiam, Khong Chiam District, Ubon Ratchathani 34220';\r\n } else if (acc.address === '\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48 642 \u0e2b\u0e21\u0e39\u0e48 1 \u0e16.\u0e23\u0e34\u0e21\u0e42\u0e02\u0e07 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220') {\r\n displayAddress = '642 Moo 1, Rim Khong Rd, Khong Chiam, Ubon Ratchathani 34220';\r\n } else if (acc.address === '\u0e15.\u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220') {\r\n displayAddress = 'Huai Phai, Khong Chiam, Ubon Ratchathani 34220';\r\n } else if (acc.address === '\u0e2b\u0e21\u0e39\u0e48 3 \u0e15.\u0e2b\u0e49\u0e27\u0e22\u0e44\u0e1c\u0e48 \u0e2d.\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34220') {\r\n displayAddress = 'Moo 3, Huai Phai, Khong Chiam, Ubon Ratchathani 34220';\r\n } else if (acc.address === '30 \u0e19\u0e34\u0e04\u0e21\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e25\u0e33\u0e42\u0e14\u0e21\u0e19\u0e49\u0e2d\u0e22 \u0e2d\u0e33\u0e40\u0e20\u0e2d \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 \u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 34350') {\r\n displayAddress = '30 Lam Dom Noi self-built community, Sirindhorn, Ubon Ratchathani 34350';\r\n } else if (acc.address === '\u0e16\u0e19\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e22\u0e4c\u0e19\u0e34\u0e21\u0e32\u0e19\u0e01\u0e32\u0e25, Ubon Ratchathani') {\r\n displayAddress = 'Sathitnimankan Rd, Sirindhorn, Ubon Ratchathani';\r\n } else if (acc.address === '279 \u0e2b\u0e21\u0e39\u0e48 2 \u0e16\u0e19\u0e19\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23-\u0e0a\u0e48\u0e2d\u0e07\u0e40\u0e21\u0e47\u0e01, Ubon Ratchathani') {\r\n displayAddress = '279 Moo 2, Sirindhorn-Chong Mek Rd, Ubon Ratchathani';\r\n } else if (acc.address === '\u0e16\u0e19\u0e19\u0e2a\u0e16\u0e34\u0e15\u0e22\u0e4c\u0e19\u0e34\u0e21\u0e32\u0e19\u0e01\u0e32\u0e25 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23, Ubon Ratchathani') {\r\n displayAddress = 'Sathitnimankan Rd, Sirindhorn District, Ubon Ratchathani';\r\n } else if (acc.address === '114 Moo 9 Songkhon, Phosai, Ubon Ratchathani') {\r\n displayAddress = '114 Moo 9 Songkhon, Pho Sai, Ubon Ratchathani';\r\n } else if (acc.address === '512\/8 \u0e16.\u0e0a\u0e22\u0e32\u0e07\u0e01\u0e39\u0e23 \u0e15.\u0e43\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 \u0e08.\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35') {\r\n displayAddress = '512\/8 Chayangkur Rd, Nai Mueang, Mueang Ubon, Ubon Ratchathani';\r\n } else if (acc.address === '251 \u0e16.\u0e1e\u0e42\u0e25\u0e0a\u0e31\u0e22, Ubon Ratchathani') {\r\n displayAddress = '251 Phalochai Rd, Mueang Ubon, Ubon Ratchathani';\r\n } else if (acc.address === '\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35') {\r\n displayAddress = 'Ubon Ratchathani, Thailand';\r\n }\r\n }\r\n\r\n const labelLocation = currentLang === 'th' ? '\ud83d\udccd \u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07' : '\ud83d\udccd Address';\r\n const labelPhone = currentLang === 'th' ? '\ud83d\udcde \u0e42\u0e17\u0e23' : '\ud83d\udcde Phone';\r\n const labelArea = currentLang === 'th' ? '\ud83c\udfdb\ufe0f \u0e40\u0e02\u0e15' : '\ud83c\udfdb\ufe0f Zone';\r\n const btnCallText = currentLang === 'th' ? '\ud83d\udcde \u0e42\u0e17\u0e23\u0e40\u0e25\u0e22' : '\ud83d\udcde Call';\r\n const btnMapText = currentLang === 'th' ? '\ud83d\uddfa\ufe0f \u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48' : '\ud83d\uddfa\ufe0f Map';\r\n\r\n card.innerHTML = `\r\n <div class=\"card-image\">\r\n <span>${acc.icon}<\/span>\r\n <span class=\"card-number\">${acc.id}<\/span>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h2 class=\"card-title\">${displayName}<\/h2>\r\n <div class=\"card-info\">\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">${labelLocation}<\/span>\r\n <span class=\"info-text\">${displayAddress}<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">${labelPhone}<\/span>\r\n <span class=\"info-text\">${acc.phone}<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">${labelArea}<\/span>\r\n <span class=\"info-text\">${displayArea}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <a href=\"tel:${acc.phone.replace(\/\\s\/g, '').split('\/')[0]}\" class=\"btn-call\">\r\n ${btnCallText}\r\n <\/a>\r\n <a href=\"${acc.mapUrl}\" target=\"_blank\" class=\"btn-location\">\r\n ${btnMapText}\r\n <\/a>\r\n <\/div>\r\n `;\r\n grid.appendChild(card);\r\n });\r\n }\r\n\r\n \/\/ ===== TRANSLATION SWITCHER CONTROLLER =====\r\n function toggleLanguage() {\r\n currentLang = currentLang === 'th' ? 'en' : 'th';\r\n \r\n \/\/ 1. Update Switcher Button Label\r\n const btn = document.getElementById('langBtn');\r\n btn.innerHTML = currentLang === 'th' ? '\ud83c\udf10 <span>EN<\/span>' : '\ud83c\udf10 <span>TH<\/span>';\r\n \r\n \/\/ 2. Translate Static Elements with data-translate attribute\r\n document.querySelectorAll('[data-translate]').forEach(el => {\r\n const key = el.getAttribute('data-translate');\r\n if (translations[currentLang][key]) {\r\n el.innerHTML = translations[currentLang][key];\r\n }\r\n });\r\n\r\n \/\/ 3. Translate input placeholders\r\n document.querySelectorAll('[data-translate-placeholder]').forEach(el => {\r\n const key = el.getAttribute('data-translate-placeholder');\r\n if (translations[currentLang][key]) {\r\n el.placeholder = translations[currentLang][key];\r\n }\r\n });\r\n\r\n \/\/ 4. Re-render dynamic cards with translated texts\r\n filterByDistrict(selectedDistrict);\r\n\r\n \/\/ Update html lang attribute\r\n document.documentElement.lang = currentLang;\r\n }\r\n\r\n function filterByDistrict(district) {\r\n selectedDistrict = district;\r\n \r\n \/\/ Find filters and update active states\r\n const filterContainer = document.getElementById('districtFilters');\r\n filterContainer.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n\r\n \/\/ Triggered from clicking a filter button or changing language\r\n if (event && event.target && event.target.classList.contains('filter-btn')) {\r\n event.target.classList.add('active');\r\n } else {\r\n \/\/ If triggered by language switch, find the corresponding button by its onclick function\r\n const buttons = filterContainer.querySelectorAll('.filter-btn');\r\n buttons.forEach(btn => {\r\n if (btn.getAttribute('onclick').includes(district)) {\r\n btn.classList.add('active');\r\n }\r\n });\r\n }\r\n \r\n let filtered = accommodations;\r\n if (district !== 'all') {\r\n filtered = accommodations.filter(acc => acc.district === district);\r\n }\r\n \r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n if (searchTerm) {\r\n filtered = filtered.filter(acc =>\r\n acc.name.toLowerCase().includes(searchTerm) ||\r\n acc.address.toLowerCase().includes(searchTerm) ||\r\n acc.area.toLowerCase().includes(searchTerm)\r\n );\r\n }\r\n \r\n renderAccommodations(filtered);\r\n }\r\n\r\n function searchAccommodations() {\r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n let filtered = accommodations;\r\n \r\n if (selectedDistrict !== 'all') {\r\n filtered = accommodations.filter(acc => acc.district === selectedDistrict);\r\n }\r\n \r\n filtered = filtered.filter(acc =>\r\n acc.name.toLowerCase().includes(searchTerm) ||\r\n acc.address.toLowerCase().includes(searchTerm) ||\r\n acc.area.toLowerCase().includes(searchTerm)\r\n );\r\n \r\n renderAccommodations(filtered);\r\n }\r\n\r\n \/\/ Initial render on load\r\n renderAccommodations(accommodations);\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 – Ubon Accommodation \ud83c\udf0d \u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-37067","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/comments?post=37067"}],"version-history":[{"count":22,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37067\/revisions"}],"predecessor-version":[{"id":37185,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37067\/revisions\/37185"}],"wp:attachment":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/media?parent=37067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}