@charset "UTF-8";

/*@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");*/
:root{
    --bg-color:#191b24;
    --text-base:#aaa;
    --primary-color:#ffd875;
    --primary-color-hover:#ffde8a;
    --primary-button-text:#191b24;
    --primary-text:#ffd874;
    --top-bg-default:#202331;
    --border-color:#413b3c;
    --bg-1:#FFD875;
    --bg-2:#282b3a;
    --bg-3:#2f3346;
    --bg-4:#3e435c;
    --bg-5:#535d8e;
    --footer-bg:#0f111a;
    --shadow-large:0 0 20px 20px rgba(0,0,0,0.1);
    --h-shadow:0 2px 3px rgba(0,0,0,0.4);
    --category-name:#fff;
    --padding-base:40px;
    --bs-border-color:rgba(0,0,0,0.3);
    --Toastify__progress-bar--error:#f85f5f!important;
    --toastify-icon-color-error:#f85f5f!important;
    --status-going:#ffe7ab;
    --status-going-bg:#54535c;
    --status-complete:#30D158;
    --status-complete-bg:rgba(34,203,76,0.1);
    --status-trailer:#fff;
    --status-trailer-bg:rgba(128,119,119,0.9);
    --swiper-theme-color:#007aff
}
html{
    scroll-behavior:smooth
}
body,html{
    position:relative;
    min-height:100vh
}

.button-play,.primary-gradient,.w-chart .number{
    background: linear-gradient(235deg,#f5c516,#f87171);
}
.icon-20{
    width:20px;
    height:20px
}
.icon-16{
    width:16px;
    height:16px
}
#totop,.button-play,.cat-more .line-center,.d-item .text,.de-type .item,.item-focus.is-on,.menu-toggle .icon-menu *,.pin-trans .line-center,.search-toggle .icon-search *,.sound-cover,.toggle-x *,.top-slide-small .swiper-slide,.top-up .sw-item .v-thumbnail img,.topic-item .inc-icon,.topics-grid .row-topic,.topics-line .topic-item,.transition,header{
    transition:all .3s ease 0s;
    -webkit-transition:all .3s ease 0s;
    -moz-transition:all .3s ease 0s
}
.v-thumbnail{
    background-color:var(--bg-3)
}
.item-title{
    font-weight:400;
    line-height:1.5
}
#wrapper{
    padding-bottom:10rem
}
.search-modal .view-all{
    background-color:hsla(0,0%,100%,.06)
}
#main_menu,#main_user{
    gap:1.5rem
}
.search-toggle.toggled .icon-search svg{
    opacity:0
}
.top-slide-wrap .top-slide-small .swiper-slide:hover{
    border-color:#fff !important;
}
.slide-content .media-title{
    font-size:3em;
    margin-bottom:1rem
}
.slide-content .media-title-image{
    margin-bottom:2rem
}
.slide-content .touch .button-play svg{
    font-size:28px;
    position:relative;
    left:2px
}
.hl-tags{
    gap:.6rem
}
.tag-classic,.tag-model,.tag-topic{
    font-size:12px
}
.tag-classic,.tag-topic{
    background-color:hsla(0,0%,100%,.06);
    height:24px;
    padding:0 .4rem;
    color:#fff;
    display:inline-flex
}
.tag-classic{
    border:1px solid #fff
}
.pin-new{
    left:50%;
    transform:translateX(-50%)
}
.pin-new .line-center{
    font-size:11px
}
.pin-new .line-center.line-lt span:before{
    content:"LT."
}
.pin-new .line-center.line-tm span:before{
    content:"TM."
}
.pin-new .line-center.line-pd span:before{
    content:"PĐ."
}
.big-slide-wrapper .slide-content .media-title{
    font-size:2.2em
}
.sw-cover{
    width:100%;
    position:relative
}
.sw-cover .h-item{
    padding:1rem 1.25rem;
    position:relative;
    z-index:2;
    gap:1.25rem;
    align-items:flex-start
}
.sw-cover.single .h-item{
    padding:1rem
}
.actors-grid-wrapper,.cards-grid-wrapper{
    grid-template-columns:repeat(8,1fr)
}
.demo-tip,.qtip-default{
    background-color:var(--bg-3);
    width:100%;
    max-width:420px;
    border-radius:.5rem;
    overflow:hidden;
    box-shadow:0 5px 10px 0 rgba(0,0,0,.2);
    color:#fff;
    line-height:1.5
}
.v-tabs.nav-tabs .nav-link+.nav-link{
    margin-left:40px
}
.filter-toggle.toggled i{
    color:var(--primary-text)
}
.v-filter .fe-row{
    padding:1rem;
    border-bottom:1px solid var(--border-color)
}
.v-filter .fe-row .fe-results{
    gap:.6rem
}
.v-filter .fe-row .fe-results .item{
    padding:0 .5rem
}
.v-filter .fe-row .fe-results .item.active{
    border-color:var(--primary-color)
}
.detail-more .de-title{
    color:#fff;
    font-weight:500;
    white-space:nowrap
}
.detail-line{
    margin-bottom:1.2rem
}
.detail-line.d-flex{
    align-items:flex-start;
    gap:.6rem
}
.status .line-center{
    font-size:0;
    padding:.5rem .8rem;
    border-radius:2rem;
    background-color:hsla(0,0%,100%,.07)
}
.status.on-going .line-center{
    background-color:rgba(255,131,0,.1);
    color:#ff8300
}
.status.complete .line-center{
    background-color:rgba(34,203,76,.1);
    color:#22cb4c
}
.v-form-control{
    border:1px solid hsla(0,0%,100%,.06)
}
.my-area{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1rem
}
.textarea-wrap{
    background-color:hsla(0,0%,100%,.06)
}
.ma-user .info small{
    color:#666;
    font-size:12px;
    margin-bottom:2px
}
.ma-user .info span{
    color:#333
}
.discuss-list,.discuss-wrap{
    display:flex;
    flex-direction:column;
    gap:2rem;
    width:100%
}
.discuss-wrap{
    margin-top:2rem;
    padding:0
}
.d-item{
    width:100%;
    margin-bottom:1rem
}
.d-item .info{
    width:100%;
    min-width:0
}
.d-item .text{
    word-wrap:break-word;
    overflow-wrap:break-word;
    max-width:100%
}
.d-item .comment-bottom{
    width:100%;
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap
}
.d-item .comment-bottom .btn-xs{
    white-space:nowrap;
    flex-shrink:0
}
.d-item .comment-bottom .btn-comment.active,.d-item .comment-bottom .btn-xs:hover{
    transform:translateY(-1px)
}
.ma-input{
    width:100%
}
.ma-input .v-form-control{
    width:100%;
    min-height:80px;
    resize:vertical
}
.ma-buttons{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
    justify-content:flex-start
}
.ma-buttons .btn{
    flex-shrink:0
}
.ma-buttons .v-toggle{
    margin-right:.5rem
}
.ma-buttons .btn-gif{
    margin-left:.25rem
}
.d-item .replies-wrap,.d-item .replies-wrap .replies,.limit-wrap{
    width:100%
}
.group-react{
    display:flex;
    align-items:center;
    flex-wrap:wrap
}
.group-react .item{
    flex-shrink:0
}
.child-discuss{
    width:100%;
    margin:0
}
.emo-list .el-item:hover,.gif-list .gl-item:hover{
    background-color:hsla(0,0%,100%,.06)
}
.gr-admin>span{
    background:linear-gradient(65deg,#f7c325,#fff)
}
.gr-admin>.gr-tag{
    border-color:#f7c325;
    color:#f7c325;
    background-color:rgba(254,191,0,.38)
}
.audioplayer-bar-loaded,.audioplayer-bar:before,.audioplayer-volume-adjust>div{
    background-color:hsla(0,0%,100%,.06)
}
.wc-main .wm-info .info{
    width:400px
}
.watch-player .player-ratio{
    position:relative;
    border-radius:.75rem;
    box-shadow:var(--shadow-large)
}
.watch-player .player-ratio .ratio{
    border-radius:.75rem .75rem 0 0;
    overflow:hidden;
    background-color:#08080a
}
.item-focus.is-on{
    z-index:101!important
}
.focus-backdrop{
    display:none
}
.v-dropdown-menu .dropdown-blank,.v-dropdown-menu .dropdown-item{
    font-size:13px;
    padding:.4rem 1rem;
    display:flex;
    align-items:center;
    gap:.6rem
}
.topics-grid{
    grid-template-columns:repeat(7,1fr)
}
.topics-grid .row-topic{
    background:radial-gradient(at left top,hsla(0,0%,100%,.8) 30%,hsla(0,100%,72%,.79) 100%)
}
.noti-wrap{
    background-color:hsla(0,0%,100%,.02)
}
.noti-wrap .h-item{
    color:var(--text-base)
}
.noti-wrap .h-item.new,.noti-wrap .h-item:hover{
    background-color:hsla(0,0%,100%,.02)
}
.noti-wrap .h-item.new:hover{
    background-color:hsla(0,0%,100%,.03)
}
.noti-dropdown .dropdown-top{
    border-bottom:1px solid hsla(0,0%,100%,.06)
}
.noti-dropdown .dropdown-bottom{
    border-top:1px solid hsla(0,0%,100%,.06)
}
.cards-boxed .row-tabs a,.range-eps>.item,.sche-time .item-time.active,.sche-timeline .st-row:before{
    background-color:hsla(0,0%,100%,.06)
}
#body-load{
    animation:body-load-effect 1.5s forwards
}
#body-load .bl-logo{
    animation:logo-load 1.5s forwards
}
.v-dropdown-menu.bg-dark.user-dropdown{
    background-color:#272c43!important
}
.swiper-fade .swiper-slide{
    pointer-events:none;
    transition-property:opacity
}
.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{
    pointer-events:auto
}
div[data-ntpc=YouTubeEmbed]{
    width:100%!important;
    height:100%!important
}
.custom-dropdown.dropdown-toggle:after{
    display:none
}
.btn-gif{
    background-color:transparent;
    border:1px solid hsla(0,0%,100%,.19);
    transition:all .3s ease
}
.btn-gif,.btn-gif:hover{
    color:var(--primary-text)
}
.btn-gif:hover{
    background-color:hsla(0,0%,100%,.06);
    border-color:hsla(0,0%,100%,.31)
}
.btn-gif.active{
    background-color:#3556b6;
    border-color:#3556b6;
    color:var(--primary-text)
}
.actor-sidebar .tag-classic.ophim-badge-lang:before{
    content:none!important
}
@media screen and (max-width:640px){
    .cards-row.wide,.container,.detail-container{
        padding:0 16px
    }
    .top-slide-wrap .slide-url{
        bottom:60px
    }
    .big-slide-wrapper .slide-elements .cover-fade{
        height:200px!important
    }
    .fluid-gap{
        gap:24px
    }
    .cards-row .row-header{
        min-height:32px;
        margin-bottom:.75rem
    }
    .cards-row .row-header .category-name{
        font-size:1.6em
    }
    .sw-cover .h-item{
        padding:.75rem 0
    }
    .sw-cover .v-thumbnail.v-thumbnail-hoz{
        padding-bottom:56%
    }
    .sw-cover .h-item .info .info-line{
        display:none
    }
    .item-title{
        font-size:13px;
        font-weight:400
    }
    .sw-cover .h-item .v-thumb-m{
        display:none
    }
    .sw-cover .h-item .v-thumb-m .v-thumbnail{
        border-radius:.2rem
    }
    .sw-actors-recent .sw-actor{
        padding:.5rem 0 1rem
    }
    .topics-line .topic-item{
        gap:.4rem;
        padding:.6rem;
        text-align:center;
        background-color:transparent!important
    }
    .topics-line .topic-item>.primary-text{
        color:#000
    }
    .topics-line .topic-item .inc-icon{
        width:20px;
        height:20px;
        color:var(--primary-color)
    }
    .top-slide-main .safe-area{
        height:calc(100% - 60px)!important
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        padding-bottom:60%;
        opacity:.8
    }
    .top-slide-wrap .swiper-slide .hl-tags.mb-4,.top-slide-wrap .swiper-slide .touch{
        display:none
    }
    .top-slide-wrap .swiper-slide .hl-tags{
        justify-content:center;
        gap:6px
    }
    .top-slide-wrap .swiper-slide .hl-tags>div:nth-child(n+6){
        display:none
    }
    .detail-more .hl-tags .tag-classic,.detail-more .hl-tags .tag-model,.slide-content .hl-tags .tag-classic,.slide-content .hl-tags .tag-model{
        height:22px;
        font-size:11px;
        padding:0 .4rem
    }
    .detail-more .hl-tags{
        gap:6px
    }
    .top-slide-wrap .top-slide-main{
        height:350px
    }
    .top-slide-wrap .swiper-slide .slide-content .media-title{
        margin-bottom:.75rem;
        font-size:1.6em
    }
    .top-slide-wrap .top-slide-main .slide-content{
        text-align:center;
        padding:0 20px
    }
    .top-slide-wrap .top-slide-small{
        width:100%!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        padding:2rem 0 1rem;
        background:#191b24;
        background:linear-gradient(0deg,#191b24,rgba(25,27,36,0))
    }
    .top-slide-wrap .top-slide-small .swiper-slide{
        border-color:hsla(0,0%,100%,.3)
    }
    .top-slide-wrap .top-slide-small .swiper-wrapper{
        justify-content:center;
        gap:.2rem
    }
    #wrapper{
        padding-bottom:5rem
    }
    .sw-item .info-v.w-chart .number{
        font-size:2em;
        width:30px
    }
    .sw-item .info-v.w-chart{
        padding-left:36px
    }
    .sw-item .info-v.w-chart .info-line{
        display:none
    }
    .footer-elements{
        font-size:12px;
        padding:2rem 0
    }
    .sl-band{
        margin-bottom:2rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(3,1fr);
        column-gap:.5rem;
        row-gap:1.5rem
    }
    .filter-elements{
        border:none;
        border-top:1px solid var(--border-color);
        margin:-15px -20px 3rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(3,1fr);
        column-gap:.6rem;
        row-gap:1.5rem;
        font-size:13px
    }
    .actors-grid-wrapper .v-item{
        gap:.6rem
    }
    .actors-grid-wrapper .v-item .info .item-title{
        font-size:1em
    }
    .v-actor-large{
        width:80px;
        height:80px
    }
    .top-slide-category{
        height:470px
    }
    .top-slide-category .slide-content .media-title{
        font-size:1.6em
    }
    .de-eps.is-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem
    }
    .de-eps.is-grid.is-simple{
        grid-template-columns:repeat(3,1fr);
        gap:.6rem!important
    }
    .cg-body-box.is-eps .box-header{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem
    }
    .cg-body-box.is-eps .box-header .v-toggle{
        top:5px
    }
    .cg-body-box.is-eps .box-header .flex-grow-1{
        display:none
    }
    .season-dropdown>.line-center{
        border-right:none;
        font-size:1.3em
    }
    .heading-md{
        font-size:1.4em
    }
    .heading-sm{
        font-size:1.2em
    }
    .dm-bar .elements .button-play{
        font-size:16px;
        padding:0 1.4rem;
        height:50px;
        min-height:auto
    }
    .pin-new{
        bottom:-1px;
        border-radius:.3rem .3rem 0 0
    }
    .pin-new .line-center{
        line-height:1.3
    }
    .pin-new .line-center.line-lt span:before{
        content:"LT."
    }
    .pin-new .line-center.line-tm span:before{
        content:"TM."
    }
    .pin-new .line-center.line-pd span:before{
        content:"PĐ."
    }
    .pin-new2 .line-center.line-pd{
        display:none
    }
    .de-actors,.gallery-row.is-video{
        grid-template-columns:repeat(2,1fr)
    }
    .gallery-row.is-photo{
        grid-template-columns:repeat(4,1fr)
    }
    .cg-tabs{
        margin:0 -16px
    }
    .cg-tabs .nav-tabs{
        padding:0 16px
    }
    .cg-body-box{
        padding:30px 0
    }
    .ac-side .detail-more,.ds-info .detail-more{
        padding:0;
        background-color:transparent;
        border-radius:0
    }
    .watch-player .wp-bread .heading-sm{
        font-size:14px
    }
    .watch-player .wp-bread{
        margin-bottom:0;
        margin-top:1rem
    }
    .watch-player{
        display:flex;
        flex-direction:column-reverse;
        width:100%;
        padding:0 16px
    }
    .wc-main,.wc-side{
        padding:20px 16px
    }
    .cards-grid-wrapper .sw-item .info,.time-row-cards .sw-item .info{
        min-height:auto
    }
    .v-filter .fe-row .fe-results{
        font-size:13px
    }
    .row-topic{
        padding:2rem 1rem
    }
    .row-topic .intro .inc-icon{
        width:30px;
        height:30px
    }
    .row-topic .last-card{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem;
        column-gap:.6rem
    }
    .rate-emo{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        background-color:transparent;
        padding:0
    }
    .rate-emo .item-v{
        flex-direction:row;
        border-radius:.4rem;
        background-color:rgba(0,0,0,.3)
    }
    .rate-emo .item-v .inc-icon{
        width:30px;
        height:30px;
        margin:0
    }
    .dm-bar .ro-rating .a-rate{
        display:none
    }
    .watch-player .player-ratio{
        margin:-2rem -16px 0
    }
    .dashboard-container{
        padding:0 16px
    }
    .dcc-side .heading-sm{
        padding-bottom:0
    }
    .sw-cover .info{
        text-align:center
    }
    .cards-row.fixed{
        padding:0 20px
    }
    .article-body{
        font-size:14px
    }
    .d-item .user-avatar{
        width:40px;
        height:40px
    }
    .d-item .replies .user-avatar{
        width:30px;
        height:30px
    }
    .range-eps{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        margin:0 0 2rem
    }
    .range-eps .item{
        min-width:auto
    }
    .sche-timeline .st-row .items{
        grid-template-columns:repeat(1,1fr)
    }
    .current-time{
        display:none
    }
    .sche-time .item-time{
        font-size:12px;
        padding:.7rem 1rem;
        gap:4px
    }
    .sche-time .item-time .day{
        font-size:14px
    }
    .sche-time .item-time .time span{
        font-size:0;
        padding:0;
        border:none;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color:var(--primary-color)
    }
    .sche-timeline .st-row .clock{
        text-align:left;
        width:50px;
        font-size:14px
    }
    .avatar-list{
        grid-template-columns:repeat(3,1fr)
    }
    .sw-cover.cover-fade .info{
        text-align:left
    }
    .sw-cover.cover-fade .info .description{
        display:none
    }
    .topics-grid{
        gap:.5rem
    }
    .topics-grid .row-topic{
        padding:1rem!important
    }
    .topics-grid .row-topic .intro{
        min-height:50px!important;
        justify-content:center!important;
        align-items:flex-start!important
    }
    .topics-grid .row-topic .intro .info{
        display:none
    }
    .topics-grid .row-topic .intro .heading-md{
        font-size:1.2em;
        line-height:1.3;
        flex-grow:unset
    }
    .more-topic .intro .heading-md{
        font-size:1.1em!important;
        line-height:1.4!important
    }
    .topics-grid .more-topic .intro{
        align-items:center!important
    }
    .topics-list.single{
        margin:0 -16px;
        padding:1rem;
        gap:1rem;
        border-radius:.6rem
    }
    .topics-list.single .row-topic .intro .heading-md{
        font-size:1.5em!important;
        letter-spacing:0!important
    }
    .topics-list.single .row-topic .intro .info .line-center{
        padding:.6rem 1rem!important;
        font-size:16px
    }
    .topics-list.single .row-topic .intro .info .line-center span{
        display:none
    }
    .topics-more>.line-center{
        gap:.5rem!important;
        flex-direction:column;
        align-items:flex-start
    }
    #row-new{
        margin-top:1rem
    }
    .topics-grid .row-topic:hover{
        top:auto
    }
    .de-type{
        grid-template-columns:repeat(1,1fr)
    }
    .de-eps.is-simple .item{
        height:42px
    }
    .schedule-eps .item .inc-icon{
        width:30px;
        height:30px;
        left:12px
    }
    .login-code .form-control{
        padding:.6rem 0;
        font-size:1.6em;
        border-width:3px!important
    }
    .tv-checked img{
        width:160px
    }
    .pc-coming{
        font-size:11px;
        padding:0 0 0 .5rem;
        width:60px;
        background:none!important;
        color:#ffd875!important
    }
}
@media screen and (max-width:1599px){
    header .header-elements{
        padding:0 20px;
        gap:1.5rem
    }
    .cards-row.wide,.container{
        padding:0 20px
    }
    #logo img{
        height:40px
    }
    #main_menu,#main_user{
        gap:.5rem
    }
    #main_user .button-user{
        min-width:125px;
        padding:.5rem .8rem
    }
    #main_menu .menu-item{
        padding:0 .7rem;
        font-size:13px
    }
    .el-group{
        gap:.6rem
    }
    .big-slide-wrapper .slide-content{
        padding:2rem;
        max-width:600px
    }
    .big-slide-wrapper .top-slide-main{
        height:460px
    }
    .big-slide-wrapper .top-slide-small{
        margin:-50px auto 0
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper{
        gap:1rem
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .info{
        padding:.6rem;
        font-size:12px;
        height:100px
    }
    .footer-elements{
        padding:2rem;
        height:auto;
        min-height:auto
    }
    .footer-elements .footer-icon{
        display:none
    }
    .topics-line{
        gap:1rem
    }
    .topics-line .topic-item{
        flex-direction:column;
        gap:.75rem;
        font-size:12px
    }
    .topics-line .topic-item .new{
        display:none
    }
    .top-slide-wrap .top-slide-main:before{
        height:100px
    }
    .top-slide-wrap .top-slide-main .slide-content{
        padding:0 30px 60px;
        max-width:600px
    }
    .top-slide-wrap .top-slide-small{
        right:30px;
        bottom:172px
    }
    .top-slide-wrap .sound-mute{
        right:30px;
        bottom:242px
    }
    .cards-row .row-header .category-name{
        font-size:1.8em
    }
    .cards-row .row-header .inc-icon{
        width:30px;
        height:30px
    }
    .cards-grid-wrapper{
        gap:1rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(8,1fr);
        gap:1.2rem;
        row-gap:2rem
    }
    .top-slide-category .cover-fade{
        height:calc(100% - 180px)!important
    }
    .de-eps.is-grid{
        column-gap:1rem;
        grid-template-columns:repeat(4,1fr)
    }
    .de-eps.is-simple{
        grid-template-columns:repeat(6,1fr)
    }
    .detail-container{
        margin-top:-100px
    }
    .cg-body-box .box-header{
        margin-bottom:1.5rem
    }
    .de-actors,.de-suggest{
        grid-template-columns:repeat(5,1fr)
    }
    .de-actors{
        row-gap:1.5rem;
        column-gap:.6rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(6,1fr)
    }
    :root{
        --padding-base:30px
    }
    .wc-main .wm-info .desc-line{
        padding-left:0
    }
    .watch-container{
        padding:0
    }
    .actor-container .ac-side{
        width:340px
    }
    .time-row-cards{
        grid-template-columns:repeat(5,1fr)
    }
    .row-topic .last-card{
        grid-template-columns:repeat(6,1fr)
    }
    .row-topic .last-card .sw-item:nth-child(n+7){
        display:none
    }
    .topics-grid{
        grid-template-columns:repeat(6,1fr)
    }
    .more-topic{
        background:hsla(0,0%,100%,.06)!important;
        padding:1rem!important
    }
    .more-topic .mask{
        display:none
    }
    .more-topic .intro{
        min-height:auto!important
    }
    .more-topic .intro .heading-md{
        font-size:1.3em!important;
        line-height:1.8!important
    }
    .topics-list.single .row-topic .row-content{
        width:calc(100% - 200px)
    }
    .topics-list.single .row-topic .intro .heading-md{
        font-size:1.8em!important
    }
    .it-col.this-03{
        display:none
    }
    .app-download{
        border-right:none;
        padding-right:0
    }
}
@media screen and (min-width:641px){
    .v-thumbnail-hoz .pin-new{
        left:120px;
        transform:none;
        right:auto
    }
    .sw-cover.single .v-thumbnail-hoz .pin-new{
        right:auto;
        left:1rem
    }
}
@media screen and (max-width:640px){
    .cards-row.wide,.container,.detail-container{
        padding:0 16px
    }
    .top-slide-wrap .slide-url{
        bottom:60px
    }
    .big-slide-wrapper .slide-elements .cover-fade{
        height:200px!important
    }
    .fluid-gap{
        gap:24px
    }
    .cards-row .row-header{
        min-height:32px;
        margin-bottom:.75rem
    }
    .cards-row .row-header .category-name{
        font-size:1.6em
    }
    .sw-cover .h-item{
        padding:.75rem 0
    }
    .sw-cover .v-thumbnail.v-thumbnail-hoz{
        padding-bottom:56%
    }
    .sw-cover .h-item .info .info-line{
        display:none
    }
    .item-title{
        font-size:13px;
        font-weight:400
    }
    .sw-cover .h-item .v-thumb-m{
        display:none
    }
    .sw-cover .h-item .v-thumb-m .v-thumbnail{
        border-radius:.2rem
    }
    .sw-actors-recent .sw-actor{
        padding:.5rem 0 1rem
    }
    .topics-line .topic-item{
        gap:.4rem;
        padding:.6rem;
        text-align:center;
        background-color:transparent!important
    }
    .topics-line .topic-item>.primary-text{
        color:#000
    }
    .topics-line .topic-item .inc-icon{
        width:20px;
        height:20px;
        color:var(--primary-color)
    }
    .top-slide-main .safe-area{
        height:calc(100% - 60px)!important
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        padding-bottom:60%;
        opacity:.8
    }
    .top-slide-wrap .swiper-slide .hl-tags.mb-4,.top-slide-wrap .swiper-slide .touch{
        display:none
    }
    .top-slide-wrap .swiper-slide .hl-tags{
        justify-content:center;
        gap:6px
    }
    .top-slide-wrap .swiper-slide .hl-tags>div:nth-child(n+6){
        display:none
    }
    .detail-more .hl-tags .tag-classic,.detail-more .hl-tags .tag-model,.slide-content .hl-tags .tag-classic,.slide-content .hl-tags .tag-model{
        height:22px;
        font-size:11px;
        padding:0 .4rem
    }
    .slide-content .hl-tags .ophim-badge-lang:before,.slide-content .hl-tags .ophim-badge-year:before{
        display:none
    }
    .detail-more .hl-tags{
        gap:6px
    }
    .top-slide-wrap .top-slide-main{
        height:350px
    }
    .top-slide-wrap .swiper-slide .slide-content .media-title{
        margin-bottom:.75rem;
        font-size:1.6em
    }
    .top-slide-wrap .top-slide-main .slide-content{
        text-align:center;
        padding:0 20px
    }
    .top-slide-wrap .top-slide-small{
        width:100%!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        padding:2rem 0 1rem;
        background:#191b24;
        background:linear-gradient(0deg,#191b24,rgba(25,27,36,0))
    }
    .top-slide-wrap .top-slide-small .swiper-slide{
        border-color:hsla(0,0%,100%,.3)
    }
    .top-slide-wrap .top-slide-small .swiper-wrapper{
        justify-content:center;
        gap:.2rem
    }
    #wrapper{
        padding-bottom:5rem
    }
    .sw-item .info-v.w-chart .number{
        font-size:2em;
        width:30px
    }
    .sw-item .info-v.w-chart{
        padding-left:36px
    }
    .sw-item .info-v.w-chart .info-line{
        display:none
    }
    .footer-elements{
        font-size:12px;
        padding:2rem 0
    }
    .sl-band{
        margin-bottom:2rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(3,1fr);
        column-gap:.5rem;
        row-gap:1.5rem
    }
    .filter-elements{
        border:none;
        border-top:1px solid var(--border-color);
        margin:-15px -20px 3rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(3,1fr);
        column-gap:.6rem;
        row-gap:1.5rem;
        font-size:13px
    }
    .actors-grid-wrapper .v-item{
        gap:.6rem
    }
    .actors-grid-wrapper .v-item .info .item-title{
        font-size:1em
    }
    .v-actor-large{
        width:80px;
        height:80px
    }
    .top-slide-category{
        height:470px
    }
    .top-slide-category .slide-content .media-title{
        font-size:1.6em
    }
    .de-eps.is-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem
    }
    .de-eps.is-grid.is-simple{
        grid-template-columns:repeat(3,1fr);
        gap:.6rem!important
    }
    .cg-body-box.is-eps .box-header{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem
    }
    .cg-body-box.is-eps .box-header .v-toggle{
        top:5px
    }
    .cg-body-box.is-eps .box-header .flex-grow-1{
        display:none
    }
    .season-dropdown>.line-center{
        border-right:none;
        font-size:1.3em
    }
    .heading-md{
        font-size:1.4em
    }
    .heading-sm{
        font-size:1.2em
    }
    .dm-bar .elements .button-play{
        font-size:16px;
        padding:0 1.4rem;
        height:50px;
        min-height:auto
    }
    .pin-new{
        bottom:-1px;
        border-radius:.3rem .3rem 0 0
    }
    .pin-new .line-center{
        line-height:1.3
    }
    .pin-new .line-center.line-lt span:before{
        content:"LT."
    }
    .pin-new .line-center.line-tm span:before{
        content:"TM."
    }
    .pin-new .line-center.line-pd span:before{
        content:"PĐ."
    }
    .pin-new2 .line-center.line-pd{
        display:none
    }
    .de-actors,.gallery-row.is-video{
        grid-template-columns:repeat(2,1fr)
    }
    .gallery-row.is-photo{
        grid-template-columns:repeat(4,1fr)
    }
    .cg-tabs{
        margin:0 -16px
    }
    .cg-tabs .nav-tabs{
        padding:0 16px
    }
    .cg-body-box{
        padding:30px 0
    }
    .ac-side .detail-more,.ds-info .detail-more{
        padding:0;
        background-color:transparent;
        border-radius:0
    }
    .watch-player .wp-bread .heading-sm{
        font-size:14px
    }
    .watch-player .wp-bread{
        margin-bottom:0;
        margin-top:1rem
    }
    .watch-player{
        display:flex;
        flex-direction:column-reverse;
        width:100%;
        padding:0 16px
    }
    .wc-main,.wc-side{
        padding:20px 16px
    }
    .cards-grid-wrapper .sw-item .info,.time-row-cards .sw-item .info{
        min-height:auto
    }
    .v-filter .fe-row .fe-results{
        font-size:13px
    }
    .row-topic{
        padding:2rem 1rem
    }
    .row-topic .intro .inc-icon{
        width:30px;
        height:30px
    }
    .row-topic .last-card{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem;
        column-gap:.6rem
    }
    .rate-emo{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        background-color:transparent;
        padding:0
    }
    .rate-emo .item-v{
        flex-direction:row;
        border-radius:.4rem;
        background-color:rgba(0,0,0,.3)
    }
    .rate-emo .item-v .inc-icon{
        width:30px;
        height:30px;
        margin:0
    }
    .dm-bar .ro-rating .a-rate{
        display:none
    }
    .watch-player .player-ratio{
        margin:-2rem -16px 0
    }
    .dashboard-container{
        padding:0 16px
    }
    .dcc-side .heading-sm{
        padding-bottom:0
    }
    .sw-cover .info{
        text-align:center
    }
    .cards-row.fixed{
        padding:0 20px
    }
    .article-body{
        font-size:14px
    }
    .d-item .user-avatar{
        width:40px;
        height:40px
    }
    .d-item .replies .user-avatar{
        width:30px;
        height:30px
    }
    .range-eps{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        margin:0 0 2rem
    }
    .range-eps .item{
        min-width:auto
    }
    .sche-timeline .st-row .items{
        grid-template-columns:repeat(1,1fr)
    }
    .current-time{
        display:none
    }
    .sche-time .item-time{
        font-size:12px;
        padding:.7rem 1rem;
        gap:4px
    }
    .sche-time .item-time .day{
        font-size:14px
    }
    .sche-time .item-time .time span{
        font-size:0;
        padding:0;
        border:none;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color:var(--primary-color)
    }
    .sche-timeline .st-row .clock{
        text-align:left;
        width:50px;
        font-size:14px
    }
    .avatar-list{
        grid-template-columns:repeat(3,1fr)
    }
    .sw-cover.cover-fade .info{
        text-align:left
    }
    .sw-cover.cover-fade .info .description{
        display:none
    }
    .topics-grid{
        gap:.5rem
    }
    .topics-grid .row-topic{
        padding:1rem!important
    }
    .topics-grid .row-topic .intro{
        min-height:50px!important;
        justify-content:center!important;
        align-items:flex-start!important
    }
    .topics-grid .row-topic .intro .info{
        display:none
    }
    .topics-grid .row-topic .intro .heading-md{
        font-size:1.2em;
        line-height:1.3;
        flex-grow:unset
    }
    .more-topic .intro .heading-md{
        font-size:1.1em!important;
        line-height:1.4!important
    }
    .topics-grid .more-topic .intro{
        align-items:center!important
    }
    .topics-list.single{
        margin:0 -16px;
        padding:1rem;
        gap:1rem;
        border-radius:.6rem
    }
    .topics-list.single .row-topic .intro .heading-md{
        font-size:1.5em!important;
        letter-spacing:0!important
    }
    .topics-list.single .row-topic .intro .info .line-center{
        padding:.6rem 1rem!important;
        font-size:16px
    }
    .topics-list.single .row-topic .intro .info .line-center span{
        display:none
    }
    .topics-more>.line-center{
        gap:.5rem!important;
        flex-direction:column;
        align-items:flex-start
    }
    #row-new{
        margin-top:1rem
    }
    .topics-grid .row-topic:hover{
        top:auto
    }
    .de-type{
        grid-template-columns:repeat(1,1fr)
    }
    .de-eps.is-simple .item{
        height:42px
    }
    .schedule-eps .item .inc-icon{
        width:30px;
        height:30px;
        left:12px
    }
    .login-code .form-control{
        padding:.6rem 0;
        font-size:1.6em;
        border-width:3px!important
    }
    .tv-checked img{
        width:160px
    }
    .pc-coming{
        font-size:11px;
        padding:0 0 0 .5rem;
        width:60px;
        background:none!important;
        color:#ffd875!important
    }
}
.fade-in{
    opacity:0;
    filter:blur(10px);
    transition:opacity .5s ease-in,filter .5s ease-in
}
.fade-in.visible{
    opacity:1;
    filter:blur(0)
}
.player-control .ep-current{
    width:160px!important
}
.v-pagination .page-current .v-form-control{
    width:60px!important
}
.heading-topic{
    -webkit-background-clip:text!important;
    -webkit-text-fill-color:transparent
}
.detail-more.show{
    display:block!important
}
.text-gradient{
    -webkit-background-clip:text!important
}
.de-cw{
    grid-template-columns:repeat(5,1fr)
}
@keyframes fadeInUp{
    0%{
        opacity:0;
        transform:translateY(30px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
.effect-fade-in{
    animation:fadeInUp .5s ease-out forwards
}
#search .remove-icon{
    display:block!important
}
.comm-title{
    line-height:1.5;
    font-size:16px!important
}
.switch-logo{
    margin-bottom:2rem;
    text-align:center
}
.switch-logo a img{
    height:50px;
    width:auto
}
.switch-modal{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:100%;
    min-height:100vh;
    background:#212a54;
    background:linear-gradient(113deg,#212a54,#192143 51%,#212a54)
}
.switch-modal .modal-dialog{
    max-width:none;
    width:680px
}
.switch-modal .modal-dialog .modal-content{
    padding:2rem;
    color:hsla(0,0%,100%,.53);
    line-height:1.7;
    background-color:transparent!important
}
.switch-modal .modal-dialog .modal-content p{
    line-height:1.7;
    margin-bottom:0!important
}
.ver-sbs{
    margin-top:2rem;
    display:block;
    display:flex;
    align-items:stretch;
    justify-content:space-between
}
.ver-sbs .ver-item{
    flex:1 1;
    padding:2rem;
    font-size:13px;
    border-radius:.75rem;
    background-color:#4e62b4;
    color:#fff
}
.ver-sbs .ver-item:first-of-type{
    margin-right:2rem
}
.ver-sbs .ver-item .btn-lg i{
    font-size:20px
}
.switch-notice{
    margin-top:3rem;
    padding:0 2rem
}
.switch-notice p{
    line-height:1.8!important
}
.switch-notice .s-qr{
    margin-right:1rem;
    padding:10px;
    background-color:#fff;
    border-radius:.4rem
}
.switch-notice .s-qr img{
    width:70px;
    height:70px
}
@media screen and (max-width:800px){
    .switch-modal .modal-dialog .modal-content{
        padding:20px
    }
    .ver-sbs{
        flex-direction:column;
        margin-top:1rem
    }
    .ver-sbs .ver-item{
        padding:1.5rem
    }
    .ver-sbs .ver-item:first-of-type{
        margin-right:0;
        margin-bottom:1.5rem
    }
    .switch-notice{
        margin-top:2rem;
        padding:0
    }
    .switch-notice p{
        line-height:1.5!important
    }
}
.swiper{
    overflow:hidden!important
}
@media screen and (max-width:989px){
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .v-thumbnail{
        display:none
    }
}
@media screen and (max-width:1279px){
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .v-thumbnail{
        padding-bottom:100%
    }
}
body.focus-mod .focus-backdrop{
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#08080a;
    z-index:100
}
.live-ep,.live-tag{
    display:inline-flex;
    background-color:#fff;
    border-radius:.2rem;
    font-size:12px;
    color:#000;
    font-weight:600;
    line-height:20px;
    padding:0 5px
}
.body_live{
    position:relative
}
.body_live header{
    position:relative;
    top:auto;
    left:auto;
    right:auto
}
.body_live header #logo img{
    height:40px
}
.body_live header .header-elements{
    padding:0 1.5rem;
    height:80px
}
.body_live #live{
    display:flex;
    width:100%;
    min-height:calc(100vh - 400px)
}
.live-category .v-dropdown-menu.bg-dark{
    background-color:rgba(25,28,41,.95)!important
}
.live-category .v-pagination .btn-secondary{
    background-color:hsla(0,0%,100%,.07)!important;
    border-color:transparent!important
}
.live_layout{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    overflow:auto;
    position:relative;
    background-color:#000
}
.l_content,.l_sidebar{
    height:calc(100vh - 80px);
    flex-shrink:0
}
.live_layout .l_content{
    width:calc(100% - 440px);
    display:flex;
    flex-direction:column;
    gap:0;
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none
}
.live_layout .l_content::-webkit-scrollbar{
    display:none
}
.live_layout .l_watch{
    height:calc(100vh - 80px);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.live_layout .l_sidebar{
    width:440px;
    padding:1rem 1rem 1rem 0;
    display:flex;
    flex-direction:column
}
.lw-bottom,.lw-header{
    position:relative;
    background-color:rgba(0,0,0,.69);
    flex-shrink:0;
    height:70px;
    padding:0 1.5rem;
    display:flex;
    align-items:center;
    gap:.5rem
}
.lw-header{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:4;
    justify-content:flex-start
}
.lw-header .lw-header-rows{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    margin-left:.2rem;
    flex-grow:1
}
.lw-header .lw-header-rows .live-tag{
    font-size:11px!important;
    line-height:18px!important;
    padding:0 4px!important
}
.lw-header .lw-header-rows .live-source .tag-small{
    font-size:12px
}
.lw-header .live-name{
    color:#fff;
    font-size:1.2em;
    line-height:1.4;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:.25rem
}
.lw-header .live-logo img{
    height:40px;
    width:auto
}
.live-tag,.lw-header .live-back{
    display:flex
}
.live-tag{
    background-color:#cf1717;
    color:#fff;
    align-items:center;
    gap:.3rem
}
.live-tag.blink:before{
    content:"";
    width:6px;
    height:6px;
    background-color:#fff;
    display:block;
    border-radius:50%;
    animation:live-flash 1s infinite
}
.lw-header .alias-name{
    color:var(--primary-color);
    font-size:1.1em;
    font-weight:400;
    line-height:1.3
}
.lw-player{
    flex-grow:1;
    display:flex;
    align-items:center;
    background-color:#000;
    position:relative
}
.lw-player .video-frame{
    position:relative;
    flex-grow:1;
    width:100%;
    height:100%
}
.lw-player .video-frame .back-cover,.lw-player .video-frame iframe,.lw-player .video-frame video{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%!important;
    height:100%!important;
    object-fit:contain
}
.lw-player .video-frame .back-cover{
    background-size:cover;
    opacity:.5
}
#myVideo{
    object-fit:cover
}
.lw-bottom{
    height:80px;
    justify-content:space-between
}
.lw-bottom .flex-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    width:100%
}
.live-owner{
    gap:.75rem;
    color:#fff;
    flex-grow:1
}
.live-owner .user-avatar,.user-avatar.o-live{
    width:46px;
    height:46px
}
.user-avatar.o-live{
    border:2px solid red;
    animation:live-avatar 1s infinite
}
.user-avatar.o-live img{
    transform:scale(.8);
    border-radius:50%
}
@keyframes live-avatar{
    0%{
        transform:scale(1)
    }
    50%{
        transform:scale(1.1)
    }
    to{
        transform:scale(1)
    }
}
@keyframes countdown{
    0%{
        filter:blur(2px)
    }
    50%{
        filter:blur(0)
    }
    to{
        filter:blur(2px)
    }
}
@keyframes live-flash{
    0%{
        opacity:1
    }
    50%{
        opacity:0
    }
    to{
        opacity:1
    }
}
.live-owner .o-info .user-name{
    font-weight:600;
    line-height:1.4;
    margin-bottom:.1rem
}
.live-owner .o-info .created{
    font-size:.85em;
    line-height:1.4;
    color:var(--text-base)
}
.live-countdown,.live-trailer{
    font-size:16px;
    position:absolute;
    z-index:3;
    bottom:2rem;
    left:2rem;
    width:100%;
    max-width:440px;
    padding:2rem;
    background-color:rgba(0,0,0,.53);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    color:#fff;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    border-radius:1.5rem;
    border:1px solid hsla(0,0%,100%,.33);
    box-shadow:0 20px 20px 10px rgba(0,0,0,.2)
}
.live-countdown .text{
    font-size:20px
}
.live-countdown .count-start{
    margin-top:1rem
}
.live-countdown .count-start #countdown{
    flex-shrink:0;
    font-size:24px;
    font-weight:700;
    line-height:1.2;
    width:210px;
    padding:0;
    height:50px;
    border-radius:.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:#fff;
    color:#000;
    animation:countdown 1s infinite
}
.live-countdown .count-start .remind{
    height:52px;
    padding:0 1rem;
    border-radius:.6rem;
    font-size:16px;
    border:1px solid hsla(0,0%,100%,.4);
    justify-content:center;
    gap:.75rem;
    cursor:pointer
}
.live-countdown .count-start .remind.active{
    color:var(--primary-text);
    border-color:var(--primary-color)
}
.live-countdown .count-start .btn-lg{
    font-size:16px
}
.live-countdown .buttons{
    display:flex;
    align-items:center;
    gap:1rem
}
.live-countdown .buttons>.btn{
    flex:1 1;
    gap:1rem
}
.live-countdown.center{
    bottom:auto;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    align-items:center;
    text-align:center
}
.live-trailer{
    font-size:14px;
    border-radius:.75rem;
    max-width:none;
    left:auto;
    right:2rem;
    width:auto;
    padding:1rem 1.5rem;
    align-items:center;
    background-color:rgba(0,0,0,.13);
    color:hsla(0,0%,100%,.6);
    border-color:hsla(0,0%,100%,.2)
}
.live-trailer>div{
    white-space:nowrap
}
.live-trailer .text{
    font-weight:600;
    font-size:1.1em;
    color:var(--primary-color);
    max-width:260px
}
.l_detail{
    position:relative;
    padding:2rem 1rem;
    border-top:1px solid hsla(0,0%,100%,.13)
}
.l_detail .ld-source{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:2rem;
    width:100%;
    padding:1.5rem;
    max-width:1500px;
    margin:0 auto
}
.l_detail .ld-source .ld-source-detail{
    width:520px;
    display:flex;
    align-items:flex-start;
    gap:1.5rem
}
.ld-suggest{
    flex-grow:1;
    display:flex;
    align-items:flex-start;
    gap:2rem;
    padding-left:2rem;
    border-left:1px solid hsla(0,0%,100%,.13)
}
.ld-suggest .lds-title{
    max-width:120px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:1rem
}
.lds-items{
    align-items:flex-start;
    gap:1.2rem;
    flex-grow:1
}
.lds-items,.s-live{
    display:flex;
    height:100%
}
.s-live{
    position:relative;
    flex:1 1;
    flex-direction:column;
    justify-content:flex-end
}
.s-live .v-thumbnail{
    position:relative;
    background-color:transparent
}
.s-live .v-thumbnail img{
    mask-image:linear-gradient(0deg,transparent,transparent 10%,#000);
    -webkit-mask-image:linear-gradient(0deg,transparent,transparent 10%,#000)
}
.s-live-user{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:2
}
.s-live-user .live-owner,.s-live-user .live-owner .o-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:100%
}
.s-live-user .live-owner .user-avatar{
    background-color:rgba(0,0,0,.2)
}
.s-live-user .live-owner .name-cut{
    max-width:120px;
    font-size:12px;
    color:var(--text-base);
    font-weight:400
}
.shoutbox{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:0;
    background-color:#111;
    border:1px solid hsla(0,0%,100%,.13);
    border-radius:1rem;
    position:relative;
    z-index:9
}
.shoutbox .sb_header{
    padding:1.5rem;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:1rem
}
.shoutbox .sb_header>div{
    position:relative
}
.shoutbox .sb_header .item-settings{
    cursor:pointer
}
.shoutbox .sb_header .item-clean{
    display:none
}
.shoutbox .sb_body{
    flex-grow:1;
    justify-content:space-between;
    gap:.25rem;
    overflow:hidden
}
.shoutbox .sb_body,.shoutbox .sb_bottom{
    position:relative;
    display:flex;
    flex-direction:column
}
.shoutbox .sb_bottom{
    gap:.75rem;
    padding:1rem 1.5rem;
    flex-shrink:0;
    z-index:3
}
.shoutbox .sb_bottom .is_top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem
}
.shoutbox .sb_bottom .is_top .is_top-button{
    width:70px;
    flex-shrink:0
}
.shoutbox .sb_bottom .is_top .is_top-button .btn{
    height:46px;
    font-weight:500
}
.shoutbox .sb_bottom .is_top .is_top-input{
    flex-grow:1;
    position:relative
}
.shoutbox .sb_bottom .is_bottom{
    font-size:13px;
    color:hsla(0,0%,100%,.4);
    position:relative;
    display:flex;
    align-items:center;
    gap:.5rem
}
.shoutbox .sb_bottom .is_bottom .is_bottom-alert{
    height:24px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:-4px;
    padding:0 4px;
    background-color:#111;
    z-index:2
}
.sb_bottom .row-new{
    position:absolute;
    top:0;
    left:0;
    right:0;
    transform:translateY(-110%);
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center
}
.sb_bottom .row-new .btn-light{
    border:none!important;
    box-shadow:0 0 10px rgba(0,0,0,.2)!important
}
.sb_bottom .row-new .btn-light .icon-new{
    position:relative;
    animation:arrow-down .3s infinite
}
@keyframes arrow-down{
    0%{
        top:-1px
    }
    50%{
        top:1px
    }
    to{
        top:-1px
    }
}
.sb_bottom .row-reply{
    font-size:13px;
    padding:.4rem 36px .4rem .5rem;
    position:relative;
    border-left:4px solid hsla(0,0%,100%,.13);
    background-color:#52514f;
    border-radius:.3rem;
    color:hsla(0,0%,100%,.8);
    margin:-.5rem 0 -.2rem;
    display:none
}
.sb_bottom .row-reply.active{
    display:block
}
.sb_bottom .row-reply .rep-user{
    color:var(--primary-text);
    margin-right:3px
}
.sb_bottom .row-reply .rep-close{
    display:flex;
    width:30px;
    height:100%;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    cursor:pointer
}
.is_top-input .emo{
    position:absolute;
    z-index:2;
    left:0;
    top:50%;
    transform:translateY(-50%)
}
.is_top-input .emo .emo-btn{
    width:40px;
    height:40px;
    font-size:20px;
    color:rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}
.is_top-input .emo .emo-btn:hover{
    color:rgba(0,0,0,.6)
}
.is_top-input .text-left{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    font-size:10px;
    line-height:1;
    padding:.2rem .3rem;
    color:rgba(0,0,0,.4)
}
.is_top-input .chat-input{
    background-color:#fff!important;
    border:1px solid hsla(0,0%,100%,.2)!important;
    min-height:46px;
    color:#000;
    font-size:13px;
    padding-left:40px;
    padding-right:1rem
}
.is_top-input .chat-input::placeholder{
    color:rgba(0,0,0,.53)
}
.is_top-input .chat-input:focus{
    box-shadow:0 0 0 3px rgba(255,216,117,.19)!important
}
.count-time{
    animation:count-time 1s infinite
}
@keyframes count-time{
    0%{
        transform:rotate(0)
    }
    50%{
        transform:rotate(90deg)
    }
    to{
        transform:rotate(180deg)
    }
}
.chat-list{
    flex-grow:1;
    position:relative;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto
}
.chat-row{
    padding:.6rem 1.5rem;
    font-size:14px;
    position:relative
}
.chat-row:hover{
    background-color:hsla(0,0%,100%,.02)
}
.chat-row .user-avatar{
    width:36px;
    height:36px;
    flex-shrink:0;
    margin-top:.1rem
}
.chat-row .info{
    flex-grow:1;
    font-size:13px
}
.chat-row .info .user-name{
    color:#fff;
    font-weight:500;
    gap:.3rem
}
.chat-row .info .time{
    font-size:11px;
    color:hsla(0,0%,100%,.33);
    opacity:0
}
.chat-row .info .pin{
    font-size:.85em;
    color:hsla(0,0%,100%,.33)
}
.chat-row .info .pin svg{
    color:#f8473e
}
.chat-row:hover .info .time{
    opacity:1
}
.chat-row .info .opt-menu{
    position:absolute;
    top:.5rem;
    right:.5rem
}
.chat-row .info .opt{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:3rem;
    background-color:hsla(0,0%,100%,.07);
    cursor:pointer;
    opacity:0
}
.chat-row:hover .info .opt{
    opacity:1
}
.chat-row .info .opt:hover{
    background-color:hsla(0,0%,100%,.13)
}
.chat-row .info .subject{
    font-size:13px;
    line-height:1.5;
    padding-top:1px
}
.chat-row .info .subject img{
    height:auto;
    max-width:200px;
    max-height:140px;
    margin-top:5px;
    object-fit:contain
}
.chat-row .info .reply{
    margin:4px 0;
    font-size:12px;
    padding:.4rem .6rem;
    border-left:3px solid hsla(0,0%,100%,.07);
    background-color:hsla(0,0%,100%,.09);
    color:hsla(0,0%,100%,.8);
    border-radius:.4rem;
    display:flex;
    flex-direction:column;
    gap:4px
}
.chat-row .info .reply>span{
    line-height:1.2;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal!important
}
.chat-row .info .reply>span.rep-subject{
    line-height:1.5;
    -webkit-line-clamp:3
}
.chat-row.blocked,.chat-row.hide{
    color:hsla(0,0%,100%,.33)
}
.chat-row.blocked .user-avatar,.chat-row.hide .user-avatar{
    filter:grayscale(1);
    opacity:.5
}
.chat-row.hide .info .user-name{
    color:hsla(0,0%,100%,.33)!important
}
.chat-row.blocked .info .user-name{
    color:red!important;
    opacity:.5;
    text-decoration:line-through!important
}
.chat-row.blocked .info .subject{
    filter:blur(3px)
}
.chat-notice{
    padding:0 1.5rem;
    margin:.5rem 0;
    width:100%;
    background-color:transparent!important;
    text-align:center
}
.chat-notice.item-start>div{
    background-color:#496532!important;
    color:#fff
}
.chat-notice.item-start>div .text-primary{
    color:#b4ff75!important
}
.chat-notice.item-end>div{
    background-color:#362f20;
    color:hsla(0,0%,100%,.67)
}
.chat-notice.item-join>div{
    background-color:transparent;
    padding:0;
    font-size:12px;
    opacity:.5
}
.chat-notice>div{
    padding:1rem;
    background-color:rgba(34,34,34,.39);
    width:100%;
    border-radius:.6rem
}
.chat-notice>div p{
    margin-bottom:0
}
.chat-pin-area{
    background-color:#0e487a;
    display:flex;
    flex-direction:column
}
.chat-pin-area .chat-row{
    color:hsla(0,0%,100%,.53);
    padding-top:.75rem;
    padding-bottom:.75rem
}
.chat-pin-area .chat-row+.chat-row{
    border:1px solid transparent
}
.v-tabs.v-tabs-min.nav-pills.is-dark .nav-link{
    color:#000!important
}
.v-tabs.v-tabs-min.nav-pills.is-dark .nav-link.active{
    color:#000!important;
    border-color:#000
}
.emo-stickers{
    padding:.5rem 0 0!important
}
.emo-stickers .v-tabs-min{
    padding:.5rem;
    border-top:1px solid rgba(0,0,0,.13)
}
.emo-stickers .nav-link{
    min-width:50px!important;
    text-align:center
}
.emo-stickers .v-tabs.nav-pills .nav-link+.nav-link{
    margin-left:.2rem
}
.sticker-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-width:300px;
    max-height:220px;
    overflow:auto;
    padding:0 .5rem .5rem
}
.sticker-list .sk-item{
    padding:.75rem;
    border-radius:.6rem
}
.sticker-list .sk-item:hover{
    background-color:rgba(0,0,0,.07)
}
.sticker-list .sk-item img{
    width:100%;
    height:100%;
    object-fit:contain
}
.emo-stickers .emo-list{
    padding:0 .5rem .5rem
}
.epr-main{
    margin-top:-.5rem;
    border:none!important
}
.epr-main>div{
    display:none
}
.epr-main .epr-body,.epr-main .epr-header{
    display:block!important
}
.epr-category-nav{
    padding:.1rem .5rem!important
}
.epr-emoji-category-label{
    font-size:13px;
    font-weight:400;
    padding:.3rem 1rem
}
.chat-blank .v-notice{
    background-color:transparent!important
}
.ps__thumb-y{
    background-color:#333
}
.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{
    background-color:#171717;
    width:12px
}
.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{
    background-color:#444;
    width:8px;
    cursor:-webkit-grabbing;
    cursor:grabbing
}
body.js-live-header header{
    display:none
}
body.js-live-header .l_content,body.js-live-header .l_sidebar,body.js-live-header .live_layout .l_watch{
    height:100vh
}
body.js-live-header .lw-header .live-back{
    display:flex
}
body.js-live-chatleft .live_layout{
    flex-direction:row-reverse
}
body.js-live-chatleft .live_layout .l_sidebar{
    padding-left:1rem;
    padding-right:0
}
body.js-live-min .live_layout .l_content{
    width:calc(100% - 350px)
}
body.js-live-min .live_layout .l_sidebar{
    width:350px;
    padding:.5rem
}
body.js-live-min .shoutbox{
    border:none;
    background-color:transparent;
    border-radius:0
}
body.js-live-min .shoutbox .sb_bottom,body.js-live-min .shoutbox .sb_header{
    padding:.75rem .5rem
}
body.js-live-min .lw-player{
    padding:0
}
body.js-live-min .chat-row{
    padding:.6rem .8rem
}
body.js-live-mask .shoutbox{
    background-color:transparent;
    border:none;
    position:absolute;
    top:0;
    right:0;
    bottom:auto;
    height:auto;
    z-index:5;
    opacity:1
}
body.js-live-mask .shoutbox .sb_header{
    display:flex!important;
    padding:1.6rem
}
body.js-live-mask .shoutbox .sb_header .item-settings,body.js-live-mask .shoutbox>div,body.js-live-mask .shoutbox>form{
    display:none
}
body.js-live-mask .live_layout .l_content{
    width:100%
}
body.js-live-mask .live_layout .l_sidebar{
    width:0;
    padding:0
}
body.js-live-mask .lw-player{
    padding:0
}
.lw-player.min-size{
    transform:scale(.8)
}
.live-min{
    cursor:pointer
}
.live-min:hover{
    color:#fff
}
.live-min.active{
    color:var(--primary-text)!important
}
.live-manager{
    height:200px;
    display:flex;
    align-items:center;
    justify-content:center
}
.live-manager .buttons .btn-xl{
    min-height:54px;
    padding:.6rem 1.8rem;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
}
.live-category{
    background-color:var(--footer-bg);
    border-bottom:1px solid hsla(0,0%,100%,.07)
}
.live-category .fluid-gap{
    gap:4rem
}
.live-category .live-background{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:500px;
    width:100%;
    mask-image:linear-gradient(0deg,transparent,#000 80%);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 80%)
}
.live-category .live-background:before,.live-category .live-background img{
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%
}
.live-category .live-background:before{
    content:"";
    background-image:url(../img/dotted.png);
    background-repeat:repeat;
    filter:none;
    z-index:2;
    opacity:.5
}
.live-category .live-background img{
    opacity:1;
    z-index:1;
    object-fit:cover;
    mask-image:linear-gradient(0deg,transparent,#000);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000)
}
.live-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-gap:1.25rem;
    gap:1.25rem;
    grid-row-gap:2rem;
    row-gap:2rem
}
.live-grid.live-grid-big{
    grid-template-columns:repeat(4,1fr)
}
.card-live{
    display:flex;
    flex-direction:column;
    gap:.75rem
}
.card-live .v-thumbnail-hoz{
    padding-bottom:56%;
    border-radius:.6rem
}
.v-thumbnail .live-mask{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:4
}
.card-live .card-live-detail{
    display:flex;
    align-items:flex-start;
    gap:1rem;
    flex-direction:row
}
.card-live .card-live-detail .user-avatar{
    width:40px;
    height:40px
}
.card-live .card-live-detail .is-info{
    display:flex;
    flex-grow:1;
    flex-direction:column;
    gap:.1rem;
    font-size:.9em
}
.card-live .card-live-detail .live-name{
    font-size:14px;
    line-height:1.5;
    font-weight:500;
    margin-bottom:.2rem
}
.card-live .card-live-detail .source-name{
    font-size:12px;
    font-weight:400;
    margin-bottom:.15rem;
    color:var(--text-base)
}
.card-live .card-live-detail .info-line>div{
    font-size:12px
}
.card-live .card-live-detail .info-line .tag-user a{
    color:var(--text-base)
}
.card-live .card-live-detail .is-option{
    position:relative
}
.live-grid-small .card-live .v-thumbnail{
    background-color:transparent;
    border-radius:.6rem;
    padding-bottom:56%
}
.live-grid-small .card-live .v-thumbnail img{
    filter:blur(20px);
    transform:scale(1.2);
    transform-origin:center center;
    opacity:.6
}
.live-grid-small .card-live .v-thumbnail:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url(../img/dotted.png);
    z-index:2;
    opacity:.3
}
.live-grid-small .card-live .card-live-detail{
    position:relative;
    z-index:4
}
.live-grid-small .card-live .card-live-detail .live-name{
    line-height:1.5;
    font-size:1.1em;
    -webkit-line-clamp:2
}
.card-live .v-thumbnail .live-tag{
    top:.5rem;
    border-radius:.3rem;
    height:24px;
    padding:0 .4rem
}
.card-live .v-thumbnail .live-tag,.current-status{
    position:absolute;
    left:.5rem;
    z-index:3;
    box-shadow:0 0 5px 5px rgba(0,0,0,.07)
}
.current-status{
    bottom:.5rem;
    display:flex;
    align-items:center;
    gap:.5rem;
    background-color:rgba(0,0,0,.6);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:.3rem .7rem;
    font-size:12px;
    font-weight:600;
    color:#fff
}
.current-status,.current-status.status-live{
    border-radius:.4rem;
    border:1px solid #fff
}
.current-status.status-end{
    color:#fe476a;
    border-color:#fe476a;
    font-weight:400
}
.current-status.status-coming{
    font-weight:400
}
.current-status.status-coming .time-left{
    font-weight:600
}
.remind-me{
    left:auto;
    right:.5rem;
    cursor:pointer;
    z-index:5
}
.remind-me.active{
    color:var(--primary-text)!important;
    border-color:var(--primary-color)!important
}
.start-now{
    background-color:#fff;
    color:#000;
    left:.5rem;
    right:auto;
    bottom:.5rem;
    top:auto;
    z-index:5
}
.start-now:hover{
    background-color:var(--primary-color);
    color:#000;
    border-color:var(--primary-color)
}
.card-live .thumb-small{
    top:0;
    width:39%;
    height:100%;
    z-index:2;
    background-size:cover;
    background-position:top;
    box-shadow:0 10px 10px 0 rgba(0,0,0,.13);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 30%);
    mask-image:linear-gradient(0deg,transparent,#000 30%)
}
.card-live .thumb-small,.light-blur{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}
.light-blur{
    width:100%;
    height:350px;
    background-color:hsla(0,0%,100%,.53);
    filter:blur(100px);
    top:-150px;
    border-radius:50%;
    animation:light-blur 3s infinite
}
@keyframes light-blur{
    0%{
        background-color:hsla(0,0%,100%,.67)
    }
    33%{
        background-color:#db586e
    }
    66%{
        background-color:#6477c2
    }
    to{
        background-color:hsla(0,0%,100%,.67)
    }
}
.quick-play .btn-sm{
    min-height:0
}
#wrapper.is-live-create .cards-row.wide{
    max-width:1200px
}
.w2g-create{
    display:flex;
    align-items:stretch;
    gap:2rem;
    margin:2rem auto
}
.w2g-create .w2g-org-detail{
    flex-shrink:0;
    width:430px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:1.25rem;
    padding:2rem;
    background-color:#212a56;
    border-radius:1.25rem;
    overflow:hidden;
    position:relative
}
.w2g-create .w2g-org-detail .div-poster{
    width:100%;
    flex-shrink:0;
    position:absolute;
    top:0;
    left:0;
    right:0;
    mask-image:linear-gradient(0deg,transparent,transparent 10%,#000 70%);
    -webkit-mask-image:linear-gradient(0deg,transparent,transparent 10%,#000 70%)
}
.w2g-create .w2g-org-detail .info{
    position:relative;
    z-index:3
}
.w2g-create .w2g-org-detail .buttons{
    gap:.75rem
}
.w2g-create .w2g-org-detail .buttons .btn{
    cursor:default!important
}
.w2g-create .w2g-step{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    gap:1rem
}
.step-row{
    padding:2rem;
    border-radius:1rem;
    background-color:#282b3a
}
.step-row .step-name{
    font-weight:500;
    color:#fff;
    font-size:1.2em;
    margin-bottom:.5rem
}
.step-row .d-poster{
    flex-shrink:0
}
.step-row .d-poster .item{
    width:70px;
    flex-shrink:0;
    padding:2px;
    border:1px solid hsla(0,0%,100%,.33);
    border-radius:.5rem;
    cursor:pointer;
    opacity:.5
}
.step-row .d-poster .item.active{
    border-color:var(--primary-color);
    opacity:1
}
.step-row .d-poster .item .v-thumbnail{
    border-radius:.4rem
}
.form-control.size-lg{
    font-size:15px;
    height:50px;
    padding:.5rem 1.25rem;
    border-color:hsla(0,0%,100%,.13)
}
.step-row .start-manual{
    margin-top:1.5rem
}
.timedate-picker{
    position:relative
}
.timedate-picker.hide:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#282b3a;
    opacity:.95;
    z-index:2
}
.modal-createlive .modal-dialog{
    max-width:420px
}
.modal-createlive .modal-dialog .modal-content{
    background-color:#282b3a;
    border:1px solid hsla(0,0%,100%,.13)!important
}
.modal-createlive .modal-content .is-footer .btn{
    width:100%
}
.create-live-steps{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:0;
    border-top:1px solid hsla(0,0%,100%,.07);
    margin:1.5rem 0 .5rem
}
.create-live-steps .step{
    position:relative;
    display:flex;
    align-items:center;
    gap:1rem;
    border-bottom:1px solid hsla(0,0%,100%,.07)
}
.create-live-steps .step .number{
    flex-shrink:0;
    width:30px;
    font-size:36px;
    font-weight:100;
    line-height:1;
    color:var(--primary-text)
}
.create-live-steps .step .text{
    flex-grow:1;
    color:#fff;
    padding:1.25rem 0;
    line-height:1.7
}
.create-live-steps .step .btn-dark{
    background-color:#0f111a!important;
    border:1px solid #fff!important;
    padding:.2rem .4rem;
    margin:1px 3px;
    border-radius:.4rem
}
.live-share{
    cursor:pointer
}
.live-share:hover{
    color:#fff
}
.live-share .v-dropdown-menu{
    margin:.6rem 0!important;
    border-radius:.75rem
}
.quick-share{
    padding:.7rem 1.2rem;
    font-size:13px;
    display:flex;
    flex-direction:column;
    gap:.5rem
}
.quick-share .quick-share-link{
    font-size:12px;
    padding:.4rem .8rem;
    border-radius:.4rem;
    min-width:220px
}
.quick-share .btn-sm{
    border-radius:.4rem
}
.buttons-loadmore .btn-xl{
    padding:.8rem 4rem;
    min-height:54px;
    gap:1.5rem;
    font-size:16px
}
.buttons-loadmore .btn-outline:hover{
    border-color:var(--primary-color)!important;
    color:var(--primary-text)!important
}
body.js-live-min.js-live-mask .shoutbox .sb_header{
    padding:1.6rem
}
.js-live-mask .lw-header>.btn-end-live{
    margin-right:110px
}
.MuiPaper-root{
    background-color:#3b4058!important
}
.Mui-selected{
    background-color:var(--primary-color)!important;
    color:#000!important
}
.MuiPickersLayout-contentWrapper{
    border-bottom:1px solid hsla(0,0%,100%,.13)!important
}
.MuiButton-textPrimary{
    color:#fff!important
}
@media screen and (max-width:1919px){
    .l_detail{
        padding:3rem 0
    }
    .l_detail .ld-source{
        padding:0 20px;
        max-width:1000px;
        flex-direction:column;
        gap:3rem
    }
    .ld-suggest{
        border:none;
        padding:0;
        flex-direction:column;
        gap:1.5rem;
        justify-content:space-between
    }
    .ld-suggest>div{
        width:100%;
        max-width:none!important
    }
    .ld-suggest>div.lds-title{
        flex-direction:row;
        justify-content:space-between;
        align-items:center
    }
}
@media screen and (max-width:1680px){
    .live-category .live-background{
        height:400px
    }
    .live-manager{
        height:140px
    }
    #div-adt,.body_live header{
        display:none
    }
    .l_content,.l_sidebar,.live_layout .l_watch{
        height:100vh
    }
    .lw-header .live-back{
        display:flex
    }
    .live_layout .l_sidebar{
        width:380px
    }
    .live_layout .l_content{
        width:calc(100% - 380px)
    }
    .shoutbox .sb_bottom,.shoutbox .sb_header{
        padding:1rem;
        height:auto
    }
    .chat-row{
        padding:.6rem 1rem
    }
    .chat-notice{
        padding:0 1rem
    }
    .live-grid{
        grid-template-columns:repeat(4,1fr)
    }
}
@media screen and (max-width:1440px){
    .live-category .fluid-gap{
        gap:3rem
    }
    .live-grid.live-grid-big{
        grid-template-columns:repeat(3,1fr)
    }
}
@media screen and (max-width:1280px){
    .live-grid{
        grid-template-columns:repeat(3,1fr)
    }
}
@media screen and (max-width:1199px){
    .live-grid{
        column-gap:1rem
    }
    .live-grid.live-grid-big{
        grid-template-columns:repeat(2,1fr)
    }
    .light-blur{
        top:-200px
    }
    .lw-bottom,.lw-header{
        padding:0 1rem;
        height:60px!important
    }
    #div-tg,.live-min,.lw-bottom .live-source{
        display:none
    }
    .shoutbox .sb_bottom .is_bottom .is_bottom-alert{
        background-color:#000
    }
    .chat-pin-area .chat-row{
        padding:.6rem 1rem
    }
    .live-countdown{
        font-size:14px;
        max-width:320px;
        padding:1rem;
        border-radius:.75rem;
        left:1rem;
        bottom:1rem
    }
    .live-countdown .text{
        font-size:16px
    }
    .live-countdown .count-start{
        margin-top:.5rem;
        gap:.6rem!important
    }
    .live-countdown .count-start #countdown{
        font-size:16px;
        width:160px;
        height:40px;
        border-radius:.5rem
    }
    .live-countdown .count-start .remind{
        font-size:14px;
        height:40px;
        border-radius:.5rem
    }
    .live-countdown .buttons{
        gap:.6rem;
        width:100%
    }
    .live-countdown .buttons>.btn-lg{
        font-size:14px;
        min-height:46px;
        padding:.5rem .8rem;
        gap:.5rem
    }
    .live-trailer{
        bottom:0;
        right:0;
        border:none;
        -webkit-backdrop-filter:none!important;
        backdrop-filter:none!important;
        background-color:rgba(14,72,122,.83);
        border-radius:.6rem 0 0 0;
        padding:.5rem .8rem
    }
    .live-trailer .text{
        display:none
    }
    .live_layout .l_watch{
        height:auto
    }
    .lw-player .video-frame{
        width:100%;
        padding-bottom:56.25%;
        height:0
    }
    .w2g-create{
        flex-direction:column
    }
    .w2g-create>div{
        width:100%!important
    }
    .w2g-create .w2g-org-detail{
        flex-direction:row
    }
    .w2g-create .w2g-org-detail .info .hl-tags{
        display:none
    }
    .w2g-create .w2g-org-detail .div-poster{
        position:relative;
        top:0;
        left:0;
        right:0;
        width:140px;
        -webkit-mask-image:none!important;
        mask-image:none!important
    }
    .chat-notice>div{
        padding:.6rem .75rem
    }
    .chat-row{
        padding:.4rem .75rem!important;
        gap:.6rem!important
    }
    .chat-row .user-avatar{
        width:30px;
        height:30px
    }
    .shoutbox .sb_bottom,.shoutbox .sb_header{
        padding:.6rem
    }
    .lds-items .s-live:nth-child(n+5){
        display:none!important
    }
    .l_detail{
        padding:1.5rem 0
    }
    .l_detail .ld-source .ld-source-detail{
        width:100%
    }
    .l_detail .ld-source .ld-source-detail .v-thumb-l{
        width:100px
    }
    .lw-bottom .user-avatar{
        height:36px!important;
        width:36px!important
    }
    body.js-live-mask .shoutbox .sb_header{
        padding:1.2rem
    }
    .js-live-mask .lw-header>.btn-end-live{
        margin-right:20px
    }
}
@media screen and (min-width:800px) and (max-width:1199px){
    .shoutbox{
        background-color:#000;
        border:none
    }
    .live_layout .l_sidebar{
        width:280px;
        padding:0!important
    }
    .live_layout .l_content{
        width:calc(100% - 280px)
    }
    .js-live-mask .lw-header{
        padding-right:110px
    }
}
@media screen and (max-width:999px){
    .live-grid{
        grid-template-columns:repeat(2,1fr)
    }
}
@media screen and (max-width:799px){
    .live-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem
    }
    .live-grid.live-grid-big{
        grid-template-columns:repeat(1,1fr)
    }
    .card-live .card-live-detail .is-info{
        font-size:12px
    }
    .card-live .card-live-detail .user-avatar{
        width:40px!important;
        height:40px!important
    }
    .light-blur{
        display:none!important
    }
    .live_layout{
        flex-direction:column;
        height:100vh;
        justify-content:space-between
    }
    .live_layout>div{
        width:100%!important
    }
    .live_layout .l_sidebar{
        padding:0!important;
        height:auto;
        position:relative;
        flex-grow:1;
        border-top:1px solid hsla(0,0%,100%,.13)
    }
    body.js-live-mask .shoutbox{
        left:0
    }
    .shoutbox{
        border:none;
        background-color:#000;
        border-radius:0;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .shoutbox .sb_header .item-clean{
        display:flex
    }
    .shoutbox .sb_header{
        position:-webkit-sticky;
        position:sticky;
        top:0
    }
    .shoutbox .sb_header .item-settings{
        display:none
    }
    .l_content,.l_sidebar,.live_layout .l_watch{
        height:auto
    }
    .js-live-clean{
        overflow:hidden!important
    }
    .js-live-clean .lw-bottom,.js-live-clean .lw-header{
        display:none
    }
    .js-live-clean .lw-player{
        top:0;
        position:fixed;
        left:0;
        right:0;
        z-index:10;
        background-color:#000
    }
    .js-live-clean .live_layout{
        padding-top:calc(56.25% + 40px)
    }
    .js-live-clean .live_layout .l_sidebar{
        height:auto;
        flex-grow:1;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .js-live-clean .shoutbox{
        height:auto
    }
    .js-live-clean .shoutbox .sb_header{
        background-color:#000;
        position:fixed;
        padding-top:calc(56.25% + .6rem)!important;
        left:0;
        right:0;
        z-index:9
    }
    .js-live-clean .shoutbox .sb_body{
        padding-top:calc(56.25% + 40px)!important
    }
    .video-frame{
        width:100%;
        padding-bottom:56.25%
    }
    .lw-bottom,.lw-header{
        height:56px!important;
        padding:0 .5rem
    }
    .lw-header .live-name span{
        font-size:13px
    }
    .lw-header .live-name span,.lw-header .live-source .tag-name{
        max-width:300px;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden
    }
    .lw-header .btn-end-live span{
        display:none
    }
    .live_layout .l_content{
        flex-shrink:0;
        position:relative
    }
    .live-countdown{
        bottom:0;
        left:0;
        border:none;
        border-radius:0 .6rem 0 0;
        max-width:250px;
        font-size:12px
    }
    .live-countdown .text{
        font-size:14px
    }
    .live-countdown .count-start .remind{
        flex-grow:unset!important
    }
    .live-countdown .count-start .remind span{
        display:none
    }
    .live-countdown .count-start #countdown{
        width:auto;
        flex-grow:1
    }
    .live-countdown.center{
        max-width:300px!important;
        width:100%!important;
        border-radius:.75rem!important
    }
    .l_detail{
        display:none
    }
    .chat-list,.chat-list.ps{
        overflow-y:auto!important
    }
    .chat-list .ps__rail-y{
        display:none!important
    }
    .js-live-mask .lw-header>.btn-end-live{
        margin-right:0
    }
    body.js-live-mask .shoutbox .sb_header{
        padding:.6rem
    }
}
@media screen and (max-width:640px){
    .live-grid{
        grid-template-columns:repeat(1,1fr)
    }
    .live-category .fluid-gap{
        gap:2rem
    }
    .live-manager{
        height:70px;
        margin:-1rem auto!important
    }
    .live-manager .buttons .btn-xl{
        font-size:15px;
        padding:.6rem 1.3rem;
        min-height:46px;
        gap:.75rem
    }
    .live-manager .buttons .btn-xl .inc-icon{
        width:15px!important;
        height:15px!important
    }
    .live-manager .buttons .btn-xl .size-18{
        font-size:15px!important
    }
    .live-category .live-background{
        height:250px
    }
    .lw-bottom .o-info{
        font-size:13px
    }
    .live-owner .o-info .user-name{
        margin-bottom:0
    }
    .lw-header .live-ep,.lw-header .live-tag{
        line-height:18px;
        font-size:11px;
        padding:0 3px
    }
    .lw-bottom .user-avatar{
        width:30px!important;
        height:30px!important
    }
    .lw-bottom .flex-container{
        gap:1rem
    }
    .lw-bottom .live-count>div,.lw-bottom .live-progress>div,.lw-bottom .live-share>div{
        font-size:12px;
        flex-direction:column;
        gap:2px
    }
    .chat-row .info .opt{
        opacity:1!important;
        background-color:transparent
    }
    .w2g-create .w2g-org-detail{
        padding:1.2rem;
        border-radius:.75rem;
        gap:1rem
    }
    .w2g-create .w2g-org-detail .div-poster{
        width:80px
    }
    .step-row{
        padding:1.2rem;
        border-radius:.75rem
    }
}
@media screen and (max-width:479px){
    .lw-player .video-frame .back-cover{
        opacity:.3
    }
    .live-countdown{
        width:140px;
        padding:.6rem
    }
    .live-countdown .text{
        display:none
    }
    .live-countdown .count-start{
        flex-direction:column;
        margin:0;
        align-items:flex-start
    }
    .live-countdown .count-start #countdown{
        background-color:transparent;
        color:#fff;
        height:16px;
        font-size:14px;
        justify-content:flex-start
    }
    .live-countdown .count-start .remind{
        height:32px;
        border-radius:.4rem;
        margin-top:2px;
        font-size:12px;
        width:100%
    }
    .live-countdown .count-start .remind span{
        display:block
    }
    .live-countdown .count-start .remind .icon-16{
        width:12px!important;
        height:12px!important
    }
    .live-countdown .count-start .btn-light{
        min-height:32px;
        padding:.4rem .6rem;
        width:100%;
        font-size:12px;
        border-radius:.4rem
    }
    .live-countdown.center{
        background-color:transparent;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
        padding:0;
        border:none;
        box-shadow:none;
        max-width:280px!important
    }
    .live-countdown.center .text{
        display:block!important
    }
    .live-trailer{
        padding:.4rem .6rem;
        bottom:auto;
        right:0;
        top:0;
        left:0;
        border-radius:0;
        background-color:rgba(0,0,0,.6)
    }
    .w2g-create{
        gap:1rem;
        font-size:13px
    }
    .w2g-create .w2g-org-detail{
        flex-direction:column
    }
    .w2g-create .w2g-org-detail .div-poster{
        width:60px
    }
    .w2g-create .w2g-org-detail .buttons .btn{
        padding:.5rem .9rem!important;
        font-size:13px!important
    }
    .step-row .d-poster{
        gap:.6rem!important;
        margin-top:-5px
    }
    .step-row .d-poster .item{
        width:60px
    }
    .step-row.is-poster>.line-center{
        flex-direction:column;
        align-items:flex-start
    }
    .w2g-create .is-submit>.buttons{
        flex-direction:column
    }
    .w2g-create .is-submit>.buttons>.btn{
        width:100%
    }
    .create-live-steps .step .number{
        font-size:30px;
        width:20px
    }
    .create-live-steps .step .text{
        padding:1rem 0
    }
    .lw-header .live-name span,.lw-header .live-source .tag-name{
        max-width:200px
    }
    .buttons-loadmore .btn{
        width:100%
    }
}
.css-1hnij6n{
    display:inline-flex;
    flex-direction:column;
    position:relative;
    min-width:0;
    padding:0;
    margin:0;
    border:0;
    vertical-align:top;
    max-width:100%
}
.css-14cxppu{
    color:hsla(0,0%,100%,.7);
    line-height:1.4375em;
    display:block;
    text-overflow:ellipsis;
    position:absolute;
    left:0;
    top:0;
    transform-origin:left top;
    z-index:1;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    pointer-events:auto;
    max-width:calc(133% - 32px);
    transform:translate(14px,-9px) scale(.75);
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1),max-width .2s cubic-bezier(0,0,.2,1);
    z-index:3;
    background-color:#282b3a
}
.css-14cxppu,.css-ne9r8m{
    font-family:Roboto,Helvetica,Arial,sans-serif;
    font-weight:400;
    font-size:1rem;
    letter-spacing:.00938em
}
.css-ne9r8m{
    line-height:1.5;
    color:#fff;
    cursor:text;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    position:relative;
    box-sizing:border-box;
    padding:0 14px;
    border-radius:4px;
    border:1px solid hsla(0,0%,100%,.13)
}
.react-datepicker-wrapper{
    direction:ltr;
    font-family:Roboto,Helvetica,Arial,sans-serif;
    font-size:inherit;
    line-height:1.4375em;
    flex-grow:1;
    outline:none;
    display:flex;
    flex-wrap:nowrap;
    overflow:hidden;
    letter-spacing:inherit;
    width:182px;
    padding:16.5px 0!important
}
.react-datepicker__input-container input{
    background-color:transparent!important;
    outline:none!important;
    border:none!important;
    color:#fff!important
}
.react-datepicker{
    background-color:#282b3a!important;
    border:1px solid hsla(0,0%,100%,.13)!important;
    border-radius:4px!important;
    padding:10px!important;
    color:#fff!important
}
.react-datepicker__header{
    background-color:#282b3a!important;
    border-bottom:1px solid hsla(0,0%,100%,.13)!important
}
.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month,.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{
    color:#fff!important
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){
    right:0!important
}
.react-datepicker__time-container .react-datepicker__time{
    background:#282b3a!important
}
.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{
    background-color:var(--primary-color)!important;
    color:#000!important
}
.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{
    color:hsla(0,0%,100%,.5)!important
}
.body_live footer,.haha.dropdown-toggle:after{
    display:none!important
}
.dropdown-vip{
    font-size:13px;
    padding:.4rem 1rem
}
.dropdown-vip .user-name{
    font-size:12px;
    color:#fff
}

body{
    background:var(--bg-color);
    color:var(--text-base);
    font-size:14px;
    line-height:1.6;
    font-weight:400;
    padding:0;
    margin:0;
    -webkit-text-size-adjust:none
}
a{
    cursor:pointer;
    color:#fff;
    text-decoration:none!important
}
a:hover{
    color:var(--primary-text)
}
.heading-xl{
    font-size:2.4em;
    font-weight:600;
    line-height:1.5;
    margin-bottom:1rem;
    color:#fff
}
.heading-md{
    font-size:1.8em
}
.heading-md,.heading-sm{
    font-weight:600;
    line-height:1.5;
    margin-bottom:.5rem;
    color:#fff;
    font-family: 'Quicksand', sans-serif;
}
.heading-sm{
    font-size:1.4em
}
.heading-xs{
    font-size:1.1em;
    font-weight:600;
    line-height:1.5;
    margin-bottom:.5rem;
    color:#fff
}
.text_white{
    color:#fff
}
.text_blue{
    color:#39b0e4
}

.button-play{
    background:linear-gradient(39deg,#fecf59,#fff1cc)
    /*background: linear-gradient(39deg,rgb(215, 242, 29),rgb(255, 6, 6));
    background:linear-gradient(39deg,rgb(73 218 105),rgb(204 255 229))*/
}
.primary-gradient,.w-chart .number{
    background: linear-gradient(235deg,#f5c516,#f87171);
    /*background:linear-gradient(39deg,rgb(73 218 105),rgb(204 255 229))*/
}

.button-play,.primary-gradient{
    color:var(--primary-button-text)!important
}
.button-play{
    box-shadow:0 5px 10px 5px rgba(255,218,125,.1)
}
.button-play:hover{
    box-shadow:0 5px 10px 10px rgba(255,218,125,.15)
}
button{
    background-color:transparent;
    outline:none;
    border:none
}
.btn{
    font-size:14px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.5rem 1.1rem;
    border-radius:.4rem;
    opacity:1;
    min-height:40px
}
.btn:hover{
    opacity:.9
}
.btn.btn-block{
    width:100%
}
.btn.btn-circle{
    width:30px;
    height:30px;
    padding:.4rem;
    border-radius:3rem;
    min-height:auto!important
}
.btn i{
    font-size:.9em
}
.btn span{
    white-space:nowrap
}
.btn .inc-icon{
    width:14px;
    height:14px;
    flex-shrink:0
}
.btn-sm{
    font-size:12px;
    gap:.4rem;
    padding:.3rem .7rem;
    border-radius:.3rem;
    min-height:30px
}
.btn-sm .inc-icon{
    width:12px;
    height:12px
}
.btn-xs{
    font-size:11px;
    gap:.3rem;
    padding:.2rem .5rem;
    border-radius:.2rem;
    min-height:26px
}
.btn-xs .inc-icon{
    width:10px;
    height:10px
}
.btn-lg{
    font-size:16px;
    gap:.6rem;
    padding:.7rem 1.5rem;
    border-radius:.5rem;
    min-height:50px
}
.btn-lg.btn-circle{
    width:50px;
    height:50px;
    padding:.7rem;
    border-radius:3rem
}
.btn-lg .inc-icon{
    width:16px;
    height:16px
}
.btn-xl{
    font-size:18px;
    gap:1rem;
    padding:.95rem 2rem;
    border-radius:.6rem;
    min-height:60px
}
.btn-xl.btn-circle{
    width:60px;
    padding:.7rem;
    border-radius:3rem
}
.btn-xl .inc-icon{
    width:18px;
    height:18px
}
.btn-primary{
    background-color:var(--primary-color)!important;
    color:var(--primary-button-text)!important;
    border-color:var(--primary-color)!important
}
.btn-secondary{
    background-color:var(--bg-3)!important;
    color:#fff!important;
    border-color:var(--bg-3)!important
}
.btn-light{
    background-color:#fff!important;
    color:#000!important;
    border-color:#fff!important
}
.btn-outline{
    border-color:hsla(0,0%,100%,.5)!important
}
.btn-basic,.btn-outline{
    background-color:transparent!important;
    color:#fff!important
}
.btn-basic{
    border-color:transparent!important
}
.btn-rounded{
    border-radius:2rem
}
.o-style{
    list-style:none
}
.small-text{
    font-size:.9em!important
}
.text-base{
    color:var(--text-base)!important
}
.base-hover:hover{
    color:#fff!important
}
.lim-1,.lim-2,.lim-3,.name-short{
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal!important
}
.lim-1{
    -webkit-line-clamp:1
}
.lim-2{
    -webkit-line-clamp:2
}
.lim-3{
    -webkit-line-clamp:3
}
.name-cut,.text-cut{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%
}
.inc-icon{
    width:16px;
    height:16px;
    flex-shrink:0;
    font-size:0!important;
    line-height:0!important
}
.inc-icon img,.inc-icon svg{
    width:100%!important;
    height:100%!important
}
.icon-20{
    width:20px!important;
    height:20px!important
}
.icon-16{
    width:16px!important;
    height:16px!important
}
.icon-14{
    width:14px;
    height:14px
}
.icon-12{
    width:12px;
    height:12px
}
.inter-icon{
    /*background-image:url(/images/interface.png);*/
    background-size:400px 400px;
    width:16px;
    height:16px;
    display:inline-block
}
.icon-trans1{
    background-position:0 0
}
.icon-trans2{
    background-position:-16px 0
}
.icon-trans3{
    background-position:-32px 0
}
.size-14{
    font-size:14px!important;
    line-height:1
}
.size-16{
    font-size:16px!important;
    line-height:1
}
.size-20{
    font-size:20px!important;
    line-height:1
}
.primary-text,.text-primary{
    color:var(--primary-text)!important
}
.line-center{
    display:inline-flex;
    align-items:center;
    gap:.5rem
}
.antiselect,.app-download-button,.d-item .spoil-toggle,.dm-bar .item,.player-control *,.reason-list .h-item,.sound-cover,.v-actor,.v-thumbnail,.v-toggle{
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none
}
#totop,.button-play,.cat-more .line-center,.d-item .text,.de-type .item,.item-focus.is-on,.menu-toggle .icon-menu *,.pin-trans .line-center,.search-toggle .icon-search *,.shoutbox,.sound-cover,.toggle-x *,.top-slide-small .swiper-slide,.top-up .sw-item .v-thumbnail img,.topic-item .inc-icon,.topics-grid .row-topic,.topics-line .topic-item,.transition,header{
    transition:all .3s ease 0s;
    -webkit-transition:all .3s ease 0s;
    -moz-transition:all .3s ease 0s
}
.v-thumbnail{
    width:100%;
    padding-bottom:150%;
    height:0;
    position:relative;
    border-radius:.5rem;
    overflow:hidden;
    display:block;
    filter:drop-shadow(4px 4px 0 #000000);
    background:#0b0f1a;
    border:1px solid #403738
}
.v-thumbnail:hover{
    box-shadow:6px 4px 9px hsla(0,0%,80.8%,.35);
    filter:drop-shadow(2px 2px 0 #fff)
}
.v-thumbnail:hover img{
    transform:scale(1.15);
    filter:contrast(1.06) saturate(1.08)
}
.v-thumbnail img{
    filter:contrast(1.04) saturate(1.04);
    transition:transform .35s ease,filter .35s ease
}
.cover-fade .cover-image img,.gallery-row .item img,.object-fit img,.sound-cover img,.user-avatar img,.v-actor img,.v-thumbnail img{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    object-fit:cover
}
.v-thumbnail.v-thumbnail-hoz{
    padding-bottom:45%
}
.v-thumb-s{
    width:50px;
    flex-shrink:0
}
.v-thumb-m{
    width:80px;
    flex-shrink:0
}
.v-thumb-l{
    width:120px;
    flex-shrink:0
}
.v-thumb-s .v-thumbnail{
    border-radius:.2rem
}
.sound-cover,.user-avatar,.v-actor{
    width:50px;
    height:50px;
    border-radius:50%;
    flex-shrink:0;
    overflow:hidden;
    position:relative;
    background-color:var(--bg-2)
}
.sound-cover:hover img,.user-avatar:hover img,.v-actor:hover img{
    opacity:.8
}
.user-avatar.square{
    border-radius:.75rem
}
.user-avatar.medium{
    width:80px;
    height:80px
}
.user-avatar.large{
    width:120px;
    height:120px
}
.sound-cover{
    border-radius:.3rem
}
.item-sound.active .sound-cover{
    border-radius:50%
}
.item-sound.active .sound-cover:after{
    content:"";
    position:absolute;
    width:35%;
    height:35%;
    border-radius:3rem;
    background-color:var(--bg-color);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:3
}
.v-actor-medium{
    width:80px;
    height:80px
}
.v-actor-large{
    width:110px;
    height:110px
}
.item-title{
    color:#fff;
    font-size:1em;
    margin-bottom:.5rem
}
.alias-title,.item-title{
    font-weight:400;
    line-height:1.5
}
.alias-title{
    color:var(--text-base);
    font-size:.9em;
    margin-bottom:0
}
.info-line{
    display:block
}
.info-line .tag-small{
    font-size:.9em;
    color:var(--text-base);
    white-space:nowrap;
    margin-right:.6rem;
    display:inline
}
.info .info-line .tag-small:last-of-type{
    margin-right:0
}
.wrap-tip{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%
}
.modal-backdrop{
    background-color:#131727
}
.modal-backdrop.show{
    opacity:.95
}
#app{
    width:100%;
    min-height:100vh;
    overflow-x:hidden
}
.container{
    width:100%;
    max-width:1900px;
    padding:0 50px
}
#wrapper{
    padding-bottom:2rem;
    padding-top:10rem
}
#wrapper.wrapper-w-slide{
    padding-top:0!important
}
header{
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10;
    margin-bottom: 10px;
    background:#191b24;
    /*background:linear-gradient(0deg,rgba(25,27,36,0),#191b24)*/
}
header.fly{
    background:transparent!important
}
header.fixed{
    background-color:var(--footer-bg)!important
}
header.fixed .header-elements{
    height:70px
}
header .header-elements{
    height:90px;
    padding:0 2rem
}
.el-group,header .header-elements{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem
}
.el-group{
    flex-grow:1
}
#logo,.el-group{
    position:relative;
    z-index:3
}
#logo{
    flex-shrink:0
}
#logo img{
    height:46px;
    width:auto
}
#search{
    width:100%;
    max-width:23rem
}
#search,#search .search-elements{
    position:relative
}
#search .search-input{
    width:100%;
    height:2.8rem;
    line-height:2rem;
    padding:.4rem 3rem;
    background-color:hsla(0,0%,100%,.08);
    color:#fff;
    font-size:1em;
    outline:none!important;
    box-shadow:none!important;
    border-radius:.4rem;
    border:1px solid transparent!important
}
#search .search-input.input-focus,#search .search-input:focus{
    border-color:#fff!important
}
#search .search-input::placeholder{
    color:#fff!important
}
#search .remove-icon,#search .search-icon{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    flex-shrink:0;
    padding:3px;
    font-size:16px
}
#search .remove-icon{
    left:auto;
    right:.7rem;
    cursor:pointer;
    display:none
}
.search-modal{
    position:absolute;
    z-index:90;
    top:calc(100% + 5px);
    left:0;
    right:0;
    min-width:360px;
    background-color:rgba(15,17,26,.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:.4rem;
    overflow:hidden;
    box-shadow:var(--shadow-large)
}
.search-modal .view-all{
    background-color:#d6163d;
    display:block;
    line-height:50px;
    text-align:center
}
.show-group{
    display:flex;
    flex-direction:column;
    padding:20px
}
.show-group+.show-group{
    padding-top:0
}
.show-group .group-title{
    font-size:.9em;
    color:var(--text-base);
    margin-bottom:.75rem;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.show-group .group-title .remove-all{
    color:var(--text-base)
}
.group-list{
    display:flex;
    flex-direction:column;
    gap:0
}
.h-item{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:1rem
}
.h-item .info{
    flex-grow:1
}
.h-item .info .item-title{
    margin-bottom:.4rem
}
.v-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    text-align:center
}
.v-item .info .item-title{
    margin-bottom:.4rem
}
.show-group .group-list .h-item .v-thumbnail{
    padding-bottom:135%
}
.show-group .group-list .s-item{
    padding:.6rem;
    border-radius:.4rem
}
.show-group .group-list .s-item:hover{
    background-color:hsla(0,0%,100%,.02)
}
.t-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    margin-bottom:.8rem
}
.t-item:last-of-type{
    margin-bottom:.3rem
}
.t-item .remove-log{
    color:var(--text-base);
    flex-shrink:0
}
.t-item .item-title{
    flex-grow:1;
    margin-bottom:0
}
.t-item .t-icon{
    flex-shrink:0;
    font-size:12px
}
#main_menu,#main_user{
    display:flex;
    align-items:center;
    gap:1rem
}
#main_menu .menu-item{
    line-height:36px;
    flex-shrink:0;
    white-space:nowrap;
    padding:0 .75rem;
    color:#fff
}
#main_user{
    gap:1rem
}
#main_menu .menu-item-sub .dropdown-item{
    padding:.3rem 1.2rem;
    line-height:32px
}
#main_menu .menu-item-sub .dropdown-item:hover{
    color:var(--primary-text)
}
#main_menu .menu-item a{
    display:flex;
    align-items:center
}
#main_menu .menu-item span.new:before{
    content:"NEW"
}
#main_menu .menu-item span.new{
    font-size:10px!important;
    font-weight:500;
    padding:2px 2.5px;
    line-height:1;
    background-color:var(--primary-color);
    border-radius:3px;
    color:#000
}
#main_user .button-user{
    font-size:1em;
    padding:.6rem 1.4rem;
    border-radius:3rem;
    border:1px solid hsla(0,0%,100%,.5);
    color:#fff;
    opacity:.9;
    font-weight:500;
    white-space:nowrap;
    min-width:145px;
    text-align:center
}
#main_user .button-user.button-login{
    background-color:#fff;
    color:var(--primary-button-text)
}
#main_user .button-user:hover{
    opacity:1
}
#main_user .header-user{
    padding:.3rem .6rem;
    color:#fff;
    display:flex;
    align-items:center
}
#main_user .header-user .user-avatar{
    width:42px;
    height:42px;
    border:2px solid #fff
}
#main_user .btn-bell{
    font-size:16px;
    width:40px;
    height:40px;
    padding:0;
    position:relative
}
.noti-number{
    position:absolute;
    top:-6px;
    left:55%;
    line-height:1;
    padding:.3rem .43rem;
    font-size:12px;
    font-weight:500;
    background-color:#191b24;
    color:var(--primary-text);
    border-radius:12px
}
.user-dropdown{
    max-width:320px;
    min-width:200px
}
.user-dropdown .dropdown-item .line-center{
    width:100%;
    gap:.75rem
}
.user-dropdown .dropdown-item .line-center span{
    flex-grow:1
}
.user-dropdown .dropdown-item .line-center .number{
    opacity:.5
}
.app-download{
    flex-shrink:0;
    padding-right:1rem;
    border-right:1px solid hsla(0,0%,100%,.27);
    position:relative
}
.app-download-button{
    height:44px;
    padding:0 1.2rem;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.75rem;
    cursor:pointer
}
.app-download-button>.inc-icon{
    width:36px;
    height:36px;
    color:var(--primary-color)
}
.app-download .text{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    font-size:12px;
    line-height:1.1
}
.app-download .text strong{
    font-size:14px
}
.app-download .app-download-menu{
    border-radius:1rem;
    padding:1rem;
    margin-top:.4rem!important;
    box-shadow:0 10px 10px 3px rgba(0,0,0,.07)
}
.app-download-button > .inc-icon {
  width: 36px;
  height: 36px;
  color: var(--primary-color);
}
.inc-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 0 !important;
  line-height: 0 !important;
}
.inc-icon svg {
  width: 100% !important;
  height: 100% !important;
}
.app-download .app-download-menu .adm-title{
    font-size:13px;
    line-height:1.4
}

#appDownloadMenu {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
}

#appDownloadMenu.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.app-box{
    flex-direction:column;
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:space-between;
    width: 220px;
}
.app-box .device-item{
    padding:.4rem .5rem;
    font-size:10pt;
    flex:1 1;
    color:#000;
    white-space:nowrap;
    border-radius:.4rem;
    border:1px solid #ccd1e7;
    position:relative
}
.app-box .device-item:hover{
    border-color:#000
}
.app-box .device-item .line-center{
    gap:.4rem;
    justify-content:center
}
.app-box .device-item span{
    font-size:13px;
    line-height:1.1;
    font-weight:500
}
.app-box .device-item .inc-icon{
    width:20px;
    height:20px
}
.app-box .device-item.coming{
    border-color:#ccd1e7!important;
    background-color:rgba(204,209,231,.31)!important
}
.app-box .device-item.coming .line-center{
    opacity:.5
}
.app-box .device-item.coming:before{
    content:"Sắp ra mắt";
    position:absolute;
    top:-10px;
    right:-1px;
    padding:5px;
    font-size:10px;
    line-height:1;
    color:#fff;
    background-color:#000;
    border-radius:.3rem
}
.app-box .appicon{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:1rem
}
.app-box .appicon img{
    width:50px;
    height:auto;
    border-radius:.5rem
}
.app-box .flex-item{
    display:flex;
    width:100%;
    justify-content:space-between;
    flex-direction:row;
    flex-grow:1;
    gap:8px
}
.header-elements .for-mobile{
    cursor:pointer;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border-radius:.4rem;
    flex-shrink:0;
    display:none;
    font-size:16px;
    color:#fff
}
.icon-menu{
    width:20px;
    height:20px;
    position:relative;
    padding:3px 0
}
.icon-menu span{
    width:100%;
    height:2px;
    background-color:#fff;
    display:block
}
.icon-menu span+span{
    margin-top:4px
}
.icon-menu span:nth-child(2){
    width:70%
}
.menu-toggle.toggled .icon-menu span{
    position:absolute;
    transform:rotate(45deg);
    top:9px;
    margin:0;
    background-color:#ff6c5d
}
.menu-toggle.toggled .icon-menu span:nth-child(3){
    transform:rotate(-45deg)
}
.menu-toggle.toggled .icon-menu span:nth-child(2){
    opacity:0
}
.search-toggle .icon-search{
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    position:relative
}
.search-toggle.toggled .icon-search i{
    opacity:0
}
.search-toggle .icon-search span{
    width:100%;
    height:2px;
    background-color:#fff;
    position:absolute;
    top:0;
    left:0;
    opacity:0
}
.search-toggle .icon-search span:nth-child(2){
    top:18px
}
.search-toggle.toggled .icon-search span{
    background-color:#ff6c5d;
    transform:rotate(45deg);
    opacity:1;
    top:9px!important;
    left:0
}
.search-toggle.toggled .icon-search span:nth-child(2){
    transform:rotate(-45deg)
}
.top-slide-main,.top-slide-wrap{
    position:relative
}
.top-slide-main{
    width:100%;
    margin-bottom:-120px;
    height:860px;
    background-color:var(--top-bg-default);
    overflow:hidden
}
.top-detail-wrap:after,.top-slide-main:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:200px;
    z-index:3;
    background:#191b24;
    background:linear-gradient(0deg,#191b24,rgba(25,27,36,0))
}
.top-slide-main .cover-fade{
    height:calc(100% - 60px)!important
}
.top-slide-main .safe-area{
    height:calc(100% - 100px)!important
}
.top-slide-wrap .swiper-slide-active .cover-fade{
    animation:cover-fade .5s forwards
}
.top-slide-wrap .swiper-slide-active .cover-image{
    animation:hide-show 1s forwards
}
.top-slide-wrap .swiper-slide-active .slide-content{
    animation:slide-content .5s forwards
}
.big-slide-wrapper .top-slide-main{
    border-radius:1.2rem
}
.auto-hide{
    animation:auto-hide 30s forwards
}
@keyframes cover-fade{
    0%{
        transform:translateX(-45%);
        -webkit-transform:translateX(-45%);
        opacity:0
    }
    to{
        transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        opacity:1
    }
}
@keyframes hide-show{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes slide-content{
    0%{
        transform:translateX(-50px);
        -webkit-transform:translateX(-50px);
        opacity:0
    }
    to{
        transform:translateX(0);
        -webkit-transform:translateX(0);
        opacity:1
    }
}
@keyframes auto-hide{
    0%{
        opacity:1
    }
    99%{
        opacity:1
    }
    to{
        opacity:0
    }
}
.slide-elements{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:var(--top-bg-default)
}
.slide-elements:before,.top-detail-wrap:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-image:url(../img/dotted.png);
    background-repeat:repeat;
    opacity:.2;
    z-index:1
}
.slide-elements .cover-fade,.top-detail-wrap .cover-fade{
    width:100%;
    max-width:1900px;
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent)
}
.slide-elements .cover-fade .cover-image{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    mask-image:linear-gradient(90deg,transparent 10px,rgba(0,0,0,.2) 15%,#000 40%,#000 80%,transparent 99%);
    -webkit-mask-image:linear-gradient(90deg,transparent 10px,rgba(0,0,0,.2) 15%,#000 40%,#000 80%,transparent 99%)
}
.slide-elements .background-fade,.top-detail-wrap .background-fade{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-position:50%;
    background-size:cover;
    filter:blur(50px);
    -webkit-filter:blur(80px);
    opacity:.2
}
.slide-elements .safe-area{
    cursor:-webkit-grab;
    cursor:grab;
    width:100%;
    height:100%;
    max-width:1900px;
    margin:0 auto;
    overflow:hidden;
    z-index:2;
    position:relative;
    display:flex;
    align-items:flex-end
}
.slide-elements .safe-area:active{
    cursor:-webkit-grabbing;
    cursor:grabbing
}
.slide-elements .hl-tags .tag-classic:nth-child(n+7),.slide-elements .hl-tags .tag-topic:nth-child(n+7),.slide-url{
    display:none
}
.backdrop-video{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:3;
    display:none
}
.swiper-slide-active .backdrop-video{
    display:block
}
.top-slide-wrap .sound-mute{
    position:absolute;
    bottom:280px;
    right:calc(50% - 900px);
    z-index:3
}
.top-slide-wrap .sound-mute i{
    font-size:1em
}
.top-slide-wrap .top-slide-small{
    width:450px!important;
    position:absolute;
    bottom:212px;
    right:calc(50% - 900px)
}
.top-slide-wrap .top-slide-small .swiper-slide{
    width:65px;
    height:45px;
    cursor:pointer;
    position:relative;
    border:3px solid transparent
}
.top-slide-wrap .top-slide-small .swiper-slide:hover{
    border:0 !important;
    box-shadow:2px 2px 9px hsla(0,0%,80.8%,.35);
    filter:drop-shadow(1px 1px 0 #000)
    
    /*border:2px solid #222;
    border-radius:8px*/
}
.top-slide-wrap .top-slide-small .swiper-slide img{
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    background-color:var(--bg-2)
}
.top-slide-wrap .top-slide-small .swiper-slide.swiper-slide-thumb-active{
    border-radius: 50%;
    border: 1.5px solid rgba(250, 204, 21, 0.9) !important; /* vàng */

    /* glow nhiều lớp */
    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.25),
        0 0 10px rgba(250, 204, 21, 0.45),
        0 0 20px rgba(250, 204, 21, 0.25);

    /* nổi nhẹ */
    transform: scale(1.03);
    transition: all .25s ease;
}
.slide-content{
    position:relative;
    z-index:5;
    max-width:700px;
    width:100%;
    padding:100px 50px
}
.slide-content .media-title{
    font-size:2.6em;
    line-height:1.5;
    margin-bottom:.5rem;
    font-weight:700;
    text-shadow:0 2px 1px rgba(0,0,0,.3);
    color:#fff;
    /*white-space:nowrap*/
}
.media-title .movie-year{
    line-height: 1.5;
    font-weight: 700;
    opacity: .80;
    margin-left: 8px;
    letter-spacing: .3px;
    color: #9ca3af;
    border-radius: 6px;
    background: #232121;
    padding: 0px 8px;
}
.slide-content .media-title-image{
    margin-bottom:1rem
}
.slide-content .media-title-image img{
    max-width:500px;
    max-height:130px
}
.slide-content .media-alias-title{
    font-size:1.1em;
    font-weight:300;
    margin-bottom:1rem
}
.slide-content .media-alias-title:before{
    content:"❝";
    font-size:16px;
    opacity:.8;
    margin-right:4px
}
.slide-content .media-alias-title:after{
    content:"❞";
    font-size:16px;
    opacity:.8;
    margin-left:4px
}
.slide-content .media-alias-title a{
    color:var(--primary-text)
}
.slide-content .description{
    font-size:1em;
    line-height:1.6;
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,.2);
    font-weight:400;
    margin-bottom:2rem
}
.slide-content .touch{
    display:flex;
    align-items:center;
    gap:2rem
}
.slide-content .touch .button-play{
    width:70px;
    height:70px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary-button-text)!important;
    opacity:.95
}
.slide-content .touch .button-play i{
    font-size:28px;
    position:relative;
    left:2px
}
.slide-content .touch .button-play:hover{
    opacity:1
}
.slide-content .touch-group{
    display:inline-flex;
    align-items:center;
    border:2px solid var(--border-color);
    border-radius:30px;
    overflow:hidden
}
.slide-content .touch-group:hover{
    border-color:#fff!important
}
.slide-content .touch-group .item{
    height:50px;
    min-width:68px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    padding:0 .2rem;
    gap:.3rem;
    position:relative
}
.slide-content .touch-group .item:first-of-type{
    padding-left:.4rem
}
.slide-content .touch-group .item:last-of-type{
    padding-right:.4rem
}
.slide-content .touch-group .item span{
    display:none;
    white-space:nowrap;
    height:0;
    font-size:10px;
    line-height:1
}
.slide-content .touch-group .item.active .icon-20{
    color:var(--primary-text)!important
}
.slide-content .touch-group .item:hover span{
    display:block;
    height:auto
}
.slide-content .touch-group .item:hover{
    background-color:hsla(0,0%,100%,.02);
    width:auto
}
.slide-content .touch-group .item+.item{
    border-left:2px solid var(--border-color)
}
.hl-tags{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:.3rem;
    margin-bottom:.75rem
}
.tag-model{
    background-color:#fff;
    color:#000;
    font-weight:500;
    display:flex;
    overflow:hidden;
    cursor:default;
    line-height:26px;
    padding:0 .5rem;
    flex-shrink:0
}
.tag-classic,.tag-model,.tag-topic{
    border-radius:.33rem;
    align-items:center;
    font-size:11px
}
.tag-topic{
    background-color:hsla(0,0%,100%,.06);
    height:26px;
    padding:0 .4rem;
    color:#fff;
    display:inline-flex
}
.tag-classic:hover,.tag-topic:hover{
    background:#374151;
    color:#fff
}
.tag-classic{
    border:1px solid #222
}

.tag-imdb{
    background:#000;
    border:1px solid #feb601;
    border-radius:.33rem;
    color:#fff;
    font-weight:500;
    cursor:default;
    height:22px;
    font-size:11px;
    padding:0 .4rem;
    flex-shrink:0;
    display:inline-flex;
    align-items:center
}
.tag-imdb:hover{
    cursor:pointer;
    background:#333;
    border:1px solid #feb601;
    color:#fff
}
.tag-imdb:before{
    content:"IMDB";
    color:#b4a259;
    position:relative;
    padding-right:4px;
    line-height:1
}
.tag-imdb:before,.tag-tmdb{
    font-weight:500;
    font-size:11px
}
.tag-tmdb{
    background:#000;
    border:1px solid #07b8e7;
    border-radius:.33rem;
    color:#fff;
    font-weight:500;
    cursor:default;
    height:22px;
    font-size:11px;
    padding:0 .4rem;
    flex-shrink:0;
    display:inline-flex;
    align-items:center
}
.tag-tmdb:hover{
    cursor:pointer;
    background:#333;
    border:1px solid #07b8e7;
    color:#fff
}
.tag-tmdb:before{
    content:"TMDB";
    color:#07b8e7;
    position:relative;
    padding-right:4px;
    line-height:1
}
#wrapper.wrapper-w-slide{
    position:relative;
    z-index:9
}
.fluid-gap{
    display:flex;
    flex-direction:column;
    gap:50px
}
.cards-row{
    position:relative
}
.cards-row.wide{
    max-width:1900px
}
.cards-row.fixed,.cards-row.wide{
    width:100%;
    padding:0 50px;
    margin:0 auto
}
.cards-row.fixed{
    max-width:1300px
}
.cards-row .row-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:1rem;
    position:relative;
    min-height:44px;
    margin-bottom:1.2rem
}
.cards-row .row-header .inc-icon{
    width:32px;
    height:32px
}
.cards-row .row-header .category-name{
    font-size:2em;
    line-height:1.4;
    font-weight:600;
    margin:0;
    color:var(--category-name);
    text-shadow:0 2px 1px rgba(0,0,0,.3);
    font-family: 'Inter', sans-serif;
}
.topics-line{
    display:flex;
    gap:1rem;
    align-items:stretch;
    justify-content:flex-start
}
.topics-line .topic-item{
    display:flex;
    align-items:flex-end;
    z-index:5;
    flex:1 1;
    gap:1.2rem;
    padding:1.2rem;
    min-height:120px;
    border-radius:.6rem;
    color:#fff
}
.topics-line .topic-item .topic-name{
    font-size:1.8em;
    line-height:1.3;
    font-weight:700;
    margin-bottom:0
}
.topics-line .topic-item .info{
    position:relative;
    z-index:3
}
.cards-row.fixed.min{
    max-width:960px
}
.cards-slide-wrapper{
    position:relative
}
.sw-navigation .sw-button{
    padding:6px;
    background-color:transparent!important;
    color:#fff;
    outline:none!important;
    border:none!important;
    position:absolute;
    z-index:10;
    right:0;
    top:calc(50% - 27px);
    transform:translate(100%,-50%);
    opacity:.5
}
.sw-navigation .sw-prev{
    right:auto;
    left:0;
    transform:translate(-100%,-50%)
}
.sw-navigation .sw-button.swiper-button-disabled{
    display:none
}
.sw-navigation .sw-button:hover{
    opacity:1
}
.sw-navigation .sw-button svg{
    width:48px!important;
    height:48px!important
}
.sw-item{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    position:relative
}
.sw-item .v-thumbnail:hover img{
    opacity:.8
}
.sw-item .info{
    min-height:42px;
    text-align:center
}
.sw-item .info .item-title{
    margin-bottom:0
}
.sw-cover .alias-title,.sw-item .info .alias-title{
    font-size:.9em;
    margin-top:5px
}
.sw-cover .alias-title a,.sw-item .info .alias-title a{
    color:var(--text-base)
}
.sw-item .info-v{
    display:flex;
    flex-direction:column;
    gap:.2rem
}
.sw-item .info-v .alias-title{
    font-size:.9em;
    color:var(--text-base)
}
.sw-item .info-v .info-line>div{
    color:#fff
}
.sw-item .info-v.w-chart{
    padding-left:66px;
    position:relative;
    text-align:left
}
.sw-item .info-v.w-chart .alias-title{
    margin-top:0
}
.sw-item .info-v.w-chart .number{
    position:absolute;
    left:0;
    top:0;
    width:50px;
    line-height:1;
    text-align:center;
    font-size:4.2em;
    font-weight:800;
    font-style:italic;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
.v-thumbnail .pin-thumb{
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:0;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:1rem;
    padding:0 .6rem;
    background:#191b24;
    background:linear-gradient(0deg,rgba(25,27,36,0),rgba(25,27,36,.7))
}
.v-thumbnail .pin-thumb.on-bottom{
    top:auto;
    bottom:0;
    background:#191b24;
    background:linear-gradient(0deg,rgba(25,27,36,.7),rgba(25,27,36,0))
}
.v-thumbnail .pin-thumb>div{
    color:#fff;
    font-weight:500;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
    font-size:13px
}
.v-thumbnail .pin-thumb>div.e-quality{
    font-size:15px;
    font-weight:600
}
.v-thumbnail .pin-trans{
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.5rem
}
.v-thumbnail .pin-trans .line-center{
    background-color:#fff;
    justify-content:center;
    height:28px;
    border-radius:1rem;
    padding:0 .3rem;
    min-width:28px;
    box-shadow:0 5px 5px 0 rgba(0,0,0,.2);
    gap:.3rem
}
.v-thumbnail .pin-trans .line-center span{
    font-size:11px;
    color:#000;
    display:none
}
.v-thumbnail .pin-trans .line-center:hover{
    padding:0 .5rem
}
.v-thumbnail .pin-trans .line-center:hover span{
    display:block
}
.v-thumbnail .pin-trans.fixed{
    bottom:8px;
    right:8px
}
.v-thumbnail .pin-trans.fixed .line-center{
    width:24px!important;
    min-width:auto!important;
    height:24px;
    padding:0!important
}
.v-thumbnail .pin-trans.fixed .line-center span{
    display:none!important
}
.v-thumbnail .pin-trans.fixed .line-center .inter-icon{
    transform:scale(.8)
}
.v-thumbnail .pin-top{
    position:absolute;
    right:0;
    top:0;
    line-height:60px;
    width:70px;
    text-align:right;
    padding-right:1rem;
    font-size:3.5em;
    font-weight:800;
    color:#fff;
    text-shadow:0 2px 3px rgba(0,0,0,.4);
    z-index:3
}

/*OPHIM BACKGROUND STATUS*/
.ophim-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    line-height:1;
    color:#fff;
    border:1px solid hsla(0,0%,100%,.08);
    backdrop-filter:blur(6px);
    transition:all .25s ease
}
.ophim-status-default{
    background:#777
}

.ophim-status-upcoming{
    background: rgb(255, 255, 255) !important;
    color: #111 !important;
}
.ophim-status-trailer{
    background: #000 !important;
    color: #fff;
}
.ophim-status-ongoing{
    background: linear-gradient(45deg, #345ae7,#2510af);
  color: #fff;
}
.ophim-status-completed{
   /*background: linear-gradient(45deg, #16A34A, #22C55E, #4ADE80);
    box-shadow: 0 0 8px rgba(34,197,94,0.4);*/
    background-color: #e2fe35 !important;
    color: #000 !important;
    box-shadow: 0 4px 10px 0 #6d151536 !important;
    border: none;
}
.ophim-status-single{
    /*background: linear-gradient(45deg, #F59E0B, #FBBF24, #FCD34D);
    box-shadow: 0 0 8px rgba(251,191,36,0.4);*/
    background-color: #e74040 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px 0 #6d151536 !important;
    border: 1px solid #cf3f3f !important;
}

.ophim-badge-quality{
    background:linear-gradient(135deg,#facc15,#ca8a04);
    color:#111;
    left:4px;
    top:4px
}
.ophim-badge-lang{
    background: linear-gradient(135deg, #724ABC, #5324AB);
    color:#fff;
    top:4px;
    white-space: nowrap;
}
.ophim-badge-lang:before{
    content:"Ngôn ngữ :";
    margin-right:2px
}
.ophim-badge-episode{
    background:#111827;
    border:1px solid #374151
}
.ophim-badge-year{
    background:#2F81F7
}
.ophim-badge-year:before{
    content:"Phát hành :";
    margin-right:2px
}
/*OPHIM BACKGROUND STATUS END*/

/*OPHIM META DISPLAY*/
.ophim-meta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: .75rem;
}
.ophim-meta-item {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ophim-meta-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
/* LEFT (label) */
.ophim-meta-label {
    background: #2a2a2a;
    color: #aaa;
    padding: 6px 6px;
    white-space: nowrap;
}

/* RIGHT (value) */
.ophim-meta-value {
    padding: 6px 6px;
    font-weight: 600;
    color: #fff;
}
.ophim-meta-year .ophim-meta-value {
    background: linear-gradient(135deg, #DA644E, #F00);
}
.ophim-meta-lang .ophim-meta-value {
    background: linear-gradient(135deg, #724ABC, #5324AB);
}
.ophim-meta-episode .ophim-meta-value {
    color: #fff;
}
/* Full */
.ophim-status-full .ophim-meta-value {
    background: linear-gradient(135deg, #00b09b, #96c93d);
}

/* Ongoing */
.ophim-status-ongoing .ophim-meta-value {
    background: linear-gradient(135deg, #f7971e, #ffd200);
}

/* Trailer */
.ophim-status-trailer .ophim-meta-value {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

/*OPHIM META DISPLAY END*/

.pin-new{
    position:absolute;
    bottom:0;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    border-radius:.3rem .3rem 0 0;
    overflow:hidden;
    box-shadow:0 0 5px 2px rgba(0,0,0,.1);
    white-space:nowrap
}
.pin-new .line-center{
    flex:1 1;
    gap:.2rem;
    justify-content:center;
    padding:.2rem .5rem;
    font-size:10px;
    font-weight:400;
    /*color:#000000;*/
}

.pin-new .line-center.line-pd{
    background-color:#463c88;
    /*color:#fff*/
}
.pin-new .line-center.line-tm{
    background-color:#2ca35d;
    /*color:#111*/
}
.pin-new .line-center.line-lt{
    background-color:#1667cf;
    /*color:#222*/
}
.pin-new .line-center.line-pd span:before{
    content:"(PĐ)"
}
.pin-new .line-center.line-tm span:before{
    content:"(TM)"
}
.pin-new .line-center.line-lt span:before{
    content:"(LT)"
}

.label.pd:before { content:"(PĐ)"; }
.label.tm:before { content:"(TM)"; }
.label.lt:before { content:"(LT)"; }

.pin-new .line-center.line-coming{
    background-color:red;
    color:#fbfbfb
}

.cards-grid-wrapper .pin-new .line-center.line-pd{ background-color:#5e6070 }
.cards-grid-wrapper .pin-new .line-center.line-tm{ background-color:#2ca35d }
.cards-grid-wrapper .pin-new .line-center.line-lt{ background-color:#1667cf }

.pin-remove{
    position:absolute;
    z-index:3;
    top:.3rem;
    right:.3rem;
    cursor:pointer;
    background-color:#fff;
    color:#000;
    box-shadow:0 0 5px 5px rgba(0,0,0,.06);
    width:30px;
    height:30px;
    border-radius:.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.7
}
.pin-remove:hover{
    opacity:1
}
.pin-new2{
    justify-content:flex-start;
    border-radius:.5rem .5rem 0 0;
    overflow:hidden;
    background-color:#fff
}
.pin-new2 .line-center{
    padding:.3rem .5rem;
    border-radius:0 .5rem 0 0;
    overflow:hidden;
    background-color:transparent
}
.pin-new2 .line-center:first-of-type{
    position:relative;
    z-index:3
}
.pin-new2 .line-center+.line-center{
    padding-left:.8rem;
    margin-left:-.3rem
}
.pin-new2 .line-center.line-tm{
    background-color:#fff;
    position:relative;
    z-index:2
}
.pin-quality-tag,.tag-quality{
    padding:0 .4rem;
    border-radius:.33rem;
    height:26px;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    background-color:#ffd875;
    background-image:linear-gradient(220deg,#ffd875,#fff)
}
.pin-quality-tag{
    position:absolute;
    z-index:3;
    top:.35rem;
    left:.35rem;
    width:28px;
    height:28px;
    padding:0;
    border-radius:50%;
    font-size:13px;
    box-shadow:0 0 0 2px rgba(0,0,0,.33)
}
.watched-bar{
    width:100%;
    max-width:160px;
    margin:.8rem auto;
    height:4px;
    position:relative;
    display:flex;
    background-color:hsla(0,0%,100%,.13)
}
.watched-bar span{
    height:100%;
    display:block;
    background-color:hsla(0,0%,100%,.56)
}
.watched-info{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin:0 0 .5rem;
    font-size:12px
}
.watched-info .w-item span{
    opacity:.4
}
.watched-info .w-item+.w-item{
    padding-left:.6rem;
    position:relative
}
.watched-info .w-item+.w-item:before{
    content:"";
    width:3px;
    height:3px;
    display:inline-block;
    background-color:var(--text-base);
    position:absolute;
    left:0;
    top:50%;
    margin-top:-1px
}
.top-up{
    margin-bottom:20px
}
.top-up .sw-item .v-thumbnail{
    background-color:transparent
}
.top-up .sw-item .v-thumbnail .mask,.top-up .sw-item .v-thumbnail img{
    border-radius:0;
    -webkit-clip-path:polygon(94.239% 100%,5.761% 100%,5.761% 100%,4.826% 99.95%,3.94% 99.803%,3.113% 99.569%,2.358% 99.256%,1.687% 98.87%,1.111% 98.421%,.643% 97.915%,.294% 97.362%,.075% 96.768%,0 96.142%,0 3.858%,0 3.858%,.087% 3.185%,.338% 2.552%,.737% 1.968%,1.269% 1.442%,1.92% .984%,2.672% .602%,3.512% .306%,4.423% .105%,5.391% .008%,6.4% .024%,94.879% 6.625%,94.879% 6.625%,95.731% 6.732%,96.532% 6.919%,97.272% 7.178%,97.942% 7.503%,98.533% 7.887%,99.038% 8.323%,99.445% 8.805%,99.747% 9.326%,99.935% 9.88%,100% 10.459%,100% 96.142%,100% 96.142%,99.925% 96.768%,99.706% 97.362%,99.357% 97.915%,98.889% 98.421%,98.313% 98.87%,97.642% 99.256%,96.887% 99.569%,96.06% 99.803%,95.174% 99.95%,94.239% 100%);
    clip-path:polygon(94.239% 100%,5.761% 100%,5.761% 100%,4.826% 99.95%,3.94% 99.803%,3.113% 99.569%,2.358% 99.256%,1.687% 98.87%,1.111% 98.421%,.643% 97.915%,.294% 97.362%,.075% 96.768%,0 96.142%,0 3.858%,0 3.858%,.087% 3.185%,.338% 2.552%,.737% 1.968%,1.269% 1.442%,1.92% .984%,2.672% .602%,3.512% .306%,4.423% .105%,5.391% .008%,6.4% .024%,94.879% 6.625%,94.879% 6.625%,95.731% 6.732%,96.532% 6.919%,97.272% 7.178%,97.942% 7.503%,98.533% 7.887%,99.038% 8.323%,99.445% 8.805%,99.747% 9.326%,99.935% 9.88%,100% 10.459%,100% 96.142%,100% 96.142%,99.925% 96.768%,99.706% 97.362%,99.357% 97.915%,98.889% 98.421%,98.313% 98.87%,97.642% 99.256%,96.887% 99.569%,96.06% 99.803%,95.174% 99.95%,94.239% 100%)
}
.top-up .swiper-slide:nth-child(2n) .v-thumbnail .mask,.top-up .swiper-slide:nth-child(2n) .v-thumbnail img{
    -webkit-clip-path:polygon(5.761% 100%,94.239% 100%,94.239% 100%,95.174% 99.95%,96.06% 99.803%,96.887% 99.569%,97.642% 99.256%,98.313% 98.87%,98.889% 98.421%,99.357% 97.915%,99.706% 97.362%,99.925% 96.768%,100% 96.142%,100% 3.858%,100% 3.858%,99.913% 3.185%,99.662% 2.552%,99.263% 1.968%,98.731% 1.442%,98.08% .984%,97.328% .602%,96.488% .306%,95.577% .105%,94.609% .008%,93.6% .024%,5.121% 6.625%,5.121% 6.625%,4.269% 6.732%,3.468% 6.919%,2.728% 7.178%,2.058% 7.503%,1.467% 7.887%,.962% 8.323%,.555% 8.805%,.253% 9.326%,.065% 9.88%,0 10.459%,0 96.142%,0 96.142%,.075% 96.768%,.294% 97.362%,.643% 97.915%,1.111% 98.421%,1.687% 98.87%,2.358% 99.256%,3.113% 99.569%,3.94% 99.803%,4.826% 99.95%,5.761% 100%);
    clip-path:polygon(5.761% 100%,94.239% 100%,94.239% 100%,95.174% 99.95%,96.06% 99.803%,96.887% 99.569%,97.642% 99.256%,98.313% 98.87%,98.889% 98.421%,99.357% 97.915%,99.706% 97.362%,99.925% 96.768%,100% 96.142%,100% 3.858%,100% 3.858%,99.913% 3.185%,99.662% 2.552%,99.263% 1.968%,98.731% 1.442%,98.08% .984%,97.328% .602%,96.488% .306%,95.577% .105%,94.609% .008%,93.6% .024%,5.121% 6.625%,5.121% 6.625%,4.269% 6.732%,3.468% 6.919%,2.728% 7.178%,2.058% 7.503%,1.467% 7.887%,.962% 8.323%,.555% 8.805%,.253% 9.326%,.065% 9.88%,0 10.459%,0 96.142%,0 96.142%,.075% 96.768%,.294% 97.362%,.643% 97.915%,1.111% 98.421%,1.687% 98.87%,2.358% 99.256%,3.113% 99.569%,3.94% 99.803%,4.826% 99.95%,5.761% 100%)
}
.top-up .sw-item .v-thumbnail:hover img{
    width:calc(100% - 8px);
    height:calc(100% - 8px);
    top:4px;
    left:4px
}
.top-up .sw-item .v-thumbnail .mask{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:hsla(0,0%,100%,.05)
}
.top-up .sw-item .v-thumbnail:hover .mask{
    background-color:var(--primary-color)
}
.big-slide-wrapper{
    padding-bottom:2rem
}
.big-slide-wrapper .slide-content{
    padding:3rem
}
.big-slide-wrapper .slide-content .media-title{
    font-size:1.8em;
    margin-bottom:.25rem
}
.big-slide-wrapper .slide-elements{
    background-color:var(--bg-3)
}
.big-slide-wrapper .slide-elements .background-fade{
    display:none!important
}
.big-slide-wrapper .slide-elements .cover-fade{
    width:calc(100% - 500px);
    height:100%!important;
    left:auto;
    transform:none;
    right:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000);
    mask-image:linear-gradient(90deg,transparent,#000 30%,#000)
}
.big-slide-wrapper .slide-elements .cover-fade .cover-image{
    mask-image:none;
    -webkit-mask-image:none
}
.big-slide-wrapper .slide-elements .safe-area{
    height:100%!important;
    align-items:flex-start
}
.big-slide-wrapper .top-slide-main{
    height:500px;
    margin:0
}
.big-slide-wrapper .top-slide-main:before{
    display:none
}
.big-slide-wrapper .top-slide-main .swiper-slide{
    border-radius:1.2rem;
    overflow:hidden
}
.big-slide-wrapper .top-slide-small{
    margin:-70px auto 0;
    max-width:1200px;
    width:calc(100% - 32px);
    position:relative;
    z-index:3
}
.big-slide-wrapper .top-slide-small .swiper-wrapper{
    display:flex;
    align-items:stretch;
    gap:1rem
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide{
    flex:1 1;
    border-radius:.6rem;
    overflow:hidden;
    background-color:var(--bg-2);
    position:relative;
    cursor:pointer;
    border:3px solid transparent
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .info{
    height:110px;
    display:flex;
    align-items:center;
    padding:1rem;
    display:none
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .media-title{
    font-size:1em;
    line-height:1.6;
    font-weight:300;
    color:#fff;
    margin:0
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide-thumb-active{
    background-color:#fff
}
.big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide-thumb-active .media-title{
    color:#000;
    font-weight:500
}
.sw-actors-recent .sw-actor{
    width:100%;
    position:relative
}
.sw-actor .item-duo{
    background-color:hsla(0,0%,100%,.02);
    padding:1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-radius:.5rem;
    -webkit-mask-image:linear-gradient(0deg,transparent 20%,#000 70%,#000);
    mask-image:linear-gradient(0deg,transparent 20%,#000 70%,#000)
}
.sw-actor .item-duo .duo-thumb{
    width:100%;
    flex:1 1;
    padding-bottom:70%;
    position:relative;
    border-radius:.4rem;
    overflow:hidden
}
.sw-actor .item-duo .duo-thumb:hover img{
    opacity:.8
}
.sw-actor .item-duo .duo-thumb img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover
}
.sw-actors-recent .sw-actor .h-item{
    position:relative;
    z-index:2;
    padding:1.5rem;
    margin-top:-100px;
    gap:1.2rem
}
.sw-actors-recent .sw-actor .h-item .v-actor{
    border:3px solid #fff;
    width:70px;
    height:70px
}
.sw-actors-recent .sw-actor .h-item .v-actor:hover{
    border-color:var(--primary-color)
}
.sw-actors-recent .sw-actor .h-item .item-title{
    font-size:1.2em;
    font-weight:600
}
.sw-actors-list .v-item{
    padding:.6rem 0
}
.sw-cover .h-item .v-thumb-m{
    margin-top:-60px
}
.sw-cover .h-item .v-thumb-m .v-thumbnail{
    box-shadow:0 0 10px 5px rgba(0,0,0,.1)
}
.sw-cover .h-item .info .item-title{
    font-weight:500
}
.sw-cover.single .h-item{
    padding:.75rem 1rem
}
.sw-cover.single .v-thumbnail.v-thumbnail-hoz{
    padding-bottom:56%
}
.actors-grid-wrapper,.cards-grid-wrapper{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-gap:1.5rem;
    gap:1.5rem
}
.actors-grid-wrapper .v-item .info .item-title{
    font-size:1.1em;
    font-weight:500
}
@media screen and (min-width:1121px){
    .cards-grid-wrapper.grid-6or{
        grid-template-columns:repeat(6,1fr)
    }
}
@media screen and (min-width:800px) and (max-width:1120px){
    .cards-grid-wrapper.grid-6or{
        grid-template-columns:repeat(4,1fr)
    }
}
footer{
    background-color:var(--footer-bg)
}
.footer-elements{
    position:relative;
    min-height:400px;
    padding:2rem 0;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.footer-elements>div{
    position:relative;
    z-index:2
}
.footer-elements .footer-icon{
    position:absolute!important;
    z-index:1!important;
    width:600px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.footer-elements .side-left{
    display:block;
    max-width:750px
}
.sl-brand{
    gap:3rem;
    margin-bottom:2rem
}
.sl-brand .footer-logo{
    display:block
}
.sl-brand .footer-logo img{
    height:60px;
    width:auto
}
.sl-brand .socials{
    gap:.75rem;
    padding-left:3rem;
    border-left:1px solid var(--border-color)
}
.sl-brand .socials .social-item{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:var(--bg-2)
}
.sl-menu a{
    margin-right:1.5rem;
    white-space:nowrap
}
.sl-menu a:last-of-type{
    margin-right:0
}
.footer-elements .side-right{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-end;
    max-width:400px
}
.sr-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.5rem
}
.sr-links a{
    display:block;
    border-radius:2rem;
    border:1px solid var(--border-color);
    padding:.5rem 1rem;
    font-size:.9em;
    font-weight:300
}
footer .true{
    margin-bottom:1.5rem
}
footer .true .line-center{
    font-size:14px;
    color:#fff;
    padding:.5rem .7rem;
    border-radius:2rem;
    background-color:#78140f
}
.v-tips{
    position:relative
}
.demo-tip,.qtip-default{
    background:var(--bg-3)!important;
    padding:0!important;
    width:100%!important;
    max-width:420px!important;
    border-radius:.5rem!important;
    overflow:hidden!important;
    box-shadow:0 5px 10px 0 rgba(0,0,0,.2)!important;
    border:none!important;
    color:#fff!important;
    line-height:1.5!important
}
#demo-tip{
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:99
}
#slide-row-02:hover #demo-tip{
    display:block
}
.qtip-default .qtip-content{
    padding:0
}
.qtip-default{
    animation:qtip-animation .3s forwards
}
@keyframes qtip-animation{
    0%{
        opacity:0;
        transform:scale(.3)
    }
    to{
        opacity:1;
        transform:scale(1)
    }
}
.sw-tip{
    font-size:13px;
    font-weight:300;
    color:#fff
}
.sw-tip .media-teaser{
    background-size:cover;
    background-position:50%;
    position:relative;
    mask-image:linear-gradient(0deg,transparent,#000 30px);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 30px)
}
.sw-tip .media-teaser .sound-mute{
    position:absolute;
    bottom:1rem;
    right:1rem;
    z-index:4;
    cursor:pointer
}
.sound-mute.muted i:before{
    content:"\f6a9"!important
}
.sw-tip .media-teaser .pin-new{
    transform:none;
    bottom:auto;
    top:1rem;
    left:1rem;
    right:auto;
    z-index:4;
    border-radius:.3rem;
    display:none
}
.sw-tip .media-teaser .info{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    padding:1rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    background:#2f3346;
    background:linear-gradient(20deg,rgba(47,51,70,.6),rgba(47,51,70,0))
}
.sw-tip .media-item{
    width:100%;
    padding:0 1.5rem 1.5rem;
    background:#2f3346;
    background:linear-gradient(0deg,#2f3346,rgba(47,51,70,.7));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
}
.sw-tip .video-title-group{
    margin-bottom:1rem
}
.sw-tip .media-title{
    font-size:1.2em;
    font-weight:600;
    text-shadow:0 0 3px rgba(0,0,0,.19)
}
.sw-tip .media-title-image{
    margin-bottom:.6rem
}
.sw-tip .media-title-image img{
    max-width:280px;
    max-height:50px
}
.sw-tip .alias-title{
    font-size:1em;
    font-weight:400;
    color:var(--primary-text)
}
.sw-tip .hl-tags{
    gap:5px
}
.sw-tip .hl-tags+.hl-tags{
    margin-top:.5rem
}
.sw-tip .hl-tags .tag-classic{
    border:none;
    font-size:.9em;
    height:22px
}
.sw-tip .hl-tags .tag-imdb,.sw-tip .hl-tags .tag-model span{
    line-height:20px
}
.sw-tip .hl-tags .tag-topic{
    background-color:transparent;
    padding:0;
    height:auto
}
.sw-tip .hl-tags .tag-topic:nth-child(n+5){
    display:none
}
.sw-tip .hl-tags .tag-topic+.tag-topic{
    margin-left:2px
}
.sw-tip .hl-tags .tag-topic+.tag-topic:before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background-color:#fff;
    margin-right:6px
}
.sw-tip .touch-group{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:.6rem;
    margin-bottom:1.25rem
}
.sw-tip .touch-group .btn{
    flex-grow:1
}
.sw-tip .touch-group .btn-outline.active{
    color:var(--primary-text)!important
}
.v-tabs{
    padding:0;
    margin-bottom:1.5rem
}
.v-tabs.nav-pills .nav-item+.nav-item,.v-tabs.nav-pills .nav-link+.nav-link{
    margin-left:.6rem
}
.v-tabs.nav-pills .nav-link{
    border-radius:2rem;
    color:#fff;
    background-color:var(--bg-3);
    min-width:100px;
    display:inline-flex;
    gap:.4rem;
    align-items:center;
    justify-content:center;
    opacity:.8
}
.v-tabs.nav-pills .nav-link:hover{
    opacity:1
}
.v-tabs.nav-pills .nav-link.active,.v-tabs.nav-pills .show>.nav-link{
    background-color:#fff!important;
    color:#000!important;
    opacity:1
}
.v-tabs.nav-tabs{
    border-bottom:1px solid var(--border-color)
}
.v-tabs.nav-tabs .nav-item+.nav-item{
    margin-left:40px
}
.v-tabs.nav-tabs .nav-link{
    border:none;
    border-bottom:1px solid transparent!important;
    margin-bottom:-1px;
    padding:.75rem 0;
    font-size:1em;
    font-weight:500;
    color:#fff;
    background-color:none;
    opacity:.9;
    display:flex;
    align-items:center;
    justify-content:center
}
.v-tabs.nav-tabs .nav-link:hover{
    opacity:1
}
.v-tabs.nav-tabs .nav-link.active{
    opacity:1;
    background-color:transparent;
    color:var(--primary-text);
    border-color:var(--primary-color)!important;
    margin-bottom:-1px
}
.v-tabs.v-tabs-min.nav-pills .nav-link{
    font-size:13px;
    min-height:30px;
    gap:.5rem;
    padding:0 .5rem;
    border-radius:.4rem;
    min-width:auto;
    background-color: #222;
    border: 1px solid #555;
}
.v-tabs.v-tabs-min.nav-pills .nav-link.active {
    color: #fff !important;
    border: 1px solid #fdd123;
    background: #000 !important;
    /*box-shadow: 0 0 6px rgba(255,216,117,.9),0 0 12px rgba(255,216,117,.6);*/
}

.v-tabs-xs.nav-pills .nav-link{
    padding:0!important;
    background-color:transparent!important;
    font-size:12px!important;
    min-width:60px!important
}
.v-tabs-xs.nav-pills .nav-link+.nav-link{
    margin-left:.75rem!important
}
.v-tabs-xs.nav-pills .nav-link.active{
    background-color:transparent!important;
    color:var(--primary-text)!important
}
.v-notice{
    padding:3rem 2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1rem;
    border-radius:1rem;
    color:var(--text-base);
    background-color:rgba(0,0,0,.2)
}
.v-notice .icon-notice{
    width:3rem;
    height:3rem;
    opacity:.5
}
.modal-content .v-tabs{
    column-gap:.6rem;
    row-gap:.3rem
}
.modal-content .v-tabs.nav-pills .nav-link+.nav-link{
    margin:0!important
}
.v-filter{
    margin-bottom:2rem
}
.filter-toggle{
    background-color:var(--bg-color);
    padding:0 .75rem 0 .5rem;
    height:30px;
    color:#fff;
    cursor:pointer;
    font-size:1.1em;
    font-weight:500;
    border-radius:.3rem
}
.filter-toggle i{
    font-size:12px
}
.filter-toggle:hover{
    opacity:.9
}
.filter-toggle.toggled svg{
    color:var(--primary-text)
}
.filter-elements{
    border-radius:.75rem;
    border:1px solid var(--border-color);
    padding:1rem 0 0;
    margin-top:-15px;
    margin-bottom:3rem
}
.v-filter .fe-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:2rem;
    padding:.5rem 1rem;
    border-bottom:1px dashed var(--border-color)
}
.v-filter .fe-row:last-of-type{
    border-bottom:none
}
.v-filter .fe-row .fe-name{
    width:120px;
    padding:.3rem 0;
    text-align:right;
    flex-shrink:0;
    font-weight:500;
    color:#fff
}
.v-filter .fe-row .fe-results{
    flex-grow:1;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:.5rem
}
.v-filter .fe-row .fe-results .item{
    padding:.3rem .6rem;
    border:1px solid transparent;
    border-radius:.4rem;
    color:#fff;
    cursor:pointer;
    opacity:.8
}
.v-filter .fe-row .fe-results .item:hover{
    opacity:1;
    color:var(--primary-text)
}
.v-filter .fe-row .fe-results .item.active{
    border-color:hsla(0,0%,100%,.2);
    color:var(--primary-text);
    opacity:1!important
}
.v-filter .fe-row-end{
    padding:1.5rem 1rem
}
.v-pagination{
    gap:1rem;
    width:100%;
    justify-content:center;
    margin:4rem 0
}
.v-pagination .page-current{
    height:50px;
    padding:0 1.2rem;
    border-radius:3rem;
    background-color:#2f3346;
    color:#fff;
    font-size:15px
}
.v-pagination .page-current .v-form-control{
    border-color:hsla(0,0%,100%,.13)!important;
    width:32px;
    height:32px;
    border-radius:.3rem;
    background-color:transparent!important;
    color:#fff!important;
    padding:0;
    text-align:center;
    font-weight:600
}
.v-pagination .page-current .v-form-control:focus{
    border-color:hsla(0,0%,100%,.25)!important
}
.v-bread{
    position:absolute;
    top:100px;
    left:2rem;
    z-index:9
}
.v-bread>.line-center{
    gap:1rem
}
.v-bread .page-name{
    font-size:1.6em;
    color:#fff;
    text-shadow:var(--h-shadow);
    font-weight:600;
    margin:0;
    cursor:default
}
.model-tabs{
    flex-shrink:0;
    display:flex;
    align-items:stretch;
    border:1px solid #fff;
    border-radius:.5rem;
    padding:2px;
    font-size:14px;
    font-weight:400
}
.model-tabs .item{
    height:26px;
    border-radius:.3rem;
    font-size:13px;
    padding:0 .5rem;
    display:flex;
    align-items:center;
    color:#fff;
    cursor:pointer
}
.model-tabs .item.active{
    background-color:#fff;
    color:#000
}
.top-detail-wrap{
    position:relative;
    width:100%;
    height:800px;
    background-color:var(--top-bg-default);
    overflow:hidden
}
.top-detail-wrap .cover-fade .cover-image{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:.6;
    background-size:cover;
    background-position:50%;
    mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)
}
.detail-container{
    width:100%;
    max-width:1640px;
    padding:0 20px;
    margin:-200px auto 0;
    position:relative;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:stretch
}
.detail-container>div{
    background-color:rgba(25,27,36,.3);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px)
}
.detail-container>div.dc-side{
    flex-shrink:0;
    width:440px;
    border-radius:1.25rem 3rem 1.25rem 1.25rem;
    padding:40px;
    display:flex;
    flex-direction:column
}
.ds-info{
    font-weight:300
}
.ds-info .alias-name{
    color:var(--primary-text);
    margin-bottom:1.5rem;
    font-weight:400
}
.ds-info .alias-name:before{
    content:"❝";
    font-size:16px;
    opacity:.8;
    margin-right:4px
}
.ds-info .alias-name:after{
    content:"❞";
    font-size:16px;
    opacity:.8;
    margin-left:4px
}
.child-actors{
    position:relative;
    padding-bottom:1rem
}
.child-actors .child-actors-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-column-gap:.6rem;
    column-gap:.6rem;
    grid-row-gap:1.5rem;
    row-gap:1.5rem
}
.child-actors .v-item{
    gap:.75rem
}
.dc-side>div{
    margin-bottom:2rem
}
.dc-side>div+div{
    padding-top:2rem;
    border-top:1px solid var(--border-color)
}
.dc-side>.child-actors{
    padding:0;
    border:none
}

/* ===== DOT BASE ===== */
.live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
    position:relative;
    flex-shrink:0;

    /* màu sẽ lấy từ parent */
    background:var(--primary-color);
}

/* ===== DOT ===== */
.live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    position:relative;
    flex-shrink:0;

    background:currentColor; /* lấy màu từ parent */
}

/* ===== HIỆU ỨNG HẢI ĐĂNG ===== */
.live-dot::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;

    background:currentColor;
    animation:glowPulse 1.6s infinite;
    pointer-events:none;
}

/* ===== ANIMATION ===== */
@keyframes glowPulse{
    0%{
        transform:scale(1);
        opacity:.6;
        box-shadow:0 0 0 0 currentColor;
    }
    70%{
        transform:scale(2.5);
        opacity:0;
        box-shadow:0 0 0 6px transparent;
    }
    100%{
        transform:scale(1);
        opacity:0;
    }
}

.status .line-center{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    font-weight:500
}
.status.on-going .line-center{
    background:#323232;
    color:var(--status-going)
}
.status.complete .line-center{
    background:#323232;
    color:var(--status-complete)
}
.status.trailer .line-center{
    background:#323232;
    color:var(--status-trailer)
}


.status .small{
    font-size:12px
}
.status .spinner-border-sm{
    --bs-spinner-width:0.8rem;
    --bs-spinner-height:0.8rem
}
.detail-container>div.dc-main{
    background-color:rgba(25,27,36,.6);
    flex-grow:1;
    border-radius:3rem 1.25rem 1.25rem 1.25rem;
    display:flex;
    flex-direction:column
}
.dm-bar{
    padding:30px
}
.dm-bar .elements,.dm-bar .is-left,.dm-bar .touch-group{
    display:flex;
    align-items:center;
    gap:2rem;
    justify-content:space-between
}
.dm-bar .is-left{
    gap:1rem;
    justify-content:flex-start
}
.dm-bar .item{
    min-width:80px;
    padding:.6rem;
    border-radius:.6rem
}
.dm-bar .item:hover{
    background-color:hsla(0,0%,100%,.02)
}
.dm-bar .item.active .item-v .inc-icon,.dm-bar .item.active .item-v i{
    color:var(--primary-text)
}
.dm-bar .item .item-v{
    gap:.6rem;
    font-size:.9em;
    line-height:1
}
.dm-bar .item .item-v span{
    color:#fff!important
}
.dm-bar .item.item-remind{
    position:relative;
    cursor:pointer;
    animation:item-remind 1s infinite
}
.dm-bar .item.item-remind .inc-icon{
    animation:bell-remind .3s infinite;
    color:#fff
}
.dm-bar .item.item-remind.active,.dm-bar .item.item-remind.active .inc-icon{
    animation:none!important;
    color:var(--primary-color)
}
.item-rating .v-rating{
    height:16px;
    color:var(--primary-text);
    font-size:14px
}
.item-rating .v-rating span{
    font-size:18px;
    font-weight:600;
    line-height:1
}
@keyframes item-remind{
    0%{
        transform:scale(1)
    }
    50%{
        transform:scale(1.15)
    }
    to{
        transform:scale(1)
    }
}
@keyframes bell-remind{
    0%{
        transform:rotate(5deg)
    }
    50%{
        transform:rotate(-5deg)
    }
    to{
        transform:rotate(5deg)
    }
}
.ds-info #toggle-detail{
    display:none
}
.item-v{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6rem
}
.child-box{
    display:block;
    position:relative
}
.child-box .child-header{
    font-size:1.6em;
    font-weight:600;
    color:#fff;
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:40px
}
.child-box .child-header .inc-icon{
    width:24px;
    height:24px
}
.cc-top .item{
    display:flex;
    align-items:center;
    justify-content:space-between
}
.cc-top .item+.item{
    margin-top:1rem
}
.cc-top .item .position{
    width:60px;
    flex-shrink:0;
    text-align:left;
    font-size:4em;
    font-weight:800;
    color:var(--bg-color);
    text-shadow:-1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff
}
.cc-top .item .h-item{
    flex-grow:1;
    background-color:hsla(0,0%,100%,.02);
    border-radius:.5rem;
    overflow:hidden;
    gap:0
}
.cc-top .item .h-item .info{
    padding:.6rem 1rem
}
.content-gap{
    padding:0 40px;
    display:flex;
    flex-direction:column;
    gap:40px
}
.cg-body-box{
    padding:40px 0
}
.cg-body-box .box-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    margin-bottom:2rem
}
.v-toggle .text{
    color:#fff;
    font-size:.9em;
    white-space:nowrap
}
.v-toggle .toggle-x{
    border:1px solid #fff;
    border-radius:2rem;
    width:30px;
    height:20px;
    position:relative;
    cursor:pointer;
    opacity:.3;
    flex-shrink:0
}
.v-toggle .toggle-x span{
    position:absolute;
    top:5px;
    left:5px;
    height:8px;
    width:8px;
    background-color:#fff;
    border-radius:20px
}
.v-toggle .toggle-x.on{
    opacity:1;
    border-color:var(--primary-color)
}
.v-toggle .toggle-x.on span{
    left:15px;
    background-color:var(--primary-color)
}
.toggle-basic{
    border:1px solid #fff;
    border-radius:.2rem;
    font-size:10px;
    line-height:1;
    padding:.2rem;
    color:#fff;
    opacity:.5;
    cursor:pointer;
    width:28px;
    text-align:center
}
.toggle-basic:before{
    content:"OFF"
}
.toggle-basic-label.is-on .toggle-basic{
    opacity:1;
    border-color:var(--primary-color)
}
.toggle-basic-label.is-on .toggle-basic:before{
    content:"ON"
}
.de-eps.is-grid,.de-seasons.is-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-row-gap:2rem;
    row-gap:2rem;
    grid-column-gap:1.2rem;
    column-gap:1.2rem
}
.de-eps.is-grid .item .h-thumbnail{
    padding-bottom:56%;
    margin-bottom:.6rem;
    border-radius:.5rem
}
.de-eps.is-grid .item.on-air .h-thumbnail img{
    opacity:1!important
}
.de-eps.is-grid .item.on-air .h-thumbnail .play-button{
    display:none!important
}
.de-eps.is-grid .item.on-air .h-thumbnail{
    border:2px solid var(--primary-color)
}
.de-eps.is-grid .item.on-air .h-thumbnail:after{
    content:"Đang chiếu";
    position:absolute;
    bottom:0;
    left:0;
    background-color:var(--primary-color);
    color:var(--primary-button-text);
    padding:.2rem .5rem;
    font-size:11px;
    border-radius:0 .5rem 0 0
}
.de-eps.is-grid .item .h-thumbnail:hover img{
    opacity:.7
}
.de-eps.is-grid .item .h-thumbnail:hover .play-button{
    opacity:1
}
.de-eps.is-grid .item .h-thumbnail .play-button,.play-button.is-center{
    opacity:0;
    position:absolute;
    z-index:3;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:3rem;
    border:1px solid #fff;
    background-color:rgba(0,0,0,.5);
    padding-left:2px
}
.de-eps.is-grid .item .info{
    display:block
}
.de-eps.is-grid .item .info>div{
    display:inline
}
.de-eps.is-grid .item .info .play-button{
    display:none
}
.de-eps.is-grid .item .info .ep-sort:after{
    content:"."
}
.de-eps.is-grid .item .info .media-title{
    flex-grow:1
}
.de-eps.is-simple{
    grid-template-columns:repeat(8,1fr);
    gap:.6rem
}
.de-eps.is-simple .item .h-thumbnail{
    display:none
}
.de-eps.is-simple .item{
    display:flex;
    align-items:center;
    gap:.5rem;
    background-color:var(--bg-2);
    padding:.5rem .8rem;
    border-radius:.4rem
}
.de-eps.is-simple .item .info{
    display:flex;
    align-items:center;
    gap:.6rem
}
.de-eps.is-simple .item .info>div{
    display:block
}
.de-eps.is-simple .item .info .play-button{
    display:block;
    font-size:10px;
    flex-shrink:0
}
.de-eps.is-simple .item .info .media-title{
    display:none
}
.de-eps.is-simple .item .info .ep-sort{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex-shrink:unset!important;
    flex-grow:1
}
.de-eps.is-simple .item .info .ep-sort:after{
    display:none
}
.de-eps.is-simple .item.on-air{
    background-color:var(--bg-1);
    color:var(--primary-button-text);
    box-shadow:2px 2px 10px rgba(255, 187, 25, 0.6),0 0 20px rgba(255, 192, 0, 0.3);
    transform:scale(1.05)
}
.de-eps.is-simple .item.on-air:after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    border:1px solid rgb(221, 200, 35);
    opacity:.6
}
.de-eps.is-grid .item.schedule .h-thumbnail img{
    opacity:.3!important;
    filter:grayscale(1)
}
.de-eps.is-grid .item.schedule .h-thumbnail .play-button{
    display:none!important
}
.de-eps.is-grid .item.schedule .h-thumbnail:before{
    content:"Chờ phát sóng";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:hsla(0,0%,100%,.6);
    font-size:16px
}
.de-eps .item.schedule .info{
    color:#fff!important
}
.de-eps .item.schedule .time-release{
    color:#ff83f9;
    font-size:12px
}
.de-eps .item.schedule .time-release:before{
    content:"Phát sóng "
}
.de-eps.is-simple .item{
    justify-content:center;
    padding:0 .2rem;
    height:50px
}
.de-eps.is-simple .item.schedule{
    flex-direction:column;
    gap:0;
    background-color:#373a4b
}
.de-eps.is-simple .item.schedule .info .ep-sort,.de-eps.is-simple .item.schedule .info .play-button{
    font-size:12px
}
.de-eps.is-simple .item.schedule .info .play-button i:before{
    content:"\f017"!important
}
.de-eps.is-simple .item.schedule .time-release:before{
    display:none
}
.schedule-eps{
    display:flex;
    flex-direction:column;
    gap:.6rem;
    margin:2rem 0
}
.schedule-eps .item{
    position:relative;
    padding:.8rem 46px .8rem 55px;
    color:#fff;
    border-radius:.5rem;
    background-color:#4158d0;
    background-image:linear-gradient(90deg,#4158d0,#c850c0)
}
.schedule-eps .item .inc-icon{
    width:36px;
    height:36px;
    position:absolute;
    left:.5rem;
    top:50%;
    transform:translateY(-50%);
    background-color:rgba(0,0,0,.33);
    border-radius:50%;
    overflow:hidden
}
.schedule-eps .item .inc-icon img{
    transform:scale(1.2)
}
.schedule-eps .item .se-close{
    position:absolute;
    top:9px;
    right:9px;
    width:30px;
    height:30px;
    text-align:center;
    line-height:30px;
    cursor:pointer
}
.de-type{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-gap:1rem;
    gap:1rem
}
.de-type .item{
    width:100%;
    flex:1 1;
    max-width:550px;
    position:relative;
    border-radius:.75rem;
    overflow:hidden;
    background-color:var(--bg-4)
}
.de-type .item:hover{
    top:-5px
}
.de-type .item.active{
    border:2px solid var(--primary-color)
}
.de-type .item .m-thumbnail{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:40%;
    max-width:130px;
    mask-image:linear-gradient(270deg,#000,transparent 95%);
    -webkit-mask-image:linear-gradient(270deg,#000,transparent 95%)
}
.de-type .item .m-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover
}
.de-type .item .info{
    position:relative;
    z-index:2;
    width:90%;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1rem
}
.de-type .item .info .media-title{
    font-weight:600;
    font-size:1.2em;
    line-height:1.5
}
.de-type .item.lt{
    background-color:#1d2e79;
    color:#fff
}
.de-type .item.tm{
    background-color:#297447;
    color:#fff
}
.de-type .item.pd{
    background-color:#5e6070;
    color:#fff
}
.de-actors{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-gap:1.5rem;
    gap:1.5rem
}
.actors-grid-wrapper .item-actor,.de-actors .item-actor{
    position:relative;
    padding:0;
    border-radius:.6rem;
    overflow:hidden
}
.actors-grid-wrapper .item-actor .v-item,.de-actors .item-actor .v-item{
    gap:0
}
.actors-grid-wrapper .item-actor .v-actor,.de-actors .item-actor .v-actor{
    width:100%;
    height:0;
    padding-bottom:calc(100% + 40px);
    border-radius:0;
    margin:0;
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 60px);
    mask-image:linear-gradient(0deg,transparent,#000 60px)
}
.actors-grid-wrapper .item-actor .info,.de-actors .item-actor .info{
    padding:.75rem .5rem;
    margin-top:-40px;
    position:relative;
    z-index:2
}
.de-actors .item-actor .info .ro-play{
    font-size:.9em
}
.de-actors .item-actor .info .ro-play span{
    color:#f0adb1
}
.de-suggest{
    grid-template-columns:repeat(6,1fr)
}
.de-soundtrack,.item-sound{
    position:relative
}
.item-sound .media-title{
    font-size:1.1em;
    font-weight:500;
    color:#fff;
    margin-bottom:.4rem
}
.item-sound .lyric-post{
    padding:2rem;
    font-size:1.2em;
    line-height:1.5;
    position:relative
}
.item-sound .lyric-post p{
    margin-bottom:0
}
.item-sound .lyric-post .ori{
    color:#fff
}
.item-sound .lyric-post .trans{
    font-style:italic;
    color:#96e99b
}
.de-soundtrack .item-sound{
    border:1px solid var(--border-color);
    border-radius:.6rem
}
.de-soundtrack .item-sound+.item-sound{
    margin-top:1rem
}
.de-soundtrack .item-sound .sound-play{
    display:none
}
.de-soundtrack .item-sound .lyric-post{
    display:none;
    max-height:400px;
    overflow:auto
}
.de-soundtrack .item-sound.active,.de-soundtrack .item-sound:hover{
    background-color:hsla(0,0%,100%,.05)
}
.de-soundtrack .item-sound.active{
    border-color:#fff
}
.de-soundtrack .item-sound .h-item{
    cursor:pointer;
    padding:1rem
}
.de-soundtrack .item-sound.active .lyric-post,.de-soundtrack .item-sound.active .sound-play{
    display:block
}
.de-soundtrack .item-sound.active .sound-cover{
    animation:sound-cd 2s linear infinite
}
.de-soundtrack .item-sound.active .h-item .touch-media .btn-basic{
    color:#96e99b!important
}
@keyframes sound-cd{
    0%{
        transform:rotate(0)
    }
    to{
        transform:rotate(1turn)
    }
}
.de-seasons.is-grid{
    grid-template-columns:repeat(3,1fr);
    row-gap:1rem
}
.doubleA{
    display:block;
    text-align:center
}
.doubleA .ok-728 img{
    width:100%;
    max-width:728px;
    max-height:90px
}
.v-form-control{
    background-color:transparent!important;
    height:42px;
    border:1px solid #d6163d;
    border-radius:.4rem;
    color:#fff!important;
    font-size:.95em;
    padding:.5rem 1rem
}
.v-form-control:disabled{
    background-color:hsla(0,0%,100%,.02)!important;
    cursor:not-allowed
}
.v-form-control:focus{
    border-color:#fff!important;
    box-shadow:none!important
}
.v-form-control::placeholder{
    color:hsla(0,0%,100%,.4)
}
textarea.v-form-control{
    resize:none;
    padding:.6rem 1rem;
    height:auto
}
.user-password{
    position:relative
}
.user-password .v-form-control{
    padding-right:calc(1rem + 42px)
}
.user-password .toggle-password{
    width:42px;
    height:42px;
    opacity:.8;
    cursor:pointer;
    font-size:12px;
    text-align:center;
    line-height:42px;
    position:absolute;
    z-index:1;
    right:0;
    top:0;
    bottom:0
}
.user-password.show-text .toggle-password .fa-eye:before{
    content:"\f070"
}
.user-password.show-text input[type=password]{
    input-security:none
}
.my-area{
    margin-bottom:1.5rem
}
.my-area .ma-input{
    position:relative
}
.my-area .ma-input .chac-left{
    position:absolute;
    top:6px;
    right:10px;
    font-size:11px;
    line-height:1
}
.my-area .ma-buttons .btn-submit{
    color:var(--primary-text)!important
}
.textarea-wrap{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    padding:.5rem;
    border-radius:.75rem;
    background-color:#d6163d
}
.textarea-wrap .ma-buttons{
    padding:0
}
.textarea-wrap .ma-buttons .btn-emo i{
    font-size:14px
}
.my-area-sub{
    margin:.6rem 0;
    max-width:500px;
    display:none
}
.my-area-sub.reply-active{
    display:block
}
.my-area .ma-input .v-form-control{
    padding:1rem 1.2rem;
    border-radius:.6rem;
    border:1px solid transparent;
    background-color:var(--bg-color)!important
}
.my-area .ma-buttons .btn-emo .inc-icon{
    width:20px;
    height:20px
}
.ma-user{
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:1rem
}
.ma-user .user-avatar{
    width:44px;
    height:44px;
    border:2px solid #fff
}
.ma-user .info{
    display:flex;
    flex-direction:column
}
.ma-user .info span{
    font-weight:500;
    color:#fff
}
.discuss-tabs{
    margin-bottom:2rem;
    display:none
}
.discuss-list{
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    gap:2rem;
    margin-top:3rem
}
.d-item{
    display:flex;
    align-items:flex-start;
    gap:1rem;
    position:relative
}
.d-item .info{
    flex-grow:1
}
.d-item .user-name{
    font-size:1em;
    font-weight:500;
    color:#fff;
    margin-bottom:.3rem
}
.d-item .comment-header{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:.6rem;
    margin-bottom:.5rem;
    position:relative
}
.d-item .comment-header .user-name{
    margin:0;
    white-space:nowrap
}
.d-item .comment-header .rated{
    font-size:12px;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    line-height:1;
    padding:.3rem .6rem .3rem .3rem;
    border-radius:2rem;
    background-color:#3556b6
}
.d-item .comment-header .rated span{
    font-size:16px
}
.d-item .comment-header .c-time{
    opacity:.5;
    margin-left:.5rem;
    font-size:11px
}
.d-item .comment-header .ch-for{
    margin-left:.2rem;
    display:block;
    font-size:11px;
    white-space:nowrap;
    line-height:1.2;
    padding:.2rem .3rem;
    border:1px solid hsla(0,0%,100%,.33);
    opacity:.5;
    border-radius:.3rem
}
.d-item .comment-header .ch-for:hover{
    opacity:1;
    color:#fff;
    border-color:#fff
}
.d-item .comment-header .ch-for span:before{
    content:" - Tập "
}
.d-item .text{
    color:var(--text-base);
    filter:blur(0)
}
.d-item .text-spoil{
    filter:blur(4px)
}
.d-item .comment-bottom{
    position:relative;
    font-size:12px;
    margin-top:.5rem
}
.d-item .comment-bottom .btn-xs{
    height:28px;
    opacity:.5;
    font-weight:300;
    font-size:12px
}
.d-item .comment-bottom .btn-comment.active,.d-item .comment-bottom .btn-xs:hover{
    opacity:1
}
.d-item .comment-bottom .v-dropdown-menu .dropdown-item .fa-solid{
    min-width:16px;
    text-align:center
}
.limit-wrap{
    padding:0 1rem .25rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    max-width:180px
}
.limit-wrap .lw-item{
    font-size:11px;
    padding:.2rem .4rem;
    border-radius:.3rem;
    background-color:rgba(211,61,37,.09);
    display:inline-flex;
    color:#dc3545
}
.limit-wrap .lw-item.cancel{
    background-color:#eee!important;
    color:#111!important
}
.limit-wrap .lw-item.active,.limit-wrap .lw-item:hover{
    background-color:rgba(211,61,37,.19)
}
.open-limit.highlight{
    color:#dc3545!important
}
.d-item .replies-wrap{
    margin-top:1rem
}
.d-item .replies-wrap .replies-toggle{
    font-size:12px
}
.d-item .replies-wrap .replies{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding:1.5rem 0 0
}
.d-item .replies .user-avatar{
    width:40px;
    height:40px
}
.d-item .replies .rep-sub{
    display:inline;
    background-color:var(--bg-4);
    color:#fff;
    font-size:12px;
    padding:.2rem .3rem;
    vertical-align:text-top;
    border-radius:.2rem;
    margin-right:.2rem
}
.group-react{
    gap:1rem
}
.group-react .item{
    padding:0;
    gap:.4rem;
    justify-content:center;
    height:28px;
    cursor:pointer;
    font-size:11px
}
.group-react .item i{
    font-size:16px
}
.group-react .item-up.active,.group-react .item-up:hover{
    color:#25d366
}
.group-react .item-down.active,.group-react .item-down:hover{
    color:#d33d25
}
.child-discuss{
    padding-top:20px
}
.emo-list,.gif-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-gap:.2rem;
    gap:.2rem;
    padding:.5rem 1rem
}
.gif-list{
    grid-template-columns:repeat(auto-fill,minmax(60px,1fr))
}
.emo-list .el-item,.gif-list .gl-item{
    font-size:24px;
    line-height:1;
    padding:.6rem;
    border-radius:.6rem;
    text-align:center;
    cursor:pointer
}
.emo-list .el-item:hover,.gif-list .gl-item:hover{
    background-color:rgba(0,0,0,.07)
}
.bg-dark .emo-list .el-item:hover,.bg-dark .gif-list .gl-item:hover{
    background-color:#d6163d
}
.gif-list .gl-item .gl-img{
    width:100%;
    padding-bottom:100%;
    height:0;
    position:relative
}
.gif-list .gl-item .gl-img img{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    object-fit:cover
}
.gr-admin>span{
    background:linear-gradient(65deg,#df7a95,#fff);
    -webkit-background-clip:text
}
.gr-admin>span,.gr-mod>span{
    -webkit-text-fill-color:transparent
}
.gr-mod>span{
    background:linear-gradient(65deg,#77b1ff,#fff);
    -webkit-background-clip:text
}
.gr-mod>.gr-tag{
    border-color:#77b1ff;
    color:#77b1ff;
    background-color:rgba(30,126,255,.38)
}
.gr-admin>.gr-tag,.gr-tag-admin{
    border-color:rgba(226,20,78,.38);
    color:#df7a95;
    background-color:rgba(226,20,78,.38)
}
.gr-tag{
    font-size:.7em;
    text-transform:uppercase;
    line-height:1;
    font-weight:500;
    padding:.2rem .3rem;
    border-radius:3px
}
.sound-play{
    padding:1rem 1.5rem;
    background:#fff;
    background:linear-gradient(0deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0));
    width:100%
}
.audioplayer{
    margin:0;
    border:none;
    border-radius:.6rem;
    background-color:transparent;
    padding:0;
    height:50px;
    color:#fff;
    width:100%;
    justify-content:space-between
}
.audioplayer audio{
    min-width:0!important;
    display:none
}
.audioplayer-time{
    color:#fff
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after{
    top:1px;
    left:11px;
    border-color:#fff
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause{
    background-color:transparent!important;
    border-color:#96e99b
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a{
    border-left-color:#96e99b;
    margin-left:3px
}
.audioplayer-bar-played,.audioplayer-volume-adjust div div{
    background:#96e99b
}
.audioplayer-playing .audioplayer-bar-played:after{
    border-color:#fff
}
.audioplayer-playpause{
    width:40px;
    height:40px
}
.audioplayer-bar-played:after{
    border-color:#fff!important
}
.audioplayer-bar-loaded,.audioplayer-bar:before,.audioplayer-volume-adjust>div{
    background-color:#d6163d
}
.audioplayer-volume-button a{
    background-color:#fff
}
.audioplayer-volume-button a:before{
    border-right-color:#fff
}
.gallery-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:1rem;
    gap:1rem;
    margin-bottom:2rem
}
.gallery-row .item{
    display:flex;
    flex-direction:column;
    gap:.75rem
}
.gallery-row .item .media-title{
    font-size:1em;
    line-height:1.5;
    color:#fff;
    margin-bottom:0
}
.gallery-row.is-video{
    grid-template-columns:repeat(4,1fr)
}
.gallery-row.is-photo{
    grid-template-columns:repeat(6,1fr)
}
.gallery-row .media-item{
    width:100%;
    height:0;
    padding-bottom:100%;
    position:relative
}
.gallery-row.is-video .media-item{
    padding-bottom:60%
}
.gallery-row.is-photo .media-item{
    padding-bottom:100%
}
.play-button.is-center{
    opacity:1
}
.custom-tooltip{
    --bs-tooltip-bg:#fff;
    --bs-tooltip-color:#000
}
.tooltip{
    font-size:13px
}
.d-item.mine{
    padding:1rem;
    border-radius:.75rem;
    animation:flash 1s forwards;
    animation-delay:1s
}
@keyframes flash{
    0%{
        background-color:transparent
    }
    50%{
        background-color:hsla(0,0%,100%,.13)
    }
    to{
        background-color:#d6163d
    }
}
.d-item.d-item-pin{
    padding:1rem;
    border-radius:.75rem;
    background-color:hsla(0,0%,100%,.07)
}
.d-item.d-item-pin .stick{
    font-size:11px;
    margin-bottom:.4rem
}
.d-item.d-item-pin .stick i{
    color:#f8473e
}
#wrapper.makeup{
    position:relative;
    margin:5px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
#wrapper.makeup:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:900px;
    background:#0f111a;
    background:linear-gradient(0deg,rgba(15,17,26,0),#0f111a)
}
.watch-container,.watch-player{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1640px;
    padding:0 20px;
    margin:0 auto
}
.watch-container{
    display:flex;
    justify-content:space-between;
    align-items:stretch
}
.wc-side{
    width:440px;
    padding:var(--padding-base);
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:var(--padding-base);
    border-left:1px solid var(--border-color)
}
.wc-side>div+div{
    padding-top:var(--padding-base);
    border-top:1px solid var(--border-color)
}
.wc-main{
    flex-grow:1;
    padding:var(--padding-base);
    display:flex;
    flex-direction:column;
    gap:var(--padding-base)
}
.wc-main .wm-info{
    padding-bottom:var(--padding-base);
    border-bottom:1px solid var(--border-color);
    display:flex;
    gap:1.5rem
}
.wc-main .wm-info .alias-name{
    color:var(--primary-text);
    margin-bottom:1.25rem
}
.wc-main .wm-info .alias-name:before{
    content:"❝";
    font-size:14px;
    opacity:.8;
    margin-right:4px
}
.wc-main .wm-info .alias-name:after{
    content:"❞";
    font-size:14px;
    opacity:.8;
    margin-left:4px
}
.wc-main .wm-info .v-thumb-l{
    width:100px
}
.wc-main .wm-info .info{
    width:440px;
    flex-shrink:0
}
.wc-main .wm-info .desc-line{
    flex-grow:1;
    padding-left:40px
}
.wc-main .wm-info .description{
    -webkit-line-clamp:4;
    margin-bottom:1.5rem
}
.wc-main .wm-episodes .cg-body-box{
    padding:0
}
.watch-player{
    z-index:3
}
.watch-player .wp-bread{
    padding:0 40px;
    width:100%;
    margin-bottom:1.5rem
}
.player-ratio{
    position:relative;
    border-radius:.75rem;
    width:98%;
    max-width:1640px;
    padding:0 2px;
    margin:0 auto;
    box-shadow:0 0 0 1px rgba(255,215,0,.35),0 0 20px rgba(255,215,0,.12),0 0 60px rgba(255,215,0,.08)
}
.player-ratio .ratio{
    border-radius:.75rem .75rem 0 0;
    overflow:hidden;
    background-color:#08080a
}
.player-control{
    background-color:#08080a;
    border-radius:0 0 .75rem .75rem;
    height:64px;
    gap:0;
    justify-content:flex-start;
    width:100%
}
.player-control .ep-current{
    background-color:#535d8e;
    color:#fff;
    height:100%;
    padding:0 1rem;
    width:140px;
    justify-content:center;
    border-radius:0 0 0 .75rem;
    font-weight:600;
    flex-shrink:0
}
.player-control .control-items{
    gap:1rem;
    width:100%;
    padding:0 20px
}
.player-control .control-items .item{
    display:flex;
    align-items:center;
    gap:.6rem;
    color:#fff;
    padding:.6rem 1rem;
    cursor:pointer;
    border-radius:.4rem;
    white-space:nowrap
}
.player-control .control-items .item i{
    font-size:12px
}
.player-control .control-items .item:hover{
    background-color:rgba(83,93,142,.1)
}
.player-control .control-items .item-like.active .inc-icon{
    color:var(--primary-color)
}
.pc-coming{
    height:100%;
    padding:0 1rem;
    font-size:14px;
    line-height:1.4;
    font-weight:600;
    display:flex;
    align-items:center;
    text-align:center;
    width:100px;
    border-radius:0 0 0 .75rem;
    flex-shrink:0
}
.item-focus.is-on{
    background-color:rgba(83,93,142,.5)!important;
    visibility:visible!important
}
.focus-mod .item-focus.is-on{
    opacity:0
}
.player-ratio:hover .item-focus.is-on{
    opacity:1
}
body.focus-mod .watch-player{
    z-index:unset
}
body.focus-mod .player-ratio{
    z-index:101
}
body.focus-mod .player-ratio .ep-current{
    visibility:hidden
}
body.focus-mod .player-ratio .ratio{
    border-radius:.75rem
}
body.focus-mod .player-ratio .control-items .item{
    visibility:hidden
}
.item-playlist{
    position:relative
}
.v-dropdown-menu{
    text-align:left
}
.reason-list{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:.6rem
}
.reason-list .h-item{
    gap:.5rem;
    font-size:13px;
    border:1px solid var(--border-color);
    color:#fff;
    border-radius:.4rem;
    padding:.6rem;
    cursor:pointer
}
.reason-list .h-item.active{
    color:var(--primary-color);
    background-color:hsla(0,0%,100%,.05)
}
.reason-list .h-item .rl-icon{
    width:2rem;
    font-size:1.2em;
    flex-shrink:0;
    text-align:center
}
.reason-list .h-item span{
    flex-grow:1
}
.season-dropdown>.line-center{
    color:#fff;
    gap:.6rem;
    font-weight:600;
    font-size:1.4em;
    padding-right:1.5rem;
    border-right:1px solid hsla(0,0%,100%,.19);
    cursor:pointer
}
.season-dropdown>.line-center>.fa-caret-down{
    font-size:14px
}
.v-dropdown-menu{
    margin:2px 0;
    border:none!important;
    border-radius:.4rem
}
.v-dropdown-menu strong{
    font-weight:600
}
.v-dropdown-menu hr{
    border-color:rgba(0,0,0,.2)
}
.v-dropdown-menu .dropdown-item,.v-dropdown-menu .dropdown-item-text{
    font-size:13px;
    padding:.4rem 1rem;
    display:flex;
    align-items:center;
    gap:.6rem
}
.v-dropdown-menu .dropdown-item.active{
    background-color:var(--primary-color)!important;
    color:var(--primary-button-text)!important
}
.v-dropdown-menu .dropdown-item:active{
    background-color:inherit!important;
    color:inherit!important
}
.v-dropdown-menu.user-dropdown .dropdown-item{
    padding:.6rem 1rem
}
.v-dropdown-menu .dropdown-checkbox{
    padding:0;
    position:relative
}
.v-dropdown-menu .dropdown-checkbox .form-check-label{
    padding:.5rem 1rem .5rem 2.6rem;
    font-size:13px;
    cursor:pointer;
    width:100%
}
.v-dropdown-menu .dropdown-checkbox .form-check-label:hover{
    background-color:#f6f6f6
}
.v-dropdown-menu .dropdown-checkbox .form-check-input{
    margin:0;
    position:absolute;
    top:50%;
    left:1rem;
    transform:translateY(-50%);
    cursor:pointer;
    width:14px;
    height:14px;
    border-radius:.2rem
}
.v-dropdown-menu.bg-dark{
    background-color:rgba(15,17,26,.95)!important;
    color:var(--text-base)
}
.v-dropdown-menu.bg-dark .dropdown-item{
    color:#fff
}
.v-dropdown-menu.bg-dark .dropdown-item:hover{
    background-color:hsla(0,0%,100%,.02)
}
.v-dropdown-menu.bg-dark .dropdown-item:focus{
    background:none!important
}
.v-dropdown-menu.bg-dark hr{
    border-color:hsla(0,0%,100%,.2)
}
.droplist{
    overflow-x:hidden;
    overflow-y:auto;
    max-height:155px
}
.v-dropdown-menu.w-icon .dropdown-item .icon-center{
    width:16px;
    text-align:center
}
.m-col-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:.5rem
}
.m-col-4>.dropdown-item{
    border-radius:.5rem;
    padding:.2rem .8rem!important;
    width:140px
}
.m-col-4>.dropdown-item>span{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width:100%;
    display:block
}
.v-modal .modal-content{
    background-color:#2a314e;
    border:none!important;
    border-radius:.75rem;
    padding:2rem
}
.v-modal .modal-content .is-footer{
    display:flex;
    align-items:center;
    gap:.5rem;
    justify-content:center
}
.v-modal .modal-content .is-footer .btn{
    min-width:80px
}
.v-modal .modal-content .is-footer .m-page .btn{
    min-width:32px
}
.v-modal .modal-content .modal-close{
    position:absolute;
    top:0;
    right:0;
    color:#fff;
    border:none!important;
    width:40px;
    height:40px;
    padding:0
}
.v-modal .modal-content .modal-close i{
    font-size:16px
}
.modal-xs .modal-dialog{
    max-width:300px;
    width:96%;
    margin:auto
}
.modal-xs .modal-dialog .modal-content{
    padding:1.5rem
}
.modal-sm .modal-dialog{
    max-width:480px;
    width:96%;
    margin:auto
}
.modal-sm .modal-dialog .modal-content{
    padding:2rem
}
.modal-md .modal-dialog{
    max-width:600px;
    width:96%;
    margin:auto
}
.modal-md .modal-dialog .modal-content{
    padding:2rem
}
.modal-login .modal-dialog{
    max-width:750px;
    width:96%;
    margin:auto
}
.modal-login .modal-dialog .modal-content{
    min-height:400px;
    padding:3rem 3rem 3rem calc(360px + 3rem);
    background-color:#1e2545
}
.modal-login .modal-dialog .modal-content:before{
    content:"";
    width:360px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    background-image:url(/images/rophim-login.jpg);
    background-size:cover;
    background-position:0 100%;
    border-radius:.75rem 0 0 .75rem
}
.modal-trailer .modal-content{
    padding:.5rem;
    border-radius:1rem
}
.modal-trailer .modal-content .modal-close{
    z-index:9;
    border-radius:50%;
    background-color:#fff;
    color:#000;
    top:-.75rem;
    right:-.75rem;
    width:32px;
    height:32px;
    min-height:auto
}
.modal-trailer .modal-content .video-area{
    border-radius:.8rem;
    overflow:hidden
}
.modal-trailer .modal-dialog{
    max-width:750px;
    width:96%;
    margin:auto
}
.actor-container{
    width:100%;
    max-width:1640px;
    padding:0 20px;
    margin:0 auto;
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:0
}
.actor-container .ac-side{
    width:440px;
    flex-shrink:0;
    border-right:1px solid var(--border-color);
    padding-right:40px
}
.actor-container .ac-main{
    flex-grow:1
}
.ac-side .as-info .v-actor{
    width: 160px;
    height: 160px;
    border: 4px solid #FFF;
}
.ac-side .as-info .button-group{
    position:relative
}
.ac-side .as-info .button-group .item{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:.4rem 1rem;
    border-radius:3rem;
    border:1px solid var(--border-color);
    white-space:nowrap;
    font-size:13px;
    color:#fff;
    opacity:1
}
.ac-side .as-info .button-group .item:hover{
    opacity:.9
}
.ac-side .as-info .button-group .item.active .inc-icon{
    color:var(--primary-color)
}
.ac-main .actor-film{
    border-bottom:1px solid var(--border-color)
}
.ac-main .cg-body-box{
    padding-left:40px
}
.time-row{
    position:relative;
    margin-left:-40px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start
}
.time-row+.time-row{
    margin-top:3rem
}
.time-row .time-point{
    position:relative;
    flex-shrink:0;
    z-index:2;
    width:80px;
    height:80px;
    text-align:center;
    font-weight:600;
    color:#fff
}
.time-row .time-point span{
    position:absolute;
    transform:rotate(-90deg);
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-size:40px;
    font-weight:900;
    opacity:.2;
    letter-spacing:3px
}
.time-row .time-point:before{
    content:"";
    width:10px;
    height:10px;
    border-radius:2rem;
    background-color:var(--primary-color);
    position:absolute;
    left:-5px;
    top:0
}
/* Hover vào cả row */
.time-row:hover .time-point:before{
    background-color: #ff3b3b; /* màu bạn muốn */
    transform: scale(1.2); /* optional: hiệu ứng phóng nhẹ */
    border:2px solid #111
}
.time-row:hover {
    filter: brightness(0.8); /* giảm 20% */
    border-radius: 10px;
}

.time-row-cards{
    flex-grow:1;
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-column-gap:1rem;
    column-gap:1rem;
    grid-row-gap:1.5rem;
    row-gap:1.5rem
}
.topics-list{
    flex-direction:column;
    gap:3px;
    margin-top:2rem;
    align-items:stretch
}
.row-topic,.topics-list{
    display:flex;
    justify-content:space-between
}
.row-topic{
    align-items:center;
    gap:1rem;
    padding:2rem;
    position:relative;
    background-color:hsla(0,0%,100%,.02)
}
.row-topic>div{
    position:relative;
    z-index:3
}
.row-topic .mask{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    background-color:var(--bg-2)
}
.row-topic .intro{
    display:flex;
    flex-direction:column;
    gap:1rem;
    flex-shrink:0;
    width:200px
}
.row-topic .intro .inc-icon{
    width:60px;
    height:60px;
    flex-shrink:0
}
.row-topic .last-card{
    flex-grow:1;
    display:grid;
    grid-template-columns:repeat(8,1fr);
    grid-gap:1rem;
    gap:1rem
}
.row-topic .last-card .sw-item .info{
    min-height:auto
}
.topics-list.single{
    border-radius:1rem;
    background:#282b3a;
    background:linear-gradient(0deg,rgba(40,43,58,0) 20%,#282b3a);
    padding:2rem;
    gap:2rem
}
.topics-list.single .row-topic{
    background-color:transparent;
    padding:0
}
.topics-list.single .row-topic .intro{
    padding-right:1.5rem;
    padding-left:.5rem;
    gap:1.5rem;
    flex-shrink:unset;
    flex-grow:1
}
.topics-list.single .row-topic .intro .heading-md{
    font-size:2em!important;
    line-height:1.3;
    font-weight:700
}
.topics-list.single .row-topic .row-content{
    position:relative;
    width:calc(100% - 230px)
}
.topics-list.single .sw-item .v-thumbnail{
    border-radius:.4rem
}
.topics-list.single .sw-item .info{
    min-height:auto
}
.topics-list.single .sw-item .info .item-title{
    font-size:13px
}
.topics-list.single .sw-item .pin-new .line-center{
    line-height:1;
    padding:.3rem .4rem;
    font-size:10px
}
.topics-list.single .sw-navigation .sw-button{
    top:calc(50% - 28px);
    background-color:#fff!important;
    opacity:1;
    width:40px;
    height:40px;
    border-radius:50%;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    right:20px;
    box-shadow:0 0 20px 5px rgba(0,0,0,.2)
}
.topics-list.single .sw-navigation .sw-button.sw-prev{
    right:auto;
    left:20px
}
.topics-list.single .sw-navigation .sw-button.swiper-button-disabled{
    opacity:0
}
.topics-list.single .sw-navigation .sw-button svg{
    width:20px!important;
    height:20px!important;
    color:#000;
    position:relative;
    right:-1px
}
.topics-list.single .sw-navigation .sw-button.sw-prev svg{
    right:auto;
    left:-1px
}
.topics-list.single .h-item .info .info-line{
    display:none
}
.topics-list.single .h-item .info .item-title{
    margin-bottom:0
}
.topics-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-gap:1rem;
    gap:1rem
}
.topics-grid .row-topic .mask{
    -webkit-mask-image:linear-gradient(180deg,#000 -10%,rgba(0,0,0,.1));
    mask-image:linear-gradient(180deg,#000 -10%,rgba(0,0,0,.1))
}
.topics-grid .row-topic{
    position:relative;
    top:0;
    padding:1.2rem 2.5rem 1.2rem 1.5rem;
    border-radius:.75rem;
    overflow:hidden;
    justify-content:space-between;
    background:hsla(0,0%,100%,.8);
    background:radial-gradient(at left top,hsla(0,0%,100%,.8) 30%,rgba(255,111,111,.79) 100%)
}
.topics-grid .row-topic .intro{
    padding:0;
    width:100%;
    height:100%;
    min-height:110px;
    gap:.7rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    font-family: 'Quicksand', sans-serif;
}
.topics-grid .row-topic .intro .inc-icon{
    margin-bottom:1rem;
    display:none
}
.topics-grid .row-topic .intro .heading-md{
    font-weight:700;
    font-size:2em;
    color:#fff;
    line-height:1.3
}
.topics-grid .row-topic .intro .btn-outline{
    border:none!important;
    padding:0!important;
    font-size:14px!important
}
.topics-grid .row-topic:hover .intro .btn-outline{
    background-color:transparent!important;
    color:#fff!important
}
.topics-grid .row-topic:hover{
    top:-.6rem
}
.topic-background{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:50vh;
    mask-image:linear-gradient(0deg,transparent,#000);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000);
    opacity:.5;
    background-size:cover;
    background-position:50%;
    background-repeat:no-repeat
}
.heading-topic{
    text-shadow:none!important;
    font-size:3em!important;
    line-height:1.2!important
}
.v-rating{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.5rem;
    color:#fff
}
.v-rating .caption{
    padding-right:.8rem;
    font-size:13px;
    line-height:1
}
.v-rating .caption i{
    opacity:.3
}
.ro-icon{
    background-image:url(/images/ro-icon.svg);
    background-size:cover;
    background-position:50%;
    width:24px;
    height:24px
}
.ro-rating{
    cursor:pointer;
    display:flex;
    align-items:center;
    background-color:#3556b6;
    border-radius:3rem;
    padding:.5rem .6rem
}
.ro-rating .point{
    font-weight:700;
    font-size:16px;
    line-height:1;
    padding:0 .3rem 0 .5rem
}
.ro-rating .a-rate{
    font-size:11px;
    text-decoration:underline;
    margin:0 .2rem 0 .5rem
}
.rate-emo{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    background-color:rgba(0,0,0,.3);
    border-radius:1rem;
    padding:1rem;
    gap:.6rem
}
.rate-emo .item-v{
    flex:1 1;
    padding:1rem .4rem;
    color:#fff;
    font-size:13px;
    cursor:pointer;
    border-radius:.75rem;
    filter:grayscale(1)
}
.rate-emo .item-v.disable{
    filter:grayscale(1)!important;
    opacity:.3!important;
    cursor:default!important
}
.rate-emo .item-v.active{
    background-color:#3556b6
}
.rate-emo .item-v .inc-icon{
    width:60px;
    height:60px;
    flex-shrink:0
}
.rate-emo .item-v.active,.rate-emo .item-v:hover{
    filter:none
}
.rate-comment{
    margin:1rem auto 0;
    width:100%;
    position:relative
}
.rate-comment .v-form-control{
    border-radius:1rem;
    padding:1rem 1.2rem
}
.rate-comment div.v-form-control{
    border:none;
    font-size:1.2em;
    line-height:1.6;
    height:auto!important;
    min-height:auto!important;
    background-color:hsla(0,0%,100%,.025)!important
}
.rate-comment .has-reply{
    position:absolute;
    margin-top:-10px;
    right:20px;
    z-index:2;
    background-color:#2a314e!important;
    cursor:default
}
.ws-rate{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem
}
.ws-rate .v-rating{
    gap:.7rem
}
.wsr-left{
    font-size:13px
}
.v-line{
    width:1px;
    height:50px;
    margin:0 5px;
    background-color:var(--border-color)
}
.dashboard-container{
    position:relative;
    z-index:3;
    max-width:1640px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px
}
.dcc-main{
    flex-grow:1;
    padding:40px
}
.dcc-side{
    width:300px;
    flex-shrink:0;
    padding:40px;
    border-radius:1rem;
    background-color:#25272f
}
.dcc-side .ds-menu,.dcc-side .side-user{
    display:flex;
    flex-direction:column;
    gap:1rem
}
.dcc-side .side-user .user-avatar{
    width:60px;
    height:60px;
    border:2px solid #fff
}
.dcc-side .menu-user{
    display:flex;
    flex-direction:column;
    flex-grow:1;
    width:100%;
    margin-bottom:8rem
}
.dcc-side .menu-user .item{
    width:100%;
    padding:1rem 0;
    border-bottom:1px solid #2e313a
}
.dcc-side .menu-user .item.active{
    color:var(--primary-text)
}
.dcc-side .menu-user .item .line-center{
    width:100%;
    gap:1rem
}
.dcc-side .menu-user .item .line-center span{
    flex-grow:1
}
.dash-form{
    max-width:640px;
    display:flex;
    align-items:flex-start;
    flex-direction:row-reverse;
    gap:3rem
}
.dash-form .user-avatar{
    border:3px solid #fff;
    border-radius:100%;
    margin-top:1.7rem
}
.dcc-playlist{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-gap:1rem;
    gap:1rem;
    width:100%
}
.dcc-playlist .item{
    padding:.9rem 1.2rem;
    border:2px solid var(--border-color);
    display:flex;
    flex-direction:column;
    gap:.5rem;
    border-radius:.75rem;
    position:relative;
    cursor:pointer;
    box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.01)
}
.dcc-playlist .item.active{
    border-color:var(--primary-color)
}
.dcc-playlist .item .playlist-name{
    font-weight:600;
    font-size:1em;
    color:#fff
}
.v-form-playlist .v-form-control{
    padding:0;
    border:none!important;
    border-radius:0;
    border-bottom:1px solid var(--primary-color)!important;
    cursor:default;
    background-color:transparent!important;
    font-size:1em;
    color:var(--text-base)!important;
    font-style:italic;
    height:36px
}
.v-form-playlist .v-form-control:disabled{
    padding:0;
    border:none!important;
    cursor:default;
    font-weight:600;
    color:#fff!important;
    font-style:normal
}
.v-form-playlist .form-group{
    padding:.75rem 1rem;
    border:1px solid var(--border-color);
    border-radius:.6rem;
    position:relative
}
.form-w-icon{
    position:relative
}
.form-w-icon .form-control{
    padding-left:3rem!important
}
.form-w-icon .icon{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:1rem;
    font-size:.9em
}
.noti-wrap{
    position:relative;
    border-radius:.75rem;
    overflow:hidden;
    background-color:#282b3a!important
}
.noti-wrap strong{
    font-weight:500;
    color:#fff
}
.noti-wrap .h-item{
    padding:1rem;
    color:hsla(0,0%,100%,.6)
}
.noti-wrap .h-item+.h-item{
    border-top:1px solid hsla(0,0%,100%,.03)
}
.noti-wrap .h-item.new{
    background-color:#3a3e54!important
}
.noti-wrap .h-item:hover{
    background-color:#434761!important
}
.noti-wrap .h-item.new:hover{
    background-color:hsla(0,0%,100%,.07)
}
.noti-wrap .h-item .v-thumbnail{
    width:40px;
    flex-shrink:0;
    padding-bottom:54px;
    border-radius:.2rem
}
.noti-wrap .h-item .noti-icon{
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:var(--bg-5);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2em
}
.noti-wrap .h-item .time{
    opacity:.6
}
.noti-dropdown{
    width:320px;
    margin-top:5px!important;
    padding-top:0!important
}
.v-dropdown-menu.bg-dark.noti-dropdown{
    background-color:#282b3a!important
}
.noti-dropdown .noti-wrap{
    border-radius:0;
    background-color:transparent!important
}
.noti-dropdown .h-item{
    align-items:flex-start;
    font-size:13px
}
.noti-dropdown .h-item .noti-icon,.noti-dropdown .h-item .v-thumbnail{
    margin-top:.2rem
}
.noti-dropdown .v-notice{
    background-color:transparent!important;
    font-size:13px;
    padding:2rem
}
.noti-dropdown .dropdown-top{
    border-bottom:1px solid #d6163d;
    padding:.6rem 1rem
}
.noti-dropdown .dropdown-bottom{
    border-top:1px solid #d6163d
}
.noti-dropdown .v-tabs-xs .nav-link{
    position:relative;
    padding-right:.75rem!important;
    min-width:auto!important
}
.noti-dropdown .v-tabs-xs .nav-link+.nav-link{
    margin-left:1.1rem!important
}
.new-dot{
    position:absolute;
    top:0;
    right:0;
    width:6px;
    height:6px;
    background-color:red;
    border-radius:50%;
    display:block
}
.article-body{
    font-size:15px;
    line-height:1.8;
    font-weight:300;
    color:#d3d3d3
}
.article-body p{
    margin-bottom:1rem;
    color:#d3d3d3
}
.article-body b{
    font-weight:600
}
.article-body .screen-img{
    margin:2rem auto;
    text-align:center
}
.article-body .screen-img img{
    width:100%;
    max-width:800px;
    border:8px solid hsla(0,0%,100%,.07)
}
.article-body .heading-sm{
    margin-bottom:1rem
}
.article-body .v-ul-check{
    list-style:none;
    margin:2rem auto
}
.article-body .v-ul-check li+li{
    margin-top:1rem
}
.c-social-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
    grid-gap:1rem;
    gap:1rem;
    margin:2rem 0
}
.c-social-list .item{
    gap:0;
    padding:.7rem 1rem;
    border-radius:2rem;
    border:1px solid hsla(0,0%,100%,.13)
}
.c-social-list .item .inc-icon{
    width:16px;
    height:16px
}
.c-social-list .item .text-center{
    flex-grow:1;
    text-align:center
}
.contact-page{
    max-width:800px!important
}
.contact-body .v-form{
    max-width:500px;
    margin:2rem auto
}
.range-eps{
    margin:-.25rem 0 2.5rem;
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    gap:.75rem
}
.range-eps>.item{
    font-size:13px;
    padding:.3rem .6rem;
    border-radius:.3rem;
    color:var(--text-base);
    background-color:#d6163d;
    min-width:84px;
    text-align:center
}
.range-eps>.item:hover{
    color:#fff
}
.range-eps .item.active{
    color:#000!important;
    background-color:#fff!important
}
.wrapper-schedules{
    max-width:1400px;
    margin:0 auto
}
.schedules-layout{
    display:flex;
    flex-direction:column;
    gap:2rem;
    padding:1rem 0
}
.sche-time{
    position:relative
}
.sche-time .item-time{
    display:flex;
    flex-direction:column-reverse;
    gap:.75rem;
    font-size:1em;
    padding:1rem 1.2rem;
    border-radius:0;
    background-color:hsla(0,0%,100%,.02);
    flex:1 1;
    position:relative;
    cursor:pointer
}
.sche-time .item-time>div{
    line-height:1;
    white-space:nowrap
}
.sche-time .item-time .day{
    font-size:18px;
    color:#fff;
    font-weight:700
}
.sche-time .item-time .time{
    width:100%;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.sche-time .item-time .time span{
    font-size:10px;
    line-height:1;
    padding:.2rem .3rem;
    color:var(--primary-text);
    border:1px solid var(--primary-color);
    border-radius:.25rem
}
.sche-time .item-time.active{
    background-color:#d6163d
}
.sche-time .item-time.active:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background-color:var(--primary-color)
}
.sche-time .item-time.active .day{
    color:var(--primary-text)
}
.sche-timeline{
    display:flex;
    flex-direction:column;
    width:100%
}
.sche-timeline .st-row{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    min-height:60px
}
.sche-timeline .st-row:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:29px;
    height:2px;
    background-color:#d6163d
}
.sche-timeline .st-row>div{
    position:relative;
    z-index:2
}
.sche-timeline .st-row .clock{
    font-size:16px;
    font-weight:600;
    line-height:60px;
    flex-shrink:0;
    background-color:var(--bg-color);
    width:90px;
    text-align:center
}
.sche-timeline .st-row .items{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:1rem;
    gap:1rem;
    flex-grow:1;
    padding:1rem
}
.sche-timeline .st-row .h-item{
    padding:10px 15px 10px 10px;
    background-color:#363840;
    border:1px solid hsla(0,0%,100%,.13);
    border-radius:.75rem;
    font-size:13px;
    position:relative
}
.sche-timeline .st-row .h-item:hover{
    border-color:var(--primary-color)
}
.sche-timeline .st-row .h-item .t-pin{
    position:absolute;
    top:-12px;
    font-size:12px;
    line-height:1;
    padding:2px 4px;
    border-radius:3px;
    background-color:var(--bg-color)
}
.sche-navigation .sw-button{
    top:50%!important
}
.avatar-list{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-gap:6px;
    gap:6px
}
.avatar-list .item{
    width:100%;
    padding-bottom:100%;
    border-radius:0;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    opacity:.6;
    box-shadow:0 0 0 3px transparent
}
.avatar-list .item img{
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover
}
.avatar-list .item.active,.avatar-list .item:hover{
    opacity:1
}
.avatar-list .item.active:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:3px solid #fff;
    z-index:2
}
.question-box{
    margin:2rem 0;
    padding:1.5rem;
    max-width:560px;
    border:1px solid hsla(0,0%,100%,.19);
    border-radius:1rem;
    list-style:none
}
.question-box li+li{
    margin-top:.5rem
}
.comm-wrap{
    margin-bottom:1rem;
    border-radius:1rem;
    border:1px solid hsla(0,0%,100%,.13);
    display:flex;
    flex-direction:column
}
.top-discuss{
    padding:1.5rem 2rem;
    border-bottom:1px solid hsla(0,0%,100%,.13)
}
.td-d-item,.top-discuss .td-list{
    position:relative
}
.td-d-item{
    align-items:stretch;
    padding:1.2rem;
    border-radius:.6rem;
    overflow:hidden
}
.td-d-item .d-thumb{
    flex-shrink:0;
    width:50px;
    position:absolute;
    z-index:2;
    top:1.2rem;
    right:1.2rem
}
.td-d-item .d-thumb .v-thumbnail{
    border-radius:.3rem
}
.td-d-item .di-v{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    position:relative;
    z-index:2
}
.td-d-item .di-v .user-avatar{
    border:2px solid transparent;
    background-color:transparent
}
.td-d-item:hover .di-v .user-avatar{
    border-color:#fff
}
.td-d-item .di-poster{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);
    mask-image:linear-gradient(180deg,#000,transparent 80%)
}
.td-d-item:hover .di-poster{
    opacity:.7
}
.td-d-item .di-poster img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(5px);
    transform:scale(1.1)
}
.td-d-item .info{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    color:hsla(0,0%,100%,.6)
}
.td-d-item .info>div{
    margin-bottom:0
}
.td-d-item .info .text{
    flex-grow:1;
    font-size:13px;
    color:hsla(0,0%,100%,.53)!important;
    height:42px;
    margin-bottom:3px
}
.td-d-item .info .comment-bottom .line-center{
    gap:.3rem
}
.comm-title{
    font-size:13px;
    line-height:16px;
    margin-bottom:1.2rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#fff;
    cursor:default
}
.comm-title .ct-icon{
    font-size:16px;
    color:var(--primary-text)
}
.top-discuss-wrapper .sw-navigation .sw-button{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background-color:var(--bg-color)!important;
    border:1px solid hsla(0,0%,100%,.2)!important;
    opacity:1;
    border-radius:50%;
    right:-10px
}
.top-discuss-wrapper .sw-navigation .sw-button.sw-prev{
    right:auto;
    left:-10px
}
.top-discuss-wrapper .sw-navigation .sw-button.swiper-button-disabled{
    opacity:0
}
.top-discuss-wrapper .sw-navigation .sw-button svg{
    width:20px!important;
    height:20px!important
}
.irt-table{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:0
}
.irt-table .it-col{
    flex:1 1;
    padding:1.5rem 2rem
}
.irt-table .it-col+.it-col{
    border-left:1px solid hsla(0,0%,100%,.07)
}
.it-col .chart-list{
    display:flex;
    flex-direction:column;
    gap:0
}
.it-col .chart-list .item{
    display:flex;
    align-items:center;
    gap:1rem;
    height:50px
}
.it-col .chart-list .item>div{
    flex-shrink:0
}
.it-col .chart-list .item .pos{
    width:16px;
    font-size:1.2em;
    font-weight:600;
    opacity:.3
}
.it-col .chart-list .item .dev{
    width:16px;
    text-align:center
}
.it-col .chart-list .item .name{
    margin:0!important;
    font-size:1em;
    font-weight:400;
    flex-grow:1;
    color:#fff
}
.it-col .chart-list .item .v-thumbnail{
    width:25px;
    padding-bottom:36px;
    border-radius:.1rem
}
.it-col .chart-list .item .user-avatar{
    width:32px;
    height:32px
}
.it-col .chart-list .item .topic-color{
    padding:0 .8rem;
    height:28px;
    font-size:13px;
    display:flex;
    align-items:center;
    color:#fff;
    border-radius:30px
}
.it-col .chart-list .item-more a{
    color:hsla(0,0%,100%,.33)
}
.it-col .chart-list .item-more a:hover{
    color:var(--primary-text)
}
.it-col .release-list{
    position:relative
}
.re-item{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:68px;
    gap:.2rem;
    padding:.6rem .8rem .6rem calc(30px + 1.6rem);
    border-radius:.6rem;
    background-color:rgba(0,0,0,.33);
    border:1px solid transparent;
    color:var(--text-base)!important
}
.re-item:hover{
    background-color:rgba(0,0,0,.4);
    border-color:hsla(0,0%,100%,.27)
}
.re-item .user-avatar{
    width:30px;
    height:30px;
    flex-shrink:0;
    position:absolute;
    top:18px;
    left:.8rem
}
.re-item .user-comment{
    font-size:12px
}
.re-item .user-comment span{
    color:#fff
}
.re-item .for{
    font-size:12px;
    line-height:1.5;
    color:hsla(0,0%,100%,.33)
}
.re-item .for small{
    font-size:8px;
    color:var(--primary-text)
}
.sw-comment-slide{
    max-height:282px
}
.dev.dev-up{
    color:#bedc33
}
.dev.dev-down{
    color:#dc328c
}
.dev.dev-stand{
    color:hsla(0,0%,100%,.2)
}
.it-col.this-03 .chart-list .item:nth-child(10n+1) .topic-color{
    background-color:#742d4b!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+2) .topic-color{
    background-color:#387fda!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+3) .topic-color{
    background-color:#7356b1!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+4) .topic-color{
    background-color:#91ab47!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+5) .topic-color{
    background-color:#a98762!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+6) .topic-color{
    background-color:#218a8f!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+7) .topic-color{
    background-color:#9616d1!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+8) .topic-color{
    background-color:#c9512c!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+9) .topic-color{
    background-color:#616994!important
}
.it-col.this-03 .chart-list .item:nth-child(10n+10) .topic-color{
    background-color:#ad4c68!important
}
.it-col.this-05{
    max-width:550px
}
.d-modal .modal-content{
    background-color:#242838!important
}
.d-modal .comm-title{
    font-size:14px
}
.it-col.it-big{
    padding:0!important
}
.it-col.it-big .chart-list .item{
    height:70px
}
.it-col.it-big.this-03 .chart-list .item{
    height:60px
}
.it-col.it-big .chart-list .item+.item{
    border-top:1px solid hsla(0,0%,100%,.03)
}
.it-col.it-big .chart-list .item .v-thumbnail{
    width:36px;
    height:50px;
    border-radius:.2rem
}
.it-col.it-big .chart-list .item .pos{
    width:24px
}
.it-col.it-big .chart-list .item .name{
    -webkit-line-clamp:2!important;
    line-height:1.5
}
.it-col.it-big .chart-list .item .user-avatar{
    width:45px;
    height:45px
}
.it-col .chart-list .item .info .small-text{
    font-size:12px!important;
    color:hsla(0,0%,100%,.33)
}
.it-col .chart-list .item .info .small-text .s-icon{
    font-size:11px!important
}
.cards-boxed .row-tabs{
    display:flex;
    flex-wrap:wrap;
    column-gap:.5rem;
    row-gap:.5rem
}
.cards-boxed .row-tabs a{
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    padding:0 1rem;
    height:36px;
    border-radius:3rem;
    gap:.6rem;
    color:#fff;
    position:relative;
    background-color:#d6163d;
    overflow:hidden
}
.cards-boxed .row-tabs a:hover{
    background-color:hsla(0,0%,100%,.13)
}
.cards-boxed .row-tabs a.active{
    color:#000;
    background:#fcf1d8;
    background:linear-gradient(94deg,#fcf1d8,#fdb9de)
}
.cards-boxed .row-tabs a .inc-icon{
    width:24px;
    height:24px;
    display:none
}
.inc-icon.new-tag{
    width:80px!important;
    height:auto!important;
    position:relative;
    margin-left:-20px
}
#slide-cover-new .sw-navigation .sw-button{
    top:50%
}
.sw-cover.cover-fade{
    background-color:#224d67;
    border-radius:.75rem;
    overflow:hidden
}
.sw-cover.cover-fade .v-thumbnail{
    background-color:transparent;
    border-radius:.75rem .75rem 0 0
}
.sw-cover.cover-fade .v-thumbnail img{
    mask-image:linear-gradient(0deg,transparent,#000 40%);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 40%)
}
.sw-cover.cover-fade .h-item{
    margin-top:-3rem;
    padding:1.2rem
}
.sw-cover.cover-fade .h-item .info .item-title{
    font-size:1.1em;
    font-weight:600;
    margin-bottom:0
}
.sw-cover.cover-fade .h-item .info .alias-title{
    font-size:1em;
    color:var(--primary-text);
    margin-bottom:.6rem
}
.sw-cover.cover-fade .h-item .info .description{
    font-size:13px;
    color:#fff
}
.sw-cover.cover-fade .backdrop-filter{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-position:50%;
    background-size:cover;
    filter:blur(30px);
    opacity:.3;
    transform:scale(1.2)
}
.pin-relative{
    display:flex;
    align-items:center;
    gap:.3rem;
    font-size:12px;
    line-height:1.3
}
.pin-relative .video-type{
    padding:.2rem .4rem;
    font-size:11px;
    border:1px solid #fff;
    color:#fff;
    border-radius:.3rem;
    white-space:nowrap
}
.pin-relative .pin-new{
    transform:none;
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
    box-shadow:none;
    border-radius:0;
    gap:.3rem
}
.pin-relative .pin-new .line-center{
    border-radius:.3rem
}
.pin-relative .pin-new .line-pd{
    background-color:hsla(0,0%,100%,.21)
}
.radius-0{
    border-radius:0!important
}
.bg-trans{
    background-color:transparent!important;
    border-radius:.5rem!important
}
.text-gradient{
    text-shadow:none!important;
    letter-spacing:1px;
    font-weight:700!important;
    font-size:2.2em!important;
    background:linear-gradient(90deg,#fcf1d8,#ff7ee5);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
.v-loader-area{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 3rem;
    height:200px;
    position:relative
}
.v-loader-area.fixed{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:hsla(0,0%,100%,.02)
}
.v-loader{
    width:45px;
    aspect-ratio:1;
    --c:no-repeat linear-gradient(#5b5d68 0 0);
    background:var(--c) 0 50%,var(--c) 50% 50%,var(--c) 100% 50%;
    background-size:20% 100%;
    animation:l1 1s linear infinite;
    transform:scale(.9);
    border-radius:50%
}
@keyframes l1{
    0%{
        background-size:20% 100%,20% 100%,20% 100%
    }
    33%{
        background-size:20% 10%,20% 100%,20% 100%
    }
    50%{
        background-size:20% 100%,20% 10%,20% 100%
    }
    66%{
        background-size:20% 100%,20% 100%,20% 10%
    }
    to{
        background-size:20% 100%,20% 100%,20% 100%
    }
}
body{
    animation:allpage-load 1s forwards;
    overflow:hidden;
    width:100%;
    height:100vh
}
@keyframes allpage-load{
    0%{
        opacity:0
    }
    50%{
        opacity:0
    }
    to{
        opacity:1;
        overflow:unset;
        height:auto
    }
}
#body-load{
    position:fixed;
    z-index:1000;
    top:0;
    right:0;
    bottom:0;
    height:100vh;
    background-color:var(--bg-color);
    animation:body-load-effect 3s forwards
}
#body-load,#body-load .bl-logo{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center
}
#body-load .bl-logo{
    max-width:800px;
    flex-direction:column;
    gap:2rem;
    font-size:3em;
    line-height:1.4;
    color:hsla(0,0%,100%,.19);
    font-weight:600;
    animation:logo-load 3s forwards
}
#body-load .bl-logo img{
    width:60%;
    max-width:360px;
    height:auto
}
body.base-load{
    animation:base-load 2s forwards;
    overflow:hidden;
    width:100%;
    height:100vh;
    animation-delay:1s
}
@keyframes body-load-effect{
    0%{
        opacity:1%;
        z-index:1000
    }
    75%{
        opacity:1%;
        z-index:1000
    }
    to{
        opacity:0;
        z-index:-100
    }
}
@keyframes base-load{
    0%{
        opacity:0
    }
    to{
        opacity:1;
        overflow:unset;
        height:auto
    }
}
@keyframes logo-load{
    0%{
        transform:scale(1.05)
    }
    60%{
        transform:scale(1);
        opacity:1
    }
    80%{
        transform:scale(.6);
        opacity:0
    }
    to{
        opacity:0
    }
}
@keyframes home-load{
    80%{
        overflow:hidden
    }
    to{
        background-image:url(/images/home-background.jpg);
        overflow:auto
    }
}
.info-line .tag-small{
    margin-right:0
}
.info-line .tag-small+.tag-small{
    margin-left:10px;
    padding-left:10px;
    position:relative
}
.info-line .tag-small+.tag-small:before{
    content:"";
    width:5px;
    height:5px;
    display:inline-block;
    background-color:hsla(0,0%,100%,.19);
    position:absolute;
    left:-3px;
    top:calc(50% - 3px);
    border-radius:50%
}
.block-404{
    width:100%;
    max-width:800px;
    padding:0 30px;
    margin:6rem auto;
    text-align:center
}
.block-404 .description{
    font-size:1.1em;
    margin-bottom:3rem
}
.block-404 .icon-404{
    margin-bottom:2rem;
    filter:grayscale(1);
    opacity:.3
}
.block-404 .icon-404 img{
    width:100%;
    max-width:300px;
    height:auto
}
.v-thumbnail .text-more{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-weight:500;
    font-size:1.1em;
    white-space:nowrap
}
.Toastify__toast{
    border-radius:.6rem!important
}
.Toastify__progress-bar--wrp{
    height:3px!important
}
.Toastify__toast-theme--dark{
    background:hsla(0,0%,100%,.06)!important;
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px)
}
.ratio-16x9 video{
    object-fit:cover
}
.cat-more .line-center{
    padding:0;
    height:30px;
    width:30px;
    border-radius:2rem;
    border:1px solid hsla(0,0%,100%,.33);
    font-size:14px;
    justify-content:center;
    gap:0
}
.cat-more.active .line-center,.cat-more:hover .line-center{
    width:auto;
    padding:0 .5rem
}
.cat-more span{
    display:none;
    font-size:12px;
    padding:0 .4rem
}
.cat-more i{
    width:20px;
    text-align:center
}
.cat-more.active span,.cat-more:hover span{
    display:block
}
.denied-box{
    background-color:#1e212e;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:1.5rem 25%;
    gap:2rem;
    font-size:2.3em;
    font-weight:600;
    color:#fff
}
.denied-box,.denied-box:before{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
.denied-box:before{
    content:"";
    background-image:url(/images/denied-bg.webp);
    background-size:cover;
    background-position:50%;
    opacity:.2
}
.denied-box .denied-icon img{
    width:220px;
    height:220px;
    border-radius:15%
}
.quality-notice{
    position:absolute;
    z-index:99;
    left:50%;
    transform:translateX(-50%);
    top:auto!important;
    height:auto!important;
    bottom:-200px;
    width:90%;
    max-width:320px;
    background-color:#fff;
    font-size:14px;
    color:#000;
    box-shadow:0 0 10px 10px rgba(0,0,0,.07);
    padding:1rem;
    border-radius:.8rem;
    animation:pop-show .75s forwards;
    animation-delay:1s
}
.quality-notice .notice-dismiss{
    color:#888;
    font-size:12px;
    font-weight:400;
    margin-top:.6rem;
    cursor:pointer
}
@keyframes pop-show{
    0%{
        opacity:0;
        bottom:-200px
    }
    to{
        opacity:1;
        bottom:30px
    }
}
.app-box-fix{
    position:fixed;
    z-index:9;
    bottom:1rem;
    left:1rem;
    background-color:#fff;
    border-radius:1rem;
    padding:1.2rem;
    color:#000;
    width:100%;
    max-width:300px;
    box-shadow:0 0 10px 3px rgba(0,0,0,.13)
}
.app-box-fix .heading-xs{
    color:#000;
    margin-bottom:.75rem
}
.app-box-fix .close-app-box{
    margin-top:1.25rem
}
.app-box-fix .close-app-box a{
    color:#000;
    font-size:12px;
    padding:.6rem 1rem;
    text-align:center;
    display:block;
    width:100%;
    background-color:#eff1f8;
    border-radius:.5rem
}
.app-box-fix .close-app-box a:hover{
    background-color:#d9def1
}
.app-box-fix .app-box .appicon img{
    width:60px;
    border-radius:.7rem
}
.table-wrap{
    margin:2rem auto;
    max-width:800px;
    padding:10px;
    border:1px solid hsla(0,0%,100%,.6);
    border-radius:1rem;
    overflow:hidden
}
.v-table{
    margin:0;
    font-size:14px;
    border-radius:.8rem;
    overflow:hidden
}
.table.v-table>:not(caption)>*>*{
    padding:.6rem .8rem
}
.v-table.table-dark{
    --bs-table-bg:hsla(0,0%,100%,0.07);
    --bs-table-border-color:var(--bg-color)
}
.br-none{
    border-right:none!important
}
.button-play.is-coming{
    position:relative;
    font-size:16px;
    padding-top:.5rem!important;
    padding-bottom:calc(.5rem + 22px)!important;
    padding-left:1.5rem;
    padding-right:1.5rem;
    border:none;
    border-radius:.75rem!important;
    overflow:hidden;
    height:auto!important;
    gap:.75rem
}
.button-play.is-coming .text{
    font-size:11px;
    line-height:24px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    color:#000;
    border-radius:0
}
#totop{
    position:fixed;
    z-index:99;
    right:1rem;
    bottom:-100px;
    width:56px;
    height:56px;
    border-radius:25%;
    background-color:#fff;
    box-shadow:0 0 10px 0 rgba(0,0,0,.13);
    color:#000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px
}
#totop>div{
    font-size:10px;
    line-height:1.1;
    font-weight:600;
    text-transform:uppercase
}
#totop i{
    font-size:14px;
    position:relative
}
#totop:hover i{
    top:-2px
}
.code-page{
    padding:100px 0!important
}
.your-account{
    display:flex;
    justify-content:center;
    color:#fff;
    margin-bottom:1rem
}
.your-account .user-avatar{
    width:40px;
    height:40px
}
.your-account strong{
    font-weight:500
}
.login-code-box{
    display:flex;
    flex-direction:column;
    gap:4rem;
    justify-content:center;
    max-width:700px;
    margin:3rem auto
}
.login-code{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:1.5rem
}
.login-code .form-control{
    flex:1 1;
    background-color:transparent;
    color:#fff;
    font-size:3em;
    font-weight:600;
    padding:.75rem;
    text-align:center;
    border:4px solid transparent!important;
    border-bottom-color:hsla(0,0%,100%,.13)!important;
    border-radius:0;
    box-shadow:none!important
}
.login-code .form-control::placeholder{
    color:hsla(0,0%,100%,.4)
}
.login-code .form-control:focus{
    border-color:hsla(0,0%,100%,.27)!important
}
.login-code.error .form-control{
    border-color:rgba(201,77,77,.1)!important;
    color:#c94d4d!important;
    background-color:rgba(201,77,77,.1)!important
}
.login-code-box .buttons{
    display:flex;
    flex-direction:column;
    gap:1rem;
    width:100%;
    max-width:320px;
    margin:0 auto
}
.login-code-box .buttons .btn-light[disabled]{
    background-color:hsla(0,0%,100%,.6)!important;
    border:none!important
}
.display-pin{
    display:flex;
    flex-direction:column;
    gap:1.5rem
}
.tv-checked{
    display:block;
    text-align:center;
    padding:50px 0
}
.tv-checked img{
    width:240px;
    height:auto
}
.flexbin{
    display:flex;
    overflow:hidden;
    flex-wrap:wrap;
    gap:.4rem
}
.flexbin:after{
    content:"";
    flex-grow:999999999;
    min-width:200px;
    height:0
}
.flexbin>*{
    position:relative;
    display:block;
    height:200px;
    flex-grow:1
}
.flexbin>*>img{
    height:100%;
    object-fit:cover;
    max-width:100%;
    min-width:100%;
    vertical-align:bottom
}
@media (max-width:980px){
    .flexbin:after{
        min-width:150px
    }
    .flexbin>*{
        height:150px
    }
}
@media (max-width:400px){
    .flexbin:after{
        min-width:100px
    }
    .flexbin>*{
        height:100px
    }
}
body.homepage{
    background-color:#14161e;
    background-position:top;
    background-repeat:no-repeat;
    background-size:contain;
    animation:home-load 2s forwards
}
body.homepage .container{
    max-width:1120px
}
#section-first{
    display:flex;
    justify-content:center;
    align-items:center
}
#section-first .button-play{
    opacity:1!important;
    transform:scale(1.1)
}
#section-first .btn-blank{
    color:var(--text-base);
    border:none!important
}
#section-first .btn-blank:hover{
    color:var(--primary-text)
}
.home-board{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3rem;
    width:100%;
    padding:6rem 8rem;
    margin:15rem auto 8rem;
    border-radius:2rem;
    background-color:hsla(0,0%,100%,.025);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(15px)
}
.home-board .home-logo img{
    height:60px
}
.home-board .heading-xl{
    text-align:center;
    font-size:2.6em
}
#section-second{
    padding:0 0 4rem
}
#home-footer{
    text-align:center;
    padding-bottom:4rem
}
.home-footer-menu{
    margin:2rem auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    row-gap:1rem;
    column-gap:2.5rem;
    padding:0 20px
}
.home-footer-menu a{
    white-space:nowrap;
    color:var(--text-base)
}
.home-footer-menu a:hover{
    color:var(--primary-text)
}
#about{
    position:relative;
    font-size:1.1em;
    line-height:1.7;
    color:#cfcfcf;
    padding:0 6rem
}
#about a{
    color:#fff
}
#about a:hover{
    color:var(--primary-text)
}
#about p{
    line-height:1.7;
    margin-bottom:1rem
}
#about b{
    font-weight:600
}
#about h1,#about h2,#about h3,#about h4,#about h5{
    line-height:1.6;
    font-weight:500
}
#about h1{
    font-size:1.8em
}
#about h1,#about h2{
    margin:1.5rem 0;
    color:var(--primary-text)
}
#about h2{
    font-size:1.6em
}
#about h3{
    font-size:1.4em;
    margin:0 0 1.25rem;
    color:#fff
}
#about h4{
    font-size:1.2em;
    margin-bottom:.5rem;
    color:var(--primary-text)
}
#about h5{
    font-size:1.1em;
    margin-bottom:.5rem;
    color:#fff
}
@media screen and (max-width:1440px){
    .home-board{
        margin:8rem auto 5rem
    }
}
@media screen and (max-width:1280px){
    .home-board{
        margin:6rem auto 4rem
    }
}
@media screen and (max-width:980px){
    body.homepage{
        background-size:1600px
    }
    .home-board{
        margin:5rem auto 3rem;
        padding:4rem;
        gap:2rem;
        border-radius:1.5rem
    }
    .home-board .heading-xl{
        font-size:2em
    }
    #about{
        padding:0
    }
}
@media screen and (max-width:640px){
    body.homepage .container{
        padding:0 20px
    }
    .home-board{
        padding:3rem
    }
    .home-board .heading-xl{
        font-size:1.8em
    }
    #about{
        font-size:1em
    }
}
@media screen and (max-width:479px){
    .home-board{
        padding:2rem
    }
    .home-board .home-logo img{
        height:50px
    }
    .home-board .heading-xl{
        font-size:1.6em
    }
    #section-first .buttons{
        width:100%
    }
    #section-first .button-play{
        transform:scale(1);
        width:100%;
        display:block
    }
    .home-footer-menu{
        margin-bottom:3rem;
        row-gap:1rem;
        column-gap:2rem
    }
    #home-footer{
        padding-bottom:3rem
    }
}
.sspp-area.is-wide.is-catfish-top{
    top:0
}
.sspp-area.is-wide.is-catfish,.sspp-area.is-wide.is-catfish-top{
    position:fixed;
    left:0;
    right:0;
    text-align:center;
    padding:0;
    flex-direction:column;
    z-index:15
}
.sspp-area.is-wide.is-catfish{
    bottom:0
}
.sspp-area,.sspp-area .display-single{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
.sspp-area .display-single{
    width:100%;
    height:100%
}
.sspp-area.is-wide .display-single.is-demo{
    max-width:900px
}
.sspp-area .display-single .is-image{
    display:block;
    border:1px solid #fff;
    width:100%
}
.sspp-area .display-single .is-image img{
    width:100%;
    height:100%;
    object-fit:cover
}
.sspp-area .close-it{
    position:absolute;
    top:.5rem;
    right:.5rem;
    z-index:5;
    cursor:pointer;
    opacity:.5;
    display:flex;
    align-items:center;
    gap:.4rem;
    padding:.4rem .5rem;
    background-color:rgba(0,0,0,.4);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:12px;
    text-shadow:0 0 4px rgba(0,0,0,.13);
    line-height:1;
    border:1px solid #fff;
    box-shadow:0 0 5px 5px rgba(0,0,0,.07);
    border-radius:.4rem
}
.sspp-area .close-it:hover{
    opacity:1
}
.sspp-modal .modal-dialog{
    max-width:400px
}
.sspp-area{
    z-index:8;
    gap:4px
}
.sspp-area.is-square-400 .display-single{
    max-width:400px
}
.sspp-area.is-wide{
    padding:0 1rem
}

.detail-line.alternative_names{
    display:flex;
    flex-direction:column;
    gap:12px
}
.detail-line.alternative_names .label{
    font-weight:600;
    font-size:25.2px;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.4px
}
.detail-line.alternative_names .value{
    display:flex;
    flex-direction:column;
    gap:6px
}
.detail-line.alternative_names .value a{
    position:relative;
    display:block;
    padding-left:20px;
    font-size:14px;
    color:#e5e7eb;
    text-decoration:none;
    line-height:1.6;
    transition:all .25s ease
}
.detail-line.alternative_names .value a:before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:0;
    height:0;
    border-left:8px solid #facc15;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent
}
.detail-line.alternative_names .value a:hover{
    color:#fff;
    transform:translateX(4px)
}
.detail-line.alternative_names .value a:hover:before{
    transform:translateX(3px)
}
.page-404-xemphim{
    min-height:100vh;
    padding:150px 15px 60px!important;
    background:radial-gradient(1200px 600px at 50% -200px,rgba(250,204,21,.12),transparent 60%),linear-gradient(180deg,#020617,#020617);
    color:#e5e7eb
}
.error-box-xemphim{
    max-width:760px;
    margin:0 auto 60px;
    padding:48px 40px;
    text-align:center;
    background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.95));
    border-radius:22px;
    box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 hsla(0,0%,100%,.05);
    position:relative;
    overflow:hidden
}
.error-box-xemphim:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(600px 300px at 50% 0,rgba(250,204,21,.18),transparent 60%);
    pointer-events:none
}
.error-code{
    font-size:104px;
    font-weight:900;
    letter-spacing:2px;
    line-height:1;
    margin-bottom:12px;
    background:linear-gradient(180deg,#fde047,#f59e0b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
.error-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:14px;
    color:#f8fafc
}
.error-desc{
    font-size:15px;
    line-height:1.7;
    color:#94a3b8;
    max-width:520px;
    margin:0 auto 28px
}
.xemphim-badge{
    position:absolute;
    top:10px;
    padding:4px 10px;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    border-radius:999px;
    color:#020617;
    z-index:3;
    backdrop-filter:blur(6px);
    box-shadow:0 4px 12px rgba(0,0,0,.35);
    white-space:nowrap
}
.xemphim-quality{
    left:10px;
    background:linear-gradient(135deg,#facc15,#ca8a04);
    color:#111
}
.xemphim-lang{
    right:10px;
    background:linear-gradient(135deg,#2563eb,#1e40af);
    color:#fff
}
.error-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 34px;
    font-size:14px;
    font-weight:600;
    color:#020617;
    background:linear-gradient(180deg,#38bdf8,#0284c7);
    border-radius:999px;
    text-decoration:none;
    transition:all .3s ease;
    box-shadow:0 12px 30px rgba(56,189,248,.35)
}
.error-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(56,189,248,.45);
    color:#000
}
.suggest-404{
    max-width:1240px;
    margin:0 auto
}
.suggest-title{
    font-size:22px;
    font-weight:700;
    margin-bottom:28px;
    color:#f8fafc;
    text-align:left
}
.suggest-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px
}
.suggest-item{
    background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.95));
    border-radius:16px;
    overflow:hidden;
    transition:transform .35s ease,box-shadow .35s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 1px 0 hsla(0,0%,100%,.04)
}
.suggest-item:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(0,0,0,.75)
}
.suggest-thumb{
    position:relative;
    display:block;
    aspect-ratio:2/3;
    overflow:hidden
}
.suggest-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease
}
.suggest-item:hover .suggest-thumb img{
    transform:scale(1.08)
}
.suggest-thumb:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(2,6,23,.85))
}
.suggest-name{
    padding:14px 14px 16px;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    text-align:center;
    background:#31394f
}
.suggest-name a{
    color:#e5e7eb;
    text-decoration:none;
    transition:color .25s ease
}
.suggest-name a:hover{
    color:#fde047
}
@media (max-width:1200px){
    .suggest-grid{
        grid-template-columns:repeat(3,1fr)
    }
}
@media (max-width:768px){
    .page-404-xemphim{
        padding-top:60px
    }
    .error-box-xemphim{
        padding:36px 26px
    }
    .error-code{
        font-size:78px
    }
    .suggest-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px
    }
}
@media (max-width:480px){
    .suggest-title{
        text-align:center
    }
    .error-title{
        font-size:22px
    }
}
.group-film{
    max-width:92%;
    margin:150px auto;
    padding:12px 15px;
    background:#322f2f;
    border-radius:10px;
    box-shadow:0 20px 60px rgba(180,151,42,.45);
    position:relative;
    overflow:hidden;
    display:block!important
}
.group-film h1{
    font-size:34px;
    font-weight:800;
    margin-bottom:30px;
    color:#f8fafc;
    position:relative
}
.group-film h1:after{
    content:"";
    width:60px;
    height:4px;
    background:linear-gradient(90deg,#f59e0b,#facc15);
    display:block;
    margin-top:14px;
    border-radius:3px
}
.group-film h2{
    font-size:22px;
    font-weight:700;
    margin-top:40px;
    margin-bottom:16px;
    color:#e5e7eb
}
.group-film p{
    font-size:15px;
    line-height:1.8;
    color:#cbd5e1;
    margin-bottom:16px
}
.group-film ul{
    padding-left:0;
    margin:15px 0 25px
}
.group-film ul li{
    list-style:none;
    position:relative;
    padding-left:26px;
    margin-bottom:12px;
    font-size:15px;
    line-height:1.7;
    color:#d1d5db
}
.group-film ul li:before{
    content:"➤";
    position:absolute;
    left:0;
    top:0;
    color:#facc15;
    font-size:14px
}
.group-film>*+*{
    margin-top:12px
}
@media (max-width:768px){
    .group-film{
        padding:30px 24px;
        margin:40px 15px
    }
    .group-film h1{
        font-size:26px
    }
    .group-film h2{
        font-size:18px
    }
    .group-film li,.group-film p{
        font-size:14px
    }
}
.page-title{
    position:relative;
    margin:28px 0 22px;
    padding:14px 18px;
    font-size:28px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:.4px;
    color:#fff!important;
    background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(56,189,248,.04));
    border-left:4px solid #38bdf8;
    border-radius:10px;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
    box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.05),0 12px 30px rgba(0,0,0,.45)
}
.page-title:after{
    content:"";
    position:absolute;
    left:18px;
    bottom:-10px;
    width:80px;
    height:3px;
    background:linear-gradient(90deg,#38bdf8,transparent);
    border-radius:3px
}
.noidung{
    color:#e5e7eb!important;
    font-size:15.5px;
    line-height:1.9;
    letter-spacing:.2px;
    background:linear-gradient(180deg,rgba(20,22,28,.9),rgba(12,14,18,.95));
    padding:26px 22px;
    border-radius:14px;
    box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.05),0 20px 40px rgba(0,0,0,.45);
    backdrop-filter:blur(6px)
}
.noidung *{
    box-sizing:border-box;
    max-width:100%
}
.noidung h1,.noidung h2,.noidung h3,.noidung h4{
    color:#fff;
    font-weight:700;
    margin:26px 0 14px;
    line-height:1.4
}
.noidung h1{
    font-size:26px
}
.noidung h2{
    font-size:22px
}
.noidung h3{
    font-size:18px
}
.noidung p{
    margin-bottom:14px;
    color:#d1d5db
}
.noidung ol,.noidung ul{
    margin:12px 0 18px 22px
}
.noidung li{
    margin-bottom:8px;
    color:#cbd5e1
}
.noidung ul li::marker{
    color:#38bdf8
}
.noidung a{
    color:#38bdf8;
    text-decoration:none
}
.noidung a:hover{
    color:#7dd3fc;
    text-decoration:underline
}
.noidung strong{
    color:#fff;
    font-weight:600
}
@media (max-width:768px){
    .page-title{
        margin:20px 0 16px;
        padding:12px 14px;
        font-size:20px;
        line-height:1.3;
        letter-spacing:.2px;
        border-left-width:3px;
        text-shadow:0 1px 6px rgba(0,0,0,.45);
        box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04),0 8px 20px rgba(0,0,0,.35)
    }
    .page-title:after{
        left:14px;
        bottom:-8px;
        width:56px;
        height:2.5px
    }
    .noidung{
        padding:18px 14px;
        font-size:14.8px;
        line-height:1.75;
        letter-spacing:.15px;
        box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04),0 12px 24px rgba(0,0,0,.35);
        backdrop-filter:blur(4px)
    }
    .noidung h1{
        font-size:22px;
        margin:22px 0 12px
    }
    .noidung h2{
        font-size:19px;
        margin:20px 0 10px
    }
    .noidung h3{
        font-size:16.5px;
        margin:18px 0 8px
    }
    .noidung p{
        margin-bottom:12px
    }
    .noidung ol,.noidung ul{
        margin:10px 0 16px 18px
    }
    .noidung li{
        margin-bottom:6px
    }
}
.section-heading{
    position:relative;
    margin-bottom:14px
}
.section-title{
    display:inline-block;
    font-size:1.4rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#fff;
    line-height:1.2;
    padding-bottom:6px
}
.section-title:after{
    content:"";
    display:block;
    margin-top:6px;
    width:72%;
    height:3px;
    background:linear-gradient(90deg,#f59e0b,#f97316);
    border-radius:2px
}
@media (min-width:1024px){
    .section-title{
        font-size:1.55rem
    }
}
.about-page{
    max-width:1200px;
    margin:0 auto;
    padding:60px 16px;
    color:#e5e5e5;
    line-height:1.7
}
.about-hero{
    text-align:center;
    margin-bottom:60px
}
.about-hero h1{
    font-size:2.4rem;
    font-weight:700
}
.about-hero-desc{
    max-width:760px;
    margin:16px auto 0;
    color:#b5b5b5
}
.about-cover{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:80px
}
.about-cover img{
    width:100%;
    height:420px;
    object-fit:cover;
    object-position:top center;
    filter:brightness(.6)
}
.about-cover-content{
    position:absolute;
    bottom:0;
    padding:32px;
    background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)
}
.about-cover-content h2{
    font-size:1.8rem;
    margin-bottom:8px
}
.about-section{
    margin-bottom:80px
}
.about-section h2{
    font-size:1.8rem;
    margin-bottom:24px
}
.about-section h3{
    margin-top:32px;
    margin-bottom:12px
}
.about-box{
    background:hsla(0,0%,100%,.04);
    border-radius:14px;
    padding:28px
}
.about-box ul{
    padding-left:20px
}
.about-box li{
    margin-bottom:8px
}
.about-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-bottom:80px
}
.about-card{
    background:hsla(0,0%,100%,.04);
    border-radius:14px;
    padding:24px
}
.about-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:80px
}
.about-stats div{
    background:hsla(0,0%,100%,.04);
    border-radius:14px;
    text-align:center;
    padding:24px
}
.about-stats strong{
    font-size:2rem;
    color:#ff7e08
}
.about-cta{
    background:rgba(255,126,8,.1);
    border-radius:20px;
    padding:48px 24px;
    text-align:center
}
.about-actions{
    margin-top:24px;
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap
}
.about-actions a{
    background:#ff7e08;
    color:#000;
    padding:12px 26px;
    border-radius:999px;
    font-weight:600
}
.about-actions a:hover{
    opacity:.9
}
.about-link{
    color:#ff7e08;
    font-weight:600
}
@media (max-width:768px){
    .about-page{
        padding:40px 14px;
        line-height:1.65
    }
    .about-hero{
        margin-bottom:40px
    }
    .about-hero h1{
        font-size:1.9rem;
        line-height:1.3
    }
    .about-hero-desc{
        margin-top:12px;
        font-size:.95rem
    }
    .about-cover{
        margin-bottom:48px;
        border-radius:14px
    }
    .about-cover img{
        height:260px;
        object-position:center top
    }
    .about-cover-content{
        padding:20px 16px
    }
    .about-cover-content h2{
        font-size:1.4rem
    }
    .about-section{
        margin-bottom:48px
    }
    .about-section h2{
        font-size:1.4rem;
        margin-bottom:18px
    }
    .about-section h3{
        font-size:1.1rem;
        margin-top:24px;
        margin-bottom:10px
    }
    .about-box{
        padding:20px 16px;
        border-radius:12px
    }
    .about-box ul{
        padding-left:18px
    }
    .about-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:48px
    }
    .about-card{
        padding:18px;
        border-radius:12px
    }
    .about-stats{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
        margin-bottom:48px
    }
    .about-stats div{
        padding:18px 14px;
        border-radius:12px
    }
    .about-stats strong{
        font-size:1.6rem
    }
    .about-cta{
        padding:32px 16px;
        border-radius:16px
    }
    .about-actions{
        margin-top:18px;
        gap:12px
    }
    .about-actions a{
        padding:10px 22px;
        font-size:.95rem
    }
}
.contact-page-inner{
    width:100%;
    padding:24px 0;
    box-sizing:border-box
}
.contact-two-col{
    display:flex;
    gap:32px;
    align-items:flex-start
}
.contact-left{
    flex:1.4
}
.contact-title{
    font-size:2rem;
    margin-bottom:8px
}
.contact-desc{
    color:#b5b5b5;
    margin-bottom:24px
}
.contact-box{
    background:hsla(0,0%,100%,.04);
    border-radius:16px;
    padding:24px
}
.contact-box h2{
    margin-bottom:16px
}
.contact-list{
    list-style:none;
    padding:0;
    margin:0
}
.contact-list li{
    margin-bottom:12px
}
.contact-list .label{
    min-width:130px;
    display:inline-block;
    color:#9ca3af
}
.contact-box a{
    color:#ff7e08;
    font-weight:600
}
.contact-note{
    margin-top:20px;
    padding:16px;
    background:rgba(255,126,8,.12);
    border-left:4px solid #ff7e08;
    border-radius:10px
}
.contact-social-box{
    flex:1;
    background:hsla(0,0%,100%,.035);
    border-radius:16px;
    padding:24px
}
.contact-social-title{
    font-size:1.35rem;
    margin-bottom:6px
}
.contact-social-desc{
    font-size:.95rem;
    color:#9ca3af;
    margin-bottom:22px
}
.contact-social-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}
.contact-social-item{
    height:56px;
    border-radius:14px;
    background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.03));
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .25s ease;
    overflow:hidden
}
.contact-social-item img{
    width:30px;
    height:30px;
    filter:brightness(0) invert(1);
    opacity:.85;
    transition:all .25s ease
}
.contact-social-item:hover{
    transform:translateY(-3px)
}
.contact-social-item:hover img{
    opacity:1;
    filter:none
}
.contact-social-item.telegram:hover{
    background:linear-gradient(135deg,#2aabee,#229ed9)
}
.contact-social-item.discord:hover{
    background:linear-gradient(135deg,#5865f2,#4752c4)
}
.contact-social-item.x:hover{
    background:linear-gradient(135deg,#111,#000)
}
.contact-social-item.facebook:hover{
    background:linear-gradient(135deg,#1877f2,#0f5bd8)
}
.contact-social-item.tiktok:hover{
    background:linear-gradient(135deg,#000,#111)
}
.contact-social-item.youtube:hover{
    background:linear-gradient(135deg,red,#c00)
}
.contact-social-item.threads:hover{
    background:linear-gradient(135deg,#000,#222)
}
.contact-social-item.instagram:hover{
    background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4)
}
@media (max-width:768px){
    .contact-two-col{
        flex-direction:column
    }
    .contact-social-list{
        grid-template-columns:repeat(4,1fr)
    }
}
.dmca-page-inner{
    width:100%;
    padding:24px 0;
    box-sizing:border-box
}
.dmca-two-col{
    display:flex;
    gap:32px;
    align-items:flex-start
}
.dmca-left{
    flex:1.5
}
.dmca-title{
    font-size:2rem;
    margin-bottom:8px
}
.dmca-desc{
    color:#b5b5b5;
    margin-bottom:24px
}
.dmca-box{
    background:hsla(0,0%,100%,.04);
    border-radius:16px;
    padding:24px
}
.dmca-box h2{
    margin-bottom:16px
}
.dmca-box h3{
    margin-top:20px;
    margin-bottom:10px
}
.dmca-box p{
    margin-bottom:12px;
    line-height:1.7
}
.dmca-list{
    padding-left:18px;
    margin-bottom:16px
}
.dmca-list li{
    margin-bottom:8px;
    color:#e5e5e5
}
.dmca-note{
    margin-top:20px;
    padding:16px;
    background:rgba(255,126,8,.12);
    border-left:4px solid #ff7e08;
    border-radius:10px;
    color:#d1d5db
}
.dmca-right{
    flex:1;
    background:hsla(0,0%,100%,.035);
    border-radius:16px;
    padding:24px
}
.dmca-contact-title{
    font-size:1.35rem;
    margin-bottom:6px
}
.dmca-contact-desc{
    font-size:.95rem;
    color:#9ca3af;
    margin-bottom:20px
}
.dmca-contact-box{
    background:hsla(0,0%,100%,.04);
    border-radius:12px;
    padding:18px
}
.dmca-contact-item{
    margin-bottom:12px
}
.dmca-contact-item .label{
    display:inline-block;
    min-width:130px;
    color:#9ca3af
}
.dmca-contact-box a{
    color:#ff7e08;
    font-weight:600
}
@media (max-width:768px){
    .dmca-two-col{
        flex-direction:column
    }
}
.ophim-title-year{
    margin-left:10px;
    font-weight:600;
    color:#9ca3af;
    opacity:.85;
    padding:2px 8px;
    border-radius:6px;
    background:hsla(0,0%,100%,.08)
}
.server-name{
    display:inline-flex;
    align-items:center;
    margin-left:6px;
    padding:2px 8px;
    font-size:.75rem;
    font-weight:500;
    line-height:1;
    color:#ffd875;
    background:rgba(255,216,117,.08);
    border:1px solid rgba(255,216,117,.25);
    border-radius:999px;
    white-space:nowrap;
    vertical-align:middle;
    backdrop-filter:blur(4px);
    transition:all .2s ease
}
.server-name:before{
    content:"▶";
    font-size:.65rem;
    margin-right:4px;
    opacity:.8
}
@media (hover:hover){
    .server-name:hover{
        background:rgba(255,216,117,.15);
        border-color:rgba(255,216,117,.4)
    }
}
@media (max-width:576px){
    .server-name{
        font-size:.7rem;
        padding:2px 6px;
        margin-left:4px
    }
    .v-tabs.v-tabs-min.nav-pills .nav-link {
        font-size: 11px;
        padding: 0 0.4rem;
    }
}
.server-name.tm{
    color:#60a5fa;
    border-color:rgba(96,165,250,.3);
    background:rgba(96,165,250,.08)
}
.server-name.sub{
    color: #FEC984;
    border-color: #C3A783;
    background: #010101;
    padding: 5px 8px;
}
.server-button.active{
    box-shadow:0 0 0 1px rgba(255,216,117,.3),0 0 12px rgba(255,216,117,.15)
}
.server-button{
    position:relative
}
.server-button.active:after{
    content:"";
    display:inline-block;
    margin-left:8px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffd875;
    box-shadow:0 0 6px rgba(255,216,117,.9),0 0 12px rgba(255,216,117,.6)
}
.server-button.active:before{
    content:"";
    background:rgba(255,216,117,.35)
}
.server-button.active .ripple,.server-button.active:before{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:6px;
    border-radius:50%;
    animation:lighthouse-ripple 1.8s ease-out infinite
}
.server-button.active .ripple{
    background:rgba(255,216,117,.25);
    animation-delay:.9s
}
@keyframes lighthouse-ripple{
    0%{
        transform:translateY(-50%) scale(1);
        opacity:.8
    }
    70%{
        transform:translateY(-50%) scale(4);
        opacity:.2
    }
    to{
        transform:translateY(-50%) scale(5);
        opacity:0
    }
}
.server-button.active{
    color:#ffd875;
    background:rgba(255,216,117,.08);
    border-color:rgba(255,216,117,.4);
    box-shadow:0 0 12px rgba(255,216,117,.15)
}
@media (max-width:576px){
    .server-button.active .ripple,.server-button.active:before{
        animation-duration:2.4s
    }
}
@media screen and (max-width:1900px){
    .top-slide-wrap .sound-mute,.top-slide-wrap .top-slide-small{
        right:50px
    }
    .top-slide-main{
        height:760px
    }
    .top-slide-category{
        height:780px
    }
    .top-detail-wrap{
        height:0;
        padding-bottom:40%
    }
    .detail-container{
        margin-top:-100px
    }
    .dashboard-container .dcc-main{
        padding:0
    }
    .topics-grid .row-topic .intro{
        min-height:110px
    }
    .topics-grid .row-topic .intro .heading-md{
        font-size:1.6em;
        line-height:1.3
    }
}
@media screen and (max-width:1599px){
    header .header-elements{
        padding:0 20px;
        gap:1.5rem
    }
    .cards-row.wide,.container{
        padding:0 20px
    }
    #logo img{
        height:40px
    }
    #main_menu,#main_user{
        gap:.5rem
    }
    #main_user .button-user{
        min-width:125px;
        padding:.5rem .8rem
    }
    #main_menu .menu-item{
        padding:0 .7rem;
        font-size:13px
    }
    .el-group{
        gap:.6rem
    }
    .big-slide-wrapper .slide-content{
        padding:2rem;
        max-width:600px
    }
    .big-slide-wrapper .top-slide-main{
        height:460px
    }
    .big-slide-wrapper .top-slide-small{
        margin:-50px auto 0
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper{
        gap:1rem
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .info{
        padding:.6rem;
        font-size:12px;
        height:100px
    }
    .footer-elements{
        padding:2rem;
        height:auto;
        min-height:auto
    }
    .footer-elements .footer-icon{
        display:none
    }
    .topics-line{
        gap:1rem
    }
    .topics-line .topic-item{
        flex-direction:column;
        gap:.75rem;
        font-size:12px
    }
    .topics-line .topic-item .new{
        display:none
    }
    .top-slide-wrap .top-slide-main:before{
        height:100px
    }
    .top-slide-wrap .top-slide-main .slide-content{
        padding:0 30px 60px;
        max-width:600px
    }
    .top-slide-wrap .top-slide-small{
        right:30px;
        bottom:172px
    }
    .top-slide-wrap .sound-mute{
        right:30px;
        bottom:242px
    }
    #wrapper{
        padding-top:7rem
    }
    .cards-row .row-header .category-name{
        font-size:1.8em
    }
    .cards-row .row-header .inc-icon{
        width:30px;
        height:30px
    }
    .cards-grid-wrapper{
        gap:1rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(8,1fr);
        gap:1.2rem;
        row-gap:2rem
    }
    .top-slide-category .cover-fade{
        height:calc(100% - 180px)!important
    }
    .de-eps.is-grid{
        column-gap:1rem;
        grid-template-columns:repeat(4,1fr)
    }
    .de-eps.is-simple{
        grid-template-columns:repeat(6,1fr)
    }
    .detail-container{
        margin-top:-100px
    }
    .cg-body-box .box-header{
        margin-bottom:1.5rem
    }
    .de-actors,.de-suggest{
        grid-template-columns:repeat(5,1fr)
    }
    .de-actors{
        row-gap:1.5rem;
        column-gap:.6rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(6,1fr)
    }
    :root{
        --padding-base:30px
    }
    .wc-main .wm-info .desc-line{
        padding-left:0
    }
    .watch-container{
        padding:0
    }
    .actor-container .ac-side{
        width:340px
    }
    .time-row-cards{
        grid-template-columns:repeat(5,1fr)
    }
    .row-topic .last-card{
        grid-template-columns:repeat(6,1fr)
    }
    .row-topic .last-card .sw-item:nth-child(n+7){
        display:none
    }
    .topics-grid{
        grid-template-columns:repeat(6,1fr)
    }
    .more-topic{
        background:hsla(0,0%,100%,.06)!important;
        padding:1rem!important
    }
    .more-topic .mask{
        display:none
    }
    .more-topic .intro{
        min-height:auto!important
    }
    .more-topic .intro .heading-md{
        font-size:1.3em!important;
        line-height:1.8!important
    }
    .topics-list.single .row-topic .row-content{
        width:calc(100% - 200px)
    }
    .topics-list.single .row-topic .intro .heading-md{
        font-size:1.8em!important
    }
    .it-col.this-03{
        display:none
    }
    .app-download{
        border-right:none;
        padding-right:0
    }
}
@media screen and (max-width:1359px){
    #search{
        display:none
    }
    header .header-elements{
        padding:0 6px;
        height:60px
    }
    #logo{
        position:absolute;
        left:65px
    }
    #logo img{
        height:36px
    }
    .header-elements .for-mobile{
        display:flex
    }
    .el-group,.el-group .flex-grow-1{
        display:none
    }
    .el-group{
        position:absolute;
        z-index:3;
        top:100%;
        left:10px;
        max-width:360px;
        width:calc(100% - 10px);
        background-color:rgba(59,73,135,.95)!important;
        padding:1.5rem;
        border-radius:.75rem;
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px)
    }
    .el-group.toggled{
        display:flex;
        flex-direction:column-reverse;
        align-items:flex-start;
        gap:1rem;
        box-shadow:var(--shadow-large)
    }
    .el-group.toggled>div{
        position:relative;
        z-index:3
    }
    .el-group #main_menu{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        width:100%;
        padding:0;
        z-index:4
    }
    .el-group #main_menu .menu-item{
        padding:.6rem 0;
        line-height:normal
    }
    .el-group #main_menu .menu-item a{
        display:block;
        font-weight:500
    }
    .el-group #main_user{
        gap:.5rem;
        width:100%
    }
    .el-group #main_user .button-user{
        flex:1 1;
        text-align:center
    }
    #search.toggled{
        display:block;
        position:absolute;
        left:10px;
        right:50px;
        width:auto;
        max-width:none;
        z-index:2
    }
    .header-elements.simple{
        justify-content:flex-end
    }
    .header-elements.simple #logo,.header-elements.simple .menu-toggle,.header-elements.simple .noti-toggle{
        display:none
    }
    #wrapper{
        padding-top:5rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(6,1fr);
        gap:1rem
    }
    .v-bread{
        left:20px;
        top:80px
    }
    .detail-container>div.dc-side{
        padding:30px;
        width:380px
    }
    .de-suggest{
        grid-template-columns:repeat(4,1fr)
    }
    .wc-main .wm-info .info{
        width:360px
    }
    .wc-side{
        width:380px
    }
    .time-row-cards{
        grid-template-columns:repeat(4,1fr)
    }
    .header-elements .noti-toggle{
        position:absolute;
        right:60px;
        top:50%;
        transform:translateY(-50%);
        width:auto;
        min-width:40px
    }
    .header-elements .noti-toggle .small{
        font-size:12px;
        opacity:.5
    }
    #main_user.user-logged{
        align-items:self-start;
        padding:1.5rem;
        margin:-1.5rem -1.5rem .5rem;
        width:calc(100% + 3rem);
        background-color:rgba(0,0,0,.2)
    }
    #main_user.user-logged>.dropdown{
        width:100%
    }
    #main_user.user-logged .head-noti{
        display:none
    }
    #main_user.user-logged .user-dropdown{
        display:flex!important;
        flex-direction:column;
        gap:.3rem;
        transform:none!important;
        position:relative!important;
        top:auto!important;
        left:auto!important;
        right:auto!important;
        bottom:auto!important;
        width:100%!important;
        margin:0!important;
        padding:0!important;
        background-color:transparent!important;
        color:#fff!important
    }
    #main_user.user-logged .user-dropdown>a,.user-logged .user-dropdown>div{
        padding:.5rem 0;
        color:#fff;
        background-color:transparent!important
    }
    .user-logged .user-dropdown .dropdown-blank{
        padding:0 60px 0 0!important;
        gap:.2rem!important;
        margin-bottom:1rem
    }
    #main_user.user-logged .user-dropdown hr{
        display:none
    }
    .user-logged .user-dropdown .dropdown-item{
        padding:0!important
    }
    .user-logged .user-dropdown .dropdown-item .line-center{
        width:100%;
        font-size:12px;
        border:1px solid var(--border-color);
        border-radius:.4rem;
        padding:.6rem 1rem;
        gap:.5rem
    }
    .user-logged .user-dropdown .dropdown-item .line-center i{
        font-size:14px
    }
    .user-logged .header-user{
        padding:0!important;
        position:absolute;
        top:0;
        right:0
    }
    .user-logged .header-user i{
        display:none
    }
    .dcc-playlist{
        grid-template-columns:repeat(3,1fr)
    }
    #body-load .bl-logo{
        font-size:0
    }
    .topics-list.single .row-topic{
        flex-direction:column;
        padding:0;
        gap:1rem!important
    }
    .topics-list.single .row-topic .row-content{
        width:100%
    }
    .topics-list.single .row-topic .intro{
        padding:0;
        flex-direction:row;
        width:100%;
        align-items:center;
        justify-content:space-between
    }
    .dcc-side{
        width:250px
    }
    header .app-download{
        width:100%;
        z-index:5!important
    }
    header .app-download .app-download-button{
        background-color:hsla(0,0%,100%,.07);
        border-radius:.6rem;
        height:auto;
        padding:.5rem .6rem;
        justify-content:flex-start
    }
}
@media screen and (min-width:1280px){
    .ds-info .v-thumb-l{
        width:200px
    }
}
@media screen and (width:1280px) and (height:725px){
    .top-detail-wrap{
        padding-bottom:700px;
        background-color:rgba(0,0,0,.4)
    }
    .top-detail-wrap:before{
        display:none
    }
    .top-detail-wrap .cover-fade,.top-detail-wrap .cover-fade .cover-image{
        -webkit-mask-image:none!important;
        mask-image:none!important
    }
    .dc-side{
        background-color:transparent!important;
        -webkit-backdrop-filter:none!important;
        backdrop-filter:none!important;
        width:300px!important;
        padding:0!important
    }
    .ds-info{
        display:flex;
        flex-direction:column;
        align-items:center
    }
    .ds-info .v-thumb-l{
        width:200px;
        margin-top:-280px
    }
    .ds-info .v-thumb-l .v-thumbnail{
        box-shadow:0 0 40px 0 rgba(0,0,0,.6)
    }
    .ds-info .alias-name,.ds-info .media-name{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        white-space:normal!important;
        text-align:center;
        padding:0 1.2rem
    }
}
@media screen and (max-width:1279px){
    .sw-navigation{
        display:none
    }
    .big-slide-wrapper .top-slide-small{
        margin-top:-80px
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper{
        gap:.5rem
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide{
        padding:0;
        width:100%!important;
        max-width:60px;
        height:60px;
        border-radius:50%;
        border:3px solid transparent;
        background-color:transparent
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide-thumb-active{
        border-color:#fff
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide .info{
        display:none
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide img{
        width:100%;
        right:0
    }
    .big-slide-wrapper .slide-elements .cover-fade{
        width:80%;
        opacity:.5
    }
    .top-slide-wrap .top-slide-main{
        margin-bottom:30px;
        height:600px
    }
    .top-slide-wrap .top-slide-main:before{
        display:none
    }
    .top-slide-wrap .top-slide-main .slide-elements .background-fade{
        display:none;
        animation:none!important;
        transform:none!important
    }
    .top-slide-main .safe-area{
        height:100%!important
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        animation:none!important;
        height:550px!important
    }
    .top-slide-wrap .swiper-slide .slide-content{
        animation:none!important;
        transform:none!important;
        padding-bottom:30px
    }
    .top-slide-wrap .swiper-slide .slide-content .media-title-image{
        display:none!important
    }
    .top-slide-wrap .swiper-slide .slide-content .media-title{
        display:block!important;
        font-size:2em
    }
    .top-slide-wrap .top-slide-small{
        bottom:42px
    }
    .top-slide-wrap .sound-mute{
        bottom:100px;
        width:40px;
        height:40px
    }
    .top-slide-category .safe-area{
        height:calc(100% - 80px)!important
    }
    .top-slide-category .cover-fade{
        height:450px!important
    }
    .top-slide-category .slide-content{
        padding:50px 20px 100px
    }
    .demo-tip{
        display:none!important
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(6,1fr)
    }
    .detail-container>div.dc-side{
        background-color:transparent;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        padding:0;
        width:340px
    }
    .wc-main .wm-info{
        display:none
    }
    .row-topic .mask{
        -webkit-mask-image:none;
        mask-image:none
    }
    .row-topic .intro{
        padding:0;
        width:180px
    }
    .row-topic .last-card{
        grid-template-columns:repeat(3,1fr);
        row-gap:2rem
    }
    .topics-grid .row-topic{
        padding:1.2rem!important
    }
    .topics-grid .row-topic .intro{
        min-height:100px
    }
    .topics-grid .row-topic .intro .heading-md{
        font-size:1.4em
    }
    .denied-box{
        padding:1.5rem 15%
    }
    #community{
        display:none
    }
    #totop{
        display:none!important
    }
}
@media screen and (max-width:1120px){
    .big-slide-wrapper .slide-content{
        max-width:500px
    }
    .sw-actors-recent .sw-actor .item-duo{
        display:none
    }
    .sw-actors-recent .sw-actor .h-item{
        margin:0;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:0
    }
    .sw-actors-recent .sw-actor .h-item .item-title{
        font-size:1em
    }
    .footer-elements{
        padding:3rem 1rem;
        height:auto
    }
    .footer-elements .side-right{
        display:none
    }
    .footer-elements .side-left{
        width:100%;
        text-align:center
    }
    .sl-brand.line-center{
        flex-direction:column;
        gap:2rem
    }
    .sl-brand .socials{
        padding-left:0;
        border:none
    }
    .topics-line{
        display:grid;
        grid-gap:.75rem;
        gap:.75rem;
        grid-template-columns:repeat(5,1fr)
    }
    .topics-line .topic-item{
        gap:.75rem;
        align-items:center;
        min-height:50px;
        border-radius:.4rem;
        opacity:.9
    }
    .topics-line .topic-item:hover{
        opacity:1
    }
    .topics-line .topic-item .inc-icon{
        width:20px;
        height:20px
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        height:0!important;
        padding-bottom:50%
    }
    .top-slide-wrap .swiper-slide .cover-fade .cover-image{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%!important;
        height:100%!important
    }
    .top-slide-wrap .top-slide-small{
        width:300px!important;
        right:20px
    }
    .top-slide-wrap .top-slide-small .swiper-slide{
        border-radius:50%;
        overflow:hidden;
        max-width:30px;
        height:30px;
        border-width:2px
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(5,1fr)
    }
    .top-slide-category{
        margin-bottom:30px;
        height:520px
    }
    .top-slide-category .slide-content .media-title-image{
        display:none!important
    }
    .top-slide-category .slide-content .media-title{
        display:block!important;
        font-size:2em
    }
    .top-slide-category .slide-content{
        padding:30px 20px
    }
    .top-slide-category.top-slide-main .safe-area{
        height:100%!important
    }
    .top-slide-category:before{
        display:none
    }
    .top-detail-wrap{
        padding-bottom:300px;
        opacity:.5
    }
    .detail-container{
        flex-direction:column;
        margin-top:-150px
    }
    .detail-container>div.dc-side{
        width:100%
    }
    .dc-side>div{
        margin-bottom:0
    }
    .dc-side>.child-actors,.dc-side>.child-top{
        display:none
    }
    .ds-info{
        text-align:center;
        margin-bottom:1rem
    }
    .ds-info .alias-name{
        font-size:13px;
        color:var(--text-base);
        margin-bottom:1rem;
        margin-top:-.25rem
    }
    .ds-info .v-thumb-l{
        margin:0 auto;
        width: 180px;
    }
    .ac-side .detail-more,.ds-info .detail-more{
        text-align:left;
        display:none;
        padding:1.5rem;
        background-color:rgba(0,0,0,.2);
        border-radius:.75rem
    }
    .ds-info #toggle-detail{
        display:block;
        max-width:300px;
        margin:-.5rem auto 0
    }
    .detail-container>div.dc-main{
        background-color:transparent;
        border-radius:0;
        backdrop-filter:none;
        -webkit-backdrop-filter:none
    }
    .dm-bar{
        padding:20px
    }
    .content-gap{
        padding:0 20px;
        gap:30px
    }
    .watch-container{
        flex-direction:column
    }
    .wc-side{
        border:none;
        width:100%
    }
    .player-control .control-items .item-focus{
        display:none
    }
    .actor-container{
        flex-direction:column
    }
    .actor-container .ac-side{
        border:none;
        padding-right:0;
        padding-bottom:20px;
        width:100%
    }
    .ac-main .cg-body-box{
        padding-left:0
    }
    .ac-side .as-info{
        text-align:center
    }
    .ac-side .as-info .actor-photo .v-actor{
        margin:0 auto
    }
    .ac-side .as-info .button-group{
        justify-content:center
    }
    .ac-side .detail-more{
        text-align:left;
        /*display:none*/
    }
    .ac-side #toggle-detail{
        display:flex!important
    }
    .time-row-cards{
        grid-template-columns:repeat(6,1fr);
        width:100%
    }
    .time-row{
        margin-left:0;
        flex-direction:column;
        gap:1rem
    }
    .time-row .time-point:before{
        left:0
    }
    .time-row+.time-row{
        margin-top:1rem
    }
    .time-row .time-point{
        height:auto
    }
    .time-row .time-point span{
        transform:none;
        position:relative;
        font-size:24px;
        display:block;
        padding-left:2rem;
        opacity:.8;
        letter-spacing:0
    }
    .time-row .time-point:before{
        top:13px
    }
    .discuss-wrap{
        font-size:13px
    }
    .dashboard-container{
        flex-direction:column;
        gap:2rem
    }
    .dashboard-container>div{
        width:100%
    }
    .dcc-side{
        padding:0;
        gap:0;
        border-radius:.5rem
    }
    .dcc-side .heading-sm{
        padding:1.5rem 1rem 1rem;
        margin-bottom:0;
        text-align:center
    }
    .dcc-side .ds-menu{
        gap:0
    }
    .dcc-side .ds-menu .side-user{
        display:none
    }
    .dcc-side .menu-user{
        margin-bottom:0;
        flex-direction:row;
        gap:1rem;
        align-items:center;
        justify-content:center
    }
    .dcc-side .menu-user .item{
        padding:1rem;
        width:auto;
        border-bottom:none
    }
    .dashboard-container .dcc-main .is-profile{
        max-width:560px;
        margin:0 auto
    }
    .sche-timeline .st-row .items{
        grid-template-columns:repeat(3,1fr)
    }
    .solar_vpn.ver{
        display:none!important
    }
    .de-seasons.is-grid{
        grid-template-columns:repeat(2,1fr)
    }
    #row-new .cards-row .row-header{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:1.5rem
    }
    #row-new .cards-row .row-header .inc-icon.new-tag{
        display:none
    }
    .detail-more .ophim-meta-wrap, .detail-more .hl-tags, .detail-more .status
    {
        justify-content: center;
        text-align: center;
    }
}
@media screen and (min-width:990px){
    .modal-login .modal-dialog{
        max-width:860px
    }
    .modal-login .modal-dialog .modal-content{
        padding:4rem 4rem 4rem calc(420px + 4rem)
    }
    .modal-login .modal-dialog .modal-content:before{
        width:420px
    }
}
@media screen and (max-width:989px){
    .slide-url{
        display:block;
        position:absolute;
        z-index:6;
        top:0;
        left:0;
        bottom:110px;
        right:0
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        height:0!important;
        padding-bottom:40%
    }
    .slide-content .touch .button-play{
        width:60px;
        height:60px
    }
    .slide-content .touch .button-play i{
        font-size:22px
    }
    .top-slide-wrap .top-slide-small{
        bottom:37px
    }
    .cards-row.wide .swiper{
        overflow:visible
    }
    .big-slide-wrapper{
        padding-bottom:0
    }
    .big-slide-wrapper .top-slide-small{
        margin:1rem 0
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper{
        justify-content:center
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide{
        width:10px!important;
        height:10px!important;
        background-color:#fff;
        border:none!important;
        border-radius:50%;
        flex:unset
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide img{
        display:none
    }
    .big-slide-wrapper .top-slide-small .swiper-wrapper .swiper-slide-thumb-active{
        background-color:var(--primary-color)
    }
    .big-slide-wrapper .top-slide-main{
        height:400px
    }
    .big-slide-wrapper .top-slide-main .swiper-slide{
        border-radius:1rem
    }
    .big-slide-wrapper .slide-elements .cover-fade{
        width:100%;
        -webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,#000);
        mask-image:linear-gradient(0deg,transparent,#000 50%,#000);
        opacity:1;
        height:250px!important
    }
    .big-slide-wrapper .slide-elements .safe-area{
        height:100%!important;
        padding-top:100px;
        align-items:flex-end
    }
    .big-slide-wrapper .slide-content{
        max-width:100%;
        padding:1.25rem
    }
    .big-slide-wrapper .slide-content .media-title{
        font-size:1.4em;
        line-height:1.4
    }
    .big-slide-wrapper .slide-content .touch{
        display:none
    }
    .big-slide-wrapper .slide-content .description{
        margin-bottom:0!important
    }
    .big-slide-wrapper .slide-content .hl-tags{
        gap:.2rem;
        margin-bottom:1rem!important
    }
    .top-slide-wrap .sound-mute{
        display:none
    }
    #wrapper{
        padding-bottom:6rem
    }
    .actors-grid-wrapper,.topics-line{
        grid-template-columns:repeat(4,1fr)
    }
    .swiper-slide .backdrop-video{
        display:none!important
    }
    .watch-player .wp-bread{
        padding:0
    }
    .wc-main,.wc-side{
        padding:20px
    }
    .watch-player{
        margin-bottom:1rem
    }
    .player-control .ep-current{
        display:none
    }
    .player-control .control-items{
        padding:0 10px;
        gap:.4rem
    }
    .player-control .control-items .item-auto,.player-control .control-items .item-seasons{
        display:none
    }
    .player-control{
        height:54px
    }
    .time-row-cards{
        column-gap:.6rem
    }
    .time-row-cards,.topics-grid{
        grid-template-columns:repeat(4,1fr)
    }
    .v-rating .caption{
        display:none
    }
    .dm-bar .is-right{
        flex-shrink:0
    }
    .cards-row .row-header{
        margin-bottom:.6rem
    }
    .pin-remove{
        opacity:1;
        width:24px;
        height:24px
    }
    .de-type{
        margin-bottom:1rem;
        grid-template-columns:repeat(2,1fr)
    }
    .de-type .item .m-thumbnail{
        max-width:110px
    }
    .de-type .item{
        top:auto!important;
        max-width:none!important
    }
    .de-type .item .info{
        padding:1rem;
        gap:.3rem
    }
    .de-type .item .info .media-title{
        margin-bottom:.5rem!important
    }
    .cards-boxed .row-tabs{
        gap:.3rem
    }
    .cards-boxed .row-tabs a{
        height:30px
    }
    .cards-boxed .row-tabs a .inc-icon{
        display:none
    }
    .text-gradient{
        font-size:1.8em!important
    }
}
@media screen and (max-width:799px){
    header{
        position:relative!important;
        top:auto!important;
        left:auto!important;
        right:auto!important;
        background: #000;
    }
    .el-group{
        margin-top:5px;
        left:5px
    }
    .sw-actors-recent .sw-actor .h-item .info-line .tag-small{
        display:none
    }
    .sw-actors-recent .sw-actor .h-item .info-line .tag-small:first-of-type{
        display:block
    }
    .sw-actors-recent .sw-actor .h-item .v-actor{
        width:80px;
        height:80px
    }
    .top-slide-wrap .swiper-slide .slide-content .description{
        display:none!important
    }
    .top-slide-wrap .swiper-slide .slide-elements .cover-fade{
        -webkit-mask-image:linear-gradient(0deg,transparent,#000 30%,#000);
        mask-image:linear-gradient(0deg,transparent,#000 30%,#000)
    }
    .top-slide-wrap .swiper-slide .slide-elements .cover-fade .cover-image{
        -webkit-mask-image:none!important;
        mask-image:none!important
    }
    .top-slide-wrap .top-slide-main{
        height:420px
    }
    #wrapper{
        padding-top:2rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(4,1fr)
    }
    .v-filter .fe-row .fe-name{
        width:80px
    }
    .v-filter .fe-row{
        gap:1rem;
        padding:1rem .5rem
    }
    .top-slide-category .slide-elements .background-fade{
        display:none
    }
    .top-slide-category .slide-elements .cover-fade{
        -webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,#000);
        mask-image:linear-gradient(0deg,transparent,#000 50%,#000);
        width:100%;
        padding-bottom:45%;
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:0!important;
        animation:none!important;
        transform:none!important
    }
    .top-slide-category .slide-elements .cover-fade .cover-image{
        -webkit-mask-image:none!important;
        mask-image:none!important;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .v-bread{
        position:relative;
        top:auto;
        left:auto;
        padding:1rem
    }
    .v-bread .line-center{
        display:flex
    }
    .v-bread .page-name{
        flex-grow:1;
        font-size:1.3em
    }
    .model-tabs .item{
        font-size:12px;
        height:26px;
        padding:0 .5rem
    }
    .content-gap{
        padding:0
    }
    .de-eps.is-grid{
        grid-template-columns:repeat(3,1fr)
    }
    .de-eps.is-grid.is-simple{
        grid-template-columns:repeat(4,1fr)
    }
    .dm-bar .elements{
        flex-direction:column;
        gap:1rem
    }
    .dm-bar .elements .button-play{
        min-width:300px
    }
    .dm-bar .elements .button-play.is-coming{
        min-width:180px
    }
    .cg-tabs .v-tabs{
        justify-content:center
    }
    .cg-tabs .v-tabs.nav-tabs .nav-link{
        font-size:14px
    }
    .v-tabs.nav-tabs .nav-link+.nav-link{
        margin-left:2rem
    }
    .cg-body-box.is-eps .box-header{
        position:relative
    }
    .cg-body-box.is-eps .box-header .v-toggle{
        position:absolute;
        right:0
    }
    .de-actors{
        grid-template-columns:repeat(4,1fr)
    }
    .gallery-row.is-video{
        grid-template-columns:repeat(3,1fr)
    }
    .gallery-row.is-photo{
        grid-template-columns:repeat(5,1fr)
    }
    .cg-tabs{
        margin:0 -16px;
        background:#fff;
        background:linear-gradient(0deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))
    }
    .cg-tabs .nav-tabs{
        padding:0 16px
    }
    .time-row-cards{
        grid-template-columns:repeat(3,1fr)
    }
    .modal-login .modal-dialog{
        max-width:450px
    }
    .modal-login .modal-dialog .modal-content{
        padding:2rem;
        min-height:auto
    }
    .modal-login .modal-dialog .modal-content:before{
        display:none
    }
    .row-topic{
        flex-direction:column;
        gap:2rem
    }
    .row-topic .intro{
        flex-direction:row;
        align-items:center;
        width:100%
    }
    .row-topic .intro .inc-icon{
        width:40px;
        height:40px
    }
    .row-topic .intro .heading-md{
        flex-grow:1;
        font-size:1.2em
    }
    .row-topic .last-card{
        width:100%
    }
    .topics-grid{
        grid-template-columns:repeat(3,1fr)
    }
    .topics-grid .row-topic .intro{
        min-height:80px
    }
    .watch-player .player-ratio{
        margin:0 -20px
    }
    .watch-player .player-ratio>div{
        border-radius:0!important
    }
    .dcc-side .menu-user{
        gap:.6rem
    }
    .dcc-side .menu-user .item .line-center{
        flex-direction:column;
        gap:.6rem
    }
    .dcc-side .menu-user .item .line-center span{
        font-size:12px
    }
    .dcc-playlist{
        grid-template-columns:repeat(2,1fr);
        gap:.5rem
    }
    .dcc-playlist .item{
        padding:.6rem .9rem;
        border-radius:.5rem
    }
    .c-social-list,.sche-timeline .st-row .items{
        grid-template-columns:repeat(2,1fr)
    }
    .topics-line{
        margin-top:1.25rem!important
    }
    .topics-list.single .h-item{
        padding:1rem 0
    }
    .topics-list.single .h-item .info .item-title{
        -webkit-line-clamp:1!important
    }
    .slide-elements:before,.top-detail-wrap:before{
        display:none
    }
    .denied-box{
        font-size:1.3em;
        padding:1.5rem 2rem
    }
    .denied-box .denied-icon img{
        width:120px;
        height:auto
    }
    .code-page{
        padding:60px 20px!important
    }
    .login-code{
        gap:.5rem
    }
    .login-code .form-control{
        font-size:2em;
        padding:1.25rem 0
    }
}
@media screen and (min-width:641px){
    .v-thumbnail-hoz .pin-new{
        left:50%!important;
        transform:none;
        right:auto
    }
    .sw-cover.single .v-thumbnail-hoz .pin-new{
        right:auto;
        left:1rem
    }
    .v-thumbnail-hoz .m-pin-new{
        left:140px!important;
        transform:none;
        right:auto
    }
}
@media screen and (max-width:640px){
    .cards-row.wide,.container,.detail-container{
        padding:0 16px
    }
    .top-slide-wrap .slide-url{
        bottom:60px
    }
    .big-slide-wrapper .slide-elements .cover-fade{
        height:200px!important
    }
    .fluid-gap{
        gap:24px
    }
    .cards-row .row-header{
        min-height:32px;
        margin-bottom:.75rem
    }
    .cards-row .row-header .category-name{
        font-size:1.6em
    }
    .sw-cover .h-item{
        padding:.75rem 0
    }
    .sw-cover .v-thumbnail.v-thumbnail-hoz{
        padding-bottom:56%
    }
    .sw-cover .h-item .info .info-line{
        display:none
    }
    .item-title{
        font-size:13px;
        font-weight:400
    }
    .sw-cover .h-item .v-thumb-m{
        display:none
    }
    .sw-cover .h-item .v-thumb-m .v-thumbnail{
        border-radius:.2rem
    }
    .sw-actors-recent .sw-actor{
        padding:.5rem 0 1rem
    }
    .topics-line .topic-item{
        gap:.4rem;
        padding:.6rem;
        text-align:center;
        background-color:transparent!important
    }
    .topics-line .topic-item>.primary-text{
        color:#000
    }
    .topics-line .topic-item .inc-icon{
        width:20px;
        height:20px;
        color:var(--primary-color)
    }
    .top-slide-main .safe-area{
        height:calc(100% - 60px)!important
    }
    .top-slide-wrap .swiper-slide .cover-fade{
        padding-bottom:60%;
        opacity:.8
    }
    .top-slide-wrap .swiper-slide .hl-tags.mb-4,.top-slide-wrap .swiper-slide .touch{
        display:none
    }
    .top-slide-wrap .swiper-slide .hl-tags{
        justify-content:center;
        gap:6px
    }
    .top-slide-wrap .swiper-slide .hl-tags>div:nth-child(n+6){
        display:none
    }
    .detail-more .hl-tags .tag-classic,.detail-more .hl-tags .tag-model,.slide-content .hl-tags .tag-classic,.slide-content .hl-tags .tag-model{
        line-height:22px;
        font-size:11px;
        padding:0 .4rem
    }
    .detail-more .ophim-meta-wrap , .detail-more .hl-tags , .detail-more .status{
        gap:6px;
        justify-content:center;
        text-align:center
    }
    .top-slide-wrap .top-slide-main{
        height:350px
    }
    .top-slide-wrap .swiper-slide .slide-content .media-title{
        margin-bottom:.75rem;
        font-size:1.6em
    }
    .top-slide-wrap .top-slide-main .slide-content{
        text-align:center;
        padding:0 20px
    }
    .top-slide-wrap .top-slide-small{
        width:100%!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        padding:2rem 0 1rem;
        background:#191b24;
        background:linear-gradient(0deg,#191b24,rgba(25,27,36,0))
    }
    .top-slide-wrap .top-slide-small .swiper-slide{
        border-color:hsla(0,0%,100%,.3)
    }
    .top-slide-wrap .top-slide-small .swiper-wrapper{
        justify-content:center;
        gap:.2rem
    }
    #wrapper{
        padding-bottom:5rem
    }
    .sw-item .info-v.w-chart .number{
        font-size:2em;
        width:30px
    }
    .sw-item .info-v.w-chart{
        padding-left:36px
    }
    .sw-item .info-v.w-chart .info-line{
        display:none
    }
    .footer-elements{
        font-size:12px;
        padding:2rem 0
    }
    .sl-band{
        margin-bottom:2rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(2,1fr);
        column-gap:.5rem;
        row-gap:1.5rem
    }
    .filter-elements{
        border:none;
        border-top:1px solid var(--border-color);
        margin:-15px -20px 3rem
    }
    .actors-grid-wrapper{
        grid-template-columns:repeat(3,1fr);
        column-gap:.6rem;
        row-gap:1.5rem;
        font-size:13px
    }
    .actors-grid-wrapper .v-item{
        gap:.6rem
    }
    .actors-grid-wrapper .v-item .info .item-title{
        font-size:1em
    }
    .v-actor-large{
        width:80px;
        height:80px
    }
    .top-slide-category{
        height:470px
    }
    .top-slide-category .slide-content .media-title{
        font-size:1.6em
    }
    .de-eps.is-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem
    }
    .de-eps.is-grid.is-simple{
        grid-template-columns:repeat(3,1fr);
        gap:.6rem!important
    }
    .cg-body-box.is-eps .box-header{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem
    }
    .cg-body-box.is-eps .box-header .v-toggle{
        top:5px
    }
    .cg-body-box.is-eps .box-header .flex-grow-1{
        display:none
    }
    .season-dropdown>.line-center{
        border-right:none;
        font-size:1.3em
    }
    .heading-md{
        font-size:1.4em
    }
    .heading-sm{
        font-size:1.2em
    }
    .dm-bar .elements .button-play{
        font-size:16px;
        padding:0 1.4rem;
        height:50px;
        min-height:auto
    }
    .pin-new{
        bottom:-1px;
        border-radius:.3rem .3rem 0 0
    }
    .pin-new .line-center{
        line-height:1.3
    }
    .pin-new .line-center.line-lt span:before{
        content:"LT."
    }
    .pin-new .line-center.line-tm span:before{
        content:"TM."
    }
    .pin-new .line-center.line-pd span:before{
        content:"PĐ."
    }
    .pin-new2 .line-center.line-pd{
        display:none
    }
    .de-actors,.gallery-row.is-video{
        grid-template-columns:repeat(2,1fr)
    }
    .gallery-row.is-photo{
        grid-template-columns:repeat(4,1fr)
    }
    .cg-tabs{
        margin:0 -16px
    }
    .cg-tabs .nav-tabs{
        padding:0 16px
    }
    .cg-body-box{
        padding:30px 0
    }
    .ac-side .detail-more,.ds-info .detail-more{
        padding:0;
        background-color:transparent;
        border-radius:0
    }
    .watch-player .wp-bread .heading-sm{
        font-size:14px
    }
    .watch-player .wp-bread{
        margin-bottom:0;
        margin-top:1rem
    }
    .watch-player{
        display:flex;
        flex-direction:column-reverse;
        width:100%;
        padding:0 16px
    }
    .wc-main,.wc-side{
        padding:20px 16px
    }
    .cards-grid-wrapper .sw-item .info,.time-row-cards .sw-item .info{
        min-height:auto
    }
    .v-filter .fe-row .fe-results{
        font-size:13px
    }
    .row-topic{
        padding:2rem 1rem
    }
    .row-topic .intro .inc-icon{
        width:30px;
        height:30px
    }
    .row-topic .last-card{
        grid-template-columns:repeat(2,1fr);
        row-gap:1.5rem;
        column-gap:.6rem
    }
    .rate-emo{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        background-color:transparent;
        padding:0
    }
    .rate-emo .item-v{
        flex-direction:row;
        border-radius:.4rem;
        background-color:rgba(0,0,0,.3)
    }
    .rate-emo .item-v .inc-icon{
        width:30px;
        height:30px;
        margin:0
    }
    .dm-bar .ro-rating .a-rate{
        display:none
    }
    .watch-player .player-ratio{
        margin:-2rem -16px 0
    }
    .dashboard-container{
        padding:0 16px
    }
    .dcc-side .heading-sm{
        padding-bottom:0
    }
    .sw-cover .info{
        text-align:center
    }
    .cards-row.fixed{
        padding:0 20px
    }
    .article-body{
        font-size:14px
    }
    .d-item .user-avatar{
        width:40px;
        height:40px
    }
    .d-item .replies .user-avatar{
        width:30px;
        height:30px
    }
    .range-eps{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        grid-gap:.5rem;
        gap:.5rem;
        margin:0 0 2rem
    }
    .range-eps .item{
        min-width:auto
    }
    .sche-timeline .st-row .items{
        grid-template-columns:repeat(1,1fr)
    }
    .current-time{
        display:none
    }
    .sche-time .item-time{
        font-size:12px;
        padding:.7rem 1rem;
        gap:4px
    }
    .sche-time .item-time .day{
        font-size:14px
    }
    .sche-time .item-time .time span{
        font-size:0;
        padding:0;
        border:none;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color:var(--primary-color)
    }
    .sche-timeline .st-row .clock{
        text-align:left;
        width:50px;
        font-size:14px
    }
    .avatar-list{
        grid-template-columns:repeat(3,1fr)
    }
    .sw-cover.cover-fade .info{
        text-align:left
    }
    .sw-cover.cover-fade .info .description{
        display:none
    }
    .topics-grid{
        gap:.5rem
    }
    .topics-grid .row-topic{
        padding:1rem!important
    }
    .topics-grid .row-topic .intro{
        min-height:50px!important;
        justify-content:center!important;
        align-items:flex-start!important
    }
    .topics-grid .row-topic .intro .info{
        display:none
    }
    .topics-grid .row-topic .intro .heading-md{
        font-size:1.2em;
        line-height:1.3;
        flex-grow:unset
    }
    .more-topic .intro .heading-md{
        font-size:1.1em!important;
        line-height:1.4!important
    }
    .topics-grid .more-topic .intro{
        align-items:center!important
    }
    .topics-list.single{
        margin:0 -16px;
        padding:1rem;
        gap:1rem;
        border-radius:.6rem
    }
    .topics-list.single .row-topic .intro .heading-md{
        font-size:1.5em!important;
        letter-spacing:0!important
    }
    .topics-list.single .row-topic .intro .info .line-center{
        padding:.6rem 1rem!important;
        font-size:16px
    }
    .topics-list.single .row-topic .intro .info .line-center span{
        display:none
    }
    .topics-more>.line-center{
        gap:.5rem!important;
        flex-direction:column;
        align-items:flex-start
    }
    #row-new{
        margin-top:1rem
    }
    .topics-grid .row-topic:hover{
        top:auto
    }
    .de-type{
        grid-template-columns:repeat(1,1fr)
    }
    .de-eps.is-simple .item{
        height:42px
    }
    .schedule-eps .item .inc-icon{
        width:30px;
        height:30px;
        left:12px
    }
    .login-code .form-control{
        padding:.6rem 0;
        font-size:1.6em;
        border-width:3px!important
    }
    .tv-checked img{
        width:160px
    }
    .pc-coming{
        font-size:11px;
        padding:0 0 0 .5rem;
        width:60px;
        background:none!important;
        color:#ffd875!important
    }
}
@media screen and (max-width:479px){
    .v-thumbnail .pin-trans .line-center span{
        display:none!important
    }
    .v-thumbnail .pin-trans .line-center:hover{
        padding:0 .3rem!important
    }
    .top-slide-wrap .top-slide-main{
        height:300px
    }
    .search-modal{
        min-width:320px
    }
    #search.toggled .search-icon{
        display:none
    }
    #search.toggled .search-input{
        padding-left:1.2rem
    }
    .cards-grid-wrapper{
        grid-template-columns:repeat(2,1fr)
    }
    .fe-row-end{
        justify-content:center
    }
    .fe-row-end .fe-name{
        display:none
    }
    .fe-row-end .fe-buttons{
        text-align:center
    }
    .top-slide-category{
        height:440px;
        font-size:13px
    }
    .v-thumbnail .pin-trans{
        bottom:0;
        right:0;
        background-color:#fff;
        border-radius:.5rem 0 0 0;
        padding:.3rem;
        gap:.3rem
    }
    .v-thumbnail .pin-trans .line-center{
        height:auto;
        min-width:0;
        padding:0!important;
        background-color:transparent;
        box-shadow:none;
        transform:scale(.9)
    }
    .de-eps.is-grid.is-simple{
        grid-template-columns:repeat(3,1fr);
        gap:.5rem
    }
    .cg-tabs .v-tabs.nav-tabs .nav-link{
        font-size:13px
    }
    .v-tabs.nav-tabs .nav-link+.nav-link{
        margin-left:1.5rem
    }
    .dm-bar{
        width:100%;
        padding:1rem 0
    }
    .dm-bar .item{
        min-width:auto;
        padding:0;
        background:none!important
    }
    .dm-bar .item-comment{
        display:none
    }
    .dm-bar .is-left{
        gap:1.5rem
    }
    .dm-bar .touch-group{
        margin:.5rem 0;
        gap:1.5rem
    }
    .top-detail-wrap{
        padding-bottom:200px
    }
    .de-soundtrack .item-sound .h-item .touch-media{
        display:none
    }
    .de-soundtrack .item-sound .h-item .media-title{
        font-size:1em
    }
    .item-sound .lyric-post{
        padding:1rem;
        font-size:1em
    }
    .sound-play{
        padding:1rem
    }
    .cg-tabs{
        overflow:auto;
        scrollbar-width:none;
        -ms-overflow-style:none
    }
    .cg-tabs::-webkit-scrollbar{
        display:none
    }
    .cg-tabs .nav-tabs{
        justify-content:flex-start;
        min-width:420px
    }
    .gallery-row.is-photo{
        grid-template-columns:repeat(3,1fr)
    }
    .actors-grid-wrapper{
        display:grid;
        grid-template-columns:repeat(2,1fr)
    }
    .player-control .control-items .item span{
        display:none
    }
    .player-control .control-items .item .inc-icon{
        width:16px!important;
        height:16px!important
    }
    .player-control .control-items .item i{
        font-size:16px
    }
    .modal-sm .modal-dialog{
        width:90%
    }
    .modal-md .modal-dialog .modal-content,.modal-sm .modal-dialog .modal-content{
        padding:1.5rem
    }
    .v-modal .modal-content .is-header .heading-sm{
        font-size:1.2em
    }
    .rate-emo,.time-row-cards{
        grid-template-columns:repeat(2,1fr)
    }
    .dcc-side .menu-user .item{
        padding:1rem .5rem
    }
    .dash-form{
        flex-direction:column;
        gap:1rem;
        justify-content:space-between
    }
    .dash-form .v-avatar>a{
        display:flex;
        align-items:center;
        gap:1rem
    }
    .dash-form .user-avatar{
        margin:0!important;
        width:80px;
        height:80px
    }
    .dash-form .v-form{
        width:100%
    }
    .dcc-playlist{
        grid-template-columns:repeat(2,1fr);
        gap:.5rem
    }
    .v-form-playlist .form-group .controls{
        position:absolute;
        bottom:.6rem;
        right:-1rem;
        background-color:#2a314e;
        flex-direction:column
    }
    .v-form-playlist .form-group .controls .btn-outline{
        border-color:var(--border-color)!important
    }
    .noti-wrap .h-item{
        padding:1rem
    }
    .c-social-list{
        grid-template-columns:repeat(1,1fr)
    }
    .child-box .child-header{
        font-size:1.3em
    }
    .my-area-sub .ma-input .v-form-control{
        padding:.7rem 1rem
    }
    .my-area-sub .textarea-wrap{
        padding:1.5rem 1px .5rem
    }
    .my-area-sub .ma-input .chac-left{
        top:-18px
    }
    .emo-list{
        grid-template-columns:repeat(5,1fr);
        gap:.2rem;
        padding:0 .5rem
    }
    .range-eps{
        grid-template-columns:repeat(3,1fr)
    }
    .textarea-wrap .ma-buttons{
        gap:.5rem!important
    }
    .textarea-wrap .ma-buttons .btn-emo{
        padding:0 .75rem
    }
    .textarea-wrap .ma-buttons .btn-emo span{
        display:none
    }
    .textarea-wrap .ma-buttons .btn-emo i{
        font-size:16px
    }
    .d-item .replies-wrap .replies{
        margin-left:-56px;
        padding:1.5rem 0 1rem 1rem;
        border-left:2px solid var(--border-color)
    }
    .d-item.mine .replies-wrap .replies{
        margin-left:-64px;
        margin-top:1rem;
        border-top:1px solid var(--border-color);
        border-left-color:transparent
    }
    .d-item .comment-header .rated{
        font-size:0;
        padding:.1rem;
        gap:0;
        background-color:var(--bg-color);
        position:absolute;
        z-index:2;
        left:-32px;
        top:-8px
    }
    .d-item .comment-header .rated span{
        font-size:20px
    }
    .de-seasons.is-grid{
        grid-template-columns:repeat(1,1fr)
    }
    .sl-menu{
        display:flex;
        flex-wrap:wrap;
        gap:1rem;
        justify-content:center
    }
    .sl-menu a{
        margin:0!important
    }
    .question-box{
        font-size:13px;
        padding:1rem;
        border-radius:0;
        border:none;
        background-color:hsla(0,0%,100%,.06)
    }
    .sw-cover.cover-fade .h-item{
        padding:1rem
    }
    .sw-cover.cover-fade .h-item .info .alias-title{
        margin-bottom:.75rem
    }
    .topics-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .topics-grid .row-topic{
        border-radius:.5rem
    }
    .topics-grid .row-topic .heading-md{
        font-weight:600!important
    }
    .topics-line{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        gap:.5rem;
        margin:0 -16px;
        padding:0 16px;
        overflow:auto;
        scrollbar-width:none
    }
    .topics-line .row-topic .intro{
        min-height:auto!important
    }
    .topics-line::-webkit-scrollbar{
        display:none
    }
    .topics-line .row-topic{
        width:120px;
        flex-shrink:0
    }
    .topics-line .row-topic .intro .heading-md{
        font-size:1.1em!important
    }
    .sw-cover.single .v-thumbnail.v-thumbnail-hoz{
        border-radius:.3rem
    }
    .block-404 .icon-404 img{
        max-width:250px
    }
    .block-404 .heading-xl{
        font-size:2em;
        line-height:1.3
    }
    .v-thumbnail .text-more{
        font-size:1em
    }
    .m-pin-new{
        transform:none;
        border-radius:0;
        left:5px;
        bottom:5px;
        gap:2px;
        flex-direction:column;
        align-items:flex-start;
        overflow:unset
    }
    .m-pin-new .line-center{
        padding:.15rem .4rem;
        font-size:10px;
        justify-content:flex-start;
        border-radius:1rem;
        box-shadow:0 0 2px 2px rgba(0,0,0,.07)
    }
    .cards-row .row-header{
        gap:.5rem
    }
    .cards-row .row-header .category-name{
        flex-grow:1
    }
    .cards-row .row-header .cat-more .line-center{
        width:30px!important;
        padding:0
    }
    .cards-row .row-header .cat-more span{
        display:none!important
    }
    .denied-box{
        padding:1.2rem;
        font-size:1.1em;
        gap:1rem
    }
    .denied-box .denied-icon img{
        width:100px
    }
    .d-item .comment-header .user-name{
        max-width:140px;
        text-overflow:ellipsis;
        overflow:hidden
    }
    .d-item .comment-header .ch-for{
        border-radius:.2rem;
        padding:.2rem;
        text-align:center;
        font-size:9px
    }
    .d-item .comment-header .ch-for span:before{
        content:"-T."
    }
    .d-item .comment-header .c-time{
        font-size:9px
    }
    .table-wrap{
        padding:3px
    }
    .table-wrap .v-table{
        font-size:13px;
        line-height:1.5
    }
    .table.v-table>:not(caption)>*>*{
        padding:.3rem .6rem
    }
    .article-body .v-ul-check{
        padding:0
    }
    .grid-3x2{
        grid-template-columns:repeat(1,1fr);
        padding:1rem
    }
    .grid-3x2 .h-item .v-thumb-m{
        width:40px
    }
    .grid-3x2 .h-item .v-thumbnail{
        border-radius:6px;
        padding-bottom:140%
    }
    .grid-3x2 .h-item .info{
        flex-direction:row;
        align-items:center;
        gap:1rem
    }
    .grid-3x2 .h-item .info .item-title{
        margin-bottom:0!important
    }
    .grid-3x2 .h-item:nth-child(n+4){
        display:none
    }
    .gpmn-text{
        align-items:flex-end;
        left:auto;
        right:1rem
    }
    .gpmn-text .btn{
        padding:0!important;
        width:40px!important;
        height:40px!important;
        justify-content:center!important
    }
    .gpmn-text .btn span{
        display:none
    }
}
@media screen and (max-width:379px){
    .v-pagination .btn-lg{
        font-size:14px;
        min-height:44px;
        padding:.5rem 1.2rem
    }
    .v-pagination .btn-.circle{
        width:44px;
        padding:.5rem
    }
    .de-eps.is-grid .item .info{
        font-size:.9em
    }
    .dcc-side .menu-user .item .line-center span{
        font-size:11px
    }
}
:root{
    --toastify-color-light:#fff;
    --toastify-color-dark:#121212;
    --toastify-color-info:#3498db;
    --toastify-color-success:#07bc0c;
    --toastify-color-warning:#f1c40f;
    --toastify-color-error:#e74d3c;
    --toastify-color-transparent:hsla(0,0%,100%,0.7);
    --toastify-icon-color-info:var(--toastify-color-info);
    --toastify-icon-color-success:var(--toastify-color-success);
    --toastify-icon-color-warning:var(--toastify-color-warning);
    --toastify-icon-color-error:var(--toastify-color-error);
    --toastify-container-width:fit-content;
    --toastify-toast-width:320px;
    --toastify-toast-offset:16px;
    --toastify-toast-top:max(var(--toastify-toast-offset),env(safe-area-inset-top));
    --toastify-toast-right:max(var(--toastify-toast-offset),env(safe-area-inset-right));
    --toastify-toast-left:max(var(--toastify-toast-offset),env(safe-area-inset-left));
    --toastify-toast-bottom:max(var(--toastify-toast-offset),env(safe-area-inset-bottom));
    --toastify-toast-background:#fff;
    --toastify-toast-padding:14px;
    --toastify-toast-min-height:64px;
    --toastify-toast-max-height:800px;
    --toastify-toast-bd-radius:6px;
    --toastify-toast-shadow:0px 4px 12px rgba(0,0,0,0.1);
    --toastify-font-family:sans-serif;
    --toastify-z-index:9999;
    --toastify-text-color-light:#757575;
    --toastify-text-color-dark:#fff;
    --toastify-text-color-info:#fff;
    --toastify-text-color-success:#fff;
    --toastify-text-color-warning:#fff;
    --toastify-text-color-error:#fff;
    --toastify-spinner-color:#616161;
    --toastify-spinner-color-empty-area:#e0e0e0;
    --toastify-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
    --toastify-color-progress-dark:#bb86fc;
    --toastify-color-progress-info:var(--toastify-color-info);
    --toastify-color-progress-success:var(--toastify-color-success);
    --toastify-color-progress-warning:var(--toastify-color-warning);
    --toastify-color-progress-error:var(--toastify-color-error);
    --toastify-color-progress-bgo:0.2
}
.Toastify__toast-container{
    z-index:var(--toastify-z-index);
    -webkit-transform:translateZ(var(--toastify-z-index));
    position:fixed;
    width:var(--toastify-container-width);
    box-sizing:border-box;
    color:#fff;
    display:flex;
    flex-direction:column
}
.Toastify__toast-container--top-left{
    top:var(--toastify-toast-top);
    left:var(--toastify-toast-left)
}
.Toastify__toast-container--top-center{
    top:var(--toastify-toast-top);
    left:50%;
    transform:translateX(-50%);
    align-items:center
}
.Toastify__toast-container--top-right{
    top:var(--toastify-toast-top);
    right:var(--toastify-toast-right);
    align-items:end
}
.Toastify__toast-container--bottom-left{
    bottom:var(--toastify-toast-bottom);
    left:var(--toastify-toast-left)
}
.Toastify__toast-container--bottom-center{
    bottom:var(--toastify-toast-bottom);
    left:50%;
    transform:translateX(-50%);
    align-items:center
}
.Toastify__toast-container--bottom-right{
    bottom:var(--toastify-toast-bottom);
    right:var(--toastify-toast-right);
    align-items:end
}
.Toastify__toast{
    --y:0;
    position:relative;
    touch-action:none;
    width:var(--toastify-toast-width);
    min-height:var(--toastify-toast-min-height);
    box-sizing:border-box;
    margin-bottom:1rem;
    padding:var(--toastify-toast-padding);
    border-radius:var(--toastify-toast-bd-radius);
    box-shadow:var(--toastify-toast-shadow);
    max-height:var(--toastify-toast-max-height);
    font-family:var(--toastify-font-family);
    z-index:0;
    display:flex;
    flex:1 1 auto;
    align-items:center;
    word-break:break-word
}
@media only screen and (max-width:480px){
    .Toastify__toast-container{
        width:100vw;
        left:env(safe-area-inset-left);
        margin:0
    }
    .Toastify__toast-container--top-center,.Toastify__toast-container--top-left,.Toastify__toast-container--top-right{
        top:env(safe-area-inset-top);
        transform:translateX(0)
    }
    .Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-right{
        bottom:env(safe-area-inset-bottom);
        transform:translateX(0)
    }
    .Toastify__toast-container--rtl{
        right:env(safe-area-inset-right);
        left:auto
    }
    .Toastify__toast{
        --toastify-toast-width:100%;
        margin-bottom:0;
        border-radius:0
    }
}
.Toastify__toast-container[data-stacked=true]{
    width:var(--toastify-toast-width)
}
.Toastify__toast--stacked{
    position:absolute;
    width:100%;
    transform:translate3d(0,var(--y),0) scale(var(--s));
    transition:transform .3s
}
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button,.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body{
    transition:opacity .1s
}
.Toastify__toast--stacked[data-collapsed=false]{
    overflow:visible
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{
    opacity:0
}
.Toastify__toast--stacked:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:calc(var(--g)*1px);
    bottom:100%
}
.Toastify__toast--stacked[data-pos=top]{
    top:0
}
.Toastify__toast--stacked[data-pos=bot]{
    bottom:0
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before{
    transform-origin:top
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before{
    transform-origin:bottom
}
.Toastify__toast--stacked:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    transform:scaleY(3);
    z-index:-1
}
.Toastify__toast--rtl{
    direction:rtl
}
.Toastify__toast--close-on-click{
    cursor:pointer
}
.Toastify__toast-icon{
    -webkit-margin-end:10px;
    margin-inline-end:10px;
    width:22px;
    flex-shrink:0;
    display:flex
}
.Toastify--animate{
    animation-fill-mode:both;
    animation-duration:.5s
}
.Toastify--animate-icon{
    animation-fill-mode:both;
    animation-duration:.3s
}
.Toastify__toast-theme--dark{
    background:var(--toastify-color-dark);
    color:var(--toastify-text-color-dark)
}
.Toastify__toast-theme--colored.Toastify__toast--default,.Toastify__toast-theme--light{
    background:var(--toastify-color-light);
    color:var(--toastify-text-color-light)
}
.Toastify__toast-theme--colored.Toastify__toast--info{
    color:var(--toastify-text-color-info);
    background:var(--toastify-color-info)
}
.Toastify__toast-theme--colored.Toastify__toast--success{
    color:var(--toastify-text-color-success);
    background:var(--toastify-color-success)
}
.Toastify__toast-theme--colored.Toastify__toast--warning{
    color:var(--toastify-text-color-warning);
    background:var(--toastify-color-warning)
}
.Toastify__toast-theme--colored.Toastify__toast--error{
    color:var(--toastify-text-color-error);
    background:var(--toastify-color-error)
}
.Toastify__progress-bar-theme--light{
    background:var(--toastify-color-progress-light)
}
.Toastify__progress-bar-theme--dark{
    background:var(--toastify-color-progress-dark)
}
.Toastify__progress-bar--info{
    background:var(--toastify-color-progress-info)
}
.Toastify__progress-bar--success{
    background:var(--toastify-color-progress-success)
}
.Toastify__progress-bar--warning{
    background:var(--toastify-color-progress-warning)
}
.Toastify__progress-bar--error{
    background:var(--toastify-color-progress-error)
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning{
    background:var(--toastify-color-transparent)
}
.Toastify__close-button{
    color:#fff;
    position:absolute;
    top:6px;
    right:6px;
    background:transparent;
    outline:none;
    border:none;
    padding:0;
    cursor:pointer;
    opacity:.7;
    transition:.3s ease;
    z-index:1
}
.Toastify__toast--rtl .Toastify__close-button{
    left:6px;
    right:unset
}
.Toastify__close-button--light{
    color:#000;
    opacity:.3
}
.Toastify__close-button>svg{
    fill:currentColor;
    height:16px;
    width:14px
}
.Toastify__close-button:focus,.Toastify__close-button:hover{
    opacity:1
}
@keyframes Toastify__trackProgress{
    0%{
        transform:scaleX(1)
    }
    to{
        transform:scaleX(0)
    }
}
.Toastify__progress-bar{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:.7;
    transform-origin:left
}
.Toastify__progress-bar--animated{
    animation:Toastify__trackProgress linear 1 forwards
}
.Toastify__progress-bar--controlled{
    transition:transform .2s
}
.Toastify__progress-bar--rtl{
    right:0;
    left:auto;
    transform-origin:right;
    border-bottom-left-radius:0
}
.Toastify__progress-bar--wrp{
    position:absolute;
    overflow:hidden;
    bottom:0;
    left:0;
    width:100%;
    height:5px;
    border-bottom-left-radius:var(--toastify-toast-bd-radius);
    border-bottom-right-radius:var(--toastify-toast-bd-radius)
}
.Toastify__progress-bar--wrp[data-hidden=true]{
    opacity:0
}
.Toastify__progress-bar--bg{
    opacity:var(--toastify-color-progress-bgo);
    width:100%;
    height:100%
}
.Toastify__spinner{
    width:20px;
    height:20px;
    box-sizing:border-box;
    border-radius:100%;
    border:2px solid;
    border-color:var(--toastify-spinner-color-empty-area);
    border-right:2px solid var(--toastify-spinner-color);
    animation:Toastify__spin .65s linear infinite
}
@keyframes Toastify__bounceInRight{
    0%,60%,75%,90%,to{
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        transform:translate3d(3000px,0,0)
    }
    60%{
        opacity:1;
        transform:translate3d(-25px,0,0)
    }
    75%{
        transform:translate3d(10px,0,0)
    }
    90%{
        transform:translate3d(-5px,0,0)
    }
    to{
        transform:none
    }
}
@keyframes Toastify__bounceOutRight{
    20%{
        opacity:1;
        transform:translate3d(-20px,var(--y),0)
    }
    to{
        opacity:0;
        transform:translate3d(2000px,var(--y),0)
    }
}
@keyframes Toastify__bounceInLeft{
    0%,60%,75%,90%,to{
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        transform:translate3d(-3000px,0,0)
    }
    60%{
        opacity:1;
        transform:translate3d(25px,0,0)
    }
    75%{
        transform:translate3d(-10px,0,0)
    }
    90%{
        transform:translate3d(5px,0,0)
    }
    to{
        transform:none
    }
}
@keyframes Toastify__bounceOutLeft{
    20%{
        opacity:1;
        transform:translate3d(20px,var(--y),0)
    }
    to{
        opacity:0;
        transform:translate3d(-2000px,var(--y),0)
    }
}
@keyframes Toastify__bounceInUp{
    0%,60%,75%,90%,to{
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        transform:translate3d(0,3000px,0)
    }
    60%{
        opacity:1;
        transform:translate3d(0,-20px,0)
    }
    75%{
        transform:translate3d(0,10px,0)
    }
    90%{
        transform:translate3d(0,-5px,0)
    }
    to{
        transform:translateZ(0)
    }
}
@keyframes Toastify__bounceOutUp{
    20%{
        transform:translate3d(0,calc(var(--y) - 10px),0)
    }
    40%,45%{
        opacity:1;
        transform:translate3d(0,calc(var(--y) + 20px),0)
    }
    to{
        opacity:0;
        transform:translate3d(0,-2000px,0)
    }
}
@keyframes Toastify__bounceInDown{
    0%,60%,75%,90%,to{
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        transform:translate3d(0,-3000px,0)
    }
    60%{
        opacity:1;
        transform:translate3d(0,25px,0)
    }
    75%{
        transform:translate3d(0,-10px,0)
    }
    90%{
        transform:translate3d(0,5px,0)
    }
    to{
        transform:none
    }
}
@keyframes Toastify__bounceOutDown{
    20%{
        transform:translate3d(0,calc(var(--y) - 10px),0)
    }
    40%,45%{
        opacity:1;
        transform:translate3d(0,calc(var(--y) + 20px),0)
    }
    to{
        opacity:0;
        transform:translate3d(0,2000px,0)
    }
}
.Toastify__bounce-enter--bottom-left,.Toastify__bounce-enter--top-left{
    animation-name:Toastify__bounceInLeft
}
.Toastify__bounce-enter--bottom-right,.Toastify__bounce-enter--top-right{
    animation-name:Toastify__bounceInRight
}
.Toastify__bounce-enter--top-center{
    animation-name:Toastify__bounceInDown
}
.Toastify__bounce-enter--bottom-center{
    animation-name:Toastify__bounceInUp
}
.Toastify__bounce-exit--bottom-left,.Toastify__bounce-exit--top-left{
    animation-name:Toastify__bounceOutLeft
}
.Toastify__bounce-exit--bottom-right,.Toastify__bounce-exit--top-right{
    animation-name:Toastify__bounceOutRight
}
.Toastify__bounce-exit--top-center{
    animation-name:Toastify__bounceOutUp
}
.Toastify__bounce-exit--bottom-center{
    animation-name:Toastify__bounceOutDown
}
@keyframes Toastify__zoomIn{
    0%{
        opacity:0;
        transform:scale3d(.3,.3,.3)
    }
    50%{
        opacity:1
    }
}
@keyframes Toastify__zoomOut{
    0%{
        opacity:1
    }
    50%{
        opacity:0;
        transform:translate3d(0,var(--y),0) scale3d(.3,.3,.3)
    }
    to{
        opacity:0
    }
}
.Toastify__zoom-enter{
    animation-name:Toastify__zoomIn
}
.Toastify__zoom-exit{
    animation-name:Toastify__zoomOut
}
@keyframes Toastify__flipIn{
    0%{
        transform:perspective(400px) rotateX(90deg);
        animation-timing-function:ease-in;
        opacity:0
    }
    40%{
        transform:perspective(400px) rotateX(-20deg);
        animation-timing-function:ease-in
    }
    60%{
        transform:perspective(400px) rotateX(10deg);
        opacity:1
    }
    80%{
        transform:perspective(400px) rotateX(-5deg)
    }
    to{
        transform:perspective(400px)
    }
}
@keyframes Toastify__flipOut{
    0%{
        transform:translate3d(0,var(--y),0) perspective(400px)
    }
    30%{
        transform:translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);
        opacity:1
    }
    to{
        transform:translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);
        opacity:0
    }
}
.Toastify__flip-enter{
    animation-name:Toastify__flipIn
}
.Toastify__flip-exit{
    animation-name:Toastify__flipOut
}
@keyframes Toastify__slideInRight{
    0%{
        transform:translate3d(110%,0,0);
        visibility:visible
    }
    to{
        transform:translate3d(0,var(--y),0)
    }
}
@keyframes Toastify__slideInLeft{
    0%{
        transform:translate3d(-110%,0,0);
        visibility:visible
    }
    to{
        transform:translate3d(0,var(--y),0)
    }
}
@keyframes Toastify__slideInUp{
    0%{
        transform:translate3d(0,110%,0);
        visibility:visible
    }
    to{
        transform:translate3d(0,var(--y),0)
    }
}
@keyframes Toastify__slideInDown{
    0%{
        transform:translate3d(0,-110%,0);
        visibility:visible
    }
    to{
        transform:translate3d(0,var(--y),0)
    }
}
@keyframes Toastify__slideOutRight{
    0%{
        transform:translate3d(0,var(--y),0)
    }
    to{
        visibility:hidden;
        transform:translate3d(110%,var(--y),0)
    }
}
@keyframes Toastify__slideOutLeft{
    0%{
        transform:translate3d(0,var(--y),0)
    }
    to{
        visibility:hidden;
        transform:translate3d(-110%,var(--y),0)
    }
}
@keyframes Toastify__slideOutDown{
    0%{
        transform:translate3d(0,var(--y),0)
    }
    to{
        visibility:hidden;
        transform:translate3d(0,500px,0)
    }
}
@keyframes Toastify__slideOutUp{
    0%{
        transform:translate3d(0,var(--y),0)
    }
    to{
        visibility:hidden;
        transform:translate3d(0,-500px,0)
    }
}
.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--top-left{
    animation-name:Toastify__slideInLeft
}
.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--top-right{
    animation-name:Toastify__slideInRight
}
.Toastify__slide-enter--top-center{
    animation-name:Toastify__slideInDown
}
.Toastify__slide-enter--bottom-center{
    animation-name:Toastify__slideInUp
}
.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--top-left{
    animation-name:Toastify__slideOutLeft;
    animation-timing-function:ease-in;
    animation-duration:.3s
}
.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--top-right{
    animation-name:Toastify__slideOutRight;
    animation-timing-function:ease-in;
    animation-duration:.3s
}
.Toastify__slide-exit--top-center{
    animation-name:Toastify__slideOutUp;
    animation-timing-function:ease-in;
    animation-duration:.3s
}
.Toastify__slide-exit--bottom-center{
    animation-name:Toastify__slideOutDown;
    animation-timing-function:ease-in;
    animation-duration:.3s
}
@keyframes Toastify__spin{
    0%{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(1turn)
    }
}

.swiper,:host{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    z-index:1
}
.swiper{
    overflow:hidden;
    list-style:none;
    padding:0
}
.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:translateZ(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{
    -webkit-margin-start:var(--swiper-centered-offset-before);
    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{
    -webkit-margin-before:var(--swiper-centered-offset-before);
    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(270deg,rgba(0,0,0,.5),transparent)
}
.swiper-3d .swiper-slide-shadow-right{
    background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)
}
.swiper-3d .swiper-slide-shadow-top{
    background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)
}
.swiper-3d .swiper-slide-shadow-bottom{
    background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)
}
.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-radius:50%;
    border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));
    border-top:4px solid transparent
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{
    animation:swiper-preloader-spin 1s linear infinite
}
.swiper-lazy-preloader-white{
    --swiper-preloader-color:#fff
}
.swiper-lazy-preloader-black{
    --swiper-preloader-color:#000
}
@keyframes swiper-preloader-spin{
    0%{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(1turn)
    }
}