:root{
    --void: #09090b;
    --surface: #131217;
    --surface-2: #1b1920;
    --line: #262229;
    --red: #ff2340;
    --red-deep: #6e0f1f;
    --red-glow: rgba(255,35,64,.38);
    --ink: #f4f0ee;
    --ink-dim: #9a939c;
    --ink-faint: #57525a;
    --display: 'Anton', sans-serif;
    --body: 'Manrope', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--ink);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font:inherit;}
  ol,ul{list-style:none;}
  ::selection{background:var(--red);color:#fff;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  ::-webkit-scrollbar{height:8px;width:8px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:8px;}

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

  .wrap{max-width:clamp(1360px, 82vw, 1900px);margin:0 auto;padding:0 20px;}

  /* ===== PALETTES (dùng chung cho poster / thumb / hero) ===== */
  .pal-0{--grad:linear-gradient(155deg,#2a0d14,#0c0a0d 70%);--pattern:repeating-linear-gradient(115deg, rgba(255,35,64,.10) 0 2px, transparent 2px 14px);--psize:auto;}
  .pal-1{--grad:linear-gradient(155deg,#1a0d20,#0c0a0d 70%);--pattern:radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.4px);--psize:14px 14px;}
  .pal-2{--grad:linear-gradient(155deg,#0d1a22,#0c0a0d 70%);--pattern:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);--psize:18px 18px;}
  .pal-3{--grad:linear-gradient(155deg,#241016,#0c0a0d 70%);--pattern:repeating-linear-gradient(-115deg, rgba(255,35,64,.10) 0 2px, transparent 2px 14px);--psize:auto;}
  .pal-4{--grad:linear-gradient(155deg,#180d24,#0c0a0d 70%);--pattern:radial-gradient(circle at 30% 30%, rgba(255,35,64,.16), transparent 60%);--psize:auto;}
  .pal-5{--grad:linear-gradient(155deg,#1c1418,#0c0a0d 70%);--pattern:repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 16px);--psize:auto;}
  .pattern{position:absolute;inset:0;background-image:var(--pattern);background-size:var(--psize,auto);}
  .motif svg,.slide-motif svg{width:100%;height:100%;display:block;}

  /* ===== NAV ===== */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(9,9,11,.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;align-items:center;gap:36px;
    height:72px;
  }
  .logo{
    font-family:var(--display);
    font-size:28px;letter-spacing:1px;
    display:flex;align-items:center;gap:2px;
    flex-shrink:0;
  }
  .logo span{color:var(--red);}
  .nav-links{display:flex;gap:28px;flex:1;align-self:stretch;align-items:center;}
  .nav-links a{
    font-size:14px;font-weight:600;color:var(--ink-dim);
    position:relative;padding:6px 0;
    transition:color .2s;
  }
  .nav-links a:hover,.nav-links a.active{color:var(--ink);}
  .nav-links a.active::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:var(--red);border-radius:2px;
  }
  .search-box{
    display:flex;align-items:center;gap:8px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:100px;padding:9px 16px;width:230px;
    transition:border-color .2s, width .25s;
  }
  .search-box:focus-within{border-color:var(--red);width:280px;}
  .search-box svg{flex-shrink:0;opacity:.6;}
  .search-box input{
    background:none;border:none;outline:none;color:var(--ink);
    font-size:13px;width:100%;font-family:var(--body);
  }
  .search-box input::placeholder{color:var(--ink-faint);}
  .burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);transition:.18s;}
  .burger[aria-expanded="true"]{border-color:var(--red);color:var(--red);}

  /* ===== HERO ===== */
  .hero{
    position:relative;height:460px;overflow:hidden;
    margin-top:32px;border-radius:18px;
    border:1px solid var(--line);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  }
  .slide{
    position:absolute;inset:0;
    opacity:0;transform:scale(1.04);
    transition:opacity 1s ease, transform 1.4s ease;
    pointer-events:none;
  }
  .slide.on{opacity:1;transform:scale(1);pointer-events:auto;}
  .slide-bg{position:absolute;inset:0;background:var(--grad);}
  .slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .slide-fade{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 60% 90% at 78% 30%, var(--red-glow), transparent 60%),
      linear-gradient(100deg, #0c0b0e 30%, transparent 70%);
  }
  .slide-motif{
    position:absolute;right:-30px;top:50%;transform:translateY(-50%);
    width:400px;height:400px;opacity:.16;color:var(--red);
  }
  .slide-body{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:center;
    max-width:520px;padding:0 40px;
  }
  .eyebrow{
    display:flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:12px;letter-spacing:2px;
    color:var(--red);text-transform:uppercase;margin-bottom:18px;
  }
  .eyebrow::before{content:'';width:26px;height:2px;background:var(--red);}
  .hero-title{
    font-family:var(--display);
    font-size:clamp(30px,3.6vw,46px);
    line-height:0.98;letter-spacing:.5px;
    margin-bottom:16px;
    text-shadow:0 4px 40px rgba(0,0,0,.5);
  }
  .hero-meta{
    display:flex;align-items:center;gap:14px;
    font-family:var(--mono);font-size:12.5px;color:var(--ink-dim);
    margin-bottom:16px;
  }
  .rating-pill{
    display:flex;align-items:center;gap:5px;color:var(--red);font-weight:700;
  }
  .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
  .hero-desc{
    font-size:13.5px;line-height:1.65;color:var(--ink-dim);
    margin-bottom:22px;max-width:440px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-genres{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;}
  .pill{
    font-size:12px;font-weight:600;padding:6px 14px;
    border:1px solid var(--line);border-radius:100px;color:var(--ink-dim);
    background:rgba(255,255,255,.02);transition:.18s;
  }
  .pill:hover{border-color:var(--red);color:var(--red);}
  .hero-actions{display:flex;gap:14px;}
  .btn-play{
    display:flex;align-items:center;gap:9px;
    background:var(--red);color:#fff;font-weight:800;font-size:13.5px;
    padding:13px 26px;border-radius:8px;
    box-shadow:0 10px 30px -8px var(--red-glow);
    transition:transform .18s, box-shadow .18s;
  }
  .btn-play:hover{transform:translateY(-2px);box-shadow:0 14px 34px -6px var(--red-glow);}
  .btn-ghost{
    display:flex;align-items:center;gap:9px;
    background:rgba(255,255,255,.05);color:var(--ink);
    font-weight:700;font-size:13.5px;padding:13px 22px;border-radius:8px;
    border:1px solid var(--line);
    transition:background .18s, border-color .18s;
  }
  .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:#3a3540;}

  .hero-dots{
    position:absolute;left:40px;bottom:22px;z-index:3;
    display:flex;gap:8px;
  }
  .hero-dots button{
    width:34px;height:3px;background:var(--line);border-radius:2px;
    overflow:hidden;position:relative;
  }
  .hero-dots button i{
    position:absolute;inset:0;background:var(--red);
    transform:scaleX(0);transform-origin:left;
  }
  .hero-dots button.on i{animation:fillbar 7s linear forwards;}
  @keyframes fillbar{to{transform:scaleX(1);}}

  /* ===== TWO-COLUMN LAYOUT ===== */
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 336px;
    gap:44px;
    align-items:start;
  }
  .main-col{min-width:0;}
  .sidebar{min-width:0;}

  /* ===== SECTIONS ===== */
  .section{padding:48px 0 8px;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:22px;
  }
  .section-title{
    font-family:var(--display);font-size:24px;letter-spacing:.5px;
    display:flex;align-items:center;gap:12px;
  }
  .section-title .bar{width:4px;height:20px;background:var(--red);border-radius:2px;}
  .scroll-controls{display:flex;gap:8px;}
  .scroll-controls button{
    width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    color:var(--ink-dim);transition:.18s;
  }
  .scroll-controls button:hover{border-color:var(--red);color:var(--red);}

  .rail{
    display:flex;gap:20px;
    overflow-x:auto;overflow-y:hidden;
    padding:12px 4px 20px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .rail::-webkit-scrollbar{display:none;}

  /* ranked trending card */
  .rank-card{
    position:relative;flex:0 0 auto;display:flex;align-items:flex-end;
    width:210px;scroll-snap-align:start;
  }
  .rank-num{
    font-family:var(--display);font-size:96px;line-height:1;
    color:transparent; -webkit-text-stroke:1.5px var(--line);
    margin-right:-26px;z-index:1;user-select:none;
    transition:.25s;
  }
  .rank-card:hover .rank-num{-webkit-text-stroke:1.5px var(--red);}

  .poster{
    display:block;
    width:154px;height:216px;border-radius:10px;flex-shrink:0;
    position:relative;overflow:hidden;cursor:pointer;
    border:1px solid var(--line);
    transition:transform .25s ease, border-color .25s;
    background:var(--grad);
  }
  .poster:hover{transform:translateY(-6px);border-color:var(--red);}
  .poster .pattern{opacity:.5;}
  .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .poster .motif{
    position:absolute;bottom:10px;right:10px;width:50px;height:50px;
    opacity:.5;color:#fff;
  }
  .poster .badge{
    position:absolute;top:10px;left:10px;
    font-family:var(--mono);font-size:10.5px;font-weight:700;
    background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
    padding:4px 8px;border-radius:5px;color:var(--red);
    border:1px solid rgba(255,35,64,.3);
  }
  .poster .ep-tag{
    position:absolute;bottom:10px;left:10px;
    font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);
    background:rgba(0,0,0,.55);padding:3px 7px;border-radius:5px;
  }
  .poster .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%, rgba(0,0,0,.65) 100%);}
  .poster .play-btn{
    position:absolute;top:50%;left:50%;z-index:3;
    width:52px;height:52px;border-radius:50%;
    background:rgba(10,9,11,.6);backdrop-filter:blur(3px);
    border:2px solid var(--red);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translate(-50%,-50%) scale(.65);
    transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
    pointer-events:none;
  }
  .poster:hover .play-btn{
    opacity:1;transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 0 6px rgba(255,35,64,.14), 0 8px 22px -6px rgba(0,0,0,.6);
  }
  .poster .play-btn svg{width:18px;height:18px;margin-left:3px;}

  /* grid cards (updates) */
  .grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:22px 18px;
  }
  .grid .poster{width:100%;height:auto;aspect-ratio:154/216;}
  .card-title{margin-top:10px;font-size:13px;font-weight:700;line-height:1.35;}
  .card-title a:hover{color:var(--red);}
  .card-sub{margin-top:3px;font-size:11px;color:var(--ink-faint);font-family:var(--mono);}
  .grid-item{cursor:pointer;}

  /* genre pills row */
  .genre-row{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0 30px;}
  .genre-chip{
    padding:10px 20px;border-radius:100px;font-size:13px;font-weight:700;
    border:1px solid var(--line);color:var(--ink-dim);
    transition:.18s;
  }
  .genre-chip:hover{border-color:var(--red);color:var(--red);background:rgba(255,35,64,.06);}

  /* ===== SIDEBAR ===== */
  .sidebar{
    position:sticky;top:92px;
    margin-top:32px;
    display:flex;flex-direction:column;gap:24px;
  }
  .side-card{
    background:var(--surface);border:1px solid var(--line);
    border-radius:14px;padding:18px;
  }
  .side-card-title{
    font-family:var(--display);font-size:19px;letter-spacing:.4px;
    display:flex;align-items:center;gap:10px;margin-bottom:16px;
  }
  .side-card-title .bar{width:3px;height:16px;background:var(--red);border-radius:2px;}

  .top10-tabs{
    display:flex;gap:4px;background:var(--surface-2);
    border-radius:10px;padding:4px;margin-bottom:6px;
  }
  .top10-tabs .tab{
    flex:1;min-width:0;text-align:center;padding:9px 4px;border-radius:8px;
    font-size:12px;font-weight:700;color:var(--ink-dim);transition:.18s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .top10-tabs .tab.on{background:var(--red);color:#fff;}
  .top10-tabs .tab:not(.on):hover{color:var(--ink);}

  .top10-item{
    display:flex;align-items:center;gap:12px;padding:12px 0;
    border-bottom:1px solid var(--line);cursor:pointer;
  }
  .top10-item:last-child{border-bottom:none;}
  .top10-rank{
    font-family:var(--display);font-size:28px;width:28px;flex-shrink:0;
    color:transparent;-webkit-text-stroke:1.3px var(--line);text-align:center;
  }
  .top10-item.top3 .top10-rank{-webkit-text-stroke:1.3px var(--red);color:rgba(255,35,64,.12);}
  .top10-thumb{
    display:block;
    width:48px;height:66px;border-radius:6px;flex-shrink:0;position:relative;
    overflow:hidden;border:1px solid var(--line);background:var(--grad);
  }
  .top10-thumb .pattern{opacity:.5;}
  .top10-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .top10-thumb .motif{position:absolute;bottom:1px;right:1px;width:20px;height:20px;opacity:.5;color:#fff;}
  .top10-thumb .play-btn{
    position:absolute;top:50%;left:50%;z-index:3;
    width:26px;height:26px;border-radius:50%;
    background:rgba(10,9,11,.6);border:1.5px solid var(--red);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translate(-50%,-50%) scale(.65);
    transition:opacity .2s ease, transform .2s ease;
    pointer-events:none;
  }
  .top10-thumb:hover .play-btn{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .top10-thumb .play-btn svg{width:10px;height:10px;margin-left:1.5px;}
  .top10-info{min-width:0;flex:1;}
  .top10-info .ttl{
    font-size:12.5px;font-weight:700;line-height:1.32;margin-bottom:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .top10-info .ttl a:hover{color:var(--red);}
  .top10-info .meta{
    display:flex;align-items:center;gap:6px;font-family:var(--mono);
    font-size:10.5px;color:var(--ink-faint);
  }
  .top10-info .meta .rate{color:var(--red);font-weight:700;display:flex;align-items:center;gap:2px;}

  .genre-mini{display:flex;flex-wrap:wrap;gap:8px;}
  .genre-mini a{
    font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:100px;
    border:1px solid var(--line);color:var(--ink-dim);
  }
  .genre-mini a:hover{border-color:var(--red);color:var(--red);}

  .trust-card{
    border-radius:14px;overflow:hidden;position:relative;padding:22px;
    background:linear-gradient(155deg,#2a0d14,#0c0a0d 75%);
    border:1px solid var(--line);
  }
  .trust-card::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 85% 15%, var(--red-glow), transparent 55%);
  }
  .trust-card h3{position:relative;font-family:var(--display);font-size:18px;margin-bottom:8px;letter-spacing:.3px;}
  .trust-card p{position:relative;font-size:12px;color:var(--ink-dim);line-height:1.6;margin-bottom:14px;}
  .trust-card a{
    position:relative;display:inline-block;background:var(--red);color:#fff;font-weight:700;
    font-size:12px;padding:9px 18px;border-radius:7px;
  }

  /* footer: xem khối FOOTER bên dưới */

  /* ===== TOOLTIP PREVIEW ===== */
  #tooltip{
    position:fixed;z-index:999;width:280px;
    background:var(--surface-2);border:1px solid var(--line);
    border-radius:12px;overflow:hidden;
    box-shadow:0 24px 60px -12px rgba(0,0,0,.7);
    opacity:0;transform:translateY(8px) scale(.97);
    transition:opacity .16s ease, transform .16s ease;
    pointer-events:none;
  }
  #tooltip.show{opacity:1;transform:translateY(0) scale(1);}
  #tooltip .tt-top{
    height:5px;
    background:linear-gradient(90deg, var(--red-deep), var(--red) 45%, var(--red-deep));
  }
  #tooltip .tt-body{padding:16px 16px 14px;}
  #tooltip .tt-title{font-family:var(--display);font-size:19px;letter-spacing:.3px;line-height:1.1;margin-bottom:8px;}
  #tooltip .tt-meta{
    display:flex;align-items:center;gap:8px;font-family:var(--mono);
    font-size:11.5px;color:var(--ink-dim);margin-bottom:10px;
  }
  #tooltip .tt-meta .rate{color:var(--red);font-weight:700;display:flex;gap:4px;align-items:center;}
  #tooltip .tt-genres{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
  #tooltip .tt-genres span{
    font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:100px;
    background:rgba(255,35,64,.1);color:#ff6b7d;border:1px solid rgba(255,35,64,.22);
  }
  #tooltip .tt-desc{font-size:12.5px;line-height:1.6;color:var(--ink-dim);margin-bottom:14px;}
  #tooltip .tt-actions{display:flex;gap:8px;}
  #tooltip .tt-actions span{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:12px;font-weight:700;padding:9px 0;border-radius:7px;
  }
  #tooltip .tt-play{background:var(--red);color:#fff;}
  #tooltip .tt-add{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line);}

  /* ===== KHỐI THỂ LOẠI (gs-*) =====
     Độc lập hoàn toàn: chỉ dùng class tiền tố gs-, phạm vi trong .gs,
     chỉ mượn biến màu/palette (--red, --line, .pal-N). Không dùng chung .grid/.poster/.section. */
  .gs{--gs-gap:18px;--gs-r:12px;padding:48px 0 8px;scroll-margin-top:90px;}
  .gs a{color:inherit;text-decoration:none;}
  .gs ul{list-style:none;}
  .gs [hidden]{display:none !important;}

  .gs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
  .gs-headline{display:flex;align-items:center;gap:14px;min-width:0;flex:1;}
  .gs-emblem{
    flex-shrink:0;width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;color:var(--red);
    background:rgba(255,35,64,.08);border:1px solid rgba(255,35,64,.28);
  }
  .gs-emblem svg{width:22px;height:22px;}
  .gs-title{font-family:var(--display);font-size:24px;letter-spacing:.5px;line-height:1.1;}
  .gs-lede{margin-top:5px;font-size:12.5px;color:var(--ink-faint);}
  .gs-more{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:700;color:var(--ink-dim);transition:color .2s, gap .2s;
  }
  .gs-more:hover{color:var(--red);gap:9px;}
  .gs-ctrl{display:flex;gap:8px;flex-shrink:0;}
  .gs-ctrl button{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:.18s;
  }
  .gs-ctrl button:hover{border-color:var(--red);color:var(--red);}
  .gs-ctrl button:disabled{opacity:.3;pointer-events:none;}

  /* thành phần dùng chung trong khối */
  .gs-pattern{position:absolute;inset:0;background-image:var(--pattern);background-size:var(--psize,auto);opacity:.5;}
  .gs-motif{position:absolute;right:10px;bottom:10px;width:46px;height:46px;color:#fff;opacity:.4;}
  .gs-motif svg{display:block;width:100%;height:100%;}
  .gs-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));}
  .gs-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
  .gs-chip{
    position:absolute;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:700;
    padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
  }
  .gs-chip.rate{top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;color:#fff;border:1px solid rgba(255,35,64,.35);}
  .gs-chip.rate svg{width:10px;height:10px;color:var(--red);}
  .gs-chip.ep{left:10px;bottom:10px;color:var(--ink-dim);}
  .gs-play{
    position:absolute;top:50%;left:50%;z-index:3;width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(10,9,11,.6);border:2px solid var(--red);
    opacity:0;transform:translate(-50%,-50%) scale(.65);pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .gs-play svg{width:17px;height:17px;margin-left:3px;}
  .gs-poster:hover .gs-play,.gs-wide:hover .gs-play{
    opacity:1;transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 0 6px rgba(255,35,64,.14), 0 8px 22px -6px rgba(0,0,0,.6);
  }
  .gs-poster img,.gs-wide-media img,.gs-feature-media img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }

  /* thẻ poster */
  .gs-card{min-width:0;}
  .gs-poster{
    display:block;position:relative;aspect-ratio:154/216;border-radius:var(--gs-r);overflow:hidden;
    background:var(--grad);border:1px solid var(--line);
    transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  }
  .gs-poster:hover{transform:translateY(-6px);border-color:var(--red);box-shadow:0 18px 36px -18px var(--red-glow);}
  .gs-poster:hover img{transform:scale(1.06);}
  .gs-name{margin-top:10px;font-size:13.5px;font-weight:700;line-height:1.35;}
  .gs-name a:hover{color:var(--red);}
  .gs-sub{margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
  .gs-progress{margin-top:10px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;}
  .gs-progress i{display:block;height:100%;width:var(--p);border-radius:3px;background:linear-gradient(90deg,var(--red-deep),var(--red));}

  /* 1) CUNG ĐẤU: bento */
  .gs-bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px var(--gs-gap);}
  .gs-feature{
    grid-column:1 / span 2;grid-row:1 / span 2;
    position:relative;min-height:420px;border-radius:16px;overflow:hidden;isolation:isolate;
    background:var(--grad);border:1px solid var(--line);
    transition:border-color .25s, box-shadow .25s;
  }
  .gs-feature:hover{border-color:var(--red);box-shadow:0 24px 50px -24px var(--red-glow);}
  .gs-feature:hover img{transform:scale(1.05);}
  .gs-feature-media{position:absolute;inset:0;display:block;}
  .gs-feature-media::after{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(9,9,11,.05) 10%, rgba(9,9,11,.96) 78%);
  }
  .gs-feature-media .gs-motif{top:22px;right:22px;bottom:auto;width:110px;height:110px;opacity:.2;color:var(--red);}
  .gs-feature-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px;pointer-events:none;}
  .gs-feature-body a{pointer-events:auto;}
  .gs-kicker{
    display:inline-flex;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.8px;
    padding:4px 10px;border-radius:100px;background:var(--red);color:#fff;
  }
  .gs-feature h3{
    font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:.3px;
    margin:12px 0 8px;text-shadow:0 2px 24px rgba(0,0,0,.6);
  }
  .gs-feature h3 a:hover{color:var(--red);}
  .gs-feature-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-dim);}
  .gs-rate{display:inline-flex;align-items:center;gap:5px;color:var(--red);font-weight:700;}
  .gs-rate svg{width:12px;height:12px;}
  .gs-desc{
    margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-dim);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .gs-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:16px;
    background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:11px 20px;border-radius:8px;
    box-shadow:0 10px 26px -10px var(--red-glow);transition:transform .18s, box-shadow .18s;
  }
  .gs-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px var(--red-glow);}
  .gs-cta svg{width:12px;height:12px;}

  /* 2) HÀNH ĐỘNG: thẻ ngang chữ phủ ảnh */
  .gs-wides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gs-gap);}
  .gs-wide{
    position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;isolation:isolate;
    background:var(--grad);border:1px solid var(--line);
    transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  }
  .gs-wide:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 20px 40px -20px var(--red-glow);}
  .gs-wide:hover img{transform:scale(1.06);}
  .gs-wide-media{position:absolute;inset:0;display:block;}
  .gs-wide-media::after{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(9,9,11,.18) 0%, rgba(9,9,11,.12) 35%, rgba(9,9,11,.92) 100%);
  }
  .gs-wide-media .gs-motif{top:46px;right:14px;bottom:auto;width:58px;height:58px;opacity:.25;}
  .gs-wide-top{
    position:absolute;top:12px;left:12px;right:12px;z-index:2;
    display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none;
  }
  .gs-wide-top .gs-chip{position:static;}
  .gs-tags{display:flex;flex-wrap:wrap;gap:6px;}
  .gs-tag{
    font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.4px;color:#fff;
    padding:4px 9px;border-radius:100px;background:rgba(10,9,11,.62);border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(4px);
  }
  .gs-wide-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;pointer-events:none;}
  .gs-wide-body a{pointer-events:auto;}
  .gs-wide h3{font-size:16px;font-weight:800;line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.6);}
  .gs-wide h3 a:hover{color:var(--red);}
  .gs-wide-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);}

  /* 3) VIỄN TƯỞNG: rail ngang + thanh tiến độ */
  .gs-rail{
    display:flex;gap:var(--gs-gap);
    overflow-x:auto;overflow-y:hidden;padding:10px 4px 16px;
    scroll-snap-type:x proximity;scroll-padding-inline:4px;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  }
  .gs-rail::-webkit-scrollbar{display:none;}
  .gs-rail > li{flex:0 0 164px;scroll-snap-align:start;}

  @media(max-width:860px){
    .gs{padding-top:40px;}
    .gs-title{font-size:21px;}
    .gs-bento{grid-template-columns:repeat(3,minmax(0,1fr));}
    .gs-feature{grid-column:1 / -1;grid-row:auto;min-height:360px;}
    .gs-wides{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:640px){
    .gs-emblem{width:36px;height:36px;border-radius:10px;}
    .gs-emblem svg{width:19px;height:19px;}
    .gs-lede{display:none;}
    .gs-ctrl{display:none;}
    .gs-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
    .gs-feature{min-height:330px;}
    .gs-feature-body{padding:20px;}
    .gs-wides{
      grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(280px,80%);
      overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:6px 16px 14px;
      scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;
    }
    .gs-wides::-webkit-scrollbar{display:none;}
    .gs-wide{scroll-snap-align:start;}
    .gs-rail{gap:14px;margin:0 -16px;padding:10px 16px 14px;scroll-padding-inline:16px;}
    .gs-rail > li{flex-basis:132px;}
  }
  @media(hover:none){
    .gs-poster:hover,.gs-wide:hover{transform:none;}
    .gs-poster:hover .gs-play,.gs-wide:hover .gs-play{opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){
    .gs-poster,.gs-wide,.gs-poster img,.gs-wide-media img,.gs-feature-media img{transition-duration:.01ms !important;}
  }

  /* ===== TIN TỨC & GIỚI THIỆU PHIM ===== */
  #news,#cast{scroll-margin-top:90px;}
  #news [hidden],#cast [hidden]{display:none !important;}
  .more-link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:700;color:var(--ink-dim);transition:color .2s, gap .2s;
  }
  .more-link:hover{color:var(--red);gap:9px;}

  .news-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:stretch;}

  .news-media,.news-thumb{display:block;position:relative;background:var(--grad);overflow:hidden;}
  .news-media .pattern,.news-thumb .pattern{opacity:.5;}
  .news-media img,.news-thumb img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .news-media .motif,.news-thumb .motif{position:absolute;color:#fff;opacity:.35;}

  .news-tag{
    display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700;
    letter-spacing:.7px;padding:4px 10px;border-radius:100px;border:1px solid var(--line);color:var(--ink-dim);
    background:rgba(255,255,255,.03);
  }
  .news-tag.new{background:var(--red);border-color:var(--red);color:#fff;}
  .news-tag.best{border-color:var(--red);color:var(--red);background:rgba(255,35,64,.08);}
  .news-tag.review{color:#ff9aa8;border-color:rgba(255,35,64,.3);}

  .news-feature{
    position:relative;min-height:400px;border-radius:16px;overflow:hidden;
    background:var(--grad);border:1px solid var(--line);isolation:isolate;
    transition:border-color .25s, box-shadow .25s;
  }
  .news-feature:hover{border-color:var(--red);box-shadow:0 24px 50px -24px var(--red-glow);}
  .news-feature:hover .news-media img{transform:scale(1.05);}
  .news-feature .news-media{position:absolute;inset:0;}
  .news-feature .news-media::after{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(9,9,11,.05) 15%, rgba(9,9,11,.94) 80%);
  }
  .news-feature .news-media .motif{right:28px;top:26px;width:130px;height:130px;opacity:.2;color:var(--red);}
  .news-feature .news-body{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px;pointer-events:none;
  }
  .news-feature .news-body a{pointer-events:auto;}
  .news-feature h3{
    font-family:var(--display);font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:.3px;
    margin:14px 0 10px;text-shadow:0 2px 24px rgba(0,0,0,.6);
  }
  .news-feature h3 a:hover{color:var(--red);}
  .news-excerpt{
    max-width:580px;font-size:13.5px;line-height:1.65;color:var(--ink-dim);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .news-meta{
    display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;
    font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);
  }

  .news-list{display:flex;flex-direction:column;gap:14px;}
  .news-item{
    flex:1;display:grid;grid-template-columns:136px minmax(0,1fr);gap:16px;align-items:center;
    padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
    transition:border-color .25s, transform .25s cubic-bezier(.2,.8,.2,1), background .25s;
  }
  .news-item:hover{border-color:var(--red);background:var(--surface-2);transform:translateX(4px);}
  .news-item:hover .news-thumb img{transform:scale(1.08);}
  .news-thumb{aspect-ratio:16/10;border-radius:10px;}
  .news-thumb .motif{right:8px;bottom:8px;width:34px;height:34px;}
  .news-tagrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
  .news-item h3{
    margin:8px 0 6px;font-size:14.5px;font-weight:800;line-height:1.38;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .news-item h3 a:hover{color:var(--red);}
  .news-read{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}

  /* ===== DÀN DIỄN VIÊN ===== */
  .cast-controls{display:flex;gap:8px;}
  .cast-controls button{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:.18s;
  }
  .cast-controls button:hover{border-color:var(--red);color:var(--red);}
  .cast-controls button:disabled{opacity:.3;pointer-events:none;}

  .cast-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px;}
  .cast-tab{
    display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;
    border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-dim);
    transition:border-color .2s, color .2s, background .2s;
  }
  .cast-tab::before{
    content:'';width:6px;height:6px;border-radius:50%;background:var(--ink-faint);
    transition:background .2s, box-shadow .2s;
  }
  .cast-tab:hover{border-color:#3a3540;color:var(--ink);}
  .cast-tab[aria-selected="true"]{background:rgba(255,35,64,.1);border-color:var(--red);color:#fff;}
  .cast-tab[aria-selected="true"]::before{background:var(--red);box-shadow:0 0 0 4px rgba(255,35,64,.2);}
  .cast-tab:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

  .cast-panel{animation:schIn .4s cubic-bezier(.2,.8,.2,1);}
  .cast-info{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 0 0;font-size:13px;color:var(--ink-dim);
  }
  .cast-info p{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
  .cast-info strong{color:var(--ink);font-weight:800;}

  .cast-rail{
    display:flex;gap:22px;list-style:none;
    overflow-x:auto;overflow-y:hidden;padding:20px 4px 18px;
    scroll-snap-type:x proximity;scroll-padding-inline:4px;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  }
  .cast-rail::-webkit-scrollbar{display:none;}
  .cast-card{
    flex:0 0 156px;scroll-snap-align:start;text-align:center;
    animation:megaItem .45s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay:calc(var(--i) * 45ms);
  }
  .cast-link{display:block;}
  .cast-ring{
    position:relative;display:block;width:124px;height:124px;margin:0 auto 14px;
    padding:3px;border-radius:50%;background:var(--line);
    transition:background .3s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .cast-photo{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;border-radius:50%;overflow:hidden;
    background:var(--grad, var(--surface-2));border:4px solid var(--void);color:var(--ink-dim);
  }
  .cast-photo .pattern{opacity:.55;}
  .cast-initials{
    position:relative;font-family:var(--display);font-size:34px;letter-spacing:2px;
    color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(0,0,0,.5);
  }
  .cast-photo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .cast-star{
    position:absolute;right:2px;bottom:6px;z-index:2;width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--red);color:#fff;border:3px solid var(--void);
  }
  .cast-name{font-size:14.5px;font-weight:800;line-height:1.3;margin-bottom:3px;transition:color .2s;}
  .cast-role{font-size:12.5px;font-weight:700;color:var(--red);line-height:1.35;}
  .cast-desc{
    margin-top:7px;font-size:12px;line-height:1.55;color:var(--ink-faint);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cast-card:hover .cast-ring{
    background:conic-gradient(from 210deg, var(--red), #ff8a99, var(--red-deep), var(--red));
    transform:translateY(-6px);box-shadow:0 18px 34px -14px var(--red-glow);
  }
  .cast-card:hover .cast-photo img{transform:scale(1.1);}
  .cast-link:focus-visible{outline:none;}
  .cast-link:focus-visible .cast-ring{background:conic-gradient(from 210deg, var(--red), #ff8a99, var(--red-deep), var(--red));}
  .cast-more .cast-photo{background:var(--surface);color:var(--ink);}
  .cast-more:hover .cast-photo{color:var(--red);}

  @media(max-width:860px){
    .news-grid{grid-template-columns:minmax(0,1fr);}
    .news-feature{min-height:360px;}
    .news-item{flex:none;}
  }
  @media(max-width:640px){
    .news-feature{min-height:330px;}
    .news-feature .news-body{padding:20px;}
    .news-feature h3{font-size:24px;}
    .news-item{grid-template-columns:108px minmax(0,1fr);gap:12px;padding:10px;}
    .cast-controls{display:none;}
    .cast-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;}
    .cast-tabs::-webkit-scrollbar{display:none;}
    .cast-tab{flex:0 0 auto;}
    .cast-info{flex-wrap:wrap;}
    .cast-rail{gap:14px;margin:0 -16px;padding:18px 16px 16px;scroll-padding-inline:16px;}
    .cast-card{flex-basis:128px;}
    .cast-ring{width:102px;height:102px;}
    .cast-initials{font-size:28px;}
  }
  @media(prefers-reduced-motion:reduce){
    .cast-panel,.cast-card{animation:none !important;}
  }

  /* ===== LỊCH CHIẾU (section độc lập) ===== */
  .schedule{
    --sg:20px;
    margin-top:32px;scroll-margin-top:90px;
    background:
      radial-gradient(640px 220px at 0% 0%, rgba(255,35,64,.10), transparent 70%),
      var(--surface);
    border:1px solid var(--line);border-radius:18px;
    padding:22px 24px 6px;
  }
  .schedule [hidden]{display:none !important;}
  .sch-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px;}
  .sch-tz{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--ink-faint);}

  .sch-bar{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);}
  .sch-tabs{
    position:relative;display:flex;flex:1;min-width:0;gap:2px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  }
  .sch-tabs::-webkit-scrollbar{display:none;}
  .sch-tab{
    position:relative;flex:0 0 auto;min-width:92px;padding:14px 10px 16px;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--ink-dim);transition:color .2s;
  }
  .sch-tab .d-name{font-size:14.5px;font-weight:800;white-space:nowrap;}
  .sch-tab .d-date{font-family:var(--mono);font-size:12px;color:var(--ink-faint);transition:color .2s;}
  .sch-tab.is-today .d-name{color:var(--red);}
  .sch-tab:hover{color:var(--ink);}
  .sch-tab::after{
    content:'';position:absolute;left:50%;bottom:0;width:28px;height:3px;border-radius:3px;
    background:var(--red);transform:translateX(-50%) scaleX(0);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .sch-tab[aria-selected="true"]{color:var(--ink);}
  .sch-tab[aria-selected="true"] .d-date{color:var(--ink-dim);}
  .sch-tab[aria-selected="true"]::after{transform:translateX(-50%) scaleX(1);}
  .sch-tab:focus-visible{outline:2px solid var(--red);outline-offset:-4px;border-radius:10px;}

  .sch-filter-wrap{position:relative;flex-shrink:0;}
  .sch-filter{
    display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
    background:var(--surface-2);border:1px solid var(--line);
    font-size:12.5px;font-weight:700;color:var(--ink);transition:border-color .18s;
  }
  .sch-filter:hover,.sch-filter[aria-expanded="true"]{border-color:var(--red);}
  .sch-filter svg{color:var(--red);}
  .sch-filter-menu{
    position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:190px;padding:6px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 24px 50px -16px rgba(0,0,0,.85);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
  }
  .sch-filter-menu.open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .sch-filter-menu button{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    text-align:left;padding:10px 12px;border-radius:8px;
    font-size:13px;font-weight:600;color:var(--ink-dim);transition:.15s;
  }
  .sch-filter-menu button:hover{background:rgba(255,35,64,.08);color:var(--ink);}
  .sch-filter-menu button[aria-checked="true"]{color:var(--ink);}
  .sch-filter-menu button[aria-checked="true"]::after{
    content:'';width:5px;height:10px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);
    transform:rotate(45deg) translate(-1px,-2px);
  }

  .sch-view{position:relative;padding-top:22px;}
  .sch-panel{animation:schIn .4s cubic-bezier(.2,.8,.2,1);}
  @keyframes schIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

  .sch-track{
    position:relative;display:flex;gap:var(--sg);list-style:none;
    overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  }
  .sch-track::-webkit-scrollbar{display:none;}
  .sch-col{flex:0 0 calc((100% - 4 * var(--sg)) / 5);min-width:0;scroll-snap-align:start;}
  .sch-hour{
    text-align:center;padding:10px 0;border-radius:10px;margin-bottom:18px;
    background:var(--surface-2);border:1px solid var(--line);
    font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.5px;
  }
  .sch-items{position:relative;margin-left:4px;padding-left:22px;border-left:1px solid var(--line);}
  .sch-item{position:relative;padding-bottom:22px;transition:opacity .3s;}
  .sch-dot{
    position:absolute;left:-26px;top:9px;width:7px;height:7px;border-radius:50%;
    background:var(--ink-faint);transition:background .2s, box-shadow .2s;
  }
  .sch-item:hover .sch-dot{background:var(--red);}
  .sch-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .sch-chip{
    display:inline-flex;padding:4px 11px;border-radius:100px;
    background:var(--surface-2);border:1px solid var(--line);
    font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
  }
  .sch-live{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--red);}
  .sch-live.next{color:var(--ink-dim);}

  .sch-card{
    display:block;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
    background:var(--grad);border:1px solid var(--line);
    transition:transform .25s ease, border-color .25s;
  }
  .sch-card:hover{transform:translateY(-4px);border-color:var(--red);}
  .sch-card .pattern{opacity:.5;}
  .sch-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .3s;}
  .sch-card .motif{position:absolute;left:12px;bottom:10px;width:44px;height:44px;opacity:.4;color:#fff;}
  .sch-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6));}
  .sch-badge{
    position:absolute;top:10px;right:10px;z-index:2;
    font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.5px;color:#fff;
    background:rgba(10,9,11,.72);border:1px solid var(--red);padding:3px 9px;border-radius:100px;
  }
  .sch-badge.finale{background:var(--red);}
  .sch-card .play-btn{
    position:absolute;top:50%;left:50%;z-index:3;width:44px;height:44px;border-radius:50%;
    background:rgba(10,9,11,.6);border:2px solid var(--red);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translate(-50%,-50%) scale(.65);pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .sch-card:hover .play-btn{
    opacity:1;transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 0 6px rgba(255,35,64,.14), 0 8px 22px -6px rgba(0,0,0,.6);
  }
  .sch-card .play-btn svg{width:16px;height:16px;margin-left:3px;}
  .sch-title{margin-top:12px;font-size:14.5px;font-weight:800;line-height:1.3;}
  .sch-title a:hover{color:var(--red);}
  .sch-ep{margin-top:3px;font-size:13px;color:var(--ink-dim);}

  /* trạng thái theo giờ (JS đánh dấu cho ngày hôm nay) */
  .sch-item.is-past{opacity:.48;}
  .sch-item.is-past .sch-card img{filter:grayscale(.75);}
  .sch-item.is-now .sch-dot{background:var(--red);box-shadow:0 0 0 0 rgba(255,35,64,.5);animation:schPulse 1.6s ease-out infinite;}
  .sch-item.is-now .sch-chip{background:var(--red);border-color:var(--red);color:#fff;}
  .sch-item.is-now .sch-card{border-color:var(--red);box-shadow:0 12px 30px -12px var(--red-glow);}
  @keyframes schPulse{to{box-shadow:0 0 0 9px rgba(255,35,64,0);}}

  .sch-empty{padding:46px 0 38px;text-align:center;font-size:14px;color:var(--ink-faint);}

  .sch-arrow{
    position:absolute;top:44%;z-index:6;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(19,18,23,.94);border:1px solid var(--line);color:var(--ink);
    box-shadow:0 10px 24px -8px rgba(0,0,0,.7);
    transition:opacity .2s, border-color .18s, color .18s;
  }
  .sch-prev{left:-16px;}
  .sch-next{right:-16px;}
  .sch-arrow:hover{border-color:var(--red);color:var(--red);}
  .sch-arrow:disabled{opacity:0;pointer-events:none;}

  @media(max-width:1080px){
    .sch-col{flex-basis:calc((100% - 2 * var(--sg)) / 3);}
  }
  @media(max-width:860px){
    .schedule{margin-top:20px;padding:18px 18px 4px;border-radius:14px;}
    .sch-tz{display:none;}
    .sch-tab{min-width:84px;}
  }
  @media(max-width:640px){
    .schedule{--sg:14px;margin-top:16px;padding:16px 14px 2px;}
    .sch-col{flex-basis:min(250px,74%);}
    .sch-arrow{display:none;}
    .sch-tab{min-width:76px;padding:12px 8px 14px;}
    .sch-tab .d-name{font-size:13.5px;}
    .sch-bar{gap:10px;}
    .sch-filter{padding:8px 12px;}
  }
  @media(prefers-reduced-motion:reduce){
    .sch-panel,.sch-item.is-now .sch-dot{animation:none !important;}
  }

  /* ===== MEGA MENU THỂ LOẠI ===== */
  .nav-item{display:flex;align-items:center;align-self:stretch;}
  .nav-trigger{display:inline-flex;align-items:center;gap:6px;}
  .nav-trigger .chev{opacity:.7;transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s, color .2s;}
  .nav-trigger::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:var(--red);border-radius:2px;
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .has-mega.open .nav-trigger{color:var(--ink);}
  .has-mega.open .nav-trigger::after{transform:scaleX(1);}
  .has-mega.open .nav-trigger .chev{transform:rotate(180deg);opacity:1;color:var(--red);}

  .mega{
    position:absolute;top:calc(100% + 10px);left:50%;z-index:5;
    width:min(860px, calc(100vw - 40px));
    padding:24px 24px 22px;
    background:
      radial-gradient(520px 240px at 100% 0%, rgba(255,35,64,.16), transparent 70%),
      linear-gradient(180deg, rgba(27,25,32,.985), rgba(15,14,18,.99));
    border:1px solid var(--line);border-radius:18px;
    box-shadow:0 44px 90px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,35,64,.05);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,14px) scale(.97);transform-origin:50% 0;
    transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
  }
  .mega::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px;} /* cầu nối hover, tránh menu đóng khi rê chuột xuống */
  .mega::after{
    content:'';position:absolute;left:28px;right:28px;top:-1px;height:2px;border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--red), transparent);
  }
  .has-mega.open .mega{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0) scale(1);
    transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }

  .mega-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line);
  }
  .mega-title{
    font-family:var(--display);font-size:20px;letter-spacing:.4px;
    display:flex;align-items:center;gap:10px;
  }
  .mega-title::before{content:'';width:3px;height:16px;background:var(--red);border-radius:2px;}
  .mega-title span{
    font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0;
    color:var(--red);background:rgba(255,35,64,.1);border:1px solid rgba(255,35,64,.25);
    padding:2px 8px;border-radius:100px;
  }
  .nav-links .mega-all{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:700;color:var(--ink-dim);
    padding:6px 12px;border-radius:100px;border:1px solid var(--line);
  }
  .nav-links .mega-all:hover{color:var(--red);border-color:var(--red);}

  .mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 10px;}
  .nav-links .mega-grid a{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:10px;
    font-size:13.5px;font-weight:600;color:var(--ink-dim);white-space:nowrap;
    transition:background .2s, color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links .mega-grid a::before{
    content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
    background:var(--line);
    transition:background .2s, box-shadow .2s, transform .2s;
  }
  .nav-links .mega-grid a::after{
    content:'';margin-left:auto;flex-shrink:0;width:6px;height:6px;
    border-right:2px solid var(--red);border-top:2px solid var(--red);
    transform:translateX(-6px) rotate(45deg);opacity:0;
    transition:opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links .mega-grid a:hover,
  .nav-links .mega-grid a:focus-visible{
    background:rgba(255,35,64,.09);color:var(--ink);transform:translateX(3px);outline:none;
  }
  .nav-links .mega-grid a:hover::before,
  .nav-links .mega-grid a:focus-visible::before{
    background:var(--red);box-shadow:0 0 0 4px rgba(255,35,64,.18);transform:scale(1.1);
  }
  .nav-links .mega-grid a:hover::after,
  .nav-links .mega-grid a:focus-visible::after{opacity:1;transform:translateX(0) rotate(45deg);}
  .nav-links .mega-grid em{
    font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;
    color:#fff;background:var(--red);padding:3px 5px;border-radius:4px;line-height:1;
  }

  /* các thể loại lần lượt hiện ra mỗi lần mở menu */
  @keyframes megaItem{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .has-mega.open .mega-grid a{
    animation:megaItem .42s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay:calc(var(--i) * 16ms + 70ms);
  }

  @media(min-width:1280px){
    .mega{width:min(1180px, calc(100vw - 40px));}
    .mega-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  }

  @media(prefers-reduced-motion:reduce){
    .mega, .nav-links .mega-grid a, .nav-trigger::after{transition-duration:.01ms !important;animation:none !important;}
  }

  /* ===== RESPONSIVE ===== */

  /* Laptop nhỏ */
  @media(max-width:1280px){
    .layout{grid-template-columns:minmax(0,1fr) 300px;gap:32px;}
    nav{gap:28px;}
    .nav-links{gap:22px;}
  }

  /* Tablet: 1 cột, sidebar xuống dưới dạng lưới 2 cột */
  @media(max-width:1080px){
    .layout{grid-template-columns:minmax(0,1fr);gap:0;}
    .sidebar{
      position:static;margin-top:44px;
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
    }
    .sidebar .side-card:first-child{grid-column:1 / -1;}
    .top10-list:not([hidden]){
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;
    }
    .top10-item:nth-last-child(-n+2){border-bottom:none;}
    .trust-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
  }

  /* Tablet dọc / mobile ngang: menu thu gọn */
  @media(max-width:860px){
    header nav{height:64px;gap:14px;}
    .logo{font-size:25px;}
    .search-box{width:auto;flex:1;min-width:0;}
    .search-box:focus-within{width:auto;}
    .burger{display:flex;color:var(--ink);}
    .nav-links{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;align-self:auto;gap:0;flex:none;
      max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
      background:#0b0a0d;
      border-bottom:1px solid var(--line);padding:6px 20px 12px;
      box-shadow:0 24px 40px -20px rgba(0,0,0,.8);
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:15px;}
    .nav-links a:last-child{border-bottom:none;}
    .nav-links a.active{color:var(--red);}
    .nav-links a.active::after{display:none;}

    /* mega menu -> accordion trong menu mobile */
    .nav-item{display:block;align-self:auto;border-bottom:1px solid var(--line);}
    .nav-links .nav-trigger{display:flex;justify-content:space-between;border-bottom:none;}
    .nav-trigger::after{display:none;}
    .mega{
      position:static;left:auto;width:auto;padding:0;
      background:none;border:none;border-radius:0;box-shadow:none;
      opacity:1;visibility:visible;pointer-events:auto;transform:none;
      max-height:0;overflow:hidden;
      transition:max-height .4s cubic-bezier(.2,.8,.2,1);
    }
    .mega::before,.mega::after{display:none;}
    .has-mega.open .mega{
      max-height:760px;transform:none;
      transition:max-height .5s cubic-bezier(.2,.8,.2,1);
    }
    .mega-head{margin-bottom:10px;padding:2px 0 12px;}
    .mega-title{font-size:17px;}
    .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 0 16px;}
    .nav-links .mega-grid a{
      padding:10px 10px;font-size:13px;
      background:var(--surface);border:1px solid var(--line);
    }
    .hero{height:420px;margin-top:20px;border-radius:14px;}
    .slide-body{padding:0 28px;max-width:480px;}
    .slide-motif{width:300px;height:300px;}
    .hero-dots{left:28px;}
    .section{padding-top:40px;}
    .section-title{font-size:21px;}
    #tooltip{display:none;}
  }

  /* Mobile */
  @media(max-width:640px){
    .wrap{padding:0 16px;}
    .sidebar{grid-template-columns:minmax(0,1fr);margin-top:36px;}
    .top10-list:not([hidden]){grid-template-columns:minmax(0,1fr);}
    .top10-item:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
    .top10-item:last-child{border-bottom:none;}
    .scroll-controls{display:none;}

    .rail{gap:14px;margin:0 -16px;padding:12px 16px 16px;scroll-padding-left:16px;}
    .rank-card{width:168px;}
    .rank-num{font-size:74px;margin-right:-20px;}
    .rail .poster{width:122px;height:172px;}

    .hero{height:400px;margin-top:16px;border-radius:12px;}
    .slide-fade{
      background:
        linear-gradient(180deg, rgba(12,11,14,.25) 0%, rgba(12,11,14,.94) 72%),
        radial-gradient(ellipse 80% 60% at 70% 20%, var(--red-glow), transparent 65%);
    }
    .slide-body{padding:0 20px 46px;max-width:none;justify-content:flex-end;}
    .slide-motif{width:220px;height:220px;right:-20px;top:36%;}
    .eyebrow{margin-bottom:12px;font-size:11px;}
    .hero-title{font-size:clamp(26px,8vw,34px);margin-bottom:12px;}
    .hero-meta{margin-bottom:12px;font-size:12px;}
    .hero-desc{font-size:13px;-webkit-line-clamp:2;margin-bottom:16px;}
    .hero-genres{margin-bottom:16px;}
    .pill{padding:5px 12px;font-size:11.5px;}
    .btn-play,.btn-ghost{padding:11px 20px;font-size:13px;}
    .hero-dots{left:20px;bottom:18px;}

    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;}
    .genre-chip{padding:8px 16px;font-size:12.5px;}
    .nav-links{padding-left:16px;padding-right:16px;}
  }

  /* Mobile rất nhỏ */
  @media(max-width:380px){
    .logo{font-size:22px;}
    .search-box{padding:8px 12px;}
    .btn-play,.btn-ghost{padding:10px 16px;}
    .rank-card{width:156px;}
    .rail .poster{width:112px;height:158px;}
  }

  @media(max-width:520px){
    .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }

  /* Thiết bị cảm ứng: không có hover */
  @media(hover:none){
    #tooltip{display:none;}
    .poster:hover{transform:none;}
    .poster:hover .play-btn{opacity:0;}
  }

  /* ================= ICON UPGRADE ================= */
  svg[aria-hidden="true"] use{pointer-events:none;}
  /* logo */
  .logo{gap:9px;}
  .logo .lt{display:inline-flex;align-items:baseline;gap:2px;color:var(--ink);}
  .logo .lt span{color:var(--red);}
  .logo-mark{flex-shrink:0;width:1.18em;height:1.18em;align-self:center;filter:drop-shadow(0 4px 10px rgba(255,35,64,.35));transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06);}
  /* tiêu đề mục: chip icon thay thanh đỏ */
  .section-title,.side-card-title{gap:12px;}
  .t-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
    color:var(--red);background:rgba(255,35,64,.09);border:1px solid rgba(255,35,64,.28);}
  .t-ico svg{width:19px;height:19px;}
  .t-ico.sm{width:28px;height:28px;border-radius:8px;}
  .t-ico.sm svg{width:16px;height:16px;}
  /* icon thể loại */
  .g-ico{flex-shrink:0;display:block;}
  .nav-links .mega-grid a::before{display:none;}
  .mega-grid .g-ico{width:30px;height:30px;padding:6px;border-radius:9px;color:var(--ink-faint);
    background:rgba(255,255,255,.04);border:1px solid var(--line);
    transition:color .2s, background .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1);}
  .nav-links .mega-grid a:hover .g-ico,.nav-links .mega-grid a:focus-visible .g-ico{
    color:var(--red);background:rgba(255,35,64,.12);border-color:rgba(255,35,64,.4);transform:rotate(-6deg) scale(1.08);}
  .genre-chip{display:inline-flex;align-items:center;gap:8px;}
  .genre-chip .g-ico{width:16px;height:16px;color:var(--red);opacity:.85;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
  .genre-chip:hover .g-ico{opacity:1;transform:scale(1.15) rotate(-6deg);}
  .genre-mini a{display:inline-flex;align-items:center;gap:6px;}
  .genre-mini .g-ico{width:13px;height:13px;color:var(--red);opacity:.85;}
  .pill .g-ico{display:inline-block;vertical-align:-2px;margin-right:5px;width:14px;height:14px;opacity:.9;}
  /* nav icon */
  .n-ico{display:none;flex-shrink:0;width:16px;height:16px;opacity:.7;transition:opacity .2s, color .2s;}
  .nav-links > a,.nav-links .nav-trigger{display:inline-flex;align-items:center;gap:8px;}
  .nav-links a:hover .n-ico{opacity:1;color:var(--red);}
  .nav-links a.active .n-ico{opacity:1;color:var(--red);}
  @media(min-width:1180px){.n-ico{display:block;}}
  /* burger đổi icon */
  .burger .b-close{display:none;}
  .burger[aria-expanded="true"] .b-open{display:none;}
  .burger[aria-expanded="true"] .b-close{display:block;}
  /* tag tin tức, badge lịch chiếu */
  .news-tag{gap:5px;}
  .news-tag svg{flex-shrink:0;}
  .sch-badge{display:inline-flex;align-items:center;gap:4px;}
  .sch-badge svg{flex-shrink:0;}
  @media(min-width:861px){.sch-tz{display:inline-flex;align-items:center;gap:6px;}}
  .sch-tz svg{color:var(--red);}
  .sch-filter-menu button{display:flex;align-items:center;gap:10px;}
  .sch-filter-menu button svg{flex-shrink:0;color:var(--red);opacity:.85;}
  .sch-empty svg{display:block;margin:0 auto 12px;width:38px;height:38px;color:var(--red);opacity:.5;}
  #tooltip .tt-meta .mi{flex-shrink:0;opacity:.7;margin-right:-4px;}
  #tooltip .tt-add{display:inline-flex;align-items:center;justify-content:center;}
  .btn-ghost{display:inline-flex;align-items:center;gap:8px;}
  /* trust */
  .trust-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:14px;
    border-radius:12px;color:var(--red);background:rgba(255,35,64,.14);border:1px solid rgba(255,35,64,.4);}
  .trust-ico svg{width:22px;height:22px;}
  /* lên đầu trang */
  .to-top{position:fixed;z-index:60;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
    width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    color:var(--red);background:rgba(16,14,18,.92);border:1px solid rgba(255,35,64,.45);
    box-shadow:0 12px 28px -8px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1), visibility .25s, background .2s, color .2s;}
  .to-top.show{opacity:1;visibility:visible;transform:none;}
  .to-top:hover{background:var(--red);color:#fff;}

  /* ================= TỐI ƯU THIẾT BỊ ================= */
  html{scroll-padding-top:88px;}
  a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  /* màn hình rất rộng */
  @media(min-width:1600px){
    .hero{height:520px;}
    .t-ico{width:38px;height:38px;}
    .t-ico svg{width:21px;height:21px;}
  }
  /* tablet */
  @media(max-width:1080px) and (min-width:861px){
    .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  /* mobile / tablet dọc */
  @media(max-width:860px){
    html{scroll-padding-top:76px;}
    .nav-links > a,.nav-links .nav-trigger{display:flex;justify-content:flex-start;gap:12px;}
    .nav-links .nav-trigger .chev{margin-left:auto;}
    .n-ico{display:block;width:18px;height:18px;color:var(--red);opacity:.85;}
    .has-mega.open .mega{max-height:1100px;}
    .mega-grid .g-ico{width:26px;height:26px;padding:5px;border-radius:8px;}
    .nav-links .mega-grid a{gap:8px;}
  }
  @media(max-width:640px){
    .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
    .t-ico{width:30px;height:30px;border-radius:9px;}
    .t-ico svg{width:17px;height:17px;}
    .section-title,.side-card-title{gap:10px;}
    .logo-mark{width:1.1em;height:1.1em;}
    .to-top{width:44px;height:44px;border-radius:12px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));}
  }
  /* màn hình cảm ứng: vùng chạm >= 44px */
  @media(pointer:coarse){
    .burger{width:44px;height:44px;}
    .genre-chip{min-height:44px;}
    .genre-mini a{min-height:36px;}
    .sch-tab,.sch-filter{min-height:44px;}
    .sch-filter-menu button{min-height:44px;}
    .nav-links .mega-grid a{min-height:44px;}
  }
  .more-link,.gs-more{white-space:nowrap;}
  .more-link{display:inline-flex;align-items:center;gap:6px;}
  /* điện thoại xoay ngang */
  @media(max-height:480px) and (orientation:landscape){
    .hero{height:min(360px,84vh);}
    .nav-links{max-height:calc(100dvh - 64px);}
  }
  @media(prefers-reduced-motion:reduce){
    .logo-mark,.genre-chip .g-ico,.mega-grid .g-ico,.to-top{transition:none;}
  }

  /* ================= KHUNG GIỚI THIỆU (.sx) ================= */
  /* Mỗi vị trí chỉ cần MỘT creative kích thước gốc. Khung .sx-frame tự co theo bề ngang chỗ chứa
     (hệ số k = min(1, bề ngang / kích thước gốc)), creative bên trong được scale đồng đều bằng CSS. */
  .sx{container-type:inline-size;min-width:0;text-align:center;}
  .sx-title{margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-dim);}
  .sx-box{display:flex;justify-content:center;}
  .sx-w728{--w:728px;--h:90px;--ar:728/90;}
  .sx-w300{--w:300px;--h:250px;--ar:300/250;}
  .sx-frame{
    --k:min(1, tan(atan2(100cqw, var(--w))));
    position:relative;flex:0 0 auto;overflow:hidden;border-radius:10px;
    width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
  }
  .sx-slot{
    position:absolute;left:0;top:0;width:var(--w);height:var(--h);
    transform-origin:0 0;scale:var(--k);
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 140% at 0% 0%,rgba(255,35,64,.10),transparent 55%),var(--surface);
    border:1px solid var(--line);border-radius:10px;
  }
  .sx-slot > img,.sx-slot > video,.sx-slot > iframe,.sx-slot > ins{display:block;max-width:100%;}
  .sx-slot > img{width:100%;height:100%;object-fit:contain;}
  .sx-ph{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:16px;letter-spacing:.6px;color:var(--ink-dim);}
  .sx-ph svg{color:var(--red);opacity:.8;}
  .sx-slot:has(> :not(.sx-ph)) .sx-ph{display:none;}
  .sx-slot:has(> :not(.sx-ph)){border-color:transparent;background:none;}
  /* trình duyệt cũ chưa có tan(atan2()): quay về co bằng aspect-ratio (ảnh vẫn co, iframe cố định bị cắt) */
  @supports not (width:calc(1px * tan(atan2(1px, 1px)))){
    .sx-frame{width:min(100%, var(--w));height:auto;aspect-ratio:var(--ar);}
    .sx-slot{inset:0;width:auto;height:auto;scale:1;}
  }
  .sx-wide{margin:28px auto;}
  .sx-rect{margin:0;}
  @media(max-width:1080px){
    .sidebar .sx-rect{grid-column:1 / -1;}
  }
  @media(max-width:640px){
    .sx-wide{margin:22px auto;}
    .sx-title{font-size:9.5px;}
  }

  /* ================= FOOTER ================= */
  .ft{margin-top:70px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:13px;
    background:linear-gradient(180deg,transparent 0,rgba(255,35,64,.04) 100%);
    padding:46px 0 max(26px,env(safe-area-inset-bottom));}
  .ft ul{list-style:none;margin:0;padding:0;}
  /* nav gốc của header là flex cao 72px: trả về khối thường cho footer */
  .ft nav{display:block;height:auto;gap:0;align-items:normal;}
  .ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 48px;}
  .ft .logo{font-size:26px;margin-bottom:14px;}
  .ft-about{max-width:36ch;line-height:1.7;color:var(--ink-dim);font-size:13px;}
  .ft .ft-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
  .ft-feats li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;
    border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:11.5px;font-weight:600;color:var(--ink-dim);}
  .ft-feats svg{color:var(--red);}
  .ft-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;
    font-family:var(--display);font-size:17px;letter-spacing:.4px;color:var(--ink);}
  .ft-title::before{content:'';width:3px;height:15px;border-radius:2px;background:var(--red);}
  .ft-title.sm{font-size:14px;margin-bottom:12px;}
  .ft-col li + li{margin-top:2px;}
  .ft-col a{position:relative;display:inline-block;padding:6px 0;color:var(--ink-dim);font-size:13.5px;
    transition:color .2s, transform .25s cubic-bezier(.2,.8,.2,1);}
  .ft-col a::before{content:'';position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;
    border-right:2px solid var(--red);border-top:2px solid var(--red);
    transform:translateX(-4px) rotate(45deg);opacity:0;transition:opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);}
  .ft-col a:hover,.ft-col a:focus-visible{color:var(--ink);transform:translateX(14px);outline:none;}
  .ft-col a:hover::before,.ft-col a:focus-visible::before{opacity:1;transform:translateX(0) rotate(45deg);}
  .ft-keys{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
  .ft-tags{display:flex;flex-wrap:wrap;gap:8px;}
  .ft-tags a{display:inline-block;padding:7px 14px;border-radius:100px;border:1px solid var(--line);
    font-size:12px;font-weight:600;color:var(--ink-dim);transition:.18s;}
  .ft-tags a:hover,.ft-tags a:focus-visible{border-color:var(--red);color:var(--red);background:rgba(255,35,64,.06);outline:none;}
  .ft-bottom{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 24px;font-size:12px;}
  .ft-note{color:#5f5963;}
  .ft-bottom{padding-right:60px;}
  /* tablet */
  @media(max-width:1080px){
    .ft{margin-top:56px;}
    .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 32px;}
    .ft-brand{grid-column:1 / -1;}
    .ft-about{max-width:60ch;}
  }
  /* mobile */
  @media(max-width:640px){
    .ft{margin-top:44px;padding-top:36px;}
    .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;}
    .ft .logo{font-size:24px;}
    .ft-title{font-size:16px;margin-bottom:10px;}
    .ft-col a{padding:9px 0;}
    .ft-col:last-of-type{grid-column:1 / -1;}
    .ft-col:last-of-type ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;}
    .ft-col:last-of-type li + li{margin-top:0;}
    .ft-bottom{flex-direction:column;align-items:flex-start;}
  }
  @media(hover:none){
    .ft-col a:hover{transform:none;}
    .ft-col a:hover::before{opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){.ft-col a,.ft-col a::before{transition:none;}}
/* ===== KHUNG CHI TIẾT PHIM HOT (tiền tố fd-, độc lập với CSS còn lại) ===== */
.fd{position:relative;isolation:isolate;overflow:hidden;margin:32px 0 0;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);box-shadow:0 30px 60px -28px rgba(0,0,0,.7);}
.fd [hidden]{display:none !important;}
:where(.fd) a{color:inherit;text-decoration:none;}
:where(.fd) :where(ul,dl){list-style:none;margin:0;padding:0;}
.fd-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 90% at 88% -10%,rgba(255,35,64,.30),transparent 62%),
             radial-gradient(ellipse 40% 60% at 0% 100%,rgba(110,15,31,.35),transparent 65%),
             linear-gradient(115deg,#0c0a0e 30%,#150b10 100%);}
.fd-bg-motif{position:absolute;right:-60px;top:-30px;width:min(520px,60%);aspect-ratio:1;color:rgba(255,35,64,.07);transform:rotate(8deg);}
.fd-bg-motif svg{width:100%;height:100%;display:block;}
.fd-inner{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:0 34px;padding:28px;align-items:start;}
.fd-side{min-width:0;}
.fd-body{min-width:0;container-type:inline-size;}

/* poster */
.fd-poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:16px;
  background:var(--grad);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,35,64,.12);}
.fd-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fd-motif{position:absolute;right:10%;bottom:10%;width:62%;aspect-ratio:1;color:rgba(255,255,255,.10);}
.fd-motif svg{width:100%;height:100%;display:block;}
.fd-lang{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--red);box-shadow:0 8px 20px -6px var(--red-glow);}

/* nội dung phim */
.fd-about{margin-top:26px;}
.fd-sub{font-size:17px;font-weight:800;margin-bottom:10px;color:var(--ink);}
.fd-about p{font-size:14px;line-height:1.75;color:var(--ink-dim);}

/* tiêu đề + badge */
.fd-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:5px 12px;border-radius:100px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--red);background:rgba(255,35,64,.10);border:1px solid rgba(255,35,64,.3);}
.fd-title{font-family:var(--display);font-size:clamp(30px,3.1vw,44px);line-height:1.08;letter-spacing:.5px;color:var(--ink);}
.fd-alt{margin-top:6px;font-size:15px;color:var(--ink-dim);}
.fd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.fd-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:700;
  color:var(--ink);border:1px solid #3a3540;background:rgba(0,0,0,.25);}
.fd-b-hd{background:var(--red);border-color:var(--red);color:#fff;}
.fd-b-ep{border-color:var(--red);color:#fff;}
.fd-b-rate{padding:0;overflow:hidden;gap:0;border-color:rgba(255,35,64,.5);}
.fd-b-rate > span{display:inline-flex;align-items:center;height:100%;padding:0 9px;background:rgba(255,35,64,.18);color:#ff8a9a;font-family:var(--mono);font-size:11.5px;}
.fd-b-rate > b{display:inline-flex;align-items:center;height:100%;padding:0 10px;font-weight:800;}
.fd-b-lang{background:rgba(255,35,64,.12);border-color:rgba(255,35,64,.4);color:#ff9aa8;}

/* thông tin */
.fd-meta{display:grid;grid-template-columns:1fr;gap:9px 40px;margin-top:22px;font-size:14.5px;}
.fd-meta > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:baseline;}
.fd-meta dt{color:var(--ink-faint);}
.fd-meta dd{color:var(--ink);font-weight:500;line-height:1.5;}
.fd-meta dd a:hover{color:var(--red);}
@container (min-width:540px){
  .fd-meta{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
  .fd-meta .fd-wide{grid-column:1;}
}

/* hành động */
.fd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:26px;}
.fd-act-main{display:flex;gap:12px;}
.fd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:100px;
  font-size:16px;font-weight:800;transition:transform .2s, box-shadow .25s, background .2s, border-color .2s;}
.fd-btn-primary{color:#fff;background:var(--red);box-shadow:0 14px 34px -10px var(--red-glow);}
.fd-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -8px var(--red-glow);}
.fd-btn-ghost{color:var(--ink);background:rgba(255,255,255,.07);border:1px solid #34303a;}
.fd-btn-ghost:hover{border-color:var(--red);background:rgba(255,35,64,.08);}
.fd-sep{width:1px;align-self:stretch;min-height:42px;background:var(--line);}
.fd-act-sub{display:flex;gap:8px;}
.fd-ibtn{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:70px;padding:8px 8px;border-radius:12px;
  font-size:13px;font-weight:600;color:var(--ink);transition:color .2s, background .2s, transform .2s;}
.fd-ibtn:hover{color:var(--red);background:rgba(255,35,64,.07);}
.fd-ibtn svg{display:block;}
.fd-ibtn .on{display:none;}
.fd-ibtn[aria-pressed="true"]{color:var(--red);--fd-fill:currentColor;}
.fd-ibtn[aria-pressed="true"] .on{display:block;}
.fd-ibtn[aria-pressed="true"] .off{display:none;}

@container (max-width:560px){
  .fd-actions{flex-direction:column;align-items:stretch;gap:14px;}
  .fd-sep{display:none;}
  .fd-act-sub{justify-content:space-around;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .fd-ibtn{flex:1;min-width:0;}
}
/* tab */
.fd-main{margin-top:30px;}
.fd-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.fd-tabs::-webkit-scrollbar{display:none;}
.fd-tab{position:relative;flex:0 0 auto;padding:0 2px 14px;font-size:17px;font-weight:700;color:var(--ink-dim);transition:color .2s;}
.fd-tab:hover{color:var(--ink);}
.fd-tab[aria-selected="true"]{color:var(--red);}
.fd-tab[aria-selected="true"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--red);}
.fd-panel{padding-top:22px;}
.fd button:focus-visible,.fd a:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* máy chủ */
.fd-servers{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.fd-srv-label{display:inline-flex;align-items:center;gap:8px;margin-right:4px;font-size:15px;font-weight:600;color:var(--ink-dim);}
.fd-srv{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;
  color:var(--ink-dim);background:rgba(255,255,255,.045);border:1px solid transparent;transition:.18s;}
.fd-srv:hover{color:var(--ink);border-color:#3a3540;}
.fd-srv i{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:100px;
  font-style:normal;font-size:12px;font-weight:700;color:var(--ink-dim);background:rgba(255,255,255,.08);}
.fd-srv[aria-pressed="true"]{color:#fff;border-color:var(--red);background:rgba(255,35,64,.10);}
.fd-srv[aria-pressed="true"] i{background:var(--red);color:#fff;}

/* tập phim */
.fd-eps{--h:48px;--g:10px;--rows:2;position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--g);margin-top:20px;
  overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1);}
.fd-eps.is-collapsed{max-height:calc(var(--rows) * var(--h) + (var(--rows) - 1) * var(--g));
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%);}
.fd-eps:not(.is-collapsed){max-height:1200px;}
.fd-ep{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:var(--h);border-radius:11px;
  font-size:15px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.055);border:1px solid transparent;
  transition:background .2s, border-color .2s, transform .2s, color .2s;}
.fd-ep svg{color:var(--ink-dim);transition:color .2s;}
.fd-ep:hover{background:rgba(255,35,64,.12);border-color:var(--red);transform:translateY(-2px);}
.fd-ep:hover svg{color:var(--red);}
.fd-ep.is-new{border-color:rgba(255,35,64,.45);}
.fd-new{position:absolute;top:-7px;right:8px;padding:2px 6px;border-radius:5px;font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--red);}
.fd-more{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px auto 0;height:42px;padding:0 22px;border-radius:100px;
  font-size:13.5px;font-weight:700;color:var(--ink-dim);border:1px solid var(--line);transition:.2s;}
.fd-more:hover{color:var(--red);border-color:var(--red);}
.fd-more svg{transition:transform .3s;}
.fd-more[aria-expanded="true"] svg{transform:rotate(180deg);}

/* gallery */
.fd-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.fd-shot{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--grad);border:1px solid var(--line);}
.fd-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fd-shot .fd-motif{right:6%;bottom:-10%;width:42%;}
.fd-shot-cap{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);}
/* diễn viên */
.fd-cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:22px 14px;}
.fd-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.fd-avatar{display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin-bottom:8px;border-radius:50%;
  font-family:var(--display);font-size:26px;letter-spacing:1px;color:var(--ink);
  background:radial-gradient(circle at 30% 25%,#3a1019,#14090d 70%);border:2px solid rgba(255,35,64,.4);box-shadow:0 0 0 4px rgba(255,35,64,.08);}
.fd-person b{font-size:13.5px;font-weight:700;}
.fd-person span:last-child{font-size:12px;color:var(--red);font-weight:600;}
/* đề xuất */
.fd-recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,176px));justify-content:start;gap:14px;}
.fd-rec{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:12px;background:var(--grad);border:1px solid var(--line);transition:transform .25s, border-color .2s;}
.fd-rec:hover{transform:translateY(-3px);border-color:var(--red);}
.fd-rec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fd-rec-t{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:30px 10px 10px;background:linear-gradient(180deg,transparent,rgba(8,7,9,.92));}
.fd-rec-t b{font-size:13px;font-weight:700;line-height:1.3;}
.fd-rec-t em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);}

/* ---- Laptop nhỏ / tablet ---- */
@media(max-width:1080px){
  .fd{margin-top:0;}
  .fd-inner{grid-template-columns:minmax(190px,230px) minmax(0,1fr);gap:0 30px;padding:26px;}
  .fd-recs{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
  .fd-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ---- Mobile: poster + tiêu đề cạnh nhau, phần còn lại xếp dọc ---- */
@media(max-width:700px){
  .fd{border-radius:14px;margin-top:0;}
  .fd-inner{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-areas:"poster title" "rest rest" "about about" "main main";gap:0 16px;padding:18px 16px 20px;}
  .fd-side,.fd-body{display:contents;container-type:normal;}
  .fd-poster{grid-area:poster;border-radius:12px;}
  .fd-lang{top:6px;right:6px;padding:3px 8px;font-size:11px;}
  .fd-lang svg{width:12px;height:12px;}
  .fd-titlebox{grid-area:title;min-width:0;}
  .fd-rest{grid-area:rest;min-width:0;}
  .fd-about{grid-area:about;margin-top:22px;}
  .fd-main{grid-area:main;margin-top:24px;min-width:0;}
  .fd-eyebrow{margin-bottom:8px;padding:4px 9px;font-size:9px;letter-spacing:.5px;white-space:nowrap;gap:5px;}
  .fd-title{font-size:clamp(24px,7vw,30px);}
  .fd-alt{font-size:13px;}
  .fd-badges{gap:6px;margin-top:12px;}
  .fd-b{height:26px;padding:0 8px;font-size:11.5px;}
  .fd-b-rate > span{padding:0 7px;font-size:10px;}
  .fd-b-rate > b{padding:0 8px;}
  .fd-meta{grid-template-columns:1fr;margin-top:20px;font-size:14px;gap:8px;}
  .fd-meta > div{grid-template-columns:96px minmax(0,1fr);}
  .fd-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px;}
  .fd-act-main{width:100%;}
  .fd-act-main .fd-btn{flex:1;height:50px;padding:0 16px;}
  .fd-sep{display:none;}
  .fd-act-sub{justify-content:space-around;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .fd-ibtn{flex:1;min-width:0;}
  .fd-tabs{gap:22px;}
  .fd-tab{font-size:16px;}
  .fd-eps{--h:46px;--rows:3;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;--g:8px;}
  .fd-srv{height:40px;padding:0 11px;font-size:13px;}
  .fd-srv-label{width:100%;margin-bottom:2px;}
  .fd-gallery{gap:8px;}
  .fd-cast{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fd-avatar{width:72px;height:72px;font-size:22px;}
  .fd-recs{gap:10px;}
}
@media(max-width:380px){
  .fd-inner{grid-template-columns:108px minmax(0,1fr);gap:0 12px;}
  .fd-cast{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fd-eyebrow{white-space:normal;line-height:1.35;border-radius:12px;}
}
@media(min-width:1600px){
  .fd-inner{grid-template-columns:minmax(240px,290px) minmax(0,1fr);gap:0 40px;padding:32px;}
}
@media(prefers-reduced-motion:reduce){.fd *{transition:none !important;}}
/* ===== THẺ "ĐỀ XUẤT CHO BẠN" ở sidebar (tiền tố rc-) ===== */
.rc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.rc-item{position:relative;display:flex;align-items:stretch;gap:0;overflow:hidden;border-radius:12px;
  background:var(--surface-2);border:1px solid transparent;color:inherit;text-decoration:none;
  transition:border-color .2s, background .2s, transform .25s cubic-bezier(.2,.8,.2,1);}
.rc-item:hover,.rc-item:focus-visible{border-color:rgba(255,35,64,.55);background:#201a22;transform:translateX(3px);outline:none;}
.rc-thumb{position:relative;flex:0 0 62px;aspect-ratio:2/3;overflow:hidden;background:var(--grad);}
.rc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rc-motif{position:absolute;right:8%;bottom:8%;width:70%;aspect-ratio:1;color:rgba(255,255,255,.12);}
.rc-motif svg{width:100%;height:100%;display:block;}
.rc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s;}
.rc-play svg{width:24px;height:24px;transform:scale(.8);transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.rc-item:hover .rc-play,.rc-item:focus-visible .rc-play{opacity:1;}
.rc-item:hover .rc-play svg,.rc-item:focus-visible .rc-play svg{transform:scale(1);}
.rc-info{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 12px 8px 12px;}
.rc-ttl{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;}
.rc-item:hover .rc-ttl{color:var(--red);}
.rc-alt{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);}
.rc-meta i{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
.rc-done{color:#ff8a9a;}
/* tablet: thẻ trải hết hàng, danh sách 2 cột */
@media(max-width:1080px){
  .sidebar .rc{grid-column:1 / -1;order:5;}
  .rc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
}
@media(max-width:640px){
  .rc-list{grid-template-columns:minmax(0,1fr);}
  .rc-thumb{flex-basis:58px;}
  .rc-info{padding:8px 10px;}
}
@media(hover:none){
  .rc-item:hover{transform:none;}
  .rc-play{display:none;}
}
@media(prefers-reduced-motion:reduce){.rc-item,.rc-play,.rc-play svg{transition:none;}}