@charset "utf-8";
.all{background:#f8fafc;color:#334155;}
.text{color:#334155;}
.text:hover{color:#06b4c8;}
.text-accent{color:#06b4c8;}
.text-sub{color:#64748b;}
.form-control{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;}
.form-control.colorfff{background:#fff;}
.form-control:focus{border-color:#06b4c8;box-shadow:0 0 0 3px rgba(6,180,200,0.08);}
.btn,.btn:hover,.btn .icon{color:#334155;}
.btn{border:1px solid #e2e8f0;}
.btn-default{background:#f1f5f9;color:#334155;}
.btn-default:hover{background:#e2e8f0;}
.btn-primary{background:linear-gradient(135deg,#0891b2,#06b4c8);border:1px solid #0891b2;color:#fff;}
.btn-primary .icon{color:#fff;}
.btn-primary:hover{background:linear-gradient(135deg,#0e7490,#0891b2);border:1px solid #0e7490;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:#06b4c8;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 #06b4c8;color:#06b4c8;}
.nav-tag>li>a,.nav-page>li>a{background:#fff;border:1px solid #e2e8f0;color:#334155;}
.nav-tag>li>a:hover,.nav-tag>li.active a,.nav-page>li>a:hover,.nav-page>li.active>a{background:#06b4c8;border:1px solid #06b4c8;color:#fff;}
.nav-page>li>a:hover>.icon{color:#fff;}
.tag-btn li a{background:#f1f5f9;color:#64748b;}
.tag-btn li a:hover,.tag li.active a{background:#06b4c8;color:#fff;}
.tag-type li a{background:#fff;border:1px solid #e2e8f0;color:#64748b;}
.tag-type li a:hover,.tag-type li.active a{background:#06b4c8;border:1px solid #06b4c8;color:#fff;}
.tag-btn li a.active,.tag-text li a.active,.tag-type li a.active{color:#06b4c8;}
.pic-tag{background:rgba(0,0,0,0.6);color:#fff;}
.pic-tag.active,.pic-tag-h{background:linear-gradient(135deg,#0891b2,#06b4c8);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 2px 8px rgba(0,0,0,0.04);}
.stui_nav__taddar .item .icon,.stui_nav__taddar .item .title{color:#64748b;}
.stui_nav__taddar .item.active .title,.stui_nav__taddar .item.active .icon{color:#06b4c8;}
.stui_nav__taddar.fixed{background:#fff;}
.stui-vodlist__bg{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s ease;}
.stui-vodlist__bg:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-3px);}
.stui-link__pic li a{background:#fff;border:1px solid #f1f5f9;}
.stui-link__pic li a:hover{border:1px solid #06b4c8;}
.popup{background:#f1f5f9;}
.popup-head{background:#fff;}
.autocomplete-suggestions{background:#fff;border:1px solid #e2e8f0;box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.autocomplete-suggestion{border-top:1px solid #e2e8f0;}
@media (max-width:767px){
	.form-control{background:#f1f5f9;color:#64748b;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,#0891b2,#06b4c8);box-shadow:0 4px 12px rgba(6,180,200,0.15);}
.main-menu-list li a{color:#e0f7fa;}
.main-menu-list li.active a{background:rgba(255,255,255,0.2);color:#fff;border-radius:6px;}
.search-box-wrapper .submit .icon{color:#e0f7fa;}
.search-box-wrapper .form-control{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#fff;}
.search-box-wrapper .form-control::placeholder{color:#e0f7fa;}
.user-nav-list li a,.user-nav-list li a .icon{color:#e0f7fa;}
.stui-screen__list li a{color:#334155;}
.stui-screen__list li.active a{background:linear-gradient(135deg,#0891b2,#06b4c8);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 #06b4c8;background:linear-gradient(135deg,#0891b2,#06b4c8);color:#fff;}
.stui-player__video{background:#0c4a6e;}
.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,#0891b2,#06b4c8);color:#fff;border:1px solid #0891b2;}
.stui-extra li a,.stui-extra li span{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.stui-extra li a.backtop{background:linear-gradient(135deg,#0891b2,#06b4c8);color:#fff;}
.stui-extra li .sideslip{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.stui-extra li .sideslip:before{background:#fff;border-color:rgba(0,0,0,0.06);}
@media (max-width:1024px){
	.main-menu-list:before{border-top:1px solid rgba(255,255,255,0.15);}
	.main-menu-list li.active a{background:none;color:#e0f7fa;}
	.main-menu-list li.active a:before{background:linear-gradient(135deg,#0891b2,#06b4c8);}
}
@media (max-width:767px){
	.stui-screen__list li.active a{background:none;color:#06b4c8;}
}
a.active{background:linear-gradient(135deg,#0891b2,#06b4c8);color:#fff;}
.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:12px;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,#f1f5f9,#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:#64748b;}
.hy-details-qrcode p{margin:0 0 5px;color:#334155;}
.hy-details-qrcode img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.video-grid-list{display:flex;flex-wrap:wrap;margin:0 -10px;}
.video-card-box{padding:0 10px;}
.video-poster-thumb{border-radius:12px;overflow:hidden;}
.play-icon{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.25) url(../images/play.png) no-repeat center;background-size:55px 55px;opacity:0;transition:opacity 0.3s ease;}
.video-poster-thumb:hover .play-icon{opacity:1;}
.episode-info{background:linear-gradient(135deg,#0891b2,#06b4c8);color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;}
.friend-link-section{background:#fff;padding:20px;border-radius:12px;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;}
}
.main-content-wrapper{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(6,180,200,0.08);margin:20px auto;padding:20px;}
.detail-main-wrapper{background:#fff;border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.05);}
.interaction-panel{background:linear-gradient(135deg,#f0fdfa,#ecfeff);border-radius:14px;padding:20px;margin:18px 0;border:1px solid #99f6e4;}
.rating-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.rating-info-label{font-weight:600;color:#134e4a;margin-right:10px;font-size:15px;}
.star-display{font-size:28px;color:#fcd34d;cursor:pointer;transition:all 0.25s ease;text-shadow:0 2px 4px rgba(0,0,0,0.1);}
.star-display:hover{transform:scale(1.15);}
.star-display.activated{color:#f59e0b;animation:starPulse 0.4s ease;}
@keyframes starPulse{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1.15)}}
.score-value{margin-left:16px;font-weight:700;color:#0891b2;font-size:22px;}
.favorite-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.favorite-heart{font-size:30px;cursor:pointer;transition:all 0.3s ease;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.12));color:#f87171;}
.favorite-heart.clicked{animation:heartBeat 0.7s ease;}
@keyframes heartBeat{0%{transform:scale(1)}20%{transform:scale(1.4)}40%{transform:scale(1)}60%{transform:scale(1.25)}80%{transform:scale(1)}100%{transform:scale(1)}}
.favorite-heart:hover{transform:scale(1.2);}
.favorite-value{font-weight:700;color:#0891b2;font-size:20px;}
.action-button-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.interaction-button{display:flex;align-items:center;gap:9px;padding:12px 22px;border-radius:28px;background:#fff;border:2px solid #e2e8f0;color:#334155;cursor:pointer;transition:all 0.3s ease;font-size:15px;font-weight:500;box-shadow:0 3px 10px rgba(0,0,0,0.05);}
.interaction-button:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.1);}
.interaction-button.selected{color:#fff;}
.interaction-button.upvote{background:linear-gradient(135deg,#dc2626,#ef4444);border-color:#dc2626;}
.interaction-button.upvote:hover{background:linear-gradient(135deg,#b91c1c,#dc2626);}
.interaction-button.downvote{background:linear-gradient(135deg,#475569,#64748b);border-color:#475569;}
.interaction-button.downvote:hover{background:linear-gradient(135deg,#334155,#475569);}
.interaction-button .action-icon{font-size:22px;}
.interaction-button .action-count{font-weight:700;}
.scroll-episode-container{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a5f3fc #f0fdfa;}
.scroll-episode-container::-webkit-scrollbar{width:7px;}
.scroll-episode-container::-webkit-scrollbar-track{background:#f0fdfa;border-radius:4px;}
.scroll-episode-container::-webkit-scrollbar-thumb{background:#a5f3fc;border-radius:4px;}
.scroll-episode-container::-webkit-scrollbar-thumb:hover{background:#67e8f9;}
@media (max-width: 767px) {
    .star-display{font-size:24px;}
    .score-value{font-size:18px;}
    .interaction-button{padding:10px 16px;font-size:14px;}
    .favorite-heart{font-size:26px;}
    .favorite-value{font-size:18px;}
    .scroll-episode-container{max-height:240px;}
    .detail-main-wrapper{padding:16px;}
    .interaction-panel{padding:16px;}
}