/* ================================================================
   XX SKIN — đồng bộ giao diện plugin với theme XXPHIM (2026-10)
   Nạp sau style.css + ui-v2.css. Chỉ đổi màu sắc/kích thước/lưới;
   không đụng logic vuốt, phát video hay mã quảng cáo.
   ================================================================ */
:root {
    --ink: #0f0c0e;
    --surface: #1a1519;
    --raised: #231d22;
    --line: rgba(255, 232, 238, 0.075);
    --text: #f6f0f2;
    --muted: #a89da3;
    --accent: #ff3d57;
    --accent-ink: #ffffff;
    --heart: #ff3d57;
    --brass: #e6b465;
    --r-card: 12px;
}

html body,
html body .home-grid-container { background: var(--ink) !important; }

/* ---------- Header lưới: logo bên trái, tab ở giữa ---------- */
html body .home-header {
    background: rgba(15, 12, 14, 0.92) !important;
    border-bottom: 1px solid var(--line) !important;
}
html body .home-nav.desktop-only { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
html body .xx-brand { display: inline-flex !important; align-items: center; padding: 4px 0 !important; background: none !important; }
html body .xx-brand img { height: 30px; width: auto; display: block; }
html body .mobile-home-nav { justify-content: center; }
html body .mobile-home-nav { background: rgba(15, 12, 14, 0.94) !important; border-bottom-color: var(--line) !important; }
html body .mobile-home-nav .xx-brand { padding: 8px 0 !important; min-width: 0 !important; }
html body .mobile-home-nav .xx-brand img { height: 24px; }

html body .tab-navigation { background: var(--surface) !important; border: 1px solid var(--line) !important; }
html body .tab-btn { color: var(--muted) !important; }
html body .tab-btn.active { background: var(--text) !important; color: var(--ink) !important; }
html body .tab-btn.active i { color: var(--ink) !important; }

html body .search-input {
    background: var(--surface) !important;
    border: 1px solid rgba(255, 232, 238, 0.14) !important;
    color: var(--text) !important;
}
html body .search-input:focus { border-color: rgba(255, 232, 238, 0.28) !important; outline: none !important; box-shadow: none !important; }

/* ---------- Lưới: thẻ 3:4 gọn hơn, nhiều cột hơn trên màn hình lớn ---------- */
html body .videos-grid { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 860px) {
    html body .videos-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; padding-left: 24px !important; padding-right: 24px !important; }
}
@media (min-width: 1180px) {
    html body .videos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (min-width: 1500px) {
    html body .videos-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
html body .grid-video-item {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    border-radius: var(--r-card) !important;
    background: var(--surface) !important;
    box-shadow: inset 0 0 0 1px var(--line) !important;
    contain-intrinsic-size: auto 240px;
}
html body .grid-video-thumbnail { object-fit: cover !important; width: 100% !important; height: 100% !important; }
html body .grid-video-overlay { background: linear-gradient(180deg, transparent 45%, rgba(10, 6, 8, 0.92) 100%) !important; }
html body .grid-video-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    -webkit-line-clamp: 2;
}
html body .grid-video-stat--likes,
html body .grid-video-stats > * {
    background: rgba(15, 12, 14, 0.7) !important;
    border-radius: 999px !important;
}
html body .grid-video-stat--likes i { color: var(--accent) !important; }

@media (hover: hover) and (pointer: fine) {
    html body .grid-video-item:hover { transform: translateY(-3px) !important; box-shadow: inset 0 0 0 1px rgba(255, 232, 238, 0.16), 0 14px 32px rgba(0, 0, 0, 0.55) !important; }
    html body .videos-grid:hover .grid-video-item:not(:hover) { opacity: 1 !important; }
}

/* ---------- Thanh điều hướng dưới + lịch sử ---------- */
html body .bottom-nav-bar { background: rgba(15, 12, 14, 0.96) !important; border-top: 1px solid var(--line) !important; }
html body .nav-item { color: var(--muted) !important; }
html body .nav-item.active,
html body .nav-item:hover { color: var(--text) !important; }
html body .history-sidebar { background: var(--ink) !important; border-left: 1px solid var(--line) !important; }

/* ---------- Trang xem video dọc ---------- */
html body .like-btn.liked i,
html body .action-btn.liked i { color: var(--accent) !important; }
html body #progress-wrap .progress-fill,
html body .progress-bar-fill { background: var(--accent) !important; }

/* Nút "Giới thiệu" (nội dung SEO): nằm trên thanh điều hướng dưới, không bị che */
html body .grid-seo-about { bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
html body .grid-seo-body { bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important; background: rgba(21, 17, 21, 0.98) !important; border-color: rgba(255, 232, 238, 0.14) !important; }
html body .grid-seo-about summary { background: rgba(26, 21, 25, 0.9) !important; border-color: rgba(255, 232, 238, 0.14) !important; }

/* ================================================================
   VÒNG 2 — header gộp + khu "Hot nhất" + typography
   ================================================================ */
/* Bỏ khoảng đệm cũ dành cho header fixed */
html body .home-grid-container .tab-content,
html body .home-grid-container .tab-panel,
html body .home-grid-container .videos-grid { margin-top: 0 !important; }
html body .home-grid-container .videos-grid { padding-top: 4px !important; }

/* Tiêu đề khu vực */
html body .xx-sec-title {
    max-width: 1440px; margin: 22px auto 12px; padding: 0 24px;
    font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
@media (max-width: 767px) { html body .xx-sec-title { font-size: 17px; padding: 0 14px; margin: 16px auto 10px; } }
html body .trending-header-info h2 { font-size: 20px !important; letter-spacing: -0.02em; }
html body .trending-header-info p { color: var(--muted) !important; }

/* Khu "Hot nhất": hàng cuộn ngang, thẻ lớn, số hạng màu đồng */
html body .xx-hot { max-width: 1440px; margin: 0 auto; }
html body .xx-hot-rail {
    list-style: none; margin: 0; padding: 0 24px 4px;
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 5.6); gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none;
}
html body .xx-hot-rail::-webkit-scrollbar { display: none; }
html body .xx-hot-rail li { scroll-snap-align: start; min-width: 0; }
html body .xx-hot-rail a {
    position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: #fff; text-decoration: none;
}
html body .xx-hot-rail img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
html body .xx-hot-rail a::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(10, 6, 8, .94)); }
@media (hover: hover) { html body .xx-hot-rail a:hover img { transform: scale(1.04); } }
html body .xx-hot-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2; min-width: 28px; padding: 3px 9px; border-radius: 999px;
    background: var(--brass); color: #241a08; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.3;
}
html body .xx-hot-rank::before { content: "#"; }
html body .xx-hot-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 12px; }
html body .xx-hot-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; font-weight: 600; line-height: 1.35;
}
html body .xx-hot-likes {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600;
}
html body .xx-hot-likes i { color: var(--accent); font-size: 11px; }
@media (max-width: 767px) {
    html body .xx-hot-rail { padding: 0 14px 4px; scroll-padding-inline: 14px; grid-auto-columns: 42%; gap: 10px; }
    html body .xx-hot-title { font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 1179px) { html body .xx-hot-rail { grid-auto-columns: 28%; } }

/* Trang xem video dọc: nút hành động dạng kính mờ */
html body .like-controls .like-btn,
html body .like-controls .video-control-btn {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    background: rgba(20, 16, 19, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}
@supports (backdrop-filter: blur(1px)) {
    html body .like-controls .like-btn,
    html body .like-controls .video-control-btn { backdrop-filter: blur(10px); background: rgba(20, 16, 19, 0.3) !important; }
}
html body .like-controls .like-btn.liked { background: var(--accent) !important; border-color: var(--accent) !important; }
html body .like-controls .like-btn.liked i { color: #fff !important; }
html body .like-action-label { font-size: 12px !important; font-weight: 600 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
html body .video-info .video-title {
    font-size: 15px !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: -0.005em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body .video-item::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; z-index: 1;
    background: linear-gradient(transparent, rgba(10, 6, 8, .7));
}
html body .video-item .video-info { z-index: 2; }
html body .swipe-hint { background: rgba(20, 16, 19, .55) !important; border: 1px solid rgba(255, 255, 255, .12); }

/* ================================================================
   VÒNG 3 — tham khảo bố cục app video dọc: header 2 tầng (menu + tìm kiếm,
   nút lọc dạng viên), thẻ 9:16, thanh điều hướng dưới có mục đang mở.
   ================================================================ */
html body .xxh {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15, 12, 14, 0.95);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 12px;
}
@supports (backdrop-filter: blur(1px)) { html body .xxh { background: rgba(15, 12, 14, 0.8); backdrop-filter: saturate(1.4) blur(16px); } }
html body .xxh-top { display: flex; align-items: center; gap: 28px; max-width: 1440px; margin: 0 auto; }
html body .xxh-logo { flex: none; display: flex; }
html body .xxh-logo img { height: 30px; width: auto; display: block; }
html body .xxh-links { display: flex; align-items: center; gap: 4px; }
html body .xxh-links a,
html body .xxh-links button {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
    color: var(--muted); font: 600 14px/1 var(--font); text-decoration: none; background: none; border: 0; cursor: pointer;
    transition: color .15s, background .15s;
}
html body .xxh-links a:hover,
html body .xxh-links button:hover { color: var(--text); background: var(--surface); }
html body .xxh-links [aria-current="page"] { color: #ff6b7f; background: rgba(255, 61, 87, 0.14); }
html body .xxh-links i { font-size: 14px; }

html body .xxh .search-container { margin: 0 0 0 auto !important; padding: 0 !important; width: 420px; max-width: 42vw; position: static !important; }
html body .xxh .search-input-wrapper { position: relative; margin: 0 !important; max-width: none !important; }
html body .xxh .search-input {
    width: 100% !important; height: 42px !important; padding: 0 44px 0 18px !important; font-size: 15px !important;
    border-radius: 999px !important; background: var(--surface) !important; border: 1px solid rgba(255, 232, 238, 0.12) !important;
}
html body .xxh .search-input:focus { border-color: rgba(255, 232, 238, 0.28) !important; background: var(--raised) !important; outline: none !important; box-shadow: none !important; }
html body .xxh .search-icon { position: absolute !important; left: auto !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--muted) !important; pointer-events: none; }
html body .xxh .search-clear-btn { right: 40px !important; }

html body .xxh .tab-navigation {
    position: static !important; transform: none !important; display: flex !important; gap: 10px !important;
    max-width: 1440px !important; width: auto !important; margin: 12px auto 0 !important; padding: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; overflow-x: auto; scrollbar-width: none;
}
html body .xxh .tab-navigation::-webkit-scrollbar { display: none; }
html body .xxh .tab-btn {
    flex: none !important; display: inline-flex !important; align-items: center; gap: 8px; height: 40px; padding: 0 18px !important;
    border-radius: 999px !important; background: var(--surface) !important; border: 1px solid rgba(255, 232, 238, 0.12) !important;
    color: var(--muted) !important; font-size: 14px !important; font-weight: 600 !important;
}
html body .xxh .tab-btn:hover { color: var(--text) !important; background: var(--raised) !important; }
html body .xxh .tab-btn.active {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 61, 87, 0.32) !important;
}
html body .xxh .tab-btn.active i { color: #fff !important; }
html body .xxh .tab-btn::after { display: none !important; }

@media (max-width: 1023px) {
    html body .xxh-links { display: none; }
}
@media (max-width: 767px) {
    html body .xxh { padding: 10px 14px 10px; }
    html body .xxh-top { gap: 12px; }
    html body .xxh-logo img { height: 24px; }
    html body .xxh .search-container { flex: 1; width: auto; max-width: none; }
    html body .xxh .search-input { height: 40px !important; font-size: 16px !important; }
    html body .xxh .tab-navigation { margin-top: 10px !important; }
    html body .xxh .tab-btn { height: 38px; padding: 0 16px !important; }
}

/* Thẻ video dọc 9:16 như app, 6 cột desktop */
html body .grid-video-item { aspect-ratio: 9 / 16 !important; border-radius: 14px !important; }
html body .grid-video-title { font-size: 13.5px !important; font-weight: 700 !important; }
@media (min-width: 1180px) { html body .videos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (min-width: 1500px) { html body .videos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { html body .videos-grid { gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important; } }

/* Khu Hot nhất: nhỏ hơn lưới để thành điểm nhấn chứ không lấn át */
html body .xx-hot-rail { grid-auto-columns: calc((100% - 7 * 14px) / 7.5); }
@media (min-width: 768px) and (max-width: 1179px) { html body .xx-hot-rail { grid-auto-columns: 22%; } }
@media (max-width: 767px) { html body .xx-hot-rail { grid-auto-columns: 34%; } }

/* Thanh điều hướng dưới: 4 mục, mục đang mở màu đỏ */
html body .bottom-nav-bar .nav-items { max-width: 520px !important; width: 100%; justify-content: space-around; }
html body .bottom-nav-bar .nav-item { flex: 1; text-decoration: none; }
html body .bottom-nav-bar .nav-item.is-current,
html body .bottom-nav-bar .nav-item.is-current i { color: var(--accent) !important; }
html body .bottom-nav-bar .nav-item.is-current span { color: var(--text) !important; }
@media (min-width: 1024px) { html body.grid-mode .bottom-nav-bar { display: none !important; } html body.grid-mode .videos-grid { padding-bottom: 40px !important; } }
/* "Giới thiệu" (nội dung SEO) nằm trong hàng nút lọc, mở khung từ trên xuống */
html body .grid-seo-about.in-header { position: static !important; flex: none; }
html body .grid-seo-about.in-header summary {
    display: inline-flex !important; align-items: center; height: 40px; padding: 0 18px !important; border-radius: 999px !important;
    background: transparent !important; border: 1px solid rgba(255, 232, 238, 0.12) !important; color: var(--muted) !important;
    font-size: 14px; font-weight: 600; backdrop-filter: none !important;
}
html body .grid-seo-about.in-header summary:hover { color: var(--text) !important; background: var(--surface) !important; }
html body .grid-seo-about.in-header[open] summary { color: var(--text) !important; background: var(--raised) !important; }
html body .grid-seo-about.in-header .grid-seo-body { top: 128px !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%); width: min(680px, calc(100vw - 24px)); max-height: 70vh !important; z-index: 120; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
@media (max-width: 767px) { html body .grid-seo-about.in-header summary { height: 38px; padding: 0 16px !important; } html body .grid-seo-about.in-header .grid-seo-body { top: 118px !important; } }

/* ================================================================
   VÒNG 4 — trang xem video: khung desktop (header + video bo góc + bảng thông tin)
   Mobile giữ nguyên kiểu toàn màn hình như app.
   ================================================================ */
html body .xxh-player, html body .xx-side, html body .xx-ambient { display: none; }
#xx-toast {
    position: fixed; left: 50%; bottom: 96px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: 10px 18px; border-radius: 999px; background: rgba(26, 21, 25, .96); border: 1px solid rgba(255, 232, 238, .14);
    color: #fff; font: 600 14px/1.2 var(--font); transition: opacity .2s, transform .2s;
}
#xx-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 1024px) {
    html body.video-mode { background: var(--ink) !important; }
    html body.video-mode .app-container,
    html body.video-mode .tiktok-page-container,
    html body.video-mode .tiktok-video-container { background: transparent !important; }
    html body.video-mode .xxh-player { display: block; position: fixed; left: 0; right: 0; top: 0; padding-bottom: 10px; }
    html body.video-mode .bottom-nav-bar { display: none !important; }

    /* quầng màu lấy từ video đang xem */
    html body.video-mode .xx-ambient {
        display: block; position: fixed; inset: -10%; z-index: 0; pointer-events: none;
        background: center / cover no-repeat; filter: blur(90px) saturate(1.3); opacity: .28; transform: translateZ(0);
        transition: background-image .4s;
    }

    /* Cột video: hẹp, canh trái-giữa; khung video bo góc nằm dưới header */
    html body.video-mode .tiktok-video-container {
        position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100vh !important;
        left: calc(50% - 440px) !important; width: 480px !important; right: auto !important; z-index: 1;
    }
    html body.video-mode .video-item { padding: 84px 0 24px !important; box-sizing: border-box !important; background: transparent !important; }
    html body.video-mode .video-player-container {
        height: 100% !important; width: 100% !important; border-radius: 20px !important; overflow: hidden !important;
        background: #000 !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 232, 238, .08) !important;
    }
    html body.video-mode .video-player-container video { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    html body.video-mode .video-overlay { border-radius: 20px; }
    html body.video-mode .video-item .video-info,
    html body.video-mode .video-item::after { display: none !important; }
    html body.video-mode .like-controls,
    html body.video-mode .navigation-controls { display: none !important; }

    /* Bảng thông tin */
    html body.video-mode .xx-side {
        display: block; position: fixed; z-index: 5; top: 50%; transform: translateY(-50%);
        left: calc(50% + 72px); width: 380px; padding: 22px;
        background: rgba(26, 21, 25, .82); border: 1px solid rgba(255, 232, 238, .1); border-radius: 20px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .45); color: var(--text); font-family: var(--font);
    }
    @supports (backdrop-filter: blur(1px)) { html body.video-mode .xx-side { backdrop-filter: blur(20px) saturate(1.3); background: rgba(26, 21, 25, .62); } }
    html body .xx-side-head { display: flex; align-items: center; justify-content: space-between; }
    html body .xx-side-label { display: inline-flex; align-items: center; gap: 7px; color: #ff6b7f; font-size: 13px; font-weight: 700; }
    html body .xx-side-nav { display: flex; gap: 8px; }
    html body .xx-side-nav button {
        width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
        background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 232, 238, .12); color: var(--text);
    }
    html body .xx-side-nav button:hover { background: rgba(255, 255, 255, .14); }
    html body .xx-side-title { margin: 14px 0 18px; font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: #fff; }
    html body .xx-side-progress { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); cursor: pointer; }
    html body .xx-side-progress:hover { height: 8px; margin-top: -1px; }
    html body .xx-side-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--accent); }
    html body .xx-side-time { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
    html body .xx-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
    html body .xx-act {
        display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; cursor: pointer;
        background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 232, 238, .12); color: var(--text);
        font: 600 14px/1 var(--font); transition: background .15s, border-color .15s;
    }
    html body .xx-act:hover { background: rgba(255, 255, 255, .1); }
    html body .xx-act b { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 13px; }
    html body .xx-act.is-on { background: rgba(255, 61, 87, .16); border-color: rgba(255, 61, 87, .5); }
    html body .xx-act.is-on i { color: var(--accent); }
    html body .xx-side-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 232, 238, .08); color: var(--muted); font-size: 12px; }
    html body .xx-side-keys div { display: flex; align-items: center; gap: 8px; }
    html body .xx-side-keys dt, html body .xx-side-keys dd { margin: 0; display: flex; gap: 4px; }
    html body .xx-side-keys kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(255, 232, 238, .18); background: rgba(255, 255, 255, .04); font: 600 11px/1.4 var(--font); color: var(--text); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    html body.video-mode .tiktok-video-container { left: calc(50% - 400px) !important; width: 420px !important; }
    html body.video-mode .xx-side { left: calc(50% + 40px); width: 340px; }
}
@media (min-width: 1024px) {
    html body.video-mode .video-item { padding: 0 !important; }
    html body.video-mode .video-player-container {
        position: absolute !important; top: 84px !important; bottom: 24px !important; left: 0 !important; right: 0 !important;
        height: auto !important;
    }
    html body.video-mode .video-player-container .video-js,
    html body.video-mode .video-player-container > div { border-radius: 20px; }
    html body.video-mode .video-overlay { top: 84px !important; bottom: 24px !important; height: auto !important; }
    html body.video-mode #hud, html body.video-mode #progress-wrap { display: none !important; }
    html body.video-mode .xx-ambient { display: none !important; }
}

/* ---------- Ô tìm kiếm: từ khóa phổ biến (2026-10) ---------- */
html body .xxh .search-container { position: relative !important; }
html body .xx-kw {
    position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 60;
    padding: 14px; border-radius: 16px; background: var(--raised); border: 1px solid rgba(255, 232, 238, 0.10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
html body .xx-kw[hidden] { display: none; }
html body .xx-kw-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
html body .xx-kw-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .xx-kw-list button {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid rgba(255, 232, 238, 0.10); color: var(--text);
    font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s;
}
html body .xx-kw-list button i { font-size: 11px; color: var(--muted); }
html body .xx-kw-list button:hover { background: rgba(255, 232, 238, 0.10); border-color: rgba(255, 232, 238, 0.22); }
html body .xx-kw-list button:focus-visible { outline: 2px solid rgba(255, 232, 238, 0.6); outline-offset: 2px; }
@media (max-width: 767px) {
    html body .xx-kw { position: fixed; top: 62px; left: 12px; right: 12px; }
}

/* ---------- Khung quảng cáo (2026-10) ---------- */
html body .xx-ad[hidden] { display: none !important; }
html body .xx-ad { text-align: center; max-width: 100%; overflow: hidden; }
html body .xx-ad-label { display: block; margin: 0 0 6px; font-size: 11px; line-height: 1; color: var(--muted); }
html body .xx-ad iframe, html body .xx-ad img { max-width: 100%; }
html body .detube-ad-tiktok-grid { margin: 8px auto 22px; padding: 0 14px; }
html body .xx-side .detube-ad-tiktok-side { margin: 18px -8px 0; }
/* Màn hình thấp: bỏ gợi ý phím tắt để bảng thông tin + quảng cáo vừa màn hình */
@media (max-height: 800px) { html body .xx-side .detube-ad-tiktok-side ~ .xx-side-keys { display: none; } }

/* ---------- Slide quảng cáo giữa các video (mobile, 2026-10) ---------- */
html body .xx-adslide {
    position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    background: rgba(12, 9, 11, .97); color: var(--text); font-family: var(--font);
    animation: xxAdIn .25s ease-out; overscroll-behavior: contain; touch-action: none;
}
html body .xx-adslide.is-out { animation: xxAdOut .25s ease-in forwards; }
@keyframes xxAdIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes xxAdOut { to { opacity: 0; transform: translateY(-60px); } }
html body .xx-adslide-in { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 360px; }
html body .xx-adslide-label { font-size: 12px; color: var(--muted); }
html body .xx-adslide-body { max-width: 100%; overflow: hidden; line-height: 0; text-align: center; touch-action: auto; }
html body .xx-adslide-body iframe, html body .xx-adslide-body img { max-width: 100%; }
html body .xx-adslide-next {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 232, 238, .22); color: #fff;
    font: 700 15px/1 var(--font); cursor: pointer;
}
html body .xx-adslide-hint { margin: 0; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { html body .xx-adslide, html body .xx-adslide.is-out { animation: none; } }

/* ================================================================
   VÒNG 5 — trang xem video desktop (2026-10-26): khung video theo đúng tỉ lệ 9:16
   của chiều cao màn hình (hết viền đen trên/dưới), video + bảng thông tin thành
   một khối canh giữa, bảng thông tin canh mép trên với video, header cùng bề rộng.
   ================================================================ */
@media (min-width: 1024px) {
    html body.video-mode {
        --xx-top: 84px; --xx-bottom: 24px; --xx-gap: 40px; --xx-side-w: 380px;
        --xx-vid-w: clamp(300px, calc((100vh - var(--xx-top) - var(--xx-bottom)) * 9 / 16), 600px);
        --xx-left: calc(50% - (var(--xx-vid-w) + var(--xx-gap) + var(--xx-side-w)) / 2);
    }
    html body.video-mode .tiktok-video-container {
        left: var(--xx-left) !important; width: var(--xx-vid-w) !important; max-width: none !important;
    }
    html body.video-mode .xx-side {
        top: var(--xx-top); transform: none; left: calc(var(--xx-left) + var(--xx-vid-w) + var(--xx-gap)); width: var(--xx-side-w);
        max-height: calc(100vh - var(--xx-top) - var(--xx-bottom)); overflow-y: auto; scrollbar-width: none; box-sizing: border-box;
    }
    html body.video-mode .xx-side::-webkit-scrollbar { display: none; }
    /* style.css cũ kẹp .video-js ở 405px và dịch -50% → player hẹp hơn khung, lộ viền đen hai bên */
    html body.video-mode .video-player-container .video-js {
        max-width: none !important; width: 100% !important; height: 100% !important; left: 0 !important; transform: none !important;
    }
    html body.video-mode .xxh-player .xxh-top { max-width: calc(var(--xx-vid-w) + var(--xx-gap) + var(--xx-side-w)); }
    html body.video-mode .xxh-player .xxh-links { margin-left: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    html body.video-mode { --xx-gap: 28px; --xx-side-w: 340px; }
    html body.video-mode .tiktok-video-container { left: var(--xx-left) !important; width: var(--xx-vid-w) !important; }
    html body.video-mode .xx-side { left: calc(var(--xx-left) + var(--xx-vid-w) + var(--xx-gap)); width: var(--xx-side-w); }
}