<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey One - Khảo sát & Xuất bản vẽ AutoCAD trên iPhone</title>
<meta name="description" content="Ứng dụng tất-cả-trong-một cho kỹ sư khảo sát. Đo đạc, quản lý tệp .nnt, và xuất bản vẽ DXF/AutoCAD trực tiếp từ iPhone.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }
.hero-gradient { background: radial-gradient(circle at top right, #2563eb, #0f172a); }
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
</style>
</head>
<body class="bg-[#0f172a] text-white">
<nav class="fixed w-full z-50 bg-[#0f172a]/80 backdrop-blur-lg border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
<div class="text-2xl font-bold tracking-tighter flex items-center">
<div class="w-10 h-10 bg-blue-600 rounded-xl mr-3 flex items-center justify-center shadow-lg shadow-blue-500/30">
<i class="fas fa-compass"></i>
</div>
SURVEY ONE
</div>
<a href="#download" class="bg-white text-black px-6 py-2.5 rounded-full font-bold hover:bg-blue-400 hover:text-white transition-all duration-300">
Tải ngay
</a>
</div>
</nav>
<section class="pt-40 pb-20 px-6 hero-gradient overflow-hidden">
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
<div>
<span class="bg-blue-500/20 text-blue-400 px-4 py-2 rounded-full text-sm font-semibold mb-6 inline-block border border-blue-500/30">
Sẵn sàng cho iOS 18+
</span>
<h1 class="text-5xl md:text-7xl font-extrabold mb-8 leading-[1.1]">
Từ thực địa đến <br> <span class="text-blue-500">AutoCAD</span> chỉ trong tích tắc.
</h1>
<p class="text-xl text-gray-400 mb-10 max-w-lg leading-relaxed">
Không cần máy tính hay Civil 3D. Survey One giúp kỹ sư khảo sát, thiết kế và xuất bản vẽ DXF chuyên nghiệp ngay trên iPhone.
</p>
<div class="flex flex-col sm:flex-row gap-5">
<a href="URL_APP_STORE_CUA_BAN" class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-2xl font-bold text-lg flex items-center justify-center transition shadow-xl shadow-blue-600/20">
<i class="fab fa-apple mr-3 text-2xl"></i> Tải Survey One
</a>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-blue-500/20 blur-3xl rounded-full"></div>
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&q=80&w=1000" alt="App Preview" class="relative rounded-[3rem] border-[8px] border-slate-800 shadow-2xl mx-auto w-[300px]">
</div>
</div>
</section>
<section class="py-12 border-y border-white/5 bg-slate-900/50">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div><p class="text-3xl font-bold">25km</p><p class="text-gray-500 text-sm">Chiều dài khảo sát</p></div>
<div><p class="text-3xl font-bold">0đ</p><p class="text-gray-500 text-sm">Phí PC/Civil 3D</p></div>
<div><p class="text-3xl font-bold">DXF</p><p class="text-gray-500 text-sm">Xuất AutoCAD chuẩn</p></div>
<div><p class="text-3xl font-bold">100%</p><p class="text-gray-500 text-sm">Bảo mật dữ liệu</p></div>
</div>
</section>
<section class="py-24 px-6 bg-[#0f172a]">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-20">
<h2 class="text-4xl font-bold mb-4">Mọi công cụ bạn cần</h2>
<p class="text-gray-400">Thiết kế dành riêng cho kỹ sư Điện, Nước, Giao thông & Hạ tầng.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass p-8 rounded-3xl">
<div class="text-blue-500 text-3xl mb-6"><i class="fas fa-location-crosshairs"></i></div>
<h3 class="text-xl font-bold mb-4">Khảo sát thông minh</h3>
<p class="text-gray-400">Đánh dấu tọa độ, ghi chú nội dung bằng Icon và chụp ảnh thực địa không giới hạn tại điểm mốc.</p>
</div>
<div class="glass p-8 rounded-3xl border-blue-500/30 bg-blue-500/5">
<div class="text-blue-500 text-3xl mb-6"><i class="fas fa-file-export"></i></div>
<h3 class="text-xl font-bold mb-4">Xuất bản vẽ Auto xuất</h3>
<p class="text-gray-400">Xuất trực tiếp file DXF với đầy đủ Layer: Point, Text, đường bình độ, tim đường và hành lang an toàn.</p>
</div>
<div class="glass p-8 rounded-3xl">
<div class="text-blue-500 text-3xl mb-6"><i class="fas fa-exchange-alt"></i></div>
<h3 class="text-xl font-bold mb-4">Định dạng NNT & KML</h3>
<p class="text-gray-400">Quản lý tệp .nnt độc quyền, hỗ trợ chuyển đổi từ KML giúp bảo toàn toàn bộ dữ liệu hiện trường.</p>
</div>
</div>
</div>
</section>
<section class="py-20 px-6 bg-blue-600">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-12 text-white">Đối tượng sử dụng chính</h2>
<div class="flex flex-wrap justify-center gap-4">
<span class="bg-white/10 px-6 py-3 rounded-xl border border-white/20 font-semibold text-lg">Giao thông</span>
<span class="bg-white/10 px-6 py-3 rounded-xl border border-white/20 font-semibold text-lg">Điện & Năng lượng</span>
<span class="bg-white/10 px-6 py-3 rounded-xl border border-white/20 font-semibold text-lg">Địa chính & Trắc địa</span>
<span class="bg-white/10 px-6 py-3 rounded-xl border border-white/20 font-semibold text-lg">Xây dựng hạ tầng</span>
</div>
</div>
</section>
<section class="py-24 px-6">
<div class="max-w-5xl mx-auto rounded-[2rem] overflow-hidden shadow-2xl border border-white/10">
<div class="bg-slate-800 p-4 flex gap-2 border-b border-white/5">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="bg-slate-900 aspect-video flex items-center justify-center group relative cursor-pointer">
<img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&q=80&w=1500" alt="App in action" class="object-cover w-full h-full opacity-50 group-hover:opacity-70 transition">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-3xl shadow-2xl">
<i class="fas fa-play ml-1"></i>
</div>
</div>
</div>
</div>
</section>
<section id="download" class="py-24 px-6 text-center border-t border-white/5">
<div class="max-w-3xl mx-auto">
<h2 class="text-4xl font-bold mb-8">Bắt đầu khảo sát chuyên nghiệp ngay hôm nay</h2>
<p class="text-gray-400 mb-12">Nâng cao hiệu suất công việc, tiết kiệm hàng giờ đồng hồ ngồi máy tính. Tải Survey One trên iPhone của bạn.</p>
<div class="flex flex-col items-center">
<a href="URL_APP_STORE_CUA_BAN" class="transition transform hover:scale-105 active:scale-95">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/vi-vn?size=250x83" alt="App Store" class="h-16">
</a>
<p class="mt-6 text-gray-500 text-sm">Yêu cầu iOS 15.0 trở lên.</p>
</div>
</div>
</section>
<footer class="py-12 text-center text-gray-600 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6">
<p>© 2026 Survey One Professional. Toàn quyền bảo lưu.</p>
<div class="mt-4 flex justify-center gap-6 text-xs uppercase tracking-widest">
<span>Format: .NNT</span>
<span>Format: .DXF</span>
<span>Format: .KML</span>
</div>
</div>
</footer>
</body>
</html>