@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');
/* ============================================================
   THEME VODI — nền tối #131722 xen kẽ section sáng #f6f7f9,
   nhấn xanh dương #29a9e0, Montserrat (tiêu đề) + Open Sans (nội dung)
   ============================================================ */
body.vd-theme{
    --vd-bg:#131722; --vd-panel:#1b2436; --vd-panel2:#232f47;
    --vd-footer:#0b0e17; --vd-light:#f6f7f9; --vd-ink:#333e48;
    --vd-accent:#29a9e0; --vd-accent-d:#1f8cbd;
    --vd-txt:#eef1f7; --vd-mut:#949cb0; --vd-mut2:#c3c9d8;
    --vd-line:#262f45;
    --vd-head:'Montserrat','Open Sans',sans-serif;
    --vd-body:'Open Sans',sans-serif;
    background:var(--vd-bg); color:var(--vd-txt);
    font-family:var(--vd-body); font-size:15px; line-height:1.55;
}
body.vd-theme #app{ min-height:60vh; }
.vd-header *,.vd-hero *,.vd-sec *,.vd-vbanner *,.vd-spot *,.vd-detail *,.vd-arc *,.vd-footer *,.vd-drawer *,.vd-tmodal *,.vd-side *{ box-sizing:border-box; }
.vd-wrap{ max-width:1440px; margin:0 auto; padding:0 24px; }
body.vd-theme a{ text-decoration:none; }
body.vd-theme img{ max-width:100%; }
body.vd-theme h1,body.vd-theme h2,body.vd-theme h3,body.vd-theme h4{ font-family:var(--vd-head); }
.hidden{ display:none !important; }

/* ---------- Header trắng ---------- */
.vd-header{ background:#fff; color:var(--vd-ink); position:relative; z-index:60; box-shadow:0 1px 0 rgba(19,23,34,.07); }
.vd-header-in{ max-width:1440px; margin:0 auto; padding:0 24px; height:82px; display:flex; align-items:center; gap:20px; }
.vd-burger{ background:none; border:0; cursor:pointer; padding:9px 6px; display:flex; flex-direction:column; gap:5px; flex:0 0 auto; }
.vd-burger span{ display:block; width:22px; height:2px; background:var(--vd-ink); border-radius:2px; }
.vd-logo{ display:flex; align-items:center; flex:0 0 auto; }
.vd-logo img{ height:40px; width:auto; }
.vd-logo-txt{ font-family:var(--vd-head); font-weight:800; font-size:31px; letter-spacing:-1px; color:var(--vd-accent); text-transform:lowercase; line-height:1; }
.vd-logo-txt.light{ color:#fff; }
.vd-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.vd-nav > a, .vd-dd-btn{ font-family:var(--vd-head); font-weight:600; font-size:14.5px; color:var(--vd-ink); padding:9px 11px; border-radius:4px; white-space:nowrap; }
.vd-nav > a:hover, .vd-dd-btn:hover{ color:var(--vd-accent); }
.vd-nav > a.on{ color:var(--vd-accent); }
.vd-dd-wrap{ position:relative; }
.vd-dd-btn{ background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.vd-dd-menu{ position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid #e6e9ef; border-radius:6px; box-shadow:0 14px 34px rgba(19,23,34,.16); padding:10px; min-width:430px; max-width:560px; max-height:60vh; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; z-index:70; }
.vd-dd-menu[hidden]{ display:none; }
.vd-dd-menu a{ color:var(--vd-ink); font-size:14px; padding:7px 9px; border-radius:4px; }
.vd-dd-menu a:hover{ background:var(--vd-light); color:var(--vd-accent); }
.vd-head-r{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.vd-search{ position:relative; width:308px; flex:0 0 auto; }
.vd-search form{ display:flex; align-items:center; background:#fff; border:1.5px solid #dfe3ea; border-radius:999px; padding:0 6px 0 18px; height:44px; transition:border-color .2s; }
.vd-search form:focus-within{ border-color:var(--vd-accent); }
.vd-search input{ flex:1; min-width:0; border:0; outline:0; font-size:14px; font-family:var(--vd-body); color:var(--vd-ink); background:transparent; }
.vd-search-go{ background:none; border:0; cursor:pointer; color:#7c8798; padding:7px; display:flex; }
.vd-search-go:hover{ color:var(--vd-accent); }
.vd-search .search-suggest{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid #e6e9ef; border-radius:8px; box-shadow:0 16px 38px rgba(19,23,34,.18); overflow:hidden; z-index:75; text-align:left; }
.vd-icon-btn{ background:none; border:0; cursor:pointer; color:var(--vd-ink); padding:8px; display:none; }
.vd-upload{ display:inline-flex; align-items:center; gap:7px; color:var(--vd-ink); font-weight:600; font-size:14px; white-space:nowrap; }
.vd-upload:hover{ color:var(--vd-accent); }
.vd-user-wrap{ position:relative; }
.vd-avatar{ width:40px; height:40px; border-radius:50%; border:0; background:var(--vd-light); color:var(--vd-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vd-avatar:hover{ background:#e9edf3; color:var(--vd-accent); }
.vd-user-menu{ position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid #e6e9ef; border-radius:6px; box-shadow:0 14px 34px rgba(19,23,34,.16); min-width:180px; padding:7px; z-index:75; }
.vd-user-menu[hidden]{ display:none; }
.vd-user-menu a{ display:block; color:var(--vd-ink); font-size:14px; padding:8px 10px; border-radius:4px; }
.vd-user-menu a:hover{ background:var(--vd-light); color:var(--vd-accent); }

/* ---------- Drawer trượt trái ---------- */
.vd-overlay{ position:fixed; inset:0; background:rgba(10,13,20,.55); opacity:0; pointer-events:none; transition:opacity .28s; z-index:90; }
body.vd-drawer-open .vd-overlay{ opacity:1; pointer-events:auto; }
.vd-drawer{ position:fixed; top:0; left:0; bottom:0; width:264px; max-width:84vw; background:#fff; color:var(--vd-ink); z-index:95; transform:translateX(-105%); transition:transform .3s ease; overflow-y:auto; box-shadow:0 0 44px rgba(0,0,0,.3); }
body.vd-drawer-open .vd-drawer{ transform:translateX(0); }
.vd-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; }
.vd-drawer-x{ background:none; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--vd-ink); }
.vd-drawer-member{ display:flex; align-items:center; gap:9px; margin:4px 20px 12px; padding:10px 13px; background:var(--vd-light); border-radius:6px; color:var(--vd-ink); font-weight:700; font-size:14px; }
.vd-drawer-nav{ padding:4px 12px 22px; display:flex; flex-direction:column; }
.vd-drawer-nav > a, .vd-drawer-drop > button{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid #eef1f5; padding:12px 8px; font-size:15px; font-weight:600; color:var(--vd-ink); cursor:pointer; font-family:var(--vd-body); }
.vd-drawer-nav > a:hover, .vd-drawer-drop > button:hover{ color:var(--vd-accent); }
.vd-drawer-drop > button i{ font-style:normal; color:var(--vd-accent); font-size:17px; transition:transform .2s; }
.vd-drawer-drop.open > button i{ transform:rotate(45deg); }
.vd-drawer-sub{ display:none; padding:4px 0 8px 14px; }
.vd-drawer-drop.open .vd-drawer-sub{ display:block; }
.vd-drawer-sub a{ display:block; padding:6px 8px; font-size:14px; color:#5a6a7d; }
.vd-drawer-sub a:hover{ color:var(--vd-accent); }

/* ---------- Nút dùng chung ---------- */
.vd-btn-accent{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--vd-accent); color:#fff !important; font-family:var(--vd-head); font-weight:700; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; padding:14px 34px; border-radius:4px; border:0; cursor:pointer; transition:background .2s; }
.vd-btn-accent:hover{ background:var(--vd-accent-d); }
.vd-btn-accent.sm{ padding:11px 24px; }
.vd-btn-accent.block{ display:flex; width:100%; margin-top:12px; }
.vd-btn-outline{ display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#fff; font-family:var(--vd-head); font-weight:700; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; padding:13px 30px; border-radius:4px; border:1px solid rgba(255,255,255,.75); cursor:pointer; transition:.2s; }
.vd-btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.vd-btn-outline.on{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-link-wl{ background:none; border:0; color:var(--vd-accent); font-weight:700; font-size:14px; cursor:pointer; padding:6px 2px; }
.vd-link-wl.on{ color:#7fd4a8; }

/* ---------- Hero ---------- */
.vd-hero{ position:relative; background:#0d1017; overflow:hidden; }
.vd-hero-slide{ position:relative; display:none; min-height:604px; }
.vd-hero-slide.on{ display:block; }
.vd-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.vd-hero-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,16,23,.93) 0%, rgba(13,16,23,.62) 52%, rgba(13,16,23,.18) 80%), linear-gradient(0deg, rgba(19,23,34,.9) 0%, rgba(19,23,34,0) 46%); }
.vd-hero-in{ position:relative; height:100%; min-height:604px; display:flex; align-items:center; }
.vd-hero-txt{ max-width:600px; padding:56px 0 120px; }
.vd-hero-title{ font-size:57px; font-weight:800; line-height:1.06; margin:0 0 16px; text-transform:none; }
.vd-hero-title a{ color:#fff; }
.vd-hero-title a:hover{ color:var(--vd-accent); }
.vd-hero-meta{ color:var(--vd-mut2); font-size:15.5px; margin-bottom:30px; }
.vd-hero-acts{ display:flex; gap:14px; flex-wrap:wrap; }
.vd-hero-rec{ position:absolute; right:max(24px, calc((100vw - 1440px) / 2 + 24px)); bottom:44px; width:548px; z-index:3; }
.vd-hero-rec h4{ color:#fff; font-size:19px; font-weight:700; margin:0 0 13px; }
.vd-hero-thumbs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.vd-hero-th{ border:2px solid transparent; border-radius:4px; overflow:hidden; padding:0; background:#1a1a1a; cursor:pointer; aspect-ratio:16/9; opacity:.62; transition:.2s; }
.vd-hero-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.vd-hero-th:hover{ opacity:.9; }
.vd-hero-th.on{ opacity:1; border-color:var(--vd-accent); }

/* ---------- Section dùng chung ---------- */
.vd-sec{ padding:64px 0 58px; }
.vd-sec.vd-light{ background:var(--vd-light); color:var(--vd-ink); }
.vd-sec-head{ position:relative; margin-bottom:30px; }
.vd-kick{ display:block; width:44px; height:3px; background:var(--vd-accent); border-radius:2px; margin-bottom:14px; }
.vd-sec-head h2{ font-size:36px; font-weight:700; margin:0; line-height:1.15; color:#fff; }
.vd-light .vd-sec-head h2{ color:var(--vd-ink); }
.vd-sec-sub{ color:var(--vd-mut); font-size:15px; margin:7px 0 0; }
.vd-light .vd-sec-sub{ color:#77879a; }
.vd-viewall{ position:absolute; right:0; bottom:2px; font-family:var(--vd-head); font-size:12.5px; font-weight:700; letter-spacing:1.6px; color:var(--vd-mut); text-transform:uppercase; }
.vd-viewall:hover{ color:var(--vd-accent); }
.vd-viewall span{ color:var(--vd-accent); font-size:15px; }
.vd-more-row{ text-align:center; margin-top:36px; padding-top:26px; border-top:1px solid var(--vd-line); }
.vd-light .vd-more-row{ border-top-color:#e2e6ec; }
.vd-more-btn{ display:inline-block; min-width:210px; padding:13px 26px; border:1px solid var(--vd-line); border-radius:4px; color:#fff; font-family:var(--vd-head); font-weight:700; font-size:14px; background:rgba(255,255,255,.03); transition:.2s; }
.vd-more-btn:hover{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-light .vd-more-btn{ color:var(--vd-ink); border-color:#d5dae2; background:#fff; }
.vd-light .vd-more-btn:hover{ color:#fff; background:var(--vd-accent); border-color:var(--vd-accent); }

/* ---------- Thẻ poster dọc ---------- */
.vd-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:22px 18px; }
.vd-card{ min-width:0; }
.vd-thumb{ position:relative; display:block; border-radius:3px; overflow:hidden; aspect-ratio:2/3; background:#1d2434; }
.vd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.vd-card:hover .vd-thumb img{ transform:scale(1.05); }
.vd-b-feat{ position:absolute; top:0; left:50%; transform:translate(-50%, 0); background:var(--vd-accent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:4px 12px; border-radius:0 0 4px 4px; white-space:nowrap; }
.vd-card-meta{ color:var(--vd-mut); font-size:12.5px; margin-top:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-light .vd-card-meta{ color:#8b99ab; }
.vd-card-name{ font-size:14.5px; font-weight:700; line-height:1.35; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vd-card-name a{ color:#fff; }
.vd-card-name a:hover{ color:var(--vd-accent); }
.vd-light .vd-card-name a{ color:var(--vd-ink); }

/* ---------- Khối tách đôi (split) ---------- */
.vd-split{ display:grid; grid-template-columns:295px 1fr; gap:38px; align-items:start; }
.vd-split.rev .vd-split-head{ order:2; }
.vd-split.rev .vd-split-body{ order:1; }
.vd-split-head{ position:relative; }
.vd-split-head h2{ font-size:34px; font-weight:700; margin:0 0 18px; line-height:1.18; color:#fff; }
.vd-light .vd-split-head h2{ color:var(--vd-ink); }
.vd-split-head .vd-viewall{ position:static; display:inline-block; margin-top:20px; }
.vd-tabs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vd-tabs button{ background:none; border:0; cursor:pointer; font-size:14px; font-weight:600; color:var(--vd-mut); padding:2px 0; font-family:var(--vd-body); }
.vd-tabs button.on{ color:var(--vd-accent); }
.vd-tabs span{ color:var(--vd-mut); opacity:.6; }
.vd-split-nav{ display:flex; gap:10px; margin-top:24px; }
.vd-round-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--vd-line); background:transparent; color:#fff; font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; line-height:1; }
.vd-round-btn:hover{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-light .vd-round-btn{ border-color:#d5dae2; color:var(--vd-ink); }
.vd-light .vd-round-btn:hover{ color:#fff; background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-split-body{ min-width:0; }
.vd-row{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.vd-row::-webkit-scrollbar{ display:none; }
.vd-row > .vd-cell{ flex:0 0 calc((100% - 5 * 18px) / 6); scroll-snap-align:start; min-width:0; }
.vd-row .vd-card{ width:100%; }

/* ---------- Thẻ ngang 16:9 ---------- */
.vd-lgrid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px 18px; }
.vd-lcard{ display:block; min-width:0; }
.vd-lthumb{ position:relative; display:block; border-radius:3px; overflow:hidden; aspect-ratio:16/9; background:#1d2434; }
.vd-lthumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.vd-lcard:hover .vd-lthumb img{ transform:scale(1.05); }
.vd-lthumb .vd-b-feat{ border-radius:0 0 4px 4px; }
.vd-lmeta{ display:block; color:var(--vd-mut); font-size:12.5px; margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-light .vd-lmeta{ color:#8b99ab; }
.vd-lname{ display:block; color:#fff; font-size:14.5px; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-lcard:hover .vd-lname{ color:var(--vd-accent); }
.vd-light .vd-lname{ color:var(--vd-ink); }

/* ---------- Banner video full-bleed ---------- */
.vd-vbanner{ position:relative; background-size:cover; background-position:center 22%; min-height:560px; display:flex; align-items:center; }
.vd-vbanner-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,16,23,.93) 0%, rgba(13,16,23,.55) 55%, rgba(13,16,23,.12) 85%), linear-gradient(0deg, rgba(19,23,34,.75), rgba(19,23,34,0) 50%); }
.vd-vbanner-in{ position:relative; width:100%; display:flex; align-items:center; gap:30px; }
.vd-vbanner-txt{ max-width:600px; }
.vd-vbanner-kick{ color:var(--vd-accent); font-family:var(--vd-head); font-size:12.5px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.vd-vbanner-txt h2{ font-size:44px; font-weight:800; margin:12px 0 14px; line-height:1.1; }
.vd-vbanner-txt h2 a{ color:#fff; }
.vd-vbanner-txt p{ color:var(--vd-mut2); font-size:15px; line-height:1.65; margin:0 0 26px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vd-bigplay{ margin-left:auto; flex:0 0 auto; width:118px; height:118px; border-radius:50%; border:1.5px solid rgba(255,255,255,.65); background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; }
.vd-bigplay svg{ width:40px; height:40px; margin-left:5px; }
.vd-bigplay:hover{ background:rgba(255,255,255,.13); color:#fff; transform:scale(1.05); }

/* ---------- Spotlight phim bộ full-bleed ---------- */
.vd-spot{ position:relative; background-size:cover; background-position:center 20%; padding:84px 0 0; overflow:hidden; }
.vd-spot-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(19,23,34,.96) 4%, rgba(19,23,34,.45) 55%, rgba(19,23,34,.55) 100%); }
.vd-spot-in{ position:relative; text-align:center; }
.vd-spot-in h2{ font-size:52px; font-weight:800; margin:0 0 10px; }
.vd-spot-in h2 a{ color:#fff; }
.vd-spot-sub{ color:var(--vd-mut2); font-size:16px; max-width:640px; margin:0 auto 26px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vd-spot-strip{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-top:52px; text-align:left; }
.vd-spot-strip .vd-lname{ color:#fff; }

/* ---------- Khối cuối: Top panel + Phim mới nhất ---------- */
.vd-finale{ display:grid; grid-template-columns:450px 1fr; gap:44px; align-items:start; }
.vd-top-panel{ background:var(--vd-panel); border-radius:6px; padding:26px 28px 14px; }
.vd-top-panel.sm{ padding:22px 22px 8px; }
.vd-top-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; }
.vd-top-head h3{ color:#fff; font-size:20px; font-weight:700; margin:0; }
.vd-top-tabs{ display:flex; gap:6px; }
.vd-top-tabs button{ background:var(--vd-panel2); color:var(--vd-mut2); border:0; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:var(--vd-body); }
.vd-top-tabs button.on{ background:var(--vd-accent); color:#fff; }
.vd-top-list{ list-style:none; margin:0; padding:0; }
.vd-top-list li{ display:flex; gap:17px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.vd-top-list li:last-child{ border-bottom:0; }
.vd-rank{ font-family:var(--vd-head); font-size:31px; font-weight:800; color:#fff; min-width:37px; text-align:center; line-height:1; }
.vd-top-panel.sm .vd-rank{ font-size:25px; min-width:30px; }
.vd-top-info{ display:flex; flex-direction:column; min-width:0; }
.vd-top-year{ color:var(--vd-mut); font-size:12px; }
.vd-top-name{ color:#fff; font-size:15.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-top-name:hover{ color:var(--vd-accent); }
.vd-top-panel.sm .vd-top-name{ font-size:14.5px; }
.vd-top-genre{ color:var(--vd-accent); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-top-empty{ color:var(--vd-mut); }
.vd-new-feat{ display:flex; gap:20px; margin-bottom:8px; }
.vd-new-poster{ flex:0 0 168px; border-radius:4px; overflow:hidden; aspect-ratio:2/3; background:#1d2434; }
.vd-new-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.vd-new-info{ min-width:0; padding-top:4px; }
.vd-new-year{ color:var(--vd-mut); font-size:13px; display:block; }
.vd-new-name{ color:#fff; font-size:21px; font-weight:700; font-family:var(--vd-head); line-height:1.25; display:block; margin:3px 0 8px; }
.vd-new-name:hover{ color:var(--vd-accent); }
.vd-new-info p{ color:var(--vd-mut); font-size:13.5px; line-height:1.6; margin:0 0 15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vd-new-acts{ display:flex; align-items:center; gap:16px; }
.vd-new-list{ display:grid; grid-template-columns:1fr 1fr; gap:4px 26px; margin-top:14px; }
.vd-new-item{ display:flex; gap:13px; align-items:center; padding:10px 0; border-top:1px solid var(--vd-line); min-width:0; }
.vd-new-item img{ width:52px; height:76px; object-fit:cover; border-radius:3px; flex:0 0 auto; }
.vd-new-item-info{ display:flex; flex-direction:column; min-width:0; }
.vd-ni-year{ color:var(--vd-mut); font-size:11.5px; }
.vd-ni-name{ color:#fff; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-new-item:hover .vd-ni-name{ color:var(--vd-accent); }
.vd-ni-genre{ color:var(--vd-accent); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Sao đánh giá ---------- */
.vd-stars{ position:relative; display:inline-block; line-height:0; }
.vd-stars svg{ width:15px; height:15px; }
.vd-stars-bg{ color:#3a4358; display:inline-flex; gap:2px; }
.vd-stars-fg{ position:absolute; top:0; left:0; overflow:hidden; color:#ffb320; display:inline-flex; gap:2px; white-space:nowrap; }

/* ---------- Trailer modal ---------- */
.vd-tmodal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.vd-tmodal-back{ position:absolute; inset:0; background:rgba(5,7,11,.86); }
.vd-tmodal-box{ position:relative; width:min(920px, 92vw); }
.vd-tmodal-x{ position:absolute; top:-42px; right:0; background:none; border:0; color:#fff; font-size:32px; cursor:pointer; line-height:1; }
.vd-tmodal-frame{ position:relative; padding-top:56.25%; background:#000; border-radius:6px; overflow:hidden; }
.vd-tmodal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Trang chi tiết ---------- */
.vd-detail{ padding-top:22px; }
.vd-crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--vd-mut); font-size:13.5px; margin-bottom:20px; }
.vd-crumb a{ color:var(--vd-mut2); }
.vd-crumb a:hover{ color:var(--vd-accent); }
.vd-crumb .on{ color:#fff; font-weight:600; }
.vd-dcols{ display:grid; grid-template-columns:1fr 348px; gap:36px; align-items:start; }
.vd-dmain{ min-width:0; }
.vd-player{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/9; background:#000; }
.vd-player-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vd-player-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,12,18,.55), rgba(10,12,18,.05) 45%); }
.vd-player-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; background:rgba(10,12,18,.28); border:2px solid rgba(255,255,255,.92); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; box-shadow:0 12px 34px rgba(0,0,0,.45); }
.vd-player-play svg{ width:34px; height:34px; margin-left:4px; }
.vd-player-play:hover{ background:rgba(255,255,255,.14); transform:translate(-50%,-50%) scale(1.06); }
.vd-player-lb{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(50% - 66px); color:#fff; font-family:var(--vd-head); font-size:12px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none; }
.vd-player-trailer{ position:absolute; right:14px; bottom:14px; background:rgba(10,12,18,.72); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:4px; padding:8px 15px; font-size:13px; font-weight:700; cursor:pointer; }
.vd-player-trailer:hover{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-dhead{ display:flex; justify-content:space-between; gap:26px; margin-top:26px; flex-wrap:wrap; }
.vd-dhead-l{ min-width:0; flex:1 1 420px; }
.vd-dtitle{ font-size:28px; font-weight:800; margin:0; line-height:1.2; color:#fff; }
.vd-dorigin{ color:var(--vd-mut); font-size:14.5px; margin-top:4px; }
.vd-dmeta{ color:var(--vd-mut2); font-size:14px; margin-top:10px; }
.vd-dmeta .sep{ color:var(--vd-mut); margin:0 7px; }
.vd-dgenres a{ color:var(--vd-accent); }
.vd-dgenres a:hover{ text-decoration:underline; }
.vd-dstatus{ color:var(--vd-mut); font-size:13.5px; margin-top:6px; }
.vd-dhead-r{ display:flex; flex-direction:column; align-items:flex-end; gap:13px; }
.vd-score{ display:flex; align-items:center; gap:9px; }
.vd-score-star{ width:37px; height:37px; color:var(--vd-accent); }
.vd-score-num{ font-family:var(--vd-head); font-size:26px; font-weight:800; color:var(--vd-accent); line-height:1; }
.vd-score-votes{ color:var(--vd-mut); font-size:12.5px; }
.vd-dacts{ display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.vd-act{ display:inline-flex; align-items:center; gap:7px; background:var(--vd-panel); border:1px solid var(--vd-line); color:var(--vd-mut2); border-radius:4px; padding:9px 15px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--vd-body); transition:.2s; }
.vd-act:hover{ color:#fff; border-color:var(--vd-accent); }
.vd-act.on{ background:var(--vd-accent); border-color:var(--vd-accent); color:#fff; }
.vd-eps-sec{ margin-top:30px; background:var(--vd-panel); border-radius:6px; padding:20px 22px 22px; }
.vd-svrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vd-sv-lb{ color:var(--vd-mut2); font-weight:700; font-size:13.5px; }
.vd-servers{ display:flex; gap:8px; flex-wrap:wrap; }
.vd-server{ background:var(--vd-panel2); color:var(--vd-accent); border:0; border-radius:4px; padding:8px 15px; font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; cursor:pointer; font-family:var(--vd-body); }
.vd-server:hover{ color:#fff; }
.vd-server.active{ background:var(--vd-accent); color:#fff; }
.vd-svcount{ opacity:.75; font-weight:600; }
.vd-sort{ margin-left:auto; background:none; border:1px solid var(--vd-line); color:var(--vd-mut2); border-radius:4px; padding:7px 12px; font-size:12.5px; cursor:pointer; }
.vd-sort:hover{ color:#fff; border-color:var(--vd-accent); }
.vd-eps-lb{ color:var(--vd-mut); font-size:13.5px; margin:16px 0 12px; }
.vd-eps-lb b{ color:#fff; }
.vd-eps-cards{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.vd-ep{ display:block; min-width:0; }
.vd-ep-thumb{ position:relative; display:block; border-radius:4px; overflow:hidden; aspect-ratio:16/9; background:#0d1017; }
.vd-ep-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.vd-ep:hover .vd-ep-thumb img{ opacity:1; }
.vd-ep-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%; background:rgba(10,12,18,.45); border:1.5px solid rgba(255,255,255,.92); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; padding-left:2px; }
.vd-ep-name{ display:block; color:var(--vd-mut2); font-size:13px; font-weight:600; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-ep:hover .vd-ep-name{ color:var(--vd-accent); }
.vd-eps-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.vd-epb{ background:var(--vd-panel2); color:var(--vd-mut2); border-radius:4px; padding:8px 13px; font-size:13px; font-weight:600; }
.vd-epb:hover{ background:var(--vd-accent); color:#fff; }
.vd-muted{ color:var(--vd-mut); }
.vd-dtabs{ display:flex; align-items:center; justify-content:center; gap:13px; margin:38px 0 0; padding-bottom:13px; border-bottom:1px solid var(--vd-line); }
.vd-dtabs button{ background:none; border:0; cursor:pointer; font-family:var(--vd-head); font-size:15px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--vd-mut); padding:0 2px 10px; margin-bottom:-14px; border-bottom:2px solid transparent; }
.vd-dtabs button.on{ color:var(--vd-accent); border-bottom-color:var(--vd-accent); }
.vd-dtabs span{ color:var(--vd-mut); }
.vd-dpanel{ padding:24px 2px 4px; }
.vd-plot{ color:var(--vd-mut2); font-size:15px; line-height:1.75; }
.vd-info-rows{ margin-top:20px; border-top:1px solid var(--vd-line); }
.vd-irow{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px; }
.vd-irow .k{ color:var(--vd-mut); min-width:96px; flex:0 0 auto; }
.vd-irow .v{ color:var(--vd-mut2); }
.vd-irow .v a{ color:var(--vd-accent); }
.vd-rec{ margin-top:42px; }
.vd-rec .vd-sec-head{ margin-bottom:24px; }
.vd-rec .vd-sec-head h2{ font-size:30px; }
.vd-rgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.vd-rcard{ position:relative; display:block; border-radius:4px; overflow:hidden; aspect-ratio:2/3; background:#1d2434; }
.vd-rcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vd-rcard-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,11,16,.93) 22%, rgba(9,11,16,.25) 58%, rgba(9,11,16,0) 78%); }
.vd-rcard-in{ position:absolute; left:0; right:0; bottom:0; padding:16px 15px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.vd-rcard-name{ color:#fff; font-family:var(--vd-head); font-size:16px; font-weight:700; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-rcard-desc{ color:var(--vd-mut2); font-size:12.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vd-rcard-btn{ border:1px solid rgba(255,255,255,.8); color:#fff; font-family:var(--vd-head); font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:8px 18px; border-radius:4px; transition:.2s; }
.vd-rcard:hover .vd-rcard-btn{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-dside{ min-width:0; }
.vd-side-poster img{ width:100%; border-radius:5px; display:block; }
.vd-dside .vd-top-panel{ margin-top:20px; }
.vd-side-sec{ margin-top:24px; background:var(--vd-panel); border-radius:6px; padding:20px 22px; }
.vd-side-sec h3{ color:#fff; font-size:17px; margin:0 0 13px; }
.vd-actors{ color:var(--vd-mut2); font-size:13.5px; line-height:2; }

/* ---------- Trang archive ---------- */
.vd-arc{ padding-top:22px; }
.vd-arc-cols{ display:grid; grid-template-columns:302px 1fr; gap:32px; align-items:start; }
.vd-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.vd-widget{ background:var(--vd-panel); border-radius:6px; padding:20px 20px 16px; }
.vd-widget h4{ color:#fff; font-size:16.5px; font-weight:700; margin:0 0 14px; }
.vd-check-list{ display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
.vd-check{ display:flex; align-items:center; gap:8px; color:var(--vd-mut2); font-size:13.5px; padding:4.5px 0; min-width:0; }
.vd-check .box{ width:15px; height:15px; border:1.5px solid #4a5872; border-radius:3px; flex:0 0 auto; position:relative; }
.vd-check:hover{ color:#fff; }
.vd-check.on{ color:var(--vd-accent); }
.vd-check.on .box{ background:var(--vd-accent); border-color:var(--vd-accent); }
.vd-check.on .box::after{ content:'✓'; position:absolute; inset:0; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.vd-year-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.vd-yearchip{ background:var(--vd-panel2); color:var(--vd-accent); font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:4px; }
.vd-yearchip:hover{ background:var(--vd-accent); color:#fff; }
.vd-yearchip.on{ background:var(--vd-accent); color:#fff; }
.vd-side-form select{ width:100%; background:var(--vd-panel2); color:var(--vd-mut2); border:1px solid var(--vd-line); border-radius:4px; padding:9px 10px; font-size:13.5px; font-family:var(--vd-body); }
.vd-filter-toggle{ display:none; }
.vd-arc-main{ min-width:0; }
.vd-page-t{ font-size:27px; font-weight:800; color:#fff; margin:2px 0 5px; }
.vd-page-d{ color:var(--vd-mut); font-size:14px; margin:0 0 18px; }
.vd-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:13px 0; border-top:1px solid var(--vd-line); border-bottom:1px solid var(--vd-line); margin-bottom:20px; }
.vd-showing{ color:var(--vd-mut); font-size:13.5px; }
.vd-sort-form{ display:flex; align-items:center; gap:9px; }
.vd-sort-form label{ color:var(--vd-mut); font-size:13.5px; }
.vd-sort-form select{ background:var(--vd-panel); color:var(--vd-mut2); border:1px solid var(--vd-line); border-radius:4px; padding:8px 10px; font-size:13.5px; font-family:var(--vd-body); }
.vd-tabs-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.vd-tabs-row a{ background:var(--vd-panel); color:var(--vd-mut2); border:1px solid var(--vd-line); padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; }
.vd-tabs-row a.on{ background:var(--vd-accent); border-color:var(--vd-accent); color:#fff; }
.vd-arc-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:22px 16px; }
.vd-empty{ color:var(--vd-mut); padding:26px 0; }

/* ---------- Footer ---------- */
.vd-footer{ background:var(--vd-footer); margin-top:70px; padding:46px 0 0; }
.vd-footer-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.07); }
.vd-footer-logo img{ height:36px; width:auto; }
.vd-footer-socials{ display:flex; gap:22px; flex-wrap:wrap; }
.vd-footer-socials a{ color:var(--vd-mut); font-size:13.5px; font-weight:600; }
.vd-footer-socials a:hover{ color:var(--vd-accent); }
.vd-footer-desc{ color:var(--vd-mut); font-size:13.5px; padding-top:18px; max-width:760px; }
.vd-footer-cols{ display:grid; grid-template-columns:repeat(6, 1fr); gap:30px 26px; padding:34px 0 30px; }
.vd-footer-col{ min-width:0; }
.vd-footer-col h4{ color:#fff; font-size:17px; font-weight:700; margin:0 0 16px; white-space:nowrap; }
.vd-footer-col h4.vd-fh-spacer{ visibility:hidden; }
.vd-footer-links{ display:flex; flex-direction:column; gap:2px; }
.vd-footer-links a{ color:var(--vd-mut); font-size:14.5px; line-height:2.1; }
.vd-footer-links a:hover{ color:var(--vd-accent); }
.vd-footer-col.sup{ border-left:1px solid rgba(255,255,255,.07); padding-left:22px; }
.vd-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.07); padding:18px 0 22px; color:var(--vd-mut); font-size:13px; }
.vd-footer-bottom a{ color:var(--vd-mut); }
.vd-footer-bottom a:hover{ color:var(--vd-accent); }
.vd-totop{ position:fixed; right:18px; bottom:18px; z-index:80; width:42px; height:42px; border-radius:6px; border:0; background:var(--vd-accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.vd-totop.show{ opacity:1; pointer-events:auto; }
body.vd-theme .vd-bottomnav{ background:#0d1017; border-top:1px solid var(--vd-line); }
body.vd-theme .vd-bottomnav a{ color:var(--vd-mut); }
body.vd-theme .vd-bottomnav a.active{ color:var(--vd-accent); }

/* Bình luận (partial dùng chung) trên nền tối */
body.vd-theme .tph-comments{ color:var(--vd-mut2); }
body.vd-theme .vd-dpanel .op-comment-panel h3{ color:#fff; font-family:var(--vd-head); }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
    .vd-grid{ grid-template-columns:repeat(5, 1fr); }
    .vd-lgrid{ grid-template-columns:repeat(4, 1fr); }
    .vd-hero-rec{ width:452px; }
    .vd-hero-title{ font-size:46px; }
    .vd-nav{ display:none; }
}
@media (max-width:991px){
    .vd-header-in{ height:64px; padding:0 16px; gap:12px; }
    .vd-logo-txt{ font-size:26px; }
    .vd-upload{ display:none; }
    .vd-icon-btn{ display:block; }
    .vd-search{ display:none; position:absolute; top:100%; left:0; right:0; width:auto; background:#fff; padding:10px 14px 14px; box-shadow:0 14px 26px rgba(19,23,34,.16); }
    .vd-search.vd-open{ display:block; }
    .vd-header{ position:relative; }
    .vd-hero-slide, .vd-hero-in{ min-height:480px; }
    .vd-hero-txt{ padding:40px 0 118px; max-width:100%; }
    .vd-hero-title{ font-size:37px; }
    .vd-hero-rec{ left:16px; right:16px; width:auto; bottom:20px; }
    .vd-hero-rec h4{ font-size:16px; margin-bottom:9px; }
    .vd-hero-thumbs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
    .vd-hero-thumbs::-webkit-scrollbar{ display:none; }
    .vd-hero-th{ flex:0 0 118px; }
    .vd-sec{ padding:44px 0 40px; }
    .vd-sec-head h2{ font-size:28px; }
    .vd-grid{ grid-template-columns:repeat(3, 1fr); gap:18px 12px; }
    .vd-split{ grid-template-columns:1fr; gap:20px; }
    .vd-split.rev .vd-split-head{ order:0; }
    .vd-split.rev .vd-split-body{ order:1; }
    .vd-split-head h2{ font-size:27px; }
    .vd-row > .vd-cell{ flex-basis:calc((100% - 2 * 12px) / 3.15); }
    .vd-row{ gap:12px; }
    .vd-lgrid{ grid-template-columns:repeat(3, 1fr); gap:16px 12px; }
    .vd-vbanner{ min-height:440px; }
    .vd-vbanner-txt h2{ font-size:32px; }
    .vd-bigplay{ display:none; }
    .vd-spot-in h2{ font-size:36px; }
    .vd-spot-strip{ grid-template-columns:repeat(3, 1fr); }
    .vd-spot-strip .vd-lcard:nth-child(n+4){ display:none; }
    .vd-finale{ grid-template-columns:1fr; gap:34px; }
    .vd-new-list{ grid-template-columns:1fr; }
    .vd-dcols{ grid-template-columns:1fr; }
    .vd-dside{ order:2; }
    .vd-side-poster{ max-width:230px; }
    .vd-eps-cards{ grid-template-columns:repeat(3, 1fr); }
    .vd-rgrid{ grid-template-columns:repeat(2, 1fr); }
    .vd-dhead-r{ align-items:flex-start; }
    .vd-dacts{ justify-content:flex-start; }
    .vd-arc-cols{ grid-template-columns:1fr; }
    .vd-filter-toggle{ display:inline-flex; align-items:center; gap:8px; background:var(--vd-panel); color:#fff; border:1px solid var(--vd-line); border-radius:4px; padding:10px 16px; font-weight:700; font-size:14px; cursor:pointer; margin-bottom:16px; }
    .vd-side{ display:none; }
    .vd-side.open{ display:flex; }
    .vd-arc-grid{ grid-template-columns:repeat(3, 1fr); gap:18px 12px; }
    .vd-footer-cols{ grid-template-columns:repeat(3, 1fr); gap:26px 18px; }
    .vd-footer-col.sup{ border-left:0; padding-left:0; }
    .vd-footer-col h4{ font-size:15.5px; }
    .vd-footer-links a{ font-size:13.5px; }
    .vd-totop{ bottom:82px; }
}
@media (max-width:560px){
    .vd-grid{ grid-template-columns:repeat(3, 1fr); }
    .vd-lgrid{ grid-template-columns:repeat(2, 1fr); }
    .vd-arc-grid{ grid-template-columns:repeat(3, 1fr); }
    .vd-new-feat{ flex-direction:column; }
    .vd-new-poster{ flex-basis:auto; max-width:180px; }
    .vd-hero-title{ font-size:31px; }
    .vd-hero-meta{ font-size:13.5px; }
    .vd-btn-accent{ padding:12px 24px; }
    .vd-btn-outline{ padding:11px 20px; }
}