#vn-toast-clock { flex: none; color: #e2c6ff; font-size: 17px; font-variant-numeric: tabular-nums; }
.vn-toast .dh-toast-icon { color: #c99bff; }
.vn-toast .dh-toast-msg { margin: 4px 0 2px; }
#vn-hud {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px);
  transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  max-width: calc(100vw - 16px);
  font: 700 12px/1.2 var(--font-serif, serif); color: #ece0ff; text-shadow: 0 1px 2px #000;
}
.vn-dong {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 1px;
  max-width: 100%; box-sizing: border-box; padding: 3px 8px 3px 10px; border-radius: 8px;
  border: 1px solid rgba(160, 110, 230, 0.75); background: rgba(16, 10, 26, 0.88);
}
#vn-ten { font-size: 11px; color: #cdb2ff; letter-spacing: 0.02em; white-space: nowrap; }
#vn-gio { font-size: 16px; color: #ffe08a; font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; }
.vn-mang { color: #ff7a8a; font-size: 14px; letter-spacing: 1px; }
.vn-so { font-size: 11px; opacity: 0.85; white-space: nowrap; }
.vn-nut {
  pointer-events: auto; cursor: pointer; font: inherit; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  color: #ffd6d6; background: rgba(60, 20, 30, 0.9); border: 1px solid #a8566a;
}
.vn-lo { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.vn-loc {
  padding: 1px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap;
  background: rgba(16, 10, 26, 0.86); border: 1px solid var(--vn-mau, rgba(160, 110, 230, 0.6));
  color: var(--vn-mau, #d8c8f0);
}
.vn-loc i { font-style: normal; margin-left: 3px; color: #d8c8f0; }
.vn-loc.thong { box-shadow: 0 0 6px var(--vn-mau, #6fe0a0); }
.vn-loc.thong i { color: #7dffb0; }
.vn-loc.cut { opacity: 0.55; text-decoration: line-through; }
.vn-loc.cut i { color: #ff8a8a; }
#vn-banner {
  position: fixed; left: 50%; top: 26%; transform: translateX(-50%); z-index: 31; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  font-family: var(--font-serif, serif); text-shadow: 0 2px 6px #000, 0 0 12px rgba(150, 80, 255, 0.6);
}
#vn-banner strong { font-size: 26px; color: #f0e2ff; letter-spacing: 0.04em; }
#vn-banner small { font-size: 13px; color: #d8c4ff; }
#vn-guc {
  position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); z-index: 31; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 8px;
  background: rgba(30, 8, 14, 0.82); border: 1px solid #9a4a5a; font-family: var(--font-serif, serif); text-shadow: 0 1px 2px #000;
}
#vn-guc strong { font-size: 16px; color: #ffc4c4; }
#vn-guc small { font-size: 12px; color: #f0d6d6; }
#vn-bao {
  position: fixed; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 200px); z-index: 29; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 46vw;
  font: 700 11px/1.25 var(--font-serif, serif); text-shadow: 0 1px 2px #000;
}
.vn-tin { padding: 2px 8px; border-radius: 6px; background: rgba(16, 10, 26, 0.82); color: #e8dcff; border-left: 3px solid #a07ae0; }
.vn-tin.cut { border-left-color: #d86a6a; color: #ffd0d0; }
.vn-tin.canh { border-left-color: #e0b04a; color: #ffe6b0; }
.vn-tin.pk { border-left-color: #ff6a6a; }
.vn-tin.thuong { border-left-color: #ffd36a; color: #fff0c0; }
.vn-nho { font-size: 11px; opacity: 0.75; }
body.vn-trong #btn-meditate, body.vn-trong .btn-meditate { display: none !important; }
@media (min-width: 521px) {
  body.vn-trong #hud-target { top: 60px; }
}
@media (max-width: 520px) {
  #vn-hud { top: calc(env(safe-area-inset-top, 0px) + 150px); }
  #vn-banner strong { font-size: 20px; }
  #vn-bao { top: calc(env(safe-area-inset-top, 0px) + 230px); max-width: 60vw; }
}