/* Đèn sáng/tối chậm + nút nhạc ở header. Tiền tố hvm-. */
html.hvm-vt::view-transition-old(root), html.hvm-vt::view-transition-new(root) { animation-duration: 2.2s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
html.hvm-fade *, html.hvm-fade *::before, html.hvm-fade *::after { transition: background-color 1.8s ease, color 1.8s ease, border-color 1.8s ease, fill 1.8s ease, stroke 1.8s ease, box-shadow 1.8s ease !important; }
@media (prefers-reduced-motion: reduce) { html.hvm-vt::view-transition-old(root), html.hvm-vt::view-transition-new(root) { animation-duration: .01s; } html.hvm-fade * { transition: none !important; } }
.hvm-b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); cursor: pointer; position: relative; flex: none; }
.hvm-b:hover { background: var(--c-surface-2); }
.hvm-b:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.hvm-b svg { width: 20px; height: 20px; }
.hvm-bulb { display: block; flex: none; }
.hvm-bulb .f { fill: transparent; transition: fill 2s ease, filter 2s ease; }
html:not([data-theme="dem"]) .hvm-bulb .f { fill: #ffcf4d; filter: drop-shadow(0 0 4px rgba(255, 200, 70, .75)); }
.hvm-bars { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.hvm-bars s { display: block; width: 3px; background: var(--c-primary); border-radius: 2px; animation: hvm-eq .9s ease-in-out infinite; }
.hvm-bars s:nth-child(2) { animation-delay: .2s; } .hvm-bars s:nth-child(3) { animation-delay: .4s; }
@keyframes hvm-eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }
[data-hvm-btn].is-on .hvm-bars { display: flex; } [data-hvm-btn].is-on > svg { display: none; }
@media (prefers-reduced-motion: reduce) { .hvm-bars s { animation: none; height: 10px; } }
@media (max-width: 520px) { .app-header .hvm-b { width: 40px; height: 40px; } }