/* ============================================
   EPHIM18 - Modern Dark Theme v2.0
   Netflix/Disney+ inspired design
   ============================================ */

/* --- CSS Variables --- */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #16161f;
  --bg-hover: #1e1e2a;
  --bg-glass: rgba(12,12,18,.96);
  --accent: #e50914;
  --accent-hover: #ff1a25;
  --accent-blue: #3b82f6;
  --accent-gold: #f59e0b;
  --text-primary: #e5e5e5;
  --text-secondary: #a0a0b0;
  --text-muted: #6b6b80;
  --border: #2a2a3a;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --container: 1280px;
  --header-h: 64px;
  --nav-h: 48px;
}
/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--text-primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button,input,select{font:inherit;border:none;outline:none;background:none;color:inherit}
h1,h2,h3,h4{font-weight:700;line-height:1.3}
.clear{clear:both}
.container{max-width:var(--container);margin:0 auto;padding:0 16px;width:100%}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#555}

/* ============================================
   HEADER
   ============================================ */
#header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,rgba(10,10,16,.98) 0%, rgba(12,12,18,.96) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  height:var(--header-h);
  transition:background var(--transition);
}
#header .container{display:flex;align-items:center;height:100%;gap:24px}
#header .logo{flex-shrink:0;display:flex;align-items:center}
#header .logo img{height:36px;width:auto}
.search-container{flex:1;max-width:480px;position:relative}
.search-container .form-search{display:flex;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:border-color var(--transition)}
.search-container .form-search:focus-within{border-color:var(--accent)}
.search-container .form-search input{flex:1;padding:10px 16px;background:transparent;color:var(--text-primary);font-size:.9rem}
.search-container .form-search input::placeholder{color:var(--text-muted)}
.search-container .form-search button{padding:10px 20px;background:var(--accent);color:#fff;font-weight:600;font-size:.85rem;cursor:pointer;border-radius:0 24px 24px 0;transition:background var(--transition)}
.search-container .form-search button:hover{background:var(--accent-hover)}
.top-search-box{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-top:4px;max-height:400px;overflow-y:auto;display:none;z-index:100;box-shadow:var(--shadow)}
.top-search-box .search-item{display:flex;align-items:center;padding:8px 12px;gap:10px;transition:background var(--transition)}
.top-search-box .search-item:hover{background:var(--bg-hover)}
.top-search-box .search-item img{width:40px;height:56px;object-fit:cover;border-radius:4px}
#menu-user{display:flex;align-items:center;gap:16px;margin-left:auto;flex-shrink:0}
#menu-user li a{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-secondary);transition:color var(--transition)}
#menu-user li a:hover{color:var(--text-primary)}
#menu-user li a i{font-size:1.1rem}

/* ============================================
   NAVIGATION
   ============================================ */
#main-menu.desktop{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:1100;
  background:rgba(15,15,22,.98);
  border-bottom:1px solid rgba(255,255,255,.08);
  height:var(--nav-h);
  overflow:visible;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
#main-menu.desktop .container{height:100%;overflow:visible}
#main-menu.desktop > .container > ul{display:flex;align-items:center;height:100%;gap:0;overflow:visible}
#main-menu.desktop > .container > ul > li{position:relative;height:100%;overflow:visible}
#main-menu.desktop > .container > ul > li > a{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:100%;
  font-size:.85rem;font-weight:500;
  color:#d7dbe7;
  transition:all var(--transition);
  white-space:nowrap;
}
#main-menu.desktop > .container > ul > li > a:hover,
#main-menu.desktop > .container > ul > li:hover > a{color:#fff;background:rgba(255,255,255,.1)}
#main-menu.desktop > .container > ul > li > a i.fa{font-size:.95rem}
#main-menu.desktop > .container > ul > li > a i.fa + span{margin-left:2px}
/* Dropdown */
#main-menu.desktop .sub-menu{
  display:none;position:absolute;top:100%;left:0;
  background:rgba(18,18,27,.99);border:1px solid rgba(255,255,255,.08);
  border-radius:0 0 var(--radius) var(--radius);
  min-width:200px;padding:8px 0;
  box-shadow:var(--shadow);z-index:9000;
  height:auto;
  align-items:stretch;
}
#main-menu.desktop .sub-menu.span-2,
#main-menu.desktop .sub-menu.span-3,
#main-menu.desktop .sub-menu.span-4{display:none;flex-wrap:wrap;width:400px;padding:12px}
#main-menu.desktop > .container > ul > li:hover > .sub-menu{display:block}
#main-menu.desktop > .container > ul > li:hover > .sub-menu.span-2,
#main-menu.desktop > .container > ul > li:hover > .sub-menu.span-3,
#main-menu.desktop > .container > ul > li:hover > .sub-menu.span-4{display:flex;flex-wrap:wrap}
#main-menu.desktop .sub-menu li{width:50%}
#main-menu.desktop .sub-menu.span-3 li{width:33.33%}
#main-menu.desktop .sub-menu li a{display:block;padding:6px 14px;font-size:.83rem;color:#c8cede;transition:all var(--transition);border-radius:4px}
#main-menu.desktop .sub-menu li a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu-adult > a{
  color:#ffe39c!important;
  font-weight:700;
  border:1px solid rgba(255,143,90,.28);
  background:linear-gradient(180deg,rgba(255,143,90,.18),rgba(229,9,20,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 18px rgba(229,9,20,.12);
}
.menu-adult > a i{color:#ff9f43;text-shadow:0 0 12px rgba(255,143,90,.35)}
.menu-adult > a:hover,.menu-adult:hover > a{
  color:#fff6d1!important;
  background:linear-gradient(180deg,rgba(255,143,90,.28),rgba(229,9,20,.16))!important;
  border-color:rgba(255,196,122,.42);
  box-shadow:0 0 22px rgba(229,9,20,.18);
}
.menu-home a{display:flex;align-items:center}

/* Body offset */
body{padding-top:calc(var(--header-h) + var(--nav-h))}

/* ============================================
   MAIN LAYOUT
   ============================================ */
#main-content{min-height:70vh;padding:24px 0}
#content{width:100%}
.left-content{width:100%}
.right-content{display:none}

/* ============================================
   FILM CARDS / GRID
   ============================================ */
.list-film{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.film-item{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-card);transition:transform var(--transition),box-shadow var(--transition)}
.film-item:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.film-item a{display:block;position:relative;color:inherit}
.film-item img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:filter var(--transition)}
.film-item:hover img{filter:brightness(1.1)}
.film-item .title{padding:10px;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 100%);position:absolute;bottom:0;left:0;right:0}
.film-item .title .name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-item .title .real-name{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.film-item .current-status{
  position:absolute;top:8px;left:8px;z-index:2;
  background:var(--accent);color:#fff;
  padding:2px 8px;border-radius:4px;
  font-size:.7rem;font-weight:600;
  line-height:1.5;
  max-width:calc(100% - 16px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.no-margin-right{margin-right:0!important}

/* ============================================
   SECTION HEADINGS
   ============================================ */
.block-film{margin-bottom:32px}
.block-film .caption,
.caption{
  display:flex;align-items:center;gap:8px;
  padding:12px 0;margin-bottom:16px;
  border-bottom:2px solid var(--accent);
  font-size:1.05rem;font-weight:700;
  color:#fff;
}
.caption i.fa{color:var(--accent);font-size:1.1rem}
.caption .view-all{margin-left:auto;font-size:.8rem;font-weight:500;color:var(--accent);transition:color var(--transition)}
.caption .view-all:hover{color:var(--accent-hover)}

/* Featured film carousel */
#film-hot{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}

/* ============================================
   SIDEBAR
   ============================================ */
.right-content .block{background:var(--bg-card);border-radius:var(--radius);padding:16px;margin-bottom:20px;border:1px solid var(--border)}
.right-content .caption{font-size:.95rem;padding:0 0 10px;margin-bottom:12px;border-bottom:2px solid var(--accent)}
.most-view .tabs{display:flex;gap:0;margin-bottom:12px;background:var(--bg-secondary);border-radius:6px;overflow:hidden}
.most-view .tab{flex:1;text-align:center;padding:8px;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--text-muted);transition:all var(--transition)}
.most-view .tab.active{background:var(--accent);color:#fff}
.most-view .list-film{display:flex;flex-direction:column;gap:10px}
.most-view .list-film li{display:flex;gap:10px;align-items:flex-start}
.most-view .list-film li img{width:60px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0}
.most-view .list-film li .info{flex:1;min-width:0}
.most-view .list-film li .name a{font-size:.83rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.most-view .list-film li .real-name{font-size:.75rem;color:var(--text-muted)}
.film-item-ver{display:flex;gap:10px;align-items:flex-start}
.film-item-ver a{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0}
.film-item-ver img.avatar{width:60px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0}
.film-item-ver .info{flex:1;min-width:0}
.film-item-ver .info .name{margin:0}.film-item-ver .info .name a{font-size:.83rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.film-item-ver .info .name a:hover{color:var(--accent)}
.film-item-ver .info .real-name{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tagcloud .tags{display:flex;flex-wrap:wrap;gap:6px}
.tagcloud .tags li a{display:inline-block;padding:4px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;font-size:.75rem;color:var(--text-secondary);transition:all var(--transition)}
.tagcloud .tags li a:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================
   PLAYER PAGE
   ============================================ */
.main-content#player-video{padding-top:0}
.left-content-player{width:100%}
.box-player{
  position:relative;
  width:100%;
  background:#000;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:16/9;
}
.box-player #media-player{width:100%;height:100%}
.box-player #media-player iframe{width:100%;height:100%;border:0}
.box-player .skip,.box-player .admute{position:absolute;z-index:10}
.site-watermark-text{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:11;
  pointer-events:none;
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.35;
  padding:4px 8px;
  border-radius:4px;
  background:rgba(0,0,0,.34);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.site-watermark-text.wm-bottom-right{right:10px;bottom:10px;left:auto;top:auto}
.site-watermark-text.wm-top-right{right:10px;top:10px;left:auto;bottom:auto}
.site-watermark-text.wm-top-left{left:10px;top:10px;right:auto;bottom:auto}
/* Midroll overlay – phủ toàn bộ player */
.player-custom-ad{
  position:absolute;
  inset:0;
  z-index:20;
  background:#000;
  display:flex;
  flex-direction:column;
}
.player-custom-ad-body{
  flex:1;
  overflow:hidden;
  display:flex;
  align-items:stretch;
}
.player-custom-ad-body iframe,
.player-custom-ad-body video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* Thanh dưới: countdown + skip */
.player-custom-ad-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px;
  background:rgba(0,0,0,.75);
  flex-shrink:0;
  gap:10px;
}
.player-custom-ad-label{
  color:rgba(255,255,255,.7);
  font-size:12px;
  white-space:nowrap;
}
.player-custom-ad-close{
  background:#f59e0b;
  color:#111;
  border:none;
  padding:5px 14px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .2s;
}
.player-custom-ad-close:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Server / Source buttons */
.list-server{margin:12px 0;padding:12px 0;border-bottom:1px solid var(--border)}
.list-server .server-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.list-server .name{color:var(--text-muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.list-server .name i{margin-right:4px}
.list-server .option{display:flex;flex-wrap:wrap;gap:6px}
.list-server span.btn,.list-server .btn-sv{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:6px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-secondary);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all var(--transition);
}
.list-server span.btn:hover,.list-server .btn-sv:hover{border-color:var(--accent);color:var(--accent)}
.list-server span.btn.disabled.btn-danger,.list-server span.btn.active{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
}

/* Episode list */
.server-list{margin:16px 0}
.server-list .name-server{font-size:.9rem;font-weight:700;padding:8px 0;color:#fff;display:flex;align-items:center;gap:6px}
.server-list .name-server i{color:var(--accent)}
.list-episode{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.list-episode a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;padding:6px 10px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:6px;font-size:.8rem;font-weight:500;
  color:var(--text-secondary);
  transition:all var(--transition);
}
.list-episode a:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.list-episode a.active,.list-episode a.playing{background:var(--accent);border-color:var(--accent);color:#fff}
.source-episodes{margin:8px 0 16px}
.source-episodes h4{font-size:.9rem;font-weight:700;padding:8px 0;color:#fff}

/* Video controls bar */
.video-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:color var(--transition)}
.video-btn:hover{color:#fff}
.video-btn i{font-size:1rem}
.btn-report{color:var(--accent-gold)!important}
.social-icon{float:right}

/* ============================================
   FILM DETAIL
   ============================================ */
.details{padding:16px 0}
.details .name h1{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.details .original-name{font-size:.9rem;color:var(--text-muted);margin-bottom:12px}
.film-info{background:var(--bg-card);border-radius:var(--radius);padding:20px;margin:16px 0;border:1px solid var(--border)}
.film-info .poster{float:left;width:200px;margin-right:20px}
.film-info .poster img{width:100%;border-radius:var(--radius);aspect-ratio:2/3;object-fit:cover}
.film-info .info-content{overflow:hidden}
.film-info .info-item{display:flex;padding:6px 0;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.04)}
.film-info .info-item:last-child{border-bottom:none}
.film-info .info-label{width:120px;color:var(--text-muted);flex-shrink:0;font-weight:500}
.film-info .info-value{flex:1;color:var(--text-primary)}
.film-info .info-value a{color:var(--accent-blue)}
.film-info .info-value a:hover{text-decoration:underline}
.watch-btn-group{display:flex;gap:10px;margin:16px 0}
.watch-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;border-radius:8px;
  font-weight:700;font-size:.9rem;
  cursor:pointer;transition:all var(--transition);
}
.watch-btn.primary{background:var(--accent);color:#fff}
.watch-btn.primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.watch-btn.secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary)}
.watch-btn.secondary:hover{border-color:var(--text-muted)}
/* Tags */
.tag-post-bottom{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0}
.tag-post-bottom a{padding:4px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;font-size:.78rem;color:var(--text-secondary);transition:all var(--transition)}
.tag-post-bottom a:hover{border-color:var(--accent);color:var(--accent)}
/* Rating */
.rating-area{display:flex;align-items:center;gap:12px;padding:12px 0}
.rating-area .star,#star{display:inline-block;line-height:0;font-size:0;white-space:nowrap;min-height:16px;vertical-align:middle}
#star img,.star img{float:left;display:block;max-width:none;width:16px;height:16px;margin:0 2px 0 0}
#star img:last-child,.star img:last-child{margin-right:0}
.rating-info{font-size:.85rem;color:var(--text-muted)}
/* Content synopsis */
.film-content{padding:16px 0;font-size:.92rem;line-height:1.8;color:var(--text-secondary)}
.film-content p{margin-bottom:12px}
/* Related films */
.related-films{margin-top:24px}
.related-films .caption{font-size:1rem}
/* Comments */
.fb-comments{margin-top:16px}

/* ============================================
   LIST / FILTER PAGE
   ============================================ */
.filter-bar{background:var(--bg-card);border-radius:var(--radius);padding:16px;margin-bottom:24px;border:1px solid var(--border)}
.filter-bar .form-group{display:inline-flex;align-items:center;gap:8px;margin-right:16px;margin-bottom:8px}
.filter-bar label{font-size:.83rem;color:var(--text-muted);font-weight:500}
.filter-bar select{padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.83rem;cursor:pointer}
.filter-bar select:focus{border-color:var(--accent)}
.filter-bar .btn-filter{padding:6px 18px;background:var(--accent);color:#fff;border-radius:6px;font-weight:600;font-size:.83rem;cursor:pointer;transition:background var(--transition)}
.filter-bar .btn-filter:hover{background:var(--accent-hover)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--text-muted);padding:8px 0;margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb i{font-size:.7rem}

/* ============================================
   PAGINATION
   ============================================ */
.pagination,#pagination,.vaochinhgiua{display:flex;justify-content:center;gap:4px;padding:24px 0;flex-wrap:wrap}
.pagination a,.pagination span,#pagination a,#pagination span,.vaochinhgiua a,.vaochinhgiua span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:6px;font-size:.85rem;font-weight:500;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-secondary);
  transition:all var(--transition);
}
.pagination a:hover,#pagination a:hover,.vaochinhgiua a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .active,.pagination .current,#pagination .active,#pagination .current,.vaochinhgiua .active,.vaochinhgiua .current{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============================================
   FOOTER
   ============================================ */
#footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  padding:40px 0 24px;
  margin-top:40px;
}
#footer .content{display:flex;flex-wrap:wrap;gap:32px}
#footer .views-row-1{flex:1;min-width:260px}
#footer .views-row-2,#footer .views-row-3,#footer .views-row-4,#footer .views-row-5{min-width:140px}
#footer .logo-footer{margin-bottom:12px}
#footer .logo-footer img{height:36px;width:auto}
#footer .copy-right p{font-size:.83rem;color:var(--text-muted);line-height:1.7}
#footer .social ul{display:flex;gap:12px;margin-top:12px}
#footer .social li a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-size:1rem;transition:all var(--transition)}
#footer .social li a:hover{border-color:var(--accent);color:var(--accent)}
#footer .views-row-2 p,#footer .views-row-3 p,#footer .views-row-4 p,#footer .views-row-5 p{font-weight:700;font-size:.9rem;margin-bottom:10px;color:#fff}
#footer .views-row-2 li a,#footer .views-row-3 li a,#footer .views-row-4 li a,#footer .views-row-5 li a{font-size:.83rem;color:var(--text-muted);display:block;padding:3px 0;transition:color var(--transition)}
#footer .views-row-2 li a:hover,#footer .views-row-3 li a:hover,#footer .views-row-4 li a:hover,#footer .views-row-5 li a:hover{color:var(--accent)}

/* ============================================
   ADS
   ============================================ */
.ads{text-align:center;margin:8px 0}
#ins-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998}
#ins-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;text-align:center}
#ins-close-button{position:absolute;top:-12px;right:-12px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;font-weight:700}
.ab1{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--bg-card);border-top:1px solid var(--border)}
.ab1x{text-align:center;padding:4px}
.ab2{display:inline-block;padding:2px 8px;background:var(--accent);color:#fff;font-size:.75rem;cursor:pointer;border-radius:4px;margin-bottom:4px}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media(max-width:768px){
  :root{--header-h:56px;--nav-h:0px}
  body{padding-top:var(--header-h)}
  .container{padding:0 12px}
  #header .container{gap:12px}
  #header .logo img{height:28px}
  /* Mobile hamburger */
  .btn-humber{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    font-size:1.3rem;color:#fff;cursor:pointer;flex-shrink:0;
  }
  .btn-humber.active{color:var(--accent)}
  /* Mobile search */
  .mobile-search-bar{
    position:fixed;top:0;left:0;right:0;z-index:1001;
    background:rgba(12,12,18,.98);padding:10px 12px;
    display:flex;align-items:center;gap:8px;
  }
  .mobile-search-bar.hide{display:none!important}
  .mobile-search-bar form{flex:1}
  .mobile-search-bar input{width:100%;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;font-size:.9rem;color:#fff}
  .mobile-search-bar i{font-size:1.2rem;color:var(--text-muted);cursor:pointer}
  .mobile-search-bar .close-button:hover{color:var(--accent)}
  .btn-search{font-size:1.2rem;color:#fff;cursor:pointer;margin-left:auto}
  .msuggestions{position:fixed!important;top:52px;left:12px;right:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);max-height:60vh;overflow-y:auto;box-shadow:var(--shadow)}
  /* Mobile menu */
  #main-menu{
    position:fixed;top:var(--header-h);left:-280px;
    width:280px;height:calc(100vh - var(--header-h));
    background:rgba(14,14,21,.99);
    overflow-y:auto;z-index:998;
    transition:left .3s ease;
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:14px 0 36px rgba(0,0,0,.45);
  }
  #main-menu.expanded{left:0}
  #main-menu ul{padding:8px 0}
  #main-menu > .container > ul > li > a{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;font-size:.9rem;font-weight:500;
    color:#d7dbe7;border-bottom:1px solid rgba(255,255,255,.05);
  }
  #main-menu > .container > ul > li > a:hover{color:#fff;background:rgba(255,255,255,.08)}
  #main-menu .sub-menu{display:none;background:rgba(8,8,12,.95);padding:4px 0 4px 24px}
  #main-menu .sub-menu li a{display:block;padding:8px 16px;font-size:.83rem;color:#c8cede}
  #main-menu .sub-menu li a:hover{color:#fff}
  #main-menu .sub-menu.absolute{position:static}
  #main-menu .menu-adult > a{color:#ffe39c;border-left:2px solid rgba(255,143,90,.55);background:linear-gradient(90deg,rgba(255,143,90,.18),rgba(229,9,20,.08))}
  #main-menu .menu-adult > a i{color:#ff9f43}
  #overlay_menu{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:997;transition:opacity .3s}
  #overlay_menu.hide{display:none}
  /* Mobile layout */
  .left-content{width:100%}
  .right-content{display:none}
  .list-film{grid-template-columns:repeat(3,1fr);gap:10px}
  #film-hot{grid-template-columns:repeat(3,1fr)}
  .film-item .title{padding:6px}
  .film-item .title .name{font-size:.75rem}
  .film-item .title .real-name{font-size:.65rem}
  .film-item .current-status{font-size:.6rem;padding:2px 6px}
  /* Mobile player */
  .box-player{border-radius:0;margin:0 -12px;width:calc(100% + 24px)}
  .list-server .server-item{flex-direction:column;align-items:flex-start;gap:8px}
  .list-episode a{min-width:44px;padding:4px 8px;font-size:.75rem}
  /* Mobile film info */
  .film-info .poster{float:none;width:140px;margin:0 auto 16px}
  .film-info .info-item{flex-direction:column;gap:2px}
  .film-info .info-label{width:auto}
  .details .name h1{font-size:1.1rem}
  /* Mobile filter */
  .filter-bar .form-group{display:flex;width:100%;margin-right:0}
  .filter-bar select{flex:1}
  /* Mobile footer */
  #footer .content{flex-direction:column;gap:20px}
  #footer{padding:24px 0 16px}
}

/* Small phones */
@media(max-width:480px){
  .list-film{grid-template-columns:repeat(3,1fr);gap:8px}
  #film-hot{grid-template-columns:repeat(3,1fr);gap:8px}
  .film-info{padding:12px}
}

/* Large screens */
@media(min-width:1400px){
  :root{--container:1360px}
}

/* ============================================
   UTILITIES & OVERRIDES
   ============================================ */
.uppercase{text-transform:uppercase}
.text-right{text-align:right}
.text-center{text-align:center}
.overlow-hidden{overflow:hidden}
.relative{position:relative}
.hide{display:none!important}
/* Facebook widget fix */
.fb-page,.fb-page iframe,.fb-page span{max-width:100%!important}
/* Bootstrap override */
.col-sm-8,.col-md-8,.col-lg-8{padding:0}
.col-sm-4,.col-md-4,.col-lg-4{padding:0}
.col-lg-2,.col-md-2,.col-sm-4,.col-xs-4{padding:0}
.col-lg-9,.col-md-10,.col-sm-8,.col-xs-8{padding:0}
.row{margin:0}

/* Error image */
#error-page{padding:60px 20px;text-align:center}
#error-404 .box-404{width:160px;height:160px;background:var(--accent);color:#fff;font-size:64px;line-height:160px;border-radius:12px;margin:0 auto 32px}
#error-404 h1{font-size:1.5rem;margin-bottom:12px}
#error-404 p{color:var(--text-muted);font-size:.9rem}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.film-item{animation:fadeIn .4s ease both}
.film-item:nth-child(2){animation-delay:.05s}.film-item:nth-child(3){animation-delay:.1s}
.film-item:nth-child(4){animation-delay:.15s}.film-item:nth-child(5){animation-delay:.2s}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Print */
@media print{#header,#main-menu,#footer,.ads{display:none}.left-content{width:100%}}