@charset "UTF-8";
@import https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,vietnamese,latin-ext;

body {
    font-family: "Noto Sans",Arial,sans-serif !important
}

html {
    font-size: initial !important
}

.PCaption, .imageBox, .PhotoCMS_Caption p, .image figcaption, td.desc, li.image span em {
    color: #666;
    font: 400 14px arial;
    text-align: center !important;
    margin: 0 auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    font-style: italic
}

.quote1 {
    text-transform: none;
    background-color: #eff6ff;
    margin: 0;
    outline-style: none;
    outline-color: invert;
    padding: 10px;
    text-indent: 0;
    outline-width: 0;
    letter-spacing: normal;
    display: block;
    white-space: normal;
    color: navy;
    word-spacing: 0;
    font-size-adjust: none;
    font-stretch: normal
}

blockquote {
    display: block;
    background: #fff;
    padding: 15px 20px 15px 45px;
    margin: 0 0 20px;
    position: relative;
    font-size: 16px;
    line-height: 1.2;
    color: #666;
    text-align: justify;
    border-left: 15px solid #c76c0c;
    border-right: 2px solid #c76c0c;
    -moz-box-shadow: 2px 2px 15px #ccc;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc
}

    blockquote::before {
        content: "\201C";
        font-size: 60px;
        font-weight: 700;
        color: #999;
        position: absolute;
        left: 10px;
        top: 5px
    }

    blockquote::after {
        content: ""
    }

    blockquote a {
        text-decoration: none;
        background: #eee;
        cursor: pointer;
        padding: 0 3px;
        color: #c76c0c
    }

        blockquote a:hover {
            color: #666
        }

.hidden {
    display: none
}

.timeline-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;
    margin: 10px auto;
    min-height: 138px
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);
    background-size: 800px 104px;
    height: 130px;
    position: relative
}

.background-masker {
    background: #fff;
    position: absolute
}

    .background-masker.header-top {
        top: 0;
        left: 33.3333%;
        right: 0;
        height: 10px
    }

    .background-masker.header-left {
        top: 10px;
        left: 33.3333%;
        width: 15px;
        height: 20px
    }

    .background-masker.header-right {
        top: 10px;
        left: 90%;
        right: 0;
        height: 20px
    }

    .background-masker.header-bottom {
        top: 30px;
        left: 33.3333%;
        right: 0;
        height: 10px
    }

    .background-masker.header-2-left {
        top: 40px;
        left: 33.3333%;
        width: 15px;
        height: 20px
    }

    .background-masker.header-2-right {
        top: 40px;
        left: 65%;
        right: 0;
        height: 20px
    }

    .background-masker.header-2-bottom {
        top: 60px;
        left: 33.3333%;
        right: 0;
        height: 15px
    }

    .background-masker.meta-left {
        top: 75px;
        left: 33.3333%;
        width: 15px;
        height: 8px
    }

    .background-masker.meta-right {
        top: 75px;
        left: 55%;
        right: 0;
        height: 8px
    }

    .background-masker.meta-bottom {
        top: 83px;
        left: 33.3333%;
        right: 0;
        height: 15px
    }

    .background-masker.description-left {
        top: 98px;
        left: 33.3333%;
        width: 15px;
        height: 12px
    }

    .background-masker.description-right {
        top: 98px;
        left: 95%;
        right: 0;
        height: 12px
    }

    .background-masker.description-bottom {
        top: 110px;
        left: 33.3333%;
        right: 0;
        height: 8px
    }

    .background-masker.description-2-left {
        top: 118px;
        left: 33.3333%;
        width: 15px;
        height: 12px
    }

    .background-masker.description-2-right {
        top: 118px;
        left: 87%;
        right: 0;
        height: 12px
    }

    .background-masker.description-2-bottom {
        top: 130px;
        left: 33.3333%;
        right: 0;
        height: 8px
    }

    .background-masker.description-3-left {
        top: 138px;
        left: 33.3333%;
        width: 15px;
        height: 4px
    }

    .background-masker.description-3-right {
        top: 138px;
        left: 100%;
        right: 0;
        height: 12px
    }

    .background-masker.description-3-bottom {
        top: 150px;
        left: 33.3333%;
        right: 0;
        bottom: 0
    }

.popUp.binhLuan {
    border: 1px solid red
}

.popUp.active {
    pointer-events: auto;
    opacity: 1
}

.popUp {
    pointer-events: none;
    opacity: 0;
    z-index: 301;
    position: fixed;
    transition: .5s ease-in-out
}

    .popUp .bg {
        position: fixed;
        z-index: 333;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.6)
    }

    .popUp.binhLuan .popupContent {
        width: 600px;
        top: 65px;
        padding: 25px 30px 30px;
        border: 1px solid red;
        background-color: #fff
    }

    .popUp .popupContent {
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        position: absolute;
        z-index: 5;
        z-index: 999;
        position: fixed
    }

    .popUp.binhLuan .popupContent .title {
        font: 20px/28px RobotoBold;
        color: red;
        font-family: "Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-weight: 700
    }

    .popUp.binhLuan .popupContent .form {
        margin: 25px -30px 0;
        padding: 15px 30px;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5
    }

    .popUp.binhLuan .popupContent .btnClick {
        margin-top: 15px;
        font-size: 0;
        text-align: right
    }

        .popUp.binhLuan .popupContent .btnClick a {
            display: inline-block;
            width: 85px;
            height: 40px;
            text-align: center;
            font: 15px/40px RobotoMedium;
            border: 1px #e5e5e5 solid;
            margin-left: 10px;
            border-radius: 5px;
            font-weight: 700;
            font-family: "Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif
        }

            .popUp.binhLuan .popupContent .btnClick a:last-child {
                background-color: red;
                border-color: red;
                color: #fff;
                font-weight: 700
            }

    .popUp.binhLuan .popupContent .form .box input {
        height: 40px;
        font: 15px/40px;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        width: 100%;
        padding: 0 10px;
        font-family: "Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif
    }

.has-error em {
    color: red
}

.btn-close-comment {
    display: inline-block;
    height: 26px;
    font: 13px/28px RobotoBold;
    color: #fff;
    padding: 0 20px;
    background-color: #ed1b2f;
    margin-top: -10px;
    text-transform: uppercase;
    font-family: "Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif
}

.btn-send-comment {
    display: inline-block;
    height: 26px;
    font: 13px/28px RobotoBold;
    color: #fff;
    padding: 0 20px;
    background-color: #ed1b2f;
    margin-top: -10px;
    text-transform: uppercase;
    font-family: "Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif
}

.the-article-title:before {
    content: "#QUIZZ" !important;
    font-family: "Open Sans",sans-serif !important;
    font-weight: 300;
    display: block !important;
    padding: 0 !important;
    color: #decd00 !important
}

.the-article-category {
    display: none
}

table.quiz {
    font-family: "Open Sans",sans-serif !important;
    font-weight: 300;
    border-radius: 5px;
    background: #FFEB00;
    overflow: hidden;
    width: 100%
}

    table.quiz .quiz-caption {
        padding: 10px 15px 20px !important;
        color: #000
    }

        table.quiz .quiz-caption h3 {
            font-size: 19px !important;
            margin-top: 0;
            float: none !important;
            font-weight: 700
        }

    table.quiz ul {
        margin: 15px 0 0
    }

        table.quiz ul li {
            background: rgba(0,0,0,.05);
            padding: 15px 10px 15px 50px;
            margin-bottom: 5px;
            cursor: pointer;
            position: relative;
            font-weight: 400 !important;
            color: #000 !important;
            list-style: none;
            border-radius: 30px
        }

            table.quiz ul li strong {
                font-weight: 400 !important;
                color: #000 !important;
                font-family: unset !important
            }

            table.quiz ul li:before {
                content: "";
                display: block;
                position: absolute;
                top: 15px;
                left: 10px;
                width: 30px;
                height: 30px;
                border-radius: 100%;
                background: rgba(0,0,0,.1);
                text-align: center;
                line-height: 30px
            }

            table.quiz ul li:first-child:before {
                content: "A"
            }

            table.quiz ul li:nth-child(2):before {
                content: "B"
            }

            table.quiz ul li:nth-child(3):before {
                content: "C"
            }

            table.quiz ul li:nth-child(4):before {
                content: "D"
            }

            table.quiz ul li:nth-child(5):before {
                content: "E"
            }

            table.quiz ul li:nth-child(6):before {
                content: "F"
            }

        table.quiz ul + p {
            display: none !important;
            margin-top: 15px !important
        }

            table.quiz ul + p:before {
                content: "Giải thích: ";
                font-weight: 700
            }

    table.quiz:not(.answered) ul li:hover {
        background: rgba(255,255,255,.6)
    }

    table.quiz.answered ul li {
        opacity: .4
    }

        table.quiz.answered ul li.selected {
            opacity: 1
        }

            table.quiz.answered ul li.selected:not(.correct) {
                background: #f16464;
                color: #FFF
            }

        table.quiz.answered ul li.correct {
            opacity: 1;
            background: #55d000;
            color: #FFF
        }

    table.quiz.answered ul + p {
        display: block !important
    }

table.picture ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: rgba(0,0,0,.1);
    text-align: center;
    line-height: 30px
}

#quiz_result {
    position: relative;
    background: #f3f3f3;
    font-family: sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 32px;
    font-size: 2rem;
    padding: 20px 10px 25px !important;
    line-height: 1.1 !important;
    width: 100%;
    margin-top: 20px !important
}

    #quiz_result:before {
        content: "Kết quả";
        color: #888;
        text-align: center;
        margin-right: 10px;
        display: block;
        font-size: .8em;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        margin-bottom: 30px
    }

#traloiketqua {
    color: #f36db0 !important;
    text-align: center;
    margin-right: 10px;
    display: block;
    font-size: 20px;
    padding: 11px
}

#quiz_result .message {
    display: block;
    margin: 15px 0
}

#quiz_result #quiz_correct {
    color: #55d000;
    font-weight: 700;
    font-size: 2em
}

#quiz_result #quiz_total {
    font-size: 2em;
    color: #f16464
}

    #quiz_result #quiz_total:before {
        content: "/"
    }

#correct {
    color: #55d000;
    font-weight: 700;
    font-size: 2em
}

#total {
    font-size: 2em;
    color: #f16464
}

    #total::before {
        content: "/"
    }

.inpage table.quiz {
    border: 0
}

#result {
    position: relative;
    background: #f3f3f3;
    font-family: sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 32px;
    font-size: 2rem;
    padding: 20px 10px 25px !important;
    line-height: 1.1 !important;
    float: left;
    width: 100%;
    margin-top: 20px !important
}

.b-maincontent a {
    color: #080809;
    border-bottom: 1px dashed #bbb;
    text-decoration: none;
    cursor: pointer
}

table {
    width: 100%
}

video {
    width: 100%;
    height: auto
}

.descriptionx img {
    margin: 0 auto
}

.c-news-detail .b-maincontent div {
    margin-bottom: 18px
}

.descriptionx {
    text-align: justify
}

td > p, td > em > span, td > i, td > em > span, td > em > span > a, div > em > span {
    padding: 5px 0 0;
    font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    max-width: 100%;
    color: #999 !important;
    line-height: 1.3;
    font-style: normal !important
}

figcaption > em, p[data-placeholder], figcaption > p, figcaption, .imageBox em, figure > p {
    text-align: center !important;
    padding: 5px 0 0;
    font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    max-width: 100%;
    color: #999;
    font-size: 80% !important;
    line-height: 1.3;
    font-style: normal !important
}

    figcaption > p > a, td > a {
        color: #999 !important;
        font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important
    }

td {
    text-align: center !important
}

    figcaption > p, td > em > span > a, div > em > span, td > em > span {
        font-size: 17px !important;
        font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif
    }

.infographic a {
    color: #fff
}

.infographic figcaption a {
    color: #999
}

.PCaption a {
    color: #999 !important;
    font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important
}

.PCaption em {
    font-style: normal;
    font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important
}

.embed-responsive {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 56.25% !important;
    padding-top: 25px !important;
    height: 0 !important
}

    .embed-responsive iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important
    }

.bg-blue-max .c-box .c-box__title .c-box__title__name a, .theme-postcard .c-cat-list__current a {
    color: #fff
}

    .bg-blue-max .c-box .c-box__title .c-box__title__name a:hover, .theme-postcard .c-cat-list__current a:hover {
        text-decoration: none
    }

.c-box .c-box__title .c-box__title__name a {
    color: #222
}

    .c-box .c-box__title .c-box__title__name a:hover {
        text-decoration: none
    }

.a-link {
    color: #fff
}

    .a-link:hover {
        text-decoration: none
    }

.audio-detail .b-grid .b-grid__content {
    margin-left: 0 !important
}

.icon-podcast {
    background-image: url(../images/icons/icon-podcast.png);
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: -3px;
    width: 20px;
    height: 21px;
    display: inline-block;
    vertical-align: middle
}

.m-box-title {
    margin-bottom: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 700
}

.vtc1hd {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    background-color: #13467f
}

    .vtc1hd img {
        margin-top: -5px;
        padding: 6px 0
    }

.vtc3hd {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    background-color: #e56504
}

    .vtc3hd img {
        margin-top: -5px;
        padding: 6px 0
    }

#liveVideo {
    width: 100%;
    height: 440px
}

#iframeHome {
    width: 100%;
    height: 1034px
}

.has-ovelay-show {
    cursor: pointer
}

.c-news-detail .b-maincontent iframe {
    width: 100% !important
}

.c-postcard-list .b-grid__title {
    color: #fff
}

.c-search-podcast {
    width: 100%;
    margin: 10px 0 20px
}

    .c-search-podcast .c-search {
        width: 100%
    }

        .c-search-podcast .c-search input {
            color: #fff
        }

.c-cat-list .row {
    margin-top: 0
}

.c-box__content span {
    color: #fff
}

.c-template-list .b-grid .b-grid__title {
    margin-top: 0;
    line-height: 1.3
}

.c-chap-list .b-grid .b-grid__hours .file-length {
    color: #999
}

.c-cat-list__sub {
    margin-top: 0
}

.c-audio-box__list label {
    margin-top: 0
}

.c-audio-box__volume input {
    font-size: initial;
    line-height: initial;
    border-radius: initial;
    padding: initial;
    height: initial
}

.content-main-normal {
    margin-top: 0
}

#NoRs {
    margin-top: 0
}

.c-audio-box__list label {
    margin-top: 0
}

.c-news-detail .b-maincontent .ckeditor-html5-audio {
    margin: 0 0 30px
}

    .c-news-detail .b-maincontent .ckeditor-html5-audio audio {
        height: 40px;
        width: 100%
    }

.c-news-detail .b-maincontent .ckeditor-html5-audio {
    margin: 0 0 30px
}

    .c-news-detail .b-maincontent .ckeditor-html5-audio audio {
        height: 40px;
        width: 100%
    }

#toast-container {
    position: fixed;
    z-index: 999999
}

.toast-top-right {
    top: 12px;
    right: 12px
}

#toast-container > .toast-info {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important
}

#toast-container > div {
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #fff;
    opacity: .8;
    -ms-filter: alpha(opacity=80);
    filter: alpha(opacity=80)
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.toast-info {
    background-color: #2f96b4
}

.toast .toast-close-button {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    text-indent: -100000px;
    width: 11px;
    height: 16px;
    background-repeat: no-repeat !important;
    background-image: url(../images/portlet-remove-icon-white.png) !important
}

button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none
}

.toast-close-button {
    position: relative;
    right: -.3em;
    top: -.3em;
    float: right;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    -webkit-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: .8;
    -ms-filter: alpha(opacity=80);
    filter: alpha(opacity=80)
}

#toast-container > :hover {
    opacity: 1;
    cursor: pointer
}

.c-box .c-box__title .c-box__title__more {
    padding: 5px 0 10px
}

    .c-box .c-box__title .c-box__title__more a {
        text-decoration: none;
        font-size: 13px;
        color: #29c5ff
    }

        .c-box .c-box__title .c-box__title__more a .icon-left {
            margin-right: 5px
        }

.bg-blue-max .c-box .c-box__title .c-box__title__more a {
    color: #fff
}

    .bg-blue-max .c-box .c-box__title .c-box__title__more a .icon12-speaker {
        background-image: url(../images/icons/icon12-speaker-white.png)
    }

.c-chap-list .b-grid .b-grid__btn {
    margin-top: -5px;
    text-align: right
}

    .c-chap-list .b-grid .b-grid__btn .b-grid__expand {
        font-size: 12px;
        cursor: pointer;
        color: #999
    }

    .c-chap-list .b-grid .b-grid__btn .b-grid__close {
        display: none;
        font-size: 12px;
        cursor: pointer;
        color: #999
    }

.c-chap-list .b-grid .b-grid__desc {
    line-height: 20px;
    max-height: 60px;
    overflow: hidden
}

    .c-chap-list .b-grid .b-grid__desc p {
        margin: 0
    }

.c-chap-list .b-grid.active .b-grid__desc {
    max-height: none
}

.c-chap-list .b-grid.active .b-grid__btn .b-grid__expand {
    display: none
}

.c-chap-list .b-grid.active .b-grid__btn .b-grid__close {
    display: inline
}

#lichPhatSong .row .col-sm-8 span {
    font-weight: bold;
    color: #058ad8;
}

    #lichPhatSong .row .col-sm-8 span:hover {
        cursor: pointer;
    }

.c-audio-box__list label {
    margin-bottom: 10px;
    margin-top: 15px;
}

    .c-audio-box__list label i {
        font-weight: normal
    }

.c-banner-bg.is-home a {
    height: calc(150vh) !important;
    /*margin-top: 150px;*/
}


@media (min-width: 1200px) {
    .c-audio-box.has-fixed, .c-audio-box.is-on-top {
        width: 260px !important
    }

    .c-header-user__avatar img {
        width: 30px;
        height: 30px
    }

    .bg-podcast .owl-carousel .owl-item img {
        width: 173px;
        height: 173px;
    }

    .c-head-big .b-grid .b-grid__img img, .c-head-side__left .b-grid .b-grid__img img {
        width: 515px;
        /*height: 343px;*/
    }

    .c-head-grid .b-grid .b-grid__img img {
        width: 247px;
        /*height: 165px;*/
    }

    .c-template-list .b-grid .b-grid__img img {
        width: 248px;
        /*height: 165px;*/
    }

    .c-template-list .is-big .b-grid .b-grid__img img {
        width: 782px;
        /*height: 521px;*/
    }

    .c-media-grid.c-template-grid > ul > li .b-grid img {
        width: 235px;
        /*height: 157px;*/
    }

    .c-media-grid.c-template-grid > ul > li:nth-child(5n+1) .b-grid img {
        width: 491px;
        /*height: 327px;*/
    }

    .c-f5-life-box .c-template-grid .b-grid .b-grid__img img {
        width: 236px;
        /*height: 157px;*/
    }

    .theme-postcard .owl-carousel .owl-item img {
        width: 782px;
        /*height: 220px;*/
    }

    .c-square-item__thumb a img {
        width: 182px;
        height: 182px
    }
}

@media (min-width: 992px) {
    .bg-podcast {
        height: 386px;
    }

    .ads-master {
        height: 90px;
    }

    .c-audio-box__name {
        height: 23px;
    }

    .c-timeline {
        height: 150px;
    }

    .c-chap-list .b-grid .b-grid__btn .b-grid__expand {
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        transition: all .2s ease
    }

        .c-chap-list .b-grid .b-grid__btn .b-grid__expand:hover {
            color: #29c5ff
        }

    .c-chap-list .b-grid .b-grid__btn .b-grid__close {
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        transition: all .2s ease
    }

        .c-chap-list .b-grid .b-grid__btn .b-grid__close:hover {
            color: #29c5ff
        }

    .c-banner-space.is-himlam {
        height: 270px;
    }

    table .imageBox[align=center] {
        width: 860px !important;
        margin-left: -125px !important
    }

    .infographic figure {
        width: 860px !important;
        margin-left: -125px !important
    }

    .infographic img {
        width: 100%
    }

    .infographic figure.image img {
        width: 100%
    }

    .infographic ul {
        padding-left: 0 !important
    }

        .infographic ul li.image {
            list-style: none;
            width: 860px !important;
            margin-left: -125px !important
        }

            .infographic ul li.image img {
                width: 100%
            }

    .c-box .c-box__title .c-box__title__more {
        padding: 0;
        float: right
    }

        .c-box .c-box__title .c-box__title__more a {
            -webkit-transition: all .2s ease;
            -moz-transition: all .2s ease;
            transition: all .2s ease
        }

            .c-box .c-box__title .c-box__title__more a:hover {
                color: #fff
            }

                .c-box .c-box__title .c-box__title__more a:hover .icon12-speaker {
                    background-image: url(../images/icons/icon12-speaker-white.png)
                }

    .bg-blue-max .c-box .c-box__title .c-box__title__more a:hover {
        color: #29c5ff
    }

        .bg-blue-max .c-box .c-box__title .c-box__title__more a:hover .icon12-speaker {
            background-image: url(../images/icons/icon12-speaker.png)
        }

    .c-logo img {
        width: 198px;
        height: 50px
    }

    .c-small-logo a:first-child img {
        width: 99px;
        height: 25px
    }

    .c-small-logo a:last-child img {
        width: 60px;
        height: 25px
    }

    .is-home .c-small-logo a:last-child img {
        width: 99px;
        height: 25px
    }

    .c-audio-box__list ul li img {
        width: 81px;
        height: 26px
    }

    .vtc1hd img {
        width: 38px !important;
        height: 38px !important
    }
}

@media (max-width: 1024px) {
    #iframeHome {
        height: 895px
    }

    .c-header-user__avatar img {
        width: 28px;
        height: 28px
    }

    .bg-podcast .owl-carousel .owl-item img {
        width: 141px;
        height: 141px;
    }

    .c-head-big .b-grid .b-grid__img img, .c-head-side__left .b-grid .b-grid__img img {
        width: 429px;
        height: 286px;
    }

    .c-head-grid .b-grid .b-grid__img img {
        width: 204px;
        height: 136px;
    }

    .c-template-list .b-grid .b-grid__img img {
        width: 207px;
        height: 138px;
    }

    .c-template-list .is-big .b-grid .b-grid__img img {
        width: 652px;
        height: 435px;
    }

    .c-media-grid.c-template-grid > ul > li .b-grid img {
        width: 192px;
        height: 128px;
    }

    .c-media-grid.c-template-grid > ul > li:nth-child(5n+1) .b-grid img {
        width: 404px;
        height: 269px;
    }

    .c-f5-life-box .c-template-grid .b-grid .b-grid__img img {
        width: 193px;
        height: 128px;
    }

    .theme-postcard .owl-carousel .owl-item img {
        width: 652px;
        height: 183px;
    }

    .c-square-item__thumb a img {
        width: 150px;
        height: 150px
    }
}

@media (max-width: 768px) {
    #liveVideo {
        height: 415px
    }

    #iframeHome {
        height: 685px
    }

    .c-logo img {
        width: 119px;
        height: 30px
    }

    .c-audio-box__list ul li img {
        width: 150px;
        height: 48px
    }

    .vtc1hd img {
        width: 38px !important;
        height: 38px !important
    }

    .c-mobile-user__avatar img {
        width: 50px;
        height: 50px
    }

    .ads-master {
        height: 85px;
    }

    .bg-podcast {
        height: 362px;
    }

        .bg-podcast .owl-carousel .owl-item img {
            width: 164px;
            height: 164px;
        }

    .c-head-big .b-grid .b-grid__img img {
        width: 486px;
        height: 324px;
    }

    .c-head-side__left .b-grid .b-grid__img img {
        width: 738px;
        height: 492px;
    }

    .c-head-grid .b-grid .b-grid__img img {
        width: 233px;
        height: 155px;
    }

    .c-template-list .b-grid .b-grid__img img {
        width: 234px;
        height: 156px;
    }

    .c-template-list .is-big .b-grid .b-grid__img img {
        width: 738px;
        height: 492px;
    }

    .c-media-grid.c-template-grid > ul > li .b-grid img {
        width: 223px;
        height: 148px;
    }

    .c-media-grid.c-template-grid > ul > li:nth-child(5n+1) .b-grid img {
        width: 465px;
        height: 310px;
    }

    .c-f5-life-box .c-template-grid .b-grid .b-grid__img img {
        width: 223px;
        height: 149px;
    }

    .theme-postcard .owl-carousel .owl-item img {
        width: 768px;
        height: 216px;
    }

    .c-square-item__thumb a img {
        width: 171px;
        height: 171px
    }
}

@media (max-width: 646px) {
    .popUp.binhLuan .popupContent {
        width: 321px;
        top: 65px
    }
}

@media (max-width: 414px) {
    .bg-podcast {
        height: 377px;
    }

    .ads-master {
        height: 44px;
    }

    #liveVideo {
        height: 216px
    }

    #iframeHome {
        height: 370px
    }

    .c-audio-box__list ul li img {
        width: 119px;
        height: 38px
    }

    .vtc1hd img {
        width: 38px !important;
        height: 38px !important
    }

    .bg-podcast .owl-carousel .owl-item img {
        width: 186px;
        height: 186px;
    }

    .c-head-big .b-grid .b-grid__img img, .c-head-side__left .b-grid .b-grid__img img {
        width: 384px;
        height: 256px;
    }

    .c-template-list .b-grid .b-grid__img img {
        width: 159px;
        height: 106px;
    }

    .c-template-list .is-big .b-grid .b-grid__img img {
        width: 384px;
        height: 256px;
    }

    .c-media-grid.c-template-grid > ul > li .b-grid img {
        width: 159px;
        height: 106px;
    }

    .c-media-grid.c-template-grid > ul > li:nth-child(5n+1) .b-grid img {
        width: 384px;
        height: 256px;
    }

    .c-f5-life-box .c-template-grid .b-grid .b-grid__img img {
        width: 283px;
        height: 189px;
    }

    .theme-postcard .owl-carousel .owl-item img {
        width: 414px;
        height: 116px;
    }

    .c-square-item__thumb a img {
        width: 183px;
        height: 183px
    }
}

@media (max-width: 375px) {
    .bg-podcast .owl-carousel .owl-item img {
        width: 167px;
        height: 167px;
    }

    .c-head-big .b-grid .b-grid__img img, .c-head-side__left .b-grid .b-grid__img img {
        width: 345px;
        height: 230px;
    }

    .c-template-list .b-grid .b-grid__img img {
        width: 143px;
        height: 95px;
    }

    .c-template-list .is-big .b-grid .b-grid__img img {
        width: 345px;
        height: 230px;
    }

    .c-media-grid.c-template-grid > ul > li .b-grid img {
        width: 143px;
        height: 95px;
    }

    .c-media-grid.c-template-grid > ul > li:nth-child(5n+1) .b-grid img {
        width: 345px;
        height: 230px;
    }

    .c-f5-life-box .c-template-grid .b-grid .b-grid__img img {
        width: 255px;
        height: 170px;
    }

    .theme-postcard .owl-carousel .owl-item img {
        width: 375px;
        height: 105px;
    }

    .c-square-item__thumb a img {
        width: 164px;
        height: 164px
    }
}


p.fi-img {
    margin: 0 !important;
    padding: 0;
    line-height: normal
}

/*---------- theme funeral css ----------*/
.c-theme-funeral .c-header {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/*---------- end theme funeral css ----------*/