test(web): add Vitest+RTL tests for 15 design-system presentational components

Covers Badge, Divider, EmptyState, Numeric, PriceDelta, Signal, Skeleton,
StatusChip, Surface, StatCard, KpiCard, DensityToggle, Footer, MarketIndex,
CompactHeader — rendering, variants, props, a11y attributes, className merging.

All 1139 web tests pass. Zustand persist store mocked for DensityToggle to
avoid jsdom localStorage incompatibility.

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

apps/web/components/design-system/__tests__/stat-card.spec.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { StatCard } from '../stat-card';
+
+describe('StatCard', () => {
+  it('renders label', () => {
+    render(<StatCard label="Giá TB/m²" value="25" />);
+    expect(screen.getByText('Giá TB/m²')).toBeInTheDocument();
+  });
+
+  it('renders string value', () => {
+    render(<StatCard label="Label" value="25 tr/m²" />);
+    expect(screen.getByText('25 tr/m²')).toBeInTheDocument();
+  });
+
+  it('renders number value', () => {
+    render(<StatCard label="Label" value={1234} />);
+    expect(screen.getByText('1234')).toBeInTheDocument();
+  });
+
+  it('renders unit when provided', () => {
+    render(<StatCard label="Label" value="25" unit="tr/m²" />);
+    expect(screen.getByText('tr/m²')).toBeInTheDocument();
+  });
+
+  it('renders PriceDelta when delta provided', () => {
+    const { container } = render(<StatCard label="Label" value="25" delta={3.5} />);
+    expect(container.querySelector('[data-numeric]')).toBeInTheDocument();
+  });
+
+  it('does not render delta section when delta is undefined', () => {
+    render(<StatCard label="Label" value="25" />);
+    // no PriceDelta text like +x%
+    expect(screen.queryByText(/\+\d/)).toBeNull();
+  });
+
+  it('renders sublabel', () => {
+    render(<StatCard label="Label" value="25" sublabel="7 ngày" />);
+    expect(screen.getByText('7 ngày')).toBeInTheDocument();
+  });
+
+  it('renders icon node', () => {
+    render(
+      <StatCard label="Label" value="25" icon={<span data-testid="icon" />} />,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('merges custom className', () => {
+    render(<StatCard data-testid="sc" label="L" value="V" className="extra" />);
+    expect(screen.getByTestId('sc')).toHaveClass('extra');
+  });
+});