{% extends '../../layout.server.view.html' %} {% block cssFile %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    .category-heading {
        padding: 5px 0;
        font-weight: 500;
        color: #0093dd;
        font-size: 13px;
    }

    .bread-crumb {
        border-bottom: 1px solid #e5e5e5;
        margin: 15px 0;
        padding-bottom: 15px;
    }

    .doted {
        background-color: #a0a0a0;
        border-radius: 3px;
        display: inline-block;
        height: 5px;
        margin: 2px 6px;
        width: 5px;
    }

    .faq-item {
        margin: 20px 0;
    }

    .faq-item h4 {
        line-height: 1.5;
        font-size: 15px;
    }

    .faq-item a {
        color: #555;
    }

    .faq-item:visited {
        background-color: #f9f9f9;
    }

    .faq-item a:hover {
        text-decoration: none;
    }

    .faq-item span {
        float: left;
        margin-top: 3px;
        color: #0093dd;
    }

    .faq-title {
        margin-left: 20px;
    }

    .faq-content {
        background-color: #f9f9f9;
        padding: 10px;
        margin-left: 20px;
    }

    .faq-content p {
        font-size: 15px;
        line-height: 25px;
    }
    /* accordion */

    .question {
        border: 1px solid #ccc;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .question .panel {
        border-top: 1px solid #ccc;
    }

    h2.use-hdv {
        font-size: 18px;
        padding: 15px;
    }

    i.material-icons {
        position: absolute;
        top: 20px
    }

    .accordion,
    .accordion:hover {
        color: #444;
        background: none !important;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        border-top: 1px solid #ccc;
        -webkit-box-shadow: none !important;
        padding-top: 20px;
    }
</style>
{% endblock %} {% block content %}
<div
    style="background-image: url('https://i.imgur.com/aLLUjD4.jpg'); height: 350px; color: #fff;display: flex;justify-content: center;align-items: flex-start;">
    <div class="container header">
        <div class="section-heading" style="color: #fff;">
            <h1 style="color: #fff;text-align: left;">Trung tâm trợ giúp Hóa Đơn Việt</h1>
            <h3 style="color: #fff;text-align: left;text-transform: none;"><span><i style="font-size: 25px;"
                        class="fa fa-facebook-official" aria-hidden="true"></i></span> <a
                    style="color:#fff;font-size:18px;padding-left: 10px;" href="https://www.facebook.com/groups/hoadondientuviet/" target="_blank">Cộng đồng hỗ trợ miễn phí trên
                    Facebook</a></h3>
            <h3 style="color: #fff;text-align: left;text-transform: none;"><span><i style="font-size: 25px;"
                        class="fa fa-phone" aria-hidden="true"></i></span> <a
                    style="color:#fff;font-size:18px;padding-left: 10px;" href="tel:19001171">Tổng đài hỗ trợ
                    19001171</a></h3>
            <h3 style="color: #fff;text-align: left;text-transform: none;"><span><i style="font-size: 25px;"
                        class="fa fa-search" aria-hidden="true"></i></span> <a
                    style="color:#fff;font-size:18px;padding-left: 10px;" href="/img/tai_lieu_hdsd.docx">Tài liệu hướng dẫn sử dụng</a></h3>
            <h3 style="color: #fff;text-align: left;text-transform: none;"><span><i style="font-size: 25px;"
                        class="fa fa-envelope-o" aria-hidden="true"></i></span> <a
                    style="color:#fff;font-size:18px;padding-left: 10px;"
                    href="mailto:hotro@hoadonviet.vn ">Hotro@hoadonviet.vn </a></h3>


        </div>
    </div>
</div>
<div class="bread-crumb">
    <div class="container">
        <a href="/" class="category-heading">Trang chủ</a>
        <span class="doted"></span>
        <a href="/ho-tro" class="category-heading">Hỗ trợ</a>
        <span class="doted"></span>
        <span>Các câu hỏi thường gặp</span>
        <span class="doted"></span>


    </div>
</div>


<div class="container">
    <div class="row content">
        <p style="padding-left: 15px;">
            Hóa đơn điện tử là một loại hóa đơn chưa phổ biến hiện nay. Để tìm hiểu nhanh về Hóa đơn điện tử các bạn có
            thể tham khảo Những Câu hỏi thường gặp về hóa đơn điện tử. Cơ sở pháp lý về Hóa đơn điện tử được quy định
            tại Thông tư 32/2011-TTBTC ngày 14/03/2011. Ngoài ra, Hóa đơn điện tử vẫn tuân thủ theo các quy định về hóa
            đơn bán hàng, cung ứng dịch vụ được quy định Thông tư 39/2014/TT-BTC Hướng dẫn quy định về Hóa đơn theo nghị
            định 51.
        </p>
    </div>
    <div class="row">
        {% for item in questions %}
        <div class="question">
            <button class="accordion">
                <a>
                    {{item.TITLE}}
                </a>
            </button>
            <div class="panel">
                <p>
                    {{item.SP_CONTENT | safe}}
                </p>
            </div>
        </div>
        {% endfor %}

    </div>

    <div class="fb-comments" data-href="http://hoadonviet.vn/faq" data-width="100%" data-numposts="10"></div>
</div>

<div id="fb-root"></div>
<script>
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    }
</script>
{% endblock %}