feat(web): listings page — ticker-style DataTable với toggle card view

Tạo mới trang /listings dạng bảng ticker-style theo spec TEC-3034.

- DataTable compact (row 36px, sticky header, alternating rows)
- Cột: #, Mã (GG-xxx), Quận, Loại, Giá, Δ30d, DT m², KL/Views
- Sortable theo Giá, Δ30d, DT m², KL/Views
- Filter inline: Loại giao dịch, Loại BĐS, Quận, Khoảng giá
- Toggle view: Table (default) ↔ Card grid (legacy component cũ)
- Pagination restyle compact, giữ nguyên API params
- Click row → navigate to detail page
- Dùng DataTable + PriceDelta từ @/components/design-system

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/[locale]/(public)/layout.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { LogOut, Menu, Moon, Sun, User as UserIcon, X } from 'lucide-react';
+import { TickerStrip } from '@/components/design-system/ticker-strip';
+import type { TickerItem } from '@/components/design-system/ticker-strip';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -80,8 +82,24 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
     },
   ];
 
+  /** Mock top-8 district price movement data (7-day delta). */
+  const tickerItems: TickerItem[] = [
+    { id: 'q1', label: 'Quận 1', changePercent: 2.4, direction: 'up' },
+    { id: 'q2', label: 'Quận 2', changePercent: -0.8, direction: 'down' },
+    { id: 'q3', label: 'Quận 3', changePercent: 1.1, direction: 'up' },
+    { id: 'q7', label: 'Quận 7', changePercent: 3.2, direction: 'up' },
+    { id: 'binhthanh', label: 'Bình Thạnh', changePercent: 0.0, direction: 'neutral' },
+    { id: 'thuduc', label: 'Thủ Đức', changePercent: 1.7, direction: 'up' },
+    { id: 'tanbinhdistrict', label: 'Tân Bình', changePercent: -1.3, direction: 'down' },
+    { id: 'phuninh', label: 'Phú Nhuận', changePercent: 0.5, direction: 'up' },
+  ];
+
   return (
     <div className="min-h-screen bg-background">
+      {/* Ticker strip — biến động 7d top 8 quận */}
+      <div className="h-ticker-bar border-b border-border bg-background-elevated">
+        <TickerStrip items={tickerItems} />
+      </div>
       <header
         role="banner"
         className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"