File Manager

✏️ Edit File: /home/kientructhaiha/htdocs/kientructhaiha.com/index_copy.php

<?php
/**
 * index.php - Trang chủ Website Thái Hà
 * Đã chuyển từ HTML sang PHP để xử lý form contact
 */

require_once 'backend/config.php';

// Handle form submission
$form_message = '';
$form_type = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_submit'])) {
    // Validate inputs
    $full_name = isset($_POST['full_name']) ? sanitize($_POST['full_name']) : '';
    $email = isset($_POST['email']) ? sanitize($_POST['email']) : '';
    $phone = isset($_POST['phone']) ? sanitize($_POST['phone']) : '';
    $subject = isset($_POST['subject']) ? sanitize($_POST['subject']) : 'Yêu cầu tư vấn';
    $message = isset($_POST['message']) ? sanitize($_POST['message']) : '';
    
    if (empty($full_name) || empty($email) || empty($phone) || empty($message)) {
        $form_message = 'Vui lòng điền đầy đủ các trường bắt buộc';
        $form_type = 'error';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $form_message = 'Email không hợp lệ';
        $form_type = 'error';
    } else {
        // Save consultation into database so admin can see it
        $full_name_db = $mysqli->real_escape_string($full_name);
        $phone_db = $mysqli->real_escape_string($phone);
        $email_db = $mysqli->real_escape_string($email);
        $subject_db = $mysqli->real_escape_string($subject);
        $message_db = $mysqli->real_escape_string($message);

$query = "INSERT INTO consultations (full_name, phone, email, subject, message, status) VALUES ('$full_name_db', '$phone_db', '$email_db', '$subject_db', '$message_db', 'new')";
        $result = $mysqli->query($query);

if ($result) {
            $form_message = 'Cảm ơn bạn! Chúng tôi sẽ liên hệ với bạn sớm nhất.';
            $form_type = 'success';
            // Clear form
            $_POST = array();
        } else {
            $form_message = 'Có lỗi xảy ra. Vui lòng thử lại sau.';
            $form_type = 'error';
        }
    }
}

$homepage_projects = get_projects();
$team_members = get_team_members();
ensure_default_services_synced();
$homepage_services = get_services(true);
if (empty($homepage_services)) {
    $homepage_services = get_default_services_data();
}
$showcase_items = [];
$showcase_result = $mysqli->query("SELECT * FROM banners WHERE page = 'showcase' AND status = 'active' ORDER BY display_order ASC");
if ($showcase_result) {
    while ($row = $showcase_result->fetch_assoc()) {
        $showcase_items[] = $row;
    }
}

$about_content = get_about_content();
$about_main_title = $about_content['main_title'] ?: 'Mỗi công trình là một kiệt tác nghệ thuật độc bản.';
$about_main_description = $about_content['main_description'] ?: 'Đượ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ủ.';
$about_stats = $about_content['stats'] ?? [];
$about_showcase_data = [];
$active_about_items = array_filter($about_content['showcase'] ?? [], function ($item) {
    return isset($item['status']) && $item['status'] === 'active';
});

if (!empty($active_about_items)) {
    foreach ($active_about_items as $item) {
        $about_showcase_data[] = [
            'title' => $item['title'] ?: 'Công trình tiêu biểu',
            'subtitle' => $item['description'] ?: 'Khám phá những dự án tiêu biểu và hình ảnh thiết kế đẳng cấp được quản lý bằng admin.',
            'image' => $item['image_url'] ?: 'assets/images/project-mid.jpg',
            'label' => $item['label'] ?: 'Công trình tiêu biểu'
        ];
    }
} else {
    $about_showcase_data = [
        [
            'title' => 'Kiệt tác kiến trúc độc bản',
            'subtitle' => 'Khám phá những dự án tiêu biểu và hình ảnh thiết kế đẳng cấp được quản lý bằng admin.',
            'image' => 'assets/images/project-mid.jpg',
            'label' => 'Công trình tiêu biểu'
        ],
        [
            'title' => 'Không gian nội thất sang trọng',
            'subtitle' => 'Mỗi hình ảnh thể hiện phong cách thiết kế tinh tế, hoàn thiện bởi đội ngũ chuyên nghiệp.',
            'image' => 'assets/images/project-side-1.jpg',
            'label' => 'Sản phẩm nội thất'
        ],
        [
            'title' => 'Thiết kế đậm chất thượng lưu',
            'subtitle' => 'Từng chi tiết được chăm chút tỉ mỉ để tạo nên không gian sống đẳng cấp.',
            'image' => 'assets/images/project-side-2.jpg',
            'label' => 'Không gian thượng lưu'
        ]
    ];
}
?>
<!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"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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;
        }
        
        /* Form Styles */
        .form-alert {
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            animation: slideDown 0.3s ease;
        }
        
        .form-alert.success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .form-alert.error {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #f5c6cb;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .showcase-toggle-button {
            width: 56px;
            height: 56px;
            border-radius: 9999px;
            backdrop-filter: blur(12px);
        }
        .nav-link {
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
        }
        .showcase-overlay {
            background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.75) 100%);
        }
</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-white nav-link">THÁI HÀ</span>
</div>
<div class="hidden md:flex items-center gap-10">
<a class="font-label-caps text-label-caps text-white nav-link nav-menu-link hover:text-secondary transition-colors" href="#projects">Công trình</a>
<a class="font-label-caps text-label-caps text-white nav-link nav-menu-link hover:text-secondary transition-colors" href="#services">Dịch vụ</a>
<a class="font-label-caps text-label-caps text-white nav-link nav-menu-link hover:text-secondary transition-colors" href="#process">Quy trình</a>
<a class="font-label-caps text-label-caps text-white nav-link nav-menu-link hover:text-secondary transition-colors" href="#about">Giới thiệu</a>
<a class="font-label-caps text-label-caps text-white nav-link nav-menu-link hover:text-secondary transition-colors" href="#contact">Liên hệ</a>
</div>
<a href="admin/login.php" class="bg-primary text-on-primary px-8 py-3 rounded-none font-label-caps text-label-caps hover:bg-opacity-80 transition-all">
            Đăng nhập
        </a>
</div>
</nav>

<section class="relative h-screen flex items-center overflow-hidden">
<div class="absolute inset-0 z-0">
<video id="hero-parallax" 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 px-margin-desktop w-full max-w-container-max mx-auto">
<div class="grid grid-cols-12 gap-8 items-center h-full">
<div class="col-span-12 lg:col-span-6">
<div class="max-w-3xl">
<h1 class="font-display-lg text-5xl 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 flex-wrap 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="col-span-12 lg:col-span-6">
<div class="relative rounded-[32px] overflow-hidden border border-white/10 bg-black/40 backdrop-blur-xl">
<div class="p-10 lg:p-14">
<span class="font-label-caps text-label-caps text-secondary-fixed block mb-3">CÔNG TRÌNH TIÊU BIỂU</span>
<h3 class="font-headline-md text-3xl mb-4 text-white" id="hero-panel-title">Công trình đã thực hiện</h3>
<p class="font-body-md text-white/80 mb-6" id="hero-panel-description">Những dự án tiêu biểu phản ánh tay nghề và góc nhìn kiến trúc thượng lưu của THÁI HÀ.</p>
<div class="grid grid-cols-3 gap-4" id="hero-panel-images">
<img src="assets/images/project-large.jpg" alt="Dự án 1" class="h-40 w-full object-cover rounded-xl border border-white/10" />
<img src="assets/images/project-side-1.jpg" alt="Dự án 2" class="h-40 w-full object-cover rounded-xl border border-white/10" />
<img src="assets/images/project-side-2.jpg" alt="Dự án 3" class="h-40 w-full object-cover rounded-xl border border-white/10" />
</div>
</div>
<button id="hero-prev" type="button" class="absolute left-6 top-1/2 -translate-y-1/2 z-20 bg-white/10 text-white hover:bg-white/20 shadow-lg showcase-toggle-button">
<i class="fas fa-chevron-left"></i>
</button>
<button id="hero-next" type="button" class="absolute right-6 top-1/2 -translate-y-1/2 z-20 bg-white/10 text-white hover:bg-white/20 shadow-lg showcase-toggle-button">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</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"><?php echo htmlspecialchars($about_main_title); ?></h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8">
                <?php echo nl2br(htmlspecialchars($about_main_description)); ?>
            </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"><?php echo htmlspecialchars($about_stats[0]['count'] ?? '6+'); ?></div>
<div class="font-label-caps text-label-caps text-on-surface-variant"><?php echo htmlspecialchars($about_stats[0]['label'] ?? 'Năm kinh nghiệm'); ?></div>
</div>
<div>
<div class="font-display-lg text-[40px] text-primary mb-2"><?php echo htmlspecialchars($about_stats[1]['count'] ?? '50+'); ?></div>
<div class="font-label-caps text-label-caps text-on-surface-variant"><?php echo htmlspecialchars($about_stats[1]['label'] ?? '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 overflow-hidden rounded-[32px] border border-outline/10 bg-surface-container">
                <div class="relative aspect-[4/5] overflow-hidden">
                    <img id="about-showcase-image" src="assets/images/project-mid.jpg" alt="Công trình tiêu biểu" class="w-full h-full object-cover transition-transform duration-700" />
                    <div class="absolute inset-0 bg-black/20"></div>
                    <div class="absolute inset-0 flex items-center justify-between px-4">
                        <button id="about-showcase-prev" type="button" class="bg-white/15 text-white hover:bg-white/30 rounded-full w-12 h-12 flex items-center justify-center transition-all">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button id="about-showcase-next" type="button" class="bg-white/15 text-white hover:bg-white/30 rounded-full w-12 h-12 flex items-center justify-center transition-all">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-0 left-0 right-0 bg-black/50 p-6 text-white">
                        <span class="font-label-caps text-label-caps text-secondary-fixed block mb-3" id="about-showcase-label">Công trình tiêu biểu</span>
                        <h3 class="font-headline-md text-3xl mb-3" id="about-showcase-title">Kiệt tác kiến trúc độc bản</h3>
                        <p class="font-body-md text-white/80" id="about-showcase-description">Khám phá những dự án tiêu biểu và hình ảnh thiết kế đẳng cấp được quản lý bằng admin.</p>
                    </div>
                </div>
            </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">
    <?php foreach ($homepage_services as $service): ?>
        <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"><?php echo htmlspecialchars($service['icon'] ?: 'architecture'); ?></span>
            <h3 class="font-headline-md text-2xl mb-4"><?php echo htmlspecialchars($service['title']); ?></h3>
            <p class="text-white/60 font-body-md text-sm leading-relaxed mb-8"><?php echo htmlspecialchars($service['description']); ?></p>
        </div>
    <?php endforeach; ?>
</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">
    <?php
    $project_items = array_slice($homepage_projects, 0, 4);
    if (count($project_items) === 0) {
        echo '<div class="md:col-span-12 text-center">Chưa có dự án để hiển thị.</div>';
    } else {
        $layout = [
            ['cols' => 'md:col-span-8', 'aspect' => 'aspect-[16/9]'],
            ['cols' => 'md:col-span-4', 'aspect' => 'aspect-[4/5]'],
            ['cols' => 'md:col-span-4', 'aspect' => 'aspect-[4/5]'],
            ['cols' => 'md:col-span-8', 'aspect' => 'aspect-[16/9]'],
        ];

foreach ($project_items as $index => $project) {
            $position = $layout[$index] ?? ['cols' => 'md:col-span-4', 'aspect' => 'aspect-[4/5]'];
            ?>
            <div class="<?php echo $position['cols']; ?> reveal overflow-hidden group cursor-pointer">
                <div class="relative <?php echo $position['aspect']; ?> overflow-hidden">
                    <a href="cong-trinh.php?id=<?php echo $project['id']; ?>" aria-label="Xem chi tiết <?php echo htmlspecialchars($project['title']); ?>">
                        <img alt="<?php echo htmlspecialchars($project['title']); ?>" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="<?php echo htmlspecialchars($project['featured_image'] ?: 'assets/images/project-large.jpg'); ?>"/>
                    </a>
                    <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"><?php echo htmlspecialchars(strtoupper($project['location'] ?? '')); ?></span>
                        <h3 class="font-headline-md text-3xl"><?php echo htmlspecialchars($project['title']); ?></h3>
                    </div>
                </div>
            </div>
            <?php
        }
    }
    ?>
</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="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="assets/images/project-large.jpg"/>
</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">Biệt thự trắng tối giản</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="assets/images/ref-2.jpg"/>
</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">Nhà phố sinh thái</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="assets/images/ref-3.jpg"/>
</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">Biệt thự nghỉ dưỡng hiện đại</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="py-section-gap px-margin-desktop max-w-container-max mx-auto reveal" id="video-showcase">
    <div class="text-center mb-12 reveal">
        <span class="font-label-caps text-label-caps text-secondary-fixed block mb-6">CÔNG TRÌNH ĐÃ THỰC HIỆN</span>
        <h2 class="font-headline-lg text-headline-lg mb-6">Dự án tiêu biểu & sản phẩm cung cấp</h2>
        <p class="font-body-lg text-body-lg text-on-surface-variant mx-auto max-w-3xl">Bấm vào hai nút mũi tên hai bên để chuyển giữa chế độ “Công trình đã thực hiện” và “Sản phẩm cung cấp”. Phần này được thiết kế lớn hơn và là phần riêng trên trang.</p>
    </div>
    <div class="relative overflow-hidden rounded-[40px] bg-black aspect-[16/9]">
        <video id="showcase-video" class="absolute inset-0 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/40"></div>
        <div class="absolute inset-0 showcase-overlay"></div>
        <div class="absolute inset-0 flex flex-col justify-end p-10 text-white">
            <div class="mb-6 max-w-3xl">
                <span class="font-label-caps text-label-caps text-secondary-fixed block mb-3" id="showcase-label">Công trình đã thực hiện</span>
                <h3 class="font-headline-md text-4xl mb-4" id="showcase-title">Kiệt tác kiến trúc vượt thời gian</h3>
                <p class="font-body-md text-white/80 mb-8" id="showcase-description">Khám phá bộ sưu tập công trình mang dấu ấn thiết kế THÁI HÀ, kết hợp chất liệu cao cấp và ánh sáng tinh tế.</p>
                <div class="grid grid-cols-3 gap-3" id="showcase-images">
                    <img src="assets/images/project-large.jpg" alt="Dự án 1" class="h-28 w-full object-cover rounded-xl border border-white/10" />
                    <img src="assets/images/project-side-1.jpg" alt="Dự án 2" class="h-28 w-full object-cover rounded-xl border border-white/10" />
                    <img src="assets/images/project-side-2.jpg" alt="Dự án 3" class="h-28 w-full object-cover rounded-xl border border-white/10" />
                </div>
            </div>
        </div>
        <button id="showcase-prev" type="button" class="absolute left-6 top-1/2 -translate-y-1/2 z-20 bg-white/15 text-white hover:bg-white/25 shadow-lg showcase-toggle-button">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button id="showcase-next" type="button" class="absolute right-6 top-1/2 -translate-y-1/2 z-20 bg-white/15 text-white hover:bg-white/25 shadow-lg showcase-toggle-button">
            <i class="fas fa-chevron-right"></i>
        </button>
    </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="relative reveal">
    <?php if (count($team_members) > 3): ?>
        <button id="team-prev" type="button" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 inline-flex h-12 w-12 items-center justify-center rounded-full bg-surface shadow-md text-on-surface hover:bg-surface-variant focus:outline-none">
            <i class="fas fa-chevron-left"></i>
        </button>
    <?php endif; ?>
    <div id="teamCarousel" class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
        <?php if (!empty($team_members)): ?>
            <?php foreach ($team_members as $index => $member): ?>
                <?php
                    $teamStyle = '';
                    if ($index > 2) {
                        $teamStyle .= 'display:none;';
                    }
                    if ($index > 0) {
                        $teamStyle .= 'transition-delay: ' . ($index * 100) . 'ms;';
                    }
                ?>
                <div class="team-card group reveal" data-team-index="<?php echo $index; ?>"<?php echo $teamStyle ? ' style="' . $teamStyle . '"' : ''; ?>>
                    <div class="aspect-[3/4] overflow-hidden mb-8 bg-surface-container">
                        <img alt="<?php echo htmlspecialchars($member['name'] . ' - ' . $member['position']); ?>" class="w-full h-full object-cover <?php echo $index === 0 ? '' : 'grayscale group-hover:grayscale-0 '; ?>group-hover:scale-105 transition-all duration-700" src="<?php echo htmlspecialchars(resolve_asset_url($member['photo_url'], 'assets/images/project-mid.jpg')); ?>"/>
                    </div>
                    <h3 class="font-headline-md text-2xl mb-1"><?php echo htmlspecialchars($member['name']); ?></h3>
                    <p class="font-label-caps text-label-caps text-on-surface-variant"><?php echo htmlspecialchars($member['position']); ?></p>
                    <?php if (!empty($member['description'])): ?>
                        <p class="mt-3 text-on-surface-variant text-sm"><?php echo htmlspecialchars($member['description']); ?></p>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="md:col-span-3 text-center text-on-surface-variant">Đang cập nhật đội ngũ chuyên gia...</div>
        <?php endif; ?>
    </div>
    <?php if (count($team_members) > 3): ?>
        <button id="team-next" type="button" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 inline-flex h-12 w-12 items-center justify-center rounded-full bg-surface shadow-md text-on-surface hover:bg-surface-variant focus:outline-none">
            <i class="fas fa-chevron-right"></i>
        </button>
    <?php endif; ?>
</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 dự án Skyline Haven</cite>
</blockquote>
</div>
</div>
</div>
</div>
</section>

<section class="bg-surface-container-lowest py-section-gap" id="contact">
<div class="px-margin-desktop max-w-container-max mx-auto">
<div class="grid grid-cols-12 gap-gutter reveal">
<div class="col-span-12 lg:col-span-6">
<span class="font-label-caps text-label-caps text-secondary block mb-6">LIÊN HỆ NGAY</span>
<h2 class="font-headline-lg text-headline-lg mb-8 leading-tight">Hãy chia sẻ ý tưởng của bạn với chúng tôi.</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12">
                Chúng tôi sẵn sàng lắng nghe và biến những ý tưởng của bạn thành những công trình kiến trúc đẹp mắt.
            </p>

<?php if (!empty($form_message)): ?>
<div class="form-alert <?php echo $form_type; ?>">
    <i class="fas fa-<?php echo $form_type === 'success' ? 'check-circle' : 'exclamation-circle'; ?>"></i>
    <span><?php echo htmlspecialchars($form_message); ?></span>
</div>
<?php endif; ?>

<form method="POST" class="space-y-6">
    <input type="hidden" name="contact_submit" value="1">
    
    <div>
        <label class="block font-label-caps text-label-caps text-on-surface mb-3">Họ tên *</label>
        <input type="text" name="full_name" required class="w-full px-6 py-4 border border-outline bg-white rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="Nhập họ tên của bạn" value="<?php echo htmlspecialchars($_POST['full_name'] ?? ''); ?>">
    </div>
    
    <div class="grid grid-cols-2 gap-6">
        <div>
            <label class="block font-label-caps text-label-caps text-on-surface mb-3">Email *</label>
            <input type="email" name="email" required class="w-full px-6 py-4 border border-outline bg-white rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="your@email.com" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>">
        </div>
        <div>
            <label class="block font-label-caps text-label-caps text-on-surface mb-3">Điện thoại *</label>
            <input type="tel" name="phone" required class="w-full px-6 py-4 border border-outline bg-white rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="0987654321" value="<?php echo htmlspecialchars($_POST['phone'] ?? ''); ?>">
        </div>
    </div>
    
    <div>
        <label class="block font-label-caps text-label-caps text-on-surface mb-3">Chủ đề</label>
        <input type="text" name="subject" class="w-full px-6 py-4 border border-outline bg-white rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="Yêu cầu tư vấn" value="<?php echo htmlspecialchars($_POST['subject'] ?? 'Yêu cầu tư vấn'); ?>">
    </div>
    
    <div>
        <label class="block font-label-caps text-label-caps text-on-surface mb-3">Nội dung *</label>
        <textarea name="message" required rows="5" class="w-full px-6 py-4 border border-outline bg-white rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="Nội dung của bạn..."><?php echo htmlspecialchars($_POST['message'] ?? ''); ?></textarea>
    </div>
    
    <button type="submit" class="w-full bg-primary text-on-primary py-4 font-label-caps text-label-caps rounded-lg hover:bg-opacity-80 transition-all">
        <i class="fas fa-paper-plane mr-2"></i> Gửi yêu cầu
    </button>
</form>
</div>

<div class="col-span-12 lg:col-span-6 lg:pl-gutter">
<div class="space-y-8">
<div>
    <h3 class="font-headline-md text-headline-md mb-4">Thông tin liên hệ</h3>
    <div class="space-y-6 font-body-lg text-body-lg text-on-surface-variant">
        <p><strong>Hotline:</strong> 0814.811.777</p>
        <p><strong>Công ty:</strong> CÔNG TY TNHH TVTK KIẾN TRÚC & XÂY DỰNG THÁI HÀ</p>
        <p><strong>Địa chỉ:</strong> 54 Tôn Đức Thắng, Phường Đồng Hới, Quảng Trị</p>
    </div>
</div>

<footer class="bg-primary text-on-primary py-12">
<div class="px-margin-desktop max-w-container-max mx-auto">
<div class="grid grid-cols-12 gap-gutter mb-12">
<div class="col-span-12 md:col-span-3">
<h4 class="font-headline-md text-headline-md mb-6">THÁI HÀ</h4>
<p class="font-body-md text-body-md opacity-80">Kiến tạo không gian, nâng tầm đẳng cấp.</p>
</div>
<div class="col-span-12 md:col-span-3">
<h5 class="font-label-caps text-label-caps mb-6">CÔNG TRÌNH</h5>
<ul class="space-y-3 font-body-md text-body-md opacity-80">
<li><a href="#projects" class="hover:opacity-100 transition-opacity">Dự án tiêu biểu</a></li>
<li><a href="#" class="hover:opacity-100 transition-opacity">Dự án gần đây</a></li>
<li><a href="#" class="hover:opacity-100 transition-opacity">Danh sách đầy đủ</a></li>
</ul>
</div>
<div class="col-span-12 md:col-span-3">
<h5 class="font-label-caps text-label-caps mb-6">DỊCH VỤ</h5>
<ul class="space-y-3 font-body-md text-body-md opacity-80">
<li><a href="#services" class="hover:opacity-100 transition-opacity">Thiết kế nội thất</a></li>
<li><a href="#services" class="hover:opacity-100 transition-opacity">Quản lý dự án</a></li>
<li><a href="#services" class="hover:opacity-100 transition-opacity">Tư vấn</a></li>
</ul>
</div>
<div class="col-span-12 md:col-span-3">
<h5 class="font-label-caps text-label-caps mb-6">LIÊN HỆ</h5>
<p class="font-body-md text-body-md opacity-80 mb-4">Hotline: 0814.811.777</p>
<p class="font-body-md text-body-md opacity-80">CÔNG TY TNHH TVTK KIẾN TRÚC & XÂY DỰNG THÁI HÀ</p>
<p class="font-body-md text-body-md opacity-80">54 Tôn Đức Thắng, Phường Đồng Hới, Quảng Trị</p>
</div>
</div>
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center text-sm opacity-60">
<p>&copy; 2026 THAI HÀ. Bản quyền web này thuộc Công ty TNHH TVTK Kiến trúc & Xây dựng Thái Hà</p>
<div class="flex gap-6 mt-4 md:mt-0">
<a href="https://www.facebook.com/kientructhaiha/" class="hover:opacity-100 transition-opacity"><i class="fab fa-facebook"></i></a>
<a href="kientructhaiha.com" class="hover:opacity-100 transition-opacity">
    <i class="fas fa-globe"></i>
</a>
<a href="#" class="hover:opacity-100 transition-opacity"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>

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

// Parallax effect for hero
window.addEventListener('scroll', () => {
    const parallaxElement = document.getElementById('hero-parallax');
    if (parallaxElement) {
        parallaxElement.style.transform = `translateY(${window.scrollY * 0.5}px)`;
    }
});

// Hero banner toggle between projects and products
const heroSlides = [
    {
        title: 'Công trình đã thực hiện',
        description: 'Những dự án tiêu biểu phản ánh tay nghề và góc nhìn kiến trúc thượng lưu của THÁI HÀ.',
        images: ['assets/images/project-large.jpg', 'assets/images/project-side-1.jpg', 'assets/images/project-side-2.jpg']
    },
    {
        title: 'Sản phẩm cung cấp',
        description: 'Giải pháp nội thất, vật liệu và phong cách hoàn thiện không gian đẳng cấp.',
        images: ['assets/images/nghi-duong-ven-rung.jpg', 'assets/images/vila-oc-dao.jpg', 'assets/images/project-large.jpg']
    }
];
let heroIndex = 0;

document.getElementById('hero-prev').addEventListener('click', () => {
    heroIndex = (heroIndex - 1 + heroSlides.length) % heroSlides.length;
    updateHeroSlide();
});

document.getElementById('hero-next').addEventListener('click', () => {
    heroIndex = (heroIndex + 1) % heroSlides.length;
    updateHeroSlide();
});

updateHeroSlide();

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Nav color change on scroll
const navMenuLinks = document.querySelectorAll('.nav-menu-link');
window.addEventListener('scroll', () => {
    const nav = document.getElementById('main-nav');
    const navContainer = document.getElementById('nav-container');
    if (window.scrollY > 50) {
        nav.classList.add('bg-white', 'shadow-lg');
        nav.classList.remove('bg-transparent');
        navContainer.classList.add('py-4');
        navContainer.classList.remove('py-6');
        navMenuLinks.forEach(link => {
            link.classList.remove('text-white');
            link.classList.add('text-on-surface');
        });
    } else {
        nav.classList.remove('bg-white', 'shadow-lg');
        nav.classList.add('bg-transparent');
        navContainer.classList.remove('py-4');
        navContainer.classList.add('py-6');
        navMenuLinks.forEach(link => {
            link.classList.remove('text-on-surface');
            link.classList.add('text-white');
        });
    }
});

// Auto-dismiss form alerts after 5 seconds
const formAlerts = document.querySelectorAll('.form-alert');
formAlerts.forEach(alert => {
    setTimeout(() => {
        alert.style.display = 'none';
    }, 5000);
});

// Video showcase toggle between projects and products
const showcaseData = [
    {
        label: 'Công trình đã thực hiện',
        title: 'Kiệt tác kiến trúc vượt thời gian',
        description: 'Khám phá bộ sưu tập công trình mang dấu ấn thiết kế THÁI HÀ, kết hợp chất liệu cao cấp và ánh sáng tinh tế.',
        images: [
            'assets/images/project-large.jpg',
            'assets/images/project-side-1.jpg',
            'assets/images/project-side-2.jpg'
        ]
    },
    {
        label: 'Sản phẩm cung cấp',
        title: 'Giải pháp nội thất và vật liệu cao cấp',
        description: 'Xem các sản phẩm thiết kế nội thất, vật liệu và giải pháp hoàn thiện không gian mà THÁI HÀ cung cấp.',
        images: [
            'assets/images/nghi-duong-ven-rung.jpg',
            'assets/images/vila-oc-dao.jpg',
            'assets/images/project-side-2.jpg'
        ]
    }
];
let showcaseIndex = 0;

document.getElementById('showcase-prev').addEventListener('click', () => {
    showcaseIndex = (showcaseIndex - 1 + showcaseData.length) % showcaseData.length;
    updateShowcase();
});

document.getElementById('showcase-next').addEventListener('click', () => {
    showcaseIndex = (showcaseIndex + 1) % showcaseData.length;
    updateShowcase();
});

updateShowcase();

// Team section carousel navigation
const teamMembersCount = <?php echo count($team_members); ?>;
let teamStartIndex = 0;
const teamCards = document.querySelectorAll('.team-card');
const teamPrevButton = document.getElementById('team-prev');
const teamNextButton = document.getElementById('team-next');

function updateTeamCarousel() {
    if (!teamCards.length) {
        return;
    }

teamCards.forEach((card, index) => {
        card.style.display = index >= teamStartIndex && index < teamStartIndex + 3 ? '' : 'none';
    });

if (teamPrevButton) {
        teamPrevButton.style.display = teamStartIndex === 0 ? 'none' : 'inline-flex';
    }
    if (teamNextButton) {
        teamNextButton.style.display = teamStartIndex + 3 >= teamMembersCount ? 'none' : 'inline-flex';
    }
}

if (teamPrevButton) {
    teamPrevButton.addEventListener('click', () => {
        teamStartIndex = Math.max(teamStartIndex - 1, 0);
        updateTeamCarousel();
    });
}
if (teamNextButton) {
    teamNextButton.addEventListener('click', () => {
        teamStartIndex = Math.min(teamStartIndex + 1, Math.max(teamMembersCount - 3, 0));
        updateTeamCarousel();
    });
}

updateTeamCarousel();

// About section showcase carousel
const aboutShowcaseData = <?php echo json_encode($about_showcase_data); ?>;
let aboutShowcaseIndex = 0;

function updateAboutShowcase() {
    const item = aboutShowcaseData[aboutShowcaseIndex];
    const imageEl = document.getElementById('about-showcase-image');
    const titleEl = document.getElementById('about-showcase-title');
    const subtitleEl = document.getElementById('about-showcase-description');
    const labelEl = document.getElementById('about-showcase-label');

if (imageEl) {
        imageEl.src = item.image;
        imageEl.alt = item.title;
    }
    if (titleEl) {
        titleEl.textContent = item.title;
    }
    if (subtitleEl) {
        subtitleEl.textContent = item.subtitle;
    }
    if (labelEl) {
        labelEl.textContent = item.label;
    }
}

document.getElementById('about-showcase-prev').addEventListener('click', () => {
    aboutShowcaseIndex = (aboutShowcaseIndex - 1 + aboutShowcaseData.length) % aboutShowcaseData.length;
    updateAboutShowcase();
});

document.getElementById('about-showcase-next').addEventListener('click', () => {
    aboutShowcaseIndex = (aboutShowcaseIndex + 1) % aboutShowcaseData.length;
    updateAboutShowcase();
});

updateAboutShowcase();
</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