/* ============================================================
   TikTok-style UI — feed dọc, right rail, bottom nav, sheets.
   Bám reference TikTok app: nền đen tuyệt đối, chữ trắng,
   accent đỏ #FE2C55 / cyan #25F4EE, icon Phosphor.
   ============================================================ */
:root {
  --bg: #000;
  --surface: #121212;
  --surface-2: #1f1f1f;
  --line: rgba(255, 255, 255, .12);
  --text: #fff;
  --dim: rgba(255, 255, 255, .62);
  --dim-2: rgba(255, 255, 255, .38);
  --red: #FE2C55;
  --cyan: #25F4EE;
  --nav-h: 54px;
  --top-h: 46px;
  --font: "TikTok Sans", "Proxima Nova", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* z-scale: top/nav 20 · sheet 60 · toast 70 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.35 var(--font);
  overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
svg { display: block; }

/* ── Shell ─────────────────────────────────────────────────── */
.app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
@media (min-width: 768px) {
  .app { max-width: 430px; margin: 0 auto; border-inline: 1px solid var(--line); }
}

/* ── Top bar (feed) ────────────────────────────────────────── */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.35), transparent);
}
.topbar > * { pointer-events: auto; }
.topbar-tabs { display: flex; gap: 18px; justify-content: center; }
.ttab {
  font-size: 16.5px; font-weight: 600; color: var(--dim);
  padding: 8px 2px; position: relative;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.ttab.on { color: #fff; }
.ttab.on::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 24px; height: 2px; margin-left: -12px;
  background: #fff; border-radius: 2px;
}
.topbar-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  color: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5));
}
.topbar-btn:active { transform: scale(.92); }
/* source picker rows */
/* ── Feed ──────────────────────────────────────────────────── */
.feed {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  background: #000;
}
.feed::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}
.slide-media, .slide-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-media video { object-fit: cover; background: #000; }

.shimmer {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 55%),
              linear-gradient(160deg, #16181d, #05060a 70%);
  animation: shimmer 1.1s ease-in-out infinite alternate;
}
@keyframes shimmer { from { opacity: .5 } to { opacity: .95 } }
.slide[data-ready] .shimmer { display: none; }

/* nút play hiện khi pause (TikTok: icon play mờ giữa màn hình) */
.tap-flash {
  position: absolute; inset: 0; z-index: 2; display: none; place-items: center;
  pointer-events: none; color: rgba(255,255,255,.75);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.6));
}
.slide[data-paused] .tap-flash { display: grid; }

/* tim bung khi double-tap */
.burst {
  position: absolute; z-index: 3; pointer-events: none;
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  color: var(--red); opacity: 0; transform: scale(.4);
}
.burst.go { animation: burst .9s cubic-bezier(.17,.89,.32,1.28) forwards; }
@keyframes burst {
  0%   { opacity: 0; transform: scale(.3) rotate(-12deg); }
  35%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  60%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.05) translateY(-14px); }
}

/* thanh tiến trình mảnh đáy video */
.progress {
  position: absolute; left: 0; right: 0; z-index: 3;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  height: 2px; background: rgba(255,255,255,.18);
}
.progress i {
  display: block; height: 100%; width: 100%;
  background: #fff; transform: scaleX(0); transform-origin: left;
}

/* ── Right rail ────────────────────────────────────────────── */
.rail {
  position: absolute; right: 6px; z-index: 4;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  display: flex; flex-direction: column; align-items: center; gap: 17px;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5));
}
.rail-btn:active { transform: scale(.9); }
.rail-btn .cnt { font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rail-btn.saved { color: #ffc107; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Meta dưới (tiêu đề) ───────────────────────────────────── */
.meta {
  position: absolute; left: 12px; right: 64px; z-index: 4;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; gap: 7px;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.meta-desc {
  margin: 0; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Bottom nav ────────────────────────────────────────────── */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  background: #000;
  border-top: 1px solid rgba(255,255,255,.08);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--dim); font-size: 10px; font-weight: 500;
}
.tabbar a.on { color: #fff; }
.tabbar a:active, .tabbar button:active { transform: scale(.94); }
/* ── Pages (Discover / Inbox / Profile / Search) ───────────── */
.page {
  height: 100dvh; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  scrollbar-width: none;
}
.page::-webkit-scrollbar { display: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.page-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.page-sub { color: var(--dim); font-size: 13.5px; }
.page-center { display: grid; place-items: center; color: var(--dim); min-height: 50dvh; text-align: center; padding: 24px; }

/* search bar */
.searchbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 2px 0 10px;
}
.searchbar .field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: 999px; padding: 0 14px; height: 40px;
  color: var(--dim);
}
.searchbar input {
  flex: 1; background: none; border: 0; outline: none; color: #fff;
  font-size: 16px; /* ≥16px: iPhone không auto-zoom khi focus ô nhập */
  height: 100%;
}
.searchbar .searchbar /* search result row */
.srow {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.srow .thumb { position: relative; width: 92px; height: 122px; border-radius: 6px; overflow: hidden; background: var(--surface); }
.srow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.srow .thumb .views {
  position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.srow .t { font-size: 14.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srow .a { color: var(--dim); font-size: 13px; margin-top: 6px; }

/* discover grid */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.vgrid .vcell { border-radius: 8px; overflow: hidden; }
.vcell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface); }
.vcell img { width: 100%; height: 100%; object-fit: cover; }
.vcell .views {
  position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.vcell:active { opacity: .85; }
/* series catalog: caption + badge + hàng ngang */
.vcell .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 6px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: 12px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcell .tag {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.section-h { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
/* tile phim bộ (không có ảnh bìa → tile gradient + tên) */
.vcell.tile {
  display: grid; place-items: center; padding: 12px;
  background: linear-gradient(160deg, #202637, #0b0d13);
  border: 1px solid rgba(255,255,255,.06);
}
.vcell.tile .tname {
  font-size: 13px; font-weight: 700; text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 2px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--dim);
  font-size: 13.5px; font-weight: 600;
}
.chip.on { background: #fff; color: #000; }
.chip:active { transform: scale(.96); }
.chips-sub { margin-top: -2px; margin-bottom: 10px; }
.chips-load { color: var(--dim-2); font-size: 12px; padding: 4px 2px; }
.chip.sm { padding: 5px 11px; font-size: 12.5px; }
.chip.sort { background: transparent; border: 1px solid var(--line); }
.chip.sort.on { background: #fff; color: #000; border-color: #fff; }
.chip-div { flex: 0 0 1px; align-self: stretch; background: var(--line); margin: 4px 4px; }
.hrow::-webkit-scrollbar { display: none; }
.hcell {
  position: relative; flex: 0 0 108px; aspect-ratio: 3 / 4;
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.hcell img { width: 100%; height: 100%; object-fit: cover; }
.hcell .views {
  position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.hcell:active { opacity: .85; }

/* inbox / activity list */
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.dot.off { background: #ef4444; }

/* profile */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 8px; }
.profile-head .avatar {
  width: 90px; height: 90px; border-radius: 50%; background: var(--surface-2);
  display: grid; place-items: center; color: var(--dim);
}
.profile-head .name { font-size: 17px; font-weight: 700; }
.pstats { display: flex; gap: 28px; justify-content: center; margin: 14px 0 4px; }
.pstats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pstats b { font-size: 17px; }
.pstats span { color: var(--dim); font-size: 12.5px; }
.ptabs { display: flex; justify-content: center; gap: 26px; margin: 16px 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ptab { padding: 10px 2px; color: var(--dim); font-size: 15px; font-weight: 600; position: relative; }
.ptab.on { color: #fff; }
.ptab.on::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 28px; height: 2px; margin-left: -14px; background: #fff; }

/* ── Watch (single) ────────────────────────────────────────── */
.watch { position: relative; height: 100dvh; overflow: hidden; background: #000; }
.watch .slide { height: 100dvh; }
.watch-back {
  position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 10px; z-index: 21;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.35); color: #fff;
}
/* ── Sheets ────────────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .2s ease;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 430px; margin: 0 auto;
  height: min(72dvh, 640px);
  background: var(--surface); border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(102%); transition: transform .24s cubic-bezier(.2,.9,.3,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 8px auto 2px; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--dim);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sheet-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }

/* comment item */
/* share options */
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; padding: 14px 4px; }
.share-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 12px; }
.share-item .c { width: 50px; height: 50px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.share-item:active { opacity: .75; }

/* paste link sheet */
/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%); z-index: 70;
  background: rgba(255,255,255,.92); color: #000; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── Slide error overlay ───────────────────────────────────── */
.slide-error {
  position: absolute; inset: 0; z-index: 6;
  display: none; place-content: center; justify-items: center; gap: 12px;
  text-align: center; padding: 24px; color: #fff; background: rgba(0,0,0,.75);
}
.slide-error p { margin: 0; }
.slide[data-error] .slide-error { display: grid; }

/* ── States ────────────────────────────────────────────────── */
.state { color: var(--dim); text-align: center; padding: 48px 0; }
.state .spinner {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,.14); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); color: #fff; font-weight: 600;
}
.btn-ghost:active { transform: scale(.97); }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  
  .burst.go { animation-duration: .001ms; opacity: 0; }
  .sheet { transition: none; }
}

/* ── vá UX: nút 2x, tua, xem toàn bộ, trang tập, rail ─────────────────── */

/* kéo thanh tiến trình để tua */
.progress { height: 3px; cursor: pointer; pointer-events: auto; touch-action: none; }
.progress::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* nút "Xem toàn bộ" trên feed */
.meta-all {
  align-self: flex-start; display: inline-flex; align-items: center;
  margin-top: 2px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; font-weight: 700; color: #fff; backdrop-filter: blur(6px);
}
.meta-all:active { transform: scale(.96); }

/* trang tập: header bìa + tên + xem tiếp */
.srhead { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: start; margin: 2px 0 14px; }
.srcover { width: 116px; height: 168px; object-fit: cover; border-radius: 12px; background: #1a1a1a; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.srmeta { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.srname { font-size: 17px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srsub { color: var(--dim); font-size: 13px; }
.srcont {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 7px 12px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700;
}
.srcont:active { transform: scale(.97); }

/* rail: nhãn rỗng không chiếm chỗ (không còn chèn nhau) */
.rail { gap: 20px; }
.rail-btn .cnt:empty { display: none; }

/* ── redesign: danh sách tập gọn (không ảnh → chip số nhỏ) ────────────── */
.epgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.epcell {
  display: grid; place-items: center; height: 38px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #e8e8e8;
  font-variant-numeric: tabular-nums;
}
.epcell:active { transform: scale(.96); }
.epcell.on { background: #fff; color: #111; font-weight: 800; border-color: #fff; }

/* nút "Tập đang phát · Xem toàn bộ" */
.meta-all { gap: 5px; }
.meta-all .epnow { font-weight: 800; font-variant-numeric: tabular-nums; }

/* phim liên quan */
.rel-h { font-size: 15px; font-weight: 800; margin: 20px 0 10px; }
/* ── màn hình nhỏ (≤380px) ─────────────────────────────────── */
@media (max-width: 380px) {
  .meta { right: 58px; gap: 5px; }
  .meta-desc { font-size: 13px; }
  .srhead { grid-template-columns: 104px 1fr; gap: 12px; }
  .srcover { width: 104px; height: 150px; }
  .epgrid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
    }
.meta-all.meta-ep { font-weight: 800; font-variant-numeric: tabular-nums; }

/* nút tập trên trang xem (mở danh sách tập) */
.meta-all { font-family: inherit; -webkit-appearance: none; cursor: pointer; }
.meta-ep .up { display: inline-flex; transform: rotate(180deg); opacity: .8; }
.eplist { padding: 2px 0 10px; }

/* 2x kiểu TikTok: giữ để tăng tốc, kéo xuống để khóa */
.speed-badge {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 50%;
  transform: translateX(-50%) scale(.85); z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; font-weight: 800;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.speed-badge .lk { display: none; font-size: 11.5px; font-weight: 600; color: #ffd7df; }
.slide.speed-on .speed-badge { opacity: 1; transform: translateX(-50%) scale(1); }
.slide.speed-locked .speed-badge { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.slide.speed-locked .speed-badge .lk { display: inline; }

/* thanh search dính sát mép trên: tự chừa vùng tai thỏ, không hở dải nội dung phía trên */
.page--search { padding-top: 0; }
.page--search > .searchbar { padding-top: calc(env(safe-area-inset-top) + 12px); }

/* chống zoom trang trên iPhone: tắt double-tap zoom (ô tua .progress tự có touch-action:none riêng) */
* { touch-action: manipulation; }

/* ════════ Redesign pass (taste): nền chung ════════ */
/* scrim đáy video — chữ & nút nổi rõ, nền tối mượt hơn */
.slide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  pointer-events: none;
}
/* topbar feed: thương hiệu nhỏ bên trái */
.brand {
  padding-left: 16px; font-size: 15px; font-weight: 800; letter-spacing: .2px;
  text-shadow: 0 1px 8px rgba(0,0,0,.55); pointer-events: none;
}
.topbar { grid-template-columns: auto 1fr auto; }
/* tiêu đề phẳng cho topbar trang tập */
.ptitle {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* nhịp & phản hồi chạm */
.rail { gap: 22px; }
.chip:active { transform: scale(.96); }
.srow:active { opacity: .72; }
.sheet { border-radius: 16px 16px 0 0; }

/* hero trang tập: nền mờ từ poster — chiều sâu cho trang chi tiết */
.srhead { position: relative; }
.srbd {
  position: absolute; left: -16px; right: -16px; top: -14px; height: 230px; z-index: 0;
  background-size: cover; background-position: center 22%;
  filter: blur(40px) saturate(1.25); opacity: .35; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
}
.srhead > .srcover, .srhead > .srmeta { position: relative; z-index: 1; }
/* empty state có icon */
.state svg { display: block; margin: 0 auto 10px; opacity: .45; }
/* share sheet: 2 mục cân đối */
.share-grid { grid-template-columns: repeat(2, 1fr); }

/* ── Cài đặt: nhóm + segmented control ─────────────────────── */
.set-group { margin-bottom: 24px; }
.set-label { font-size: 13px; color: var(--dim); margin-bottom: 10px; font-weight: 600; }
.set-hint { font-size: 12.5px; color: var(--dim); margin: 10px 2px 0; line-height: 1.5; }
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: 12px;
}
.seg-btn {
  flex: 1; min-height: 38px; border-radius: 9px;
  color: var(--dim); font-size: 13px; font-weight: 600; padding: 0 6px;
  transition: background .15s ease, color .15s ease;
}
.seg-btn:active { transform: scale(.97); }
.seg-btn.on { background: #fff; color: #000; font-weight: 700; }

/* lưới chọn ngôn ngữ (12 ngôn ngữ) */
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lang-cell {
  min-height: 44px; border-radius: 12px; background: var(--surface-2);
  color: var(--dim); font-size: 13.5px; font-weight: 600; padding: 0 10px;
}
.lang-cell:active { transform: scale(.97); }
.lang-cell.on { background: #fff; color: #000; font-weight: 700; }
.set-row { display: flex; gap: 10px; flex-wrap: wrap; }
a.btn-ghost { text-decoration: none; }
/* meta phụ trên thẻ phim (lượt xem · thể loại) */
.vcell .cap i { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: #c9c9d2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Trang tải phim ─────────────────────────────────────────── */
.dl-open { display: flex; gap: 10px; margin: 2px 0 10px; }
.dl-open input {
  flex: 1; min-width: 0; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: #fff;
  padding: 0 14px; font-size: 16px; outline: none;
}
.dl-go {
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px;
  border-radius: 12px; padding: 0 16px; min-height: 44px; white-space: nowrap;
}
.dl-go:active { transform: scale(.97); }
.dl-go:disabled { opacity: .5; }
.dl-head { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.dl-head img { width: 64px; height: 86px; object-fit: cover; border-radius: 10px; background: #1a1a1a; }
.dl-mini { color: #ff7a9c; font-size: 13px; font-weight: 700; text-decoration: underline; }
.dlgrid { margin-bottom: 6px; }
.dl-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 12px 0 8px; }
.dl-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s ease; }
.dl-status { font-size: 13px; color: var(--dim); min-height: 18px; }
.dl-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dl-foot .dl-status { flex: 1; }

/* ════════════ Polish pass: hệ nút + bề mặt + nhịp toàn app ════════════ */

/* Focus ring chuẩn a11y cho mọi phần tử tương tác */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid rgba(254,44,85,.65); outline-offset: 2px;
}
button { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.97); } /* nút có hiệu ứng riêng sẽ đè lên */

/* Thương hiệu 2 tông trên topbar */
.brand b { color: var(--red); font-weight: 800; }

/* Thẻ phim: bo 12 + viền trong sắc nét */
.vcell { border-radius: 12px; }
.vcell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none;
}
.vcell .cap {
  -webkit-line-clamp: 3; padding: 26px 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
}
/* Chip lọc: viền mảnh, trắng khi chọn */
.chip { border: 1px solid rgba(255,255,255,.07); }
.chip.on { border-color: #fff; }

/* Ô nhập: ring đỏ khi focus */
.field:focus-within { box-shadow: 0 0 0 2px rgba(254,44,85,.45); }

/* Tabbar kính mờ */
.tabbar {
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top-color: rgba(255,255,255,.06);
}

/* Nút: đồng nhất pill + phản hồi chạm */
.btn-ghost { background: rgba(255,255,255,.05); }
.btn-ghost:active { background: rgba(255,255,255,.11); }
.dl-go { border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dl-open input { border-radius: 999px; }
.srcont { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.lang-cell { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.lang-cell.on { border-color: #fff; }

/* Nền trang: tint thương hiệu rất nhẹ ở đỉnh */
.page { background-image: radial-gradient(120% 44% at 50% 0%, rgba(254,44,85,.07), transparent 62%); }

/* Sheet */
.sheet-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-handle { background: rgba(255,255,255,.28); }
.sheet-head { color: #fff; font-weight: 700; font-size: 14.5px; }

/* Thanh tiến trình bo tròn */
.progress, .progress i { border-radius: 2px; }

/* Toast + section header gọn gàng */
.toast { border-radius: 999px; padding: 10px 18px; }
.section-h { letter-spacing: -.2px; }

/* Trạng thái rỗng gọn giữa trang */
.state { max-width: 320px; margin-left: auto; margin-right: auto; }

/* nút "Xem toàn bộ" / "Tập N" — kiểu TikTok: pill trắng mờ, không viền, chữ đậm */
.meta-all {
  gap: 3px; padding: 7px 12px 7px 14px; border: 0;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 700;
}
.meta-all:active { transform: scale(.95); background: rgba(255,255,255,.26); }
.meta-all svg { opacity: .95; }

/* phim liên quan: lưới giống Khám phá */
.relgrid { margin-bottom: 8px; }

/* Thịnh hành ở Khám phá: hàng kéo ngang */
.trend-wrap { margin-bottom: 12px; }
.trend-wrap .rel-h { margin: 4px 0 10px; }
.hrow { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.hrow::-webkit-scrollbar { display: none; }
/* ── Thẻ phim kiểu mới: poster (meta trên ảnh) + tên dưới ── */
.vcell { display: flex; flex-direction: column; gap: 6px; aspect-ratio: auto; overflow: visible; background: none; }
.vcell::after { display: none; }
.vthumb { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #1a1a1a; }
.vthumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vtitle {
  font-size: 12px; font-weight: 600; line-height: 1.3; color: #e8e8e8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vcell .cap {
  padding: 16px 6px 6px; font-size: 11px; font-weight: 500; line-height: 1.25;
  -webkit-line-clamp: 1;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.vcell .cap i { font-size: 11px; margin-top: 0; }
.vgrid { gap: 12px 8px; }

/* Khám phá: thanh công cụ lọc (segmented sort + đếm) */
/* meta lượt xem · thể loại (feed + trang chi tiết) */
.meta-stats {
  font-size: 12.5px; color: rgba(255,255,255,.82);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.srgenres {
  font-size: 12.5px; color: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* meta 2 dòng: lượt xem / thể loại (thẻ lưới + hàng thịnh hành) */
.vcell .cap { -webkit-line-clamp: 2; }
.vcell .cap i { display: block; }
/* fix: cap 2 dòng — clamp từng dòng, không clamp container (tránh cắt nửa dòng) */
.vcell .cap { display: block; -webkit-line-clamp: unset; }
.vcell .cap i {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thịnh hành: thẻ giống hệt lưới, bề rộng cố định trong hàng kéo ngang */
.hrow { gap: 12px; }
.hrow .vcell { flex: 0 0 auto; width: 112px; }

/* Khám phá: trạng thái cuối danh sách (cuộn vô hạn) */
#dsent { display: grid; place-items: center; }
#dsent .spinner {
  width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.14);
  border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
}
.end-txt { color: var(--dim); font-size: 12.5px; padding: 12px 0 20px; }

/* Nút Xem ngay trên feed: thanh dài full chiều ngang */
.meta-all.viewbar {
  align-self: stretch; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.14);
}
.meta-all.viewbar .vb-l { font-size: 15px; font-weight: 800; }
.meta-all.viewbar .vb-r {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78);
}

/* Thanh Xem ngay: kéo dài hết chiều ngang (xuống dưới nút Chia sẻ) */
.meta-all.viewbar { margin-right: -52px; } /* .meta chừa 64px cho rail → bù lại để chạm mép phải 12px */
/* Nâng cụm Lưu/Chia sẻ lên nhường chỗ cho thanh */
.rail { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 72px); }

/* Trang xem: hạ cụm Lưu/Chia sẻ xuống như cũ (chỉ feed mới nâng cao vì có thanh Xem ngay) */
.watch .rail { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); }

/* iOS: chặn callout/select khi đè giữ (giữ-2x mượt, không hiện bong bóng đen của hệ thống) */
.app, .app * { -webkit-touch-callout: none; }
.slide, .slide * { -webkit-user-select: none; user-select: none; }
.slide video { -webkit-touch-callout: none; }

/* ── Tua mượt: núm kéo + bong bóng thời gian ── */
.progress { height: 3px; transition: height .12s ease; }
.progress::before { top: -14px; bottom: -14px; } /* vùng chạm rộng hơn */
.progress .knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) scale(0); transition: transform .12s ease;
  pointer-events: none;
}
.slide.scrubbing .progress { height: 6px; }
.slide.scrubbing .progress .knob { transform: translate(-50%, -50%) scale(1); }
.scrub-time {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  z-index: 6; pointer-events: none;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .15s ease;
}
.slide.scrubbing .scrub-time { opacity: 1; }

/* Sheet gọn: cao theo nội dung (menu tốc độ) */
.sheet.compact { height: auto; }
.sheet.compact .sheet-body { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }

/* ── Khám phá v2 (taste pass): rail featured · scrim chữ · skeleton · phản hồi chạm ── */
/* Rail Thịnh hành là "featured": thẻ to hơn lưới (172 vs ~117) */
.trend-wrap .hrow { gap: 12px; }
.trend-wrap .hrow .vcell { width: 172px; }
.trend-wrap .vtitle { font-size: 13px; }
/* Scrim chân poster: chữ views/thể loại luôn đủ tương phản trên mọi ảnh */
.vthumb .cap {
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.42) 45%, rgba(0,0,0,.88));
}
.vthumb > .tag { z-index: 3; }
/* Phản hồi chạm (tactile) */
.vcell { -webkit-tap-highlight-color: transparent; }
.vthumb { transition: transform .16s ease, opacity .16s ease; }
.vcell:active .vthumb { transform: scale(.965); opacity: .85; }
.chip { transition: transform .14s ease, background .14s ease, color .14s ease; }
.chip:active { transform: scale(.95); }
/* Skeleton khớp hình dạng thẻ thật */
.sk, .skline { position: relative; overflow: hidden; background: #17171a; border-radius: 12px; }
.sk { aspect-ratio: 3 / 4; }
.skline { height: 64px; margin-bottom: 10px; }
.sk::after, .skline::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.055) 50%, transparent 70%);
  animation: sk-slide 1.3s infinite;
}
.skrail { width: 172px; flex: 0 0 auto; }
@keyframes sk-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sk::after, .skline::after { animation: none; }
}

/* ── Tên phim to & đậm hơn (đồng bộ mọi trang) ── */
.vtitle { font-size: 13.5px; font-weight: 700; color: #f0f0f3; letter-spacing: -0.01em; }
.trend-wrap .vtitle { font-size: 15px; }
.meta-desc { font-size: 16px; font-weight: 700; line-height: 1.28; }
.srname { font-size: 18.5px; }
.srow .t { font-size: 15px; font-weight: 650; }

/* Mục Liên hệ trong Cài đặt */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 15px 2px; background: none; border: 0; cursor: pointer; text-decoration: none;
  color: #f0f0f3; font: inherit; font-size: 14.5px; font-weight: 600;
  border-top: 1px solid rgba(255,255,255,.07);
  -webkit-tap-highlight-color: transparent;
}
.set-row:first-child { border-top: 0; }
.set-row:active { opacity: .72; }
.set-row svg { color: var(--dim); }
.set-row-val { font-size: 12.5px; font-weight: 500; color: var(--dim); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }