fix(maps): marker hover no longer teleports to (0, 0)

Mapbox GL JS writes `transform: translate(Xpx, Ypx)` on the DOM
element passed to `new Marker({ element })`. Any code that does
`el.style.transform = 'scale(...)'` on that same element CLOBBERS
the translate and the marker snaps to the map origin (top-left).

Five map components were doing exactly this in their hover listeners:
- components/neighborhood/neighborhood-poi-map.tsx
- components/du-an/project-map.tsx
- components/khu-cong-nghiep/park-map.tsx
- components/charts/district-heatmap.tsx
- components/valuation/comparables-map.tsx

Fix: wrap the visible marker chrome in an inner <div> and apply the
hover scale to that wrapper. The outer element becomes a thin sizing
shell that Mapbox can keep positioning untouched. Also set
`pointer-events: none` on the inner where the wrapper already has
an interactive role so clicks still bubble to the setPopup-bound
outer element.

Verified on /listings/[id]: POI marker no longer moves on hover,
popup still opens on click with the Phase-C close button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/neighborhood/neighborhood-poi-map.tsx

@@ -122,11 +122,20 @@ export function NeighborhoodPOIMap({
     visiblePois.forEach((poi) => {
       const config = POI_CATEGORY_CONFIG[poi.category];
 
+      // Mapbox Marker writes its own `transform: translate(Xpx, Ypx)…` on
+      // the element it's given. If we mutate `el.style.transform` (e.g. to
+      // scale on hover), it clobbers the translate and the marker snaps to
+      // (0, 0). Wrap the visible circle in an INNER div and scale that
+      // instead, leaving Mapbox's outer transform untouched.
       const el = document.createElement('div');
       el.className = 'poi-marker';
-      el.style.cssText = `
-        width: 32px;
-        height: 32px;
+      el.style.cssText = `width: 32px; height: 32px; cursor: pointer;`;
+      el.title = `${poi.name} (${config.label})`;
+
+      const inner = document.createElement('div');
+      inner.style.cssText = `
+        width: 100%;
+        height: 100%;
         border-radius: 50%;
         background: ${config.color};
         border: 2px solid white;
@@ -134,22 +143,18 @@ export function NeighborhoodPOIMap({
         display: flex;
         align-items: center;
         justify-content: center;
-        cursor: pointer;
         transition: transform 0.15s;
+        transform: scale(1);
+        pointer-events: none;
       `;
-      el.innerHTML = POI_MARKER_SVG[poi.category];
-      el.title = `${poi.name} (${config.label})`;
-      // Inner SVG would otherwise swallow the click before Mapbox's marker
-      // handler sees it — mark it as passthrough so pointer events hit the
-      // wrapping .poi-marker div that Mapbox bound setPopup to.
-      const innerSvg = el.querySelector('svg');
-      if (innerSvg) innerSvg.style.pointerEvents = 'none';
+      inner.innerHTML = POI_MARKER_SVG[poi.category];
+      el.appendChild(inner);
 
       el.addEventListener('mouseenter', () => {
-        el.style.transform = 'scale(1.3)';
+        inner.style.transform = 'scale(1.3)';
       });
       el.addEventListener('mouseleave', () => {
-        el.style.transform = 'scale(1)';
+        inner.style.transform = 'scale(1)';
       });
 
       const popup = new mapboxgl.Popup({ offset: 20, closeButton: true, closeOnClick: true })