File Manager

✏️ Edit File: /home/kientructhaiha/htdocs/kientructhaiha.com/index_ori.html

<!DOCTYPE html>

<html class="scroll-smooth" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>THAI HA | Kiến Tạo Không Gian - Nâng Tầm Đẳng Cấp</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&amp;family=Inter:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "tertiary-fixed": "#e2e2e2",
                        "on-error-container": "#93000a",
                        "on-primary": "#ffffff",
                        "surface-variant": "#e3e2e2",
                        "on-primary-fixed": "#1c1b1b",
                        "primary-fixed-dim": "#c8c6c5",
                        "tertiary": "#000000",
                        "on-primary-container": "#858383",
                        "on-surface": "#1b1c1c",
                        "primary": "#000000",
                        "on-secondary-container": "#715000",
                        "error-container": "#ffdad6",
                        "on-secondary-fixed": "#271900",
                        "primary-fixed": "#e5e2e1",
                        "surface-tint": "#5f5e5e",
                        "on-tertiary-fixed-variant": "#454747",
                        "error": "#ba1a1a",
                        "surface-container-lowest": "#ffffff",
                        "surface-container": "#efeded",
                        "on-secondary-fixed-variant": "#5d4200",
                        "on-tertiary-fixed": "#1a1c1c",
                        "on-error": "#ffffff",
                        "on-tertiary": "#ffffff",
                        "on-secondary": "#ffffff",
                        "inverse-surface": "#303031",
                        "surface-container-highest": "#e3e2e2",
                        "on-surface-variant": "#444748",
                        "background": "#fbf9f9",
                        "outline": "#747878",
                        "secondary-fixed-dim": "#f7bd48",
                        "on-primary-fixed-variant": "#474746",
                        "secondary-fixed": "#ffdea6",
                        "secondary": "#7b5800",
                        "inverse-on-surface": "#f2f0f0",
                        "secondary-container": "#fdc34d",
                        "outline-variant": "#c4c7c7",
                        "tertiary-container": "#1a1c1c",
                        "inverse-primary": "#c8c6c5",
                        "surface-container-low": "#f5f3f3",
                        "surface-bright": "#fbf9f9",
                        "surface": "#fbf9f9",
                        "on-background": "#1b1c1c",
                        "surface-dim": "#dbdad9",
                        "on-tertiary-container": "#838484",
                        "primary-container": "#1c1b1b",
                        "surface-container-high": "#e9e8e7",
                        "tertiary-fixed-dim": "#c6c6c7"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "section-gap": "160px",
                        "gutter": "32px",
                        "margin-desktop": "80px",
                        "container-max": "1440px",
                        "margin-mobile": "24px"
                    },
                    "fontFamily": {
                        "headline-lg-mobile": ["Playfair Display"],
                        "body-lg": ["Inter"],
                        "body-md": ["Inter"],
                        "headline-md": ["Playfair Display"],
                        "headline-lg": ["Playfair Display"],
                        "label-caps": ["Inter"],
                        "display-lg": ["Playfair Display"]
                    },
                    "fontSize": {
                        "headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "600"}],
                        "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
                        "body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
                        "headline-md": ["32px", {"lineHeight": "1.3", "fontWeight": "500"}],
                        "headline-lg": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
                        "label-caps": ["12px", {"lineHeight": "1.0", "letterSpacing": "0.15em", "fontWeight": "600"}],
                        "display-lg": ["80px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}]
                    }
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .text-stroke {
            -webkit-text-stroke: 1px currentColor;
            color: transparent;
        }
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        #hero-parallax {
            transition: transform 0.1s linear;
            will-change: transform;
        }
    </style>
</head>
<body class="bg-background text-on-surface font-body-md overflow-x-hidden">

<nav class="fixed top-0 w-full z-50 bg-transparent transition-all duration-700 ease-in-out" id="main-nav">
<div class="flex justify-between items-center px-margin-desktop py-6 max-w-container-max mx-auto transition-all duration-700" id="nav-container">
<div class="flex items-center gap-4">
<img alt="THAI HA Logo" class="h-10 w-auto object-contain" src="assets/images/logo.png"/>
<span class="font-headline-lg text-body-lg tracking-tighter text-primary">THÁI HÀ</span>
</div>
<div class="hidden md:flex items-center gap-10">
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#projects">Công trình</a>
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#services">Dịch vụ</a>
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#process">Quy trình</a>
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#about">Giới thiệu</a>
<a class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#contact">Liên hệ</a>
</div>
<button class="bg-primary text-on-primary px-8 py-3 rounded-none font-label-caps text-label-caps hover:bg-opacity-80 transition-all">
            Inquire
        </button>
</div>
</nav>

<section class="relative h-screen flex items-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img alt="Hero architectural scene" class="w-full h-full object-cover scale-110" id="hero-parallax" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDWoDwVq7aIA4hJ-rJSv5Eqgie4CTLaO5bvjmDoJgn-Ej625WhwMOU8AOKH54RHacWwigo3SUEFtZAmKC8p5Q2upZS8uZb6jac8Z5nXVdEJ2ee28Swi_P4uftHs4F12eFfZkH0U2O62TGhnN2sk1ANiEbnzKVfhltOs-LSKL_mxSj_deHFLGIw0uZcT6Ng5vG1S_4HLMG8bhMB7gx7kjZDWLIRoZV5OQNRqLFSKpSqt0mIUw0Wv0Q8fPDFtjwMeNNxnsQnV3MR9Ixs"/>
<div class="absolute inset-0 bg-black/40"></div>
</div>
<div class="relative z-10 px-margin-desktop w-full max-w-container-max mx-auto">
<div class="max-w-4xl">
<h1 class="font-display-lg text-display-lg text-white mb-8 reveal" id="hero-title">
                Kiến Tạo Không Gian <br/> <span class="text-stroke text-white italic">Nâng Tầm Đẳng Cấp</span>
</h1>
<p class="font-body-lg text-body-lg text-white/80 mb-12 max-w-xl reveal" style="transition-delay: 200ms;">
                Chúng tôi định hình lối sống thượng lưu thông qua những thiết kế kiến trúc đương đại, tinh tế và đầy cảm hứng.
            </p>
<div class="flex gap-6 reveal" style="transition-delay: 400ms;">
<a class="border border-white text-white px-10 py-4 font-label-caps text-label-caps hover:bg-white hover:text-black transition-all" href="#projects">Xem dự án</a>
<a class="bg-white text-black px-10 py-4 font-label-caps text-label-caps hover:bg-opacity-90 transition-all" href="#contact">Liên hệ ngay</a>
</div>
</div>
</div>
<div class="absolute bottom-10 right-margin-desktop flex flex-col items-center gap-4 text-white reveal" style="transition-delay: 600ms;">
<span class="font-label-caps text-label-caps rotate-90 origin-right translate-y-8 mb-8">Scroll</span>
<div class="w-px h-20 bg-white/30 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1/2 bg-white animate-bounce"></div>
</div>
</div>
</section>

<section class="py-section-gap px-margin-desktop max-w-container-max mx-auto reveal" id="about">
<div class="grid grid-cols-12 gap-gutter items-center">
<div class="col-span-12 lg:col-span-5">
<span class="font-label-caps text-label-caps text-secondary block mb-6">VỀ THÁI HÀ</span>
<h2 class="font-headline-lg text-headline-lg mb-8 leading-tight">Mỗi công trình là một kiệt tác nghệ thuật độc bản.</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8">
                Được dẫn dắt bởi KTS. Trần Thái Hà, chúng tôi không chỉ xây dựng nhà, chúng tôi kiến tạo những trải nghiệm sống. Với triết lý lấy con người làm trung tâm, mỗi đường nét thiết kế đều mang trong mình hơi thở của sự sang trọng, bền vững và cá tính riêng của gia chủ.
            </p>
<div class="grid grid-cols-2 gap-8 pt-8 border-t border-outline/10">
<div>
<div class="font-display-lg text-[40px] text-primary mb-2">6+</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Năm kinh nghiệm</div>
</div>
<div>
<div class="font-display-lg text-[40px] text-primary mb-2">50+</div>
<div class="font-label-caps text-label-caps text-on-surface-variant">Dự án hoàn thành</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-start-7 lg:col-span-6 mt-12 lg:mt-0">
<div class="relative aspect-[4/5] overflow-hidden group">
<img alt="A luxurious minimalist interior featuring a large sculptural white curved sofa" class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvpNMMJ7HSiWekqoD24vtPrYFdRqVjztEYtnhB0_qO_R2TXuXUk5Ve3Vs-N3fjHaHqDOiv_J3UBgCXc4WiKzh2YvW8E9rDooOf2lIWkC49ifJltIgj_h3F5x-q9zULYvseGUao_XD1ODkCpbNrUwQ38_SvQ1Re0LeD9gIPp9rd-5n3mp7hHgFPYLPRDKi71qO0wZfjArqfU2P_ZZT42xcn6yIK4jMu1Yd2RkqVdHyz2uYx0ZPW8n-VWJLSmhf2izj04-d9f0iH29M"/>
</div>
</div>
</div>
</section>

<section class="bg-tertiary text-on-tertiary py-section-gap overflow-hidden" id="services">
<div class="px-margin-desktop max-w-container-max mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-24 reveal">
<div class="max-w-2xl">
<span class="font-label-caps text-label-caps text-secondary-fixed block mb-6">DỊCH VỤ CỦA CHÚNG TÔI</span>
<h2 class="font-headline-lg text-headline-lg text-white">Giải pháp toàn diện cho không gian sống thượng lưu.</h2>
</div>
<div class="hidden md:block">
<a class="flex items-center gap-4 text-white hover:gap-6 transition-all duration-300" href="#contact">
<span class="font-label-caps text-label-caps">Tất cả dịch vụ</span>
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 reveal">

<div class="group border border-white/10 p-10 hover:bg-white/10 hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<span class="material-symbols-outlined text-4xl mb-10 text-secondary-fixed transition-transform group-hover:scale-110">architecture</span>
<h3 class="font-headline-md text-2xl mb-4">Thiết kế Kiến trúc</h3>
<p class="text-white/60 font-body-md text-sm leading-relaxed mb-8">Kiến tạo hình khối và không gian độc bản, tối ưu công năng và thẩm mỹ.</p>
</div>

<div class="group border border-white/10 p-10 hover:bg-white/10 hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<span class="material-symbols-outlined text-4xl mb-10 text-secondary-fixed transition-transform group-hover:scale-110">construction</span>
<h3 class="font-headline-md text-2xl mb-4">Thi công Trọn gói</h3>
<p class="text-white/60 font-body-md text-sm leading-relaxed mb-8">Cam kết chất lượng thi công tinh xảo, đúng tiến độ và ngân sách.</p>
</div>

<div class="group border border-white/10 p-10 hover:bg-white/10 hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<span class="material-symbols-outlined text-4xl mb-10 text-secondary-fixed transition-transform group-hover:scale-110">chair</span>
<h3 class="font-headline-md text-2xl mb-4">Thiết kế Nội thất</h3>
<p class="text-white/60 font-body-md text-sm leading-relaxed mb-8">Sắp đặt nội thất tinh tế, phản ánh phong cách cá nhân của chủ sở hữu.</p>
</div>

<div class="group border border-white/10 p-10 hover:bg-white/10 hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<span class="material-symbols-outlined text-4xl mb-10 text-secondary-fixed transition-transform group-hover:scale-110">visibility</span>
<h3 class="font-headline-md text-2xl mb-4">Tư vấn Giám sát</h3>
<p class="text-white/60 font-body-md text-sm leading-relaxed mb-8">Đảm bảo mọi chi tiết thiết kế được thực thi chính xác trên thực tế.</p>
</div>

<div class="group border border-white/10 p-10 hover:bg-white/10 hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<span class="material-symbols-outlined text-4xl mb-10 text-secondary-fixed transition-transform group-hover:scale-110">history_edu</span>
<h3 class="font-headline-md text-2xl mb-4">Cải tạo Kiến trúc</h3>
<p class="text-white/60 font-body-md text-sm leading-relaxed mb-8">Làm mới và tối ưu hóa không gian cũ với ngôn ngữ thiết kế hiện đại.</p>
</div>
</div>
</div>
</section>

<section class="py-section-gap px-margin-desktop max-w-container-max mx-auto" id="projects">
<div class="text-center mb-20 reveal">
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-6">DỰ ÁN TIÊU BIỂU</span>
<h2 class="font-headline-lg text-headline-lg">Công trình đã thực hiện</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">

<div class="md:col-span-8 reveal overflow-hidden group cursor-pointer">
<div class="relative aspect-[16/9] overflow-hidden">
<img alt="Luxury Villa Project" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUfOdl-GlW71x6bt8WuE5wqlPtnH2dZMDSlQ9-kLMrKhKLI_RPPP5xBoM8f5Dw3f4I1ArgTLbK4AmvYWeor_71RpkJWqzTBQah80lleva4wWFdRKEBUo4JXm-Pcic8Ixa98EYSCh76nNOpynE5lohOa5lXyBgkEzN7k4sRq3nmAEEGFNGd8zBw_X7NegdTU3uYiE3Kd_9FrWm80jPTJSNCgg_TIwUKQ0yAiHoTLfUZv2G7-ZFEGSe7Cwshrq87tgjkz-f1v1mBKjE"/>
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/60 transition-all duration-500"></div>
<div class="absolute bottom-10 left-10 text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100">
<span class="font-label-caps text-label-caps block mb-2">QUẢNG BÌNH, VIỆT NAM</span>
<h3 class="font-headline-md text-3xl">Villa The Ocean Oasis</h3>
</div>
</div>
</div>

<div class="md:col-span-4 reveal overflow-hidden group cursor-pointer">
<div class="relative aspect-[4/5] overflow-hidden">
<img alt="Exterior view of a modern luxury mansion" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVKYKMKIPHNVnXstjVNye2nXauQ8q15KcQa5hJ8MJwZ6LR_2diV0X2NrImhOq1MTojhqYzZHll1d_eKPA6azY6r3_jJilipsg45HZGkUDNDpBR4BQoh-sysQXCeIlZdUbYZ76NYz2-1moWn8tKed3IlbzZ6VsCxVFCTM-3m4kimPxLzIWVd7OjEuV5ZwvqdRHKNya6F1F6_XW6xORszcsWUGDS4DtNtpnR-i25YDG0l3NYnvNhPT2q9_hFWDe3Wolki2S5A4bWvBU"/>
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/60 transition-all duration-500"></div>
<div class="absolute bottom-8 left-8 text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100">
<span class="font-label-caps text-label-caps block mb-2">SHOWROOM</span>
<h3 class="font-headline-md text-2xl">L'Elegance Gallery</h3>
</div>
</div>
</div>

<div class="md:col-span-4 reveal overflow-hidden group cursor-pointer">
<div class="relative aspect-[4/5] overflow-hidden">
<img alt="A modern penthouse balcony" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuANmb9ue0LRyNtt3FMy8Aui18fetRFuZflEZIKqmuapgttDI3Yd5Os0w5PhuTHEKDyEttDXvWLz6uP9VKhleQlMih33RlRVLdXBmwqjIn2U5YeLzIrd7IniE2COyM3dEh6r-jZ68qIKpxhVfEIHsGvfbSPg4bxbjVOvNbDSh8qWeLBDOpPp93dru2YRGCMPhzHpu92WlDEfyPc1qYtu1thvwo-CjQTiXaEqd4rLyo6X03Q_p7wFqHuf-pojPyU89pT8zDgfdLfQYyo"/>
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/60 transition-all duration-500"></div>
<div class="absolute bottom-8 left-8 text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100">
<span class="font-label-caps text-label-caps block mb-2">PENTHOUSE</span>
<h3 class="font-headline-md text-2xl">Skyline Haven</h3>
</div>
</div>
</div>

<div class="md:col-span-8 reveal overflow-hidden group cursor-pointer">
<div class="relative aspect-[16/9] overflow-hidden">
<img alt="A contemporary family residence" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2Mo16yYTCBHvlOTmy5jHA9RyY9VlrhheznofKW7dM98rJgXg0GHTCgtkBE3OCEE1Zl7fOVXQFM1rOr_wl-s5Q-foYaRQMVUHTDohBDoIOK7sYhVdiq_EhES1H3DoJWgeykVXGXabf1MiC3H_NHD9ZzVibjZ49nffsvc5qWPQyPPLJCDwqBrkkHjVQWM9m9n38VESc9wX1f0qYgWEtvEslFALsvbfYcw11s8ScatSEDMJ3J_WxRhenpPTB_VnBvS8ky571OQ_u_Tw"/>
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/60 transition-all duration-500"></div>
<div class="absolute bottom-10 left-10 text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100">
<span class="font-label-caps text-label-caps block mb-2">VILLA</span>
<h3 class="font-headline-md text-3xl">Forest Edge Retreat</h3>
</div>
</div>
</div>
</div>
</section>
<section class="py-section-gap px-margin-desktop max-w-container-max mx-auto" id="reference-models">
<div class="text-center mb-20 reveal">
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-6 uppercase tracking-widest">CẢM HỨNG KIẾN TRÚC</span>
<h2 class="font-headline-lg text-headline-lg">Mẫu nhà tham khảo</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="group reveal" style="transition-delay: 100ms;">
<div class="aspect-[4/3] overflow-hidden mb-8 bg-surface-container">
<img alt="Biệt thự hiện đại" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJGyR23Ty5nwWAf89OtstElz6csiStt7dbL_5m7swNKLOpQxglAMWOHHy5V2UGc5sbrqwQUwmzy7NTDdVhAVgb0-nBhoADxwFcB7V2r7kFW8Z9dk3mmDaBN8LpkRZRFuinb6HELQkicv2JWLdFGc7Gqi1zCRPKVNIJBKp-1sLvVF7DcrA4V3MRKS_JkkMEolPNyqaEG3U8NZhVxCBWrPUhIcN5SJdNyZB5Nm9sxS1VpOIOkekb9v4LxUoX9xZwv5OnoxyjeZGVggo"/>
</div>
<span class="font-label-caps text-label-caps text-secondary block mb-3">Biệt thự hiện đại</span>
<h3 class="font-headline-md text-2xl mb-4">Minimalist White Villa</h3>
<p class="font-body-md text-on-surface-variant">Sự giao thoa hoàn hảo giữa hình khối tối giản và ánh sáng tự nhiên, tạo nên một không gian sống thanh khiết và tinh tế.</p>
</div>
<div class="group reveal" style="transition-delay: 200ms;">
<div class="aspect-[4/3] overflow-hidden mb-8 bg-surface-container">
<img alt="Nhà phố bền vững" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdcy1keEhd59elKAjzRgOrUR6qDJY_W0uICp_2jo17gY4rvKC82GmkEGfTCEY1H0o0ByKZoDiZQQbEXlbSesfCne65IJONyNLccxj5w8frcNcVxFhVmDuMj69AP10o5MVBzeBH9ipGaKEGosrkhZreA7tn9-loCDs2Bd-8Ud0PxQig267z9PpMhUzhKm3F7-wtrgJqcohKbgc9mvNYeNtjEULe392D4LcCBE9oDsVvm7RYaCI_-ZgUsMEV65qPstzP20KixXZ1vuU"/>
</div>
<span class="font-label-caps text-label-caps text-secondary block mb-3">Nhà phố bền vững</span>
<h3 class="font-headline-md text-2xl mb-4">Eco-Townhouse Concept</h3>
<p class="font-body-md text-on-surface-variant">Ứng dụng vật liệu gỗ tự nhiên và năng lượng tái tạo, mang lại giải pháp sống xanh bền vững giữa lòng đô thị.</p>
</div>
<div class="group reveal" style="transition-delay: 300ms;">
<div class="aspect-[4/3] overflow-hidden mb-8 bg-surface-container">
<img alt="Resort nghỉ dưỡng" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida/ADBb0uhgvVpg6mEY10SdO_KDHSCXXza_ED6AerW-tYv2hahPy4HpRB0XvnmYVfm_LzsjdUbmFJQstg6xd6iCrIdElTL3b6nR0paJoaCSOcL2qPLW5z4utvoyzrBykSZTXHsPHtA6F4C874q6zdsuHFirYP1jZ4AP1_XJUz7HqJ4DjhHxM2_EnZsrEqvIAixMm70Ms-5YAmz_xyY3G__Ocz0rn79azOpiD6naxngMb8ublUkPxW-HNjhrm7d8sao"/>
</div>
<span class="font-label-caps text-label-caps text-secondary block mb-3">Resort nghỉ dưỡng</span>
<h3 class="font-headline-md text-2xl mb-4">Tropical Modernism Villa</h3>
<p class="font-body-md text-on-surface-variant">Tận dụng tối đa tầm nhìn hướng biển và kiến trúc mở, tái định nghĩa trải nghiệm nghỉ dưỡng xa hoa và riêng tư.</p>
</div>
</div>
</section>

<section class="bg-surface-container-low py-section-gap" id="process">
<div class="px-margin-desktop max-w-container-max mx-auto">
<div class="grid grid-cols-12 gap-gutter">
<div class="col-span-12 lg:col-span-4 reveal">
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-6">QUY TRÌNH LÀM VIỆC</span>
<h2 class="font-headline-lg text-headline-lg mb-10">Lộ trình hiện thực hóa ước mơ.</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">
                    Chúng tôi thiết lập một quy trình làm việc chặt chẽ, minh bạch nhằm đảm bảo sự hài lòng tuyệt đối của khách hàng trong từng giai đoạn.
                </p>
</div>
<div class="col-span-12 lg:col-start-6 lg:col-span-7">
<div class="space-y-0">

<div class="group py-12 border-b border-outline/10 flex items-start gap-10 reveal">
<span class="font-display-lg text-4xl text-outline/30 group-hover:text-primary transition-colors">01</span>
<div>
<h3 class="font-headline-md text-2xl mb-4 group-hover:translate-x-2 transition-transform duration-300">Khảo sát &amp; Tư vấn</h3>
<p class="text-on-surface-variant max-w-md">Lắng nghe nhu cầu, khảo sát mặt bằng và đưa ra những tư vấn chuyên môn sơ bộ về không gian và ngân sách.</p>
</div>
</div>
<div class="group py-12 border-b border-outline/10 flex items-start gap-10 reveal">
<span class="font-display-lg text-4xl text-outline/30 group-hover:text-primary transition-colors">02</span>
<div>
<h3 class="font-headline-md text-2xl mb-4 group-hover:translate-x-2 transition-transform duration-300">Thiết kế Ý tưởng (Concept)</h3>
<p class="text-on-surface-variant max-w-md">Phác thảo các phương án mặt bằng và 3D sơ bộ để định hình phong cách kiến trúc của công trình.</p>
</div>
</div>
<div class="group py-12 border-b border-outline/10 flex items-start gap-10 reveal">
<span class="font-display-lg text-4xl text-outline/30 group-hover:text-primary transition-colors">03</span>
<div>
<h3 class="font-headline-md text-2xl mb-4 group-hover:translate-x-2 transition-transform duration-300">Triển khai Kỹ thuật</h3>
<p class="text-on-surface-variant max-w-md">Hoàn thiện hồ sơ thiết kế chi tiết bao gồm kiến trúc, kết cấu, điện nước và nội thất.</p>
</div>
</div>
<div class="group py-12 border-b border-outline/10 flex items-start gap-10 reveal">
<span class="font-display-lg text-4xl text-outline/30 group-hover:text-primary transition-colors">04</span>
<div>
<h3 class="font-headline-md text-2xl mb-4 group-hover:translate-x-2 transition-transform duration-300">Thi công &amp; Giám sát</h3>
<p class="text-on-surface-variant max-w-md">Tiến hành thi công hiện trường dưới sự giám sát chặt chẽ của đội ngũ KTS và kỹ sư chuyên nghiệp.</p>
</div>
</div>
<div class="group py-12 border-b border-outline/10 flex items-start gap-10 reveal">
<span class="font-display-lg text-4xl text-outline/30 group-hover:text-primary transition-colors">05</span>
<div>
<h3 class="font-headline-md text-2xl mb-4 group-hover:translate-x-2 transition-transform duration-300">Nghiệm thu &amp; Bàn giao</h3>
<p class="text-on-surface-variant max-w-md">Kiểm tra chất lượng cuối cùng và bàn giao kiệt tác hoàn hảo cho gia chủ đi vào sử dụng.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="relative h-[80vh] flex items-center justify-center overflow-hidden reveal">
    
    
    <div class="absolute inset-0">
        <video
            class="w-full h-full object-cover"
            autoplay
            muted
            loop
            playsinline
        >
            <source src="assets/video/thai-ha-video.mp4" type="video/mp4">
        </video>

<div class="absolute inset-0 bg-black/50"></div>
    </div>

<!-- <div class="relative z-10 text-center">
        <button class="w-24 h-24 rounded-full border border-white flex items-center justify-center group hover:bg-white transition-all duration-500 mb-8 mx-auto">
            <span class="material-symbols-outlined text-white group-hover:text-black transition-colors"
                style="font-variation-settings: 'FILL' 1;">
                play_arrow
            </span>
        </button>

<h2 class="font-headline-lg text-headline-lg text-white">
            Trải nghiệm không gian 4D
        </h2>
    </div> -->
</section>

<section class="py-section-gap px-margin-desktop max-w-container-max mx-auto">
<div class="flex justify-between items-end mb-20 reveal">
<div class="max-w-xl">
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-6">ĐỘI NGŨ CHUYÊN GIA</span>
<h2 class="font-headline-lg text-headline-lg">Những người đứng sau những công trình đẳng cấp.</h2>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">

<div class="group reveal">
            <div class="aspect-[3/4] overflow-hidden mb-8 bg-surface-container">
<img alt="Trần Thái Hà - Giám đốc" class="w-full h-full object-cover group-hover:scale-105 transition-all duration-700" src="assets/images/tran_thai_ha.jpg"/>
</div>
<h3 class="font-headline-md text-2xl mb-1">Trần Thái Hà</h3>
<p class="font-label-caps text-label-caps text-on-surface-variant">Giám đốc - KTS Trưởng</p>
</div>

<div class="group reveal" style="transition-delay: 100ms;">
<div class="aspect-[3/4] overflow-hidden mb-8 bg-surface-container">
<img alt="Professional portrait of female interior designer" class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6jYjMVP08gkRKqqse1-Lnc0GM8ebJ13ThEjauQHSSsb3Ea7vorgm3OKKBoMlC9KppoEwNTofSuBul4mxOUVoxnM1lKaNCD-5Kjs77QFK4QrDw73HpXXqLP2u9UDwIAcpCmrQYJ5abQeeCP8HuNjQ6MgX13DyhfANwhffmxRBR4bP02lENT0s93Pz_blKu7W-bdPeSbcbfKx3FMAVJkE-2TxWDUPmWP9yvIDwVTCoSqVAaUA8fBOvZmVJRMb0Z41xj4bGW8lOuPyM"/>
</div>
<h3 class="font-headline-md text-2xl mb-1">Lê Minh Anh</h3>
<p class="font-label-caps text-label-caps text-on-surface-variant">Trưởng phòng Thiết kế Nội thất</p>
</div>

<div class="group reveal" style="transition-delay: 200ms;">
<div class="aspect-[3/4] overflow-hidden mb-8 bg-surface-container">
<img alt="Professional portrait of young male civil engineer" class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBf022xfXCKCias2bAVk5pxGM9o3JlUp3QoTYFvBraY1NxvFx8IIyJx9JRRvkEYUQy6pOhEnPVyNklu3fqSPB-ZhA8VUBuvBIZ2Ag8YKuB7UuTioQeIibB-jubw4Fog983pejjGJdCTTIX3r5c0URtx1L9pQJoNk-YIkdC5vusz8T0wZStS3PSDfG2UaUUte4A7S8VaiXErKtdTEgnS6ygzVtcdK-XZNVSNyh2dS2QSXav8eOUQXU9Zs5KuFaNycLge2DAyjWJDjLo"/>
</div>
<h3 class="font-headline-md text-2xl mb-1">Nguyễn Hoài Nam</h3>
<p class="font-label-caps text-label-caps text-on-surface-variant">Giám đốc Kỹ thuật &amp; Thi công</p>
</div>
</div>
</section>

<section class="bg-surface py-section-gap">
<div class="px-margin-desktop max-w-container-max mx-auto border-t border-outline/10 pt-20">
<div class="grid grid-cols-12 gap-gutter">
<div class="col-span-12 lg:col-span-4 reveal">
<span class="material-symbols-outlined text-6xl text-secondary mb-10">format_quote</span>
<h2 class="font-headline-lg text-headline-lg mb-8 italic">Phản hồi từ <br/> khách hàng</h2>
</div>
<div class="col-span-12 lg:col-start-6 lg:col-span-7 reveal">
<div class="space-y-16">
<blockquote class="border-l border-primary pl-10">
<p class="font-body-lg text-body-lg mb-6 leading-relaxed">
                            "Làm việc với THAI HA là một trải nghiệm tuyệt vời. Họ biến những ý tưởng mơ hồ của tôi thành một không gian sống đẳng cấp mà tôi chưa từng nghĩ tới. Sự tỉ mỉ trong từng chi tiết thi công thực sự khiến tôi ấn tượng."
                        </p>
<cite class="not-italic font-label-caps text-label-caps text-primary">Ông Phạm Hoàng Long - Chủ đầu tư Villa The Ocean Oasis</cite>
</blockquote>
<blockquote class="border-l border-primary pl-10">
<p class="font-body-lg text-body-lg mb-6 leading-relaxed">
                            "Sự kết hợp hoàn hảo giữa thẩm mỹ và công năng. Căn penthouse của tôi giờ đây không chỉ là nhà, mà là một tác phẩm nghệ thuật thu nhỏ giữa lòng thành phố. Cảm ơn KTS Hà và đội ngũ."
                        </p>
<cite class="not-italic font-label-caps text-label-caps text-primary">Bà Nguyễn Thùy Dương - Giám đốc Skyline Haven</cite>
</blockquote>
</div>
</div>
</div>
</div>
</section>

<section class="py-section-gap px-margin-desktop max-w-container-max mx-auto bg-surface-container-lowest reveal" id="contact">
<div class="grid grid-cols-12 gap-gutter">
<div class="col-span-12 lg:col-span-5 mb-16 lg:mb-0">
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-6">LIÊN HỆ</span>
<h2 class="font-headline-lg text-headline-lg mb-10">Bắt đầu hành trình kiến tạo cùng chúng tôi.</h2>
<div class="space-y-8">
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-primary">phone_iphone</span>
<p class="font-body-md">Hotline: 0814.811.777</p>
</div>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-primary">apartment</span>
<p class="font-body-md">CÔNG TY TNHH TVTK KIẾN TRÚC & XÂY DỰNG THÁI HÀ</p>
</div>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-primary">location_on</span>
<p class="font-body-md">54 Tôn Đức Thắng, Phường Đồng Hới, Quảng Trị</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-start-7 lg:col-span-6">
<form class="space-y-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div class="border-b border-on-surface/20 py-2 focus-within:border-primary transition-colors">
<label class="font-label-caps text-[10px] text-on-surface-variant block mb-1">HỌ VÀ TÊN</label>
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-md text-on-surface placeholder:opacity-30" placeholder="Nguyễn Văn A" type="text"/>
</div>
<div class="border-b border-on-surface/20 py-2 focus-within:border-primary transition-colors">
<label class="font-label-caps text-[10px] text-on-surface-variant block mb-1">EMAIL</label>
<input class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-md text-on-surface placeholder:opacity-30" placeholder="example@gmail.com" type="email"/>
</div>
</div>
<div class="border-b border-on-surface/20 py-2 focus-within:border-primary transition-colors">
<label class="font-label-caps text-[10px] text-on-surface-variant block mb-1">DỊCH VỤ QUAN TÂM</label>
<select class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-md text-on-surface">
<option>Thiết kế Kiến trúc</option>
<option>Thi công Trọn gói</option>
<option>Thiết kế Nội thất</option>
<option>Cải tạo công trình</option>
</select>
</div>
<div class="border-b border-on-surface/20 py-2 focus-within:border-primary transition-colors">
<label class="font-label-caps text-[10px] text-on-surface-variant block mb-1">LỜI NHẮN</label>
<textarea class="w-full bg-transparent border-none p-0 focus:ring-0 font-body-md text-on-surface placeholder:opacity-30 resize-none" placeholder="Hãy kể cho chúng tôi về dự án của bạn..." rows="4"></textarea>
</div>
<button class="w-full bg-primary text-on-primary py-5 font-label-caps text-label-caps tracking-widest hover:bg-opacity-90 transition-all" type="submit">GỬI YÊU CẦU TƯ VẤN</button>
</form>
</div>
</div>
</section>

<footer class="bg-tertiary text-on-tertiary w-full pt-section-gap pb-12">
<div class="grid grid-cols-1 md:grid-cols-12 px-margin-desktop gap-gutter max-w-container-max mx-auto">
<div class="col-span-12 lg:col-span-4 mb-16 lg:mb-0">
<div class="flex items-center gap-4 mb-8">
<img alt="THAI HA Logo" class="h-10 w-auto" src="assets/images/logo.png"/>
<span class="font-headline-md text-headline-md text-on-tertiary">THÁI HÀ</span>
</div>
<p class="font-body-md text-on-tertiary-container max-w-xs mb-10">
                Kiến tạo không gian, nâng tầm đẳng cấp sống. Đồng hành cùng bạn trong hành trình xây dựng tổ ấm hoàn mỹ.
            </p>
<div class="flex gap-6">
<a class="text-on-tertiary-container hover:text-secondary-fixed transition-colors" href="#"><span class="material-symbols-outlined">public</span></a>
<a class="text-on-tertiary-container hover:text-secondary-fixed transition-colors" href="https://www.facebook.com/kientructhaiha/"><span class="material-symbols-outlined">share</span></a>
<a class="text-on-tertiary-container hover:text-secondary-fixed transition-colors" href="https://www.facebook.com/kientructhaiha/"><span class="material-symbols-outlined">groups</span></a>
</div>
</div>
<div class="col-span-6 md:col-span-4 lg:col-span-2">
<h4 class="font-label-caps text-label-caps mb-8 text-white">LIÊN KẾT</h4>
<ul class="space-y-4 font-body-md text-on-tertiary-container">
<li><a class="hover:text-secondary-fixed transition-colors" href="#projects">Dự án</a></li>
<li><a class="hover:text-secondary-fixed transition-colors" href="#services">Dịch vụ</a></li>
<li><a class="hover:text-secondary-fixed transition-colors" href="#process">Quy trình</a></li>
<li><a class="hover:text-secondary-fixed transition-colors" href="#about">Về chúng tôi</a></li>
</ul>
</div>

<div class="col-span-12 md:col-span-4 lg:col-span-4">
<h4 class="font-label-caps text-label-caps mb-8 text-white">THÔNG TIN DOANH NGHIỆP</h4>
<div class="font-body-md text-on-tertiary-container space-y-2">
<p>CÔNG TY TNHH TVTK KIẾN TRÚC & XÂY DỰNG THÁI HÀ</p>
<p>54 Tôn Đức Thắng, Phường Đồng Hới, Quảng Trị</p>
</div>
</div>
</div>
</footer>
<script>
    // Reveal animations using IntersectionObserver
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.15
    };

document.querySelectorAll('.reveal').forEach(el => {
        revealObserver.observe(el);
    });

// Header transition & Hero Parallax
    const header = document.getElementById('main-nav');
    const navContainer = document.getElementById('nav-container');
    const heroParallax = document.getElementById('hero-parallax');

window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;

// Header Background
        if (scrollY > 50) {
            header.classList.remove('bg-transparent');
            header.classList.add('bg-surface/80', 'backdrop-blur-md', 'border-b', 'border-outline/10');
            navContainer.classList.remove('py-6');
            navContainer.classList.add('py-4');
        } else {
            header.classList.add('bg-transparent');
            header.classList.remove('bg-surface/80', 'backdrop-blur-md', 'border-b', 'border-outline/10');
            navContainer.classList.add('py-6');
            navContainer.classList.remove('py-4');
        }

// Subtle Parallax Effect for Hero Image
        if (scrollY < window.innerHeight) {
            heroParallax.style.transform = `translateY(${scrollY * 0.3}px)`;
        }
    });

// Ensure initial check for elements in viewport
    document.addEventListener('DOMContentLoaded', () => {
        // Initial nav state check
        if (window.scrollY > 50) {
            header.classList.add('bg-surface/80', 'backdrop-blur-md', 'border-b', 'border-outline/10');
            navContainer.classList.remove('py-6');
            navContainer.classList.add('py-4');
        }
    });
</script>
</body></html>

Batal

⬅ Naik ke htdocs 31 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁.well-known	dir	—	2026-07-24 07:01	📂 Buka
📁CTY-XD-THÁI-HA	dir	—	2026-06-10 09:05	📂 Buka
📁admin	dir	—	2026-05-20 13:21	📂 Buka
📁api	dir	—	2026-05-20 04:55	📂 Buka
📁assets	dir	—	2026-07-07 05:40	📂 Buka
📁backend	dir	—	2026-05-20 04:51	📂 Buka
📁data	dir	—	2026-06-07 16:02	📂 Buka
📁database	dir	—	2026-05-20 04:51	📂 Buka
📁scripts	dir	—	2026-06-09 06:31	📂 Buka
📁shop	dir	—	2026-07-16 21:46	📂 Buka
📄.htaccess	htaccess	355 B	2026-05-20 13:20	✏️ Edit 👁️ View
📄.htaccess.bak	bak	2.2 KB	2026-05-20 13:04	✏️ Edit 👁️ View
🌐0x.html	html	27.9 KB	2026-07-06 19:04	✏️ Edit 👁️ View
📝ADMIN_README.md	md	9.4 KB	2026-05-20 05:00	✏️ Edit 👁️ View
📝DESIGN.md	md	6.9 KB	2026-05-19 21:26	✏️ Edit 👁️ View
📝FILE_INDEX.md	md	12.9 KB	2026-05-20 05:00	✏️ Edit 👁️ View
📝IMPLEMENTATION_NOTES.md	md	10.4 KB	2026-05-20 05:00	✏️ Edit 👁️ View
📝PROJECT_SUMMARY.md	md	11 KB	2026-05-20 05:00	✏️ Edit 👁️ View
📝QUICK_START.md	md	5.3 KB	2026-05-20 05:00	✏️ Edit 👁️ View
📝README.md	md	7.3 KB	2026-05-20 05:00	✏️ Edit 👁️ View
🐘cong-trinh.php	php	3.8 KB	2026-06-03 14:19	✏️ Edit 👁️ View
🌐google498da99091b4d99f.html	html	53 B	2026-07-07 05:43	✏️ Edit 👁️ View
🌐google6e4b120316d9a4ce.html	html	53 B	2026-07-07 05:43	✏️ Edit 👁️ View
🐘index.php	php	1.4 KB	2026-07-07 05:42	✏️ Edit 👁️ View
🐘index_copy.php	php	52.6 KB	2026-06-09 06:31	✏️ Edit 👁️ View
🌐index_ori.html	html	39 KB	2026-06-08 07:10	✏️ Edit 👁️ View
🐘index_ori.php	php	55.3 KB	2026-06-16 12:42	✏️ Edit 👁️ View
📝readme.txt	txt	2 MB	2026-07-07 05:42	✏️ Edit 👁️ View
📝robots.txt	txt	71 B	2026-07-07 05:44	✏️ Edit 👁️ View
🖼️screen.png	png	192.7 KB	2026-05-19 21:26	✏️ Edit 👁️ View
📄sitemap.xml	xml	521 B	2026-07-07 05:46	✏️ Edit 👁️ View