{% extends '../layout.server.view.html' %} {% block cssFile %}
<link href="/css/bills.min.css" rel="stylesheet">
{% endblock %} {% block content %}
<!-- bill -->
<!-- Dịch vụ -->
<div class="section-services">
    <div class="container">
        <div class="section-heading center-heading services">
            <h2 class="title-bill">Bộ mẫu hóa đơn</h2>
        </div>
        <div class="row clearfix">
            <div class="zoom-gallery">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="0ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau01.jpg" data-source="/img/mauhoadon/mau01.jpg" title="Mẫu 1">
                                <img class="lazy"  data-original="/img/mauhoadon/mau01.jpg">
                            </a>
                            <p class="text-center">Mẫu 1</p>

                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="300ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau02.jpg" data-source="/img/mauhoadon/mau02.jpg" title="Mẫu 2">
                                <img class="lazy" data-original="/img/mauhoadon/mau02.jpg">
                            </a>
                            <p class="text-center">Mẫu 2</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="600ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau03.jpg" data-source="/img/mauhoadon/mau03.jpg" title="Mẫu 3">
                                <img class="lazy" data-original="/img/mauhoadon/mau03.jpg">
                            </a>
                            <p class="text-center">Mẫu 3</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="900ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau04.jpg" data-source="/img/mauhoadon/mau04.jpg" title="Mẫu 4">
                                <img class="lazy" data-original="/img/mauhoadon/mau04.jpg">
                            </a>
                            <p class="text-center">Mẫu 4</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="0ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau05.jpg" data-source="/img/mauhoadon/mau05.jpg" title="Mẫu 5">
                                <img class="lazy" data-original="/img/mauhoadon/mau05.jpg">
                            </a>
                            <p class="text-center">Mẫu 5</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="300ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau06.jpg" data-source="/img/mauhoadon/mau06.jpg" title="Mẫu 6">
                                <img class="lazy" data-original="/img/mauhoadon/mau06.jpg">
                            </a>
                            <p class="text-center">Mẫu 6</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="600ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau07.jpg" data-source="/img/mauhoadon/mau07.jpg" title="Mẫu 7">
                                <img class="lazy" data-original="/img/mauhoadon/mau07.jpg">
                            </a>
                            <p class="text-center">Mẫu 7</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="900ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau08.jpg" data-source="/img/mauhoadon/mau08.jpg" title="Mẫu 8">
                                <img class="lazy" data-original="/img/mauhoadon/mau08.jpg">
                            </a>
                            <p class="text-center">Mẫu 8</p>
                        </div>
                        <div class="col-md-4 wow zoomIn animated animated" data-wow-delay="0ms"
                            data-wow-duration="1500ms">
                            <a href="/img/mauhoadon/mau09.jpg" data-source="/img/mauhoadon/mau09.jpg" title="Mẫu 9">
                                <img class="lazy" data-original="/img/mauhoadon/mau09.jpg">
                            </a>
                            <p class="text-center">Mẫu 9</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
{% endblock %} {% block jsFile %}
<!-- lazy load -->
<script src="/js/lazy-load/jquery.min.js"></script>
<script src="/js/lazy-load/jquery.lazyload.min.js"></script>
<script>
$("img.lazy").lazyload({effect : "fadeIn"});
</script>
<script type="text/javascript" src="/assets/frontend/layout/scripts/validate.js"></script>
<link rel="stylesheet" href="/js/magnific/magnific-popup.min.css">
<script src="/js/magnific/jquery.magnific-popup.min.js"></script>
<script>
    $(document).ready(function () {
        $('.zoom-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            closeOnContentClick: false,
            closeBtnInside: false,
            mainClass: 'mfp-with-zoom mfp-img-mobile',
            image: {
                verticalFit: true,
                titleSrc: function (item) {
                    return item.el.attr('title') + ' &middot; <a style="color:#fff;text-decoration:none" class="image-source-link" href="' + item.el.attr('data-source') + '" target="_blank">Tiết kiệm 90% Chi Phí | An toàn nhất</a>';
                }
            },
            gallery: {
                enabled: true
            },
            zoom: {
                enabled: true,
                duration: 300,
                opener: function (element) {
                    return element.find('img');
                }
            },

        });
    });

</script>

{% endblock %}