/* ============================================
   CINEMA / VIDEO THEME - 影视主题
   Dark cinematic design with vibrant accents
   
   Color Palette:
   - BG Dark:    #0D0D12 (Primary background)
   - BG Card:    #16161F (Card / panel background)
   - BG Hover:   #1E1E2A (Hover states)
   - Accent Red: #E74C3C (Primary accent / brand)
   - Accent Gold:#F1C40F (Rating / VIP / stars)
   - Accent Cyan:#00D4FF (Info / links)
   - Text Main:  #EAEAEA (Primary text)
   - Text Sub:   #8888A0 (Secondary text)
   - Border:     #2A2A3A
   ============================================ */

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  font-family:'Segoe UI','Microsoft YaHei','PingFang SC',-apple-system,sans-serif;
  font-size:14px;line-height:1.6;
  color:#EAEAEA;
  background:#0D0D12;
  overflow-x:hidden;
}
a{color:#EAEAEA;text-decoration:none;transition:color .2s,opacity .2s;}
a:hover{color:#00D4FF;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
.clear{clear:both;}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#0D0D12;}
::-webkit-scrollbar-thumb{background:#2A2A3A;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#3A3A4A;}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:#EAEAEA;}
h1{font-size:1.8em;}h2{font-size:1.5em;}h3{font-size:1.25em;}

/* ============================================
   HEADER
   ============================================ */
.vd-header{
  background:linear-gradient(180deg,rgba(13,13,18,.95),rgba(13,13,18,.85));
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(231,76,60,.15);
}

/* Topbar */
.vd-topbar{
  background:rgba(231,76,60,.08);
  border-bottom:1px solid rgba(231,76,60,.1);
  font-size:12px;color:#8888A0;
}
.vd-topbar .container{
  display:flex;justify-content:space-between;align-items:center;height:32px;
}
.vd-topbar .vd-notice{
  display:flex;align-items:center;gap:8px;overflow:hidden;
}
.vd-topbar .vd-notice-label{
  background:#E74C3C;color:#fff;padding:1px 8px;border-radius:3px;
  font-size:10px;font-weight:700;text-transform:uppercase;
  animation:vd-pulse 2s infinite;
}
@keyframes vd-pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.vd-topbar a{color:#8888A0;font-size:12px;}
.vd-topbar a:hover{color:#00D4FF;}
.vd-topbar .vd-date{white-space:nowrap;}

/* Main header */
.vd-header-main{
  padding:10px 0;
}
.vd-header-main .container{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.vd-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.vd-logo img{height:40px;width:auto;}
.vd-logo-text{
  color:#fff;font-size:22px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(135deg,#E74C3C,#F1C40F);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Search bar in header */
.vd-header-search{
  flex:1;max-width:480px;position:relative;
}
.vd-header-search input{
  width:100%;padding:10px 44px 10px 16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:24px;color:#EAEAEA;font-size:13px;
  transition:all .3s;
}
.vd-header-search input::placeholder{color:#666;}
.vd-header-search input:focus{
  outline:none;border-color:#E74C3C;
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(231,76,60,.15);
}
.vd-header-search button{
  position:absolute;right:4px;top:4px;bottom:4px;
  width:36px;border:none;background:#E74C3C;
  border-radius:20px;color:#fff;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.vd-header-search button:hover{background:#C0392B;}

/* User actions */
.vd-header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.vd-header-actions a{
  color:#8888A0;font-size:13px;
  padding:6px 14px;border:1px solid rgba(255,255,255,.1);
  border-radius:20px;transition:all .2s;
}
.vd-header-actions a:hover{
  color:#fff;border-color:#E74C3C;background:rgba(231,76,60,.15);
}
.vd-header-actions .vd-btn-vip{
  background:linear-gradient(135deg,#F1C40F,#E67E22);color:#0D0D12;
  border:none;font-weight:700;
}
.vd-header-actions .vd-btn-vip:hover{opacity:.85;color:#0D0D12;}

/* Night mode toggle */
.vd-night-btn{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#F1C40F;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.vd-night-btn:hover{background:rgba(241,196,15,.15);border-color:#F1C40F;}

/* Navigation */
.vd-nav{
  background:rgba(0,0,0,.3);
  border-top:1px solid rgba(255,255,255,.04);
}
.vd-nav ul{display:flex;align-items:center;}
.vd-nav ul li{position:relative;}
.vd-nav ul li a{
  display:block;padding:12px 20px;
  color:rgba(234,234,234,.7);font-size:14px;font-weight:600;
  transition:all .2s;
}
.vd-nav ul li a:hover,.vd-nav ul li.act a{
  color:#E74C3C;
}
.vd-nav ul li.act a{
  border-bottom:2px solid #E74C3C;
}
.vd-nav ul li ul{
  display:none;position:absolute;top:100%;left:0;
  background:#16161F;min-width:200px;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  border-top:2px solid #E74C3C;
  flex-direction:column;z-index:1001;
  border-radius:0 0 8px 8px;overflow:hidden;
}
.vd-nav ul li:hover ul{display:flex;}
.vd-nav ul li ul li a{
  padding:10px 20px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.vd-nav ul li ul li a:hover{background:rgba(231,76,60,.1);}

/* Mobile */
.wap_headerclick{
  display:none;cursor:pointer;color:#fff;font-size:24px;
  padding:10px;
}

/* === CONTAINER === */
.container{max-width:1240px;margin:0 auto;padding:0 16px;}

/* ============================================
   HERO BANNER / SLIDER
   ============================================ */
.vd-hero{
  margin-bottom:28px;
}
.vd-hero .swiper-slide{
  position:relative;height:440px;overflow:hidden;border-radius:12px;
}
.vd-hero .swiper-slide img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 6s ease;
}
.vd-hero .swiper-slide-active img{transform:scale(1.05);}
.vd-hero .swiper-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,#0D0D12 0%,rgba(13,13,18,.3) 50%,rgba(13,13,18,.6) 100%);
}
.vd-hero-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:30px 40px;
}
.vd-hero-overlay .vd-hero-cat{
  display:inline-block;background:#E74C3C;color:#fff;
  padding:3px 12px;border-radius:4px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  margin-bottom:10px;
}
.vd-hero-overlay h2{
  color:#fff;font-size:28px;margin-bottom:10px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.vd-hero-overlay p{
  color:rgba(255,255,255,.75);font-size:14px;
  max-width:600px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-hero-overlay .vd-hero-meta{
  display:flex;align-items:center;gap:16px;
  font-size:12px;color:rgba(255,255,255,.6);margin-top:10px;
}
.vd-hero-overlay .vd-hero-meta .vd-rating{
  color:#F1C40F;font-weight:700;
}
.vd-hero .swiper-pagination-bullet{background:rgba(255,255,255,.4);opacity:1;}
.vd-hero .swiper-pagination-bullet-active{background:#E74C3C;width:24px;border-radius:4px;}
.vd-hero .swiper-button-next,.vd-hero .swiper-button-prev{color:rgba(255,255,255,.7);background:rgba(0,0,0,.4);width:44px;height:44px;border-radius:50%;transition:all .2s;}
.vd-hero .swiper-button-next:hover,.vd-hero .swiper-button-prev:hover{background:rgba(231,76,60,.6);color:#fff;}

/* ============================================
   SECTION TITLE
   ============================================ */
.vd-section{
  margin-bottom:28px;
}
.vd-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.vd-section-header h2{
  font-size:20px;display:flex;align-items:center;gap:10px;
}
.vd-section-header h2::before{
  content:'';display:inline-block;width:4px;height:22px;
  background:linear-gradient(180deg,#E74C3C,#F1C40F);
  border-radius:2px;
}
.vd-section-header .vd-more{
  font-size:13px;color:#8888A0;transition:color .2s;
}
.vd-section-header .vd-more:hover{color:#00D4FF;}

/* Filter tabs */
.vd-filter-tabs{
  display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;
}
.vd-filter-tabs a{
  padding:6px 16px;border-radius:20px;
  font-size:13px;color:#8888A0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:all .2s;
}
.vd-filter-tabs a:hover,
.vd-filter-tabs a[style*="font-weight:bold"]{
  color:#fff;background:#E74C3C;border-color:#E74C3C;
}

/* ============================================
   VIDEO CARD (main building block)
   ============================================ */
.vd-card-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
}
.vd-card-grid-4{
  grid-template-columns:repeat(4,1fr);
}
.vd-card-grid-3{
  grid-template-columns:repeat(3,1fr);
}
.vd-card{
  background:#16161F;border-radius:8px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  cursor:pointer;
}
.vd-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.vd-card-img{
  position:relative;overflow:hidden;
  aspect-ratio:2/3;
}
.vd-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s;
}
.vd-card:hover .vd-card-img img{transform:scale(1.08);}
.vd-card-img .vd-badge{
  position:absolute;top:8px;left:8px;
  display:flex;gap:4px;z-index:2;
}
.vd-card-img .vd-badge span{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:700;
}
.vd-card-img .vd-badge .vd-badge-quality{
  background:#E74C3C;color:#fff;
}
.vd-card-img .vd-badge .vd-badge-vip{
  background:linear-gradient(135deg,#F1C40F,#E67E22);color:#0D0D12;
}
.vd-card-img .vd-badge .vd-badge-new{
  background:#00D4FF;color:#0D0D12;
}
.vd-card-img .vd-score{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  padding:2px 8px;border-radius:4px;
  font-size:12px;font-weight:700;color:#F1C40F;
}
.vd-card-img .vd-play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:48px;height:48px;border-radius:50%;
  background:rgba(231,76,60,.9);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;
  transition:transform .3s;z-index:2;
  box-shadow:0 4px 20px rgba(231,76,60,.4);
}
.vd-card:hover .vd-play-btn{transform:translate(-50%,-50%) scale(1);}
.vd-card-img .vd-episodes{
  position:absolute;bottom:0;left:0;right:0;
  padding:4px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  font-size:11px;color:rgba(255,255,255,.7);
  display:flex;justify-content:space-between;
}
.vd-card-body{padding:10px 12px;}
.vd-card-body h3{
  font-size:14px;line-height:1.4;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-card-body h3 a{color:#EAEAEA;}
.vd-card-body h3 a:hover{color:#00D4FF;}
.vd-card-meta{
  font-size:11px;color:#8888A0;
  display:flex;align-items:center;gap:8px;
}
.vd-card-meta .vd-star{color:#F1C40F;}

/* ============================================
   HORIZONTAL SCROLL ROW
   ============================================ */
.vd-scroll-row{
  margin-bottom:28px;
}
.vd-scroll-row .vd-section-header h2 i{color:#F1C40F;}
.vd-scroll-wrapper{
  background:#16161F;border-radius:10px;padding:16px;
}
.vd-scroll-row .swiper-slide{width:160px;}
.vd-scroll-row .vd-card{background:transparent;}

/* ============================================
   TWO COLUMN LAYOUT
   ============================================ */
.vd-two-col{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
}

/* ============================================
   SIDEBAR
   ============================================ */
.vd-sidebar .vd-widget{
  background:#16161F;border-radius:10px;
  padding:18px;margin-bottom:20px;
  border:1px solid rgba(255,255,255,.04);
}
.vd-widget-title{
  font-size:15px;font-weight:700;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:8px;
}
.vd-widget-title i{color:#E74C3C;}

/* Ranking */
.vd-rank-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.vd-rank-list li:last-child{border-bottom:none;}
.vd-rank-num{
  flex-shrink:0;width:22px;height:22px;line-height:22px;
  text-align:center;border-radius:4px;
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.08);color:#8888A0;
}
.vd-rank-list li:nth-child(1) .vd-rank-num{background:#E74C3C;color:#fff;}
.vd-rank-list li:nth-child(2) .vd-rank-num{background:#F1C40F;color:#0D0D12;}
.vd-rank-list li:nth-child(3) .vd-rank-num{background:#E67E22;color:#fff;}
.vd-rank-list li a{
  font-size:13px;line-height:1.4;flex:1;color:#EAEAEA;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-rank-list li a:hover{color:#00D4FF;}

/* Tag cloud */
.vd-tag-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.vd-tag-cloud a{
  padding:4px 12px;border-radius:20px;font-size:12px;
  background:rgba(255,255,255,.05);color:#8888A0;
  border:1px solid rgba(255,255,255,.06);transition:all .2s;
}
.vd-tag-cloud a:hover{background:#E74C3C;color:#fff;border-color:#E74C3C;}

/* Profile widget */
.vd-profile{text-align:center;}
.vd-profile img{border-radius:50%;margin:0 auto 12px;width:64px;height:64px;object-fit:cover;}
.vd-profile h4{margin-bottom:6px;font-size:15px;}
.vd-profile p{font-size:12px;color:#8888A0;margin-bottom:12px;}
.vd-profile-stats{
  display:flex;justify-content:center;gap:20px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:12px;margin-top:8px;
}
.vd-profile-stats li{text-align:center;}
.vd-profile-stats li span{display:block;font-size:18px;font-weight:700;color:#E74C3C;}
.vd-profile-stats li small{font-size:11px;color:#8888A0;}

/* Random grid */
.vd-random-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.vd-random-grid a{
  display:block;border-radius:6px;overflow:hidden;
  position:relative;aspect-ratio:2/3;
}
.vd-random-grid a img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.vd-random-grid a:hover img{transform:scale(1.08);}
.vd-random-grid a .vd-random-label{
  position:absolute;bottom:0;left:0;right:0;padding:4px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================
   CATEGORY TABS BAR
   ============================================ */
.vd-cate-tabs{
  display:flex;gap:0;margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;overflow-x:auto;
}
.vd-cate-tabs a{
  padding:10px 18px;font-size:14px;font-weight:500;
  color:#8888A0;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all .2s;white-space:nowrap;
}
.vd-cate-tabs a:hover,
.vd-cate-tabs a[style*="font-weight:bold"]{
  color:#E74C3C;border-bottom-color:#E74C3C;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.vd-breadcrumb{
  font-size:12px;color:#8888A0;margin-bottom:16px;
  padding:12px 0;
}
.vd-breadcrumb a{color:#8888A0;}
.vd-breadcrumb a:hover{color:#00D4FF;}
.vd-breadcrumb i{margin:0 6px;font-size:10px;}

/* ============================================
   VIDEO DETAIL PAGE
   ============================================ */
.vd-detail{margin-bottom:30px;}
.vd-detail-header{
  background:#16161F;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
}
/* Player area */
.vd-player-area{
  padding:24px;padding-bottom:0;
}
.vd-player-box{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}
.vd-player-box iframe{
  width:100%;height:100%;border:none;
}
.vd-player-box video{
  width:100%;height:100%;object-fit:contain;
  background:#000;
}
.vd-player-box img{
  width:100%;height:100%;object-fit:contain;
  background:#000;
}

/* ---- Player Overlay ---- */
.vd-player-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:5;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);cursor:pointer;
  transition:background .2s;
}
.vd-player-overlay:hover{background:rgba(0,0,0,.2);}
.vd-player-big-play{
  width:72px;height:72px;border-radius:50%;
  background:rgba(231,76,60,.9);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:28px;
  box-shadow:0 4px 30px rgba(231,76,60,.5);
  transition:transform .2s,background .2s;
  cursor:pointer;
}
.vd-player-big-play:hover{transform:scale(1.1);background:#E74C3C;}
.vd-player-loading{
  display:none;flex-direction:column;align-items:center;gap:12px;
  color:rgba(255,255,255,.8);font-size:14px;
}
.vd-spinner{
  width:40px;height:40px;
  border:3px solid rgba(255,255,255,.2);
  border-top-color:#E74C3C;
  border-radius:50%;
  animation:vd-spin .8s linear infinite;
}
@keyframes vd-spin{to{transform:rotate(360deg);}}

/* ---- Controls Bar ---- */
.vd-player-controls{
  position:absolute;bottom:0;left:0;right:0;
  z-index:10;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  padding:30px 16px 12px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.vd-player-controls.vd-controls-visible{opacity:1;pointer-events:auto;}
.vd-controls-left,.vd-controls-right{
  display:flex;align-items:center;gap:8px;
}
.vd-ctrl-btn{
  background:none;border:none;color:#fff;
  font-size:14px;cursor:pointer;
  padding:4px 8px;border-radius:4px;
  transition:color .2s,background .2s;
  position:relative;display:flex;align-items:center;gap:4px;
}
.vd-ctrl-btn:hover{color:#E74C3C;background:rgba(255,255,255,.1);}
.vd-quality-label,.vd-ctrl-btn span{font-size:12px;font-weight:600;}

/* Quality / Speed dropdown */
.vd-quality-menu,.vd-speed-menu{
  display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:#1A1A24;border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  overflow:hidden;min-width:100px;z-index:20;
  margin-bottom:6px;
}
.vd-quality-option,.vd-speed-option{
  padding:8px 16px;font-size:12px;color:#AAA;
  cursor:pointer;transition:all .15s;text-align:center;
}
.vd-quality-option:hover,.vd-speed-option:hover{
  background:rgba(231,76,60,.15);color:#fff;
}
.vd-quality-option.active,.vd-speed-option.active{
  color:#E74C3C;font-weight:700;
}

/* Progress bar */
.vd-progress-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
}
.vd-progress-bar{
  flex:1;height:4px;background:rgba(255,255,255,.2);
  border-radius:2px;position:relative;cursor:pointer;
  transition:height .1s;
}
.vd-progress-bar:hover{height:6px;}
.vd-progress-buffered{
  position:absolute;top:0;left:0;height:100%;
  background:rgba(255,255,255,.15);border-radius:2px;
  width:0;transition:width .3s;
}
.vd-progress-played{
  position:absolute;top:0;left:0;height:100%;
  background:#E74C3C;border-radius:2px;width:0;
}
.vd-progress-thumb{
  position:absolute;top:50%;width:12px;height:12px;
  background:#fff;border-radius:50%;
  transform:translate(-50%,-50%);left:0;
  box-shadow:0 0 6px rgba(0,0,0,.4);
  opacity:0;transition:opacity .15s;
}
.vd-progress-bar:hover .vd-progress-thumb{opacity:1;}
.vd-time-display{
  font-size:11px;color:rgba(255,255,255,.6);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* Video element */
.vd-video-el{
  width:100%;height:100%;object-fit:contain;
  background:#000;display:block;
}

/* Play page layout */
.vd-play-page-header{
  background:#16161F;border-radius:10px;
  overflow:hidden;margin-bottom:0;
  border:1px solid rgba(255,255,255,.04);
}
.vd-play-info-bar{
  background:#16161F;
  border:1px solid rgba(255,255,255,.04);
  border-top:none;
  border-radius:0 0 10px 10px;
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.vd-play-title{
  font-size:18px;font-weight:700;color:#EAEAEA;
  margin:0 0 8px 0;
}
.vd-play-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:#8888A0;
}
.vd-play-meta .vd-rating-big{
  font-size:14px;color:#F1C40F;font-weight:700;
}
.vd-play-info-left{flex:1;}
.vd-play-info-right{
  display:flex;gap:8px;flex-shrink:0;
}

.vd-detail-top{
  display:flex;gap:24px;padding:24px;
}
.vd-detail-poster{
  flex-shrink:0;width:240px;border-radius:8px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.vd-detail-poster img{width:100%;aspect-ratio:2/3;object-fit:cover;}
.vd-detail-info{flex:1;display:flex;flex-direction:column;justify-content:center;}
.vd-detail-title{
  font-size:26px;font-weight:800;margin-bottom:12px;
  line-height:1.3;
}
.vd-detail-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:#8888A0;margin-bottom:14px;
}
.vd-detail-meta .vd-rating-big{
  color:#F1C40F;font-weight:700;font-size:18px;
}
.vd-detail-meta .vd-meta-item{
  display:flex;align-items:center;gap:4px;
}
.vd-detail-meta .vd-meta-item i{color:#E74C3C;font-size:12px;}
.vd-detail-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.vd-detail-tags a{
  padding:3px 10px;border-radius:20px;font-size:12px;
  background:rgba(255,255,255,.05);color:#8888A0;
  border:1px solid rgba(255,255,255,.06);transition:all .2s;
}
.vd-detail-tags a:hover{background:#E74C3C;color:#fff;border-color:#E74C3C;}
.vd-detail-actions{
  display:flex;gap:10px;margin-top:auto;
}
.vd-detail-actions a,.vd-detail-actions button{
  padding:10px 24px;border-radius:6px;
  font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:6px;
  transition:all .2s;cursor:pointer;border:none;
}
.vd-btn-play{
  background:linear-gradient(135deg,#E74C3C,#C0392B);color:#fff;
}
.vd-btn-play:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(231,76,60,.4);}
.vd-btn-fav{
  background:rgba(255,255,255,.08);color:#EAEAEA;
  border:1px solid rgba(255,255,255,.1);
}
.vd-btn-fav:hover{border-color:#F1C40F;color:#F1C40F;}

/* Summary */
.vd-detail-summary{
  background:rgba(255,255,255,.03);
  border-left:3px solid #E74C3C;
  padding:14px 18px;margin:16px 24px;
  font-size:13px;color:#AAA;
  border-radius:0 8px 8px 0;
  line-height:1.8;
}

/* Content */
.vd-detail-content{
  padding:20px 24px;font-size:15px;line-height:1.9;color:#CCC;
}
.vd-detail-content p{margin-bottom:14px;}
.vd-detail-content img{border-radius:8px;margin:12px 0;}

/* Episode list / Playlist */
.vd-episode-section{
  padding:0 24px 24px;
}
.vd-episode-header{
  font-size:16px;font-weight:700;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.vd-episode-header i{color:#E74C3C;}
.vd-episode-grid{
  display:flex;flex-wrap:wrap;gap:8px;
}
.vd-episode-grid a{
  padding:8px 16px;border-radius:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;color:#CCC;transition:all .2s;
}
.vd-episode-grid a:hover{
  background:#E74C3C;color:#fff;border-color:#E74C3C;
}

/* Copyright / source */
.vd-detail-copyright{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:14px 18px;margin:0 24px 24px;
  font-size:12px;color:#666;
}
.vd-detail-copyright a{color:#00D4FF;}

/* Prev / Next */
.vd-detail-prev-next{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:20px;
}
.vd-detail-prev-next a{
  display:block;padding:14px 16px;
  background:#16161F;border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  font-size:14px;color:#8888A0;transition:all .2s;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-detail-prev-next a:hover{border-color:#E74C3C;color:#E74C3C;}

/* Related videos */
.vd-related-section{margin-top:24px;}

/* ============================================
   COMMENTS
   ============================================ */
.vd-comments{
  background:#16161F;border-radius:12px;
  padding:24px;margin-top:20px;
  border:1px solid rgba(255,255,255,.04);
}
.vd-comments h3{
  font-size:18px;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);
}
.vd-comments h3 i{color:#F1C40F;margin-right:8px;}
.vd-comment-form{margin-bottom:20px;}
.vd-comment-form p{margin-bottom:10px;}
.vd-comment-form input[type="text"],
.vd-comment-form textarea{
  width:100%;padding:10px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;font-size:13px;color:#EAEAEA;
  transition:border-color .2s;font-family:inherit;
}
.vd-comment-form input[type="text"]:focus,
.vd-comment-form textarea:focus{border-color:#E74C3C;outline:none;}
.vd-comment-form input[type="text"]::placeholder,
.vd-comment-form textarea::placeholder{color:#555;}
.vd-comment-form textarea{min-height:90px;resize:vertical;}
.vd-comment-form .vd-btn-submit{
  padding:10px 24px;background:#E74C3C;color:#fff;
  border:none;border-radius:6px;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .2s;
}
.vd-comment-form .vd-btn-submit:hover{background:#C0392B;}

/* Comment list */
.vd-comment-list ul.msg{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.vd-comment-list ul.msg:last-child{border-bottom:none;}
.vd-comment-list .msgname{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.vd-comment-list .avatar{border-radius:50%;width:32px;height:32px;}
.vd-comment-list .commentname{font-weight:600;font-size:13px;color:#EAEAEA;}
.vd-comment-list small{color:#666;font-size:11px;}
.vd-comment-list .reply_comment{color:#00D4FF;font-size:12px;cursor:pointer;}
.vd-comment-list .msgarticle{font-size:13px;line-height:1.7;color:#AAA;}
.vd-comment-list .reply_msgarticle{
  background:rgba(255,255,255,.03);padding:8px 12px;
  border-radius:4px;margin:6px 0;font-size:12px;color:#888;
}
#load_more{
  display:block;text-align:center;padding:10px;
  color:#00D4FF;font-size:13px;cursor:pointer;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagebar{text-align:center;padding:24px 0;}
.pagebar a,.pagebar span{
  display:inline-block;padding:8px 14px;margin:0 3px;
  border-radius:6px;font-size:13px;color:#8888A0;
  transition:all .2s;
  background:rgba(255,255,255,.04);
}
.pagebar a:hover{background:#E74C3C;color:#fff;}
.pagebar span{background:#E74C3C;color:#fff;font-weight:600;}

/* ============================================
   LIST ITEM (horizontal card)
   ============================================ */
.vd-list-item{
  display:flex;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .2s;
}
.vd-list-item:last-child{border-bottom:none;}
.vd-list-item:hover{background:rgba(255,255,255,.02);}
.vd-list-item .vd-list-img{
  flex-shrink:0;width:160px;height:100px;
  border-radius:6px;overflow:hidden;position:relative;
}
.vd-list-item .vd-list-img img{width:100%;height:100%;object-fit:cover;}
.vd-list-item .vd-list-content{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
}
.vd-list-item .vd-list-content h3{font-size:15px;line-height:1.4;}
.vd-list-item .vd-list-content h3 a{color:#EAEAEA;}
.vd-list-item .vd-list-content h3 a:hover{color:#00D4FF;}
.vd-list-item .vd-list-intro{
  font-size:12px;color:#8888A0;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vd-list-item .vd-list-meta{
  font-size:11px;color:#666;display:flex;align-items:center;gap:12px;
}

/* ============================================
   FRIEND LINKS
   ============================================ */
.vd-links{
  background:#16161F;border-radius:10px;padding:18px;margin-bottom:28px;
  border:1px solid rgba(255,255,255,.04);
}
.vd-links-title{
  font-size:14px;font-weight:700;margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);
}
.vd-links-list{display:flex;flex-wrap:wrap;gap:8px;}
.vd-links-list a{
  padding:4px 14px;border-radius:4px;font-size:12px;
  background:rgba(255,255,255,.04);color:#8888A0;
  border:1px solid rgba(255,255,255,.06);transition:all .2s;
}
.vd-links-list a:hover{background:#E74C3C;color:#fff;border-color:#E74C3C;}

/* ============================================
   FOOTER
   ============================================ */
.vd-footer{
  background:linear-gradient(180deg,#0D0D12,#08080C);
  border-top:1px solid rgba(255,255,255,.04);
  color:rgba(255,255,255,.5);margin-top:40px;
}
.vd-footer-top{padding:36px 0 24px;}
.vd-footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;
}
.vd-footer h4{
  color:#EAEAEA;font-size:15px;margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid #E74C3C;
  display:inline-block;
}
.vd-footer p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.4);}
.vd-footer a{color:rgba(255,255,255,.5);}
.vd-footer a:hover{color:#00D4FF;}
.vd-footer-links li{margin-bottom:8px;}
.vd-footer-links li a{font-size:13px;}
.vd-footer-contact li{
  font-size:13px;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.vd-footer-contact li i{color:#E74C3C;width:14px;}
.vd-footer-bottom{
  padding:18px 0;text-align:center;
  font-size:12px;color:rgba(255,255,255,.3);
  border-top:1px solid rgba(255,255,255,.04);
}
.vd-footer-bottom a{color:rgba(255,255,255,.4);}
.vd-footer-bottom a:hover{color:#00D4FF;}

/* ============================================
   GO TOP
   ============================================ */
.vd-gotop{position:fixed;right:20px;bottom:80px;z-index:999;}
.vd-gotop button{
  width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(231,76,60,.8);color:#fff;font-size:16px;
  cursor:pointer;box-shadow:0 4px 16px rgba(231,76,60,.3);
  transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.vd-gotop button:hover{background:#E74C3C;transform:translateY(-2px);}

/* ============================================
   404 PAGE
   ============================================ */
.vd-404{text-align:center;padding:80px 20px;}
.vd-404 h1{
  font-size:120px;font-weight:900;
  background:linear-gradient(135deg,#E74C3C,#F1C40F,#00D4FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:16px;
}
.vd-404 h2{font-size:22px;color:#8888A0;font-weight:400;margin-bottom:30px;}
.vd-404 a{
  display:inline-block;padding:12px 32px;
  background:#E74C3C;color:#fff;border-radius:6px;
  font-weight:600;transition:all .2s;
}
.vd-404 a:hover{background:#C0392B;}

/* ============================================
   SEARCH PAGE
   ============================================ */
.vd-search-box{
  max-width:600px;margin:30px auto;
  background:#16161F;padding:30px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}
.vd-search-box h3{text-align:center;margin-bottom:16px;color:#E74C3C;}
.vd-search-box form{display:flex;gap:10px;}
.vd-search-box input[type="text"]{
  flex:1;padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;font-size:14px;color:#EAEAEA;
}
.vd-search-box input[type="text"]:focus{border-color:#E74C3C;outline:none;}
.vd-search-box select{
  padding:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;font-size:13px;color:#EAEAEA;
}
.vd-search-box input[type="submit"]{
  padding:12px 24px;background:#E74C3C;color:#fff;
  border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
}
.vd-search-box input[type="submit"]:hover{background:#C0392B;}

/* ============================================
   CLOSE WEBSITE
   ============================================ */
.vd-close{
  text-align:center;padding:120px 20px;
  background:linear-gradient(135deg,#0D0D12,#E74C3C);
}
.vd-close h3{font-size:24px;color:#fff;margin-bottom:12px;}
.vd-close p{color:rgba(255,255,255,.6);}

/* ============================================
   TAG PAGE
   ============================================ */
.vd-tag-list{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0;}
.vd-tag-list a{
  display:inline-block;padding:8px 18px;
  background:rgba(255,255,255,.04);border-radius:8px;
  font-size:13px;color:#8888A0;
  border:1px solid rgba(255,255,255,.06);transition:all .2s;
}
.vd-tag-list a:hover{background:#E74C3C;color:#fff;border-color:#E74C3C;transform:translateY(-2px);}

/* ============================================
   UTILITY
   ============================================ */
.vd-mb-24{margin-bottom:24px;}
.vd-bg-card{background:#16161F;border-radius:10px;padding:20px;border:1px solid rgba(255,255,255,.04);}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1200px){
  .vd-card-grid{grid-template-columns:repeat(4,1fr);}
  .vd-footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:1024px){
  .vd-header-search{display:none;}
  .vd-card-grid{grid-template-columns:repeat(3,1fr);}
  .vd-two-col{grid-template-columns:1fr;}
  .vd-detail-top{flex-direction:column;align-items:center;}
  .vd-detail-poster{width:180px;}
}
@media(max-width:768px){
  .wap_headerclick{display:block;}
  .vd-nav ul{display:none;flex-direction:column;position:absolute;
    top:100%;left:0;right:0;background:#16161F;
    box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:1000;
  }
  .vd-nav ul.open{display:flex;}
  .vd-nav ul li ul{position:static;display:none;box-shadow:none;border-top:none;}
  .vd-nav ul li:hover ul{display:none;}
  .vd-nav ul li.child-open ul{display:flex;}
  .wap_display.nav-closed{display:none!important;}
  .vd-hero .swiper-slide{height:260px;}
  .vd-hero-overlay h2{font-size:18px;}
  .vd-hero-overlay p{font-size:12px;}
  .vd-card-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .vd-detail-top{padding:16px;}
  .vd-detail-title{font-size:20px;}
  .vd-detail-content{padding:16px;}
  .vd-detail-prev-next{grid-template-columns:1fr;}
  .vd-footer-grid{grid-template-columns:1fr;}
  .vd-scroll-row .swiper-slide{width:130px;}
  .vd-list-item{flex-direction:column;}
  .vd-list-item .vd-list-img{width:100%;height:180px;}
  .vd-episode-grid a{padding:6px 12px;font-size:12px;}
  .vd-topbar .vd-date{display:none;}
  .vd-header-actions{display:none;}
}