{% extends '../../layout.server.view.html' %} {% block cssFile %} {% endblock %} {% block content %}
<link href="/assets/frontend/pages/css/blog.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/blog.css">
<style>
    .sub-more {
        display: none;
    }
    .blog {
        width: 100%;
        float: left;
        background: #efefef;
    }
    .blogRandom {
        width: 100%;
        float: left;
        border-bottom: 1px dotted #757575;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .blogRandom img {
        width: 250px;
        height: 150px
    }

    .container .blog-heading .border-right .margin-bottom20 h1.sub-title-bottom20 {
        font-size: 18px;
        text-align: left;
        color: #0873b8;
        margin: 20px 0 20px 0;
    }

    @media only screen and (max-width:767px) {
        .blogRandom img {
            margin: auto;
            display: block;
            padding-bottom: 10px;
            width: 100% !important;
        }

        .category-links .col-md-4.col-xs-6 img {
            height: auto !important;
            width: 100% !important;
        }

        .col-md-3.blog-heading {
            padding: 15px !important;

        }

        .col-sm-12.ckeditor img {
            max-width: 100% !important;
            height: auto !important;
        }

        .col-sm-12.ckeditor a {
            display: flex;
        }

        p.max-seen {
            text-align: center;
            margin-top: 20px;
        }

        .category-links img {
            width: 100% !important;
            height: auto !important;
        }

        .container .blog-heading .border-right .margin-bottom20 h1.sub-title-bottom20 {
            font-size: 20px !important;

        }

    }

    @media only screen and (width:768px) {
        .col-md-3.blog-heading {
            float: left;
            width: 25%;
        }

    }

    .container .row .col-md-9.border-right .ckeditor span {
        line-height: 26px;
    }

    .dangkyngay {
        position: absolute;
        bottom: 10%;
        left: 30%;
    }

    a.flicker {
        width: 100%;
        display: block;
        float: left;
        height: 100%;
        text-transform: uppercase;
        color: #fff;
        border-radius: 50px;
        font-size: 16px;
        padding: 5px 20px;
        text-decoration: none;
        font-family: inherit;
        font-weight: 700
    }

    /* css button nn */

    @-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%);

        }
    }

    .flicker {
        -webkit-animation: flicker 500ms infinite;
        -moz-animation: flicker 500ms infinite;
        -o-animation: flicker 500ms infinite;
        animation: flicker 500ms infinite;
    }
</style>
<!--end-->
<div class="blog">
    <div class="container">
        <div class="row blog-heading">
            <div class="col-sm-9 col-md-9 border-right ">
                <div class="bre" style="border-bottom: 1px solid #ccc;padding: 10px 0 10px 0;">
                    <a href="/" class="category-heading" style="color:#333 !important">Trang chủ</a>
                    <span class="doted"></span>
                    <a href="/blog" class="category-heading" style="color:#333 !important">Tin tức</a>
                    <span class="doted"></span>
                    <a href="/blog/cate/{{detail.CATE_TITLE_URL}}" class="category-heading"
                        style="color:#333 !important">{{detail.CATE_TITLE}}</a>
                </div>

                <!-- {% if detail.blog_category && detail.blog_category.length>0 %}
                <a href="/blog/cate/{{detail.blog_category[0].category_url}}" class="category-heading">{{detail.blog_category[0].name}}</a>
                {% endif %} -->
                <!-- <span class="doted"></span> -->
                <div class="margin-bottom20">
                    <h1 class="sub-title-bottom20">{{detail.TITLE}}</h1>
                    <div class="time">
                        <i class="fa fa-calendar" style="padding-right: 5px;"></i>
                        {{detail.CREATED_DATE | date('d/m/Y')}}
                    </div>
                </div>
                <!-- <img class="detail-img" src="{{detail.IMAGE | replace('http://', 'https://', 'g')}}" alt="{{detail.title}}"> -->
                <div class="row">
                    <div class="col-sm-12 ckeditor" style="margin-bottom: 20px;font-size: 16px;line-height: 26px;">
                        {{detail.CONTENT | safe}}
                    </div>
                    <!-- Bai viet lien quan -->
                    <div class="blog-lq row" style="margin:0">
                        <h3 title="Có thể bạn quan tâm"
                            style="color:#e27a17;margin-bottom: 0;padding-left: 15px;font-size: 24px;width: 100%;float: left;">
                            <span class="bvlq"
                                style="color:#fff;background:#e27a17;text-transform:uppercase;border-bottom:1px solid #fff;padding:5px 15px;font-size:18px">
                                <a style="color:#fff;text-decoration: none;">Có thể bạn quan tâm</a>
                            </span>
                        </h3>
                        <hr style="margin-top:3px;width: 100%;float: left;">
                        {% for item in blogRandom %}
                        <div class="blogRandom">
                            <div class="col-md-4 imgages">
                                <img class="lazy" data-original="{{item.IMAGE}}" alt=""
                                    style="width:250px;height:150px">
                            </div>
                            <div class="col-md-8 content">
                                <a href="/blog/{{item.TITLE_URL}}" title="{{item.TITLE}}" style="text-decoration:none">
                                    <h4 style="font-size: 16px;padding-left: 0;color:#0093dd;margin: 0 0 10px 0;">
                                        {{item.TITLE}}</h4>
                                </a>
                                <span style="color: #767676;font-size: 12px;margin-top: 10px;">
                                    {{item.CREATED_DATE | date('d-m-Y')}}
                                </span>
                                <p title="{{item.DESCRIPTION}}" title="{{item.TITLE}}"
                                    style="font-size: 14px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;margin-top: 10px;">
                                    {{item.DESCRIPTION}}
                                    Qui định bắt buộc các hộ kinh doanh phải sử dụng hóa đơn điện tử thay thế hóa đơn
                                    giấy...Qui định bắt buộc các hộ kinh doanh phải sử dụng hóa đơn điện tử thay thế hóa
                                    đơn
                                    giấy...
                                </p>
                                <a class="detail" href="/blog/{{item.TITLE_URL}}"
                                    style="float: right;text-decoration: none;">&gt;&gt; Xem chi tiết</a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="fb-like" data-href="http://hoadonviet.vn/blog/{{detail.title_url}}"
                                    data-layout="button_count" data-action="like" data-size="large"
                                    data-show-faces="true" data-share="true"></div>
                            </div>
                            <div class="col-sm-6" style="margin-top: 1px;">
                                <div class="g-plusone" data-width="300"
                                    data-href="http://hoadonviet.vn/blog/{{detail.title_url}}" style="padding:10px;">
                                </div>
                            </div>
                        </div>
                        <div class="fb-comments" data-size="medium"
                            data-href="http://hoadonviet.vn/blog/{{detail.title_url}}" data-width="100%"
                            data-numposts="10">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 blog-heading">
                <!-- <div class="search">
                    <label class="search-lable">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </label>
                    <input class="search-form__input" placeholder="Tìm kiếm bài viết" type="search">
                </div> -->
                <div class="sidebar-ad-block">
                    <a href="/blog/3030582-free-webinar-dropshipping">
                        <img style="width: 100%;"
                            srcset="//cdn.shopify.com/s/files/1/0070/7032/t/343/assets/dropshipping-webinar-sidebar-small.jpg?3807512939679644075 1x, //cdn.shopify.com/s/files/1/0070/7032/t/343/assets/dropshipping-webinar-sidebar-large.jpg?3807512939679644075 2x"
                            sizes="100vw" alt="">
                    </a>
                </div>
                <!-- banner -->
                <div class="banner-details" style="position: relative">
                    <img src="/img/banner_kd.png" alt="Tuyển cộng tác viên hóa đơn việt"
                        title="Tuyển cộng tác viên hóa đơn việt" style="width: 100%;height: auto;;">
                    <div class="dangkyngay"><a class="flicker" href="/dang-ky-lam-dai-ly" title="Đăng ký đại lý">Đăng ký đại lý</a></div>
                </div>


                <!-- <div class="register-banner"> -->
                <!-- </div> -->
                <h3 class="category-blog">
                    DANH MỤC TIN
                </h3>
                <div class="category-links">
                    {% for cate in category %}
                    <a href="/blog/cate/{{cate.TITLE_URL}}">
                        <h4>{{cate.TITLE}}</h4>
                    </a>
                    {% endfor %}
                </div>
                <h3 class="post-blog">Xem nhiều nhất</h3>
                {% for item in blogRandom %}
                <div class="category-links"
                    style="width:100%;float:left;margin-bottom: 5px;border-bottom: 1px solid #ccc;">
                    <div class="col-md-5">
                        <img class="lazy" style="width:100px;height:75px;margin: auto;display: block;"
                            src="{{item.IMAGE}}" alt="{{item.TITLE}}">
                    </div>
                    <div class="col-md-7">
                        <a style="border-bottom:none;margin-top:0" href="/blog/{{item.TITLE_URL}}"
                            title="{{item.TITLE}}">
                            <p class="max-seen"
                                style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                {{item.TITLE}}
                            </p>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </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 src="https://apis.google.com/js/platform.js" async defer>
        {
            lang: 'vi'
        }
        </script> -->
    </div>
</div>

<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" });
    $('img').addClass('lazy');
</script>
{% endblock %} {% block jsFile %} {% endblock %}