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/valuation/comparables-map.tsx

@@ -127,10 +127,14 @@ export function ComparablesMap({
 
     geoComparables.forEach((comp) => {
       const color = similarityColor(comp.similarity);
+      // Mapbox owns `transform: translate(...)` on the outer element;
+      // apply hover scale to an inner wrapper to avoid clobbering it.
       const el = document.createElement('div');
       el.setAttribute('data-testid', 'comparables-map-marker');
-      el.style.cssText = `
-        background: white;
+      const inner = document.createElement('div');
+      inner.style.cssText = `
+        background: hsl(var(--card));
+        color: hsl(var(--card-foreground));
         border-radius: 8px;
         padding: 4px 8px;
         font-size: 11px;
@@ -140,16 +144,18 @@ export function ComparablesMap({
         cursor: pointer;
         border-left: 3px solid ${color};
         transition: transform 0.15s;
+        transform: scale(1);
         max-width: 180px;
         overflow: hidden;
         text-overflow: ellipsis;
       `;
-      el.textContent = formatPrice(comp.priceVND);
+      inner.textContent = formatPrice(comp.priceVND);
+      el.appendChild(inner);
       el.addEventListener('mouseenter', () => {
-        el.style.transform = 'scale(1.08)';
+        inner.style.transform = 'scale(1.08)';
       });
       el.addEventListener('mouseleave', () => {
-        el.style.transform = 'scale(1)';
+        inner.style.transform = 'scale(1)';
       });
 
       const popup = new mapboxgl.Popup({