[CLAUDE] CICD+FE-Admin+FE-User: deploy pool-state guard + SlaTimer component

CICD: check app pool state before Stop-WebAppPool (idempotent).

FE: new SlaTimer component with color-coded countdown (emerald/amber/red)
and progress bar. Two variants:
- inline: used in list tables (Inbox, Contracts list x2, MyContracts)
- full: used in ContractDetail card with progress bar + deadline timestamp

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fe-user/src/pages/contracts/ContractDetailPage.tsx

@@ -7,6 +7,7 @@ import { ArrowRight, CheckCircle2, MessageSquare, Clock, ArrowLeft, XCircle } fr
 import { toast } from 'sonner'
 import { PageHeader } from '@/components/PageHeader'
 import { PhaseBadge } from '@/components/PhaseBadge'
+import { SlaTimer } from '@/components/SlaTimer'
 import { Button } from '@/components/ui/Button'
 import { Select } from '@/components/ui/Select'
 import { Textarea } from '@/components/ui/Textarea'
@@ -137,7 +138,7 @@ export function ContractDetailPage() {
               <div><dt className="text-slate-500">NCC</dt><dd>{c.supplierName}</dd></div>
               <div><dt className="text-slate-500">Dự án</dt><dd>{c.projectName}</dd></div>
               <div><dt className="text-slate-500">Người soạn</dt><dd>{c.drafterName ?? '—'}</dd></div>
-              <div><dt className="text-slate-500">SLA</dt><dd>{c.slaDeadline ? fmt(c.slaDeadline) : '—'}</dd></div>
+              <div className="col-span-2"><dt className="text-slate-500 mb-1">SLA</dt><dd><SlaTimer deadline={c.slaDeadline} createdAt={c.createdAt} variant="full" /></dd></div>
             </dl>
             {c.noiDung && (
               <div className="mt-3">

fe-user/src/pages/contracts/MyContractsPage.tsx

@@ -4,6 +4,7 @@ import { FileText } from 'lucide-react'
 import { PageHeader } from '@/components/PageHeader'
 import { DataTable, type Column } from '@/components/DataTable'
 import { PhaseBadge } from '@/components/PhaseBadge'
+import { SlaTimer } from '@/components/SlaTimer'
 import { api } from '@/lib/api'
 import type { Paged } from '@/types/master'
 import type { ContractListItem } from '@/types/contracts'
@@ -26,6 +27,7 @@ export function MyContractsPage() {
     { key: 'phase', header: 'Phase', width: 'w-36', render: c => <PhaseBadge phase={c.phase} /> },
     { key: 'supplierName', header: 'NCC', render: c => c.supplierName },
     { key: 'giaTri', header: 'Giá trị', align: 'right', width: 'w-32', render: c => fmtMoney(c.giaTri) },
+    { key: 'slaDeadline', header: 'SLA', width: 'w-40', render: c => <SlaTimer deadline={c.slaDeadline} createdAt={c.createdAt} /> },
   ]
 
   return (