*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;--surface:#111118;--card:#16161e;--ch:#1e1e28;
  --red:#e8223a;--rd:#b01a2e;--green:#22c55e;
  --text:#f0eee8;--muted:#9090a8;--muted2:#5a5a72;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.1);
  --font:'Be Vietnam Pro',sans-serif;--r:8px;--rl:12px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
img{display:block}button{cursor:pointer;font-family:var(--font)}a{text-decoration:none;color:inherit}

/* LOADING */
#ls{position:fixed;inset:0;background:var(--bg);z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#ls.hide{opacity:0;visibility:hidden;pointer-events:none}
.llogo{font-size:2rem;font-weight:800;letter-spacing:.15em;margin-bottom:1.5rem}
.llogo span{color:var(--red)}
.lbw{width:180px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-bottom:.8rem}
.lb{height:100%;background:var(--red);width:0%;transition:width .35s ease;border-radius:2px}
.ltxt{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;display:flex;align-items:center;padding:0 3vw;gap:1.5rem;background:rgba(10,10,15,.95);border-bottom:.5px solid var(--border);backdrop-filter:blur(12px)}
.nlogo{font-size:1.2rem;font-weight:800;letter-spacing:.1em;white-space:nowrap;cursor:pointer}
.nlogo span{color:var(--red)}
.nlinks{display:flex;gap:1.4rem;list-style:none;flex:1}
.nlinks a{font-size:.8rem;font-weight:500;color:var(--muted);transition:color .2s;cursor:pointer;white-space:nowrap}
.nlinks a:hover,.nlinks a.act{color:var(--text)}
.nsearch{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;background:var(--card);border:.5px solid var(--border2);border-radius:20px;padding:6px 14px;min-width:190px;cursor:pointer;transition:border-color .2s}
.nsearch:hover{border-color:rgba(232,34,58,.4)}
.nsearch input{background:none;border:none;outline:none;font-size:.8rem;color:var(--text);font-family:var(--font);width:100%;cursor:pointer;pointer-events:none}
.nsearch input::placeholder{color:var(--muted2)}
.nsearch-ic{color:var(--muted);font-size:.9rem;flex:0 0 auto}
.nwl{background:var(--red);color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:.75rem;font-weight:700;white-space:nowrap;transition:background .2s;flex:0 0 auto}
.nwl:hover{background:var(--rd)}

/* HERO */
.hero{position:relative;height:500px;overflow:hidden;margin-top:60px}
.hbg{position:absolute;inset:0;background:var(--surface)}
.hbg img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hov{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,10,15,.97) 35%,rgba(10,10,15,.55) 65%,transparent 85%),linear-gradient(to top,rgba(10,10,15,1) 0%,transparent 35%)}
.hcon{position:relative;z-index:2;padding:0 4vw;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:540px}
.htags{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.htag{font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:4px}
.th{background:var(--red);color:#fff}
.ty{background:rgba(255,255,255,.1);color:var(--text)}
.tep{background:rgba(34,197,94,.15);color:var(--green);border:.5px solid rgba(34,197,94,.3)}
.htitle{font-size:clamp(1.7rem,3.2vw,2.8rem);font-weight:800;line-height:1.1;margin-bottom:10px;letter-spacing:-.01em}
.hdesc{font-size:.83rem;color:rgba(240,238,232,.55);line-height:1.65;margin-bottom:18px;max-width:400px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hmeta{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.hmi{font-size:.73rem;color:var(--muted)}
.hmdot{width:3px;height:3px;border-radius:50%;background:var(--muted2)}
.hbtn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:none;padding:11px 22px;border-radius:6px;font-size:.86rem;font-weight:700;transition:all .2s}
.hbtn:hover{background:var(--rd);transform:translateY(-1px)}

/* MAIN */
.main{padding:0 3vw 4rem}

/* SECTION */
.sec{margin-bottom:2.5rem}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.sec-t{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-t::before{content:'';width:3px;height:16px;background:var(--red);border-radius:2px;flex:0 0 auto}
.sec-m{font-size:.73rem;color:var(--muted);font-weight:500;border:none;background:none;display:flex;align-items:center;gap:3px;transition:color .2s}
.sec-m:hover{color:var(--text)}

/* MOVIE ROW & CARD */
.mr{display:flex;gap:11px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.mr::-webkit-scrollbar{display:none}
.mc{flex:0 0 155px;position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .26s ease,box-shadow .26s ease;background:var(--card)}
.mc:hover{transform:translateY(-5px) scale(1.025);box-shadow:0 14px 36px rgba(0,0,0,.55)}
.mc-iw{position:relative;aspect-ratio:2/3;overflow:hidden}
.mc-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mc:hover .mc-img{transform:scale(1.07)}
.mc-fb{width:100%;aspect-ratio:2/3;background:var(--ch);display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:2rem}
.mc-hd{position:absolute;top:5px;right:5px;background:var(--green);color:#fff;font-size:.53rem;font-weight:700;letter-spacing:.05em;padding:2px 5px;border-radius:3px}
.mc-ep{position:absolute;top:5px;left:5px;background:rgba(10,10,15,.8);color:var(--muted);font-size:.56rem;padding:2px 6px;border-radius:3px;border:.5px solid var(--border2)}
.mc-ov{position:absolute;inset:0;background:rgba(10,10,15,.68);opacity:0;transition:opacity .22s;display:flex;align-items:center;justify-content:center}
.mc:hover .mc-ov{opacity:1}
.mc-play{width:40px;height:40px;border-radius:50%;background:var(--red);border:none;color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:transform .18s}
.mc:hover .mc-play{transform:scale(1.1)}
.mc-add{position:absolute;bottom:5px;right:5px;background:rgba(10,10,15,.82);border:.5px solid var(--border2);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.82rem;opacity:0;transition:all .2s}
.mc:hover .mc-add{opacity:1}
.mc-add:hover,.mc-add.wl{background:var(--red);border-color:var(--red);opacity:1}
.mc-info{padding:7px 6px 5px}
.mc-title{font-size:.76rem;font-weight:600;line-height:1.25;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-yr{font-size:.66rem;color:var(--muted2)}

/* SKELETON */
.sk{flex:0 0 155px;border-radius:var(--r);overflow:hidden;background:var(--card)}
.ski{aspect-ratio:2/3;background:linear-gradient(90deg,var(--card) 25%,var(--ch) 50%,var(--card) 75%);background-size:400%;animation:skl 1.5s infinite}
.skl1{height:9px;border-radius:3px;background:linear-gradient(90deg,var(--card) 25%,var(--ch) 50%,var(--card) 75%);background-size:400%;animation:skl 1.5s infinite;margin:7px 6px 4px}
.skl2{height:7px;width:50%;border-radius:3px;background:linear-gradient(90deg,var(--card) 25%,var(--ch) 50%,var(--card) 75%);background-size:400%;animation:skl 1.5s infinite;margin:0 6px 5px}
@keyframes skl{0%{background-position:100%}100%{background-position:-100%}}

/* GENRE TABS */
.gtabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:1.1rem;padding-bottom:2px}
.gtabs::-webkit-scrollbar{display:none}
.gt{flex:0 0 auto;background:var(--card);border:.5px solid var(--border);color:var(--muted);padding:5px 13px;border-radius:20px;font-size:.72rem;font-weight:500;transition:all .2s;white-space:nowrap}
.gt.act,.gt:hover{background:var(--red);border-color:var(--red);color:#fff}

/* DIVIDER */
.dv{height:.5px;background:var(--border);margin:0 0 2.5rem}

/* SEARCH OVERLAY */
.sov{position:fixed;inset:0;background:rgba(10,10,15,.97);backdrop-filter:blur(20px);z-index:500;display:flex;flex-direction:column;align-items:center;padding-top:14vh;opacity:0;pointer-events:none;transition:opacity .25s}
.sov.open{opacity:1;pointer-events:all}
.sov-x{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:var(--muted);font-size:1.3rem;transition:color .2s}
.sov-x:hover{color:var(--text)}
.sov-w{width:min(540px,88vw);position:relative;margin-bottom:2rem}
.sov-inp{width:100%;background:var(--card);border:.5px solid var(--border2);border-radius:var(--rl);padding:13px 16px 13px 44px;font-size:.95rem;color:var(--text);font-family:var(--font);outline:none;transition:border-color .2s}
.sov-inp:focus{border-color:rgba(232,34,58,.5)}
.sov-inp::placeholder{color:var(--muted2)}
.sov-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sov-res{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:580px;width:100%;max-height:55vh;overflow-y:auto;padding:0 .5rem;scrollbar-width:thin;scrollbar-color:var(--muted2) transparent}
.sov-c{flex:0 0 98px;cursor:pointer;border-radius:var(--r);overflow:hidden;transition:transform .2s;background:var(--card)}
.sov-c:hover{transform:scale(1.07)}
.sov-c img{width:100%;aspect-ratio:2/3;object-fit:cover}
.sov-cf{width:100%;aspect-ratio:2/3;background:var(--ch);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.sov-ct{font-size:.62rem;color:var(--muted);padding:4px;text-align:center;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* =========================================
   TRANG XEM PHIM CHUYÊN DỤNG (WATCH PAGE)
   ========================================= */
.page{display:none;}
.show-page{display:block;}
.w-container{max-width: 1200px; margin: 0 auto;}

.w-player-box{background:#000;border-radius:var(--r);overflow:hidden;margin-bottom:2rem;border:.5px solid var(--border2);box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
.w-ph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(232,34,58,.1);border-bottom:.5px solid rgba(232,34,58,.2)}
.w-phl{font-size:.85rem;font-weight:700;color:var(--text)}
.w-phr{font-size:.75rem;color:var(--muted)}
.w-iframe-wrap{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface)}
.w-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.w-noplayer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-weight:500;text-align:center;padding:1rem;}

.w-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;}
.w-info{padding-right: 1rem;}
.w-title{font-size:1.8rem;font-weight:800;line-height:1.2;margin-bottom:.4rem}
.w-origin{font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.w-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
.w-tags span{background:rgba(255,255,255,.05);border:.5px solid var(--border2);color:var(--muted);font-size:.7rem;padding:3px 10px;border-radius:4px}
.w-stats{display:flex;gap:1rem;font-size:.8rem;color:var(--muted);flex-wrap:wrap;margin-bottom:1.5rem}
.w-stats strong{color:var(--text)}

.w-actions{display:flex;gap:10px;margin-bottom:1.5rem}
.bghost{display:inline-flex;align-items:center;gap:6px;background:var(--card);color:var(--text);border:.5px solid var(--border2);padding:10px 18px;border-radius:6px;font-size:.85rem;font-weight:600;transition:all .2s;}
.bghost:hover{background:rgba(255,255,255,.1);border-color:var(--border)}

.w-desc{font-size:.9rem;line-height:1.75;color:rgba(240,238,232,.7);margin-bottom:1.5rem;}
.w-sec-title{font-size:1rem;font-weight:700;margin-bottom:.8rem;display:flex;align-items:center;gap:8px}
.w-sec-title::before{content:'';width:3px;height:14px;background:var(--red);border-radius:2px}

.w-cast{display:flex;flex-wrap:wrap;gap:8px}
.w-cast span{background:var(--card);border:.5px solid var(--border);color:var(--muted);font-size:.75rem;padding:5px 12px;border-radius:4px}

.w-eps{background:var(--card);border:.5px solid var(--border2);border-radius:var(--r);padding:1.2rem;}
.epstabs{display:flex;gap:6px;flex-wrap:wrap;}
.epst{background:var(--surface);border:.5px solid var(--border);color:var(--muted);padding:6px 14px;border-radius:4px;font-size:.75rem;font-weight:600;transition:all .2s}
.epst.act,.epst:hover{background:var(--red);border-color:var(--red);color:#fff}
.epgrid{display:flex;flex-wrap:wrap;gap:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--muted2) transparent}
.epb{background:var(--surface);border:.5px solid var(--border);color:var(--muted);padding:7px 12px;border-radius:4px;font-size:.8rem;font-weight:600;transition:all .2s;min-width:60px;text-align:center;flex-grow:1}
.epb:hover,.epb.act{background:var(--red);border-color:var(--red);color:#fff}

/* WATCHLIST PAGE & FOOTER */
.wlg{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:11px}
.wlc{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .24s;background:var(--card)}
.wlc:hover{transform:translateY(-3px)}
.wlc img{width:100%;aspect-ratio:2/3;object-fit:cover}
.wlcfb{width:100%;aspect-ratio:2/3;background:var(--ch);display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.wlci{padding:6px}
.wlct{font-size:.72rem;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wlcy{font-size:.63rem;color:var(--muted2);margin-top:2px}
.wlrm{position:absolute;top:5px;right:5px;background:rgba(10,10,15,.82);border:.5px solid var(--border2);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.72rem;opacity:0;transition:all .2s}
.wlc:hover .wlrm{opacity:1}
.wlrm:hover{background:var(--red);border-color:var(--red)}
.empt{text-align:center;padding:4rem 1rem;color:var(--muted)}
.empt .ei{font-size:3rem;margin-bottom:.8rem;opacity:.3}

footer{border-top:.5px solid var(--border);padding:1.6rem 3vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ftb{font-size:1rem;font-weight:800;letter-spacing:.1em}
.ftb span{color:var(--red)}
.ftl{display:flex;gap:1.2rem}
.ftl a{font-size:.7rem;color:var(--muted);transition:color .2s}
.ftl a:hover{color:var(--text)}
.ftc{font-size:.63rem;color:var(--muted2)}

.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(14px);background:var(--card);border:.5px solid var(--border2);padding:8px 16px;border-radius:6px;font-size:.76rem;font-weight:500;opacity:0;transition:all .25s;z-index:1000;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:900px){
  .w-grid{grid-template-columns:1fr;}
  .w-info{padding-right:0;}
}
@media(max-width:768px){
  .hero{height:400px}.htitle{font-size:1.5rem}
  .nlinks{display:none}.mc,.sk{flex:0 0 132px}
}
@media(max-width:480px){.mc,.sk{flex:0 0 116px}.hero{height:340px}}