/* HUD E-Brochure | Thuyết minh | Nút và thanh phát trên brochure */
.hudnr {
  --hudnr-red: #ED1C24;
  --hudnr-red-deep: #C4161C;
  --hudnr-ink: #1E1F21;
  --hudnr-gray: #58595B;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.hudnr *, .hudnr *::before, .hudnr *::after { box-sizing: border-box; }
.hudnr [hidden] { display: none !important; }
.hudnr button { font-family: inherit; }
.hudnr svg { display: block; flex-shrink: 0; }
.hudnr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hudnr-wrap {
  position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2147482900;
  display: flex; align-items: center;
}

/* Trạng thái chưa bật */
.hudnr-start {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 14px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(30, 31, 33, .62);
  color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; backdrop-filter: blur(4px);
}
.hudnr-start:hover { background: rgba(30, 31, 33, .8); }
.hudnr-start.is-blocked { background: var(--hudnr-red-deep); border-color: var(--hudnr-red-deep); box-shadow: 0 0 0 6px rgba(237, 28, 36, .24); }

/* Thanh đang phát */
.hudnr-bar {
  display: flex; align-items: center; gap: 12px; width: 420px; max-width: calc(100vw - 48px);
  padding: 10px; background: #fff; border-radius: 999px; color: var(--hudnr-ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.hudnr-play {
  width: 48px; height: 48px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--hudnr-red-deep); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hudnr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hudnr-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hudnr-gray); }
.hudnr-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.hudnr-eq span { width: 3px; border-radius: 1px; background: var(--hudnr-red); height: 6px; }
.hudnr-bar.is-playing .hudnr-eq span { animation: hudnr-eq 1s ease-in-out infinite; }
.hudnr-eq span:nth-child(2) { height: 13px; animation-delay: .12s; }
.hudnr-eq span:nth-child(3) { height: 9px; animation-delay: .24s; }
.hudnr-eq span:nth-child(4) { height: 14px; animation-delay: .36s; }
.hudnr-eq span:nth-child(5) { height: 7px; animation-delay: .48s; }
@keyframes hudnr-eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.hudnr-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Cambria, "Noto Serif", Georgia, serif; }
.hudnr-line { display: flex; align-items: center; gap: 8px; }
.hudnr-track { flex: 1; height: 3px; border-radius: 2px; background: #ECEDED; overflow: hidden; }
.hudnr-fill { height: 3px; width: 0; border-radius: 2px; background: var(--hudnr-red); }
.hudnr-time { font-size: 11.5px; color: var(--hudnr-gray); white-space: nowrap; }
.hudnr-close {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--hudnr-gray); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hudnr-close:hover { background: #F1F2F2; }

.hudnr button:focus-visible { outline: 2px solid var(--hudnr-red-deep); outline-offset: 2px; }
.hudnr-start:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

@media (max-width: 640px) {
  /* Xếp ngay trên nút chat, cùng cột bên phải */
  .hudnr-wrap {
    left: auto; right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-end;
  }

  /* Nút nở kèm chữ lúc mới vào, 3 giây sau thu thành hình tròn */
  .hudnr-start {
    height: 48px; padding: 0 18px 0 12px; gap: 8px; font-size: 14px;
    background: #fff; border-color: #E4E5E6; color: var(--hudnr-ink);
    max-width: 80vw; overflow: hidden;
    transition: padding .35s ease, gap .35s ease;
  }
  .hudnr-start span { white-space: nowrap; transition: opacity .25s ease, max-width .35s ease; max-width: 60vw; }
  .hudnr-start.is-compact { width: 48px; padding: 0; gap: 0; justify-content: center; }
  .hudnr-start.is-compact span { opacity: 0; max-width: 0; }
  .hudnr-start svg { color: var(--hudnr-red-deep); }

  /* Đang đọc: thu thành nút tròn có sóng nhạc, chạm vào mới mở thanh điều khiển */
  .hudnr-bar.is-mini {
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  }
  .hudnr-bar.is-mini .hudnr-main,
  .hudnr-bar.is-mini .hudnr-close,
  .hudnr-bar.is-mini .hudnr-play { display: none; }
  .hudnr-bar.is-mini .hudnr-mini-eq { display: flex; }
  .hudnr-mini-eq { display: none; align-items: flex-end; gap: 3px; height: 20px; }
  .hudnr-mini-eq span { width: 3px; border-radius: 1px; background: var(--hudnr-red); height: 8px; }
  .hudnr-bar.is-mini.is-playing .hudnr-mini-eq span { animation: hudnr-eq 1s ease-in-out infinite; }
  .hudnr-mini-eq span:nth-child(2) { height: 16px; animation-delay: .12s; }
  .hudnr-mini-eq span:nth-child(3) { height: 11px; animation-delay: .24s; }
  .hudnr-mini-eq span:nth-child(4) { height: 18px; animation-delay: .36s; }

  .hudnr-bar { width: min(340px, calc(100vw - 32px)); }
  .hudnr-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hudnr-bar.is-playing .hudnr-eq span { animation: none; }
}