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/components/design-system/compact-header.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface CompactHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  /** Logo node. */
+  logo?: React.ReactNode;
+  /** Breadcrumb / tiêu đề ngắn. */
+  breadcrumb?: React.ReactNode;
+  /** Khối search (input/dropdown). */
+  search?: React.ReactNode;
+  /** Action phía phải (avatar, notif, theme toggle). */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Header compact (h: 48px) dạng terminal financial.
+ * Dùng thay cho header card/spacious trước đây.
+ */
+export function CompactHeader({
+  logo,
+  breadcrumb,
+  search,
+  actions,
+  className,
+  ...rest
+}: CompactHeaderProps) {
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-30 flex h-header-compact items-center gap-3 border-b border-border bg-background-elevated px-4',
+        className,
+      )}
+      {...rest}
+    >
+      {logo ? <div className="flex items-center">{logo}</div> : null}
+      {breadcrumb ? (
+        <div className="flex items-center text-data-sm text-foreground-muted">
+          {breadcrumb}
+        </div>
+      ) : null}
+      {search ? <div className="ml-4 hidden max-w-md flex-1 md:block">{search}</div> : null}
+      <div className="ml-auto flex items-center gap-2">{actions}</div>
+    </header>
+  );
+}