/* ===== HLS Player styles — khoanh vùng dưới .hlsp-app (không đụng theme) ===== */
.hlsp-app{
  --stage:#000; --panel:#15181d; --panel-2:#1d2128;
  --accent:#ff2d46; --accent-2:#ff586c; --text:#f2f4f7; --text-dim:#8b929e;
  --border:#262b33; --radius:14px;

  /* ----- Màu nút kênh (đổi được trong Bảng điều khiển) ----- */
  --btn-bg:#fcd55c;          /* màu nền nút kênh */
  --btn-text:#000000;        /* màu chữ nút kênh */
  --btn-active-text:#ffffff; /* màu chữ nút kênh đang chọn */

  max-width:820px; margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); line-height:1.4;
}
.hlsp-app,.hlsp-app *{ box-sizing:border-box; }

.hlsp-app .hlsp-title{ margin:0 0 12px; font-size:18px; font-weight:700; color:var(--text); }

/* Thanh tab kênh trên cùng — cuộn ngang trên mobile */
.hlsp-app .hlsp-channels{
  display:flex; flex-wrap:wrap; gap:8px; overflow-x:auto; margin:0 0 14px; padding-bottom:4px;
  scrollbar-width:thin;
}
.hlsp-app .hlsp-channel-btn{
  flex:0 0 auto; white-space:nowrap; padding:10px 16px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--btn-bg); color:var(--btn-text);
  font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  transition:all .14s; text-transform:none;
}
.hlsp-app .hlsp-channel-btn:hover{ background:var(--panel-2); color:var(--text); border-color:#39414c; }
.hlsp-app .hlsp-channel-btn[aria-selected="true"]{
  background:var(--accent);
  border-color:var(--accent); color:var(--btn-active-text);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.55);
}
.hlsp-app .hlsp-channel-btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

/* Nút kênh đang LIVE: chấm đỏ nhấp nháy nhẹ phía trước tên */
.hlsp-app .hlsp-channel-live{ position:relative; }
.hlsp-app .hlsp-live-dot{
  display:inline-block; width:7px; height:7px; margin-right:7px;
  border-radius:50%; background:var(--accent); vertical-align:middle;
  animation:hlsp-blink 1.6s ease-in-out infinite;
}
.hlsp-app .hlsp-channel-btn[aria-selected="true"] .hlsp-live-dot{ background:#fff; }

.hlsp-app .hlsp-figure{ margin:0; }
.hlsp-app .hlsp-stage{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--stage); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8);
}
.hlsp-app .hlsp-videowrap{ position:absolute; inset:0; }
.hlsp-app .hlsp-videowrap video{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  max-width:none !important; object-fit:contain !important;
  background:#000; display:block;
}

/* ----- Thanh điều khiển riêng (không có timeline) ----- */
.hlsp-app .hlsp-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0));
  opacity:1; transition:opacity .25s ease;
}
.hlsp-app .hlsp-controls.hlsp-hidden{ opacity:0; pointer-events:none; }
.hlsp-app .hlsp-controls-spacer{ flex:1 1 auto; }
.hlsp-app .hlsp-ctrl{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  border:none; border-radius:10px;
  background:rgba(20,22,26,.55); color:#fff; cursor:pointer;
  transition:background .15s, transform .12s;
}
.hlsp-app .hlsp-ctrl:hover{ background:var(--accent); }
.hlsp-app .hlsp-ctrl:active{ transform:scale(.94); }
.hlsp-app .hlsp-ctrl:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
.hlsp-app .hlsp-ctrl svg{ width:22px; height:22px; display:block; }

/* Khi phóng to: cho khung lấp đầy màn hình */
.hlsp-app .hlsp-stage:fullscreen,
.hlsp-app .hlsp-stage:-webkit-full-screen{
  width:100%; height:100%; aspect-ratio:auto; border:none; border-radius:0;
}

.hlsp-app .hlsp-overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:20px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}
.hlsp-app .hlsp-overlay[hidden]{ display:none; }
.hlsp-app .hlsp-spinner{
  width:46px; height:46px; border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--accent); border-radius:50%;
  animation:hlsp-spin .9s linear infinite;
}
@keyframes hlsp-spin{ to{ transform:rotate(360deg); } }
.hlsp-app .hlsp-otext{ color:var(--text-dim); font-size:14px; }
.hlsp-app .hlsp-otitle{ font-size:16px; font-weight:600; color:var(--text); }
.hlsp-app .hlsp-retry{
  margin-top:2px; border:1px solid var(--accent); background:transparent;
  color:var(--accent-2); font:inherit; font-weight:600;
  padding:9px 20px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s;
}
.hlsp-app .hlsp-retry:hover{ background:var(--accent); color:#fff; }

.hlsp-app .hlsp-unmute{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:4; display:flex; align-items:center; gap:9px;
  padding:13px 22px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(20,22,26,.78); backdrop-filter:blur(8px);
  color:#fff; font:inherit; font-weight:600; font-size:14px; letter-spacing:.4px;
  cursor:pointer; box-shadow:0 8px 30px -8px rgba(0,0,0,.7);
  animation:hlsp-pulse 2.2s ease-in-out infinite; transition:transform .12s,background .15s;
}
.hlsp-app .hlsp-unmute:hover{ transform:translate(-50%,-50%) scale(1.04); }
.hlsp-app .hlsp-unmute[hidden]{ display:none; }
.hlsp-app .hlsp-unmute svg{ width:22px; height:22px; }
@keyframes hlsp-pulse{
  0%,100%{ box-shadow:0 8px 30px -8px rgba(0,0,0,.7),0 0 0 0 rgba(255,45,70,.45); }
  50%    { box-shadow:0 8px 30px -8px rgba(0,0,0,.7),0 0 0 12px rgba(255,45,70,0); }
}

.hlsp-app .hlsp-live{
  display:none !important; /* Đã ẩn nhãn TRỰC TIẾP trên video */
  position:absolute; top:12px; left:12px; z-index:3;
  align-items:center; gap:7px; padding:5px 11px;
  background:rgba(0,0,0,.55); border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.hlsp-app .hlsp-live[hidden]{ display:none; }
.hlsp-app .hlsp-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:hlsp-blink 1.6s ease-in-out infinite;
}
@keyframes hlsp-blink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,45,70,.6); }
  50%    { opacity:.5; box-shadow:0 0 0 6px rgba(255,45,70,0); }
}

.hlsp-app .hlsp-cap{ margin-top:12px; font-size:13px; color:var(--text-dim); }
.hlsp-app .hlsp-cap b{ color:var(--text); }

@media (prefers-reduced-motion:reduce){
  .hlsp-app .hlsp-unmute,.hlsp-app .hlsp-dot{ animation:none; }
}