@charset "utf-8";
/* ==========================================================================
   Skin phong cách Douyin (web) cho theme MacCMS default
   - Nền xanh đen phẳng, panel xám trong mờ, màu nhấn hồng đỏ, bo góc mềm.
   - Chỉ đổi màu / bo góc / hiệu ứng, không đổi bố cục.
   - Thay cho theme-anime.css (xem public/include.html). Muốn quay lại giao diện cũ:
     đổi link theme-douyin.css về theme-anime.css.
   ========================================================================== */

:root,
.bstem,
body.bstem {
    --dy-bg: #161823;
    --dy-surface: #1f212c;
    --dy-surface-2: #252632;
    --dy-fill: rgba(255, 255, 255, .06);
    --dy-fill-hover: rgba(255, 255, 255, .1);
    --dy-line: rgba(255, 255, 255, .08);
    --dy-accent: #fe2c55;
    --dy-accent-hover: #ff4769;
    --dy-accent-soft: rgba(254, 44, 85, .14);
    --dy-cyan: #25f4ee;

    --tpl-accent: var(--dy-accent);
    --tpl-accent-hover: var(--dy-accent-hover);
    --tpl-accent-muted: var(--dy-accent-soft);
    --tpl-primary: var(--dy-accent);
    --tpl-text: rgba(255, 255, 255, .9);
    --tpl-text-strong: #fff;
    --tpl-text-muted: rgba(255, 255, 255, .6);
    --tpl-text-subtle: rgba(255, 255, 255, .42);
    --tpl-text-on-inverse: #fff;
    --tpl-social-name: #8ec5ff;
    --tpl-border: rgba(255, 255, 255, .12);
    --tpl-border-soft: var(--dy-line);
    --tpl-bg: var(--dy-bg);
    --tpl-bg-base: var(--dy-bg);
    --tpl-bg-muted: var(--dy-surface-2);
    --tpl-bg-elevated: var(--dy-surface-2);
    --tpl-bg-login: var(--dy-surface);
    --tpl-radius-cover: 8px;

    /* tắt hiệu ứng phát sáng của skin anime cũ (nếu còn được nạp) */
    --tpl-anime-glow: none;
    --tpl-anime-glow-soft: none;
    --tpl-anime-gradient: var(--dy-accent);
}

/* ---------- Nền & chữ ---------- */
body,
body.bstem {
    background: var(--dy-bg) !important;
    background-image: none !important;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a:hover, .color:hover { text-shadow: none !important; }
::selection { background: var(--dy-accent); color: #fff; }

* { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border: 0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }

/* ---------- Header: trong mờ, đường kẻ mảnh ---------- */
#topnav .head_box,
#topnav .head_box.nav_fixed {
    background: rgba(22, 24, 35, .9) !important;
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--dy-line);
    box-shadow: none !important;
}
.head_menu_a .top_nav li a { color: rgba(255, 255, 255, .7); transition: color .15s; }
.head_menu_a .top_nav li a:hover,
.head_menu_a li.active a { color: #fff !important; font-weight: 600; }
.head_menu_a li.active a { position: relative; }

/* Ô tìm kiếm kiểu Douyin: khối xám bo tròn, viền sáng khi focus */
#topnav .head_search .form_control,
#topnav .head_search:not(.head_search_capsule_host) .form_control {
    background: var(--dy-fill) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #fff !important;
    transition: border-color .15s, background-color .15s;
}
#topnav .head_search .form_control:focus,
#topnav .head_search form:hover .form_control {
    background: var(--dy-fill-hover) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}
#topnav .head_search .form_control::placeholder { color: rgba(255, 255, 255, .4) !important; }

/* ---------- Tiêu đề khối ---------- */
.pannel_head .title,
.hu-section-head .title,
.home-unified-section-head .title {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .2px;
}
.pannel_head .more,
.pannel_head .more_i,
.pc_more,
.text_muted { color: var(--tpl-text-subtle) !important; }
.pannel_head .more:hover,
.pc_more:hover { color: #fff !important; }

/* ---------- Thẻ phim ---------- */
.vodlist_thumb {
    border-radius: 8px !important;
    overflow: hidden;
    background-color: var(--dy-surface-2);
    box-shadow: none !important;
    transition: filter .2s ease, transform .25s ease;
}
.vodlist_item:hover .vodlist_thumb {
    box-shadow: none !important;
    filter: brightness(.85);
    transform: translateY(-2px);
}
.vodlist_title a,
.vodlist_title { color: rgba(255, 255, 255, .9) !important; font-weight: 500; }
.vodlist_item:hover .vodlist_title a { color: #fff !important; }
.vodlist_sub { color: var(--tpl-text-subtle) !important; }

/* Nhãn trên ảnh (khung .mac_badge_top_right / bottom_right chỉ để định vị, không tô nền) */
.mac_badge_top_right,
.mac_badge_bottom_right { background: none !important; box-shadow: none !important; }
.mac_badge_top_right .mac_class_badge {
    background: var(--dy-accent) !important;
    color: #fff !important;
    border-radius: 4px !important;
}
.mac_badge_serial {
    background: rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    border-radius: 4px !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    text-shadow: none !important;
}
.mac_vip_badge, .mac_points_badge { border-radius: 4px !important; }

/* ---------- Tab / bộ lọc: chip xám, mục đang chọn màu trắng ---------- */
.mac-cat-filter-item,
.screen_list li a {
    border-radius: 6px !important;
    color: rgba(255, 255, 255, .7) !important;
    transition: background-color .15s, color .15s;
}
.mac-cat-filter-item:hover,
.screen_list li a:hover { background: var(--dy-fill) !important; color: #fff !important; }
.mac-cat-filter-item.on,
.mac-cat-filter-item.hl,
.screen_list li.hl a {
    background: var(--dy-fill-hover) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: none !important;
}
.tabs ul li.on label::after,
.tabs ul li.hl label::after {
    background: var(--dy-accent) !important;
    box-shadow: none !important;
}

/* ---------- Nút ---------- */
.btn, .button, .mac_btn, .submit_btn, button[type="submit"],
.rc-pay-btn, .pay-btn, .auth-ui .btn-primary {
    border-radius: 8px !important;
    box-shadow: none !important;
}
.btn:hover, .button:hover, .mac_btn:hover, .submit_btn:hover, button[type="submit"]:hover {
    box-shadow: none !important;
    filter: none;
    opacity: .9;
}

/* ==========================================================================
   Trang xem phim
   ========================================================================== */
#play_page,
.play_boxbg { background: var(--dy-bg) !important; }
.player, .play_boxbg, #play_page .hot_banner { box-shadow: none !important; }

/* khung player bo góc như Douyin */
#play_page .player_video {
    background: #000;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
#play_page .play_but {
    background: var(--dy-surface) !important;
    border-radius: 0 0 12px 12px;
    border: 0 !important;
}
#play_page .play_but .play-but-item > a,
#play_page .play_but .play-but-item > .play_collec,
#play_page .play_but .open-share { color: rgba(255, 255, 255, .72) !important; transition: color .15s; }
#play_page .play_but .play-but-item > a:hover,
#play_page .play_but .play-but-item > .play_collec:hover,
#play_page .play_but .open-share:hover { color: #fff !important; }
#play_page .play_but .play-but-item > .play_collec.is_fav,
#play_page .play_but .play-but-item > .play_collec.is_fav .iconfont { color: var(--dy-accent) !important; }
#play_page .play_but .js-play-link-pre,
#play_page .play_but .js-play-link-next { color: #fff !important; }

/* tiêu đề phim dưới player */
#play_page .player .video_title .title,
#play_page .player .video_title h1.title { color: #fff !important; font-weight: 700; }
#play_page .text_score { color: var(--dy-accent) !important; }

/* thẻ thể loại: chip xám */
#play_page .player_detail .tag,
#play_page .detail .tag,
#play_page .item--tags .tag {
    background: var(--dy-fill) !important;
    color: rgba(255, 255, 255, .75) !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* khối danh sách tập / gợi ý: panel bo tròn */
#play_page #bofy,
#play_page .play_infobox,
#play_page .pannel--vod-related,
#play_page #pinglun {
    background: var(--dy-surface) !important;
    border-radius: 12px;
    border: 0 !important;
}

/* tab nguồn phát */
#play_page .tabs.playlist .title_nav li a { color: rgba(255, 255, 255, .6) !important; }
#play_page .tabs.playlist .title_nav li.active a,
#play_page .tabs.playlist .title_nav li a:hover { color: #fff !important; font-weight: 600; }
#play_page .tabs.playlist .title_nav li.active { border-color: var(--dy-accent) !important; }

/* ô chọn tập: khối xám, tập đang xem chữ đỏ + nền đỏ nhạt */
#play_page .tabs.playlist .content_playlist li > a,
.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li > a,
body.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li > a,
#play_page .tabs.playlist .playlist_notfull .content_playlist li > a {
    background: var(--dy-fill) !important;
    color: rgba(255, 255, 255, .85) !important;
    border: 0 !important;
    border-radius: 8px !important;
    transition: background-color .15s, color .15s;
}
.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li:not(.active) > a:hover,
body.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li:not(.active) > a:hover,
#play_page .tabs.playlist .playlist_notfull .content_playlist li:not(.active) > a:hover {
    background: var(--dy-fill-hover) !important;
    color: #fff !important;
}
.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li.active > a,
body.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li.active > a,
#play_page .tabs.playlist .playlist_notfull .content_playlist li.active > a,
.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li.active > a:hover,
body.bstem #play_page .tabs.playlist .playlist_notfull .content_playlist li.active > a:hover {
    background: var(--dy-accent-soft) !important;
    color: var(--dy-accent) !important;
    font-weight: 600;
}

/* Thanh chọn server (frapi) kiểu chip Douyin */
.fr-server-bar,
.bstem .fr-server-bar,
body.bstem .fr-server-bar {
    background: var(--dy-surface) !important;
    border-bottom: 1px solid var(--dy-line) !important;
}
.fr-server-bar__label { color: rgba(255, 255, 255, .6) !important; font-weight: 500 !important; }
.fr-server-bar__label .iconfont { color: var(--dy-accent) !important; }
.fr-server-bar__btn,
.bstem .fr-server-bar__btn,
body.bstem .fr-server-bar__btn {
    background: var(--dy-fill) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, .85) !important;
}
.fr-server-bar__btn:hover { background: var(--dy-fill-hover) !important; color: #fff !important; }
.fr-server-bar__btn.is-active,
.bstem .fr-server-bar__btn.is-active,
body.bstem .fr-server-bar__btn.is-active {
    background: var(--dy-accent) !important;
    color: #fff !important;
}
.fr-player-msg__retry { background: var(--dy-accent) !important; border-radius: 8px !important; }

/* ---------- Footer ---------- */
.foot, .footer, #footer { border-top: 1px solid var(--dy-line); }

/* ==========================================================================
   Trang lọc anime (vod/show) – PC: giới hạn chiều rộng, panel kết quả, phân trang
   ========================================================================== */
@media (min-width: 821px) {
    /* .container của theme dùng max-width:30rem -> trên PC gần full màn hình. Giới hạn lại. */
    body .mac-catalog-show .member-wrap > .container {
        max-width: 1280px !important;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    body .mac-catalog-show .mac-catalog-show__panel {
        background: var(--dy-surface);
        border: 0;
        border-radius: 12px;
        padding: 20px 20px 8px !important;
        margin-top: 16px;
    }
    /* khối bộ lọc cùng tông panel */
    body .mac-catalog-show .mac-catalog-filter-head__sort.mac-catalog-show__filter-sort,
    body .mac-catalog-show .mac-catalog-show__filter-drawer .pannel.vod_all {
        background: var(--dy-surface) !important;
        border-color: var(--dy-line) !important;
    }
    body .mac-catalog-show .mac-catalog-filter-head__sort.mac-catalog-show__filter-sort { border-radius: 12px 12px 0 0 !important; }
    body .mac-catalog-show .mac-catalog-show__filter-drawer .pannel.vod_all { border-radius: 0 0 12px 12px !important; }
    body .mac-catalog-show .vod_all > .mac-catalog-filter-h-scroll { border-bottom-color: var(--dy-line) !important; }
    body .mac-catalog-show .vod_all .mac-catalog-filter-h-scroll__label .text_muted { color: rgba(255, 255, 255, .55) !important; }
}
@media (min-width: 1200px) {
    body .mac-catalog-show .mac-catalog-show__grid,
    body .mac-catalog-show .vod-show-grid.vodlist_wi { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
}

/* chip lọc: mục đang chọn nền đỏ nhạt chữ đỏ */
body .mac-catalog-show .vod_all .screen_list:not(.sx_tz) li button.mac-cat-filter-item {
    border-radius: 6px !important;
    color: rgba(255, 255, 255, .7);
    padding: 3px 10px;
}
body .mac-catalog-show .vod_all .screen_list:not(.sx_tz) li button.mac-cat-filter-item:hover { color: #fff; background: var(--dy-fill) !important; }
body .mac-catalog-show .vod_all .screen_list:not(.sx_tz) li.hl button.mac-cat-filter-item {
    background: var(--dy-accent-soft) !important;
    color: var(--dy-accent) !important;
    font-weight: 600;
}

/* phân trang kiểu chip */
.mac-catalog-show .mac-catalog-show__pager .page { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.mac-catalog-show .mac-catalog-show__pager .page li { float: none !important; margin: 0 !important; }
.mac-catalog-show .mac-catalog-show__pager .page li a,
.mac-catalog-show .mac-catalog-show__pager .page li > span.btns_disad {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 12px; box-sizing: border-box;
    background: var(--dy-fill) !important; border: 0 !important; border-radius: 8px !important;
    color: rgba(255, 255, 255, .8) !important; text-decoration: none; font-size: 13px;
    transition: background-color .15s, color .15s;
}
.mac-catalog-show .mac-catalog-show__pager .page li a:hover { background: var(--dy-fill-hover) !important; color: #fff !important; }
.mac-catalog-show .mac-catalog-show__pager .page li.active a { background: var(--dy-accent) !important; color: #fff !important; font-weight: 600; }
.mac-catalog-show .mac-catalog-show__pager .page li a.btns_disad { opacity: .35; pointer-events: none; }
.mac-catalog-show .mac-catalog-show__pager .page_tips { color: var(--tpl-text-subtle); margin-top: 10px; font-size: 12px; }
.mac-catalog-show .mac-catalog-show__pager .page_jump_input {
    width: 56px; height: 36px; box-sizing: border-box; margin: 0 6px;
    background: var(--dy-fill); border: 1px solid transparent; border-radius: 8px; color: #fff; text-align: center;
}
.mac-catalog-show .mac-catalog-show__pager .page_jump_btn {
    height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--dy-accent); color: #fff; cursor: pointer;
}

/* ==========================================================================
   HEADER chung (responsive) – một bản cho PC + mobile, không nổi (cuộn theo trang)
   Header nằm trong khoảng đệm phía trên mà các trang đã chừa sẵn (position:absolute).
   ========================================================================== */
:root { --dy-head-pc: 64px; --dy-head-mb: 104px; }
/* các trang mobile chừa chỗ theo biến này -> đặt bằng chiều cao header mới */
html:root {
    --site-head-mobile-body-pad: var(--dy-head-mb) !important;
    --site-head-mobile-body-pad-single: var(--dy-head-mb) !important;
    --site-head-mobile-body-pad-type-show: var(--dy-head-mb) !important;
}

/* #topnav được JS đưa lên đầu <body>, neo ở đầu trang và cuộn đi theo trang */
#topnav.site-head-wrap { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; z-index: var(--site-head-z-index, 100100); }
#topnav .head_box.dy-head,
#topnav .head_box.dy-head.nav_fixed,
#topnav .head_box.dy-head.nav_top {
    display: block !important;
    position: relative !important; top: 0 !important; left: 0; right: 0;
    transform: none !important;
    z-index: var(--site-head-z-index, 100100);
    background: var(--dy-bg) !important;
    border-bottom: 1px solid var(--dy-line);
    box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
#topnav .head_box.dy-head .header { padding: 0 !important; height: auto !important; background: none !important; }
#topnav .head_box.dy-head .head_a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search user";
    align-items: center; column-gap: 24px;
    box-sizing: border-box; width: 100%; max-width: 1440px; height: var(--dy-head-pc);
    margin: 0 auto; padding: 0 24px !important;
}
#topnav .head_box.dy-head .head_a_tools { display: contents !important; }
#topnav .head_box.dy-head .head_logo { grid-area: logo; display: flex; align-items: center; min-width: 0; }
#topnav .head_box.dy-head .head_logo img { max-height: 36px; width: auto; }
#topnav .head_box.dy-head .head_search {
    grid-area: search; justify-self: center; width: 100%; max-width: 560px;
    margin: 0 !important; float: none !important; min-height: 0 !important; background: none !important; border: 0 !important;
}
#topnav .head_box.dy-head .head_user { grid-area: user; justify-self: end; float: none !important; }
#topnav .head_box.dy-head .head_user > ul { display: flex !important; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
#topnav .head_box.dy-head .top_ico { float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
#topnav .head_box.dy-head .top_link {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; color: rgba(255, 255, 255, .85) !important;
    transition: background-color .15s, color .15s;
}
#topnav .head_box.dy-head .top_link:hover { background: var(--dy-fill); color: #fff !important; }
#topnav .head_box.dy-head .dy-head__ico { width: 22px; height: 22px; display: block; }
#topnav .head_box.dy-head .head-nav-icon { width: 30px !important; height: 30px !important; border-radius: 50%; display: block; }
#topnav .head_box.dy-head .mac-notify-bell__btn { position: relative; }

/* ô tìm kiếm */
#topnav .head_box.dy-head .head_search_capsule_host .head_search_capsule {
    background: var(--dy-fill) !important; border: 1px solid transparent !important; border-radius: 10px !important;
    min-height: 40px; padding: 0 4px 0 12px !important; transition: border-color .15s, background-color .15s;
}
#topnav .head_box.dy-head .head_search_capsule_host .head_search_capsule:hover,
#topnav .head_box.dy-head .head_search_capsule_host .head_search_capsule:focus-within {
    background: var(--dy-fill-hover) !important; border-color: rgba(255, 255, 255, .16) !important;
}
#topnav .head_box.dy-head .head_search_capsule .form_control { background: transparent !important; border: 0 !important; color: #fff !important; }
#topnav .head_box.dy-head .head_search_capsule_submit {
    height: 32px; padding: 0 14px !important; border: 0 !important; border-radius: 8px !important;
    background: var(--dy-accent) !important; color: #fff !important; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
#topnav .head_box.dy-head .head_search_capsule_ai_ico { display: none; }

/* mobile: 2 hàng – logo + icon / ô tìm kiếm */
@media (max-width: 820px) {
    #topnav .head_box.dy-head .head_a {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo user" "search search";
        row-gap: 8px; column-gap: 8px;
        height: var(--dy-head-mb); padding: 8px 12px 10px !important; align-content: center;
    }
    #topnav .head_box.dy-head .head_search { max-width: none; }
    #topnav .head_box.dy-head .top_link { width: 36px; height: 36px; }
    #topnav .head_box.dy-head .head_logo img { max-height: 30px; }
    /* trang có khoảng đệm cứng nhỏ hơn header mới */
    html body { padding-top: var(--dy-head-mb) !important; margin-top: 0 !important; }
    /* trang lọc: khối sắp xếp/lọc không còn nổi, nằm trong nội dung */
    .mac-catalog-filter-head__mobile.head_box { position: static !important; }
}
/* trang lọc: hàng thanh công cụ mobile không còn là header nổi */
.mac-catalog-filter-head__mobile.head_box { position: static !important; transform: none !important; }