Toplist \u0110\u1ecba \u0110i\u1ec3m \u2013 WordPress (v3)<\/title>\r\n <style>\r\n :root{ --ink:#0f172a;--muted:#475569;--bg:#ffffff;--soft:#f1f5f9;--border:#e5e7eb;--brand:#0ea5e9;--brand-dark:#0284c7;--radius:16px;--shadow:0 8px 24px rgba(2,8,23,.08) }\r\n *,*:before,*:after{box-sizing:border-box}\r\n body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}\r\n .container{max-width:1120px;margin:0 auto;padding:16px}\r\n header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}\r\n .row{display:flex;gap:8px;align-items:center}\r\n h1{font-size:20px;margin:0}\r\n .badge{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:#0b1220}\r\n button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--border);background:#fff;padding:8px 12px;font-size:14px}\r\n button.icon{width:36px;height:36px;padding:0}\r\n button.primary{background:var(--brand);border-color:var(--brand);color:#fff}\r\n button.primary:hover{background:var(--brand-dark)}\r\n input,select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px}\r\n label{font-size:13px;color:var(--muted)}\r\n .muted{color:var(--muted)}\r\n .grid{display:grid;gap:16px}\r\n .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}\r\n .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}\r\n @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}\r\n .card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}\r\n .card .content{padding:16px}\r\n .pill{border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px}\r\n .sep{height:1px;background:var(--border);margin:16px 0}\r\n .drawer{border:1px solid var(--border);border-radius:16px}\r\n details.drawer>summary{list-style:none;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}\r\n details.drawer[open]>summary{background:var(--soft)}\r\n .row-wrap{display:flex;flex-wrap:wrap;gap:10px}\r\n .imgbox{width:96px;height:96px;border-radius:12px;background:#f3f4f6;overflow:hidden;flex-shrink:0}\r\n .imgbox img{width:100%;height:100%;object-fit:cover}\r\n .title{font-weight:600;line-height:1.2}\r\n .line{display:flex;gap:6px;align-items:flex-start}\r\n .btn-ghost{background:transparent;border-color:transparent}\r\n .toast{position:fixed;right:16px;bottom:16px;background:#0b1220;color:#fff;padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.25s}\r\n .toast.show{opacity:1;transform:none}\r\n .footer{padding:32px 0;text-align:center;font-size:12px;color:var(--muted)}\r\n .hide{display:none!important}\r\n <\/style>\r\n\r\n \r\n <script id=\"TOPLIST_EMBED_CONFIG\" type=\"application\/json\">\r\n {\r\n \"preferEmbed\": true,\r\n \"sheetLink\": \"\", \/\/ c\u00f3 th\u1ec3 \u0111\u1ec3 tr\u1ed1ng khi d\u00f9ng CSV nh\u00fang\r\n \"mapping\": {\r\n \"name\": \"T\u00ean\",\r\n \"category\": \"Nh\u00f3m\",\r\n \"province\": \"T\u1ec9nh\/TP\",\r\n \"address\": \"\u0110\u1ecba ch\u1ec9\",\r\n \"phone\": \"\u0110i\u1ec7n tho\u1ea1i\",\r\n \"website\": \"Website\",\r\n \"rating\": \"Rating\",\r\n \"reviews\": \"S\u1ed1 \u0111\u00e1nh gi\u00e1\",\r\n \"lat\": \"Lat\",\r\n \"lng\": \"Lng\",\r\n \"image\": \"\u1ea2nh\",\r\n \"hours\": \"Gi\u1edd m\u1edf c\u1eeda\"\r\n },\r\n \"maxDistanceKm\": 50,\r\n \"sortBy\": \"nearest\"\r\n }\r\n <\/script>\r\n\r\n \r\n <script id=\"TOPLIST_EMBED_CSV\" type=\"text\/csv\">\r\nT\u00ean,Nh\u00f3m,T\u1ec9nh\/TP,\u0110\u1ecba ch\u1ec9,\u0110i\u1ec7n tho\u1ea1i,Website,Rating,S\u1ed1 \u0111\u00e1nh gi\u00e1,Lat,Lng,\u1ea2nh,Gi\u1edd m\u1edf c\u1eeda\r\nC\u1eeda h\u00e0ng A,V\u1eadt li\u1ec7u,B\u1eafc Giang,29 L\u00fd Th\u00e1i T\u1ed5,0981039377,,4.7,128,21.2725,106.196,https:\/\/picsum.photos\/seed\/a\/200,8:00-20:00\r\nC\u1eeda h\u00e0ng B,Trang tr\u00ed,H\u00e0 N\u1ed9i,12 Hai B\u00e0 Tr\u01b0ng,0900000000,,4.5,88,21.0285,105.8542,https:\/\/picsum.photos\/seed\/b\/200,8:30-21:00\r\n <\/script>\r\n\r\n \r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"container row\" style=\"padding:12px 16px\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\r\n <h1>Toplist \u0110\u1ecba \u0110i\u1ec3m<\/h1>\r\n <span class=\"badge\" style=\"margin-left:8px\">Tin c\u1eady \u2022 Ti\u1ec7n l\u1ee3i<\/span>\r\n <span style=\"margin-left:auto\"><\/span>\r\n <button class=\"icon\" id=\"btnGeolocate\" title=\"L\u1ea5y v\u1ecb tr\u00ed c\u1ee7a t\u00f4i\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v4\"><\/path><path d=\"M12 18v4\"><\/path><path d=\"M4.93 4.93l2.83 2.83\"><\/path><path d=\"M16.24 16.24l2.83 2.83\"><\/path><path d=\"M2 12h4\"><\/path><path d=\"M18 12h4\"><\/path><path d=\"M4.93 19.07l2.83-2.83\"><\/path><path d=\"M16.24 7.76l2.83-2.83\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/button>\r\n <details class=\"drawer\" id=\"settingsDrawer\" style=\"margin-left:8px\">\r\n <summary>\r\n <span class=\"row\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .69.28 1.32.73 1.77.45.45 1.08.73 1.77.73H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"><\/path><\/svg> C\u00e0i \u0111\u1eb7t<\/span>\r\n <\/summary>\r\n <div class=\"content\" style=\"padding:16px\">\r\n <h3 style=\"margin:0 0 8px 0\">C\u00e0i \u0111\u1eb7t ngu\u1ed3n d\u1eef li\u1ec7u<\/h3>\r\n <div class=\"grid grid-2\">\r\n <div>\r\n <label>Link d\u1eef li\u1ec7u (ch\u1ea5p nh\u1eadn .csv ho\u1eb7c Google Sheets)<\/label>\r\n <input id=\"inpSheetLink\" placeholder=\"D\u00e1n link .csv ho\u1eb7c \/d\/{ID}\/edit?gid=... ho\u1eb7c \/d\/e\/...\/pub?output=csv\" \/>\r\n <div class=\"muted\" style=\"font-size:12px;margin-top:6px\">M\u1eb7c \u0111\u1ecbnh v3 \u0111ang d\u00f9ng CSV nh\u00fang trong file (kh\u00f4ng c\u1ea7n link).<\/div>\r\n <div class=\"row\" style=\"margin-top:10px;gap:10px\">\r\n <button class=\"primary\" id=\"btnLoad\">T\u1ea3i d\u1eef li\u1ec7u<\/button>\r\n <button id=\"btnClear\">Xo\u00e1 d\u1eef li\u1ec7u<\/button>\r\n <button id=\"btnShare\">Chia s\u1ebb c\u1ea5u h\u00ecnh<\/button>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:10px;gap:8px;background:#fff7ed;border:1px solid #fed7aa;padding:12px;border-radius:12px;color:#9a3412\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg>\r\n <div style=\"font-size:13px\">\r\n <b>\u01afu ti\u00ean:<\/b> CSV nh\u00fang ho\u1eb7c link .csv (media WordPress). V\u1edbi Google Sheets, d\u00f9ng \"Publish to the web \u2192 CSV\" ho\u1eb7c share Viewer \u0111\u00fang gid.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"row\" style=\"justify-content:space-between\"><h3 style=\"margin:0\">\u00c1nh x\u1ea1 c\u1ed9t<\/h3><span class=\"pill\" id=\"hdrCount\">0 c\u1ed9t<\/span><\/div>\r\n <div class=\"grid grid-2\" id=\"mapGrid\" style=\"margin-top:8px\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"grid grid-2\">\r\n <div>\r\n <label>Kho\u1ea3ng c\u00e1ch t\u1ed1i \u0111a (km)<\/label>\r\n <div class=\"row\" style=\"gap:10px;margin-top:8px\">\r\n <input type=\"range\" id=\"rngDistance\" min=\"1\" max=\"100\" step=\"1\" value=\"50\" style=\"flex:1\" \/>\r\n <span id=\"lblDistance\" style=\"width:40px;text-align:right\">50<\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label>S\u1eafp x\u1ebfp<\/label>\r\n <select id=\"selSort\" style=\"margin-top:8px\">\r\n <option value=\"nearest\">G\u1ea7n nh\u1ea5t<\/option>\r\n <option value=\"rating\">\u0110\u00e1nh gi\u00e1<\/option>\r\n <option value=\"name\">T\u00ean<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:8px\"><span class=\"pill\">C\u1ea5u h\u00ecnh nh\u00fang + t\u1ef1 \u0111\u1ed9ng l\u01b0u tr\u00ecnh duy\u1ec7t<\/span><\/div>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\" style=\"padding:16px\">\r\n <div class=\"row-wrap\" style=\"gap:12px\">\r\n <div style=\"position:relative;flex:1;min-width:240px\">\r\n <svg style=\"position:absolute;left:10px;top:50%;transform:translateY(-50%)\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><path d=\"m21 21-4.3-4.3\"><\/path><\/svg>\r\n <input id=\"inpQuery\" placeholder=\"T\u00ecm theo t\u00ean \/ \u0111\u1ecba ch\u1ec9 \/ nh\u00f3m...\" style=\"padding-left:32px\" \/>\r\n <button class=\"btn-ghost\" id=\"btnVoice\" title=\"T\u00ecm b\u1eb1ng gi\u1ecdng n\u00f3i\" style=\"position:absolute;right:0;top:50%;transform:translateY(-50%)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 1v11\"><\/path><rect x=\"5\" y=\"8\" width=\"14\" height=\"7\" rx=\"7\"><\/rect><path d=\"M8 21h8\"><\/path><path d=\"M12 17v4\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"row\" style=\"gap:8px\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 3H2\"><\/path><path d=\"M22 7H2\"><\/path><path d=\"M22 11H2\"><\/path><path d=\"M22 15H2\"><\/path><path d=\"M22 19H2\"><\/path><\/svg>\r\n <select id=\"selProvince\" style=\"width:220px\">\r\n <option value=\"all\">T\u1ea5t c\u1ea3<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"muted\" style=\"margin-top:8px;font-size:13px\">Hi\u1ec3n th\u1ecb <b id=\"cntVisible\">0<\/b>\/<b id=\"cntFiltered\">0<\/b> \u0111\u1ecba \u0111i\u1ec3m. <span id=\"locState\">Ch\u01b0a b\u1eadt \u0111\u1ecbnh v\u1ecb.<\/span><\/div>\r\n\r\n <div id=\"list\" class=\"grid grid-3\" style=\"margin-top:16px\"><\/div>\r\n\r\n <div style=\"display:flex;justify-content:center;margin-top:24px\"><button id=\"btnMore\" style=\"display:none\">T\u1ea3i th\u00eam<\/button><\/div>\r\n\r\n <div id=\"empty\" class=\"muted\" style=\"text-align:center;margin-top:48px;display:none\">Kh\u00f4ng c\u00f3 \u0111\u1ecba \u0111i\u1ec3m ph\u00f9 h\u1ee3p. H\u00e3y th\u1eed \u0111i\u1ec1u ch\u1ec9nh b\u1ed9 l\u1ecdc ho\u1eb7c b\u00e1n k\u00ednh kho\u1ea3ng c\u00e1ch.<\/div>\r\n <\/main>\r\n\r\n <div class=\"footer\">Made for Vietnam \u2022 T\u1ed1i \u01b0u UX: t\u00ecm ki\u1ebfm nhanh, \u0111\u1ecbnh v\u1ecb, ch\u1ec9 \u0111\u01b0\u1eddng, g\u1ecdi \u0111i\u1ec7n.<\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\r\n <script>\r\n (function(){\r\n const LS_KEY = 'toplist_settings_v5';\r\n const NONE = '__none__';\r\n\r\n const DEFAULT_SETTINGS = {\r\n sheetLink:'',\r\n mapping:{name:'',category:'',province:'',address:'',phone:'',website:'',rating:'',reviews:'',lat:'',lng:'',image:'',hours:''},\r\n maxDistanceKm:50,\r\n sortBy:'nearest',\r\n preferEmbed:true\r\n };\r\n\r\n \/\/ --- Read embedded config & data ---\r\n function readEmbedConfig(){ try{ const el=document.getElementById('TOPLIST_EMBED_CONFIG'); if(!el) return {}; const txt=el.textContent||el.innerText||''; return txt.trim()? JSON.parse(txt) : {}; }catch{return {}} }\r\n function readEmbedCsv(){ const el=document.getElementById('TOPLIST_EMBED_CSV'); if(!el) return ''; const txt=el.textContent||el.innerText||''; return txt.trim(); }\r\n function readEmbedJson(){ try{ const el=document.getElementById('TOPLIST_EMBED_DATA'); if(!el) return null; const txt=el.textContent||el.innerText||''; return txt.trim()? JSON.parse(txt) : null; }catch{return null} }\r\n\r\n \/\/ Query-string overrides: keep existing WordPress params (e.g., page_id) and add ours\r\n function buildShareUrl(settings){\r\n const url = new URL(location.href);\r\n url.searchParams.set('sheet', settings.sheetLink||'');\r\n const cfgObj = { mapping: settings.mapping, maxDistanceKm: settings.maxDistanceKm, sortBy: settings.sortBy, preferEmbed: false };\r\n url.searchParams.set('cfg', btoa(JSON.stringify(cfgObj)));\r\n return url.toString();\r\n }\r\n function parseUrlOverrides(){ try{ const u=new URL(location.href); const out={}; const sheet=u.searchParams.get('sheet'); if(sheet!=null) out.sheetLink = sheet; const cfg=u.searchParams.get('cfg'); if(cfg){ try{ const json = JSON.parse(atob(decodeURIComponent(cfg))); Object.assign(out, json||{}); }catch{} } return out; }catch{ return {}; } }\r\n\r\n \/\/ LocalStorage helpers\r\n function loadLS(key, initial){ try{ const raw=localStorage.getItem(key); return raw? JSON.parse(raw) : initial; }catch{return initial;} }\r\n function saveLS(){ try{ localStorage.setItem(LS_KEY, JSON.stringify(settings)); }catch{} }\r\n\r\n \/\/ Utils\r\n function toast(msg){ let t=document.querySelector('.toast'); if(!t){ t=document.createElement('div'); t.className='toast'; document.body.appendChild(t);} t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1800); }\r\n const $ = s=>document.querySelector(s); const $$=s=>Array.from(document.querySelectorAll(s));\r\n function safeNum(v, def=0){ const n=parseFloat(String(v??'').replace(',', '.')); return isFinite(n)? n : def; }\r\n function kmDistance(a,b){ if(!a||!b||!isFinite(a.lat)||!isFinite(a.lng)||!isFinite(b.lat)||!isFinite(b.lng)) return Infinity; const toRad=x=>x*Math.PI\/180, R=6371; const dLat=toRad(b.lat-a.lat), dLon=toRad(b.lng-a.lng); const lat1=toRad(a.lat), lat2=toRad(b.lat); const s=Math.sin(dLat\/2)**2 + Math.sin(dLon\/2)**2*Math.cos(lat1)*Math.cos(lat2); const c=2*Math.atan2(Math.sqrt(s),Math.sqrt(1-s)); return +(R*c).toFixed(2); }\r\n function normalizeHeader(str, idx){ const s=(str??'').toString().trim(); return s || `col_${idx+1}`; }\r\n function detectMapping(headers){ const H=headers.map(h=>h.toLowerCase().replace(\/\\s+\/g,'_')); const find=(...c)=>{ const i=H.findIndex(h=>c.includes(h)); return i>=0? headers[i] : ''; }; return { name:find('ten','name','title'), category:find('nhom','category','loai','group'), province:find('province','tinh','t\u1ec9nh','tp','thanh_pho','th\u00e0nh_ph\u1ed1','city'), address:find('dia_chi','address','diachi','location'), phone:find('dien_thoai','phone','sdt','tel'), website:find('website','link','url'), rating:find('rating','danh_gia','sao'), reviews:find('reviews','so_danh_gia','review_count'), lat:find('lat','latitude'), lng:find('lng','longitude','lon'), image:find('image','hinh','img','thumbnail'), hours:find('hours','gio_mo_cua','opening_hours') }; }\r\n function escapeHtml(s){ return String(s??'').replace(\/[&<>\"']\/g, m=>({\"&\":\"&\",\"<\":\"<\",\">\":\">\",\"\\\"\":\""\",\"'\":\"'\"}[m])); }\r\n\r\n \/\/ Generic CSV fetch\/parse (works for any .csv URL, not just Google)\r\n async function fetchCsvUrl(csvUrl){ const res=await fetch(csvUrl,{cache:'no-store',credentials:'omit'}); if(!res.ok) throw new Error(`CSV HTTP ${res.status}`); const text=await res.text(); return parseCsvText(text); }\r\n function parseCsvText(text){ if(window.Papa){ const parsed=Papa.parse(text,{header:true,skipEmptyLines:true}); const rawHeaders=parsed.meta.fields||[]; const headers=rawHeaders.map((h,i)=>normalizeHeader(h,i)); const rows=parsed.data.map(r=>{ const obj={}; headers.forEach(h=>{ obj[h]=r[h]??''; }); return obj; }); return {headers,rows}; } else { const lines=text.trim().split(\/\\r?\\n\/); const headers=lines.shift().split(',').map((h,i)=>normalizeHeader(h,i)); const rows=lines.map(line=>{ const parts=line.split(','); const obj={}; headers.forEach((h,i)=>obj[h]=parts[i]??''); return obj; }); return {headers,rows}; } }\r\n\r\n \/\/ Google link parsing (kept for backward compat)\r\n const RE_EDIT_LINK=\/https?:\\\/\\\/docs\\.google\\.com\\\/spreadsheets\\\/d\\\/([a-zA-Z0-9-_]+)\\\/(?:edit|view)(?:[^#?]*)?(?:[?#].*?)?$\/;\r\n const RE_GID=\/[?#]gid=(\\d+)\/; const RE_PUB_CSV=\/https?:\\\/\\\/docs\\.google\\.com\\\/spreadsheets\\\/d\\\/e\\\/[^\/]+\\\/pub\\?(?:[^#]*?)\\boutput=csv\\b\/i; const RE_GENERIC_CSV=\/\\.csv(\\?|$)\/i;\r\n function parseGoogleSheetLink(link){ const out={spreadsheetId:null,gid:'0',kind:'unknown'}; if(!link) return out; if(RE_PUB_CSV.test(link)) return {spreadsheetId:null,gid:'0',kind:'pubcsv',csvUrl:link}; const m=link.match(RE_EDIT_LINK); if(m){ const spreadsheetId=m[1]; const gm=link.match(RE_GID); const gid=gm? gm[1] : '0'; return {spreadsheetId,gid,kind:'edit'}; } if(RE_GENERIC_CSV.test(link)) return {spreadsheetId:null,gid:'0',kind:'genericcsv',csvUrl:link}; return out; }\r\n function buildGvizJsonpUrl(spreadsheetId,gid='0',cbName){ return `https:\/\/docs.google.com\/spreadsheets\/d\/${spreadsheetId}\/gviz\/tq?tqx=out:json;responseHandler:${cbName}&gid=${gid}`; }\r\n function fetchViaGvizJsonpFromIds({spreadsheetId,gid='0'}){ return new Promise((resolve,reject)=>{ if(!spreadsheetId) return reject(new Error('Thi\u1ebfu spreadsheetId')); const cb='__gviz_cb_'+Math.random().toString(36).slice(2); const cleanup=()=>{ try{ delete window[cb]; }catch{} const el=document.getElementById(cb); if(el) el.remove(); }; window[cb]=(data)=>{ try{ const cols=(data?.table?.cols||[]).map((c,i)=>normalizeHeader(c?.label||c?.id,i)); const rows=(data?.table?.rows||[]).map(r=>{ const obj={}; cols.forEach((h,i)=>{ const cell=r?.c?.[i]; obj[h]=(cell?.v!=null)? cell.v : ''; }); return obj; }); cleanup(); resolve({headers:cols,rows}); }catch(e){ cleanup(); reject(e);} }; const src=buildGvizJsonpUrl(spreadsheetId,gid,cb); const s=document.createElement('script'); s.id=cb; s.src=src; s.onerror=()=>{ cleanup(); reject(new Error('GViz JSONP error')); }; document.head.appendChild(s); }); }\r\n\r\n \/\/ UI mapping\r\n const mapFields=[[\"name\",\"T\u00ean\"],[\"category\",\"Nh\u00f3m\"],[\"province\",\"T\u1ec9nh\/TP\"],[\"address\",\"\u0110\u1ecba ch\u1ec9\"],[\"phone\",\"\u0110i\u1ec7n tho\u1ea1i\"],[\"website\",\"Website\"],[\"rating\",\"Rating (0-5)\"],[\"reviews\",\"S\u1ed1 \u0111\u00e1nh gi\u00e1\"],[\"lat\",\"Lat\"],[\"lng\",\"Lng\"],[\"image\",\"\u1ea2nh (URL)\"],[\"hours\",\"Gi\u1edd m\u1edf c\u1eeda (text)\"]];\r\n function renderMappingSelectors(){ $('#hdrCount').textContent = headers.length + ' c\u1ed9t'; const wrap=$('#mapGrid'); wrap.innerHTML=''; mapFields.forEach(([key,label])=>{ const v=(settings.mapping?.[key]??'')||NONE; const box=document.createElement('div'); box.innerHTML=`<div><label>${label}<\/label><select data-mapkey=\"${key}\" style=\"margin-top:6px\"><option value=\"${NONE}\">(B\u1ecf qua)<\/option>${headers.map((h,idx)=>`<option value=\"${escapeHtml(h)}\" ${v===h?'selected':''}>${escapeHtml(h||('C\u1ed9t '+(idx+1)))}<\/option>`).join('')}<\/select><\/div>`; wrap.appendChild(box); }); $$('#mapGrid select').forEach(sel=>{ sel.addEventListener('change',e=>{ const k=e.target.getAttribute('data-mapkey'); const val=e.target.value===NONE? '' : e.target.value; settings.mapping={...(settings.mapping||{}), [k]:val}; saveLS(); recomputeAndRender(); }); }); }\r\n\r\n \/\/ Data \u2192 Records\r\n function buildRecords(){ const m=settings.mapping||{}; return rows.map((r,i)=>{ const lat=safeNum(r[m.lat]); const lng=safeNum(r[m.lng]); const item={ id:i+1, name:r[m.name]||'(Ch\u01b0a c\u00f3 t\u00ean)', category:r[m.category]||'Kh\u00e1c', province:r[m.province]||'', address:r[m.address]||'', phone:(r[m.phone]||'').toString(), website:r[m.website]||'', rating:safeNum(r[m.rating])||null, reviews:safeNum(r[m.reviews])||null, lat:isFinite(lat)?lat:null, lng:isFinite(lng)?lng:null, image:r[m.image]||'', hours:r[m.hours]||'' }; item.distance=userLoc? kmDistance(userLoc,item) : null; return item; }); }\r\n function getProvinces(mapped){ const set=new Set(mapped.map(x=>(x.province||'').toString().trim()).filter(Boolean)); return ['all', ...Array.from(set).sort()]; }\r\n function filterSort(records){ const q=($('#inpQuery').value||'').trim().toLowerCase(); const province=$('#selProvince').value||'all'; let data=records.filter(x=>{ const matchQ=!q || x.name.toLowerCase().includes(q) || x.address.toLowerCase().includes(q) || (x.category||'').toLowerCase().includes(q); const matchProvince=province==='all' || (x.province||'').toLowerCase()===province.toLowerCase(); const matchD=!userLoc || !isFinite(settings.maxDistanceKm) || !x.distance || x.distance <= settings.maxDistanceKm; return matchQ && matchProvince && matchD; }); if(settings.sortBy==='nearest') data.sort((a,b)=>(a.distance??1e9)-(b.distance??1e9)); else if(settings.sortBy==='rating') data.sort((a,b)=>(b.rating??-1)-(a.rating??-1)); else if(settings.sortBy==='name') data.sort((a,b)=>String(a.name).localeCompare(String(b.name))); return data; }\r\n function renderList(filtered){ const list=$('#list'); const empty=$('#empty'); const btnMore=$('#btnMore'); const slice=filtered.slice(0,listLimit); $('#cntFiltered').textContent=filtered.length; $('#cntVisible').textContent=slice.length; list.innerHTML = slice.map(it=>`<div class=\"card\"><div class=\"content\"><div class=\"row\" style=\"gap:12px;align-items:flex-start\"><div class=\"imgbox\">${it.image? `<img decoding=\"async\" src=\"${escapeHtml(it.image)}\" alt=\"${escapeHtml(it.name)}\">` : `<div class=\"muted\" style=\"display:grid;place-items:center;height:100%;font-size:12px\">No image<\/div>`}<\/div><div style=\"min-width:0;flex:1\"><div class=\"row\" style=\"align-items:flex-start\"><div class=\"title\" title=\"${escapeHtml(it.name)}\" style=\"word-break:break-word\">${escapeHtml(it.name)}<\/div>${it.rating? `<div style=\"margin-left:auto;display:flex;align-items:center;gap:6px\" title=\"${it.rating} \/ 5\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><span style=\"font-weight:500\">${it.rating.toFixed(1)}<\/span>${Number.isFinite(it.reviews)? `<span class=\"muted\" style=\"font-size:12px\">(${it.reviews})<\/span>`:''}<\/div>`:''}<\/div><div class=\"row-wrap\" style=\"gap:8px;margin-top:6px;font-size:13px;color:var(--muted)\"><span class=\"pill\">${escapeHtml(it.category||'Kh\u00e1c')}<\/span>${it.distance!=null && isFinite(it.distance)? `<span>\u2022 ${it.distance} km<\/span>`:''}<\/div><div style=\"margin-top:10px;font-size:14px\"><div class=\"line\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg> <span title=\"${escapeHtml(it.address)}\" style=\"overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">${escapeHtml(it.address)}<\/span><\/div>${it.phone? `<div class=\"line\" style=\"margin-top:6px\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.78.57 2.63a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.45-1.14a2 2 0 0 1 2.11-.45c.85.27 1.73.45 2.63.57A2 2 0 0 1 22 16.92z\"><\/path><\/svg> <a href=\"tel:${encodeURIComponent(it.phone)}\">${escapeHtml(it.phone)}<\/a><\/div>`:''}<\/div>${it.hours? `<div class=\"muted\" style=\"margin-top:8px;font-size:12px\">Gi\u1edd m\u1edf c\u1eeda: ${escapeHtml(it.hours)}<\/div>`:''}<\/div><\/div><\/div><\/div>`).join(''); btnMore.style.display = slice.length < filtered.length ? 'inline-flex' : 'none'; empty.style.display = filtered.length===0 ? 'block' : 'none'; }\r\n function recomputeAndRender(){ const mapped=buildRecords(); const provinces=getProvinces(mapped); const sel=$('#selProvince'); const cur=sel.value||'all'; sel.innerHTML=provinces.map(p=>`<option value=\"${escapeHtml(p)}\">${p==='all'?'T\u1ea5t c\u1ea3':escapeHtml(p)}<\/option>`).join(''); if(provinces.includes(cur)) sel.value=cur; const filtered=filterSort(mapped); listLimit=24; renderList(filtered); }\r\n\r\n \/\/ State\r\n let headers=[]; let rows=[]; let userLoc=null; let listLimit=24;\r\n\r\n \/\/ SETTINGS: DEFAULT + EMBED + LS + URL overrides (URL highest)\r\n const EMBED = readEmbedConfig();\r\n let settings = loadLS(LS_KEY, { ...DEFAULT_SETTINGS, ...EMBED });\r\n const URL_OVR = parseUrlOverrides();\r\n if(Object.keys(URL_OVR).length){ settings = { ...settings, ...URL_OVR, mapping: { ...(settings.mapping||{}), ...(URL_OVR.mapping||{}) } }; saveLS(); }\r\n\r\n \/\/ If preferEmbed \u2192 hide input link row (pure offline)\r\n if(settings.preferEmbed){ \/* keep drawer but hint *\/ }\r\n\r\n \/\/ Events\r\n $('#btnGeolocate').addEventListener('click', ()=>{ if(!navigator.geolocation){ toast('Thi\u1ebft b\u1ecb kh\u00f4ng h\u1ed7 tr\u1ee3 \u0111\u1ecbnh v\u1ecb.'); return; } navigator.geolocation.getCurrentPosition(pos=>{ userLoc={lat:pos.coords.latitude,lng:pos.coords.longitude}; $('#locState').textContent='\u0110\u00e3 b\u1eadt \u0111\u1ecbnh v\u1ecb.'; toast('\u0110\u00e3 l\u1ea5y v\u1ecb tr\u00ed c\u1ee7a b\u1ea1n.'); recomputeAndRender(); }, ()=> toast('Kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed.'), {enableHighAccuracy:true,timeout:8000,maximumAge:0}); });\r\n\r\n $('#btnVoice').addEventListener('click', ()=>{ const SR=window.SpeechRecognition||window.webkitSpeechRecognition; if(!SR){ toast('Thi\u1ebft b\u1ecb kh\u00f4ng h\u1ed7 tr\u1ee3 t\u00ecm ki\u1ebfm gi\u1ecdng n\u00f3i.'); return; } const rec=new SR(); rec.lang='vi-VN'; rec.interimResults=false; rec.maxAlternatives=1; rec.onresult=e=>{ const text=e.results?.[0]?.[0]?.transcript||''; $('#inpQuery').value=text; toast('\u0110\u00e3 nh\u1eadp: '+text); recomputeAndRender(); }; rec.onerror=()=>toast('L\u1ed7i micro.'); rec.start(); });\r\n\r\n $('#inpQuery').addEventListener('input', ()=>recomputeAndRender());\r\n $('#selProvince').addEventListener('change', ()=>recomputeAndRender());\r\n $('#rngDistance').addEventListener('input', e=>{ settings.maxDistanceKm=+e.target.value; $('#lblDistance').textContent=settings.maxDistanceKm; saveLS(); recomputeAndRender(); });\r\n $('#selSort').addEventListener('change', e=>{ settings.sortBy=e.target.value; saveLS(); recomputeAndRender(); });\r\n $('#btnMore').addEventListener('click', ()=>{ listLimit+=24; const mapped=buildRecords(); const filtered=filterSort(mapped); renderList(filtered); });\r\n\r\n $('#btnLoad').addEventListener('click', async()=>{ const link=$('#inpSheetLink').value.trim(); if(!link){ toast('D\u00e1n link .csv ho\u1eb7c Google Sheets.'); return; } settings.sheetLink=link; settings.preferEmbed=false; saveLS(); await loadData(); });\r\n $('#btnClear').addEventListener('click', ()=>{ headers=[]; rows=[]; $('#hdrCount').textContent='0 c\u1ed9t'; $('#mapGrid').innerHTML=''; toast('\u0110\u00e3 xo\u00e1 d\u1eef li\u1ec7u t\u1ea1m.'); recomputeAndRender(); });\r\n $('#btnShare').addEventListener('click', ()=>{ try{ const url = buildShareUrl(settings); navigator.clipboard.writeText(url).then(()=>toast('\u0110\u00e3 copy link c\u1ea5u h\u00ecnh \u2714')); }catch{ toast('Kh\u00f4ng copy \u0111\u01b0\u1ee3c link.'); } });\r\n\r\n \/\/ Data loading priority: URL sheet \u2192 preferEmbed \u2192 embed JSON \u2192 error\r\n async function loadData(){\r\n try{\r\n let result = null;\r\n const info = parseGoogleSheetLink(settings.sheetLink||'');\r\n if(settings.sheetLink){\r\n if(info.kind==='pubcsv' || info.kind==='genericcsv'){ result = await fetchCsvUrl(info.csvUrl || settings.sheetLink); }\r\n else if(info.kind==='edit' && info.spreadsheetId){ result = await fetchViaGvizJsonpFromIds({ spreadsheetId:info.spreadsheetId, gid:info.gid }); }\r\n else if(RE_GENERIC_CSV.test(settings.sheetLink)){ result = await fetchCsvUrl(settings.sheetLink); }\r\n else { throw new Error('Link d\u1eef li\u1ec7u kh\u00f4ng h\u1ee3p l\u1ec7. D\u00f9ng .csv ho\u1eb7c Google Sheets.'); }\r\n }\r\n else if(settings.preferEmbed){\r\n const csv = readEmbedCsv();\r\n if(csv){ result = parseCsvText(csv); }\r\n else {\r\n const js = readEmbedJson();\r\n if(js && Array.isArray(js.headers) && Array.isArray(js.rows)){\r\n result = { headers: js.headers.map((h,i)=>normalizeHeader(h,i)), rows: js.rows.map(r=>{ const o={}; result.headers?.forEach?.((h)=>o[h]=r[h]??''); return o; }) };\r\n }\r\n }\r\n }\r\n\r\n if(!result){ throw new Error('Kh\u00f4ng t\u00ecm th\u1ea5y ngu\u1ed3n d\u1eef li\u1ec7u. H\u00e3y d\u00f9ng CSV nh\u00fang ho\u1eb7c nh\u1eadp link .csv\/Google Sheets.'); }\r\n\r\n headers = result.headers; rows = result.rows;\r\n if(!(settings.mapping?.name) && headers.length){ settings.mapping = { ...(settings.mapping||{}), ...detectMapping(headers) }; saveLS(); }\r\n renderMappingSelectors(); toast('\u0110\u00e3 t\u1ea3i d\u1eef li\u1ec7u.'); recomputeAndRender();\r\n }catch(e){ console.error(e); const msg=String(e?.message||e); if(\/GViz JSONP\/.test(msg)) toast('Kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c d\u1eef li\u1ec7u qua JSONP. H\u00e3y b\u1eadt Viewer \u0111\u00fang gid.'); else if(\/CSV HTTP\/.test(msg)) toast('CSV l\u1ed7i truy c\u1eadp. Ki\u1ec3m tra link .csv.'); else toast(msg); }\r\n }\r\n\r\n \/\/ Init\r\n $('#inpSheetLink').value = settings.sheetLink || '';\r\n $('#rngDistance').value = settings.maxDistanceKm; $('#lblDistance').textContent = settings.maxDistanceKm;\r\n $('#selSort').value = settings.sortBy;\r\n\r\n loadData(); \/\/ lu\u00f4n g\u1ecdi: n\u1ebfu preferEmbed c\u00f3 data \u2192 d\u00f9ng ngay; n\u1ebfu c\u00f3 sheetLink \u2192 d\u00f9ng link\r\n\r\n \/\/ Self-tests\r\n try{ console.assert(safeNum('12,5')===12.5,'safeNum'); const d=kmDistance({lat:0,lng:0},{lat:0,lng:1}); console.assert(d>100&&d<120,'kmDistance'); }catch(e){ console.warn('Self-tests failed', e); }\r\n })();\r\n <\/script>\r\n <div class=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n<\/body>\r\n<\/html>\r\n\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>Toplist \u0110\u1ecba \u0110i\u1ec3m \u2013 WordPress (v3) Toplist \u0110\u1ecba \u0110i\u1ec3m Tin c\u1eady \u2022 Ti\u1ec7n l\u1ee3i C\u00e0i \u0111\u1eb7t C\u00e0i \u0111\u1eb7t ngu\u1ed3n d\u1eef li\u1ec7u Link d\u1eef li\u1ec7u (ch\u1ea5p nh\u1eadn .csv ho\u1eb7c Google Sheets) M\u1eb7c \u0111\u1ecbnh v3 \u0111ang d\u00f9ng CSV nh\u00fang trong file (kh\u00f4ng c\u1ea7n link). T\u1ea3i d\u1eef li\u1ec7u Xo\u00e1 d\u1eef li\u1ec7u Chia s\u1ebb c\u1ea5u h\u00ecnh \u01afu ti\u00ean: CSV […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":11,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Toplist \u0110\u1ecba \u0110i\u1ec3m \u2013 WordPress (v3)<\/title>\r\n <style>\r\n :root{ --ink:#0f172a;--muted:#475569;--bg:#ffffff;--soft:#f1f5f9;--border:#e5e7eb;--brand:#0ea5e9;--brand-dark:#0284c7;--radius:16px;--shadow:0 8px 24px rgba(2,8,23,.08) }\r\n *,*:before,*:after{box-sizing:border-box}\r\n body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}\r\n .container{max-width:1120px;margin:0 auto;padding:16px}\r\n header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}\r\n .row{display:flex;gap:8px;align-items:center}\r\n h1{font-size:20px;margin:0}\r\n .badge{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;color:#0b1220}\r\n button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid var(--border);background:#fff;padding:8px 12px;font-size:14px}\r\n button.icon{width:36px;height:36px;padding:0}\r\n button.primary{background:var(--brand);border-color:var(--brand);color:#fff}\r\n button.primary:hover{background:var(--brand-dark)}\r\n input,select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px}\r\n label{font-size:13px;color:var(--muted)}\r\n .muted{color:var(--muted)}\r\n .grid{display:grid;gap:16px}\r\n .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}\r\n .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}\r\n @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}\r\n .card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}\r\n .card .content{padding:16px}\r\n .pill{border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px}\r\n .sep{height:1px;background:var(--border);margin:16px 0}\r\n .drawer{border:1px solid var(--border);border-radius:16px}\r\n details.drawer>summary{list-style:none;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}\r\n details.drawer[open]>summary{background:var(--soft)}\r\n .row-wrap{display:flex;flex-wrap:wrap;gap:10px}\r\n .imgbox{width:96px;height:96px;border-radius:12px;background:#f3f4f6;overflow:hidden;flex-shrink:0}\r\n .imgbox img{width:100%;height:100%;object-fit:cover}\r\n .title{font-weight:600;line-height:1.2}\r\n .line{display:flex;gap:6px;align-items:flex-start}\r\n .btn-ghost{background:transparent;border-color:transparent}\r\n .toast{position:fixed;right:16px;bottom:16px;background:#0b1220;color:#fff;padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.25s}\r\n .toast.show{opacity:1;transform:none}\r\n .footer{padding:32px 0;text-align:center;font-size:12px;color:var(--muted)}\r\n .hide{display:none!important}\r\n <\/style>\r\n\r\n \r\n <script id=\"TOPLIST_EMBED_CONFIG\" type=\"application\/json\">\r\n {\r\n \"preferEmbed\": true,\r\n \"sheetLink\": \"\", \/\/ c\u00f3 th\u1ec3 \u0111\u1ec3 tr\u1ed1ng khi d\u00f9ng CSV nh\u00fang\r\n \"mapping\": {\r\n \"name\": \"T\u00ean\",\r\n \"category\": \"Nh\u00f3m\",\r\n \"province\": \"T\u1ec9nh\/TP\",\r\n \"address\": \"\u0110\u1ecba ch\u1ec9\",\r\n \"phone\": \"\u0110i\u1ec7n tho\u1ea1i\",\r\n \"website\": \"Website\",\r\n \"rating\": \"Rating\",\r\n \"reviews\": \"S\u1ed1 \u0111\u00e1nh gi\u00e1\",\r\n \"lat\": \"Lat\",\r\n \"lng\": \"Lng\",\r\n \"image\": \"\u1ea2nh\",\r\n \"hours\": \"Gi\u1edd m\u1edf c\u1eeda\"\r\n },\r\n \"maxDistanceKm\": 50,\r\n \"sortBy\": \"nearest\"\r\n }\r\n <\/script>\r\n\r\n \r\n <script id=\"TOPLIST_EMBED_CSV\" type=\"text\/csv\">\r\nT\u00ean,Nh\u00f3m,T\u1ec9nh\/TP,\u0110\u1ecba ch\u1ec9,\u0110i\u1ec7n tho\u1ea1i,Website,Rating,S\u1ed1 \u0111\u00e1nh gi\u00e1,Lat,Lng,\u1ea2nh,Gi\u1edd m\u1edf c\u1eeda\r\nC\u1eeda h\u00e0ng A,V\u1eadt li\u1ec7u,B\u1eafc Giang,29 L\u00fd Th\u00e1i T\u1ed5,0981039377,,4.7,128,21.2725,106.196,https:\/\/picsum.photos\/seed\/a\/200,8:00-20:00\r\nC\u1eeda h\u00e0ng B,Trang tr\u00ed,H\u00e0 N\u1ed9i,12 Hai B\u00e0 Tr\u01b0ng,0900000000,,4.5,88,21.0285,105.8542,https:\/\/picsum.photos\/seed\/b\/200,8:30-21:00\r\n <\/script>\r\n\r\n \r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"container row\" style=\"padding:12px 16px\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\r\n <h1>Toplist \u0110\u1ecba \u0110i\u1ec3m<\/h1>\r\n <span class=\"badge\" style=\"margin-left:8px\">Tin c\u1eady \u2022 Ti\u1ec7n l\u1ee3i<\/span>\r\n <span style=\"margin-left:auto\"><\/span>\r\n <button class=\"icon\" id=\"btnGeolocate\" title=\"L\u1ea5y v\u1ecb tr\u00ed c\u1ee7a t\u00f4i\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v4\"><\/path><path d=\"M12 18v4\"><\/path><path d=\"M4.93 4.93l2.83 2.83\"><\/path><path d=\"M16.24 16.24l2.83 2.83\"><\/path><path d=\"M2 12h4\"><\/path><path d=\"M18 12h4\"><\/path><path d=\"M4.93 19.07l2.83-2.83\"><\/path><path d=\"M16.24 7.76l2.83-2.83\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/button>\r\n <details class=\"drawer\" id=\"settingsDrawer\" style=\"margin-left:8px\">\r\n <summary>\r\n <span class=\"row\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .69.28 1.32.73 1.77.45.45 1.08.73 1.77.73H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"><\/path><\/svg> C\u00e0i \u0111\u1eb7t<\/span>\r\n <\/summary>\r\n <div class=\"content\" style=\"padding:16px\">\r\n <h3 style=\"margin:0 0 8px 0\">C\u00e0i \u0111\u1eb7t ngu\u1ed3n d\u1eef li\u1ec7u<\/h3>\r\n <div class=\"grid grid-2\">\r\n <div>\r\n <label>Link d\u1eef li\u1ec7u (ch\u1ea5p nh\u1eadn .csv ho\u1eb7c Google Sheets)<\/label>\r\n <input id=\"inpSheetLink\" placeholder=\"D\u00e1n link .csv ho\u1eb7c \/d\/{ID}\/edit?gid=... ho\u1eb7c \/d\/e\/...\/pub?output=csv\" \/>\r\n <div class=\"muted\" style=\"font-size:12px;margin-top:6px\">M\u1eb7c \u0111\u1ecbnh v3 \u0111ang d\u00f9ng CSV nh\u00fang trong file (kh\u00f4ng c\u1ea7n link).<\/div>\r\n <div class=\"row\" style=\"margin-top:10px;gap:10px\">\r\n <button class=\"primary\" id=\"btnLoad\">T\u1ea3i d\u1eef li\u1ec7u<\/button>\r\n <button id=\"btnClear\">Xo\u00e1 d\u1eef li\u1ec7u<\/button>\r\n <button id=\"btnShare\">Chia s\u1ebb c\u1ea5u h\u00ecnh<\/button>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:10px;gap:8px;background:#fff7ed;border:1px solid #fed7aa;padding:12px;border-radius:12px;color:#9a3412\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"><\/path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line><\/svg>\r\n <div style=\"font-size:13px\">\r\n <b>\u01afu ti\u00ean:<\/b> CSV nh\u00fang ho\u1eb7c link .csv (media WordPress). V\u1edbi Google Sheets, d\u00f9ng \"Publish to the web \u2192 CSV\" ho\u1eb7c share Viewer \u0111\u00fang gid.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"row\" style=\"justify-content:space-between\"><h3 style=\"margin:0\">\u00c1nh x\u1ea1 c\u1ed9t<\/h3><span class=\"pill\" id=\"hdrCount\">0 c\u1ed9t<\/span><\/div>\r\n <div class=\"grid grid-2\" id=\"mapGrid\" style=\"margin-top:8px\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sep\"><\/div>\r\n <div class=\"grid grid-2\">\r\n <div>\r\n <label>Kho\u1ea3ng c\u00e1ch t\u1ed1i \u0111a (km)<\/label>\r\n <div class=\"row\" style=\"gap:10px;margin-top:8px\">\r\n <input type=\"range\" id=\"rngDistance\" min=\"1\" max=\"100\" step=\"1\" value=\"50\" style=\"flex:1\" \/>\r\n <span id=\"lblDistance\" style=\"width:40px;text-align:right\">50<\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label>S\u1eafp x\u1ebfp<\/label>\r\n <select id=\"selSort\" style=\"margin-top:8px\">\r\n <option value=\"nearest\">G\u1ea7n nh\u1ea5t<\/option>\r\n <option value=\"rating\">\u0110\u00e1nh gi\u00e1<\/option>\r\n <option value=\"name\">T\u00ean<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:8px\"><span class=\"pill\">C\u1ea5u h\u00ecnh nh\u00fang + t\u1ef1 \u0111\u1ed9ng l\u01b0u tr\u00ecnh duy\u1ec7t<\/span><\/div>\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\" style=\"padding:16px\">\r\n <div class=\"row-wrap\" style=\"gap:12px\">\r\n <div style=\"position:relative;flex:1;min-width:240px\">\r\n <svg style=\"position:absolute;left:10px;top:50%;transform:translateY(-50%)\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><path d=\"m21 21-4.3-4.3\"><\/path><\/svg>\r\n <input id=\"inpQuery\" placeholder=\"T\u00ecm theo t\u00ean \/ \u0111\u1ecba ch\u1ec9 \/ nh\u00f3m...\" style=\"padding-left:32px\" \/>\r\n <button class=\"btn-ghost\" id=\"btnVoice\" title=\"T\u00ecm b\u1eb1ng gi\u1ecdng n\u00f3i\" style=\"position:absolute;right:0;top:50%;transform:translateY(-50%)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 1v11\"><\/path><rect x=\"5\" y=\"8\" width=\"14\" height=\"7\" rx=\"7\"><\/rect><path d=\"M8 21h8\"><\/path><path d=\"M12 17v4\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"row\" style=\"gap:8px\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 3H2\"><\/path><path d=\"M22 7H2\"><\/path><path d=\"M22 11H2\"><\/path><path d=\"M22 15H2\"><\/path><path d=\"M22 19H2\"><\/path><\/svg>\r\n <select id=\"selProvince\" style=\"width:220px\">\r\n <option value=\"all\">T\u1ea5t c\u1ea3<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"muted\" style=\"margin-top:8px;font-size:13px\">Hi\u1ec3n th\u1ecb <b id=\"cntVisible\">0<\/b>\/<b id=\"cntFiltered\">0<\/b> \u0111\u1ecba \u0111i\u1ec3m. <span id=\"locState\">Ch\u01b0a b\u1eadt \u0111\u1ecbnh v\u1ecb.<\/span><\/div>\r\n\r\n <div id=\"list\" class=\"grid grid-3\" style=\"margin-top:16px\"><\/div>\r\n\r\n <div style=\"display:flex;justify-content:center;margin-top:24px\"><button id=\"btnMore\" style=\"display:none\">T\u1ea3i th\u00eam<\/button><\/div>\r\n\r\n <div id=\"empty\" class=\"muted\" style=\"text-align:center;margin-top:48px;display:none\">Kh\u00f4ng c\u00f3 \u0111\u1ecba \u0111i\u1ec3m ph\u00f9 h\u1ee3p. H\u00e3y th\u1eed \u0111i\u1ec1u ch\u1ec9nh b\u1ed9 l\u1ecdc ho\u1eb7c b\u00e1n k\u00ednh kho\u1ea3ng c\u00e1ch.<\/div>\r\n <\/main>\r\n\r\n <div class=\"footer\">Made for Vietnam \u2022 T\u1ed1i \u01b0u UX: t\u00ecm ki\u1ebfm nhanh, \u0111\u1ecbnh v\u1ecb, ch\u1ec9 \u0111\u01b0\u1eddng, g\u1ecdi \u0111i\u1ec7n.<\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\r\n <script>\r\n (function(){\r\n const LS_KEY = 'toplist_settings_v5';\r\n const NONE = '__none__';\r\n\r\n const DEFAULT_SETTINGS = {\r\n sheetLink:'',\r\n mapping:{name:'',category:'',province:'',address:'',phone:'',website:'',rating:'',reviews:'',lat:'',lng:'',image:'',hours:''},\r\n maxDistanceKm:50,\r\n sortBy:'nearest',\r\n preferEmbed:true\r\n };\r\n\r\n \/\/ --- Read embedded config & data ---\r\n function readEmbedConfig(){ try{ const el=document.getElementById('TOPLIST_EMBED_CONFIG'); if(!el) return {}; const txt=el.textContent||el.innerText||''; return txt.trim()? JSON.parse(txt) : {}; }catch{return {}} }\r\n function readEmbedCsv(){ const el=document.getElementById('TOPLIST_EMBED_CSV'); if(!el) return ''; const txt=el.textContent||el.innerText||''; return txt.trim(); }\r\n function readEmbedJson(){ try{ const el=document.getElementById('TOPLIST_EMBED_DATA'); if(!el) return null; const txt=el.textContent||el.innerText||''; return txt.trim()? JSON.parse(txt) : null; }catch{return null} }\r\n\r\n \/\/ Query-string overrides: keep existing WordPress params (e.g., page_id) and add ours\r\n function buildShareUrl(settings){\r\n const url = new URL(location.href);\r\n url.searchParams.set('sheet', settings.sheetLink||'');\r\n const cfgObj = { mapping: settings.mapping, maxDistanceKm: settings.maxDistanceKm, sortBy: settings.sortBy, preferEmbed: false };\r\n url.searchParams.set('cfg', btoa(JSON.stringify(cfgObj)));\r\n return url.toString();\r\n }\r\n function parseUrlOverrides(){ try{ const u=new URL(location.href); const out={}; const sheet=u.searchParams.get('sheet'); if(sheet!=null) out.sheetLink = sheet; const cfg=u.searchParams.get('cfg'); if(cfg){ try{ const json = JSON.parse(atob(decodeURIComponent(cfg))); Object.assign(out, json||{}); }catch{} } return out; }catch{ return {}; } }\r\n\r\n \/\/ LocalStorage helpers\r\n function loadLS(key, initial){ try{ const raw=localStorage.getItem(key); return raw? JSON.parse(raw) : initial; }catch{return initial;} }\r\n function saveLS(){ try{ localStorage.setItem(LS_KEY, JSON.stringify(settings)); }catch{} }\r\n\r\n \/\/ Utils\r\n function toast(msg){ let t=document.querySelector('.toast'); if(!t){ t=document.createElement('div'); t.className='toast'; document.body.appendChild(t);} t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1800); }\r\n const $ = s=>document.querySelector(s); const $$=s=>Array.from(document.querySelectorAll(s));\r\n function safeNum(v, def=0){ const n=parseFloat(String(v??'').replace(',', '.')); return isFinite(n)? n : def; }\r\n function kmDistance(a,b){ if(!a||!b||!isFinite(a.lat)||!isFinite(a.lng)||!isFinite(b.lat)||!isFinite(b.lng)) return Infinity; const toRad=x=>x*Math.PI\/180, R=6371; const dLat=toRad(b.lat-a.lat), dLon=toRad(b.lng-a.lng); const lat1=toRad(a.lat), lat2=toRad(b.lat); const s=Math.sin(dLat\/2)**2 + Math.sin(dLon\/2)**2*Math.cos(lat1)*Math.cos(lat2); const c=2*Math.atan2(Math.sqrt(s),Math.sqrt(1-s)); return +(R*c).toFixed(2); }\r\n function normalizeHeader(str, idx){ const s=(str??'').toString().trim(); return s || `col_${idx+1}`; }\r\n function detectMapping(headers){ const H=headers.map(h=>h.toLowerCase().replace(\/\\s+\/g,'_')); const find=(...c)=>{ const i=H.findIndex(h=>c.includes(h)); return i>=0? headers[i] : ''; }; return { name:find('ten','name','title'), category:find('nhom','category','loai','group'), province:find('province','tinh','t\u1ec9nh','tp','thanh_pho','th\u00e0nh_ph\u1ed1','city'), address:find('dia_chi','address','diachi','location'), phone:find('dien_thoai','phone','sdt','tel'), website:find('website','link','url'), rating:find('rating','danh_gia','sao'), reviews:find('reviews','so_danh_gia','review_count'), lat:find('lat','latitude'), lng:find('lng','longitude','lon'), image:find('image','hinh','img','thumbnail'), hours:find('hours','gio_mo_cua','opening_hours') }; }\r\n function escapeHtml(s){ return String(s??'').replace(\/[&<>\"']\/g, m=>({\"&\":\"&\",\"<\":\"<\",\">\":\">\",\"\\\"\":\""\",\"'\":\"'\"}[m])); }\r\n\r\n \/\/ Generic CSV fetch\/parse (works for any .csv URL, not just Google)\r\n async function fetchCsvUrl(csvUrl){ const res=await fetch(csvUrl,{cache:'no-store',credentials:'omit'}); if(!res.ok) throw new Error(`CSV HTTP ${res.status}`); const text=await res.text(); return parseCsvText(text); }\r\n function parseCsvText(text){ if(window.Papa){ const parsed=Papa.parse(text,{header:true,skipEmptyLines:true}); const rawHeaders=parsed.meta.fields||[]; const headers=rawHeaders.map((h,i)=>normalizeHeader(h,i)); const rows=parsed.data.map(r=>{ const obj={}; headers.forEach(h=>{ obj[h]=r[h]??''; }); return obj; }); return {headers,rows}; } else { const lines=text.trim().split(\/\\r?\\n\/); const headers=lines.shift().split(',').map((h,i)=>normalizeHeader(h,i)); const rows=lines.map(line=>{ const parts=line.split(','); const obj={}; headers.forEach((h,i)=>obj[h]=parts[i]??''); return obj; }); return {headers,rows}; } }\r\n\r\n \/\/ Google link parsing (kept for backward compat)\r\n const RE_EDIT_LINK=\/https?:\\\/\\\/docs\\.google\\.com\\\/spreadsheets\\\/d\\\/([a-zA-Z0-9-_]+)\\\/(?:edit|view)(?:[^#?]*)?(?:[?#].*?)?$\/;\r\n const RE_GID=\/[?#]gid=(\\d+)\/; const RE_PUB_CSV=\/https?:\\\/\\\/docs\\.google\\.com\\\/spreadsheets\\\/d\\\/e\\\/[^\/]+\\\/pub\\?(?:[^#]*?)\\boutput=csv\\b\/i; const RE_GENERIC_CSV=\/\\.csv(\\?|$)\/i;\r\n function parseGoogleSheetLink(link){ const out={spreadsheetId:null,gid:'0',kind:'unknown'}; if(!link) return out; if(RE_PUB_CSV.test(link)) return {spreadsheetId:null,gid:'0',kind:'pubcsv',csvUrl:link}; const m=link.match(RE_EDIT_LINK); if(m){ const spreadsheetId=m[1]; const gm=link.match(RE_GID); const gid=gm? gm[1] : '0'; return {spreadsheetId,gid,kind:'edit'}; } if(RE_GENERIC_CSV.test(link)) return {spreadsheetId:null,gid:'0',kind:'genericcsv',csvUrl:link}; return out; }\r\n function buildGvizJsonpUrl(spreadsheetId,gid='0',cbName){ return `https:\/\/docs.google.com\/spreadsheets\/d\/${spreadsheetId}\/gviz\/tq?tqx=out:json;responseHandler:${cbName}&gid=${gid}`; }\r\n function fetchViaGvizJsonpFromIds({spreadsheetId,gid='0'}){ return new Promise((resolve,reject)=>{ if(!spreadsheetId) return reject(new Error('Thi\u1ebfu spreadsheetId')); const cb='__gviz_cb_'+Math.random().toString(36).slice(2); const cleanup=()=>{ try{ delete window[cb]; }catch{} const el=document.getElementById(cb); if(el) el.remove(); }; window[cb]=(data)=>{ try{ const cols=(data?.table?.cols||[]).map((c,i)=>normalizeHeader(c?.label||c?.id,i)); const rows=(data?.table?.rows||[]).map(r=>{ const obj={}; cols.forEach((h,i)=>{ const cell=r?.c?.[i]; obj[h]=(cell?.v!=null)? cell.v : ''; }); return obj; }); cleanup(); resolve({headers:cols,rows}); }catch(e){ cleanup(); reject(e);} }; const src=buildGvizJsonpUrl(spreadsheetId,gid,cb); const s=document.createElement('script'); s.id=cb; s.src=src; s.onerror=()=>{ cleanup(); reject(new Error('GViz JSONP error')); }; document.head.appendChild(s); }); }\r\n\r\n \/\/ UI mapping\r\n const mapFields=[[\"name\",\"T\u00ean\"],[\"category\",\"Nh\u00f3m\"],[\"province\",\"T\u1ec9nh\/TP\"],[\"address\",\"\u0110\u1ecba ch\u1ec9\"],[\"phone\",\"\u0110i\u1ec7n tho\u1ea1i\"],[\"website\",\"Website\"],[\"rating\",\"Rating (0-5)\"],[\"reviews\",\"S\u1ed1 \u0111\u00e1nh gi\u00e1\"],[\"lat\",\"Lat\"],[\"lng\",\"Lng\"],[\"image\",\"\u1ea2nh (URL)\"],[\"hours\",\"Gi\u1edd m\u1edf c\u1eeda (text)\"]];\r\n function renderMappingSelectors(){ $('#hdrCount').textContent = headers.length + ' c\u1ed9t'; const wrap=$('#mapGrid'); wrap.innerHTML=''; mapFields.forEach(([key,label])=>{ const v=(settings.mapping?.[key]??'')||NONE; const box=document.createElement('div'); box.innerHTML=`<div><label>${label}<\/label><select data-mapkey=\"${key}\" style=\"margin-top:6px\"><option value=\"${NONE}\">(B\u1ecf qua)<\/option>${headers.map((h,idx)=>`<option value=\"${escapeHtml(h)}\" ${v===h?'selected':''}>${escapeHtml(h||('C\u1ed9t '+(idx+1)))}<\/option>`).join('')}<\/select><\/div>`; wrap.appendChild(box); }); $$('#mapGrid select').forEach(sel=>{ sel.addEventListener('change',e=>{ const k=e.target.getAttribute('data-mapkey'); const val=e.target.value===NONE? '' : e.target.value; settings.mapping={...(settings.mapping||{}), [k]:val}; saveLS(); recomputeAndRender(); }); }); }\r\n\r\n \/\/ Data \u2192 Records\r\n function buildRecords(){ const m=settings.mapping||{}; return rows.map((r,i)=>{ const lat=safeNum(r[m.lat]); const lng=safeNum(r[m.lng]); const item={ id:i+1, name:r[m.name]||'(Ch\u01b0a c\u00f3 t\u00ean)', category:r[m.category]||'Kh\u00e1c', province:r[m.province]||'', address:r[m.address]||'', phone:(r[m.phone]||'').toString(), website:r[m.website]||'', rating:safeNum(r[m.rating])||null, reviews:safeNum(r[m.reviews])||null, lat:isFinite(lat)?lat:null, lng:isFinite(lng)?lng:null, image:r[m.image]||'', hours:r[m.hours]||'' }; item.distance=userLoc? kmDistance(userLoc,item) : null; return item; }); }\r\n function getProvinces(mapped){ const set=new Set(mapped.map(x=>(x.province||'').toString().trim()).filter(Boolean)); return ['all', ...Array.from(set).sort()]; }\r\n function filterSort(records){ const q=($('#inpQuery').value||'').trim().toLowerCase(); const province=$('#selProvince').value||'all'; let data=records.filter(x=>{ const matchQ=!q || x.name.toLowerCase().includes(q) || x.address.toLowerCase().includes(q) || (x.category||'').toLowerCase().includes(q); const matchProvince=province==='all' || (x.province||'').toLowerCase()===province.toLowerCase(); const matchD=!userLoc || !isFinite(settings.maxDistanceKm) || !x.distance || x.distance <= settings.maxDistanceKm; return matchQ && matchProvince && matchD; }); if(settings.sortBy==='nearest') data.sort((a,b)=>(a.distance??1e9)-(b.distance??1e9)); else if(settings.sortBy==='rating') data.sort((a,b)=>(b.rating??-1)-(a.rating??-1)); else if(settings.sortBy==='name') data.sort((a,b)=>String(a.name).localeCompare(String(b.name))); return data; }\r\n function renderList(filtered){ const list=$('#list'); const empty=$('#empty'); const btnMore=$('#btnMore'); const slice=filtered.slice(0,listLimit); $('#cntFiltered').textContent=filtered.length; $('#cntVisible').textContent=slice.length; list.innerHTML = slice.map(it=>`<div class=\"card\"><div class=\"content\"><div class=\"row\" style=\"gap:12px;align-items:flex-start\"><div class=\"imgbox\">${it.image? `<img decoding=\"async\" src=\"${escapeHtml(it.image)}\" alt=\"${escapeHtml(it.name)}\">` : `<div class=\"muted\" style=\"display:grid;place-items:center;height:100%;font-size:12px\">No image<\/div>`}<\/div><div style=\"min-width:0;flex:1\"><div class=\"row\" style=\"align-items:flex-start\"><div class=\"title\" title=\"${escapeHtml(it.name)}\" style=\"word-break:break-word\">${escapeHtml(it.name)}<\/div>${it.rating? `<div style=\"margin-left:auto;display:flex;align-items:center;gap:6px\" title=\"${it.rating} \/ 5\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/svg><span style=\"font-weight:500\">${it.rating.toFixed(1)}<\/span>${Number.isFinite(it.reviews)? `<span class=\"muted\" style=\"font-size:12px\">(${it.reviews})<\/span>`:''}<\/div>`:''}<\/div><div class=\"row-wrap\" style=\"gap:8px;margin-top:6px;font-size:13px;color:var(--muted)\"><span class=\"pill\">${escapeHtml(it.category||'Kh\u00e1c')}<\/span>${it.distance!=null && isFinite(it.distance)? `<span>\u2022 ${it.distance} km<\/span>`:''}<\/div><div style=\"margin-top:10px;font-size:14px\"><div class=\"line\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0Z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg> <span title=\"${escapeHtml(it.address)}\" style=\"overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">${escapeHtml(it.address)}<\/span><\/div>${it.phone? `<div class=\"line\" style=\"margin-top:6px\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.78.57 2.63a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.45-1.14a2 2 0 0 1 2.11-.45c.85.27 1.73.45 2.63.57A2 2 0 0 1 22 16.92z\"><\/path><\/svg> <a href=\"tel:${encodeURIComponent(it.phone)}\">${escapeHtml(it.phone)}<\/a><\/div>`:''}<\/div>${it.hours? `<div class=\"muted\" style=\"margin-top:8px;font-size:12px\">Gi\u1edd m\u1edf c\u1eeda: ${escapeHtml(it.hours)}<\/div>`:''}<\/div><\/div><\/div><\/div>`).join(''); btnMore.style.display = slice.length < filtered.length ? 'inline-flex' : 'none'; empty.style.display = filtered.length===0 ? 'block' : 'none'; }\r\n function recomputeAndRender(){ const mapped=buildRecords(); const provinces=getProvinces(mapped); const sel=$('#selProvince'); const cur=sel.value||'all'; sel.innerHTML=provinces.map(p=>`<option value=\"${escapeHtml(p)}\">${p==='all'?'T\u1ea5t c\u1ea3':escapeHtml(p)}<\/option>`).join(''); if(provinces.includes(cur)) sel.value=cur; const filtered=filterSort(mapped); listLimit=24; renderList(filtered); }\r\n\r\n \/\/ State\r\n let headers=[]; let rows=[]; let userLoc=null; let listLimit=24;\r\n\r\n \/\/ SETTINGS: DEFAULT + EMBED + LS + URL overrides (URL highest)\r\n const EMBED = readEmbedConfig();\r\n let settings = loadLS(LS_KEY, { ...DEFAULT_SETTINGS, ...EMBED });\r\n const URL_OVR = parseUrlOverrides();\r\n if(Object.keys(URL_OVR).length){ settings = { ...settings, ...URL_OVR, mapping: { ...(settings.mapping||{}), ...(URL_OVR.mapping||{}) } }; saveLS(); }\r\n\r\n \/\/ If preferEmbed \u2192 hide input link row (pure offline)\r\n if(settings.preferEmbed){ \/* keep drawer but hint *\/ }\r\n\r\n \/\/ Events\r\n $('#btnGeolocate').addEventListener('click', ()=>{ if(!navigator.geolocation){ toast('Thi\u1ebft b\u1ecb kh\u00f4ng h\u1ed7 tr\u1ee3 \u0111\u1ecbnh v\u1ecb.'); return; } navigator.geolocation.getCurrentPosition(pos=>{ userLoc={lat:pos.coords.latitude,lng:pos.coords.longitude}; $('#locState').textContent='\u0110\u00e3 b\u1eadt \u0111\u1ecbnh v\u1ecb.'; toast('\u0110\u00e3 l\u1ea5y v\u1ecb tr\u00ed c\u1ee7a b\u1ea1n.'); recomputeAndRender(); }, ()=> toast('Kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed.'), {enableHighAccuracy:true,timeout:8000,maximumAge:0}); });\r\n\r\n $('#btnVoice').addEventListener('click', ()=>{ const SR=window.SpeechRecognition||window.webkitSpeechRecognition; if(!SR){ toast('Thi\u1ebft b\u1ecb kh\u00f4ng h\u1ed7 tr\u1ee3 t\u00ecm ki\u1ebfm gi\u1ecdng n\u00f3i.'); return; } const rec=new SR(); rec.lang='vi-VN'; rec.interimResults=false; rec.maxAlternatives=1; rec.onresult=e=>{ const text=e.results?.[0]?.[0]?.transcript||''; $('#inpQuery').value=text; toast('\u0110\u00e3 nh\u1eadp: '+text); recomputeAndRender(); }; rec.onerror=()=>toast('L\u1ed7i micro.'); rec.start(); });\r\n\r\n $('#inpQuery').addEventListener('input', ()=>recomputeAndRender());\r\n $('#selProvince').addEventListener('change', ()=>recomputeAndRender());\r\n $('#rngDistance').addEventListener('input', e=>{ settings.maxDistanceKm=+e.target.value; $('#lblDistance').textContent=settings.maxDistanceKm; saveLS(); recomputeAndRender(); });\r\n $('#selSort').addEventListener('change', e=>{ settings.sortBy=e.target.value; saveLS(); recomputeAndRender(); });\r\n $('#btnMore').addEventListener('click', ()=>{ listLimit+=24; const mapped=buildRecords(); const filtered=filterSort(mapped); renderList(filtered); });\r\n\r\n $('#btnLoad').addEventListener('click', async()=>{ const link=$('#inpSheetLink').value.trim(); if(!link){ toast('D\u00e1n link .csv ho\u1eb7c Google Sheets.'); return; } settings.sheetLink=link; settings.preferEmbed=false; saveLS(); await loadData(); });\r\n $('#btnClear').addEventListener('click', ()=>{ headers=[]; rows=[]; $('#hdrCount').textContent='0 c\u1ed9t'; $('#mapGrid').innerHTML=''; toast('\u0110\u00e3 xo\u00e1 d\u1eef li\u1ec7u t\u1ea1m.'); recomputeAndRender(); });\r\n $('#btnShare').addEventListener('click', ()=>{ try{ const url = buildShareUrl(settings); navigator.clipboard.writeText(url).then(()=>toast('\u0110\u00e3 copy link c\u1ea5u h\u00ecnh \u2714')); }catch{ toast('Kh\u00f4ng copy \u0111\u01b0\u1ee3c link.'); } });\r\n\r\n \/\/ Data loading priority: URL sheet \u2192 preferEmbed \u2192 embed JSON \u2192 error\r\n async function loadData(){\r\n try{\r\n let result = null;\r\n const info = parseGoogleSheetLink(settings.sheetLink||'');\r\n if(settings.sheetLink){\r\n if(info.kind==='pubcsv' || info.kind==='genericcsv'){ result = await fetchCsvUrl(info.csvUrl || settings.sheetLink); }\r\n else if(info.kind==='edit' && info.spreadsheetId){ result = await fetchViaGvizJsonpFromIds({ spreadsheetId:info.spreadsheetId, gid:info.gid }); }\r\n else if(RE_GENERIC_CSV.test(settings.sheetLink)){ result = await fetchCsvUrl(settings.sheetLink); }\r\n else { throw new Error('Link d\u1eef li\u1ec7u kh\u00f4ng h\u1ee3p l\u1ec7. D\u00f9ng .csv ho\u1eb7c Google Sheets.'); }\r\n }\r\n else if(settings.preferEmbed){\r\n const csv = readEmbedCsv();\r\n if(csv){ result = parseCsvText(csv); }\r\n else {\r\n const js = readEmbedJson();\r\n if(js && Array.isArray(js.headers) && Array.isArray(js.rows)){\r\n result = { headers: js.headers.map((h,i)=>normalizeHeader(h,i)), rows: js.rows.map(r=>{ const o={}; result.headers?.forEach?.((h)=>o[h]=r[h]??''); return o; }) };\r\n }\r\n }\r\n }\r\n\r\n if(!result){ throw new Error('Kh\u00f4ng t\u00ecm th\u1ea5y ngu\u1ed3n d\u1eef li\u1ec7u. H\u00e3y d\u00f9ng CSV nh\u00fang ho\u1eb7c nh\u1eadp link .csv\/Google Sheets.'); }\r\n\r\n headers = result.headers; rows = result.rows;\r\n if(!(settings.mapping?.name) && headers.length){ settings.mapping = { ...(settings.mapping||{}), ...detectMapping(headers) }; saveLS(); }\r\n renderMappingSelectors(); toast('\u0110\u00e3 t\u1ea3i d\u1eef li\u1ec7u.'); recomputeAndRender();\r\n }catch(e){ console.error(e); const msg=String(e?.message||e); if(\/GViz JSONP\/.test(msg)) toast('Kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c d\u1eef li\u1ec7u qua JSONP. H\u00e3y b\u1eadt Viewer \u0111\u00fang gid.'); else if(\/CSV HTTP\/.test(msg)) toast('CSV l\u1ed7i truy c\u1eadp. Ki\u1ec3m tra link .csv.'); else toast(msg); }\r\n }\r\n\r\n \/\/ Init\r\n $('#inpSheetLink').value = settings.sheetLink || '';\r\n $('#rngDistance').value = settings.maxDistanceKm; $('#lblDistance').textContent = settings.maxDistanceKm;\r\n $('#selSort').value = settings.sortBy;\r\n\r\n loadData(); \/\/ lu\u00f4n g\u1ecdi: n\u1ebfu preferEmbed c\u00f3 data \u2192 d\u00f9ng ngay; n\u1ebfu c\u00f3 sheetLink \u2192 d\u00f9ng link\r\n\r\n \/\/ Self-tests\r\n try{ console.assert(safeNum('12,5')===12.5,'safeNum'); const d=kmDistance({lat:0,lng:0},{lat:0,lng:1}); console.assert(d>100&&d<120,'kmDistance'); }catch(e){ console.warn('Self-tests failed', e); }\r\n })();\r\n <\/script>\r\n <div class=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n<\/body>\r\n<\/html>\r\n\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>Toplist \u0110\u1ecba \u0110i\u1ec3m \u2013 WordPress (v3) Toplist \u0110\u1ecba \u0110i\u1ec3m Tin c\u1eady \u2022 Ti\u1ec7n l\u1ee3i C\u00e0i \u0111\u1eb7t C\u00e0i \u0111\u1eb7t ngu\u1ed3n d\u1eef li\u1ec7u Link d\u1eef li\u1ec7u (ch\u1ea5p nh\u1eadn .csv ho\u1eb7c Google Sheets) M\u1eb7c \u0111\u1ecbnh v3 \u0111ang d\u00f9ng CSV nh\u00fang trong file (kh\u00f4ng c\u1ea7n link). T\u1ea3i d\u1eef li\u1ec7u Xo\u00e1 d\u1eef li\u1ec7u Chia s\u1ebb c\u1ea5u h\u00ecnh \u01afu ti\u00ean: CSV […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":11,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/timdiadiem.online\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/timdiadiem.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}