/* Hải Vũ Piano Academy · Piano + Aural upgrade v32 */
.hv-home-piano-v32 .wrap{
  padding-top: clamp(26px,3.2vw,48px);
  padding-bottom: clamp(28px,3.4vw,52px);
}
.hv-home-piano-intro{
  max-width: 860px;
  margin: 0 auto 24px;
  text-align: center;
}
.hv-home-piano-kicker,
.hv-aural-kicker,
.hv-result-kicker{
  color:#9a6424;
  font-size:12px;
  font-weight:700;
  letter-spacing:.045em;
}
.hv-home-piano-intro h2{
  max-width:780px;
  margin:8px auto 10px;
  color:#173b55;
  font-size:clamp(27px,2.35vw,38px);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:500;
}
.hv-home-piano-intro p{
  max-width:800px;
  margin:0 auto;
  color:#52697a;
  font-size:14px;
  line-height:1.65;
}
.hv-home-piano-hint{
  margin:10px 0 2px;
  color:#657887;
  font-size:12.5px;
  font-style:italic;
}

/* Aural page */
.hv-aural-hero{
  border-bottom:1px solid #e5ebef;
  background:
    radial-gradient(circle at 82% 20%, rgba(213,187,139,.12), transparent 32%),
    linear-gradient(180deg,#fbfcfc 0%,#f6f9fa 100%);
}
.hv-aural-hero .wrap{
  max-width:1040px;
  padding-top:48px;
  padding-bottom:42px;
}
.hv-aural-hero h1{
  margin:8px 0 12px;
  color:#173b55;
  font-size:clamp(38px,4.2vw,58px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:500;
}
.hv-aural-hero p{
  max-width:820px;
  margin:0;
  color:#506a7b;
  font-size:15px;
  line-height:1.72;
}
.hv-aural-meta{
  display:inline-flex;
  margin-top:18px;
  padding:8px 12px;
  border:1px solid #dce5ea;
  border-radius:999px;
  color:#526b7a;
  background:rgba(255,255,255,.76);
  font-size:12px;
}
.hv-aural-section{
  padding:42px 0 70px;
  background:#fff;
}
.hv-aural-section .wrap{max-width:900px}
.hv-aural-card{
  border:1px solid #dfe7ec;
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 42px rgba(18,50,73,.06);
  overflow:hidden;
}
.hv-aural-welcome,
.hv-result{
  padding:clamp(34px,5vw,62px);
  text-align:center;
}
.hv-aural-mark{
  width:58px;height:58px;
  display:grid;place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  border:1px solid #d8e2e8;
  color:#173b55;
  font-size:28px;
  background:#f7fafb;
}
.hv-aural-welcome h2,
.hv-result h2,
.hv-question h2{
  color:#173b55;
  font-weight:500;
  letter-spacing:-.02em;
}
.hv-aural-welcome h2{font-size:30px;margin:0 0 12px}
.hv-aural-welcome p,
.hv-result p{
  max-width:650px;
  margin:0 auto 24px;
  color:#597080;
  line-height:1.7;
  font-size:14px;
}
.hv-aural-primary,
.hv-aural-secondary,
.hv-listen,
.hv-answer,
.hv-candidate{
  font:inherit;
  cursor:pointer;
  transition:.18s ease;
}
.hv-aural-primary{
  border:1px solid #173b55;
  background:#173b55;
  color:#fff;
  border-radius:999px;
  padding:12px 20px;
  font-weight:650;
}
.hv-aural-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,59,85,.14)}
.hv-aural-secondary{
  border:1px solid #cddae2;
  background:#fff;
  color:#173b55;
  border-radius:999px;
  padding:12px 20px;
  font-weight:650;
}
.hv-aural-topline{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:17px 24px 14px;
  color:#617787;
  font-size:12px;
  border-bottom:1px solid #edf1f4;
}
.hv-progress{
  height:3px;
  background:#edf2f4;
}
.hv-progress span{
  display:block;
  height:100%;
  background:#b27b35;
  transition:width .25s ease;
}
.hv-question{
  padding:clamp(30px,4.5vw,52px);
}
.hv-question h2{
  max-width:680px;
  margin:0 auto 8px;
  text-align:center;
  font-size:clamp(25px,3vw,34px);
  line-height:1.22;
}
.hv-question-note{
  margin:0 auto 22px;
  text-align:center;
  color:#718492;
  font-size:13px;
}
.hv-listen{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:210px;
  margin:0 auto;
  padding:12px 18px;
  border:1px solid #173b55;
  border-radius:999px;
  background:#173b55;
  color:#fff;
  font-weight:650;
}
.hv-listen.is-dim{opacity:.55}
.hv-replay{
  text-align:center;
  color:#7a8c98;
  font-size:11.5px;
  margin-top:8px;
}
.hv-answer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:690px;
  margin:30px auto 0;
}
.hv-answer{
  min-height:52px;
  border:1px solid #d3dee5;
  border-radius:14px;
  background:#fff;
  color:#27475d;
  font-weight:650;
}
.hv-answer:hover:not(:disabled){border-color:#9fb5c4;background:#f8fafb}
.hv-answer.is-correct{
  border-color:#7fa48b;
  background:#f0f6f2;
  color:#305d3f;
}
.hv-answer.is-wrong{
  border-color:#c99d92;
  background:#fbf4f2;
  color:#7a4338;
}
.hv-answer:disabled{cursor:default}
.hv-candidate-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:18px auto -10px;
}
.hv-candidate{
  padding:8px 13px;
  border:1px solid #d9e2e7;
  border-radius:999px;
  background:#f8fafb;
  color:#315169;
  font-size:12px;
}
.hv-feedback{
  min-height:0;
  max-width:690px;
  margin:22px auto 0;
  padding:0;
  text-align:center;
}
.hv-feedback.ok,
.hv-feedback.no{
  padding:16px 18px;
  border-radius:14px;
}
.hv-feedback.ok{background:#f1f7f3;color:#315d41}
.hv-feedback.no{background:#faf6f3;color:#705146}
.hv-feedback strong,
.hv-feedback span{display:block}
.hv-feedback span{font-size:12.5px;margin-top:4px}
.hv-next{margin-top:14px}
.hv-score{
  margin:9px 0 2px;
  color:#173b55;
  font-size:clamp(58px,8vw,90px);
  line-height:1;
  letter-spacing:-.05em;
}
.hv-score span{font-size:.31em;letter-spacing:0;color:#6c8190}
.hv-correct-count{
  color:#6a7f8e;
  font-size:13px;
  margin-bottom:26px;
}
.hv-result h2{font-size:31px;margin:0 0 10px}
.hv-high-note{
  max-width:650px;
  margin:0 auto 22px;
  padding:14px 16px;
  border:1px solid #e7d9bf;
  border-radius:14px;
  background:#fdf9f1;
  color:#795827;
  font-size:13px;
  line-height:1.6;
}
.hv-result-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.hv-aural-link{
  color:#173b55;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  padding:10px 4px;
}
@media (max-width:760px){
  .hv-home-piano-intro{text-align:left;margin-bottom:18px}
  .hv-home-piano-intro h2{margin-left:0}
  .hv-home-piano-intro p{margin-left:0}
  .hv-aural-hero .wrap{padding-top:34px;padding-bottom:32px}
  .hv-aural-section{padding:24px 0 50px}
  .hv-aural-card{border-radius:16px}
  .hv-answer-grid{grid-template-columns:1fr}
  .hv-aural-topline{padding-left:18px;padding-right:18px}
  .hv-question{padding:26px 18px 30px}
}