ia render

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI SketchUp Render - Kiến Trúc & Nội Thất</title>
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #d35400;
--bg-color: #f8f9fa;
--box-bg: #ffffff;
--border-color: #e0e0e0;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--primary-color);
line-height: 1.6;
margin: 0;
padding: 40px 20px;
}

.container {
max-width: 800px;
margin: 0 auto;
background: var(--box-bg);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

h2 {
text-align: center;
margin-bottom: 5px;
}

p.subtitle {
text-align: center;
color: #7f8c8d;
margin-bottom: 30px;
}

/* Khu vực tải ảnh */
.upload-area {
border: 2px dashed #bdc3c7;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
background-color: #fdfdfd;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 25px;
}

.upload-area:hover {
border-color: var(--primary-color);
background-color: #f0f4f8;
}

.upload-area input[type="file"] {
display: none;
}

/* Nút chọn phong cách */
.style-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 25px;
}

.style-card {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: 0.2s;
}

.style-card.active, .style-card:hover {
border-color: var(--primary-color);
background-color: #f0f4f8;
font-weight: bold;
}

/* Ô nhập text và Nút bấm */
.input-group { margin-bottom: 25px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: bold; }
.input-group input {
width: 100%; padding: 12px; border: 1px solid var(--border-color);
border-radius: 6px; box-sizing: border-box;
}

.btn-render {
width: 100%;
background-color: var(--primary-color);
color: white;
border: none;
padding: 15px;
font-size: 16px;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}

.btn-render:hover { background-color: #1a252f; }

/* Banner khóa học USB */
.promo-banner {
margin-top: 40px;
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
border-left: 4px solid var(--accent-color);
padding: 20px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}

.promo-text h4 { margin: 0 0 5px 0; color: var(--accent-color); }
.promo-text p { margin: 0; font-size: 14px; color: #555; }
.promo-price { font-size: 18px; font-weight: bold; color: var(--primary-color); }

</style>
</head>
<body>

<div class="container">
<h2>Trợ Lý AI Render Kiến Trúc</h2>
<p class="subtitle">Chuyển đổi khối SketchUp thành hình ảnh thực tế chỉ trong vài giây</p>

<label class="upload-area" for="file-upload">
<div style="font-size: 40px; color: #bdc3c7;">📁</div>
<h3>Tải ảnh mặt cắt/khối SketchUp lên đây</h3>
<p>Hỗ trợ định dạng JPG, PNG (Khuyên dùng chế độ Hidden Line)</p>
<input id="file-upload" type="file" accept="image/*">
</label>

<div class="input-group">
<label>1. Chọn phong cách vật liệu</label>
<div class="style-options">
<div class="style-card active">Japandi<br><small>Gỗ sồi, tối giản</small></div>
<div class="style-card">Modern Luxury<br><small>Đá marble, gỗ công nghiệp</small></div>
<div class="style-card">Nhiệt đới<br><small>Mộc mạc, nhiều cây xanh</small></div>
</div>
</div>

<div class="input-group">
<label>2. Yêu cầu chi tiết cho AI (Tùy chọn)</label>
<input type="text" placeholder="Ví dụ: Ánh sáng ban ngày, không gian ấm cúng, thiết kế hiện đại...">
</div>

<button class="btn-render">BẮT ĐẦU RENDER BẰNG AI</button>

<div class="promo-banner">
<div class="promo-text">
<h4>Bạn muốn tự tay làm chủ mọi kỹ năng?</h4>
<p>Trọn bộ khóa học thiết kế SketchUp & V-Ray chuyên sâu lưu trữ trên USB. Giao tận tay bạn.</p>
</div>
<div class="promo-price">Chỉ 690,000 VNĐ</div>
</div>

</div>

</body>
</html>