@charset "utf-8";

.all{background:#f4f6f8;color:#4a5568;}

.text{color:#4a5568;}
.text:hover{color:#667eea;}
.text-accent{color:#667eea;}
.text-sub{color:#94a3b8;}

.form-control{background:#f8fafc;color:#94a3b8;border:1px solid #e2e8f0;}
.form-control.colorfff{background:#fff;}
.form-control:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}

.btn,.btn:hover,.btn .icon{color:#4a5568;}
.btn{border:1px solid #e2e8f0;}
.btn-default{background:#f8fafc;color:#4a5568;}
.btn-default:hover{background:#f1f5f9;}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #667eea;color:#fff;}
.btn-primary .icon{color:#fff;}
.btn-primary:hover{background:linear-gradient(135deg,#5a6fd6,#6a4190);border:1px solid #5a6fd6;color:#fff;}
.btn-primary:hover .icon{color:#fff;}

.dropdown-menu{background:#fff;border:1px solid #e2e8f0;}
.dropdown-menu:before{background:#fff;border-color:#e2e8f0;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{background:#667eea;color:#fff;}

.split-line{background:#e2e8f0;}
.top-line:before{border-top:1px solid #e2e8f0;}
.bottom-line:after{border-bottom:1px solid #e2e8f0;}
.top-line-dot:before{border-top:1px dotted #e2e8f0;}
.bottom-line-dot:before{border-bottom:1px dotted #e2e8f0;}

.badge{background:#f1f5f9;}
.badge-first{background:#ef4444;color:#fff;}
.badge-second{background:#f97316;color:#fff;}
.badge-third{background:#eab308;color:#fff;}

.nav-head>li.active>a,.nav-tabs>li.active>a{border-bottom:2px solid #667eea;color:#667eea;}
.nav-tag>li>a,.nav-page>li>a{background:#fff;border:1px solid #e2e8f0;color:#4a5568;}
.nav-tag>li>a:hover,.nav-tag>li.active a,.nav-page>li>a:hover,.nav-page>li.active>a{background:#667eea;border:1px solid #667eea;color:#fff;}
.nav-page>li>a:hover>.icon{color:#fff;}

.tag-btn li a{background:#f4f6f8;color:#94a3b8;}
.tag-btn li a:hover,.tag li.active a{background:#667eea;color:#fff;}
.tag-type li a{background:#fff;border:1px solid #e2e8f0;color:#94a3b8;}
.tag-type li a:hover,.tag-type li.active a{background:#667eea;border:1px solid #667eea;color:#fff;}
.tag-btn li a.active,.tag-text li a.active,.tag-type li a.active{color:#667eea;}

.pic-tag{background:rgba(0,0,0,0.6);color:#fff;}
.pic-tag.active,.pic-tag-h{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}
.pic-text{background-repeat:no-repeat;background-image:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;}
.pic-text.active{background:rgba(0,0,0,0.6);color:#fff;}

.stui-pannel-bg{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05);}

.stui_nav__taddar .item .icon,.stui_nav__taddar .item .title{color:#94a3b8;}
.stui_nav__taddar .item.active .title,.stui_nav__taddar .item.active .icon{color:#667eea;}
.stui_nav__taddar.fixed{background:#fff;}

.stui-vodlist__bg{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:all 0.3s ease;}
.stui-vodlist__bg:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);transform:translateY(-2px);}

.stui-link__pic li a{background:#fff;border:1px solid #f8fafc;}
.stui-link__pic li a:hover{border:1px solid #667eea;}

.popup{background:#f4f6f8;}
.popup-head{background:#fff;}

.autocomplete-suggestions{background:#fff;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.autocomplete-suggestion{border-top:1px solid #e2e8f0;}

@media (max-width:767px){
	.form-control{background:#f4f6f8;color:#94a3b8;border:0;}
	.stui-pannel-bg,.stui-vodlist__bg,.stui-vodlist__bg:hover{box-shadow:none;}
	.m-top-line:before{border-top:1px solid #e2e8f0;}
	.m-bottom-line:after{border-bottom:1px solid #e2e8f0;}
	.m-top-line-dot:before{border-top:1px dotted #e2e8f0;}
	.m-bottom-line-dot:before{border-bottom:1px dotted #e2e8f0;}
}

.main-nav-wrapper{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px rgba(102,126,234,0.2);}

.main-menu-list li a{color:#e0e7ff;}
.main-menu-list li.active a{background:rgba(255,255,255,0.2);color:#fff;border-radius:4px;}

.search-box-wrapper .submit .icon{color:#e0e7ff;}
.search-box-wrapper .form-control{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);color:#fff;}
.search-box-wrapper .form-control::placeholder{color:#e0e7ff;}

.user-nav-list li a,.user-nav-list li a .icon{color:#e0e7ff;}

.stui-screen__list li a{color:#4a5568;}
.stui-screen__list li.active a{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}

.stui-content__playlist li a{border:1px solid #e2e8f0;}
.stui-content__playlist li a:hover,.stui-content__playlist li.active a{border:1px solid #667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}

.stui-player__video{background:#0f172a;}

.stui-page li a,.stui-page li .num{background:#fff;border:1px solid #e2e8f0;}
.stui-page li a:hover,.stui-page li.active a,.stui-page li.active .num{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #667eea;}

.stui-extra li a,.stui-extra li span{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.stui-extra li a.backtop{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}
.stui-extra li .sideslip{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.stui-extra li .sideslip:before{background:#fff;border-color:rgba(0,0,0,0.1);}

@media (max-width:1024px){
	.main-menu-list:before{border-top:1px solid rgba(255,255,255,0.2);}
	.main-menu-list li.active a{background:none;color:#e0e7ff;}
	.main-menu-list li.active a:before{background:linear-gradient(135deg,#667eea,#764ba2);}
}

@media (max-width:767px){
	.stui-screen__list li.active a{background:none;color:#667eea;}
}

a.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}

.star-rating{display:inline-flex;align-items:center;gap:4px;}
.star-rating .star{font-size:20px;color:#cbd5e1;cursor:pointer;transition:all 0.2s ease;}
.star-rating .star:hover,.star-rating .star.active{color:#fbbf24;transform:scale(1.1);}
.star-rating .star:active{transform:scale(0.95);}
.rating-number{margin-left:10px;font-weight:600;color:#667eea;}

.interaction-actions{display:flex;align-items:center;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid #e2e8f0;}
.action-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;background:#f8fafc;border:1px solid #e2e8f0;color:#4a5568;cursor:pointer;transition:all 0.3s ease;}
.action-btn:hover{background:#f1f5f9;transform:translateY(-2px);}
.action-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;}
.action-btn .icon{font-size:18px;}
.action-btn .count{font-weight:500;}

.stui-vodlist__thumb img{opacity:0;transition:opacity 0.3s ease;object-fit:cover;}
.stui-vodlist__thumb img.lazy-loaded{opacity:1;}
.stui-vodlist__thumb{background:url(../images/load.gif) no-repeat 50% 50%;background-color:#f1f5f9;border-radius:8px;overflow:hidden;}
.stui-vodlist__box .stui-vodlist__thumb{padding-top:140%;width:100%;position:relative;}
.stui-vodlist__box .stui-vodlist__thumb img{position:absolute;top:0;left:0;width:100%;height:100%;}
.video-card-box{width:100%;padding:0 10px;box-sizing:border-box;}
@media(max-width:767px){
    .video-card-box{padding:0 5px;}
}

.hy-details-qrcode{padding:20px;text-align:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:12px;margin:15px 0;}
.hy-details-qrcode .item{padding:10px;}
.hy-details-qrcode h5.text-muted{margin:0 0 10px;font-size:14px;color:#94a3b8;}
.hy-details-qrcode p{margin:0 0 5px;color:#4a5568;}
.hy-details-qrcode img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.video-grid-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.video-card-box {
    padding: 0 10px;
}
.video-poster-thumb {
    border-radius: 8px;
    overflow: hidden;
}
.play-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../images/play.png) no-repeat center;
    background-size: 60px 60px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-poster-thumb:hover .play-icon {
    opacity: 1;
}
.episode-info {
    background: linear-gradient(135deg,#667eea,#764ba2);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.friend-link-section {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}
.video-grid-list{display:flex;flex-wrap:wrap;margin:0 -10px;}
.video-grid-list li{float:none;display:block;}
@media(max-width:767px){
    .video-grid-list{margin:0 -5px;}
}