/* ==========================================================================
   trailer-nav.css — nút TRÁI/PHẢI chuyển trailer trên /rakuben
   Luật Zeo: đang xem trailer 1 ⇒ hiện mũi tên PHẢI (ẩn trái);
             trailer 2 (cuối) ⇒ hiện mũi tên TRÁI (ẩn phải);
             thêm trailer 3 ⇒ tự động giữa 2 bên đều hiện.
   Đồng bộ hệ dark-fantasy/gold (--gold #d4af37) + thanh đỏ accent.
   Nút nằm GIỮA theo chiều dọc khung poster, sát 2 mép.
   ========================================================================== */

.rb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:6;
  width:52px;height:78px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-family:var(--lat),serif;
  font-size:30px;line-height:1;
  color:rgba(240,236,228,.92);
  background:rgba(5,5,7,.62);
  border:1px solid rgba(212,175,55,.42);
  backdrop-filter:blur(6px);
  transition:opacity .35s var(--ease,ease),border-color .35s ease,
             background .35s ease,transform .35s ease,color .35s ease;
}
.rb-nav--prev{left:14px}
.rb-nav--next{right:14px}

/* 🔴 Zeo chốt 30/09: nút nằm TRONG LIGHTBOX (nền đen foreground), căn GIỮA theo
   chiều cao khung video (#rbRatio). Parent phải là .rb-modal__box (position:relative).
   Chỉ hiện khi modal đã mở thật (.rb-modal.is-shown) — lúc mới bấm mở thì trượt vào. */
.rb-modal__box .rb-nav{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) scale(.94);
}
.rb-modal.is-shown .rb-nav{
  visibility:visible;pointer-events:auto;
  opacity:1;transform:translateY(-50%) scale(1);
}
.rb-modal.is-shown .rb-nav.is-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}

.rb-nav:hover{
  border-color:rgba(212,175,55,.95);
  background:rgba(212,175,55,.16);
  color:#d4af37;
}
.rb-nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.rb-nav--next:hover{transform:translateY(-50%) translateX(3px)}

.rb-nav:focus-visible{outline:2px solid #d4af37;outline-offset:3px}

/* Trạng thái vô hiệu (đang ở đầu/cuối dải) — ẩn hẳn, không chiếm chỗ */
.rb-nav.is-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* vạch đỏ nhỏ phía trong, đồng bộ .rb-tr__bar */
.rb-nav::after{
  content:'';position:absolute;top:50%;transform:translateY(-50%);
  width:3px;height:26px;background:#8a0303;opacity:.85;
}
.rb-nav--prev::after{left:-1px}
.rb-nav--next::after{right:-1px}

/* 🔴 Zeo chốt 30/09: nút nằm TRONG lightbox nên KHÔNG ẩn theo body.rb-locked nữa.
   Luật cũ (ẩn khi modal mở) đã bỏ — xem khối .rb-modal.is-shown phía trên. */

@media (max-width:640px){
  .rb-nav{width:40px;height:60px;font-size:23px}
  .rb-nav--prev{left:6px}
  .rb-nav--next{right:6px}
}