/* HAI VU PIANO THUC HANH V2 — 3 OCTAVES + LIBRARY TABS */
.hv-lib-tabs-wrap{border-bottom:1px solid rgba(24,56,79,.08);background:#fff}
.hv-lib-tabs{width:min(1220px,calc(100% - 48px));margin-inline:auto;min-height:58px;display:flex;align-items:flex-end;gap:28px;overflow-x:auto}
.hv-lib-tabs a{position:relative;display:inline-flex;align-items:center;min-height:58px;padding:0 2px;color:#667985;text-decoration:none;white-space:nowrap;font-size:14px;font-weight:560}
.hv-lib-tabs a.active{color:#18384f}
.hv-lib-tabs a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#9a7040}
.hvp2-main{--ink:#18384f;--muted:#637581;--navy:#123f5b;--line:rgba(24,56,79,.12);--gold:#9a7040;background:#fff;color:var(--ink)}
.hvp2-wrap{width:min(1220px,calc(100% - 48px));margin-inline:auto}
.hvp2-hero{padding:64px 0 42px;background:linear-gradient(90deg,#fbfaf6 0%,#f7fafb 100%);border-bottom:1px solid rgba(24,56,79,.06)}
.hvp2-kicker{display:block;margin-bottom:12px;color:var(--gold);font-size:12px;line-height:1.2;font-weight:650;letter-spacing:.045em}
.hvp2-hero h1{margin:0 0 18px;max-width:760px;font-size:clamp(42px,4vw,52px);line-height:1.08;letter-spacing:-.032em;font-weight:620}
.hvp2-hero p{max-width:780px;margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.hvp2-section{padding:42px 0 88px}
.hvp2-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-bottom:18px}
.hvp2-status strong{display:block;margin-bottom:5px;font-size:15px}.hvp2-status span{color:var(--muted);font-size:13px;line-height:1.5}
.hvp2-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.hvp2-btn{min-height:40px;padding:0 13px;border:1px solid rgba(18,63,91,.18);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hvp2-btn[aria-pressed="true"]{color:#fff;background:var(--navy);border-color:var(--navy)}.hvp2-btn:disabled{opacity:.45;cursor:not-allowed}
.hvp2-range{min-width:88px;text-align:center;color:#5e707b;font-size:12px;line-height:40px}
.hvp2-diagnostic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:16px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--line)}
.hvp2-metric{min-height:58px;padding:11px 13px;background:#fff}.hvp2-metric small{display:block;margin-bottom:4px;color:#7a8992;font-size:10px;letter-spacing:.04em}.hvp2-metric strong{font-size:15px;font-weight:600}
.hvp2-piano-shell{padding:16px 16px 20px;border:1px solid var(--line);border-radius:14px;background:#f3f0e9}
.hvp2-piano-scroll{overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:2px}
.hvp2-piano{position:relative;min-width:980px;height:330px;user-select:none;touch-action:none}
.hvp2-whites{position:absolute;inset:0;display:flex}
.hvp2-key.white{position:relative;flex:1 0 0;border:1px solid #b7c0c5;border-left:0;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#fff 0%,#fff 88%,#f2f0eb 100%);cursor:pointer}
.hvp2-key.white:first-child{border-left:1px solid #b7c0c5}.hvp2-key.white.active{background:#dce9ef}
.hvp2-key.black{position:absolute;z-index:3;top:0;left:calc((var(--wi) * 100% / 21) - (100% / 21 * .31));width:calc(100% / 21 * .62);height:61%;border:1px solid #06131c;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#17242d 0%,#061019 78%,#1d2b34 100%);box-shadow:0 3px 5px rgba(0,0,0,.16);cursor:pointer}
.hvp2-key.black.active{background:#315d74}
.hvp2-label{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);color:#687a85;font-size:12px;pointer-events:none;white-space:nowrap}.hvp2-key.black .hvp2-label{bottom:10px;color:#e3e9ed;font-size:10px}.hvp2-piano:not(.show-labels) .hvp2-label{display:none}
.hvp2-note-help{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;padding-top:36px}.hvp2-note-help h2{margin:0 0 12px;font-size:28px;line-height:1.2;font-weight:620}.hvp2-note-help p,.hvp2-note-help li{color:var(--muted);font-size:15px;line-height:1.65}.hvp2-note-help ul{margin:0;padding-left:20px}
.hvp2-credit{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:#7a8992;font-size:12px;line-height:1.6}.hvp2-error{display:none;margin-bottom:16px;padding:11px 13px;border:1px solid #d9b4ad;border-radius:10px;background:#fff8f6;color:#7a392e;font-size:13px}.hvp2-error.show{display:block}
@media(max-width:900px){.hvp2-toolbar,.hvp2-note-help{grid-template-columns:1fr;gap:22px}.hvp2-controls{justify-content:flex-start}}
@media(max-width:720px){.hv-lib-tabs{width:min(100% - 32px,1220px);gap:22px}.hvp2-wrap{width:min(100% - 32px,1220px)}.hvp2-hero{padding:52px 0 38px}.hvp2-hero h1{font-size:clamp(36px,10vw,42px)}.hvp2-section{padding:34px 0 64px}.hvp2-diagnostic{grid-template-columns:repeat(2,minmax(0,1fr))}.hvp2-piano{min-width:900px;height:285px}.hvp2-piano-shell{padding:12px}}