{% extends '../../layout.server.view.html' %} {% block cssFile %}
<style>
.category-heading {
    padding: 5px 0;
    font-weight: 500;
    color: #3FD6FF;
    font-size: 13px;
}

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

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

.support-menu {
    border-left: 1px solid #e5e5e5;
    list-style: none;
    line-height: 1.5;
    padding-left: 5px;
}

.support-menu a:hover {
    color: #FF2681;
}

.support-menu li {
    margin-left: -6px;
}

.support-menu li a {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    color: #767676;
    font-size: 17px;
    display: block;
    -webkit-transition: all 150ms;
    transition: all 150ms;
    padding: 10px 0 10px 10px;
}

.support-menu li.active a {
    color: #FF2681!important;
    border-left: 3px solid #FF2681;
}

.submenu {
    border-left: 3px solid #FF2681;
}

.submenu-item {
    display: none;
}

.submenu ul,
.submenu-item ul {
    list-style: none;
    padding-left: 25px;
}

.submenu ul li a,
.submenu-item ul li a {
    font-weight: 400;
    color: #767676;
    font-size: 16px;
    padding: 5px 0 5px 10px;
}

.subactive {
    color: #FF2681 !important;
    font-weight: bold !important;
}

.item:hover .submenu-item {
    display: block;
}

.content {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 300;
    color: #000;
}

.content h1 {
    margin-bottom: 30px;
    color: #333;
}

.content h2 {
    padding-top: 48px;
    margin-top: 30px;
    margin-bottom: 24px;
    font-size: 24.27px;
    font-weight: normal;
    border-top: 1px solid #e5e5e5;
    color: #333;
}

.content ul li {
    line-height: 30px;
}
</style>
{% endblock %} {% block content %}
<div style="background-image: url('https://i.imgur.com/aLLUjD4.jpg'); height: 320px; color: #fff; ">
    <div class="container header">
        <div class="section-heading" style="color: #fff;">
            <h1>Trung tâm trợ giúp Hóa Đơn Việt</h1>
            <p>Chọn một câu hỏi để nhanh chóng tìm ra giải pháp cho nhu cầu hỗ trợ của bạn.</p>
        </div>
        <div class="form_single" style="max-width: 500px;">
            <div class="input-group">
                <input class="form-control" id="txtemail" type="text" style="border: 1px solid #a9a9a9;" placeholder="Nhập thông tin tìm kiếm">
                <div class="input-group-btn">
                    <button class="btn" id="btnRegister" type="button">Tìm kiếm</button>
                </div>
            </div>
        </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 class="category-heading">Hướng dẫn sử dụng</span>
        <span class="doted"></span>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="support-menu">
                {% for item in menu %} {% if item._id==detail.support_category %}
                <li class="active">
                    <a href="/huong-dan/{{item.category_url}}">{{item.name}}</a>
                </li>
                <li class="submenu">
                    <ul>
                        {% for sup in item.detail.data %} {% if sup.title_url==url %}
                        <li><a class="subactive" href="/huong-dan/{{item.category_url}}/{{sup.title_url}}">{{sup.title}}</a></li>
                        {% else %}
                        <li><a href="/huong-dan/{{item.category_url}}/{{sup.title_url}}">{{sup.title}}</a></li>
                        {% endif %} {% endfor %}
                    </ul>
                </li>
                {% else %}
                <li class="item">
                    <a href="/huong-dan/{{item.category_url}}">{{item.name}}</a>
                </li>
                <li class="submenu-item">
                    <ul>
                        {% for sup in item.detail.data %}
                        <li><a href="/huong-dan/{{item.category_url}}/{{sup.title_url}}">{{sup.title}}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                {% endif %} {% endfor %}
            </ul>
        </div>
        <div class="col-md-9">
            <div class="row content">
                <h1>{{detail.name}}{{detail.title}}</h1> {{detail.content|safe}}
            </div>
            <div class="row">
                <div class="col-sm-5 col-sm-offset-7">
                    <div class="col-sm-6">
                        <div class="fb-like" data-href="http://hoadonviet.vn/ho-tro/huong-dan/{{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/ho-tro/huong-dan/{{detail.title_url}}" style="padding:10px;"></div>
                    </div>
                </div>
            </div>
            <div class="fb-comments" data-size="medium" data-href="http://hoadonviet.vn/ho-tro/huong-dan/{{detail.title_url}}" data-width="100%" data-numposts="10"></div>
        </div>
    </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>
{% endblock %}
