Host

[custom-html]<!-- BẮT ĐẦU KHỐI NỘI DUNG (DÁN TOÀN BỘ VÀO TRÌNH SOẠN THẢO/HTML CỦA TRANG CON Ở CHẾ ĐỘ MÃ NGUỒN/TEXT) --> <style> /* 1. CSS RESET TỐI THIỂU CHO KHỐI NỘI DUNG NÀY */ /* Đảm bảo kích thước box-model chính xác */ .abogo-landing-content * {    box-sizing: border-box;    margin: 0;    padding: 0; } .abogo-landing-content h1, .abogo-landing-content h2, .abogo-landing-content h3, .abogo-landing-content p, .abogo-landing-content ul {    margin: 0;    padding: 0; } .abogo-landing-content ul {    list-style: none; /* Loại bỏ style list mặc định nếu có */ } /* Đảm bảo Font Inter được ưu tiên */ .abogo-landing-content {    font-family: 'Inter', sans-serif; } /* CUSTOM STYLES CHO UI BLOCK - ĐỂ TRÁNH XUNG ĐỘT KHI NHÚNG FORM MẶC ĐỊNH */ .abogo-landing-content #partnership-form-placeholder {    max-width: 500px;    margin: auto;    padding: 0 1rem; } </style> <div class="abogo-landing-content" style="background-color: white;">    <!-- KHỐI CHÍNH: HERO VÀ CTA LỚN (BACKGROUND: XANH NAVY #0F172A) - KHOẢNG CÁCH GỌN HƠN -->    <header style="background-color: #0F172A; color: white; padding: 4rem 1rem 5rem;">        <div style="max-width: 1280px; margin: auto; text-align: center;">            <!-- Tiêu đề lớn -->            <h1 style="font-size: 3rem; line-height: 1.1; font-weight: 800; margin-bottom: 1.25rem;">                Hợp Tác Cùng <span style="color: #FBBF24;">Abogo</span>.<br> Tối Ưu Hóa Tài Sản Của Bạn.            </h1>            <!-- Mô tả ngắn gọn -->            <p style="font-size: 1.125rem; font-weight: 300; max-width: 800px; margin: auto; margin-bottom: 2rem; color: #d1d5db; line-height: 1.4;">                Chuyển giao quyền quản lý villa và resort cho đội ngũ chuyên nghiệp, áp dụng triết lý "Kiến tạo Lòng Trắc Ẩn" để mang lại lợi nhuận vượt trội và trải nghiệm 5 sao cho mọi khách hàng.            </p>            <!-- CTA Chính (VÀNG KIM #FBBF24) -->            <!-- Link trỏ đến khu vực Form -->            <a href="#partnership-form-area" style="display: inline-block; padding: 0.8rem 2.5rem; font-size: 1rem; font-weight: 700; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease-in-out; background-color: #FBBF24; color: #0F172A; text-decoration: none;">                ĐĂNG KÝ HỢP TÁC NGAY            </a>        </div>    </header>    <!-- KHỐI 2: TRIẾT LÝ ABOGO - KHÁC BIỆT CỐT LÕI (FIXED LAYOUT - GIẢM KHOẢNG CÁCH) -->    <section style="padding: 5rem 1rem;">        <div style="max-width: 1280px; margin: auto;">            <h2 style="font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 3rem; color: #0F172A;">                Sức Mạnh Của Dịch Vụ Thấu Hiểu: <br>Triết Lý "Kiến Tạo Lòng Trắc Ẩn"            </h2>            <!-- CARD 1: Tối ưu hóa Doanh thu -->            <div style="display: flex; flex-direction: column; gap: 2rem; align-items: center; margin-bottom: 4rem;">                <!-- Desktop: 2 Cột / Mobile: 1 Cột -->                <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; align-items: center; width: 100%;">                                        <!-- Khối Text: Hiển thị trước trên Mobile/Desktop -->                    <div style="flex: 1 1 45%; min-width: 300px;">                        <h3 style="font-size: 1.625rem; font-weight: 700; margin-bottom: 0.75rem; color: #0F172A;">Tăng Tốc Doanh Thu Bền Vững</h3>                        <p style="color: #4b5563; font-size: 1rem; margin-bottom: 1rem; line-height: 1.5;">                            Abogo sử dụng hệ thống quản lý giá động (Dynamic Pricing) và tối ưu hóa hiển thị trên các kênh quốc tế (OTA) như Booking.com, Agoda. Chúng tôi không chỉ lấp đầy phòng mà còn tối đa hóa lợi nhuận trên từng booking, đảm bảo tài sản của quý vị luôn hoạt động hiệu quả nhất.                        </p>                        <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.4;">                            <li style="display: flex; align-items: flex-start; margin-bottom: 0.3rem;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Tối ưu hóa hiển thị top 1%</li>                            <li style="display: flex; align-items: flex-start; margin-bottom: 0.3rem;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Giảm thiểu rủi ro trùng phòng (Overbooking)</li>                            <li style="display: flex; align-items: flex-start;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Phân tích dữ liệu thị trường 24/7</li>                        </ul>                    </div>                                        <!-- Khối Placeholder Hình ảnh -->                    <div style="flex: 1 1 45%; min-width: 300px;">                        <div style="background-color: #e5e7eb; height: 280px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);">                             <span style="color: #9ca3af; font-size: 1rem; font-weight: 500;">Hình ảnh Biểu đồ phân tích tài chính</span>                        </div>                    </div>                </div>            </div>            <!-- CARD 2: Bảo dưỡng và Duy trì -->            <div style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">                <!-- Desktop: 2 Cột (đảo ngược thứ tự) / Mobile: 1 Cột -->                <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; align-items: center; width: 100%;">                                        <!-- Khối Placeholder Hình ảnh: Hiển thị trước trên Desktop (dùng order: 1) -->                    <div style="flex: 1 1 45%; min-width: 300px; order: 1;">                        <div style="background-color: #e5e7eb; height: 280px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);">                            <span style="color: #9ca3af; font-size: 1rem; font-weight: 500;">Hình ảnh Villa được bảo trì cao cấp</span>                        </div>                    </div>                                        <!-- Khối Text: Hiển thị sau trên Desktop (dùng order: 2) -->                    <div style="flex: 1 1 45%; min-width: 300px; order: 2;">                        <h3 style="font-size: 1.625rem; font-weight: 700; margin-bottom: 0.75rem; color: #0F172A;">Duy Trì Giá Trị Tài Sản Bằng Sự Tận Tâm</h3>                        <p style="color: #4b5563; font-size: 1rem; margin-bottom: 1rem; line-height: 1.5;">                            Yếu tố "Lòng Trắc Ẩn" được áp dụng triệt để trong quy trình bảo trì, vệ sinh và quản lý tài sản. Chúng tôi quản lý căn villa của quý vị không chỉ như một sản phẩm cho thuê, mà như chính ngôi nhà của mình. Đảm bảo mọi chi tiết luôn trong tình trạng hoàn hảo nhất, kéo dài tuổi thọ và giá trị thẩm mỹ của tài sản.                        </p>                        <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.4;">                            <li style="display: flex; align-items: flex-start; margin-bottom: 0.3rem;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Bảo trì định kỳ 5 sao, chi tiết</li>                            <li style="display: flex; align-items: flex-start; margin-bottom: 0.3rem;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Tuyển chọn và đào tạo nhân sự chuyên nghiệp</li>                            <li style="display: flex; align-items: flex-start;"><span style="color: #FBBF24; margin-right: 0.5rem; font-size: 1.1rem; font-weight: 700;">&#10003;</span> Báo cáo minh bạch về tình trạng tài sản hàng tháng</li>                        </ul>                    </div>                </div>            </div>        </div>    </section>    <!-- KHỐI 3: DỮ LIỆU SỐ LIỆU (BACKGROUND: XANH NAVY #0F172A) - LÀM GỌN VÀ TỐI GIẢN -->    <section style="background-color: #0F172A; color: white; padding: 3rem 1rem;">        <div style="max-width: 1280px; margin: auto; text-align: center;">            <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 2rem;">Tại sao các Chủ nhà tin tưởng Abogo?</h2>                        <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">                <!-- Số liệu 1 -->                <div style="background-color: rgba(255, 255, 255, 0.08); padding: 1.25rem; border-radius: 0.75rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); min-width: 200px; flex: 1 1 30%; max-width: 350px;">                    <p style="color: #FBBF24; font-size: 2.5rem; font-weight: 800; margin-bottom: 0.25rem;">9.5+</p>                    <p style="font-size: 1rem; font-weight: 500; color: #d1d5db;">Điểm đánh giá trung bình từ khách hàng</p>                </div>                <!-- Số liệu 2 -->                <div style="background-color: rgba(255, 255, 255, 0.08); padding: 1.25rem; border-radius: 0.75rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); min-width: 200px; flex: 1 1 30%; max-width: 350px;">                    <p style="color: #FBBF24; font-size: 2.5rem; font-weight: 800; margin-bottom: 0.25rem;">35%</p>                    <p style="font-size: 1rem; font-weight: 500; color: #d1d5db;">Tăng trưởng doanh thu so với tự quản lý</p>                </div>                <!-- Số liệu 3 -->                <div style="background-color: rgba(255, 255, 255, 0.08); padding: 1.25rem; border-radius: 0.75rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); min-width: 200px; flex: 1 1 30%; max-width: 350px;">                    <p style="color: #FBBF24; font-size: 2.5rem; font-weight: 800; margin-bottom: 0.25rem;">99%</p>                    <p style="font-size: 1rem; font-weight: 500; color: #d1d5db;">Tỉ lệ hài lòng của Chủ nhà về báo cáo minh bạch</p>                </div>            </div>        </div>    </section>    <!-- KHỐI 4: VÙNG CHỜ FORM ĐĂNG KÝ (SẼ DÙNG UI BLOCK) -->    <section id="partnership-form-area" style="padding: 4rem 1rem; background-color: #f9fafb;">        <div id="partnership-form-placeholder">            <!--                VÙNG NÀY LÀ KHỐI PLACEHOLDER                Sếp Hoàng vui lòng không dán gì vào đây.                Sếp sẽ sử dụng UI Block "Contact form" của Abogo để đặt vào NGAY DƯỚI khối Custom HTML này.            -->            <h2 style="font-size: 1.625rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; color: #0F172A;">Bắt Đầu Hợp Tác</h2>            <p style="text-align: center; color: #4b5563; margin-bottom: 1.75rem; font-size: 0.95rem;">                Điền thông tin tài sản của Quý vị vào Form bên dưới (Form được tạo từ UI Block Contact Form)            </p>            <div style="text-align: center; padding: 2rem; border: 2px dashed #d1d5db; border-radius: 0.5rem; color: #6b7280; font-weight: 500;">                [KHỐI NÀY LÀ NƠI SẼ NHÚNG UI BLOCK "CONTACT FORM"]            </div>        </div>    </section> </div> <!-- Đã loại bỏ JavaScript xử lý Form --> [/custom-html]

[contact-form display_fields="phone,email,subject,address" mandatory_fields="phone,email"][/contact-form][custom-html]<!--    SẢN PHẨM ĐỘC LẬP: CARD HIỂN THỊ TRONG BÀI VIẾT    ================================================    Sếp chỉ cần dán toàn bộ mã này vào một UI Block "Custom HTML"    và thay đổi 5 mục sau:    1. src="[LINK ẢNH SẢN PHẨM]"    2. [TÊN SẢN PHẨM]    3. [ĐỊA CHỈ]    4. [ĐIỂM ĐÁNH GIÁ (số sao)]    5. [GIÁ TIỀN] --> <style>    /* CSS CƠ BẢN ĐẢM BẢO HIỂN THỊ ĐẸP */    .product-card-container {        font-family: 'Inter', sans-serif;        max-width: 400px; /* Chiều rộng tối đa của card */        margin: 2rem auto; /* Căn giữa và tạo khoảng cách */        background-color: #ffffff;        border-radius: 1rem; /* Bo góc lớn cho toàn bộ card */        overflow: hidden; /* Cắt góc ảnh theo card */        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Tạo bóng đổ 3D nhẹ */        transition: transform 0.3s ease;        border: 1px solid #e5e7eb; /* Đường viền mỏng */    }    .product-card-container:hover {        transform: translateY(-4px); /* Hiệu ứng nổi nhẹ khi di chuột */        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);    }    /* VÙNG ẢNH */    .product-image-area {        width: 100%;        height: 220px; /* Chiều cao cố định của ảnh */        overflow: hidden;    }    .product-image-area img {        width: 100%;        height: 100%;        object-fit: cover; /* Đảm bảo ảnh luôn vừa khung */        transition: transform 0.5s ease;    }    .product-card-container:hover .product-image-area img {        transform: scale(1.05); /* Zoom nhẹ ảnh khi hover */    }    /* VÙNG NỘI DUNG */    .product-content {        padding: 1.25rem;    }    /* TIÊU ĐỀ */    .product-title {        font-size: 1.25rem;        font-weight: 700;        color: #1f2937; /* Xanh đậm cho chữ */        margin-bottom: 0.75rem;        line-height: 1.3;    }    /* SAO VÀ ĐỊA CHỈ */    .product-meta-row {        display: flex;        align-items: center;        justify-content: space-between;        margin-top: 1rem;    }    .product-rating {        color: #FBBF24; /* Màu vàng kim cho sao */        font-size: 1.1rem;    }    .product-location {        color: #6b7280; /* Màu xám cho địa chỉ */        font-size: 0.9rem;        display: flex;        align-items: center;    }    .product-location svg {        margin-right: 0.4rem;        width: 14px;        height: 14px;        fill: #9ca3af;    }        /* GIÁ TIỀN */    .product-price-box {        background-color: #FBBF24; /* Màu vàng kim cho box giá */        color: #0F172A;        padding: 0.6rem 1.2rem;        border-radius: 9999px; /* Bo tròn hoàn toàn */        font-weight: 800;        font-size: 1.1rem;        white-space: nowrap; /* Đảm bảo giá không bị xuống dòng */    } </style> <div class="product-card-container">    <!-- 1. VÙNG ẢNH SẢN PHẨM -->    <div class="product-image-area">        <!-- Thay [LINK ẢNH SẢN PHẨM] tại đây. Sử dụng URL ảnh trực tiếp. -->        <img src="https://placehold.co/600x400/0F172A/FBBF24?text=SHERATON+DN+IMAGE" alt="Ảnh Sheraton Grand Đà Nẵng">    </div>    <div class="product-content">        <!-- 2. TÊN SẢN PHẨM -->        <div class="product-title">Sheraton Grand Đà Nẵng Resort & Spa</div>        <!-- SAO VÀ GIÁ -->        <div style="display: flex; justify-content: space-between; align-items: center;">                        <!-- SAO (Đánh giá) -->            <div class="product-rating">                <!-- 4. ĐIỂM ĐÁNH GIÁ: Sửa số sao (ví dụ: 4.5 sao) -->                <span class="star-rating" data-rating="4.5">                    &#9733;&#9733;&#9733;&#9733;&#9734;                    <!-- Có thể thay thế bằng 5 ngôi sao Unicode hoặc Font Awesome nếu có -->                </span>            </div>                        <!-- 5. GIÁ TIỀN -->            <div class="product-price-box">                3,500,000₫            </div>        </div>                <!-- ĐỊA CHỈ -->        <div class="product-meta-row" style="margin-top: 0.75rem;">             <!-- ICON VỊ TRÍ (Inline SVG đảm bảo hiển thị) -->            <div class="product-location">                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">                    <path fill-rule="evenodd" d="M11.54 22.351A10.957 10.957 0 0 1 3.25 11.25C3.25 5.592 7.23 1.5 12 1.5s8.75 4.092 8.75 9.75c0 3.978-2.26 7.426-5.526 10.743L12 23.95l-.46-.399ZM12 13.5a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z" clip-rule="evenodd" />                </svg>                <!-- 3. ĐỊA CHỈ: Thay thông tin địa chỉ tại đây -->                35 Trường Sa, Đà Nẵng            </div>        </div>                <!-- NÚT GỌI HÀNH ĐỘNG (Tùy chọn) -->        <div style="text-align: center; margin-top: 1.5rem;">            <a href="#" style="display: block; padding: 0.75rem 1rem; background-color: #0F172A; color: white; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.95rem;">                XEM CHI TIẾT & ĐẶT PHÒNG            </a>        </div>    </div> </div> [/custom-html]