/* restyle */
header{ padding: 5px 0}
header .header-elements{ align-items: center; gap: 1.5rem;}
#top_search .search-input{ height: 38px; padding: 8px 12px; border-radius: .4rem; border: none !important;}
#top_navbar .nav_menu{ gap: 1.4rem !important;}
#top_navbar .nav_menu > li > a{ padding: 0 !important;}
.sw-navigation .sw-button{ border-radius: 0 8px 8px 0;}
.sw-navigation .sw-button:hover{ color: var(--primary-text);}
.sw-navigation .sw-button.swiper-button-disabled{ opacity: 0;}
.sw-navigation .sw-button.sw-next{ border-radius: 8px 0 0 8px;}
.sw-navigation .sw-button svg{ width: 24px; height: 24px;}
.item-v .info .film-title{ font-size: 14px;}
.item-h .info .film-title{ font-size: 16px;}

@media screen and (max-width: 1359px){
}
@media screen and (max-width: 1279px){
    .box-filter{ grid-template-columns: repeat(6,1fr);}
}
@media screen and (min-width: 1000px){
    .watch-layout #split{ gap: 0;}
    .watch-layout #sidebar{ width: 320px; padding: 20px;}
    .watch-layout .dc-bot, .watch-layout .box-related{ padding: 20px; background-color: #000; margin-bottom: 1rem;}
    .watch-content > div{ margin-bottom: 1rem; padding: 20px; background-color: #000;}
}
@media screen and (max-width: 999px){
    #top_navbar .nav_menu{ gap: 2rem;}
    #top_navbar .nav_menu > li.hide-mobile{ display: none;}
    #split{ flex-direction: column; gap: 2rem;}
    #split > div{ flex-grow: unset; flex-shrink: unset; width: 100%;}
    .card-grid{ grid-template-columns: repeat(3,1fr);}
    .card-grid.wide{ grid-template-columns: repeat(4,1fr);}
}
@media screen and (min-width: 800px){
    #top_navbar .nav_menu > li > a{ height: 56px; gap: 4px; padding: 0 10px; font-size: 16px; text-transform: uppercase; color: #fff; white-space: nowrap; position: relative;}
    #top_navbar .nav_menu > li > a > .toggle-button{ display: none;}
    #top_navbar .nav_menu > li.active > a, #top_navbar .nav_menu > li:hover > a{ color: #da966e;}
    #top_navbar .nav_menu > li.active > a:after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #ccc;}
    #top_navbar .sub{ position: absolute; top: 55px; left: -10px; z-index: 10; display: none;}
    #top_navbar .nav_menu > li:hover .sub{ display: block;}
    #top_navbar .sub > .sub-ul{ background-color: #2d2d2d; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); width: 600px; display: grid; grid-template-columns: repeat(4,1fr); padding: 10px;}
    #top_navbar .sub > .sub-ul > li > a{ color: #fff; padding: 6px 10px; display: block;}
    #top_navbar .sub > .sub-ul > li > a:hover{ color: var(--primary-text)}
    #navbar_mask{ display: none;}
    #navbar_close{ display: none;}
}
@media screen and (max-width: 799px){
    body.fixed{ height: 100vh; overflow: hidden;}
    #mobile_menu, #mobile_search{ display: flex; cursor: pointer;}
    header{ padding: 0; margin-bottom: 1rem;}
    header .header-elements{ height: 60px; justify-content: center;}
    header .header-elements #logo img{ height: 30px;}
    #top_search, .tool-right{ display: none;}
    #top_search.active{ display: block !important; position: absolute; left: 0; right: 0; top: 60px; width: auto;}
    /* Navbar */
    #top_navbar{ position: fixed; width: 280px; opacity: 0; top: 0; left: -280px; bottom: 0; z-index: 99; margin-bottom: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
    #top_navbar.active{ opacity: 1; left: 0; background-color: #141414;}
    #top_navbar .container{ padding: 0;}
    #top_navbar .nav_menu{ flex-direction: column; gap: 0 !important; height: 100vh; overflow: auto;}
    #top_navbar .nav_menu > li{ width: 100%; display: block !important;}
    #top_navbar .nav_menu > li + li{ border-top: 1px solid #444 !important;}
    #top_navbar .nav_menu > li > a{ height: 42px; font-size: 14px; padding: 0 15px !important; width: 100%; position: relative;}
    #top_navbar .nav_menu > li > a > svg{ display: none;}
    #top_navbar .sub{ display: none;}
    #top_navbar .sub.active{ display: block;}
    .sub .sub-ul li{ border-top: 1px solid #444;}
    .sub .sub-ul li a{ display: block; padding: 8px 16px 8px 32px; background-color: #1d1d1d;}
    #navbar_close{ width: 42px; height: 43px; background-color: #141414; border: 1px solid #444; border-top: none; display: none; align-items: center; justify-content: center; font-size: 28px; color: #fff; position: absolute; right: -40px; top: 0; cursor: pointer;}
    #top_navbar.active #navbar_close{ display: flex;}
    .toggle-button{ position: absolute; top: 0; right: 0; bottom: 0; width: 42px; border-left: 1px solid #444; background-color: #1d1d1d;}
    .toggle-button:before, .toggle-button:after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 2px; background-color: #fff;}
    .toggle-button:after{ width: 2px; height: 12px;}
    a.active > .toggle-button:after{ display: none;}
    #navbar_mask{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98; background-color: rgba(20,20,20,.5);}
    #navbar_mask.active{ display: block;}
    .card-grid{ gap: .5rem;}
    .card-grid.wide{ grid-template-columns: repeat(3,1fr); gap: .5rem;}
    .box-filter{ grid-template-columns: repeat(2,1fr); gap: .5rem;}
    .dc-top .info .film-name{ font-size: 18px; line-height: 1.5; margin-bottom: .25rem;}
    .detail-content .dc-top .poster{ width: 220px;}
    .dc-top .info .rate-basic{ text-align: center;}
    [data-star-rating]{ justify-content: center;}
    .season-list{ display: grid; grid-template-columns: repeat(4,1fr);}
    .episode-list{ grid-template-columns: repeat(6,1fr); gap: 10px;}
}
@media screen and (max-width: 640px){
    .hide-mobile{ display: none;}
    .item-v .info .film-title{ font-size: 12px;}
    .box-basic .box-header .box-title.size-large{ font-size: 20px;}
    .item-h .info .film-title{ font-size: 14px;}
    .detail-content .dc-top .poster{ width: 110px;}
    .dc-top .info .film-name{ line-height: 1.4;}
    [data-star-rating] .gl-star-rating--stars{ flex-wrap: wrap; justify-content: center;}
    .episode-list{ grid-template-columns: repeat(4,1fr); gap: 10px;}
}
@media screen and (max-width: 479px){
    .season-list{ display: grid; grid-template-columns: repeat(3,1fr);}
    .block-season.b-detail{ padding: 0;}
    .wc-episodes .box-basic .box-header .box-title{ font-size: 16px;}
    .episode-tabs{ gap: 1rem;}
    .episode-tabs .nav-link{ padding: 5px 0; border: none; font-size: 12px;}
}
@media screen and (max-width: 379px){
}