{% extends '../layout.server.view.html' %} {% block cssFile %}
<link href="/assets/frontend/pages/css/pricing.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{% endblock %} {% block content %}
<style>
    @media only screen and (max-width: 767px) {
        .heading-button {
            padding: 9px !important;
        }

        td.panel-footer.text-center {
            background: #fff !important;
        }

        .trial .tab-trial {
            padding-top: 0px !important;
        }

        .trial .container .row {
            padding-top: 0px !important
        }
    }

    a.heading-button {
        width: 200px;
        height: auto;
        display: inline-block;
        font-size: 15px;
        text-align: center;
        color: #fff;
        border-radius: 22px;
        overflow: hidden;
        text-transform: uppercase;
        outline: none;
        cursor: pointer;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        text-decoration: none;
    }

    .btn-primary.active,
    .btn-primary:active,
    .btn-primary:focus,
    .btn-primary:hover,
    .open .dropdown-toggle.btn-primary {
        color: #fff !important;
        background-color: #e27a17;
        border-color: #e27a17;
        border-radius: 22px;
    }

    .btn-primary {
        border-radius: 22px;

    }

    section.table-mobile .data .container .row p.title-document::before {
        content: attr(data-label)':';
        float: left;
        font-weight: bold;
        width: 115px;
        text-align: left;
        color: #0569a5;
    }

    section.table-mobile .data .container .row .col-md-12 {
        border-top: 1px solid #ccc;
        padding-top: 20px
    }

    section.table-mobile {
        width: 100%;
        float: left;
        display: none;
    }

    @media only screen and (max-width:767px) {
        section.table-mobile {
            display: block;
        }

    }

    @media only screen and (width:768px) {
        .pricing-pc {
            display: block;
        }
    }



    @-webkit-keyframes flicker {
        0% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);
        }

        50% {
            background: -webkit-linear-gradient(170.84deg, #ff5331 0%, #f93 100%);
        }

        100% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);

        }
    }

    @-moz-keyframes flicker {
        0% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);
        }

        50% {
            background: -webkit-linear-gradient(170.84deg, #ff5331 0%, #f93 100%);
        }

        100% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);

        }
    }

    @-o-keyframes flicker {
        0% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);
        }

        50% {
            background: -webkit-linear-gradient(170.84deg, #ff5331 0%, #f93 100%);
        }

        100% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);

        }
    }

    @keyframes flicker {
        0% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);
        }

        50% {
            background: -webkit-linear-gradient(170.84deg, #ff5331 0%, #f93 100%);
        }

        100% {
            background: -webkit-linear-gradient(164.54deg, #656aa0 0%, #0f64e2 50%);

        }
    }

    .trial .container .row .tab-trial .dangkyngay .flicker {
        -webkit-animation: flicker 500ms infinite;
        -moz-animation: flicker 500ms infinite;
        -o-animation: flicker 500ms infinite;
        animation: flicker 500ms infinite;
    }

    .header-sub {
        padding: 0;
    }
</style>
<div class="banner-price">
    <div class="img-banner">
        <img src="/img/banner-bangia.png" alt="">
    </div>
    <!-- <div class="btn-banner">
        <a href="/dang-ky-lam-dai-ly">
            Đăng ký làm đại lý
        </a>
    </div> -->
</div>
<div class="price-table">
    <div class="container header-sub">
        <div class="section-heading" style="margin-top:0">
            <div class="section-heading" style="margin:0">
                <h1>BẢNG GIÁ PHẦN MỀM HÓA ĐƠN VIỆT</h1>
            </div>
            <a href="/dang-ky" class="heading-button" style="color: #fff;">Dùng thử miễn phí</a>
        </div>
    </div>
</div>
<!-- table pc -->
<div class="pc-table">
    <div class="container pricing-pc" style="max-width: 990px;">
        <table class="pricing-table">
            <thead>
                <tr>
                    <th style="width: 5%;">
                        <p class="heading--4">STT</p>
                    </th>
                    <th>
                        <p class="heading--4">Gói cước</p>
                    </th>
                    <th>
                        <p class="heading--4">Số hóa đơn</p>
                    </th>
                    <th>
                        <p class="heading--4">Giá tiền</p>
                    </th>
                    <th style="width:20%">
                        <p></p>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for item in prices %}
                <tr>
                    <td class="pricing">
                        {{loop.index}}
                    </td>
                    <td style="text-align:left">
                        <span class="price-number">{{item.ten_hang_hoa}}</span>
                    </td>
                    <td>
                        <span class="price-number"> {{item.so_luong_hoa_don}}</span>
                    </td>
                    <td>
                        <span class="price-number">{{item.don_gia}} VNĐ</span>
                    </td>
                    <td>
                        <a href="dang-ky?package={{item.dmhanghoa_id}}"
                            class="btn btn-primary font-bold m font-bold m">Mua ngay</a>
                    </td>
                </tr>
                {% endfor %}

            </tbody>
        </table>
        <div class="note">
            <h3 style="color: #e27a17;text-align: center;font-size: 16px;">PHÍ KHỞI TẠO: 500.000 VNĐ</h3>
            <p style="font-weight:700;font-size: 14px;color:#0093dd;text-transform: uppercase;">
                Giá đã bao gồm:
            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                KHÔNG THU PHÍ duy trì hằng năm.
            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                KHÔNG GIỚI HẠN số lượng người dùng.
            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                MIỄN PHÍ 40 mẫu hóa đơn cơ bản.
            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                KHÔNG GIỚI HẠN thời gian sử dụng.

            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                MIỄN PHÍ 10 NĂM lưu trữ và tra cứu dữ liệu hóa đơn.
            </p>
            <p>
                <span style="padding-right: 5px;">
                    <i class="material-icons">
                        check
                    </i>
                </span>
                HỖ TRỢ 100% thủ tục đăng ký phát hành hóa đơn trực tuyến.
            </p>
        </div>
    </div>
</div>

<!-- reponsive table mobie -->
<!-- table pc -->
<section class="table-mobile">
    <div class="data">
        <div class="container">
            <div class="row">
                {% for item in prices %}
                <div class="col-md-12">
                    <p class="title-document" data-label="Gói cước"><span>{{item.ten_hang_hoa}}</span></p>
                    <p class="title-document" data-label="Số hóa đơn"><span>{{item.so_luong_hoa_don}}</span></p>
                    <p class="title-document" data-label="Giá tiền"><span>{{item.don_gia}} VNĐ</span></p>
                    </p>
                    <p style="text-align:right">
                        <button class="btn btn-main" style="height: 32px;">
                            <a style="color:#fff" href="dang-ky?package={{item.dmhanghoa_id}}">Mua ngay</a>
                        </button>
                    </p>
                </div>
                {% endfor %}
                <div class="col-md-12">
                    <div class="note">
                        <h3 style="color: #e27a17;text-align: center;font-size: 16px;">PHÍ KHỞI TẠO: 500.000 VNĐ</h3>
                        <p style="font-weight:700;font-size: 14px;color:#0093dd;text-transform: uppercase;">
                            Giá đã bao gồm:
                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            KHÔNG THU PHÍ duy trì hằng năm.
                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            KHÔNG GIỚI HẠN số lượng người dùng.
                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            MIỄN PHÍ 40 mẫu hóa đơn cơ bản.
                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            KHÔNG GIỚI HẠN thời gian sử dụng.

                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            MIỄN PHÍ 10 NĂM lưu trữ và tra cứu dữ liệu hóa đơn.
                        </p>
                        <p>
                            <span style="padding-right: 5px;">
                                <i class="material-icons">
                                    check
                                </i>
                            </span>
                            HỖ TRỢ 100% thủ tục đăng ký phát hành hóa đơn trực tuyến.
                        </p>
                    </div>
                </div>
            </div>

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

<div class="trial">
    <div class="container">
        <div class="row">
            <div class="col col-xs-12 col-md-6">
                <div class="tab-trial">
                    <h2>Dùng thử <span>Miễn phí</span></h2>
                    <div class="phanmem">Phần mềm <strong>HOADONVIET.VN</strong></div>
                    <div class="phone"><span>Hotline: </span>0896 133 588</div>
                    <div class="dangkyngay"><a class="flicker" href="dang-ky">Đăng ký ngay</a></div>
                </div>
            </div>
            <div class="col col-xs-12 col-md-6">
                <div class="img"><img src="/img/dung-thu.png"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block jsFile %} {% endblock %}