/* Ke video cua be.
   Lop son rieng cua app video, dat tren he thong chung /assets/app.css.
   App nay chi doi MAU (nhan tim, 8 tong danh muc); hinh khoi, khoang cach va
   chu deu lay tu bien cua app.css de ca site cung mot kieu.

   Moi ten lop o day deu bi JavaScript (assets/*.js) hoac PHP (shelf-view.php,
   fragment.php) goi den — khong doi ten lop nao.

   Rang buoc iPad cu (iOS 12 Safari) giong app.css: khong `gap` trong flexbox,
   khong `aspect-ratio`, khong `place-items`, khong `dvh`. */

/* 8 tong danh muc lay tu cung ho mau voi cac app khac trong site. */
:root {
  --honey:#B45309; --honey-soft:#FFF2E0;
  --scarf:#B3172C; --scarf-soft:#FFEBEF;
  --meadow:#15803D; --meadow-soft:#E6F7EF;
  --sky:#0369A1;   --sky-soft:#E6F3FD;
  --berry:#D81B63; --berry-soft:#FFEBF3;
  --plum:#6D28D9;  --plum-soft:#F3ECFF;
  --teal:#0F766E;  --teal-soft:#E4F7F7;
  --clay:#C2410C;  --clay-soft:#FFEDE4;
  --on-tone:#FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --honey:#FFAE5C; --honey-soft:#3A2410;
    --scarf:#FF6B7F; --scarf-soft:#36141B;
    --meadow:#5BD3A0; --meadow-soft:#11301F;
    --sky:#7FC0FA;   --sky-soft:#102942;
    --berry:#FF86B4; --berry-soft:#3C1425;
    --plum:#B79CFF;  --plum-soft:#2A1B44;
    --teal:#4CC9C1;  --teal-soft:#103030;
    --clay:#FF9A73;  --clay-soft:#3A1E11;
    --on-tone:#140C1A;
  }
}

[data-tone="honey"]  { --tone:var(--honey);  --tone-soft:var(--honey-soft); }
[data-tone="scarf"]  { --tone:var(--scarf);  --tone-soft:var(--scarf-soft); }
[data-tone="meadow"] { --tone:var(--meadow); --tone-soft:var(--meadow-soft); }
[data-tone="sky"]    { --tone:var(--sky);    --tone-soft:var(--sky-soft); }
[data-tone="berry"]  { --tone:var(--berry);  --tone-soft:var(--berry-soft); }
[data-tone="plum"]   { --tone:var(--plum);   --tone-soft:var(--plum-soft); }
[data-tone="teal"]   { --tone:var(--teal);   --tone-soft:var(--teal-soft); }
[data-tone="clay"]   { --tone:var(--clay);   --tone-soft:var(--clay-soft); }

html { touch-action:pan-x pan-y; }

body {
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
input, textarea { -webkit-user-select:text; user-select:text; }

/* ---------- Thanh tren ---------- */

.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center;
  padding:var(--s-3) var(--s-5); background:var(--surface);
  border-bottom:1px solid var(--edge);
  box-shadow:var(--shadow);
}
.topbar > * { margin-right:var(--s-4); }
.topbar > *:last-child { margin-right:0; }

.brand {
  display:flex; align-items:center; text-decoration:none; color:inherit;
  font-family:var(--font-head); font-weight:700; font-size:25px; white-space:nowrap;
}
.brand .play-badge {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; margin-right:var(--s-3);
  border-radius:var(--r-md); background:var(--accent-deep); color:var(--accent-ink);
}
.brand .play-badge svg { width:22px; height:22px; margin-left:2px; }
.brand em { font-style:normal; color:var(--accent-deep); }

/* Nut doi che do Xem / Nghe */
.mode {
  display:inline-flex; align-items:center; flex:none; margin-left:auto;
  min-height:var(--tap); padding:0 var(--s-4); border-radius:var(--r-pill);
  border:2px solid var(--accent); background:var(--surface); color:var(--accent-deep);
  font-weight:700; font-family:var(--font-head); font-size:16px;
  cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, color var(--dur) ease, transform .1s var(--ease);
}
.mode:hover { background:var(--accent-soft); }
.mode:active { transform:translateY(2px); }
.mode.on { background:var(--accent-deep); border-color:var(--accent-deep); color:var(--accent-ink); }
.mode-ico {
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:none; margin-right:var(--s-2);
}
.mode-ico svg { width:22px; height:22px; }

/* O tim kiem */
.search { flex:1; display:flex; max-width:440px; }
.search input {
  flex:1; min-width:0; min-height:var(--tap); margin-right:var(--s-2);
  padding:0 var(--s-5); border-radius:var(--r-pill);
  border:2px solid var(--edge-strong); background:var(--surface); color:var(--ink);
  font-size:16px;
  transition:border-color var(--dur) ease;
}
.search input::placeholder { color:var(--ink-soft); font-size:15px; }
.search input:focus { border-color:var(--accent); }
.search button {
  display:flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); flex:none;
  border:2px solid var(--accent-deep); border-radius:var(--r-pill);
  background:var(--accent-deep); color:var(--accent-ink);
  cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, transform .1s var(--ease);
}
.search button:hover { background:var(--accent); border-color:var(--accent); }
.search button:active { transform:translateY(2px); }
.search button svg { width:22px; height:22px; }

main { display:block; padding:0 var(--s-5) 84px; }
.wrap { max-width:1240px; margin:0 auto; }

/* ---------- Cong danh muc ---------- */

.gates {
  display:grid; grid-gap:var(--s-4); gap:var(--s-4); margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}
.gate {
  display:grid; grid-gap:var(--s-2); gap:var(--s-2); justify-items:center; text-align:center;
  padding:18px var(--s-3) var(--s-4); text-decoration:none; color:inherit;
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--edge); box-shadow:var(--shadow);
  transition:transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.gate:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--tone,var(--accent)); }
.gate:active { transform:translateY(0); }
.gate-icon {
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:var(--r-lg);
  background:var(--tone,var(--accent-deep)); color:var(--on-tone);
}
.gate-icon svg { width:32px; height:32px; }
.gate b {
  font-family:var(--font-head); font-weight:700; font-size:17.5px; line-height:var(--lh-tight);
  color:var(--ink);
}
.gate small {
  color:var(--tone,var(--accent-deep)); font-size:13px; font-weight:700;
  background:var(--tone-soft,var(--accent-soft)); padding:3px var(--s-3); border-radius:var(--r-pill);
}

/* ---------- Ke video ---------- */

.shelf { margin-top:var(--s-7); padding-top:var(--s-3); border-top:1px solid var(--edge); }
.shelf:first-of-type { border-top:none; margin-top:36px; }

.shelf-head { display:flex; align-items:center; margin-bottom:18px; }
.shelf-head > * { margin-right:var(--s-3); }
.shelf-head > *:last-child { margin-right:0; }
.shelf-head .dot {
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  border-radius:var(--r-md); background:var(--tone,var(--accent-deep)); color:var(--on-tone);
}
.shelf-head .dot svg { width:22px; height:22px; }
.shelf-head h2 {
  font-family:var(--font-head); margin:0; line-height:var(--lh-tight);
  font-size:23px;
  font-size:clamp(23px,3.4vw,28px);
  color:var(--ink); font-weight:700;
}
.shelf-head .hint { color:var(--ink-soft); font-size:15px; }
.shelf-head .more {
  margin-left:auto; margin-right:0; flex:none; text-decoration:none;
  color:var(--accent-deep); background:var(--surface); border:2px solid var(--accent);
  padding:0 var(--s-5); min-height:44px; display:inline-flex; align-items:center;
  border-radius:var(--r-pill); font-size:15px; font-weight:700; font-family:var(--font-head);
  transition:background var(--dur) ease, color var(--dur) ease, transform .1s var(--ease);
}
.shelf-head .more:hover { background:var(--accent); color:var(--accent-ink); }
.shelf-head .more:active { transform:translateY(2px); }

.row {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,265px);
  grid-gap:18px; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6px var(--s-4); margin:-6px -6px 0; scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.row::-webkit-scrollbar { height:6px; }
.row::-webkit-scrollbar-thumb { background:var(--edge-strong); border-radius:var(--r-pill); }
.row > .card { scroll-snap-align:start; }

.grid {
  display:grid; grid-gap:22px; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}

/* ---------- Cuon them ---------- */

.feed-foot {
  display:flex; flex-direction:column; align-items:center;
  padding:36px var(--s-4) var(--s-3);
}
.feed-foot > * { margin-bottom:var(--s-3); }
.feed-foot > *:last-child { margin-bottom:0; }
.more-btn {
  min-height:var(--tap); padding:0 36px;
  font-family:var(--font-head); font-weight:700; font-size:17px;
  color:var(--accent-ink); background:var(--accent-deep);
  border:2px solid var(--accent-deep); border-radius:var(--r-pill);
  cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, transform .1s var(--ease);
}
.more-btn:hover { background:var(--accent); border-color:var(--accent); }
.more-btn:active { transform:translateY(2px); }
.feed-state { margin:0; min-height:24px; font-size:16px; color:var(--ink-soft); text-align:center; }

/* ---------- The video ---------- */

.card {
  display:block; text-decoration:none; color:inherit; border-radius:var(--r-lg);
  background:var(--surface); padding:var(--s-2) var(--s-2) var(--s-3);
  border:1px solid var(--edge); box-shadow:var(--shadow);
  transition:transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}
/* Hop ty le 16:9 thay cho aspect-ratio (Safari duoi 15 khong hieu). */
.card .thumb {
  position:relative; height:0; padding-top:56.25%;
  border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--edge);
}
.card .thumb img {
  position:absolute; top:0; left:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Nut chay tren thumbnail */
.card .go {
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(36,17,40,.2); opacity:0; transition:opacity .18s var(--ease);
}
.card .go span {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:var(--r-pill);
  background:#FFFFFF; color:var(--accent-deep);
  transform:scale(.86); transition:transform .18s var(--ease);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.card .go svg { width:26px; height:26px; margin-left:3px; }
.card:hover .go, .card:focus-visible .go { opacity:1; }
.card:hover .go span, .card:focus-visible .go span { transform:scale(1); }

@media (hover: none) {
  .card .go {
    top:auto; right:var(--s-2); bottom:var(--s-2); left:auto; background:none; opacity:1;
    display:block; width:46px; height:46px;
  }
  .card .go span {
    width:46px; height:46px; transform:none;
    box-shadow:0 3px 10px rgba(36,17,40,.4);
  }
  .card .go svg { width:24px; height:24px; }
  .up-list .card .go { display:none; }
}

.card:hover { transform:translateY(-3px); border-color:var(--tone,var(--accent)); box-shadow:var(--shadow-lift); }
.card:active { transform:translateY(0); }

.card b {
  display:-webkit-box; margin-top:var(--s-3);
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-md); line-height:1.32;
  color:var(--ink);
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--dur) ease;
}
.card .meta { min-width:0; padding:0 2px; }
.card small {
  display:block; color:var(--ink-soft); font-size:var(--fs-sm); margin-top:var(--s-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card .flag {
  position:absolute; left:var(--s-2); bottom:var(--s-2);
  padding:var(--s-1) var(--s-3); border-radius:var(--r-pill);
  background:var(--meadow); color:var(--on-tone); font-size:11.5px; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.card:hover b { color:var(--tone,var(--accent-deep)); }

/* Nhan "khong chay nen" */
.card .flag.off { display:none; background:var(--ink-soft); color:var(--surface); }
body.mode-listen .card .flag.off { display:block; }

/* ---------- Dau trang cua man hinh danh muc ---------- */

.gate-head {
  display:flex; align-items:center; flex-wrap:wrap;
  margin-top:28px; padding:var(--s-5); border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--edge);
  box-shadow:var(--shadow);
}
.gate-head > * { margin:0 18px var(--s-2) 0; }
.gate-head > *:last-child { margin-right:0; }
.gate-head .gate-icon { width:62px; height:62px; flex:none; }
.gate-head .gate-icon svg { width:34px; height:34px; }
.gate-head h1 {
  font-family:var(--font-head); margin:0; line-height:var(--lh-tight);
  font-size:25px;
  font-size:clamp(25px,4.2vw,36px);
  color:var(--ink); font-weight:700;
}
.gate-head p { margin:var(--s-1) 0 0; color:var(--ink-soft); font-size:15.5px; }
.back {
  display:inline-flex; align-items:center; min-height:var(--tap);
  padding:0 var(--s-5); margin-left:auto; border-radius:var(--r-pill);
  background:var(--surface); border:2px solid var(--accent);
  text-decoration:none; color:var(--accent-deep); font-weight:700; font-family:var(--font-head);
  font-size:16px;
  transition:background var(--dur) ease, color var(--dur) ease, transform .1s var(--ease);
}
.back:hover { background:var(--accent); color:var(--accent-ink); }
.back:active { transform:translateY(2px); }
.back svg { width:20px; height:20px; margin-right:var(--s-2); }

/* ---------- Trang xem ---------- */

.watch { display:grid; grid-gap:var(--s-6); gap:var(--s-6); margin-top:var(--s-5); }
@media (min-width:1000px) { .watch { grid-template-columns:minmax(0,1fr) 360px; } }

/* O tai file tieng */
.grab-row { display:none; }
body.mode-listen .grab-row { display:block; margin-top:var(--s-4); }
.grab-row:empty { display:none; }

.grab {
  display:inline-flex; align-items:center;
  min-height:var(--tap); padding:0 var(--s-5); border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-deep);
  border:2px solid var(--accent);
  font-weight:700; font-family:var(--font-head); font-size:16px; text-decoration:none;
  transition:background var(--dur) ease, color var(--dur) ease, transform .1s var(--ease);
}
.grab svg { width:22px; height:22px; margin-right:var(--s-2); }
.grab:hover { background:var(--accent); color:var(--accent-ink); }
.grab:active { transform:translateY(2px); }

.watch h1 {
  font-family:var(--font-head); margin:var(--s-5) 0 6px; line-height:var(--lh-tight);
  font-size:22px;
  font-size:clamp(22px,3.5vw,30px);
  color:var(--ink); font-weight:700;
}
.watch .by { color:var(--ink-soft); font-size:15px; margin:0; }
.watch .by .in {
  color:var(--tone,var(--accent-deep)); font-weight:700;
  text-decoration:none; border-bottom:2px solid transparent;
}
.watch .by .in:hover { border-bottom-color:currentColor; }

.up h2 { font-family:var(--font-head); font-size:23px; margin:0 0 var(--s-4); color:var(--ink); font-weight:700; }
.up-list { display:grid; grid-gap:var(--s-4); gap:var(--s-4); }
.up-list .card {
  display:grid; grid-template-columns:150px minmax(0,1fr);
  grid-gap:var(--s-4); gap:var(--s-4); align-items:start;
  padding:var(--s-2);
}
.up-list .card .meta b { margin-top:0; font-size:15.5px; line-height:1.28; }
.up-list .card .go { display:none; }

/* ---------- Chot so cua bo me ---------- */

.chot {
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:var(--s-5);
  background:rgba(28,12,34,.7);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.chot[hidden] { display:none; }

.chot-hop {
  width:100%; max-width:330px; padding:28px var(--s-5);
  background:var(--surface); border-radius:var(--r-xl);
  box-shadow:0 24px 60px -16px rgba(28,12,34,.6);
  text-align:center; border:1px solid var(--edge);
}
.chot-hop > b {
  display:block; font-family:var(--font-head); font-size:25px; line-height:1.2;
  color:var(--ink);
}
.chot-hop > p { margin:6px 0 0; color:var(--ink-soft); font-size:15px; }

.chot-cham { display:flex; justify-content:center; margin:22px 0; }
.chot-cham i {
  width:16px; height:16px; border-radius:50%; margin:0 7px;
  border:2px solid var(--edge-strong); background:transparent;
  transition:background .12s var(--ease), border-color .12s var(--ease), transform .12s var(--ease);
}
.chot-cham i.day { background:var(--accent-deep); border-color:var(--accent-deep); transform:scale(1.15); }

.chot-phim { display:grid; grid-template-columns:repeat(3,1fr); grid-gap:var(--s-2); gap:var(--s-2); }
.chot-phim button {
  min-height:58px; border:2px solid var(--edge-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink);
  font-family:var(--font-head); font-weight:700; font-size:25px;
  cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, border-color var(--dur) ease, transform .1s var(--ease);
}
.chot-phim button:hover { background:var(--accent-soft); border-color:var(--accent); }
.chot-phim button:active { transform:translateY(2px); }
.chot-phim .chot-huy, .chot-phim .chot-xoa { font-size:16px; color:var(--ink-soft); }

.chot-hop small {
  display:block; margin-top:22px; color:var(--ink-soft); font-size:13.5px; line-height:1.5;
}
.chot-hop small b { color:var(--accent-deep); font-size:18px; letter-spacing:.14em; }

@keyframes chot-lac {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-8px); }
  40%,80% { transform:translateX(8px); }
}
.chot-hop.sai { animation:chot-lac .32s; }

/* ---------- Trang trong ---------- */

.note {
  padding:56px var(--s-5); text-align:center; color:var(--ink-soft);
  background:var(--surface); border-radius:var(--r-xl); margin-top:28px;
  border:2px dashed var(--edge-strong); box-shadow:var(--shadow);
}
.note strong {
  display:block; margin-bottom:var(--s-2);
  font-family:var(--font-head); font-size:25px; color:var(--ink);
}
.note a { color:var(--accent-deep); font-weight:700; text-decoration:none; }
.note a:hover { text-decoration:underline; }

footer {
  max-width:1240px; margin:68px auto 0; padding:26px var(--s-5);
  border-top:1px solid var(--edge); text-align:center;
  color:var(--ink-soft); font-size:var(--fs-sm);
}
footer a { color:var(--accent-deep); text-decoration:none; font-weight:700; }
footer a:hover { text-decoration:underline; }

/* ---------- Trinh phat ---------- */

.stage {
  position:relative; height:0; padding-top:56.25%; background:#000;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.stage iframe, .stage video { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0; }
/* Safari cu chi biet :-webkit-full-screen; de chung mot rule thi ca hai cung bi bo. */
.stage:-webkit-full-screen { border-radius:0; height:100%; padding-top:0; }
.stage:fullscreen { border-radius:0; height:100%; padding-top:0; }

.stage.faux-full {
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:100;
  width:100vw; height:100vh; max-width:none; padding-top:0;
  border-radius:0;
}
body.has-faux-full { overflow:hidden; }
.stage-gone {
  height:0; padding-top:56.25%; border-radius:var(--r-lg);
  background:var(--surface); border:2px dashed var(--edge-strong);
}
body > .stage { width:100%; height:100%; padding-top:0; border-radius:0; }

.shield { position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer; }

.veil {
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.62); pointer-events:none;
}
.veil[hidden] { display:none; }
.veil-play {
  display:flex; align-items:center; justify-content:center; width:78px; height:78px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.95); color:var(--accent-deep);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.veil-play svg { width:36px; height:36px; margin-left:4px; }

/* ---------- Che do chi nghe ---------- */
/* Thumbnail phu kin vung player. Khong hien tieu de trong lop phu nay theo
   yeu cau cua nguoi dung; tieu de va nut tai M4A van o ngay ben duoi. */

.cover {
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:3; display:none;
  align-items:center; justify-content:center;
  padding:0; text-align:center; pointer-events:none;
  background:#130E1C; color:#fff; overflow:hidden;
}
.stage.listen .cover { display:flex; }
.stage.listen .veil { display:none; }

.cover .art {
  display:grid; align-items:center; justify-items:center;
  width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0;
}
.cover .art > * { grid-area:1 / 1; }

.cover .shot {
  position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
  border:0; overflow:hidden; background:#0B0712;
}
.cover .shot img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(0.85);
}
.cover .shot i { display:none; }
.cover .shot.trong img { display:none; }
.cover .shot.trong i {
  display:flex; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%;
  background:#1A1127; color:var(--accent);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.cover .shot i svg { width:52%; height:52%; }

.cover b, .cover small { display:none; }

.cover-play {
  display:none; align-items:center; justify-content:center; width:76px; height:76px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.95); color:var(--accent-deep);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  z-index:2;
}
.cover-play svg { width:34px; height:34px; margin-left:3px; }
.stage.listen.paused .cover-play { display:flex; }
.stage.paused .cover .shot { opacity:.4; }

/* Thanh dieu khien */
.bar {
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; padding:var(--s-3) var(--s-4);
  background:linear-gradient(transparent,rgba(18,10,24,.88)); color:#fff;
}
.bar > * { margin-right:var(--s-2); }
.bar > *:last-child { margin-right:0; }
.bar button {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.2); color:#fff; cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease;
}
.bar button:hover { background:rgba(255,255,255,.36); }
.bar button[hidden] { display:none; }
.bar button[aria-pressed="true"] { background:var(--accent-deep); color:var(--accent-ink); }
.bar button svg { width:22px; height:22px; }
.bar time { flex:none; font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.bar input[type=range] {
  flex:1; min-width:0; height:26px; margin:0 var(--s-2) 0 0; background:transparent;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.bar input[type=range]::-webkit-slider-runnable-track {
  height:7px; border-radius:var(--r-pill); background:rgba(255,255,255,.35);
}
.bar input[type=range]::-moz-range-track {
  height:7px; border-radius:var(--r-pill); background:rgba(255,255,255,.35);
}
.bar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; margin-top:-6.5px;
  width:20px; height:20px; border-radius:var(--r-pill); background:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.bar input[type=range]::-moz-range-thumb {
  border:0; width:20px; height:20px; border-radius:var(--r-pill); background:var(--accent);
}

/* Man ket thuc video */
.ended {
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:grid; grid-gap:18px; gap:18px; align-items:center; justify-items:center;
  align-content:center; padding:var(--s-5); background:rgba(18,10,24,.95); color:#fff;
  text-align:center; grid-template-columns:minmax(0,1fr); overflow:auto;
}
.ended p, .ended .acts { max-width:100%; }
.ended .acts { width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
.ended .acts > * { margin:0 6px var(--s-2); }
.ended p { margin:0; font-family:var(--font-head); font-size:24px; font-weight:700; }
.ended.snag p { color:var(--accent); }
.ended.snag p::before {
  content:""; display:block; width:48px; height:4px; border-radius:4px;
  background:var(--accent); margin:0 auto var(--s-3);
}
.ended button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s-5); border:0; border-radius:var(--r-pill);
  background:var(--accent-deep); color:var(--accent-ink);
  font-weight:700; font-family:var(--font-head);
  font-size:16.5px; cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, transform .1s var(--ease);
}
.ended button:hover { background:var(--accent); }
.ended button:active { transform:translateY(2px); }
.ended button.ghost { background:rgba(255,255,255,.22); color:#fff; }
.ended button.ghost:hover { background:rgba(255,255,255,.36); }
.ended button.next { max-width:88%; }
.ended button.next span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ended button svg { width:20px; height:20px; margin-right:var(--s-2); }

/* ---------- Dien thoai ---------- */

@media (max-width:560px) {
  main { padding:0 var(--s-3) 76px; }

  .topbar { flex-wrap:wrap; padding:10px var(--s-4); }
  .topbar > * { margin-right:var(--s-2); }
  .brand { font-size:22px; }
  .mode { padding:0 var(--s-4); font-size:15px; }
  .search { flex-basis:100%; max-width:none; margin-top:var(--s-2); }

  /* 2 o mot hang tren mobile, do cao vua phai de lo hang video ngay ben duoi */
  .gates { grid-template-columns:repeat(2,1fr); grid-gap:var(--s-3); gap:var(--s-3); margin-top:18px; }
  .gate { padding:var(--s-3) 10px var(--s-3); }
  .gate-icon { width:48px; height:48px; border-radius:var(--r-md); }
  .gate-icon svg { width:26px; height:26px; }
  .gate b { font-size:15.5px; }
  .gate small { font-size:var(--fs-xs); padding:2px 10px; }

  .shelf { margin-top:var(--s-6); padding-top:10px; }
  .shelf-head { flex-wrap:wrap; margin-bottom:var(--s-3); }
  .shelf-head h2 { flex:1; font-size:21px; }
  .shelf-head .hint { flex-basis:100%; order:3; font-size:13.5px; margin:var(--s-2) 0 0; }
  .shelf-head .more { order:2; min-height:42px; padding:0 var(--s-4); font-size:var(--fs-sm); }

  .row { grid-auto-columns:minmax(195px,64vw); grid-gap:var(--s-3); gap:var(--s-3); }
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-gap:var(--s-3); gap:var(--s-3); }

  .gate-head { padding:18px; }
  .back { margin-left:0; min-height:42px; }

  .up-list .card { grid-template-columns:125px minmax(0,1fr); }

  .bar { flex-wrap:wrap; padding:var(--s-2) var(--s-3); }
  .bar input[type=range] { order:-1; flex-basis:100%; margin-right:0; margin-bottom:var(--s-1); }
  .bar time { margin-right:auto; font-size:13px; }
  .bar button { width:42px; height:42px; }
}

@media (max-width:390px) {
  .topbar { padding:var(--s-2) var(--s-3); }
  .brand { font-size:20px; }
  .brand .play-badge { width:40px; height:40px; border-radius:var(--r-sm); }
  .mode { padding:0 var(--s-3); font-size:var(--fs-sm); }
  .row { grid-auto-columns:minmax(185px,74vw); }
}

@media (max-width:360px) {
  .mode { padding:0; width:var(--tap); justify-content:center; }
  .mode-ico { margin-right:0; }
  .mode-txt { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  .card:hover, .gate:hover { transform:none; }
  .chot-hop.sai { animation:none; }
}