@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* body */
body {
	color: #e2e2e6;
	font-size: 14px;
	overflow-x: hidden;
	font-family: 'Be Vietnam Pro', sans-serif;
	background-color: #111218;
}

/* Typography */
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {

}

a {
	text-decoration: none !important;
	color: #d7d7dc;
}

p {
	font-size: 14px;
}


.main_pages{
	min-height:800px;
	
}
/* Dropdown / Buttons / Form */
.btn-danger {
	color: #fff;
	background-color: #ff4343;
	border-color: #ff4343;
}

.badge-danger {
	background-color: #ff4343 !important;
}

.text-danger {
	color: #ff4343 !important;
}

.form-control {
	border-radius: .25rem;
	font-size: 14px;
}

.btn {
	border-radius: .25rem;
}

.rounded {
	border-radius: .25rem !important;
}
small,
.small {
	font-size: 13px !important;
}

.text-xs {
	font-size: 14px !important;
}

label {
	font-size: 13px;
	margin: 0 0 4px 0;
}

.required {
	color: #ff0000;
}

.help-block ul {
    margin: 0;
    padding: 0;
}

.help-block ul li {
    list-style: none;
    color: #ff0000;
    font-size: 11px;
}

.btn-link {
	color: #d7d7dc;
}

.cover-pic {
	margin: 0px 0px -86px 0px;
	text-align: center;
}

.cover-pic .love-box {
    right: 15px;
}

.cover-pic .left-box {
    left: 15px;
}

.btn-circle {
	border-radius: 50px !important;
	width: 42px;
	height: 42px;
	line-height: 31px;
	font-size: 17px;
}

.opacity-50{
opacity: 0.5;	
}

.opacity-30{
opacity: 0.3;	
}
.opacity-80{
opacity: 0.8;	
}

.dropdown-menu {
	border: none;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
}

.dropdown-menu .dropdown-item {
	padding: 7px 10px;
    font-size: 12px;
    border-radius: 1px;
    margin-bottom: 1px;
}

.dropdown-menu .dropdown-item:hover{
background: #ef3858;
background: -moz-linear-gradient(-45deg, #ef3858 0%, #ff6b81 100%);
background: -webkit-linear-gradient(-45deg, #ef3858 0%, #ff6b81 100%);
background: linear-gradient(135deg, #ef3858 0%, #ff6b81 100%);

filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#ef3858',
    endColorstr='#ff6b81',
    GradientType=1
);

color: #ffffff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}



.dropdown-menu {
   display: block;
   visibility: hidden;
   opacity:0;
   transform: translateY(50px);
   transition:.5s ease all;
}
.dropdown-menu.show {
   display: block;
   visibility: visible;
   opacity:1;
   transform: translateY(0px);
   transition:.5s ease all;
}

.btn {
	border: none;
}

.animated--fade-in {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;
	-webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
	animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

.bg-gradient-primary {
	background-color: #d7d7dc;
	background-image: linear-gradient(180deg, #1a3365 10%, #224abe 100%);
	background-size: cover;
}

.bg-gradient-secondary {
	background-color: #858796;
	background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
	background-size: cover;
}

.bg-gradient-success {
	background-color: #1cc88a;
	background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
	background-size: cover;
}

.bg-gradient-info {
	background-color: #36b9cc;
	background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
	background-size: cover;
}

.bg-gradient-warning {
	background-color: #f6c23e;
	background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
	background-size: cover;
}

.bg-gradient-danger {
	background-color: #ff4343;
	background-image: linear-gradient(180deg, #ff4343 10%, #be2617 100%);
	background-size: cover;
}

.bg-gradient-light {
	background-color: #111218;
	background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
	background-size: cover;
}

.bg-gradient-dark {
	background-color: #5a5c69;
	background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
	background-size: cover;
}

.bg-gray-100 {
	background-color: #f8f9fc !important;
}

.bg-gray-200 {
	background-color: #eaecf4 !important;
}

.bg-gray-300 {
	background-color: #dddfeb !important;
}

.bg-gray-400 {
	background-color: #d1d3e2 !important;
}

.bg-gray-500 {
	background-color: #b7b9cc !important;
}

.bg-gray-600 {
	background-color: #858796 !important;
}

.bg-gray-700 {
	background-color: #6e707e !important;
}

.bg-gray-800 {
	background-color: #5a5c69 !important;
}

.bg-gray-900 {
	background-color: #3a3b45 !important;
}

.o-hidden {
	overflow: hidden !important;
}

.text-xs {
	font-size: .7rem;
}

.text-lg {
	font-size: 1.2rem;
}

.text-gray-100 {
	color: #f8f9fc !important;
}

.text-gray-200 {
	color: #eaecf4 !important;
}

.text-gray-300 {
	color: #dddfeb !important;
}

.text-gray-400 {
	color: #d1d3e2 !important;
}

.text-gray-500 {
	color: #b7b9cc !important;
}

.text-gray-600 {
	color: #858796 !important;
}

.text-gray-700 {
	color: #6e707e !important;
}

.text-gray-800 {
	color: #5a5c69 !important;
}

.text-gray-900 {
	color: #3a3b45 !important;
}

/* Sidebar */
.sidebar-dark {
	background: #1f2533;
}

.slick-next {
	right: 15px;
}

.slick-prev {
	left: 15px;
}

.slick-prev,
.slick-next {
	z-index: 999;
}
.collections-slider {
	margin: 0 -8px;
}

/* Card Design */
.team-card img {
    width: 100px;
}
.c-card {
	margin: 0 8px;
}
.card {
	border-radius: 12px;
	
}
.card a {
	text-decoration: none !important;
	
	
}

.card-img-top, .c-card img{
	 transition: transform .3s ease;

}
.card:hover .card-img-top, .c-card img:hover {
transform: scale(1.06);

}

.m-card .card-body {
	

}

.m-card {
	overflow: hidden;
	
}

.m-card .card-body .card-title {
	font-size: 14px;
	line-height: 1.5;
    
}

.m-card .card-title,
.p-card .card-title {
	font-size: 15px;
	font-weight: 400;
	
}

.love-box {
	right: 0;
	z-index: 9;
}

.left-box {
	left: 0;
	z-index: 9;
}

.p-card p.card-text {
	color: #e2e2e6;
	font-size: 13px;
}
.p-card p.card-text small {
    color: #6c757d;
}
.p-card .col-md-4 img {
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
}

.p-card {
    overflow: hidden;
}

.p-card .col-md-4 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.e-card p.card-text.text-gray-900.mb-1,
.offer-card p.card-text.text-gray-900.mt-3 {
	font-size: 15px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.offer-card img.rounded-circle {
	width: 50px;
	position: absolute;
	background: #1d1e24;
	top: -26px;
	border: 3px solid #fff;
	height: 50px;
	object-fit: cover;
	box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.offer-card .card-body {
	position: relative;
}

.list-bp .mb-4 {
    margin-bottom: 30px !important;
}

.vh-100 {
	height: 100vh;
}

.e-card .col-2 {
	word-break: keep-all;
}
.e-card .card-body.p-0 {
    line-height: 18px;
}
.e-card .col-2 h6 {
	font-size: 18px;
}

.people-pic {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    object-fit: cover;
    object-position: top;
    border: 6px solid #fff;
    background-color: #1d1e24;
}
.people-item-cover img {
    border-radius: 0px !important;
}

.people-item-cover {
    margin: 0 0 -69px 0;
}
.people-item-body h5 {
    font-size: 20px !important;
}
.people-item-cover img {
    height: 140px;
    object-fit: cover;
}

/* Filters Design */
.filters-search {
	position: relative;
}

.filters-search i {
	position: absolute;
	left: 12px;
	top: 13px;
}

.filters-search .form-control {
	padding-left: 34px;
	height: 39px;
}

.filters-card-body {
	padding: 18px 0 0 0;
}

.filters-card-body .custom-control {
	margin: 0 0 4px 0;
}

.filters-card-body .custom-control label {
	padding: 2px 0 0 0;
	width: 100%;
}

.filters-card-body .custom-control label small {
	float: right;
}

.custom-checkbox label.custom-control-label,
.custom-radio label.custom-control-label {
	cursor: pointer;
}

.filters-card-header a,
.filters-card-header a:hover {
	font-weight: 500;
	width: 100%;
	display: block;
	color: #1f2533;
}

.filters-card-header a i {
	margin: 4px 1px 0px 0px;
}

/* Nav Tabs Design */
.nav.nav-tabs {
	margin-bottom: 1rem;
}

.nav.nav-tabs .nav-link {
	font-weight: 700;
	border-radius: 3px;
	padding: 0 0 1rem 0;
	border: none;
	color: #e2e2e6;
    text-transform: uppercase;
	position: relative;
}

.nav.nav-tabs .nav-item {
	margin: 0 1rem 0px 0;
}

.nav.nav-tabs .nav-link.active {
	color: #f41918;
}

.nav.nav-tabs .nav-link.active:after {
	content: "";
	position: absolute;
	height: 3px;
	background: #f52f18;
	left: 0;
	right: 0;
	bottom: -2px;
}

.artist-list .rounded-circle {
	width: 50px;
	height: 50px;
}

/* Nav Tabs Accordion */
.accordion .btn-link {
	padding: 0;
	text-decoration: none !important;
}

.accordion h2.mb-0 {
	margin: 0px !important;
	display: flex;
}

/* Reviews Card */
.reviews-card .rounded-circle {
	width: 50px;
	height: 50px;
}

.stars-rating {
	font-size: 10px;
}

.stars-rating .fa.active {
	color: #fbc627;
}

/* Mobile Media */
@media (max-width: 992px) {
	.cover-pic {
		margin: 0px 0px 15px 0px;
	}
	.m-b-4 {
		margin-bottom: 1.5rem !important;
	}
	.container {
		max-width: 100%;
	}
	p {
		font-size: 13px;
	}
	.inner-header, .inner-header .text-right {
		text-align: center !important;
	}
	.inner-header .breadcrumbs {
		margin: 6px 0 0 0;
	}
	.btn-circle {
		border-radius: 50px !important;
		width: 32px;
		height: 32px;
		line-height: 32px;
		font-size: 13px;
		padding: 0px;
	}
	.eheader div, .info-header div {
		width: 100%;
		display: block !important;
		text-align: center;
	}
	.eheader div .btn, .info-header div .btn {
		margin: 13px 0 0 0;
	}
	img.img-fluid {
		width: 100%;
	}
}
@media (max-width: 576px) {
}	

.icon-circle {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-slider-item {
	margin: 0 8px;
	outline: none;
	cursor: pointer;
}

.dropdown .dropdown-menu {
	font-size: 0.85rem;
}

.dropdown .dropdown-menu .dropdown-header {
	font-weight: 800;
	font-size: 0.65rem;
	color: #b7b9cc;
}

.dropdown.no-arrow .dropdown-toggle::after {
	display: none;
}

/* Login / Register */
.bg-login-image {
	background: url("../img/login.jpg");
	background-position: center;
	background-size: cover;
}

.bg-register-image {
	background: url("../img/login3.jpg");
	background-position: center;
	background-size: cover;
}

.bg-password-image {
	background: url("../img/login2.jpg");
	background-position: center;
	background-size: cover;
}

form.user .custom-checkbox.small label {
	line-height: 1.5rem;
}

form.user .form-control-user {
	padding: 1.5rem 1rem;
}

form.user .btn-user {
	padding: 0.75rem 1rem;
}

.btn-google {
	color: #fff;
	background-color: #ea4335;
	border-color: #fff;
}

.btn-google:hover {
	color: #fff;
	background-color: #e12717;
	border-color: #e6e6e6;
}

.btn-google:focus,
.btn-google.focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-google.disabled,
.btn-google:disabled {
	color: #fff;
	background-color: #ea4335;
	border-color: #fff;
}

.btn-google:not(:disabled):not(.disabled):active,
.btn-google:not(:disabled):not(.disabled).active,
.show>.btn-google.dropdown-toggle {
	color: #fff;
	background-color: #d62516;
	border-color: #dfdfdf;
}

.btn-google:not(:disabled):not(.disabled):active:focus,
.btn-google:not(:disabled):not(.disabled).active:focus,
.show>.btn-google.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook {
	color: #fff;
	background-color: #3b5998;
	border-color: #fff;
}

.btn-facebook:hover {
	color: #fff;
	background-color: #30497c;
	border-color: #e6e6e6;
}

.btn-facebook:focus,
.btn-facebook.focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook.disabled,
.btn-facebook:disabled {
	color: #fff;
	background-color: #3b5998;
	border-color: #fff;
}

.btn-facebook:not(:disabled):not(.disabled):active,
.btn-facebook:not(:disabled):not(.disabled).active,
.show>.btn-facebook.dropdown-toggle {
	color: #fff;
	background-color: #2d4373;
	border-color: #dfdfdf;
}

.btn-facebook:not(:disabled):not(.disabled):active:focus,
.btn-facebook:not(:disabled):not(.disabled).active:focus,
.show>.btn-facebook.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.error {
	color: #d7d7dc;
	font-size: 11rem;
	position: relative;
	line-height: 1;
}

/* Footer */
.footer h6 {
    color: #a5a5a5;
    font-size: 13px;
    margin: 8px 0 24px 0;
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer ul li a {
    color: #7f7f7f;
    font-size: 12px;
}

.footer ul li {
    line-height: 28px;
}


.slick-slide{
height:auto;
}

@media (min-width: 1500px) {
    .container {
        max-width:90%;
    }
}


.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5 0 16px;
	text-transform: uppercase;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;

    color: #1f2937;
}

.section-title::before {
    content: "";
    width: 5px;
    height: 25px;

    border-radius: 5px;

    background: linear-gradient(
        180deg,
        #ef3858,
        #c9184a
    );
}



.category{
    position:relative;
    display:block;
    height:120px;
    padding:22px 24px;
    border-radius:24px;
    overflow:hidden;
    text-decoration:none !important;
    color:#fff !important;
    transition:.35s ease;
   
	margin:0 8px !important;
}

.category:hover{
    color:#fff !important;
    transform:translateY(-5px);
     box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.category-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
    margin-bottom:12px;
}

.category h3{
    margin:0;
    font-size:28px;
    line-height:1.2;
    font-weight:700;
    color:#fff;
}

.category-link{
    position:absolute;
    left:24px;
    bottom:22px;

    font-size:14px;
    font-weight:600;
    color:#fff;
    opacity:.92;

    transition:.25s;
}

.category-link i{
    margin-left:6px;
    font-size:12px;
    transition:.25s;
}

.category:hover .category-link i{
    transform:translateX(4px);
}

/* vòng tròn mờ */

.category::before{
    content:"";
    position:absolute;

    width:180px;
    height:180px;

    right:-60px;
    bottom:-60px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}

.category::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent 45%
    );
}

.category-slider .slick-list{
    padding-top:10px;
    margin-top:-10px;
}


/* màu */

.blue{
    background:linear-gradient(135deg,#3558d7,#4f67dd);
}

.orange{
    background:linear-gradient(135deg,#d48660,#e19d75);
}

.green{
    background:linear-gradient(135deg,#18a56f,#38ba87);
}

.red{
    background:linear-gradient(135deg,#c43f3f,#d95f5f);
}

.purple{
    background:linear-gradient(135deg,#7764d8,#9783e7);
}

.yellow{
    background:linear-gradient(135deg,#efaa21,#f8bf45);
}

.dark{
    background:linear-gradient(135deg,#3b3f4f,#555a6b);
}

.cyan{
    background:linear-gradient(135deg,#06b6d4,#38bdf8);
}

/* Teal */
.teal{
    background:linear-gradient(135deg,#0f766e,#14b8a6);
}

/* Indigo */
.indigo{
    background:linear-gradient(135deg,#4338ca,#6366f1);
}

/* Hồng */
.pink{
    background:linear-gradient(135deg,#db2777,#ec4899);
}

/* Rose */
.rose{
    background:linear-gradient(135deg,#e11d48,#fb7185);
}

/* Đỏ cam */
.crimson{
    background:linear-gradient(135deg,#dc2626,#f87171);
}

/* Lime */
.lime{
    background:linear-gradient(135deg,#65a30d,#84cc16);
}

/* Emerald */
.emerald{
    background:linear-gradient(135deg,#059669,#34d399);
}

/* Ocean */
.ocean{
    background:linear-gradient(135deg,#0369a1,#0ea5e9);
}

/* Navy */
.navy{
    background:linear-gradient(135deg,#1e3a8a,#3b82f6);
}

/* Chocolate */
.brown{
    background:linear-gradient(135deg,#8b5e3c,#b07d52);
}

/* Gold */
.gold{
    background:linear-gradient(135deg,#c98a00,#f5c242);
}

/* Violet */
.violet{
    background:linear-gradient(135deg,#6d28d9,#a855f7);
}

/* Mint */
.mint{
    background:linear-gradient(135deg,#10b981,#6ee7b7);
}

/* Slate */
.slate{
    background:linear-gradient(135deg,#334155,#64748b);
}


/* Tablet */
@media (max-width: 991px){

    .category{
        height:105px;
        padding:18px;
        border-radius:18px;
    }

    .category-label{
        font-size:10px;
        margin-bottom:8px;
        letter-spacing:1px;
    }

    .category h3{
        font-size:22px;
    }

    .category-link{
        left:18px;
        bottom:18px;
        font-size:13px;
    }

    .category::before{
        width:150px;
        height:150px;
    }

}

/* Mobile */
@media (max-width: 576px){

    .category{
        height:100px;
        padding:16px;
        border-radius:16px;
    }

    .category-label{
        font-size:9px;
        margin-bottom:6px;
    }

    .category h3{
        font-size:18px;
        line-height:1.2;
    }

    .category-link{
        left:16px;
        bottom:16px;
        font-size:12px;
    }

    .category-link i{
        font-size:10px;
    }

    .category::before{
        width:120px;
        height:120px;
        right:-35px;
        bottom:-35px;
    }

    .category-slider .slick-prev,
    .category-slider .slick-next{
        width:34px;
        height:34px;
    }

    .category-slider .slick-prev:before,
    .category-slider .slick-next:before{
        font-size:14px;
    }

}


/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb-box {
    padding: 10px 0;
}

.breadcrumb {
    background: transparent;

    padding: 0;
    margin: 0;

    font-size: 13px;
}

.breadcrumb-item {
    color: #777;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #aaa;

    content: "/";
}

.breadcrumb a {
    color: #666;

    text-decoration: none;
}

.breadcrumb a:hover {
    color: #222;
}

.breadcrumb-item.active {
    color: #444;
}


/* ========================================
   COMMON CARD
======================================== */

.movie-detail-card,
.episode-info {
    background: #1d1e24;

    border-radius: 10px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .04);
}


/* ========================================
   MOVIE DETAIL
======================================== */

.movie-detail-card {
    margin-bottom: 0;
}

.movie-detail-card .card-body {
    padding: 28px;
}


/* Poster */

.movie-detail-poster {
    width: 100%;
}

.movie-detail-poster img {
    width: 100%;
    max-width: 375px;

    aspect-ratio: 2 / 3;

    display: block;

    object-fit: cover;

    border-radius: 9px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .15);
	
}


/* Movie content */

.movie-detail-content {
    height: 100%;

    padding: 4px 0;

    display: flex;

    flex-direction: column;
}

.movie-detail-title {
    margin: 0 0 12px;

    color: #222;

    font-size: 22px;

    line-height: 1.4;

    font-weight: 600;
}

.movie-episode-count {
    margin-bottom: 16px;

    color: #777;

    font-size: 13px;
}

.movie-detail-description {
    max-width: 1000px;

    color: #777;

    font-size: 14px;

    line-height: 1.75;
}


/* Tags */

.movie-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;
}

.tag {
    display: inline-block;

    padding: 6px 11px;

    background: #e7e7e7;

    border-radius: 20px;

    color: #777;

    font-size: 12px;
}


/* Movie actions */

.movie-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: auto;

    padding-top: 30px;
}


/* Play */

.btn-play {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 21px;

    background:
        linear-gradient(
            90deg,
            #f0005a,
            #ff7525
        );

    border-radius: 7px;

    color: #fff !important;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none !important;

    transition: .2s;
}

.btn-play:hover {
    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(240, 0, 90, .25);
}




/* ========================================
   MOVIE EPISODES
======================================== */

.movie-episodes {
    margin-top: 28px;
}

.episode-heading {
    display: flex;

    align-items: baseline;

    gap: 8px;

    margin-bottom: 14px;
}

.episode-heading h2 {
    margin: 0;

    color: #222;

    font-size: 21px;

    font-weight: 500;
}

.episode-heading span {
    color: #777;

    font-size: 12px;
}


/* Episode list */

.episode-list {
    margin-left: -5px;
    margin-right: -5px;
}

.episode-list > div {
    padding-left: 5px;
    padding-right: 5px;

    margin-bottom: 10px;
}


/* Episode button */

.episode-btn {
    width: 100%;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #1d1e24;

    border: 1px solid #d8d8d8;

    border-radius: 7px;

    color: #555 !important;

    font-size: 13px;

    text-decoration: none !important;

    transition: .2s;
}

.episode-btn:hover {
    background: #ef3858;

    border-color: #ef3858;

    color: #fff !important;
}


/* ========================================
   EPISODE PAGE
======================================== */

.episode-layout {
    margin-left: -8px;
    margin-right: -8px;
}

.episode-layout > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}


/* Player */

.episode-player-box {
    width: 100%;

    height: calc(100vh - 78px);

    min-height: 600px;

    background: #bcbcbc;

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;
}

.episode-player {
    height: 100%;

    width: auto;

    aspect-ratio: 720 / 1280;

    background: #303030;

    position: relative;
}

.episode-player video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #303030;
}


/* ========================================
   EPISODE INFO
======================================== */

.episode-info {
    height: calc(100vh - 78px);

    padding: 25px;

    overflow-y: auto;
}


/* Episode movie header */

.episode-movie-header {
    margin-left: -8px;
    margin-right: -8px;
}

.episode-movie-header > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}


/* Poster */

.episode-poster {
    width: 100%;

    aspect-ratio: 2 / 3;

    object-fit: cover;

    display: block;

    border-radius: 9px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .12);
}


/* Episode title */

.episode-title {
    margin: 4px 0 14px;

    color: #222;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 600;
}


/* Stats */

.episode-stats {
    display: flex;

    gap: 16px;

    margin-bottom: 13px;

    color: #888;

    font-size: 13px;
}


/* Episode tags */

.episode-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}

.episode-tags .tag {
    padding: 5px 8px;

    font-size: 11px;
}


/* Description */

.episode-description {
    margin-top: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid #ddd;
}

.episode-description h2 {
    margin: 0 0 9px;

    color: #333;

    font-size: 16px;

    font-weight: 600;
}

.episode-description p {
    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.7;
}


/* ========================================
   EPISODE SELECT
======================================== */

.episode-select {
    margin-top: 18px;
}


/* Header */

.episode-select-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #ddd;

    margin-bottom: 12px;
}

.episode-tabs {
    display: flex;
}

.episode-tab {
    padding: 9px 13px;

    border: 0;

    border-bottom: 2px solid transparent;

    background: transparent;

    color: #888;

    font-size: 13px;

    cursor: pointer;
}

.episode-tab:hover {
    color: #555;
}

.episode-tab.active {
    color: #ef3858;

    border-bottom-color: #ef3858;
}

.all-episodes {
    color: #888;

    font-size: 12px;

    text-decoration: none;
}

.all-episodes:hover {
    color: #ef3858;

    text-decoration: none;
}


/* Episode buttons */

.episode-buttons {
    margin-left: -4px;
    margin-right: -4px;
}

.episode-buttons > div {
    padding-left: 4px;
    padding-right: 4px;

    margin-bottom: 8px;
}

.episode-number {
    width: 100%;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    background: #e5e5e5;

    border: 1px solid #d8d8d8;

    border-radius: 7px;

    color: #555 !important;

    font-size: 13px;

    text-decoration: none !important;

    transition: .2s;
}

.episode-number:hover {
    background: #dcdcdc;
}

.episode-number.active {
    background: #ef3858;

    border-color: #ef3858;

    color: #fff !important;
}


/* ========================================
   SCROLLBAR
======================================== */

.episode-info::-webkit-scrollbar {
    width: 5px;
}

.episode-info::-webkit-scrollbar-track {
    background: transparent;
}

.episode-info::-webkit-scrollbar-thumb {
    background: #ccc;

    border-radius: 10px;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 991.98px) {

    /* Movie */

    .movie-detail-card .card-body {
        padding: 22px;
    }

    .movie-detail-poster img {
        max-width: 240px;

        margin: 0 auto;
    }


    /* Episode */

    .episode-player-box {
        height: auto;

        min-height: 0;

        aspect-ratio: 720 / 1280;
    }

    .episode-player {
        width: 100%;

        height: 100%;
    }

    .episode-info {
        height: auto;

        margin-top: 12px;

        overflow: visible;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767.98px) {

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


    /* Breadcrumb */

    .breadcrumb-box {
        padding: 9px 0;

        font-size: 12px;
    }


    /* Movie detail */

    .movie-detail-card .card-body {
        padding: 16px;
    }

    .movie-detail-poster {
        text-align: center;

        margin-bottom: 20px;
    }

    .movie-detail-poster img {
        width: 160px;

        max-width: 160px;
    }

    .movie-detail-title {
        font-size: 20px;
    }

    .movie-detail-description {
        font-size: 13px;

        line-height: 1.7;
    }


    /* Actions */

    .movie-actions {
        gap: 15px;

        margin-top: 22px;

        padding-top: 0;
    }


    /* Episode */

    .episode-info {
        padding: 18px;
    }

    .episode-title {
        font-size: 16px;
    }

    .episode-description p {
        font-size: 12px;
    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 575.98px) {

    .movie-detail-card .card-body {
        padding: 14px;
    }


    .movie-detail-poster img {
        width: 145px;

        max-width: 145px;
    }


    .movie-detail-title {
        font-size: 18px;
    }


    .movie-detail-description {
        font-size: 12px;
    }


    .movie-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    .episode-info {
        padding: 15px;
    }


    .episode-poster {
        border-radius: 7px;
    }


    .episode-title {
        font-size: 15px;
    }


    .episode-stats {
        font-size: 11px;

        gap: 10px;
    }


    .episode-number {
        height: 40px;

        font-size: 12px;
    }

}


/* Kết quả tìm kiếm */
.search-result {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 9999;

    background: #1d1e24;
    border-radius: 6px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}


/* Item - giữ style cũ, thêm flex để chứa poster */
.search-item {
    display: flex;
    align-items: center;

    padding: 8px 14px;

    color: #333;
    text-decoration: none;

    border-bottom: 1px solid #292a30;

    transition: .2s;
}

.search-item:hover {
    background: #f8f8f8;
}


/* Poster */
.search-poster {
    width: 40px;
    height: 55px;

    flex: 0 0 40px;

    margin-right: 10px;

    overflow: hidden;
    border-radius: 4px;

    background: #eee;
}

.search-poster img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* Phần tên + năm */
.search-content {
    flex: 1;
    min-width: 0;
}

.search-name {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-info {
    margin-top: 4px;

    font-size: 12px;
    color: #ef3858;
}


/* Không tìm thấy */
.search-empty {
    padding: 12px 14px;
    color: #999;
}


.pagination {
    justify-content: center;
    margin: 20px 0;
    gap: 8px;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    width: 38px;
    height: 38px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #8b8d96;
    background: #1d1e25;
    border: none !important;
    border-radius: 10px !important;

    font-size: 14px;
    line-height: 1;
}

/* Trang đang chọn */
.pagination .page-item.active .page-link {
    color: #fff;
    background: #ff0557;
    border: none;
}

/* Hover */
.pagination .page-link:hover {
    color: #fff;
    background: #292a32;
    border: none;
}

/* Nút Tiếp */
.pagination .page-item:last-child .page-link {
    padding-left: 15px;
    padding-right: 15px;
}

/* Bỏ hiệu ứng focus mặc định Bootstrap */
.pagination .page-link:focus {
    box-shadow: none;
    outline: none;
}





.movie-actions {
    margin-top: 15px;
    padding: 14px 0 0;

    border-top: 1px solid #575757;
}


/* Tiêu đề */
.movie-actions-title {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #555;
}

.movie-actions-title i {
    color: #ef3858;
    font-size: 14px;
}


/* Danh sách nút */
.movie-actions-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* Button */
.movie-action {
    min-width: 105px;
    height: 45px;

    padding: 5px 11px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid #eee;
    border-radius: 6px;

    background: #1d1e24;

    text-decoration: none;

    cursor: pointer;

    font-family: 'Be Vietnam Pro', sans-serif;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .2s ease,
        box-shadow .3s ease;
}


/* Icon */
.movie-action .action-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;

    font-size: 13px;

    transition: .3s ease;
}


/* Text */
.movie-action .action-text {
    display: flex;
    flex-direction: column;

    text-align: left;

    line-height: 1.2;
}

.movie-action .action-text strong {
    font-size: 12px;
    font-weight: 600;
}

.movie-action .action-text small {
    margin-top: 2px;

    font-size: 10px;

    color: #999;
}


/* =========================
   FACEBOOK
========================= */

.movie-action.facebook {
    color: #1877f2;
}

.movie-action.facebook .action-icon {
    background: #eaf2ff;
    color: #1877f2;
}

.movie-action.facebook:hover {
    border-color: #1877f2;
    background: #f7faff;
}


/* =========================
   COPY LINK
========================= */

.movie-action.copy {
    color: #555;
}

.movie-action.copy .action-icon {
    background: #24252c;
    color: #666;
}

.movie-action.copy:hover {
    border-color: #aaa;
    background: #282930;
}


/* =========================
   DOWNLOAD
========================= */

.movie-action.download {
    color: #ef3858;
}

.movie-action.download .action-icon {
    background: #fff0f3;
    color: #ef3858;
}

.movie-action.download:hover {
    border-color: #ef3858;
    background: #fff8f9;
}


/* =========================
   EMBED
========================= */

.movie-action.embed {
    color: #555;
}

.movie-action.embed .action-icon {
    background: #24252c;
    color: #555;
}

.movie-action.embed:hover {
    border-color: #777;
    background: #282930;
}


/* Hiệu ứng hover */
.movie-action:hover {
    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}


/* Click */
.movie-action:active {
    transform: translateY(0);
}

/* =========================================================
   DARK MODE OVERRIDE - CACH 1
   Giu nguyen CSS hien tai, chi ghi de mau sac
   ========================================================= */
body {
    background-color: #111218 !important;
    color: #e6e6e6;
}

a { color: #e6e6e6; }

.card,
.movie-detail-card,
.episode-info,
.p-card,
.e-card,
.offer-card {
    background-color: #1d1e24 !important;
    color: #e6e6e6;
    border-color: #2b2c33 !important;
}

.movie-detail-title,
.episode-title,
.episode-heading h2,
.section-title {
    color: #fff !important;
}

.movie-detail-description,
.episode-description p,
.movie-episode-count,
.episode-stats,
.share,
.breadcrumb-item,
.breadcrumb a,
.p-card p.card-text,
.p-card p.card-text small {
    color: #a8a8b0 !important;
}

.tag {
    background: #2a2b32 !important;
    color: #bfc0c7 !important;
}

.episode-btn,
.episode-number {
    background: #24252c !important;
    border-color: #35363e !important;
    color: #d4d4d8 !important;
}

.episode-btn:hover,
.episode-number:hover,
.episode-number.active {
    background: #ef3858 !important;
    border-color: #ef3858 !important;
    color: #fff !important;
}

.episode-description,
.episode-select-header {
    border-color: #34353d !important;
}

.episode-tab { color: #999 !important; }
.episode-tab:hover,
.episode-tab.active { color: #ef3858 !important; }



.dropdown-menu {
    background: #1d1e24 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.45) !important;
}
.dropdown-menu .dropdown-item { color: #ddd; }

.filters-card-header a { color: #ddd !important; }

.footer { background: #0d0e12; }
.footer h6 { color: #ccc; }
.footer ul li a { color: #888; }

.episode-player-box { background: #0b0c10 !important; }
.episode-player,
.episode-player video { background: #050506 !important; }

.episode-info::-webkit-scrollbar-thumb { background: #444; }
.episode-info::-webkit-scrollbar-track { background: #15161b; }

.section-more {
	color: #fff;
    background: #2c2c2c;
    border-radius: 137.5px;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
	}
.section-more:hover {
	color: #fff !important; 
	background: #373737;
	}
.section-more i{
	margin-right:5px;
	 transition: transform 0.5s ease;
}
.section-more:hover i{
	 transform: translateX(5px);
}



/* Bootstrap gray helpers trong trang */
.bg-gray-100 { background-color: #16171d !important; }
.bg-gray-200 { background-color: #1d1e24 !important; }
.bg-gray-300 { background-color: #27282f !important; }
.bg-gray-400 { background-color: #35363e !important; }
.bg-gray-500 { background-color: #4b4c55 !important; }
.bg-gray-600 { background-color: #62636d !important; }
.bg-gray-700 { background-color: #3c3d46 !important; }
.bg-gray-800 { background-color: #292a32 !important; }
.bg-gray-900 { background-color: #1d1e24 !important; }

.text-gray-100 { color: #f5f5f5 !important; }
.text-gray-200 { color: #e5e5e7 !important; }
.text-gray-300 { color: #c9c9ce !important; }
.text-gray-400 { color: #a8a8b0 !important; }
.text-gray-500 { color: #8d8e97 !important; }
.text-gray-600 { color: #777982 !important; }
.text-gray-700 { color: #a1a1aa !important; }
.text-gray-800 { color: #d4d4d8 !important; }
.text-gray-900 { color: #f1f1f1 !important; }



/* =========================================================
   MAIN NAV - CLEAN
   Bootstrap 4 / desktop + tablet + mobile
========================================================= */
.main-nav {
    width: 100%;
    height: 82px;
    position: relative;
    z-index: 9999;
    background: #101114;
    border: 0 !important;
    box-shadow: none !important;
}

.main-nav .container {
    height: 100%;
}

.main-nav .nav-row {
    height: 100%;
    margin-left: 0;
    margin-right: 0;
}

.nav-logo-col,
.nav-center-col,
.nav-right-col {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-logo-col {
    justify-content: flex-start;
    padding-left: 0;
}

.nav-center-col {
    justify-content: center;
    min-width: 0;
}

.nav-right-col {
    justify-content: flex-end;
    padding-right: 0;
}

.nav-logo {
    display: block;
    width: 180px;
    height: 50px;
    

    text-decoration: none !important;
}

.nav-logo img {
    display: block;
    width: 180px;
    height: 50px;
    max-width: none;
}

.nav-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* SEARCH */
.nav-search {
    width: 280px;
    flex: 0 1 280px;
    min-width: 0;
    position: relative;
    border: 0 !important;
    box-shadow: none !important;
}

.nav-search::before,
.nav-search::after,
.nav-search .search-box::before,
.nav-search .search-box::after {
    display: none !important;
    content: none !important;
}

.nav-search .search-box {
    width: 100%;
    height: 42px;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.nav-search .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #9698a1;
    font-size: 14px;
    pointer-events: none;
}

.nav-search .movie-search {
    width: 100%;
    height: 42px;
    display: block;
    margin: 0;
    padding: 0 15px 0 42px;
    border: 1px solid #303139 !important;
    border-radius: 22px !important;
    outline: none !important;
    background: #1e1f25 !important;
    color: #fff !important;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    box-shadow: none !important;
    appearance: none;
}

.nav-search .movie-search::placeholder {
    color: #85868e;
}

.nav-search .movie-search:hover,
.nav-search .movie-search:focus {
    background: #222329 !important;
    border-color: #454650 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* SEARCH RESULT */
.nav-search .search-result {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100000;
    background: #1c1d22 !important;
    border: 1px solid #303139 !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,.45) !important;
}

.nav-search .search-result a {
    color: #ddd !important;
}

.nav-search .search-result a:hover {
    color: #fff !important;
    background: #292a30 !important;
}

/* DESKTOP MENU */
.nav-menu {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 3px 6px;
    flex: 0 0 auto;
    background: #292a2e;
    border-radius: 23px;
}

.nav-menu .nav-item {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #aaa !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 19px;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease;
}

.nav-menu .nav-item:hover {
    color: #fff !important;
}

.nav-menu .nav-item.active {
    color: #ff5722 !important;
}

.nav-menu .nav-item.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 22px;
    height: 3px;
    transform: translateX(-50%);
    background: #ff5722;
    border-radius: 3px;
}

/* RIGHT */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.nav-tele,
.nav-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.nav-tele {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3390ec;
    border: 1px solid #404040;
    color: #fff !important;
    font-size: 17px;
	font-weight:700;
    line-height: 1;
    text-decoration: none !important;
}

.nav-tele:hover {
	 border: 1px solid #68696a;
  
}

.nav-toggle {
    display: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50% !important;
    outline: none !important;
    background: #292a30 !important;
    color: #ddd !important;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    appearance: none;
}

.nav-toggle:hover {
    background: #34353a !important;
    color: #fff !important;
}

.nav-toggle:focus,
.nav-toggle:active {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* TABLET + MOBILE */
@media (max-width: 991.98px) {
    .main-nav {
        height: 76px;
    }

    .main-nav .container {
        max-width: 100%;
    }
	
    .nav-center {
        justify-content: flex-start;
        gap: 0;
    }

    .nav-search {
        width: 100%;
        flex: 1 1 auto;
    }

    .nav-search .movie-search {
        height: 40px;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-toggle {
        display: flex;
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .nav-tele {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    /* Menu mở bằng JS: $('#mainMenu').toggleClass('show') */
     .main-nav {
        height: 64px !important;
        min-height: 64px !important;

        position: relative;
        z-index: 99999;

        border: 0 !important;
        box-shadow: none !important;
    }


    /* Menu desktop ẩn */
			.main-nav .nav-menu {
        display: none !important;
    }


    /* =====================================================
       MENU KHI MỞ
    ===================================================== */

    .main-nav .nav-menu.show {
        position: fixed !important;
        top: 0px !important;
        left: 0 !important;
        width: 100vw !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 0 !important;

        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        box-sizing: border-box !important;

        background: #111216 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: 0 12px 30px rgba(0,0,0,.5) !important;

        transform: none !important;

        z-index: 999999 !important;

        overflow: visible !important;
    }


    /* =====================================================
       TỪNG MENU ITEM
    ===================================================== */

    .main-nav .nav-menu.show .nav-item {
        position: relative !important;

        width: 100% !important;
        height: 45px !important;
        min-height: 45px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        color: #aaa !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 45px !important;

        white-space: nowrap !important;

        text-decoration: none !important;
    }


    /* Hover */

    .main-nav .nav-menu.show .nav-item:hover {
        background: #24252b !important;
        color: #fff !important;
    }


    /* Active */

    .main-nav .nav-menu.show .nav-item.active {
        background: #21151a !important;
        color: #ff5722 !important;
    }


    /* Không có gạch cam mobile */

    .main-nav .nav-menu.show .nav-item.active::after {
        display: none !important;
        content: none !important;
    }
}

/* MOBILE */
@media (max-width: 767.98px) {
    .main-nav {
        height: 70px;
    }

    .main-nav .container {
        padding-left: 8px;
        padding-right: 8px;
    }
	 
    

    .nav-search .movie-search {
        height: 38px;
        padding-left: 38px;
        padding-right: 10px;
        font-size: 12px;
    }

    .nav-search .search-icon {
        left: 13px;
    }

    .nav-tele,
    .nav-toggle {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .nav-right {
        gap: 5px;
    }

    .main-nav .nav-menu.show {
        top: 70px !important;
    }
}

/* SMALL MOBILE */
@media (max-width: 400px) {
	
	
  

    .nav-search .movie-search {
        font-size: 11px;
    }

    .nav-tele,
    .nav-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

.main-nav .search-result:empty {
    display: none !important;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    gap: 7px;
}

.nav-dropdown-toggle i {
    font-size: 10px;
    transition: transform .2s ease;
}


/* MENU CON */

.nav-submenu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: 180px;

    padding: 6px;

    transform: translateX(-50%);

    background: #1d1e24;

    border: 1px solid #303139;
    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(0,0,0,.45);

    display: none;

    z-index: 999999;
}


/* Hover desktop */

.nav-dropdown:hover .nav-submenu {
    display: block;
}

.nav-dropdown:hover
.nav-dropdown-toggle i {
    transform: rotate(180deg);
}


/* ITEM MENU CON */

.nav-submenu a {
    display: flex;

    align-items: center;

    width: 100%;
    height: 38px;

    padding: 0 12px;

    color: #aaa !important;

    font-size: 13px;

    text-decoration: none !important;

    border-radius: 6px;

    transition: .2s;
}

.nav-submenu a:hover {
    background: #292a30;

    color: #fff !important;
}