/* ---------- Âm thanh ---------- */
.snd{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;pointer-events:none}
.snd-btn{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(43,36,28,.16);background:rgba(251,246,236,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(60,40,15,.14);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease,ease),background .3s}
.snd-btn:hover{transform:scale(1.06)}
.snd-btn[aria-pressed="true"]{background:#2B241C;border-color:#2B241C}
.snd-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.snd-bars i{width:2.5px;height:6px;border-radius:2px;background:#8C6324;transition:height .3s}
.snd-bars i:nth-child(2){height:12px}.snd-bars i:nth-child(3){height:8px}.snd-bars i:nth-child(4){height:14px}
.snd-btn[aria-pressed="false"] .snd-bars{opacity:.55}
.snd-btn[aria-pressed="true"] .snd-bars i{background:#E8C47A;animation:sndBar 1.6s ease-in-out infinite}
.snd-bars i:nth-child(2){animation-delay:.3s!important}.snd-bars i:nth-child(3){animation-delay:.6s!important}.snd-bars i:nth-child(4){animation-delay:.15s!important}
@keyframes sndBar{0%,100%{height:4px}50%{height:15px}}
.snd-tip{font-size:12.5px;color:#4A3F33;background:rgba(251,246,236,.9);border:1px solid rgba(43,36,28,.12);padding:7px 12px;border-radius:999px;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .6s,transform .6s;box-shadow:0 6px 18px rgba(60,40,15,.1)}
.snd.hint .snd-tip{opacity:1;transform:none}
.snd.hint .snd-btn{animation:sndPulse 2.4s ease-in-out infinite}
@keyframes sndPulse{0%,100%{box-shadow:0 8px 24px rgba(60,40,15,.14),0 0 0 0 rgba(184,134,47,.35)}50%{box-shadow:0 8px 24px rgba(60,40,15,.14),0 0 0 10px rgba(184,134,47,0)}}
html.is-loading .snd{opacity:0}
.snd{transition:opacity .6s}
body.menu-open .snd{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.snd-btn[aria-pressed="true"] .snd-bars i{animation:none;height:10px}.snd.hint .snd-btn{animation:none}}

.snd-vol{pointer-events:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#4A3F33;background:rgba(251,246,236,.9);border:1px solid rgba(43,36,28,.12);padding:6px 12px;border-radius:999px;opacity:0;transform:translateX(-6px);visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 6px 18px rgba(60,40,15,.1)}
.snd:hover .snd-vol,.snd:focus-within .snd-vol,.snd.show-vol .snd-vol{opacity:1;transform:none;visibility:visible}
.snd-vol input{width:96px;accent-color:#B8862F}
.snd-tip{display:none}

/* hồ sơ tông sáng */
.lm .lm-pill{background:#2B241C;color:#F6EEDF}
.lm .lm-ghost{border-color:rgba(43,36,28,.35);color:#2B241C}
.lm .lm-ghost:hover{background:#2B241C;color:#F6EEDF}
.lm .chap p{color:#5A4D3E}
.lm .lm-old{filter:grayscale(1) contrast(1.05) drop-shadow(0 12px 22px rgba(60,40,15,.28))}
.lm-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.25);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
.lm-portrait img+svg{display:none}
.lm-up,.ring-up{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:#2B241C;background:rgba(251,246,236,.88);border:1px solid rgba(43,36,28,.18);border-radius:999px;padding:7px 12px;cursor:pointer}
.lm-up{position:absolute;right:12px;bottom:12px;z-index:4}
.lm-up:hover,.ring-up:hover{background:#2B241C;color:#F6EEDF}
.lm-up input,.ring-up input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ring-up{position:absolute;left:14px;top:14px;z-index:400}

.home-in,.home-inc{position:absolute;right:16px;top:16px;z-index:3;border:1px solid rgba(43,36,28,.18);background:rgba(251,246,236,.9);color:#2B241C;font-weight:500;font-size:13px;padding:8px 14px;border-radius:6px;cursor:pointer}
.home-in[aria-pressed="true"]{background:#2B241C;color:#F6EEDF}
.home-inc{top:auto;bottom:16px;right:16px;background:#B8862F;border-color:#B8862F;color:#fff}
.home-inc[hidden]{display:none}
.home-stage.inside .home-time{display:none}
.home-stage canvas{transition:opacity .35s}
.home-stage.fade canvas{opacity:0}

.nav-user{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#2B241C;white-space:nowrap}
.nav-user i{font-style:normal;width:30px;height:30px;border-radius:50%;background:#B8862F;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.msheet-auth .nav-user{justify-content:center;color:#2B241C}
@media (max-width:640px){.nav-auth .nav-user{font-size:0;gap:0}.nav-auth .nav-user i{font-size:13px}}
