fix(web): update dashboard pages, layouts, and listing forms

Update 12 page/layout files across auth, dashboard, listings, and search
routes to improve type safety, fix component imports, and align with
latest API changes.

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

apps/web/app/[locale]/(dashboard)/dashboard/kyc/page.tsx

@@ -79,7 +79,7 @@ export default function KycPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Xác minh danh tính (KYC)</h1>
+        <h1 className="text-2xl font-bold sm:text-3xl">Xác minh danh tính (KYC)</h1>
         <p className="mt-2 text-muted-foreground">
           Xác minh danh tính để sử dụng đầy đủ tính năng của GoodGo
         </p>
@@ -131,7 +131,7 @@ export default function KycPage() {
                 </div>
                 <span className="ml-2 hidden text-sm sm:inline">{s.title}</span>
                 {i < KYC_STEPS.length - 1 && (
-                  <div className="mx-3 h-px w-8 bg-border sm:w-16" />
+                  <div className="mx-1 h-px w-4 bg-border sm:mx-3 sm:w-16" />
                 )}
               </div>
             ))}

apps/web/app/[locale]/(dashboard)/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { formatPrice, formatPricePerM2 } from '@/lib/currency';
 import { useMarketReport, useHeatmap } from '@/lib/hooks/use-analytics';
 import { useListingsSearch } from '@/lib/hooks/use-listings';
+import { staticBlurDataURL } from '@/lib/image-blur';
 
 const DistrictBarChart = dynamic(
   () => import('@/components/charts/district-bar-chart').then((mod) => mod.DistrictBarChart),
@@ -244,6 +245,8 @@ export default function DashboardPage() {
                         fill
                         sizes="64px"
                         className="object-cover"
+                        placeholder="blur"
+                        blurDataURL={staticBlurDataURL()}
                       />
                     ) : (
                       <div className="flex h-full items-center justify-center text-xs text-muted-foreground">

apps/web/app/[locale]/(dashboard)/dashboard/profile/page.tsx

@@ -74,7 +74,7 @@ export default function ProfilePage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Hồ sơ cá nhân</h1>
+        <h1 className="text-2xl font-bold sm:text-3xl">Hồ sơ cá nhân</h1>
         <p className="mt-2 text-muted-foreground">Quản lý thông tin tài khoản của bạn</p>
       </div>
 
@@ -99,7 +99,7 @@ export default function ProfilePage() {
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Profile info */}
         <Card className="lg:col-span-2">
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <CardTitle className="text-lg">Thông tin cá nhân</CardTitle>
               <CardDescription>Thông tin cơ bản trên hồ sơ của bạn</CardDescription>

apps/web/app/[locale]/(dashboard)/dashboard/subscription/page.tsx

@@ -91,7 +91,7 @@ export default function SubscriptionPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Gói dịch vụ</h1>
+        <h1 className="text-2xl font-bold sm:text-3xl">Gói dịch vụ</h1>
         <p className="mt-2 text-muted-foreground">
           Quản lý gói đăng ký và theo dõi hạn mức sử dụng
         </p>
@@ -112,10 +112,10 @@ export default function SubscriptionPage() {
         </div>
       ) : (
         <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList>
-            <TabsTrigger value="plan">Gói hiện tại</TabsTrigger>
-            <TabsTrigger value="plans">So sánh gói</TabsTrigger>
-            <TabsTrigger value="history">Lịch sử thanh toán</TabsTrigger>
+          <TabsList className="w-full justify-start overflow-x-auto">
+            <TabsTrigger value="plan" className="min-w-fit">Gói hiện tại</TabsTrigger>
+            <TabsTrigger value="plans" className="min-w-fit">So sánh gói</TabsTrigger>
+            <TabsTrigger value="history" className="min-w-fit">Lịch sử thanh toán</TabsTrigger>
           </TabsList>
 
           {/* Current plan tab */}

apps/web/app/[locale]/(dashboard)/dashboard/valuation/page.tsx

@@ -34,7 +34,7 @@ export default function ValuationPage() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-bold">Dinh gia AI</h1>
+        <h1 className="text-2xl font-bold sm:text-3xl">Dinh gia AI</h1>
         <p className="mt-2 text-muted-foreground">
           Su dung AI de uoc tinh gia tri bat dong san dua tren du lieu thi truong
         </p>