/* Player live (static/player.js). Dùng cả ở trang quản trị (có Pico) lẫn
   trang /watch (không có Pico) nên không dựa vào biến của Pico. */

.lp {
  position: relative;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
}
.lp-screen { position: relative; }
.lp video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.lp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #e5e7eb;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.55);
  /* Không che nút điều khiển native của <video>. */
  pointer-events: none;
}
.lp-overlay[hidden] { display: none; }
.lp[data-state="blocked"] .lp-overlay {
  pointer-events: auto;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 600;
}
.lp[data-state="waiting"] .lp-overlay::before,
.lp[data-state="lost"] .lp-overlay::before,
.lp[data-state="loading"] .lp-overlay::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: 0.6rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lp-spin 0.9s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: #111;
}
.lp-bar button {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #e5e7eb;
  background: #262626;
  border: 1px solid #3f3f46;
  border-radius: 0.35rem;
  cursor: pointer;
}
.lp-bar button:hover { background: #333; }
.lp-bar button[hidden] { display: none; }
.lp-bar [data-lp-live] { margin-left: auto; color: #fff; background: #dc2626; border-color: #dc2626; }

/* Lấp đầy khung (trang /embed trong iframe): video chiếm TRỌN khung, không bo
   góc. Thanh nút nổi đè góc trên-phải thay vì nằm dưới video: nằm dưới thì nó
   ăn ~42px chiều cao, khung iframe 16:9 còn lại thấp hơn 16:9 và video 16:9 bị
   thu nhỏ, lộ viền đen hai bên (đã gặp thật trên mocalaka.vn). Không đặt ở
   cạnh dưới để không đè thanh điều khiển native của <video>. Góc trên-trái đã
   có nhãn LIVE của embed.html. */
.lp--fill {
  height: 100%;
  border-radius: 0;
}
.lp--fill .lp-screen { height: 100%; }
.lp--fill video { height: 100%; aspect-ratio: auto; object-fit: contain; }
.lp--fill .lp-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 0;
  background: transparent;
}
.lp--fill .lp-bar button { background: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.25); }
.lp--fill .lp-bar [data-lp-live] { margin-left: 0; }

/* Nút bật tiếng to trên hình khi đang phát tắt tiếng. */
.lp-unmute {
  position: absolute;
  left: 50%;
  bottom: 3.2rem; /* chừa chỗ cho thanh điều khiển native của <video> */
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  margin: 0;
}
.lp-unmute:hover { background: rgba(0, 0, 0, 0.85); }
.lp-unmute[hidden] { display: none; }