/* VsmovCms - CSS bo sung (ghi de nhe, khong sua CSS goc cua theme) */

/* ===== Bo loc phim (archive) ===== */
.v-filter { margin: 14px 0 18px; }
.v-filter #form-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.v-filter .form-group {
    flex: 1 1 150px; min-width: 140px;
    background: #171b26; border: 1px solid #2a3044; border-radius: 8px;
    padding: 4px 10px; margin: 0;
    display: flex; align-items: center;
}
.v-filter select {
    width: 100%; background: transparent; border: 0; outline: none;
    color: #e8eaf0; font-size: 14px; font-weight: 600; padding: 10px 2px;
    appearance: auto; cursor: pointer;
}
.v-filter select option { background: #171b26; color: #e8eaf0; }
.v-filter .btn { white-space: nowrap; }

/* ===== Trang dien vien ===== */
.actor-head { display: flex; gap: 22px; align-items: flex-start; margin: 18px 0 8px; flex-wrap: wrap; }
.actor-photo { width: 170px; flex-shrink: 0; }
.actor-photo img { width: 170px; height: 230px; object-fit: cover; border-radius: 12px; background: #222; display: block; }
.actor-photo .no-photo { width: 170px; height: 230px; border-radius: 12px; background: #222a3a; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #5a6578; }
.actor-info { flex: 1; min-width: 260px; }
.actor-info h1 { font-size: 28px; margin: 0 0 6px; }
.actor-info .actor-meta { color: #9aa0b4; font-size: 14px; margin-bottom: 10px; }
.actor-bio { color: #c9cede; font-size: 14px; line-height: 1.7; }
.actor-bio.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.actor-bio-toggle { color: #1e80ff; cursor: pointer; font-size: 13px; margin-top: 6px; display: inline-block; }

/* ===== TVC pre-roll trong player ===== */
#tvc-overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#tvc-badge {
    position: absolute; top: 12px; left: 12px; pointer-events: none;
    background: rgba(0,0,0,.65); color: #ffd875; font-size: 12px; font-weight: 700;
    padding: 5px 10px; border-radius: 6px; letter-spacing: .5px;
}
#tvc-skip {
    /* Goc TREN ben phai: o duoi bi thanh dieu khien player de len khong bam duoc */
    position: absolute; right: 12px; top: 12px; bottom: auto; z-index: 30; pointer-events: auto;
    background: rgba(20,20,25,.85); color: #fff; border: 1px solid #555;
    font-size: 13px; padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
#tvc-skip:not(:disabled):hover { background: #1e80ff; border-color: #1e80ff; }
#tvc-skip:disabled { opacity: .75; cursor: default; }
#tvc-click { position: absolute; inset: 0; z-index: 15; display: block; }

/* ===== Mobile tinh chinh ===== */
@media (max-width: 640px) {
    .actor-photo, .actor-photo img, .actor-photo .no-photo { width: 120px; height: 162px; }
    .actor-info h1 { font-size: 22px; }
}

/* ===== Top phim hot — hàng ngang xếp hạng ===== */
.top-rank-swiper { overflow: hidden; padding: 4px 2px 6px; }
.top-rank-swiper .swiper-slide { width: 200px; flex-shrink: 0; }
.top-rank-item .v-thumbnail {
    display: block; border-radius: 12px; overflow: hidden;
    aspect-ratio: 3/4; background: #1c2130; position: relative;
}
.top-rank-item .v-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-rank-item .v-thumbnail:hover img { transform: scale(1.04); }
.top-rank-item .v-thumbnail img { transition: transform .35s ease; }
.top-rank-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 2px; }
.rank-num {
    font-size: 54px; font-weight: 900; font-style: italic; line-height: 1;
    color: #FFC93C; flex-shrink: 0; min-width: 42px;
    transform: skewX(-7deg);
    text-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.rank-info { min-width: 0; flex: 1; }
.rank-title { font-size: 15px; font-weight: 700; color: #fff; }
.rank-title a { color: inherit; text-decoration: none; }
.rank-title a:hover { color: #FFC93C; }
.rank-sub { font-size: 13px; color: #9aa0b4; margin-top: 3px; }
@media (max-width: 640px) {
    .top-rank-swiper .swiper-slide { width: 148px; }
    .rank-num { font-size: 42px; min-width: 34px; }
    .rank-title { font-size: 13px; }
}

/* ===== Spotlight Phim chieu rap ===== */
.spot-more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #3a4157; color: #cfd4e3; text-decoration: none;
}
.spot-more:hover { border-color: #FFC93C; color: #FFC93C; }
.spotlight {
    position: relative; border-radius: 18px;
    background: #232838; min-height: 540px;
    display: flex; flex-direction: column; justify-content: flex-end;
    margin-bottom: 92px;
}
.spot-bg {
    position: absolute; inset: 0; border-radius: 18px;
    background-size: cover; background-position: center right;
    transition: opacity .2s ease;
}
.spot-shade {
    position: absolute; inset: 0; border-radius: 18px;
    background: linear-gradient(90deg, rgba(20,24,36,.96) 0%, rgba(20,24,36,.88) 34%, rgba(20,24,36,.25) 68%, rgba(20,24,36,.05) 100%),
                linear-gradient(0deg, rgba(20,24,36,.94) 0%, rgba(20,24,36,0) 46%);
}
.spot-content {
    position: relative; z-index: 2; max-width: 580px;
    padding: 52px 0 70px 56px;
    transition: opacity .2s ease;
}
.spotlight.spot-fade .spot-content, .spotlight.spot-fade .spot-bg { opacity: 0; }
.spot-title { font-size: 32px; font-weight: 800; margin: 0 0 4px; line-height: 1.25; }
.spot-title a { color: #fff; text-decoration: none; }
.spot-origin { color: #4ade80; font-size: 15px; margin-bottom: 14px; }
.spot-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.spot-badges .badge {
    border: 1px solid #4a5468; color: #dfe3ee; font-size: 12px;
    padding: 4px 10px; border-radius: 6px;
}
.spot-badges .badge-imdb {
    border: 1px solid #a3852a; color: #FFC93C; font-size: 12px;
    padding: 4px 10px; border-radius: 6px;
}
.spot-badges .badge-imdb b { font-weight: 800; }
.spot-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.spot-genres span {
    background: #2e3547; color: #cfd4e3; font-size: 12px;
    padding: 5px 12px; border-radius: 6px;
}
.spot-desc { color: #aeb4c6; font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
.spot-play {
    display: inline-flex; align-items: center; justify-content: center; gap:8px;
    min-width: 120px; height: 44px; padding: 0 20px; border-radius: 10px; margin-bottom: 18px;
    background: #FFC93C; color: #1a1a1a; font-size:15px; font-weight:700; text-decoration: none;
    box-shadow: 0 6px 24px rgba(255,201,60,.35);
    transition: transform .2s ease;
}
.spot-play:hover { transform: scale(1.08); color: #1a1a1a; }
/* Dai thumb anh doc, loi ra ngoai day slide */
.spot-thumbs {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    transform: translateY(52%);
    display: flex; gap: 14px;
    padding: 6px 56px 10px; overflow-x: auto;
    scrollbar-width: none;
}
.spot-thumbs::-webkit-scrollbar { display: none; }
.spot-thumb {
    flex: 0 0 104px; width: 104px; height: 142px; padding: 0;
    border: 2px solid rgba(255,255,255,.25); border-radius: 12px; overflow: hidden;
    background: #1c2130; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    transition: transform .2s ease, border-color .2s ease;
}
.spot-thumb:hover { transform: translateY(-4px); }
.spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-thumb.active { border-color: #fff; }
.spot-thumb:not(.active) { opacity: .8; }
@media (max-width: 768px) {
    .spotlight { min-height: 400px; margin-bottom: 70px; border-radius: 14px; }
    .spot-bg, .spot-shade { border-radius: 14px; }
    .spot-thumbs{position:absolute;left:0;right:0;bottom:0;transform:translateY(50%);padding:6px 14px 10px}
    .spot-thumb{flex:0 0 72px;width:72px;height:98px}
    .spot-content { padding: 28px 18px 20px; max-width: 100%; }
    .spot-play{min-width:0!important;height:42px!important;padding:0 18px!important;font-size:14px!important;white-space:nowrap!important;margin-bottom:40px!important}
    .spot-play span{white-space:nowrap!important}
    .spot-play svg{flex-shrink:0}
    .spot-title { font-size: 22px; }
    .spot-origin { font-size: 13px; }
    .spot-desc { font-size: 13px; margin-bottom: 22px; }
    .spot-thumbs { padding: 4px 16px 8px; gap: 10px; }
    .spot-thumb { flex-basis: 74px; width: 74px; height: 100px; border-radius: 9px; }
}

/* ---- Mobile: le nho lai cho tinh te ---- */
@media (max-width: 768px) {
    .cards-row.wide, .cards-row.fixed, .container { padding-left: 6px; padding-right: 6px; }
    .fluid-gap { gap: 32px; }
    .row-header { margin-bottom: 12px; }
    .category-name { font-size: 17px; }
    #wrapper { padding-bottom: 5rem; }
}

/* ---- Auth: dang nhap / dang ky ---- */
.vs-auth-wrap { display: flex; justify-content: center; padding: 40px 12px 60px; }
.vs-auth-card {
    width: 420px; max-width: 100%; background: #1e2230;
    border: 1px solid #2e3448; border-radius: 16px; padding: 36px 32px;
}
.vs-auth-title { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.vs-auth-sub { color: #9aa0b4; font-size: 14px; margin: 0 0 22px; }
.vs-auth-form label { display: block; color: #cfd4e3; font-size: 13.5px; margin-bottom: 14px; }
.vs-auth-form input {
    display: block; width: 100%; margin-top: 6px; padding: 11px 14px;
    background: #141824; border: 1px solid #2e3448; border-radius: 9px;
    color: #fff; font-size: 14.5px;
}
.vs-auth-form input:focus { outline: none; border-color: #FFC93C; }
.vs-btn-primary {
    width: 100%; padding: 12px; border: none; border-radius: 9px;
    background: #FFC93C; color: #1a1a1a; font-weight: 800; font-size: 15px; cursor: pointer;
}
.vs-btn-primary:hover { filter: brightness(1.06); }
.vs-btn-ghost {
    padding: 9px 16px; border: 1px solid #3a4157; border-radius: 8px;
    background: transparent; color: #cfd4e3; cursor: pointer; font-size: 13.5px;
}
.vs-btn-ghost:hover { border-color: #FFC93C; color: #FFC93C; }
.vs-alert { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px; }
.vs-alert-err { background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.4); color: #fca5a5; }
.vs-alert-ok { background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.4); color: #86efac; }
.vs-auth-alt { text-align: center; color: #9aa0b4; font-size: 13.5px; margin: 18px 0 0; }
.vs-auth-alt a { color: #FFC93C; }
/* ---- Header: khu vuc thanh vien ---- */
.vs-user-area { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.vs-user-btn {
    padding: 8px 18px; border-radius: 20px; font-size: 13.5px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.vs-user-login { border: 1px solid #3a4157; color: #cfd4e3; }
.vs-user-login:hover { border-color: #FFC93C; color: #FFC93C; text-decoration: none; }
.vs-user-reg { background: #FFC93C; color: #1a1a1a; }
.vs-user-reg:hover { filter: brightness(1.06); color: #1a1a1a; text-decoration: none; }
.vs-user-name { color: #fff; font-size: 13.5px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-user-out { color: #9aa0b4; font-size: 13px; }
.vs-user-out:hover { color: #fca5a5; }
@media (max-width: 768px) {
    .vs-user-area { margin-left: 0; }
    .vs-user-name { display: none; }
    .vs-user-btn { padding: 7px 13px; font-size: 12.5px; }
}

/* ---- Actor cards (trang chi tiet / xem phim) ---- */
.vs-actor-row { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; }
.vs-actor-row::-webkit-scrollbar { display: none; }
.vs-actor { flex: 0 0 84px; width: 84px; text-align: center; text-decoration: none; }
.vs-actor:hover { text-decoration: none; }
.vs-actor-ph {
    display: flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    background: #2a3044; color: #FFC93C; font-size: 30px; font-weight: 800;
    border: 2px solid #343b52; margin: 0 auto;
}
.vs-actor-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-actor-name {
    display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: #cfd4e3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vs-actor:hover .vs-actor-name { color: #FFC93C; }
@media (max-width: 768px) {
    .vs-actor-row { gap: 10px; }
    .vs-actor, .vs-actor-ph { width: 68px; }
    .vs-actor-ph { height: 68px; font-size: 24px; }
    .vs-actor { flex-basis: 68px; }
}

/* ---- Thu hep khoang trong tren/dưới wrapper (mac dinh 10rem = 160px qua to) ---- */
#wrapper{padding-top:5.5rem;padding-bottom:4rem}
@media (max-width: 768px){ #wrapper{padding-top:4.5rem;padding-bottom:3rem} }

/* ---- Fix layout dien vien: theme ep grid 3 cot lam hong hang ngang ---- */
.child-actors .child-actors-list{display:block}
.ws-actors .vs-actor-row{flex-wrap:wrap}
.vs-actor-row{display:flex;gap:14px;flex-wrap:wrap;padding:4px 2px 8px}

/* ---- Popup chia se MXH ---- */
.vsd-share-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px}
.vsd-share-box{position:relative;background:#1a1d29;border:1px solid #2a2e3d;border-radius:16px;padding:24px;width:380px;max-width:100%}
.vsd-share-box h4{margin:0 0 16px;color:#fff;font-size:17px;font-weight:700}
.vsd-share-close{position:absolute;top:10px;right:12px;background:none;border:0;color:#8b91a7;font-size:24px;cursor:pointer;line-height:1}
.vsd-share-close:hover{color:#fff}
.vsd-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.vsd-share-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:#232636;border-radius:12px;padding:14px 6px;color:#dfe3ee;text-decoration:none;font-size:12px;font-weight:600}
.vsd-share-btn svg{width:26px;height:26px}
.vsd-share-btn:hover{color:#fff;text-decoration:none;transform:translateY(-2px)}
.vsd-share-btn.fb:hover{background:#1877f2}
.vsd-share-btn.x:hover{background:#000}
.vsd-share-btn.threads:hover{background:#333}
.vsd-share-btn.tg:hover{background:#229ed9}
.vsd-share-copy{width:100%;background:#2b5cff;color:#fff;border:0;border-radius:10px;padding:11px;font-size:14px;font-weight:600;cursor:pointer}
.vsd-share-copy:hover{background:#1e4de0}

/* ---- Watch: hop danh gia ---- */
.ws-ratebox{display:flex;align-items:center;gap:22px;background:#14161f;border:1px solid #232636;border-radius:14px;padding:18px 20px}
.ws-ratebox-score{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:86px}
.ws-score-num{font-size:38px;font-weight:800;color:#FFC93C;line-height:1}
.ws-score-max{font-size:13px;color:#8b91a7;margin-top:2px}
.ws-score-count{font-size:11.5px;color:#8b91a7;margin-top:6px;white-space:nowrap}
.ws-ratebox-stars{display:flex;flex-direction:column;gap:8px}
.vs-stars-row{display:grid;grid-template-columns:repeat(5,24px);gap:4px;line-height:0;justify-content:center}
.vs-star{background:none;border:0;padding:2px;cursor:pointer;line-height:0}
.vs-star svg{fill:#3a3f52;transition:fill .15s, transform .15s;display:block}
.vs-star.on svg{fill:#FFC93C}
.vs-star:hover svg{transform:scale(1.15)}
.ws-stars-hint{font-size:12px;color:#8b91a7}
@media(max-width:480px){
  .ws-ratebox{gap:16px;padding:14px 16px}
  .ws-score-num{font-size:30px}
  .vs-stars-row{grid-template-columns:repeat(5,22px)}
  .vs-star svg{width:18px;height:18px}
}


/* ================= TRANG CHI TIET PHIM (kieu TOPHIM) ================= */
.tph-hero{position:relative;background:#000 center 20%/cover no-repeat;height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.tph-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.75) 80%,rgba(0,0,0,.95) 100%)}
.tph-wrap{padding:0 40px;max-width:1600px;margin:0 auto}
.tph-head{position:relative;z-index:2;display:flex;gap:32px;margin-top:-300px;padding-bottom:10px;align-items:stretch}
.tph-poster{flex:0 0 240px;width:240px;position:relative;display:flex}
.tph-poster img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.6);display:block;background:#1c2030}
.tph-info{min-width:0;flex:1;padding-top:8px}
.tph-title{margin:0 0 4px;font-size:34px;font-weight:800;color:#fff;line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.tph-origin{color:#9aa0b8;font-size:14.5px;margin-bottom:14px}
.tph-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.tph-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:#dfe3ee;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);line-height:1.4}
.tph-badge.hd{background:#FFC93C;border-color:transparent;color:#1a1405;font-weight:800}
.tph-badge.imdb{background:rgba(0,0,0,.55);border-color:rgba(255,201,60,.45);color:#FFC93C;font-weight:800}
.tph-badge.purple{background:rgba(168,85,247,.18);border-color:rgba(168,85,247,.5);color:#c4a5fd}
.tph-badge.sub{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.5);color:#86efac}
.tph-badge.dub{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.5);color:#93c5fd}
.tph-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;margin-bottom:22px;max-width:760px}
.tph-meta-row{display:flex;gap:10px;font-size:14px;line-height:1.9}
.tph-meta-row>span{flex:0 0 82px;color:#8b91a7}
.tph-meta-row>div{color:#e6e9f2}
.tph-meta-row a{color:#e6e9f2;text-decoration:none}
.tph-meta-row a:hover{color:#FFC93C}
.tph-imdb{color:#FFC93C;font-weight:700}
.tph-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.tph-actions-row{display:flex;align-items:center;gap:30px}
.tph-watch{display:inline-flex;align-items:center;gap:10px;background:#FFC93C;color:#1a1405;font-weight:800;font-size:16.5px;border-radius:999px;padding:14px 40px;text-decoration:none;box-shadow:0 8px 24px rgba(255,201,60,.35)}
.tph-watch:hover{background:#ffd35c;color:#1a1405;text-decoration:none}
.tph-play-ic{font-size:13px}
.tph-act{display:inline-flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;color:#c7cddd;font-size:13px;cursor:pointer;padding:4px 2px;text-decoration:none}
.tph-act svg{width:26px;height:26px}
.tph-act:hover{color:#fff;text-decoration:none}
.tph-act.on{color:#FFC93C}
.tph-act.on svg{fill:#FFC93C}

.tph-tabs{display:flex;gap:30px;border-bottom:1px solid #232636;margin-top:26px}
.tph-tab{background:none;border:0;color:#9aa0b8;font-size:15.5px;font-weight:600;padding:15px 2px;cursor:pointer;position:relative}
.tph-tab:hover{color:#fff}
.tph-tab.active{color:#FFC93C}
.tph-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:#FFC93C}
.tph-panes{padding-top:20px}
.tph-pane{display:none}
.tph-pane.active{display:block}
.tph-svrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.tph-svlabel{color:#9aa0b8;font-size:14px}
.tph-servers{display:flex;gap:10px;flex-wrap:wrap}
.tph-server{display:inline-flex;align-items:center;gap:8px;background:#20232f;color:#dfe3ee;border:1px solid #2c3040;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer}
.tph-server:hover{color:#fff;border-color:#3d4257}
.tph-server.active{color:#FFC93C;border-color:#FFC93C;background:#262a38}
.tph-svcount{background:#FFC93C;color:#1a1405;font-size:11.5px;font-weight:800;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.tph-eps{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.tph-ep{display:flex;align-items:center;justify-content:center;background:#20232f;color:#dfe3ee;border-radius:9px;padding:12px 6px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent}
.tph-ep:hover{background:#2a2e3d;color:#FFC93C;text-decoration:none}
.tph-versions{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;max-width:1100px}
.tph-ver{display:flex;gap:14px;background:#20232f;border:1px solid #2c3040;border-radius:12px;overflow:hidden;text-decoration:none;color:#fff}
.tph-ver:hover{border-color:#FFC93C}
.tph-ver img{width:110px;aspect-ratio:3/4;object-fit:cover;flex-shrink:0;background:#1c2030}
.tph-ver-info{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 12px 12px 0;min-width:0}
.tph-ver-info b{font-size:14px}
.tph-ver-info i{font-style:normal;color:#9aa0b8;font-size:13px}
.tph-ver-info em{font-style:normal;display:inline-block;margin-top:6px;background:#fff;color:#111;border-radius:7px;padding:6px 14px;font-size:12.5px;font-weight:700;align-self:flex-start}
.tph-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tph-gallery a{display:block;border-radius:10px;overflow:hidden}
.tph-gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#1c2030;transition:transform .25s}
.tph-gallery a:hover img{transform:scale(1.04)}
.tph-actors-grid .vs-actor-row{flex-wrap:wrap;overflow:visible}
.tph-suggest{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.tph-plot{margin-top:30px;max-width:1100px}
.tph-sec-t{margin:0 0 12px;font-size:17px;font-weight:700;color:#fff}
.tph-plot-txt{color:#b9bfd2;font-size:14px;line-height:1.8}
.tph-comments{margin-top:28px;max-width:1100px}

@media (max-width: 1400px){ .tph-eps{grid-template-columns:repeat(8,1fr)} .tph-suggest{grid-template-columns:repeat(6,1fr)} .tph-gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 1100px){ .tph-eps{grid-template-columns:repeat(6,1fr)} .tph-suggest{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 768px){
  .tph-hero{height:260px}
  .tph-wrap{padding:0 14px}
  .tph-head{gap:18px;margin-top:-120px}
  .tph-poster{flex-basis:120px;width:120px}
  .tph-title{font-size:23px}
  .tph-meta{grid-template-columns:1fr;gap:4px}
  .tph-actions{gap:20px}
  .tph-watch{padding:12px 30px;font-size:15px}
  .tph-eps{grid-template-columns:repeat(4,1fr)}
  .tph-suggest{grid-template-columns:repeat(3,1fr)}
  .tph-gallery{grid-template-columns:repeat(2,1fr)}
  .tph-tabs{gap:20px}
}

/* ---- Nut Sap xep tap phim ---- */
.tph-sort{display:inline-flex;align-items:center;gap:8px;background:#20232f;border:1px solid #2c3040;color:#c7cddd;font-size:13px;font-weight:600;border-radius:9px;padding:9px 16px;cursor:pointer;margin-left:auto}
.tph-sort:hover{color:#fff;border-color:#FFC93C}
.tph-sort.desc svg{transform:rotate(180deg)}
.tph-sort svg{transition:transform .2s}

/* ================= SECTION HOT kieu backdrop ================= */
.vs-hot-swiper{overflow:hidden;padding-bottom:8px}
.vs-hot-swiper .swiper-slide{height:auto}
.vs-hot-card{display:block;text-decoration:none;color:#fff}
.vs-hot-card:hover{text-decoration:none}
.vs-hot-bg{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#1c2030}
.vs-hot-bg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vs-hot-card:hover .vs-hot-bg img{transform:scale(1.05)}
.vs-hot-badges{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.vs-hot-badge{font-size:11px;font-weight:700;color:#fff;background:rgba(20,22,31,.85);border-radius:6px;padding:4px 10px}
.vs-hot-badge.green{background:#22c55e}
.vs-hot-badge.blue{background:#3b82f6}
.vs-hot-body{display:flex;gap:14px;margin-top:-26px;padding:0 12px;position:relative;z-index:2}
.vs-hot-poster{width:72px;flex:0 0 72px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.55);background:#1c2030}
.vs-hot-text{min-width:0;padding-top:28px}
.vs-hot-title{font-size:15px;font-weight:700;color:#fff;line-height:1.35}
.vs-hot-origin{font-size:12.5px;color:#9aa0b8;margin-top:3px}
.vs-hot-meta{font-size:12.5px;color:#c7cddd;margin-top:6px;font-weight:600}

/* ================= TOP XEP HANG so vang ================= */
.vs-toprank-swiper{overflow:hidden}
.vs-toprank-swiper .swiper-slide{width:200px;flex-shrink:0}
.vs-toprank-item{display:block}
.vs-toprank-thumb{position:relative;display:block;aspect-ratio:3/4;background:#1e2230;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.vs-toprank-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vs-toprank-thumb:hover img{transform:scale(1.05)}
.vs-toprank-ep{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;background:rgba(15,17,25,.88);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:5px 12px;white-space:nowrap;letter-spacing:.3px}
.vs-toprank-meta{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.vs-toprank-num{font-size:44px;font-weight:900;font-style:italic;color:#FFC93C;line-height:1;flex:0 0 auto;transform:skewX(-8deg);text-shadow:0 3px 10px rgba(255,201,60,.3);font-family:Arial,Helvetica,sans-serif}
.vs-toprank-info{min-width:0;flex:1}
.vs-toprank-title{font-size:14px;font-weight:700;line-height:1.4}
.vs-toprank-title a{color:#fff;text-decoration:none}
.vs-toprank-title a:hover{color:#FFC93C}
.vs-toprank-origin{font-size:12px;color:#9aa0b8;margin-top:3px}
.vs-toprank-sub{font-size:12px;color:#8b91a7;margin-top:4px}

@media (max-width: 768px){
  .vs-hot-body{margin-top:-20px;padding:0 6px;gap:10px}
  .vs-hot-poster{width:52px;flex-basis:52px}
  .vs-hot-text{padding-top:22px}
  .vs-hot-title{font-size:13px}
  .vs-toprank-swiper .swiper-slide{width:160px}
  .vs-toprank-num{font-size:36px}
}

/* ---- Mobile: tat ca thumb doc hien thi 2 cot ---- */
@media (max-width: 768px){
  .cards-grid-wrapper{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
  .cards-grid-wrapper .v-thumbnail{width:100%!important}
}

/* ---- Detail layout 2 cot + sidebar phim sap chieu ---- */
.tph-main-layout{display:flex;gap:32px;align-items:flex-start}
.tph-main{flex:1;min-width:0}
.tph-sidebar{flex:0 0 320px;width:320px;position:sticky;top:80px}
.tph-side-box{background:#14161f;border:1px solid #232636;border-radius:14px;padding:18px}
.tph-side-title{margin:0 0 14px;font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.tph-side-title::before{content:"";width:4px;height:18px;border-radius:2px;background:#FFC93C;display:inline-block}
.tph-side-list{display:flex;flex-direction:column;gap:12px}
.tph-side-item{display:flex;gap:12px;text-decoration:none;color:#fff}
.tph-side-item:hover .tph-side-name{color:#FFC93C}
.tph-side-item img{width:56px;flex:0 0 56px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#1c2030}
.tph-side-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.tph-side-name{font-size:13.5px;font-weight:600;line-height:1.4;color:#e6e9f2}
.tph-side-meta{font-size:12px;color:#8b91a7}
.tph-side-more{display:block;text-align:center;margin-top:14px;font-size:13px;font-weight:600;color:#FFC93C;text-decoration:none}
.tph-side-more:hover{text-decoration:underline}
@media(max-width:1100px){
  .tph-main-layout{flex-direction:column}
  .tph-sidebar{width:100%;flex:none;position:static}
  .tph-side-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:768px){
  .tph-hero{height:380px}
  .tph-head{margin-top:-160px}
  .tph-side-list{grid-template-columns:1fr}
}

/* ---- Mobile detail giong mau: layout giua ---- */
.tph-info-toggle{display:none}
@media (max-width: 768px){
  .tph-head{flex-direction:column;align-items:center;text-align:center;margin-top:-140px;gap:0}
  .tph-poster{flex:none;width:170px;margin:0 auto}
  .tph-poster img{height:auto;aspect-ratio:3/4}
  .tph-info{width:100%;padding-top:16px;display:flex;flex-direction:column;align-items:center}
  .tph-title{font-size:24px;text-align:center}
  .tph-origin{text-align:center;margin-bottom:0}
  /* Nut Xem Ngay ngan gon */
  .tph-actions{flex-direction:column;align-items:center;gap:20px;width:100%;margin-top:26px}
  .tph-watch{padding:14px 0;width:230px;justify-content:center;font-size:16px}
  .tph-actions-row{display:flex;gap:36px;justify-content:center}
  /* Thong tin phim collapsible */
  .tph-info-toggle{display:inline-flex;align-items:center;gap:6px;margin:16px auto 0;background:none;border:1.5px solid #FFC93C;color:#FFC93C;font-size:13.5px;font-weight:700;border-radius:9px;padding:10px 20px;cursor:pointer}
  .tph-info-toggle span{transition:transform .2s;font-size:11px}
  .tph-info-toggle.open span{transform:rotate(180deg)}
  .tph-info-collapsible{display:none;width:100%;text-align:left}
  .tph-info-collapsible.open{display:block}
  .tph-badges{justify-content:center;margin-top:14px}
  .tph-meta{grid-template-columns:1fr;max-width:100%;margin-top:6px}
}

/* ---- Fix binh luan mobile ---- */
@media (max-width: 768px){
  .tph-comments{padding:0}
  .op-comment-panel{padding:0 2px}
  .op-comment-top{flex-wrap:wrap;gap:8px}
  .op-comment-form .form-group{flex-direction:column}
  .op-comment-form textarea{width:100%!important}
}

/* ---- Watch: ban chieu phim le dang nut ---- */
.vs-watch-vers{display:flex;flex-wrap:wrap;gap:10px}
.vs-watch-ver{display:inline-flex;align-items:center;justify-content:center;background:#20232f;color:#dfe3ee;border:1px solid #2c3040;border-radius:9px;padding:11px 18px;font-size:13.5px;font-weight:600;text-decoration:none}
.vs-watch-ver:hover{color:#FFC93C;border-color:#FFC93C;text-decoration:none}
.vs-watch-ver.active{color:#FFC93C;border-color:#FFC93C;background:#262a38}

/* ---- Watch: tap dang xem highlight ---- */
.tph-ep.on-air{color:#FFC93C!important;border-color:#FFC93C!important;background:#262a38!important}

/* ---- Mobile: dien vien to hon, do trong ---- */
@media (max-width: 768px){
  .vs-actor{flex:0 0 84px;width:84px}
  .vs-actor-ph{width:76px;height:76px;margin:0 auto}
  .vs-actor-name{font-size:12.5px}
  .vs-actor-row{gap:12px}
}

/* ================= BOTTOM NAV MOBILE ================= */
.vs-bottomnav{display:none}
@media (max-width: 768px){
  .vs-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;background:rgba(13,15,22,.96);backdrop-filter:blur(12px);border-top:1px solid #232636;padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
  .vs-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#8b91a7;text-decoration:none;font-size:11px;font-weight:600;padding:4px 0}
  .vs-bottomnav a svg{width:22px;height:22px}
  .vs-bottomnav a.active{color:#FFC93C}
  /* Tru padding bottom cho body de khong bi che */
  body{padding-bottom:70px}
  /* Slide khong bo goc tren + topbar trong suot */
  .spotlight.spotlight{border-radius:0!important;margin-left:-6px;margin-right:-6px;overflow:visible!important;margin-bottom:80px!important}
  .spot-bg.spot-bg,.spot-shade.spot-shade{border-radius:0!important}
  header.fly{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%)!important;position:absolute!important;top:0;left:0;right:0;z-index:100;box-shadow:none!important;border:0!important}
}

/* ================= FOOTER MOI ================= */
.vs-footer{background:#0a0b10;border-top:1px solid #1a1d28;padding:56px 0 0;margin-top:60px}
.vs-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px}
/* Logo chan trang: CHI ghim chieu cao, chieu ngang tu theo ti le anh goc (truoc day the img
   bi ghim cung 180x40 trong HTML nen logo ti le khac la bi ep meo) */
.footer-logo img{height:44px;width:auto;max-width:240px;object-fit:contain;display:block}
.vs-footer-logo-txt{font-size:32px;font-weight:800;color:#fff;letter-spacing:-.5px}
.vs-footer-logo-txt .dot{color:#22c55e}
.vs-footer-desc{color:#9aa0b4;font-size:14px;line-height:1.7;margin:18px 0;max-width:320px}
.vs-footer-desc a{color:#FFC93C}
.vs-footer .socials{display:flex;gap:10px;margin-top:8px}
.vs-footer .social-item{width:36px;height:36px;border-radius:50%;background:#1a1d28;display:flex;align-items:center;justify-content:center;transition:.2s}
.vs-footer .social-item:hover{background:#22c55e;transform:translateY(-2px)}
.vs-footer .social-item img{width:18px;height:18px;filter:brightness(0) invert(.7)}
.vs-footer .social-item:hover img{filter:brightness(0) invert(1)}
.vs-footer-col h4{color:#fff;font-size:15px;font-weight:700;margin:0 0 18px}
.vs-footer-col a,.vs-footer-col .vs-contact{display:flex;align-items:center;gap:8px;color:#9aa0b4;font-size:14px;text-decoration:none;margin-bottom:12px;line-height:1.5}
.vs-footer-col a:hover{color:#FFC93C}
.vs-footer-bottom{border-top:1px solid #1a1d28;margin-top:40px;padding:20px 0;color:#6b7280;font-size:13px;text-align:center}
@media (max-width: 900px){
  .vs-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .vs-footer-brand{grid-column:1/-1}
}
@media (max-width: 560px){
  .vs-footer-grid{grid-template-columns:1fr;gap:28px}
  .vs-footer{padding:40px 0 0}
}

/* ================= MOBILE MENU FIX ================= */
@media (max-width: 768px){
  /* Menu cu da thay bang vs-mmenu */
  /* Search: giu nguyen vi tri goc, dam bao khong de */
  .header-elements{position:relative}
  #logo{max-width:120px}
  #logo img{max-width:110px;height:auto}
}

/* ================= BO LOC TINH TE ================= */
.vs-filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.vs-filter{position:relative}
.vs-filter-btn{display:inline-flex;align-items:center;gap:8px;background:#1a1d28;border:1px solid #2a2f42;color:#dfe3ee;font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.vs-filter-btn:hover{border-color:#FFC93C;color:#FFC93C}
.vs-filter-btn svg{width:14px;height:14px;transition:transform .2s}
.vs-filter.open .vs-filter-btn{border-color:#FFC93C;color:#FFC93C}
.vs-filter.open .vs-filter-btn svg{transform:rotate(180deg)}
.vs-filter-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;max-height:320px;overflow-y:auto;background:#161924;border:1px solid #2a2f42;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:1000;padding:8px;display:none}
.vs-filter.open .vs-filter-menu{display:block}
.vs-filter-menu a{display:block;padding:10px 14px;color:#c8cddc;font-size:14px;text-decoration:none;border-radius:8px;transition:.15s}
.vs-filter-menu a:hover{background:rgba(255,201,60,.1);color:#FFC93C}
.vs-filter-menu a.active{background:rgba(255,201,60,.15);color:#FFC93C;font-weight:700}
@media (max-width: 768px){
  .vs-filters{gap:8px}
  .vs-filter-btn{font-size:13px;padding:8px 14px}
  .vs-filter-menu{position:fixed;left:12px;right:12px;top:auto;bottom:80px;max-height:50vh}
}

@media (max-width: 768px) {
  /* Mobile menu kieu ONFLIX - nen trong suot */
  .vs-mmenu{display:none;position:absolute;top:100%;left:8px;right:8px;z-index:9999}
  .vs-mmenu.open{display:block}
  .vs-mmenu-inner{background:rgba(20,23,35,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .vs-mmenu-member{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.95);color:#1a1d29;font-weight:700;font-size:15px;padding:12px;border-radius:999px;margin-bottom:14px;text-decoration:none}
  .vs-mmenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .vs-mmenu-item{display:block;padding:13px 12px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border-radius:8px}
  .vs-mmenu-item:active{background:rgba(255,255,255,.08)}
  .vs-mmenu-drop{cursor:pointer;position:relative}
  .vs-mmenu-drop > span{display:flex;align-items:center;justify-content:space-between}
  .vs-mmenu-drop > span i{font-style:normal;font-size:12px;opacity:.7}
  .vs-mmenu-sub{display:none;grid-column:1/-1;background:rgba(0,0,0,.3);border-radius:8px;margin:4px 0;padding:6px;max-height:200px;overflow-y:auto}
  .vs-mmenu-drop.open .vs-mmenu-sub{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .vs-mmenu-sub a{display:block;padding:9px 10px;color:#b8bdd0;font-size:14px;text-decoration:none;border-radius:6px}
  .vs-mmenu-sub a:active{background:rgba(255,255,255,.08);color:#fff}
  /* An menu cu tren mobile */
  .el-group{display:none!important}
}

/* Dropdown menu desktop - style khi hien (display dieu khien bang inline style) */
@media (min-width: 769px) {
  .menu-item.menu-item-sub{position:relative}
  .menu-item.menu-item-sub .v-dropdown-menu.dropdown-menu{background:#1a1d29!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;padding:8px!important;min-width:480px!important;box-shadow:0 16px 40px rgba(0,0,0,.5)!important}
  .menu-item.menu-item-sub .v-dropdown-menu .m-col-4{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important}
  .menu-item.menu-item-sub .dropdown-item{display:block!important;padding:9px 12px!important;color:#c8cddc!important;font-size:14px!important;white-space:nowrap!important}
  .menu-item.menu-item-sub .dropdown-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
}

@media (max-width: 768px) {
  .header-elements .el-group{display:none!important;visibility:hidden!important}
}

/* Dropdown tu viet - khong phu thuoc Bootstrap */
.vs-dd-wrap{position:relative!important}
.vs-dd-btn{display:inline-flex!important;align-items:center;gap:4px;cursor:pointer}
.vs-dd-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;min-width:520px;max-width:90vw;background:#1a1d29;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.55);display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.vs-dd-menu[hidden]{display:none!important}
.vs-dd-menu a{display:block;padding:9px 12px;color:#c8cddc;font-size:14px;text-decoration:none;border-radius:8px;white-space:nowrap}
.vs-dd-menu a:hover{background:rgba(255,255,255,.08);color:#fff}

/* ===== MOBILE HEADER - FIX TOAN DIEN ===== */
@media (max-width: 768px) {
  /* Topbar layout: hamburger | logo | search */
  .header-elements{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;position:relative!important}
  .for-mobile.menu-toggle{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;order:1}
  #logo{order:2;flex-shrink:0;display:flex!important;align-items:center}
  #logo img{max-height:32px!important;width:auto!important;max-width:120px!important}
  #logo h2{font-size:20px!important;margin:0!important}
  /* An el-group cu */
  .header-elements .el-group{display:none!important}

  /* Mobile menu ONFLIX - style sach */
  .vs-mmenu{display:none;position:absolute;top:calc(100% + 4px);left:10px;right:10px;z-index:1000}
  .vs-mmenu.open{display:block;animation:vsFadeIn .2s ease}
  @keyframes vsFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .vs-mmenu-inner{background:rgba(18,21,32,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
  .vs-mmenu-member{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#161924;font-weight:700;font-size:15px;padding:13px;border-radius:999px;margin-bottom:14px;text-decoration:none}
  .vs-mmenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .vs-mmenu-item{display:flex;align-items:center;min-height:48px;padding:10px 14px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;white-space:nowrap;overflow:hidden}
  .vs-mmenu-item:active{background:rgba(255,255,255,.1)}
  .vs-mmenu-drop{cursor:pointer}
  .vs-mmenu-drop > span{display:flex;align-items:center;justify-content:space-between;width:100%}
  .vs-mmenu-drop > span i{font-style:normal;font-size:11px;opacity:.6;margin-left:4px}
  .vs-mmenu-sub{display:none}
  .vs-mmenu-drop.open .vs-mmenu-sub{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:2px;background:rgba(0,0,0,.35);border-radius:10px;margin:6px 0;padding:8px;max-height:220px;overflow-y:auto}
  .vs-mmenu-sub a{display:block;padding:10px 12px;color:#aeb4c8;font-size:14px;text-decoration:none;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vs-mmenu-sub a:active{background:rgba(255,255,255,.1);color:#fff}
}

/* vs-mmenu chi dung cho mobile - an mac dinh tren moi viewport */
.vs-mmenu{display:none!important}
@media (max-width: 768px) {
  .vs-mmenu.open{display:block!important}
}

/* FIX MENU MOBILE - hien day du chu */
@media (max-width: 768px) {
  .vs-mmenu{position:fixed!important;top:60px!important;left:12px!important;right:12px!important;width:auto!important;max-width:400px;margin:0 auto;z-index:99999!important}
  .vs-mmenu-inner{background:rgba(15,18,28,.98)!important;border-radius:16px!important;padding:14px!important}
  .vs-mmenu-member{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .vs-mmenu-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .vs-mmenu-item{display:flex!important;align-items:center;justify-content:center;min-height:48px;padding:12px 8px!important;color:#fff!important;font-size:14px!important;font-weight:600;text-decoration:none;border-radius:10px;background:rgba(255,255,255,.06);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .vs-mmenu-item:active{background:rgba(255,255,255,.12)}
  .vs-mmenu-drop > span{width:100%;justify-content:center;gap:4px}
  .vs-mmenu-sub{grid-column:1/-1!important}
  .vs-mmenu-sub a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* FIX SUBMENU MOBILE - xo full hang, khong cat chu (2026-10-21) */
@media (max-width: 768px) {
  .vs-mmenu-drop.open{grid-column:1/-1!important;display:block!important}
  .vs-mmenu-drop.open > span{justify-content:center}
  .vs-mmenu-drop.open .vs-mmenu-sub{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px;max-height:260px}
  .vs-mmenu-sub a{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
}

/* FIX DETAIL MOBILE - chu de doc tren backdrop */
@media (max-width: 768px) {
  .tph-hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.92) 85%,#0b0e17 100%)!important}
  .tph-head{position:relative;z-index:2}
  .tph-title{text-shadow:0 2px 12px rgba(0,0,0,.9)}
  .tph-aka{text-shadow:0 1px 8px rgba(0,0,0,.9)}
  .tph-desc{position:relative;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.8)}
}

/* HEADER MOBILE */
@media (max-width: 768px) {
  header.fly{position:fixed;top:0;left:0;right:0;z-index:1000}
  header.fly .header-elements{display:flex;align-items:center;gap:8px;padding:10px 12px;position:relative;width:100%;box-sizing:border-box}
  header.fly .for-mobile.menu-toggle{display:flex;order:1;flex-shrink:0}
  header.fly #logo{display:block;order:2;flex-shrink:1;min-width:0;max-width:calc(100% - 100px)}
  header.fly #logo img{max-height:28px;width:auto;max-width:100%}
  header.fly #logo h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  header.fly .for-mobile.search-toggle{display:flex;order:3;flex-shrink:0;margin-left:auto;width:40px;height:40px}
  header.fly .for-mobile.search-toggle .icon-search{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;font-size:19px}
  header.fly #search{display:none}
  header.fly #search.toggled{display:block;position:absolute;top:calc(100% + 2px);left:8px;right:8px;z-index:1001;background:#1a1d29;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
  header.fly #search.toggled .search-elements{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:999px;padding:10px 16px}
  header.fly #search.toggled .search-icon{color:#FFC93C;flex-shrink:0}
  header.fly #search.toggled .search-input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:15px;outline:none;padding:4px 0}
  header.fly #search.toggled .search-input::placeholder{color:rgba(255,255,255,.45)}
}

/* =========================================================
   FINAL OVERRIDE: MOBILE TOPBAR (menu | logo | search)
   ========================================================= */
@media (max-width: 768px) {
  header.fly {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
  }
  header.fly .header-elements {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  header.fly .for-mobile.menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    cursor: pointer;
  }
  header.fly #logo {
    display: flex !important;
    align-items: center !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  header.fly #logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 32px !important;
    object-fit: contain !important;
  }
  header.fly #logo h1,
  header.fly #logo h2 {
    margin: 0 !important;
    max-width: 100% !important;
    color: inherit;
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header.fly .for-mobile.search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    color: #fff !important;
    cursor: pointer;
  }
  header.fly .for-mobile.search-toggle .icon-search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #fff !important;
  }
  header.fly #search { display: none !important; }
  header.fly #search.toggled {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    background: #171b26 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
  }
  header.fly #search.toggled .search-elements {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }
  header.fly #search.toggled .search-input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 2px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }
  header.fly #search.toggled input::placeholder { color: rgba(255,255,255,.5) !important; }
  header.fly #search.toggled .search-icon { flex: 0 0 auto !important; color: #FFC93C !important; }
  header.fly .header-elements > .el-group:not(:has(#logo)) { display: none !important; }
  header.fly .vs-mmenu.open { z-index: 10002 !important; }
}
@media (max-width: 360px) {
  header.fly .header-elements { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; }
  header.fly #logo img { max-height: 28px !important; }
}