@font-face {
    font-family: pl-icon;
    src: url(../fonts/zplayer/4f535a0b12bd701ad5c11e3c7c595769.eot);
    src: url(../fonts/zplayer/4f535a0b12bd701ad5c11e3c7c595769.eot#iefix) format("embedded-opentype"), url(../fonts/zplayer/e347bc7f3d5ab1ab1a0911c5e3072c45.ttf) format("truetype"), url(../fonts/zplayer/a1e716fe5015411d0a21d0e12ab88198.woff) format("woff"), url(../fonts/zplayer/0b83b8ed7a5631e3d7016a93ae9c5c7e.svg#pl-icon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class*=" pl-ic-"], [class^=pl-ic-] {
    font-family: pl-icon !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pl-ic-theater-mini:before {
    content: "\E913"
}

.pl-ic-theater:before {
    content: "\E914"
}

.pl-ic-caption:before {
    content: "\E900"
}

.pl-ic-fullscreen:before {
    content: "\E901"
}

.pl-ic-info_outline:before {
    content: "\E902"
}

.pl-ic-pause:before {
    content: "\E903"
}

.pl-ic-play_arrow:before {
    content: "\E904"
}

.pl-ic-refresh:before {
    content: "\E905"
}

.pl-ic-replay:before {
    content: "\E906"
}

.pl-ic-settings:before {
    content: "\E907"
}

.pl-ic-volume_down:before {
    content: "\E908"
}

.pl-ic-volume_mute:before {
    content: "\E909"
}

.pl-ic-volume_up:before {
    content: "\E90A"
}

.pl-ic-fullscreen_exit:before {
    content: "\E90B"
}

.pl-ic-error_outline:before {
    content: "\E90C"
}

.pl-ic-volume_off:before {
    content: "\E90D"
}

.pl-ic-done:before {
    content: "\E90E"
}

.pl-ic-keyboard_arrow_down:before {
    content: "\E90F"
}

.pl-ic-keyboard_arrow_left:before {
    content: "\E910"
}

.pl-ic-keyboard_arrow_right:before {
    content: "\E911"
}

.pl-ic-keyboard_arrow_up:before {
    content: "\E912"
}

.\--z--player {
    height: 343px;
    width: 610px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: transform .1s cubic-bezier(0, 0, .2, 1);
    -moz-transition: transform .1s cubic-bezier(0, 0, .2, 1);
    transition: transform .1s cubic-bezier(0, 0, .2, 1);
    -webkit-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
    -moz-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
    transition: opacity .1s cubic-bezier(0, 0, .2, 1);
    position: relative;
    font-size: 10px;
    font-family: sans-serif;
    line-height: 1.5;
    padding: 0;
    font-weight: 400;
    box-sizing: border-box;
    outline: 0;
    background-color: #000
}

.\--z--player :focus {
    outline: 0
}

.\--z--player *, .\--z--player :after, .\--z--player :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.\--z--player ::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.\--z--player ::-webkit-scrollbar-track {
    background: 0 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
}

.\--z--player ::-webkit-scrollbar-thumb {
    background: #dbdbdb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
}

.\--z--player ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .75);
    background-color: rgba(255, 255, 255, .75)
}

.\--z--player button {
    border: 0;
    cursor: pointer;
    background-color: transparent
}

.\--z--player svg {
    position: relative
}

.\--z--player a {
    text-decoration: none
}

.\--z--player li, .\--z--player ol, .\--z--player ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.\--z--player video {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.\--z--player .\--z--center {
    text-align: center
}

.\--z--player .\--z--hide {
    display: none !important
}

.\--z--player .\--z--fadeout {
    opacity: 0 !important
}

.\--z--player .\--z--show {
    display: block !important
}

.\--z--player .\--z--visible {
    visibility: visible !important
}

.\--z--player .\--z--unvisible {
    visibility: hidden !important
}

.\--z--player .\--z--clearfix:after {
    content: " ";
    display: table;
    clear: both
}

.\--z--player .\--z--icon {
    color: #fff
}

.\--z--player .\--z--btn {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
    padding: 0;
    opacity: .8;
    font-size: 1em
}

.\--z--player .\--z--btn:active {
    -webkit-animation: z-control-click .5s;
    -moz-animation: z-control-click .5s;
    -o-animation: z-control-click .5s;
    animation: z-control-click .5s
}

.\--z--player .\--z--btn.\--z--active, .\--z--player .\--z--btn:hover {
    opacity: 1
}

.\--z--player.\--z--full-screen {
    width: 100% !important;
    height: 100% !important;
    background-color: #000;
    object-fit: contain;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 0;
    max-width: none;
    min-height: 0;
    max-height: none;
    transform: none;
    margin: 0;
    font-size: 13px
}

.\--z--player.\--z--custom-ios-fullscreen {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    z-index: 10000 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important
}

.\--z--player.\--z--orient-lock-fullscreen {
    transform: rotate(90deg) !important;
    transform-origin: bottom left;
    width: 100vh !important;
    height: 100vw !important;
    margin-top: -100vw !important;
    object-fit: cover !important;
    z-index: 4 !important;
    visibility: visible !important;
    top: 0 !important;
    left: 0 !important
}

.\--z--player.is-portrait {
    width: calc(100vh - 70px) !important
}

.\--z--player-backdrop {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: #000
}

.\--z--player-backdrop.\--z--show {
    display: block
}

@-webkit-keyframes z-control-click {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes z-control-click {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

@-o-keyframes z-control-click {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

@keyframes z-control-click {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

[data-no-op] {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #777;
    z-index: 100
}

[data-no-op] p[data-no-op-msg] {
    position: absolute;
    text-align: center;
    font-size: 2.5em;
    left: 0;
    right: 0;
    color: #fff;
    padding: 1em;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100%;
    overflow: auto
}

.\--z--player .\--z--control-left {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1
}

.\--z--player .\--z--control-right {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin-right: 1em
}

.\--z--player .\--z--control-right.\--z--only-right-control {
    justify-content: flex-end;
    flex: 1;
    padding: .9em 0 .4em
}

.\--z--player .\--z--controls-wrapper {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 6em;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8))
}

.\--z--player .\--z--controls-wrapper.\--z--bg-gradient, .\--z--player .\--z--controls-wrapper.\--z--full-width {
    background-image: none
}

.\--z--player .\--z--controls {
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 2em;
    width: calc(100% - 2em * 2);
    text-shadow: 0 0 2px #000;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    opacity: 1;
    padding: .5em 0
}

.\--z--player .\--z--controls.\--z--full-width {
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .5)
}

.\--z--player .\--z--controls.\--z--full-width .\--z--progress-bar .\--z--bar-bg {
    background-color: #fff
}

.\--z--player .\--z--controls.\--z--full-width.\--z--bg-transparent {
    background-color: transparent
}

.\--z--player .\--z--controls.\--z--full-width.\--z--bg-gradient {
    padding-top: 2em;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8));
    background-color: transparent
}

.\--z--player .\--z--controls.\--z--full-width.\--z--bg-gradient.\--z--to-top {
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .8))
}

.\--z--player .\--z--controls.\--z--full-width.\--z--bg-gradient .\--z--progress-bar {
    position: relative;
    bottom: -.3em
}

.\--z--player .\--z--controls .\--z--control {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0
}

.\--z--player .\--z--controls .\--z--control .\--z--icon {
    font-size: 3em
}

.\--z--player .\--z--controls .\--z--control-caption, .\--z--player .\--z--controls .\--z--control-full-screen, .\--z--player .\--z--controls .\--z--control-next, .\--z--player .\--z--controls .\--z--control-play, .\--z--player .\--z--controls .\--z--control-settings {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex
}

.\--z--player .\--z--controls .\--z--control-play {
    margin-left: 1em;
    margin-right: .2em
}

.\--z--player .\--z--controls .\--z--control-caption, .\--z--player .\--z--controls .\--z--control-full-screen, .\--z--player .\--z--controls .\--z--control-settings {
    padding: 0 .7em
}

.\--z--player .\--z--controls .\--z--control-caption .\--z--icon, .\--z--player .\--z--controls .\--z--control-full-screen .\--z--icon, .\--z--player .\--z--controls .\--z--control-settings .\--z--icon {
    font-size: 2.2em
}

.\--z--player .\--z--controls .\--z--control-full-screen {
    padding: .2em
}

.\--z--player .\--z--controls .\--z--control-full-screen .\--z--icon {
    font-size: 2.7em
}

.\--z--player .\--z--controls .\--z--control-volume .\--z--btn .\--z--icon {
    font-size: 2.5em
}

.\--z--player .\--z--controls .\--z--control-caption.\--z--active .\--z--icon {
    color: #27baf4
}

.\--z--player .\--z--controls .\--z--control-theater-mode .\--z--icon.pl-ic-theater {
    font-size: 1.6em
}

.\--z--player .\--z--controls .\--z--control-theater-mode .\--z--icon.pl-ic-theater-mini {
    font-size: 2em
}

.\--z--player .\--z--controls .\--z--progress-bar {
    position: absolute;
    bottom: 3.2em;
    width: 100%;
    height: 2em;
    cursor: pointer
}

.\--z--player .\--z--controls .\--z--progress-bar .\--z--bar {
    -webkit-transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    -moz-transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    height: .3em;
    top: .9em
}

.\--z--player .\--z--controls .\--z--progress-bar .\--z--bar .\--z--bullet {
    -webkit-transition: all .2s, width 0s;
    -moz-transition: all .2s, width 0s;
    transition: all .2s, width 0s;
    height: 0;
    width: 0;
    top: 0
}

.\--z--player .\--z--controls .\--z--progress-bar.active .\--z--bar, .\--z--player .\--z--controls .\--z--progress-bar:hover .\--z--bar {
    height: .5em;
    top: .8em
}

.\--z--player .\--z--controls .\--z--progress-bar.active .\--z--bar .\--z--bullet, .\--z--player .\--z--controls .\--z--progress-bar:hover .\--z--bar .\--z--bullet {
    height: 1.2em;
    width: 1.2em;
    top: -.4em
}

.\--z--player .\--z--controls .\--z--progress-bar .\--z--seek-time {
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
    color: #f7f7f7;
    background-color: rgba(0, 0, 0, .6);
    padding: .2em .5em;
    font-size: 1.1em;
    position: absolute;
    white-space: nowrap;
    top: -1.9em;
    left: 0
}

.\--z--player .\--z--controls .\--z--progress-bar .\--z--seek-time::before {
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top: .4em solid rgba(0, 0, 0, .6);
    content: '';
    transform: translateX(-50%);
    position: absolute;
    bottom: -.4em;
    left: 50%
}

.\--z--player .\--z--controls .\--z--bar-fill-recent {
    width: 0;
    background-color: #27baf4
}

.\--z--player .\--z--controls .\--z--bar-fill-recent .\--z--bullet {
    height: 1.4em;
    width: 1.4em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    background-color: #f7f7f7;
    box-shadow: 0 0 1px #f7f7f7;
    position: absolute;
    top: -.6em;
    right: -.6em
}

.\--z--player .\--z--controls .\--z--bar-fill-load {
    width: 0;
    background-color: #c2c2c2
}

.\--z--player .\--z--controls .\--z--bar {
    -webkit-border-radius: .15em;
    -moz-border-radius: .15em;
    border-radius: .15em;
    cursor: pointer;
    height: .3em;
    position: absolute;
    display: inline-block;
    top: 1.4em;
    left: 0
}

.\--z--player .\--z--controls .\--z--bar-bg {
    width: 100%;
    background-color: rgba(255, 255, 255, .5)
}

.\--z--player .\--z--controls .\--z--control-time {
    line-height: 4em;
    padding: 0;
    display: flex;
    align-items: center;
    margin-left: .7em;
    margin-right: .7em;
    font-size: 1.1em;
    color: #fff
}

.\--z--player .\--z--controls .\--z--control-time > span {
    font-weight: 500;
    line-height: 2em;
    color: #f7f7f7;
    display: inline-block;
    font-size: 1.2em
}

.\--z--player .\--z--controls .\--z--control-time > span:first-child {
    padding-right: .5em
}

.\--z--player .\--z--controls .\--z--control-time > span:last-child {
    padding-left: .5em
}

.\--z--player .\--z--controls .\--z--control-volume {
    margin-left: .7em;
    margin-right: .7em
}

.\--z--player .\--z--controls .\--z--control-volume.\--z--hide-animation .\--z--volume-bar {
    width: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    will-change: width, opacity, margin-left;
    -webkit-transition: width .2s, opacity .2s, margin-left .2s;
    -moz-transition: width .2s, opacity .2s, margin-left .2s;
    transition: width .2s, opacity .2s, margin-left .2s
}

.\--z--player .\--z--controls .\--z--control-volume.\--z--hide-animation:hover .\--z--volume-bar {
    width: 7em;
    opacity: 1;
    margin-left: 1.3em;
    margin-right: .8em;
    overflow: visible
}

.\--z--player .\--z--controls .\--z--control-volume .\--z--volume-icon {
    vertical-align: top
}

.\--z--player .\--z--controls .\--z--control-volume .\--z--volume-bar {
    width: 7em;
    height: 3em;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 1.3em;
    margin-right: .8em
}

@media (max-width: 768px) {
    .\--z--player .\--z--controls .\--z--control-volume .\--z--volume-bar {
        display: none
    }
}

.\--z--player .\--z--btn-settings {
    position: relative
}

.\--z--player .\--z--btn-settings .\--z--badge {
    -webkit-border-radius: .1em;
    -moz-border-radius: .1em;
    border-radius: .1em;
    position: absolute;
    right: -.5em;
    top: 0;
    display: inline-block;
    padding: 0 .2em;
    font-size: .8em;
    font-weight: 900;
    color: #fff;
    background-color: red
}

.\--z--player .\--z--zpl-settings-menu {
    position: absolute;
    bottom: 5em;
    right: 2em;
    border-radius: .2em;
    background-color: rgba(0, 0, 0, .8);
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    overflow: hidden;
    display: none;
    z-index: 1
}

.\--z--player .\--z--zpl-settings-menu .\--z--panel-scroll-wrapper {
    max-height: 15.2em;
    max-height: attr(height);
    overflow-y: auto;
    overflow-x: hidden
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel {
    position: relative;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .hd {
    color: #27baf4;
    text-transform: uppercase;
    margin-left: .3em;
    font-weight: 500
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-menu-item {
    display: table-row;
    cursor: default;
    outline: 0;
    height: 2.8em;
    white-space: nowrap
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-menu-item:not([aria-disabled=true]) {
    cursor: pointer
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-menu-item .\--z--zpl-item-content, .\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-menu-item .\--z--zpl-item-label {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1em;
    white-space: nowrap
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-menu-item:hover {
    background-color: rgba(255, 255, 255, .1)
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header {
    border-bottom: .1em solid rgba(255, 255, 255, .2);
    line-height: inherit;
    height: 2.8em;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header + .\--z--panel-scroll-wrapper {
    max-height: 18em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header .\--z--panel-title {
    font-size: 1.2em;
    color: #eee;
    float: left;
    padding: 0 1em 0 .5em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header .\--z--zpl-options {
    color: #fff;
    font-size: 1.1em;
    float: right;
    text-decoration: underline;
    padding: 0 1em 0 0;
    cursor: pointer
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header [class*=" pl-ic-"], .\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-header [class^=pl-ic-] {
    font-size: 1.8em;
    color: #fff;
    vertical-align: middle
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu {
    padding: .6em 0;
    display: table;
    width: 100%;
    color: #eee;
    box-sizing: border-box
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item .\--z--zpl-item-label {
    border-bottom: none;
    text-align: right;
    font-size: 1.2em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item .\--z--zpl-item-label [class*=" pl-ic-"], .\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item .\--z--zpl-item-label [class^=pl-ic-] {
    font-size: 1.3em;
    color: #fff
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item .\--z--zpl-item-label i {
    float: left;
    position: relative;
    top: .1em;
    visibility: hidden
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item .\--z--zpl-item-label .txt {
    padding-left: 2em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-menu .\--z--zpl-menu-item[aria-checked=true] .\--z--zpl-item-label i {
    visibility: visible
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner {
    padding: .6em 0;
    display: table;
    width: 100%;
    height: 100%;
    color: #eee;
    box-sizing: border-box
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-menu-item {
    line-height: normal
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-menu-item[aria-checked=true] .\--z--zpl-toggle-checkbox {
    background-color: red
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-menu-item[aria-checked=true] .\--z--zpl-toggle-checkbox::after {
    background-color: #fff;
    -moz-transform: translateX(1.3em);
    -o-transform: translateX(1.3em);
    -ms-transform: translateX(1.3em);
    -webkit-transform: translateX(1.3em);
    transform: translateX(1.3em)
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-label {
    color: #fff;
    font-size: 1.3em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content {
    text-align: right;
    font-size: 1.1em
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content .\--z--zpl-toggle-checkbox {
    height: 1.2em;
    width: 3em;
    float: right;
    position: relative;
    border-radius: 1.4em;
    background: rgba(255, 255, 255, .3);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 80ms cubic-bezier(.4, 0, 1, 1);
    -moz-transition: all 80ms cubic-bezier(.4, 0, 1, 1);
    transition: all 80ms cubic-bezier(.4, 0, 1, 1)
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content .\--z--zpl-toggle-checkbox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1.8em;
    width: 1.8em;
    border-radius: 50%;
    margin-top: -.3em;
    background-color: #bdbdbd;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .6);
    -webkit-transition: all 80ms cubic-bezier(.4, 0, 1, 1);
    -moz-transition: all 80ms cubic-bezier(.4, 0, 1, 1);
    transition: all 80ms cubic-bezier(.4, 0, 1, 1)
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content .\--z--zpl-has-expand {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content .\--z--zpl-has-expand [class*=" pl-ic-"], .\--z--player .\--z--zpl-settings-menu .\--z--zpl-panel .\--z--zpl-panel-inner .\--z--zpl-item-content .\--z--zpl-has-expand [class^=pl-ic-] {
    font-size: 1.3em;
    color: #fff;
    margin-left: .3em
}

.\--z--player .\--z--player-poster {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #000;
    cursor: pointer
}

.\--z--player .\--z--loading-wrapper {
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 999;
    right: auto;
    top: 50%;
    left: 50%;
    padding: 0;
    display: none
}

.\--z--player .\--z--loading-wrapper.\--z--active {
    display: block
}

.\--z--player .\--z--pie-wrapper {
    height: 6em;
    width: 6em;
    line-height: 6em;
    position: relative
}

.\--z--player .\--z--pie-wrapper .\--z--pie {
    clip: rect(0, 6em, 6em, 3em);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.\--z--player .\--z--pie-wrapper .\--z--pie .\--z--half-circle {
    height: 100%;
    width: 100%;
    border: .4em solid #fff;
    border-radius: 50%;
    clip: rect(0, 3em, 6em, 0);
    left: 0;
    position: absolute;
    top: 0
}

.\--z--player .\--z--pie-wrapper .\--z--label {
    background: 0 0;
    color: #fff;
    cursor: default;
    display: block;
    font-size: 1.6em;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5)
}

.\--z--player .\--z--pie-wrapper .\--z--shadow {
    height: 100%;
    width: 100%;
    border: .4em solid rgba(255, 255, 255, .5);
    border-radius: 50%
}

.\--z--player .\--z--pie-wrapper.\--z--progress-1 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-1 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-1 .\--z--pie .\--z--left-side {
    transform: rotate(3.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-2 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-2 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-2 .\--z--pie .\--z--left-side {
    transform: rotate(7.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-3 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-3 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-3 .\--z--pie .\--z--left-side {
    transform: rotate(10.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-4 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-4 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-4 .\--z--pie .\--z--left-side {
    transform: rotate(14.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-5 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-5 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-5 .\--z--pie .\--z--left-side {
    transform: rotate(18deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-6 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-6 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-6 .\--z--pie .\--z--left-side {
    transform: rotate(21.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-7 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-7 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-7 .\--z--pie .\--z--left-side {
    transform: rotate(25.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-8 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-8 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-8 .\--z--pie .\--z--left-side {
    transform: rotate(28.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-9 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-9 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-9 .\--z--pie .\--z--left-side {
    transform: rotate(32.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-10 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-10 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-10 .\--z--pie .\--z--left-side {
    transform: rotate(36deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-11 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-11 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-11 .\--z--pie .\--z--left-side {
    transform: rotate(39.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-12 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-12 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-12 .\--z--pie .\--z--left-side {
    transform: rotate(43.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-13 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-13 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-13 .\--z--pie .\--z--left-side {
    transform: rotate(46.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-14 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-14 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-14 .\--z--pie .\--z--left-side {
    transform: rotate(50.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-15 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-15 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-15 .\--z--pie .\--z--left-side {
    transform: rotate(54deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-16 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-16 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-16 .\--z--pie .\--z--left-side {
    transform: rotate(57.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-17 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-17 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-17 .\--z--pie .\--z--left-side {
    transform: rotate(61.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-18 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-18 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-18 .\--z--pie .\--z--left-side {
    transform: rotate(64.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-19 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-19 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-19 .\--z--pie .\--z--left-side {
    transform: rotate(68.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-20 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-20 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-20 .\--z--pie .\--z--left-side {
    transform: rotate(72deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-21 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-21 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-21 .\--z--pie .\--z--left-side {
    transform: rotate(75.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-22 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-22 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-22 .\--z--pie .\--z--left-side {
    transform: rotate(79.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-23 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-23 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-23 .\--z--pie .\--z--left-side {
    transform: rotate(82.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-24 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-24 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-24 .\--z--pie .\--z--left-side {
    transform: rotate(86.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-25 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-25 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-25 .\--z--pie .\--z--left-side {
    transform: rotate(90deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-26 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-26 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-26 .\--z--pie .\--z--left-side {
    transform: rotate(93.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-27 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-27 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-27 .\--z--pie .\--z--left-side {
    transform: rotate(97.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-28 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-28 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-28 .\--z--pie .\--z--left-side {
    transform: rotate(100.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-29 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-29 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-29 .\--z--pie .\--z--left-side {
    transform: rotate(104.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-30 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-30 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-30 .\--z--pie .\--z--left-side {
    transform: rotate(108deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-31 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-31 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-31 .\--z--pie .\--z--left-side {
    transform: rotate(111.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-32 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-32 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-32 .\--z--pie .\--z--left-side {
    transform: rotate(115.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-33 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-33 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-33 .\--z--pie .\--z--left-side {
    transform: rotate(118.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-34 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-34 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-34 .\--z--pie .\--z--left-side {
    transform: rotate(122.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-35 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-35 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-35 .\--z--pie .\--z--left-side {
    transform: rotate(126deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-36 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-36 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-36 .\--z--pie .\--z--left-side {
    transform: rotate(129.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-37 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-37 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-37 .\--z--pie .\--z--left-side {
    transform: rotate(133.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-38 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-38 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-38 .\--z--pie .\--z--left-side {
    transform: rotate(136.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-39 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-39 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-39 .\--z--pie .\--z--left-side {
    transform: rotate(140.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-40 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-40 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-40 .\--z--pie .\--z--left-side {
    transform: rotate(144deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-41 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-41 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-41 .\--z--pie .\--z--left-side {
    transform: rotate(147.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-42 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-42 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-42 .\--z--pie .\--z--left-side {
    transform: rotate(151.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-43 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-43 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-43 .\--z--pie .\--z--left-side {
    transform: rotate(154.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-44 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-44 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-44 .\--z--pie .\--z--left-side {
    transform: rotate(158.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-45 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-45 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-45 .\--z--pie .\--z--left-side {
    transform: rotate(162deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-46 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-46 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-46 .\--z--pie .\--z--left-side {
    transform: rotate(165.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-47 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-47 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-47 .\--z--pie .\--z--left-side {
    transform: rotate(169.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-48 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-48 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-48 .\--z--pie .\--z--left-side {
    transform: rotate(172.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-49 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-49 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-49 .\--z--pie .\--z--left-side {
    transform: rotate(176.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-50 .\--z--pie .\--z--right-side {
    display: none
}

.\--z--player .\--z--pie-wrapper.\--z--progress-50 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-50 .\--z--pie .\--z--left-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-51 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-51 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-51 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-51 .\--z--pie .\--z--left-side {
    transform: rotate(183.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-52 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-52 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-52 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-52 .\--z--pie .\--z--left-side {
    transform: rotate(187.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-53 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-53 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-53 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-53 .\--z--pie .\--z--left-side {
    transform: rotate(190.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-54 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-54 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-54 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-54 .\--z--pie .\--z--left-side {
    transform: rotate(194.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-55 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-55 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-55 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-55 .\--z--pie .\--z--left-side {
    transform: rotate(198deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-56 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-56 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-56 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-56 .\--z--pie .\--z--left-side {
    transform: rotate(201.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-57 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-57 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-57 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-57 .\--z--pie .\--z--left-side {
    transform: rotate(205.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-58 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-58 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-58 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-58 .\--z--pie .\--z--left-side {
    transform: rotate(208.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-59 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-59 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-59 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-59 .\--z--pie .\--z--left-side {
    transform: rotate(212.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-60 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-60 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-60 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-60 .\--z--pie .\--z--left-side {
    transform: rotate(216deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-61 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-61 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-61 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-61 .\--z--pie .\--z--left-side {
    transform: rotate(219.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-62 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-62 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-62 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-62 .\--z--pie .\--z--left-side {
    transform: rotate(223.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-63 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-63 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-63 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-63 .\--z--pie .\--z--left-side {
    transform: rotate(226.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-64 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-64 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-64 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-64 .\--z--pie .\--z--left-side {
    transform: rotate(230.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-65 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-65 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-65 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-65 .\--z--pie .\--z--left-side {
    transform: rotate(234deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-66 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-66 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-66 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-66 .\--z--pie .\--z--left-side {
    transform: rotate(237.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-67 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-67 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-67 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-67 .\--z--pie .\--z--left-side {
    transform: rotate(241.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-68 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-68 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-68 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-68 .\--z--pie .\--z--left-side {
    transform: rotate(244.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-69 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-69 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-69 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-69 .\--z--pie .\--z--left-side {
    transform: rotate(248.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-70 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-70 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-70 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-70 .\--z--pie .\--z--left-side {
    transform: rotate(252deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-71 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-71 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-71 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-71 .\--z--pie .\--z--left-side {
    transform: rotate(255.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-72 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-72 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-72 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-72 .\--z--pie .\--z--left-side {
    transform: rotate(259.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-73 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-73 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-73 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-73 .\--z--pie .\--z--left-side {
    transform: rotate(262.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-74 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-74 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-74 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-74 .\--z--pie .\--z--left-side {
    transform: rotate(266.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-75 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-75 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-75 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-75 .\--z--pie .\--z--left-side {
    transform: rotate(270deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-76 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-76 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-76 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-76 .\--z--pie .\--z--left-side {
    transform: rotate(273.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-77 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-77 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-77 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-77 .\--z--pie .\--z--left-side {
    transform: rotate(277.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-78 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-78 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-78 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-78 .\--z--pie .\--z--left-side {
    transform: rotate(280.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-79 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-79 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-79 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-79 .\--z--pie .\--z--left-side {
    transform: rotate(284.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-80 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-80 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-80 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-80 .\--z--pie .\--z--left-side {
    transform: rotate(288deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-81 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-81 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-81 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-81 .\--z--pie .\--z--left-side {
    transform: rotate(291.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-82 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-82 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-82 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-82 .\--z--pie .\--z--left-side {
    transform: rotate(295.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-83 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-83 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-83 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-83 .\--z--pie .\--z--left-side {
    transform: rotate(298.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-84 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-84 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-84 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-84 .\--z--pie .\--z--left-side {
    transform: rotate(302.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-85 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-85 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-85 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-85 .\--z--pie .\--z--left-side {
    transform: rotate(306deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-86 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-86 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-86 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-86 .\--z--pie .\--z--left-side {
    transform: rotate(309.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-87 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-87 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-87 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-87 .\--z--pie .\--z--left-side {
    transform: rotate(313.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-88 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-88 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-88 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-88 .\--z--pie .\--z--left-side {
    transform: rotate(316.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-89 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-89 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-89 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-89 .\--z--pie .\--z--left-side {
    transform: rotate(320.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-90 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-90 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-90 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-90 .\--z--pie .\--z--left-side {
    transform: rotate(324deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-91 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-91 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-91 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-91 .\--z--pie .\--z--left-side {
    transform: rotate(327.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-92 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-92 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-92 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-92 .\--z--pie .\--z--left-side {
    transform: rotate(331.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-93 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-93 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-93 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-93 .\--z--pie .\--z--left-side {
    transform: rotate(334.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-94 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-94 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-94 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-94 .\--z--pie .\--z--left-side {
    transform: rotate(338.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-95 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-95 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-95 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-95 .\--z--pie .\--z--left-side {
    transform: rotate(342deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-96 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-96 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-96 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-96 .\--z--pie .\--z--left-side {
    transform: rotate(345.6deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-97 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-97 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-97 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-97 .\--z--pie .\--z--left-side {
    transform: rotate(349.2deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-98 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-98 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-98 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-98 .\--z--pie .\--z--left-side {
    transform: rotate(352.8deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-99 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-99 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-99 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-99 .\--z--pie .\--z--left-side {
    transform: rotate(356.4deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-100 .\--z--pie {
    clip: rect(auto, auto, auto, auto)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-100 .\--z--pie .\--z--right-side {
    transform: rotate(180deg)
}

.\--z--player .\--z--pie-wrapper.\--z--progress-100 .\--z--pie .\--z--half-circle {
    border-color: #fff
}

.\--z--player .\--z--pie-wrapper.\--z--progress-100 .\--z--pie .\--z--left-side {
    transform: rotate(360deg)
}

.\--z--player .\--z--loader {
    height: 7em;
    width: 7em;
    border: .4em solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    border-top: .4em solid #fff;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

div.player-error-screen {
    color: #cccaca;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center
}

div.player-error-screen__content[data-error-screen] {
    font-size: 1.4em;
    color: #cccaca;
    margin: 0 auto
}

div.player-error-screen__title[data-error-screen] {
    font-weight: 700;
    font-size: 1.8em;
    margin-bottom: .5em
}

div.player-error-screen__message[data-error-screen] {
    margin: 0 auto
}

div.player-error-screen__code[data-error-screen] {
    font-size: 1.3em
}

div.player-error-screen__reload {
    cursor: pointer;
    width: 3em;
    margin: 1.5em auto 0
}

div.player-error-screen__reload .icon {
    color: #fff;
    font-size: 3em
}

.\--z--player .AdsPlugin {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.\--z--player .AdsPlugin iframe {
    background: 0 0 !important
}

.\--z--player .AdsPlugin .ad_runner_ui_control svg {
    width: 100%;
    height: 100%
}

.\--z--player .ad_runners_ui_ad_mark_container {
    -webkit-transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    -moz-transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    transition: height .2s, transform .2s cubic-bezier(0, 0, .2, 1), top .2s;
    position: absolute;
    height: .3em !important;
    top: .9em
}

.\--z--player .\--z--controls .\--z--progress-bar:hover .ad_runners_ui_ad_mark_container {
    height: .5em !important;
    top: .8em
}

.\--z--player .AdsPluginNonLinear {
    bottom: 0;
    left: 50%;
    margin-bottom: 5em;
    position: absolute;
    transform: translateX(-50%)
}

.\--z--player .ad_runner_ui_countdown_to_play, .\--z--player .ad_runner_ui_loading, .\--z--player .ad_runners_ui_slide_black .ad_message_text {
    top: initial;
    left: .5em;
    bottom: .5em;
    font-size: 1.2em
}

.\--z--player .ad_runner_ui_countdown_to_play.has_controls_bar, .\--z--player .ad_runner_ui_loading.has_controls_bar, .\--z--player .ad_runners_ui_slide_black .ad_message_text.has_controls_bar {
    bottom: 4em
}

.\--z--player .ad_runner_ui_skip_button {
    height: 42px
}

.\--z--player .ad_runners_ui_slide_black .ad_message_text {
    padding: .5em;
    color: #eee
}

.\--z--full-screen .ad_runner_ui_skip_button .countdown {
    max-width: 170px
}

.\--z--player .\--z--big-play-button {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 7em;
    width: 7em;
    font-size: 1em;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    border: .4em solid #fff;
    background-color: transparent;
    border-radius: 50%
}

.\--z--player .\--z--big-play-button .\--z--icon {
    font-size: 5em
}

.\--z--player .\--z--playpause-fadeout {
    height: 1.5em;
    width: 1.5em;
    -webkit-animation: zp-bezel-fadeout .5s linear 1 normal forwards;
    -moz-animation: zp-bezel-fadeout .5s linear 1 normal forwards;
    -o-animation: zp-bezel-fadeout .5s linear 1 normal forwards;
    animation: zp-bezel-fadeout .5s linear 1 normal forwards;
    margin-left: -.75em;
    margin-top: -.75em;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    padding: 0;
    opacity: 1;
    font-size: 3em;
    border-radius: 50%;
    border: 0;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    pointer-events: none;
    display: none
}

@-webkit-keyframes zp-bezel-fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(1.8)
    }
}

@-moz-keyframes zp-bezel-fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(1.8)
    }
}

@-o-keyframes zp-bezel-fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(1.8)
    }
}

@keyframes zp-bezel-fadeout {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: scale(1.8)
    }
}

.\--z--player .\--z--unmute-box {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: decrease-width-button .25s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    -moz-animation: decrease-width-button .25s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    -o-animation: decrease-width-button .25s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    animation: decrease-width-button .25s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    align-items: center;
    position: absolute;
    top: 1em;
    left: 1em;
    padding: .4em .5em .3em;
    width: 18em;
    border-radius: .2em;
    background-color: rgba(0, 0, 0, .8);
    cursor: pointer
}

.\--z--player .\--z--unmute-box span {
    -webkit-animation: decrease-opacity 0s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    -moz-animation: decrease-opacity 0s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    -o-animation: decrease-opacity 0s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    animation: decrease-opacity 0s cubic-bezier(.4, 0, 1, 1) 5.4s forwards;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    color: #fff
}

.\--z--player .\--z--unmute-box .\--z--btn-unmute {
    margin-left: 0;
    font-size: 1.6em;
    color: #fff;
    border-radius: .1em;
    padding: 0 .4em
}

.\--z--player .\--z--unmute-box .\--z--btn-unmute .\--z--icon {
    font-size: 1.4em;
    margin-right: .15em;
    color: inherit;
    position: relative;
    top: .06em
}

@-webkit-keyframes decrease-width-button {
    0% {
        width: 18em
    }

    100% {
        width: 4.5em
    }
}

@-moz-keyframes decrease-width-button {
    0% {
        width: 18em
    }

    100% {
        width: 4.5em
    }
}

@-o-keyframes decrease-width-button {
    0% {
        width: 18em
    }

    100% {
        width: 4.5em
    }
}

@keyframes decrease-width-button {
    0% {
        width: 18em
    }

    100% {
        width: 4.5em
    }
}

@-webkit-keyframes decrease-opacity {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes decrease-opacity {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes decrease-opacity {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes decrease-opacity {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.\--z--control-dvr {
    margin-left: 1.5em
}

.\--z--control-dvr span.icon-live {
    border: 4px solid red;
    border-radius: 4px
}

.\--z--control-dvr span.text {
    color: #fff;
    margin-left: 5px
}

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    overflow: clip;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper: :before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper: :before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg, .swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    -ms-touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

html {
    font-size: 62.5%
}

:root {
    --column-gap: 20px;
    --container: 730px
}

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

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

:root {
    --height-125: 105px;
    --height-145: 110px;
    --height-180: 110px;
    --height-185: 235px;
    --height-280: 280px;
    --height-315: 270px;
    --height-375: 410px;
    --height-390: 300px;
    --height-124: 96px
}

@media (min-width: 1024px) {
    :root {
        --height-125: 145px;
        --height-145: 145px;
        --height-180: 150px;
        --height-185: 150px;
        --height-280: 365px;
        --height-315: 385px;
        --height-375: 280px;
        --height-124: 124px
    }
}

@media (min-width: 1200px) {
    :root {
        --height-125: 125px;
        --height-180: 180px;
        --height-185: 185px;
        --height-280: 280px;
        --height-315: 315px;
        --height-375: 375px;
        --height-390: 390px
    }
}

*, ::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
}

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

body {
    font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--gray-f7);
    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: var(--gray-800);
    display: block;
    text-decoration: none;
    transition: all .2s ease-in-out
}

a:hover {
    color: var(--primary)
}

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: UVFHeraBig;
    src: url(../fonts/UVFHeraBig/UVFHeraBig-Black.woff2) format("woff2"), url(../fonts/UVFHeraBig/UVFHeraBig-Black.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

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

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

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

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

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon/icomoon-1.2.7.eot);
    src: url(../fonts/icomoon/icomoon-1.2.7.eot#iefix) format("embedded-opentype"), url(../fonts/icomoon/icomoon-1.2.7.ttf) format("truetype"), url(../fonts/icomoon/icomoon-1.2.7.woff) format("woff"), url(../fonts/icomoon/icomoon-1.2.7.svg#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=ic-], [class^=ic-type-] {
    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
}

.ic-info:before {
    content: "\e915"
}

.ic-arrow-left:before {
    content: "\e91d"
}

.ic-bell:before {
    content: "\e91e"
}

.ic-bookmark:before {
    content: "\e935"
}

.ic-camera:before {
    content: "\e936"
}

.ic-chevron-left:before {
    content: "\e937"
}

.ic-chevron-right:before {
    content: "\e938"
}

.ic-chevron-up:before {
    content: "\e939"
}

.ic-facebook:before {
    content: "\e93a"
}

.ic-globe:before {
    content: "\e93b"
}

.ic-heart:before {
    content: "\e93c"
}

.ic-home:before {
    content: "\e93d"
}

.ic-layers:before {
    content: "\e93e"
}

.ic-mail:before {
    content: "\e93f"
}

.ic-menu:before {
    content: "\e940"
}

.ic-message-circle:before {
    content: "\e941"
}

.ic-more-horizontal:before {
    content: "\e942"
}

.ic-phone:before {
    content: "\e943"
}

.ic-play:before {
    content: "\e944"
}

.ic-printer:before {
    content: "\e945"
}

.ic-search:before {
    content: "\e946"
}

.ic-thumbs-up:before {
    content: "\e947"
}

.ic-twitter:before {
    content: "\e948"
}

.ic-user:before {
    content: "\e949"
}

.ic-video:before {
    content: "\e94a"
}

.ic-youtube:before {
    content: "\e94b"
}

.ic-zalo:before {
    content: "\e94c"
}

.ic-chevron-down:before {
    content: "\e94d"
}

.ic-facebook-f:before {
    content: "\e94e"
}

.ic-google:before {
    content: "\e94f"
}

.ic-zalo-z:before {
    content: "\e950"
}

.ic-eye-off:before {
    content: "\e951"
}

.ic-eye:before {
    content: "\e952"
}

.ic-rss:before {
    content: "\e953"
}

.ic-clock:before {
    content: "\e954"
}

.ic-log-out:before {
    content: "\e955"
}

.ic-check-circle:before {
    content: "\e956"
}

.ic-lock:before {
    content: "\e957"
}

.ic-x:before {
    content: "\e958"
}

.ic-link:before {
    content: "\e959"
}

.ic-bookmark-solid:before {
    content: "\e95a"
}

.ic-bookmark-slash:before {
    content: "\e95b"
}

.ic-fb:before {
    content: "\e95c"
}

.ic-tiktok:before {
    content: "\e95d"
}

.ic-yt:before {
    content: "\e95e"
}

.ic-type-audio:before {
    content: "\e911"
}

.ic-type-images:before, .ic-type-img:before {
    content: "\e936"
}

.ic-type-video:before {
    content: "\e94a"
}

.ic-type-infographic, .ic-type-live, .ic-type-text {
    font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase;
    padding: 0 10px;
    border-radius: 2px;
    height: 20px;
    display: inline-flex;
    align-items: center
}

.ic-type-live {
    color: #fff !important;
    background: #900
}

.ic-type-live:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    animation: blinker 1.5s linear infinite
}

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

.ic-type-text {
    background: #fff;
    border: 1px solid #900
}

.ic-type-infographic {
    color: #fff !important;
    background: #900
}

.ic-play {
    font-size: 18px;
    width: 35px;
    height: 35px;
    background: rgba(153, 0, 0, .65);
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding-left: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1;
    cursor: pointer
}

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

.ic-tuvanpl {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(../img/logo_dh_luat.png) center center/28px 28px no-repeat
}

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

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

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

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

@media (min-width: 1200px) {
    .l-content {
        width: 850px;
        float: left
    }
}

.c-content {
    width: 730px;
    padding: 30px 20px;
    margin: auto;
    background: var(--white);
    border-radius: 3px
}

@media (min-width: 1024px) {
    .c-content {
        width: 800px
    }
}

.c-content .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: #900;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 16px
}

.sidebar {
    width: 300px;
    margin-left: auto
}

@media (max-width: 1024px) {
    .sidebar {
        display: none
    }
}

.infographic-page .article .l-content {
    width: 100%;
    float: none
}

.top-banner .banner {
    padding: 10px 0
}

.banner {
    justify-content: center;
    display: grid;
    margin-bottom: 0 !important
}

.banner:last-child .banner_show:last-child {
    margin-bottom: 0
}

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

.banner .banner_show {
    margin-bottom: 20px
}

.banner-wrap .banner {
    display: flex;
    justify-content: space-between;
    flex-direction: initial;
    min-height: 90px;
    gap: 30px
}

.banner-wrap .banner .banner_show {
    margin-bottom: 0
}

.fyi-position {
    margin-bottom: 20px
}

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

.story--gif .story__thumb {
    height: initial !important
}

.story__thumb {
    overflow: hidden;
    background-color: rgba(0, 0, 0, .1);
    position: relative
}

.story__thumb a {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%
}

.story__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story__thumb:hover a {
    opacity: .85
}

.story__heading {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700
}

.story__heading i {
    font-size: 18px;
    color: #900;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.story__meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px
}

.story__meta a {
    font-size: 12px;
    color: #00739f;
    text-transform: uppercase
}

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

.story__summary {
    font-size: 13px;
    color: var(--gray-55)
}

.story__summary * {
    display: inline
}

.story__summary a {
    color: #900
}

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

.area {
    padding: 24px 0;
    margin-bottom: 20px
}

.area--gray {
    background: var(--gray-200)
}

.area--yellow {
    background: var(--bg-yellow);
    margin-bottom: 30px
}

.area--green {
    background: linear-gradient(183deg, #307237 18.76%, #10351c 96.9%);
    padding-right: 16px;
    padding-left: 16px
}

@media (min-width: 1024px) {
    .area--green {
        padding-right: 12px;
        padding-left: 12px
    }
}

@media (min-width: 1200px) {
    .area--green {
        padding-right: 15px;
        padding-left: 15px
    }
}

.area--green .focus {
    padding-right: 0 !important;
    border-right: none !important
}

.area--green .box-heading {
    padding: 0 !important;
    border: none !important
}

.area--green .box-heading a {
    color: var(--white) !important
}

.area--green .subcate a {
    color: var(--white) !important
}

.area--green .subcate a:hover {
    opacity: .8
}

.area--green .story__heading a {
    color: var(--white) !important
}

.area--green .story__heading a:hover {
    opacity: .8
}

.area--green .story__summary {
    color: var(--white) !important
}

.area--dark {
    background: #333;
    margin-bottom: 30px
}

.zone {
    margin-bottom: 24px
}

.zone--more .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--more .box-heading * {
    font-size: 22px
}

.zone--more .box-heading a {
    color: #900
}

.wrap-heading {
    position: relative
}

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

.wrap-heading .subcate {
    display: flex;
    position: absolute;
    top: 8px;
    right: 0;
    height: 28px
}

.wrap-heading .subcate a {
    font-size: 13px;
    color: #555;
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 8px
}

.wrap-heading .subcate a:hover {
    color: #900
}

.wrap-heading .subcate .icDHL {
    position: relative;
    padding-left: 36px
}

.wrap-heading .subcate .icDHL:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(../img/logo_dh_luat.png) center center/28px 28px no-repeat;
    position: absolute;
    top: 0;
    left: 0
}

.wrap-heading .subcate span {
    color: #900
}

.dropdown-menu {
    display: none;
    position: absolute;
    background: #fff
}

.focus .story__heading i {
    font-size: inherit
}

.form-control {
    width: 100%
}

.form-group {
    margin-bottom: 1rem
}

.form-group .form-control {
    font-size: 16px;
    color: #495057;
    padding: 0 16px;
    border: 1px solid #ddd;
    box-shadow: none;
    border-radius: 4px
}

.form-group .form-control::placeholder {
    color: #495057
}

.form-group input.form-control {
    width: 100%;
    height: 50px
}

.form-group .feedback, .form-group .form-text {
    font-size: 13px;
    color: #dc3545;
    display: block
}

.recaptcha img {
    width: 300px
}

.btn-viewmore {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    background: #900;
    width: 200px;
    height: 50px;
    border-radius: 6px;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-viewmore:hover {
    background: #7d0000
}

#backtotop {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    width: 46px;
    height: 46px;
    background: rgba(153, 0, 0, .8);
    position: fixed;
    bottom: 22px;
    left: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 2
}

#backtotop.show {
    opacity: 1
}

#backtotop:hover {
    background: #900
}

.wrap-author {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.backToHome {
    background: #f8f9fa;
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 8px;
    gap: 4px;
    align-items: center;
    border: 1px solid #eee
}

@media (min-width: 1024px) {
    .plo-tv .l-content {
        width: 780px
    }
}

@media (min-width: 1440px) {
    .plo-tv .l-content {
        width: 980px
    }
}

.plo-tv .l-content > .zone--grid .box-content {
    gap: 20px;
    grid-template-columns: repeat(4, 1fr)
}

.plo-tv .l-content > .zone--grid .box-content .story .story__thumb {
    height: 96px
}

@media (min-width: 1440px) {
    .plo-tv .l-content > .zone--grid .box-content .story .story__thumb {
        height: 124px
    }
}

.plo-tv .c-content > .zone--grid .box-content .story .story__thumb {
    height: 112px
}

@media (min-width: 1440px) {
    .plo-tv .c-content > .zone--grid .box-content .story .story__thumb {
        height: 169px
    }
}

.diemthi-page a:hover {
    color: #052c65
}

.diemthi-page .breaking-news .box-heading, .diemthi-page .breaking-news .box-heading a {
    color: #052c65
}

.diemthi-page .site-header .hdr-utilities .text, .diemthi-page .site-header .hdr-utilities .text i {
    color: var(--Blue-700, #084298)
}

.diemthi-page .site-header .hdr-search .btn .ic-search {
    color: var(--Blue-700, #084298)
}

.diemthi-page .site-header .navigation {
    background: var(--Blue-700, #084298)
}

.diemthi-page .site-header .navigation .main.active .menu-btn, .diemthi-page .site-header .navigation .main.active > a, .diemthi-page .site-header .navigation .main:hover .menu-btn, .diemthi-page .site-header .navigation .main:hover > a {
    background: #052c65
}

.diemthi-page .site-footer {
    background: #e7f1ff
}

.diemthi-page .page-label {
    padding: 30px 0 60px
}

.diemthi-page .page-label a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: url(../img/text-traCuuDiemThi.png) center bottom 10px no-repeat;
    padding-bottom: 100px
}

.diemthi-page .page-label a .wrap {
    display: flex;
    padding: 30px;
    align-items: center;
    border-radius: 200px;
    width: 140px;
    height: 140px;
    background: var(--Blue-100, #e7f1ff) url(../img/diemThi-paintbrush.png) center center/80px 80px no-repeat
}

.diemthi-page .diemthi-tab {
    margin-bottom: 60px
}

.diemthi-page .diemthi-tab .tabs-links {
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.diemthi-page .diemthi-tab .tabs-links a {
    display: flex;
    width: 170px;
    height: 40px;
    padding: 0 20px;
    align-items: center;
    gap: 20px;
    background: var(--Gray-200, #e9ecef);
    font-weight: 700;
    font-size: 16px
}

.diemthi-page .diemthi-tab .tabs-links a.active {
    background: #9ec5fe;
    color: var(--Blue-700, #084298)
}

.diemthi-page .diemthi-tab .tabs-links a:nth-child(1) {
    border-radius: 8px 0 0 0;
    width: 370px
}

.diemthi-page .diemthi-tab .tabs-links a:last-child {
    border-radius: 0 8px 0 0
}

.diemthi-page .diemthi-tab .tabs-links.active {
    color: #7d0000;
    background: #fff
}

.diemthi-page .diemthi-tab .content {
    display: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}

.diemthi-page .diemthi-tab .content:before {
    content: "";
    width: 100%;
    min-height: 1200px;
    display: none;
    display: block;
    background: url(../img/diemThi-bg.jpg) center center/cover no-repeat;
    position: absolute;
    opacity: .1;
    top: 0;
    left: 0;
    z-index: 0
}

.diemthi-page .diemthi-tab .content.active {
    display: block
}

.diemthi-page .diemthi-tab .content .filter {
    padding: 40px 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 104, 255, .35);
    z-index: 10;
    position: relative
}

.diemthi-page .diemthi-tab .content .secondarySchool {
    display: flex;
    justify-content: center;
    gap: 16px
}

.diemthi-page .diemthi-tab .content .secondarySchool input {
    display: flex;
    width: 250px;
    height: 52px;
    padding: 0 16px;
    align-items: center;
    gap: 12px;
    border-radius: 4px;
    background: #fff;
    border: none;
    justify-content: right
}

.diemthi-page .diemthi-tab .content .secondarySchool input::placeholder {
    color: var(--Gray-500, #adb5bd);
    font-size: 14px;
    line-height: 150%
}

.diemthi-page .diemthi-tab .content .secondarySchool button {
    display: flex;
    width: 120px;
    height: 52px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--Blue-600, #0a58ca);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase
}

.diemthi-page .diemthi-tab .content .highSchool {
    display: flex;
    height: 52px;
    padding: 0 16px;
    align-items: center;
    gap: 12px;
    position: relative;
    border-radius: 4px;
    background: #fff;
    width: 500px;
    margin: 0 auto
}

.diemthi-page .diemthi-tab .content .highSchool .ic-user {
    color: var(--Blue-700, #084298);
    font-size: 20px
}

.diemthi-page .diemthi-tab .content .highSchool .text {
    display: flex;
    height: 50px;
    padding: 0 16px;
    align-items: center;
    color: var(--Gray-500, #adb5bd);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border: none
}

.diemthi-page .diemthi-tab .content .highSchool button {
    display: flex;
    width: 100px;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 7px;
    top: 6px;
    border-radius: 4px;
    background: var(--Blue-600, #0a58ca);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase
}

.diemthi-page .diemthi-tab .content .note {
    color: var(--Blue-700, #084298);
    text-align: center;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: normal
}

.diemthi-page .diemthi-tab .content .result {
    z-index: 10;
    position: relative;
    margin-top: 2px;
    display: flex;
    padding: 40px 0 60px 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: rgba(0, 104, 255, .35)
}

.diemthi-page .diemthi-tab .content .result .info {
    display: flex;
    align-items: center;
    gap: 24px
}

.diemthi-page .diemthi-tab .content .result .label {
    display: flex;
    width: 350px;
    padding: 20px;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid var(--Blue-100, #e7f1ff);
    background: var(--Gray-100, #f8f9fa);
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .05);
    align-items: flex-start
}

.diemthi-page .diemthi-tab .content .result .title {
    color: var(--Gray-600, #6c757d);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase
}

.diemthi-page .diemthi-tab .content .result .data {
    color: var(--Blue-600, #0a58ca);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase
}

.diemthi-page .diemthi-tab .content .result .score {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    gap: 1px
}

.diemthi-page .diemthi-tab .content .result .group {
    display: grid
}

.diemthi-page .diemthi-tab .content .result .group span {
    display: flex;
    width: 160px;
    height: 50px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase
}

.diemthi-page .diemthi-tab .content .result .subject {
    background: var(--Blue-600, #0a58ca);
    color: #fff
}

.diemthi-page .diemthi-tab .content .result .number {
    color: var(--Gray-900, #212529);
    background-color: #fff
}

.diemthi-page .enrollment-info .box-heading {
    margin-bottom: 12px
}

.diemthi-page .enrollment-info .box-heading .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--Blue-700, #084298);
    background: url(../img/diemThi-decorLine.png) center bottom no-repeat;
    padding-bottom: 20px
}

.diemthi-page .enrollment-info .box-heading .title i {
    font-size: 60px
}

.diemthi-page .enrollment-info .box-heading .title span {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.diemthi-page .enrollment-info .box-content {
    display: grid;
    grid-template-columns: 220px 670px 220px;
    grid-template-rows: auto 1fr;
    gap: 20px 30px;
    margin-bottom: 48px
}

.diemthi-page .enrollment-info .box-content .story:nth-child(1) {
    grid-column: 2/3;
    grid-row: 1/3
}

.diemthi-page .enrollment-info .box-content .story:nth-child(2) {
    grid-column: 1/2;
    grid-row: 1/2
}

.diemthi-page .enrollment-info .box-content .story:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3
}

.diemthi-page .enrollment-info .box-content .story:nth-child(4) {
    grid-column: 3/4;
    grid-row: 1/2
}

.diemthi-page .enrollment-info .box-content .story:nth-child(5) {
    grid-column: 3/4;
    grid-row: 2/3
}

.diemthi-page .enrollment-info .story .story__thumb {
    margin-bottom: 8px
}

.diemthi-page .enrollment-info .story .story__heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px
}

.diemthi-page .enrollment-info .story:nth-child(1) .story__thumb {
    margin-bottom: 12px
}

.diemthi-page .enrollment-info .story:nth-child(1) .story__heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px
}

.diemthi-page .enrollment-info .btn-viewmore {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 20px;
    background: var(--Blue-700, #084298);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase
}

:root {
    --animate: 200ms
}

[data-theme=light] {
    --primary: #990000;
    --white: #fff;
    --gray-f7: #f7f7f7;
    --gray-ee: #eee;
    --gray-e5: #e5e5e5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-55: #555;
    --gray-800: #343a40;
    --gray-900: #212529;
    --bd-color: rgba(0, 0, 0, .1);
    --bg-yellow: #FEE48C;
    --yellow-lt: #fff3cd
}

[data-theme=dark] {
    --primary: #cccc;
    --white: #333;
    --gray-f7: #222;
    --gray-ee: #333;
    --gray-e5: #333;
    --gray-200: #111;
    --gray-300: #990000;
    --gray-55: #aaa;
    --gray-800: #ccc;
    --gray-900: #aaa;
    --bd-color: rgba(255, 255, 255, .2);
    --bg-yellow: #111;
    --yellow-lt: #333
}

.switch-btn {
    background: var(--gray-f7);
    position: relative;
    justify-content: space-between
}

.switch-btn .mode {
    width: 48px;
    height: 28px;
    border: none;
    outline: 0;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    display: inline-block;
    background: #495057;
    transition: all var(--animate) ease-in-out
}

.switch-btn .mode:after, .switch-btn .mode:before {
    transition: all var(--animate) ease-in-out
}

.switch-btn .dark-mode {
    background: var(--gray-300)
}

.switch-btn .dark-mode:before {
    top: 4px;
    left: 4px;
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    border-radius: 12px;
    background: var(--primary)
}

.switch-btn .dark-mode:after {
    content: "";
    top: -2px;
    right: 2px;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    border-radius: 16px;
    background: var(--gray-300)
}

.switch-btn .light-mode:before {
    top: 4px;
    left: 24px;
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    border-radius: 12px;
    background: var(--gray-300)
}

.switch-btn .light-mode:after {
    content: "";
    top: 14px;
    right: 2px;
    width: 1px;
    height: 1px;
    display: block;
    position: absolute;
    border-radius: .5px;
    background: rgba(255, 255, 255, .1)
}

@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper, swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide, swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal > .swiper-wrapper: :before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical > .swiper-wrapper: :before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: calc(50% - 80px);
    width: 40px;
    height: 90px;
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    margin: 0 !important;
    transform: none !important;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: icomoon;
    font-size: 36px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 0;
    right: auto;
    border-radius: 0 5px 5px 0
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: "\e937"
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 0;
    left: auto;
    border-radius: 5px 0 0 5px
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: "\e938"
}

.swiper-button-lock {
    display: none
}

.site-header {
    margin-bottom: 10px
}

.hdr-content {
    padding: 0;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

@media (min-width: 1200px) {
    .hdr-content {
        height: 96px;
        justify-content: space-between
    }
}

.hdr-content .logo {
    display: block;
    width: 256px;
    height: 63px
}

@media (max-width: 1024px) {
    .hdr-content .logo {
        width: 100%
    }
}

.hdr-content .logo a {
    background: url(../images/logo.webp) center 0 no-repeat;
    display: block;
    text-indent: -999em;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.hdr-content .logo.tet2026 {
    display: block;
    width: 287px;
    height: 90px
}

@media (max-width: 1024px) {
    .hdr-content .logo.tet2026 {
        width: 100%
    }
}

.hdr-content .logo.tet2026 a {
    background: url(../images/logo.webp) center center/100% no-repeat;
    display: block;
    text-indent: -999em;
    width: 100%;
    height: 100%
}

.hdr-utilities {
    display: flex
}

.hdr-utilities .wrap-text:first-child {
    position: relative
}

.hdr-utilities .wrap-text:first-child:hover .sub-utilities {
    display: grid
}

.hdr-utilities .wrap-text:first-child .sub-utilities {
    width: var(--container);
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px
}

@media (min-width: 1200px) {
    .hdr-utilities .wrap-text:first-child .sub-utilities {
        left: calc(50% - 258px)
    }
}

.hdr-utilities .wrap-text:first-child .story__thumb {
    height: 145px;
    margin-bottom: 8px
}

@media (min-width: 1200px) {
    .hdr-utilities .wrap-text:first-child .story__thumb {
        height: 180px
    }
}

.hdr-utilities .wrap-text:not(:first-child) .sub-utilities a {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 10px 20px
}

.hdr-utilities .wrap-text:not(:first-child) .sub-utilities a:hover {
    background: var(--gray-ee)
}

.hdr-utilities .wrap-text:hover .text {
    background: var(--gray-f7);
    border-color: #900
}

.hdr-utilities .wrap-text:hover .sub-utilities {
    display: block
}

.hdr-utilities .text {
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    min-width: 110px;
    display: block;
    padding: 24px 20px;
    border-top: 1px solid transparent;
    cursor: pointer
}

.hdr-utilities .text:hover {
    background: var(--gray-f7);
    border-color: #900
}

.hdr-utilities .text i {
    font-size: 22px;
    color: #900;
    display: block;
    text-align: center;
    height: 22px;
    margin-bottom: 8px
}

.hdr-utilities .sub-utilities {
    display: none;
    z-index: 100;
    position: absolute;
    min-width: 300px;
    padding: 8px 0;
    margin-top: -1px;
    background: var(--white);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
}

.hdr-right {
    display: flex;
    align-items: center
}

@media (max-width: 1024px) {
    .hdr-right {
        width: 100%;
        justify-content: center;
        margin-bottom: 20px
    }
}

.hdr-search {
    display: flex;
    width: 100%;
    height: 46px;
    border: 1px solid var(--bd-color);
    border-radius: 30px
}

@media (min-width: 1200px) {
    .hdr-search {
        width: 220px
    }
}

.hdr-search .form-control {
    font-size: 14px;
    padding: 0 0 0 20px;
    background: var(--white);
    border: 0 none;
    border-radius: 30px
}

.hdr-search select {
    font-size: 13px;
    color: #777;
    background: var(--white);
    margin: 0 8px;
    border: 0 none;
    outline: 0
}

.hdr-search select option {
    padding: 10px
}

.hdr-search .btn {
    font-size: 22px;
    color: #900;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
    border-radius: 50%
}

.hdr-search .btn:hover {
    color: #fff;
    background: #900
}

.hdr-social {
    display: flex
}

.hdr-social a {
    font-size: 20px;
    color: #aaa;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}

.hdr-social a:hover {
    color: #900
}

.hdr-social .ic-youtube {
    font-size: 22px
}

.navigation {
    background: #900;
    margin-bottom: 10px
}

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

.navigation > ul {
    display: flex
}

.navigation .main {
    position: relative
}

@media (max-width: 1024px) {
    .navigation .main:nth-child(12), .navigation .main:nth-child(13), .navigation .main:nth-child(14) {
        display: none
    }
}

@media (max-width: 960px) {
    .navigation .main:not(.home):not(.menu) {
        display: none
    }
}

.navigation .main > a {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center
}

.navigation .main.active .menu-btn, .navigation .main.active > a, .navigation .main:hover .menu-btn, .navigation .main:hover > a {
    background: #7d0000
}

.navigation .main:hover .sub, .navigation .main:hover .sub-all {
    display: block
}

.navigation .main.home > a, .navigation .main.menu > a {
    font-size: 20px;
    width: 40px;
    justify-content: center
}

.navigation .main.home {
    margin-right: 8px
}

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

.navigation .main .menu-btn {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.navigation .sub {
    display: none;
    z-index: 2;
    position: absolute;
    min-width: 200px;
    padding: 8px 0;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
}

.navigation .sub a {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px
}

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

.navigation .sub .icDHL {
    position: relative;
    padding-left: 50px
}

.navigation .sub .icDHL:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(../img/logo_dh_luat.png) center center/28px 28px no-repeat;
    position: absolute;
    top: 6px;
    left: 16px
}

.navigation .sub-all {
    display: none;
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    padding: 24px 30px;
    background: var(--white);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
}

.navigation .sub-all .menu-wrap {
    display: flex;
    justify-content: center
}

.navigation .sub-all .rank-1 {
    width: 1200px;
    display: flex;
    flex-wrap: wrap
}

.navigation .sub-all .rank-2 {
    width: 200px;
    padding-left: 30px;
    border-left: 1px solid var(--bd-color)
}

.navigation .sub-all .rank-2 a {
    font-size: 16px;
    margin-bottom: 16px
}

.navigation .sub-all .menu-col {
    width: 200px;
    padding: 0 20px 20px 0
}

.navigation .sub-all .menu-heading {
    font-size: 16px;
    color: #900;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px
}

.navigation .sub-all .menu-item {
    font-size: 14px;
    color: var(--gray-55);
    padding: 5px 0
}

.navigation .sub-all .menu-item:hover {
    color: #900
}

.navigation .sub-all .menu-multi {
    font-weight: 700
}

.site-footer {
    padding: 24px 0 20px;
    background: #900
}

.site-footer .footer-menu {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #fff
}

.site-footer .footer-menu ul {
    /*width: 860px;*/
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.site-footer .footer-menu ul li:first-child {
    display: none !important;
}

.site-footer .footer-menu li a {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    padding: 8px 0;
    color: #fff;
}

.site-footer .fanpage {
    width: 280px
}

.site-footer .fanpage .fp {
    text-indent: -999em;
    background: url(../img/bg-fanpage.png) center 0 no-repeat;
    width: 280px;
    height: 158px
}

.site-footer .fanpage .fp:hover {
    opacity: .8
}

.site-footer .fanpage .app {
    display: flex;
    justify-content: space-between;
    margin-top: 10px
}

.site-footer .fanpage .app a {
    text-indent: -999em;
    width: 135px;
    height: 42px
}

.site-footer .fanpage .app .android {
    background: url(../img/app-androi.png?v2) center center/135px no-repeat
}

.site-footer .fanpage .app .ios {
    background: url(../img/app-ios.png?v2) center center/135px no-repeat
}

.site-footer .footer-info {
    line-height: 1.6;
    display: grid;
    grid-template-columns: 130px 1fr 1fr;
    gap: 20px
}

.site-footer .footer-info * {
    font-size: 13px;
    color: #fff;
}

.site-footer .footer-info a {
    color: #900;
    display: inline
}

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

.site-footer .footer-info .logo-footer {
    background: url(../images/logo.webp) 0 0/130px no-repeat;
    display: block;
    text-indent: -999em;
    width: 130px;
    height: 42px;
    margin-bottom: 12px
}

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

.site-footer .footer-info .contact nav {
    margin-bottom: 20px
}

.site-footer .footer-info .contact nav a {
    margin-left: 16px
}

.breadcrumb {
    color: var(--gray-800);
    display: flex;
    align-items: center;
    height: 56px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    margin-bottom: 20px
}

.breadcrumb .main * {
    font-size: 24px;
    line-height: 1.5;
    text-transform: uppercase;
    display: inline-block
}

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

@media (min-width: 1024px) {
    .breadcrumb .sub {
        max-width: 85%
    }
}

.breadcrumb .sub a {
    color: var(--gray-55);
    margin-left: 20px
}

.breadcrumb .sub a.active, .breadcrumb .sub a:hover {
    color: #900;
    text-decoration: underline
}

.breadcrumb.topic {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.breadcrumb.topic .main {
    padding: 24px 0 13px 0
}

.breadcrumb.topic .banner {
    position: relative;
    width: 100%;
    padding-top: 25.641025641%;
    overflow: hidden
}

.breadcrumb.topic .banner .banner_show {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.breadcrumb.topic .banner .banner_show img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.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
    }
}

@media (min-width: 1024px) {
    .modal-open .site-header .region-menu.fixed {
        width: calc(100% - 17px)
    }
}

.modal {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 16px;
    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
}

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

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

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

.modal .modal-header {
    min-height: 50px;
    background: #900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -16px -16px 0;
    padding: 12px
}

.modal .modal-header .modal-title {
    font-weight: 400;
    font-size: 20px;
    line-height: 34px;
    text-transform: uppercase;
    color: #fff
}

.modal .modal-footer {
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    clear: both
}

.modal .modal-footer > * {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 40px;
    font-size: 16px;
    width: 160px;
    transition: .2s;
    margin-left: 23px
}

.modal .modal-footer > :first-child {
    margin-left: 0
}

.modal .modal-footer .btn-close {
    background: #fff;
    font-weight: 400;
    color: #000;
    outline: 0
}

.modal .modal-footer .btn-close:hover {
    border: 1px solid #6c757d
}

.modal .modal-footer .btn-submit {
    background: #900;
    border: none;
    color: #fff
}

.modal .modal-footer .btn-submit:hover {
    background: #7d0000
}

.modal .modal-body {
    overflow-y: scroll;
    overflow-x: hidden;
    margin-right: -10px;
    max-height: 400px;
    padding: 0 10px 0 0
}

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

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

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

.modal .modal-body .d-flex {
    display: flex
}

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

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

.modal .modal-body .form-group label {
    font-size: 14px;
    color: #444;
    font-weight: 600
}

.modal .modal-body .form-group .form-select {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding: 0 12px;
    width: 100%;
    font-size: 14px
}

.modal .modal-body .form-group .form-select::placeholder {
    font-size: 14px
}

.modal .modal-body .text-center, .modal .modal-body .text-left, .modal .modal-body .text-right {
    font-size: 16px;
    color: #6c757d
}

.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 {
    color: #343a40;
    font-size: 18px;
    font-weight: 700
}

.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
}

.modal .modal-body .text-notice {
    display: flex;
    font-size: 13px
}

.modal .modal-body .text-notice input {
    margin-right: 8px
}

.modal .modal-body .text-notice a {
    color: #0b699e;
    margin: 0 5px
}

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

.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: var(--bd-color)
}

.modal .modal-body.scroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: var(--bd-color)
}

.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: #900;
    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: 700
}

.modal-body:has(>.w-650) {
    max-width: fit-content;
    width: fit-content
}

.w-650 {
    width: 650px !important
}

.modal-body .d-flex {
    justify-content: space-between;
    position: relative
}

.modal-body .d-flex > * {
    width: calc(50% - 24px)
}

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

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

.modal-body .d-flex .ic-eye {
    font-size: 18px;
    color: #6c757d;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-body .d-flex .ic-eye.slash:before {
    content: "\e91e"
}

.modal-body .d-flex .rank-1 {
    position: relative
}

.modal-body .d-flex .rank-1::before {
    content: "";
    position: absolute;
    border-left: 1px solid #ddd;
    width: 1px;
    height: 100%;
    right: -24px;
    top: 50%;
    transform: translateY(-50%)
}

.modal-body .rank-1 > *, .modal-body .rank-2 > * {
    margin-top: 6px
}

.modal-body .rank-1 > :first-child, .modal-body .rank-2 > :first-child {
    margin-top: 0
}

.modal-body .rank-1 p, .modal-body .rank-2 p {
    font-size: 13px
}

.modal-body .rank-1 p a, .modal-body .rank-2 p a {
    display: inline;
    color: #3d8bfd;
    text-decoration: underline;
    margin-left: 8px
}

.modal-body .social a {
    color: #fff;
    height: 46px;
    background: #979797;
    display: flex;
    align-items: center;
    border-radius: 3px
}

.modal-body .social a:not(:last-child) {
    margin-bottom: 12px
}

.modal-body .social i {
    font-size: 18px;
    width: 50px;
    height: 26px;
    margin-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, .6);
    display: flex;
    justify-content: center;
    align-items: center
}

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

.modal-body .social .zl {
    background: #008fe5
}

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

.trending {
    display: flex;
    align-items: center
}

.breaking-news {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: hidden;
    width: 78%;
    position: relative
}

.breaking-news:after {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, var(--gray-f7) 20%, rgba(255, 255, 255, 0) 100%)
}

.breaking-news .box-heading {
    font-size: 12px;
    color: #900;
    text-transform: uppercase;
    text-decoration: underline;
    margin-right: 16px
}

.breaking-news .box-heading a {
    color: #900
}

.breaking-news .box-content {
    display: flex
}

.breaking-news .box-content a {
    font-size: 13px
}

.breaking-news .box-content a + a:before {
    content: "-";
    display: inline-block;
    padding: 0 16px
}

.weather {
    font-size: 13px;
    display: flex;
    align-items: center;
    margin-left: auto
}

.weather img {
    width: 24px;
    height: 24px;
    margin-left: 6px
}

.weather .location {
    font-weight: 700;
    margin-right: 6px
}

.weather .temp:after {
    content: "/";
    display: inline-block;
    padding: 0 6px
}

.weather .dropdown {
    line-height: 18px;
    position: relative
}

.weather .dropdown.active .dropdown-menu {
    display: block;
    width: 250px;
    right: 0
}

.weather .weather-btn {
    font-size: 20px;
    color: #777
}

.weather .dropdown-menu {
    margin-top: 10px;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
}

.weather-list {
    max-height: 300px;
    overflow: auto
}

.weather-list::-webkit-scrollbar {
    width: 4px;
    border-radius: 6px
}

.weather-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05)
}

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

.weather-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px
}

.weather-list li:not(:last-child) {
    border-bottom: 1px solid #e9ecef
}

.abf-homepage {
    margin-bottom: 30px
}

@media (min-width: 1200px) {
    .abf-homepage {
        width: 850px;
        float: left
    }
}

.highlight {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.highlight .focus {
    width: 480px
}

@media (min-width: 1024px) {
    .highlight .focus {
        width: 690px
    }
}

@media (min-width: 1200px) {
    .highlight .focus {
        width: 560px
    }
}

.highlight .focus .story__thumb {
    height: var(--height-315);
    margin-bottom: 12px
}

.highlight .focus .story__heading {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 10px
}

.highlight .feature {
    width: 230px
}

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

.highlight .feature .story__thumb {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.highlight .feature .story__heading {
    font-size: 14px
}

@media (min-width: 1024px) {
    .highlight .feature {
        width: 270px
    }
}

.highlight .feature .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    font-size: 16px;
    padding: 8px 0;
    margin-bottom: 16px
}

.highlight .feature .box-heading * {
    font-size: 22px
}

.highlight .feature .box-heading a {
    color: #900
}

.highlight .feature .box-heading * {
    font-size: 16px
}

.highlight .feature .story__heading {
    display: flex
}

.swiper .story__thumb {
    height: 180px;
    margin-bottom: 8px
}

.zone--slide .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--slide .box-heading * {
    font-size: 22px
}

.zone--slide .box-heading a {
    color: #900
}

.zone--slide.has-bg {
    padding: 16px 20px 24px;
    background: var(--gray-200);
    overflow: hidden;
    position: relative;
    border-top: 2px solid #900;
    border-radius: 3px
}

.zone--slide.has-bg .swiper-button-next, .zone--slide.has-bg .swiper-button-prev {
    top: calc(50% - 50px)
}

/*.zone--slide.has-bg:after {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, var(--gray-200) 20%, rgba(255, 255, 255, 0) 100%);
    z-index: 1
}*/

.zone--slide.has-bg .box-heading {
    padding: 0;
    margin-bottom: 12px;
    border: 0 none
}

.zone--media {
    margin-bottom: 10px
}

.zone--media .logo-tv {
    display: inline-block;
    width: 256px;
    height: 63px
}

.zone--media .logo-tv a {
    background: url(../images/logo.webp) center center/100% no-repeat;
    display: block;
    text-indent: -999em;
    width: 100%;
    height: 100%
}

.zone--media .wrap-heading {
    margin-bottom: 16px
}

.zone--media .wrap-heading .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--media .wrap-heading .box-heading * {
    font-size: 22px
}

.zone--media .wrap-heading .box-heading a {
    color: #900
}

.zone--media .wrap-heading .subcate a {
    font-size: 14px;
    margin-left: 10px
}

.zone--media .wrap-heading .subcate a + a:before {
    content: "|";
    display: inline-block;
    color: rgba(0, 0, 0, .2);
    margin-right: 0
}

@media (min-width: 1024px) {
    .zone--media .box-content {
        display: flex;
        justify-content: space-between
    }
}

@media (min-width: 1200px) {
    .zone--media .focus {
        padding-right: 20px;
        border-right: 1px solid var(--bd-color)
    }
}

@media (min-width: 1024px) {
    .zone--media .focus .story {
        width: 500px
    }
}

@media (min-width: 1200px) {
    .zone--media .focus .story {
        width: 670px
    }
}

.zone--media .focus .story__thumb {
    height: var(--height-375);
    margin-bottom: 12px
}

.zone--media .focus .ic-play {
    color: #fff;
    font-size: 40px;
    width: 80px;
    height: 80px;
    left: 24px;
    bottom: 24px
}

.zone--media .focus .story__heading {
    font-size: 22px;
    line-height: 1.3
}

.zone--media .feature {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    padding-top: 20px
}

@media (min-width: 1024px) {
    .zone--media .feature {
        width: 460px;
        grid-template-columns: repeat(2, 1fr);
        padding: 0
    }
}

.zone--media .feature .story__thumb {
    height: var(--height-145);
    margin-bottom: 8px
}

.zone--media .feature .story__thumb span {
    color: #fff
}

.area--yellow .wrap-heading .box-heading {
    padding: 0;
    border: 0 none
}

.area--yellow .wrap-heading .subcate-child {
    top: 6px
}

.area--yellow .zone--media .story__heading {
    margin-bottom: 6px
}

.area--green .feature {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    padding-top: 20px
}

@media (min-width: 1024px) {
    .area--green .feature {
        width: 448px;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 16px 8px
    }
}

@media (min-width: 1200px) {
    .area--green .feature {
        width: 455px;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 15px
    }
}

.area--green .feature .story__thumb {
    height: var(--height-145);
    margin-bottom: 8px
}

.area--gray .zone--media .feature {
    gap: 16px
}

@media (min-width: 1024px) {
    .area--gray .zone--media .feature {
        gap: 16px 20px
    }
}

.area--gray .zone--media .feature .story__thumb {
    height: var(--height-124)
}

.area--dark .wrap-heading .box-heading {
    color: #fff;
    padding: 0;
    border: 0 none
}

.area--dark .wrap-heading .subcate {
    top: 6px
}

.area--dark .wrap-heading .subcate a {
    color: #ddd
}

.area--dark .wrap-heading .subcate a span {
    font-weight: 700
}

.area--dark .focus {
    border-color: rgba(255, 255, 255, .2)
}

.area--dark .focus .story .story__thumb span {
    color: #fff
}

.area--dark .story__heading {
    margin-bottom: 6px
}

.area--dark .story__heading a {
    color: #ddd
}

.area--dark .story__heading a:hover {
    color: #900
}

.area--dark .story__summary {
    color: #888
}

.area--dark .feature .story .story__thumb span {
    color: #fff
}

.zone--primary .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--primary .box-heading * {
    font-size: 22px
}

.zone--primary .box-heading a {
    color: #900
}

@media (max-width: 1024px) {
    .zone--primary .wrap-heading .subcate {
        display: none
    }
}

.zone--primary .box-content {
    display: grid;
    grid-template-columns: [content] 2fr [sidebar] 1fr;
    gap: 20px
}

@media (min-width: 1200px) {
    .zone--primary .focus {
        width: 420px
    }
}

.zone--primary .focus .story__thumb {
    height: var(--height-280);
    margin-bottom: 12px
}

.zone--primary .focus .story__heading {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 6px
}

.zone--primary .feature {
    width: 300px
}

@media (min-width: 1024px) {
    .zone--primary .feature {
        width: 410px
    }
}

.zone--primary .feature .story + .story {
    margin-top: 20px
}

.zone--primary .feature .story__thumb {
    width: 150px;
    height: var(--height-125);
    float: left;
    margin-right: 16px
}

@media (min-width: 1024px) {
    .zone--primary .feature .story__thumb {
        width: 190px
    }
}

.zone--primary .feature .story__heading {
    display: flex
}

.zone--popular {
    background: #333;
    overflow: hidden;
    border-radius: 3px;
    counter-reset: my-sec-counter
}

.zone--popular .nav-tab {
    display: flex;
    border-bottom: 2px solid #900
}

.zone--popular .tablinks {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    padding: 0 20px;
    height: 40px
}

.zone--popular .tablinks.active {
    background: #900
}

.zone--popular .tabcontent {
    display: none;
    max-height: 520px;
    overflow: auto
}

.zone--popular .tabcontent::-webkit-scrollbar {
    width: 4px;
    border-radius: 6px
}

.zone--popular .tabcontent::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .1)
}

.zone--popular .tabcontent::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
    border-radius: 10px
}

.zone--popular .tabcontent.active {
    display: block
}

.zone--popular .story {
    padding: 20px 20px 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.zone--popular .story__thumb {
    width: 130px;
    height: 85px;
    float: left;
    margin-right: 16px
}

.zone--popular .story__heading {
    font-size: 14px;
    font-weight: 400;
    display: flex
}

.zone--popular .story__heading a {
    color: #fff;
    position: relative;
    padding-left: 80px
}

.zone--popular .story__heading a:before {
    font-family: UVFHeraBig;
    font-size: 44px;
    color: rgba(255, 255, 255, .1);
    text-align: center;
    width: 40px;
    counter-increment: my-sec-counter;
    content: counter(my-sec-counter);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%)
}

.zone--popular .story__heading a:hover {
    color: rgba(255, 255, 255, .6)
}

.zone--sm-thumb {
    background: var(--white);
    overflow: hidden;
    border-radius: 3px
}

.zone--sm-thumb .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    font-size: 16px;
    padding: 9px 20px 7px;
    margin-bottom: 16px
}

.zone--sm-thumb .box-heading * {
    font-size: 22px
}

.zone--sm-thumb .box-heading a {
    color: #900
}

.zone--sm-thumb .box-heading a {
    font-size: 16px
}

.zone--sm-thumb .box-content {
    padding: 0 20px
}

.zone--sm-thumb .story {
    display: flex;
    margin-bottom: 20px
}

.zone--sm-thumb .story__thumb {
    width: 80px;
    min-width: 80px;
    height: 80px;
    margin-right: 16px
}

.zone--sm-thumb .story__heading {
    font-size: 14px;
    font-weight: 400
}

.zone--secondary .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--secondary .box-heading * {
    font-size: 22px
}

.zone--secondary .box-heading a {
    color: #900
}

@media (min-width: 1024px) {
    .zone--secondary .box-content {
        display: grid;
        grid-template-columns: [content] 2fr [sidebar] 1fr;
        gap: 20px
    }
}

.zone--secondary .focus {
    width: 450px
}

@media (min-width: 1200px) {
    .zone--secondary .focus {
        width: 590px
    }
}

.zone--secondary .focus .story__thumb {
    height: var(--height-390);
    margin-bottom: 12px
}

.zone--secondary .focus .story__heading {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 6px
}

.zone--secondary .feature {
    width: 220px
}

@media (max-width: 768px) {
    .zone--secondary .feature {
        display: none
    }
}

@media (min-width: 1200px) {
    .zone--secondary .feature {
        width: 270px
    }
}

.zone--secondary .feature .story + .story {
    margin-top: 20px
}

.zone--secondary .feature .story__thumb {
    height: 145px;
    margin-bottom: 8px
}

@media (min-width: 1200px) {
    .zone--secondary .feature .story__thumb {
        height: 180px
    }
}

.zone--tertiary {
    width: 270px
}

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

.zone--tertiary .story__thumb {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.zone--tertiary .story__heading {
    font-size: 14px
}

.zone--tertiary .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--tertiary .box-heading * {
    font-size: 22px
}

.zone--tertiary .box-heading a {
    color: #900
}

.zone--tertiary .story__heading {
    display: flex
}

.zone--tertiary .story--focus {
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid #dee2e6
}

.zone--tertiary .story--focus .story__thumb {
    width: 100%;
    height: 180px;
    margin: 0 0 10px
}

.zone--tertiary .story--focus .story__heading {
    font-size: 16px;
    display: block
}

.zone--emagazine {
    padding: 16px 20px 24px;
    background: #333;
    overflow: hidden;
    position: relative;
    border-top: 3px solid #900;
    border-radius: 3px
}

.zone--emagazine:after {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, #333 20%, rgba(255, 255, 255, 0) 100%);
    z-index: 1
}

.zone--emagazine a {
    color: rgba(255, 255, 255, .9)
}

.zone--emagazine .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    padding: 0;
    margin-bottom: 12px;
    border: 0 none
}

.zone--emagazine .box-heading * {
    font-size: 22px
}

.zone--emagazine .box-heading a {
    color: #900
}

.zone--emagazine .story {
    width: 270px;
    margin-right: 20px
}

.zone--emagazine .story__thumb {
    height: var(--height-180)
}

.zone--emagazine .story__heading {
    font-weight: 400
}

.zone--emagazine .story__heading a:hover {
    color: rgba(255, 255, 255, .6)
}

.wrap-zone {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px
}

.wrap-zone.has-border {
    border-bottom: 1px solid var(--bd-color);
    margin-bottom: 24px
}

.zone--cate .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--cate .box-heading * {
    font-size: 22px
}

.zone--cate .box-heading a {
    color: #900
}

@media (max-width: 1024px) {
    .zone--cate .wrap-heading .subcate {
        display: none
    }
}

@media (min-width: 1024px) {
    .zone--cate .box-content {
        display: grid;
        grid-template-columns: [content] 1fr [sidebar] 1fr;
        gap: 20px
    }
}

@media (max-width: 768px) {
    .zone--cate .focus {
        margin-bottom: 20px
    }
}

@media (min-width: 1200px) {
    .zone--cate .focus {
        width: 280px
    }
}

.zone--cate .focus .story__thumb {
    height: var(--height-185);
    margin-bottom: 8px
}

.zone--cate .focus .story__heading {
    margin-bottom: 6px
}

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

.zone--cate .feature .story__thumb {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.zone--cate .feature .story__heading {
    font-size: 14px
}

.zone--cate .feature .story__heading {
    display: flex
}

.zone--event {
    padding: 20px;
    background: #333;
    border-radius: 3px
}

.zone--event .wrap-heading {
    display: flex;
    margin-bottom: 20px
}

.zone--event .wrap-heading a {
    font-size: 20px;
    color: #fff
}

.zone--event .wrap-heading a:hover {
    color: rgba(255, 255, 255, .6)
}

.zone--event .wrap-heading .label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    background: #900;
    margin-right: 16px
}

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

.zone--event .story__thumb {
    height: var(--height-125);
    margin-bottom: 8px
}

.zone--event .story__heading {
    font-weight: 400
}

.zone--event .story__heading a {
    color: #ddd
}

.zone--event .story__heading a:hover {
    color: rgba(255, 255, 255, .6)
}

.timeline {
    margin-bottom: 30px
}

.timeline > .story {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--bd-color)
}

.timeline > .story:first-child {
    padding-top: 24px
}

.timeline > .story .story__heading {
    font-size: 20px;
    margin-bottom: 8px
}

.timeline .story__thumb {
    width: 270px;
    height: 180px;
    float: left;
    margin-right: 20px
}

.timeline .zone--slide {
    margin-top: 20px
}

.timeline .zone--slide .swiper-button-next, .timeline .zone--slide .swiper-button-prev {
    top: calc(50% - 30px)
}

.timeline.no-border > .story:first-child {
    padding: 0;
    border: 0 none
}

.zone .timeline > .story:first-child {
    padding: 0;
    border: 0 none
}

.zone--dont-miss {
    clear: both
}

.zone--dont-miss .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.zone--dont-miss .box-heading * {
    font-size: 22px
}

.zone--dont-miss .box-heading a {
    color: #900
}

@media (min-width: 1024px) {
    .zone--dont-miss .box-content {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 20px
    }
}

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

@media (max-width: 768px) {
    .zone--dont-miss .focus {
        margin-bottom: 20px
    }
}

.zone--dont-miss .focus .story__thumb {
    min-height: 155px;
    margin-bottom: 8px
}

.zone--dont-miss .focus .story__heading {
    margin-bottom: 6px
}

.zone--dont-miss .feature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px
}

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

.zone--dont-miss .feature .story__thumb {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.zone--dont-miss .feature .story__heading {
    font-size: 14px
}

.zone--dont-miss .feature .story__heading {
    display: flex
}

.zone--grid .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px
}

.zone--grid .box-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--column-gap)
}

.zone--grid .story__thumb {
    height: var(--height-180);
    margin-bottom: 10px
}

.verticle-menu {
    width: 36px;
    height: 0;
    margin-left: -66px;
    position: relative
}

@media (max-width: 1200px) {
    .verticle-menu {
        display: none
    }
}

.verticle-menu .social {
    display: flex;
    flex-direction: column
}

.verticle-menu .social-item {
    font-size: 18px;
    color: #fff;
    width: 36px;
    height: 36px;
    background: #bbb;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.verticle-menu .social-item.fb {
    background: #3b5998
}

.verticle-menu .social-item.yt {
    background: #c00
}

.verticle-menu .social-item.bk {
    font-size: 20px;
    color: #555;
    background: #eee
}

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

.article .breadcrumb {
    height: auto;
    border: 0 none;
    padding-top: 0;
    margin: 0;
    margin-bottom: 20px;
    background: #eee;
    padding: 4px 20px;
}

.article .breadcrumb .main {
    font-size: 13px;
    color: var(--gray-800);
    font-weight: 400;
    text-transform: uppercase
}

.article .breadcrumb .main a {
    font-size: 13px;
    color: var(--gray-800)
}

.article .breadcrumb .main a:hover {
    color: #900
}

.article .breadcrumb .main:not(:last-child) a:after {
    font-family: icomoon;
    font-size: 14px;
    color: #aaa;
    content: "\e905";
    display: inline-block;
    padding: 0 6px
}

.article .l-content > * {
    margin-bottom: 20px
}

.article__avatar {
    max-width: calc(100vw - 17px);
    width: 100vw;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    right: auto
}

.article__avatar img {
    max-width: 100%;
    width: auto;
    display: flex;
    margin: 0 auto
}

.article__avatar figcaption {
    text-align: center;
    line-height: 1.5;
    color: var(--gray-55);
    font-style: italic;
    text-align: center;
    padding: 10px 0 !important
}

.article__header {
    margin-bottom: 20px
}

.article__title {
    font-size: 40px;
    line-height: 1.2;
    color: var(--gray-900);
    font-weight: 700;
    margin-bottom: 16px
}

.article__sub-title {
    font-size: 13px;
    color: #900;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px
}

.article__sapo {
    font-size: 20px;
    font-weight: 700
}

.article__sapo * {
    display: inline
}

.article__sapo a {
    color: #00739f
}

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

.article__meta {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--gray-ee);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 3px
}

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

@media (min-width: 1200px) {
    .article__meta {
        height: 50px;
        padding: 0 20px
    }
}

.article__meta > * {
    color: #888;
    display: flex;
    align-items: center
}

.article__meta .social {
    margin-right: 4px
}

.article__meta .social-item {
    font-size: 24px;
    color: #555;
    width: 36px;
    height: 36px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 6px
}

.article__meta .social-item:hover {
    opacity: .85
}

.article__meta .social-item .ic-fb {
    color: #1877f2
}

.article__meta .social-item .ic-yt {
    color: red
}

.article__meta .social-item .ic-tiktok {
    color: #292929
}

.article__meta .social-item .ic-bookmark-solid {
    font-size: 16px
}

.article__meta .social-item.active .ic-bookmark-solid:before {
    content: "\e928"
}

@media (max-width: 1024px) {
    .article__meta .meta {
        width: 100%;
        padding-top: 12px;
        margin-top: 12px;
        border-top: 1px solid var(--bd-color)
    }
}

@media (min-width: 1200px) {
    .article__meta .meta {
        margin-left: auto;
        max-width: 580px
    }
}

.article__meta .author {
    color: var(--gray-55);
    font-weight: 700;
    text-transform: uppercase;
    display: flex
}

.article__meta .author:before {
    content: "|";
    color: #aaa;
    padding: 0 10px
}

.article__meta .author a {
    margin: 0 3px
}

.article__meta .author .raty {
    display: flex;
    padding-left: 6px
}

.article__meta .author .raty img {
    width: 16px;
    height: 16px
}

.article__meta .author-expand {
    position: relative;
    line-height: 18px
}

.article__meta .author-expand.active .dropdown-menu {
    display: block
}

.article__meta .author-expand.active .expand-btn {
    color: #900
}

.article__meta .author-expand .btn-expand {
    font-size: 18px;
    color: #888
}

.article__meta .author-expand .dropdown-menu {
    width: 250px;
    right: -20px;
    top: 100%;
    margin-top: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    z-index: 1
}

.article__meta .author-expand .dropdown-menu:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -8px;
    right: 24px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff
}

.article__meta .author-list {
    max-height: 300px;
    overflow: auto
}

.article__meta .author-list::-webkit-scrollbar {
    width: 4px;
    border-radius: 6px
}

.article__meta .author-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05)
}

.article__meta .author-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .1);
    border-radius: 10px
}

.article__meta .author-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 20px
}

.article__meta .author-list li:not(:last-child) {
    border-bottom: 1px solid #e9ecef
}

.article__meta .author-list li .raty {
    display: flex;
    padding: 0
}

.article__meta .google-news {
    margin-left: 5px
}

.article__meta .google-news img {
    width: 125px
}

.article__author {
    font-weight: 700;
    text-align: right
}

.article__source {
    display: flex;
    flex-flow: wrap row;
    justify-content: flex-end
}

.article__source .wrap-source {
    display: flex;
    text-align: right
}

.article__source .wrap-source * {
    font-size: 16px;
    line-height: 1.5;
    display: block
}

.article__source .wrap-source .name {
    color: var(--gray-800);
    min-width: 65px;
    margin-right: 4px
}

.article__source .wrap-source .text {
    overflow-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.article .layout-image-2 figure, .article .layout-image-3 figure, .article .layout-image-3-horizontal figure, .article .layout-image-4 figure, .article .layout-image-horizontal figure {
    width: fit-content
}

.article .layout-image-2 figure figcaption, .article .layout-image-3 figure figcaption, .article .layout-image-3-horizontal figure figcaption, .article .layout-image-4 figure figcaption, .article .layout-image-horizontal figure figcaption {
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, .2)
}

.article .layout-image-2 figcaption, .article .layout-image-3 figcaption, .article .layout-image-3-horizontal figcaption, .article .layout-image-4 figcaption, .article .layout-image-horizontal figcaption {
    text-align: center;
    font-size: 16px !important;
    line-height: 1.5;
    color: var(--gray-55);
    font-style: italic;
    text-align: center;
    padding: 10px 0 !important
}

.article .layout-image-2 figcaption *, .article .layout-image-3 figcaption *, .article .layout-image-3-horizontal figcaption *, .article .layout-image-4 figcaption *, .article .layout-image-horizontal figcaption * {
    font-size: 16px;
    line-height: 1.5
}

.article .layout-image-2 figcaption p, .article .layout-image-3 figcaption p, .article .layout-image-3-horizontal figcaption p, .article .layout-image-4 figcaption p, .article .layout-image-horizontal figcaption p {
    margin: 0 auto 8px
}

.article .layout-image-2 figcaption p:last-child, .article .layout-image-3 figcaption p:last-child, .article .layout-image-3-horizontal figcaption p:last-child, .article .layout-image-4 figcaption p:last-child, .article .layout-image-horizontal figcaption p:last-child {
    margin-bottom: 0
}

.group-fyi-wrap {
    display: flex;
    flex-flow: column wrap;
    gap: 10px
}

.story-fyi {
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 3px solid #a50a02;
    display: block;
    position: relative;
    padding: 8px
}

.story-fyi .thumb {
    width: 100px;
    height: 60px;
    margin-right: 10px;
    float: left
}

.story-fyi .text {
    color: #3b5998;
    font-weight: 700;
    font-size: 14px;
    display: flex
}

.story-fyi span {
    display: flex;
    font-size: 11px;
    color: #adb5bd;
    margin-top: 2px
}

.article__footer {
    margin-bottom: 30px !important
}

.article__tag {
    padding: 10px 0;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    border-top: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color)
}

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

.article__tag * {
    font-size: 13px
}

.article__tag .box-heading {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 82px;
    width: 82px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #900;
    padding-top: 3px;
    margin: 0 16px 0 0
}

.article__tag .box-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row wrap
}

.article__tag .box-content a {
    color: var(--gray-55);
    text-decoration-line: underline;
    margin: 0 16px 6px 0
}

.article__tag .box-content a:hover {
    color: #900
}

@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: audio-icomoon;
    src: url(../fonts/audio/audio-icomoon.eot);
    src: url(../fonts/audio/audio-icomoon.eot#iefix) format("embedded-opentype"), url(../fonts/audio/audio-icomoon.ttf) format("truetype"), url(../fonts/audio/audio-icomoon.woff) format("woff"), url(../fonts/audio/audio-icomoon.svg#audio-icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=ic-audio-] {
    font-family: audio-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: "\1f550"
}

.ic-audio-microphone:before {
    content: "\1f551"
}

.ic-audio-volume:before {
    content: "\1f552"
}

.ic-audio-volume-slash:before {
    content: "\1f553"
}

.ic-audio-pause:before {
    content: "\1f554";
    font-size: 13px
}

.ic-audio-play:before {
    content: "\1f555";
    font-size: 13px;
    margin-left: 3px
}

.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 .volume-slider {
    width: 0;
    display: flex;
    position: relative;
    overflow: hidden;
    margin-right: 0;
    cursor: pointer;
    transition: all .15s linear;
    display: none
}

@media (min-width: 768px) {
    .audio .volume-slider {
        display: block
    }
}

.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;
    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
}

.article__comment {
    margin-bottom: 20px
}

.article__comment .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color)
}

.article__comment .box-heading * {
    font-size: 22px
}

.article__comment .box-heading a {
    color: #900
}

.article__comment textarea {
    font-size: 16px;
    color: var(--gray-55);
    display: block;
    width: 100%;
    height: 100px;
    padding: 16px;
    margin-bottom: 10px;
    background: var(--white);
    border-color: var(--bd-color);
    border-radius: 3px
}

.article__comment textarea::placeholder {
    color: var(--gray-55)
}

.article__comment .note-btn {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.article__comment .btn-submit {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    display: block;
    width: 120px;
    height: 35px;
    background: #900;
    float: right;
    border-radius: 3px
}

.article__comment .btn-submit:hover {
    background: #7d0000
}

.article__comment .wrap-login {
    display: flex;
    align-items: center
}

.article__comment .wrap-login span {
    color: #6c757d;
    margin-right: 10px
}

.article__comment .wrap-login button {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3px;
    border-radius: 50%
}

.article__comment .wrap-login button i {
    font-size: 12px;
    color: #fff
}

.article__comment .wrap-login button:last-of-type {
    margin-right: 10px
}

.article__comment .wrap-login .fb {
    background: #3b5998
}

.article__comment .wrap-login .fb i {
    font-size: 14px
}

.article__comment .wrap-login .google {
    background: #cc4034
}

.article__comment .wrap-login .zalo {
    background: #03a5fa
}

.article__comment .wrap-login .mail {
    background: #0ba5be
}

.article__comment .wrap-login .mail i {
    font-size: 16px
}

.article__comment .wrap-login .register-link {
    color: #00739f
}

.article__comment .logged-in {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center
}

.article__comment .logged-in .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e5e5 url(../img/no-ava.png) 0 0/24px no-repeat;
    position: relative;
    margin: 0 8px 0 6px
}

.article__comment .logged-in .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0
}

.article__comment .logged-in .name {
    font-size: 12px;
    color: var(--gray-55);
    text-transform: uppercase
}

.article__comment .filter-comment {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--gray-ee);
    margin-top: 30px;
    position: relative
}

.article__comment .filter-comment .total-comment {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-800)
}

.article__comment .filter-comment .wrap-select {
    position: relative
}

.article__comment .filter-comment .wrap-select label {
    color: var(--gray-800);
    text-transform: uppercase;
    margin: 0
}

.article__comment .filter-comment .wrap-select select {
    color: var(--gray-55);
    outline: 0;
    padding: 0 10px;
    cursor: pointer;
    width: 200px;
    height: 35px;
    background: var(--white);
    position: relative;
    border-color: var(--bd-color)
}

.article__comment .list-comment {
    margin-top: 24px
}

.article__comment .list-comment .avatar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 15px;
    background: #e5e5e5 url(../img/no-ava.png) 0 0/30px no-repeat;
    margin-top: -6px;
    position: relative
}

.article__comment .list-comment .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0
}

.article__comment .list-comment .content {
    color: var(--gray-55);
    margin-left: 16px;
    width: 100%
}

.article__comment .list-comment .content .name {
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 8px
}

.article__comment .list-comment .content .text {
    margin-bottom: 8px
}

.article__comment .list-comment .content .action {
    display: flex;
    flex-wrap: wrap
}

.article__comment .list-comment .content .action a {
    font-size: 13px;
    color: #888
}

.article__comment .list-comment .content .action .like {
    margin-right: 16px
}

.article__comment .list-comment .content .action .like:before {
    font-family: icomoon;
    content: "\e914";
    font-size: 14px;
    margin-right: 3px
}

.article__comment .list-comment .content .action .like .count {
    margin-right: 3px
}

.article__comment .list-comment .content .action .like.liked {
    color: #900
}

.article__comment .list-comment .content .wrap-reply {
    width: 100%;
    margin-top: 8px
}

.article__comment .list-comment .content .wrap-reply .note-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.2rem
}

.article__comment .wrap-outer {
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--bd-color)
}

.article__comment .rank-1 {
    display: flex;
    border-top: 1px solid var(--bd-color);
    padding-top: 28px;
    margin-top: 16px
}

.article__comment .rank-1:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0
}

.article__comment .rank-2 {
    margin-left: 50px;
    display: flex;
    border-top: 1px solid var(--bd-color);
    padding-top: 20px;
    margin-top: 16px
}

.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 {
    font-size: 13px;
    color: #900;
    font-weight: 700;
    text-transform: uppercase;
    margin: 30px auto 0;
    display: block
}

.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
}

.emagazine-logo {
    display: block;
    width: 186px;
    height: 35px
}

.emagazine-logo a {
    background: url(../img/emagazine-logo.png) center 0 no-repeat;
    display: block;
    text-indent: -999em;
    width: 100%;
    height: 100%
}

.longform-page .site-header {
    margin: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.longform-page .site-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000
}

.longform-page .hdr-content {
    height: 60px
}

.longform-page .hdr-content .logo {
    width: 120px;
    height: 38px
}

.longform-page .hdr-content .logo a {
    background-size: 120px
}

.longform-page .breadcrumb {
    justify-content: center
}

.longform-page .l-content {
    width: 100%
}

@media (min-width: 1024px) {
    .longform-page .article {
        width: 760px;
        margin: auto
    }
}

.longform-page .article__header {
    text-align: center;
    margin-top: 6px
}

.longform-page .article__meta {
    height: inherit;
    justify-content: center;
    background: 0 0;
    margin-top: 16px
}

.longform-page .article__meta > * {
    justify-content: center
}

.longform-page .article__meta .meta {
    width: 100%;
    max-width: inherit;
    padding-top: 12px;
    margin: 12px 0 0;
    border-top: 1px solid var(--bd-color)
}

.longform-page .article > figure, .longform-page .article > table.picture, .longform-page .article > table.video {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: max-content;
    margin: 0 0 20px;
    max-width: 822px
}

.longform-page .article > figure.full-width, .longform-page .article > table.picture.full-width, .longform-page .article > table.video.full-width {
    max-width: calc(100vw - 17px)
}

.longform-page .article > figure.max-width, .longform-page .article > table.picture.max-width, .longform-page .article > table.video.max-width {
    max-width: 1600px
}

@media (max-width: 1600px) {
    .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)
    }
}

.longform-page .article > figure img, .longform-page .article > table.picture img, .longform-page .article > table.video img {
    width: 100%
}

.longform-page .notebox.nleft, .longform-page blockquote.qleft {
    margin-left: -10%
}

.longform-page .notebox.nright, .longform-page blockquote.qright {
    margin-right: -10%
}

.longform-page .notebox table.picture, .longform-page blockquote table.picture {
    max-width: 100% !important;
    margin-bottom: 16px
}

.longform-page .notebox table.picture[align=center][align=normal], .longform-page blockquote table.picture[align=center][align=normal] {
    max-width: 100%
}

.longform-page .notebox table.picture[align=center] .caption, .longform-page blockquote table.picture[align=center] .caption {
    text-align: center
}

.live-zone {
    position: relative;
    margin-top: 20px;
    padding-left: 4px;
    margin-bottom: 20px;
    width: 100%
}

.live-zone .wrap-item {
    position: relative
}

.live-zone .wrap-item:after, .live-zone .wrap-item:before {
    content: "";
    display: block;
    position: absolute;
    background: var(--bd-color)
}

.live-zone .wrap-item:before {
    width: 1px;
    height: 100%;
    margin-top: 16px
}

.live-zone .wrap-item:after {
    bottom: -16px;
    left: -8px;
    width: 16px;
    height: 1px
}

.live-zone .item {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 20px
}

.live-zone .item:last-child {
    margin: 0
}

.live-zone .meta {
    width: 100px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    padding: 16px 0 0 16px
}

.live-zone .meta:before {
    content: "";
    position: absolute;
    top: 16px;
    left: -15px;
    background-color: #ccc;
    border: 10px solid var(--gray-f7);
    border-radius: 50%;
    height: 30px;
    width: 30px
}

.live-zone .meta time {
    position: relative;
    font-size: 12px !important;
    color: var(--gray-55)
}

.live-zone .wrap-content {
    width: 88%;
    background: var(--white);
    padding: 20px;
    border-radius: 3px
}

.live-zone .wrap-content .heading {
    font-weight: 700;
    margin-bottom: 10px
}

.live-zone .wrap-content .content > * {
    margin-bottom: 16px
}

.interview-zone > * {
    margin-bottom: 20px
}

.interview-zone .itv-context {
    padding: 20px;
    background: #fff3cd;
    border: 1px dashed #ffc107;
    border-radius: 3px
}

.interview-zone .itv-context .desc {
    font-weight: 700
}

.interview-zone .itv-context .content {
    padding-bottom: 0
}

.interview-zone .itv-invitors {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.interview-zone .itv-invitors .box-heading {
    color: var(--gray-800);
    margin-bottom: 16px
}

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

.interview-zone .itv-invitors .visitor {
    display: grid;
    gap: 16px;
    grid-template-columns: 80px 1fr
}

.interview-zone .itv-invitors .visitor .avatar {
    width: 80px;
    height: 80px;
    background: #e9ecef;
    border-radius: 50%;
    overflow: hidden
}

.interview-zone .itv-invitors .visitor .avatar img {
    width: 100%;
    height: 100%
}

.interview-zone .itv-invitors .visitor .info {
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d
}

.interview-zone .itv-invitors .visitor .name {
    font-size: 16px;
    color: var(--gray-800);
    font-weight: 700;
    display: block
}

.interview-zone .itv-note {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    text-align: center
}

.interview-zone .itv-interaction {
    padding: 20px;
    background: #333;
    border-radius: 3px;
    margin-bottom: 30px
}

.interview-zone .itv-interaction .box-heading {
    color: #fff;
    margin-bottom: 16px
}

.interview-zone .itv-interaction .field {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between
}

.interview-zone .itv-interaction .field .input, .interview-zone .itv-interaction .field .textarea {
    font-size: 16px !important;
    color: var(--gray-55);
    display: block;
    width: 100%;
    height: 100px;
    padding: 16px;
    background: #eee;
    border: 1px solid var(--bd-color);
    border-radius: 3px
}

.interview-zone .itv-interaction .field .input {
    width: 49%;
    height: 40px
}

.interview-zone .itv-question-answer {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.interview-zone .itv-question-answer .wrap-content {
    padding: 20px;
    position: relative;
    border-radius: 3px
}

.interview-zone .item {
    display: grid;
    gap: 16px 20px;
    margin-bottom: 20px
}

.interview-zone .item .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: url(../img/no-ava.png) center center/80px no-repeat
}

.interview-zone .item .avatar img {
    width: 100%;
    height: 100%
}

.interview-zone .item .wrap-content::before {
    position: absolute;
    content: "";
    top: 20px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}

.interview-zone .item .wrap-content * {
    font-size: 16px;
    line-height: 1.5;
    color: #555
}

.interview-zone .item .meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.interview-zone .item .name {
    font-size: 20px;
    color: #343a40;
    font-weight: 700
}

.interview-zone .item .time {
    font-weight: 400;
    font-size: 14px !important;
    color: #888;
    position: relative;
    margin: 0;
    display: inline-block
}

.interview-zone .item .time::before {
    content: "-";
    display: inline-block;
    margin: 0 8px
}

.interview-zone .item .content::after {
    display: block;
    clear: both;
    content: ""
}

.interview-zone .item .content div, .interview-zone .item .content p {
    margin-bottom: 16px
}

.interview-zone .item .content table.picture .caption, .interview-zone .item .content table.video .caption {
    background: 0 0;
    padding: 10px 20px 0
}

.interview-zone .item.question {
    grid-template-columns: 80px 1fr
}

.interview-zone .item.question .wrap-content {
    background: #fff
}

.interview-zone .item.question .wrap-content::before {
    left: -8px;
    border-right: 8px solid #fff
}

.interview-zone .item.anwser {
    grid-template-columns: 1fr 80px
}

.interview-zone .item.anwser .avatar {
    order: 1
}

.interview-zone .item.anwser .wrap-content {
    background: #cbe6fa
}

.interview-zone .item.anwser .wrap-content::before {
    right: -8px;
    border-left: 8px solid #cbe6fa
}

.interview-zone .wrap-btn {
    display: flex;
    justify-content: end;
    margin: 0
}

.interview-zone .wrap-btn .btn-submit {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    display: block;
    width: 120px;
    height: 35px;
    background: #900;
    float: right;
    border-radius: 3px
}

.interview-zone .wrap-btn .btn-submit:hover {
    background: #7d0000
}

.lens-page .site-header, .story-page .site-header {
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    transition: .3s ease
}

.lens-page .site-header .social, .story-page .site-header .social {
    display: flex;
    align-items: center
}

.lens-page .site-header .social-list, .story-page .site-header .social-list {
    display: flex;
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid var(--bd-color)
}

.lens-page .site-header .social-item, .story-page .site-header .social-item {
    font-size: 24px;
    color: #555;
    width: 36px;
    height: 36px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 6px
}

.lens-page .site-header .social-item:hover, .story-page .site-header .social-item:hover {
    opacity: .85
}

.lens-page .site-header .social-item .ic-fb, .story-page .site-header .social-item .ic-fb {
    color: #3b5998
}

.lens-page .site-header .social-item .ic-yt, .story-page .site-header .social-item .ic-yt {
    color: red
}

.lens-page .site-header .social-item .ic-tiktok, .story-page .site-header .social-item .ic-tiktok {
    color: #292929
}

.lens-page .site-header .more-option, .story-page .site-header .more-option {
    position: relative
}

.lens-page .site-header .more-option .dropdown-menu, .story-page .site-header .more-option .dropdown-menu {
    width: 200px;
    margin-top: 12px;
    right: 0;
    z-index: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
}

.lens-page .site-header .more-option .dropdown-menu:before, .story-page .site-header .more-option .dropdown-menu:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -8px;
    right: 16px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff
}

.lens-page .site-header .more-option .option-list li:not(:last-child), .story-page .site-header .more-option .option-list li:not(:last-child) {
    border-bottom: 1px solid #e9ecef
}

.lens-page .site-header .more-option .option-list li a, .story-page .site-header .more-option .option-list li a {
    padding: 8px 20px
}

.lens-page .headline-logo, .story-page .headline-logo {
    font-family: Raleway, sans-serif;
    font-size: 30px;
    line-height: 1.5;
    color: #212529;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.lens-page .headline-logo a, .story-page .headline-logo a {
    color: #fff
}

.lens-page .headline-logo a:hover, .story-page .headline-logo a:hover {
    color: #900
}

.lens-page .hdr-content, .story-page .hdr-content {
    height: 60px;
    justify-content: space-between;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px)
}

.lens-page .hdr-content .logo, .story-page .hdr-content .logo {
    width: 120px;
    height: 38px
}

.lens-page .hdr-content .logo a, .story-page .hdr-content .logo a {
    background-size: 120px
}

.lens-page .article__source .wrap-source, .story-page .article__source .wrap-source {
    grid-template-columns: 85px 1fr
}

.lens-page .related-topic .box-heading, .story-page .related-topic .box-heading {
    color: #343a40
}

.lens-page .related-topic .story__heading, .story-page .related-topic .story__heading {
    font-size: 16px !important;
    font-weight: 400
}

.lens-page .related-topic .story__heading a, .story-page .related-topic .story__heading a {
    font-size: 16px !important
}

.lens-page {
    background: #e9ecef
}

.lens-page .site-body {
    background: #fff
}

.lens-page .article__avatar {
    position: fixed;
    z-index: -1;
    top: 0
}

.lens-page .article__avatar img {
    width: 100%
}

.lens-page .breadcrumb {
    justify-content: center
}

.lens-page .breadcrumb .main {
    font-size: 18px;
    text-transform: uppercase;
    padding: 7px 12px 6px;
    border: 1px solid #ccc;
    margin: 0 3px 20px
}

.lens-page .breadcrumb .main a {
    font-size: 18px
}

.lens-page .breadcrumb .main a:after {
    content: none !important
}

.lens-page .l-content {
    width: 100%;
    float: none
}

.lens-page .article {
    width: 730px;
    padding-top: 50px;
    margin: auto
}

@media (min-width: 1024px) {
    .lens-page .article {
        width: 960px
    }
}

.lens-page .article__header {
    font-family: Raleway, sans-serif;
    text-align: center
}

.lens-page .article__title {
    font-size: 64px;
    margin-bottom: 60px
}

.lens-page .article__meta {
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    background: 0 0;
    margin-bottom: 60px
}

.lens-page .article__meta::after, .lens-page .article__meta::before {
    content: '';
    flex: 1;
    height: 2px;
    background: #900
}

.lens-page .article__meta::before {
    margin-right: 10px
}

.lens-page .article__meta::before {
    margin-left: 10px
}

.lens-page .article__meta .author:before {
    content: none
}

.lens-page .article__meta time {
    margin: 0 10px
}

.lens-page .article__sapo {
    font-family: Raleway, sans-serif
}

.lens-page .zce-content-body * {
    font-family: Raleway, sans-serif;
    font-size: 20px
}

.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 {
    color: #900;
    font-weight: 700
}

.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-weight: 700
}

.lens-page .zce-content-body h1, .lens-page .zce-content-body h1 * {
    font-size: 48px !important
}

@media (max-width: 768px) {
    .lens-page .zce-content-body h1, .lens-page .zce-content-body h1 * {
        font-size: 32px !important
    }
}

.lens-page .zce-content-body h2, .lens-page .zce-content-body h2 * {
    font-size: 40px !important
}

@media (max-width: 768px) {
    .lens-page .zce-content-body h2, .lens-page .zce-content-body h2 * {
        font-size: 28px !important
    }
}

.lens-page .zce-content-body h3, .lens-page .zce-content-body h3 * {
    font-size: 32px !important
}

@media (max-width: 768px) {
    .lens-page .zce-content-body h3, .lens-page .zce-content-body h3 * {
        font-size: 24px !important
    }
}

.lens-page .zce-content-body h4, .lens-page .zce-content-body h4 * {
    font-size: 21px !important
}

@media (max-width: 768px) {
    .lens-page .zce-content-body h4, .lens-page .zce-content-body h4 * {
        font-size: 20px !important
    }
}

.lens-page .zce-content-body h5, .lens-page .zce-content-body h5 * {
    font-size: 16px !important
}

@media (max-width: 768px) {
    .lens-page .zce-content-body h5, .lens-page .zce-content-body h5 * {
        font-size: 18px !important
    }
}

.lens-page .zce-content-body .poll-box .desc {
    color: #212529;
    font-weight: 700
}

.lens-page .outset-left {
    margin-left: -10%
}

@media (max-width: 1024px) {
    .lens-page .outset-left {
        margin-left: 0
    }
}

.lens-page .outset-right {
    margin-right: -10%
}

@media (max-width: 1024px) {
    .lens-page .outset-right {
        margin-right: 0
    }
}

.lens-page .article-relate .story__summary, .lens-page .article-relate .story__summary * {
    font-size: 14px
}

.story-page .site-body {
    padding: 0;
    background: #272727
}

.story-page .article-story * {
    font-family: Quicksand, sans-serif
}

.story-page .article-story .social {
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, .5);
    padding-left: 20px;
    position: fixed;
    width: 150px;
    height: 50px;
    bottom: 20px;
    left: 40px;
    z-index: 1
}

.story-page .article-story .social .share-label {
    font-size: 13px;
    line-height: 16px;
    color: #fff;
    position: absolute;
    top: -19px;
    left: -18px
}

.story-page .article-story .social-item {
    font-size: 18px;
    color: #fff;
    width: 36px;
    height: 36px;
    background: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 6px
}

.story-page .article-story .social-item:hover {
    opacity: .8
}

.story-page .article-story .social-item.tt {
    background: #55acee
}

.story-page .article-story .social-item.zl {
    background: #018fe5
}

.story-page .article-story .social-item.ml {
    background: #888
}

.story-page .article-story .social-item.pr {
    background: #bbb
}

.story-page .article-story .social-item.bm.ed {
    background: #900
}

.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 1s;
    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 .item-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.story-page .item-wrapper .cate {
    padding-bottom: 10px;
    color: #fff
}

.story-page .item-wrapper .cate:hover {
    color: #fff !important
}

.story-page .item-wrapper .cate > * {
    color: #fff
}

.story-page .item-wrapper h1, .story-page .item-wrapper h2, .story-page .item-wrapper h3, .story-page .item-wrapper h4, .story-page .item-wrapper h5 {
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    font-size: 48px;
    line-height: 72px;
    font-weight: 700
}

.story-page .item-wrapper h1 > *, .story-page .item-wrapper h2 > *, .story-page .item-wrapper h3 > *, .story-page .item-wrapper h4 > *, .story-page .item-wrapper h5 > * {
    padding: 0;
    margin: 0;
    font-family: Quicksand, sans-serif
}

.story-page .item-wrapper .author {
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 1rem
}

.story-page .item-wrapper .author a {
    color: #fff;
    text-transform: uppercase
}

.story-page .item-wrapper .author a:hover {
    text-decoration: underline
}

.story-page .item-wrapper audio {
    width: 100%;
    max-width: 47.22vw
}

.story-page .text-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #fff;
    margin: 0;
    line-height: 1.5;
    padding: 20px;
    text-align: left;
    background: #05050560;
    transition: all 1s
}

.story-page .text-wrapper.no-bg {
    text-align: center;
    background: 0 0
}

.story-page .text-wrapper.no-bg > * {
    margin-top: 0
}

.story-page .text-wrapper > * {
    margin-top: 16px;
    margin-bottom: 0;
    display: block
}

.story-page .text-wrapper > :first-child {
    margin-top: 0
}

.story-page .article-relate {
    padding: 20px;
    background: var(--white);
    box-shadow: 1px 0 50px rgba(0, 0, 0, .1)
}

.story-page .article-relate .story__thumb {
    width: 200px;
    min-height: 130px;
    float: left;
    margin-right: 20px
}

@media (max-width: 768px) {
    .story-page .article-relate .story__thumb {
        width: 150px;
        min-height: 100px;
        float: left;
        margin-right: 16px
    }
}

.story-page .article-relate .story__heading {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 8px
}

.story-page .article-relate .story__heading a {
    font-size: 20px !important;
    color: var(--gray-800);
    font-weight: 700;
    display: block
}

@media (max-width: 768px) {
    .story-page .article-relate .story__heading a {
        font-size: 16px !important
    }
}

.story-page .article-relate .story__heading a:hover {
    color: #900;
    text-decoration: none;
    opacity: 1
}

.story-page .article-relate .story__heading i {
    font-size: larger !important
}

.story-page .article-relate .story__heading .ic-type-live {
    font-size: 14px !important
}

.story-page .article-relate .story__heading .ic-type-infographic, .story-page .article-relate .story__heading .ic-type-text {
    font-size: 11px !important
}

.story-page .read-more {
    background: #fff;
    position: relative;
    padding-bottom: 12px;
    width: 100%
}

.story-page .read-more:before {
    text-align: left;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-image: -webkit-linear-gradient(0deg, #1fada2 16.66667%, #1fad66 16.66667%, #1fad66 33.33333%, #8aad1f 33.33333%, #8aad1f 50%, #ad5a1f 50%, #ad5a1f 66.66667%, #ad361f 66.66667%, #ad361f 83.33333%, #ad1fad 83.33333%)
}

.story-page .read-more > * {
    width: 730px;
    margin: 50px auto 0
}

@media (min-width: 1024px) {
    .story-page .read-more > * {
        width: 960px
    }
}

.story-page .read-more .box-heading {
    font-size: 22px;
    margin-bottom: 20px
}

.story-page .site-footer {
    position: relative
}

.story-page .story-normal > * {
    display: none !important
}

.story-page .story-content {
    display: block !important;
    position: relative
}

.story-page .img-wrapper .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
}

.story-page .audio-wrapper, .story-page .video-wrapper {
    width: 100%;
    background: 0 0
}

.story-page .break-heading {
    background: 0 0;
    text-align: center
}

.story-page .break-heading > * {
    text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
    font-weight: 600
}

.story-page .break-heading::before {
    position: absolute;
    content: '';
    display: block;
    width: 180px;
    height: 2px;
    margin: 20px auto;
    background: #fff;
    bottom: -16px;
    right: 50%;
    transform: translateX(50%)
}

.zce-content-body .rl {
    background: #fff3cd;
    border: 1px dashed #ffc107;
    border-radius: 3px
}

.zce-content-body .rl td {
    padding: 16px;
    border: 0 none
}

.zce-content-body .rl a {
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block
}

.zce-content-body table.image img {
    margin-bottom: 8px
}

.zce-content-body table.quote {
    color: var(--gray-800);
    background: var(--white);
    position: relative;
    border: 1px solid var(--bd-color)
}

.zce-content-body table.quote:before {
    content: "";
    display: block;
    background: url(../img/plo/quote.svg) 0 0 no-repeat;
    width: 54px;
    height: 38px;
    position: absolute;
    left: -6px;
    top: -18px
}

.zce-content-body table.quote * {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--gray-800)
}

.zce-content-body table.quote td {
    padding: 30px !important
}

@media (max-width: 768px) {
    .zce-content-body table.quote td {
        padding: 20px 16px
    }
}

.zce-content-body table.quote img {
    max-width: 100%
}

.zce-content-body table.quote[align=left], .zce-content-body table.quote[align=right] {
    width: 300px !important
}

@media (max-width: 768px) {
    .zce-content-body table.quote[align=left], .zce-content-body table.quote[align=right] {
        width: 50% !important
    }
}

.abf-cate {
    margin-bottom: 20px
}

.abf-cate .rank-1 {
    display: grid;
    grid-template-columns: [content] 2fr [sidebar] 1fr;
    gap: 20px;
    margin-bottom: 20px
}

@media (min-width: 1200px) {
    .abf-cate .focus {
        width: 560px
    }
}

.abf-cate .focus .story__thumb {
    height: var(--height-315);
    margin-bottom: 12px
}

.abf-cate .focus .story__heading {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 10px
}

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

.abf-cate .feature .story__thumb {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.abf-cate .feature .story__heading {
    font-size: 14px
}

.abf-cate .feature .box-heading {
    font-size: 16px;
    padding: 8px 0;
    margin-bottom: 16px
}

.abf-cate .feature .box-heading * {
    font-size: 16px
}

.abf-cate .feature .story__heading {
    display: flex
}

.abf-cate .rank-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--column-gap)
}

.abf-cate .rank-2 .story__thumb {
    height: var(--height-125);
    margin-bottom: 8px
}

.tags-zone {
    color: var(--gray-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    margin-bottom: 20px
}

.tags-zone .key {
    display: flex;
    align-items: center
}

.tags-zone .key span {
    font-size: 20px;
    color: #900
}

.tags-zone .main {
    font-size: 24px;
    line-height: 1.5;
    text-transform: uppercase;
    margin-right: 16px
}

.tags-zone .result span {
    color: #900;
    font-weight: 700
}

.zone--info {
    margin: 0
}

.zone--info .rank-1 {
    position: relative
}

.zone--info .rank-1:before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    background: var(--bd-color)
}

.zone--info .rank-1 .line {
    color: var(--gray-800);
    min-height: 42px;
    padding: 10px 0 8px;
    display: flex;
    align-items: center
}

.zone--info .rank-1 .line .position {
    font-size: 16px;
    font-weight: 700;
    padding: 0 20px;
    width: 50%
}

.zone--info .rank-1 .line .name {
    text-transform: capitalize;
    padding-left: 20px
}

.zone--info .line {
    background: var(--white)
}

.zone--info .line:nth-child(odd) {
    background: var(--gray-f7)
}

.zone--info .rank-2 a {
    color: #900;
    display: inline
}

.zone--info .rank-2 a:hover {
    text-decoration: underline
}

.zone--info .rank-2 .line {
    background: var(--white);
    padding: 16px 20px
}

.zone--info .rank-2 .line:nth-child(even) {
    background: var(--gray-f7)
}

.zone--info .rank-2 .line p {
    color: var(--gray-800);
    margin-top: 6px
}

.zone--info .rank-2 .line p:first-child {
    margin-top: 0
}

.zone--info .rank-2 .line .heading {
    font-size: 16px;
    font-weight: 700
}

.zone--contact {
    width: 550px;
    margin: auto
}

.zone--contact .box-content::after {
    display: block;
    clear: both;
    content: ""
}

.zone--contact .form-group label {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    width: 130px;
    margin-right: 15px;
    display: inline-block
}

.zone--contact .form-group label span {
    color: #dc3545
}

.zone--contact .form-group .form-control {
    width: 400px;
    display: inline-block
}

.zone--contact .form-group textarea.form-control {
    padding: 16px;
    vertical-align: top
}

.zone--contact .form-group .form-text {
    margin: 6px 0 0 150px
}

.zone--contact .recaptcha {
    margin: 0 0 10px 150px
}

.zone--contact .btn-submit {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    display: block;
    width: 120px;
    height: 35px;
    background: #900;
    float: right;
    border-radius: 3px
}

.zone--contact .btn-submit:hover {
    background: #7d0000
}

.rss-content {
    font-size: 16px
}

.rss-content p {
    margin-bottom: 16px
}

.rss-content ul {
    margin-bottom: 20px
}

.rss-content ul li {
    display: flex;
    margin-bottom: 6px
}

.rss-content i {
    font-size: 20px;
    color: #f26522;
    margin-right: 6px
}

.box-calendar {
    border: 3px solid #900;
    border-radius: 3px;
    overflow: hidden
}

.box-calendar .box-heading {
    color: #fff;
    text-transform: uppercase;
    padding: 10px 0;
    margin: 0;
    background: #900
}

.box-calendar .tabs {
    background: #e9ecef;
    display: flex;
    justify-content: space-between
}

.box-calendar .tablinks {
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    height: 40px;
    padding: 0 40px
}

.box-calendar .tablinks.active {
    color: #900;
    background: #fff
}

.box-calendar .tabcontent {
    display: none;
    padding: 20px
}

.box-calendar .tabcontent.active {
    display: block
}

.hdr-utilities .logged-in img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    border-radius: 50%
}

.hdr-utilities .logged-in .sub-utilities {
    min-width: 200px
}

@media (max-width: 768px) {
    .hdr-utilities .logged-in .sub-utilities {
        right: 27px
    }
}

.hdr-utilities .logged-in .sub-utilities i {
    font-size: 18px;
    color: #900;
    margin-right: 3px;
    width: 24px
}

.user-wrap {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 4fr;
    gap: var(--column-gap)
}

.user-wrap .tablinks {
    font-size: 14px;
    color: var(--gray-800);
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center
}

.user-wrap .tablinks.active, .user-wrap .tablinks:hover {
    background: var(--gray-f7);
    border-radius: 3px
}

.user-wrap .tablinks i {
    font-size: 20px;
    color: #900;
    margin-right: 12px;
    width: 24px;
    vertical-align: sub
}

.user-wrap .tabcontent {
    display: none
}

.user-wrap .tabcontent.active {
    display: block
}

.user-info {
    width: 230px;
    background: var(--white);
    border: 1px solid var(--bd-color);
    border-radius: 3px;
    padding: 16px;
    position: relative
}

@media (min-width: 1200px) {
    .user-info {
        width: 270px
    }
}

.user-ava {
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bd-color)
}

@media (min-width: 1200px) {
    .user-ava {
        text-align: left;
        display: flex;
        align-items: center
    }
}

.user-ava .avatar {
    width: 60px;
    min-width: 60px;
    height: 60px;
    position: relative;
    margin: 0 auto 6px;
    border-radius: 50%
}

@media (min-width: 1200px) {
    .user-ava .avatar {
        margin: 0 16px 0 0
    }
}

.user-ava .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.user-ava .avatar i {
    position: absolute;
    font-size: 18px;
    bottom: 0;
    left: 45px
}

.user-ava .wrap-name {
    position: relative
}

.user-ava .name {
    font-size: 18px
}

.user-ava .name i {
    margin-left: 6px
}

.user-ava [class^=ic-] {
    color: #bd1723;
    background: #fff;
    border-radius: 50%
}

.user-ava [class^=ic-].checked {
    color: #16ce06
}

.user-ava .image-upload label {
    font-size: 12px;
    color: #00739f
}

.user-ava .image-upload input {
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    cursor: pointer
}

.user-statistic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px
}

.user-statistic .statistic {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    height: 96px;
    background: var(--white);
    border: 1px solid var(--bd-color);
    border-radius: 3px;
    padding: 24px 0
}

@media (min-width: 1024px) {
    .user-statistic .statistic {
        text-transform: uppercase
    }
}

.user-statistic .statistic span {
    font-size: 18px;
    color: #900;
    display: block
}

.user-overview .wrapper_tabcontent {
    padding: var(--column-gap);
    background: var(--gray-f7);
    border: 1px solid var(--bd-color);
    border-radius: 3px
}

.user-overview .box-heading {
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-800);
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 0 4px;
    margin-bottom: 20px;
    border-top: 2px solid #900;
    border-bottom: 1px solid var(--bd-color);
    padding: 0;
    margin-bottom: 16px;
    border: 0 none
}

.user-overview .box-heading * {
    font-size: 22px
}

.user-overview .box-heading a {
    color: #900
}

.user-overview .box-content {
    background: var(--white);
    padding: var(--column-gap);
    border-radius: 3px
}

.user-overview .box-content::after {
    display: block;
    clear: both;
    content: ""
}

@media (min-width: 1024px) {
    .user-overview .form-group {
        display: flex;
        align-items: center
    }
}

.user-overview .form-group label {
    font-size: 16px;
    color: #495057;
    font-weight: 700;
    margin-bottom: 6px
}

@media (min-width: 1024px) {
    .user-overview .form-group label {
        width: 150px;
        min-width: 150px;
        margin: 0 16px 6px 0
    }
}

.user-overview .form-group label span {
    color: #dc3545
}

.user-overview .form-group .form-control::placeholder {
    color: #adb5bd
}

.user-overview .form-group select.form-control {
    height: 50px
}

.user-overview .group-select {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.user-overview .btn {
    margin: 20px auto 0
}

.user-overview .btn-submit {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: 120px;
    height: 35px;
    background: #900;
    float: right;
    border-radius: 3px
}

.user-overview .btn-submit:hover {
    background: #7d0000
}

.user-overview .tab-profile .form-group:nth-child(2) {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 8px solid var(--gray-f7)
}

.user-overview .tab-bookmark .box-content, .user-overview .tab-history .box-content {
    display: grid;
    gap: var(--column-gap)
}

@media (min-width: 1024px) {
    .user-overview .tab-bookmark .box-content, .user-overview .tab-history .box-content {
        grid-template-columns:repeat(2, 1fr)
    }
}

.user-overview .tab-bookmark .story .story__thumb, .user-overview .tab-history .story .story__thumb {
    width: 120px;
    height: 80px;
    float: left;
    margin-right: 16px
}

.user-overview .tab-bookmark .story .story__heading, .user-overview .tab-history .story .story__heading {
    font-size: 14px
}

.user-overview .tab-comment .user-comment {
    display: flex;
    padding-bottom: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bd-color)
}

.user-overview .tab-comment .user-comment .avatar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 15px;
    background: #e5e5e5 url(../img/no-ava.png) 0 0/30px no-repeat;
    margin-top: -3px;
    position: relative
}

.user-overview .tab-comment .user-comment .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0
}

.user-overview .tab-comment .user-comment .content {
    color: var(--gray-55);
    margin-left: 16px;
    width: 100%
}

.user-overview .tab-comment .user-comment .content .time {
    font-size: 13px;
    color: #888;
    margin-bottom: 3px
}

.user-overview .tab-comment .user-comment .content .text {
    margin-bottom: 8px
}

.user-overview .tab-comment .user-comment .content .action {
    display: flex
}

.user-overview .tab-comment .user-comment .content .action span {
    font-size: 13px;
    color: #888
}

.user-overview .tab-comment .user-comment .content .action .like {
    margin-right: 16px
}

.user-overview .tab-comment .user-comment .content .action .like i {
    font-size: 14px;
    margin-right: 3px
}

.user-overview .tab-comment .user-comment .content .link {
    font-size: 16px;
    color: #900;
    font-weight: 700;
    display: block;
    margin-top: 6px
}

.user-overview .tab-comment .user-comment .content .link:hover {
    text-decoration: underline
}

.error-wrap {
    text-align: center;
    margin: 40px auto
}

.error-wrap img {
    margin-bottom: 30px
}

.error-wrap h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px
}

.error-wrap p {
    line-height: 24px;
    color: #555;
    margin-bottom: 20px
}

.error-wrap .btn {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 24px;
    display: inline-block;
    background: #900;
    border-radius: 8px
}

.error-wrap .btn:hover {
    background: #7d0000
}

.author-wrap {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-bottom: 50px
}

.author-wrap .btn {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    width: 230px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #900;
    border-radius: 6px
}

.author-wrap .btn:hover {
    background: #7d0000
}

.author-overview {
    display: flex;
    padding-bottom: 60px;
    margin-top: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, .8)
}

.author-avatar {
    margin-right: 50px
}

@media (min-width: 1200px) {
    .author-avatar {
        margin-right: 70px
    }
}

.author-avatar .avatar {
    width: 230px;
    height: 230px;
    background: rgba(0, 0, 0, .1);
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 50px
}

.author-info .label {
    font-size: 22px
}

.author-info .name {
    font-size: 40px;
    color: var(--gray-800);
    font-weight: 700;
    margin-bottom: 6px
}

.author-info .name span {
    font-size: 24px
}

.author-summary {
    font-family: RobotoCondensed;
    font-size: 22px;
    color: var(--gray-800);
    margin-top: 20px
}

.author-summary p {
    margin-bottom: 10px
}

.author-summary a {
    color: #900;
    display: inline
}

.author-summary a:hover {
    color: #7d0000
}

.author-timeline {
    margin-bottom: 80px
}

.author-timeline select {
    font-weight: 700;
    background: 0 0;
    border: 0 none
}

.author-timeline .filter {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 60px;
    border-bottom: 1px solid var(--bd-color);
    margin-bottom: 30px
}

.author-timeline .total:after {
    content: ",";
    display: inline-block;
    margin-right: 6px
}

.author-timeline .timeline .story {
    padding: 0 0 30px;
    margin: 0 0 30px;
    border: 0 none;
    border-bottom: 1px solid var(--bd-color)
}

.author-timeline .timeline .cate {
    font-size: 18px;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 6px
}

.author-timeline .timeline .cate:hover {
    color: #900
}

.author-timeline .timeline .story__thumb {
    width: 340px;
    height: auto;
    margin-right: 30px
}

@media (max-width: 768px) {
    .author-timeline .timeline .story__thumb {
        width: 300px
    }
}

.author-timeline .timeline .story__heading {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 16px
}

.author-timeline .timeline .story__heading a {
    color: var(--gray-900)
}

.author-timeline .timeline .story__heading a:hover {
    color: #900
}

.author-timeline .timeline .story__summary {
    font-family: RobotoCondensed;
    font-size: 22px;
    line-height: 1.4;
    color: var(--gray-800);
    margin-left: 370px
}

.author-timeline .timeline .story__meta {
    font-size: 18px;
    margin: 16px 0 0 370px
}

.author-timeline .btn {
    margin: auto
}

.author-suggest .box-heading {
    font-size: 40px;
    color: #900;
    font-weight: 700;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .8);
    margin-bottom: 30px
}

.author-suggest .box-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 50px
}

.author-suggest .col {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--bd-color)
}

@media (min-width: 1200px) {
    .author-suggest .col {
        text-align: left
    }
}

.author-suggest .avatar {
    width: 145px;
    height: 145px;
    background: rgba(0, 0, 0, .1);
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto 10px
}

@media (min-width: 1200px) {
    .author-suggest .avatar {
        float: left;
        margin: 0 16px 0 0
    }
}

.author-suggest .name {
    font-family: RobotoCondensed;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700
}

.author-suggest .label {
    font-family: RobotoCondensed;
    font-size: 20px;
    color: #a7a7a7;
    margin-bottom: 6px
}

.e-paper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 30px 0
}

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

.e-paper .story {
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.e-paper .story:hover .story__thumb a:after {
    background: linear-gradient(to top, #000 -10%, rgba(255, 255, 255, 0) 100%)
}

.e-paper .story:hover .readmore {
    display: block
}

.e-paper .story__thumb {
    height: 295px
}

@media (min-width: 1024px) {
    .e-paper .story__thumb {
        height: 410px
    }
}

@media (min-width: 1200px) {
    .e-paper .story__thumb {
        height: 360px
    }
}

.e-paper .story__thumb:hover img {
    opacity: 1
}

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

.e-paper .story__thumb a:hover {
    opacity: 1
}

.e-paper .story__heading {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    display: block;
    margin-bottom: 3px
}

.e-paper .story__heading * {
    color: #fff
}

.e-paper .story__meta {
    margin: 0
}

.e-paper .wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 20px 20px
}

.e-paper .readmore {
    display: none;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: #900;
    padding: 10px 12px;
    border-radius: 4px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100px)
}

@media (min-width: 1024px) {
    .e-paper .readmore {
        padding: 10px 24px;
        transform: translate(-50%, -120px)
    }
}

.e-paper .btn {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    width: 200px;
    height: 50px;
    border-radius: 8px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.epaper-page .site-header {
    margin: 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.epaper-page .hdr-content {
    height: 60px;
    justify-content: start
}

.epaper-page .hdr-content .logo {
    width: 120px;
    height: 38px
}

.epaper-page .hdr-content .logo a {
    background-size: 120px
}

.e-headline {
    font-size: 24px;
    color: #343a40;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#adobe-dc-view {
    height: 100vh !important
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fff
}

.sidebar {
    width: 100%;
    max-width: 300px
}

.box_knm_pc .zone-knm {
    max-width: 100% !important;
    padding: 6px 15px 16px !important;
    background-image: url(../images/backgroup_pc.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important
}

.box_knm_pc .zone-knm .bg_title {
    background-image: url(../images/bg_title_knm_pc.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 50px 0 10px;
    min-height: 100px;
    background-size: 100%;
    border-radius: 5px
}

.box_knm_pc .zone-knm .btn_more {
    text-align: center;
    margin: 10px 0
}

.box_knm_pc .btn_more .btn_more-link {
    display: inline-block;
    padding: 8px 10px;
    color: #900000;
    border: 1px solid #900000;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: all .3s ease
}

.box_knm_pc .btn_more .btn_more-link:hover {
    background-color: #900000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25)
}

.zone-knm .story {
    display: flex;
    align-items: center;
    padding: 8px 0
}

.zone-knm .story__thumb {
    width: 80px;
    height: 65px;
    margin-right: 12px;
    margin-left: 8px;
    margin-top: 10px;
    flex-shrink: 0
}

.zone-knm .story__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.zone-knm .story__heading {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4
}

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

a:hover {
    color: #000
}

.btn-more {
    display: inline-block;
    padding: 2px 12px;
    font-style: italic;
    color: #900000;
    float: right;
    font-weight: 700;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .2s ease-in-out
}

.site-body {
    padding: 0 16px 20px
}

.box_knm_mobile .story {
    display: flex;
    align-items: center
}

.box_knm_mobile .story__thumb {
    aspect-ratio: 3/2;
    overflow: hidden;
    margin-right: 16px;
    width: 250px
}

.box_knm_mobile .story__thumb a {
    display: block;
    width: 100%;
    height: 100%
}

.box_knm_mobile .story__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.box_knm_mobile .story__heading {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0
}

.box_knm_mobile .story__heading a {
    color: #222;
    text-decoration: none
}

.box_knm_mobile .splide__slide {
    padding: 0 10px
}

.box_knm_mobile .splide__arrow {
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10
}

.box_knm_mobile .splide__arrow--prev {
    left: 10px
}

.box_knm_mobile .splide__arrow--next {
    right: 10px
}

.box_knm_mobile .wrap-slider {
    width: 100%
}

.box_knm_mobile {
    max-width: 100%;
    padding: 6px 0 16px;
    background-image: url(../images/backgroup_mobile.png);
    background-size: cover;
    background-repeat: no-repeat
}

.box_knm_mobile .bg_title {
    background-image: url(../images/bg_title_knm_mobile.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 50px 15px 10px;
    min-height: 90px;
    margin-bottom: 8px;
    background-size: 100%;
    border-radius: 5px
}

.box_knm_mobile .splide__pagination {
    bottom: -1em !important
}

.box_knm_mobile .btn_more {
    text-align: center;
    margin-top: 10px
}

.box_knm_mobile .btn_more {
    text-align: center;
    margin: 20px 0
}

.box_knm_mobile .btn_more-link {
    display: inline-block;
    padding: 8px 8px;
    box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
    color: #900000;
    border: 1px solid #900000;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: all .3s ease
}

.box_knm_mobile .btn_more .btn_more-link:hover {
    background-color: #900000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25)
}

.box_knm_mobile {
    display: none
}

@media (max-width: 768px) {
    .box_knm_pc {
        display: none
    }

    .box_knm_mobile {
        display: block !important;
        margin: 20px 0
    }

    .box_knm_mobile .bg_title {
        min-height: 160px;
        margin-bottom: 0
    }
}

@media (max-width: 480px) {
    .box_knm_mobile .splide__arrow {
        width: 32px;
        height: 32px
    }

    .box_knm_pc {
        display: none
    }

    .box_knm_mobile {
        display: block !important
    }

    .box_knm_mobile .bg_title {
        min-height: 70px
    }
}

@media (max-width: 320px) {
    .box_knm_mobile .bg_title {
        min-height: 50px
    }
}

.ads_close, .banner_hidden, .hidden, .title-hidden {
    display: none !important
}

.banner[data-position=Web_AdsBalloon] {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0 auto !important;
    z-index: 100
}

.banner[data-position=Web_AdsBottomFull] .banner_show {
    margin-bottom: 0
}

.\--z--player div {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.\--z--player .\--z--big-play-button .\--z--icon {
    font-size: 5em !important
}

.\--z--player .\--z--controls .\--z--control .\--z--icon {
    font-size: 3em !important
}

div.player-error-screen {
    z-index: 10 !important
}

.story-page .story-normal > * {
    display: none !important
}

.img-wrapper .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
}

.article__meta .meta {
    max-width: inherit
}

.diemthi-page .diemthi-tab .content .result .score {
    overflow-x: auto
}

.diemthi-page .diemthi-tab .content .result {
    flex-direction: row;
    justify-content: center
}

.top-banner {
    position: relative;
    z-index: 1000
}

.site-header {
    position: relative;
    z-index: 1000
}