/* Root */
@charset "UTF-8";
:root {
	--bg-color: #02080F;
	--text-base: #abb7c4;
	--primary-color: #da966e;
	--primary-color-hover: #da966e;
	--primary-button-text: #191B24;
	--primary-text: #da966e;
}
html{scroll-behavior: smooth;}
html, body{position: relative; min-height: 100vh;}
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: #ddd; text-decoration: none !important;}
a:hover{ color: var(--primary-text);}
.btn{ box-shadow: none !important; border: none !important; font-size: 13px; padding: .5rem .8rem;}
.btn-sm{ font-size: 12px;}
.btn-lg{ font-size: 15px;}
.text-primary{ color: var(--primary-text) !important;}
.text-short, .lim-1, .lim-2, .lim-3{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;}
.heading-lg{ font-weight: 600; color: #ddd; font-size: 24px; margin-bottom: 1rem;}
.heading-md{ font-weight: 600; color: #ddd; font-size: 18px; margin-bottom: .5rem;}
.heading-sm{ font-weight: 600; color: #ddd; font-size: 14px; margin-bottom: .5rem;}
.lim-1{ -webkit-line-clamp: 1;}
.lim-2{ -webkit-line-clamp: 2;}
.lim-3{ -webkit-line-clamp: 3;}
.mc-icon{ width: 16px; height: 16px; flex-shrink: 0; font-size: 0 !important; line-height: 0 !important;}
.mc-icon svg, .mc-icon img{ width: 100% !important; height: 100% !important;}
.icon-20{ width: 20px; height: 20px;}
.icon-16{ width: 16px; height: 16px;}
.icon-14{ width: 14px; height: 14px;}
.icon-12{ width: 12px; height: 12px;}
.icon-white{ fill: #ffffff;}
.form-basic, .form-basic:focus,  .form-basic:active{ box-shadow: none !important;}
.antiselect, .item-v{ -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.transition, #top_navbar .sub{ transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s;}
.align-center{ display: inline-flex; align-items: center; gap: .5rem;}
.align-center span{ white-space: nowrap;}
.thumbnail-v{ display: block; width: 100%; height: 0; padding-bottom: 146%; position: relative; flex-shrink: 0;}
.img-fit{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%;}
#mc_app{ min-height: 100vh;}
.container{ padding: 0 10px; max-width: 1000px; width: 100%;}

/* Header */
header{ position: relative; z-index: 3; background-color: #333333; padding-top: 10px;}
header .header-elements{ height: 90px; position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 15px 0;}
header .header-elements #logo{ flex-shrink: 0;}
header .header-elements #logo img{ height: 60px;}
#mobile_menu, #mobile_search{ display: none; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 40px; align-items: center; justify-content: center;}
#mobile_search{ border-radius: .4rem; background-color: #0005;}
#mobile_menu svg{ width: 32px; height: 32px;}
#mobile_search svg{ width: 20px; height: 20px;}
#mobile_search{ left: auto; right: 0;}
#top_search{ width: 350px; position: relative;}
#top_search .search-input{ width: 100%; height: 34px; border: 1px solid #353535; background-color: #fff; color: #000; font-style: italic; padding: 5px; padding-right: 40px !important;}
#top_search .search-input::placeholder{ color: #333;}
#top_search .search-submit{ border: none; background: none; width: 36px; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; color: #abb7c4; padding: 0; display: flex; align-items: center; justify-content: center;}
.tool-right{ flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem;}
.tool-right a{ color: #fff;}

#top_navbar{ background-color: #2d2d2d; border-bottom: 1px solid #181818; margin-bottom: 1rem;}
#top_navbar .nav_menu{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0;}
#top_navbar .nav_menu > li{ position: relative;}
#top_navbar .sub > .sub-ul{list-style: none; margin: 0; padding: 0;}

#main_content{ min-height: calc(100vh - 340px); padding-bottom: 3rem;}
.home-layout{ display: flex; flex-direction: column; gap: 2rem;}

.box-basic{ display: flex; flex-direction: column; gap: .75rem;}
.box-basic + .box-basic{ margin-top: 2rem;}
.box-basic .box-header{ display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;}
.box-basic .box-header .box-title{ font-weight: normal; color: #fff; font-size: 18px; margin: 0;}
.box-basic .box-header .box-title.size-large{ font-size: 24px; text-transform: uppercase;}
.box-basic .box-header .box-title.size-medium{ font-size: 18px; font-weight: 600; text-transform: uppercase;}
.box-basic.single{ gap: 1.5rem;}
.box-basic.single .box-header .box-title.size-large{ text-transform: none;}

.box-filter{ padding: .5rem 0 2rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;}
.box-filter .btn-submit{ background-color: #666; line-height: 39px; padding: 0 16px; border: none; color: #fff; border-radius: 0;}
.form-select{ color: #fff; font-size: 14px; border-color: #383838; border-radius: 0; padding: .5rem 2.25rem .5rem .75rem;}
.form-select:focus{ border-color: #c48560; box-shadow: 0 0 0 .25rem rgba(196,133,96,.1);}

.mc-page{ margin: 1.5rem auto;}
.mc-page .page-ul{ list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center;}
.mc-page .page-ul li a{ display: block; padding: 6px 8px; min-width: 36px; text-align: center; background-color: #444; border: 1px solid #444; font-size: 14px; color: #fff;}
.mc-page .page-ul li.active a{ background-color: #222; color: var(--primary-text);}
.mc-page .page-ul li:hover a{ color: var(--primary-text);}

/* slide */
.cards-slide-wrapper{ position: relative;}
.sw-navigation .sw-button{ position: absolute; top: 50%; left: 0; z-index: 9; transform: translateY(-50%); background-color: rgba(0,0,0,.7); color: #fff; width: 40px; height: 50px; border: none; display: flex; align-items: center; justify-content: center;}
.sw-navigation .sw-button svg{ width: 40px; height: 40px;}
.sw-navigation .sw-button.sw-next{ left: auto; right: 0;}

/* grid */
.card-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;}
.card-grid.wide{ grid-template-columns: repeat(6,1fr); gap: 1rem;}
.card-grid .item-v .info .alias{ color: #fff;}

/* list */
.card-list{ display: flex; flex-direction: column; gap: 1.2rem;}

.item-v{ display: block; position: relative;}
.item-v .info{ position: absolute; top: auto; bottom: 0; left: 0; right: 0; z-index: 3; background-color: rgba(0,0,0,.7); text-align: center; padding: 7px;}
.item-v .info .film-title{ font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 0;}
.item-v .info .alias{ font-size: 12px; color: #abb7c4; margin-top: 3px;}

.item-h{ display: flex; align-items: center; gap: .75rem;}
.item-h .thumbnail-v{ width: 70px; padding-bottom: 105px;}
.item-h .info{ flex-grow: 1;}
.item-h .info .film-title{ font-size: 18px; line-height: 1.5; margin-bottom: .5rem;}
.item-h .info .opt{ display: flex; align-items: center; gap: 5px; color: #fff; font-size: 12px;}
.item-h .info .opt span + span:before{ content: ""; display: inline-block; width: 4px; height: 4px; background-color: #ccc; border-radius: 10px; margin-right: 5px; vertical-align: middle;}

.item-t{ display: flex; align-items: center; gap: 10px; padding: 10px 0;}
.item-t .film-title{ font-size: 13px; font-weight: 600; margin-bottom: 0;}
.item-t .film-title a{ color: #fff;}
.item-t .film-title a:hover{ color: #ff9601;}
.item-t .views{ color: #BABABA; font-size: 12px; font-style: italic; margin-top: 3px;}
.item-t .number{ width: 24px; height: 24px; border-radius: 50%; background-color: #c58560; color: #fff; font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: center;}

.card-list-text .item-t{ padding: 10px 5px;}
.card-list-text .item-t:nth-child(2n){ background-color: #181818;}

.pic-tag{ position: absolute; display: inline-block; line-height: 1.2em; padding: 5px; font-size: 11px; color: #fff; background: #A3765D; border-bottom: 2px solid #96674f; border-radius: 0 5px 5px 0; box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.75); z-index: 4;}
.pic-tag-top{ top: 5px; left: 0px;}
.play-mask{ opacity: 0; position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; background-image: url(../images/play-button.svg); background-color: rgba(0,0,0,0.4); background-size: 40px 40px; background-position: center center; background-repeat: no-repeat; -webkit-transition: all ease-out 0.35s; transition: all ease-out 0.35s;}
.thumbnail-v:hover .play-mask{ opacity: 1;}

/* split */
#split{ display: flex; gap: 1.5rem; align-items: stretch;}
#s_main{ flex-grow: 1;}

/* tabs */
.mc-tabs .nav-link{ border-radius: 0; color: #fff !important; font-size: 13px; font-weight: 600;}
.mc-tabs .nav-link:hover{ background-color: #333;}
.mc-tabs .nav-link.active{ background-color: #5d5d5d !important;}

/* sidebar */
#sidebar{ width: 290px; flex-shrink: 0;}
#sidebar .box-basic .box-header, .box-header.underline{ padding-bottom: 8px; border-bottom: 2px dashed #5d5d5d; margin-bottom: 8px;}

/* detail */
.detail-content, .watch-content{ position: relative; display: flex; flex-direction: column;}
.detail-content > div{ margin-bottom: 2rem;}
.detail-content .dc-top{ display: flex; align-items: stretch; gap: 10px; background-color: #181818; padding: 10px; margin-bottom: 0 !important;}
.detail-content .dc-top .poster{ width: 290px; flex-shrink: 0;}
.detail-content .dc-top .poster .thumbnail-v{ border-radius: .3rem; overflow: hidden;}
.detail-content .dc-top .poster .btn-watch{ background-color: #dd003f; color: #fff; text-transform: uppercase; font-weight: 600; padding: 8px; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; border-radius: 0;}
.dc-top .info{ flex-grow: 1; display: flex; flex-direction: column;}
.dc-top .info .film-name{ font-size: 30px; font-weight: 700; color: #ff9658; text-transform: uppercase; margin-bottom: .5rem;}
.dc-top .info .alias-name{ font-size: 12px; color: #999; margin-bottom: 1rem;}
.dc-top .info .box-auto{ flex-grow: 1; padding: 10px; background-color: #222; color: #bbb; font-size: 13px; line-height: 1.5; overflow: auto; max-height: 250px;}
.dc-top .info .box-auto .crumb{ font-size: 13px; line-height: 1.5;}
.dc-top .info .box-auto strong{ font-weight: 600;}
.dc-top .info .box-auto .line > div{ display: inline;}
.dc-top .info .box-auto .line + .line{ margin-top: .7rem;}
.dc-top .info .box-auto .line .name{ font-weight: 600;}
.dc-bot .article{ font-size: 15px; line-height: 1.6;}
.dc-top .info .rate-basic{ margin: 0; padding: 10px; background-color: #222;}

.season-list{ display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 10px;}
.season-list .btn-light{ padding: 8px; text-align: center; font-weight: 600; width: 100%;}
.season-list .btn-light.active{ background-color: #dd003f; color: #fff;}
.block-season{ display: block; padding: 0 10px;}
.block-season.b-detail{background-color: #181818; padding: 10px;}
.block-season .bs-wrap{ display: flex; flex-direction: column; gap: 1rem;}
.block-season.b-detail .bs-wrap{ padding: 10px; border: 2px solid #da966e;}
.block-season .bs-wrap .text-light{ color: #fff;}

.rate-basic{ margin-top: 5px;}
.rate-basic.wide{ text-align: center; margin: 0;}
.rate-basic.wide .gl-star-rating{ justify-content: center !important;}
.rating-score{ margin-top: 3px; font-size: 13px; color: #bbb;}
.gl-star-rating--stars[class*=" s"] > span{ background-size: 100% !important;}
[data-star-rating] .gl-star-rating--stars{ gap: 2px !important;}

.keywords{ margin-bottom: .5rem;}
.keywords .key-list{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem;}
.keywords .key-list .key-name{ font-size: 14px; margin: 0; border: 1px solid #999; padding: 3px 6px;}
.keywords .key-list a{ color: #999; white-space: nowrap; max-width: 300px;}
.keywords .key-list .key-name:hover{ border-color: var(--primary-color);}
.keywords .key-list .key-name:hover a{ color: var(--primary-text);}

.watch-content{ margin-bottom: 0;}
.watch-content > div{ margin-bottom: 2rem;}
.wc-episodes .box-basic .box-header{ justify-content: flex-start;}
.episode-list{ list-style: none; display: grid; grid-template-columns: repeat(8,1fr); gap: 10px; max-height: 300px; overflow-y: auto;}
.episode-list .btn-eps{ background-color: #fff; color: #000; font-weight: 500; display: block; padding: .4rem;}
.episode-list .btn-eps:hover{ opacity: .9;}
.episode-list .btn-eps.active{ background-color: #dd003f; color: #fff;}
.stage{ position: relative; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem;}
.mc-player{ position: relative; width: 100%; padding-bottom: 56.25%; background-color: #0009;}
.mc-player .player-ratio{ position: absolute; width: 100% !important; height: 100% !important; top: 0; left: 0; right: 0; bottom: 0;}
.stage .s-top{ padding: 10px 16px; text-align: center; font-size: 1em; background-color: #0b1f35;}
.stage .s-notice{ padding: 10px; text-align: left; border: 1px solid #5db4f2; background-color: rgba(0,0,0,.8); font-family: arial; font-size: 12px; font-weight: 600; color: #fff; display: inline-block; margin: 0 auto;}
.stage .s-notice a{ color: #00FFFF;}
.stage .s-notice-wrap{ text-align: center;}
.stage .server-list{ margin: .5rem 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem;}
.stage .server-list .btn-server{ background-color: #66b7f0; color: #fff; min-width: 110px;}
.stage .server-list .btn-server.active{ background-color: #d9534f;}
.episode-tabs{ gap: .3rem;}
.episode-tabs .nav-link{ color: #666; border: 1px solid transparent; padding: .3rem .8rem; font-size: 13px; font-weight: 500; border-radius: 2rem;}
.episode-tabs .nav-link.active{ color: #f90; border-color: #f90;}


footer{ position: relative; border-top: 1px solid #2d2d2d;}
footer .footer-elements{ padding: 30px 0;}
footer .footer-elements p{ margin-bottom: 0; color: #848484;}