/* Ánh sáng tràn nền quanh trình phát (xem public/js/anh-sang-nen.js) */

/* Cha của <video> (.khung-phat): cho quầng sáng tràn ra ngoài; bo góc chuyển sang chính <video> để nhìn không đổi */
.co-anh-sang-nen.co-anh-sang-nen { overflow: visible; }
.co-anh-sang-nen > video { border-radius: inherit; }
.co-anh-sang-nen > video:fullscreen { border-radius: 0; }

.anh-sang-nen {
  position: absolute;
  top: -12%; left: -10%;
  width: 120%; height: 124%;
  z-index: -1;                       /* dưới video, trên nền của khung phát (khung phát đã là ngữ cảnh xếp lớp) */
  border-radius: 48px;
  filter: blur(34px) saturate(1.2) brightness(1.05); /* gần bằng độ sáng video, chỉ mờ hơn một chút */
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  will-change: opacity;
}
.anh-sang-nen.hien { opacity: 1; }
@media (prefers-color-scheme: light) {
  .anh-sang-nen.hien { opacity: .9; }
}
/* Màn hẹp: trình phát đã tràn hết chiều ngang, chỉ loang lên/xuống */
@media (max-width: 767px) {
  .anh-sang-nen { left: 0; width: 100%; top: -10%; height: 120%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .anh-sang-nen { display: none; }
}

/* Công tắc nhỏ ngay dưới khung phát */
.hang-anh-sang-nen { display: flex; justify-content: flex-end; margin: -12px 0 -12px; position: relative; z-index: 1; }
@media (min-width: 1024px) { .hang-anh-sang-nen { margin: 0 0 -16px; } }
.nut-anh-sang-nen {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid var(--vien); border-radius: 999px; background: transparent; color: var(--mo);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.nut-anh-sang-nen::after { content: attr(data-trang-thai); font-weight: 600; color: var(--chu); }
.nut-anh-sang-nen[aria-pressed="true"] { border-color: var(--xanh); color: var(--xanh); }
.nut-anh-sang-nen[aria-pressed="true"]::after { color: var(--xanh); }
.nut-anh-sang-nen:hover { background: var(--nut); color: var(--chu); }

/* ===== Bố cục rạp khi bật ánh sáng nền (màn rộng): một cột, video gần toàn màn hình, liên quan xuống dưới ===== */
@media (min-width: 1024px) {
  body.che-do-rap .xem { grid-template-columns: minmax(0, 1fr); }
  body.che-do-rap .khung-phat {
    width: min(100%, calc((100dvh - var(--cao-dau) - var(--an-toan-tren) - 96px) * 16 / 9));
    margin-left: auto; margin-right: auto;
  }
  body.che-do-rap .khung-phat video { max-height: calc(100dvh - var(--cao-dau) - var(--an-toan-tren) - 96px); }
  body.che-do-rap .xem-lien-quan { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 16px; }
  body.che-do-rap .xem-lien-quan > :is(h2, h3, p, .tieu-de-muc, .trang-thai) { grid-column: 1 / -1; }
}

/* Khi bật ánh sáng nền: đầu trang trong suốt hoàn toàn, chỉ làm mờ nhẹ nội dung trôi phía sau cho dễ đọc */
body.che-do-rap #dau-trang {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Quầng sáng giờ gần bằng độ sáng video nên công tắc nằm trên quầng cần nền mờ tối để đọc được */
body.che-do-rap .nut-anh-sang-nen {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid var(--vien); border-radius: 999px; background: transparent; color: var(--mo);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.nut-anh-sang-nen::after { content: attr(data-trang-thai); font-weight: 600; color: var(--chu); }

/* Chế độ rạp: một quầng sáng duy nhất phủ cố định toàn màn hình, nằm DƯỚI mọi nội dung (z-index âm trong ngữ cảnh gốc).
   Phần trên (quanh video) sáng gần bằng video; càng xuống dưới (vùng tiêu đề, liên quan) dịu dần để chữ đọc được. */
body.che-do-rap > .anh-sang-nen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
  border-radius: 0; z-index: -1;
  transform: scale(1.3);            /* đẩy mép mờ của quầng ra ngoài màn hình → không còn viền tối hai bên */
  filter: blur(40px) saturate(1.2) brightness(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.45) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.45) 100%);
}
body.che-do-rap > .anh-sang-nen.hien { opacity: 1; }
@media (prefers-color-scheme: light) { body.che-do-rap > .anh-sang-nen.hien { opacity: .9; } }
/* Chữ trên nền quầng sáng: thêm bóng mỏng để luôn đọc được dù cảnh sáng */
body.che-do-rap .xem-thong-tin, body.che-do-rap .xem-lien-quan, body.che-do-rap #dau-trang { text-shadow: 0 1px 2px rgba(0,0,0,.45); }