/* ===========================================================================
   PhimMoiAI — giao diện công khai
   ===========================================================================

   Một file, không build step, giống hệt phần còn lại của dự án.

   TỐI LÀ MẶC ĐỊNH, KHÔNG PHẢI MỘT LỰA CHỌN
   Gần như mọi thứ trên site này là một tấm poster, và poster đọc đúng hơn trên
   nền tối. Vì vậy không có bộ token cho chế độ sáng và không có đoạn script
   chống nháy màu mà theme cũ phải có.

   ĐƠN VỊ
   Kích thước poster đi theo biến --ph-poster, không phải một con số rải khắp
   file: rail, lưới và trang tìm kiếm đều phải đổi cùng nhau khi kích thước đổi.
   =========================================================================== */

/*
 * Token đo từ bản mẫu ở khổ 1920px, rồi quy về đơn vị co giãn.
 *
 * Các con số không phải ước lượng: chúng lấy từ getComputedStyle trên chính
 * trang mẫu — padding khung 103.2px, khoảng cách rail 24px, poster 259×345,
 * tiêu đề section 28px/700, chân trang 20px/500. Phần padding đổi sang vw vì ở
 * bản mẫu chúng đúng bằng 5.375% và 4.267% của 1920px, tức chúng co theo màn
 * hình chứ không phải cố định.
 */
:root {
    /* Nền, từ sâu nhất ra ngoài. Nền trang là đen tuyền, như bản mẫu. */
    --ph-bg: #000;
    --ph-bg-soft: rgba(255, 255, 255, .05);
    --ph-bg-card: #16161c;
    --ph-bg-hover: #23232e;

    /* Chữ. Bản mẫu dùng trắng ở các mức độ mờ khác nhau, không dùng màu xám riêng. */
    --ph-text: #fff;
    --ph-text-dim: rgba(255, 255, 255, .8);
    --ph-text-faint: rgba(255, 255, 255, .5);

    /* Màu nhấn. Đỏ vì đây là màu của nút phát, và nó phải nổi trên nền tối. */
    --ph-accent: #e5303f;
    --ph-accent-hover: #f5404f;
    --ph-gold: #f5b942;

    --ph-line: rgba(255, 255, 255, .1);
    --ph-radius: 12px;
    --ph-radius-lg: 16px;

    /* Chiều rộng một poster. Mọi thứ khác suy ra từ đây. */
    --ph-poster: 259px;
    --ph-gap: 24px;
    --ph-header-h: 80px;

    /* Lề ngang của khung nội dung, và của chân trang. */
    --ph-gutter: 5.375vw;
    --ph-gutter-footer: 4.267vw;

    /* Khoảng cách giữa hai rail, và giữa tiêu đề rail với hàng poster. */
    --ph-floor-gap: 42px;
    --ph-title-gap: 24px;

    --ph-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --ph-ease: 180ms cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` phải thắng mọi display.
 *
 * Mặc định của trình duyệt chỉ là `[hidden] { display: none }`, và bất kỳ quy
 * tắc nào đặt `display: flex` hay `display: grid` cho chính phần tử đó đều đè
 * lên nó — cùng độ đặc hiệu, luật sau thắng. Hậu quả: mọi slide hero hiện cùng
 * lúc xếp chồng nhau, và menu "Thêm" mở sẵn ngay khi tải trang, vì cả hai đều
 * dựa vào thuộc tính `hidden` để đóng.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.ph {
    margin: 0;
    background: var(--ph-bg);
    color: var(--ph-text);
    /*
     * Bản mẫu đặt "Noto Sans" làm font nền. CSP của site là font-src 'self' nên
     * không nạp được từ Google Fonts; máy nào đã có Noto Sans thì dùng đúng nó,
     * còn lại rơi về font hệ thống với cùng độ rộng chữ.
     */
    font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    /* Thanh cuộn ngang của rail không được đẩy cả trang chạy ngang. */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ph-accent-hover); }

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; }

:focus-visible {
    outline: 2px solid var(--ph-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.ph-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ph-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ph-accent); color: #fff; padding: 10px 16px;
}
.ph-skip:focus { left: 8px; top: 8px; }

/*
 * Khung nội dung KHÔNG có max-width.
 *
 * Bản mẫu để khung chạy hết bề ngang và chỉ chừa lề bằng phần trăm — ở 1920px
 * lề là 103.2px, đúng 5.375%. Đặt max-width 1440px như trước làm màn rộng thừa
 * hai dải đen hai bên, thứ bản mẫu không có.
 */
.ph-container {
    width: 100%;
    padding-inline: var(--ph-gutter);
}

/* ------------------------------------------------------------------ header */

.ph-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ph-line);
    transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}

/*
 * Trang có hero (trang chủ): như bản mẫu, header trong suốt nằm ĐÈ lên ảnh nền
 * của slide — ảnh chạy lên tận đỉnh màn hình. Chỉ một dải tối mờ phía trên để
 * chữ menu đọc được trên ảnh sáng. Cuộn qua khỏi đầu trang thì film.js gắn
 * .is-scrolled và header về lại nền kính mờ như mọi trang khác.
 */
body:has(.ph-main > .ph-hero) .ph-header:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
    /* Gradient phủ cả 1px viền dưới và không lặp — mặc định nó lặp lại trong
       vùng viền và vẽ ra một đường đen mảnh ngay dưới header. */
    background-origin: border-box; background-repeat: no-repeat;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
/* Kéo hero lên đúng bằng chiều cao header (kể cả 1px viền) để nằm dưới nó. */
.ph-main > .ph-hero { margin-top: calc(-1 * var(--ph-header-h) - 1px); }

/* Lề trong của header nhỏ hơn lề khung nội dung: bản mẫu đo được 38.4px ở
   1920px, tức đúng 2%. */
.ph-header-inner {
    padding-inline: 2vw;
    min-height: var(--ph-header-h);
    display: flex; align-items: center; gap: 20px;
}

.ph-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.ph-brand:hover { color: inherit; }
/* Bản mẫu: logo trong header cao 38px trên thanh cao 80px (tỉ lệ ~0,475) —
   32px đo lệch, làm logo trông nhỏ hơn hẳn bản gốc. */
.ph-brand-logo { height: 38px; width: auto; }

/* Khối chữ khi site chưa tải logo lên — không bao giờ để header trống.
   Cùng 38px với .ph-brand-logo ở trên, để hai nhánh (đã tải logo / chưa) cao
   bằng nhau và không nhảy bố cục khi admin tải logo lên sau. */
.ph-brand-mark {
    width: 38px; height: 38px; border-radius: 9px;
    background: linear-gradient(135deg, var(--ph-accent), #8b1e8f);
    flex: none;
}
.ph-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }

/*
 * Bản mẫu đo được: mục nav 18px/700, khoảng cách flex 48px. Họ chỉ có 4 mục cố
 * định nên chừa được nhiều khoảng trắng; site này có tới bảy mục (Trang chủ +
 * sáu thể loại) nên giữ đúng cỡ chữ nhưng rút khoảng cách lại còn 20px, đủ tách
 * bạch mà không tràn dòng.
 */
.ph-nav { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; min-width: 0; }

.ph-nav-link {
    padding: 7px 4px; border-radius: 6px;
    color: rgba(255, 255, 255, .95); font-size: 18px; font-weight: 700;
    white-space: nowrap;
    transition: color var(--ph-ease), background var(--ph-ease);
}
.ph-nav-link:hover { color: var(--ph-text); }
/* Mục đang chọn tô màu chữ, không tô nền — đúng cách bản mẫu đánh dấu "Home". */
.ph-nav-link.is-active { color: var(--ph-accent); }

.ph-more { position: relative; }
.ph-more-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; cursor: pointer; font: inherit;
}
.ph-more-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
    min-width: 190px; max-height: 60vh; overflow-y: auto;
    padding: 6px;
    background: var(--ph-bg-card);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
    display: grid; gap: 1px;
}
.ph-more-menu a {
    padding: 8px 10px; border-radius: 7px;
    font-size: 14px; color: var(--ph-text-dim);
}
.ph-more-menu a:hover { background: var(--ph-bg-hover); color: var(--ph-text); }

.ph-search { position: relative; flex: none; width: 220px; }
.ph-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ph-text-faint); pointer-events: none;
}
.ph-search input {
    width: 100%; padding: 8px 12px 8px 34px;
    background: var(--ph-bg-card);
    border: 1px solid var(--ph-line);
    border-radius: 999px;
    color: var(--ph-text); font: inherit; font-size: 14px;
}
.ph-search input::placeholder { color: var(--ph-text-faint); }
.ph-search input:focus { border-color: var(--ph-accent); outline: none; }

/*
 * Bộ chuyển ngôn ngữ như bản mẫu: quả địa cầu + tên ngôn ngữ, đỏ khi rê chuột
 * hoặc đang mở; bảng thả xuống xám đậm bo 16px, mục đang chọn đậm và sáng.
 */
.ph-lang { position: relative; flex: none; }
.ph-lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 4px; border: 0; background: none; cursor: pointer;
    color: var(--ph-text); font: inherit; font-size: 16px; font-weight: 500; white-space: nowrap;
    transition: color var(--ph-ease, 200ms ease);
}
.ph-lang-toggle:hover, .ph-lang-toggle[aria-expanded="true"] { color: var(--ph-accent); }
.ph-lang-menu {
    position: absolute; top: calc(100% + 14px); right: -8px; z-index: 120;
    width: 240px; max-height: calc(100vh - 110px); overflow-y: auto;
    display: grid; gap: 20px; padding: 24px;
    border-radius: 16px; background: #292929;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.ph-lang-menu[hidden] { display: none; }
.ph-lang-item { font-size: 14px; line-height: 19px; color: rgba(255, 255, 255, .5); }
.ph-lang-item:hover { color: rgba(255, 255, 255, .9); }
.ph-lang-item.is-active { color: rgba(255, 255, 255, .9); font-weight: 700; }

.ph-burger { display: none; }

/* --------------------------------------------------------------- nội dung */

.ph-main { min-height: 60vh; padding-bottom: 56px; }

/* Bản mẫu: mỗi rail cách nhau 42px, tiêu đề cách hàng poster 24px, và hàng
   tiêu đề thụt vào 12px cho thẳng mép poster đầu tiên. */
.ph-section { margin-bottom: var(--ph-floor-gap); }

.ph-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--ph-title-gap);
    padding-inline: 12px;
}
.ph-section-head-filters { flex-wrap: wrap; }

.ph-filterbar { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-select {
    padding: 8px 30px 8px 12px; border-radius: var(--ph-radius);
    background: var(--ph-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/16px;
    border: 1px solid var(--ph-line); color: var(--ph-text);
    font-size: 13.5px; appearance: none; cursor: pointer;
}
.ph-select:hover { border-color: var(--ph-accent); }

/*
 * 28px/700 ở màn rộng. Bản mẫu hạ xuống 24px dưới 1280px và dùng cỡ theo bề
 * ngang màn hình dưới 768px — cùng ba mốc, cùng ba giá trị.
 */
.ph-section-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.ph-section-more { font-size: 14px; color: var(--ph-text-faint); white-space: nowrap; }

/* ------------------------------------------------------------------- hero */

.ph-hero { position: relative; }

.ph-hero-slide {
    position: relative;
    /*
     * Đủ cao để dải chọn slide ở góc phải dưới không đè lên nút phát bên trái.
     * Dùng vh kèm cận trên: trên màn hình rất cao, một hero chiếm nửa trang là
     * quá nhiều cho một khối chỉ giới thiệu một bộ phim.
     */
    min-height: calc(clamp(460px, 56vh, 620px) + var(--ph-header-h));
    display: flex; align-items: flex-end;
    padding: calc(40px + var(--ph-header-h)) 0 72px;
    overflow: hidden;
}

/*
 * Ảnh nền là một <img> thật, không phải background-image.
 *
 * CSP của site là `style-src 'self'` nên không thể gắn URL ảnh bằng thuộc tính
 * style inline — trình duyệt bỏ qua nó và khối hero ra một mảng đen.
 *
 * Kéo theo một hệ quả: <img> là replaced element nên KHÔNG có ::before/::after.
 * Lớp phủ gradient vì thế nằm trên chính slide, không nằm trên ảnh.
 */
.ph-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    /*
     * Chỉ giảm sáng nhẹ. Ảnh hero tự nó đã mang sẵn một dải tối bên trái cho
     * phần chữ; hạ brightness xuống .55 rồi phủ tiếp một lớp nền đặc nữa thì ba
     * lớp tối chồng lên nhau và ảnh biến thành một khung đen.
     */
    filter: brightness(.82);
}

.ph-hero-slide::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        /* Hoà vào nền trang ở mép dưới, để hero không kết thúc bằng một đường cắt. */
        linear-gradient(to top, var(--ph-bg) 1%, rgba(11, 11, 15, .12) 46%),
        /* Đủ tối bên trái để chữ trắng đọc được, nhưng không che mất ảnh. */
        linear-gradient(to right, rgba(11, 11, 15, .86) 0%, rgba(11, 11, 15, 0) 66%);
}

/* Chữ phải nằm trên lớp phủ, không bị nó che. */
.ph-hero-slide > .ph-container { position: relative; z-index: 2; }

.ph-hero-inner { position: relative; max-width: 640px; }

/* Bản mẫu đo được: tiêu đề hero 40px/700 (không phải 54px/800 như trước). */
.ph-hero-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 14px;
}
.ph-hero-original { color: var(--ph-text-dim); font-size: 15px; margin: 0 0 12px; }

.ph-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Mô tả hero: 16px/400, trắng 70% — đo trực tiếp từ bản mẫu. */
.ph-hero-desc {
    color: rgba(255, 255, 255, .7); margin: 0 0 24px;
    font-size: 16px; max-width: 540px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------- bộ chọn slide

   Dải poster nhỏ ở góc phải dưới của hero. Nó thay cho mấy chấm tròn vì nó
   trả lời được câu "phía sau còn phim gì" — chấm tròn chỉ đếm. */

.ph-hero-picker {
    position: absolute; right: 24px; bottom: 28px; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    max-width: min(560px, 46vw);
}

.ph-hero-picker-track {
    display: flex; gap: 10px;
    overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px;
}
.ph-hero-picker-track::-webkit-scrollbar { display: none; }

.ph-hero-thumb {
    flex: none; width: 92px; padding: 0;
    background: var(--ph-bg-card);
    border: 2px solid transparent; border-radius: 8px;
    overflow: hidden; cursor: pointer;
    aspect-ratio: 2 / 3;
    opacity: .62;
    transition: opacity var(--ph-ease), border-color var(--ph-ease), transform var(--ph-ease);
}
.ph-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-hero-thumb:hover { opacity: 1; transform: translateY(-2px); }
.ph-hero-thumb.is-active { opacity: 1; border-color: #fff; }

.ph-hero-picker-next {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20, 20, 27, .82);
    border: 1px solid var(--ph-line);
    color: var(--ph-text); cursor: pointer;
    transition: background var(--ph-ease);
}
.ph-hero-picker-next:hover { background: var(--ph-accent); border-color: var(--ph-accent); }

/* ------------------------------------------------------------------- meta */

.ph-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    color: var(--ph-text-dim); font-size: 13px; margin-bottom: 14px;
}
.ph-meta > * { display: inline-flex; align-items: center; gap: 4px; }
.ph-meta-sep { color: var(--ph-text-faint); }

.ph-badge {
    padding: 3px 8px; border-radius: 6px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    font-size: 12px; font-weight: 600; color: var(--ph-text-dim);
}
.ph-badge-rating { color: var(--ph-gold); border-color: rgba(245, 185, 66, .35); }

/* ------------------------------------------------------------------ nút */

.ph-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600;
    transition: background var(--ph-ease), color var(--ph-ease), border-color var(--ph-ease);
}
.ph-btn-primary { background: var(--ph-accent); color: #fff; }
.ph-btn-primary:hover { background: var(--ph-accent-hover); color: #fff; }
.ph-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: var(--ph-text);
}
.ph-btn-ghost:hover { background: rgba(255, 255, 255, .16); color: var(--ph-text); }
.ph-btn-sm { padding: 8px 16px; font-size: 14px; }

/*
 * Nút phát của hero: trắng, to, bo tròn hẳn.
 *
 * Trắng chứ không phải màu nhấn — trên một tấm ảnh nền tuỳ ý, trắng là thứ duy
 * nhất chắc chắn nổi bật, còn đỏ thì chìm ngay khi ảnh cũng đang đỏ.
 */
.ph-btn-play {
    background: #fff; color: #14141b;
    padding: 14px 34px; font-size: 16px; font-weight: 700;
}
.ph-btn-play:hover { background: #e6e6ea; color: #14141b; }

/* ------------------------------------------------------------------ rail */

.ph-rail { position: relative; }

.ph-rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--ph-poster);
    gap: var(--ph-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* 12px hai bên để mép poster thẳng với tiêu đề rail, như bản mẫu. */
    padding: 0 12px 4px;
    scrollbar-width: none;
}
.ph-rail-track::-webkit-scrollbar { display: none; }
.ph-rail-track > * { scroll-snap-align: start; }

.ph-rail-btn {
    position: absolute; top: calc(50% - 26px); z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20, 20, 27, .92);
    border: 1px solid var(--ph-line);
    color: var(--ph-text); cursor: pointer;
    opacity: 0; transition: opacity var(--ph-ease), background var(--ph-ease);
}
.ph-rail:hover .ph-rail-btn { opacity: 1; }
.ph-rail-btn:focus-visible { opacity: 1; }
.ph-rail-btn:hover { background: var(--ph-accent); border-color: var(--ph-accent); }
.ph-rail-btn[hidden] { display: none; }
.ph-rail-prev { left: -14px; }
.ph-rail-next { right: -14px; }

/* ------------------------------------------------------------- thẻ poster */

.ph-card { position: relative; }

.ph-card-link { display: block; }

/*
 * 3:4, không phải 2:3.
 *
 * Poster bản mẫu đo được 259×345 — tỉ lệ 0,751. Dùng 2:3 làm thẻ cao hơn hẳn và
 * một hàng poster chiếm nhiều chiều dọc hơn bản mẫu.
 */
.ph-card-poster {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    background: var(--ph-bg-card);
    transition: transform var(--ph-ease), box-shadow var(--ph-ease);
}
.ph-card-link:hover .ph-card-poster {
    transform: translateY(-3px);
    box-shadow: var(--ph-shadow);
}

.ph-card-poster img { width: 100%; height: 100%; object-fit: cover; }

/* Vạch tiến độ của thẻ "Tiếp tục xem" — xem setupContinueWatching() trong film.js. */
.ph-card-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(0, 0, 0, .5);
}
.ph-card-progress span { display: block; height: 100%; background: var(--ph-accent); }

/* Giữ chỗ khi phim chưa có poster: một khối có chữ, không phải một ô trống. */
.ph-card-empty {
    width: 100%; height: 100%;
    display: grid; place-items: center; padding: 12px;
    background: linear-gradient(160deg, var(--ph-bg-card), var(--ph-bg-soft));
    color: var(--ph-text-faint); font-size: 12px; text-align: center;
}

.ph-card-badges {
    position: absolute; top: 7px; left: 7px; right: 7px;
    display: flex; justify-content: space-between; gap: 6px;
    pointer-events: none;
}
.ph-card-badge {
    padding: 3px 7px; border-radius: 6px;
    background: rgba(11, 11, 15, .82);
    font-size: 11px; font-weight: 700; color: var(--ph-text);
    backdrop-filter: blur(4px);
}
.ph-card-badge-rating { color: var(--ph-gold); }

.ph-card-title {
    margin: 12px 0 0; font-size: 16px; font-weight: 400; line-height: 1.35;
    color: var(--ph-text-dim);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ph-card-sub { margin: 2px 0 0; font-size: 13px; color: var(--ph-text-faint); }

/*
 * Số thứ hạng của rail "Xem nhiều nhất" — nằm trong .ph-card-poster (xem
 * card.php), nên bottom/left ở đây neo vào góc dưới-trái của TẤM POSTER,
 * không phải của cả thẻ. Từng đặt ngoài .ph-card-poster với bottom: 26px tính
 * theo chiều cao cả thẻ (poster + tên phim + năm) — con số 1-6 vì vậy đè
 * thẳng lên chữ tên phim ngay dưới poster thay vì nằm trên chính tấm ảnh.
 */
.ph-card-rank {
    /*
     * bottom: 75px, không sát đáy như bản mẫu (bản mẫu đặt tâm số ở ~89%
     * chiều cao poster). Ảnh poster hiện tại của site là ảnh AI sinh tạm, có
     * TÊN PHIM VẼ SẴN VÀO PIXEL ở dải ~16% đáy ảnh — số đặt đúng vị trí bản
     * mẫu sẽ đè lên đúng chữ đó (không phải tên phim thật: tên phim thật là
     * .ph-card-title bên dưới poster, cách số này 10px, không hề bị che).
     * Khi ảnh poster thật thay vào (thường không dồn chữ vào dải đó) có thể
     * đưa số về sát đáy hơn cho đúng bản mẫu.
     */
    /* left dương, không âm: left âm cắt một phần chữ số vào mép ảnh (bị
       overflow: hidden của .ph-card-poster xén mất), trông như số bị cụt. */
    position: absolute; left: 10px; bottom: 75px; z-index: 2;
    font-size: 44px; font-weight: 900; line-height: 1.35;
    color: var(--ph-bg);
    -webkit-text-stroke: 2px var(--ph-text-dim);
    pointer-events: none;
}

/* ------------------------------------------------------------------ lưới */

.ph-grid {
    display: grid;
    /* minmax theo nửa chiều rộng poster: màn hẹp vẫn xếp được nhiều cột. */
    grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 14vw, var(--ph-poster)), 1fr));
    gap: 28px var(--ph-gap);
}

/* ------------------------------------------------- tab danh mục phim */

/* Cuộn ngang khi nhiều danh mục hơn bề ngang màn hình, không xuống dòng. */
.ph-tabs {
    display: flex; gap: 8px;
    margin: 0 0 var(--ph-title-gap); padding: 0 12px 4px;
    overflow-x: auto; scrollbar-width: none;
}
.ph-tabs::-webkit-scrollbar { display: none; }
.ph-tab {
    flex: none; padding: 8px 18px; border-radius: 999px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    color: var(--ph-text-dim); font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background var(--ph-ease), color var(--ph-ease), border-color var(--ph-ease);
}
.ph-tab:hover { background: var(--ph-bg-hover); color: var(--ph-text); }
.ph-tab.is-active { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; }

/* ---------------------------------------------------- bảng xếp hạng */

/*
 * Top 3: hạng 1 ở giữa và cao hơn. DOM giữ thứ tự 1-2-3 (đọc màn hình, SEO),
 * còn vị trí trên màn hình do `order` quyết định.
 */
.ph-podium {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end; gap: var(--ph-gap);
    max-width: 880px; margin: 0 auto 40px; padding: 0 12px; list-style: none;
}
.ph-podium-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ph-podium-1 { order: 2; }
.ph-podium-2 { order: 1; }
.ph-podium-3 { order: 3; }
.ph-podium-poster {
    position: relative; display: block; width: 78%;
    border-radius: var(--ph-radius-lg); overflow: hidden;
    aspect-ratio: 2 / 3; background: var(--ph-bg-card);
    box-shadow: var(--ph-shadow);
    --ph-medal: #b8c0cc;
    outline: 2px solid var(--ph-medal); outline-offset: -2px;
}
.ph-podium-1 .ph-podium-poster { width: 100%; --ph-medal: var(--ph-gold); }
.ph-podium-3 .ph-podium-poster { --ph-medal: #cd8a52; }
.ph-podium-poster img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Huy hiệu tròn ở góc TRÊN, không ở đáy: poster (nhất là ảnh tạm hiện tại)
 * thường có tên phim vẽ sẵn ở dải dưới, số đặt ở đáy sẽ đè lên đó.
 */
.ph-podium-rank {
    position: absolute; left: 10px; top: 10px;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--ph-medal); color: #14141b;
    font-size: 22px; font-weight: 900; line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.ph-podium-1 .ph-podium-rank { width: 54px; height: 54px; font-size: 28px; }
.ph-podium-body { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.ph-podium-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ph-podium-title a:hover { color: var(--ph-accent); }
.ph-podium-metric { color: var(--ph-text-faint); font-size: 14px; margin-bottom: 4px; }

/* Hạng 4 trở đi: mỗi phim một dòng. */
.ph-ranklist { list-style: none; margin: 0; padding: 0 12px; }
.ph-rankrow {
    display: grid; grid-template-columns: 64px 72px minmax(0, 1fr) auto auto;
    align-items: center; gap: 18px;
    padding: 14px 16px; border-radius: var(--ph-radius);
    transition: background var(--ph-ease);
}
.ph-rankrow + .ph-rankrow { border-top: 1px solid var(--ph-line); }
.ph-rankrow:hover { background: var(--ph-bg-soft); }
.ph-rankrow-rank {
    font-size: 36px; font-weight: 900; text-align: center;
    color: var(--ph-bg); -webkit-text-stroke: 1.5px var(--ph-text-dim);
}
.ph-rankrow-poster {
    display: block; width: 72px; aspect-ratio: 2 / 3;
    border-radius: 8px; overflow: hidden; background: var(--ph-bg-card);
}
.ph-rankrow-poster img { width: 100%; height: 100%; object-fit: cover; }
.ph-rankrow-body { min-width: 0; }
.ph-rankrow-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ph-rankrow-title a:hover { color: var(--ph-accent); }
.ph-rankrow-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px;
    color: var(--ph-text-faint); font-size: 13.5px;
}
.ph-rankrow-meta a:hover { color: var(--ph-text); }
.ph-rankrow-summary {
    margin-top: 6px; color: var(--ph-text-dim); font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-rankrow-metric { color: var(--ph-text-dim); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ph-rankrow-play {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: var(--ph-text); font-size: 14px;
    transition: background var(--ph-ease);
}
.ph-rankrow-play:hover { background: var(--ph-accent); color: #fff; }

@media (max-width: 768px) {
    .ph-podium { gap: 10px; margin-bottom: 24px; }
    .ph-podium-poster { width: 88%; }
    .ph-podium-rank, .ph-podium-1 .ph-podium-rank { width: 30px; height: 30px; font-size: 15px; left: 6px; top: 6px; }
    .ph-podium-title { font-size: 13.5px; }
    .ph-podium-metric { font-size: 12px; }
    .ph-podium-body .ph-btn { display: none; }

    /* Chỉ số xuống dưới tên (cột 3, hàng 2) để tên phim có trọn bề ngang. */
    .ph-rankrow { grid-template-columns: 36px 52px minmax(0, 1fr); gap: 2px 10px; padding: 10px 4px; }
    .ph-rankrow-rank, .ph-rankrow-poster { grid-row: span 2; }
    .ph-rankrow-metric { grid-column: 3; justify-self: start; }
    .ph-rankrow-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
    .ph-rankrow-rank { font-size: 24px; }
    .ph-rankrow-poster { width: 52px; }
    .ph-rankrow-title { font-size: 15px; }
    .ph-rankrow-summary, .ph-rankrow-play { display: none; }
    .ph-rankrow-metric { font-size: 12.5px; }
}

/* ----------------------------------------------------------- chi tiết phim */

/*
 * overflow: hidden là bắt buộc, không phải trang trí.
 *
 * .ph-detail-bg cao cố định 440px, nhưng .ph-detail tự co theo nội dung — một
 * phim có ít thông tin (không trailer, không đạo diễn) khiến khối này thấp hơn
 * 440px. Phần dư của backdrop tràn xuống, đè một dải ảnh tối lên đúng tiêu đề
 * "Danh sách tập" của section kế tiếp. Cắt tại đây thì backdrop không bao giờ
 * lấn ra khỏi ranh giới của chính nó.
 */
.ph-detail { position: relative; padding: 28px 0 32px; overflow: hidden; }

/* Cùng lý do như hero: <img> thật, lớp phủ nằm trên thẻ cha. */
.ph-detail-bg {
    position: absolute; top: 0; left: 0; right: 0; z-index: 0;
    width: 100%; height: 440px;
    object-fit: cover; object-position: center top;
    filter: brightness(.55);
}
.ph-detail::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    height: 440px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(11, 11, 15, .45), var(--ph-bg) 94%);
}

.ph-detail-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 260px 1fr; gap: 32px;
    align-items: start;
}

.ph-detail-poster {
    aspect-ratio: 2 / 3; border-radius: var(--ph-radius-lg);
    overflow: hidden; background: var(--ph-bg-card); box-shadow: var(--ph-shadow);
}
.ph-detail-poster img { width: 100%; height: 100%; object-fit: cover; }

.ph-detail-title { font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -.025em; }
.ph-detail-original { color: var(--ph-text-dim); margin: 6px 0 14px; font-size: 15px; }

.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px; }

.ph-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* Chip/badge: 16px/400, pad 5px 12px — đo từ bản mẫu (nhãn "Trending", "Series" trên hero). */
.ph-chip {
    padding: 5px 12px; border-radius: 999px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    font-size: 16px; color: var(--ph-text-dim);
}
.ph-chip:hover { background: var(--ph-bg-hover); color: var(--ph-text); }

/* Chip nhấn, cho nhãn "Nổi bật" trên hero. */
.ph-chip-hot {
    background: var(--ph-accent); border-color: var(--ph-accent);
    color: #fff; font-weight: 600;
}

.ph-prose { color: var(--ph-text-dim); }
.ph-prose p { margin: 0 0 12px; }
.ph-prose h2, .ph-prose h3 { color: var(--ph-text); margin: 20px 0 8px; font-size: 17px; }
.ph-prose img { border-radius: var(--ph-radius); margin: 12px 0; }
.ph-prose a { color: var(--ph-accent); }

/* Bảng thông tin: nhãn / giá trị, không dùng <table> vì nó không phải dữ liệu bảng. */
.ph-facts { display: grid; gap: 8px; margin: 0; }
.ph-fact { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px; }
.ph-fact dt { color: var(--ph-text-faint); }
.ph-fact dd { margin: 0; }
/* Danh sách tên (đạo diễn, diễn viên): liên kết gạch chân mảnh, ngăn bằng dấu phẩy. */
.ph-fact dd a { border-bottom: 1px solid rgba(255, 255, 255, .18); transition: color .2s ease, border-color .2s ease; }
.ph-fact dd a:hover { color: var(--ph-accent); border-bottom-color: var(--ph-accent); }
.ph-fact-names { line-height: 1.75; }

/* ------------------------------------------------------------ danh sách tập */

.ph-episodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.ph-episode {
    display: grid; place-items: center;
    padding: 11px 6px; border-radius: 8px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    font-size: 14px; font-weight: 600; color: var(--ph-text-dim);
    transition: background var(--ph-ease), color var(--ph-ease), border-color var(--ph-ease);
}
.ph-episode:hover { background: var(--ph-bg-hover); color: var(--ph-text); }
.ph-episode.is-current {
    background: var(--ph-accent); border-color: var(--ph-accent); color: #fff;
}

/* ----------------------------------------------------------- trang xem phim */

/*
 * Hai cột như bản mẫu: trình phát chiếm hết chiều cao màn hình bên trái, thông
 * tin và lưới số tập nằm trong một cột phải cuộn riêng.
 *
 * Nguồn phim là video DỌC. Một khung 16:9 cố định để lại hai mảng đen còn rộng
 * hơn cả khung hình, nên khung phát ở đây bám theo tỉ lệ thật của video:
 * film.js đặt --ph-player-ratio ngay khi biết kích thước thật (xem
 * setupVideoPlayer), còn 9/16 chỉ là giá trị tạm cho lúc video chưa tải xong.
 */
.ph-watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px);
    height: calc(100vh - var(--ph-header-h));
    min-height: 520px;
    padding: 0;
    background: #000;
}

.ph-watch-stage {
    position: relative;
    display: grid; place-items: center;
    min-width: 0;
    background: #000;
}

/* Mũi tên quay lại trang phim, nổi trên nền đen ở góc trái. */
.ph-watch-back {
    position: absolute; top: 18px; left: 18px; z-index: 3;
    width: 42px; height: 42px; border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #fff;
    transition: background var(--ph-ease);
}
.ph-watch-back:hover { background: rgba(255, 255, 255, .18); }

.ph-player {
    position: relative;
    height: 100%; width: auto;
    max-width: 100%; max-height: 100%;
    aspect-ratio: var(--ph-player-ratio, 9 / 16);
    background: #000;
}
.ph-player iframe,
.ph-player video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}

/* Tập chưa có nguồn: vẫn là một khung 16:9, nhưng có lời nhắn thay vì màn đen. */
.ph-player-empty {
    position: absolute; inset: 0;
    display: grid; place-items: center; padding: 20px;
    color: var(--ph-text-dim); text-align: center;
}

/* --------------------------------------------------- bộ điều khiển tuỳ biến */
/*
 * JS (film.js) chỉ thêm class `has-controls` và dựng các phần tử dưới đây khi
 * nó tự tin video sẽ chạy được; nếu JS không chạy hoặc thất bại, `controls`
 * gốc của <video> (đã có sẵn trong HTML) vẫn còn nguyên — CSS không được ẩn
 * bộ điều khiển gốc trừ khi chắc chắn `has-controls` đã được gắn.
 */
.ph-player.has-controls video::-webkit-media-controls { display: none !important; }

.ph-player-bigplay {
    position: absolute; inset: 0; margin: auto;
    width: 64px; height: 64px; border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(15, 15, 20, .55); border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; cursor: pointer;
    transition: background var(--ph-ease), transform var(--ph-ease), opacity var(--ph-ease);
}
.ph-player-bigplay:hover { background: var(--ph-accent); }
.ph-player-bigplay svg { width: 26px; height: 26px; margin-left: 3px; }
.ph-player.is-playing .ph-player-bigplay { opacity: 0; pointer-events: none; transform: scale(.85); }

/*
 * Hai hàng: tiến trình trên, nút dưới. Khung phát của phim dọc chỉ rộng bằng
 * khung hình, một hàng duy nhất sẽ bóp thanh tiến trình còn bằng không — mà đó
 * là thứ người xem cần nhất để tua.
 */
.ph-player-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 26px 12px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
    opacity: 1; transition: opacity var(--ph-ease);
}
.ph-player-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.ph-player-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ph-player.is-playing.is-idle .ph-player-bar,
.ph-player.is-playing.is-idle .ph-player-bigplay { opacity: 0; pointer-events: none; }
.ph-player.is-playing.is-idle { cursor: none; }

.ph-pbtn {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    background: none; border: 0; padding: 0; color: #fff; cursor: pointer;
    opacity: .9; transition: opacity var(--ph-ease);
}
.ph-pbtn:hover { opacity: 1; }
.ph-pbtn svg { width: 19px; height: 19px; }

/* Nút và menu chọn phụ đề; nút sáng lên khi đang bật một ngôn ngữ. */
.ph-player-cc { position: relative; flex: none; }
.ph-player-cc[hidden] { display: none; }
.ph-player-cc.is-on .ph-pbtn { opacity: 1; color: var(--ph-accent); }
.ph-player-cc-menu {
    position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5;
    min-width: 150px; max-height: 240px; overflow-y: auto;
    padding: 6px; border-radius: 10px;
    background: rgba(18, 18, 22, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.ph-player-cc-menu[hidden] { display: none; }
.ph-player-cc-item {
    display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
    background: none; color: rgba(255, 255, 255, .8);
    font: inherit; font-size: 13.5px; text-align: left; white-space: nowrap; cursor: pointer;
}
.ph-player-cc-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ph-player-cc-item.is-active { color: var(--ph-accent); font-weight: 600; }

/*
 * Lời thoại: do film.js vẽ, không phải bộ hiển thị phụ đề của trình duyệt —
 * file .vtt của nguồn mang sẵn cỡ chữ tính bằng pixel và toạ độ giữa khung, vừa
 * cho màn hình dọc của ứng dụng gốc chứ không vừa cho web. JS đặt width/bottom
 * theo đúng phần hình đang hiện; ở đây chỉ còn hình thức của chữ.
 */
.ph-player-subs {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
    bottom: 58px; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0 12px;
    pointer-events: none; text-align: center;
}
.ph-player-subs[hidden] { display: none; }
.ph-player-subs-line {
    max-width: 100%;
    padding: 1px 8px; border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: clamp(13px, 1.25vw, 19px); font-weight: 500; line-height: 1.45;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}

/* Mỗi nút play/tắt-tiếng chứa 2 icon; JS chỉ đổi class, CSS quyết định icon nào hiện. */
.ph-pbtn .icon-pause,
.ph-pbtn .icon-vol-off { display: none; }
.ph-player.is-playing [data-play] .icon-play { display: none; }
.ph-player.is-playing [data-play] .icon-pause { display: inline-flex; }
.ph-player.is-muted [data-volume] .icon-vol-on { display: none; }
.ph-player.is-muted [data-volume] .icon-vol-off { display: inline-flex; }

.ph-player-time {
    flex: none; margin-left: 6px;
    color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums;
    opacity: .9; white-space: nowrap;
}

.ph-player-progress {
    position: relative; width: 100%; height: 14px; cursor: pointer;
    display: flex; align-items: center;
}
.ph-player-progress-track {
    position: relative; width: 100%; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, .25); overflow: hidden;
}
.ph-player-progress-buffered {
    position: absolute; inset: 0; width: 0%; background: rgba(255, 255, 255, .3);
}
.ph-player-progress-fill {
    position: absolute; inset: 0; width: 0%; background: var(--ph-accent);
}
.ph-player-progress-handle {
    position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 999px;
    background: var(--ph-accent); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
}

.ph-player-volume {
    flex: none; display: flex; align-items: center; gap: 6px;
}
.ph-player-volume input[type="range"] {
    width: 70px; accent-color: var(--ph-accent); cursor: pointer;
}

@media (max-width: 640px) {
    .ph-player-volume input[type="range"] { display: none; }
    .ph-player-time { font-size: 11.5px; }
    .ph-player-bar { padding: 20px 8px 6px; }
}

/*
 * Khung phát hẹp (phim dọc trên màn rộng) cũng phải bỏ bớt như trên điện thoại
 * — nhưng ở đây cái hẹp là KHUNG PHÁT, không phải màn hình, nên phải hỏi
 * container chứ không phải media query.
 */
.ph-player { container-type: inline-size; }

@container (max-width: 520px) {
    .ph-player-volume input[type="range"] { display: none; }
    .ph-player-time { font-size: 11.5px; margin-left: 2px; }
    .ph-pbtn { width: 28px; height: 28px; }
    .ph-player-bar { padding: 24px 8px 6px; }
    /* Xem nổi là thứ ít ai cần trên một khung hẹp; nhường chỗ cho nút phụ đề. */
    .ph-pbtn[data-pip] { display: none; }
}

/*
 * Phim dọc trên màn rộng: khung phát chỉ còn ~290px, không đủ cho tám nút lẫn
 * dòng thời gian — thời gian bị nút âm lượng đè và nút toàn màn hình tràn ra
 * ngoài. Bỏ hai nút tua 10 giây: thanh tiến trình ngay bên trên vẫn tua được.
 */
@container (max-width: 380px) {
    .ph-pbtn[data-seek-back],
    .ph-pbtn[data-seek-forward] { display: none; }
}

.ph-player-upnext {
    position: absolute; inset: 0;
    background: rgba(8, 8, 11, .88);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.ph-player.is-ended .ph-player-upnext { display: flex; }
.ph-player-upnext-card { text-align: center; max-width: 320px; }
.ph-player-upnext-label {
    color: var(--ph-text-dim); font-size: 12.5px; text-transform: uppercase;
    letter-spacing: .04em; margin: 0 0 6px;
}
.ph-player-upnext-title { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.ph-player-upnext-actions { display: flex; gap: 10px; justify-content: center; }
.ph-player-upnext-count {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); font-size: 11px;
}

/* Nút hiện tốc độ phát — chữ chứ không phải icon, nên cần bề rộng tối thiểu
   để "0.75x" và "1x" không làm các nút bên cạnh nhảy vị trí khi đổi tốc độ. */
.ph-pbtn-speed {
    width: auto; min-width: 34px; padding-inline: 4px;
    font-size: 12.5px; font-weight: 700;
}

.ph-player-error {
    position: absolute; inset: 0;
    background: rgba(8, 8, 11, .92);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.ph-player.has-error .ph-player-error { display: flex; }
.ph-player-error-card { text-align: center; max-width: 320px; }
.ph-player-error-title { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.ph-player-error-text { color: var(--ph-text-dim); font-size: 13.5px; margin: 0 0 16px; }

/* ---- cột thông tin bên phải ---- */

.ph-watch-side {
    display: flex; flex-direction: column; gap: 22px;
    padding: 26px 24px 34px;
    border-left: 1px solid var(--ph-line);
    background: var(--ph-bg);
    overflow-y: auto;
}
.ph-watch-side .ph-crumbs { margin-bottom: -6px; }

.ph-watch-title { font-size: 20px; line-height: 1.4; margin: 0; }

.ph-watch-plot { display: flex; flex-direction: column; gap: 10px; }
.ph-watch-plot-head { margin: 0; font-size: 15px; font-weight: 600; }
.ph-watch-plot-text {
    margin: 0;
    color: var(--ph-text-faint); font-size: 13.5px; line-height: 1.6;
}
/*
 * Gập ba dòng — nhưng chỉ khi film.js đã gắn .is-clamped. Không có JS thì đoạn
 * văn hiện đầy đủ, vì nút "Xem thêm" lúc đó cũng không bấm được.
 */
.ph-watch-plot.is-clamped .ph-watch-plot-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ph-watch-plot-more {
    align-self: flex-start;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ph-text); font-size: 13.5px; font-weight: 600;
}
.ph-watch-plot-more:hover { color: var(--ph-accent); }

.ph-watch-stats {
    display: flex; align-items: center; gap: 26px;
    padding: 18px 0;
    border-block: 1px solid var(--ph-line);
}
.ph-watch-stat {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; padding: 0;
    color: var(--ph-text-faint); font-family: inherit; font-size: 13px;
}
.ph-watch-share { cursor: pointer; transition: color var(--ph-ease); }
.ph-watch-share:hover { color: var(--ph-text); }

.ph-watch-eps { display: flex; flex-direction: column; gap: 14px; }
.ph-watch-eps-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ph-watch-eps-title { font-size: 14.5px; margin: 0; }
.ph-watch-ranges { display: flex; flex-wrap: wrap; gap: 14px; }
.ph-watch-range {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ph-text-faint); font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.ph-watch-range.is-active { color: var(--ph-text); }
.ph-watch-eps-all {
    color: var(--ph-text-faint); font-size: 13px; white-space: nowrap;
}
.ph-watch-eps-all:hover { color: var(--ph-text); }

/* Lưới số tập trong cột hẹp: sáu cột cố định như bản mẫu. */
.ph-episodes-compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.ph-episodes-compact .ph-episode { padding: 9px 2px; font-size: 13px; border-radius: 6px; }

.ph-watch-nav { display: flex; gap: 8px; }

/* ------------------------------------------------------------- người / vai */

.ph-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 18px 14px;
}
.ph-person { text-align: center; }
.ph-person-photo {
    width: 74px; height: 74px; margin: 0 auto 8px;
    border-radius: 50%; overflow: hidden;
    background: var(--ph-bg-card);
}
.ph-person-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Người chưa có ảnh: hình người mặc định, cùng khung tròn. */
.ph-person-photo { display: grid; place-items: end center; }
.ph-person-placeholder { width: 78%; height: 78%; color: var(--ph-text-faint); }
.ph-person-name { font-size: 13px; font-weight: 600; }
.ph-person-role { font-size: 12px; color: var(--ph-text-faint); margin: 1px 0 0; }

/* --------------------------------------------------------- lưới thể loại */

.ph-genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.ph-genre-card {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 16px 18px; border-radius: var(--ph-radius);
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    color: var(--ph-text); font-weight: 600;
    transition: background var(--ph-ease), border-color var(--ph-ease);
}
.ph-genre-card:hover { background: var(--ph-bg-hover); border-color: var(--ph-accent); }
.ph-genre-card-count {
    flex: none; padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: var(--ph-text-dim);
    font-size: 12.5px; font-weight: 600;
}

/* ------------------------------------------------------- chip thể loại */
/*
 * Hàng chip mọi thể loại trên trang thể loại. Gập còn hai hàng; nút mũi tên ở
 * cuối mở hết (film.js chỉ hiện nút khi thật sự có hàng bị ẩn).
 */
.ph-genre-nav { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; }
.ph-genre-chips {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
    max-height: 78px; overflow: hidden;
    transition: max-height 260ms ease;
}
.ph-genre-nav.is-expanded .ph-genre-chips { max-height: 2000px; }
.ph-genre-chip {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border-radius: 999px; background: #2b2b2b; color: rgba(255, 255, 255, .85);
    font-size: 14px; white-space: nowrap;
    transition: background var(--ph-ease), color var(--ph-ease);
}
.ph-genre-chip:hover { background: var(--ph-bg-hover); color: #fff; }
.ph-genre-chip.is-active { background: var(--ph-accent); color: #fff; }
.ph-genre-more {
    flex: none; display: grid; place-items: center;
    width: 34px; height: 34px; margin-top: 44px; border-radius: 999px; border: 0; cursor: pointer;
    background: #2b2b2b; color: #fff;
    transition: background var(--ph-ease);
}
.ph-genre-more[hidden] { display: none; }
.ph-genre-more:hover { background: var(--ph-bg-hover); }
.ph-genre-more svg { transition: transform var(--ph-ease); }
.ph-genre-nav.is-expanded .ph-genre-more { margin-top: 0; align-self: flex-end; }
.ph-genre-nav.is-expanded .ph-genre-more svg { transform: rotate(180deg); }
@media (max-width: 768px) {
    .ph-genre-chips { gap: 8px; max-height: 72px; }
    .ph-genre-chip { height: 32px; padding: 0 12px; font-size: 13px; }
    .ph-genre-more { width: 32px; height: 32px; margin-top: 40px; }
}

/* --------------------------------------------------------------- phân trang */

.ph-pagination {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin-top: 32px;
}
.ph-page {
    min-width: 38px; padding: 8px 12px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    font-size: 14px; color: var(--ph-text-dim);
}
.ph-page:hover { background: var(--ph-bg-hover); color: var(--ph-text); }
.ph-page.is-current { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; }

/* --------------------------------------------------- blog, trang nội dung

   Blog và các trang CMS dùng chung chrome với phần phim. Site trước đây có một
   bộ layout + stylesheet riêng cho chúng (lp-*); bộ đó đã được gỡ, nên đây là
   nơi duy nhất định nghĩa hình thức của chúng. */

.ph-pagehead {
    padding: 34px 0 6px;
    border-bottom: 1px solid var(--ph-line);
    margin-bottom: 4px;
}

.ph-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 13px; color: var(--ph-text-faint);
    margin-bottom: 12px;
}
.ph-crumbs a { color: var(--ph-text-dim); }
.ph-crumbs a:hover { color: var(--ph-accent-hover); }
.ph-crumb-sep { color: var(--ph-line); }

.ph-pagehead-eyebrow {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ph-accent);
}
.ph-pagehead-title {
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -.025em;
    margin: 0 0 10px;
}
.ph-pagehead-lead {
    margin: 0 0 20px; max-width: 680px;
    color: var(--ph-text-dim); font-size: 15.5px;
}

.ph-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px 20px;
}

.ph-post {
    background: var(--ph-bg-card);
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--ph-ease), transform var(--ph-ease);
}
.ph-post:hover { border-color: var(--ph-text-faint); transform: translateY(-2px); }

.ph-post-cover {
    display: grid; place-items: center;
    aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--ph-bg-soft); color: var(--ph-text-faint);
}
.ph-post-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Bốn tông cho bài chưa có ảnh bìa, chọn theo slug. */
.ph-cover-0 { background: linear-gradient(135deg, #3b1d5e, #1d1140); }
.ph-cover-1 { background: linear-gradient(135deg, #123a52, #0d2233); }
.ph-cover-2 { background: linear-gradient(135deg, #14452f, #0c2a1e); }
.ph-cover-3 { background: linear-gradient(135deg, #5a3212, #33200c); }

.ph-post-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.ph-post-cat {
    margin: 0; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ph-accent);
}
.ph-post-title { margin: 0; font-size: 17px; line-height: 1.35; }
.ph-post-excerpt {
    margin: 0; color: var(--ph-text-dim); font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-post-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--ph-text-faint); display: flex; gap: 6px; }

.ph-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.ph-cat {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 15px 17px; border-radius: var(--ph-radius);
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
}
.ph-cat:hover { background: var(--ph-bg-hover); color: var(--ph-text); }
.ph-cat-name { font-weight: 600; font-size: 15px; }
.ph-cat-count { font-size: 12.5px; color: var(--ph-text-faint); }

/* Một bài viết: cột hẹp, vì dòng chữ dài quá 75 ký tự thì mắt khó bắt dòng. */
.ph-article { max-width: 760px; margin-inline: auto; padding: 26px 0 10px; }
.ph-article-meta {
    display: flex; gap: 7px; margin: 0 0 14px;
    color: var(--ph-text-faint); font-size: 13.5px;
}
.ph-article-figure { margin: 22px 0; }
.ph-article-figure img { width: 100%; height: auto; border-radius: var(--ph-radius-lg); }
.ph-article-body { margin-top: 20px; font-size: 16px; line-height: 1.75; }

.ph-prose-page { max-width: 760px; margin-inline: auto; font-size: 16px; line-height: 1.75; }

.ph-post-nav {
    max-width: 760px; margin: 34px auto 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.ph-post-nav-link {
    padding: 15px 17px; border-radius: var(--ph-radius);
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    display: grid; gap: 4px;
}
.ph-post-nav-link:hover { background: var(--ph-bg-hover); color: var(--ph-text); }
.ph-post-nav-next { text-align: right; }
.ph-post-nav-label { font-size: 12px; color: var(--ph-text-faint); }
.ph-post-nav-title { font-size: 14.5px; font-weight: 600; }

/* ---------------------------------------------------------------- footer */

/* Bản mẫu: nền trắng 5%, viền trên trắng 10%, lề ngang 4.267%. */
.ph-footer {
    margin-top: 64px;
    padding: 48px 0 28px;
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.ph-footer > .ph-container { padding-inline: var(--ph-gutter-footer); }

/*
 * Flex chứ không phải grid.
 *
 * `grid-template-columns: 2fr repeat(auto-fit, minmax(150px,1fr))` là một track
 * list KHÔNG hợp lệ — auto-fit không trộn được với track khác — nên trình duyệt
 * bỏ cả khai báo và footer đổ về đúng một cột.
 *
 * Flex-wrap còn đúng hơn với bài toán này: số cột liên kết thay đổi theo những
 * gì quản trị viên đã điền, và ở đây không cần biết trước con số đó.
 */
.ph-footer-top {
    display: flex; flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 32px;
}

.ph-footer-about { flex: 1 1 280px; max-width: 360px; }
/*
 * Cột liên kết rộng theo nội dung, không giãn: vài liên kết ngắn mà chiếm một
 * phần tư hàng thì để lại khoảng trống lớn ngay trong cột. Phần dư của hàng
 * thành khoảng cách đều giữa các cột (space-between) — chỉ trên màn rộng, vì
 * khi footer xuống dòng, space-between đẩy hai cột của hàng mới ra hai mép.
 */
.ph-footer-col { flex: 0 1 auto; min-width: 140px; }

@media (min-width: 1025px) {
    .ph-footer-top { justify-content: space-between; }
}

/* Màn vừa: giới thiệu chiếm hàng trên; thể loại và hai cột liên kết chung hàng dưới — nếu không, cột cuối rớt xuống một mình. */
@media (max-width: 1024px) {
    .ph-footer-about { flex-basis: 100%; max-width: none; }
}
.ph-footer-about .ph-brand { margin-bottom: 14px; }

.ph-footer-text {
    color: var(--ph-text-dim); font-size: 14px; line-height: 1.65;
    margin: 0 0 14px;
}

.ph-footer-contact {
    font-style: normal;
    display: grid; gap: 4px;
    color: var(--ph-text-faint); font-size: 13.5px;
    margin-bottom: 16px;
}
.ph-footer-contact a { color: var(--ph-text-dim); }
.ph-footer-contact a:hover { color: var(--ph-accent-hover); }

.ph-social { display: flex; gap: 8px; }
.ph-social a {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ph-bg-card); border: 1px solid var(--ph-line);
    color: var(--ph-text-dim);
    transition: background var(--ph-ease), color var(--ph-ease);
}
.ph-social a:hover { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; }

/* 20px/500, chữ thường — bản mẫu không in hoa tiêu đề cột. */
.ph-footer-title {
    font-size: 20px; font-weight: 500;
    color: var(--ph-text);
    margin: 0 0 16px;
}

/* Danh sách liên kết, không phải danh sách gạch đầu dòng. */
.ph-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ph-footer-col a { color: var(--ph-text-faint); font-size: 16px; }
.ph-footer-col a:hover { color: var(--ph-accent-hover); }

/*
 * Cột thể loại: tag tự xuống dòng, mỗi tag rộng đúng bằng chữ. footer.php chỉ
 * in vài tag đầu để cột cao xấp xỉ các cột liên kết; phần còn lại nằm trong
 * toast của nút "Xem thêm".
 */
.ph-footer-col-tags { flex: 2 1 300px; max-width: 460px; }
.ph-footer-col ul.ph-footer-tags { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.ph-footer-tags a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--ph-text-dim); font-size: 13px; line-height: 1.4; white-space: nowrap;
    transition: color var(--ph-ease), border-color var(--ph-ease), background var(--ph-ease);
}
.ph-footer-tags a:hover {
    color: #fff; border-color: var(--ph-accent);
    background: rgba(229, 48, 63, .16); /* --ph-accent ở độ mờ 16% */
}

/* Nút "Xem thêm +N": cùng dáng tag, chữ màu nhấn để đọc ra là một nút. */
.ph-footer-more-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border: 1px dashed rgba(229, 48, 63, .55); border-radius: 999px;
    background: none; cursor: pointer;
    color: var(--ph-accent-hover); font-family: inherit; font-size: 13px; line-height: 1.4; white-space: nowrap;
}
.ph-footer-more-btn:hover { border-style: solid; background: rgba(229, 48, 63, .12); }

/*
 * Toast chứa các thể loại còn lại. Neo vào đáy danh sách tag (ul là khối chứa)
 * và mọc lên trên, rộng bằng cả cột — nên nó phủ lên chính nút "Xem thêm": con
 * trỏ đang ở nút là đã ở trong toast, không phải băng qua khoảng trống nào.
 * Mở bằng hover, hoặc .is-open (film.js: chạm,
 * Enter/Space).
 */
.ph-footer-more-panel {
    position: absolute; left: 0; right: 0; bottom: -6px; z-index: 30;
    min-width: 260px; max-height: min(480px, 75vh); overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--ph-line); border-radius: 12px;
    background: var(--ph-bg-card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity var(--ph-ease), transform var(--ph-ease), visibility 0s linear .2s;
}
.ph-footer-more:hover .ph-footer-more-panel,
.ph-footer-more.is-open .ph-footer-more-panel {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--ph-ease), transform var(--ph-ease), visibility 0s;
}
.ph-footer-more-title {
    margin: 0 0 10px;
    color: var(--ph-text); font-size: 13.5px; font-weight: 600;
}

.ph-footer-bottom {
    padding-top: 22px;
    border-top: 1px solid var(--ph-line);
    color: var(--ph-text-faint); font-size: 13px;
}
.ph-footer-bottom p { margin: 0; }

/* ---------------------------------------------------------- lớp tiện dụng

   Chúng tồn tại vì CSP là `style-src 'self'`: không có 'unsafe-inline' nên mọi
   thuộc tính style viết thẳng vào thẻ đều bị trình duyệt bỏ qua. Một khoảng
   cách nhỏ cũng phải có tên lớp. */

.ph-mt-sm { margin-top: 10px; }
.ph-mt-md { margin-top: 14px; }
.ph-mt-lg { margin-top: 18px; }

.ph-person-head { grid-template-columns: 160px 1fr; }

.ph-person-photo-lg {
    width: 160px; height: 160px;
    border-radius: var(--ph-radius-lg);
}

.ph-search-block { width: 100%; max-width: 440px; margin-bottom: 24px; }

/* ------------------------------------------------------------------- rỗng */

.ph-empty {
    padding: 56px 20px; text-align: center; color: var(--ph-text-dim);
}
.ph-empty-title { font-size: 18px; color: var(--ph-text); margin-bottom: 6px; }

/* --------------------------------------------------------------- màn nhỏ

   Ba mốc lấy đúng của bản mẫu: xl 1280px, md 768px, và một mốc hẹp cho điện
   thoại nhỏ. Thang tiêu đề rail của họ là 28px ở xl, 24px ở md, và cỡ theo bề
   ngang màn hình bên dưới — bản mẫu khai báo nó ngay trên thẻ:
   `text-16/vw md:text-24px xl:text-28px`. */

@media (max-width: 1280px) {
    .ph-section-title { font-size: 24px; }
    .ph-detail-inner { grid-template-columns: 210px 1fr; gap: 24px; }
}

/*
 * Màn hẹp: hai cột xếp chồng. Khung phát nhận một chiều cao cố định thay vì
 * "hết màn hình" — trên điện thoại, một cột phát cao bằng màn hình đẩy toàn bộ
 * thông tin và danh sách tập xuống dưới tầm nhìn.
 */
@media (max-width: 1024px) {
    .ph-watch { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .ph-watch-stage { height: min(76vh, 620px); }
    .ph-watch-side {
        border-left: 0; border-top: 1px solid var(--ph-line);
        overflow: visible;
    }
}

@media (max-width: 768px) {
    :root {
        /* Poster co theo bề ngang màn hình, giữ nguyên tỉ lệ 3:4. */
        --ph-poster: 40vw;
        --ph-gap: 12px;
        --ph-header-h: 56px;
        --ph-floor-gap: 28px;
        --ph-title-gap: 14px;
        /* Lề mỏng lại trên điện thoại, nếu không nội dung chỉ còn một dải hẹp. */
        --ph-gutter: 16px;
        --ph-gutter-footer: 16px;
    }

    .ph-section-title { font-size: 4.3vw; }
    .ph-section-more { font-size: 13px; }

    /* Menu ngang nhường chỗ cho nút ba gạch; ô tìm kiếm co lại. */
    .ph-nav { display: none; }
    .ph-search { width: 150px; }
    .ph-header-inner { gap: 12px; padding-inline: 16px; }

    /* Cùng tỉ lệ logo/thanh header ~0,475 như bản mẫu, chỉ đổi theo
       --ph-header-h nhỏ hơn của màn hẹp (56px thay vì 80px). */
    .ph-brand-logo { height: 27px; }
    .ph-brand-mark { width: 27px; height: 27px; border-radius: 7px; }

    .ph-burger {
        /* Không phần tử nào trong .ph-header-inner giãn nở (đều flex: none),
           nên thiếu margin-left: auto thì cả hàng dồn về mép trái theo đúng
           bề rộng logo+ô tìm kiếm — nút menu trôi theo nội dung thay vì đứng
           yên ở mép phải như một icon menu di động phải làm. */
        margin-left: auto;
        display: grid; place-items: center;
        width: 38px; height: 38px; flex: none;
        background: none; border: 0; cursor: pointer; color: var(--ph-text);
    }
    .ph-burger span,
    .ph-burger span::before,
    .ph-burger span::after {
        content: ""; display: block;
        width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    }
    .ph-burger span { position: relative; }
    .ph-burger span::before { position: absolute; top: -6px; }
    .ph-burger span::after { position: absolute; top: 6px; }

    .ph-drawer {
        display: grid; gap: 2px;
        padding: 10px 16px 16px;
        border-top: 1px solid var(--ph-line);
        max-height: 66vh; overflow-y: auto;
    }
    .ph-drawer a { padding: 10px 8px; border-radius: 8px; color: var(--ph-text-dim); font-size: 15px; }
    .ph-drawer a:hover { background: var(--ph-bg-hover); color: var(--ph-text); }

    /* Hero: chữ chiếm hết bề ngang, dải chọn slide xuống dưới. */
    .ph-hero-slide { min-height: calc(78vw + var(--ph-header-h)); padding: calc(28px + var(--ph-header-h)) 0 92px; }
    .ph-hero-title { font-size: 7.2vw; }
    .ph-hero-desc { font-size: 14px; -webkit-line-clamp: 3; }
    .ph-hero-inner { max-width: none; }

    .ph-hero-picker {
        right: 16px; left: 16px; bottom: 18px;
        max-width: none;
    }
    .ph-hero-thumb { width: 58px; }
    .ph-hero-picker-next { display: none; }

    .ph-card-title { font-size: 14px; margin-top: 8px; }

    .ph-detail-inner { grid-template-columns: 1fr; }
    .ph-detail-poster { width: 40vw; }

    /* Nút mũi tên của rail vô nghĩa khi đã vuốt được bằng ngón tay. */
    .ph-rail-btn { display: none; }

    /* Cột thương hiệu chiếm cả hàng trên; các cột liên kết xếp đôi bên dưới. */
    .ph-footer-top { gap: 24px; }
    .ph-footer-about { flex: 1 1 100%; max-width: none; }
    .ph-footer-col { flex: 1 1 40%; }
    .ph-footer-col-tags { flex: 1 1 100%; max-width: none; }
    .ph-footer-title { font-size: 17px; margin-bottom: 12px; }
    .ph-footer-col a { font-size: 14px; }
    .ph-footer-tags a { font-size: 12.5px; padding: 4px 11px; }

    .ph-pagehead-title { font-size: 6vw; }
    .ph-post-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ph-search { display: none; }
    /* Màn hẹp: chỉ còn quả địa cầu, bảng vẫn mở được. */
    .ph-lang-label { display: none; }
    .ph-lang-menu { right: -40px; width: 200px; padding: 20px; gap: 18px; }
    .ph-fact { grid-template-columns: 82px 1fr; }
    .ph-hero-thumb { width: 50px; }
}

/* Người bật giảm chuyển động thì tắt hẳn phần trượt, không chỉ làm nhanh hơn. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .ph-rail-track { scroll-behavior: auto; }
    .ph-card-link:hover .ph-card-poster { transform: none; }
}

/*
 * Hàng phim nằm dưới màn hình: để trình duyệt hoãn việc dựng bố cục và vẽ cho
 * tới khi người xem cuộn tới.
 *
 * Trang chủ in 10 hàng, mỗi hàng 8–12 poster — tính bố cục cho tất cả ngay lần
 * vẽ đầu tiên là phần việc nặng nhất của luồng chính. Bỏ qua hàng đầu (:not(:first-of-type))
 * vì nó nằm ngay trong khung nhìn, hoãn nó chỉ làm chậm thêm.
 *
 * contain-intrinsic-size giữ sẵn chiều cao ước lượng để thanh cuộn không nhảy;
 * `auto` nghĩa là sau lần vẽ đầu trình duyệt nhớ kích thước thật.
 */
.ph-section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 460px;
}