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/charts/district-heatmap.tsx

@@ -160,24 +160,32 @@ export function DistrictHeatmap({ data, city, className, onDistrictClick }: Dist
       const ratio = point.avgPriceM2 / maxPrice;
       const size = 36 + ratio * 28; // 36px to 64px
 
+      // Mapbox writes `transform: translate(...)` on the marker element;
+      // hover-scaling the outer element clobbers it. Scale an inner div
+      // instead.
       const el = document.createElement('button');
-      el.style.cssText = `
-        width: ${size}px; height: ${size}px;
+      el.style.cssText = `width: ${size}px; height: ${size}px; padding: 0; border: none; background: transparent; cursor: pointer;`;
+      const inner = document.createElement('div');
+      inner.style.cssText = `
+        width: 100%; height: 100%;
         border-radius: 50%; border: 2px solid white;
         background: ${priceColor(ratio)};
-        opacity: 0.8; cursor: pointer;
+        opacity: 0.8;
         display: flex; align-items: center; justify-content: center;
         font-size: 10px; font-weight: 700; color: white;
         text-shadow: 0 1px 2px rgba(0,0,0,0.5);
         box-shadow: 0 2px 6px rgba(0,0,0,0.3);
         transition: transform 0.15s, opacity 0.15s;
+        transform: scale(1);
         padding: 2px;
         line-height: 1.1;
         text-align: center;
+        pointer-events: none;
       `;
-      el.textContent = point.district.replace(/^Quan\s*/i, 'Q.').replace(/^Huyen\s*/i, 'H.');
-      el.addEventListener('mouseenter', () => { el.style.opacity = '1'; el.style.transform = 'scale(1.15)'; });
-      el.addEventListener('mouseleave', () => { el.style.opacity = '0.8'; el.style.transform = 'scale(1)'; });
+      inner.textContent = point.district.replace(/^Quan\s*/i, 'Q.').replace(/^Huyen\s*/i, 'H.');
+      el.appendChild(inner);
+      el.addEventListener('mouseenter', () => { inner.style.opacity = '1'; inner.style.transform = 'scale(1.15)'; });
+      el.addEventListener('mouseleave', () => { inner.style.opacity = '0.8'; inner.style.transform = 'scale(1)'; });
       el.addEventListener('click', (e) => {
         e.stopPropagation();
         onDistrictClick?.(point.district);