.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
  overflow: hidden;
}

.video-loading {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 40;
}

.sound-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
	pointer-events: auto;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 50;
}

.sound-overlay.show {
  opacity: 1;
  visibility: visible;
}

.sound-overlay-box {
  background: rgba(0,0,0,0.75);
  padding: 16px 22px;
  border-radius: 14px;
}

/* =========================================
   SOUND OVERLAY - LIVE STYLE
========================================= */

.sound-icon {
  font-size: 34px;
  margin-bottom: 10px;
}

.sound-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sound-sub {
  font-size: 14px;
  opacity: .9;
}

/* mobile */
@media (max-width: 768px) {
  .sound-overlay-box {
    padding: 18px 20px;
    border-radius: 16px;
  }

  .sound-title {
    font-size: 18px;
  }

  .sound-sub {
    font-size: 13px;
  }
}

/* ==================================================
   Video Area Overlay – Checking Signal
   ================================================== */

#live-container{
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}

#live-container video {
  pointer-events: none;
}

/* ให้ตัวครอบเป็น reference ของ overlay */
#customFsWrap{
  position: relative;
}

/* ให้ page-wrapper เป็นฐานของ overlay */
.page-wrapper{
  position: relative;
}

/* ============================================================
   ✅ LED LIVE – MOBILE LANDSCAPE LOCK 16:9 + FULLSCREEN SAFE
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {

  body{ background:#000; }

  /* ครอบ live ให้อยู่กลางจอเสมอ */
  #live-container{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;

    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ✅ กรอบ live "ปกติ" (ไม่ fullscreen) ล็อก 16:9 */
  #live-container .page-wrapper{
    width: 100vw;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    height: auto;

    margin: 0 auto;
    background:#000;

    display:flex;
    justify-content:center;
    align-items:center;
  }

  /* ตัวพื้นที่วิดีโอจริง */
  #liveContainer.video-wrapper{
    width: 100%;
    height: 100%;
    background:#000;
    overflow:hidden;
    position:relative;
  }

  /* จอหลัก */
  .screen-main{
    width: 100%;
    height: 100%;
  }

  /* wrapper ชั้นใน */
  .screen-main .video-wrapper{
    width: 100%;
    height: 100%;
    overflow:hidden;
    background:#000;
  }

  /* video/iframe */
  video, iframe, .video-js{
    width:100% !important;
    height:100% !important;
    object-fit: contain;
    background:#000;
  }

  /* แถบข้อมูลล่าง ซ่อนเพื่อไม่ให้ดันจอ (ไม่ให้บีบ 16:9) */
  #live-container .row.px-2{
    display:none !important;
  }

  /* ------------------------------------------------------------
     ✅ FULLSCREEN MODE – ยังล็อก 16:9 (แก้โดนตัด 16:10)
     ------------------------------------------------------------ */
  #live-container:fullscreen,
  #live-container:-webkit-full-screen{
    background:#000;
  }

  /* ตอน fullscreen: ครอบทั้งจอ แต่ "คอนเทนต์" ยังเป็น 16:9 */
  #live-container:fullscreen .page-wrapper,
  #live-container:-webkit-full-screen .page-wrapper{
    width: 100vw;
    height: 100vh;     /* fallback */
    height: 100dvh;    /* ✅ mobile safe */

    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
  }

  /* กล่อง 16:9 ที่อยู่กลาง fullscreen */
  #live-container:fullscreen #liveContainer.video-wrapper,
  #live-container:-webkit-full-screen #liveContainer.video-wrapper{
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
    aspect-ratio: 16 / 9;

    background:#000;
    overflow:hidden;
    position:relative;
  }
}

.loading-screen {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  text-align: center;
  color: #fff;
  font-size: 16px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid #fff;
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* overlay ทับเฉพาะ video wrapper */
#loading-screen.overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 999;
  opacity: 1;
  transition: opacity .35s ease;

  /* ✅ สำคัญ: ไม่ให้บล็อกคลิกส่วนอื่นของหน้าเว็บ */
  pointer-events: none;
}

#loading-screen.hidden{
  opacity: 0;
  pointer-events: none;
}

#loading-screen .overlay-box{
  background: rgba(0,0,0,0.6);
  padding: 1.2rem 1.6rem;
  border-radius: 14px;
  text-align: center;
  color: #fff;

  pointer-events: auto;
}

#loading-screen .overlay-text{
  margin-top: .6rem;
  font-size: 1em;
  font-weight: 600;
}

/* กัน overlay ตรวจสอบสัญญาณไม่ทับตอน live */
#loading-screen{
  z-index: 2000 !important;
}

.fullscreen-mode {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

* ==================================================
   Fullscreen Overlay – Fade + Blur
   ================================================== */

.overlay{
  position:fixed; inset:0;
  display:flex; justify-content:center; align-items:center;
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  transition:opacity .4s ease;
  z-index:9999;
}
.overlay.hidden{opacity:0;pointer-events:none}
.overlay-box{
  background:rgba(255,255,255,.9);
  padding:2rem 2.5rem;
  border-radius:16px;
  text-align:center;
}

/* LIVE label inside video.js controlbar */
.vjs-live-label-btn{
  cursor: default !important;
  pointer-events: none !important; /* ไม่บังปุ่ม play */
  width: auto !important;
  padding: 0 8px !important;
}

.vjs-live-label-text{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #fff;
  background: #e60000;
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1;
  display: inline-block;
}

/* =========================================
   🔴 LIVE YOUTUBE BLINK STYLE
   ========================================= */

.live-label{
  display:flex;
  align-items:center;
  gap:8px;

  color:#ff2b2b;
  font-weight:800;
  font-size:12px;
  margin-right:14px;
  letter-spacing:.7px;
  font-family:Arial, Helvetica, sans-serif;
}

/* จุดแดง */
.live-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff0000;

  box-shadow:0 0 0 rgba(255,0,0,.7);
  animation:youtubeLive 1.4s infinite;
}

/* YouTube pulse */
@keyframes youtubeLive{
  0%{
    transform:scale(.9);
    box-shadow:0 0 0 0 rgba(255,0,0,.7);
  }
  70%{
    transform:scale(1);
    box-shadow:0 0 0 10px rgba(255,0,0,0);
  }
  100%{
    transform:scale(.9);
    box-shadow:0 0 0 0 rgba(255,0,0,0);
  }
}

/* mobile */
@media(max-width:768px){
  .live-label{
    font-size:14px;
    margin-right:8px;
  }
}