@charset "UTF-8";

:root {
    --gray-100: #E5E9F0;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --blue-100: #E7F1FF;
    --blue-200: #9EC5FE;
    --yellow-100: #FFF3CD;
    --yellow-500: #FFC107;
    --primary: #D72027;
    --secondary: #D61116;
    --success: #062340;
    --gutter: 20px
}

html {
    font-size: 62.5%
}

:root {
    --column-gap: 20px;
    --container: 730px;
    --bth-margin: 20px;
    --p5: 30px
}

:root {
    --font-family-def: "PoppinsZ", Arial, Helvetica, sans-serif;
    --font-family-sec: "Oswald", Arial, Helvetica, sans-serif;
    --font-family-bar: "BarlowCondensed", Arial, Helvetica, sans-serif;
    --font-family-pop: "Poppins", Arial, Helvetica, sans-serif;
    --font-family-rob: "Roboto", Arial, Helvetica, sans-serif;
    --font-size-base: 1.4rem
}

@media (min-width:1024px) {
    :root {
        --column-gap: 20px;
        --container: 980px;
        --p5: 50px
    }
}

@media (min-width:1200px) {
    :root {
        --column-gap: 30px;
        --container: 1170px;
        --bth-margin: 20px
    }
}

*,
::after,
::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
    width: device-width
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

body {
    font-family: var(--font-family-def);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #343a40;
    background: #fff;
    margin: 0
}

[tabindex="-1"]:focus {
    outline: 0 !important
}

hr {
    width: 100%;
    height: 1px;
    overflow: visible;
    background: var(--bd-color);
    border: 0 none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0
}

p {
    margin: 0
}

dl,
ol,
ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b,
strong {
    font-weight: 700
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: #343a40;
    display: block;
    text-decoration: none;
    transition: all .2s ease-in-out
}

a:hover {
    color: #d72027
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0;
    color: inherit;
    text-decoration: none
}

figure {
    margin: 0
}

img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%
}

svg:not(:root) {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

th {
    text-align: inherit
}

label {
    display: inline-block
}

button {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 0;
    outline: 0;
    transition: all .2s ease-in-out
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
    border: none;
    border-radius: 0;
    outline: 0
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: 0
}

button,
input {
    overflow: visible;
    outline: 0
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time] {
    -webkit-appearance: listbox
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item;
    cursor: pointer
}

[hidden] {
    display: none !important
}

@font-face {
    font-family: PoppinsZ;
    src: url(../fonts/PoppinsZ/PoppinsZSemiBold.ttf);
    font-weight: 600
}

@font-face {
    font-family: PoppinsZ;
    src: url(../fonts/PoppinsZ/PoppinsZMedium.ttf);
    font-weight: 500
}

@font-face {
    font-family: PoppinsZ;
    src: url(../fonts/PoppinsZ/PoppinsZ.ttf);
    font-weight: 400
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Bold.woff);
    font-weight: 700
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Medium.woff);
    font-weight: 500
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Regular.woff);
    font-weight: 400
}

@font-face {
    font-family: Oswald;
    src: url(../fonts/Oswald/Oswald-Regular.ttf);
    font-weight: 400
}

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins/Poppins.woff2) format("woff2"), url(../fonts/Poppins/Poppins.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins/Poppins-Medium.woff2) format("woff2"), url(../fonts/Poppins/Poppins-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins/Poppins-SemiBold.woff2) format("woff2"), url(../fonts/Poppins/Poppins-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: BarlowCondensed;
    src: url(../fonts/BarlowCondensed/BarlowCondensed-SemiBold.woff2) format("woff2"), url(../fonts/BarlowCondensed/BarlowCondensed-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

[class^="fa icon-t"] {
    margin-right: 3px
}

.icon-t0:before {
    content: "\f00c"
}

.icon-t1:before {
    content: "\f006"
}

.icon-t2:before {
    content: "\f03e"
}

.icon-t3:before {
    content: "\f16a"
}

.icon-t4:before {
    content: "\f201"
}

.icon-t5:before {
    content: "\f16a"
}

.icon-t6:before {
    content: "\f282"
}

.icon-t7:before {
    content: "\f00c"
}

.icon-t8:before {
    content: "\f00c"
}

.icon-t9:before {
    content: "\f00c"
}

.icon-t10:before {
    content: "\f00c"
}

.icon-t11:before {
    content: "\f044"
}

.icon-t12:before {
    content: "\f025"
}

.icon-t99:before {
    content: "\f02e"
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

.ic-play-circle,
.ic-tiktok {
    background: url(sprites.svg) 0 0 no-repeat;
    display: block
}

.story__thumb .ic-play-circle {
    width: 60px;
    height: 60px;
    background-position: 0 -100px;
    left: 24px;
    bottom: 24px;
    z-index: 1
}

.ic-tiktok {
    width: 14px;
    height: 16px;
    background-position: 0 -200px
}

.ic-zalo {
    width: 20px;
    height: 20px;
    background: url(ic-zalo.png) 0 0 no-repeat;
    display: block
}

.site-body {
    padding-bottom: 20px
}

.site-body::after {
    display: block;
    clear: both;
    content: ""
}

.site-body>.container {
    margin-bottom: var(--bth-margin)
}

.site-body>.container:last-child {
    margin-bottom: 0
}

.container {
    width: var(--container);
    margin-right: auto;
    margin-left: auto
}

.w-700 {
    width: 80%;
    margin: auto
}

@media (min-width:1024px) {
    .w-700 {
        width: 700px
    }
}

.col {
    display: grid;
    gap: var(--column-gap)
}

@media (min-width:1024px) {
    .col-xl-2 {
        grid-template-columns: 1fr 300px
    }
}

.col-xl-2>.banner {
    grid-column: 1/3
}

.col-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px
}

.col-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 30px
}

.col-4 {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--bth-margin)
}

@media (min-width:1024px) {
    .col-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width:1023px) {

    #sidebar-top-1,
    #sidebar-top-2,
    #sidebar-top-3,
    #sidebar-top-4,
    #sidebar-top-5 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 var(--gutter)
    }
}

.banner,
.rennab,
.sda {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0 !important
}

.banner .banner_show,
.banner .rennab_show,
.banner .sda_show,
.rennab .banner_show,
.rennab .rennab_show,
.rennab .sda_show,
.sda .banner_show,
.sda .rennab_show,
.sda .sda_show {
    width: 100%;
    text-align: center;
    margin-bottom: var(--gutter)
}

.banner img,
.rennab img,
.sda img {
    max-width: 100%;
    margin: 0 auto
}

.banner_group,
.rennab_group,
.sda_group {
    display: flex;
    justify-content: space-between;
    flex-direction: initial;
    min-height: 90px;
    gap: 0 var(--gutter)
}

.banner_group .banner_show,
.banner_group .rennab_show,
.banner_group .sda_show,
.rennab_group .banner_show,
.rennab_group .rennab_show,
.rennab_group .sda_show,
.sda_group .banner_show,
.sda_group .rennab_show,
.sda_group .sda_show {
    margin-bottom: 0;
    display: flex;
    align-items: center
}

.fyi-position {
    margin-bottom: var(--gutter)
}

.fyi-position+div {
    margin-bottom: var(--gutter)
}

#adsMobile_AdsTop .banner_show,
#adsMobile_AdsTop .rennab_show,
#adsMobile_AdsTop .sda_show,
#adsWeb_AdsTop .banner_show,
#adsWeb_AdsTop .rennab_show,
#adsWeb_AdsTop .sda_show,
#sdaMobile_SdaTop .banner_show,
#sdaMobile_SdaTop .rennab_show,
#sdaMobile_SdaTop .sda_show,
#sdaWeb_SdaTop .banner_show,
#sdaWeb_SdaTop .rennab_show,
#sdaWeb_SdaTop .sda_show {
    margin-bottom: 0
}

.banner .banner_show,
.banner .rennab_show,
.banner .sda_show,
.rennab .banner_show,
.rennab .rennab_show,
.rennab .sda_show,
.sda .banner_show,
.sda .rennab_show,
.sda .sda_show {
    margin-bottom: var(--column-gap)
}

.banner_group,
.rennab_group,
.sda_group {
    gap: var(--column-gap)
}

.fyi-position {
    margin-bottom: var(--column-gap)
}

#adsWeb_AdsTop .banner_show,
#adsWeb_AdsTop .rennab_show,
#adsWeb_AdsTop .sda_show {
    margin-bottom: 0
}

#sdaWeb_SdaTop .banner_show,
#sdaWeb_SdaTop .rennab_show,
#sdaWeb_SdaTop .sda_show {
    margin-bottom: 0
}

@media (max-width:1023px) {

    .banner,
    .rennab,
    .sda {
        display: none
    }
}

.story::after {
    display: block;
    clear: both;
    content: ""
}

.story__thumb {
    position: relative;
    overflow: hidden
}

.story__thumb::before {
    padding-bottom: 66.667%;
    content: "";
    display: block
}

.dvideo .story__thumb::before {
    padding-bottom: 56.25%
}

.story__thumb a {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0
}

.story__thumb a:hover {
    opacity: .85
}

.story__thumb img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    left: 0;
    top: 0
}

.story__thumb i {
    font-size: 24px;
    color: #fff;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.story__heading {
    font-family: var(--font-family-pop);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500
}

.story__heading>a {
    margin-top: 5px
}

.suggest .story__heading>a {
    color: #FFF
}

.story__summary {
    color: #303030
}

.dmmultimedia .story__summary {
    color: #FFF
}

.story__summary * {
    display: inline
}

#dmul .story__summary * {
    color: #FFE
}

.story__summary a {
    color: var(--primary, #d72027)
}

.story__summary a:hover {
    text-decoration: underline
}

.story time {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    display: block;
    margin-bottom: 8px
}

.story .cate {
    font-size: 12px;
    color: var(--primary, #d72027);
    text-transform: uppercase;
    margin-top: 6px
}

.story .cate:hover {
    color: var(--secondary, #b40c0e)
}

.d-flex {
    display: flex !important
}

.backdrop:before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2
}

.wrap-heading {
    position: relative
}

.wrap-heading::after {
    display: block;
    clear: both;
    content: ""
}

.wrap-heading .subcate {
    display: flex;
    position: absolute;
    top: 8px;
    right: 0;
    background: #fff;
    padding-left: 10px
}

.wrap-heading .subcate a {
    font-family: var(--font-family-pop);
    font-size: 13px;
    margin-left: 10px;
    display: flex;
    align-items: center
}

.wrap-heading .subcate a::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #ddd;
    margin-right: 10px;
    border-radius: 50%
}

.abf-multimedia .story i,
.highlight .center .story__heading i,
.story--focus .story__heading i {
    font-size: inherit
}

.abf-multimedia .story .ic-emagazine,
.abf-multimedia .story .ic-infographic,
.article__title .ic-emagazine,
.article__title .ic-infographic,
.highlight .center .ic-emagazine,
.highlight .center .ic-infographic,
.story--focus .ic-emagazine,
.story--focus .ic-infographic {
    width: 22px;
    height: 24px;
    background-position: 0 0
}

.abf-multimedia .story .ic-live,
.article__title .ic-live,
.highlight .center .ic-live,
.story--focus .ic-live {
    top: -6px !important
}

.multimedia .cate,
.abf-multimedia .cate {
    float: left;
    margin-top: 1px;
    margin-right: 10px
}

.dmultimedia {
    background: #FAFAFA url(bg.png);
    margin-top: -30px;
    padding-top: 20px
}

.area {
    padding: 30px 0;
    margin: var(--bth-margin) 0
}

.area--black {
    background: var(--success, #1F1F1F)
}

.area--black a {
    color: #FFF
}

.area--black a:hover {
    color: rgba(255, 255, 255, .7)
}

.area--black a i {
    color: #FFF
}

.area--dark {
    background: var(--success) url(trongdong3.webp) center center no-repeat
}

.area--dark a {
    color: #FFF
}

.area--dark a:hover {
    color: rgba(255, 255, 255, .7)
}

.area--dark a i {
    color: #FFF
}

/*.area--light{background:#a7c3f2 url(trongdong3.webp) center center/100% no-repeat}*/
.area--light {
    background: var(--success) url(trongdong3.webp) center center/100% no-repeat
}

.area--light .subcate {
    background: transparent
}

.area--light .subcate a {
    font-weight: 500;
    margin-left: 16px
}

.area--light .subcate a::before {
    background: var(--primary, #d72027)
}

.region {
    height: 300px;
    margin: -20px 0 var(--bth-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.region::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(85, 36, 0, .3);
    backdrop-filter: blur(1px);
    position: absolute
}

.region>* {
    position: relative
}

@media (min-width:1200px) {
    .region {
        margin-top: -30px
    }
}

.region .breadcrumb {
    display: block;
    padding: 0;
    margin: 0;
    border: 0 none;
    text-align: center;
    max-width: var(--container)
}

.region .breadcrumb .main {
    margin-top: 60px;
    font-size: 44px;
    color: #FFF;
    font-weight: 700;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
    justify-content: center;
    min-width: inherit
}

@media (max-width:1024px) {
    .region .breadcrumb .main {
        font-size: 34px
    }
}

.region .breadcrumb .main a {
    color: #FFF !important;
    font-size: 45px
}

.region .breadcrumb .sub {
    margin: 0 0 0;
    max-width: inherit
}

.region .breadcrumb .sub>* {
    font-size: 15px;
    display: flex
}

.region .breadcrumb .sub>::before {
    content: "|";
    color: #FFF;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 8px;
    background: 0 0
}

.region .breadcrumb .sub>* a::before,
.region .breadcrumb .sub>:first-child::before {
    content: none
}

.region .breadcrumb .sub a {
    color: #FFF;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
    margin: 0
}

.region .breadcrumb .sub a:hover {
    color: var(--primary, #d72027)
}

.region .breadcrumb .sub a i {
    color: #FFF;
    font-size: 20px;
    margin-right: 6px;
    vertical-align: bottom
}

.region .breadcrumb .sub .ic-emagazine,
.region .breadcrumb .sub .ic-infographic {
    filter: brightness(10)
}

.divider {
    width: 100%;
    height: 25px;
    display: block;
    background: url(divider.svg) 0 0 no-repeat;
    margin: 24px auto
}

.btn-secondary {
    font-size: 16px;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    width: 200px;
    height: 50px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-secondary:hover {
    background: var(--primary, #d72027)
}

.back-to-top {
    opacity: 0;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: var(--secondary, #b40c0e);
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s, opacity .5s, visibility .5s
}

.back-to-top:before {
    font-family: FontAwesome;
    content: "\f062";
    font-size: 25px;
    color: #FFF
}

.back-to-top.show {
    opacity: 1;
    visibility: visible
}

.back-to-top:hover {
    background: var(--primary, #d72027)
}

.poll-box {
    padding: 20px;
    margin-bottom: var(--column-gap);
    background: #e7f1ff;
    border-top: 1px solid #9ec5fe
}

.poll-box .box-heading {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--gray-900, #212529);
    text-transform: uppercase;
    margin-bottom: 10px
}

.poll-box .box-content>* {
    font-size: 16px;
    margin-bottom: 10px
}

.poll-box .box-content>:last-child {
    margin: 0
}

.poll-box .box-content label {
    cursor: pointer;
    display: block
}

.poll-box .box-content label input {
    margin-right: 6px
}

.poll-box .box-content label input[type=radio] {
    accent-color: var(--secondary, #b40c0e)
}

.poll-box .wrap-button>* {
    font-size: 13px;
    padding: 3px 12px
}

.poll-box .wrap-button .btn-send {
    color: #fff;
    font-weight: 600;
    height: 28px;
    background: var(--secondary, #b40c0e)
}

.poll-box .wrap-button .btn-send:hover {
    background: var(--primary, #d72027)
}

.poll-box .wrap-button .btn-see {
    color: #0d6efd
}

.poll-box .wrap-button .btn-see:hover {
    text-decoration: underline
}

.fb_iframe_widget {
    text-align: center;
    display: block
}

.form-group .form-control,
.form-group textarea {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .1)
}

.form-group .form-control::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-600, #6c757d)
}

.form-group textarea {
    display: block;
    height: 100px;
    padding: 16px
}

.form-group .form-control {
    padding: 0 16px;
    height: 50px
}

.form-group .feedback,
.form-group .form-text {
    font-size: 13px;
    color: var(--primary, #d72027)
}

.d-flex {
    position: relative
}

.d-flex .ic-eye {
    font-size: 18px;
    color: var(--gray-600, #6c757d);
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.d-flex .ic-eye.slash {
    font-size: 20px
}

.d-flex .ic-eye.slash::before {
    content: "\e925"
}

.fw-link {
    font-size: 13px;
    color: #1b71b2
}

.fw-link:hover {
    text-decoration: underline
}

.tabs .tablinks.active {
    color: var(--primary, #d72027)
}

.tabs .tabcontent {
    display: none
}

.tabs .tabcontent.active {
    display: block
}

.ht24-page .breadcrumb .main+.main {
    font-size: 16px;
    text-transform: none;
    margin-left: auto
}

.ht24-page .breadcrumb .main+.main a {
    color: #fff;
    background: var(--secondary, #b40c0e);
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 12px
}

.ht24-page .breadcrumb .main+.main a:hover {
    background: var(--primary, #d72027)
}

.ht24-page .breadcrumb .main+.main::before {
    content: none
}

.site-header {
    background: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: var(--column-gap)
}

.site-header .hdr-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 18px 0;
    gap: 20px
}

@media (max-width:980px) {
    .site-header .hdr-content {
        justify-content: left
    }

    .navigation .main .menu-heading {
        font-size: 14px
    }

    .navigation li.main:nth-child(n+9):not(.search, .menu) {
        display: none
    }

    .feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    #dhoatdong>ul>li figure img {
        max-width: 150px !important
    }

    .dadhr {
        width: 100% !important
    }

    .wrap-heading .subcate a {
        font-size: 9px
    }

    .dcv0.zone--primary .box-content {
        grid-template-columns: 1fr 1fr 1fr
    }

    .dcv3 h3>a {
        font-size: 14px
    }

    #dhinhthanh .box-content {
        grid-template-columns: 1fr !important
    }

    .navigation .menu-wrap {
        margin-left: 0
    }

    .site-body>.news-ticker-container {
        width: 100%
    }
}

.logoslogan {
    margin-left: 0;
    text-align: center;
    width: 440px
}

.logoslogan p {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: bold;
    text-align: left
}

.topad {
    position: absolute;
    bottom: 55px;
    right: 0;
    text-align: right
}

.topad .hmnu {
    margin-bottom: 9px
}

.topad .hmnu time {
    line-height: 40px;
    color: #555;
    font-size: 13px;
    font-family: Poppins
}

.topad .hmnu a {
    font-size: 15px;
    font-family: Poppins;
    color: #123;
    text-decoration: none;
    text-transform: uppercase
}

.topad .hmnu a:hover {
    color: var(--primary, #d72027)
}

@media (min-width:1200px) {
    .site-header .hdr-content {
        display: block;
        margin: 0 auto;
        text-align: center;
        position: relative
    }

    .logoslogan {
        margin-left: 300px
    }

    .topad {
        bottom: 10px
    }
}

.site-header .logo {
    width: 390px;
    height: 75px;
    margin-left: -10px;
    background: url(../logo/logo_ol_xanh.svg) 0 0 no-repeat;
    display: block;
    text-indent: -999em
}

.site-header .hdr-link {
    display: flex;
    gap: 16px
}

.site-header .hdr-link .item {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    font-weight: 500;
    display: flex;
    align-items: center
}

.site-header .hdr-link .item.active,
.site-header .hdr-link .item:hover {
    color: var(--primary, #d72027)
}

.site-header .hdr-link .item.active i,
.site-header .hdr-link .item:hover i {
    color: #fff;
    border-color: #fff;
    background: var(--primary, #d72027)
}

.site-header .hdr-link .item i {
    font-size: 20px;
    color: var(--primary, #d72027);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100, #f8f9fa);
    border: 1px solid #EEE;
    border-radius: 30%;
    margin-right: 6px;
    transition: all .2s ease-in-out
}

.site-header .hdr-link .item .ic-medal {
    font-size: 22px
}

.topbar {
    font-size: 14px;
    color: #666;
    height: 40px;
    border-bottom: solid 1px #EEE;
    display: flex;
    width: 1170px;
    margin: 0 auto;
    padding: 0 5px;
    background-color: #FAFAFA
}

.topbar>* {
    display: flex;
    align-items: center
}

.topbar>.container {
    margin-left: 0
}

.topbar a {
    color: var(--gray-600, #6c757d)
}

.topbar a:hover {
    color: var(--primary, #d72027)
}

.topbar .tab {
    margin-right: auto
}

.topbar .hotnews {
    margin-left: 20px
}

.topbar .hr {
    display: inline-block;
    color: #CCC;
    margin-left: 16px
}

.topbar .link {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 12px
}

.topbar .link>li {
    font-family: Poppins;
    font-size: 13px
}

.topbar .link a {
    font-size: 20px
}

.topbar .link a>i.fa-newspaper-o {
    color: #3B5998;
    margin-top: 11px
}

.topbar .link a>i.fa-facebook-official {
    color: #3b5998
}

.topbar .link a>i.fa-youtube {
    color: #d72027
}

.topbar .link a>i.fa-google {
    color: #F60
}

.topbar .link a>i.fa-user {
    color: #F60
}

.topbar .link a>i.fa-twitter {
    color: #55acee
}

.topbar .link a>i.fa-flash {
    color: #333
}

.topbar .link a>i.fa-vimeo-square {
    color: #2258A5
}

.topbar .link a>i.fa-map-marker {
    color: #BE0000
}

.topbar .link a>i.fa-fire {
    color: #EB2127
}

.topbar .link a>i:hover {
    color: RED
}

.topbar .link a>img.tv,
.topbar .link a>img.radio {
    margin-bottom: 6px;
    width: 20px
}

.navigation {
    background: #fff;
    border-top: 1px solid #D61116;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}

.navigation.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000
}

.navigation .menu-wrap {
    display: flex
}

.navigation .main {
    position: relative
}

.navigation .main .menu-heading {
    color: var(--gray-900, #212529);
    font-weight: 600;
    text-transform: capitalize;
    padding: 0 5px;
    height: 46px;
    display: flex;
    align-items: center
}

@media screen and (min-width:1280px) {
    .navigation .main .menu-heading {
        font-weight: 400;
        line-height: 1.5;
        font-family: var(--font-family-sec);
        font-size: 16px;
        color: #212529;
        text-transform: uppercase;
        padding: 0 7px
    }

    #dhinhthanh .boxptth a {
        font-size: 19px !important
    }

    .dlphatsong {
        margin-bottom: 7px !important
    }
}

.navigation .main:hover .menu-heading {
    color: var(--primary, #d72027);
    background: var(--gray-100, #f8f9fa)
}

.navigation .main:hover .submenu {
    display: block
}

@media (max-width:1024px) {
    .navigation .main:not(.home):not(.search):not(.menu) {
        font-size: 11px
    }

    .dcv0.zone--primary .box-content {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.navigation .main.active:not(.home):not(.search):not(.menu) {
    border-bottom: 1px solid var(--primary, #d72027);
    margin-bottom: -1px
}

.navigation .main.active:not(.home):not(.search):not(.menu) .menu-heading {
    color: var(--primary, #d72027)
}

.navigation .submenu {
    display: none;
    position: absolute;
    z-index: 3;
    min-width: 200px;
    padding: 8px 0;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}

.navigation .submenu a {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--font-family-sec);
    font-size: 16px
}

.navigation .submenu a:hover {
    background: #eee
}

.navigation .home {
    margin-right: 8px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    border-right: 1px solid rgba(0, 0, 0, .08)
}

.navigation .home .menu-heading {
    font-size: 24px;
    color: var(--primary, #d72027);
    width: 46px;
    justify-content: center
}

.navigation .home.active {
    background: var(--gray-100, #f8f9fa)
}

.navigation .menu-btn,
.navigation .search-btn {
    color: var(--gray-600, #6c757d);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.navigation .search-btn {
    font-size: 24px
}

.navigation .menu-btn {
    font-size: 22px
}

.navigation .menu-btn:hover,
.navigation .search-btn:hover {
    color: var(--primary, #d72027)
}

.navigation .dropdown-menu {
    display: none;
    padding: 10px 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--gray-100, #f8f9fa);
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    max-height: 610px;
    overflow: auto
}

.navigation .dropdown-menu::-webkit-scrollbar {
    width: 4px;
    border-radius: 6px
}

.navigation .dropdown-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05)
}

.navigation .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .1);
    border-radius: 10px
}

@media (min-width:1200px) {
    .navigation .dropdown-menu {
        max-height: 768px;
        background: #FAFAFA url(trongdong3.webp) center center no-repeat
    }
}

.navigation .search {
    position: inherit;
    margin-left: auto
}

.navigation .search input {
    font-size: 14px;
    color: var(--gray-600, #6c757d);
    padding-left: 10px;
    width: 75%;
    background: 0 0;
    border: 0 none
}

.navigation .search input::placeholder {
    color: var(--gray-600, #6c757d)
}

.navigation .search .btn {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    padding: 0 16px;
    margin-right: 3px;
    height: 34px;
    display: flex;
    align-items: center;
    border-radius: 20px
}

.navigation .search.active {
    border-left: 1px solid rgba(0, 0, 0, .08)
}

.navigation .search.active i:before {
    content: "\e00a"
}

.navigation .search-form {
    width: 400px;
    height: 40px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 20px;
    margin-left: auto;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (min-width:1200px) {
    .navigation .search-form {
        margin-left: calc(50% + 185px)
    }
}

.navigation .menu {
    position: inherit;
    border-left: 1px solid rgba(0, 0, 0, .08);
    border-right: 1px solid rgba(0, 0, 0, .08)
}

.navigation .menu.active i {
    font-size: 34px
}

.navigation .menu.active i:before {
    content: "\f00d"
}

.navigation .menu:hover .menu-btn {
    background: var(--gray-100, #f8f9fa)
}

.mega-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0
}

@media (min-width:1200px) {
    .mega-menu {
        grid-template-columns: repeat(6, 1fr)
    }
}

.menu-col a {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    padding: 3px 0
}

.menu-col a:hover {
    text-decoration: underline
}

.menu-col a:first-child {
    font-size: 15px;
    color: var(--gray-800, #123);
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 3px
}

.site-footer {
    background: var(--success) url(trongdong3.webp) center center repeat;
    border-top: solid 2px var(--primary)
}

.site-footer .footer-info {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 30px
}

.site-footer .footer-info::after {
    display: block;
    clear: both;
    content: ""
}

.site-footer .footer-info * {
    font-size: 14px;
    line-height: 1.6;
    color: #FFF
}

.site-footer .footer-info a {
    display: inline
}

.site-footer .footer-info a:hover {
    text-decoration: underline
}

.site-footer .footer-info .logo {
    margin-bottom: 10px;
    width: 390px;
    height: 75px;
    background: url(../logo/logo_ol_xanh.svg) 0 0 no-repeat !important;
    display: block;
    text-indent: -999em
}

.site-footer .footer-info .right {
    text-align: right
}

.breadcrumb {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: var(--column-gap)
}

.breadcrumb .main {
    font-family: var(--font-family-pop);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    min-width: max-content
}

.breadcrumb .main * {
    color: var(--gray-900, #212529)
}

.breadcrumb .main a:hover {
    color: var(--primary, #d72027)
}

.breadcrumb .main+.main {
    font-size: 24px;
    font-weight: 400
}

.breadcrumb .main+.main::before {
    content: "/";
    padding: 0 10px
}

.breadcrumb .sub {
    display: flex;
    margin-left: auto;
    white-space: nowrap;
    overflow-x: auto
}

@media (max-width:768px) {
    .breadcrumb .sub {
        max-width: 80%
    }
}

.breadcrumb .sub a {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 16px;
    display: flex;
    align-items: center
}

.breadcrumb .sub a.active {
    color: var(--primary, #d72027);
    text-decoration: underline
}

.breadcrumb .sub a>i {
    color: var(--primary, #d72027);
    margin-right: 5px
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1009
}

.modal-open {
    overflow: hidden
}

@media (min-width:1024px) {
    .modal-open {
        padding-right: 17px
    }
}

.modal {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    z-index: 9999;
    max-width: calc(100% - 30px);
    height: fit-content;
    overflow: hidden
}

@media (min-width:1024px) {
    .modal {
        max-width: fit-content
    }
}

.modal>* {
    margin-top: 16px
}

.modal>:first-child {
    margin-top: 0
}

.modal .modal-header {
    height: 70px;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.modal .modal-header .modal-title {
    font-family: var(--font-family-pop);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--gray-900, #212529);
    margin-right: auto
}

.modal .modal-header .btn-close,
.modal .modal-header .close {
    font-size: 36px;
    color: var(--gray-800, #343a40)
}

.modal .modal-body {
    margin: 30px 30px 50px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 16px
}

@media (min-width:1024px) {
    .modal .modal-body {
        max-width: 500px;
        width: 500px
    }
}

.modal .modal-body>* {
    margin-top: 16px
}

.modal .modal-body>:first-child {
    margin-top: 0
}

.modal .modal-body .form-group {
    width: 70%;
    margin-left: auto;
    margin-right: auto
}

.modal .modal-body .form-group>* {
    margin-top: 6px;
    display: block
}

.modal .modal-body .form-group>:first-child {
    margin-top: 0
}

.modal .modal-body .form-group:last-child {
    margin-bottom: 0
}

.modal .modal-body .recaptcha {
    width: 70%;
    margin-left: auto;
    margin-right: auto
}

.modal .modal-body .text-center,
.modal .modal-body .text-left,
.modal .modal-body .text-right {
    font-size: 16px
}

.modal .modal-body .text-center {
    text-align: center
}

.modal .modal-body .text-left {
    text-align: left
}

.modal .modal-body .text-right {
    text-align: right
}

.modal .modal-body .heading-body {
    font-size: 18px;
    font-weight: 600;
    text-align: center
}

.modal .modal-body table {
    border-collapse: collapse;
    width: 100%
}

.modal .modal-body td,
.modal .modal-body th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px
}

.modal .modal-body .inline-block>* {
    display: inline-block
}

.modal .modal-body .inline-block a {
    color: red
}

.modal .modal-body .form-check-label {
    display: flex;
    text-transform: uppercase;
    margin-bottom: 0
}

.modal .modal-body.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px #fff;
    border-radius: 6px;
    background-color: #fff
}

.modal .modal-body.scroll::-webkit-scrollbar {
    width: 4px;
    background: rgba(0, 0, 0, .1)
}

.modal .modal-body.scroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(0, 0, 0, .1)
}

.modal .modal-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 50px
}

.modal .modal-footer button {
    font-size: 14px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.modal .modal-footer .btn-submit {
    color: #fff;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e)
}

.modal .modal-footer .btn-submit:hover {
    background: var(--primary, #d72027)
}

.modal .modal-footer .btn-close {
    background: #eee
}

.modal .modal-footer .btn-close:hover {
    background: #e0e0e0
}

.modal-vote li {
    width: 100%;
    float: left;
    margin: 0 0 10px;
    padding: 0 0 15px;
    border-bottom: 1px dotted #ccc
}

.modal-vote li:last-child {
    border-bottom: none
}

.modal-vote .text {
    width: 30%;
    float: left;
    font: 13px arial;
    color: #555;
    padding-right: 15px
}

.modal-vote .number {
    width: 18%;
    float: right;
    font: 12px arial;
    color: #999;
    text-align: right
}

.modal-vote .number label {
    color: #000
}

.modal-vote .color-bar {
    width: 50%;
    float: left;
    margin: 5px 0;
    height: 5px;
    background: #ccc
}

.modal-vote .color-bar .color-result {
    position: relative;
    background: var(--primary, #d72027);
    float: left;
    height: 5px
}

.modal-vote .color-bar .text-result {
    display: inline-block;
    padding: 5px 0 0;
    position: absolute;
    right: 0;
    bottom: -20px;
    font: 11px arial;
    color: #000
}

.modal-vote .total-vote {
    float: right;
    font: 400 13px arial;
    color: #666
}

.modal-vote .total-vote label {
    font-weight: 600
}

.modal-body .social {
    display: flex;
    justify-content: center;
    margin: 30px 0
}

.modal-body .social a {
    font-size: 18px;
    width: 40px;
    height: 40px;
    background: #f3f5f7;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.modal-body .social a:hover {
    background: #eee
}

.modal-body .social .fb {
    color: #3b5998
}

.modal-body .social .gg {
    color: #db4437
}

.modal-body .social .zl {
    color: #018fe5
}

.modal-body .register {
    color: #1b71b2;
    text-transform: uppercase;
    display: inline
}

.modal-body .register:hover {
    text-decoration: underline
}

.modal-body p {
    color: var(--gray-600, #6c757d);
    text-align: center
}

.modal-body .btn-submit {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    width: 70%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.modal-body .btn-submit:hover {
    background: var(--primary, #d72027)
}

.modal-body .text-decor {
    font-size: 11px;
    text-transform: uppercase;
    width: 70%;
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: auto max-content auto;
    gap: 0 20px
}

.modal-body .text-decor::after,
.modal-body .text-decor::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.modal-body .notlogin {
    color: #1b71b2;
    text-align: center;
    margin: 20px 0
}

.modal-body .notlogin:hover {
    text-decoration: underline
}

.modal-body .policy {
    font-size: 14px;
    width: 70%;
    margin-left: auto;
    margin-right: auto
}

.modal-body .policy a {
    color: #1b71b2;
    display: inline
}

.modal-body .policy a:hover {
    text-decoration: underline
}

.feature .story:not(:last-child) {
    margin-bottom: 20px
}

.feature .story__thumb {
    width: 100%
}

.abf-homepage+.sidebar {
    grid-template-columns: 1fr !important
}

.center-point .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.center-point .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.center-point .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.center-point .box-heading a:hover {
    color: var(--primary, #d72027)
}

.center-point .box-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--column-gap)
}

.center-point .story__thumb {
    margin-bottom: 8px;
    background: #fff
}

.center-point .story__thumb a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border: 1px solid rgba(255, 255, 255, .3)
}

.center-point .story__heading {
    font-size: 18px
}

.center-point-wrap {
    margin-bottom: var(--bth-margin)
}

@media (min-width:1024px) {
    .center-point-wrap {
        display: grid;
        gap: var(--column-gap);
        grid-template-columns: 1fr 300px
    }
}

.multi-pack .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.multi-pack .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.multi-pack .box-heading * {
    color: #FFF;
    white-space: nowrap
}

.multi-pack .box-heading a:hover {
    color: var(--primary, #d72027)
}

.multi-pack .subcate a {
    color: #EFE;
    font-size: 14px;
    text-transform: uppercase
}

.multi-pack .subcate a:hover {
    color: var(--primary, #d72027)
}

.multi-pack .box-content {
    display: grid;
    gap: 24px var(--column-gap);
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:1024px) {
    .multi-pack .box-content {
        grid-template-columns: 570px 1fr 1fr
    }
}

.multi-pack .story__thumb {
    margin-bottom: 8px
}

.multi-pack .story--focus {
    grid-column: 1/3
}

@media (min-width:1024px) {
    .multi-pack .story--focus {
        grid-row: 1/4;
        grid-column: inherit
    }
}

.multi-pack .story--focus .story__thumb {
    margin-bottom: 12px
}

.multi-pack .story--focus .story__heading {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 8px
}

@media (max-width:1023px) {
    .multimedia .subcate {
        position: initial;
        padding: 0 0 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow-x: auto
    }
}

.multimedia .subcate a {
    margin: 0 10px
}

.multimedia .subcate a::before {
    content: none
}

.multimedia .subcate i {
    font-size: 18px;
    color: #FFF;
    margin-right: 3px
}

.multimedia .subcate .ic-emagazine,
.multimedia .subcate .ic-infographic {
    height: 18px;
    margin-right: 6px;
    opacity: 80%
}

.multimedia .subcate .ic-emagazine {
    width: 14px;
    background-size: 50px;
    background-position: 0 -32px
}

.multimedia .subcate .ic-infographic {
    width: 16px;
    background-size: 16px;
    background-position: 0 0
}

.timeline {
    margin-bottom: 30px
}

.timeline .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.timeline .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.timeline .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.timeline .box-heading a:hover {
    color: var(--primary, #d72027)
}

.timeline .story:not(:first-child) {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px dashed rgba(0, 0, 0, .1)
}

.timeline .story__thumb {
    width: 260px;
    float: left;
    margin-right: 20px
}

.timeline .story__heading {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 8px
}

.timeline .btn {
    margin-top: 30px
}

.topic {
    background: var(--success, #002e44) url(trongdong3.webp) center 280px no-repeat;
    border-radius: 3px;
    padding: 20px;
    margin-bottom: var(--column-gap)
}

.topic .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px;
    grid-template-columns: auto max-content auto
}

.topic .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.topic .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.topic .box-heading a:hover {
    color: var(--primary, #d72027)
}

.topic .box-heading::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    position: relative;
    top: calc(50% - .5px)
}

.topic .box-heading::after {
    background: rgba(255, 255, 255, .2)
}

.topic .box-heading a {
    color: #fff
}

.topic .box-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

@media (min-width:1024px) {
    .topic .box-content {
        grid-template-columns: repeat(4, 1fr)
    }
}

.topic .story__thumb {
    margin-bottom: 12px;
    background: #fff
}

.topic .story__heading {
    font-weight: 400
}

.dmmultimedia .story__heading a,
.topic .story__heading a {
    color: #fff
}

.topic .story__heading a:hover {
    color: rgba(255, 255, 255, .7)
}

.topic .story__heading a i {
    color: #fff
}

.topic .story__heading a .ic-emagazine,
.topic .story__heading a .ic-infographic {
    filter: brightness(10)
}

.location {
    position: relative
}

.location-col {
    padding-bottom: 20px;
    margin-bottom: 20px
}

.location-col+.location-col .story {
    position: relative
}

@media (min-width:1200px) {
    .location-col+.location-col .story::before {
        content: "";
        width: 1px;
        height: calc(100% + 20px);
        position: absolute;
        left: -24px
    }
}

.location-col .name {
    font-family: var(--font-family-pop);
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    border-bottom: 1px solid var(--primary, #d72027);
    padding-left: 12px;
    margin-bottom: 20px
}

.location-col .story__thumb {
    margin-bottom: 12px
}

.location-col .story__heading {
    line-height: 1.5;
    font-weight: 400
}

.location .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px;
    margin-bottom: 30px
}

.location .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.location .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.location .box-heading a:hover {
    color: var(--primary, #d72027)
}

.location .box-heading::after {
    background: rgba(255, 255, 255, .2)
}

.location .box-heading * {
    color: #fff
}

.location .wrap-heading select {
    color: var(--gray-600, #6c757d);
    border: 0 none;
    border: 1px solid #eee;
    height: 40px;
    width: 240px;
    padding: 0 10px;
    position: absolute;
    top: -3px;
    right: 0
}

.location .box-content {
    display: grid;
    gap: 0 20px;
    grid-template-columns: repeat(4, 1fr)
}

@media (min-width:1200px) {
    .location .box-content {
        justify-content: space-between;
        grid-template-columns: repeat(4, 1fr)
    }
}

.location p.more {
    text-align: right
}

.location p.more a.btn {
    font-size: 16px;
    color: #FFF;
    text-transform: uppercase
}

.location p.more a.btn:hover {
    color: RED
}

.zone--primary:not(:last-child) {
    margin-bottom: 30px
}

.zone--primary .box-heading {
    font-family: var(--font-family-bar);
    font-size: 25px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.zone--primary .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.zone--primary .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.zone--primary .box-heading a:hover {
    color: var(--primary, #d72027)
}

.zone--primary .wrap-heading .subcate a {
    font-size: 12px;
    color: var(--gray-600, #6c757d)
}

.zone--primary .wrap-heading .subcate a:hover {
    color: var(--primary, #d72027)
}

.zone--primary .box-content {
    display: grid;
    gap: 20px var(--column-gap);
    grid-template-columns: 1fr 2fr;
    grid-auto-flow: column
}

@media (min-width:1200px) {
    .zone--primary .box-content {
        grid-template-columns: 270px 1fr
    }

    .dcv0.zone--primary .box-content {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.zone--primary .story__thumb {
    margin-bottom: 12px
}

.zone--primary .story--focus {
    grid-row: 1/3
}

.zone--primary .story--focus .story__heading {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 8px
}

.zone--primary.has-text .box-content {
    gap: 0 var(--column-gap)
}

.zone--primary.has-text .story:not(.story--focus):not(:first-child) {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.zone--primary.has-text .story--focus {
    grid-row: 1/6
}

.zone--secondary .box-heading {
    font-family: var(--font-family-bar);
    font-size: 25px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px;
    margin-bottom: 12px
}

.zone--secondary .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.zone--secondary .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.zone--secondary .box-heading a:hover {
    color: var(--primary, #d72027)
}

.zone--secondary .story+.story {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.zone--secondary .story__thumb {
    margin-bottom: 12px
}

.box-aside {
    padding: 8px;
    background: #F8F9FA;
    border-top: 1px solid #FFF
}

.box-aside .box-heading {
    font-family: var(--font-family-bar);
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 20px;
    border-left: solid 2px var(--primary);
    padding-left: 5px
}

.box-aside .story:not(:last-child) {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.box-aside .story--focus .story__thumb {
    margin-bottom: 10px
}

.short-video {
    margin: 20px auto;
    padding: 30px 29px;
    background: url(short-video-bg.png) 0 0 no-repeat;
    background-size: cover
}

.short-video .box-heading {
    height: 46px;
    background: url(short-video-heading.svg) center 0 no-repeat;
    margin-bottom: 30px
}

.short-video .box-heading .title {
    height: 100%;
    text-indent: -999em
}

.short-video .box-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

@media (min-width:1024px) {
    .short-video .box-content {
        grid-template-columns: repeat(4, 1fr)
    }
}

.short-video .story__thumb {
    margin-bottom: 12px
}

.short-video .story__thumb::before {
    padding-bottom: 177.77%
}

.short-video .story__thumb a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, #000 -15%, rgba(255, 255, 255, 0) 30%)
}

.short-video .story__heading a {
    color: #fff;
    font-weight: 400
}

.short-video .story__heading a:hover {
    color: rgba(255, 255, 255, .7)
}

.short-video .story__heading i {
    color: #fff
}

.short-video .story__heading .ic-emagazine,
.short-video .story__heading .ic-infographic {
    filter: brightness(10)
}

.short-video .cate {
    margin: 0 0 6px
}

.short-video-list .story__thumb {
    margin-bottom: 12px
}

.short-video-list .story__thumb::before {
    padding-bottom: 177.77%
}

.short-video-list .story__thumb a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, #000 -15%, rgba(255, 255, 255, 0) 30%)
}

.short-video-wrapper {
    position: relative;
    width: 100%
}

.short-video-wrapper .close {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 60px;
    top: 60px;
    background: rgba(0, 0, 0, .3);
    z-index: 2;
    font-size: 0;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    transition: all .2s ease-in-out
}

.short-video-wrapper .close::after,
.short-video-wrapper .close::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 18px;
    background: #fff;
    top: 50%;
    left: 50%
}

.short-video-wrapper .close::before {
    transform: translateY(-50%) rotate(-45deg)
}

.short-video-wrapper .close::after {
    transform: translateY(-50%) rotate(45deg)
}

.short-video-wrapper .close:hover {
    background: rgba(0, 0, 0, .6)
}

.short-video-wrapper .bg-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    filter: blur(30px);
    z-index: 1;
    transition: .3s
}

.short-video-wrapper .swiper {
    height: 100vh;
    position: relative
}

.short-video-wrapper .swiper [class^=swiper-button-] {
    transform: translateY(-50%);
    right: 60px;
    left: auto;
    width: 50px;
    height: 50px;
    padding-left: 3px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    transition: all .2s ease-in-out
}

.short-video-wrapper .swiper [class^=swiper-button-]::after {
    font-family: icomoon;
    font-size: 16px;
    color: #fff
}

.short-video-wrapper .swiper [class^=swiper-button-]:hover {
    background: rgba(0, 0, 0, .6)
}

.short-video-wrapper .swiper-button-prev {
    top: calc(50% - 50px)
}

.short-video-wrapper .swiper-button-prev::after {
    content: "\e926"
}

.short-video-wrapper .swiper-button-next {
    top: calc(50% + 50px)
}

.short-video-wrapper .swiper-button-next::after {
    content: "\e900"
}

.short-video-wrapper .swiper-slide-active .social {
    opacity: 1 !important
}

.short-video-wrapper .swiper .item {
    padding: 15% 0;
    height: 100vh;
    position: relative
}

@media (min-width:1366px) {
    .short-video-wrapper .swiper .item {
        padding: 35px 0
    }
}

.short-video-wrapper .swiper .item .content {
    background: linear-gradient(180deg, rgba(31, 31, 31, .6) 0, rgba(41, 41, 41, 0) 50.52%, rgba(31, 31, 31, .6) 99.66%);
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, .1));
    border-radius: 10px;
    width: 320px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden
}

@media (min-width:1600px) {
    .short-video-wrapper .swiper .item .content {
        width: 450px
    }
}

.short-video-wrapper .swiper .item .content img,
.short-video-wrapper .swiper .item .content video {
    width: 100%;
    border-radius: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.short-video-wrapper .swiper .item .metadata {
    position: absolute;
    bottom: 0;
    padding: 24px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0, #333 100%);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    width: 100%
}

.short-video-wrapper .swiper .item .option {
    position: absolute;
    top: 0;
    padding: 24px 24px 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.short-video-wrapper .swiper .item .option>* {
    min-width: 25px;
    color: #fff;
    font-size: 20px;
    cursor: pointer
}

.short-video-wrapper .swiper .item .option .ic-video::before {
    content: "\e915"
}

.short-video-wrapper .swiper .item .option .ic-pause::before {
    content: "🕔"
}

.short-video-wrapper .swiper .item .option .ic-volume::before {
    content: "🕒"
}

.short-video-wrapper .swiper .item .option .ic-volume-slash::before {
    content: "🕓"
}

.short-video-wrapper .meta {
    display: flex;
    margin-bottom: 6px
}

.short-video-wrapper .meta * {
    color: #fff
}

.short-video-wrapper .meta .cate {
    font-size: 12px;
    text-transform: uppercase
}

.short-video-wrapper .meta .cate::after {
    content: "-";
    padding: 0 10px
}

.short-video-wrapper .article__title {
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    font-weight: 500
}

.short-video-wrapper .article__author {
    font-weight: 500;
    text-align-last: left
}

.short-video-wrapper .article__author * {
    color: var(--gray-400, #ced4da)
}

.short-video-wrapper .social {
    text-align: center;
    position: absolute;
    right: calc(50% - 350px);
    bottom: 40px;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 1s
}

.short-video-wrapper .social * {
    color: #fff
}

.short-video-wrapper .social a {
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px auto 0;
    border-radius: 50%
}

.short-video-wrapper .social a:hover {
    opacity: .85
}

.short-video-wrapper .social .fb {
    background: #3b5998
}

.short-video-wrapper .social .tt {
    background: #55acee
}

.short-video-wrapper .social .zl {
    background: #018fe5
}

.short-video-modal {
    top: 0
}

.box-ads {
    padding: 24px 20px;
    margin-top: 30px;
    background: var(--gray-100, #f8f9fa)
}

.box-ads .box-heading {
    font-family: var(--font-family-bar);
    font-size: 25px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.box-ads .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.box-ads .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.box-ads .box-heading a:hover {
    color: var(--primary, #d72027)
}

.box-ads .wrap-heading .subcate {
    background: var(--gray-100, #f8f9fa)
}

@media (max-width:1023px) {
    .box-ads .wrap-heading .subcate {
        position: initial;
        padding: 0 0 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow-x: auto
    }
}

.box-ads .wrap-heading .subcate a {
    font-size: 13px;
    color: var(--gray-600, #6c757d)
}

.box-ads .wrap-heading .subcate a:hover {
    color: var(--primary, #d72027)
}

.box-ads .box-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

@media (min-width:1024px) {
    .box-ads .box-content {
        grid-template-columns: repeat(4, 1fr)
    }
}

.box-ads .story__thumb {
    width: 120px;
    float: left;
    margin-right: 16px
}

.popular .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.popular .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.popular .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.popular .box-heading a:hover {
    color: var(--primary, #d72027)
}

.popular .story:not(:last-child) {
    border-bottom: 1px dashed rgba(0, 0, 0, .1)
}

.popular .story:nth-child(2) .story__heading a::before {
    background-position: -100px 0
}

.popular .story:nth-child(3) .story__heading a::before {
    background-position: -200px 0
}

.popular .story:nth-child(4) .story__heading a::before {
    background-position: -300px 0
}

.popular .story:nth-child(5) .story__heading a::before {
    background-position: -400px 0
}

.popular .story__heading {
    font-size: 16px;
    padding: 16px
}

.popular .story__heading a {
    position: relative;
    padding-left: 50px
}

.popular .story__heading a:before {
    content: "";
    width: 40px;
    height: 32px;
    background: url(sprites.svg) 0 0 no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.popular .story.story--focus {
    padding: 0;
    border: 0 none;
    position: relative
}

.popular .story.story--focus .story__thumb a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, #000 -15%, rgba(255, 255, 255, 0) 70%)
}

.popular .story.story--focus .story__heading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.popular .story.story--focus .story__heading a,
.popular .story.story--focus .story__heading i {
    color: #fff
}

.popular .story.story--focus .ic-emagazine,
.popular .story.story--focus .ic-infographic {
    filter: brightness(10)
}

.suggest .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.suggest .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.suggest .box-heading * {
    color: #FFF;
    white-space: nowrap
}

.suggest .box-heading a:hover {
    color: var(--primary, #d72027)
}

.suggest .box-content {
    display: grid;
    gap: 24px var(--column-gap);
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:1024px) {
    .suggest .box-content {
        grid-template-columns: repeat(3, 1fr)
    }
}

.suggest .box-content .btn {
    grid-column: 1/3
}

@media (min-width:1024px) {
    .suggest .box-content .btn {
        grid-column: 1/5
    }
}

.suggest .story__thumb {
    margin-bottom: 12px
}

.suggest .story__heading {
    font-size: 18px
}

.power-cut {
    border-top: 1px solid #0d6efd
}

.power-cut .box-heading .title:hover {
    color: #0d6efd
}

.power-cut .box-content select {
    color: var(--gray-600, #6c757d);
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 12px;
    height: 40px
}

.power-cut .box-content .field {
    margin-bottom: 12px
}

.power-cut .box-content .field:last-of-type {
    margin-bottom: 0
}

.power-cut .box-content .field label {
    margin-bottom: 6px;
    font-weight: 700
}

.power-cut .box-content .field input[type=date] {
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    height: 40px
}

.power-cut .box-content .btn {
    display: flex;
    padding: 6px 20px 7px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    width: fit-content;
    margin: 20px auto 0;
    font-weight: 600;
    border-radius: 999px;
    background: #0d6efd
}

.power-cut .box-content .btn:hover {
    opacity: .85;
    transition: .3s all
}

.region--power-cut {
    background: url(power-cut.png) center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column
}

.region--power-cut .wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px
}

.region--power-cut .wrapper select {
    color: var(--gray-600, #6c757d);
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    height: 40px
}

.region--power-cut .wrapper .field label {
    margin-bottom: 6px;
    font-weight: 700;
    color: #fff
}

.region--power-cut .wrapper .field input[type=date] {
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    height: 40px
}

.region--power-cut .wrapper .btn {
    display: flex;
    width: 120px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
    background: #0d6efd;
    border: 1px solid #0d6efd
}

.region--power-cut .wrapper .btn:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
    transition: .3s all
}

@media (min-width:1024px) {
    .article .l-content {
        padding-right: var(--column-gap);
        margin-right: -1px;
        border-right: 1px solid rgba(0, 0, 0, .1)
    }
}

.article .breadcrumb {
    padding: 0;
    margin-bottom: 6px;
    border: 0 none
}

.article .breadcrumb * {
    font-family: var(--font-family-def);
    font-size: 12px !important;
    font-weight: 600
}

.article .breadcrumb .sub {
    margin-left: inherit
}

.article .breadcrumb .sub a {
    margin: 0
}

.article .breadcrumb .sub a::before {
    content: none
}

.article__sub-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 6px
}

.article__title {
    font-family: var(--font-family-pop);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 12px
}

.article__title i {
    color: #555;
    margin-right: 6px;
    position: relative;
    top: 3px
}

.article__title .ic-emagazine,
.article__title .ic-infographic {
    top: 0
}

.article__meta {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 0, 0, .1)
}

.article__meta .meta {
    display: flex;
    margin-right: auto
}

.article__meta .meta * {
    color: var(--gray-600, #6c757d)
}

.article__meta .meta a {
    color: var(--primary, #d72027)
}

.article__meta .meta>:not(:first-child)::before {
    content: "|";
    color: #ddd;
    padding: 0 10px
}

.article__meta .gg-news {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--yellow-100, #fff3cd);
    border: 1px dashed var(--yellow-500, #ffc107);
    border-radius: 20px
}

.article__sapo {
    font-size: 18px;
    font-weight: 700;
    text-align: justify;
    margin-bottom: 20px
}

.article__sapo * {
    display: inline
}

.article__sapo a {
    color: var(--secondary, #b40c0e)
}

.article__sapo a:hover {
    color: var(--success, #002e44)
}

.article__avatar {
    margin-bottom: 20px
}

.article__avatar img {
    width: max-content;
    max-width: 100%;
    height: auto
}

.article__avatar figcaption {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    text-align: center;
    padding: 10px 0
}

.zce-content-body>* {
    margin-bottom: 16px !important
}

.zce-content-body>:first-child {
    margin-top: 0 !important
}

.zce-content-body .table-responsive {
    max-width: 100%;
    overflow-x: auto
}

.zce-content-body table {
    margin: 0 auto;
    width: 100%;
    border-collapse: collapse;
    display: table
}

.zce-content-body table:not([class]):not([align]),
.zce-content-body table[data-zce-type] {
    width: 100%
}

.zce-content-body table:not([class]):not([align]) td,
.zce-content-body table:not([class]):not([align]) th,
.zce-content-body table[data-zce-type] td,
.zce-content-body table[data-zce-type] th {
    padding: 5px;
    border: 1px solid #e9ecef;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
    line-height: 1.5;
    border: 1px solid #eee
}

.zce-content-body table:not([class]):not([align]) td:empty:after,
.zce-content-body table:not([class]):not([align]) th:empty:after,
.zce-content-body table[data-zce-type] td:empty:after,
.zce-content-body table[data-zce-type] th:empty:after {
    content: "Empty cell";
    visibility: hidden;
    speak: none;
    font-size: 0
}

.zce-content-body figure {
    text-align: center;
    width: 100%;
    margin: 0
}

.zce-content-body figure .photo {
    display: block
}

.zce-content-body figure .photo img {
    max-width: 100%;
    text-align: center;
    display: block;
    margin: 0 auto
}

.zce-content-body .notebox.style-1 {
    background: #0b699e;
    color: #fff;
    border: 1px dashed #fff
}

.zce-content-body .notebox .style-2 {
    background: red;
    color: #fff;
    border: 1px dashed #fff
}

.zce-content-body .align-center img {
    margin-left: auto;
    margin-right: auto;
    max-width: 80%
}

.zce-content-body .outset-left {
    width: 50%;
    margin-left: -10%;
    margin-right: 16px;
    float: left
}

@media (min-width:1200px) {
    .zce-content-body .outset-left {
        margin-left: -25%
    }
}

.zce-content-body .outset-right {
    width: 50%;
    margin-right: -10%;
    margin-left: 16px;
    float: right
}

@media (min-width:1200px) {
    .zce-content-body .outset-right {
        margin-right: -25%
    }
}

.zce-content-body blockquote .photo {
    background: #add8e6;
    width: 50%;
    float: left;
    margin-right: 16px;
    margin-bottom: 16px
}

.zce-content-body blockquote .outset-left {
    left: 25%;
    margin: initial;
    margin-right: 16px
}

.zce-content-body blockquote .outset-right {
    margin: initial;
    margin-left: 16px;
    transform: translateX(0);
    left: 0
}

.zce-content-body blockquote .author {
    clear: both
}

.zce-content-body .notebox .outset-left {
    left: 25%;
    margin: initial;
    margin-right: 16px
}

.zce-content-body .notebox .outset-right {
    margin: initial;
    margin-left: 16px;
    transform: translateX(0);
    left: 0
}

.zce-content-body .outset-both {
    margin: 0 -24px;
    width: auto
}

.zce-content-body .full-width {
    width: 100vw;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    right: auto;
    display: table;
    max-width: calc(100vw - 32px)
}

@media (min-width:769px) {
    .zce-content-body .full-width {
        max-width: calc(100vw - 17px)
    }
}

.zce-content-body .max-width {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1300px;
    width: calc(100vw - 32px)
}

@media (min-width:769px) {
    .zce-content-body .max-width {
        width: calc(100vw - 17px)
    }
}

.zce-content-body .notebox.align-right,
.zce-content-body blockquote.align-right,
.zce-content-body figure.align-right,
.zce-content-body related-content.align-right {
    width: 50%;
    float: right;
    margin-left: 20px
}

.zce-content-body .notebox.align-left,
.zce-content-body blockquote.align-left,
.zce-content-body figure.align-left,
.zce-content-body related-content.align-left {
    width: 50%;
    float: left;
    margin-right: 20px
}

.zce-content-body embed,
.zce-content-body img,
.zce-content-body object,
.zce-content-body video {
    max-width: 100%
}

.zce-content-body img {
    height: auto
}

.zce-mobile .zce-content-body {
    width: 360px
}

.zce-mobile [data-display=desktop],
.zce-mobile [data-display=mobile] {
    display: none
}

.zce-mobile [data-display=desktop] .zce-Visibility,
.zce-mobile [data-display=mobile] .zce-Visibility {
    display: none
}

.zce-mobile .zce-content-body .full-width {
    max-width: 100%
}

.zce-content-body.zce-mobile .full-width {
    max-width: 100%
}

.zce-content-body h1,
.zce-content-body h2,
.zce-content-body h3,
.zce-content-body h4,
.zce-content-body h5,
.zce-content-body h6 {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    color: #000b1d;
    text-rendering: optimizeLegibility;
    letter-spacing: -.01em
}

.zce-content-body h1 a,
.zce-content-body h2 a,
.zce-content-body h3 a,
.zce-content-body h4 a,
.zce-content-body h5 a,
.zce-content-body h6 a {
    text-decoration: none
}

.zce-content-body h1 a:hover,
.zce-content-body h2 a:hover,
.zce-content-body h3 a:hover,
.zce-content-body h4 a:hover,
.zce-content-body h5 a:hover,
.zce-content-body h6 a:hover {
    transition: all .2s linear;
    opacity: .7;
    text-decoration: none
}

.zce-content-body h1 {
    font-size: 36px;
    line-height: 1.1
}

.zce-content-body h2 {
    font-size: 28px;
    line-height: 1.3
}

.zce-content-body h3 {
    font-size: 21px;
    line-height: 1.4
}

.zce-content-body h4 {
    font-size: 16px;
    line-height: 1.5
}

.zce-content-body ol,
.zce-content-body ul {
    margin-left: 20px
}

.zce-content-body li {
    list-style-type: inherit
}

.zce-content-body li li {
    font-size: 1em
}

.zce-content-body hr {
    position: relative;
    line-height: 1;
    background: 0 0;
    border: none;
    text-align: left;
    margin-top: 16px;
    margin-bottom: 16px;
    height: 10px
}

.zce-content-body p {
    margin: 0
}

.zce-content-body blockquote {
    margin-left: 0;
    margin-right: 0
}

.zce-content-body hr:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    max-width: 100%;
    margin-top: -.5px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(217, 219, 221, .6)
}

.zce-content-body a {
    color: #dc3545;
    text-decoration: none;
    background-color: transparent
}

[class^=layout-image-] {
    display: grid !important;
    gap: 2px;
    justify-content: center
}

[class^=layout-image-] figure {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    width: fit-content
}

[class^=layout-image-] figure:hover figcaption {
    opacity: 1
}

[class^=layout-image-] figure figcaption {
    transition: .5s;
    position: absolute;
    font-size: 16px;
    color: #fff;
    bottom: 0;
    left: 0;
    padding: 10px;
    opacity: 0
}

.layout-image-2 {
    grid-template-columns: repeat(2, auto)
}

@media (min-width:768px) {
    .layout-image-2 figure figcaption {
        opacity: 1
    }
}

.layout-image-2>figcaption {
    grid-column: 1/3
}

.layout-image-3 {
    grid-template-columns: repeat(2, auto)
}

@media (min-width:768px) {
    .layout-image-3 figure figcaption {
        opacity: 1
    }
}

.layout-image-3 figure:first-child {
    grid-column: 1/3
}

.layout-image-3>figcaption {
    grid-column: 1/3
}

.layout-image-3-horizontal {
    grid-template-columns: repeat(3, auto)
}

.layout-image-3-horizontal>figcaption {
    grid-column: 1/4
}

.layout-image-4 {
    grid-template-columns: repeat(2, auto)
}

@media (min-width:768px) {
    .layout-image-4 figure figcaption {
        opacity: 1
    }
}

.layout-image-4>figcaption {
    grid-column: 1/3
}

.layout-image-horizontal {
    grid-template-columns: repeat(4, auto)
}

.layout-image-horizontal>figcaption {
    grid-column: 1/5
}

[class^=layout-image-]+[class^=layout-image-] {
    margin-top: -14px
}

[class^=layout-image-]:has(>figcaption)+[class^=layout-image-] {
    margin-top: -16px
}

.dropcap::first-letter {
    font-size: 48px;
    font-weight: 700;
    float: left;
    line-height: 17px
}

.margin-10 {
    margin: 10px
}

.margin-10-lr {
    margin-left: 10px;
    margin-right: 10px
}

.margin-10-tb {
    margin-top: 10px;
    margin-bottom: 10px
}

.padding-10 {
    padding: 10px
}

.padding-10-lr {
    padding-left: 10px;
    padding-right: 10px
}

.padding-10-tb {
    padding-top: 10px;
    padding-bottom: 10px
}

.margin-20 {
    margin: 20px
}

.margin-20-lr {
    margin-left: 20px;
    margin-right: 20px
}

.margin-20-tb {
    margin-top: 20px;
    margin-bottom: 20px
}

.padding-20 {
    padding: 20px
}

.padding-20-lr {
    padding-left: 20px;
    padding-right: 20px
}

.padding-20-tb {
    padding-top: 20px;
    padding-bottom: 20px
}

.margin-30 {
    margin: 30px
}

.margin-30-lr {
    margin-left: 30px;
    margin-right: 30px
}

.margin-30-tb {
    margin-top: 30px;
    margin-bottom: 30px
}

.padding-30 {
    padding: 30px
}

.padding-30-lr {
    padding-left: 30px;
    padding-right: 30px
}

.padding-30-tb {
    padding-top: 30px;
    padding-bottom: 30px
}

.margin-40 {
    margin: 40px
}

.margin-40-lr {
    margin-left: 40px;
    margin-right: 40px
}

.margin-40-tb {
    margin-top: 40px;
    margin-bottom: 40px
}

.padding-40 {
    padding: 40px
}

.padding-40-lr {
    padding-left: 40px;
    padding-right: 40px
}

.padding-40-tb {
    padding-top: 40px;
    padding-bottom: 40px
}

.margin-50 {
    margin: 50px
}

.margin-50-lr {
    margin-left: 50px;
    margin-right: 50px
}

.margin-50-tb {
    margin-top: 50px;
    margin-bottom: 50px
}

.padding-50 {
    padding: 50px
}

.padding-50-lr {
    padding-left: 50px;
    padding-right: 50px
}

.padding-50-tb {
    padding-top: 50px;
    padding-bottom: 50px
}

.zce-content-body>* {
    font-family: var(--font-family-def);
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 20px !important
}

.zce-content-body a {
    color: var(--primary, #d72027);
    display: initial
}

.zce-content-body a:hover {
    text-decoration: underline;
    opacity: 1 !important
}

.zce-content-body ol,
.zce-content-body ul {
    padding: 0
}

.zce-content-body ol li,
.zce-content-body ul li {
    margin-bottom: 8px
}

.zce-content-body ul {
    list-style: inherit
}

.zce-content-body ol {
    list-style: auto
}

.zce-content-body>h1,
.zce-content-body>h2,
.zce-content-body>h3,
.zce-content-body>h4,
.zce-content-body>h5 {
    font-family: var(--font-family-bar);
    margin: 0
}

.zce-content-body h1 {
    font-size: 36px
}

.zce-content-body h2 {
    font-size: 30px
}

.zce-content-body h3 {
    font-size: 26px
}

.zce-content-body h4 {
    font-size: 24px
}

.zce-content-body h5 {
    font-size: 18px
}

.zce-content-body table td,
.zce-content-body table th {
    padding: 0
}

.zce-content-body table:not([class]) {
    width: 100%
}

.zce-content-body table:not([class]) td,
.zce-content-body table:not([class]) th {
    padding: 10px;
    border: 1px solid #e9ecef
}

.zce-content-body table[data-zce-type] th,
.zce-content-body table[data-zce-type] tr[data-zce-type] td {
    display: table-cell;
    padding: 10px !important;
    border: 1px solid #eee !important
}

.zce-content-body [align=center] .caption,
.zce-content-body [align=center] figcaption,
.zce-content-body [align=left] .caption,
.zce-content-body [align=left] figcaption,
.zce-content-body [align=right] .caption,
.zce-content-body [align=right] figcaption {
    padding: 10px 20px !important
}

.zce-content-body img {
    max-width: 100%;
    height: auto !important;
    display: flex;
    margin: 0 auto
}

.zce-content-body video {
    max-width: 100%;
    height: auto;
    display: flex;
    margin: 0 auto
}

.zce-content-body .caption,
.zce-content-body figcaption {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    text-align: center;
    padding: 10px 20px
}

.zce-content-body .notebox.align-left,
.zce-content-body .poll-box.align-left,
.zce-content-body blockquote.align-left,
.zce-content-body figure.align-left,
.zce-content-body table.align-left {
    width: 50%;
    float: left;
    margin-right: 24px
}

.zce-content-body .notebox.align-right,
.zce-content-body .poll-box.align-right,
.zce-content-body blockquote.align-right,
.zce-content-body figure.align-right,
.zce-content-body table.align-right {
    width: 50%;
    float: right;
    margin-left: 24px
}

.zce-content-body .notebox[align=center],
.zce-content-body .poll-box[align=center],
.zce-content-body blockquote[align=center],
.zce-content-body figure[align=center],
.zce-content-body table[align=center] {
    text-align: left;
    width: 100%
}

.zce-content-body .notebox[align=center] td,
.zce-content-body .notebox[align=center] th,
.zce-content-body .poll-box[align=center] td,
.zce-content-body .poll-box[align=center] th,
.zce-content-body blockquote[align=center] td,
.zce-content-body blockquote[align=center] th,
.zce-content-body figure[align=center] td,
.zce-content-body figure[align=center] th,
.zce-content-body table[align=center] td,
.zce-content-body table[align=center] th {
    padding: 0 !important;
    border: none !important;
    display: block;
    align-items: center
}

.zce-content-body .notebox[align=left],
.zce-content-body .poll-box[align=left],
.zce-content-body blockquote[align=left],
.zce-content-body figure[align=left],
.zce-content-body table[align=left] {
    width: 50%;
    float: left;
    margin-right: 24px;
    text-align: left
}

.zce-content-body .notebox[align=left] td,
.zce-content-body .notebox[align=left] th,
.zce-content-body .poll-box[align=left] td,
.zce-content-body .poll-box[align=left] th,
.zce-content-body blockquote[align=left] td,
.zce-content-body blockquote[align=left] th,
.zce-content-body figure[align=left] td,
.zce-content-body figure[align=left] th,
.zce-content-body table[align=left] td,
.zce-content-body table[align=left] th {
    padding: 0 !important;
    border: none !important;
    display: block;
    align-items: center
}

.zce-content-body .notebox[align=right],
.zce-content-body .poll-box[align=right],
.zce-content-body blockquote[align=right],
.zce-content-body figure[align=right],
.zce-content-body table[align=right] {
    width: 50%;
    float: right;
    margin-left: 24px;
    text-align: left
}

.zce-content-body .notebox[align=right] td,
.zce-content-body .notebox[align=right] th,
.zce-content-body .poll-box[align=right] td,
.zce-content-body .poll-box[align=right] th,
.zce-content-body blockquote[align=right] td,
.zce-content-body blockquote[align=right] th,
.zce-content-body figure[align=right] td,
.zce-content-body figure[align=right] th,
.zce-content-body table[align=right] td,
.zce-content-body table[align=right] th {
    padding: 0 !important;
    border: none !important;
    display: block;
    align-items: center
}

@media (max-width:1024px) {

    .zce-content-body>figure.full-width,
    .zce-content-body>figure.max-width,
    .zce-content-body>table.full-width,
    .zce-content-body>table.max-width {
        max-width: 100vw
    }

    .zce-content-body>figure.picture,
    .zce-content-body>figure[align=center],
    .zce-content-body>table.picture,
    .zce-content-body>table[align=center] {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw !important
    }
}

@media (max-width:1024px) {
    .zce-content-body>figure:not([class]):not([align]) {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw !important
    }
}

.zce-content-body .notebox>*,
.zce-content-body blockquote>* {
    margin-bottom: 16px !important
}

.zce-content-body .notebox>:last-child,
.zce-content-body blockquote>:last-child {
    margin-top: 0
}

.zce-content-body .notebox table.full-width,
.zce-content-body .notebox table.max-width,
.zce-content-body blockquote table.full-width,
.zce-content-body blockquote table.max-width {
    width: 100%
}

.zce-content-body .notebox td,
.zce-content-body .notebox th,
.zce-content-body blockquote td,
.zce-content-body blockquote th {
    padding: 0 !important;
    border: none !important;
    display: block;
    align-items: center
}

.zce-content-body .notebox figure[align=center],
.zce-content-body .notebox table[align=center],
.zce-content-body blockquote figure[align=center],
.zce-content-body blockquote table[align=center] {
    width: 100%
}

.zce-content-body .audio audio {
    width: 100%
}

.zce-content-body .interview-zone figure.full-width,
.zce-content-body .interview-zone figure.max-width,
.zce-content-body .interview-zone table.full-width,
.zce-content-body .interview-zone table.max-width,
.zce-content-body .live-zone figure.full-width,
.zce-content-body .live-zone figure.max-width,
.zce-content-body .live-zone table.full-width,
.zce-content-body .live-zone table.max-width {
    width: 100%
}

.zce-content-body .interview-zone figure.outset-left,
.zce-content-body .interview-zone table.outset-left,
.zce-content-body .live-zone figure.outset-left,
.zce-content-body .live-zone table.outset-left {
    width: 50%;
    margin-left: auto;
    margin-right: 24px
}

.zce-content-body .interview-zone figure.outset-right,
.zce-content-body .interview-zone table.outset-right,
.zce-content-body .live-zone figure.outset-right,
.zce-content-body .live-zone table.outset-right {
    width: 50%;
    margin-left: 24px;
    margin-right: auto
}

.zce-content-body .interview-zone figure[align=center],
.zce-content-body .interview-zone table[align=center],
.zce-content-body .live-zone figure[align=center],
.zce-content-body .live-zone table[align=center] {
    width: 100%
}

.zce-content-body .dropcap::first-letter {
    font-family: "Noto Serif", serif;
    font-size: 250%;
    line-height: 1.3;
    font-weight: 700;
    padding: 0 10px;
    margin: 0 10px 10px 0;
    background: var(--gray-100, #f8f9fa)
}

@media (max-width:767px) {

    .zce-content-body .align-left,
    .zce-content-body .align-right,
    .zce-content-body .outset-left,
    .zce-content-body .outset-right,
    .zce-content-body [align=left],
    .zce-content-body [align=right] {
        width: 100% !important
    }
}

.zce-content-body .outset-left {
    margin-right: 24px
}

.zce-content-body .outset-right {
    margin-left: 24px
}

@media (max-width:768px) {
    .zce-content-body [class^=layout-image-] {
        width: 100vw;
        left: 50%;
        position: relative;
        transform: translateX(-50%);
        grid-template-columns: none
    }

    .zce-content-body [class^=layout-image-] figcaption {
        grid-column: inherit
    }
}

@media (max-width:768px) {
    .zce-content-body .layout-image-3 figure:first-child {
        grid-column: inherit
    }
}

body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body .notebox.outset-left,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body .poll-box.outset-left,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body blockquote.outset-left,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body figure.outset-left,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body table.outset-left {
    width: 50%;
    margin-left: auto;
    margin-right: 24px
}

body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body .notebox.outset-right,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body .poll-box.outset-right,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body blockquote.outset-right,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body figure.outset-right,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body table.outset-right {
    width: 50%;
    margin-left: 24px;
    margin-right: auto
}

@media (min-width:1024px) {

    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body figure.full-width,
    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body figure.max-width,
    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body table.full-width,
    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body table.max-width {
        width: 100%
    }

    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body figure[align=center],
    body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body table[align=center] {
        width: 100%
    }
}

@media (max-width:768px) {

    .zce-content-body .notebox.outset-left,
    .zce-content-body .poll-box.outset-left,
    .zce-content-body blockquote.outset-left,
    .zce-content-body figure.outset-left,
    .zce-content-body table.outset-left {
        width: 50%;
        margin-left: auto;
        margin-right: 24px
    }

    .zce-content-body .notebox.outset-right,
    .zce-content-body .poll-box.outset-right,
    .zce-content-body blockquote.outset-right,
    .zce-content-body figure.outset-right,
    .zce-content-body table.outset-right {
        width: 50%;
        margin-left: 24px;
        margin-right: auto
    }
}

.zce-content-body blockquote {
    position: relative;
    padding: 20px;
    background: var(--blue-100, #e7f1ff);
    border: 1px dashed var(--blue-200, #9ec5fe)
}

.zce-content-body blockquote::before {
    position: absolute;
    content: "";
    width: 66px;
    height: 50px;
    left: -30px;
    top: -26px;
    background: url(quote.svg) 0 0 no-repeat
}

.zce-content-body blockquote .author {
    font-size: 16px;
    color: #0d6efd;
    font-style: italic
}

.zce-content-body blockquote.align-left,
.zce-content-body blockquote.outset-left,
.zce-content-body blockquote[align=left] {
    margin-right: 32px !important
}

.zce-content-body blockquote.align-right,
.zce-content-body blockquote.outset-right,
.zce-content-body blockquote[align=right] {
    margin-left: 32px !important
}

.zce-content-body .notebox {
    position: relative;
    padding: 20px;
    background: var(--yellow-100, #fff3cd);
    border: 1px dashed var(--yellow-500, #ffc107)
}

.zce-content-body .notebox::before {
    position: absolute;
    content: "";
    width: 36px;
    height: 36px;
    right: -18px;
    top: -18px;
    background: url(pin.png) 0 0 no-repeat
}

.zce-content-body .article-relate {
    padding: 20px;
    background: var(--gray-100, #f8f9fa)
}

.zce-content-body .article-relate .story__thumb {
    margin-bottom: 10px
}

@media (min-width:768px) {
    .zce-content-body .article-relate .story__thumb {
        width: 200px;
        height: 130px;
        float: left;
        margin: 0 20px 0 0
    }
}

@media (max-width:768px) {
    .zce-content-body .article-relate .story__thumb a {
        display: block;
        padding-bottom: 66.667%
    }
}

.zce-content-body .article-relate .story__heading {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 6px
}

.zce-content-body .article-relate .story__heading a {
    color: var(--gray-800, #343a40)
}

.zce-content-body .article-relate .story__heading a:hover {
    color: var(--primary, #d72027)
}

.zce-content-body .article-relate .story__summary {
    font-size: 14px;
    line-height: 1.5
}

@media (max-width:768px) {
    .zce-content-body .article-relate .story__summary {
        display: none
    }
}

.zce-content-body .poll-box {
    padding: 20px;
    background: var(--blue-100, #e7f1ff);
    border-top: 1px solid var(--blue-200, #9ec5fe)
}

.zce-content-body .poll-box .box-heading {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--gray-900, #212529);
    text-transform: uppercase;
    margin-bottom: 10px
}

.zce-content-body .poll-box .box-content>* {
    font-size: 16px;
    margin-bottom: 10px
}

.zce-content-body .poll-box .box-content>:last-child {
    margin: 0
}

.zce-content-body .poll-box .box-content label {
    cursor: pointer;
    display: block
}

.zce-content-body .poll-box .box-content label input {
    margin-right: 6px
}

.zce-content-body .poll-box .box-content label input[type=radio] {
    accent-color: var(--secondary, #b40c0e)
}

.zce-content-body .poll-box .wrap-button>* {
    font-size: 13px;
    padding: 3px 12px;
    border: 0 none;
    cursor: pointer
}

.zce-content-body .poll-box .wrap-button .btn-send {
    color: #fff;
    font-weight: 600;
    height: 28px;
    background: var(--secondary, #b40c0e)
}

.zce-content-body .poll-box .wrap-button .btn-send:hover {
    background: var(--primary, #d72027)
}

.zce-content-body .poll-box .wrap-button .btn-see {
    color: #0d6efd;
    background: 0 0
}

.zce-content-body .poll-box .wrap-button .btn-see:hover {
    text-decoration: underline
}

.zce-content-body .related-topic {
    padding: 20px;
    background: var(--gray-100, #f8f9fa);
    border-top: 1px solid var(--primary, #d72027)
}

.zce-content-body .related-topic .box-heading {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--primary, #d72027);
    width: fit-content;
    margin-top: -20px
}

.zce-content-body .related-topic .box-heading * {
    color: #fff
}

.zce-content-body .related-topic .story {
    margin-top: 12px
}

.zce-content-body .related-topic .story__heading {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    display: flex
}

.zce-content-body .related-topic .story__heading:before {
    content: "";
    min-width: 4px;
    height: 4px;
    background: var(--primary, #d72027);
    border-radius: 50%;
    top: 10px;
    position: relative;
    margin-right: 12px
}

.zce-content-body .related-topic .story__heading a {
    color: #343a40
}

.zce-content-body .related-topic .story__heading a:hover {
    color: var(--primary, #d72027)
}

.zce-content-body .power .power-noti {
    background: #eaf1fc;
    padding: 12px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.zce-content-body .power .power-noti span {
    color: #0d6efd;
    display: block;
    font-weight: 700
}

.zce-content-body .power .power-table thead tr th {
    font-family: var(--font-family-def);
    color: #0d6efd;
    font-size: 16px;
    text-align: center;
    background-color: #f6f6f6;
    text-transform: inherit;
    padding: 12px;
    border: 1px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9
}

.zce-content-body .power .power-table tr td {
    text-align: center;
    font-family: var(--font-family-def)
}

.zce-content-body .power .power-table tr td,
.zce-content-body .power .power-table tr th {
    border: 1px solid #d9d9d9;
    padding: 12px;
    font-size: 15px
}

.zce-content-body .power .power-noti+.power-table {
    margin-top: 20px
}

related-content {
    display: block;
    background: var(--gray-100, #f8f9fa);
    border-radius: 8px;
    overflow: hidden
}

related-content .img {
    margin-bottom: 10px
}

@media (min-width:768px) {
    related-content .img {
        width: 200px;
        height: 130px;
        float: left;
        margin: 0 20px 0 0
    }
}

related-content .img img {
    border-radius: 0
}

related-content .info {
    padding: 16px 20px 6px
}

related-content .info a {
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-800, #343a40);
    font-weight: 600;
    display: block
}

related-content .date {
    font-size: 13px;
    color: #888
}

.related-news {
    padding: 20px;
    margin: 20px 0;
    clear: both;
    background: var(--gray-100, #f8f9fa)
}

.related-news .box-heading {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--primary, #d72027);
    text-transform: uppercase;
    margin-bottom: 10px
}

.related-news .story {
    margin-top: 12px
}

.related-news .story__heading {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    display: flex
}

.related-news .story__heading:before {
    content: "";
    min-width: 4px;
    height: 4px;
    background: var(--primary, #d72027);
    border-radius: 50%;
    top: 10px;
    position: relative;
    margin-right: 12px
}

.related-news .story__heading a {
    color: #343a40
}

.related-news .story__heading a:hover {
    color: var(--primary, #d72027)
}

.camnhat,
.camtren,
.xanhnhat {
    line-height: 1.5;
    border-collapse: separate;
    padding: 20px
}

.camnhat>:not(:last-child),
.camtren>:not(:last-child),
.xanhnhat>:not(:last-child) {
    margin-bottom: 12px
}

.camnhat br,
.camtren br,
.xanhnhat br {
    content: "";
    margin: 12px;
    display: block
}

.xanhnhat {
    background: #e4f5fa;
    border: 0
}

.camnhat {
    background: #eee;
    border-left: solid 3px #f60
}

.zce-content-body table.camnhat td,
.zce-content-body table.camtren td,
.zce-content-body table.xanhnhat td {
    padding: 20px
}

.zce-content-body table.camnhat p:not(:last-child),
.zce-content-body table.camtren p:not(:last-child),
.zce-content-body table.xanhnhat p:not(:last-child) {
    margin-bottom: 12px
}

.zce-content-body table.camtren td {
    background: #eee
}

.zce-content-body table.camtren tr:first-child>td:first-child {
    width: 183px;
    border-top: solid 3px #f60
}

.zce-content-body table.camtren tr:last-child>td {
    border-radius: 0 0 10px 10px
}

#tinymce table.camtren tr:first-child {
    height: 1px;
    min-height: 1px
}

#tinymce table.camtren tr:first-child>td:first-child {
    width: 183px;
    border-top: solid 3px #f60
}

@media (max-width:1023px) {
    .article {
        display: block
    }
}

.article .social-bar {
    text-align: center;
    width: 50px;
    float: left;
    margin-left: -80px
}

@media (min-width:1440px) {
    .article .social-bar {
        margin-left: -100px
    }
}

@media (max-width:1280px) {
    .article .social-bar {
        display: none
    }
}

.article .social-bar label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600, #6c757d);
    text-transform: uppercase
}

.article .social-bar a {
    font-size: 18px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px auto 0;
    border-radius: 50%
}

.article .social-bar a:hover {
    opacity: .85
}

.article .social-bar .fb {
    background: #3b5998
}

.article .social-bar .tt {
    background: #55acee
}

.article .social-bar .zl {
    background: #018fe5
}

.article .social-bar .em {
    font-size: 22px;
    background: #0ba5be
}

.article .social-bar .pr {
    font-size: 20px;
    background: #bbc6c8
}

.article .social-bar .cm {
    font-size: 14px;
    color: var(--gray-600, #6c757d);
    padding-top: 8px;
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-radius: 0
}

.article .social-bar .cm i {
    font-size: 26px;
    color: #888;
    width: 100%
}

.article .social-footer {
    display: flex;
    padding: 10px 0;
    margin-bottom: 20px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.article .social-footer .time {
    color: var(--gray-600, #6c757d);
    margin-left: auto
}

.article .social-footer .time::before {
    font-family: icomoon;
    content: "\e92d";
    font-size: 18px;
    margin-right: 3px;
    position: relative;
    top: 3px
}

.article__author {
    font-weight: 700;
    text-transform: uppercase;
    text-align: right
}

.article__source {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: end
}

.article__source * {
    font-size: 14px;
    line-height: 1.5
}

.article__source a {
    display: block
}

.article__source .name {
    color: var(--gray-700, #495057);
    font-weight: 600
}

.article__source .source {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--yellow-100, #fff3cd);
    border: 1px dashed var(--yellow-500, #ffc107);
    border-radius: 20px
}

.article__source .btn {
    color: var(--primary, #d72027)
}

.article__source .btn::before {
    font-family: icomoon;
    content: "\e920";
    font-weight: 400;
    margin-right: 3px;
    vertical-align: middle
}

.article__source .source-toggle {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    padding: 16px;
    flex-direction: column;
    gap: 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .8)
}

.article__source .source-toggle.show {
    display: flex
}

.article__source .source-toggle * {
    color: #fff
}

.article__source .source-toggle span {
    cursor: pointer
}

.article__source .source-toggle .heading {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.article__source .source-toggle .title {
    color: var(--gray-500, #adb5bd)
}

.article__source .source-toggle .link {
    font-size: 13px;
    word-break: break-word;
    width: 360px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .3)
}

.article__tag {
    display: flex;
    margin-bottom: 16px
}

.article__tag .box-heading {
    margin-right: 16px
}

.article__tag .box-heading>i.fa {
    font-size: 18px;
    color: var(--primary, #d72027)
}

.article__tag .box-heading .title {
    display: none
}

.article__tag .box-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px
}

.article__tag .box-content::after {
    display: block;
    clear: both;
    content: ""
}

.article__topic {
    padding: 12px 20px;
    margin-bottom: 20px;
    background: var(--gray-100, #f8f9fa)
}

.article__topic .box-heading {
    font-size: 14px;
    font-weight: 400;
    display: flex
}

.article__topic .box-heading .title {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px 3px;
    margin-left: 10px;
    background: var(--secondary, #b40c0e)
}

.article__topic .box-heading .title:hover {
    background: var(--primary, #d72027)
}

.article__topic .box-content {
    margin-top: 16px;
    position: relative
}

.article__topic .box-content::before {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 20px);
    background: rgba(0, 0, 0, .1);
    position: absolute;
    top: 12px;
    left: 8px
}

.article__topic .story {
    display: flex;
    margin-bottom: 16px
}

.article__topic .story__heading {
    font-weight: 400;
    display: flex
}

.article__topic .story__heading::before {
    content: "";
    min-width: 16px;
    height: 16px;
    background: #ccc;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
    top: 2px;
    border: 5px solid var(--gray-100, #f8f9fa)
}

@keyframes spin {
    0% {
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.woff) format("woff"), url(icomoon.svg) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=ic-audio-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

[class^=ic-audio-]::before {
    font-size: 16px
}

.ic-audio-waveform:before {
    content: "🕐"
}

.ic-audio-microphone:before {
    content: "🕑"
}

.ic-audio-volume:before {
    content: "🕒"
}

.ic-audio-volume-slash:before {
    content: "🕓"
}

.ic-audio-pause:before {
    content: "🕔";
    font-size: 13px
}

.ic-audio-play:before {
    content: "🕕"
}

.audio .left {
    display: flex;
    flex-grow: 1
}

.audio .play-button {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.audio .play-button>span {
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .3);
    display: block;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.audio .play-button i {
    font-size: 12px;
    color: #495057
}

.audio .play-button:hover i {
    color: #212529
}

.audio .play-button+span {
    display: flex
}

.audio .mute-wrap:hover .volume-slider {
    width: 62px;
    margin-right: 10px
}

.audio .mute-button {
    padding: 0 16px 0 8px;
    min-width: 50px
}

.audio .mute-button i {
    color: #495057
}

.audio .mute-button:hover i {
    color: #212529
}

.audio .volume-slider {
    width: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    margin-right: 0;
    cursor: pointer;
    transition: all .15s linear
}

.audio .volume-slider .volume-slider-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-top: -6px;
    background-color: #6c757d
}

.audio .volume-slider .volume-slider-handle:after,
.audio .volume-slider .volume-slider-handle:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    height: 3px;
    margin-top: -2px;
    width: 64px
}

.audio .volume-slider .volume-slider-handle:before {
    left: -64px;
    background-color: #6c757d
}

.audio .volume-slider .volume-slider-handle:after {
    left: 12px;
    background-color: rgba(0, 0, 0, .1)
}

.audio .volume-slider.is-active {
    margin-right: 10px;
    width: 62px
}

.audio .time-display {
    width: 75px;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #495057;
    opacity: 1;
    transition: all .2s linear
}

.audio .time-display .current {
    width: 30px
}

.audio .time-display .separator {
    margin-left: 3px
}

.audio .progress-bar {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    transition: all .2s linear
}

.audio .progress-bar .bg {
    position: absolute;
    display: flex;
    height: 0;
    top: 0;
    width: 100%;
    transition: all .15s linear;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

@media (min-width:576px) {
    .audio .progress-bar .bg {
        border-top-width: 3px
    }
}

.audio .progress-bar .fill-recent {
    position: absolute;
    display: flex;
    height: 0;
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-top-style: solid;
    font-size: 0;
    cursor: pointer;
    transition: all .15s linear
}

@media (min-width:576px) {
    .audio .progress-bar .fill-recent {
        border-top-width: 3px
    }
}

.audio .progress-bar .current_time {
    position: absolute;
    right: -7px;
    top: -5px;
    width: 7px;
    height: 7px;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-indent: -999em;
    transition: all .15s linear;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4)
}

.audio .right {
    display: flex;
    align-items: center
}

.audio .select-voice {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    position: relative
}

.audio .select-voice span {
    color: #495057
}

.audio .select-voice i {
    color: #495057
}

.audio .select-voice:after {
    position: absolute;
    top: 10px;
    right: 8px;
    opacity: .4
}

.audio .select-voice:hover {
    border: 1px solid rgba(0, 0, 0, .3)
}

.audio:has(.left) {
    height: 60px;
    font-size: 0;
    background-color: #f7f7f7;
    border: 1px solid #dee2e6;
    padding-left: 16px;
    margin-bottom: 20px;
    position: relative;
    transition: all .15s linear;
    display: flex;
    justify-content: space-between
}

.audio .play-button {
    min-width: 36px;
    height: 100%;
    padding-right: 0;
    font-size: 14px
}

.audio .play-button>span {
    box-sizing: border-box;
    width: 36px;
    height: 36px
}

.audio .play-button .ic-tts-play {
    margin-left: 3px
}

.audio .time-display {
    width: 75px
}

.audio .progress-bar {
    position: relative;
    margin-left: 16px;
    margin-right: 16px;
    height: 100%;
    display: none
}

@media (min-width:1366px) {
    .audio .progress-bar {
        display: block
    }
}

.audio .progress-bar .fill-recent {
    border-color: #28a5fa
}

.audio .progress-bar .bg,
.audio .progress-bar .fill-recent {
    top: 29px
}

.audio .mute-button i {
    font-size: 18px
}

.audio .right {
    padding-right: 16px
}

.audio .select-voice {
    width: inherit;
    height: 34px;
    padding: 0 8px
}

@media (min-width:1366px) {
    .audio .select-voice {
        padding: 0 13px
    }
}

.audio .select-voice span {
    font-size: 12px
}

@media (min-width:360px) {
    .audio .select-voice span {
        font-size: 15px
    }
}

.audio .select-voice i {
    margin-right: 10px;
    font-size: 16px;
    display: none
}

@media (min-width:360px) {
    .audio .select-voice i {
        display: block
    }
}

.audio .select-voice:after {
    top: 14px
}

.audio .voice-board {
    width: 180px;
    right: 0;
    margin-top: 5px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 5px;
    position: absolute;
    border: 1px solid #dee2e6;
    padding: 0;
    top: 50px;
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-weight: 400;
    z-index: 9;
    background: #fff;
    display: none
}

.audio .voice-board li {
    height: 44px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-top: 1px solid #e9ecef;
    cursor: pointer;
    font-size: 14px
}

.audio .voice-board li i {
    margin-right: 6px;
    font-size: 12px;
    display: inline-block
}

.audio .voice-board li:first-child {
    border-top: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

.audio .voice-board li.is-active,
.audio .voice-board li:hover {
    background-color: #ededed
}

.audio .voice-board li.is-active i,
.audio .voice-board li.is-active span,
.audio .voice-board li:hover i,
.audio .voice-board li:hover span {
    color: #e21f26
}

.audio .voice-board:after,
.audio .voice-board:before {
    right: 50%;
    transform: translateX(50%);
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.audio .voice-board::before {
    border-color: transparent;
    border-bottom-color: #ced4da;
    border-width: 6px;
    margin-right: -1px
}

.audio .voice-board::after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 5px;
    margin-left: 1px
}

.audio .voice-board.show {
    display: block
}

.longform-header {
    height: 50px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    transition: .3s ease
}

.longform-header .logo {
    width: 180px;
    height: 24px;
    background: url(logo.svg) 0 0 no-repeat;
    display: block;
    text-indent: -999em
}

.longform-header .headline {
    font-family: var(--font-family-pop);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.longform-header .headline i {
    font-size: 26px;
    color: var(--primary, #d72027);
    margin-right: 6px;
    vertical-align: text-top
}

.longform-header .headline .ic-emagazine {
    background: url(ic-emagazine.png) -37px 5px no-repeat #d72026;
    width: 32px;
    height: 32px;
    border-radius: 3px
}

.emagazine-page .social-bar,
.lens-page .social-bar,
.longform-page .social-bar {
    position: sticky;
    margin-left: -55%
}

/* Bài longform không có lề trái cho rail dọc -> đưa cụm chia sẻ vào hàng meta,
   ngang hàng nút "Theo dõi Google News" (markup: __detail.html, chỉ render khi vgrid ngoài [0,1]) */
.article__meta .article__social--meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto
}

.article__meta .article__social--meta label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-600, #6c757d);
    margin-right: 2px
}

.article__meta .article__social--meta a {
    font-size: 16px;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0
}

.article__meta .article__social--meta .em {
    font-size: 18px;
    background: #0ba5be
}

.article__meta .article__social--meta .pr {
    background: #bbc6c8
}

.article__meta .article__social--meta .tt {
    background: #55acee
}

.article__meta .article__social--meta .fb {
    background: #3b5998
}

.article__meta .article__social--meta .cl {
    background: #6c757d
}

.emagazine-page .article,
.lens-page .article,
.longform-page .article {
    width: 80%;
    margin: auto
}

@media (min-width:1024px) {

    .emagazine-page .article,
    .lens-page .article,
    .longform-page .article {
        width: 780px
    }
}

.emagazine-page .article .breadcrumb,
.lens-page .article .breadcrumb,
.longform-page .article .breadcrumb {
    justify-content: left
}

.emagazine-page .article .breadcrumb .main>a,
.lens-page .article .breadcrumb .main>a,
.longform-page .article .breadcrumb .main>a {
    font-size: 20px !important;
    margin-left: 22px;
    color: var(--primary)
}

.emagazine-page .article__avatar,
.emagazine-page .article__sub-title,
.emagazine-page .article__title,
.lens-page .article__avatar,
.lens-page .article__sub-title,
.lens-page .article__title,
.longform-page .article__avatar,
.longform-page .article__sub-title,
.longform-page .article__title {
    text-align: center
}

.emagazine-page .article__meta,
.lens-page .article__meta,
.longform-page .article__meta {
    justify-content: right;
    flex-wrap: wrap
}

.emagazine-page .article__meta .meta,
.lens-page .article__meta .meta,
.longform-page .article__meta .meta {
    width: 100%;
    justify-content: right;
    margin: 0 0 10px 0
}

.emagazine-page .article__avatar,
.lens-page .article__avatar,
.longform-page .article__avatar {
    max-width: calc(100vw - 17px)
}

.emagazine-page .article>figure,
.emagazine-page .article>table.picture,
.emagazine-page .article>table.video,
.lens-page .article>figure,
.lens-page .article>table.picture,
.lens-page .article>table.video,
.longform-page .article>figure,
.longform-page .article>table.picture,
.longform-page .article>table.video {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0 0 20px
}

@media (max-width:1024px) {

    .emagazine-page .article>figure,
    .emagazine-page .article>table.picture,
    .emagazine-page .article>table.video,
    .lens-page .article>figure,
    .lens-page .article>table.picture,
    .lens-page .article>table.video,
    .longform-page .article>figure,
    .longform-page .article>table.picture,
    .longform-page .article>table.video {
        max-width: 100vw
    }
}

.emagazine-page .article>figure.max-width,
.emagazine-page .article>table.picture.max-width,
.emagazine-page .article>table.video.max-width,
.lens-page .article>figure.max-width,
.lens-page .article>table.picture.max-width,
.lens-page .article>table.video.max-width,
.longform-page .article>figure.max-width,
.longform-page .article>table.picture.max-width,
.longform-page .article>table.video.max-width {
    max-width: calc(100vw - 17px)
}

.emagazine-page .article>figure img,
.emagazine-page .article>table.picture img,
.emagazine-page .article>table.video img,
.lens-page .article>figure img,
.lens-page .article>table.picture img,
.lens-page .article>table.video img,
.longform-page .article>figure img,
.longform-page .article>table.picture img,
.longform-page .article>table.video img {
    width: 100%
}

.emagazine-page .article .caption,
.emagazine-page .article figcaption,
.lens-page .article .caption,
.lens-page .article figcaption,
.longform-page .article .caption,
.longform-page .article figcaption {
    max-width: 685px;
    display: block;
    margin: auto
}

.emagazine-page .zce-content-body .picture,
.lens-page .zce-content-body .picture,
.longform-page .zce-content-body .picture {
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.emagazine-page .zce-content-body .picture.twentytwenty,
.lens-page .zce-content-body .picture.twentytwenty,
.longform-page .zce-content-body .picture.twentytwenty {
    width: var(--container)
}

.emagazine-page .zce-content-body .outset-left,
.emagazine-page .zce-content-body .outset-right,
.lens-page .zce-content-body .outset-left,
.lens-page .zce-content-body .outset-right,
.longform-page .zce-content-body .outset-left,
.longform-page .zce-content-body .outset-right {
    width: 65%
}

.emagazine-page .zce-content-body [class^=layout-image-],
.lens-page .zce-content-body [class^=layout-image-],
.longform-page .zce-content-body [class^=layout-image-] {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.emagazine-page [class^=layout-image-],
.lens-page [class^=layout-image-] {
    max-width: 1300px
}

.longform-page .article__avatar {
    max-width: var(--container)
}

.longform-page .zce-content-body .full-width,
.longform-page .zce-content-body .max-width,
.longform-page .zce-content-body [class^=layout-image-] {
    max-width: var(--container)
}

.longform-page .zce-content-body>figure:not([class]):not([align]) {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--container)
}

.longform-page .zce-content-body>.picture:not(.twentytwenty) img {
    max-width: var(--container);
    left: 50%;
    position: relative;
    transform: translateX(-50%)
}

.emagazine-page .zce-content-body>figure:first-child img {
    width: 100vw
}

.zce-content-body .pCaption {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    text-align: center !important
}

.zce-content-body .pCaption a {
    padding: 10px 0;
    display: block
}

.zce-content-body .pSource {
    font-weight: 700;
    text-transform: uppercase;
    text-align: right
}

.zce-content-body .related {
    padding: 20px;
    margin-bottom: 20px;
    background: var(--gray-100, #f8f9fa)
}

.zce-content-body .drelated>strong {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase
}

.zce-content-body .title-thumb-and-sapo {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600, #6c757d);
    list-style: none;
    padding-top: 10px;
    margin: 0
}

.zce-content-body .title-thumb-and-sapo::after {
    display: block;
    clear: both;
    content: ""
}

.zce-content-body .title-thumb-and-sapo li>* {
    display: block
}

.zce-content-body .title-thumb-and-sapo li>a {
    float: left;
    margin-right: 16px
}

.zce-content-body .title-thumb-and-sapo li a {
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-800, #343a40);
    display: block;
    margin-bottom: 6px
}

.zce-content-body .title-thumb-and-sapo li a:hover {
    color: var(--primary, #d72027);
    text-decoration: none
}

.zce-content-body .pInterTitle {
    font-family: var(--font-family-pop);
    font-size: 30px;
    line-height: 1.3;
    font-weight: 700
}

.zce-content-body .boxleft,
.zce-content-body .boxright {
    width: 50%
}

.zce-content-body .boxleft img,
.zce-content-body .boxright img {
    width: -webkit-fill-available !important;
    height: auto !important
}

.zce-content-body .boxleft {
    float: left;
    margin: 0 24px 24px 0
}

.zce-content-body .boxright {
    float: right;
    margin: 0 0 24px 24px
}

body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body .pImage img,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body img.iCenter,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body img.oldmb,
body:not(.longform-page):not(.emagazine-page):not(.lens-page) .zce-content-body img.oldpc {
    width: auto !important;
    height: auto !important
}

.emagazine-page .zce-content-body .dtbln,
.lens-page .zce-content-body .dtbln,
.longform-page .zce-content-body .dtbln {
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.emagazine-page .zce-content-body .oldmb,
.emagazine-page .zce-content-body .oldpc,
.emagazine-page .zce-content-body .pImage img,
.emagazine-page .zce-content-body img.iCenter,
.lens-page .zce-content-body .oldmb,
.lens-page .zce-content-body .oldpc,
.lens-page .zce-content-body .pImage img,
.lens-page .zce-content-body img.iCenter,
.longform-page .zce-content-body .oldmb,
.longform-page .zce-content-body .oldpc,
.longform-page .zce-content-body .pImage img,
.longform-page .zce-content-body img.iCenter {
    max-width: calc(100vw - 17px);
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    right: auto;
    display: table;
    width: max-content
}

.emagazine-page .zce-content-body .boxleft,
.emagazine-page .zce-content-body .boxright,
.lens-page .zce-content-body .boxleft,
.lens-page .zce-content-body .boxright,
.longform-page .zce-content-body .boxleft,
.longform-page .zce-content-body .boxright {
    width: 65%
}

.emagazine-page .zce-content-body .boxleft img,
.emagazine-page .zce-content-body .boxright img,
.lens-page .zce-content-body .boxleft img,
.lens-page .zce-content-body .boxright img,
.longform-page .zce-content-body .boxleft img,
.longform-page .zce-content-body .boxright img {
    width: -webkit-fill-available !important;
    height: auto !important
}

.emagazine-page .zce-content-body .boxleft,
.lens-page .zce-content-body .boxleft,
.longform-page .zce-content-body .boxleft {
    margin-left: -25%
}

@media (max-width:1024px) {

    .emagazine-page .zce-content-body .boxleft,
    .lens-page .zce-content-body .boxleft,
    .longform-page .zce-content-body .boxleft {
        margin-left: -10%
    }
}

.emagazine-page .zce-content-body .boxright,
.lens-page .zce-content-body .boxright,
.longform-page .zce-content-body .boxright {
    margin-right: -25%
}

@media (max-width:1024px) {

    .emagazine-page .zce-content-body .boxright,
    .lens-page .zce-content-body .boxright,
    .longform-page .zce-content-body .boxright {
        margin-right: -10%
    }
}

.emagazine-page .zce-content-body .related img,
.lens-page .zce-content-body .related img,
.longform-page .zce-content-body .related img {
    max-width: 100% !important
}

.longform-page .zce-content-body .dtbln,
.longform-page .zce-content-body .oldmb,
.longform-page .zce-content-body .oldpc,
.longform-page .zce-content-body .pImage img,
.longform-page .zce-content-body img.iCenter {
    max-width: var(--container)
}

.longform-page .zce-content-body>.pBody {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--container)
}

.emagazine-page .zce-content-body>.full-width:has(.oldpc) .oldpc {
    transform: translateX(0);
    left: auto
}

.live-zone .wrap-item>.item {
    padding: 20px 0 30px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.live-zone .wrap-item>.item:hover .wrap-social {
    opacity: 1
}

.live-zone .meta {
    margin-bottom: 10px
}

.live-zone .meta time {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    font-style: italic
}

.live-zone .wrap-content .heading {
    font-family: var(--font-family-pop);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 16px
}

.live-zone .wrap-content .content>:not(:last-child) {
    margin-bottom: 20px
}

.live-zone .wrap-social {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: all .2s ease-in-out
}

.live-zone .wrap-social .social {
    display: flex;
    align-items: center;
    gap: 20px
}

.live-zone .wrap-social .social a {
    font-size: 14px;
    color: #777;
    text-decoration: none
}

.live-zone .wrap-social .social a i {
    transition: all .2s ease-in-out
}

.live-zone .wrap-social .social .ic-facebook:hover {
    color: #3b5998
}

.live-zone .wrap-social .social .ic-twitter {
    font-size: 16px;
    line-height: 1.4
}

.live-zone .wrap-social .social .ic-twitter:hover {
    color: #55acee
}

.live-zone .wrap-social .social .ic-zalo {
    width: 16px;
    height: 16px;
    background-size: 16px;
    filter: grayscale(100%)
}

.live-zone .wrap-social .social .ic-zalo:hover {
    filter: grayscale(0)
}

.live-zone .wrap-social .copy-link {
    font-size: 13px;
    color: var(--gray-800, #343a40);
    text-decoration: none;
    margin-left: auto
}

.live-zone .wrap-social .copy-link::before {
    font-family: icomoon;
    content: "\e920";
    font-size: 16px;
    color: #777;
    margin-right: 3px;
    vertical-align: middle
}

.live-zone .wrap-social .copy-link:hover {
    color: var(--primary, #d72027)
}

.longform-page .zce-content-body .live-zone .content>figure.full-width,
.longform-page .zce-content-body .live-zone .content>figure.max-width,
.longform-page .zce-content-body .live-zone .content>table.full-width,
.longform-page .zce-content-body .live-zone .content>table.max-width {
    width: 100vw
}

.longform-page .zce-content-body .live-zone .content>figure:not([class]):not([align]),
.longform-page .zce-content-body .live-zone .content>table:not([class]):not([align]) {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--container)
}

.longform-page .zce-content-body .live-zone .content>figure,
.longform-page .zce-content-body .live-zone .content>table.picture,
.longform-page .zce-content-body .live-zone .content>table.video {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--container);
    margin: 0 0 20px
}

.longform-page .zce-content-body .live-zone .content>figure img,
.longform-page .zce-content-body .live-zone .content>table.picture img,
.longform-page .zce-content-body .live-zone .content>table.video img {
    width: 100%
}

.interview-zone .itv-context {
    padding: 20px;
    margin-bottom: 20px;
    background: var(--yellow-100, #fff3cd);
    border: 1px dashed var(--yellow-500, #ffc107);
    border-radius: 3px
}

.interview-zone .itv-context>:not(:last-child) {
    margin-bottom: 16px
}

.interview-zone .itv-context .desc {
    font-weight: 700
}

.interview-zone .itv-invitors .box-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px
}

.interview-zone .itv-invitors .visitor .name {
    font-size: 16px
}

.interview-zone .itv-note {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    text-align: center;
    margin-bottom: 20px
}

.interview-zone .itv-question-answer .wrap-content {
    padding: 20px;
    position: relative;
    width: 100%;
    border-radius: 3px
}

.interview-zone .item {
    display: flex;
    margin-bottom: 20px
}

.interview-zone .item .avatar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-100, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center
}

.interview-zone .item .avatar i {
    font-size: 0;
    color: var(--gray-600, #6c757d)
}

.interview-zone .item .avatar i::before {
    font-size: 20px
}

.interview-zone .item .meta {
    font-size: 13px;
    color: #888;
    display: flex;
    margin-bottom: 10px
}

.interview-zone .item .name {
    font-weight: 600
}

.interview-zone .item .time::before {
    content: "▪";
    color: #ccc;
    padding: 0 8px
}

.interview-zone .item .content::after {
    display: block;
    clear: both;
    content: ""
}

.interview-zone .item .content>:not(:last-child) {
    margin-bottom: 16px
}

.interview-zone .item.question {
    position: relative
}

.interview-zone .item.question .avatar {
    margin-right: 20px
}

.interview-zone .item.question .wrap-content {
    background: var(--gray-100, #f8f9fa)
}

.interview-zone .item.question .wrap-content:before {
    position: absolute;
    content: "";
    left: -8px;
    top: 10px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--gray-100, #f8f9fa)
}

.interview-zone .item.answer {
    position: relative
}

.interview-zone .item.answer .avatar {
    order: 1;
    margin-left: 20px
}

.interview-zone .item.answer .wrap-content {
    background: var(--blue-100, #e7f1ff)
}

.interview-zone .item.answer .wrap-content:before {
    position: absolute;
    content: "";
    right: -8px;
    top: 10px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--blue-100, #e7f1ff)
}

.itv-invitors {
    padding: 20px;
    background: var(--yellow-100, #fff3cd);
    border: 1px dashed var(--yellow-500, #ffc107);
    margin-bottom: var(--column-gap);
    border-radius: 3px
}

.itv-invitors .box-heading {
    font-family: var(--font-family-bar);
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 20px
}

.itv-invitors .box-content {
    max-height: 350px;
    overflow: auto;
    padding-right: 24px
}

.itv-invitors .box-content::-webkit-scrollbar {
    width: 1px;
    border-radius: 4.5px;
    background: rgba(0, 0, 0, .08)
}

.itv-invitors .box-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 10px
}

.itv-invitors .visitor {
    display: grid;
    gap: 10px;
    grid-template-columns: 50px 1fr;
    margin-bottom: 20px
}

.itv-invitors .visitor .avatar {
    width: 50px;
    height: 50px;
    background: url(no-ava.png) 0 0/50px no-repeat;
    border-radius: 50%;
    overflow: hidden
}

.itv-invitors .visitor .avatar img {
    width: 100%;
    height: 100%
}

.itv-invitors .visitor .name {
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 3px
}

.itv-invitors .visitor .text {
    font-size: 12px;
    line-height: 1.3;
    color: var(--gray-600, #6c757d)
}

.itv-interaction {
    padding: 20px;
    background: var(--gray-100, #f8f9fa);
    border-top: 1px solid var(--primary, #d72027);
    margin-bottom: var(--column-gap)
}

.itv-interaction .box-heading {
    font-family: var(--font-family-bar);
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 20px
}

.itv-interaction .box-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px
}

.itv-interaction .form-group label {
    font-size: 16px;
    margin-bottom: 6px
}

.itv-interaction .form-group label span {
    color: red;
    padding: 0 3px
}

.itv-interaction .form-group input {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, .1)
}

.itv-interaction .form-group input::placeholder {
    color: var(--gray-600, #6c757d)
}

.itv-interaction .form-group.full {
    grid-column: 1/3
}

.itv-interaction .btn-submit {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: 120px;
    height: 40px;
    background: var(--secondary, #b40c0e);
    grid-column: 1/3;
    margin-left: auto
}

.itv-interaction .btn-submit:hover {
    background: var(--primary, #d72027)
}

.sidebar .itv-interaction .box-content {
    display: block
}

.sidebar .itv-interaction .box-content>:not(:last-child) {
    margin-bottom: 10px
}

.quiz-zone .item {
    background: var(--gray-100, #f8f9fa);
    padding: 30px;
    border: 1px dashed var(--gray-500, #adb5bd);
    border-radius: 3px;
    margin-bottom: 30px
}

.quiz-question {
    font-weight: 700;
    margin-bottom: 10px
}

.quiz-question img {
    margin-bottom: 10px
}

.quiz-answer.done .form-group {
    pointer-events: none
}

.quiz-answer .form-group {
    padding: 8px 16px;
    border-radius: 3px
}

.quiz-answer .form-group:hover {
    background: #fff
}

.quiz-answer .form-group.true {
    background: #dbf7cd
}

.quiz-answer .form-group.true label::after {
    font-family: icomoon;
    content: "\e92b";
    color: #7fbe61;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: bottom
}

.quiz-answer .form-group.true input[type=radio] {
    accent-color: #7fbe61
}

.quiz-answer .form-group.false {
    background: #f1aeb5
}

.quiz-answer .form-group.false label::after {
    font-family: icomoon;
    content: "\e90f";
    color: var(--secondary, #b40c0e);
    font-weight: 700;
    margin-left: 6px;
    vertical-align: bottom
}

.quiz-answer .form-group.false input[type=radio] {
    accent-color: var(--secondary, #b40c0e)
}

.quiz-answer .chosen {
    font-weight: 700
}

.quiz-answer label {
    cursor: pointer;
    display: block
}

.quiz-answer label input {
    margin-right: 6px
}

.quiz-result {
    background: #fff;
    padding: 24px 30px;
    margin-top: 10px;
    border-radius: 3px
}

.quiz-result p {
    margin-bottom: 6px
}

.quiz-result .chosen {
    font-weight: 700
}

.quiz-result .chosen.true {
    color: #7fbe61
}

.quiz-result .chosen.false {
    color: var(--secondary, #b40c0e)
}

.quiz .result {
    background: #0ba5be;
    padding: 24px 30px;
    margin-bottom: 30px;
    border-radius: 3px
}

.quiz .result * {
    color: #fff
}

.quiz .result .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.quiz .result .box-content {
    display: flex;
    align-items: center
}

.quiz .result .text {
    font-size: 24px;
    margin-left: auto
}

.quiz .result .text .highlight {
    color: #ff0;
    display: inline-block;
    margin-bottom: 0
}

.lens-page .headline {
    text-transform: inherit
}

.lens-page .breadcrumb {
    width: fit-content;
    height: 42px;
    background: #eee;
    padding: 0 65px 0 70px;
    margin: 50px auto 30px
}

.lens-page .breadcrumb * {
    font-size: 16px !important;
    font-weight: 400;
    letter-spacing: 3px
}

.lens-page .article__title {
    font-family: "Alfa Slab One", sans-serif;
    font-size: 46px;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase
}

.lens-page .article__meta {
    gap: 6px;
    border: 0 none
}

.lens-page .article__sapo {
    font-family: Lora, sans-serif
}

.lens-page .article__sapo::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background: rgba(0, 0, 0, .5);
    margin: 50px auto
}

.lens-page .zce-content-body * {
    font-family: Lora, sans-serif
}

.lens-page .zce-content-body>h1,
.lens-page .zce-content-body>h2,
.lens-page .zce-content-body>h3,
.lens-page .zce-content-body>h4,
.lens-page .zce-content-body>h5 {
    font-family: "Alfa Slab One", sans-serif;
    font-weight: 400;
    color: var(--gray-900, #212529);
    text-transform: uppercase;
    text-align: center
}

.lens-page .zce-content-body .first-letter::first-letter,
.lens-page .zce-content-body .firstLarge::first-letter {
    font-size: 250%;
    font-weight: 700;
    padding: 0 10px;
    margin: 0 10px 10px 0;
    background: var(--gray-100, #f8f9fa);
    float: left
}

.story-page .site-body {
    padding: 0;
    background: #272727
}

.story-page .img-wrapper {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0
}

.story-page .img-wrapper img {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .8s ease-in-out;
    object-fit: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.story-page .img-wrapper h1,
.story-page .img-wrapper h1 * {
    font-size: 46px
}

.story-page .img-wrapper h2,
.story-page .img-wrapper h2 * {
    font-size: 44px
}

.story-page .img-wrapper h3,
.story-page .img-wrapper h3 * {
    font-size: 42px
}

.story-page .img-wrapper h4,
.story-page .img-wrapper h4 * {
    font-size: 40px
}

.story-page .img-wrapper h5,
.story-page .img-wrapper h5 * {
    font-size: 38px
}

.story-page .story-scroll {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.story-page .story-scroll .breadcrumb {
    width: fit-content;
    height: 42px;
    background: rgba(255, 255, 255, .2);
    padding: 0 65px 0 70px;
    margin: 50px auto 30px;
    border: 1px solid rgba(255, 255, 255, .4)
}

.story-page .story-scroll .breadcrumb * {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 3px
}

.story-page .story-scroll .article__title {
    font-family: var(--font-family-bar);
    font-size: 76px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
    margin: 50px 0
}

.story-page .story-scroll .article__meta {
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0 none
}

.story-page .story-scroll .article__meta * {
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .3)
}

.story-page .story-scroll .article__meta .author {
    font-size: 20px;
    text-transform: uppercase
}

.story-page .story-scroll .article__meta time::before {
    content: "-";
    display: inline-block;
    padding: 0 10px
}

.story-page .story-scroll audio {
    width: 70%
}

.story-page .story-intro {
    text-align: center
}

.story-page .text-wrapper {
    font-size: 24px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
    padding: 24px 20px;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px
}

.story-page .text-wrapper>:not(:last-child) {
    margin-bottom: 20px
}

.story-page .text-wrapper * {
    color: #fff;
    text-align: justify
}

.story-page .text-wrapper h1,
.story-page .text-wrapper h2,
.story-page .text-wrapper h3,
.story-page .text-wrapper h4,
.story-page .text-wrapper h5 {
    font-family: var(--font-family-bar);
    line-height: 1.3;
    text-align: center
}

.story-page .text-wrapper h1::after,
.story-page .text-wrapper h2::after,
.story-page .text-wrapper h3::after,
.story-page .text-wrapper h4::after,
.story-page .text-wrapper h5::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, .8);
    margin: 24px auto
}

.story-page .text-wrapper a {
    color: var(--primary, #d72027);
    display: initial
}

.story-page .text-wrapper a:hover {
    text-decoration: underline
}

.story-page .audio-wrapper {
    text-align: center;
    width: 100%
}

.story-page .article-relate .story__thumb {
    width: 200px;
    height: 130px;
    float: left;
    margin-right: 20px
}

.story-page .article-relate .story__heading {
    font-size: 22px;
    line-height: 1.4;
    text-align-last: left;
    margin-bottom: 10px
}

.story-page .article-relate .story__heading::after {
    content: none
}

.story-page .article-relate .story__heading a {
    color: #fff
}

.story-page .article-relate .story__summary {
    font-size: 14px;
    color: rgba(255, 255, 255, .8)
}

.story-page .c-content {
    padding: 50px 0;
    background: #fff;
    position: relative
}

.story-page .wrap-comment {
    margin-bottom: 30px
}

.story-page .site-footer {
    position: relative
}

.article__comment .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.article__comment .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.article__comment .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.article__comment .box-heading a:hover {
    color: var(--primary, #d72027)
}

.article__comment textarea {
    font-size: 16px;
    color: #888;
    display: block;
    width: 100%;
    height: 80px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .1)
}

.article__comment textarea::placeholder {
    color: #888
}

.article__comment .input-comment textarea {
    height: 100px
}

.article__comment .btn-submit {
    font-size: 13px;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    padding: 10px 16px;
    float: right;
    margin-top: 10px;
    margin-left: auto
}

.article__comment .btn-submit:hover {
    background: var(--primary, #d72027)
}

.article__comment .input-comment .note-btn {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.article__comment .input-comment .note-btn * {
    font-size: 13px;
    color: #888
}

.article__comment .input-comment .note-btn:has(.user-logged) p {
    display: none
}

.article__comment .input-comment .user-logged {
    display: flex;
    align-items: center;
    gap: 6px;
    background: 0 0
}

.article__comment .input-comment .user-logged::before {
    content: "Xin chào,"
}

.article__comment .input-comment .user-logged .avatar {
    width: 24px;
    height: 24px;
    background: url(no-ava.png) 0 0/24px no-repeat;
    border-radius: 50%
}

.article__comment .list-comment {
    margin-top: 30px
}

.article__comment .list-comment .avatar {
    height: 30px;
    border-radius: 50%;
    background: var(--gray-100, #f8f9fa);
    margin-top: -6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.article__comment .list-comment .avatar i {
    font-size: 20px;
    color: var(--gray-600, #6c757d)
}

.article__comment .list-comment .content .meta {
    font-size: 13px;
    color: #888;
    display: flex;
    margin-bottom: 3px
}

.article__comment .list-comment .content .name {
    font-weight: 600;
    text-transform: capitalize
}

.article__comment .list-comment .content time::before {
    content: "▪";
    color: #ccc;
    padding: 0 8px
}

.article__comment .list-comment .content .text {
    font-size: 16px
}

.article__comment .list-comment .content .action {
    margin-top: 8px
}

.article__comment .list-comment .content .action a {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    display: initial;
    margin-right: 16px
}

.article__comment .list-comment .content .action a:hover {
    color: var(--primary, #d72027)
}

.article__comment .list-comment .content .action .like::before {
    font-family: icomoon;
    content: "\e919";
    font-size: 14px;
    margin-right: 3px
}

.article__comment .list-comment .content .action .like.liked {
    color: var(--primary, #d72027)
}

.article__comment .list-comment .content .wrap-reply {
    margin-top: 16px
}

.article__comment .list-comment .content .wrap-reply::after {
    display: block;
    clear: both;
    content: ""
}

.article__comment .wrap-outer {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.article__comment .rank-1 {
    display: grid;
    gap: 10px;
    grid-template-columns: 30px 1fr
}

.article__comment .rank-1:not(:first-child) {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.article__comment .rank-2 {
    display: grid;
    gap: 10px;
    grid-template-columns: 30px 1fr;
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 20px;
    margin: 16px 0 0 40px
}

.article__comment .rank-2 .wrap-comment {
    margin-top: 15px
}

.article__comment .rank-2 .w-100.mt-3 {
    justify-content: flex-end
}

.article__comment .rank-2 .comment {
    display: flex
}

.article__comment .show-more {
    color: var(--primary, #d72027);
    font-weight: 600;
    width: 100%;
    padding: 20px 0
}

.article__comment .show-more::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .2125em;
    vertical-align: .2125em;
    content: "";
    border-top: .25em solid;
    border-right: .25em solid transparent;
    border-bottom: 0;
    border-left: .25em solid transparent
}

.abf-cate {
    display: grid;
    gap: 24px var(--column-gap);
    grid-template-columns: repeat(2, 1fr);
    background: transparent url(trongdong3.webp) center center no-repeat
}

@media (min-width:1024px) {
    .abf-cate {
        grid-template-columns: 570px 1fr 1fr
    }
}

.abf-cate .story__thumb {
    background: #fff;
    margin-bottom: 10px
}

.abf-cate .story--focus {
    grid-column: 1/3
}

@media (min-width:1024px) {
    .abf-cate .story--focus {
        grid-row: 1/4;
        grid-column: inherit
    }
}

.abf-cate .story--focus .story__thumb {
    margin-bottom: 12px
}

.abf-cate .story--focus .story__heading {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 8px
}

.highlight {
    display: grid;
    gap: var(--column-gap);
    grid-template-columns: 1fr 2fr;
    margin-bottom: 25px
}

@media (min-width:1024px) {
    .highlight:has(.right) {
        grid-template-columns: 270px 1fr
    }
}

@media (min-width:1200px) {
    .highlight:has(.right) {
        grid-template-columns: 270px 1fr 300px
    }
}

.highlight .left .story:not(:last-child) {
    margin-bottom: 20px
}

.highlight .left .story__thumb {
    margin-bottom: 8px
}

.highlight .left .story__heading {
    font-size: 18px
}

.highlight .center .story__thumb {
    margin-bottom: 12px
}

.highlight .center .story__heading {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 8px
}

.highlight .center .story__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

@media (max-width:1200px) {
    .highlight .right {
        grid-column: 1/3;
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, .1)
    }
}

.highlight .right .story:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.highlight .right .story__thumb {
    width: 120px;
    float: right;
    margin-left: 16px
}

.highlight .right .story__heading {
    font-size: 16px
}

.search-tags .region-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.search-tags .keyword {
    font-size: 16px;
    text-transform: uppercase
}

.search-tags .keyword span {
    color: var(--primary, #d72027);
    font-weight: 600;
    text-transform: none;
    margin-left: 3px
}

.search-tags .result {
    color: var(--gray-600, #6c757d)
}

.search-tags .result span {
    color: var(--primary, #d72027);
    font-weight: 600;
    margin: 0 3px
}

.search-tags .story__heading span {
    color: var(--primary, #d72027)
}

.region-search {
    display: grid;
    gap: 10px;
    padding: 20px;
    margin-bottom: var(--column-gap);
    background: var(--gray-100, #f8f9fa)
}

.region-search .advance-search {
    height: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 30px;
    display: flex;
    align-items: center
}

.region-search>form>label {
    color: #333;
    margin: 8px 0
}

.region-search .advance-search input {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    padding-left: 20px;
    margin-right: auto;
    width: 60%;
    background: 0 0;
    border: 0 none
}

.region-search .advance-search input::placeholder {
    color: var(--gray-600, #6c757d)
}

.region-search .advance-search select {
    font-size: 11px;
    color: var(--gray-600, #6c757d);
    text-transform: uppercase;
    font-weight: 600;
    width: 170px;
    padding: 6px 10px;
    margin-right: 8px;
    border: 1px solid #ddd;
    border-radius: 30px
}

.region-search .advance-search .btn {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    padding: 0 16px;
    margin-right: 2px;
    width: 100px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px
}

.region-search .advance-search .btn::before {
    font-family: icomoon;
    content: "\e917";
    font-size: 24px;
    font-weight: 400;
    display: block;
    margin-right: 6px
}

.region-search .advance-search .btn:hover {
    background: var(--primary, #d72027)
}

.region-search .form-check {
    padding-left: 20px
}

.region-search .form-check input {
    position: relative;
    top: 2px;
    margin-right: 6px
}

.region-search .form-check label {
    font-size: 13px;
    color: var(--gray-600, #6c757d)
}

.region--multimedia {
    background: url(bg/bg-emg1.webp) center center no-repeat;
    background-size: cover
}

.abf-multimedia .story {
    padding: 24px;
    background: #FFF
}

@media (min-width:1024px) {
    .abf-multimedia .story {
        padding: 0 24px 0 0
    }
}

@media (min-width:1024px) {
    .abf-multimedia .story .story__thumb {
        width: 50%;
        float: left;
        margin-right: 24px
    }
}

@media (min-width:1200px) {
    .abf-multimedia .story .story__thumb {
        width: 720px
    }
}

.abf-multimedia .story .story__heading {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    padding: 16px 0 8px
}

@media (min-width:1024px) {
    .abf-multimedia .story .story__heading {
        padding-top: 24px
    }
}

@media (max-width:1024px) {
    .abf-multimedia .story .story__meta {
        margin: 0 16px 20px
    }
}

.multimedia-list .col-3 {
    margin-bottom: 40px
}

.multimedia-list .story__thumb {
    margin-bottom: 12px
}

.multimedia-list .story__heading {
    font-size: 18px
}

.region--location {
    height: 350px;
    background-image: url(location-default.png);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important
}

.region--location::before {
    backdrop-filter: blur(0)
}

.region--location .headline-wrap {
    text-align: center;
    max-width: var(--container)
}

.region--location .main {
    font-family: var(--font-family-pop);
    font-size: 50px;
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .5)
}

.region--location .main a {
    color: #fff
}

.region--location .advance-search {
    height: 50px;
    margin: 20px auto 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden
}

@media (min-width:1024px) {
    .region--location .advance-search {
        width: 750px
    }
}

.region--location .advance-search select {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    width: 100%;
    height: 50px;
    padding-left: 20px;
    margin-right: 10px;
    border: 0 none;
    cursor: pointer
}

.region--location .advance-search select option {
    padding: 10px
}

.region--location .advance-search .btn {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    padding: 0 16px;
    margin-right: 2px;
    min-width: 140px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px
}

.region--location .advance-search .btn::before {
    font-family: icomoon;
    content: "\e917";
    font-size: 24px;
    font-weight: 400;
    display: block;
    margin-right: 6px
}

.region--location .advance-search .btn:hover {
    background: var(--primary, #d72027)
}

.topic-list .story {
    padding: 20px;
    margin-bottom: 10px;
    background: var(--gray-100, #f8f9fa);
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: 3px
}

.topic-list .story__thumb {
    width: 120px;
    float: right;
    margin-left: 16px
}

.topic-list .story__heading {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 8px
}

.topic-list .btn {
    margin-top: 20px
}

.region--topic {
    background-image: url(bg/bg-emg1.webp);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 300px;
    margin-bottom: -50px
}

.region--topic .breadcrumb {
    margin-top: -40px
}

.lanhdaodang {
    width: 100%;
    background: transparent url(bg/lanhdaodang.jpg) no-repeat;
    background-size: 100%;
    margin: 50px auto 0
}

.lanhdaodang>.container {
    background: #FFF
}

.chuyentrang {
    background-image: none !important;
    margin: -90px auto -50px;
    height: 350px !important
}

.chuyentrang::before {
    background: none;
    backdrop-filter: unset
}

.chuyentrang .breadcrumb {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    margin-top: -10px
}

.chuyentrang .breadcrumb>img {
    max-width: 200px;
    object-fit: cover;
    border-radius: 100%
}

.chuyentrang .breadcrumb>p {
    font-family: var(--font-family-bar);
    color: #FFF;
    font-size: 35px;
    text-align: left
}

.video-page .area--light {
    margin-top: -30px
}

.video-header {
    height: 50px;
    padding: 0 20px;
    background: #00202f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.video-header .logo {
    width: 225px;
    height: 30px;
    background: url(logo.svg) 0 0/225px no-repeat;
    display: block;
    text-indent: -999em;
    position: relative;
    z-index: 1001
}

.video-player {
    margin-bottom: 20px
}

.video-article {
    background: #FFF;
    padding: 20px
}

.video-article .article__title {
    font-size: 30px;
    color: #001;
    font-weight: 600
}

.video-article .article__meta {
    margin: 0;
    border: 0 none;
    flex-wrap: wrap
}

.video-article .article__meta .meta {
    width: 100%;
    margin: 0 0 12px 0
}

.video-article .article__sub-title,
.video-article .meta * {
    color: #123
}

.video-article .social {
    display: flex;
    gap: 6px;
    margin-right: auto
}

.video-article .social a {
    font-size: 16px;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.video-article .social a:hover {
    opacity: .85
}

.video-article .social .fb {
    background: #3b5998
}

.video-article .social .tt {
    background: #55acee
}

.video-article .social .zl {
    background: #018fe5
}

.video-article .social .em {
    font-size: 18px;
    background: #0ba5be
}

.video-article .article__sapo {
    font-size: 16px;
    color: #444;
    font-weight: 400
}

.video-article .article__comment textarea {
    background: rgba(255, 255, 255, .1)
}

.video-article .article__comment .list-comment .text {
    color: #888
}

.video-article .article__comment .list-comment .avatar {
    background: rgba(255, 255, 255, .1)
}

.video-article .article__comment .rank-1:not(:first-child),
.video-article .article__comment .rank-2,
.video-article .article__comment .wrap-outer {
    border-color: #333
}

.video-aside .story:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #CCC
}

.video-aside .story__thumb {
    width: 100%
}

.video-aside .story__heading {
    font-size: 14px;
    font-weight: 400
}

.video-aside .story__heading a {
    color: #111;
    font-weight: bold;
    font-size: 16px
}

.video-aside .story__heading a:hover {
    color: #555
}

.video-aside .story__heading i {
    font-size: inherit;
    color: #222
}

.video-aside .playing {
    font-size: 11px;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--primary, #d72027);
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    border-radius: 2px
}

.zone--video {
    margin-bottom: 30px
}

.zone--video .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.zone--video .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.zone--video .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.zone--video .box-heading a:hover {
    color: var(--primary, #d72027)
}

.zone--video .box-content {
    display: grid;
    gap: 20px var(--column-gap);
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:1024px) {
    .zone--video .box-content {
        grid-template-columns: repeat(3, 1fr)
    }
}

.zone--video .story__thumb {
    margin-bottom: 10px
}

.\--z--player .\--z--big-play-button {
    top: auto;
    bottom: 30px;
    left: 30px;
    transform: none
}

.podcast-player {
    background: rgba(0, 0, 0, .1)
}

.podcast-player .container {
    position: relative;
    display: flex;
    align-items: center;
    height: 80px
}

.podcast-player .wrap-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
    min-width: 160px
}

.podcast-player .wrap-top .btn-next,
.podcast-player .wrap-top .btn-prev {
    position: relative
}

.podcast-player .wrap-top .btn-next:before,
.podcast-player .wrap-top .btn-prev:before {
    font-family: icomoon;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    display: block
}

.podcast-player .wrap-top .btn-next:after,
.podcast-player .wrap-top .btn-prev:after {
    content: "10";
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.podcast-player .wrap-top .btn-prev:before {
    content: "\e921"
}

.podcast-player .wrap-top .btn-next:before {
    content: "\e922"
}

.podcast-player .wrap-top .play-button {
    color: #fff;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%
}

.podcast-player .wrap-top .play-button span {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-content: center
}

.podcast-player .wrap-top .play-button span i {
    color: var(--primary, #d72027)
}

.podcast-player .wrap-top .play-button .ic-audio-play::before {
    font-size: 18px;
    content: "\e915"
}

.podcast-player .wrap-top .play-button .ic-audio-pause::before {
    font-size: 18px;
    content: "\e911"
}

.podcast-player .wrap-bottom {
    display: flex;
    align-items: center;
    width: calc(100% - 142px)
}

.podcast-player .wrap-bottom .progress-bar {
    display: block;
    width: 72%;
    position: relative;
    margin-right: 20px
}

.podcast-player .wrap-bottom .progress-bar .bg {
    border-top: 2px solid;
    border-color: rgba(255, 255, 255, .2);
    top: 0;
    display: block;
    height: 0;
    width: 100%;
    transition: all .15s linear
}

.podcast-player .wrap-bottom .time-display {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 125px
}

.podcast-player .wrap-bottom .time-display>* {
    font-size: 16px;
    color: #fff;
    margin-left: 10px
}

.podcast-player .mute-wrap {
    position: absolute;
    right: 0;
    width: 120px;
    display: flex
}

.podcast-player .mute-button {
    padding: 0 16px 0 8px
}

.podcast-player .mute-button i {
    color: #fff
}

.podcast-player .mute-button .ic-audio-volume::before {
    font-size: 22px;
    content: "\e91d"
}

.podcast-player .mute-button .ic-audio-volume-slash::before {
    content: "\e923"
}

.podcast-player .volume-slider {
    width: 62px;
    display: flex;
    position: relative;
    overflow: hidden;
    margin-right: 0;
    cursor: pointer;
    transition: all .15s linear
}

.podcast-player .volume-slider .volume-slider-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    margin-top: -6px;
    background: #fff;
    z-index: 999
}

.podcast-player .volume-slider .volume-slider-handle:after,
.podcast-player .volume-slider .volume-slider-handle:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    width: 64px
}

.podcast-player .volume-slider .volume-slider-handle:before {
    left: -64px;
    background: rgba(255, 255, 255, .2)
}

.podcast-player .volume-slider .volume-slider-handle:after {
    left: 10px;
    background: rgba(255, 255, 255, .2)
}

.podcast-player .volume-slider.is-active {
    margin-right: 10px;
    width: 62px
}

.podcast-player .current_time {
    position: absolute;
    right: -7px;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-indent: -999em;
    transition: all .15s linear;
    background-color: #fff
}

.podcast-player .fill-recent {
    position: absolute;
    background-color: rgba(255, 255, 255, .6);
    height: 0;
    top: -1px;
    left: 0
}

.podcast-viewport {
    text-align: center;
    background-image: url(podcast-default.png);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin: -31px 0 var(--bth-margin);
    position: relative
}

.podcast-viewport::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(85, 36, 0, .3);
    backdrop-filter: blur(6px);
    position: absolute
}

.podcast-viewport>* {
    position: relative
}

.podcast-info {
    color: #fff;
    width: 700px;
    padding: 50px 0
}

.podcast-info .article__meta {
    justify-content: center;
    flex-wrap: wrap;
    border-color: rgba(255, 255, 255, .3)
}

.podcast-info .article__meta *,
.podcast-info .article__meta .author::after {
    color: #fff
}

.podcast-info .article__meta .meta {
    margin: 0 0 12px 0;
    width: 100%;
    justify-content: center
}

.podcast-info .article__meta .social {
    display: flex;
    gap: 6px;
    margin-right: auto
}

.podcast-info .article__meta .social a {
    font-size: 16px;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.podcast-info .article__meta .social a:hover {
    opacity: .85
}

.podcast-info .article__meta .social .fb {
    background: #3b5998
}

.podcast-info .article__meta .social .tt {
    background: #55acee
}

.podcast-info .article__meta .social .zl {
    background: #018fe5
}

.podcast-info .article__meta .social .em {
    font-size: 18px;
    background: #0ba5be
}

.podcast-info .article__meta .gg-news * {
    color: var(--gray-800, #343a40)
}

.podcast-info .article__sapo {
    font-weight: 600;
    margin: 0
}

.podcast-suggest .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.podcast-suggest .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.podcast-suggest .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.podcast-suggest .box-heading a:hover {
    color: var(--primary, #d72027)
}

.podcast-suggest .box-content {
    display: grid;
    gap: 24px 30px;
    grid-template-columns: repeat(3, 1fr)
}

.podcast-suggest .story__thumb {
    margin-bottom: 10px
}

.podcast-suggest .btn {
    grid-column: 1/4
}

.podcast-list .col-4 {
    gap: 24px 30px;
    margin-bottom: 40px
}

.podcast-list .story__thumb {
    margin-bottom: 10px
}

.epaper .col-4 {
    gap: 30px
}

.epaper .story__thumb {
    margin-bottom: 8px;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: all .3s ease 0s
}

.epaper .story__thumb:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    box-shadow: 0 3px 22px 0 rgba(0, 0, 0, .2)
}

.epaper .story__thumb::before {
    padding-bottom: 140%
}

.epaper .story__heading {
    font-family: var(--font-family-bar);
    font-size: 20px;
    text-align: center
}

.epaper-filter {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--gray-100, #f8f9fa);
    margin-bottom: 50px
}

.epaper-filter input {
    font-size: 16px;
    color: var(--gray-600, #6c757d);
    width: 160px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 3px
}

@media (min-width:1024px) {
    .epaper-filter input {
        width: 200px
    }
}

.epaper-filter input::placeholder {
    color: var(--gray-600, #6c757d)
}

.epaper-filter .form-control {
    width: 185px
}

@media (min-width:1024px) {
    .epaper-filter .form-control {
        width: 300px
    }
}

.epaper-filter .filter-item label {
    margin-right: 6px
}

.epaper-filter .btn {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--secondary, #b40c0e);
    padding: 0 20px;
    height: 38px;
    display: flex;
    align-items: center;
    border-radius: 3px
}

.epaper-filter .btn:hover {
    background: var(--primary, #d72027)
}

.epaper-header {
    height: 50px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1
}

.epaper-header .logo {
    width: 180px;
    height: 24px;
    background: url(logo.svg) 0 0 no-repeat;
    display: block;
    text-indent: -999em
}

.epaper-header .headline {
    font-family: var(--font-family-bar);
    font-size: 26px;
    line-height: 1.3;
    font-weight: 400;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.error {
    text-align: center;
    margin: 100px auto
}

.error img {
    width: fit-content;
    height: 100%;
    margin-bottom: 30px
}

.error .title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 10px
}

.error .des {
    font-size: 18px;
    color: var(--gray-600, #6c757d)
}

.error .des a {
    color: var(--primary, #d72027);
    display: inline
}

.error .des a:hover {
    text-decoration: underline
}

.user-login {
    display: flex;
    align-items: center;
    position: relative
}

.user-login .username {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    cursor: pointer
}

.user-login .username::after {
    font-family: icomoon;
    content: "\e900";
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 3px
}

.user-login .username:hover {
    color: var(--gray-800, #343a40)
}

.user-login .username img {
    width: 30px;
    height: 30px;
    margin-right: 6px;
    border-radius: 50%
}

.user-login .dropdown-menu {
    display: none;
    min-width: 240px;
    padding: 10px 20px;
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 3;
    background: var(--gray-100, #f8f9fa);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}

.user-login .dropdown-menu:before {
    position: absolute;
    content: "";
    right: 50px;
    top: -8px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #eee
}

.user-login .dropdown-menu>* {
    padding: 10px 0
}

.user-login .dropdown-menu * {
    font-size: 14px;
    color: var(--gray-800, #343a40)
}

.user-login .dropdown-menu p {
    padding-bottom: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.user-login .dropdown-menu a:hover i {
    color: var(--primary, #d72027)
}

.user-login .dropdown-menu i {
    font-size: large;
    color: #888;
    vertical-align: sub;
    margin-right: 3px
}

.user-login .logout {
    padding-top: 16px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.user-wrap {
    display: grid;
    gap: var(--column-gap);
    grid-template-columns: [sidebar] 1fr [content] 3fr
}

.user-info {
    background: var(--gray-100, #f8f9fa);
    border-radius: 3px
}

.user-info .tablinks {
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    height: 56px;
    text-align: left;
    padding: 0 20px;
    border-left: 2px solid transparent
}

.user-info .tablinks:hover {
    background: rgba(255, 255, 255, .5)
}

.user-info .tablinks.active {
    background: #fff;
    border-color: var(--primary, #d72027)
}

.user-info .tablinks.active i {
    color: var(--primary, #d72027)
}

.user-info .tablinks i {
    font-size: 22px;
    color: #888;
    margin-right: 6px;
    vertical-align: sub
}

@media (max-width:1023px) {
    .user-info .tablinks i {
        display: none
    }
}

.user-ava {
    text-align: center;
    padding: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .06)
}

.user-ava .avatar {
    width: 150px;
    margin: 0 auto 10px;
    position: relative
}

.user-ava .avatar img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%
}

.user-ava .avatar i {
    font-size: 22px;
    width: 36px;
    height: 36px;
    background: var(--gray-100, #f8f9fa);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.user-ava .image-upload {
    width: 36px;
    height: 36px;
    background: var(--gray-100, #f8f9fa);
    border-radius: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.user-ava .image-upload label {
    font-size: 0
}

.user-ava .image-upload label::before {
    font-family: icomoon;
    content: "\e90a";
    font-size: 24px;
    color: #888
}

.user-ava .image-upload input {
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    cursor: pointer
}

.user-ava .name {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 6px
}

.user-ava .name i {
    margin-left: 6px
}

.user-ava .checked {
    color: #16ce06
}

.user-ava .uncheck {
    color: var(--primary, #d72027)
}

.user-overview {
    padding: 30px;
    background: var(--gray-100, #f8f9fa);
    border-radius: 3px
}

.user-overview .form-group {
    display: grid;
    gap: 6px 20px;
    grid-template-columns: 100px 1fr;
    align-items: center;
    margin-bottom: 20px
}

.user-overview .form-group label {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    text-align: right
}

.user-overview .form-group label span {
    color: var(--primary, #d72027)
}

.user-overview .form-group input[type=password] {
    padding-right: 50px
}

.user-overview .form-group .form-text,
.user-overview .form-group .fw-link {
    grid-column: 2
}

.user-overview .group-select {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.user-overview .form-link {
    display: grid;
    gap: 6px
}

@media (min-width:1024px) {
    .user-overview .form-link {
        gap: 50px;
        align-items: center;
        grid-template-columns: 2fr 1fr
    }
}

.user-overview .form-link:not(:first-child) {
    grid-column: 2
}

.user-overview .form-link .link {
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 3px
}

.user-overview .form-link .link i {
    font-size: 18px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center
}

.user-overview .form-link .link.fb {
    background: #3b5998
}

.user-overview .form-link .link.gg {
    background: #db4437
}

.user-overview .form-link .link.zl {
    background: #018fe5
}

.user-overview .form-link .link:hover {
    opacity: .9
}

.user-overview .form-link .form-check-label {
    font-size: 13px
}

.user-overview .no-data {
    text-align: center;
    padding: 50px 0;
    min-height: 500px
}

.user-overview .no-data img {
    width: fit-content;
    height: 100%;
    margin-bottom: 20px
}

.user-overview .no-data p {
    font-size: 20px;
    line-height: 1.3;
    color: var(--gray-600, #6c757d)
}

.user-overview .tab-info {
    padding: 30px 0;
    width: 80%;
    margin: auto
}

.user-overview .tab-info .btn-secondary {
    width: 100%;
    margin-top: 30px
}

.user-overview .tab-comment .story {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.user-overview .tab-comment .story .time {
    color: #888;
    margin-bottom: 3px
}

.user-overview .tab-comment .story .text {
    font-size: 16px;
    margin-bottom: 8px
}

.user-overview .tab-comment .story .action>* {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    display: initial;
    margin-right: 16px
}

.user-overview .tab-comment .story .action .like::before {
    font-family: icomoon;
    content: "\e919";
    font-size: 14px;
    margin-right: 3px
}

.user-overview .tab-comment .story .action .like.liked {
    color: var(--primary, #d72027)
}

.user-overview .tab-comment .story .link {
    font-family: var(--font-family-pop);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    margin-top: 8px
}

.user-overview .tab-read .story {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.user-overview .tab-read .story__thumb {
    width: 120px;
    float: left;
    margin-right: 16px
}

.user-overview .tab-read .story__heading {
    font-weight: 700;
    margin-bottom: 8px
}

.user-overview .tab-read .story__summary {
    display: flex
}

.user-overview .tab-read .story__summary * {
    display: contents
}

.user-overview .tab-password {
    padding: 30px 0;
    width: 80%;
    margin: auto
}

.user-overview .tab-password .form-group {
    grid-template-columns: 150px 1fr
}

.logout {
    color: #888
}

.logout i {
    font-size: 18px;
    margin-left: 3px;
    vertical-align: middle
}

.ad-wrap .col-2 {
    gap: 20px;
    margin-bottom: var(--column-gap)
}

.ad-wrap .zone:not(:last-child) {
    margin-bottom: 20px
}

.ad-wrap .zone .story__thumb {
    margin-bottom: 10px
}

.ad-wrap .zone .btn {
    grid-column: 1/4
}

.ad-wrap .box-heading {
    font-family: var(--font-family-bar);
    font-size: 30px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

.ad-wrap .box-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.ad-wrap .box-heading * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

.ad-wrap .box-heading a:hover {
    color: var(--primary, #d72027)
}

@media (min-width:1200px) {
    .ad-wrap .highlight {
        grid-template-columns: 270px 1fr
    }
}

.ad-wrap i.fa {
    font-size: 48px;
    margin-right: 10px
}

.ad-wrap .zone a.title {
    color: #111;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ad-wrap .zone a.title:hover {
    color: #BE0000
}

.ad-wrap .zone a.title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

.ad-wrap .thong-tin-nha-dat i.fa {
    color: #3982b9
}

.ad-wrap .thong-tin-nha-dat i.fa:before {
    content: "\f0f7"
}

.ad-wrap .thong-bao-tuyen-dung i.fa {
    color: #39b96f
}

.ad-wrap .thong-bao-tuyen-dung i.fa:before {
    content: "\f26c"
}

.ad-wrap .thong-tin-tuyen-sinh i.fa {
    color: #BE0000
}

.ad-wrap .thong-tin-tuyen-sinh i.fa:before {
    content: "\f19d"
}

.ad-wrap .thong-bao-khac i.fa {
    color: #c06aab
}

.ad-wrap .thong-bao-khac i.fa:before {
    content: "\f040"
}

.ad-wrap .dau-gia-tai-san i.fa {
    color: #de8347
}

.ad-wrap .dau-gia-tai-san i.fa:before {
    content: "\f1b9"
}

.ad-wrap .rao-vat-khac i.fa {
    color: #57a3dd
}

.ad-wrap .rao-vat-khac i.fa:before {
    content: "\f10b"
}

.rss-content {
    font-size: 16px;
    padding: 30px 20px;
    margin: auto;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    border-radius: 3px
}

@media (min-width:1024px) {
    .rss-content {
        width: 800px
    }
}

.rss-content p {
    margin-bottom: 16px
}

.rss-content ul {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px
}

.rss-content ul li {
    display: flex
}

.rss-content i {
    font-size: 20px;
    color: #f26522;
    margin-right: 6px
}

.fixed {
    position: fixed
}

.ads_close,
.banner_hidden,
.hidden,
.rennab_hidden,
.title-hidden {
    display: none !important
}

div[data-position*=AdsAnchor],
div[data-position*=AdsBalloon],
div[data-position*=AdsPopup],
div[data-position*=SdaAnchor],
div[data-position*=SdaBalloon],
div[data-position*=SdaPopup] {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100
}

.banner img,
.rennab img {
    max-width: 100%;
    overflow: hidden
}

video.thumb-gif {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.story-page .story-normal>* {
    display: none !important
}

.story-page .section-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1s;
    object-fit: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.story-page .img-wrapper img {
    opacity: 1
}

.story-page .section-break {
    background: #272727
}

#error-report {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    background-color: #000;
    z-index: 998;
    margin-left: -65px
}

#error-report::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 35px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: -5px;
    background-color: #000
}

#error-report button {
    cursor: pointer;
    display: inline-block;
    padding: 10px 14px;
    text-align: center;
    background-color: transparent;
    border: 0;
    outline: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
    position: relative
}

#error-report button:first-child::after {
    content: '';
    position: absolute;
    bottom: 10px;
    top: 10px;
    right: 0;
    display: block
}

.breadcrumb .main.gg-search a {
    color: #fff !important;
    background: var(--secondary, #b40c0e);
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 12px
}

.breadcrumb .main.gg-search {
    font-size: 16px !important;
    text-transform: none;
    margin-left: auto
}

.breadcrumb .main.gg-search::before {
    content: "" !important
}

.longform-page .article__body figure:not([class]):not([align]):has(iframe) {
    width: 100% !important
}

.center-point .box-heading.has-image {
    display: inherit
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.news-ticker-container {
    background-color: #fff;
    width: 100%;
    margin: 20px auto;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
}

.site-body>.news-ticker-container {
    margin: -20px auto 10px;
    width: 1170px
}

.ticker-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap
}

.ticker-move {
    display: inline-block;
    animation: ticker 120s linear infinite
}

.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 15px
}

.ticker-item a {
    color: #333;
    text-decoration: none;
    float: right
}

.ticker-item a:hover {
    text-decoration: underline;
    color: #c81e25
}

.ticker-icon {
    color: #f5a623;
    margin-right: 5px;
    font-weight: bold
}

.ticker-wrap:hover .ticker-move {
    animation-play-state: paused
}

@keyframes ticker {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.weather {
    padding: 10px 1px
}

.dweat ul.listing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px
}

select.dpage,
select.cboweather {
    margin-left: 5px
}

.dweat {
    display: none;
    padding: 5px;
    background: #FFF
}

select.cboweather {
    float: right;
    padding: 2px 10px;
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: #555;
    background: #fff none;
    border: 1px solid #D61117;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    width: 180px;
    height: 26px;
    margin-top: -2px
}

.dweat .cond,
.dweat .desc,
.dweat .listing,
.dweat .today {
    margin-top: 8px
}

.dweat .today {
    box-sizing: border-box;
    display: block;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #222;
    padding: 15px 0;
    border-radius: 5px;
    background: #EEE
}

.dweat .today .status {
    text-align: left;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 16px
}

.dweat .today .fog,
.dweat .today .hazy,
.dweat .today .nt_fog,
.dweat .today .nt_hazy {
    width: 100px;
    height: 100px;
    background-position: -200px -100px
}

.dweat .status {
    margin-top: 8px;
    text-align: center
}

.dweat .today .cond,
.dweat .today .date,
.dweat .today .desc {
    text-align: left;
    margin-top: 8px
}

.dweat .cond,
.dweat .date,
.dweat .desc {
    display: block;
    font-size: 14px;
    color: #555;
    text-align: center
}

.dweat .today .temp {
    margin-top: 8px;
    font-weight: 700;
    font-size: 24px;
    color: #111;
    text-align: left
}

.dweat .temp {
    font-family: "Times New Roman", Times, serif, Helvetica, Arial, sans-serif;
    text-align: center
}

.dweat .day {
    padding: 0 8px;
    border-left: solid 1px #CCC
}

.dweat .day:first-child {
    border-left: none
}

.dweat .day,
.dweat .day .cond,
.dweat .day .date,
.dweat .day .desc {
    font-size: 12px
}

.dweat .ic-weather {
    display: inline-block;
    width: 32px
}

.dweat .ic-weather img {
    width: 100%
}

.dweat #today-ic {
    width: 80px
}

.dweat .today .cloudy,
.dweat .today .mostlycloudy,
.dweat .today .mostlysunny,
.dweat .today .partlycloudy,
.dweat .today .partlysunny {
    width: 100px;
    height: 100px;
    background-position: -200px 0
}

.dweat .cloudy,
.dweat .mostlycloudy,
.dweat .mostlysunny,
.dweat .partlycloudy,
.dweat .partlysunny {
    background-position: -200px -200px
}

.dweat .clear,
.dweat .sunny {
    background-position: 0 -200px
}

.dweat .today .clear,
.dweat .today .sunny {
    width: 100px;
    height: 100px;
    background-position: 0 0
}

.dweat .nt_clear,
.dweat .nt_sunny {
    background-position: -100px -200px
}

.dweat .mostlycloudy,
.dweat .mostlysunny,
.dweat .partlycloudy,
.dweat .partlysunny,
.dweat .cloudy {
    background-position: -200px -200px
}

.dweat .nt_mostlycloudy,
.dweat .nt_mostlysunny,
.dweat .nt_partlycloudy,
.dweat .nt_partlysunny,
.dweat .nt_cloudy {
    background-position: -300px -200px
}

.dweat .chancesleet,
.dweat .sleet,
.dweat .nt_chancesleet,
.dweat .nt_sleet,
.dweat .snow,
.dweat .nt_snow,
.dweat .chancesnow,
.dweat .nt_chancesnow {
    background-position: -400px -200px
}

.dweat .rain {
    background-position: -0 -300px
}

.dweat .today .rain {
    width: 100px;
    height: 100px;
    background-position: 0 -100px
}

.dweat .nt_rain {
    background-position: -100px -300px
}

.dweat .fog,
.dweat .hazy,
.dweat .nt_fog,
.dweat .nt_hazy {
    background-position: -200px -300px
}

.dweat .chanceflurries,
.dweat .flurries,
.dweat .nt_chanceflurries,
.dweat .nt_flurries,
.dweat .chancetstorms,
.dweat .tstorms,
.dweat .nt_chancetstorms,
.dweat .nt_tstorms {
    background-position: -300px -300px
}

.dweat .chancerain,
.dweat .nt_chancerain {
    background-position: -400px -300px
}

#dtruyenhinh {
    margin-top: 35px
}

#dtruyenhinh>h3 {
    font-family: var(--font-family-bar);
    font-size: 25px;
    line-height: 1.2;
    color: var(--gray-900, #212529);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0 20px
}

#dtruyenhinh>h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .1);
    position: relative;
    top: calc(50% - .5px)
}

#dtruyenhinh>h3 * {
    color: var(--gray-900, #212529);
    white-space: nowrap
}

#dtruyenhinh>h3 a:hover {
    color: var(--primary, #d72027)
}

#dtruyenhinh>p {
    color: #999
}

.feature {
    margin-bottom: 40px
}

.highlight2>article.story:not(:last-child) {
    border-bottom: dashed 1px #EEE;
    padding-bottom: 15px;
    margin-bottom: 15px
}

.highlight2>article>figure {
    width: 120px;
    float: left;
    margin: 0 8px 8px 0
}

.highlight2>article>figure img {
    border-radius: 5px
}

.highlight2>article>h2 {
    font-size: 14px !important
}

#dfeatureds .story__summary {
    color: #555
}

#dhoatdong {
    display: none
}

#dhoatdong .hdbg {
    border: solid 1px #EEE;
    background-color: #fff6d9;
    background-image: url(dflag.webp), url(trongdong3.webp);
    background-position: right -70px top -65px, center center;
    background-size: 450px 200px, 1000px 600px;
    background-repeat: no-repeat, no-repeat
}

#dhoatdong .hdbg>h3 {
    font-family: var(--font-family-sec);
    margin: 10px auto;
    text-align: center;
    color: RED;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: normal
}

#dhoatdong .hdbg>span {
    display: none
}

#dhoatdong .hdbg>ul,
#dhoatdong .hdbg>ul>li {
    list-style: none;
    padding: 0;
    margin: 0
}

#dhoatdong .hdbg>ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px
}

#dhoatdong .hdbg>ul>li {
    border-right: dashed 1px #CCC
}

#dhoatdong .hdbg>ul>li:last-child {
    border-right: none
}

#dhoatdong .hdbg>ul>li figure {
    width: 100%;
    text-align: center;
    margin: 10px auto
}

#dhoatdong .hdbg>ul>li figure img {
    max-width: 200px;
    object-fit: cover;
    border-radius: 100%
}

#dhoatdong .hdbg>ul>li p {
    margin: 10px;
    padding: 10px
}

#dhoatdong .hdbg>ul>li p>a {
    color: #000;
    font-size: 16px
}

#dhoatdong .hdbg>ul>li p>a:hover {
    color: RED
}

#dsukien a.title {
    margin: 5px 0;
    background: url(quochuy.webp) 0 0 no-repeat;
    background-size: 32px;
    padding-left: 45px;
    font-size: 28px
}

#dsukien .tpitem {
    display: none
}

#dsukien .tpitem:first-child {
    display: block
}

#dsukien a.title {
    background: none;
    margin-left: -45px
}

.timeline a.cate {
    float: left;
    margin-right: 10px
}

.timeline time {
    padding: 5px
}

#dcate_thanhhoa {
    background-position: center 0
}

#dcate_thanhhoa .story__heading>a {
    color: #FFF
}

#dcate_thanhhoa .story__heading>a:hover {
    color: #BE0000
}

#dcate_thanhhoa .story__summary {
    color: #FEF
}

#dcate_thanhhoa a.title,
.multimedia a.title,
#dcate_main a.title,
#dcate_exts a.title {
    border-bottom: solid 2px RED
}

#dcate_main .zone--secondary .box-heading::after,
#dcate_exts .zone--secondary .box-heading::after {
    background-color: #EAEAEA
}

.dtieudiem {
    background-position: center 0
}

.dtieudiem .box-content figure img {
    border-radius: 0
}

.box-ads h2.story__heading {
    font-size: 13px
}

.clr {
    clear: both
}

#dfacebook {
    margin: 20px 0
}

#dright2>div {
    margin: 20px 0
}

.dadhr {
    margin: 10px auto;
    width: 1170px
}

@media (max-width:1024px) {
    .dadhr {
        width: 1024px
    }

    .site-body>.news-ticker-container {
        width: 100%
    }
}

.oad {
    text-align: center;
    display: none
}

.oad img {
    width: 100% !important;
    height: auto !important
}

#ad_hotb1_300 {
    margin: 8px 0 0
}

#ad_hotb2_300 {
    margin: 10px 0 20px
}

#ad_hotb4_300>a {
    margin: 20px 0
}

#tp2371,
#ad_right1_300 {
    display: none !important
}

#ad_head_1170 {
    margin: -20px auto 30px;
    display: none !important
}

#ad_head_1170>a {
    margin: 8px 0 0
}

#adfull1_1170x120>a {
    margin: 8px 0 0
}

#adfull1_1170x120>a:nth-child(n+2) {
    display: none !important
}

#adfull2_2_1170x120>a {
    margin: 8px 0 0
}

#adfull2_2_1170x120>a:nth-child(n+2) {
    display: none !important
}

#adfull3_1170x120>a {
    margin: 8px 0 0
}

#adfull3_1170x120>a:nth-child(n+2) {
    display: none !important
}

#adfull4_1170x120>a {
    margin: 8px 0 0
}

#adfull4_1170x120>a:first-child {
    display: none !important
}

#ad_footer_1170>a {
    margin: 8px 0 0
}

#ad_footer_1170>a:nth-child(n+2) {
    display: none !important
}

#cn2381 {
    display: none !important
}

#dtin_diaphuong {
    padding: 20px 0
}

.dh-multimedia {
    background-image: url(bg/bg-emg1.webp)
}

.dh-emagazine {
    background-image: url(bg/bg-emg2.webp)
}

.dh-infographic {
    background-image: url(bg/bg-emg3.webp)
}

.dh-image {
    background-image: url(bg/bg-emg4.webp)
}

.dh-story {
    background-image: url(bg/bg-emg5.webp)
}

.dh-topic {
    background-image: url(bg/bg-emg6.webp)
}

.dh-tag {
    background-image: url(bg/bg-emg7.webp)
}

.dh-page {
    background-image: url(bg/bg-emg8.webp)
}

.dh-newspaper {
    background-image: url(bg/bg-emg9.webp);
    margin-bottom: 20px
}

#dmore {
    font-size: 15px;
    color: var(--primary);
    background: transparent;
    width: 180px;
    height: 40px;
    border: solid 1px #BCD;
    border-radius: 10px;
    text-transform: none;
    font-weight: normal
}

#dmore:hover {
    font-weight: bold
}

#netlink {
    width: 100%;
    overflow: hidden !important
}

.dfooter {
    height: 120px;
    margin: 0 auto 20px auto;
    padding: 15px;
    background: #FFF url(trongdong3.webp) center center repeat;
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 10px
}

.dfooter>.tinnhiemmang {
    text-align: center;
    margin: 0 auto
}

.dfooter>.tinnhiemmang img {
    max-height: 100px
}

.dfooter>.powered {
    padding: 10px
}

.dfooter>.powered>a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-decoration: none;
    color: #555;
    border: solid 1px #CCC;
    padding: 5px;
    border-radius: 5px;
    background-color: #FFF
}

.dfooter>.powered>a>img {
    height: 16px;
    width: auto;
    margin-top: 5px
}

.dfooter>.powered>a>span {
    margin: 2px;
    font-size: 10px;
    font-family: Orbitron, sans-serif;
    color: #444
}

@media (max-width:767px) {
    .dfooter {
        grid-template-columns: 1fr
    }

    .dfooter>.powered {
        position: relative;
        right: 0;
        bottom: 0;
        margin: 10px auto
    }
}

.dmedia>.dglivetv-container,
.dmedia>.dgvod-container {
    margin-top: 0;
    max-width: 800px
}

.dmedia>.dglivetv-container .vjs-poster img,
.dmedia>.dgvod-container .vjs-poster img {
    object-fit: unset
}

.dmedia>.dgaod-container .dgaod.video-js .vjs-control-bar {
    height: 4.5em
}

.dmedia>.dgvod-container .vjs-poster img {
    max-height: 450px
}