
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- THAY ĐỔI TIÊU ĐỀ VÀ MÔ TẢ TRANG WEB TẠI ĐÂY -->
    <title>Nhà Phân Phối Amway Chuyên Nghiệp</title>
    <meta name="description" content="Khám phá các sản phẩm chất lượng hàng đầu từ Amway: Nutrilite, Artistry, Amway Home, eSpring và nhiều hơn nữa. Liên hệ để được tư vấn.">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- Font Awesome Icons (để có các icon đẹp) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
    
    <style>
        /* Tùy chỉnh CSS để trang web đẹp hơn */
        body {
            font-family: 'Be Vietnam Pro', sans-serif;
            line-height: 1.7;
        }
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x800.png?text=Ảnh+Bìa+Amway+Của+Bạn') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 120px 0;
            text-align: center;
        }
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-weight: 700;
            color: #003366;
        }
        .product-card {
            border: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .product-card img {
            height: 150px;
            width: auto;
            max-width: 80%;
            object-fit: contain;
            margin: 20px auto 10px;
        }
        .footer {
            background-color: #003366;
            color: white;
            padding: 40px 0;
        }
        .footer a {
            color: #a7d1ff;
            text-decoration: none;
        }
        .footer a:hover {
            color: #fff;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <!-- THANH ĐIỀU HƯỚNG (NAVBAR) -->
    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <div class="container">
            <!-- THAY TÊN THƯƠNG HIỆU CỦA BẠN -->
            <a class="navbar-brand fw-bold" href="#">Tên Của Bạn</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#about">Giới Thiệu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#products">Sản Phẩm</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Liên Hệ</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- KHU VỰC HERO - BANNER CHÍNH -->
    <header class="hero">
        <div class="container">
            <!-- THAY ĐỔI NỘI DUNG GIỚI THIỆU CHÍNH -->
            <h1 class="display-4 fw-bold">Amway - Sống Khỏe Đẹp, Trọn Vẹn Hơn</h1>
            <p class="lead">Cung cấp các giải pháp sức khỏe và sắc đẹp hàng đầu thế giới.</p>
            <a href="#products" class="btn btn-primary btn-lg mt-3">Khám Phá Sản Phẩm</a>
        </div>
    </header>

    <!-- KHU VỰC GIỚI THIỆU BẢN THÂN -->
    <section id="about" class="py-5">
        <div class="container">
            <h2 class="section-title">Về Tôi</h2>
            <div class="row align-items-center">
                <div class="col-md-4 text-center">
                    <!-- THAY 'images/avatar.jpg' BẰNG ĐƯỜNG DẪN ẢNH ĐẠI DIỆN CỦA BẠN -->
                    <img src="https://via.placeholder.com/300x300.png?text=Ảnh+Của+Bạn" class="img-fluid rounded-circle mb-3" alt="Ảnh đại diện">
                </div>
                <div class="col-md-8">
                    <!-- THAY ĐỔI NỘI DUNG GIỚI THIỆU VỀ BẠN -->
                    <h3>Xin chào, tôi là [Tên Của Bạn]</h3>
                    <p>Là một Nhà Phân Phối của Amway, tôi tâm huyết mang đến cho bạn và gia đình những sản phẩm chất lượng cao, an toàn và hiệu quả. Với kiến thức và kinh nghiệm của mình, tôi sẵn sàng tư vấn để giúp bạn lựa chọn những sản phẩm phù hợp nhất cho nhu cầu chăm sóc sức khỏe, sắc đẹp và gia đình.</p>
                    <p>Hãy cùng tôi khám phá hành trình nâng cao chất lượng cuộc sống cùng Amway!</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- KHU VỰC HIỂN THỊ CÁC DÒNG SẢN PHẨM -->
    <section id="products" class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title">Danh Mục Sản Phẩm Chính</h2>
            <div class="row g-4">

                <!-- MỖI SẢN PHẨM LÀ MỘT 'col'. BẠN CÓ THỂ SAO CHÉP VÀ DÁN KHỐI NÀY ĐỂ THÊM SẢN PHẨM MỚI -->
                
                <!-- SẢN PHẨM 1: Nutrilite -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <!-- THAY 'images/nutrilite.png' BẰNG ĐƯỜNG DẪN ẢNH SẢN PHẨM CỦA BẠN -->
                        <img src="https://via.placeholder.com/300x150.png?text=Nutrilite" class="card-img-top" alt="Nutrilite">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">Nutrilite</h5>
                            <p class="card-text">Thực phẩm bổ sung dinh dưỡng, vitamin và thực phẩm bảo vệ sức khỏe số 1 thế giới.</p>
                        </div>
                    </div>
                </div>

                <!-- SẢN PHẨM 2: BodyKey -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <img src="https://via.placeholder.com/300x150.png?text=BodyKey" class="card-img-top" alt="BodyKey">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">BodyKey</h5>
                            <p class="card-text">Giải pháp quản lý cân nặng khoa học, toàn diện và cá nhân hóa.</p>
                        </div>
                    </div>
                </div>

                <!-- SẢN PHẨM 3: Artistry -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <img src="https://via.placeholder.com/300x150.png?text=Artistry" class="card-img-top" alt="Artistry">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">Artistry</h5>
                            <p class="card-text">Mỹ phẩm & chăm sóc da cao cấp, kết hợp tinh hoa từ thiên nhiên và khoa học.</p>
                        </div>
                    </div>
                </div>
                
                <!-- SẢN PHẨM 4: Glister -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <img src="https://via.placeholder.com/300x150.png?text=Glister" class="card-img-top" alt="Glister">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">Glister</h5>
                            <p class="card-text">Chăm sóc răng miệng toàn diện cho nụ cười rạng rỡ và hơi thở thơm mát.</p>
                        </div>
                    </div>
                </div>
                
                <!-- SẢN PHẨM 5: Amway Home -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <img src="https://via.placeholder.com/300x150.png?text=Amway+Home" class="card-img-top" alt="Amway Home">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">Amway Home</h5>
                            <p class="card-text">Sản phẩm tẩy rửa an toàn, hiệu quả, thân thiện với môi trường.</p>
                        </div>
                    </div>
                </div>
                
                <!-- SẢN PHẨM 6: g&h -->
                <div class="col-lg-4 col-md-6">
                    <div class="card product-card">
                        <img src="https://via.placeholder.com/300x150.png?text=g%26h" class="card-img-top" alt="g&h">
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">g&h</h5>
                            <p class="card-text">Chăm sóc cơ thể dịu nhẹ, nuôi dưỡng và bảo vệ làn da từ thiên nhiên.</p>
                        </div>
                    </div>
                </div>
                
                <!-- BẠN CÓ THỂ THÊM CÁC SẢN PHẨM CÒN LẠI TƯƠNG TỰ NHƯ TRÊN -->

            </div>
        </div>
    </section>

    <!-- KHU VỰC CHÈN VIDEO GIỚI THIỆU -->
    <section id="video-intro" class="py-5">
        <div class="container">
            <h2 class="section-title">Video Giới Thiệu</h2>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="video-container">
                        <!-- THAY ĐOẠN MÃ IFRAME NÀY BẰNG MÃ NHÚNG TỪ YOUTUBE -->
                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- KHU VỰC LIÊN HỆ -->
    <section id="contact" class="py-5 bg-light">
        <div class="container text-center">
            <h2 class="section-title">Liên Hệ Tư Vấn</h2>
            <p class="lead mb-4">Đừng ngần ngại liên hệ với tôi để được tư vấn chi tiết hơn về sản phẩm!</p>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <i class="fas fa-phone fa-3x mb-2 text-primary"></i>
                    <h4>Điện thoại / Zalo</h4>
                    <!-- THAY SỐ ĐIỆN THOẠI CỦA BẠN -->
                    <p class="fs-5"><a href="tel:0912345678">0912 345 678</a></p>
                </div>
                <div class="col-md-4 mb-3">
                    <i class="fas fa-envelope fa-3x mb-2 text-primary"></i>
                    <h4>Email</h4>
                    <!-- THAY EMAIL CỦA BẠN -->
                    <p class="fs-5"><a href="mailto:emailcuaban@example.com">emailcuaban@example.com</a></p>
                </div>
                <div class="col-md-4 mb-3">
                    <i class="fab fa-facebook fa-3x mb-2 text-primary"></i>
                    <h4>Facebook</h4>
                    <!-- THAY LINK FACEBOOK CỦA BẠN -->
                    <p class="fs-5"><a href="#" target="_blank">Tên Facebook Của Bạn</a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER - CHÂN TRANG -->
    <footer class="footer">
        <div class="container text-center">
            <!-- THAY TÊN CỦA BẠN -->
            <p>&copy; 2025 Bản quyền thuộc về [Tên Của Bạn] - Nhà Phân Phối Amway.</p>
            <p>Trang web này không phải là trang web chính thức của công ty Amway Việt Nam.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
