/* ============================================================
   Phim của Đức — design system
   Tông streaming kiểu Netflix: nền trang chủ đen xám #141414,
   vùng đầu trang lấy màu môi trường từ POSTER hero đang chiếu
   (js/ambient.js trích màu ảnh, giảm sáng/bão hoà) tan dần mềm
   về #141414; dự phòng xám than --home-bg-top. Header trong nhẹ
   ở đầu trang, đen đặc khi cuộn. Không quầng navy/teal, không
   nền chuyển động, không grain.
   Chữ trắng, đỏ ruby dành cho hành động.
   Typography: Inter toàn app — gọn, đậm, sans-serif, đủ dấu tiếng Việt.
   ============================================================ */

:root {
  /* Màu theo vai trò: nền than, chữ trung tính, đỏ dành cho hành động */
  --bg: #0b0d11;
  --bg-raise: #171a20;
  --bg-elevate: #252931;
  --line: #414751;
  --line-soft: #252a32;
  --ink: #f5f6f8;
  --ink-dim: #c3c8d0;
  --ink-faint: #a4aab3;
  --accent: #c8102e;
  --accent-deep: #a20d26;
  --accent-soft: #f5f6f8;
  --accent-text: #ff7887;
  --danger: #ff727c;
  --focus: #e5e7eb;
  --control-line: #656d79;

  /* Nền chung trang chủ (chỉ body.page-home dùng): đầu trang xám than
     hơi lạnh, phần còn lại đen xám đồng nhất kiểu Netflix */
  --home-bg: #141414;
  --home-bg-top: #34373b;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  /* chiều cao topbar: desktop 92px (spec 88–96); mobile 64px (override ở media ≤900) */
  --topbar-h: 92px;

  /* Inter cho toàn bộ giao diện — sans-serif gọn, đậm */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Logo giữ nhận diện riêng, vẫn sans-serif (không serif) */
  --font-display: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-pop: 0 18px 40px -18px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Phần tử có thuộc tính hidden LUÔN ẩn — UA style (display:none) dễ bị
   author CSS ghi đè (.room-active{display:grid}, .tab .tab__count{display:
   inline-grid} từng khiến badge phòng/badge chat hiện sai trước khi tạo phòng).
   Rule đặt GẦN ĐẦU file để mọi rule sau phải đấu với !important, không ngược lại. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  scrollbar-color: #626973 var(--bg);
  scrollbar-width: thin;
}
input, textarea { caret-color: var(--ink); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* App shell chống double-tap-zoom (iOS 13+ & Android): manipulation vẫn cho
     phép pan-x/pan-y (vuốt dọc, carousel vuốt ngang qua .continue__row/.mfilter,
     hero swipe qua pointer events) VÀ pinch-zoom — KHÔNG khẳng định đã khóa
     pinch ở đây. Không dùng touch-action:none toàn trang để giữ nhập liệu,
     chọn/dán văn bản và điều khiển video hoạt động bình thường. */
  touch-action: manipulation;
}

/* ---------- Trang chủ: NỀN CHUNG LIỀN MẠCH kiểu Netflix ----------
   Một nền duy nhất cho cả trang (body.page-home = index.html), cuộn cùng
   nội dung:
   - Nền ĐÁY là --home-bg (#141414) phủ kín cả trang ít phim / đang tải.
   - Vùng đầu trang (sau header, quanh hero) do lớp #hero-ambient vẽ:
     màu trích từ POSTER hero đang chiếu, tan dần mềm về #141414 quanh
     hàng phim đầu tiên. Hai lớp con crossfade bằng opacity khi đổi phim.
   - isolation: isolate -> body thành stacking context để #hero-ambient
     (z-index:-1) nằm TRÊN nền body nhưng DƯỚI mọi nội dung, kể cả nội
     dung tĩnh (mfilter/msearch) trong vùng sáng.
   - Watch.html (không có .page-home) giữ nguyên nền --bg cũ. */
body.page-home {
  min-height: 100vh;
  min-height: 100dvh; /* chiều cao động: bàn phím/URL bar Android-Chrome (interactive-widget) */
  isolation: isolate;
  background-color: var(--home-bg);
}

/* ---------- Nền môi trường theo màu poster hero (js/ambient.js) ----------
   Lớp nền tuyệt đối ở ĐỈNH trang, cuộn theo nội dung như background cũ:
   - height trùng --ambient-end; gradient đặc từ đỉnh đến --ambient-solid
     rồi tan về trong suốt trên nền #141414 -> không ranh giới ngang.
   - inset theo containing block (KHÔNG 100vw) -> không tràn ngang;
     pointer-events:none -> không chặn click; không đổi layout gì cả.
   - Hai lớp con: --base giữ gradient xám than mặc định (--home-bg-top)
     để trang không flash #141414 khi chưa có màu; JS ghi gradient màu
     poster lên lớp còn lại rồi crossfade OPACITY 600ms (500–700ms) —
     không transition background-image. Lớp base giữ nguyên trong DOM:
     JS chỉ đổi background-image/opacity nội tuyến của 2 lớp con.
   - Header đen khi cuộn (.topbar::before + --topbar-solid) nằm ở z-1000,
     không phụ thuộc lớp này -> đổi poster không làm header trong lại. */
.hero-ambient {
  --ambient-solid: 300px;
  --ambient-end: 860px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ambient-end);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-ambient__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  will-change: opacity;
}
.hero-ambient__layer--base {
  background-image: linear-gradient(180deg,
    var(--home-bg-top) 0px,
    var(--home-bg-top) var(--ambient-solid),
    rgba(0, 0, 0, 0) var(--ambient-end));
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient__layer { transition: none; }
}

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

::selection { background: rgba(200, 16, 46, 0.35); }

.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

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

/* Hai container dialog (.sheet__panel "Xem chung"/"Bộ lọc", .cinfo__panel
   thông tin phim) có tabindex="-1" và được gọi panel.focus() khi mở
   (js/mobile-nav.js, js/card-info.js) — focus lên toàn khung làm quy tắc
   :focus-visible toàn cục vẽ outline 2px #e5e7eb quấn theo bo góc trên,
   thành vạch trắng sáng mỗi lần mở bảng. Tắt outline CHỈ trên đúng hai
   container này: focus quản lý trong dialog (panel.focus()), trả focus khi
   đóng và vòng focus bàn phím của nút/link/input bên trong giữ nguyên. */
.sheet__panel:focus-visible,
.cinfo__panel:focus-visible {
  outline: none;
}

/* ---------- Topbar ----------
   Nền đặc #101010, cao 92px desktop / 64px mobile (--topbar-h).
   Khi cuộn (.topbar--scrolled, do js/header.js thêm) -> thêm shadow nhẹ.
   Mobile ≤900px: không còn hamburger — điều hướng chính ẩn, các mục
   đi qua bottom-nav / hàng lọc nhanh / sheet "Bộ lọc". */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  pointer-events: auto;
  background: #101010;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.35s var(--ease-out);
  /* safe-area ĐỊNH: env() = 0 trên desktop/portrait nên không đổi gì; có giá trị
     khi PWA standalone (black-translucent) — kể cả iPhone NGANG (>768px) */
  padding-top: env(safe-area-inset-top);
}
.topbar--scrolled {
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.9);
}

/* ---------- Topbar trang chủ: trong nhẹ ở đầu trang, đen đặc khi cuộn ----------
   Chỉ body.page-home (index.html). Phía sau header là NỀN CHUNG của trang
   (gradient #34373b → #141414 trên body.page-home) — header chỉ thêm một
   lớp gradient đen mờ, nhạt dần về trong suốt ở mép dưới để logo/menu nổi
   hơn, không tạo hình chữ nhật màu đặc, không đường cắt ngang.
   Khi cuộn, lớp nền đen #000000 (::before) hiện dần theo biến --topbar-solid
   mà js/header.js đặt (= clamp(scrollY/120, 0, 1), tối đa 1 lần/frame trong
   rAF). Sau ~120px: đen đặc; cuộn ngược thì nhạt dần theo đúng vị trí.
   CHỈ đổi opacity của LỚP NỀN ::before (pointer-events:none, z-index:-1
   trong stacking context của .topbar -> trên nền element nhưng dưới toàn
   bộ nội dung) — KHÔNG đặt opacity lên .topbar nên logo/chữ/icon luôn nét.
   Không transition opacity (tránh bị khởi động lại khi cuộn liên tục);
   sticky và chiều cao giữ nguyên. watch.html không có .page-home nên vẫn
   dùng .topbar nền đặc #101010 như cũ. */
body.page-home .topbar {
  border-bottom: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.18) 55%,
    rgba(0, 0, 0, 0) 100%);
}
body.page-home .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #000000;
  opacity: var(--topbar-solid, 0);
}

/* ---------- Trang chủ DESKTOP (≥901px): hero tràn lên sau header ----------
   Hero giữ margin-top âm đúng --topbar-h để NỀN CHUNG của trang chảy lên
   nằm sau header; padding-top cộng lại đúng lượng đó + khoảng thở nhỏ 16px
   (mục tiêu 12–20px) -> khối poster + thông tin nằm GẦN header như Netflix.
   padding-bottom thu còn 40px: đủ chứa chấm carousel (treo 28px dưới poster,
   overflow:clip của hero cắt ở padding-box nên cần ≥33px tính cả ring focus
   2px + offset 3px) — không cụt chấm, không cần margin âm.
   Catalog trang chủ dựa sát hero: padding-top 4px ghi đè clamp(44px,6vw,72px)
   của .catalog (padding-bottom 90px giữ nguyên). Tổng khoảng poster hero ->
   tiêu đề "Mới cập nhật" = 40 + 4 = 44px (mục tiêu 28–44px), chấm carousel
   cách tiêu đề ~16px nên không chồng lấn. Cùng nền trong suốt trên NỀN CHUNG
   -> liền mạch, không đường phân cách. Tên/mô tả dài không ảnh hưởng: cột
   trái luôn thấp hơn poster (510px) nhờ line-clamp + min-height.
   Nền header đã xử lý ở rule base phía trên (gradient trong nhẹ + lớp đen
   cuộn ::before) nên desktop không cần override nền riêng nữa.
   main#main display:flow-root chặn margin-collapse giữa main và .hero để
   #main.offsetTop giữ bằng chiều cao header (app.js scrollTo phân trang
   dựa vào giá trị này). Mobile ≤900 và watch.html không nhận các rule này. */
@media (min-width: 901px) {
  body.page-home .topbar--scrolled { box-shadow: none; }
  body.page-home main#main { display: flow-root; }
  body.page-home .hero {
    margin-top: calc(-1 * var(--topbar-h));
    padding-top: calc(var(--topbar-h) + 16px);
    padding-bottom: 40px;
  }
  body.page-home .catalog { padding-top: 4px; }
}
.topbar__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--topbar-h);
  padding-block: 8px;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* nút icon kính lúp — trần, không viền.
   Kính lúp trắng 26px, vùng bấm 44px (spec ≥44px, icon 24–28px). */
.search-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s;
}
.search-toggle:hover { color: #c9c9c9; }
.search-toggle svg { width: 26px; height: 26px; }
.search-toggle__icon--close { display: none; }
.topbar.search-open .search-toggle__icon--open { display: none; }
.topbar.search-open .search-toggle__icon--close { display: block; }

/* link đang active theo ?filter= — pill nền #333 (style ở khối .topnav bên dưới) */

/* ---------- Ô tìm kiếm dạng viên thuốc NGAY TRONG header ----------
   Đóng: chỉ còn kính lúp 44px (icon trắng 26px).
   Mở: pill neo mép phải (trước nút kính lúp 44px + gap 10px -> right: 54px),
   dãn sang trái tối đa --search-w (js/header.js đo không gian thực giữa
   mép phải menu và kính lúp, giới hạn 140–560px; đủ chỗ thì 420–560px).
   Chỉ animate width + opacity, pill absolute giữa hàng -> header KHÔNG đổi
   chiều cao, hero không nhảy; chữ/icon fade-in trễ 100ms để không bị kéo
   theo pill dãn; đóng chạy ngược nhanh hơn (220ms). */
.topbar__search {
  position: absolute;
  top: 50%;
  right: 54px;
  transform: translateY(-50%);
  z-index: 6;
  width: 64px;
  height: 58px;
  max-width: none;
  padding: 0 20px 0 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #171717;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  opacity: 0;
  visibility: hidden; /* ẩn cả khỏi Tab khi đóng */
  pointer-events: none;
  transition:
    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.16s ease,
    visibility 0s linear 0.22s;
}
.topbar.search-open .topbar__search {
  width: var(--search-w, 520px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.22s ease 0.09s,
    visibility 0s;
}
.topbar__search:focus-within { border-color: #5a5a5a; }
/* chữ/icon hiện nhẹ SAU khi bắt đầu mở; đóng thì ẩn ngay, không bị mép pill cắt */
.topbar__search svg,
.topbar__search input { opacity: 0; transition: opacity 0.18s ease; }
.topbar.search-open .topbar__search svg,
.topbar.search-open .topbar__search input { opacity: 1; transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .topbar__search,
  .topbar__search svg,
  .topbar__search input,
  .topbar__join,
  .nav-more__menu,
  .nav-more__btn svg {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* marquee đã bỏ khỏi markup — giữ màu line cũ nếu tái sử dụng */
.marquee {
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 26px, var(--line-soft) 26px 30px),
    linear-gradient(90deg, transparent, rgba(200, 16, 46, 0.4), transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { width: 24px; height: 24px; color: var(--accent-text); }
img.brand__mark { object-fit: cover; border-radius: 6px; flex: none; }
.brand__mark--footer { width: 22px; height: 22px; border-radius: 5px; }
.footer__brand-head { display: inline-flex; align-items: center; gap: 9px; }
/* wordmark gốc (footer dùng) — header ghi đè bằng .brand .brand__word bên dưới */
.brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
/* Wordmark header kiểu Netflix: chữ thật, condensed cao hẹp, đỏ trên đen.
   Anton có subset vietnamese (Đ, Ứ, Ủ…) — kiểm chứng unicode-range U+0110, U+1EA0-1EF9. */
.brand .brand__word {
  display: block;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 400; /* Anton chỉ có 1 weight, nét sẵn dày tương đương 800 */
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.3; /* chừa khoảng trên cho dấu tiếng Việt, không cụt dấu */
  letter-spacing: 0.3px;
  color: #e50914;
  text-transform: uppercase;
  white-space: nowrap; /* một hàng, không rớt dòng */
  transition: color 0.15s ease;
}
.brand .brand__word em { color: inherit; }
.brand:hover .brand__word { color: #ff1f2d; } /* đỏ sáng hơn nhẹ, không phóng to */
.brand:focus-visible {
  outline: 2px solid #e50914;
  outline-offset: 4px;
  border-radius: 2px;
}
.brand__word em, .hero__title em, .catalog__title em {
  font-style: normal;
  color: var(--accent-text);
}

/* nội dung form tìm kiếm — lớp pill/viền/nền do .topbar__search phụ trách */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search svg { width: 20px; height: 20px; color: #9a9a9a; flex: none; }
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.search input::placeholder { color: #8a8a8a; }

.topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* Menu kiểu streaming: pill — active nền xám than #333, chữ trắng đậm.
   Chữ menu 17px (spec 16–18px). */
.topnav > a {
  color: #cfcfcf;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.topnav > a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.topnav > a.is-active {
  background: #333;
  color: #fff;
  font-weight: 700;
}
.topnav > a.is-active:hover { background: #3a3a3a; color: #fff; }
.topnav__divider { width: 1px; height: 22px; background: var(--line); }

/* ---------- Menu "Thêm": dropdown gom mục phụ ----------
   Nút giống hệt link menu; mục phụ (Anime, TV Shows) nằm trong menu thả xuống.
   Mobile ≤900px: bỏ nút, xẹp menu thành link thường trong panel (xem media dưới). */
.nav-more { position: relative; }
.nav-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #cfcfcf;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.nav-more__btn svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease-out); }
.nav-more.is-open .nav-more__btn svg { transform: rotate(180deg); }
.nav-more__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-more.is-active .nav-more__btn { background: #333; color: #fff; font-weight: 700; }
.nav-more__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  padding: 8px;
  display: grid;
  gap: 2px;
  background: #171717;
  border: 1px solid #333;
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s linear 0.22s;
}
.nav-more.is-open .nav-more__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s;
}
.nav-more__menu a {
  color: #ddd;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 9px;
  white-space: nowrap;
  transition: color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.nav-more__menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-more__menu a.is-active { background: #333; color: #fff; font-weight: 700; }

.join-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.join-wrap input {
  width: 118px;
  padding: 9px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--accent-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}
.join-wrap input::placeholder { letter-spacing: 0.08em; color: var(--ink-faint); }
.join-wrap input:focus { border-color: var(--accent-deep); }
/* Khi tìm kiếm mở (desktop): mã phòng nhường chỗ cho pill — mờ đi, khoá tương tác.
   Pill absolute đè lên vùng đã ẩn nên KHÔNG đè lên nút nào còn nhìn thấy. */
.topbar__join {
  transition: opacity 0.2s ease 0.06s, transform 0.2s var(--ease-out) 0.06s;
}
.topbar.search-open .topbar__join {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: var(--accent);
  border-radius: 6px;
  color: #ffffff;
}
.btn--primary:hover { background: var(--accent-deep); }
.btn--primary:active { background: #870b20; }
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--outline:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.btn--ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 9px 15px;
  font-size: 0.85rem;
}
.btn--ghost:hover { color: var(--accent-soft); border-color: var(--accent-deep); }
.btn--sm { padding: 9px 15px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.icon-btn:hover { color: var(--accent-soft); border-color: var(--accent-deep); }
.icon-btn svg { width: 15px; height: 15px; }

.kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Hero ----------
   KHÔNG có nền riêng: hero trong suốt để lộ NỀN CHUNG của trang
   (body.page-home: #34373b → #141414). Trước đây hero có stack gradient
   navy-teal + quầng glow động (::before, 42s) + grain noise (::after) —
   đã bỏ hết theo hướng nền đen–xám phẳng, không quầng màu, không texture.
   overflow: clip + isolation: isolate giữ bố cục ổn định và phục vụ biến
   thể hero-card mobile (bo góc + ảnh phủ cần được cắt trong thẻ). */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
  background: transparent;
}
/* nội dung hero — z-index 2 trên nền trong suốt của hero
   Bố cục Netflix-style: trái ~55% thông tin phim, phải ~40% poster lật 3D,
   gap rộng để hai vùng không bao giờ chồng lấn. */
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(280px, 40fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
}

/* ---------- Hero info (bên trái) — đồng bộ với poster ----------
   Toàn bộ khối fade nhẹ khi đổi phim (chỉ opacity, KHÔNG quay 3D theo poster).
   is-fading: fade-out khi bắt đầu lật; JS gỡ class ngay khi mặt poster mới
   xuất hiện -> fade-in 200ms với nội dung + liên kết đã đổi cùng lúc. */
.hero__info {
  min-width: 0;
  transition: opacity 200ms var(--ease-out);
}
.hero__info.is-fading { opacity: 0; pointer-events: none; }

/* A. Tên phim: trắng kem, đậm, 40–48px desktop / 26–30px mobile,
   xuống dòng tự nhiên, không cắt tên. min-height 2 dòng để hero không nhảy. */
.hero__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 3.4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  min-height: 2.3em;
}
/* B. Dòng thông tin: năm · thời lượng · trạng thái/tập + nhãn chất lượng.
   Trường thiếu bị bỏ kèm dấu phân cách (JS chỉ render trường có thật). */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  min-height: 1.4em;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.hero__meta-item { white-space: nowrap; }
.hero__meta-dot { opacity: 0.65; }
/* Nhãn chất lượng: trắng bạc, viền trung tính */
.hero__quality {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid var(--control-line);
  color: var(--ink);
  white-space: nowrap;
}
/* C. Nhãn ngôn ngữ/thể loại: nền than, chữ xám sáng, cho phép xuống hàng */
.hero__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
}
.hero__tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(23, 26, 32, 0.72);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
/* D. Tóm tắt: mô tả của CHÍNH phim đang chọn, ~3 dòng (4 dòng mobile), thiếu chỗ
   được dự trù bằng min-height — hero và section dưới không nhảy khi đổi phim. */
.hero__desc {
  margin: 0 0 26px;
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em; /* 3 * 1.6em */
}
/* E. Hai nút hành động */
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--light {
  background: #fff;
  color: #101010;
}
.btn--light:hover {
  background: #ececec;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(255, 255, 255, 0.28);
}
.btn--dark {
  background: #2c2c2c;
  color: #fff;
}
.btn--dark:hover {
  background: #3a3a3a;
  transform: translateY(-2px);
}

/* Vùng poster: figure làm khung định vị; poster lật + 2 poster phụ làm lớp sâu.
   Không nghiêng figure — thẻ lật ở trạng thái nghỉ gần chính diện người xem. */
.hero__poster {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(340px, 100%);
  aspect-ratio: 2 / 3;
}
/* Poster phụ (chiều sâu nhẹ): nằm sau carousel, không tham gia lật,
   không nhận click — JS chỉ đổi ảnh sau khi lượt lật kết thúc. */
.hero-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-elevate);
  pointer-events: none;
}
.hero-depth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--bg-raise);
}
.hero-depth--1 {
  transform: translateX(-7%) scale(0.95);
  opacity: 0.5;
  filter: brightness(0.62) saturate(0.9);
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.6);
}
.hero-depth--2 {
  transform: translateX(-13%) scale(0.9);
  opacity: 0.3;
  filter: brightness(0.5) saturate(0.85);
}

/* ---------- Hero intro — chạy 1 lần khi hero xuất hiện ----------
   Chỉ animate transform + opacity (60fps).
   <html> nhận class .has-hero-anim từ JS (bỏ qua khi prefers-reduced-motion);
   js/app.js thêm .hero--play sau khi hero vào viewport VÀ font Inter sẵn sàng,
   rồi .hero--done khi kết thúc để hover poster phản hồi tức thì. */
.has-hero-anim .hero [data-hero] { opacity: 0; }

.has-hero-anim .hero.hero--play [data-hero] {
  animation: pv-rise 600ms var(--ease-out) both;
  animation-delay: var(--pv-delay, 0ms);
}
.has-hero-anim .hero.hero--play:not(.hero--done) .hero__poster {
  will-change: translate, scale, opacity;
}
.has-hero-anim .hero.hero--play .hero__poster {
  animation-name: pv-poster;
  animation-duration: 720ms;
  --pv-delay: 140ms;
}

@keyframes pv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Poster dùng translate/scale riêng lẻ để không đụng transform khác */
@keyframes pv-poster {
  from { opacity: 0; translate: 28px 0; scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Kết thúc intro: gỡ animation/fill-mode */
.has-hero-anim .hero.hero--done [data-hero] {
  opacity: 1;
  animation: none;
}

/* Poster hover: nhấc 4px + scale tối đa 1.015 (translate/scale/opacity). */
@media (hover: hover) {
  .has-hero-anim .hero.hero--done .hero__poster {
    transition: translate 0.35s var(--ease-out), scale 0.35s var(--ease-out);
  }
  .has-hero-anim .hero.hero--done .hero__poster:hover {
    translate: 0 -4px;
    scale: 1.015;
  }
}

/* Reduced motion: hiện nội dung ngay, tắt mọi chuyển động */
@media (prefers-reduced-motion: reduce) {
  .has-hero-anim .hero [data-hero] {
    opacity: 1 !important;
    animation: none !important;
  }
  .has-hero-anim .hero .hero__poster {
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
}

/* ---------- Hero carousel — thẻ lật 3D quanh trục Y ----------
   Một thẻ hai mặt (front/back, xoay 180°) trên sân khấu perspective.
   JS xoay .hero-flip ±180deg khi đổi phim; xong lượt lật reset TĨNH về 0°
   và đổi mặt cho lượt kế -> trạng thái nghỉ luôn sạch, không nháy ảnh.
   backface-visibility: hidden nên chữ/ảnh không bao giờ hiện ngược,
   hai mặt không xuyên qua nhau. Các nút trước/sau nằm ngoài .hero-flip
   (lớp điều khiển riêng) nên không quay theo mặt poster. */
.hero-carousel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  /* trong suốt: nền chung của trang lộ xuyên qua (poster phụ nằm dưới đảm bảo chiều sâu) */
  background: transparent;
  border-radius: var(--radius-m);
  width: 100%;
  aspect-ratio: 2 / 3;
  outline: none;
  touch-action: pan-y;
}
.hero-carousel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-m);
}

/* sân khấu: cấp phối cảnh cho thẻ lật (giải pháp CSS thuần, không thư viện 3D) */
.hero-carousel__deck {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1200px;
  isolation: isolate;
  background: transparent;
}

/* thẻ lật hai mặt — một lượt lật ~680ms, tăng/giảm tốc êm (ease-in-out), không nảy */
.hero-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 680ms cubic-bezier(0.45, 0.05, 0.3, 0.95);
  will-change: transform;
}
.hero-flip.no-transition { transition: none !important; }

.hero-flip__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--bg-elevate);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(245, 246, 248, 0.14), var(--shadow-pop);
  -webkit-tap-highlight-color: transparent;
}
.hero-flip__face--back { transform: rotateY(180deg); }
.hero-flip__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* nền tối khi ảnh đang tải — không nháy trắng trong stage */
  background: var(--bg-raise);
  transition: opacity 200ms var(--ease-out);
}
@media (hover: hover) {
  /* zoom nhẹ chỉ ở trạng thái nghỉ; đang lật thì tắt (is-flipping do JS gán) */
  .hero-flip:not(.is-flipping) .hero-flip__face--front:hover img { scale: 1.03; }
}
/* reduced-motion: JS thay lật bằng crossfade — class is-crossfade mờ ảnh trước khi đổi src */
.hero-flip__face.is-crossfade img { opacity: 0; }

/* skeleton khi tải danh sách */
.hero-carousel__loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* chỉ là shimmer trang trí — không chặn click */
  border-radius: var(--radius-m);
  background:
    linear-gradient(100deg, var(--bg-raise) 40%, var(--bg-elevate) 50%, var(--bg-raise) 60%) var(--bg-raise);
  background-size: 220% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* nút mũi tên */
.hero-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  translate: 0 -50%;
  transition: opacity 0.25s var(--ease-out), background 0.2s linear, color 0.2s linear, border-color 0.2s linear;
}
.hero-carousel__nav svg { width: 16px; height: 16px; }
.hero-carousel__nav--prev { left: -15px; }
.hero-carousel__nav--next { right: -15px; }
.hero-carousel:hover .hero-carousel__nav,
.hero-carousel:focus-within .hero-carousel__nav { opacity: 1; }
.hero-carousel__nav:hover {
  background: var(--accent);
  border-color: var(--accent-text);
  color: #ffffff;
}
.hero-carousel__nav[hidden],
.hero-carousel__dots[hidden] { display: none; }
@media (hover: none) {
  .hero-carousel__nav {
    opacity: 1;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
  }
}

/* indicator chấm — đặt dưới poster, không che ảnh hay CTA */
.hero-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.hero-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), scale 0.25s var(--ease-out);
}
.hero-carousel__dot.is-active {
  background: var(--accent);
  scale: 1.3;
}
.hero-carousel__dot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* chỉ 1 phim: ẩn điều khiển (deck chỉ còn thẻ chính) */
.hero-carousel.is-single .hero-carousel__nav,
.hero-carousel.is-single .hero-carousel__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__deck { perspective: none !important; }
  /* JS đã đổi sang crossfade khi reduce-motion — chốt thêm ở CSS để tuyệt đối không xoay */
  .hero-flip { transition: none !important; }
  .hero-flip__face img,
  .hero-carousel__nav,
  .hero-carousel__dot {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Catalog ---------- */
main#main { overflow-x: clip; }
/* Trong suốt hoàn toàn: hàng phim nằm trên NỀN CHUNG của trang (đen xám
   #141414 đồng nhất). ::before gradient xanh cũ đã bỏ — nó từng vẽ một dải
   nền riêng (width:100vw, dễ tràn ngang khi có scrollbar) và tạo đường nối
   màu với hero/footer. */
.catalog {
  position: relative;
  isolation: isolate;
  padding-block: clamp(44px, 6vw, 72px) 90px;
}
.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.catalog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.catalog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Desktop (≥769px): ẩn cụm pill loại phim (Mới nhất/Phim lẻ/Phim bộ/Anime/
   TV Shows) bên phải tiêu đề danh mục — điều hướng đã có trên header. Giữ
   nguyên #type-chips trong DOM: mobile (≤768px) dời nó vào sheet "Bộ lọc"
   (js/mobile-nav.js) và app.js vẫn gắn listener + lọc theo URL ?filter=. */
@media (min-width: 769px) {
  .catalog__filters #type-chips { display: none; }
}
.chip {
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.22s var(--ease-out);
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip.is-active {
  background: #343a43;
  border-color: #656d79;
  color: var(--ink);
  font-weight: 700;
}

/* Dropdown tùy biến (js/dropdown.js) cho #genre-select / #year-select.
   Nút: nền #202124, chữ trắng kem, cao 44px, bo 10px; popup: nền #222,
   bo 12px, cuộn trong tối đa 280px, thanh cuộn mảnh xám tối. */
.dd { position: relative; }
.dd > select { display: none !important; } /* select gốc chỉ còn để đồng bộ logic */

.dd__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-radius: 10px;
  background-color: #202124;
  color: #f3efe6;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.dd--genre .dd__btn { min-width: 148px; }
.dd--year .dd__btn { min-width: 108px; }
.dd__btn:hover { background-color: #2a2b2f; }
.dd__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dd__btn[aria-expanded="true"] { background-color: #26272b; }
.dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chev {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 180ms var(--ease-out);
}
.dd.is-open .dd__chev { transform: rotate(180deg); }

.dd__pop {
  position: fixed;
  z-index: 1350; /* trên sheet (1300), dưới toast (1400) */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #222222;
  color: var(--ink);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 180ms;
  scrollbar-width: thin;
  scrollbar-color: #4a4d52 transparent;
}
.dd__pop::-webkit-scrollbar { width: 6px; }
.dd__pop::-webkit-scrollbar-thumb { background: #4a4d52; border-radius: 999px; }
.dd__pop::-webkit-scrollbar-track { background: transparent; }
.dd.is-open .dd__pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.dd--up .dd__pop { transform: translateY(5px); }
.dd--up.is-open .dd__pop { transform: none; }
.dd--genre .dd__pop { min-width: 200px; max-width: 240px; }
.dd--year .dd__pop { min-width: 140px; max-width: 160px; }

.dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}
.dd__opt-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__opt:hover,
.dd__opt.is-active { background: #353535; color: var(--ink); }
.dd__tick {
  display: none;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}
.dd__opt.is-selected { color: var(--accent-text); font-weight: 700; }
.dd__opt.is-selected .dd__tick { display: block; }

/* Trong sheet mobile: nút full-width như select cũ */
.sheet__slot--filters .dd__btn {
  width: 100%;
  min-height: 48px;
}
@media (max-width: 768px) {
  .dd__opt { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd__btn,
  .dd__chev,
  .dd__pop {
    transition: none !important;
  }
}

.search-banner {
  margin-bottom: 22px;
  padding: 12px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-raise);
  color: var(--ink-dim);
  font-size: 0.92rem;
}

/* ---------- Tiếp tục theo dõi: hàng cuộn ngang, tái dùng thẻ .card ----------
   Section ĐẦU TIÊN của .catalog (DOM trùng thứ tự hiển thị), ngay dưới hero.
   margin-bottom = khoảng cách tới tiêu đề "Suất chiếu hôm nay / Mới cập nhật"
   (28–36px). Khi ẩn (hidden — chưa có lịch sử) display:none gỡ cả margin
   nên tiêu đề tự dồn lên, không còn vùng trống. */
.continue {
  --continue-card-w: clamp(158px, 44vw, 182px);
  margin-bottom: 32px;
}
.continue__title { margin: 0 0 18px; }
.continue__viewport { position: relative; }
.continue__row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.continue__row::-webkit-scrollbar { display: none; }
.continue__row .card { flex: 0 0 auto; width: var(--continue-card-w); }
/* Nút điều hướng hàng phim — 3 trạng thái độc lập từng bên:
   A) hết chiều cuộn  -> [hidden] display:none (mất cả nền lẫn icon, khỏi Tab);
   B) còn cuộn, chuột chưa gần mép -> trong suốt + pointer-events:none;
   C) còn cuộn + chuột gần mép (is-shown / :focus-visible) -> hiện dải gradient + icon.
   Chỉ icon scale, vùng bấm và độ rộng dải giữ nguyên; vào chậm ~240ms, ra nhanh ~160ms. */
.continue__nav {
  position: absolute;
  top: 0;
  width: 52px;
  height: calc(var(--continue-card-w) * 1.5);
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: linear-gradient(90deg, rgba(4, 6, 10, 0.85), rgba(4, 6, 10, 0));
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.continue__nav[hidden] { display: none; }
.continue__nav--prev { left: 0; }
.continue__nav--next {
  right: 0;
  background: linear-gradient(270deg, rgba(4, 6, 10, 0.85), rgba(4, 6, 10, 0));
}
.continue__nav.is-shown,
.continue__nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease;
}
.continue__nav:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -3px; }
.continue__nav svg {
  width: 34px;
  height: 34px;
  transform-origin: center;
  transform: scale(0.65);
  opacity: 0;
  transition:
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms ease;
}
.continue__nav.is-shown svg,
.continue__nav:focus-visible svg {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .continue__nav,
  .continue__nav.is-shown,
  .continue__nav:focus-visible {
    transition: opacity 120ms ease;
  }
  .continue__nav svg,
  .continue__nav.is-shown svg,
  .continue__nav:focus-visible svg {
    transform: none;
    transition: opacity 120ms ease;
  }
}

/* ---------- Movie grid & cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 22px 18px;
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.card__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--bg-raise);
  aspect-ratio: 2 / 3;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.card:hover .card__frame img { transform: scale(1.045); }
.card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 13, 17, 0.75), transparent 42%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.card:hover .card__frame::after,
.card:focus-visible .card__frame::after { opacity: 1; }

.card__flags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.flag {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(11, 13, 17, 0.85);
  color: var(--accent-soft);
  backdrop-filter: blur(4px);
}
.flag--quality { background: #e5e7eb; color: #11141a; }

.card__title {
  margin: 12px 0 3px;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.card__meta .dot { opacity: 0.6; }

/* Thanh tiến độ "Xem tiếp" — nhỏ, nằm đáy thẻ phim ở trang chủ */
.card__progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 246, 248, 0.28);
  overflow: hidden;
  z-index: 2;
}
.card__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* Skeleton */
.skeleton {
  border-radius: var(--radius-m);
  background:
    linear-gradient(100deg, var(--bg-raise) 40%, var(--bg-elevate) 50%, var(--bg-raise) 60%) var(--bg-raise);
  background-size: 220% 100%;
  animation: shimmer 1.5s infinite linear;
  aspect-ratio: 2 / 3;
}
.skeleton--text {
  aspect-ratio: auto;
  height: 13px;
  margin-top: 12px;
  width: 82%;
  border-radius: 4px;
}
.skeleton--text.short { width: 55%; margin-top: 8px; }
@keyframes shimmer {
  to { background-position-x: -120%; }
}

/* ---------- Empty / pager ---------- */
.empty {
  padding: 70px 20px;
  text-align: center;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.pager button {
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.pager button:hover:not([disabled]) { color: var(--ink); border-color: var(--ink-faint); }
.pager button.is-active {
  background: var(--bg-elevate);
  border-color: var(--accent-deep);
  color: var(--accent-soft);
}
.pager button[disabled] { opacity: 0.35; cursor: default; }
@media (max-width: 768px) {
  /* Mobile: hit area chuẩn 44×44 — desktop giữ 40px cho mật độ hiển thị */
  .pager button { min-width: 44px; height: 44px; }
}

/* ---------- Footer ----------
   Tối giản hai vùng: trái = thương hiệu + tagline, phải = ghi chú dự án.
   Nền trong suốt liền với NỀN CHUNG #141414 của trang; hairline mảnh
   làm đường phân cách, khoảng thở trên/dưới cân đối. */
.footer { border-top: 1px solid rgba(255, 255, 255, 0.07); background: transparent; }
.footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  justify-content: space-between;
  align-items: flex-end; /* ghi chú phải thẳng hàng đáy với tagline — cân đối */
  padding-block: 34px;
  /* safe-area đáy: env()=0 trên desktop — chỉ có giá trị trên máy có home indicator */
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}
.footer__brand { min-width: 0; }
.footer__tagline {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.brand__word--footer { font-size: 1.15rem; }
.footer__note {
  flex: none;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-faint);
  white-space: nowrap; /* cụm ngắn — luôn trọn một hàng, không rời dòng xấu */
}

/* Mobile/tablet: xếp dọc, căn trái, khoảng cách gọn; body.page-home.bn-ready
   đã có padding-bottom 66px + safe-area nên footer không bị bottom-nav che. */
@media (max-width: 768px) {
  .footer__in {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: 26px;
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }
  .footer__tagline { max-width: 34ch; }
}

/* ---------- Dialog ---------- */
.room-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-raise);
  color: var(--ink);
  padding: 0;
  max-width: 430px;
  width: calc(100% - 40px);
  box-shadow: var(--shadow-pop);
}
.room-dialog::backdrop {
  background: rgba(10, 7, 4, 0.7);
  backdrop-filter: blur(4px);
}
.room-dialog__body { position: relative; padding: 30px 28px 26px; margin: 0; }
.room-dialog__close { position: absolute; top: 16px; right: 16px; }
.room-dialog__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.field { display: grid; gap: 8px; font-size: 0.86rem; color: var(--ink-dim); }
.field input {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}
.field input:focus { border-color: var(--accent-deep); }
.room-dialog__hint { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-faint); }
.room-dialog__body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); } /* safe-area đáy, desktop = 26px */
.room-dialog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  max-height: 240px;
  overflow-y: auto;
}
.room-dialog__option {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 11px 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s var(--ease-out);
}
.room-dialog__option:hover { border-color: var(--accent-deep); color: var(--accent-soft); }

/* ============================================================
   WATCH PAGE — trải nghiệm streaming điện ảnh
   Nền tối, video là trung tâm, cột trái ~70% / phải ~30%,
   backdrop phim mờ sau nội dung, mọi chuyển động 180–240ms.
   ============================================================ */
.watch-shell {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
  padding-top: 18px;
  padding-bottom: 90px;
  position: relative;
}
.crumbs {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  font-size: 0.83rem;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-faint); text-decoration: none; transition: color 0.2s var(--ease-out); }
.crumbs a:hover { color: var(--accent-soft); }

/* ---------- Backdrop phim rất mờ sau player/nội dung ----------
   Ảnh blur mạnh + brightness thấp, phủ 2 lớp gradient đen
   (dọc + hai biên) để chữ và player luôn đủ tương phản. */
.watch-backdrop {
  position: absolute;
  inset: -18px 0 auto 0;
  height: min(72vh, 700px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.watch-backdrop.is-ready { opacity: 1; }
.watch-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px) saturate(0.85) brightness(0.52);
  transform: scale(1.16);
  opacity: 0.3;
}
.watch-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11, 13, 17, 0.55) 0%,
      rgba(11, 13, 17, 0.78) 42%,
      rgba(11, 13, 17, 0.94) 72%,
      var(--bg) 97%),
    linear-gradient(90deg,
      rgba(11, 13, 17, 0.66) 0%,
      rgba(11, 13, 17, 0) 30%,
      rgba(11, 13, 17, 0) 70%,
      rgba(11, 13, 17, 0.66) 100%);
}

/* ---------- Lưới trang: trái ~70% / phải ~30% ---------- */
.watch-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
  gap: 28px;
  align-items: start;
}

.stage { min-width: 0; }

/* ---------- Player 16:9, nền đen, viền cực mảnh ---------- */
.player-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(245, 246, 248, 0.08);
  box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.85);
}
.player-card video,
.player-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
}
/* "hidden" attribute phải thắng display:block ở trên */
.player-card video[hidden],
.player-card iframe[hidden] { display: none !important; }

/* ---------- Chọn độ phân giải (phong cách Netflix) ---------- */
.quality-picker {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
}
.quality-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 4px;
  border: 0;
  background: rgba(20, 20, 20, 0.65);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.quality-btn:hover { background: rgba(40, 40, 40, 0.85); }
.quality-btn:disabled { cursor: default; }
.quality-btn:disabled:hover { background: rgba(20, 20, 20, 0.65); }
.quality-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 130px;
  padding: 6px 0;
  border-radius: 4px;
  border: 0;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.9);
}
.quality-menu[hidden] { display: none; }
.quality-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.quality-item:hover { background: rgba(255, 255, 255, 0.12); }
.quality-item.is-active { color: #e50914; font-weight: 700; }
.quality-item .q-tick { visibility: hidden; }
.quality-item.is-active .q-tick { visibility: visible; }


.chips[hidden] { display: none !important; }
.player-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  gap: 14px;
  background:
    radial-gradient(620px 320px at 50% 36%, rgba(200, 16, 46, 0.1), transparent 65%),
    rgba(8, 5, 2, 0.94);
  text-align: center;
  padding: 24px;
}
.player-cover[hidden] { display: none; }
.player-cover h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.player-cover p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 48ch; }
.player-cover .btn { margin-top: 8px; }
.cover-play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 16px 40px -10px rgba(200, 16, 46, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.cover-play-btn:hover { transform: scale(1.06); box-shadow: 0 20px 46px -10px rgba(200, 16, 46, 0.55); }
.cover-play-btn svg { width: 25px; height: 25px; margin-left: 3px; }

/* ---------- Thông tin phim ---------- */
.meta-block { margin-top: 20px; display: grid; gap: 10px; }
.meta-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
/* Một dòng metadata gọn: năm · thời lượng · trạng thái + badge chất lượng */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-size: 0.92rem;
  font-weight: 500;
}
.meta-line__item { white-space: nowrap; }
.meta-line__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.meta-line__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(200, 16, 46, 0.4);
  color: var(--accent-soft);
  background: rgba(200, 16, 46, 0.07);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.tag:hover { color: var(--ink-dim); border-color: var(--line); }

.desc-wrap { margin-top: 2px; }
.desc {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.75;
  max-width: 88ch;
}
.desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle {
  background: none;
  border: 0;
  padding: 6px 0 0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.desc-toggle:hover { color: var(--accent-soft); }

/* ---------- Danh sách tập: card streaming gọn ---------- */
.episodes { margin-top: 28px; }
.episodes__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.episodes__head h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.episodes__count { font-size: 0.8rem; color: var(--ink-faint); }
.episodes .chips { margin-bottom: 12px; }

.ep-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}
.ep-list__empty { grid-column: 1 / -1; color: var(--ink-faint); font-size: 0.9rem; }

.ep-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  font: inherit;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(23, 26, 32, 0.72);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s var(--ease-out),
    background 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}
.ep-card:hover {
  transform: translateY(-2px);
  background: var(--bg-elevate);
  border-color: var(--line);
}
.ep-card__thumb {
  position: relative;
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--bg-elevate), var(--bg-raise));
}
.ep-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}
.ep-card__num {
  position: absolute;
  left: 5px;
  bottom: 5px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(8, 5, 2, 0.82);
  color: var(--accent-soft);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.ep-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ep-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ep-card__sub { font-size: 0.72rem; color: var(--ink-faint); }

/* Tập đang xem: viền và nền đỏ trầm */
.ep-card.is-active {
  border-color: rgba(200, 16, 46, 0.55);
  background: rgba(200, 16, 46, 0.08);
}
.ep-card.is-active .ep-card__name { color: var(--accent-soft); }
.ep-card.is-active .ep-card__num {
  background: var(--accent);
  color: #ffffff;
}
.ep-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Phim tập dài: chips phân khối + lưới pill số ----------
   js/watch.js vẽ khi số tập vượt ngưỡng: mỗi khối 20 tập, khối chứa tập
   đang phát được chọn sẵn. Lưới pill gọn thay card thumbnail (ảnh lặp lại
   y hệt mỗi tập, chỉ khiến trang dài thêm). */
.ep-block { font-variant-numeric: tabular-nums; }
/* Đôi class (.ep-list.ep-list--pills): giữ lưới pill ĐA CỘT trên mọi cỡ
   màn — đè được các rule .ep-list 1 cột trong media query phía dưới */
.ep-list.ep-list--pills {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.ep-pill {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  background: rgba(23, 26, 32, 0.72);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}
.ep-pill:hover {
  background: var(--bg-elevate);
  border-color: var(--line);
}
.ep-pill.is-active {
  border-color: rgba(200, 16, 46, 0.55);
  background: rgba(200, 16, 46, 0.08);
  color: var(--accent-soft);
}
.ep-pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Panel Phòng/Chat — card tối tinh gọn, sticky ---------- */
.sidebar {
  position: sticky;
  /* neo dưới header cao --topbar-h (92px desktop) + khoảng hở 12px */
  top: calc(var(--topbar-h) + 12px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(calc(100vh - var(--topbar-h) - 36px), 840px);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, #171a20 0%, #11141a 100%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 13, 17, 0.6);
}
.tab {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 15px 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.tab:hover { color: var(--ink-dim); }
.tab.is-active { color: var(--accent-soft); border-bottom-color: var(--accent-text); }
.tab .tab__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding-inline: 5px;
  border-radius: 999px;
  background: rgba(200, 16, 46, 0.16);
  border: 1px solid rgba(200, 16, 46, 0.35);
  color: var(--accent-soft);
  font-size: 0.66rem;
  font-weight: 700;
}

.panel { min-height: 0; display: flex; flex-direction: column; }
.panel[hidden] { display: none; }
.panel__scroll { flex: 1; overflow-y: auto; padding: 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* room lobby */
.lobby { display: grid; gap: 14px; }
.lobby__start { display: grid; gap: 14px; }
.lobby__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-faint);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lobby__divider::before,
.lobby__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.lobby p.lede { margin: 0; color: var(--ink-dim); font-size: 0.9rem; line-height: 1.6; }
.field--stack label span { display: block; margin-bottom: 7px; }
.field--stack > span:first-child { display: block; margin-bottom: 7px; }
.name-row { display: flex; gap: 8px; }
.name-row input { flex: 1; min-width: 0; }
.join-code {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.btn--block { width: 100%; }

.room-active { display: grid; gap: 14px; }
.room-active .btn--outline { width: 100%; }

.code-tile {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 20px 16px 16px;
  border-radius: 10px;
  background:
    radial-gradient(240px 120px at 50% 0%, rgba(200, 16, 46, 0.1), transparent 70%),
    rgba(11, 13, 17, 0.7);
  border: 1px dashed var(--line);
  text-align: center;
}
.code-tile__label {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.code-tile__code {
  font-family: var(--font-body);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  user-select: all;
}
.code-tile__row { display: flex; gap: 8px; margin-top: 10px; }

.roster { display: grid; gap: 10px; }
.roster h2 { margin: 0; font-size: 0.7rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }
.member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  background: rgba(11, 13, 17, 0.6);
  border: 1px solid var(--line-soft);
  font-size: 0.89rem;
}
.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--accent);
}
.member.is-me { border-color: rgba(200, 16, 46, 0.4); }
.member__role { margin-left: auto; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

.hint-sync {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.hint-sync strong { color: var(--ink-dim); }

.joined-banner {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(200, 16, 46, 0.3);
  background: rgba(200, 16, 46, 0.07);
  color: var(--accent-soft);
  font-size: 0.82rem;
}

/* chat */
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.chat-msg { display: grid; gap: 3px; max-width: 92%; }
.chat-msg__head { font-size: 0.72rem; color: var(--ink-faint); display: flex; gap: 7px; align-items: baseline; }
.chat-msg__author { font-weight: 700; color: var(--accent-soft); }
.chat-msg__bubble {
  padding: 9px 13px;
  border-radius: 13px 13px 13px 3px;
  background: var(--bg-elevate);
  border: 1px solid var(--line-soft);
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}
.chat-msg--me { justify-self: end; }
.chat-msg--me .chat-msg__bubble {
  border-radius: 13px 13px 3px 13px;
  background: linear-gradient(180deg, #252931, #1b1f27);
  border-color: rgba(200, 16, 46, 0.28);
}
.chat-msg--sys {
  justify-self: center;
  max-width: 100%;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.76rem;
}
.chat-input {
  display: flex;
  gap: 9px;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* safe-area đáy, desktop = 12px */
  border-top: 1px solid var(--line-soft);
  background: rgba(11, 13, 17, 0.7);
}
.chat-input input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(23, 26, 32, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
}
.chat-input input:focus { border-color: var(--accent-deep); }
.send-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.send-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(200, 16, 46, 0.5); }
.send-btn svg { width: 17px; height: 17px; }

/* toasts */
.toasts {
  position: fixed;
  bottom: 22px;
  left: 50%;
  translate: -50% 0;
  z-index: 90;
  display: grid;
  gap: 8px;
  justify-items: center;
  /* chặn toast dài tràn ngang: phần tử fixed rộng hơn viewport là tác nhân
     kinh điển khiến iOS Safari tự thu trang để "vừa khít" -> phải bọc */
  max-width: calc(100vw - 32px);
}
.toast {
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--bg-elevate);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  animation: toast-in 0.35s var(--ease-out);
}
.toast--err { border-color: rgba(229, 83, 60, 0.5); color: #ffb4a6; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* responsive — watch page */
@media (max-width: 1280px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr) 336px; gap: 22px; }
}
@media (max-width: 1020px) {
  /* Mobile/tablet: player toàn chiều rộng, Phòng/Chat thành section dưới player */
  .watch-layout { grid-template-columns: 1fr; gap: 24px; }
  .sidebar {
    position: static;
    height: auto;
    max-height: min(72vh, 620px);
    min-height: 480px;
  }
  .ep-list { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  .watch-backdrop { height: 52vh; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  /* Mobile: một cột — poster vừa phải phía TRÊN, thông tin phim bên dưới */
  .hero__info { order: 2; }
  .hero__title { font-size: clamp(1.7rem, 7vw, 1.875rem); } /* 27–30px theo spec */
  .hero__desc { -webkit-line-clamp: 4; min-height: 6.4em; } /* 4 dòng trên mobile */
  /* Hero trong suốt cả mobile — nền chung của trang hiện xuyên qua
     (stack gradient navy + quầng ::before cũ đã bỏ cùng desktop) */
  /* Mobile: poster ~210px, đặt trên cùng, thẻ lật nghỉ GẦN CHÍNH DIỆN
     (bỏ nghiêng -1.6deg cũ của deck — lật 3D cần trục Y sạch) */
  .hero__poster {
    order: 1;
    display: block;
    width: min(210px, 62%);
    margin: 0 auto 20px;
  }
  .hero-carousel__dot {
    /* Hit area 44×44 cho cảm ứng; chấm nhìn thấy vẫn 6px qua ::before
       (đặt cạnh ĐÁY nút để tâm chấm nằm đúng vị trí cũ ~25px dưới poster) */
    position: relative;
    width: 44px;
    height: 44px;
    margin-inline: -18px; /* nút trong suốt chồng nhẹ viền — chấm vẫn xếp khít */
    background: transparent;
    transition: none;
  }
  .hero-carousel__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    transform: translateX(-50%);
    transition: background 0.25s var(--ease-out), scale 0.25s var(--ease-out);
  }
  /* Đè rule desktop `.hero-carousel__dot.is-active` (nền accent + scale 1.3,
     specificity 0,2,0 chạy ở mọi bề rộng): không override này thì dot active
     trên mobile nhận nền đỏ trên TOÀN button 44×44 -> đĩa đỏ ~57px che poster.
     Trạng thái active nhìn thấy CHỈ nằm ở ::before bên dưới. */
  .hero-carousel__dot.is-active {
    background: transparent;
    scale: 1;
  }
  .hero-carousel__dot.is-active::before { background: var(--accent); scale: 1.3; }
  .hero-carousel__dot:focus-visible { outline-offset: -8px; }
  /* --- Topbar mobile: cao 64px, không hamburger --- */
  :root { --topbar-h: 64px; }
  .topbar__in {
    min-height: var(--topbar-h);
    gap: 12px;
  }
  /* Mobile/tablet (≤900px): điều hướng chính ẩn hẳn — mọi mục vẫn tới được:
     Trang chủ (logo + bottom-nav ≤768px), Phim lẻ/Phim bộ (hàng lọc nhanh),
     Anime/TV Shows (sheet "Bộ lọc"); 769–900px dùng bộ lọc trong catalog.
     display:none để không chừa khoảng trống hay vùng bấm vô hình. */
  .topnav.is-panel { display: none; }

  /* --- Mở tìm kiếm trên mobile: THAY toàn bộ nội dung header bằng input + nút đóng --- */
  .topbar.search-open .brand,
  .topbar.search-open .topbar__join { display: none; }
  .topbar__search {
    left: 4px;
    right: 54px; /* nút đóng (kính lúp -> X) 44px + gap 10px */
    width: auto;
    max-width: none;
    height: 48px;
    padding: 0 16px;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .topbar.search-open .topbar__search {
    transition: opacity 0.24s ease, visibility 0s;
  }
  .topbar.search-open .topbar__search svg,
  .topbar.search-open .topbar__search input { transition-delay: 0.05s; }
}
@media (max-width: 560px) {
  /* Keep room entry accessible without pushing search/menu off a phone. */
  body:has(.catalog) { --topbar-h: 112px; }
  .topbar__in:has(.topbar__actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    padding-block: 8px;
  }
  .topbar__actions { display: contents; }
  .topbar__in:has(.topbar__actions) > .brand { grid-column: 1; grid-row: 1; }
  .topbar__actions > .search-toggle { grid-column: 2; grid-row: 1; }
  .topbar__join { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .topbar__join input { flex: 1; min-width: 0; min-height: 44px; }
  .topbar__join .btn { flex-shrink: 0; white-space: nowrap; }
  .join-wrap input { width: 96px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px 12px; }
  /* Watch: thở hẹp lại, danh sách tập 1 cột dễ chạm */
  .watch-shell { width: calc(100% - 24px); padding-bottom: 64px; }
  .player-card { border-radius: 8px; }
  .ep-list { grid-template-columns: 1fr; }
  .ep-card__thumb { width: 104px; }
  .sidebar { min-height: 440px; max-height: min(78vh, 560px); }
}

/* ---------- Reduced motion: tắt nâng/hạ và chuyển động trang xem ---------- */
@media (prefers-reduced-motion: reduce) {
  .watch-backdrop { transition: none; }
  .ep-card,
  .ep-card:hover,
  .ep-pill,
  .ep-pill:hover,
  .desc-toggle,
  .cover-play-btn,
  .cover-play-btn:hover,
  .send-btn,
  .send-btn:hover,
  .btn,
  .btn:hover,
  .crumbs a {
    transition: none !important;
  }
  .ep-card:hover,
  .cover-play-btn:hover,
  .send-btn:hover,
  .btn--primary:hover,
  .btn--outline:hover {
    transform: none !important;
  }
}

/* ============================================================
   Mobile (<= 768px) — chỉ áp dụng cho mobile, giữ nguyên desktop
   1) Input/textarea/select >= 16px để Safari không tự zoom khi focus
   2) Safe-area cho iPhone (status bar + home indicator) khi chạy PWA standalone
   ============================================================ */
@media (max-width: 768px) {
  /* --- chống zoom: Safari tự phóng trang nếu input < 16px --- */
  .search input,
  .join-wrap input,
  .field input,
  .chat-input input,
  .name-row input,
  #search-input,
  #join-code,
  #dialog-name,
  #guest-name,
  #host-name,
  #side-join-code,
  #chat-text,
  input[type="search"],
  input[type="text"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px;
  }

  .select { font-size: 16px; }

  /* --- Watch: nút & input tối thiểu 44px để dễ chạm --- */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; }
  .chat-input input { min-height: 44px; }
  .chat-input { gap: 10px; }
  .tab { padding: 14px 10px; }
  .desc-toggle { padding: 8px 0; font-size: 0.88rem; }
  .chip { padding: 9px 15px; }
  .ep-card { min-height: 68px; }
  .episodes__head h2 { font-size: 0.82rem; }
  .meta-block h1 { font-size: 1.5rem; }
  .desc { font-size: 0.92rem; line-height: 1.7; }

  /* --- safe-area: đã xử lý ở rule gốc (.topbar/.footer__in/.chat-input/
     .room-dialog__body dùng env() = 0 trên desktop, chỉ phát huy tác dụng
     trên máy tai thỏ / PWA standalone) --- */

  /* --- Hero intro trên mobile: rút ngắn delay/thời lượng cho nhanh gọn ---
     Animation chạy 1 lần nên không giật khi bàn phím mở (resize không kích hoạt lại) */
  .has-hero-anim .hero.hero--play [data-hero] { animation-duration: 450ms; }
  .has-hero-anim .hero.hero--play .hero__line { animation-duration: 470ms; }
  .has-hero-anim .hero.hero--play .hero__line:nth-of-type(1) { animation-delay: 60ms; }
  .has-hero-anim .hero.hero--play .hero__line:nth-of-type(2) { animation-delay: 120ms; }
  .has-hero-anim .hero.hero--play .hero__sub { --pv-delay: 190ms; }
  .has-hero-anim .hero.hero--play .hero__cta { --pv-delay: 250ms; }
  .has-hero-anim .hero.hero--play .hero__points { --pv-delay: 310ms; }
  .has-hero-anim .hero.hero--play .hero__poster { animation-duration: 520ms; --pv-delay: 90ms; }
}

/* ============================================================
   Trang chủ mobile (.page-home — chỉ index.html) ≤768px:
   1) Header 1 hàng gọn 60px: chỉ logo đỏ bên trái (join/kính lúp dời đi,
      không còn hamburger — điều hướng qua bottom-nav + bộ lọc)
   2) Một hàng lọc gọn: "Phim bộ" / "Phim lẻ" / "Bộ lọc" (mở sheet)
   3) Bottom-nav: Trang chủ / Tìm kiếm / Xem chung (xanh đen, chọn = vàng cam)
   4) Bottom sheet: "Xem chung" (mã phòng + Tạo phòng), "Bộ lọc" (chips + 2 select)
   Toàn bộ cần .bn-ready (do js/mobile-nav.js thêm) để không hỏng khi tắt JS.
   Desktop và watch.html KHÔNG bị tác động. Toast nổi trên sheet để không bị che.
   ============================================================ */
.toasts { z-index: 1400; }

.bottom-nav,
.mfilter { display: none; } /* chỉ hiện mobile trang chủ qua media bên dưới */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 3, 0.62);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(86vh, 600px);
  max-height: min(86dvh, 600px); /* dvh: đúng chiều cao động khi URL bar/bàn phím đổi */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  background: #101419;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
  transform: translateY(102%);
  transition: transform 0.24s var(--ease-out);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
/* Bàn phím mở (chỉ mobile, do js/mobile-nav.js bật class + đặt biến theo
   VisualViewport — KHÔNG đoán chiều cao bàn phím): panel nhấc lên trên bàn
   phím và giới hạn chiều cao trong vùng màn hình còn nhìn thấy; nội dung
   dư ra cuộn bên trong panel (overflow-y ở trên). */
.sheet.kb-open .sheet__panel {
  bottom: var(--pv-kb, 0px);
  max-height: var(--pv-maxh, 86vh);
}
.sheet__grab {
  width: 42px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #39414c;
}
.sheet__title {
  margin: 0 44px 16px 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
}
.sheet__wide {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}
.sheet__hint {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

@media (max-width: 768px) {
  /* --- 0) Header trang chủ "trong nhẹ ở đầu trang, đậm dần khi cuộn" ---
     Đã gộp về hiệu ứng cuộn mượt theo tiến độ ở khối .topbar (đầu file,
     body.page-home .topbar::before + --topbar-solid): hết bật/tắt nền
     đột ngột theo ngưỡng, áp dụng mọi kích thước màn hình của trang chủ.
     Chữ/icon vẫn #fff nguyên độ mờ; watch.html giữ nguyên. */
  /* Nền chung trang chủ: hero card mobile thấp hơn hero desktop nên vùng
     màu (poster hero) kết thúc sớm hơn, tan dần về #141414 quanh hàng phim
     đầu tiên — JS đọc cùng 2 biến này nên nền luôn khớp hình học cũ */
  body.page-home .hero-ambient {
    --ambient-solid: 210px;
    --ambient-end: 620px;
  }
  /* icon kính lúp 22–24px, vùng chạm 44px có sẵn ở .search-toggle */
  .search-toggle svg { width: 24px; height: 24px; }

  /* --- 1) Header 1 hàng gọn + khoảng đệm đáy cho bottom-nav --- */
  body.page-home.bn-ready {
    --topbar-h: 60px;
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }
  body.page-home.bn-ready .topbar__in {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 10px;
    padding-block: 5px;
  }
  body.page-home.bn-ready .brand,
  body.page-home.bn-ready .topbar__actions { flex: none; } /* logo/nút không bị ép, cắt hay xuống dòng */
  body.page-home.bn-ready .topbar__actions { display: flex; }
  body.page-home.bn-ready .topbar__actions .topbar__join { display: none; } /* đã dời vào sheet "Xem chung" */
  /* Tìm kiếm có màn riêng (mở từ bottom-nav) -> kính lúp header ẩn hẳn,
     tránh tồn tại hai UI tìm kiếm song song */
  body.page-home.bn-ready .topbar__actions .search-toggle { display: none; }

  /* --- 2) Một hàng lọc gọn NGAY DƯỚI HEADER, TRƯỚC HERO ---
     (js/mobile-nav.js dời #mobile-filter ra trước #hero; cụm nút sát trái,
     không wrap xuống dòng, tràn thì cuộn ngang mảnh) */
  body.page-home.bn-ready .catalog__filters { display: none; }
  body.page-home.bn-ready .mfilter {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 16px 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.page-home.bn-ready .mfilter::-webkit-scrollbar { display: none; }
  /* Mẫu Netflix: chữ nhật bo mềm, nền trắng bán trong suốt nhẹ +
     viền trắng mảnh (hở thoáng màu poster phía sau), chữ trắng 600.
     Active: nền trắng đậm hơn + viền rõ hơn (không tô đỏ). */
  .mfilter__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 0.90625rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  }
  .mfilter__chip svg { width: 17px; height: 17px; }
  .mfilter__chip:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }
  .mfilter__chip:active { background: rgba(255, 255, 255, 0.2); }
  .mfilter__chip.is-active {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    font-weight: 600;
  }
  /* "Bộ lọc" cùng cụm bên trái, không còn nền đỏ riêng biệt */
  .mfilter__chip--more { margin-left: 0; }

  /* --- 3) Bottom-nav: xanh đen gần đen, mục chọn đỏ accent, icon trên nhãn --- */
  body.page-home.bn-ready .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: #0b0f14;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-bottom: env(safe-area-inset-bottom);
    /* ngang máy tai thỏ (PWA standalone xoay ngang): mục không chui dưới notch */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    min-width: 44px;
    padding: 5px 4px 7px;
    border: 0;
    background: none;
    color: #8f9791;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .bottom-nav__item svg { width: 22px; height: 22px; }
  .bottom-nav__item:hover { color: #c4ccc5; }
  .bottom-nav__item.is-active { color: var(--accent); }

  /* --- 4) Sheet: nội dung tái sử dụng phần tử gốc --- */
  .sheet__slot--filters {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
  }
  .sheet .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
  }
  /* select đã thay bằng dropdown tùy biến (.dd — style chung ở trên) */
  .sheet [data-slot="join"] .join-wrap { margin-bottom: 14px; }
  .sheet [data-slot="join"] .join-wrap input {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 48px;
    font-size: 16px; /* ≥16px: iOS không tự phóng to khi focus */
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sheet [data-slot="join"] .join-wrap .btn { flex: none; min-height: 48px; white-space: nowrap; }
}

/* Phòng hờ: sheet không bao giờ mở trên desktop (bố cục cũ giữ nguyên) */
@media (min-width: 769px) {
  .sheet { display: none; }
}

/* ============================================================
   Màn tìm kiếm mobile (trang chủ ≤768px) — mở từ bottom-nav
   "Tìm kiếm". Cấu trúc: thanh sticky (quay lại + ô nhập) và phần
   dưới cho gợi ý / hướng dẫn / đang tải / kết quả / không tìm thấy.
   - Chưa có từ khoá: "Phim được gợi ý" + danh sách HÀNG NGANG kiểu
     Netflix mobile (.ms-row): ảnh 16:9 trái ~110–125px, tên giữa
     clamp 2 dòng, nút play tròn viền trắng phải; vùng chạm ≥44px.
   - Home <-> Search là 2 app view: Search là OVERLAY trượt ngang có
     vùng cuộn RIÊNG; Home đứng nguyên phía sau (DOM/scroll/data giữ
     nguyên) — không còn display:none/block đổi tức thì. Ẩn/hiện bằng
     transform + visibility để trượt được và đảo chiều an toàn khi
     bấm liên tục; element luôn trong DOM nên query/kết quả/scroll
     của Search được giữ nguyên giữa các lần đóng/mở.
   Desktop (.msearch display:none mặc định) hoàn toàn không thấy.
   ============================================================ */
.msearch { display: none; }

/* Khoá cuộn nền khi màn Search mở (overlay tự cuộn bên trong) */
html.pv-ms-lock { overflow: hidden; }

@media (max-width: 768px) {
  body.page-home .msearch {
    display: block;
    position: fixed;
    top: calc(var(--topbar-h, 60px) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* trên nội dung trang, dưới topbar (1000) + bottom-nav (1200) */
    background: #0d0f13;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* không nối cuộn sang trang phía sau */
    padding-bottom: calc(84px + env(safe-area-inset-bottom)); /* thoáng dưới bottom-nav */
    transform: translateX(102%); /* nằm ngoài phải khi đóng */
    visibility: hidden;
    transition:
      transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.36s; /* visible ngay khi mở, ẩn SAU khi trượt xong */
  }
  body.page-home.msearch-open .msearch {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  /* boot/restore từ snapshot: tắt animation đúng một nhịp (app.js gỡ sau 2 frame) */
  body.page-home .msearch.pv-ms-instant { transition: none !important; }
  /* thanh quay lại + ô nhập neo TRÊN CÙNG overlay (overlay đã nằm dưới topbar) */
  body.page-home .msearch .msearch__bar { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .msearch {
    transition: none;
    transform: none;
    visibility: hidden;
  }
  body.page-home.msearch-open .msearch { visibility: visible; }
}

.msearch__bar {
  position: sticky;
  top: calc(var(--topbar-h, 60px) + env(safe-area-inset-top));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(13, 15, 19, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.msearch__back {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.msearch__back:hover { color: var(--ink-dim); }
.msearch__back svg { width: 22px; height: 22px; }
.msearch__form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 12px;
  background: #1a1e25;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: border-color 0.2s;
}
.msearch__form:focus-within { border-color: var(--control-line); }
.msearch__form > svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.msearch__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* ≥16px: Safari không tự zoom */
  outline: none;
}
.msearch__form input::placeholder { color: #8a8a8a; }
.msearch__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2a2f38;
  color: var(--ink-dim);
  cursor: pointer;
}
.msearch__clear svg { width: 13px; height: 13px; }

.msearch__head {
  margin: 14px 16px 2px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.msearch__status {
  margin: 0;
  padding: 12px 16px 2px;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.msearch__retry {
  display: inline-flex;
  min-height: 44px;
  margin: 10px 16px 0;
}
.msearch__results {
  display: block;
  padding: 4px 8px 24px; /* đệm đáy + padding body.bn-ready -> không bị bottom-nav che */
}
.msearch__empty { margin: 10px 16px 0; }
.msearch__more {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px 24px;
}
/* "hidden" attribute phải thắng display:block/inline-flex của .msearch__more
   và .msearch__retry (author style đè UA [hidden] mặc định) */
.msearch__more[hidden],
.msearch__retry[hidden],
.msearch__head[hidden],
.msearch__status[hidden] { display: none; }

/* Hàng phim kiểu Netflix mobile: ảnh ngang 16:9 trái, tên giữa (tối đa 2
   dòng), nút play tròn viền trắng phải. Ảnh object-fit: cover -> không kéo
   méo poster; thiếu ảnh chỉ còn nền raise (placeholder SVG từ __imgFallback
   cũng phủ cover). Cả hàng là 1 link (thông tin phim), play là link riêng. */
.ms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  min-height: 76px;
}
.ms-row__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 10px;
}
.ms-row__thumb {
  flex: none;
  width: clamp(110px, 30vw, 125px); /* 110px @360, ~117px @390, 125px ≥417 */
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-raise);
}
.ms-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms-row__body { flex: 1; min-width: 0; }
.ms-row__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ms-row__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-row__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.6px solid #ffffff;
  border-radius: 50%;
  background: rgba(11, 13, 17, 0.45);
  color: #ffffff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease-out);
}
.ms-row__play:hover { background: rgba(255, 255, 255, 0.16); }
.ms-row__play svg { width: 17px; height: 17px; margin-left: 2px; }
.ms-row__play:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Skeleton dạng hàng (trạng thái tải) — khung .skeleton mặc định 2:3,
   ép về 16:9 đúng khung ảnh hàng */
.ms-row--skel .ms-row__thumb { pointer-events: none; }
.ms-row--skel .ms-row__thumb .skeleton {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
}
.ms-row--skel .ms-row__play { opacity: 0.5; }

/* Sheet & bottom-nav tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .sheet__panel,
  .sheet__backdrop,
  .mfilter__chip,
  .bottom-nav__item {
    transition: none !important;
  }
  /* Lớp thông tin phim: bỏ bay, chỉ hiện/ẩn mờ nhẹ */
  .cinfo__backdrop,
  .cinfo__shade,
  .cinfo__close,
  .cinfo__body {
    transition: none !important;
  }
}

/* ============================================================
   Trang chủ mobile — HERO THẺ TÍCH HỢP + DANH SÁCH (≤768px)
   .hero/.catalog/.card chỉ tồn tại ở index.html (watch.html không
   dùng) nên desktop và trang xem phim không bị tác động.
   1) Hero thành MỘT thẻ (lề 16px, bo 14px): ảnh phủ toàn thẻ,
      gradient xanh đen ở đáy, tên/meta/2 nút nằm trong cùng thẻ,
      cao mục tiêu 440–500px @390px. Poster lật 3D giữ nguyên cơ
      chế — chỉ lớp ảnh quay, chữ/nút ở ngoài thẻ lật.
   2) "Tiếp tục theo dõi" lên ngay dưới hero (flex order), thẻ
      108–128px theo viewport, hé thẻ kế, vuốt tự nhiên.
   3) "Mới cập nhật" giữ lưới 2 cột, gap 10–12px, cỡ chữ theo spec.
   ============================================================ */
@media (max-width: 768px) {
  /* --- 1) Hero: một thẻ tích hợp --- */
  .hero {
    margin: 10px 16px 0;
    padding: 0;
    border-bottom: 0;
    border-radius: var(--radius-m);
    background: var(--home-bg); /* nền đệm trung tính khi ảnh chưa tải */
    box-shadow: var(--shadow-pop);
  }

  .hero .hero__grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    margin: 0;
    /* mục tiêu 440–500px @390px; chữ lớn/nội dung dài -> thẻ cao hơn, không cắt nút */
    min-height: 470px;
  }

  /* Ảnh phủ vùng thẻ, không kéo méo (object-fit: cover sẵn ở .hero-flip__face img).
     width 100% + stretch: abspos mặc định shrink-to-fit -> poster/carousel sụp 0px. */
  .hero__poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    justify-self: stretch;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
  }
  .hero-depth { display: none; } /* poster phụ làm chiều sâu — bỏ trong thẻ tích hợp */
  .hero-carousel { aspect-ratio: auto; height: 100%; }
  .hero-carousel:focus-visible { outline-offset: -6px; } /* vòng focus hiện TRONG thẻ, không bị clip */

  /* nút trước/sau nằm TRONG thẻ (mặc định tràn -15px ra ngoài sẽ bị clip) */
  .hero-carousel__nav { top: 32%; width: 44px; height: 44px; }
  .hero-carousel__nav--prev { left: 10px; }
  .hero-carousel__nav--next { right: 10px; }

  /* chấm chọn phim: góc trên phải (nhích lên 6px cho thoáng mép poster —
     chỉ đổi top, giữ nguyên right/kích thước) */
  .hero-carousel__dots {
    top: 12px;
    bottom: auto;
    left: auto;
    right: 12px;
    justify-content: flex-end;
  }
  /* nút 44px trong suốt: chấm nhìn thấy trở về CỰC GIỮA nút trong chế độ này */
  .hero-carousel__dot::before {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  /* Khối thông tin nằm đáy CÙNG thẻ — gradient đen trung tính phủ TRÊN ẢNH
     để chữ đọc rõ. Đây là lớp bảo vệ nội dung, GIỮ NGUYÊN cấu trúc
     (chỉ đổi tông navy cũ sang đen trung tính cho khớp nền mới). */
  .hero__info {
    position: relative;
    z-index: 2;
    padding: 80px 16px 22px;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.55) 18%,
      rgba(0, 0, 0, 0.86) 46%,
      #0a0a0a 100%);
  }
  .hero__title { font-size: clamp(1.5rem, 6.8vw, 1.75rem); } /* 24–28px */
  .hero__meta { gap: 8px; margin-bottom: 10px; font-size: 0.8125rem; }
  .hero__tags { display: none; } /* gọn hero — thể loại vẫn xem đủ qua "Thông tin" */
  .hero__desc {
    font-size: 0.875rem;
    -webkit-line-clamp: 2; /* tối đa hai dòng */
    min-height: 3.2em;
    margin-bottom: 14px;
  }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { padding: 11px 18px; } /* min-height 44px đã có ở media 768 chung */

  /* --- 2) Danh sách: "Tiếp tục theo dõi" ngay dưới hero ---
     Thứ tự hiển thị đã đúng theo DOM ở cả desktop lẫn mobile
     (continue -> catalog__head -> lưới) nên KHÔNG cần flex/order nữa —
     thứ tự đọc và focus khớp thứ tự nhìn thấy. #mobile-filter vẫn được
     js/mobile-nav.js dời LÊN TRƯỚC hero (ngay dưới header). */
  .catalog { padding-top: 28px; }
  .continue {
    margin-bottom: 28px; /* khoảng cách tới tiêu đề "Mới cập nhật" 28–36px */
    --continue-card-w: clamp(108px, 30vw, 128px);
  }
  .catalog__head { margin-bottom: 24px; }

  /* Hàng ngang: thẻ 108–128px, hé thẻ kế tiếp, cuộn/vuốt tự nhiên */
  .continue__row { gap: 12px; scroll-snap-type: x proximity; }
  .continue__row .card { scroll-snap-align: start; }

  /* --- 3) "Mới cập nhật": lưới 2 cột, gap 10–12px --- */
  #movie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  .catalog__title { font-size: 1.375rem; } /* tiêu đề section 22px */
  .card__title { font-size: 0.875rem; }    /* tên phim 14px, clamp 2 dòng sẵn có */
  .card__meta { font-size: 0.78rem; }      /* metadata ~12.5px */
}

/* ============================================================
   Lớp thông tin phim MOBILE (trang chủ ≤768px) — js/card-info.js
   Chạm thẻ phim -> panel MỞ RỘNG từ đúng rect poster của thẻ đến
   khung đích gần toàn màn hình (bo góc trên), nền trang chủ tối
   dần phía sau; đóng thì thu về lại đúng thẻ (thẻ mất/không còn
   trên màn hình -> fade ngắn). Panel trong DOM là KHUNG ĐÍCH; vị
   trí lúc bay do JS đặt width/height/transform từng khung hình —
   giá trị cuối trùng số liệu CSS nên khi JS trả style về mặc định
   không nhảy hình. Ảnh hero là poster của thẻ (object-fit: cover)
   -> ảnh chạy liền mạch, không kéo méo; chữ/metadata/nút và lớp
   phủ gradient mờ hẳn lúc bay, hiện dần khi khung gần mở xong.
   Desktop ẩn hoàn toàn; watch.html không có thẻ nên không liên quan.
   ============================================================ */
.cinfo {
  position: fixed;
  inset: 0;
  z-index: 1260; /* trên bottom-nav (1200), dưới sheet (1300) và toast (1400) */
}
.cinfo__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 3, 0.74);
  opacity: 0;
  /* thời lượng khớp thời lượng bay: mở .56s; lúc đóng JS đặt --cinfo-dur:.4s */
  transition: opacity var(--cinfo-dur, 0.56s) ease;
}
.cinfo.is-open .cinfo__backdrop { opacity: 1; }

.cinfo__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px; /* TOP_GAP trong js/card-info.js — hai bên phải khớp nhau */
  bottom: 0;
  overflow: hidden;
  background: #0b0d11;
  border-radius: 18px 18px 0 0; /* RADIUS_PANEL trong js/card-info.js */
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
  will-change: transform, width, height;
}
.cinfo.is-open .cinfo__panel {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* đang bay: khoá cuộn (nội dung chưa hiện), thắng quy tắc overflow phía trên */
.cinfo.is-flight .cinfo__panel { overflow: hidden; }
.cinfo.is-sheet-flight .cinfo__panel { overflow: hidden; }

.cinfo__hero {
  position: relative;
  width: 100%;
  height: min(56vh, 145vw); /* dự phòng — JS luôn đặt height inline theo cùng công thức */
  overflow: hidden;
  background: var(--bg-raise);
}
.cinfo__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mọi khung hình của đường bay đều không kéo méo ảnh */
}
.cinfo__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(180deg,
    rgba(11, 13, 17, 0) 0%,
    rgba(11, 13, 17, 0.55) 55%,
    #0b0d11 100%);
  pointer-events: none;
}
.cinfo__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 12px;
  background: rgba(11, 13, 17, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cinfo__body {
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
.cinfo__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.cinfo__meta {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.cinfo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.cinfo__tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-elevate);
  color: var(--ink-dim);
}
.cinfo__cta { margin: 0 0 16px; }
.cinfo__play { width: 100%; justify-content: center; }
.cinfo__status {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.cinfo__desc {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-line;
}
.cinfo__facts {
  margin: 0;
  display: grid;
  gap: 8px;
}
.cinfo__fact {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.45;
}
.cinfo__fact dt { color: var(--ink-faint); }
.cinfo__fact dd { margin: 0; color: var(--ink-dim); }

/* hidden attribute phải thắng display:flex/grid author style ở trên */
.cinfo__tags[hidden],
.cinfo__facts[hidden],
.cinfo__status[hidden] { display: none; }

/* nhóm "chrome" (chữ/nút/lớp phủ): mờ hẳn lúc bay, hiện nhẹ khi khung
   gần mở xong -> chữ không bị phóng méo theo poster */
.cinfo__shade,
.cinfo__close,
.cinfo__body {
  opacity: 1;
  transition: opacity 0.26s var(--ease-out);
}
/* nút đóng giữ thêm transition màu của .icon-btn (bị group trên đè mất) */
.cinfo__close {
  transition: opacity 0.26s var(--ease-out), color 0.2s, border-color 0.2s;
}
.cinfo.is-flight .cinfo__shade,
.cinfo.is-flight .cinfo__close,
.cinfo.is-flight .cinfo__body {
  opacity: 0;
  transition-duration: 0.12s; /* lúc đóng: chữ tan nhanh */
}

/* phòng hờ: lớp này không bao giờ xuất hiện trên desktop (thẻ điều
   hướng như cũ) — bắt cả trường hợp JS mở nhịp nhàng sai media */
@media (min-width: 769px) {
  .cinfo { display: none; }
}

/* ============================================================
   Cầu nối chuyển cảnh "Xem ngay" -> trình phát (watch.html).
   Lớp #pv-handoff do inline script dựng với 100% style nội tuyến
   (không phụ thuộc file CSS này — phải vẽ đúng trước khi CSS kịp tải);
   js/handoff.js tự đặt style lúc tan bằng JS. Chỉ cần quy tắc khoá cuộn
   trang dưới lớp cầu nối (tối đa ~2.4s, tự gỡ khi lớp tan).
   ============================================================ */
html.pv-handoff-lock { overflow: hidden; }

/* Web laptop + mobile: MỞ PHIM -> chuyển cảnh kiểu Netflix. Page root là
   <body> (chứa TOÀN BỘ giao diện: header, hero, lưới phim) tiến nhẹ
   scale(1) -> 1.016 trong ~520ms (PC; mobile 1.010/480ms; TV fade-only
   460ms) (origin theo tâm viewport hiện tại); ĐỒNG THỜI lớp tối .pv-dim
   phủ opacity 0 -> 1 — ĐEN HOÀN TOÀN; khi đen đủ mới điều hướng sang
   watch.html — KHÔNG dọn overlay/transform sau khi điều hướng: trạng thái
   đen được giữ nguyên để trang đóng băng vào BFCache, khi quay lại thì
   return reveal fade lớp đen ra + shell scale(0.995) -> 1 (~360/340/320ms).
   KHÔNG zoom riêng poster, KHÔNG clone ảnh, KHÔNG phóng thẻ/preview riêng.
   .pv-dim do js/play-transition.js gắn TRỰC TIẾP lên <html> — ngoài page
   root đang scale nên KHÔNG bị zoom theo nội dung; màu TRÙNG nền cầu nối
   #pv-handoff của watch.html (#0b0d11) để không chớp đổi sắc giữa hai
   trang; style chính đặt inline bởi JS, quy tắc dưới là bản sao dự phòng. */
html.pv-play-launching { overflow: hidden; }
body.pv-zooming {
  will-change: transform;
}
.pv-dim {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #0b0d11;
  opacity: 0;
  pointer-events: auto;
  will-change: opacity;
}
.pv-dim.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* reduced motion: KHÔNG zoom — chỉ fade tối nhanh 140ms hai chiều
     (JS tự bỏ transform; overlay vẫn fade để có phản hồi navigation) */
  body.pv-zooming {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Skip link "Bỏ qua đến nội dung" — chỉ hiện khi focus (Tab):
   fallback bàn phím cho cả desktop/mobile; TV route có bản riêng
   trong css/tv.css (.tv-skip). Không đụng layout khi ẩn.
   ============================================================ */
.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 5000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-elevate);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform 0.15s var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ============================================================
   Phản hồi chạm + chống double-tap zoom NHẦM (vẫn giữ pinch zoom —
   accessibility). touch-action: manipulation chỉ tắt double-tap-zoom
   trên control, KHÔNG đụng pan/pinch của trang; body/player/input
   giữ nguyên hành vi mặc định. */
.btn, .chip, .linklike, .icon-btn, .mfilter__chip, .search-toggle,
.hero-carousel__dot, .hero-carousel__nav, .bottom-nav__item,
.ms-row__play, .tab, .send-btn, .desc-toggle, .quality-btn,
.pager button, .sheet__close, .continue__nav {
  touch-action: manipulation;
}

/* ============================================================
   Chế độ app standalone (PWA "Thêm vào màn hình chính" / iOS Home
   Screen — html.pv-app-mode do inline script gắn SỚM trong <head>):
   chặn pinch-zoom + double-tap zoom toàn trang, luôn ở scale 1 như
   app thật. pan-x pan-y vẫn cho CUỘN dọc/ngang, vuốt carousel, input,
   chọn văn bản và video controls — KHÔNG dùng touch-action:none vì
   nó phá cả pan. Tab trình duyệt thường (không có class) giữ pinch
   zoom nguyên vẹn cho accessibility.
   ============================================================ */
html.pv-app-mode,
html.pv-app-mode body {
  touch-action: pan-x pan-y;
}

/* Hero deck: phản hồi gesture ≤100ms (class do js/hero.js đặt khi chạm)
   — mờ nhẹ mặt trước, chỉ opacity, không bounce */
.hero-carousel__deck.is-touching .hero-flip__face--front {
  opacity: 0.92;
  transition: opacity 80ms linear;
}

/* Return-nav (watch/tv-watch quay về nguồn): marker khoá cuộn trong lúc
   fade exit — idempotent, tự gỡ khi restore/pagehide/destroy. Overlay đen
   GIỮ LẠI sau khi back/assign thành công (cầu nối BFCache hai chiều). */
html.pv-returning { overflow: hidden; }

/* Return cover (Back về trang nguồn khi BFCache KHÔNG dùng được — trang
   load lại thật sự): #pv-return-cover do inline script dựng trước first
   paint khi marker "xpv:src" còn hạn; js/app.js / js/tv.js restore
   snapshot (không skeleton, không refetch dữ liệu đã có) rồi
   initReturnCover.fade() double-rAF fade lớp ra rồi gỡ. Chỉ khoá cuộn
   trong thời gian cover còn che (tối đa ~2.6s — trần an toàn tự tan). */
#pv-return-cover {
  position: fixed;
  inset: 0;
  z-index: 4200;
  background: #0b0d11;
  opacity: 1;
  pointer-events: auto;
  will-change: opacity;
}
html.pv-return-cover-on { overflow: hidden; }