:root{--pageWidth:1200px;--panelOpacity:.75;--textColor:#eaeaea;--radius:14px;--gap:14px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--textColor);background:#0b0b0f}
a{color:inherit;text-decoration:none}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.bg{position:fixed;inset:0;background-size:cover;background-position:center;transform:scale(1.03);opacity:.9;z-index:-2}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85))}
.wrap{max-width:var(--pageWidth);margin:0 auto;padding:16px}
.panel{background:rgba(20,20,26,var(--panelOpacity));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.topbar{display:flex;align-items:center;gap:var(--gap);padding:12px 14px}
.logo a{font-weight:800;letter-spacing:.4px;font-size:18px}
.search{flex:1;display:flex;gap:10px}.search input{flex:1;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:var(--textColor);padding:0 12px;outline:none}
.search button{height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:var(--textColor);cursor:pointer}
.auth{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);cursor:pointer;font-weight:600}
.btn:hover{background:rgba(255,255,255,.12)}.btn.primary{background:rgba(255,255,255,.16)}.btn.danger{background:rgba(255,80,80,.12);border-color:rgba(255,80,80,.3)}
.main{margin-top:14px;display:grid;grid-template-columns:260px 1fr;gap:var(--gap)}
.sidebar{padding:12px;height:fit-content;position:sticky;top:14px}
.menu-link{font-weight:700;display:block;padding:8px 10px;border-radius:10px}.menu-link:hover{background:rgba(255,255,255,.08)}
.submenu{padding-left:8px;margin-top:4px;display:flex;flex-direction:column;gap:4px}
.submenu-link{opacity:.9;padding:6px 10px;border-radius:10px}.submenu-link:hover{background:rgba(255,255,255,.06)}
.content{display:flex;flex-direction:column;gap:var(--gap)}.footer{margin-top:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}.muted{opacity:.75}
.slider{overflow:hidden;padding:10px}.slides{position:relative;height:260px;border-radius:14px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.caption{position:absolute;left:14px;bottom:14px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1)}
.dots{display:flex;gap:8px;justify-content:center;padding-top:10px}
.dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);cursor:pointer}.dot.active{background:rgba(255,255,255,.5)}
.section{padding:12px}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 4px 10px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.card{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.poster{border-radius:12px;overflow:hidden;aspect-ratio:2/3;border:1px solid rgba(255,255,255,.08)}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.card-title{font-weight:700;font-size:13px;line-height:1.25}
.authbox{padding:18px;max-width:520px;margin:0 auto}.alert{background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.25);padding:10px 12px;border-radius:12px;margin-bottom:10px}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0}
.admin-nav a{opacity:.9;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:8px}
.form-grid .full{grid-column:1/-1}
input,select{width:100%;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);color:var(--textColor);padding:0 12px;outline:none}
.table{margin-top:14px}.row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr .4fr .6fr;gap:10px;padding:10px 6px;border-top:1px solid rgba(255,255,255,.08);align-items:center}
.row.head{font-weight:800;opacity:.9;border-top:0}.movie-head{display:flex;gap:16px}.poster.big{width:180px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.main{grid-template-columns:1fr}.sidebar{position:relative;top:auto}.grid{grid-template-columns:repeat(2,1fr)}.topbar{flex-wrap:wrap}.search{order:3;flex:1 0 100%}}
/* ===== MENU: submenu click mới mở ===== */
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.menu-toggle{
  width:32px;height:32px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--textColor);cursor:pointer
}
.menu-toggle:hover{background:rgba(255,255,255,.12)}
.submenu{display:none;padding-left:8px;margin-top:6px;flex-direction:column;gap:4px}
.menu-item.open .submenu{display:flex}

/* ===== SLIDER: chạy trái/phải + tốc độ ===== */
.slide{
  position:absolute;inset:0;opacity:0;
  transform:translateX(var(--enterX,0));
  transition:opacity var(--slideTrans,500ms) ease, transform var(--slideTrans,500ms) ease;
}
.slide.active{opacity:1;transform:translateX(0)}
.slide.leaving{opacity:0;transform:translateX(var(--leaveX,0))}
/* ===== Checkbox chips for topics ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer;user-select:none}
.chip input{width:16px;height:16px}
.chip.sub{opacity:.92}
.chips-sub{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px 18px}
.imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.imgpick{display:block;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  border-radius:12px;padding:8px;cursor:pointer}
.imgpick input{margin-bottom:8px}
.imgpick img{width:100%;height:90px;object-fit:cover;border-radius:10px;display:block}
.imgpick .name{font-size:12px;opacity:.85;margin-top:6px;word-break:break-all}
/* ===== WATCH PAGE ===== */
.movie-page{display:flex;flex-direction:column;gap:14px;margin:14px auto;max-width:var(--pageWidth,1200px)}
.movie-panel{padding:14px}

.movie-hero{position:relative;border-radius:18px;overflow:hidden;min-height:220px;background-size:cover;background-position:center}
.movie-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.80), rgba(0,0,0,.45), rgba(0,0,0,.75))}
.movie-hero__inner{position:relative;display:flex;gap:16px;padding:16px;align-items:flex-end}
.movie-hero__poster{width:150px;flex:0 0 150px}
.movie-hero__poster img{width:100%;height:210px;object-fit:cover;border-radius:14px;display:block;border:1px solid rgba(255,255,255,.10)}
.movie-hero__meta{flex:1;min-width:0}
.movie-title{margin:0 0 10px;font-size:28px;line-height:1.15}
.movie-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tag-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}

.movie-rating{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.rating-score{display:flex;align-items:baseline;gap:8px}
.score-num{font-size:30px;font-weight:700}
.score-sub{opacity:.9}
.score-count{opacity:.75}
.small{font-size:12px}

.stars-10{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.star{width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);cursor:pointer;font-size:16px;line-height:1;color:inherit}
.star:hover{background:rgba(255,255,255,.10)}
.star.on{background:rgba(255,255,255,.18)}

.movie-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* player */
.player-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35)}
.player{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}

/* episodes */
.episodes{margin-top:12px}
.episodes-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.episode-list{display:flex;flex-wrap:wrap;gap:10px}
.ep-btn{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);text-decoration:none;color:inherit}
.ep-btn:hover{background:rgba(255,255,255,.10)}
.ep-btn.active{background:rgba(255,255,255,.16)}
.ep-num{font-weight:700}
.ep-title{opacity:.9;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* auto next toggle */
.auto-next{display:flex;align-items:center;gap:10px}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);transition:all .15s}
.switch .slider:before{content:"";position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.92);transition:transform .15s}
.switch input:checked + .slider{background:rgba(0,255,180,.20);border-color:rgba(0,255,180,.40)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* info */
.movie-info{white-space:pre-wrap;margin:0;font-family:inherit;line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}
.gitem img{width:100%;height:100px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.10);display:block}

/* comments */
.comment-form textarea{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:inherit;padding:10px}
.comment-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.comment-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.comment{padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.comment-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.comment-user{font-weight:700}
.comment-text{white-space:pre-wrap;line-height:1.5}

/* cinema mode */
body.cinema-mode{background:#000 !important}
body.cinema-mode .movie-hero{filter:saturate(.9)}
body.cinema-mode .panel{background:rgba(0,0,0,.55) !important;border-color:rgba(255,255,255,.10)}
body.cinema-mode .player-wrap{border-color:rgba(255,255,255,.14)}
/* ===== Fix màu chữ nút cho đồng bộ toàn site ===== */
.btn, button { color: var(--textColor, #eaeaea); }
.btn.primary { color: var(--textColor, #eaeaea); }

/* ===== Lights Off (tắt đèn) ===== */
.lights-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  opacity:0; pointer-events:none;
  transition:opacity 220ms ease;
  z-index:1000;
}
body.lights-off .lights-overlay{
  opacity:1; pointer-events:auto;
}
body.lights-off [data-player-shell]{
  position:relative; z-index:1001;
  box-shadow:0 0 0 9999px rgba(0,0,0,0); /* giữ player nổi */
}

/* click vào overlay để tắt lights-off (tuỳ JS) */
body.lights-off{ background:#000 !important; }

/* ===== Player shell ===== */
.player-shell{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
}
.player{ width:100%; display:block; aspect-ratio:16/9; background:#000; }

/* ===== Custom Controls ===== */
.p-controls{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25));
  border-top:1px solid rgba(255,255,255,.10);
}
.p-btn{
  width:36px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  color: var(--textColor, #eaeaea);
}
.p-btn:hover{ background:rgba(255,255,255,.14); }
.p-time{ font-size:12px; opacity:.9; min-width:92px; text-align:center; }

.p-seek{
  flex:1;
  height:6px;
  accent-color: rgba(255,255,255,.85);
}
.p-vol{
  width:90px;
  height:6px;
  accent-color: rgba(255,255,255,.85);
}

/* ===== Fullscreen: nền tối hẳn ===== */
[data-player-wrap].is-fullscreen,
[data-player-shell].is-fullscreen{
  background:#000;
}

/* ===== Player Pro (giống web phim lớn) ===== */
.btn, button { color: var(--textColor, #eaeaea); }

/* Lights-off overlay */
.lights-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  opacity:0; pointer-events:none;
  transition:opacity 220ms ease;
  z-index:1000;
}
body.lights-off .lights-overlay{ opacity:1; pointer-events:auto; }
body.lights-off{ background:#000 !important; }

/* Player shell nổi trên overlay */
body.lights-off [data-player-shell]{ position:relative; z-index:1001; }

.player-shell{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
}
.player{ width:100%; display:block; aspect-ratio:16/9; background:#000; }

/* overlay center + loading */
.p-overlay{ position:absolute; inset:0; pointer-events:auto; }
.p-center{
  pointer-events:auto;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:74px; height:74px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:var(--textColor,#eaeaea);
  opacity:0;
  transition:opacity 160ms ease, transform 160ms ease;
}
.p-center.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.p-center:active{ transform:translate(-50%,-50%) scale(.98); }

.p-loading{
  pointer-events:none;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.75);
  animation:spin 0.9s linear infinite;
}
.p-loading[hidden]{ display:none !important; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* resume (xem tiếp) */
.p-resume{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.p-resume[hidden]{ display:none !important; }
.p-resume-card{
  width:min(360px, calc(100% - 28px));
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  padding:14px 14px 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.p-resume-title{ font-weight:800; margin-bottom:6px; }
.p-resume-time{ font-size:13px; margin-bottom:10px; }
.p-resume-actions{ display:flex; gap:10px; }
.p-resume-btn{
  flex:1;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.92);
  color:#111 !important;
  cursor:pointer;
}
.p-resume-btn:hover{ background:rgba(255,255,255,1); }
.p-resume-btn.ghost{
  background:transparent;
  color:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.28);
}

/* top bar */
.p-top{
  position:absolute; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.05));
  z-index:2;
  opacity:1; transition:opacity 160ms ease;
}
.p-title{ min-width:0; }
.p-title-main{ font-weight:700; }
.p-title-sub{ margin-left:8px; font-size:12px; }
.p-top-actions{ display:flex; gap:8px; }

/* controls (bottom) */
.p-controls{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center;
  gap:10px;
  padding:10px;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.12));
  border-top:1px solid rgba(255,255,255,.10);
  z-index:2;
  opacity:1; transition:opacity 160ms ease;
}

/* auto hide */
.player-shell.hide-ui .p-controls,
.player-shell.hide-ui .p-top{ opacity:0; pointer-events:none; }

.p-btn{
  width:36px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  color:var(--textColor, #eaeaea);
  display:flex; align-items:center; justify-content:center;
}
.p-btn:hover{ background:rgba(255,255,255,.14); }
.ico{ display:inline-flex; }

.p-time{ font-size:12px; opacity:.92; min-width:100px; text-align:center; }

.p-seekwrap{
  position:relative;
  flex:1;
  height:18px;
  display:flex;
  align-items:center;
}
.p-buffer{
  position:absolute;
  left:0; right:0;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  transform-origin:left center;
  transform:scaleX(0);
  pointer-events:none;
}
.p-seek{
  width:100%;
  height:6px;
  appearance:none;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  outline:none;
  position:relative;
  z-index:1;
}
.p-seek::-webkit-slider-thumb{
  appearance:none;
  width:14px; height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.25);
  cursor:pointer;
}
.p-seek::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.25);
  cursor:pointer;
}

.p-tooltip{
  position:absolute;
  bottom:24px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  transform:translateX(-50%);
  white-space:nowrap;
  pointer-events:none;
}

.p-vol{ width:96px; height:6px; accent-color: rgba(255,255,255,.85); }

/* speed menu */
.p-speed{ position:relative; }
.p-speed-menu{
  position:absolute;
  right:0;
  bottom:44px;
  min-width:110px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.p-speed-item{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--textColor,#eaeaea);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  text-align:left;
}
.p-speed-item:hover{ background:rgba(255,255,255,.14); }
.p-speed-item.active{ background:rgba(255,255,255,.20); }

/* Fullscreen: nền tối hơn */
.player-shell:fullscreen{ background:#000; }
/* FIX: không cho CSS ghi đè hidden */
.p-speed-menu[hidden]{ display:none !important; }
.p-tooltip[hidden]{ display:none !important; }

/* ===== Pagination ===== */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:8px}
.pager-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.pager-btn,.pager-page{min-width:42px}
.pager-page.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22)}
.pager-btn.disabled{opacity:.45;pointer-events:none;cursor:default}
.pager-ellipsis{opacity:.75;padding:0 2px}


/* ===== Poster badges ===== */
.poster{position:relative}
.poster-badges{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-start;
  pointer-events:none;
  z-index:3;
}
.poster-badges--hero{top:10px;left:10px;right:10px}
.poster-badge{
  --badgeBg:#374151;
  --badgeColor:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--badgeBg);
  color:var(--badgeColor);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
  line-height:1;
  backdrop-filter: blur(6px);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.poster-badge--episode{margin-left:auto}
.poster--hero .poster-badge{font-size:11px;min-height:22px;padding:4px 7px}