xstore/template/features/operate.html

<div class="page-operate mb-[80px] page-features">

    <div class="content bg-gradient-to-b from-[#EAF4FB] via-[#F5F6FB] to-[#F6F3FA] pb-[45px]">
        <div class="container">
            <div class="breadcrumb py-[40px]" data-aos="fade-up" data-aos-duration="1000">
                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex items-center">
                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                        class="flex items-center items-center gap-[10px] pr-[12px]">
                        <a href="/" itemprop="item" class="nopad-l text-[#000]">
                            <b itemprop="name" class="text-[var(--color-blue)]">Tính Năng</b>
                        </a> <i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
                        <meta itemprop="position" content="1">
                    </li>
                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
                        class="flex items-center gap-[10px] pr-[12px]">
                        <a href="/" itemprop="item" class="text-[#000] hover:text-[var(--color-global)]">
                            <span itemprop="name" class="text-[#4A4A4A]">
                                Vận hành
                            </span>
                        </a><i class="fa-solid fa-chevron-right text-[10px] text-[#4A4A4A]"></i>
                        <meta itemprop="position" content="2">
                    </li>
                </ol>
            </div>

            <p data-aos="fade-up" data-aos-duration="1000"
                class="page-name text-center text-[16px] uppercase font-[400] pb-[45px]">Vận hành</p>

            <h1 data-aos="fade-up" data-aos-duration="1500"
                class="page-title text-[36px] font-[600] text-center capitalize  pb-[40px] ">Điều hành doanh nghiệp của
                bạn hiệu
                quả hơn</h1>
            <p data-aos="fade-up" data-aos-duration="2000"
                class="page-note text-[20px] text-center capitalize pb-[40px] ">Giảm chi phí vận hành của bạn với một
                nền tảng
                đáng tin cậy <br>
                và một đội ngũ hỗ trợ bạn</p>
            <a data-aos="fade-up" data-aos-duration="2500" href=""
                class="btn mb-[45px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold   hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
                đầu dùng
                thử miễn phí</a>


            <div class="box-chuyendoi w-[990px] mx-auto" data-aos="fade-up" data-aos-duration="3000">
                <div class="content-chuyendoi grid grid-cols-3 items-center rounded-[12px] overflow-hidden bg-white">
                    <div class="image rounded-[12px] overflow-hidden h-[190px]">
                        <img src="../../assets/images/img-chuyendoi.jpg" class="block w-full h-[190px] object-cover"
                            alt="chuyendoi">
                    </div>
                    <div class="info col-span-2 p-[12px]">
                        <b class="name-chuyendoi text-[16px] block mb-[20px]">Thời gian hoạt động 99,99%</b>
                        <p class="note-chuyendoi text-[16px]">Giảm thiểu phiền phức, tối đa hóa tăng trưởng với thời
                            gian hoạt động
                            99,99%, thời gian chờ hỗ trợ trung bình <2 phút,>
                                85% cuộc gọi hỗ trợ đầu tiên được giải quyết, hơn 20 triệu biến thể sản phẩm, hơn 2
                                triệu SKU sản phẩm và tổng chi
                                phí sở hữu tốt nhất.</p>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <div class="pt-[100px] content-tammoi">
        <h2 class="title text-center text-[32px] capitalize font-bold mb-[25px] ">Chọn một nền tảng cung cấp cho bạn
        </h2>
        <div class="container">
            <div class="list list-tab flex flex-wrap items-center gap-[12px] mb-[100px]" id="tab">
                <a href="#hieusuat"
                    class="px-[60px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group  ">
                    <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Hiệu suất đáng tin
                        cậy</span>
                    <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                </a>
                <a href="#chiphi"
                    class="px-[20px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
                    <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Chi phí thấp hơn khi bạn
                        phát triển</span>
                    <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                </a>
                <a href="#doitac"
                    class="px-[40px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
                    <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Đối tác đáng tin cậy</span>
                    <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                </a>
                <a href="#hieubiet"
                    class="px-[10px] flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[50px] group ">
                    <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Hiểu biết và sự linh hoạt
                        trong kinh doanh</span>
                    <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                </a>
            </div>
            <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
                id="hieusuat">
                <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiệu suất đáng
                    tin
                    cậy <br>
                    để tránh gián đoạn kinh doanh</h2>
                <p class="note text-[16px] text-center ">Thời gian hoạt động 99,99%, trang tải nhanh và bảo trì được xử
                    lý
                    cho bạn, bao gồm bảo mật, <br> lưu trữ, quản lý tuân thủ và
                    cập nhật</p>

                <div class="content w-[1000px] mx-auto">

                    <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
                        <div class="effect-image">
                            <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
                                src="../../assets/images/image-quangcao.png" width="100%" height="100%" alt="hacom">
                        </div>
                    </div>
                    <div class="list-faq mt-[40px]">
                        <div class="item-faq bg-white pb-[10px] rounded-[12px]">
                            <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
                                onclick="toggleFaq(this)">
                                <b class="text-[16px] font-bold  ">Khám phá thêm nhiều tính năng</b>
                                <i class="fa-solid fa-sort-down"></i>
                            </div>
                            <div
                                class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
                                Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
                                báo giá chi tiết và ưu đãi theo nhu cầu
                                của bạn.
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
                id="chiphi">
                <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Giảm chi phí
                    khi bạn
                    phát triển để hỗ trợ <br> việc mở rộng quy mô</h2>
                <p class="note text-[16px] text-center ">Nền tảng của bạn cần được xây dựng để mở rộng quy mô, nhưng chi
                    phí
                    của bạn không nhất thiết phải tăng theo. Hãy xây
                    dựng <br> doanh nghiệp của bạn trên một nền tảng có tổng chi phí sở hữu thấp nhất, bao gồm cả việc
                    giảm
                    tỷ lệ thanh toán, khi
                    bạn phát triển.</p>

                <div class="content w-[1000px] mx-auto">

                    <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
                        <div class="effect-image">
                            <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
                                src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
                        </div>
                    </div>
                    <div class="list-faq mt-[40px]">
                        <div class="item-faq bg-white pb-[10px] rounded-[12px]">
                            <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
                                onclick="toggleFaq(this)">
                                <b class="text-[16px] font-bold  ">Khám phá thêm nhiều tính năng</b>
                                <i class="fa-solid fa-sort-down"></i>
                            </div>
                            <div
                                class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
                                Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
                                báo giá chi tiết và ưu đãi theo nhu cầu
                                của bạn.
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
                id="doitac">
                <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Đối tác đáng
                    tin cậy
                    cho mọi bước phát triển của bạn</h2>
                <p class="note text-[16px] text-center ">Yên tâm hơn khi biết rằng bạn chỉ cần gọi điện thoại là có thể
                    nhận
                    được hỗ trợ trực tiếp 24/7 từ nhân viên <br> xStore
                    tại Hà nội, cùng các dịch vụ hỗ trợ thành công, ra mắt hoặc di chuyển trước, trong và sau khi ra
                    mắt
                </p>

                <div class="content w-[1000px] mx-auto">

                    <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
                        <div class="effect-image">
                            <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
                                src="../../assets/images/image-giamchiphi.png" width="100%" height="100%" alt="hacom">
                        </div>
                    </div>
                    <div class="list-faq mt-[40px]">
                        <div class="item-faq bg-white pb-[10px] rounded-[12px]">
                            <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
                                onclick="toggleFaq(this)">
                                <b class="text-[16px] font-bold  ">Khám phá thêm nhiều tính năng</b>
                                <i class="fa-solid fa-sort-down"></i>
                            </div>
                            <div
                                class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
                                Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
                                báo giá chi tiết và ưu đãi theo nhu cầu
                                của bạn.
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="item-features py-[50px] bg-[linear-gradient(135deg,_#e5e8ff,_#fbe8f2,_#f4e9ff)] mb-[80px] rounded-[12px]"
                id="hieubiet">
                <h2 class="title text-[28px] capitalize font-bold mb-[12px] text-center leading-[130%] ">Hiểu biết sâu
                    sắc về
                    kinh doanh và sự nhanh nhẹn thúc đẩy <br> việc ra quyết định thông minh</h2>
                <p class="note text-[16px] text-center ">Với các công cụ phân tích mạnh mẽ được tích hợp sẵn trong mỗi
                    gói,
                    bạn có thể theo dõi hoạt động kinh doanh và điều
                    chỉnh <br> để tăng tốc độ phát triển. Ngoài ra, bộ công cụ AI ngày càng phát triển của chúng tôi có
                    thể
                    tăng tốc các tác vụ
                    hàng ngày và giảm <br> thiểu công sức vận hành doanh nghiệp.
                </p>

                <div class="content w-[1000px] mx-auto">

                    <div class="box-image mt-[40px] py-[30px] rounded-[8px] bg-white flex items-center justify-center ">
                        <div class="effect-image">
                            <img class="lazy h-[426px] object-contain block rounded-[12px] overflow-hidden"
                                src="../../assets/images/image-hieubietsansac.png" width="100%" height="100%"
                                alt="hacom">
                        </div>
                    </div>
                    <div class="list-faq mt-[40px]">
                        <div class="item-faq bg-white pb-[10px] rounded-[12px]">
                            <div class="title-faq flex items-center justify-between bg-white p-[20px_20px_0_20px] cursor-pointer rounded-[8px] "
                                onclick="toggleFaq(this)">
                                <b class="text-[16px] font-bold  ">Khám phá thêm nhiều tính năng</b>
                                <i class="fa-solid fa-sort-down"></i>
                            </div>
                            <div
                                class="content-faq bg-white max-h-0 overflow-hidden transition-all duration-500 ease-in-out] px-[20px] mt-[10px]">
                                Bảng giá phụ thuộc gói tính năng, lưu trữ và số lượng sản phẩm. Liên hệ để được
                                báo giá chi tiết và ưu đãi theo nhu cầu
                                của bạn.
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="user-xstore rounded-[12px] overflow-hidden bg-black ">
                <div class="bg-black rounded-[12px_12px_0_0] overflow-hidden">
                    <h2
                        class="title pt-[95px] pb-[50px] text-[32px] font-bold text-center text-white leading-[120%] capitalize  ">
                        Hãy
                        chuyển sang
                        nền tảng
                        xStore <br>
                        ngay hôm nay</h2>
                    <a href=""
                        class="btn mb-[70px] mx-auto block w-[245px] h-[45px] leading-[45px] text-center rounded-[8px] bg-[var(--color-blue)] text-white text-[16px] font-bold   hover:bg-white hover:border-[1px] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)] ">Bắt
                        đầu dùng
                        thử miễn phí</a>
                </div>
                <div class="box-link bg-[#1B1922] rounded-[12px] pt-[30px] pb-[25px] px-[100px]">
                    <p class="text-white text-center text-[16px] mb-[25px] ">Tìm hiểu thêm về cách xStore trao quyền cho
                        khách hàng
                        của chúng tôi để</p>
                    <div class="list-xstore grid grid-cols-4 gap-[12px]">
                        <a href="#"
                            class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group  ">
                            <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)] ">Chuyển đổi</span>
                            <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)] "></i>
                        </a>
                        <a href="#"
                            class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group  ">
                            <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Thị trường</span>
                            <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                        </a>
                        <a href="#"
                            class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group  ">
                            <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Phát triển</span>
                            <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                        </a>
                        <a href="#"
                            class="flex items-center justify-center gap-[5px] bg-[#F2F2F2] rounded-[4px] h-[45px] group ">
                            <span class="text-[16px] font-bold group-hover:text-[var(--color-blue)]">Vận hành </span>
                            <i class="fa-solid fa-angle-right text-[12px] group-hover:text-[var(--color-blue)]"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>