| <!DOCTYPE html> |
|
|
| <html class="light" lang="en"><head> |
| <meta charset="utf-8"/> |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> |
| <title>Trợ lý AI - RealEstate DSS</title> |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> |
| <link href="https://fonts.googleapis.com" rel="preconnect"/> |
| <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
| <style> |
| .material-symbols-outlined { |
| font-family: 'Material Symbols Outlined'; |
| font-weight: normal; |
| font-style: normal; |
| font-size: 24px; |
| line-height: 1; |
| letter-spacing: normal; |
| text-transform: none; |
| display: inline-block; |
| white-space: nowrap; |
| word-wrap: normal; |
| direction: ltr; |
| -webkit-font-feature-settings: 'liga'; |
| -webkit-font-smoothing: antialiased; |
| } |
| </style> |
| <script id="tailwind-config"> |
| tailwind.config = { |
| darkMode: "class", |
| theme: { |
| extend: { |
| "colors": { |
| "on-secondary-container": "#54647a", |
| "surface-container-highest": "#e1e2ed", |
| "tertiary-container": "#bc4800", |
| "surface-variant": "#e1e2ed", |
| "tertiary-fixed": "#ffdbcd", |
| "tertiary": "#943700", |
| "secondary-fixed": "#d3e4fe", |
| "primary-container": "#2563eb", |
| "on-background": "#191b23", |
| "on-surface": "#191b23", |
| "on-secondary-fixed": "#0b1c30", |
| "error": "#ba1a1a", |
| "on-secondary": "#ffffff", |
| "surface-bright": "#faf8ff", |
| "primary": "#004ac6", |
| "on-tertiary-container": "#ffede6", |
| "surface-dim": "#d9d9e5", |
| "surface-container": "#ededf9", |
| "primary-fixed-dim": "#b4c5ff", |
| "tertiary-fixed-dim": "#ffb596", |
| "outline-variant": "#c3c6d7", |
| "secondary-container": "#d0e1fb", |
| "on-surface-variant": "#434655", |
| "surface-container-low": "#f3f3fe", |
| "on-tertiary-fixed": "#360f00", |
| "on-primary-container": "#eeefff", |
| "outline": "#737686", |
| "inverse-on-surface": "#f0f0fb", |
| "on-error-container": "#93000a", |
| "inverse-surface": "#2e3039", |
| "error-container": "#ffdad6", |
| "secondary-fixed-dim": "#b7c8e1", |
| "surface-container-lowest": "#ffffff", |
| "on-tertiary-fixed-variant": "#7d2d00", |
| "inverse-primary": "#b4c5ff", |
| "primary-fixed": "#dbe1ff", |
| "on-primary": "#ffffff", |
| "surface-container-high": "#e7e7f3", |
| "on-error": "#ffffff", |
| "surface": "#faf8ff", |
| "on-tertiary": "#ffffff", |
| "background": "#faf8ff", |
| "on-primary-fixed-variant": "#003ea8", |
| "on-primary-fixed": "#00174b", |
| "surface-tint": "#0053db", |
| "on-secondary-fixed-variant": "#38485d", |
| "secondary": "#505f76" |
| }, |
| "borderRadius": { |
| "DEFAULT": "0.125rem", |
| "lg": "0.25rem", |
| "xl": "0.5rem", |
| "full": "0.75rem" |
| }, |
| "spacing": { |
| "margin": "32px", |
| "container-max": "1440px", |
| "stack-md": "16px", |
| "stack-lg": "24px", |
| "stack-sm": "8px", |
| "gutter": "24px", |
| "unit": "4px" |
| }, |
| "fontFamily": { |
| "metric-md": ["JetBrains Mono"], |
| "headline-md": ["Inter"], |
| "title-sm": ["Inter"], |
| "body-sm": ["Inter"], |
| "body-base": ["Inter"], |
| "display-lg": ["Inter"], |
| "metric-sm": ["JetBrains Mono"], |
| "label-caps": ["Inter"], |
| "metric-lg": ["JetBrains Mono"] |
| }, |
| "fontSize": { |
| "metric-md": ["18px", { "lineHeight": "24px", "fontWeight": "500" }], |
| "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], |
| "title-sm": ["18px", { "lineHeight": "24px", "fontWeight": "600" }], |
| "body-sm": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], |
| "body-base": ["16px", { "lineHeight": "24px", "fontWeight": "400" }], |
| "display-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], |
| "metric-sm": ["14px", { "lineHeight": "20px", "fontWeight": "500" }], |
| "label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600" }], |
| "metric-lg": ["28px", { "lineHeight": "32px", "fontWeight": "600" }] |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-surface text-on-surface font-body-base antialiased overflow-hidden"> |
| |
| <nav class="bg-surface-container-lowest fixed left-0 top-0 h-screen w-[240px] flex flex-col border-r border-outline-variant shadow-sm z-50"> |
| <div class="px-gutter py-stack-lg border-b border-outline-variant"> |
| <div class="flex items-center gap-stack-sm"> |
| <div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container"> |
| <span class="material-symbols-outlined" style="font-size: 20px;">domain</span> |
| </div> |
| <div> |
| <h1 class="font-headline-md text-headline-md font-bold text-primary">RealEstate DSS</h1> |
| <p class="font-body-sm text-body-sm text-on-surface-variant">Institutional Intelligence</p> |
| </div> |
| </div> |
| <button class="mt-stack-md w-full bg-primary text-on-primary py-stack-sm px-stack-md rounded-lg font-title-sm text-title-sm flex items-center justify-center gap-unit hover:bg-on-primary-fixed-variant transition-colors"><span class="material-symbols-outlined" style="font-size: 18px;">add</span> Phân tích mới</button> |
| </div> |
| <div class="flex flex-col py-stack-lg gap-stack-sm px-stack-sm overflow-y-auto flex-1"> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">dashboard</span> |
| <span class="font-body-sm text-body-sm font-semibold">Tổng quan điều hành</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">query_stats</span> |
| <span class="font-body-sm text-body-sm font-semibold">Thông tin thị trường</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">analytics</span> |
| <span class="font-body-sm text-body-sm font-semibold">Phân tích số liệu</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">science</span> |
| <span class="font-body-sm text-body-sm font-semibold">Phòng thí nghiệm quyết định</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">map</span> |
| <span class="font-body-sm text-body-sm font-semibold">GIS & Quy hoạch</span> |
| </a> |
| |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-primary font-bold border-r-2 border-primary bg-primary-container/10 opacity-90 transition-opacity" href="#"> |
| <span class="material-symbols-outlined">psychology</span> |
| <span class="font-body-sm text-body-sm">Trợ lý AI</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">settings_input_component</span> |
| <span class="font-body-sm text-body-sm font-semibold">Vận hành dữ liệu</span> |
| </a> |
| <a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors duration-150" href="#"> |
| <span class="material-symbols-outlined">explore</span> |
| <span class="font-body-sm text-body-sm font-semibold">Trình khám phá dữ liệu</span> |
| </a> |
| </div> |
| </nav> |
| |
| <header class="bg-surface-container-lowest fixed top-0 right-0 left-[240px] h-16 z-40 border-b border-outline-variant shadow-sm flex items-center justify-between px-gutter w-[calc(100%-240px)]"> |
| <div class="flex items-center gap-stack-md"> |
| <div> |
| <div class="font-label-caps text-label-caps text-on-surface-variant">HỆ THỐNG HỖ TRỢ QUYẾT ĐỊNH</div> |
| <div class="font-headline-md text-headline-md text-primary">Trợ lý AI</div> |
| </div> |
| </div> |
| <div class="flex items-center gap-stack-md"> |
| |
| <div class="flex items-center gap-unit px-stack-sm py-unit bg-surface-container rounded-full border border-outline-variant"> |
| <div class="w-2 h-2 rounded-full bg-emerald-500"></div> |
| <span class="font-metric-sm text-metric-sm text-on-surface-variant">Ollama Trực tuyến - qwen2.5:14b</span> |
| </div> |
| <div class="relative focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 rounded-lg"> |
| <span class="material-symbols-outlined absolute left-stack-sm top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 20px;">search</span> |
| <input class="pl-[36px] pr-stack-sm py-stack-sm rounded-lg border border-outline-variant bg-surface text-body-sm font-body-sm w-64 focus:outline-none" placeholder="Tìm kiếm..." type="text"/> |
| </div> |
| <div class="flex items-center gap-stack-sm"> |
| <button class="p-stack-sm text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors"> |
| <span class="material-symbols-outlined">notifications_active</span> |
| </button> |
| <button class="p-stack-sm text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors"> |
| <span class="material-symbols-outlined">help_outline</span> |
| </button> |
| <button class="p-stack-sm text-on-surface-variant hover:bg-surface-container-high rounded-full transition-colors"> |
| <span class="material-symbols-outlined">account_circle</span> |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| <main class="ml-[240px] mt-16 h-[calc(100vh-64px)] flex bg-surface"> |
| |
| <section class="flex-1 flex flex-col p-gutter border-r border-outline-variant bg-surface-bright relative"> |
| |
| <div class="mb-stack-lg flex items-center justify-between"> |
| <div> |
| <h2 class="font-display-lg text-display-lg text-on-surface mb-unit">Trợ lý AI</h2> |
| <p class="font-body-base text-body-base text-on-surface-variant">Đặt câu hỏi thông minh về chiến lược thị trường, rủi ro pháp lý và quy hoạch.</p> |
| </div> |
| <div class="flex items-center gap-stack-sm"> |
| <button class="flex items-center gap-unit px-stack-sm py-unit border border-outline-variant rounded bg-surface text-on-surface-variant hover:bg-surface-container transition-colors"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">history</span> |
| <span class="font-label-caps text-label-caps">Lịch sử</span> |
| </button> |
| <button class="flex items-center gap-unit px-stack-sm py-unit border border-outline-variant rounded bg-surface text-on-surface-variant hover:bg-surface-container transition-colors"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">tune</span> |
| <span class="font-label-caps text-label-caps">Tham số</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="mb-stack-lg flex flex-wrap gap-stack-sm"> |
| <button class="px-stack-md py-stack-sm bg-surface-container border border-outline-variant rounded-full font-body-sm text-body-sm text-on-surface hover:border-primary hover:text-primary transition-colors flex items-center gap-unit"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">compare_arrows</span> |
| So sánh Bình Chánh và Thủ Đức |
| </button> |
| <button class="px-stack-md py-stack-sm bg-surface-container border border-outline-variant rounded-full font-body-sm text-body-sm text-on-surface hover:border-primary hover:text-primary transition-colors flex items-center gap-unit"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">warning</span> |
| Rủi ro quy hoạch tại Tân Bình |
| </button> |
| <button class="px-stack-md py-stack-sm bg-surface-container border border-outline-variant rounded-full font-body-sm text-body-sm text-on-surface hover:border-primary hover:text-primary transition-colors flex items-center gap-unit"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">trending_up</span> |
| Dự báo giá đất quận 9 năm 2025 |
| </button> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto mb-stack-lg pr-stack-sm space-y-stack-lg custom-scrollbar"> |
| |
| <div class="flex justify-end"> |
| <div class="max-w-[80%] bg-primary-container text-on-primary-container rounded-lg p-stack-md rounded-tr-none shadow-sm"> |
| <p class="font-body-base text-body-base">Đặt câu hỏi thông minh về chiến lược thị trường, rủi ro pháp lý và quy hoạch.</p> |
| </div> |
| </div> |
| |
| <div class="flex justify-start"> |
| <div class="max-w-[85%] bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md rounded-tl-none shadow-sm"> |
| <div class="flex items-center gap-stack-sm mb-stack-md"> |
| <div class="w-8 h-8 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center"> |
| <span class="material-symbols-outlined" style="font-size: 20px;">psychology</span> |
| </div> |
| <span class="font-title-sm text-title-sm text-on-surface">AI Analysis Report</span> |
| <span class="ml-auto font-metric-sm text-metric-sm text-on-surface-variant bg-surface px-unit py-1 rounded border border-outline-variant">Confidence: 94%</span> |
| </div> |
| <div class="prose prose-sm max-w-none font-body-base text-body-base text-on-surface space-y-stack-md"> |
| <p>Dựa trên hồ sơ pháp lý hiện hành và quy hoạch phân khu 1/2000 mới nhất tại khu vực Thảo Điền (Quận 2 cũ, nay thuộc TP. Thủ Đức), dưới đây là các rủi ro pháp lý chính cần lưu ý đối với dự án căn hộ:</p> |
| <h4 class="font-title-sm text-title-sm mt-stack-md mb-unit">1. Rủi ro về Quy hoạch chiều cao & Mật độ xây dựng</h4> |
| <p>Theo <span class="bg-secondary-fixed text-on-secondary-fixed px-1 rounded text-sm cursor-pointer hover:bg-primary-fixed">QĐ 5758/QĐ-UBND</span>, khu vực Thảo Điền bị giới hạn nghiêm ngặt về chiều cao công trình (tối đa 15-20 tầng tùy vị trí) để bảo vệ cảnh quan ven sông. Việc xin điều chỉnh chỉ tiêu quy hoạch (mật độ, hệ số sử dụng đất) hiện tại rất khó khăn và kéo dài.</p> |
| <h4 class="font-title-sm text-title-sm mt-stack-md mb-unit">2. Rủi ro giải tỏa và đền bù hạ tầng kỹ thuật</h4> |
| <p>Khu vực này thường xuyên gặp tình trạng ngập úng cục bộ. Yêu cầu đấu nối hạ tầng kỹ thuật (thoát nước) theo quy định mới đòi hỏi chủ đầu tư phải cam kết nâng cấp hạ tầng lân cận, dẫn đến đội chi phí ngoài dự kiến <span class="text-primary text-sm cursor-pointer">[Xem văn bản Sở Xây Dựng số 124/SXD-PTNT]</span>.</p> |
| <h4 class="font-title-sm text-title-sm mt-stack-md mb-unit">3. Giới hạn thời gian cấp phép xây dựng</h4> |
| <p>Do đang trong quá trình rà soát lại quỹ đất ven sông Sài Gòn, các thủ tục cấp phép dự án mới bị chậm trễ trung bình từ 6-12 tháng so với quy định chuẩn.</p> |
| </div> |
| <div class="mt-stack-md pt-stack-md border-t border-outline-variant flex items-center justify-between"> |
| <div class="flex gap-stack-sm"> |
| <button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-unit"><span class="material-symbols-outlined" style="font-size: 18px;">thumb_up</span></button> |
| <button class="text-on-surface-variant hover:text-error transition-colors flex items-center gap-unit"><span class="material-symbols-outlined" style="font-size: 18px;">thumb_down</span></button> |
| <button class="text-on-surface-variant hover:text-primary transition-colors flex items-center gap-unit"><span class="material-symbols-outlined" style="font-size: 18px;">content_copy</span></button> |
| </div> |
| <button class="font-label-caps text-label-caps text-primary hover:underline flex items-center gap-unit"> |
| Export PDF <span class="material-symbols-outlined" style="font-size: 16px;">download</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-start opacity-50"> |
| <div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm rounded-tl-none shadow-sm flex items-center gap-2"> |
| <span class="material-symbols-outlined animate-pulse">psychology</span> |
| <span class="font-body-sm text-body-sm">Đang tổng hợp dữ liệu...</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-auto bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-sm shadow-sm flex items-end gap-stack-sm focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-0"> |
| <button class="p-stack-sm text-on-surface-variant hover:bg-surface-container rounded transition-colors mb-unit"> |
| <span class="material-symbols-outlined">attach_file</span> |
| </button> |
| <textarea class="flex-1 bg-transparent border-none focus:ring-0 resize-none font-body-base text-body-base text-on-surface p-stack-sm" placeholder="Nhập câu hỏi về thị trường hoặc quy hoạch..." rows="2" style="min-height: 44px;"></textarea> |
| <button class="p-stack-sm bg-primary text-on-primary rounded hover:bg-on-primary-fixed-variant transition-colors mb-unit flex items-center justify-center"> |
| <span class="material-symbols-outlined">send</span> |
| </button> |
| </div> |
| <div class="text-center mt-stack-sm"> |
| <span class="font-label-caps text-label-caps text-on-surface-variant">Phản hồi của AI có thể không chính xác. Hãy xác minh các thông tin pháp lý quan trọng.</span> |
| </div> |
| </section> |
| |
| <aside class="w-[360px] bg-surface-container-lowest border-l border-outline-variant flex flex-col shadow-sm z-10"> |
| <div class="p-stack-md border-b border-outline-variant bg-surface"> |
| <h3 class="font-title-sm text-title-sm text-on-surface flex items-center gap-stack-sm"><span class="material-symbols-outlined">manage_search</span> Thanh tra nguồn</h3> |
| <p class="font-body-sm text-body-sm text-on-surface-variant mt-unit">Các tài liệu ngữ cảnh được truy xuất cho phản hồi hiện tại.</p> |
| </div> |
| <div class="flex-1 overflow-y-auto p-stack-md space-y-stack-md"> |
| |
| <div class="bg-surface border border-outline-variant rounded-lg p-stack-sm hover:shadow-md transition-shadow cursor-pointer"> |
| <div class="flex justify-between items-start mb-unit"> |
| <div class="flex items-center gap-unit text-primary"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">description</span> |
| <span class="font-label-caps text-label-caps font-bold">TÀI LIỆU PHÁP LÝ</span> |
| </div> |
| <span class="font-metric-sm text-metric-sm bg-emerald-100 text-emerald-800 px-unit py-[2px] rounded">Score: 0.98</span> |
| </div> |
| <h4 class="font-title-sm text-body-base text-on-surface mb-unit truncate">QĐ 5758/QĐ-UBND - Duyệt đồ án QHCT 1/2000</h4> |
| <p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2">Các tài liệu ngữ cảnh được truy xuất cho phản hồi hiện tại.</p> |
| <div class="mt-stack-sm flex gap-unit"> |
| <span class="font-label-caps text-label-caps bg-surface-container px-2 py-1 rounded text-on-surface-variant">Zoning</span> |
| <span class="font-label-caps text-label-caps bg-surface-container px-2 py-1 rounded text-on-surface-variant">Height Limits</span> |
| </div> |
| </div> |
| |
| <div class="bg-surface border border-outline-variant rounded-lg p-stack-sm hover:shadow-md transition-shadow cursor-pointer"> |
| <div class="flex justify-between items-start mb-unit"> |
| <div class="flex items-center gap-unit text-tertiary"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">gavel</span> |
| <span class="font-label-caps text-label-caps font-bold">CẬP NHẬT QUY ĐỊNH</span> |
| </div> |
| <span class="font-metric-sm text-metric-sm bg-emerald-100 text-emerald-800 px-unit py-[2px] rounded">Score: 0.85</span> |
| </div> |
| <h4 class="font-title-sm text-body-base text-on-surface mb-unit truncate">CV 124/SXD-PTNT - Sở Xây Dựng</h4> |
| <p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2">Các tài liệu ngữ cảnh được truy xuất cho phản hồi hiện tại.</p> |
| <div class="mt-stack-sm flex gap-unit"> |
| <span class="font-label-caps text-label-caps bg-surface-container px-2 py-1 rounded text-on-surface-variant">Infrastructure</span> |
| <span class="font-label-caps text-label-caps bg-surface-container px-2 py-1 rounded text-on-surface-variant">Cost Risk</span> |
| </div> |
| </div> |
| |
| <div class="bg-surface border border-outline-variant rounded-lg p-stack-sm hover:shadow-md transition-shadow cursor-pointer"> |
| <div class="flex justify-between items-start mb-unit"> |
| <div class="flex items-center gap-unit text-secondary"> |
| <span class="material-symbols-outlined" style="font-size: 16px;">newspaper</span> |
| <span class="font-label-caps text-label-caps font-bold">BÁO CÁO THỊ TRƯỜNG</span> |
| </div> |
| <span class="font-metric-sm text-metric-sm bg-yellow-100 text-yellow-800 px-unit py-[2px] rounded">Score: 0.72</span> |
| </div> |
| <h4 class="font-title-sm text-body-base text-on-surface mb-unit truncate">Q3 2023 Real Estate Review - Thu Duc City</h4> |
| <p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-2">Các tài liệu ngữ cảnh được truy xuất cho phản hồi hiện tại.</p> |
| </div> |
| </div> |
| <div class="p-stack-md border-t border-outline-variant bg-surface-container-low"> |
| <button class="w-full bg-surface border border-outline-variant text-on-surface py-stack-sm rounded font-title-sm text-title-sm hover:bg-surface-container transition-colors flex items-center justify-center gap-unit"><span class="material-symbols-outlined" style="font-size: 18px;">library_add</span> Tải lên tài liệu tùy chỉnh</button> |
| </div> |
| </aside> |
| </main> |
| </body></html> |
