B\u1ea3n \u0111\u1ed3 3D X\u00e3 Di Linh – Phi\u00ean b\u1ea3n Ho\u00e0n h\u1ea3o<\/title>\n \n <script src='https:\/\/unpkg.com\/maplibre-gl@4.1.3\/dist\/maplibre-gl.js'><\/script>\n <link href='https:\/\/unpkg.com\/maplibre-gl@4.1.3\/dist\/maplibre-gl.css' rel='stylesheet' \/>\n\n <style>\n :root {\n --bg-primary: rgba(255, 255, 255, 0.8);\n --bg-secondary: rgba(245, 245, 245, 0.9);\n --text-primary: #1c1c1c;\n --text-secondary: #555555;\n --accent-color: #007aff;\n --border-color: rgba(0, 0, 0, 0.1);\n --shadow-color: rgba(0, 0, 0, 0.15);\n --popup-bg: #ffffff;\n }\n body.dark-theme {\n --bg-primary: rgba(28, 28, 30, 0.8);\n --bg-secondary: rgba(44, 44, 46, 0.9);\n --text-primary: #f5f5f7;\n --text-secondary: #a1a1a6;\n --accent-color: #0a84ff;\n --border-color: rgba(255, 255, 255, 0.15);\n --shadow-color: rgba(0, 0, 0, 0.3);\n --popup-bg: #1c1c1e;\n }\n body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\n #map-container { position: relative; width: 100%; height: 100vh; overflow: hidden; }\n #map { position: absolute; top: 0; bottom: 0; width: 100%; }\n .maplibregl-canvas.dark-map { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }\n \n \/* Giao di\u1ec7n k\u00ednh m\u1edd \"Glassmorphism\" *\/\n #controls {\n position: absolute; top: 15px; right: 15px;\n background-color: var(--bg-primary);\n backdrop-filter: blur(12px) saturate(180%);\n -webkit-backdrop-filter: blur(12px) saturate(180%);\n border: 1px solid var(--border-color);\n padding: 15px; border-radius: 12px;\n box-shadow: 0 8px 32px 0 var(--shadow-color);\n z-index: 1; width: 280px; max-height: calc(100vh - 30px);\n overflow-y: auto; transition: all 0.3s ease;\n }\n #controls h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; color: var(--text-primary); }\n .control-group { margin-bottom: 15px; }\n .control-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: var(--text-secondary); }\n \n #theme-toggle {\n position: absolute; top: 15px; left: 15px; z-index: 1;\n background-color: var(--bg-primary); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n color: var(--text-primary); border: 1px solid var(--border-color);\n border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 12px var(--shadow-color); transition: all 0.3s ease;\n }\n #theme-toggle:hover { transform: scale(1.1); }\n\n input, select {\n width: 100%; box-sizing: border-box; padding: 10px 12px;\n border-radius: 8px; border: 1px solid var(--border-color);\n background-color: var(--bg-secondary); color: var(--text-primary);\n font-size: 14px; transition: all 0.2s ease;\n }\n input:focus, select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent); }\n\n #search-results { list-style: none; padding: 0; margin: 5px 0 0 0; max-height: 150px; overflow-y: auto; }\n #search-results li { padding: 10px 12px; cursor: pointer; border-radius: 6px; color: var(--text-primary); }\n #search-results li:hover { background-color: var(--accent-color); color: white; }\n \n #run-tour-btn {\n width: 100%; padding: 10px; margin-top: 10px; border: none; background-color: var(--accent-color); color: white;\n border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s ease;\n }\n #run-tour-btn.stop { background-color: #ff453a; }\n #run-tour-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px color-mix(in srgb, var(--accent-color) 40%, transparent); }\n #run-tour-btn.stop:hover:not(:disabled) { box-shadow: 0 4px 8px rgba(255, 69, 58, 0.4); }\n #run-tour-btn:disabled { background-color: #8e8e93; cursor: not-allowed; }\n\n \/* Popup \u0111\u01b0\u1ee3c c\u1ea3i ti\u1ebfn *\/\n .maplibregl-popup-content {\n background: var(--popup-bg); padding: 0; border-radius: 14px;\n box-shadow: 0 8px 32px var(--shadow-color); max-width: 280px !important;\n border: 1px solid var(--border-color);\n }\n .custom-popup img { width: 100%; height: 140px; object-fit: cover; border-top-left-radius: 14px; border-top-right-radius: 14px; background-color: #eee; }\n .custom-popup .content { padding: 15px; }\n .custom-popup h4 { margin: 0 0 5px 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }\n .custom-popup p { margin: 0 0 15px 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }\n\n \/* Ch\u1ea5m tr\u00f2n ph\u00e1t s\u00e1ng khi t\u00ecm ki\u1ebfm *\/\n @keyframes pulse { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0.0; } }\n .pulsing-dot { width: 80px; height: 80px; background: rgba(0, 122, 255, 0.5); border-radius: 50%; animation: pulse 1.5s infinite; }\n \n \/* Thanh ti\u1ebfn tr\u00ecnh Tour *\/\n #tour-progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; z-index: 5; background-color: rgba(120, 120, 128, 0.2); display: none; }\n #tour-progress { height: 100%; width: 0%; background-color: var(--accent-color); transition: width 0.5s ease; }\n \n @media (max-width: 600px) { #controls { width: auto; left: 10px; right: 10px; top: 10px; max-height: 45vh; } #theme-toggle { top: auto; bottom: 20px; left: 10px; } }\n <\/style>\n<\/head>\n<body>\n <div id=\"map-container\">\n <div id=\"map\"><\/div>\n <button id=\"theme-toggle\" title=\"Chuy\u1ec3n \u0111\u1ed5i S\u00e1ng\/T\u1ed1i\">\ud83c\udf17<\/button>\n <div id=\"controls\">\n <h3>B\u1ea3n \u0111\u1ed3 Di Linh 3D<\/h3>\n <div class=\"control-group\">\n <label for=\"search-box\">\ud83d\udd0d T\u00ecm ki\u1ebfm<\/label>\n <input type=\"text\" id=\"search-box\" placeholder=\"Nh\u1eadp t\u00ean \u0111\u1ecba \u0111i\u1ec3m...\">\n <ul id=\"search-results\"><\/ul>\n <\/div>\n <div class=\"control-group\">\n <label>\ud83d\uddfa\ufe0f L\u1edbp d\u1eef li\u1ec7u<\/label>\n <div id=\"layer-filters\">\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-coffee\" checked> V\u00f9ng C\u00e0 Ph\u00ea<\/label>\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-homestay\" checked> Homestay<\/label>\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-waterfall\" checked> Th\u00e1c N\u01b0\u1edbc<\/label>\n <\/div>\n <\/div>\n <div class=\"control-group\">\n <label for=\"tour-select\">\u2708\ufe0f Tour tham quan<\/label>\n <select id=\"tour-select\">\n <option value=\"homestay\">Tour Homestay \u2615<\/option>\n <option value=\"waterfall\">Tour Th\u00e1c N\u01b0\u1edbc \ud83c\udfde\ufe0f<\/option>\n <option value=\"combined\">Tour K\u1ebft h\u1ee3p \ud83c\udf10<\/option>\n <\/select>\n <button id=\"run-tour-btn\" disabled>T\u1ea3i b\u1ea3n \u0111\u1ed3…<\/button>\n <\/div>\n <\/div>\n <div id=\"tour-progress-bar\"><div id=\"tour-progress\"><\/div><\/div>\n <\/div>\n\n<script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ --- DATA ---\n const GEOJSON_DATA = {\n homestay: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[108.10,11.61]},'properties':{'name':'Lala Land Homestay','description':'Homestay xinh x\u1eafn gi\u1eefa \u0111\u1ed3i ch\u00e8.','imageUrl':'https:\/\/images.unsplash.com\/photo-1559703248-dca7e9444c5a?w=600&auto=format&fit=crop','buttonText':'Xem chi ti\u1ebft'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[108.06,11.58]},'properties':{'name':'The Wilder-nest','description':'N\u01a1i tr\u00fa \u1ea9n b\u00ecnh y\u00ean, view thung l\u0169ng.','imageUrl':'https:\/\/images.unsplash.com\/photo-1585544733939-01377b215854?w=600&auto=format&fit=crop','buttonText':'\u0110\u1eb7t ph\u00f2ng'}}]},\n waterfall: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[108.14,11.54]},'properties':{'name':'Th\u00e1c Bobla','description':'Ng\u1ecdn th\u00e1c h\u00f9ng v\u0129, cao h\u01a1n 50m.','imageUrl':'https:\/\/images.unsplash.com\/photo-1501630834273-4b560d2ee31?w=600&auto=format&fit=crop','buttonText':'Ch\u1ec9 \u0111\u01b0\u1eddng'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[108.02,11.65]},'properties':{'name':'Th\u00e1c Liliang','description':'G\u1eafn li\u1ec1n v\u1edbi truy\u1ec1n thuy\u1ebft c\u1ee7a ng\u01b0\u1eddi K\\'Ho.','imageUrl':'https:\/\/images.unsplash.com\/photo-1533227443854-8a0a55485f16?w=600&auto=format&fit=crop','buttonText':'T\u00ecm hi\u1ec3u'}}]},\n coffee: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Polygon','coordinates':[[[108.05,11.62],[108.12,11.64],[108.15,11.58],[108.08,11.55],[108.05,11.62]]]},'properties':{}}]}\n };\n const ALL_POINTS = [...GEOJSON_DATA.homestay.features, ...GEOJSON_DATA.waterfall.features];\n\n const map = new maplibregl.Map({\n container: 'map',\n style: 'https:\/\/demotiles.maplibre.org\/style.json',\n center: [108.08, 11.60],\n zoom: 11,\n pitch: 60,\n bearing: -17.6,\n antialias: true\n });\n\n const popup = new maplibregl.Popup({ closeButton: false, offset: 45, className: 'custom-popup-wrapper' });\n let pulsingDotMarker = null;\n\n map.on('load', () => {\n setupTerrainAndLayers();\n setupInteractions();\n document.getElementById('run-tour-btn').disabled = false;\n document.getElementById('run-tour-btn').textContent = 'Ch\u1ea1y Tour';\n });\n \n function setupTerrainAndLayers() {\n map.addSource('terrain-source', { type: 'raster-dem', url: 'https:\/\/demotiles.maplibre.org\/terrain-rgb\/{z}\/{x}\/{y}.png', tileSize: 256, maxzoom: 14 });\n map.setTerrain({ 'source': 'terrain-source', 'exaggeration': 1.5 });\n \n \/\/ Icon SVG chuy\u00ean nghi\u1ec7p\n const icons = {\n homestay: `<svg viewBox=\"0 0 50 50\" fill=\"#fff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M25 5L5 20V45H45V20L25 5Z\"\/><\/svg>`,\n waterfall: `<svg viewBox=\"0 0 50 50\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10 5 C15 20, 20 20, 25 45 M25 5 C30 20, 35 20, 40 45\"\/><\/svg>`\n };\n \n function createStyledIcon(bgColor, svgString) {\n const markerEl = document.createElement('div');\n markerEl.style.width = '40px';\n markerEl.style.height = '40px';\n markerEl.style.backgroundColor = bgColor;\n markerEl.style.borderRadius = '50%';\n markerEl.style.display = 'flex';\n markerEl.style.justifyContent = 'center';\n markerEl.style.alignItems = 'center';\n markerEl.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';\n markerEl.style.border = '2px solid white';\n markerEl.innerHTML = svgString;\n return markerEl;\n }\n\n GEOJSON_DATA.homestay.features.forEach(feature => {\n new maplibregl.Marker({ element: createStyledIcon('#E53935', icons.homestay) })\n .setLngLat(feature.geometry.coordinates)\n .addTo(map)\n .getElement().addEventListener('click', () => openPopupForFeature(feature));\n });\n \n GEOJSON_DATA.waterfall.features.forEach(feature => {\n new maplibregl.Marker({ element: createStyledIcon('#1E88E5', icons.waterfall) })\n .setLngLat(feature.geometry.coordinates)\n .addTo(map)\n .getElement().addEventListener('click', () => openPopupForFeature(feature));\n });\n \n map.addSource('coffee', { type: 'geojson', data: GEOJSON_DATA.coffee });\n map.addLayer({ id: 'coffee-layer', type: 'fill', source: 'coffee', paint: { 'fill-color': '#4CAF50', 'fill-opacity': 0.3 } });\n }\n\n function openPopupForFeature(feature) {\n const props = feature.properties;\n const html = `<div class=\"custom-popup\"><img decoding=\"async\" src=\"${props.imageUrl}\" alt=\"${props.name}\"><div class=\"content\"><h4>${props.name}<\/h4><p>${props.description}<\/p><a href=\"#\" class=\"action-btn\" style=\"background-color: var(--accent-color); color: white; display:block; padding:10px; border-radius:8px; text-decoration:none; text-align:center; font-weight:bold;\">${props.buttonText}<\/a><\/div><\/div>`;\n popup.setLngLat(feature.geometry.coordinates).setHTML(html).addTo(map);\n }\n \n function setupInteractions() {\n \/\/ Theme Toggle\n const themeToggle = document.getElementById('theme-toggle');\n const setTheme = (theme) => {\n const mapCanvas = document.querySelector('.maplibregl-canvas');\n if (theme === 'dark') {\n document.body.classList.add('dark-theme');\n if(mapCanvas) mapCanvas.classList.add('dark-map');\n themeToggle.textContent = '\u2600\ufe0f'; localStorage.setItem('mapTheme', 'dark');\n } else {\n document.body.classList.remove('dark-theme');\n if(mapCanvas) mapCanvas.classList.remove('dark-map');\n themeToggle.textContent = '\ud83c\udf17'; localStorage.setItem('mapTheme', 'light');\n }\n };\n const savedTheme = localStorage.getItem('mapTheme') || (new Date().getHours() >= 6 && new Date().getHours() < 18 ? 'light' : 'dark');\n setTheme(savedTheme);\n themeToggle.addEventListener('click', () => setTheme(document.body.classList.contains('dark-theme') ? 'light' : 'dark'));\n\n \/\/ Layer Toggles\n document.getElementById('toggle-coffee').onchange = (e) => map.setPaintProperty('coffee-layer', 'fill-opacity', e.target.checked ? 0.3 : 0);\n document.getElementById('toggle-homestay').onchange = (e) => toggleMarkers('.homestay-marker', e.target.checked);\n document.getElementById('toggle-waterfall').onchange = (e) => toggleMarkers('.waterfall-marker', e.target.checked);\n \n \/\/ Search Box\n const searchBox = document.getElementById('search-box');\n const searchResults = document.getElementById('search-results');\n searchBox.oninput = () => {\n const query = searchBox.value.toLowerCase();\n searchResults.innerHTML = ''; if (!query) return;\n const results = ALL_POINTS.filter(f => f.properties.name.toLowerCase().includes(query));\n results.forEach(feature => {\n const li = document.createElement('li');\n li.textContent = feature.properties.name;\n li.onclick = () => {\n searchResults.innerHTML = ''; searchBox.value = feature.properties.name;\n flyToPoint(feature, () => openPopupForFeature(feature));\n };\n searchResults.appendChild(li);\n });\n };\n\n \/\/ Cinematic Tour\n document.getElementById('run-tour-btn').addEventListener('click', handleTour);\n }\n\n function flyToPoint(feature, onEndCallback) {\n if (pulsingDotMarker) pulsingDotMarker.remove();\n const el = document.createElement('div');\n el.className = 'pulsing-dot';\n pulsingDotMarker = new maplibregl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);\n\n map.flyTo({ center: feature.geometry.coordinates, zoom: 14.5, pitch: 70, speed: 1.5 });\n map.once('moveend', () => {\n if (pulsingDotMarker) pulsingDotMarker.remove();\n pulsingDotMarker = null;\n if (onEndCallback) onEndCallback();\n });\n }\n \n \/\/ Tr\u1ea3i nghi\u1ec7m Tour \u0111i\u1ec7n \u1ea3nh\n let isTourRunning = false;\n let stopTourFlag = false;\n async function handleTour() {\n const tourBtn = document.getElementById('run-tour-btn');\n if (isTourRunning) {\n stopTourFlag = true; \/\/ G\u1eedi t\u00edn hi\u1ec7u d\u1eebng\n tourBtn.disabled = true;\n tourBtn.textContent = '\u0110ang d\u1eebng...';\n return;\n }\n\n isTourRunning = true;\n stopTourFlag = false;\n tourBtn.textContent = 'D\u1eebng Tour';\n tourBtn.classList.add('stop');\n if (popup.isOpen()) popup.remove();\n \n const tourProgressBar = document.getElementById('tour-progress-bar');\n const tourProgress = document.getElementById('tour-progress');\n tourProgressBar.style.display = 'block';\n tourProgress.style.width = '0%';\n \n try {\n const tourType = document.getElementById('tour-select').value;\n let tourPoints = [];\n if (tourType === 'homestay') tourPoints = [...GEOJSON_DATA.homestay.features];\n else if (tourType === 'waterfall') tourPoints = [...GEOJSON_DATA.waterfall.features];\n else tourPoints = [...GEOJSON_DATA.homestay.features, ...GEOJSON_DATA.waterfall.features];\n\n for (let i = 0; i < tourPoints.length; i++) {\n if (stopTourFlag) break;\n const point = tourPoints[i];\n \n await new Promise(resolve => {\n const bearing = map.getBearing() > 0 ? -45 : 45; \/\/ \u0110\u1ed5i g\u00f3c nh\u00ecn\n map.flyTo({ center: point.geometry.coordinates, zoom: 15.5, pitch: 75, bearing: map.getBearing() + bearing, speed: 0.5 });\n map.once('moveend', () => setTimeout(resolve, 1500)); \/\/ D\u1eebng l\u1ea1i 1.5s\n });\n \n tourProgress.style.width = `${((i + 1) \/ tourPoints.length) * 100}%`;\n if (i < tourPoints.length - 1) { \/\/ L\u01b0\u1edbt \u0111\u1ebfn \u0111i\u1ec3m ti\u1ebfp theo\n await new Promise(resolve => {\n if(stopTourFlag) return resolve();\n const nextPoint = tourPoints[i + 1];\n map.flyTo({ center: nextPoint.geometry.coordinates, zoom: 12, pitch: 50, speed: 0.3, curve: 0.8 });\n map.once('moveend', () => setTimeout(resolve, 500));\n });\n }\n }\n } finally {\n map.flyTo({ center: [108.08, 11.60], zoom: 11, pitch: 60, bearing: -17.6, speed: 1.0 });\n isTourRunning = false;\n stopTourFlag = false;\n tourBtn.disabled = false;\n tourBtn.textContent = 'Ch\u1ea1y Tour';\n tourBtn.classList.remove('stop');\n tourProgressBar.style.display = 'none';\n tourProgress.style.width = '0%';\n }\n }\n });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea3n \u0111\u1ed3 3D X\u00e3 Di Linh – Phi\u00ean b\u1ea3n Ho\u00e0n h\u1ea3o \ud83c\udf17 B\u1ea3n \u0111\u1ed3 Di Linh 3D \ud83d\udd0d T\u00ecm ki\u1ebfm […]<\/p>\n","protected":false},"author":14,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1953","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/xadilinh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1953"}],"version-history":[{"count":18,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953\/revisions\/1971"}],"wp:attachment":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1953,"date":"2025-09-24T20:49:17","date_gmt":"2025-09-24T13:49:17","guid":{"rendered":"https:\/\/xadilinh.com\/?page_id=1953"},"modified":"2025-09-24T22:12:50","modified_gmt":"2025-09-24T15:12:50","slug":"tourism-map","status":"publish","type":"page","link":"https:\/\/xadilinh.com\/?page_id=1953","title":{"rendered":"Tourism Map"},"content":{"rendered":"\n\n\n\n \n \n B\u1ea3n \u0111\u1ed3 3D X\u00e3 Di Linh – Phi\u00ean b\u1ea3n Ho\u00e0n h\u1ea3o<\/title>\n \n <script src='https:\/\/unpkg.com\/maplibre-gl@4.1.3\/dist\/maplibre-gl.js'><\/script>\n <link href='https:\/\/unpkg.com\/maplibre-gl@4.1.3\/dist\/maplibre-gl.css' rel='stylesheet' \/>\n\n <style>\n :root {\n --bg-primary: rgba(255, 255, 255, 0.8);\n --bg-secondary: rgba(245, 245, 245, 0.9);\n --text-primary: #1c1c1c;\n --text-secondary: #555555;\n --accent-color: #007aff;\n --border-color: rgba(0, 0, 0, 0.1);\n --shadow-color: rgba(0, 0, 0, 0.15);\n --popup-bg: #ffffff;\n }\n body.dark-theme {\n --bg-primary: rgba(28, 28, 30, 0.8);\n --bg-secondary: rgba(44, 44, 46, 0.9);\n --text-primary: #f5f5f7;\n --text-secondary: #a1a1a6;\n --accent-color: #0a84ff;\n --border-color: rgba(255, 255, 255, 0.15);\n --shadow-color: rgba(0, 0, 0, 0.3);\n --popup-bg: #1c1c1e;\n }\n body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\n #map-container { position: relative; width: 100%; height: 100vh; overflow: hidden; }\n #map { position: absolute; top: 0; bottom: 0; width: 100%; }\n .maplibregl-canvas.dark-map { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }\n \n \/* Giao di\u1ec7n k\u00ednh m\u1edd \"Glassmorphism\" *\/\n #controls {\n position: absolute; top: 15px; right: 15px;\n background-color: var(--bg-primary);\n backdrop-filter: blur(12px) saturate(180%);\n -webkit-backdrop-filter: blur(12px) saturate(180%);\n border: 1px solid var(--border-color);\n padding: 15px; border-radius: 12px;\n box-shadow: 0 8px 32px 0 var(--shadow-color);\n z-index: 1; width: 280px; max-height: calc(100vh - 30px);\n overflow-y: auto; transition: all 0.3s ease;\n }\n #controls h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; color: var(--text-primary); }\n .control-group { margin-bottom: 15px; }\n .control-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: var(--text-secondary); }\n \n #theme-toggle {\n position: absolute; top: 15px; left: 15px; z-index: 1;\n background-color: var(--bg-primary); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n color: var(--text-primary); border: 1px solid var(--border-color);\n border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 12px var(--shadow-color); transition: all 0.3s ease;\n }\n #theme-toggle:hover { transform: scale(1.1); }\n\n input, select {\n width: 100%; box-sizing: border-box; padding: 10px 12px;\n border-radius: 8px; border: 1px solid var(--border-color);\n background-color: var(--bg-secondary); color: var(--text-primary);\n font-size: 14px; transition: all 0.2s ease;\n }\n input:focus, select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent); }\n\n #search-results { list-style: none; padding: 0; margin: 5px 0 0 0; max-height: 150px; overflow-y: auto; }\n #search-results li { padding: 10px 12px; cursor: pointer; border-radius: 6px; color: var(--text-primary); }\n #search-results li:hover { background-color: var(--accent-color); color: white; }\n \n #run-tour-btn {\n width: 100%; padding: 10px; margin-top: 10px; border: none; background-color: var(--accent-color); color: white;\n border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s ease;\n }\n #run-tour-btn.stop { background-color: #ff453a; }\n #run-tour-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px color-mix(in srgb, var(--accent-color) 40%, transparent); }\n #run-tour-btn.stop:hover:not(:disabled) { box-shadow: 0 4px 8px rgba(255, 69, 58, 0.4); }\n #run-tour-btn:disabled { background-color: #8e8e93; cursor: not-allowed; }\n\n \/* Popup \u0111\u01b0\u1ee3c c\u1ea3i ti\u1ebfn *\/\n .maplibregl-popup-content {\n background: var(--popup-bg); padding: 0; border-radius: 14px;\n box-shadow: 0 8px 32px var(--shadow-color); max-width: 280px !important;\n border: 1px solid var(--border-color);\n }\n .custom-popup img { width: 100%; height: 140px; object-fit: cover; border-top-left-radius: 14px; border-top-right-radius: 14px; background-color: #eee; }\n .custom-popup .content { padding: 15px; }\n .custom-popup h4 { margin: 0 0 5px 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }\n .custom-popup p { margin: 0 0 15px 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }\n\n \/* Ch\u1ea5m tr\u00f2n ph\u00e1t s\u00e1ng khi t\u00ecm ki\u1ebfm *\/\n @keyframes pulse { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0.0; } }\n .pulsing-dot { width: 80px; height: 80px; background: rgba(0, 122, 255, 0.5); border-radius: 50%; animation: pulse 1.5s infinite; }\n \n \/* Thanh ti\u1ebfn tr\u00ecnh Tour *\/\n #tour-progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; z-index: 5; background-color: rgba(120, 120, 128, 0.2); display: none; }\n #tour-progress { height: 100%; width: 0%; background-color: var(--accent-color); transition: width 0.5s ease; }\n \n @media (max-width: 600px) { #controls { width: auto; left: 10px; right: 10px; top: 10px; max-height: 45vh; } #theme-toggle { top: auto; bottom: 20px; left: 10px; } }\n <\/style>\n<\/head>\n<body>\n <div id=\"map-container\">\n <div id=\"map\"><\/div>\n <button id=\"theme-toggle\" title=\"Chuy\u1ec3n \u0111\u1ed5i S\u00e1ng\/T\u1ed1i\">\ud83c\udf17<\/button>\n <div id=\"controls\">\n <h3>B\u1ea3n \u0111\u1ed3 Di Linh 3D<\/h3>\n <div class=\"control-group\">\n <label for=\"search-box\">\ud83d\udd0d T\u00ecm ki\u1ebfm<\/label>\n <input type=\"text\" id=\"search-box\" placeholder=\"Nh\u1eadp t\u00ean \u0111\u1ecba \u0111i\u1ec3m...\">\n <ul id=\"search-results\"><\/ul>\n <\/div>\n <div class=\"control-group\">\n <label>\ud83d\uddfa\ufe0f L\u1edbp d\u1eef li\u1ec7u<\/label>\n <div id=\"layer-filters\">\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-coffee\" checked> V\u00f9ng C\u00e0 Ph\u00ea<\/label>\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-homestay\" checked> Homestay<\/label>\n <label style=\"color:var(--text-primary); font-weight:normal; user-select:none;\"><input type=\"checkbox\" id=\"toggle-waterfall\" checked> Th\u00e1c N\u01b0\u1edbc<\/label>\n <\/div>\n <\/div>\n <div class=\"control-group\">\n <label for=\"tour-select\">\u2708\ufe0f Tour tham quan<\/label>\n <select id=\"tour-select\">\n <option value=\"homestay\">Tour Homestay \u2615<\/option>\n <option value=\"waterfall\">Tour Th\u00e1c N\u01b0\u1edbc \ud83c\udfde\ufe0f<\/option>\n <option value=\"combined\">Tour K\u1ebft h\u1ee3p \ud83c\udf10<\/option>\n <\/select>\n <button id=\"run-tour-btn\" disabled>T\u1ea3i b\u1ea3n \u0111\u1ed3…<\/button>\n <\/div>\n <\/div>\n <div id=\"tour-progress-bar\"><div id=\"tour-progress\"><\/div><\/div>\n <\/div>\n\n<script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ --- DATA ---\n const GEOJSON_DATA = {\n homestay: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[108.10,11.61]},'properties':{'name':'Lala Land Homestay','description':'Homestay xinh x\u1eafn gi\u1eefa \u0111\u1ed3i ch\u00e8.','imageUrl':'https:\/\/images.unsplash.com\/photo-1559703248-dca7e9444c5a?w=600&auto=format&fit=crop','buttonText':'Xem chi ti\u1ebft'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[108.06,11.58]},'properties':{'name':'The Wilder-nest','description':'N\u01a1i tr\u00fa \u1ea9n b\u00ecnh y\u00ean, view thung l\u0169ng.','imageUrl':'https:\/\/images.unsplash.com\/photo-1585544733939-01377b215854?w=600&auto=format&fit=crop','buttonText':'\u0110\u1eb7t ph\u00f2ng'}}]},\n waterfall: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[108.14,11.54]},'properties':{'name':'Th\u00e1c Bobla','description':'Ng\u1ecdn th\u00e1c h\u00f9ng v\u0129, cao h\u01a1n 50m.','imageUrl':'https:\/\/images.unsplash.com\/photo-1501630834273-4b560d2ee31?w=600&auto=format&fit=crop','buttonText':'Ch\u1ec9 \u0111\u01b0\u1eddng'}},{'type':'Feature','geometry':{'type':'Point','coordinates':[108.02,11.65]},'properties':{'name':'Th\u00e1c Liliang','description':'G\u1eafn li\u1ec1n v\u1edbi truy\u1ec1n thuy\u1ebft c\u1ee7a ng\u01b0\u1eddi K\\'Ho.','imageUrl':'https:\/\/images.unsplash.com\/photo-1533227443854-8a0a55485f16?w=600&auto=format&fit=crop','buttonText':'T\u00ecm hi\u1ec3u'}}]},\n coffee: {'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Polygon','coordinates':[[[108.05,11.62],[108.12,11.64],[108.15,11.58],[108.08,11.55],[108.05,11.62]]]},'properties':{}}]}\n };\n const ALL_POINTS = [...GEOJSON_DATA.homestay.features, ...GEOJSON_DATA.waterfall.features];\n\n const map = new maplibregl.Map({\n container: 'map',\n style: 'https:\/\/demotiles.maplibre.org\/style.json',\n center: [108.08, 11.60],\n zoom: 11,\n pitch: 60,\n bearing: -17.6,\n antialias: true\n });\n\n const popup = new maplibregl.Popup({ closeButton: false, offset: 45, className: 'custom-popup-wrapper' });\n let pulsingDotMarker = null;\n\n map.on('load', () => {\n setupTerrainAndLayers();\n setupInteractions();\n document.getElementById('run-tour-btn').disabled = false;\n document.getElementById('run-tour-btn').textContent = 'Ch\u1ea1y Tour';\n });\n \n function setupTerrainAndLayers() {\n map.addSource('terrain-source', { type: 'raster-dem', url: 'https:\/\/demotiles.maplibre.org\/terrain-rgb\/{z}\/{x}\/{y}.png', tileSize: 256, maxzoom: 14 });\n map.setTerrain({ 'source': 'terrain-source', 'exaggeration': 1.5 });\n \n \/\/ Icon SVG chuy\u00ean nghi\u1ec7p\n const icons = {\n homestay: `<svg viewBox=\"0 0 50 50\" fill=\"#fff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M25 5L5 20V45H45V20L25 5Z\"\/><\/svg>`,\n waterfall: `<svg viewBox=\"0 0 50 50\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10 5 C15 20, 20 20, 25 45 M25 5 C30 20, 35 20, 40 45\"\/><\/svg>`\n };\n \n function createStyledIcon(bgColor, svgString) {\n const markerEl = document.createElement('div');\n markerEl.style.width = '40px';\n markerEl.style.height = '40px';\n markerEl.style.backgroundColor = bgColor;\n markerEl.style.borderRadius = '50%';\n markerEl.style.display = 'flex';\n markerEl.style.justifyContent = 'center';\n markerEl.style.alignItems = 'center';\n markerEl.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';\n markerEl.style.border = '2px solid white';\n markerEl.innerHTML = svgString;\n return markerEl;\n }\n\n GEOJSON_DATA.homestay.features.forEach(feature => {\n new maplibregl.Marker({ element: createStyledIcon('#E53935', icons.homestay) })\n .setLngLat(feature.geometry.coordinates)\n .addTo(map)\n .getElement().addEventListener('click', () => openPopupForFeature(feature));\n });\n \n GEOJSON_DATA.waterfall.features.forEach(feature => {\n new maplibregl.Marker({ element: createStyledIcon('#1E88E5', icons.waterfall) })\n .setLngLat(feature.geometry.coordinates)\n .addTo(map)\n .getElement().addEventListener('click', () => openPopupForFeature(feature));\n });\n \n map.addSource('coffee', { type: 'geojson', data: GEOJSON_DATA.coffee });\n map.addLayer({ id: 'coffee-layer', type: 'fill', source: 'coffee', paint: { 'fill-color': '#4CAF50', 'fill-opacity': 0.3 } });\n }\n\n function openPopupForFeature(feature) {\n const props = feature.properties;\n const html = `<div class=\"custom-popup\"><img decoding=\"async\" src=\"${props.imageUrl}\" alt=\"${props.name}\"><div class=\"content\"><h4>${props.name}<\/h4><p>${props.description}<\/p><a href=\"#\" class=\"action-btn\" style=\"background-color: var(--accent-color); color: white; display:block; padding:10px; border-radius:8px; text-decoration:none; text-align:center; font-weight:bold;\">${props.buttonText}<\/a><\/div><\/div>`;\n popup.setLngLat(feature.geometry.coordinates).setHTML(html).addTo(map);\n }\n \n function setupInteractions() {\n \/\/ Theme Toggle\n const themeToggle = document.getElementById('theme-toggle');\n const setTheme = (theme) => {\n const mapCanvas = document.querySelector('.maplibregl-canvas');\n if (theme === 'dark') {\n document.body.classList.add('dark-theme');\n if(mapCanvas) mapCanvas.classList.add('dark-map');\n themeToggle.textContent = '\u2600\ufe0f'; localStorage.setItem('mapTheme', 'dark');\n } else {\n document.body.classList.remove('dark-theme');\n if(mapCanvas) mapCanvas.classList.remove('dark-map');\n themeToggle.textContent = '\ud83c\udf17'; localStorage.setItem('mapTheme', 'light');\n }\n };\n const savedTheme = localStorage.getItem('mapTheme') || (new Date().getHours() >= 6 && new Date().getHours() < 18 ? 'light' : 'dark');\n setTheme(savedTheme);\n themeToggle.addEventListener('click', () => setTheme(document.body.classList.contains('dark-theme') ? 'light' : 'dark'));\n\n \/\/ Layer Toggles\n document.getElementById('toggle-coffee').onchange = (e) => map.setPaintProperty('coffee-layer', 'fill-opacity', e.target.checked ? 0.3 : 0);\n document.getElementById('toggle-homestay').onchange = (e) => toggleMarkers('.homestay-marker', e.target.checked);\n document.getElementById('toggle-waterfall').onchange = (e) => toggleMarkers('.waterfall-marker', e.target.checked);\n \n \/\/ Search Box\n const searchBox = document.getElementById('search-box');\n const searchResults = document.getElementById('search-results');\n searchBox.oninput = () => {\n const query = searchBox.value.toLowerCase();\n searchResults.innerHTML = ''; if (!query) return;\n const results = ALL_POINTS.filter(f => f.properties.name.toLowerCase().includes(query));\n results.forEach(feature => {\n const li = document.createElement('li');\n li.textContent = feature.properties.name;\n li.onclick = () => {\n searchResults.innerHTML = ''; searchBox.value = feature.properties.name;\n flyToPoint(feature, () => openPopupForFeature(feature));\n };\n searchResults.appendChild(li);\n });\n };\n\n \/\/ Cinematic Tour\n document.getElementById('run-tour-btn').addEventListener('click', handleTour);\n }\n\n function flyToPoint(feature, onEndCallback) {\n if (pulsingDotMarker) pulsingDotMarker.remove();\n const el = document.createElement('div');\n el.className = 'pulsing-dot';\n pulsingDotMarker = new maplibregl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);\n\n map.flyTo({ center: feature.geometry.coordinates, zoom: 14.5, pitch: 70, speed: 1.5 });\n map.once('moveend', () => {\n if (pulsingDotMarker) pulsingDotMarker.remove();\n pulsingDotMarker = null;\n if (onEndCallback) onEndCallback();\n });\n }\n \n \/\/ Tr\u1ea3i nghi\u1ec7m Tour \u0111i\u1ec7n \u1ea3nh\n let isTourRunning = false;\n let stopTourFlag = false;\n async function handleTour() {\n const tourBtn = document.getElementById('run-tour-btn');\n if (isTourRunning) {\n stopTourFlag = true; \/\/ G\u1eedi t\u00edn hi\u1ec7u d\u1eebng\n tourBtn.disabled = true;\n tourBtn.textContent = '\u0110ang d\u1eebng...';\n return;\n }\n\n isTourRunning = true;\n stopTourFlag = false;\n tourBtn.textContent = 'D\u1eebng Tour';\n tourBtn.classList.add('stop');\n if (popup.isOpen()) popup.remove();\n \n const tourProgressBar = document.getElementById('tour-progress-bar');\n const tourProgress = document.getElementById('tour-progress');\n tourProgressBar.style.display = 'block';\n tourProgress.style.width = '0%';\n \n try {\n const tourType = document.getElementById('tour-select').value;\n let tourPoints = [];\n if (tourType === 'homestay') tourPoints = [...GEOJSON_DATA.homestay.features];\n else if (tourType === 'waterfall') tourPoints = [...GEOJSON_DATA.waterfall.features];\n else tourPoints = [...GEOJSON_DATA.homestay.features, ...GEOJSON_DATA.waterfall.features];\n\n for (let i = 0; i < tourPoints.length; i++) {\n if (stopTourFlag) break;\n const point = tourPoints[i];\n \n await new Promise(resolve => {\n const bearing = map.getBearing() > 0 ? -45 : 45; \/\/ \u0110\u1ed5i g\u00f3c nh\u00ecn\n map.flyTo({ center: point.geometry.coordinates, zoom: 15.5, pitch: 75, bearing: map.getBearing() + bearing, speed: 0.5 });\n map.once('moveend', () => setTimeout(resolve, 1500)); \/\/ D\u1eebng l\u1ea1i 1.5s\n });\n \n tourProgress.style.width = `${((i + 1) \/ tourPoints.length) * 100}%`;\n if (i < tourPoints.length - 1) { \/\/ L\u01b0\u1edbt \u0111\u1ebfn \u0111i\u1ec3m ti\u1ebfp theo\n await new Promise(resolve => {\n if(stopTourFlag) return resolve();\n const nextPoint = tourPoints[i + 1];\n map.flyTo({ center: nextPoint.geometry.coordinates, zoom: 12, pitch: 50, speed: 0.3, curve: 0.8 });\n map.once('moveend', () => setTimeout(resolve, 500));\n });\n }\n }\n } finally {\n map.flyTo({ center: [108.08, 11.60], zoom: 11, pitch: 60, bearing: -17.6, speed: 1.0 });\n isTourRunning = false;\n stopTourFlag = false;\n tourBtn.disabled = false;\n tourBtn.textContent = 'Ch\u1ea1y Tour';\n tourBtn.classList.remove('stop');\n tourProgressBar.style.display = 'none';\n tourProgress.style.width = '0%';\n }\n }\n });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea3n \u0111\u1ed3 3D X\u00e3 Di Linh – Phi\u00ean b\u1ea3n Ho\u00e0n h\u1ea3o \ud83c\udf17 B\u1ea3n \u0111\u1ed3 Di Linh 3D \ud83d\udd0d T\u00ecm ki\u1ebfm […]<\/p>\n","protected":false},"author":14,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1953","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/xadilinh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1953"}],"version-history":[{"count":18,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/xadilinh.com\/index.php?rest_route=\/wp\/v2\/pages\/1953\/revisions\/1971"}],"wp:attachment":[{"href":"https:\/\/xadilinh.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}