/* =========================================================
   MOTCHILL — Modern UI Skin
   Override theme cũ cho header + body + responsive mobile
   ========================================================= */

:root{
    --mc-bg:#0b0f17;
    --mc-bg-2:#121826;
    --mc-surface:#161c2a;
    --mc-surface-2:#1c2333;
    --mc-border:#262e42;
    --mc-border-2:#2f3a52;
    --mc-text:#d8dce5;
    --mc-text-muted:#8a909c;
    --mc-primary:#ff6b1a;
    --mc-primary-2:#ffb347;
    --mc-primary-soft:rgba(255,107,26,.14);
    --mc-shadow-1:0 6px 18px -6px rgba(0,0,0,.55);
    --mc-shadow-2:0 12px 34px -10px rgba(255,107,26,.32);
    --mc-radius:12px;
    --mc-radius-sm:8px;
}

/* ---------- BASE ---------- */
body,html{
    background:var(--mc-bg);
    color:var(--mc-text);
    font-family:"Inter","Roboto","Segoe UI",Arial,Tahoma,sans-serif;
    -webkit-font-smoothing:antialiased;
}
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(900px 500px at 12% -10%,rgba(255,107,26,.10),transparent 60%),
        radial-gradient(1000px 600px at 100% 0%,rgba(99,102,241,.06),transparent 60%);
}
#page{position:relative;z-index:1}
a{color:inherit;transition:color .2s ease}

/* Accessibility: visually hidden but readable by screen readers & crawlers */
.sr-only{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* ---------- LAYOUT WIDTH (đồng bộ header/body/footer 1200px) ---------- */
.container{width:1200px !important;max-width:calc(100% - 24px);padding:0 !important;margin:0 auto !important}
.main-content > .container{padding:22px 0 30px !important}
.main-content .left-content{width:calc(100% - 320px) !important;margin:0 20px 28px 0 !important;float:left}
.main-content .right-content{width:300px !important;float:right}
/* On pages where left-content starts with a section heading (home, etc.),
   push sidebar down so its first card aligns with the poster grid below the heading */
.main-content .left-content:has(> .list-films.film-new > .title-box) + .right-content{
    margin-top:58px;
}
.main-content{margin-top:0}
#content{padding:0}

/* ---------- HEADER ---------- */
#header{
    background:linear-gradient(180deg,rgba(12,16,26,.92),rgba(12,16,26,.78));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,107,26,.18);
    padding:0;
    margin:0;
    position:relative;
    z-index:50;
}
#header .top{margin:0;padding:14px 0 12px;display:flex;align-items:center;gap:18px}
#header > .container{display:flex;flex-direction:column}
#header .top > .left.logo{
    float:none;box-shadow:none !important;
    display:flex;align-items:center;flex:0 0 auto;
}
#header .top > .left.logo a{display:inline-flex;align-items:center}
#header .top > .left.logo img,
#header .top > .left.logo svg{max-height:54px;height:auto;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
#header .right-header{
    float:none !important;width:auto !important;flex:1;
    display:flex;align-items:center;gap:14px;justify-content:flex-end;
}

/* Search */
.search-container{
    float:none !important;margin:0 !important;width:auto !important;
    flex:1;max-width:440px;position:relative;
}
#form_search{position:relative}
#keyword{
    width:100%;box-sizing:border-box;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;font-style:normal;
    padding:11px 44px 11px 18px;
    border-radius:999px;
    font-size:13.5px;
    transition:all .2s ease;
}
#keyword::placeholder{color:#8a909c;font-style:normal}
#keyword:focus{
    background:rgba(255,255,255,.07);
    border-color:var(--mc-primary);
    box-shadow:0 0 0 4px rgba(255,107,26,.15);
    outline:none;
}
.search-container .fa-search{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    font-size:15px;color:#fff;cursor:pointer;
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a);
    transition:transform .2s;
}
.search-container .fa-search:hover{transform:translateY(-50%) scale(1.08)}

/* Actions user */
#header .actions-user{padding:0;flex:0 0 auto}
#header .actions-user ul{display:flex;align-items:center;gap:8px;margin:0;padding:0}
#header .actions-user ul li{
    display:inline-flex;align-items:center;margin:0;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    padding:7px 14px;
    transition:all .2s ease;
    cursor:pointer;
    font-size:13px;
}
#header .actions-user ul li:hover{
    background:var(--mc-primary-soft);
    border-color:rgba(255,107,26,.45);
    color:#fff;
}
#header .actions-user ul li .fa{color:var(--mc-primary);margin-right:6px;font-size:13px}
#header .actions-user ul li a{color:#e8ebf0 !important;cursor:pointer}
#header .actions-user ul li:hover a{color:#fff !important}

#header .suggest-dns{display:none}

/* Nav menu */
.main-menu{
    background:transparent !important;
    border-top:1px solid rgba(255,255,255,.05);
    padding:0;
}
.main-menu .container{display:flex !important;flex-direction:row !important;align-items:center;flex-wrap:nowrap;width:1200px !important;max-width:calc(100% - 24px);margin:0 auto !important;padding:0 !important;list-style:none}
.main-menu .menu-item{float:none !important;position:relative;flex:0 0 auto}
.main-menu .menu-item > a{
    color:#d8dce5 !important;
    padding:14px 16px !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    text-transform:uppercase;letter-spacing:.4px;
    position:relative;display:block;
    transition:color .2s;
}
.main-menu .menu-item > a::after{
    content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
    background:linear-gradient(90deg,var(--mc-primary),var(--mc-primary-2));
    border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
}
.main-menu .menu-item.active > a,
.main-menu .menu-item > a:hover{color:var(--mc-primary) !important}
.main-menu .menu-item.active > a::after,
.main-menu .menu-item:hover > a::after{transform:scaleX(1)}

/* Caret arrow on parent menu items */
.main-menu .menu-item .caret-ico{
    font-size:11px !important;margin-left:4px;margin-right:0 !important;
    opacity:.7;transition:transform .25s ease;
}
.main-menu .menu-item.has-dropdown:hover > a .caret-ico{transform:rotate(180deg);opacity:1}

/* Sub-menu (standard dropdown) */
.main-menu .menu-item .sub-menu{
    background:#131826 !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius);
    box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,107,26,.08);
    padding:10px;
    margin-top:0;
    overflow:hidden;
    animation:submenuFade .2s ease-out;
}
@keyframes submenuFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.sub-menu .sub-menu-item a{
    padding:9px 14px !important;border-radius:0;
    font-size:13.5px !important;color:#d6d9e0 !important;font-weight:400;
    transition:color .15s ease;
    display:block;
    white-space:nowrap;
}
.sub-menu .sub-menu-item a:hover{
    background:transparent !important;
    color:var(--mc-primary) !important;
}

/* Mega menu (multi-column for many items) */
.main-menu .menu-item .mega-menu{
    width:760px !important;
    display:none;
    padding:16px 20px !important;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    background:#0f131b !important;
    border:1px solid rgba(255,255,255,.06) !important;
    border-radius:10px !important;
    box-shadow:0 18px 44px -14px rgba(0,0,0,.7) !important;
}
.main-menu .menu-item:hover .mega-menu{display:grid !important}
.mega-menu .sub-menu-item{width:auto !important;float:none !important}
.mega-menu .sub-menu-item a{padding:8px 10px !important;white-space:nowrap;font-size:13.5px !important}

/* ---------- TITLES ---------- */
.title-box{margin:0 0 16px;display:flex;align-items:center;gap:12px}
.title-box .tophot,
.title-box .tab,
.title-box .tab.active{
    color:#fff !important;
    font-size:16px !important;
    font-family:inherit !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:.6px;
    padding:10px 0 !important;
    border:none !important;
    position:relative;
    display:inline-flex;align-items:center;gap:10px;
}
.title-box .tophot::before,
.title-box .tab::before{
    content:"";width:4px;height:18px;
    background:linear-gradient(180deg,var(--mc-primary),var(--mc-primary-2));
    border-radius:3px;display:inline-block;
}
.title-box .tab.active::after{display:none}
.title-box .tab:hover{color:var(--mc-primary) !important;border:none !important}

/* ---------- MOVIE CARDS (grid items) ---------- */
.list-films.film-new{overflow:visible;margin-bottom:24px !important}
.list-films.film-new .film-moi,
.list-films.film-new > ul{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
    gap:16px;
    list-style:none;
    margin:0;
    padding:0;
}
.list-films.film-new .item{
    height:auto !important;
    width:auto !important;
    margin:0 !important;float:none !important;
    border-radius:var(--mc-radius);
    overflow:hidden;
    background:var(--mc-surface);
    border:1px solid var(--mc-border);
    transition:transform .25s ease,border-color .25s,box-shadow .25s;
    position:relative;
}
.list-films.film-new .item:hover{
    transform:translateY(-4px);
    border-color:rgba(255,107,26,.5);
    box-shadow:var(--mc-shadow-2);
}
.list-films .item > a{display:block;position:relative;overflow:hidden}
.list-films .item .img-film{
    width:100% !important;height:220px !important;
    object-fit:cover;display:block;
    transition:transform .4s ease;
}
.list-films.film-new .item:hover .img-film{transform:scale(1.06)}

/* Label badge */
#film_related .item .label,
.film-new .item .label,
#film_hot .item .label{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border:none !important;border-bottom:none !important;
    color:#fff !important;
    position:absolute !important;
    top:8px !important;left:0;
    padding:4px 9px !important;font-size:10.5px !important;
    font-weight:700 !important;letter-spacing:.3px;
    border-radius:0 6px 6px 0 !important;
    text-transform:uppercase;
    box-shadow:0 3px 10px -2px rgba(255,107,26,.55) !important;
    z-index:3 !important;
    pointer-events:none;
}

/* Label quality (HD/4K) */
.list-films .label-quality{
    background:linear-gradient(135deg,#6366f1,#8b5cf6) !important;
    border-radius:0 6px 6px 0 !important;
    font-weight:700 !important;
    position:absolute !important;
    bottom:auto !important;top:38px;
    padding:4px 8px !important;font-size:10.5px !important;
    box-shadow:0 3px 10px -2px rgba(99,102,241,.5);
    z-index:3 !important;
    pointer-events:none;
}
.list-films .label-quality:after{display:none}

/* Name — clamp 2 lines, show ellipsis when overflow */
.list-films.film-new .item .name{
    background:transparent !important;
    padding:10px 12px 14px !important;
    height:auto !important;min-height:auto !important;
    font-size:12.5px;line-height:1.4;
    color:#e8ebf0;
    overflow:visible !important;
    display:block !important;
}
.list-films.film-new .item .name span,
.list-films.film-new .item .name > span{
    display:block;width:100%;
    overflow:hidden;
}
.list-films.film-new .item .name a{
    color:#e8ebf0;font-weight:600;
    display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-clamp:2;
    overflow:hidden;text-overflow:ellipsis;
    max-height:calc(1.4em * 2);
    word-break:break-word;
}
.list-films.film-new .item:hover .name a{color:var(--mc-primary)}

/* Play icon */
.list-films .item .icon-play{
    background:var(--mc-primary) !important;
    box-shadow:0 8px 24px rgba(255,107,26,.55);
}

/* Phim hot carousel */
.list-films.film-hot{margin-bottom:0 !important}
#film_hot{padding-right:0;height:auto}
#film_hot .item{
    border-radius:var(--mc-radius);overflow:hidden;
    background:var(--mc-surface);border:1px solid var(--mc-border);
    transition:transform .25s,border-color .25s,box-shadow .25s;
    margin:0 6px !important;width:auto !important;
}
#film_hot .item:hover{
    transform:translateY(-3px);
    border-color:rgba(255,107,26,.45);
    box-shadow:var(--mc-shadow-2);
}
#film_hot .item .img-film{width:100% !important;height:auto !important;aspect-ratio:2/3;object-fit:cover;display:block}
.list-films.film-related .item .text,
.list-films.film-hot .item .text{
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.9)) !important;
    padding:28px 10px 10px !important;font-size:12.5px !important;
    font-weight:600;
}

/* Owl carousel nav — circular, symmetrical */
.list-films.film-hot{position:relative;overflow:visible !important}
.owl-carousel{position:relative}
.owl-carousel .owl-wrapper-outer{overflow:hidden;border-radius:var(--mc-radius)}
.owl-carousel .owl-controls{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}
.owl-carousel .owl-buttons{position:static}
.owl-carousel .owl-buttons div,
.owl-prev,.owl-next{
    position:absolute !important;
    top:50% !important;
    margin-top:-21px !important;
    transform:none !important;
    width:42px !important;height:42px !important;
    margin-left:0 !important;margin-right:0 !important;
    padding:0 !important;
    background:rgba(15,19,27,.88) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:50% !important;
    color:#fff !important;
    display:flex !important;align-items:center;justify-content:center;
    opacity:1 !important;
    box-shadow:0 6px 18px -4px rgba(0,0,0,.55);
    cursor:pointer;
    pointer-events:auto;
    z-index:5;
    transition:all .2s ease;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.owl-carousel .owl-buttons .owl-prev,
.owl-prev{left:8px !important;right:auto !important}
.owl-carousel .owl-buttons .owl-next,
.owl-next{right:8px !important;left:auto !important}
.owl-carousel .owl-buttons div:hover,
.owl-prev:hover,.owl-next:hover{
    background:var(--mc-primary) !important;
    border-color:var(--mc-primary) !important;
    box-shadow:0 8px 22px -4px rgba(255,107,26,.6);
}
.owl-carousel .owl-buttons div i,
.owl-prev i,.owl-next i{
    font-size:18px !important;padding:0 !important;line-height:1;
    display:block;
}

/* ---------- SIDEBAR ---------- */
.main-content .right-content{width:300px}
.right-content .block{
    background:var(--mc-surface);
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius);
    padding:18px !important;width:auto !important;
    margin:0 0 18px !important;
}
.right-content .block .caption{
    padding:0 0 10px !important;
    margin:0 0 14px !important;
    border:none !important;
    position:relative;display:block;
}
.right-content .block .caption,
.right-content .block .caption span{
    color:#fff !important;
    font-size:14px !important;
    font-weight:700 !important;
    font-family:inherit !important;
    text-transform:uppercase;letter-spacing:.6px;
    line-height:1.3;
}
.right-content .block .caption span{display:inline-block;padding:0 !important;margin:0 !important}
.right-content .block .caption::after{
    content:"";position:absolute;left:0;bottom:0;
    width:36px;height:3px;border-radius:2px;
    background:linear-gradient(90deg,var(--mc-primary),var(--mc-primary-2));
}

/* Top-rank text list */
.most-view .list-film .item{
    padding:10px 10px 10px 44px !important;
    border-radius:8px;
    background:transparent !important;
    margin:4px 0;
    transition:background .2s;
    position:relative;
    display:block;
}
.list-film li:nth-child(even){background:transparent !important}
.most-view .list-film .item:hover{background:rgba(255,107,26,.06) !important}
.most-view .list-film .item .number-rank{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    color:#fff !important;font-weight:800 !important;
    width:28px;height:28px;line-height:28px;text-align:center;
    border-radius:8px !important;font-size:13px;
    left:8px;top:50%;transform:translateY(-50%);
    box-shadow:0 4px 12px -2px rgba(255,107,26,.45);
}
.most-view .list-film .item:nth-child(1) .number-rank,
.most-view .list-film .item:nth-child(2) .number-rank,
.most-view .list-film .item:nth-child(3) .number-rank{
    background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
    color:#1a1108 !important;
    box-shadow:0 4px 12px -2px rgba(251,191,36,.5) !important;
}
.most-view .list-film .item > span a{
    color:#e8ebf0;font-weight:600;font-size:13px;line-height:1.35;
    display:block;
}
.most-view .list-film .item:hover > span a{color:var(--mc-primary)}
.most-view .list-film .item .count_view{
    color:var(--mc-text-muted);font-size:11.5px;margin-top:3px;
}

/* Top thumb vertical list */
.list-film{list-style:none;margin:0;padding:0}
.list-film .film-item-ver{
    display:grid !important;
    grid-template-columns:62px minmax(0,1fr);
    grid-column-gap:12px;
    grid-row-gap:6px;
    align-items:start;
    padding:10px;
    margin:0 !important;
    border-radius:8px;
    transition:background .2s;
    list-style:none;
}
.list-film .film-item-ver:hover{background:rgba(255,107,26,.06)}
.list-film .film-item-ver > a:first-child{
    grid-column:1;
    grid-row:1 / span 2;
    display:block;
    width:62px;
    height:82px;
    margin:0 !important;
}
.list-film .film-item-ver img.avatar{
    width:62px !important;height:82px !important;
    border-radius:6px;border:none !important;
    margin:0 !important;float:none !important;
    object-fit:cover;display:block;
}
.list-film .film-item-ver .title{
    grid-column:2;
    grid-row:1;
    min-width:0;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}
.list-film .film-item-ver .name{
    margin:0 0 4px !important;
    padding:0 !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    color:#e8ebf0 !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:hidden;
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow-wrap:break-word;
    word-wrap:break-word;
}
.list-film .film-item-ver .name a{
    color:#e8ebf0 !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    display:inline !important;
    text-decoration:none !important;
    visibility:visible !important;
    opacity:1 !important;
}
.list-film .film-item-ver:hover .name,
.list-film .film-item-ver:hover .name a{color:var(--mc-primary) !important}
.list-film .film-item-ver .real-name{
    font-size:11.5px !important;
    color:var(--mc-text-muted) !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}
.list-film .film-item-ver .top-star{
    grid-column:2;
    grid-row:2;
    margin:0 !important;
    padding:0 !important;
    align-self:start;
    line-height:1;
}
.list-film .film-item-ver .top-star img{display:inline-block;vertical-align:middle}

/* Breadcrumbs */
.breadcrumbs{
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm) !important;
    padding:12px 18px !important;
    margin:0 0 16px !important;
    font-size:13px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    overflow:hidden;
}
.breadcrumbs li{
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex;
    align-items:center;
    list-style:none;
    line-height:1.4 !important;
}
.breadcrumbs li + li::before{
    content:"/";
    color:var(--mc-text-muted);
    padding:0 10px;
    font-weight:400;
    opacity:.7;
}
.breadcrumbs a{
    float:none !important;
    display:inline-block !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    color:var(--mc-text-muted) !important;
    font-size:12.5px !important;
    font-weight:600;
    line-height:1.4 !important;
    text-transform:uppercase;
    letter-spacing:.3px;
    text-decoration:none;
    transition:color .15s ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus{
    background:transparent !important;
    color:var(--mc-primary) !important;
    text-decoration:none;
}
.breadcrumbs a::after{display:none !important;content:none !important}
.breadcrumbs span::after{display:none !important}
.breadcrumbs .active,
.breadcrumbs li.active{
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    color:var(--mc-text) !important;
    font-size:12.5px !important;
    font-weight:600;
    line-height:1.4 !important;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.breadcrumbs h1{
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    color:var(--mc-text) !important;
    font-size:12.5px !important;
    font-weight:600;
    line-height:1.4 !important;
    text-transform:uppercase;
    letter-spacing:.3px;
}

/* ===== Mobile header (#mhdr) — self-contained ===== */
#mhdr{position:relative;width:100%;background:var(--mc-bg,#0b0f1a);margin-bottom:14px;z-index:50}
#mhdr .mhdr-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 12px;min-height:56px;gap:10px;
}
#mhdr .mhdr-burger{
    flex:0 0 40px;width:40px;height:38px;padding:0;margin:0;border:0;cursor:pointer;
    background:rgba(255,255,255,.06);border-radius:8px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
#mhdr .mhdr-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
#mhdr .mhdr-burger.active{background:rgba(255,107,26,.25)}
#mhdr .mhdr-logo{
    flex:1 1 auto;display:flex;align-items:center;justify-content:center;
    min-width:0;text-decoration:none;
}
#mhdr .mhdr-logo img,#mhdr .mhdr-logo svg{height:36px;max-height:36px;width:auto;display:block}
#mhdr .mhdr-search-btn{
    flex:0 0 38px;width:38px;height:38px;padding:0;margin:0;border:0;cursor:pointer;
    background:linear-gradient(135deg,var(--mc-primary,#ff6b1a),#ff8f3a);
    border-radius:50%;color:#fff;font-size:16px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px -2px rgba(255,107,26,.5);
}
#mhdr .mhdr-search-form{
    position:absolute;top:100%;left:10px;right:10px;z-index:20;
    background:#131826;border:1px solid var(--mc-border,#242a3a);
    border-radius:12px;padding:8px 10px;margin-top:6px;
    display:none;
}
#mhdr .mhdr-search-form.open{display:block}
#mhdr .mhdr-search-form #mkeyword{
    width:calc(100% - 30px);background:transparent;border:0;outline:0;
    color:#fff;font-size:14px;padding:6px 0;
}
#mhdr .mhdr-search-form .fa-arrow-circle-right{
    color:var(--mc-primary,#ff6b1a);font-size:20px;cursor:pointer;
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
}

/* Drawer — dark theme */
#mhdr .mhdr-drawer{
    position:fixed;top:0;left:-280px;bottom:0;width:260px;z-index:1001;
    background:#0d111c;border-right:1px solid var(--mc-border,#242a3a);
    overflow-y:auto;overflow-x:hidden;transition:left .28s ease;
    padding:14px 0;
}
#mhdr .mhdr-drawer.open{left:0}
/* Overlay chỉ che phần PHẢI của drawer, không đè lên menu */
#mhdr-overlay{
    position:fixed;top:0;right:0;bottom:0;left:260px;
    background:rgba(0,0,0,.55);z-index:1000;
}

#mhdr .mhdr-menu{list-style:none;margin:0;padding:0}
#mhdr .mhdr-menu .menu-item{border-bottom:1px solid rgba(255,255,255,.05)}
#mhdr .mhdr-menu .menu-item > a{
    display:block;padding:13px 18px;color:#fff;font-size:13.5px;text-decoration:none;
    cursor:pointer;position:relative;
}
#mhdr .mhdr-menu .menu-item.has-dropdown > a::after{
    content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);
    font-size:18px;color:rgba(255,255,255,.6);
}
#mhdr .mhdr-menu .menu-item.has-dropdown > a.active::after{content:'-';font-size:22px}
#mhdr .mhdr-menu .sub-menu{
    list-style:none;margin:0;padding:0;display:none;
    background:rgba(255,255,255,.025);
}
#mhdr .mhdr-menu .sub-menu.expanded{display:block}
#mhdr .mhdr-menu .sub-menu .sub-menu-item a{
    display:block;padding:10px 32px;color:rgba(255,255,255,.82);
    font-size:12.5px;text-decoration:none;
}
#mhdr .mhdr-menu .caret-ico{display:none}

/* ===== Other mobile tweaks (unchanged) ===== */
@media (max-width:979px){
    /* Body grid mobile: auto-fit smaller cards */
    .list-films.film-new .film-moi,
    .list-films.film-new > ul{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;
        gap:10px !important;
    }
    .list-films .item .img-film{height:auto !important;aspect-ratio:2/3}

    /* Hide desktop-only sidebar (already hidden by theme responsive.css but reinforce) */
    .main-content .right-content{display:none !important}
    .main-content .left-content{width:100% !important;margin:0 0 20px !important;float:none !important}

    /* Titles smaller */
    .title-box .tophot,.title-box .tab,.title-box .tab.active{font-size:14px !important;padding:8px 0 !important}

    /* Film hot on mobile */
    #film_hot .item .img-film{height:auto}
}

@media (max-width:480px){
    .list-films.film-new .item .name{font-size:11.5px;padding:8px !important}
    .main-menu{width:78vw}
}

/* Keep existing rules that should still apply */
#page-info .blockbody .title{color:var(--mc-primary-2)}
#player-video .details .name h1 a,
#player-video .details .name span{color:var(--mc-primary-2)}
.film-note{border:1px solid var(--mc-primary);background:var(--mc-surface)}
#player-video .bottom-content{background:var(--mc-surface)}
#suggestions ul.autocomplete-list li span,
#suggestions ul.autocomplete-list li strong,
#suggestions ul.autocomplete-list li.last a{color:var(--mc-primary-2)}

/* Live search suggestions dropdown (vanilla JS, under #keyword input) */
.search-container{position:relative}
#search-suggest.search-suggest{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:1000;
    background:var(--mc-surface);
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    box-shadow:0 10px 28px -8px rgba(0,0,0,.6);
    max-height:420px;
    overflow-y:auto;
    padding:6px;
}
.search-suggest__item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:6px;
    color:var(--mc-text);
    text-decoration:none !important;
    transition:background .15s ease;
    line-height:1.35;
}
.search-suggest__item:hover,
.search-suggest__item.is-active{
    background:var(--mc-primary-soft);
}
.search-suggest__thumb{
    width:40px;
    height:54px;
    object-fit:cover;
    border-radius:4px;
    flex:0 0 40px;
    background:var(--mc-bg-2);
}
.search-suggest__text{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.search-suggest__name{
    color:var(--mc-text);
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.search-suggest__name strong{color:var(--mc-primary-2);font-weight:700}
.search-suggest__meta{
    color:var(--mc-text-muted);
    font-size:11.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.search-suggest__meta em{
    color:var(--mc-primary);
    font-style:normal;
    font-weight:600;
}
.search-suggest__all{
    display:block;
    margin-top:4px;
    padding:8px 10px;
    border-top:1px solid var(--mc-border);
    color:var(--mc-primary-2) !important;
    font-size:12.5px;
    font-weight:600;
    text-decoration:none !important;
    text-align:center;
    transition:color .15s;
}
.search-suggest__all:hover{color:var(--mc-primary) !important}
.search-suggest__empty{
    padding:14px 10px;
    color:var(--mc-text-muted);
    font-size:13px;
    text-align:center;
}
#search-suggest::-webkit-scrollbar{width:6px}
#search-suggest::-webkit-scrollbar-track{background:transparent}
#search-suggest::-webkit-scrollbar-thumb{background:var(--mc-border-2);border-radius:3px}
#search-suggest::-webkit-scrollbar-thumb:hover{background:var(--mc-primary)}

/* Search autocomplete dropdown (jquery-autocomplete popup) */
.autocomplete-suggestions{
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border) !important;
    border-radius:var(--mc-radius-sm) !important;
    box-shadow:var(--mc-shadow-1) !important;
    padding:6px !important;
    margin-top:4px;
    color:var(--mc-text);
    font-size:13px;
    max-height:420px !important;
    overflow-y:auto !important;
}
.autocomplete-suggestion{
    padding:8px 12px !important;
    white-space:normal !important;
    overflow:hidden;
    color:var(--mc-text);
    border-radius:6px;
    cursor:pointer;
    transition:background .15s ease;
    line-height:1.4;
}
.autocomplete-suggestion:hover,
.autocomplete-selected{
    background:var(--mc-primary-soft) !important;
    color:var(--mc-text) !important;
}
.autocomplete-suggestions strong{
    font-weight:700 !important;
    color:var(--mc-primary-2) !important;
}
.autocomplete-group{
    padding:8px 12px !important;
    color:var(--mc-text-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.autocomplete-group strong{
    display:block;
    border-bottom:1px solid var(--mc-border) !important;
    padding-bottom:6px;
    color:var(--mc-text-muted) !important;
    font-weight:600 !important;
}
/* scrollbar */
.autocomplete-suggestions::-webkit-scrollbar{width:6px}
.autocomplete-suggestions::-webkit-scrollbar-track{background:transparent}
.autocomplete-suggestions::-webkit-scrollbar-thumb{background:var(--mc-border-2);border-radius:3px}
.autocomplete-suggestions::-webkit-scrollbar-thumb:hover{background:var(--mc-primary)}
#page-info .latest-episode > a:hover,
.list-episode > a:hover,
.list-episode > a.current,
ul.server-backup li span.active,
ul.server-backup li span:hover{background:var(--mc-primary)}
.server-episode-block{font-size:16px;font-weight:700;margin-bottom:10px;color:var(--mc-primary-2)}

/* ---------- TAGS (movie detail page) ---------- */
#page-info .tags{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:16px 0 !important;
    padding:0;
    list-style:none;
    overflow:visible !important;
}
#page-info .tags li{
    float:none !important;
    margin:0 !important;
    padding:0;
    list-style:none;
    display:inline-flex;
    align-items:center;
}
#page-info .tags li.caption{
    padding:0 !important;
    color:var(--mc-primary-2) !important;
    font-weight:600;
    font-size:13px;
    gap:4px;
    text-transform:uppercase;
    letter-spacing:.5px;
}
#page-info .tags li.caption span{margin-right:4px}
#page-info .tags li.caption .fa{
    color:var(--mc-primary);
    font-size:12px;
}
#page-info .tags .tag-item{
    margin:0 !important;
}
#page-info .tags .tag-item h2,
#page-info .tags .tag-item h3,
#page-info .tags .tag-item h4{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    font-size:12.5px;
    font-weight:500;
    line-height:1;
    display:inline-block;
}
#page-info .tags .tag-item a{
    display:inline-block;
    padding:6px 12px;
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border);
    border-radius:999px;
    color:#e8ebf0 !important;
    font-size:12.5px;
    font-weight:500;
    text-decoration:none;
    transition:all .2s ease;
    white-space:nowrap;
}
#page-info .tags .tag-item a:hover{
    background:var(--mc-primary) !important;
    border-color:var(--mc-primary);
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 3px 8px -2px rgba(255,107,26,.4);
}

/* ---------- MOVIE DETAIL PAGE (single.blade) ---------- */
#page-info .blockbody{
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius) !important;
    padding:20px !important;
    overflow:visible !important;
}

/* Info row: poster + text side by side */
#page-info .blockbody .info{
    display:flex;
    gap:24px;
    align-items:flex-start;
}
#page-info .blockbody .poster{
    float:none !important;
    flex:0 0 300px;
    width:300px !important;
    max-width:40%;
    margin:0 !important;
    border-radius:var(--mc-radius-sm);
    overflow:hidden;
    background:var(--mc-bg-2);
    box-shadow:var(--mc-shadow-1);
}
#page-info .blockbody .poster > a{display:block;line-height:0}
.poster img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:2/3;
    object-fit:cover;
    display:block;
}

/* Buttons overlay under poster */
.poster .buttons{
    position:static !important;
    background:transparent !important;
    padding:12px !important;
    display:flex;
    gap:8px;
    width:100%;
    box-sizing:border-box;
}
.poster .buttons li{flex:1 1 50%;display:block !important;margin:0 !important;list-style:none}
.poster .buttons .btn-see{
    display:block;
    width:100%;
    padding:10px 12px !important;
    margin:0 !important;
    font-size:13px !important;
    font-weight:600;
    text-align:center;
    border-radius:var(--mc-radius-sm) !important;
    text-transform:uppercase;
    letter-spacing:.3px;
    transition:all .2s ease;
}
.poster .buttons .btn-primary{
    background:linear-gradient(135deg,#3498db,#2c7fc0) !important;
    border:none !important;
    color:#fff !important;
}
.poster .buttons .btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px -4px rgba(52,152,219,.5);
}
.poster .buttons .btn-danger{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border:none !important;
    color:#fff !important;
}
.poster .buttons .btn-danger:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px -4px rgba(255,107,26,.55);
}
.poster .buttons .btn-secondary{
    background:var(--mc-border) !important;
    border:none !important;
    color:#8a909c !important;
}

/* Text block next to poster */
#page-info .blockbody .text{
    flex:1 1 auto;
    min-width:0;
    color:var(--mc-text);
    overflow:visible !important;
}
#page-info .blockbody .text h1{margin:0 0 6px !important}
#page-info .blockbody .text h2{margin:0 0 14px !important}
#page-info .blockbody .title{
    font-family:'roboto','Tahoma',sans-serif !important;
    font-size:26px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    color:var(--mc-primary-2) !important;
    text-transform:none !important;
    padding:0 !important;
}
#page-info .blockbody .real-name{
    font-size:14px !important;
    color:var(--mc-text-muted) !important;
    font-weight:400;
    font-style:italic;
}

/* dinfo - definition list */
#page-info .dinfo{
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    padding:14px 16px !important;
    margin:0 0 12px !important;
    height:auto !important;
    overflow:visible !important;
}
#page-info .dinfo .col{
    float:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    line-height:1.7 !important;
    font-size:13.5px !important;
    color:var(--mc-text) !important;
    display:grid;
    grid-template-columns:max-content 1fr;
    grid-column-gap:10px;
    grid-row-gap:6px;
}
#page-info .dinfo .col dt,
#page-info .dinfo .col dd{line-height:1.55 !important;margin:0}
#page-info .dinfo dt{
    float:none !important;
    margin:0 !important;
    color:var(--mc-text-muted) !important;
    font-weight:500 !important;
    font-size:13px;
}
#page-info .dinfo dd{
    margin:0 !important;
    color:var(--mc-text) !important;
    font-weight:500;
}
#page-info .dinfo .col a{
    color:var(--mc-primary-2) !important;
    text-decoration:none;
    transition:color .15s ease;
}
#page-info .dinfo .col a:hover{color:var(--mc-primary) !important}
#page-info .dinfo .film-status .badge{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    color:#fff !important;
    border-radius:var(--mc-radius-sm) !important;
    padding:3px 10px !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    text-transform:uppercase;
    letter-spacing:.3px;
}

/* Neutralize slimScroll wrapper if any legacy JS still runs */
.slimScrollDiv{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    width:auto !important;
}
.slimScrollDiv > .slimScrollBar,
.slimScrollDiv > .slimScrollRail{display:none !important}
#page-info .dinfo[style]{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

/* Rating block */
.btn-groups{
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    color:var(--mc-text-muted) !important;
}
.btn-groups .col{background:transparent !important}
.btn-groups .box-rating{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
}
.btn-groups .box-rating #star{
    display:inline-block !important;
    width:auto !important;
    line-height:1;
    cursor:pointer;
    margin:0 !important;
    white-space:nowrap;
    flex:0 0 auto;
}
.btn-groups .box-rating #star img{
    width:22px;
    height:22px;
    margin:0 2px 0 0;
    display:inline-block;
    vertical-align:middle;
}
.btn-groups .box-rating > div:not(#star){
    flex:1 1 auto;
    min-width:0;
}
.btn-groups #div_average{
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.3 !important;
    color:var(--mc-text-muted);
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    white-space:nowrap;
}
.btn-groups #div_average #hint{
    color:var(--mc-primary-2);
    font-weight:700;
    font-size:14px;
}
.btn-groups #div_average #hint:empty{display:none}
.btn-groups #div_average .average{
    color:var(--mc-primary-2);
    font-weight:700;
    font-size:15px;
}
.btn-groups #div_average #rate_count{color:var(--mc-text);font-weight:600}

/* Latest episodes */
#page-info .latest-episode{
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    padding:10px 14px !important;
    margin:16px 0 0 !important;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
#page-info .latest-episode .heading{
    float:none !important;
    margin:0 !important;
    color:var(--mc-text-muted);
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
}
#page-info .latest-episode > a{
    float:none !important;
    margin:0 !important;
    padding:6px 12px !important;
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    color:var(--mc-text) !important;
    font-size:13px;
    font-weight:500;
    transition:all .2s ease;
}
#page-info .latest-episode > a:hover,
#page-info .latest-episode > a.current{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
    transform:translateY(-1px);
}

/* Content / description block */
.blockbody .detail{
    margin:20px 0 0 !important;
    color:var(--mc-text) !important;
    font-size:14px;
    line-height:1.65;
}
.blockbody .heading,
#info-film .heading{
    font-size:15px !important;
    font-weight:700 !important;
    color:var(--mc-primary-2) !important;
    text-transform:uppercase !important;
    letter-spacing:.5px;
    padding:0 0 0 10px;
    border-left:3px solid var(--mc-primary);
    margin:0 0 12px !important;
}
#page-info .detail .tabs-content{
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm) !important;
    padding:16px !important;
    color:var(--mc-text);
}
#page-info .detail .tabs-content .tab{
    color:var(--mc-text);
    font-size:13.5px;
    line-height:1.7;
}
#page-info .detail .tabs-content b{color:var(--mc-primary-2)}

/* Film note (Ghi chú / Lịch chiếu) */
.film-note{
    margin:14px 0 0 !important;
    border:1px solid var(--mc-primary) !important;
    background:var(--mc-primary-soft) !important;
    color:var(--mc-text) !important;
    border-radius:var(--mc-radius-sm);
    padding:12px 14px !important;
    font-size:13.5px;
}

/* Related films carousel ("Phim đề cử") */
.list-films.film-hot{margin-top:24px}
.list-films.film-hot .title-box{
    font-size:18px !important;
    font-weight:700;
    margin-bottom:14px !important;
    color:var(--mc-primary-2);
    padding-left:10px;
    border-left:3px solid var(--mc-primary);
    text-transform:uppercase;
    letter-spacing:.3px;
}
.list-films.film-hot .title-box .fa{color:var(--mc-primary);margin-right:6px}
.list-films.film-hot .title-box a{color:var(--mc-primary-2) !important;text-decoration:none}
#film_related .item{
    border-radius:var(--mc-radius-sm);
    overflow:hidden;
    background:var(--mc-bg-2);
    border:1px solid var(--mc-border);
    transition:all .25s ease;
}
#film_related .item:hover{
    transform:translateY(-3px);
    border-color:rgba(255,107,26,.5);
    box-shadow:var(--mc-shadow-2);
}
#film_related .item > a{display:block;position:relative;overflow:hidden}
#film_related .item .img-film{
    width:100% !important;
    aspect-ratio:2/3;
    object-fit:cover;
    transition:transform .4s ease;
}
#film_related .item:hover .img-film{transform:scale(1.05)}
#film_related .item .text{
    position:static !important;
    padding:10px 12px !important;
    background:transparent !important;
    text-align:left;
}
#film_related .item .text span,
#film_related .item .text a{
    color:var(--mc-text) !important;
    font-size:13px !important;
    font-weight:600 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.35;
}
#film_related .item:hover .text a{color:var(--mc-primary-2) !important}

/* Owl carousel nav arrows */
.owl-theme .owl-controls .owl-buttons div{
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;
    opacity:1 !important;
    border-radius:999px !important;
    width:34px;height:34px;line-height:34px !important;
    padding:0 !important;
    transition:all .2s ease;
}
.owl-theme .owl-controls .owl-buttons div:hover{
    background:var(--mc-primary) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
}

/* Hide alternate button container that might conflict */
.btn-groups .box-btn{display:none}

/* Responsive: stack poster above text on narrow screens */
@media (max-width:768px){
    #page-info .blockbody{padding:14px !important}
    #page-info .blockbody .info{flex-direction:column;gap:16px}
    #page-info .blockbody .poster{
        flex:0 0 auto;
        width:100% !important;max-width:280px;
        margin:0 auto !important;
    }
    #page-info .dinfo .col{grid-template-columns:110px 1fr}
    #page-info .blockbody .title{font-size:22px !important}
}

/* =========================================================
   WATCH / EPISODE PAGE (episode.blade.php)
   ========================================================= */
#player-video{
    min-height:auto !important;
    background:var(--mc-surface);
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius);
    padding:16px;
    margin-bottom:20px;
}

/* Player frame */
#player-video .box-player{
    background:#000;
    border-radius:var(--mc-radius-sm);
    overflow:hidden;
    position:relative;
    margin-bottom:12px;
}
#player-video #player{
    background:#000;
    border-radius:var(--mc-radius-sm);
}
/* #player uses Bootstrap .embed-responsive-16by9 (padding-bottom:56.25%).
   Children must be absolute-positioned to overlay the spacer, otherwise
   they stack below it and double the container height. */
#player-video #player iframe,
#player-video #player .video-js,
#player-video #player video{
    position:absolute !important;
    top:0; left:0;
    display:block;
    width:100% !important;
    height:100% !important;
    border:0;
    padding-top:0 !important; /* kill video.js fluid's own 56.25% padding */
    background:#000;
}

/* Tip-change-server notice + streaming buttons */
.tip-change-server{
    float:none !important;
    background:var(--mc-primary-soft) !important;
    border:1px dashed var(--mc-primary) !important;
    border-radius:var(--mc-radius-sm) !important;
    padding:12px 14px !important;
    margin:0 0 12px !important;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    color:var(--mc-text);
    font-size:13px;
}
.tip-change-server > span{
    color:var(--mc-text);
    font-size:13px;
    font-weight:500;
    margin-right:6px;
}
.tip-change-server > span .fa{color:var(--mc-primary)}
.tip-change-server .streaming-server,
.tip-change-server .btn-sv{
    display:inline-block;
    padding:6px 14px !important;
    margin:0 !important;
    background:var(--mc-surface-2) !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;
    border-radius:var(--mc-radius-sm) !important;
    font-size:12.5px !important;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.tip-change-server .streaming-server:hover,
.tip-change-server .streaming-server.btn-success,
.tip-change-server .btn-sv.btn-success{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 4px 10px -3px rgba(255,107,26,.55);
}

/* Lightbulb / control buttons */
.div-control{
    clear:both;
    margin:0 0 16px !important;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}
.video-btn{
    float:none !important;
    margin:0 !important;
    padding:8px 14px !important;
    background:var(--mc-surface-2) !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;
    border-radius:var(--mc-radius-sm) !important;
    font-size:13px !important;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.video-btn:hover{
    background:var(--mc-primary) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
}
.video-btn i{padding:0 !important;font-size:15px}
#btn_lightbulb.off{
    background:var(--mc-primary) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
}

/* Episode list blocks (server - episodes) */
.control-box{
    background:var(--mc-bg-2);
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    padding:14px 16px;
    margin:0 0 12px;
}
.server-episode-block{
    float:none !important;
    display:block;
    font-size:14px !important;
    font-weight:700;
    color:var(--mc-primary-2) !important;
    margin:0 0 10px !important;
    padding:0 0 0 10px;
    border-left:3px solid var(--mc-primary);
    text-transform:uppercase;
    letter-spacing:.3px;
}
.server-episode-block .fa{color:var(--mc-primary);margin-right:6px}
.control-box .episodes{
    padding:0 !important;
    margin:0 !important;
    border-radius:0;
    overflow:visible;
}
.control-box .list-episode{
    margin:0 !important;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.control-box .list-episode > a{
    float:none !important;
    margin:0 !important;
    padding:7px 14px !important;
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;
    border-radius:var(--mc-radius-sm) !important;
    font-size:13px !important;
    font-weight:600;
    transition:all .2s ease;
    min-width:54px;
    text-align:center;
}
.control-box .list-episode > a:hover,
.control-box .list-episode > a.current{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 4px 10px -3px rgba(255,107,26,.5);
}

/* Movie details under player */
#player-video .details{
    clear:both;
    padding:14px 0 0;
    border-top:1px solid var(--mc-border);
    margin-top:10px;
}
#player-video .details .name{
    float:none !important;
    width:auto !important;
    margin:0 0 8px;
}
#player-video .details .name h1,
#player-video .details .name h1 a,
#player-video .details .name span{
    margin:0 !important;
    font-size:22px !important;
    line-height:1.3 !important;
    color:var(--mc-primary-2) !important;
    font-weight:700;
}
#player-video .details .name h2.chapter-name,
#player-video .details .name h2.chapter-name span{
    font-size:22px !important;
    color:var(--mc-primary) !important;
    font-weight:700;
}
#player-video .details .name h2.real-name{
    margin:6px 0 0 !important;
    font-size:14px !important;
    color:var(--mc-text-muted) !important;
    font-weight:400 !important;
    font-style:italic;
    line-height:1.3 !important;
}
#player-video .details .name h2.real-name a{
    color:var(--mc-text-muted) !important;
}
#player-video .details .name h2.real-name a:hover{color:var(--mc-primary) !important}

/* Short description (overrides inline styles with !important) */
#player-video .details .short-description{
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border) !important;
    border-radius:var(--mc-radius-sm) !important;
    padding:12px 14px !important;
    margin:12px 0 !important;
    color:var(--mc-text) !important;
    font-size:13.5px !important;
    line-height:1.65 !important;
}
#player-video .details .short-description a{
    color:var(--mc-primary-2) !important;
    font-weight:600;
    text-decoration:none;
}
#player-video .details .short-description a:hover{color:var(--mc-primary) !important}

/* Bottom-content: related films carousel */
#player-video .bottom-content,
.bottom-content{
    background:transparent !important;
    margin:20px 0 0 !important;
    padding:0 !important;
}
.bottom-content .container{padding:0 !important;width:auto !important}
.bottom-content .list-films.film-hot{margin:0}
.bottom-content .list-films.film-hot .title-box{
    font-size:18px !important;
    font-weight:700;
    margin-bottom:14px !important;
    color:var(--mc-primary-2);
    padding-left:10px;
    border-left:3px solid var(--mc-primary);
    text-transform:uppercase;
    letter-spacing:.3px;
}
.bottom-content .list-films.film-hot .title-box a{
    color:var(--mc-primary-2) !important;
    text-decoration:none;
}

/* Light-off overlay */
#background_lamp{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    z-index:5;
    pointer-events:none;
}
body:has(#background_lamp) #player-video{
    position:relative;
    z-index:10;
}

/* Loading spinner */
.loading-container{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.5);
    pointer-events:none;
    opacity:0;
    transition:opacity .2s;
}
.loading-player{
    width:44px;height:44px;
    border:3px solid rgba(255,107,26,.25);
    border-top-color:var(--mc-primary);
    border-radius:50%;
    animation:mc-spin 1s linear infinite;
}
@keyframes mc-spin{to{transform:rotate(360deg)}}

/* Responsive */
@media (max-width:768px){
    #player-video{padding:10px}
    .tip-change-server{padding:10px !important}
    .control-box{padding:12px}
    #player-video .details .name h1,
    #player-video .details .name h1 a,
    #player-video .details .name span,
    #player-video .details .name h2.chapter-name,
    #player-video .details .name h2.chapter-name span{font-size:18px !important}
    .control-box .list-episode > a{padding:6px 10px !important;font-size:12.5px !important;min-width:44px}
}

/* =========================================================
   CATALOG / LIST PAGE (catalog.blade.php)
   ========================================================= */
/* Filter form bar */
.form-filter{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:10px;
    margin:0 0 20px !important;
    padding:14px 16px !important;
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius-sm);
    overflow:visible !important;
}
.form-filter .filter-item{
    float:none !important;
    margin:0 !important;
    flex:1 1 150px;
    min-width:130px;
    max-width:220px;
}
.form-filter .filter-item label{
    float:none !important;
    display:block;
    margin:0 0 4px !important;
    color:var(--mc-text-muted);
    font-size:12px;
    font-weight:500;
}
.form-filter .filter-item .form-control,
.form-filter select.form-control{
    width:100% !important;
    height:38px !important;
    padding:0 36px 0 12px !important;
    margin:0 !important;
    background:var(--mc-bg-2) !important;
    border:1px solid var(--mc-border) !important;
    border-radius:var(--mc-radius-sm) !important;
    color:var(--mc-text) !important;
    font-size:13px !important;
    font-weight:500;
    cursor:pointer;
    outline:none !important;
    box-shadow:none !important;
    transition:border-color .15s, box-shadow .15s;
    /* Custom caret */
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%238a909c' d='M6 7L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-size:10px 6px !important;
}
.form-filter .filter-item .form-control:focus,
.form-filter select.form-control:focus{
    border-color:var(--mc-primary) !important;
    box-shadow:0 0 0 3px rgba(255,107,26,.15) !important;
}
.form-filter .filter-item .form-control:hover{
    border-color:var(--mc-border-2) !important;
}
.form-filter .filter-item .form-control option{
    background:var(--mc-bg-2);
    color:var(--mc-text);
    padding:8px;
}
.form-filter input[type="submit"],
.form-filter .btn,
.form-filter .btn-success{
    flex:0 0 auto;
    align-self:flex-end;
    padding:0 22px !important;
    height:38px !important;
    margin:0 !important;
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    color:#fff !important;
    border:none !important;
    border-radius:var(--mc-radius-sm) !important;
    font-size:13px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:.4px;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 4px 12px -4px rgba(255,107,26,.5);
}
.form-filter input[type="submit"]:hover,
.form-filter .btn:hover,
.form-filter .btn-success:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px -4px rgba(255,107,26,.65);
    background:linear-gradient(135deg,#ff8f3a,var(--mc-primary)) !important;
}

/* Section title above the grid (catalog page breadcrumb active) */
.breadcrumbs + .form-filter{margin-top:16px !important}

/* Pagination */
.pagination{
    clear:both;
    text-align:center !important;
    display:block !important;
    margin:24px 0 0 !important;
    padding:0 !important;
}
.pagination ul{
    display:inline-flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0;
}
.pagination ul li{
    margin:0 !important;
    padding:0 !important;
    display:inline-block;
    list-style:none;
}
.pagination ul li a,
.pagination ul li span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 12px !important;
    background:var(--mc-surface) !important;
    border:1px solid var(--mc-border) !important;
    color:var(--mc-text) !important;
    border-radius:var(--mc-radius-sm) !important;
    font-size:13px !important;
    font-weight:600 !important;
    text-decoration:none;
    transition:all .2s ease;
    line-height:1;
}
.pagination ul li a:hover{
    background:var(--mc-surface-2) !important;
    border-color:var(--mc-primary) !important;
    color:var(--mc-primary) !important;
    transform:translateY(-1px);
}
.pagination ul li a.current{
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a) !important;
    border-color:var(--mc-primary) !important;
    color:#fff !important;
    box-shadow:0 4px 10px -3px rgba(255,107,26,.5);
    cursor:default;
}
.pagination ul li a.current:hover{transform:none}
.pagination ul li.disabled span{
    background:transparent !important;
    border:none !important;
    color:var(--mc-text-muted) !important;
    padding:0 8px !important;
    min-width:auto;
}
.pagination ul li a.navigation{
    padding:0 16px !important;
    font-weight:700;
}
.pagination ul li a.navigation.prev,
.pagination ul li a.navigation.next{
    background:var(--mc-bg-2) !important;
}

/* Catalog section: hide the old title-box if empty and tidy container */
#page-info .list-films.film-new{margin-top:0}

/* Responsive filter bar */
@media (max-width:768px){
    .form-filter{padding:12px !important;gap:8px}
    .form-filter .filter-item{flex:1 1 calc(50% - 4px);max-width:none}
    .form-filter input[type="submit"],
    .form-filter .btn,
    .form-filter .btn-success{flex:1 1 100%;align-self:stretch}
    .pagination ul li a,
    .pagination ul li span{min-width:34px;height:34px;font-size:12.5px !important}
}

/* =========================================================
   INTERNAL LINKING blocks (single page bottom)
   ========================================================= */
.related-block{
    margin:24px 0;
    padding:18px 20px;
    background:var(--mc-surface);
    border:1px solid var(--mc-border);
    border-radius:var(--mc-radius);
}
.related-block .related-heading{
    margin:0 0 14px;
    padding:0 0 0 10px;
    font-size:15px;
    font-weight:700;
    color:var(--mc-primary-2);
    text-transform:uppercase;
    letter-spacing:.4px;
    border-left:3px solid var(--mc-primary);
}
.related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
    list-style:none;margin:0;padding:0;
}
.related-grid li{margin:0;padding:0;list-style:none}
.related-grid a{
    display:block;
    text-decoration:none;
    color:var(--mc-text);
    transition:transform .2s ease;
}
.related-grid a:hover{transform:translateY(-3px)}
.related-grid a img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:var(--mc-radius-sm);
    background:var(--mc-bg-2);
    display:block;
    margin-bottom:6px;
}
.related-grid .related-name{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:12.5px;
    font-weight:600;
    color:var(--mc-text);
    line-height:1.3;
}
.related-grid a:hover .related-name{color:var(--mc-primary-2)}
.related-grid .related-meta{
    display:block;
    font-size:11px;
    color:var(--mc-text-muted);
    margin-top:2px;
}
.link-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.link-cloud a{
    display:inline-block;
    padding:6px 14px;
    background:var(--mc-bg-2);
    border:1px solid var(--mc-border);
    border-radius:999px;
    color:var(--mc-text);
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:all .2s ease;
}
.link-cloud a:hover{
    background:var(--mc-primary);
    border-color:var(--mc-primary);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 4px 10px -3px rgba(255,107,26,.5);
}

/* =========================================================
   404 PAGE
   ========================================================= */
.error-page{
    text-align:center;
    padding:80px 20px;
    color:var(--mc-text);
}
.error-page .err-code{
    font-size:120px;
    font-weight:900;
    line-height:1;
    background:linear-gradient(135deg,var(--mc-primary),var(--mc-primary-2));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    margin:0 0 12px;
}
.error-page h1{font-size:24px;margin:0 0 12px;color:var(--mc-text)}
.error-page p{color:var(--mc-text-muted);margin:0 0 26px;font-size:14px}
.error-page .err-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.error-page .err-actions a{
    display:inline-block;
    padding:10px 22px;
    background:linear-gradient(135deg,var(--mc-primary),#ff8f3a);
    color:#fff;
    border-radius:var(--mc-radius-sm);
    font-weight:600;
    text-decoration:none;
    box-shadow:0 4px 12px -3px rgba(255,107,26,.5);
    transition:transform .2s ease;
}
.error-page .err-actions a.secondary{
    background:var(--mc-surface-2);
    color:var(--mc-text);
}
.error-page .err-actions a:hover{transform:translateY(-1px)}

/* ===== Vanilla carousel (thay owl.carousel) — apply thẳng vào ID để không cần JS ===== */
.mc-carousel-wrap{position:relative}

#film_hot,#film_related,.mc-carousel{
    display:flex !important;gap:10px !important;list-style:none;padding:0 !important;margin:0 !important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;height:auto !important;
    /* Ẩn scrollbar cho đẹp, vẫn scroll được */
    scrollbar-width:none;-ms-overflow-style:none;
}
#film_hot::-webkit-scrollbar,#film_related::-webkit-scrollbar,.mc-carousel::-webkit-scrollbar{display:none;height:0;width:0}

#film_hot > li,#film_hot > .item,
.mc-carousel > li,.mc-carousel > .item{
    flex:0 0 calc((100% - 50px)/6) !important;scroll-snap-align:start;list-style:none;
    width:auto !important;margin:0 !important;float:none !important;
}
@media (max-width:1200px){#film_hot > li,#film_hot > .item,.mc-carousel > li,.mc-carousel > .item{flex-basis:calc((100% - 40px)/5) !important}}
@media (max-width:980px){#film_hot > li,#film_hot > .item,.mc-carousel > li,.mc-carousel > .item{flex-basis:calc((100% - 30px)/4) !important}}
@media (max-width:700px){#film_hot > li,#film_hot > .item,.mc-carousel > li,.mc-carousel > .item{flex-basis:calc((100% - 20px)/3) !important}}
@media (max-width:479px){#film_hot > li,#film_hot > .item,.mc-carousel > li,.mc-carousel > .item{flex-basis:calc((100% - 10px)/2) !important}}

/* Related carousel: ít item/row hơn */
#film_related > li,#film_related > .item{flex:0 0 calc((100% - 30px)/4) !important;scroll-snap-align:start;list-style:none;width:auto !important;margin:0 !important;float:none !important}
@media (max-width:700px){#film_related > li,#film_related > .item{flex-basis:calc((100% - 20px)/3) !important}}
@media (max-width:479px){#film_related > li,#film_related > .item{flex-basis:calc((100% - 10px)/2) !important}}

.mc-carousel-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
    background:linear-gradient(135deg,var(--mc-primary,#ff6b1a),#ff8f3a);
    color:#fff;font-size:20px;line-height:1;padding:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px -2px rgba(255,107,26,.55);
    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
    opacity:0;
}
.mc-carousel-wrap:hover .mc-carousel-nav{opacity:1}
.mc-carousel-nav:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px -2px rgba(255,107,26,.75)}
.mc-carousel-nav.disabled{opacity:.25 !important;pointer-events:none}
.mc-carousel-prev{left:-18px}
.mc-carousel-next{right:-18px}
/* Mobile — luôn hiện (không hover trên touch) */
@media (max-width:979px){
    .mc-carousel-nav{opacity:.85;width:34px;height:34px;font-size:16px}
    .mc-carousel-prev{left:2px}
    .mc-carousel-next{right:2px}
}

/* ===== Vanilla stars (thay jquery.raty) ===== */
.mc-stars{display:inline-flex;gap:2px;line-height:1;vertical-align:middle}
.mc-star{
    width:14px;height:14px;display:inline-block;position:relative;
    background:linear-gradient(90deg,#ffb400 var(--mc-fill,0%),#3a3f4a var(--mc-fill,0%));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center/contain;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-stars-interactive{cursor:pointer;gap:3px}
.mc-stars-interactive .mc-star{width:18px;height:18px;background:#3a3f4a}
.mc-stars-interactive .mc-star.filled{background:#ffb400}
.mc-stars-interactive .mc-star:hover{filter:brightness(1.1)}