.tnm-app{display:flex;min-height:760px;background:#f5f7fa;border-radius:20px;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17202a;box-shadow:0 18px 50px rgba(20,33,61,.10)}
.tnm-sidebar{width:290px;background:#fff;border-right:1px solid #e3e7eb;padding:22px;flex:none}
.tnm-brand{font-size:15px;margin-bottom:30px}.tnm-brand small{display:block;font-size:9px;letter-spacing:2px;color:#7d8790;margin-top:3px}
.tnm-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#7d8790}.tnm-group{font-size:10px;font-weight:800;color:#9ba4ac;padding:17px 4px 5px}
.tnm-course{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;background:#fff;border-radius:10px;padding:11px;text-align:left;cursor:pointer;transition:.18s}.tnm-course:hover{background:#eef4f8;transform:translateX(2px)}
.tnm-main{flex:1;padding:30px;min-width:0}.tnm-top{border-bottom:1px solid #e1e5e9;padding-bottom:18px}.tnm-top small{font-size:10px;letter-spacing:1.5px;color:#7d8790}.tnm-top h1{margin:5px 0 3px}.tnm-top p{margin:0;color:#6d7881}
.tnm-welcome{max-width:760px;margin:60px auto;background:#fff;border:1px solid #e1e5e9;border-radius:20px;padding:42px;text-align:center}.tnm-welcome-icon{font-size:58px}.tnm-welcome h2{margin:9px 0}.tnm-welcome p{color:#69747e;line-height:1.7}.tnm-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tnm-pills span{background:#f0f4f7;padding:8px 12px;border-radius:99px;font-size:12px}
.tnm-course-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.tnm-course-summary>div{background:#fff;border:1px solid #e1e5e9;border-radius:12px;padding:15px}.tnm-course-summary b,.tnm-course-summary small{display:block}.tnm-course-summary b{font-size:20px}.tnm-course-summary small{color:#78828a;margin-top:3px}
.tnm-lessons{display:grid;gap:10px}.tnm-lesson-card{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid #dfe4e8;border-radius:12px;padding:16px;cursor:pointer;transition:.18s}.tnm-lesson-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(20,33,61,.08)}.tnm-lesson-card .num{font-size:18px;color:#87919a}.tnm-lesson-card span{flex:1}.tnm-lesson-card strong,.tnm-lesson-card small{display:block}.tnm-lesson-card small{color:#7b858d;margin-top:5px}.tnm-lesson-card em{font-style:normal;font-size:12px;color:#53616b}
.tnm-loading,.tnm-empty{background:#fff;border-radius:12px;padding:35px;text-align:center;color:#69747e}.tnm-error{background:#fff1f0;color:#a11;padding:18px;border-radius:10px}
.tnm-modal{display:none;position:fixed;inset:0;background:rgba(11,17,27,.72);z-index:99999;padding:16px}.tnm-modal.show{display:block}.tnm-modal-box{position:relative;background:#fff;max-width:1320px;height:96vh;margin:auto;border-radius:18px;overflow:auto;padding:30px}.tnm-modal-box>#tnm-close{position:absolute;right:12px;top:5px;border:0;background:none;font-size:31px;cursor:pointer;z-index:4}
.tnm-lesson-head{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e4e8eb;padding-bottom:15px}.tnm-lesson-head small{font-size:10px;letter-spacing:1.5px;color:#7d8790}.tnm-lesson-head h2{margin:4px 0}.tnm-progress{text-align:right}.tnm-progress b{font-size:22px;display:block}.tnm-progress small{font-size:11px;color:#7d8790}

.tnm-modal-box section{margin-top:26px;scroll-margin-top:10px}.tnm-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#111}.tnm-content{line-height:1.75;margin-top:15px}.tnm-muted{padding:28px;text-align:center;color:#707a82;background:#f7f9fa;border-radius:10px}
.tnm-section-title{display:flex;align-items:end;gap:10px;margin-bottom:10px}.tnm-section-title>span{font-size:24px;font-weight:900;color:#bbc3ca}.tnm-section-title h3{margin:0}.tnm-section-title small{color:#7a848c}.tnm-score-tools{margin-left:auto;display:flex;gap:5px;align-items:center}.tnm-score-tools button{border:1px solid #d6dce1;background:#fff;border-radius:7px;padding:6px 10px}
.tnm-score-box{border:1px solid #dfe4e8;border-radius:13px;background:#fff;padding:10px;min-height:380px;overflow:hidden}.tnm-osmd{width:100%}.tnm-score-status{font-size:12px;color:#68737c;padding:7px}.tnm-score-error{padding:50px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
.tnm-practice{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:14px}.tnm-hand-tabs{display:flex;gap:6px;flex-wrap:wrap}.tnm-hand-tabs button{border:1px solid #d4dbe1;background:#fff;border-radius:8px;padding:9px 13px;cursor:pointer}.tnm-hand-tabs button.active{background:#17202a;color:#fff}
.tnm-transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}.tnm-transport button{border:1px solid #d4dbe1;background:#fff;border-radius:8px;padding:9px 12px;cursor:pointer}.tnm-transport .play{background:#17202a;color:#fff}.tnm-transport label{display:flex;align-items:center;gap:7px}.tnm-transport input{width:200px}.tnm-bpm{min-width:72px}.tnm-practice-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}
.tnm-keyboard{display:flex;height:145px;overflow-x:auto;margin-top:12px;padding-bottom:3px}.tnm-keyboard button{flex:0 0 27px;height:140px;background:#fff;border:1px solid #777;border-radius:0 0 4px 4px}.tnm-keyboard button.black{background:#151515;height:88px;margin:0 -8px;z-index:2;flex-basis:18px;border-color:#111;border-radius:0 0 3px 3px}
.tnm-modal-box audio{width:100%;margin-top:10px}
@media(max-width:900px){.tnm-app{display:block}.tnm-sidebar{width:auto;border-right:0;border-bottom:1px solid #e3e7eb}.tnm-main{padding:16px}.tnm-modal-box{padding:18px}.tnm-course-summary{grid-template-columns:1fr 1fr}.tnm-score-tools{margin-left:0}.tnm-section-title{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:600px){.tnm-course-summary{grid-template-columns:1fr}.tnm-lesson-head{display:block}.tnm-progress{text-align:left;margin-top:8px}.tnm-score-box{min-height:300px}.tnm-transport input{width:135px}}
/* 4.0.0 UX refinement */
.tnm-guide-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:14px;align-items:stretch}
.tnm-guide-video,.tnm-guide-pdf{min-width:0}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.6}
.tnm-guide-pdf{background:#f7f9fa;border:1px solid #e1e5e9;border-radius:12px;overflow:hidden}
.tnm-pdf-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-bottom:1px solid #e1e5e9}
.tnm-pdf-head small{font-size:10px;color:#7b858d}
.tnm-pdf{display:block;width:100%;height:clamp(250px,25vw,380px);border:0;background:#fff}
.tnm-score-box{min-height:270px;height:auto;max-height:430px;overflow:auto;padding:8px}
.tnm-osmd{max-height:390px;overflow:hidden}
.tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice{padding:11px}
.tnm-practice .tnm-practice-status{margin-top:9px}
.tnm-refine-panel{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:13px}
.tnm-refine-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}
.tnm-refine-panel .tnm-keyboard{margin-top:10px}
.tnm-section-title{margin-bottom:8px}
@media(max-width:900px){
 .tnm-guide-grid{grid-template-columns:1fr}
 .tnm-guide-pdf .tnm-pdf{height:330px}
 .tnm-guide-video .tnm-video iframe{aspect-ratio:16/9}
 .tnm-score-box{max-height:360px}
}
@media(max-width:600px){
 .tnm-pdf-head{display:block}.tnm-pdf-head small{display:block;margin-top:2px}
 .tnm-pdf{height:300px}
 .tnm-score-box{max-height:320px;min-height:230px}
}

/* 4.0.2 interface refinement */
.tnm-guide-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:14px;align-items:stretch}
.tnm-guide-video,.tnm-guide-pdf{min-width:0}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.5}
.tnm-guide-pdf{border:1px solid #e1e5e9;border-radius:12px;overflow:hidden;background:#f7f9fa;min-height:260px}
.tnm-pdf{display:block;width:100%;height:100%;min-height:260px;border:0;background:#fff}
.tnm-score-box{min-height:255px;max-height:400px;padding:7px;overflow:auto}
.tnm-osmd{max-height:365px;overflow:hidden}
.tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice{padding:11px}
.tnm-refine-panel{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:13px}
.tnm-refine-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}

@media(max-width:900px){.tnm-guide-grid{grid-template-columns:1fr}.tnm-guide-pdf{min-height:330px}.tnm-pdf{height:330px}.tnm-score-box{max-height:350px}}
@media(max-width:600px){.tnm-guide-pdf,.tnm-pdf{min-height:290px;height:290px}.tnm-score-box{min-height:220px;max-height:320px}}

/* 4.0.3 — integrated score into Luyện tập */
.tnm-practice{padding:11px}
.tnm-practice-score{margin-top:12px;min-height:270px;max-height:410px;border:1px solid #dfe4e8;border-radius:13px;background:#fff;padding:7px;overflow:auto}
.tnm-practice-score .tnm-osmd{max-height:380px;overflow:hidden}
.tnm-practice-score .tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice-score .tnm-score-status{font-size:12px;color:#68737c;padding:7px}
.tnm-practice-score .tnm-score-error{padding:45px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
.tnm-section-title{margin-bottom:8px}
@media(max-width:900px){.tnm-practice-score{max-height:360px;min-height:240px}.tnm-practice-score .tnm-osmd{max-height:330px}}
@media(max-width:600px){.tnm-practice-score{max-height:320px;min-height:220px}}

/* 4.0.6 — XML is the actual Luyện tập canvas */
.tnm-practice-score-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:10px;flex-wrap:wrap}
.tnm-practice-score-tools button{border:1px solid #d5dce2;background:#fff;border-radius:7px;padding:6px 10px;cursor:pointer}
.tnm-practice-score-tools button:hover,.tnm-practice-score-tools button.active{background:#17202a;color:#fff;border-color:#17202a}
.tnm-practice-score-tools b{font-size:11px;min-width:42px;text-align:center;color:#5d6871}
.tnm-practice-score{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:330px;max-height:455px;overflow:auto;background:#fff;padding:8px 10px 16px}
.tnm-practice-score .tnm-osmd{width:100%;display:flex;justify-content:center;align-items:flex-start;overflow:visible;max-height:none}
.tnm-practice-score .tnm-osmd>svg{display:block;margin:0 auto;max-width:none}
.tnm-score-loading{width:100%;padding:65px 20px;text-align:center;color:#7a858d;font-size:13px}
.tnm-practice-score .tnm-score-error{width:100%;padding:45px 20px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
@media(max-width:600px){
 .tnm-practice-score-tools{justify-content:flex-start}
 .tnm-practice-score{min-height:280px;max-height:390px}
}

/* 4.0.7 — compact score controls + responsive 88-key piano */
.tnm-practice-score-tools{justify-content:flex-end;margin-left:auto;margin-top:0}
.tnm-practice .tnm-hand-tabs{display:flex;align-items:center;gap:6px}
.tnm-practice-score-tools button{font-size:11px;padding:5px 8px}
.tnm-practice-score-tools b{font-size:10px;min-width:36px}
.tnm-practice-score{margin-top:9px}
.tnm-keyboard{height:auto;overflow:visible;margin-top:12px;padding:0}
.tnm-piano-wrap{width:100%;overflow:hidden}
.tnm-piano-controls{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-bottom:6px;font-size:11px;color:#69747c}
.tnm-piano-controls span{margin-right:auto;font-weight:700;color:#48535c}
.tnm-piano-controls button{width:27px;height:25px;border:1px solid #d3dbe1;background:#fff;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
.tnm-piano-controls b{font-size:10px;min-width:48px;text-align:center}
.tnm-piano-keys{display:flex;position:relative;width:100%;height:112px;overflow:hidden;justify-content:center}
.tnm-piano-keys .white{position:relative;flex:1 1 0;min-width:8px;height:112px;margin:0;border:1px solid #7b858d;border-radius:0 0 3px 3px;background:#fff;cursor:pointer;z-index:1}
.tnm-piano-keys .white:active{background:#e9eef2}
.tnm-piano-keys .black{position:relative;flex:0 0 14px;height:70px;margin:0 -7px;z-index:3;border:1px solid #222;border-radius:0 0 3px 3px;background:#16191c;cursor:pointer}
.tnm-piano-keys .black:active{background:#4d555b}
@media(max-width:700px){
 .tnm-piano-keys{height:96px}.tnm-piano-keys .white{height:96px}.tnm-piano-keys .black{height:60px;flex-basis:12px;margin:0 -6px}
 .tnm-practice-score-tools{margin-left:4px}
}

/* 4.0.8 — typographic hierarchy + refined piano keyboard */
.tnm-section-title{position:relative;display:flex;align-items:center;gap:12px;padding:4px 0 11px;margin-bottom:10px}
.tnm-section-title>span{font-size:26px;line-height:1;font-weight:900;letter-spacing:-1px;color:#17202a;min-width:34px}
.tnm-section-title>div:not(.tnm-score-tools){position:relative}
.tnm-section-title h3{font-size:19px;line-height:1.2;letter-spacing:-.2px;font-weight:800;color:#17202a}
.tnm-section-title small{font-size:11px;line-height:1.35;color:#7b858d}
.tnm-section-title:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;border-radius:3px;background:#17202a;opacity:.16}

.tnm-hand-tabs{display:flex;align-items:center;gap:7px}
.tnm-hand-tabs button{font-weight:700;font-size:13px;padding:9px 14px;min-height:38px}
.tnm-practice-score-tools{margin-left:auto;margin-top:0;align-self:center;flex-wrap:nowrap}
.tnm-practice-score-tools button{font-size:10px;line-height:1;padding:5px 8px;min-height:28px}
.tnm-practice-score-tools b{font-size:10px;line-height:1;min-width:34px}
.tnm-practice-score{margin-top:6px}

/* Make the small score tools share exactly the same row as the three main tabs. */
.tnm-practice>.tnm-hand-tabs{display:flex;align-items:center}
.tnm-practice>.tnm-practice-score-tools{display:flex;align-items:center;justify-content:flex-end}

/* Piano: compact, elegant proportions. White keys remain tall; black keys are
   substantially shorter and narrower, with correct overhang into adjacent whites. */
.tnm-piano-controls{justify-content:flex-end;margin-bottom:7px;min-height:24px}
.tnm-piano-controls span{display:none}
.tnm-piano-controls button{width:26px;height:24px;font-size:15px}
.tnm-piano-controls b{font-size:10px;min-width:46px}
.tnm-piano-keys{height:126px;position:relative;display:flex;justify-content:flex-start;align-items:flex-start;padding:0 1px}
.tnm-piano-keys .white{height:126px;flex:1 1 0;min-width:0;width:auto;margin:0;border:1px solid #777f86;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(to bottom,#fff 0%,#fbfbfb 82%,#eef1f3 100%);box-sizing:border-box}
.tnm-piano-keys .black{position:absolute;height:78px;width:16px;flex:0 0 16px;margin:0;z-index:3;border:1px solid #17191b;border-top:0;border-radius:0 0 4px 4px;background:linear-gradient(to right,#0e0f10,#24282b 50%,#090a0b);box-shadow:0 2px 3px rgba(0,0,0,.22);transform:translateX(-8px)}
.tnm-piano-keys .black:active{background:#51585d}
@media(max-width:900px){
 .tnm-section-title>span{font-size:24px}
 .tnm-section-title h3{font-size:18px}
}
@media(max-width:700px){
 .tnm-hand-tabs button{font-size:12px;padding:8px 10px}
 .tnm-practice-score-tools button{padding:5px 6px}
 .tnm-piano-keys{height:110px}
 .tnm-piano-keys .white{height:110px}
 .tnm-piano-keys .black{height:68px;width:13px;flex-basis:13px;transform:translateX(-6.5px)}
}

/* =========================================================
   Thành Nam Music Piano Online 4.0.9
   Unified artistic learning interface
   ========================================================= */

/* Main section hierarchy */
.tnm-section-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:5px 2px 12px;
  margin:0 0 12px;
}
.tnm-section-title>span{
  flex:0 0 auto;
  font-size:27px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.4px;
  color:#f07818;
}
.tnm-section-title>div:not(.tnm-score-tools){
  min-width:0;
}
.tnm-section-title h3{
  margin:0;
  font-size:19px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.25px;
  color:#1b2630;
}
.tnm-section-title small{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  color:#7d878f;
}
.tnm-section-title:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:54px;
  height:2px;
  border-radius:10px;
  background:#f07818;
  opacity:.22;
}

/* Main content separators: subtle artistic orange */
#tnm-guide,
#tnm-practice,
#tnm-refine,
#tnm-audio{
  position:relative;
  padding-bottom:22px;
  margin-bottom:20px;
}
#tnm-guide:after,
#tnm-practice:after,
#tnm-refine:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(240,120,24,.05),rgba(240,120,24,.42),rgba(240,120,24,.05));
}

/* 01 — guide */
.tnm-guide-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  gap:14px;
  align-items:stretch;
}
.tnm-guide-video,
.tnm-guide-pdf{
  min-width:0;
  border:1px solid #e4e8eb;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.035);
}
.tnm-guide-video .tnm-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/8.7;
  border:0;
}
.tnm-guide-pdf{
  min-height:250px;
}
.tnm-guide-pdf .tnm-pdf{
  display:block;
  width:100%;
  height:100%;
  min-height:250px;
  border:0;
}

/* 02 — practice: large tabs + compact controls on the same row */
.tnm-practice-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-bottom:7px;
}
.tnm-hand-tabs{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.tnm-hand-tabs button{
  min-height:40px;
  padding:9px 15px;
  border:1px solid #dce2e6;
  border-radius:9px;
  background:#fff;
  color:#34404a;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}
.tnm-hand-tabs button:hover{
  border-color:#c8d0d6;
  transform:translateY(-1px);
}
.tnm-hand-tabs button.active{
  background:#1b2630;
  border-color:#1b2630;
  color:#fff;
  box-shadow:0 4px 12px rgba(27,38,48,.12);
}
.tnm-practice-score-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin:0 0 0 auto;
  flex:0 0 auto;
}
.tnm-practice-score-tools button{
  min-height:27px;
  padding:5px 8px;
  border:1px solid #dce2e6;
  border-radius:7px;
  background:#fff;
  color:#59636b;
  font-size:10px;
  line-height:1;
  cursor:pointer;
}
.tnm-practice-score-tools b{
  min-width:35px;
  text-align:center;
  font-size:10px;
  color:#657078;
}
.tnm-practice-score{
  margin-top:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  min-height:290px;
  max-height:430px;
  overflow:auto;
  padding:7px 10px 14px;
  border:1px solid #e3e7ea;
  border-radius:13px;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.025);
}
.tnm-practice-score .tnm-osmd{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.tnm-practice-score .tnm-osmd>svg{
  display:block;
  margin:0 auto;
}

/* 03 — refine & keyboard */
.tnm-refine-panel{
  padding:14px;
  border:1px solid #e3e7ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.025);
}
.tnm-transport{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tnm-transport button{
  min-width:45px;
  height:42px;
  border:1px solid #dfe4e8;
  border-radius:8px;
  background:#fff;
}
.tnm-transport button.play{
  background:#1b2630;
  color:#fff;
  border-color:#1b2630;
}
.tnm-refine-status{
  margin-top:9px;
  padding:8px 10px;
  border-radius:8px;
  background:#f6f8f9;
  color:#66717a;
  font-size:11px;
}
.tnm-keyboard{
  margin-top:13px;
  padding:0;
  overflow:hidden;
}
.tnm-piano-wrap{
  width:100%;
}
.tnm-piano-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-height:24px;
  margin-bottom:6px;
}
.tnm-piano-controls span{
  display:none;
}
.tnm-piano-controls button{
  width:26px;
  height:24px;
  padding:0;
  border:1px solid #dce2e6;
  border-radius:6px;
  background:#fff;
}
.tnm-piano-controls b{
  min-width:45px;
  font-size:10px;
  text-align:center;
  color:#68737b;
}
.tnm-piano-keys{
  position:relative;
  display:flex;
  align-items:flex-start;
  width:100%;
  height:122px;
  padding:0 1px;
  overflow:hidden;
}
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:122px;
  margin:0;
  padding:0;
  border:1px solid #858d93;
  border-top:0;
  border-radius:0 0 5px 5px;
  background:linear-gradient(to bottom,#fff 0%,#fff 80%,#eef1f3 100%);
  box-sizing:border-box;
  z-index:1;
  cursor:pointer;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:#e5eaed;
}
.tnm-piano-keys .black{
  position:absolute;
  width:15px;
  height:73px;
  margin:0;
  padding:0;
  border:1px solid #171a1c;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909,#282c2f 50%,#090a0b);
  box-shadow:0 2px 3px rgba(0,0,0,.22);
  z-index:3;
  transform:translateX(-7.5px);
  cursor:pointer;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:#4a5054;
}

/* 04 — audio */
#tnm-audio audio{
  width:100%;
  margin-top:4px;
}

/* responsive */
@media(max-width:900px){
  .tnm-guide-grid{grid-template-columns:1fr}
  .tnm-guide-pdf{min-height:320px}
  .tnm-guide-pdf .tnm-pdf{height:320px}
  .tnm-section-title>span{font-size:24px}
  .tnm-section-title h3{font-size:18px}
}
@media(max-width:700px){
  .tnm-practice-topline{
    align-items:flex-end;
    gap:7px;
  }
  .tnm-hand-tabs{gap:4px}
  .tnm-hand-tabs button{
    min-height:37px;
    padding:8px 9px;
    font-size:11px;
  }
  .tnm-practice-score-tools{
    gap:2px;
  }
  .tnm-practice-score-tools button{
    padding:5px 6px;
  }
  .tnm-piano-keys{height:108px}
  .tnm-piano-keys .white{height:108px}
  .tnm-piano-keys .black{height:65px;width:12px;transform:translateX(-6px)}
}
@media(max-width:500px){
  .tnm-practice-topline{
    flex-wrap:wrap;
    align-items:center;
  }
  .tnm-practice-score-tools{
    margin-left:auto;
  }
}

/* 4.1.0 — rebuilt virtual piano: two stable layers */
.tnm-piano-keys{
  position:relative;
  display:block;
  width:100%;
  height:126px;
  overflow:hidden;
  padding:0;
  background:#e7eaec;
  border:1px solid #aeb6bc;
  border-radius:0 0 6px 6px;
  box-sizing:border-box;
  touch-action:none;
}
.tnm-piano-whites{
  position:absolute;
  inset:0;
  display:flex;
  width:100%;
  height:100%;
  z-index:1;
}
.tnm-piano-blacks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}
.tnm-piano-keys .white{
  position:relative;
  display:block;
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #858d93;
  border-radius:0 0 4px 4px;
  background:linear-gradient(to bottom,#ffffff 0%,#ffffff 80%,#edf0f2 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.7);
  box-sizing:border-box;
  cursor:pointer;
  z-index:1;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:0;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#eef2f4,#dfe5e8);
}
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  width:clamp(8px,1.15%,16px);
  height:64%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #121416;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909 0%,#303438 48%,#090a0b 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.30);
  box-sizing:border-box;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3e4549,#687076,#30363a);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.tnm-piano-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-height:24px;
  margin-bottom:6px;
}
.tnm-piano-controls button{
  width:26px;
  height:24px;
  padding:0;
  border:1px solid #dce2e6;
  border-radius:6px;
  background:#fff;
  color:#53606a;
  cursor:pointer;
}
.tnm-piano-controls b{
  min-width:74px;
  font-size:9px;
  line-height:1;
  text-align:center;
  color:#68737b;
}
@media(max-width:700px){
  .tnm-piano-keys{height:108px}
  .tnm-piano-keys .black{height:64%;width:clamp(7px,1.7%,13px)}
}

/* =========================================================
   4.2.0 — final responsive learning UI
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.tnm-learning-app,.tnm-learning-app *{box-sizing:border-box}
.tnm-learning-app{width:100%;max-width:1500px;margin:0 auto;padding:18px 22px;color:#1b2630}
.tnm-learning-app .tnm-section-title{padding:2px 0 10px;margin-bottom:11px}
.tnm-learning-app .tnm-section-title>span{font-size:30px;color:#f07818}
.tnm-learning-app .tnm-section-title h3{font-size:20px}
.tnm-learning-app .tnm-section-title small{font-size:11px}

/* light orange separators */
#tnm-guide:after,#tnm-practice:after,#tnm-refine:after{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(240,120,24,.42) 18%,rgba(240,120,24,.42) 82%,transparent 100%);
}

/* 01 */
.tnm-guide-grid{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:16px}
.tnm-guide-video,.tnm-guide-pdf{border-radius:14px;background:#fff}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.8}
.tnm-guide-pdf{min-height:255px}

/* 02 */
.tnm-practice-topline{min-height:42px;margin-bottom:6px}
.tnm-hand-tabs{overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.tnm-hand-tabs::-webkit-scrollbar{display:none}
.tnm-hand-tabs button{white-space:nowrap;flex:0 0 auto}
.tnm-practice-score-tools{white-space:nowrap}
.tnm-practice-score{min-height:300px;max-height:445px;padding:6px 9px 13px}
.tnm-practice-score .tnm-osmd{min-width:0}

/* 03 */
.tnm-refine-panel{padding:15px;border-radius:14px}
.tnm-transport{gap:7px}
.tnm-transport button{width:46px;min-width:46px;height:42px}
.tnm-keyboard{width:100%;overflow:hidden}
.tnm-piano-wrap{width:100%;min-width:0}
.tnm-piano-keys{height:126px}
.tnm-piano-controls{height:25px}

/* 04 cards if the existing markup exposes them */
#tnm-audio .tnm-audio-grid,
#tnm-audio .tnm-audio-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
#tnm-audio .tnm-audio-card{
  min-width:0;
  border:1px solid #e3e7ea;
  border-radius:14px;
  background:#fff;
  padding:14px;
}
#tnm-audio audio{max-width:100%}

/* touch targets */
@media (hover:none){
  .tnm-hand-tabs button,.tnm-practice-score-tools button,
  .tnm-transport button,.tnm-piano-controls button{min-height:42px}
}

/* tablet */
@media(max-width:900px){
  .tnm-learning-app{padding:15px 14px}
  .tnm-guide-grid{grid-template-columns:1fr}
  .tnm-guide-pdf{min-height:300px}
  .tnm-guide-pdf .tnm-pdf{height:300px}
  #tnm-audio .tnm-audio-grid,
  #tnm-audio .tnm-audio-cards{grid-template-columns:1fr 1fr}
}

/* phone */
@media(max-width:640px){
  .tnm-learning-app{padding:12px 10px}
  .tnm-learning-app .tnm-section-title{gap:8px;padding-bottom:8px;margin-bottom:9px}
  .tnm-learning-app .tnm-section-title>span{font-size:24px;min-width:30px}
  .tnm-learning-app .tnm-section-title h3{font-size:17px}
  .tnm-learning-app .tnm-section-title small{font-size:10px}

  /* Practice controls remain on one logical row; if screen is too narrow,
     controls scroll horizontally instead of breaking the page. */
  .tnm-practice-topline{
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .tnm-practice-topline::-webkit-scrollbar{display:none}
  .tnm-hand-tabs{flex:0 0 auto}
  .tnm-hand-tabs button{
    min-height:38px;
    padding:8px 10px;
    font-size:11px;
  }
  .tnm-practice-score-tools{
    flex:0 0 auto;
    margin-left:auto;
  }
  .tnm-practice-score-tools button{
    min-height:30px;
    padding:5px 7px;
    font-size:9px;
  }
  .tnm-practice-score-tools b{min-width:31px;font-size:9px}
  .tnm-practice-score{
    min-height:245px;
    max-height:355px;
    padding:4px 5px 10px;
    border-radius:11px;
  }

  .tnm-refine-panel{padding:11px}
  .tnm-transport{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
  .tnm-transport button{width:100%;min-width:0;height:42px}
  .tnm-refine-status{font-size:10px}
  .tnm-piano-keys{height:92px}
  .tnm-piano-keys .black{height:60%}
  .tnm-piano-controls b{min-width:60px;font-size:9px}

  #tnm-audio .tnm-audio-grid,
  #tnm-audio .tnm-audio-cards{grid-template-columns:1fr}
  #tnm-audio .tnm-audio-card{padding:11px}

  .tnm-guide-video .tnm-video iframe{aspect-ratio:16/9}
  .tnm-guide-pdf,.tnm-guide-pdf .tnm-pdf{min-height:270px;height:270px}
}

/* very small phones */
@media(max-width:390px){
  .tnm-learning-app{padding:10px 7px}
  .tnm-learning-app .tnm-section-title>span{font-size:22px}
  .tnm-learning-app .tnm-section-title h3{font-size:16px}
  .tnm-hand-tabs button{padding:7px 8px;font-size:10px}
  .tnm-practice-score-tools button{padding:4px 5px}
  .tnm-practice-score{min-height:220px}
  .tnm-transport{grid-template-columns:repeat(3,1fr)}
}

/* 4.2.1 — exact piano geometry */
.tnm-piano-keys{
  position:relative;
  width:100%;
  height:132px;
  padding:0;
  margin:0;
  overflow:hidden;
  border:1px solid #8b9297;
  border-radius:2px 2px 6px 6px;
  background:#e7e8e9;
  box-sizing:border-box;
  isolation:isolate;
}
.tnm-piano-whites{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  width:100%;
  height:100%;
}
.tnm-piano-blacks{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
}
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #8c9398;
  border-radius:0 0 3px 3px;
  background:linear-gradient(to bottom,#ffffff 0%,#ffffff 78%,#f0f1f2 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.75);
  box-sizing:border-box;
  cursor:pointer;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #8c9398;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#f1f4f5 0%,#e4e8ea 100%);
}
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  left:0;
  width:clamp(9px,1.20%,18px);
  height:65%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #101214;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#090a0b 0%,#292d30 48%,#08090a 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.28);
  box-sizing:border-box;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4145 0%,#666e73 50%,#30363a 100%);
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label);
  position:absolute;
  left:4px;
  bottom:3px;
  font-size:9px;
  line-height:1;
  color:#687177;
  pointer-events:none;
}
@media(max-width:700px){
  .tnm-piano-keys{height:104px}
  .tnm-piano-keys .black{
    width:clamp(7px,1.65%,13px);
    height:63%;
  }
  .tnm-piano-keys .white[data-label]::after{font-size:7px;left:2px;bottom:2px}
}

/* =========================================================
   4.3.0 — final piano UI
   Reference-style piano: black fallboard, 52 equal white
   keys, 36 correctly centered black keys.
   ========================================================= */

.tnm-practice-topline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 6px!important;
}
.tnm-practice-topline .tnm-hand-tabs{
  flex:0 0 auto;
  min-width:0;
}
.tnm-practice-topline .tnm-practice-score-tools{
  flex:0 0 auto;
  margin-left:auto!important;
}

.tnm-keyboard-shell{
  width:100%;
  margin-top:12px;
  padding:0;
  border:0;
  background:transparent;
}
.tnm-keyboard{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.tnm-piano-wrap{
  width:100%;
}
.tnm-piano-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  min-height:32px;
  margin:0 0 9px;
}
.tnm-piano-controls button{
  width:46px;
  height:40px;
  border:1px solid #d6dee3;
  border-radius:9px;
  background:#fff;
  color:#59646c;
  font-size:22px;
  line-height:1;
  font-weight:500;
  box-shadow:0 1px 2px rgba(20,30,40,.03);
  cursor:pointer;
}
.tnm-piano-controls b{
  min-width:74px;
  font-size:14px;
  color:#66727b;
  text-align:center;
}

/* The keyboard itself */
.tnm-piano-keys{
  position:relative;
  width:100%;
  height:185px;
  overflow:hidden;
  margin:0;
  padding:0 0 2px;
  border:1px solid #8d969c;
  border-radius:4px 4px 8px 8px;
  background:#151718;
  box-shadow:0 2px 5px rgba(20,25,28,.18);
  isolation:isolate;
}
.tnm-piano-keys:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:11px;
  background:linear-gradient(#292d2f,#111314);
  border-bottom:1px solid #050606;
  z-index:5;
  pointer-events:none;
}
.tnm-piano-whites{
  position:absolute;
  left:0;
  right:0;
  top:11px;
  bottom:0;
  display:flex;
  width:100%;
  height:calc(100% - 11px);
  z-index:1;
}
.tnm-piano-blacks{
  position:absolute;
  left:0;
  right:0;
  top:11px;
  bottom:0;
  width:100%;
  height:calc(100% - 11px);
  z-index:4;
  pointer-events:none;
}

/* 52 equal white keys */
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #92999e;
  background:linear-gradient(to right,#ffffff 0%,#fdfdfd 84%,#e8eaeb 100%);
  border-radius:0 0 3px 3px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.8);
  cursor:pointer;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #92999e;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#f1f3f4,#dfe4e6);
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label);
  position:absolute;
  left:4px;
  bottom:4px;
  color:#626c73;
  font-size:10px;
  line-height:1;
  font-weight:600;
  pointer-events:none;
}

/* 36 black keys: narrow, short, raised and centered on white-key seams */
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  width:1.20%;
  min-width:10px;
  max-width:18px;
  height:61%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #090a0b;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909 0%,#2a2e30 46%,#090a0b 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.34);
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black:before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#3b3f41,#141617);
  border-radius:0 0 2px 2px;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4144 0%,#697176 50%,#2c3134 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* desktop proportions */
@media(min-width:1000px){
  .tnm-piano-keys{height:180px}
  .tnm-piano-keys .black{height:62%;width:1.05%;min-width:11px}
}

/* mobile: retain the same proportions, simply reduce height */
@media(max-width:640px){
  .tnm-practice-topline{
    overflow-x:auto!important;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .tnm-practice-topline::-webkit-scrollbar{display:none}
  .tnm-hand-tabs{white-space:nowrap}
  .tnm-piano-controls button{width:38px;height:36px;font-size:20px}
  .tnm-piano-controls b{font-size:12px;min-width:62px}
  .tnm-piano-keys{height:116px;border-radius:3px 3px 6px 6px}
  .tnm-piano-keys:before{height:8px}
  .tnm-piano-whites,.tnm-piano-blacks{
    top:8px;
    height:calc(100% - 8px);
  }
  .tnm-piano-keys .black{
    width:1.8%;
    min-width:7px;
    max-width:12px;
    height:62%;
  }
  .tnm-piano-keys .white[data-label]::after{
    left:2px;
    bottom:3px;
    font-size:7px;
  }
}

/* =========================================================
   4.4.0 — corrected piano geometry
   IMPORTANT:
   - black keys are centered ON white-key boundary lines
   - range presets preserve real MIDI note relationships
   - mobile keyboard is shorter, not wider/taller
   ========================================================= */

.tnm-piano-wrap{width:100%;max-width:100%;overflow:hidden}
.tnm-piano-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-height:34px!important;
  margin:0 0 8px!important;
}
.tnm-piano-controls button{
  width:42px!important;
  height:36px!important;
  min-width:42px!important;
  padding:0!important;
  border:1px solid #d4dde2!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#606b73!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:600!important;
  box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
}
.tnm-piano-controls b{
  min-width:68px!important;
  font-size:13px!important;
  color:#68737a!important;
  text-align:center!important;
}

/* Piano frame: no extra horizontal stretch on phones */
.tnm-piano-keys{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:176px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #7d878e!important;
  border-radius:4px 4px 7px 7px!important;
  background:#17191a!important;
  box-shadow:0 2px 4px rgba(20,25,28,.18)!important;
  isolation:isolate!important;
}

/* black fallboard */
.tnm-piano-keys:before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;top:0!important;
  height:10px!important;
  background:#202528!important;
  border-bottom:1px solid #0d0f10!important;
  z-index:8!important;
  pointer-events:none!important;
}

.tnm-piano-whites{
  position:absolute!important;
  left:0!important;right:0!important;top:10px!important;bottom:0!important;
  display:flex!important;
  width:100%!important;height:calc(100% - 10px)!important;
  z-index:1!important;
}
.tnm-piano-blacks{
  position:absolute!important;
  left:0!important;right:0!important;top:10px!important;bottom:0!important;
  width:100%!important;height:calc(100% - 10px)!important;
  z-index:6!important;
  pointer-events:none!important;
}

/* White key: one equal column per white MIDI note */
.tnm-piano-keys .white{
  position:relative!important;
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid #8a9297!important;
  border-radius:0 0 3px 3px!important;
  background:linear-gradient(90deg,#fff 0%,#fff 83%,#e8ebed 100%)!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.7)!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  touch-action:none!important;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #8a9297!important;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(#f0f3f4,#dfe4e7)!important;
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label)!important;
  position:absolute!important;
  left:3px!important;
  bottom:3px!important;
  color:#667178!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:600!important;
  pointer-events:none!important;
}

/* Black key dimensions are a percentage of ONE WHITE KEY.
   52 whites => 1.923% each. 0.62*white ≈ 1.19%.
   This makes the key visually centred and correctly narrower. */
.tnm-piano-keys .black{
  position:absolute!important;
  top:0!important;
  width:1.18%!important;
  min-width:8px!important;
  max-width:17px!important;
  height:61%!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  border:1px solid #090a0b!important;
  border-top:0!important;
  border-radius:0 0 4px 4px!important;
  background:linear-gradient(90deg,#070809 0%,#292d30 47%,#070809 100%)!important;
  box-shadow:0 2px 4px rgba(0,0,0,.34)!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.tnm-piano-keys .black:before{
  content:""!important;
  position:absolute!important;
  left:1px!important;right:1px!important;top:0!important;
  height:4px!important;
  background:linear-gradient(90deg,#3b3f41,#121516)!important;
  border-radius:0 0 2px 2px!important;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4144,#687177,#2b3033)!important;
}

/* Desktop */
@media(min-width:901px){
  .tnm-piano-keys{height:176px!important}
}

/* Tablet */
@media(max-width:900px){
  .tnm-piano-keys{height:136px!important}
}

/* Phone: compact, visually balanced — do NOT make the keyboard tall */
@media(max-width:640px){
  .tnm-piano-wrap{
    width:100%!important;
    max-width:100%!important;
  }
  .tnm-piano-controls{
    min-height:31px!important;
    margin-bottom:7px!important;
    gap:4px!important;
  }
  .tnm-piano-controls button{
    width:34px!important;
    min-width:34px!important;
    height:32px!important;
    border-radius:8px!important;
    font-size:19px!important;
  }
  .tnm-piano-controls b{
    min-width:58px!important;
    font-size:11px!important;
  }
  .tnm-piano-keys{
    width:100%!important;
    height:92px!important;
    border-radius:3px 3px 6px 6px!important;
  }
  .tnm-piano-keys:before{height:7px!important}
  .tnm-piano-whites,
  .tnm-piano-blacks{
    top:7px!important;
    height:calc(100% - 7px)!important;
  }
  .tnm-piano-keys .black{
    width:1.55%!important;
    min-width:5px!important;
    max-width:11px!important;
    height:60%!important;
    border-radius:0 0 3px 3px!important;
  }
  .tnm-piano-keys .black:before{height:2px!important}
  .tnm-piano-keys .white[data-label]::after{
    left:2px!important;
    bottom:2px!important;
    font-size:7px!important;
  }
}

/* Small phone */
@media(max-width:390px){
  .tnm-piano-keys{height:82px!important}
  .tnm-piano-keys .black{
    width:1.50%!important;
    min-width:4px!important;
    max-width:9px!important;
  }
}

/* 4.5.0 — Member / teacher area */
.tnm-user-nav{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.tnm-login-link,.tnm-register-link,.tnm-dash-link,.tnm-primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border-radius:9px;text-decoration:none!important;font-weight:700}
.tnm-login-link{background:#202b35;color:#fff!important}.tnm-register-link{border:1px solid #e47622;color:#d66918!important;background:#fff}
.tnm-user-name{font-size:12px;color:#5e6b73}.tnm-mini-logout{margin:0}.tnm-mini-logout button{border:0;background:none;color:#6d7880;cursor:pointer}
.tnm-auth-card{max-width:560px;margin:40px auto;padding:28px;background:#fff;border:1px solid #e3e9ec;border-radius:18px;box-shadow:0 10px 35px rgba(25,40,50,.08)}
.tnm-auth-card h2{margin:0 0 8px;font-size:25px;color:#202b34}.tnm-auth-card p{color:#748089}
.tnm-auth-form{display:grid;gap:13px;margin-top:20px}.tnm-auth-form label{display:grid;gap:6px;font-weight:700;font-size:13px;color:#3b474f}
.tnm-auth-form input,.tnm-auth-form select{width:100%;min-height:44px;padding:9px 11px;border:1px solid #d6dee3;border-radius:9px;background:#fff}
.tnm-auth-form button,.tnm-save-note{min-height:44px;border:0;border-radius:9px;background:#e87522;color:#fff;font-weight:800;cursor:pointer}
.tnm-check{display:flex!important;align-items:center;gap:8px!important;font-weight:500!important}.tnm-check input{width:auto;min-height:0}
.tnm-auth-register{display:inline-block;margin-top:16px;color:#d86c19;font-weight:700}.tnm-auth-error,.tnm-auth-success{padding:11px 13px;border-radius:9px;margin-bottom:15px;font-size:13px}
.tnm-auth-error{background:#fff0f0;color:#a33}.tnm-auth-success{background:#effaf3;color:#26733c}
.tnm-dashboard{max-width:1180px;margin:0 auto;padding:20px 12px}.tnm-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.tnm-dashboard-head small{color:#e37523;font-weight:800;letter-spacing:.06em}.tnm-dashboard-head h1{margin:4px 0;font-size:28px}.tnm-dashboard-head p{margin:0;color:#7a858d}
.tnm-dash-link{background:#202b35;color:#fff!important}.tnm-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.tnm-dashboard-card,.tnm-teacher-class{background:#fff;border:1px solid #e2e8eb;border-radius:15px;padding:18px;box-shadow:0 6px 20px rgba(30,45,55,.05)}
.tnm-dashboard-card h3{margin:6px 0 8px}.tnm-dashboard-card p{color:#78838b}.tnm-kicker{font-size:10px;color:#e47723;font-weight:800;letter-spacing:.08em}
.tnm-primary-link{background:#fff3e9;color:#cf6519!important}.tnm-teacher-class{margin-bottom:18px}
.tnm-class-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #edf0f2;padding-bottom:11px;margin-bottom:12px}.tnm-class-head h2{margin:0;font-size:20px}.tnm-class-head span{color:#7a858c;font-size:12px}
.tnm-student-list{display:grid;gap:10px}.tnm-student-card{border:1px solid #e7ecef;border-radius:11px;overflow:hidden}
.tnm-student-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}.tnm-student-top b{display:block}.tnm-student-top small{display:block;color:#88939a;margin-top:3px}
.tnm-student-open{border:1px solid #dbe2e6;background:#fff;border-radius:8px;padding:8px 10px;font-weight:700;cursor:pointer}
.tnm-student-detail{display:none;padding:12px;background:#fafbfc;border-top:1px solid #e8edef}.tnm-student-detail.show{display:block}
.tnm-student-meta{font-size:12px;color:#7b858d;margin-bottom:8px}.tnm-note-form{display:grid;grid-template-columns:1fr 150px auto;gap:8px}
.tnm-note-form textarea{min-height:76px;border:1px solid #d9e0e4;border-radius:8px;padding:9px;resize:vertical}.tnm-note-form select{border:1px solid #d9e0e4;border-radius:8px;padding:8px;background:#fff}
.tnm-note-form .tnm-save-note{padding:0 13px}.tnm-notes{margin-top:8px}.tnm-note-item{display:flex;justify-content:space-between;padding:7px 0;color:#647079;font-size:11px}
@media(max-width:800px){.tnm-user-nav{justify-content:flex-start;margin-top:10px}.tnm-dashboard{padding:12px 8px}.tnm-dashboard-head{align-items:flex-start;flex-direction:column}.tnm-dashboard-grid{grid-template-columns:1fr}.tnm-note-form{grid-template-columns:1fr}.tnm-student-top{align-items:flex-start;flex-direction:column}}

.tnm-member-gate{
  max-width:620px;margin:55px auto;padding:42px 28px;text-align:center;
  background:#fff;border:1px solid #e3e9ec;border-radius:20px;
  box-shadow:0 12px 36px rgba(25,40,50,.08)
}
.tnm-member-gate-icon{font-size:48px;margin-bottom:8px}
.tnm-member-gate h2{margin:0 0 9px;font-size:27px;color:#202b34}
.tnm-member-gate p{margin:0 auto 22px;max-width:500px;color:#748089}
.tnm-member-gate-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media(max-width:600px){
  .tnm-member-gate{margin:25px 10px;padding:32px 18px}
  .tnm-member-gate h2{font-size:23px}
  .tnm-member-gate-actions>a{width:100%}
}

/* 4.7.0 */
.tnm-piano-key{box-sizing:border-box!important;background:linear-gradient(#fff,#f4f4f2)!important;color:#20272b!important;border:1px solid #aab4ba!important;position:relative!important;z-index:1!important;cursor:pointer!important;touch-action:none}
.tnm-piano-key.black{background:linear-gradient(#34383b,#101214)!important;color:#fff!important;border-color:#07090a!important;z-index:4!important}
.tnm-piano-key.white{background:linear-gradient(#fff,#f4f4f2)!important;color:#20272b!important}
.tnm-piano-key.is-pressed{background:#ead7b7!important}.tnm-piano-key.black.is-pressed{background:#b8752c!important}
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{display:flex!important;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:9px 10px;margin:8px auto 12px;background:#faf8f5;border:1px solid #eadfd5;border-radius:12px}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{min-width:42px;height:38px;padding:0 12px;border:1px solid #d7c9bd!important;border-radius:9px!important;background:#fff!important;color:#343b40!important;font-weight:700!important;cursor:pointer}
.tnm-code-card{border-top:2px solid #e68a42!important}.tnm-code-form{display:flex;gap:8px;max-width:620px}.tnm-code-form input{flex:1;min-height:44px;border:1px solid #d8e0e4;border-radius:9px;padding:8px 11px;text-transform:uppercase}.tnm-code-form button{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:#e47722;color:#fff;font-weight:800;cursor:pointer}.tnm-code-result{margin-top:8px;font-size:12px}.tnm-code-result.success{color:#24733d}.tnm-code-result.error{color:#b43d3d}
@media(max-width:600px){.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{gap:6px;padding:7px}.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{min-width:38px;height:38px;padding:0 8px}.tnm-code-form{flex-direction:column}.tnm-code-form button{width:100%}}

/* 4.8.0 professional UI */
.tnm-piano-key{forced-color-adjust:none!important;filter:none!important;mix-blend-mode:normal!important}
.tnm-piano-key.white{background:#fff!important;color:#222!important;border:1px solid #9aa2a8!important}
.tnm-piano-key.black{background:#17191c!important;color:#fff!important;border:1px solid #050607!important}
.tnm-piano-key.is-pressed{background:#e6c99f!important}.tnm-piano-key.black.is-pressed{background:#b96e26!important}
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{background:var(--tnm-panel,#fbfaf8)!important;border:1px solid #dfd5cc!important;box-shadow:0 5px 18px rgba(30,35,40,.06)!important;gap:6px!important}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{display:inline-flex!important;align-items:center;justify-content:center;width:42px!important;min-width:42px!important;height:40px!important;border:1px solid #d4cbc4!important;border-radius:10px!important;background:#fff!important;color:#252a2e!important;line-height:1!important;transition:.18s ease}
.tnm-completion-controls button:hover,.tnm-completion-bar button:hover,.tnm-practice-controls button:hover{transform:translateY(-1px);border-color:#d47a35!important;box-shadow:0 4px 10px rgba(212,122,53,.16)!important}
.tnm-completion-controls button[data-action="play"],.tnm-completion-bar button[data-action="play"]{width:48px!important;height:44px!important;border-radius:12px!important}
.tnm-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.tnm-admin-card{background:#fff;border:1px solid #e3e7ea;border-radius:14px;padding:18px}.tnm-admin-card b{display:block;font-size:28px}.tnm-admin-card span{color:#748089}
.tnm-role-dashboard{max-width:1000px;margin:0 auto;display:grid;gap:16px}.tnm-role-hero{display:flex;gap:15px;align-items:center;padding:22px;border-radius:18px;background:linear-gradient(135deg,#fffaf5,#f8f5f1);border:1px solid #eadfd5}.tnm-role-icon{font-size:34px}.tnm-role-hero h2{margin:0 0 5px}.tnm-role-hero p{margin:0;color:#69747b}.tnm-role-card{background:#fff;border:1px solid #e4e8eb;border-radius:16px;padding:20px;box-shadow:0 6px 20px rgba(25,35,42,.05)}.tnm-form-input{width:100%;box-sizing:border-box;margin:0 0 10px;border:1px solid #d6dee2;border-radius:9px;padding:11px}.tnm-primary-btn{border:0;border-radius:9px;background:#df7627;color:#fff;padding:11px 18px;font-weight:700}.tnm-request-row,.tnm-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f1}.tnm-notice{padding:12px 0;border-bottom:1px solid #edf0f1}
@media(max-width:700px){.tnm-admin-grid{grid-template-columns:1fr}.tnm-role-hero{padding:17px}.tnm-role-card{padding:16px}.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{width:38px!important;min-width:38px!important;height:38px!important}}

.tnm-auth-wrap{max-width:460px;margin:30px auto;padding:28px;background:#fff;border:1px solid #e2e7ea;border-radius:20px;box-shadow:0 15px 45px rgba(25,35,45,.09)}
.tnm-auth-wrap h2{text-align:center;margin:0 0 8px;font-size:27px}.tnm-auth-wrap .tnm-auth-sub{text-align:center;color:#768087;margin:0 0 22px}
.tnm-auth-wrap label{display:block;font-weight:600;margin:0 0 12px}.tnm-auth-wrap input,.tnm-auth-wrap select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #d6dee2;border-radius:10px;background:#fff;color:#222}
.tnm-auth-wrap .tnm-auth-submit{width:100%;border:0;border-radius:11px;padding:13px;background:#df7627;color:#fff;font-weight:800;font-size:15px}
@media(prefers-color-scheme:dark){.tnm-auth-wrap,.tnm-role-card,.tnm-admin-card{background:#202326;color:#f4f5f6;border-color:#383d40}.tnm-auth-wrap input,.tnm-auth-wrap select{background:#181a1c;color:#fff;border-color:#4a4f53}}

/* 4.8.1 — Professional completion controls */
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;padding:8px 10px!important;margin:7px auto 11px!important;
  border-radius:13px!important;background:var(--tnm-control-bg,#faf9f7)!important;
  border:1px solid var(--tnm-control-border,#e5ddd5)!important;
}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{
  position:relative!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;flex:0 0 auto!important;
  width:40px!important;min-width:40px!important;height:38px!important;
  padding:0!important;margin:0!important;border-radius:9px!important;
  border:1px solid var(--tnm-control-border,#d9d0c8)!important;
  background:var(--tnm-control-button,#fff)!important;
  color:var(--tnm-control-icon,#3d4347)!important;
  box-shadow:0 1px 2px rgba(20,25,30,.05)!important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease!important;
  font-size:0!important;line-height:0!important;
}
.tnm-completion-controls button:hover,.tnm-completion-bar button:hover,.tnm-practice-controls button:hover{
  transform:translateY(-1px)!important;border-color:#d8894b!important;
  box-shadow:0 4px 12px rgba(175,102,43,.13)!important;
}
.tnm-completion-controls button:active,.tnm-completion-bar button:active,.tnm-practice-controls button:active{
  transform:translateY(0)!important;box-shadow:0 1px 3px rgba(20,25,30,.08)!important;
}
.tnm-completion-controls button::before,.tnm-completion-bar button::before,.tnm-practice-controls button::before{
  content:"";display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--tnm-icon) center/contain no-repeat;mask:var(--tnm-icon) center/contain no-repeat;
}
.tnm-completion-controls button:nth-child(1)::before,.tnm-completion-bar button:nth-child(1)::before,.tnm-practice-controls button:nth-child(1)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(2)::before,.tnm-completion-bar button:nth-child(2)::before,.tnm-practice-controls button:nth-child(2)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 0 6.7 9h-2.1A5 5 0 1 1 12 7c1.3 0 2.5.5 3.4 1.4L13 11h7V4l-3 3A7 7 0 0 0 12 5z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(3)::before,.tnm-completion-bar button:nth-child(3)::before,.tnm-practice-controls button:nth-child(3)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10H7z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(4)::before,.tnm-completion-bar button:nth-child(4)::before,.tnm-practice-controls button:nth-child(4)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h10l-4-4 1.4-1.4L19.8 14l-7.4 7.4L11 20l4-4H5z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(5)::before,.tnm-completion-bar button:nth-child(5)::before,.tnm-practice-controls button:nth-child(5)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H9l4-4-1.4-1.4L4.2 14l7.4 7.4L13 20l-4-4h10z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(6)::before,.tnm-completion-bar button:nth-child(6)::before,.tnm-practice-controls button:nth-child(6)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3zm1 2h-2v7l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
}
@media(prefers-color-scheme:dark){
  .tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{
    --tnm-control-bg:#25282b;--tnm-control-border:#454a4e;--tnm-control-button:#303438;--tnm-control-icon:#eef1f2;
  }
}
@media(max-width:600px){
  .tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{gap:5px!important;padding:7px!important}
  .tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{width:38px!important;min-width:38px!important;height:37px!important}
}

/* =========================================================
   4.8.2 — Premium Hoàn thiện & củng cố transport
   Giữ nguyên DOM/event hiện tại; chỉ thay presentation.
   ========================================================= */
.tnm-completion-controls,
.tnm-completion-bar,
.tnm-practice-controls{
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:16px!important;
  margin:10px 0 16px!important;
  border:1px solid #e8e8e8!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(25,32,38,.07)!important;
}

/* Transport buttons */
.tnm-completion-controls button,
.tnm-completion-bar button,
.tnm-practice-controls button{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 92px!important;
  width:92px!important;
  min-width:92px!important;
  height:88px!important;
  padding:10px 8px 8px!important;
  margin:0!important;
  border:1px solid #e4e7e9!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#20262b!important;
  box-shadow:0 2px 5px rgba(25,32,38,.04)!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.15!important;
  text-align:center!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease!important;
}
.tnm-completion-controls button:hover,
.tnm-completion-bar button:hover,
.tnm-practice-controls button:hover{
  transform:translateY(-2px)!important;
  border-color:#d7dadd!important;
  box-shadow:0 7px 16px rgba(25,32,38,.10)!important;
}
.tnm-completion-controls button:active,
.tnm-completion-bar button:active,
.tnm-practice-controls button:active{
  transform:translateY(0)!important;
}

/* Play = primary action */
.tnm-completion-controls button:nth-child(1),
.tnm-completion-bar button:nth-child(1),
.tnm-practice-controls button:nth-child(1){
  background:#d9232e!important;
  border-color:#d9232e!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(217,35,46,.20)!important;
}
.tnm-completion-controls button:nth-child(1):hover,
.tnm-completion-bar button:nth-child(1):hover,
.tnm-practice-controls button:nth-child(1):hover{
  background:#c91f29!important;
  border-color:#c91f29!important;
}

/* Icon */
.tnm-completion-controls button::before,
.tnm-completion-bar button::before,
.tnm-practice-controls button::before{
  content:""!important;
  display:block!important;
  width:28px!important;
  height:28px!important;
  margin:0 auto 7px!important;
  background:currentColor!important;
  -webkit-mask:var(--tnm-icon) center/contain no-repeat!important;
  mask:var(--tnm-icon) center/contain no-repeat!important;
}

/* Return */
.tnm-completion-controls button:nth-child(1)::before,
.tnm-completion-bar button:nth-child(1)::before,
.tnm-practice-controls button:nth-child(1)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5a7 7 0 1 0 6.7 9h-2.1A5 5 0 1 1 12 7c1.2 0 2.3.4 3.2 1.1L13 10h7V3l-3 3A8.9 8.9 0 0 0 12 5z'/%3E%3C/svg%3E");
}
/* Play */
.tnm-completion-controls button:nth-child(2)::before,
.tnm-completion-bar button:nth-child(2)::before,
.tnm-practice-controls button:nth-child(2)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
/* Stop */
.tnm-completion-controls button:nth-child(3)::before,
.tnm-completion-bar button:nth-child(3)::before,
.tnm-practice-controls button:nth-child(3)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
}
/* Tua lại */
.tnm-completion-controls button:nth-child(4)::before,
.tnm-completion-bar button:nth-child(4)::before,
.tnm-practice-controls button:nth-child(4)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 6v5H6l6.5 6.5L14 16l-3-3h4v-7z'/%3E%3Cpath fill='%23000' d='M17 6v5h-3l4 4v-3h1V6z'/%3E%3C/svg%3E");
}
/* Tua đi */
.tnm-completion-controls button:nth-child(5)::before,
.tnm-completion-bar button:nth-child(5)::before,
.tnm-practice-controls button:nth-child(5)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 6v5h5l-6.5 6.5L10 16l3-3H9v-7z'/%3E%3Cpath fill='%23000' d='M7 6v5h3l-4 4v-3H5V6z'/%3E%3C/svg%3E");
}

/* Keep existing text labels readable even if theme CSS tried to hide them */
.tnm-completion-controls button span,
.tnm-completion-bar button span,
.tnm-practice-controls button span{
  font-size:inherit!important;
}

/* Tempo area remains visually independent and balanced */
.tnm-completion-controls .tnm-tempo,
.tnm-completion-bar .tnm-tempo,
.tnm-practice-controls .tnm-tempo{
  flex:1 1 auto!important;
  min-width:220px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* If tempo is a direct sibling rather than a named block, keep it compact */
.tnm-completion-controls input[type="range"],
.tnm-completion-bar input[type="range"],
.tnm-practice-controls input[type="range"]{
  accent-color:#d9232e!important;
}

@media(max-width:800px){
  .tnm-completion-controls,
  .tnm-completion-bar,
  .tnm-practice-controls{
    gap:8px!important;
    padding:12px!important;
    overflow-x:auto!important;
  }
  .tnm-completion-controls button,
  .tnm-completion-bar button,
  .tnm-practice-controls button{
    flex:0 0 72px!important;
    width:72px!important;
    min-width:72px!important;
    height:72px!important;
    padding:7px 5px!important;
    font-size:11px!important;
  }
  .tnm-completion-controls button::before,
  .tnm-completion-bar button::before,
  .tnm-practice-controls button::before{
    width:23px!important;
    height:23px!important;
    margin-bottom:5px!important;
  }
  .tnm-completion-controls .tnm-tempo,
  .tnm-completion-bar .tnm-tempo,
  .tnm-practice-controls .tnm-tempo{
    min-width:180px!important;
  }
}

@media(prefers-color-scheme:dark){
  .tnm-completion-controls,
  .tnm-completion-bar,
  .tnm-practice-controls{
    background:#202327!important;
    border-color:#363b40!important;
    box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
  }
  .tnm-completion-controls button,
  .tnm-completion-bar button,
  .tnm-practice-controls button{
    background:#2a2e33!important;
    border-color:#454b51!important;
    color:#f1f3f4!important;
  }
  .tnm-completion-controls button:nth-child(1),
  .tnm-completion-bar button:nth-child(1),
  .tnm-practice-controls button:nth-child(1){
    background:#d9232e!important;
    color:#fff!important;
  }
}

/* =========================================================
   4.8.3 — REAL transport icons
   The markup now contains actual SVG-like CSS masks/classes.
   No emoji, no nth-child dependency.
   ========================================================= */
.tnm-refine-panel{width:100%;box-sizing:border-box}
.tnm-transport{
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:16px!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #e7e8ea!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(24,31,38,.07)!important;
}
.tnm-transport > button{
  flex:0 0 92px!important;
  width:92px!important;
  min-width:92px!important;
  height:88px!important;
  padding:9px 6px!important;
  margin:0!important;
  border:1px solid #e0e3e5!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#20262b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font:600 13px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  box-shadow:0 2px 6px rgba(20,28,34,.05)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease!important;
}
.tnm-transport > button:hover{
  transform:translateY(-2px)!important;
  border-color:#d5d9dc!important;
  box-shadow:0 8px 17px rgba(20,28,34,.10)!important;
}
.tnm-transport > button:active{transform:translateY(0)!important}
.tnm-transport > .play{
  background:#d8232f!important;
  border-color:#d8232f!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(216,35,47,.22)!important;
}
.tnm-transport > .play:hover{background:#c91f2a!important;border-color:#c91f2a!important}
.tnm-transport > .listen{display:none!important}

.tnm-transport-icon{
  display:block!important;
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  background:currentColor!important;
  -webkit-mask:center/contain no-repeat!important;
  mask:center/contain no-repeat!important;
}
.tnm-icon-return{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 6H6v7h3V9.9A9 9 0 1 1 7.5 19H4.3A12 12 0 1 0 13 6z'/%3E%3Cpath d='M6 6h10v3H9v7H6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 6H6v7h3V9.9A9 9 0 1 1 7.5 19H4.3A12 12 0 1 0 13 6z'/%3E%3Cpath d='M6 6h10v3H9v7H6z'/%3E%3C/svg%3E");
}
.tnm-icon-play{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 6.5v19L26 16z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 6.5v19L26 16z'/%3E%3C/svg%3E");
}
.tnm-icon-stop{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='7' width='18' height='18' rx='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='7' width='18' height='18' rx='2'/%3E%3C/svg%3E");
}
.tnm-icon-prev{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 8h3v16H7zM13 16l13-10v20z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 8h3v16H7zM13 16l13-10v20z'/%3E%3C/svg%3E");
}
.tnm-icon-next{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 8h3v16h-3zM19 16L6 6v20z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 8h3v16h-3zM19 16L6 6v20z'/%3E%3C/svg%3E");
}
.tnm-icon-listen{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h5l7-6v20l-7-6H6z'/%3E%3Cpath d='M22 11a7 7 0 0 1 0 10l-2-2a4 4 0 0 0 0-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h5l7-6v20l-7-6H6z'/%3E%3Cpath d='M22 11a7 7 0 0 1 0 10l-2-2a4 4 0 0 0 0-6z'/%3E%3C/svg%3E");
}

.tnm-tempo-control{
  flex:1 1 300px!important;
  min-width:250px!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:13px!important;
  row-gap:6px!important;
  padding:5px 10px!important;
}
.tnm-tempo-head{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tnm-tempo-head strong{font-size:18px;color:#20262b}
.tnm-tempo-note{font-size:30px;line-height:1;color:#20262b}
.tnm-tempo-control .tempo{width:100%!important;margin:0!important;accent-color:#d8232f!important}
.tnm-tempo-control .bpm{font-size:20px!important;white-space:nowrap!important;color:#20262b!important}
.tnm-tempo-control small{
  grid-column:1 / -1!important;
  color:#778087!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.tnm-refine-status{margin-top:8px!important;color:#667078!important;font-size:13px!important}

@media(max-width:850px){
  .tnm-transport{gap:8px!important;padding:10px!important;flex-wrap:wrap!important}
  .tnm-transport > button{flex:1 1 76px!important;width:auto!important;min-width:72px!important;height:72px!important}
  .tnm-transport-icon{width:24px!important;height:24px!important;flex-basis:24px!important}
  .tnm-tempo-control{flex:1 0 100%!important;min-width:0!important;padding:8px 4px!important}
}
@media(max-width:480px){
  .tnm-transport{padding:8px!important;gap:6px!important}
  .tnm-transport > button{flex:1 1 calc(20% - 6px)!important;min-width:58px!important;height:67px!important;font-size:10px!important;border-radius:11px!important}
  .tnm-transport-icon{width:22px!important;height:22px!important;flex-basis:22px!important}
  .tnm-tempo-control{grid-template-columns:1fr auto!important}
  .tnm-tempo-head{grid-column:1 / -1!important}
  .tnm-tempo-control .tempo{grid-column:1!important}
  .tnm-tempo-control .bpm{grid-column:2!important}
  .tnm-tempo-control small{font-size:11px!important}
}
@media(prefers-color-scheme:dark){
  .tnm-transport{background:#202327!important;border-color:#373c41!important}
  .tnm-transport > button{background:#2b2f34!important;border-color:#454b51!important;color:#f2f4f5!important}
  .tnm-transport > .play{background:#d8232f!important;border-color:#d8232f!important;color:#fff!important}
  .tnm-tempo-head strong,.tnm-tempo-note,.tnm-tempo-control .bpm{color:#f2f4f5!important}
}

/* =========================================================
   4.8.4 — Compact colored transport icons
   Use inline SVG instead of CSS masks so icons render reliably
   in light/dark themes and never become solid squares.
   ========================================================= */
.tnm-transport > button .tnm-transport-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.tnm-transport > button .tnm-transport-icon svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  fill:currentColor!important;
  stroke:none!important;
}
.tnm-transport > button .tnm-icon-return{color:#607d8b!important}
.tnm-transport > button .tnm-icon-play{color:#e53935!important}
.tnm-transport > button .tnm-icon-stop{color:#37474f!important}
.tnm-transport > button .tnm-icon-prev{color:#8e44ad!important}
.tnm-transport > button .tnm-icon-next{color:#1976d2!important}
.tnm-transport > button .tnm-icon-listen{color:#26a69a!important}

/* Keep Play highlighted without making the icon a giant block. */
.tnm-transport > .play .tnm-icon-play{color:#fff!important}
.tnm-transport > .play .tnm-transport-icon svg{width:24px!important;height:24px!important}

@media(max-width:850px){
  .tnm-transport > button .tnm-transport-icon{width:22px!important;height:22px!important;flex-basis:22px!important}
  .tnm-transport > button .tnm-transport-icon svg{width:20px!important;height:20px!important}
}
@media(max-width:480px){
  .tnm-transport > button .tnm-transport-icon{width:20px!important;height:20px!important;flex-basis:20px!important}
  .tnm-transport > button .tnm-transport-icon svg{width:18px!important;height:18px!important}
}

/* =========================================================
   4.8.5 — Hoàn thiện & củng cố UI
   Giữ nguyên logic JS/event; chỉ chuẩn hóa presentation.
   ========================================================= */
.tnm-refine-panel{width:100%;box-sizing:border-box}
.tnm-refine-panel .tnm-transport{
  display:flex!important;
  align-items:stretch!important;
  gap:10px!important;
  padding:14px!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #e7eaee!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(22,34,48,.06)!important;
}
.tnm-refine-panel .tnm-transport > button{
  position:relative!important;
  flex:0 0 82px!important;
  width:82px!important;
  min-width:82px!important;
  height:76px!important;
  padding:7px 5px!important;
  margin:0!important;
  border:1px solid #e4e8ed!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#26313b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font:600 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  cursor:pointer!important;
  box-shadow:0 2px 7px rgba(20,32,44,.04)!important;
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
.tnm-refine-panel .tnm-transport > button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 14px rgba(20,32,44,.08)!important;
}
.tnm-refine-panel .tnm-transport > button:active{transform:translateY(0)!important}

/* Compact icons: no square backgrounds, function-specific colors. */
.tnm-refine-panel .tnm-transport-icon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.tnm-refine-panel .tnm-transport-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
  fill:currentColor!important;
  stroke:none!important;
}

/* Default colors by function */
.tnm-refine-panel .tnm-icon-return{color:#0f9fa7!important}
.tnm-refine-panel .tnm-icon-play{color:#1976f3!important}
.tnm-refine-panel .tnm-icon-stop{color:#626b75!important}
.tnm-refine-panel .tnm-icon-prev{color:#7a45d6!important}
.tnm-refine-panel .tnm-icon-next{color:#08a875!important}
.tnm-refine-panel .tnm-icon-listen{color:#22a88d!important}

/* Click/keyboard focus: only the selected control changes color.
   Do not recolor the other icons. */
.tnm-refine-panel .tnm-transport > button.is-active,
.tnm-refine-panel .tnm-transport > button.active,
.tnm-refine-panel .tnm-transport > button:focus-visible{
  border-color:#1976f3!important;
  box-shadow:0 0 0 2px rgba(25,118,243,.10),0 6px 14px rgba(20,32,44,.08)!important;
}
.tnm-refine-panel .tnm-transport > button.is-active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon{
  color:#1976f3!important;
}

/* Phát: blue triangular icon, while only the selected button gets the active outline. */
.tnm-refine-panel .tnm-transport > .play .tnm-icon-play{color:#1976f3!important}
.tnm-refine-panel .tnm-transport > .play.is-active .tnm-icon-play,
.tnm-refine-panel .tnm-transport > .play.active .tnm-icon-play{color:#0b5ed7!important}

/* Hide the old auxiliary Listen button visually, but keep it in DOM for compatibility. */
.tnm-refine-panel .tnm-transport > .listen{display:none!important}

/* Tempo stays in the same row. */
.tnm-refine-panel .tnm-tempo-control{
  flex:1 1 300px!important;
  min-width:250px!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:5px!important;
  padding:4px 8px!important;
}
.tnm-refine-panel .tnm-tempo-head{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tnm-refine-panel .tnm-tempo-note{font-size:23px!important;line-height:1;color:#202831!important}
.tnm-refine-panel .tnm-tempo-head strong{font-size:16px!important;color:#202831!important}
.tnm-refine-panel .tnm-tempo-control .tempo{
  width:100%!important;
  margin:0!important;
  accent-color:#1976f3!important;
}
.tnm-refine-panel .tnm-tempo-control .bpm{
  font-size:17px!important;
  white-space:nowrap!important;
  color:#202831!important;
}
.tnm-refine-panel .tnm-tempo-control small{
  grid-column:1/-1!important;
  color:#77818a!important;
  font-size:11px!important;
}

/* Mobile */
@media(max-width:850px){
  .tnm-refine-panel .tnm-transport{
    flex-wrap:wrap!important;
    gap:7px!important;
    padding:10px!important;
  }
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 72px!important;
    width:auto!important;
    min-width:68px!important;
    height:68px!important;
    font-size:11px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{
    width:18px!important;height:18px!important;flex-basis:18px!important;
  }
  .tnm-refine-panel .tnm-transport-icon svg{width:17px!important;height:17px!important}
  .tnm-refine-panel .tnm-tempo-control{
    flex:1 0 100%!important;
    min-width:0!important;
    padding:7px 3px!important;
  }
}
@media(max-width:480px){
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 calc(20% - 6px)!important;
    min-width:55px!important;
    height:62px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{
    width:17px!important;height:17px!important;flex-basis:17px!important;
  }
  .tnm-refine-panel .tnm-transport-icon svg{width:16px!important;height:16px!important}
  .tnm-refine-panel .tnm-tempo-control{
    grid-template-columns:1fr auto!important;
  }
  .tnm-refine-panel .tnm-tempo-head{grid-column:1/-1!important}
  .tnm-refine-panel .tnm-tempo-control .tempo{grid-column:1!important}
  .tnm-refine-panel .tnm-tempo-control .bpm{grid-column:2!important}
}

/* Dark themes */
@media(prefers-color-scheme:dark){
  .tnm-refine-panel .tnm-transport{
    background:#20252a!important;
    border-color:#363d44!important;
  }
  .tnm-refine-panel .tnm-transport > button{
    background:#292f35!important;
    border-color:#444c54!important;
    color:#eef2f5!important;
  }
  .tnm-refine-panel .tnm-tempo-head strong,
  .tnm-refine-panel .tnm-tempo-note,
  .tnm-refine-panel .tnm-tempo-control .bpm{color:#eef2f5!important}
}

/* =========================================================
   4.8.6 — Approved compact Hoàn thiện & củng cố interface
   ========================================================= */
.tnm-refine-panel .tnm-transport{
  display:flex!important;align-items:center!important;
  gap:4px!important;padding:12px 14px!important;
  border:1px solid #e5e9ef!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 5px 18px rgba(20,32,44,.045)!important;
}
.tnm-refine-panel .tnm-transport > button{
  flex:0 0 74px!important;width:74px!important;min-width:74px!important;
  height:68px!important;padding:6px 4px!important;margin:0!important;
  border:1px solid transparent!important;border-radius:11px!important;
  background:transparent!important;color:#26313b!important;
  box-shadow:none!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:4px!important;
  font:600 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
.tnm-refine-panel .tnm-transport > button:hover{
  background:#f7f9fb!important;transform:none!important;box-shadow:none!important;
}
.tnm-refine-panel .tnm-refine-panel .tnm-transport > button:active{transform:none!important}
.tnm-refine-panel .tnm-transport-icon{
  width:14px!important;height:14px!important;flex:0 0 14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:none!important;-webkit-mask:none!important;mask:none!important;
}
.tnm-refine-panel .tnm-transport-icon svg{
  display:block!important;width:14px!important;height:14px!important;
  fill:currentColor!important;stroke:none!important;
}
.tnm-refine-panel .tnm-icon-return{color:#0b9ca3!important}
.tnm-refine-panel .tnm-icon-play{color:#146ef5!important}
.tnm-refine-panel .tnm-icon-stop{color:#59636d!important}
.tnm-refine-panel .tnm-icon-prev{color:#7440d2!important}
.tnm-refine-panel .tnm-icon-next{color:#00a875!important}
.tnm-refine-panel .tnm-icon-listen{color:#21a68e!important}
.tnm-refine-panel .tnm-transport > button.is-active,
.tnm-refine-panel .tnm-transport > button.active{
  background:#f4f8ff!important;border-color:#1976f3!important;
}
.tnm-refine-panel .tnm-transport > button.is-active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon{
  color:#1976f3!important;
}
.tnm-refine-panel .tnm-transport > .play .tnm-icon-play{color:#146ef5!important}
.tnm-refine-panel .tnm-transport > .play.is-active .tnm-icon-play,
.tnm-refine-panel .tnm-transport > .play.active .tnm-icon-play{color:#0a5edb!important}

.tnm-refine-panel .tnm-tempo-control{
  flex:1 1 auto!important;min-width:250px!important;
  display:grid!important;grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;align-items:center!important;
  column-gap:10px!important;row-gap:3px!important;
  margin-left:8px!important;padding-left:18px!important;
  border-left:1px solid #e5e9ef!important;
}
.tnm-refine-panel .tnm-tempo-note{font-size:20px!important}
.tnm-refine-panel .tnm-tempo-head strong{font-size:15px!important}
.tnm-refine-panel .tnm-tempo-control .bpm{font-size:16px!important}
.tnm-refine-panel .tnm-tempo-control small{font-size:10px!important}

@media(max-width:850px){
  .tnm-refine-panel .tnm-transport{gap:2px!important;padding:9px!important;flex-wrap:wrap!important}
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 62px!important;width:auto!important;min-width:58px!important;height:58px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{width:13px!important;height:13px!important;flex-basis:13px!important}
  .tnm-refine-panel .tnm-transport-icon svg{width:13px!important;height:13px!important}
  .tnm-refine-panel .tnm-tempo-control{
    flex:1 0 100%!important;min-width:0!important;margin-left:0!important;
    margin-top:4px!important;padding:8px 0 0!important;border-left:0!important;
    border-top:1px solid #e5e9ef!important;
  }
}
@media(max-width:480px){
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 calc(20% - 4px)!important;min-width:48px!important;height:54px!important;
    font-size:9px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{width:12px!important;height:12px!important;flex-basis:12px!important}
  .tnm-refine-panel .tnm-transport-icon svg{width:12px!important;height:12px!important}
}

/* 4.8.7 — Interactive score cursor */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  pointer-events:none!important;
  z-index:5!important;
}
.tnm-refine-panel .tnm-transport > button.active{
  box-shadow:0 0 0 2px rgba(25,118,243,.10)!important;
}

/* 4.8.9 score transport cursor: never auto-scroll the page */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  pointer-events:none!important;
}
.tnm-refine-panel .tnm-transport > button.active{
  background:#f4f8ff!important;
  border-color:#1976f3!important;
}

/* 4.9.0 — note cursor, animal follower and metronome */
.tnm-score-note-marker{
 position:absolute;top:0;left:0;width:24px;height:30px;z-index:20;
 pointer-events:none;display:none;transition:left .08s linear,top .08s linear;
}
.tnm-score-note-marker.show{display:block}
.tnm-score-caret{
 display:block;width:2px;height:27px;margin:auto;border-radius:2px;
 background:#1976f3;box-shadow:0 0 5px rgba(25,118,243,.35);
}
.tnm-score-animal{display:none;position:absolute;left:-5px;top:-19px;font-size:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.tnm-score-animal.show{display:block;animation:tnm-note-hop .18s ease-in-out infinite alternate}
@keyframes tnm-note-hop{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
.tnm-metronome-tools{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tnm-metronome-toggle{
 border:1px solid #dfe4ea;background:#fff;border-radius:9px;padding:6px 9px;
 font-size:11px;display:flex;align-items:center;gap:5px;cursor:pointer;color:#39434c;
}
.tnm-metronome-toggle span{font-size:15px;color:#e08b24}
.tnm-metronome-toggle.active{border-color:#e08b24;background:#fff7e9;color:#b86b00}
.tnm-animal-toggle{font-size:10px;color:#69737c;cursor:pointer}
@media(max-width:850px){
 .tnm-metronome-tools{width:100%;justify-content:flex-start}
 .tnm-score-note-marker{width:20px}
 .tnm-score-caret{height:23px}
}

/* 4.9.1 — minimal metronome + monkey follower */
.tnm-metronome-tools{display:flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important}
.tnm-metronome-toggle{
  width:30px!important;height:30px!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #dfe4ea!important;border-radius:8px!important;
  background:#fff!important;color:#e39a28!important;cursor:pointer!important;
  font-size:18px!important;line-height:1!important;
}
.tnm-metronome-toggle.active{
  color:#fff!important;background:#e39a28!important;border-color:#e39a28!important;
  box-shadow:0 0 0 2px rgba(227,154,40,.14)!important;
}
.tnm-monkey-toggle{
  position:relative!important;width:30px!important;height:30px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;border-radius:8px!important;
}
.tnm-monkey-toggle input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.tnm-monkey-icon{
  font-size:17px!important;line-height:1!important;opacity:.48!important;
  filter:grayscale(1)!important;transition:transform .15s,opacity .15s,filter .15s!important;
}
.tnm-monkey-toggle input:checked + .tnm-monkey-icon{
  opacity:1!important;filter:none!important;transform:scale(1.05)!important;
}
.tnm-score-monkey{
  display:none;position:absolute;left:-4px;top:-17px;
  font-size:14px;line-height:1;z-index:21;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.tnm-score-monkey.show{
  display:block;animation:tnm-monkey-hop .18s ease-in-out infinite alternate;
}
@keyframes tnm-monkey-hop{
  from{transform:translateY(2px) rotate(-3deg)}
  to{transform:translateY(-4px) rotate(3deg)}
}
@media(max-width:480px){
  .tnm-metronome-toggle,.tnm-monkey-toggle{width:27px!important;height:27px!important}
  .tnm-monkey-icon{font-size:15px!important}
  .tnm-score-monkey{font-size:12px!important;top:-15px!important}
}

/* 4.9.4 — responsive piano input */
.tnm-piano-keys, .tnm-piano-keys button{touch-action:none!important;-webkit-tap-highlight-color:transparent!important}

/* 4.9.6 — Synthesia-style score follower: hide blue cursor, use monkey */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  opacity:0!important;
  visibility:hidden!important;
}
.tnm-practice-score .tnm-osmd{position:relative!important}
.tnm-score-monkey-live{
  position:absolute!important;
  z-index:50!important;
  display:none;
  width:24px!important;height:24px!important;
  font-size:20px!important;line-height:24px!important;
  text-align:center!important;
  pointer-events:none!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));
  transform-origin:50% 100%;
  transition:left .06s linear,top .06s linear;
}
.tnm-score-monkey-live.show{display:block!important}
.tnm-score-monkey-live.hop{animation:tnm-synthesia-monkey-hop .18s ease-in-out 2 alternate}
@keyframes tnm-synthesia-monkey-hop{
  from{transform:translateY(2px) rotate(-4deg) scale(.96)}
  to{transform:translateY(-6px) rotate(4deg) scale(1.04)}
}
@media(max-width:600px){
  .tnm-score-monkey-live{width:20px!important;height:20px!important;font-size:17px!important;line-height:20px!important}
}

/* 4.9.10 — cheerful monkey follower */
.tnm-score-monkey-live{
  width:30px!important;height:34px!important;
  margin:0!important;
  display:none;
  position:absolute!important;
  z-index:60!important;
  pointer-events:none!important;
  transform-origin:50% 100%;
}
.tnm-score-monkey-live svg{width:100%;height:100%;overflow:visible}
.tnm-score-monkey-live .ear{fill:#9b5b32;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .head{fill:#b8733f;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .muzzle{fill:#f2c39a}
.tnm-score-monkey-live .eye{fill:#1e1a18}
.tnm-score-monkey-live .smile{fill:none;stroke:#382018;stroke-width:2.2;stroke-linecap:round}
.tnm-score-monkey-live .body{fill:#8e4e2c;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .limb{fill:none;stroke:#63371f;stroke-width:4;stroke-linecap:round}
.tnm-score-monkey-live.show{display:block!important}
.tnm-score-monkey-live.hop{animation:tnm-monkey-hop .22s cubic-bezier(.3,.8,.4,1) 1}
@keyframes tnm-monkey-hop{
  0%{transform:translateY(2px) rotate(0deg) scale(.96)}
  45%{transform:translateY(-9px) rotate(-6deg) scale(1.06)}
  75%{transform:translateY(-5px) rotate(6deg) scale(1.03)}
  100%{transform:translateY(1px) rotate(0deg) scale(1)}
}

/* 4.9.13 — one monkey per active piano staff */
.tnm-score-monkeys-layer{position:absolute;inset:0;pointer-events:none;z-index:60}
.tnm-score-monkeys-layer .tnm-score-monkey-live{
  position:absolute!important;z-index:61!important;display:none;
  width:30px!important;height:34px!important;margin:0!important;
  pointer-events:none!important;transform-origin:50% 100%;
}
.tnm-score-monkeys-layer .tnm-score-monkey-live.show{display:block!important}
.tnm-score-monkeys-layer .tnm-score-monkey-live.unused{display:none!important}

/* 4.9.15 — visible metronome SVG icon */
.tnm-metronome-svg{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:20px!important;height:20px!important;color:currentColor!important}
.tnm-metronome-svg svg{display:block!important;width:20px!important;height:20px!important;overflow:visible!important}
.tnm-metronome-svg svg path{fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}


/* 4.9.15 — metronome toggle follows the same visual language as monkey toggle */
.tnm-metronome-toggle{
  position:relative!important;width:30px!important;height:30px!important;
  padding:0!important;border-radius:8px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;background:transparent!important;
  border:1px solid transparent!important;color:#8b949e!important;
  opacity:.52!important;transition:background .15s,color .15s,opacity .15s,box-shadow .15s,transform .15s!important;
}
.tnm-metronome-toggle:hover{opacity:.78!important;background:#f5f7f9!important}
.tnm-metronome-toggle.active{
  opacity:1!important;color:#e08b24!important;background:#fff7e9!important;
  border-color:#e08b24!important;box-shadow:0 0 0 2px rgba(227,154,40,.14)!important;
}
.tnm-metronome-svg{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:21px!important;height:21px!important;color:currentColor!important;opacity:1!important}
.tnm-metronome-svg svg{display:block!important;width:21px!important;height:21px!important;overflow:visible!important}
.tnm-metronome-svg svg path{fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* =========================================================
   V2-5 — compact MuseScore-like lesson workspace
   ========================================================= */
#piano-practice{display:flex!important;flex-direction:column!important;gap:0!important}
.tnm-practice-topline{order:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important;position:relative!important;z-index:5!important;overflow:visible!important}
.tnm-hand-tabs{display:flex!important;flex:1 1 auto!important;min-width:0!important;flex-wrap:wrap!important;gap:6px!important}
.tnm-practice-score-tools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex:1 1 auto!important;min-width:0!important;flex-wrap:wrap!important;overflow:visible!important}
.tnm-transpose-tool{display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important}
.xml-transpose{display:inline-block!important;min-width:62px!important;max-width:76px!important;height:38px!important;border:1px solid #d6dde2!important;border-radius:9px!important;background:#fff!important;color:#20262b!important;padding:0 6px!important}
.xml-fullscreen{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
.tnm-transport-top{order:2!important;margin:7px 0 8px!important;border-radius:12px!important}
.tnm-practice-score{order:3!important}
.tnm-keyboard-under-score{order:4!important;margin-top:6px!important;margin-bottom:0!important}
.tnm-refine-panel{display:contents!important}
.tnm-refine-status{display:none!important}
.tnm-refine-panel>audio{order:5!important}
.tnm-practice-score:fullscreen{background:#fff!important;overflow:auto!important;padding:14px!important}
.tnm-practice-score.tnm-score-pseudo-fullscreen{position:fixed!important;inset:0!important;z-index:99999!important;background:#fff!important;overflow:auto!important;padding:14px!important}
@media(max-width:900px){
 .tnm-practice-topline{align-items:stretch!important}
 .tnm-hand-tabs{flex:1 1 100%!important}
 .tnm-practice-score-tools{flex:1 1 100%!important;justify-content:flex-start!important}
 .tnm-practice-score-tools button,.tnm-transpose-tool{min-height:38px!important}
 .xml-fullscreen{font-size:0!important;width:42px!important;padding:0!important}
 .xml-fullscreen:before{content:'⛶';font-size:20px!important}
 .tnm-transport-top{margin-top:6px!important}
}
@media(max-width:560px){
 .tnm-practice-score-tools{gap:4px!important}
 .tnm-practice-score-tools .xml-fit{display:none!important}
 .xml-zoom{min-width:42px!important;text-align:center!important}
 .tnm-transpose-tool{font-size:11px!important}
}

/* V2-7 compact transport + metronome icon */
.tnm-refine-panel .tnm-transport > button{
  flex:0 0 62px!important;width:62px!important;min-width:62px!important;height:58px!important;
  padding:5px 4px!important;border-radius:9px!important;font-size:10px!important;gap:2px!important;
}
.tnm-refine-panel .tnm-transport-icon{width:18px!important;height:18px!important;flex-basis:18px!important}
.tnm-refine-panel .tnm-transport-icon svg{width:17px!important;height:17px!important}
.tnm-metronome-toggle{width:42px!important;min-width:42px!important;height:42px!important;padding:7px!important}
.tnm-metronome-svg{display:inline-flex!important;width:25px!important;height:25px!important;align-items:center;justify-content:center}
.tnm-metronome-svg svg{display:block;width:25px;height:25px}
.xml-transpose option{font-variant-numeric:tabular-nums}
@media(max-width:800px){
 .tnm-refine-panel .tnm-transport > button{flex:0 0 56px!important;width:56px!important;min-width:56px!important;height:54px!important;font-size:9px!important}
}

/* V2-7 — compact transport: same visual height as hand tabs */
.tnm-refine-panel .tnm-transport,
.tnm-transport.tnm-transport-top{
  min-height:52px!important;
  padding:6px 10px!important;
  gap:6px!important;
  align-items:center!important;
  border-radius:12px!important;
}
.tnm-refine-panel .tnm-transport > button,
.tnm-transport.tnm-transport-top > button{
  flex:0 0 62px!important;
  width:62px!important;
  min-width:62px!important;
  height:40px!important;
  min-height:40px!important;
  padding:3px 5px!important;
  gap:2px!important;
  border-radius:9px!important;
  font-size:10px!important;
  line-height:1!important;
}
.tnm-refine-panel .tnm-transport-icon,
.tnm-transport.tnm-transport-top .tnm-transport-icon{
  width:16px!important;height:16px!important;flex-basis:16px!important;
}
.tnm-refine-panel .tnm-transport-icon svg,
.tnm-transport.tnm-transport-top .tnm-transport-icon svg{width:15px!important;height:15px!important}
.tnm-metronome-toggle{width:40px!important;min-width:40px!important;flex-basis:40px!important}
.tnm-metronome-svg,.tnm-metronome-svg svg{width:20px!important;height:20px!important}
@media(max-width:760px){
 .tnm-refine-panel .tnm-transport > button,.tnm-transport.tnm-transport-top > button{flex:0 0 54px!important;width:54px!important;min-width:54px!important;height:40px!important}
}

/* V2-12 — calmer independent staff monkeys + optional keyboard playback sync */
.tnm-key-sync-toggle{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;border:1px solid rgba(255,255,255,.22);border-radius:7px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.tnm-key-sync-toggle input{width:14px;height:14px;margin:0;accent-color:#f59b23}
.tnm-piano-keys button.playback-active{box-shadow:inset 0 -18px 0 rgba(245,155,35,.48)!important}
.tnm-piano-keys button.black.playback-active{box-shadow:inset 0 -18px 0 rgba(245,155,35,.82)!important}
.tnm-score-monkeys-layer .tnm-score-monkey-live{transition:left .075s linear,top .075s linear!important}
@media(max-width:700px){.tnm-key-sync-toggle{padding:0 5px;font-size:10px}}

/* V2-14 — full-key real-time staff colours for On/Off key sync */
.tnm-piano-keys button.playback-active{
  background:var(--tnm-playback-color,#45c96b)!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.10),0 0 7px color-mix(in srgb,var(--tnm-playback-color,#45c96b) 58%,transparent)!important;
  filter:none!important;
}
.tnm-piano-keys button.black.playback-active{
  background:var(--tnm-playback-color,#45c96b)!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 0 7px color-mix(in srgb,var(--tnm-playback-color,#45c96b) 65%,transparent)!important;
}
/* If two staves happen to play the exact same piano key simultaneously, preserve both staff colours. */
.tnm-piano-keys button.playback-active[style*="--tnm-playback-color-2"]{
  background:linear-gradient(90deg,var(--tnm-playback-color) 0 50%,var(--tnm-playback-color-2) 50% 100%)!important;
}

/* V2-14 — true key-up/key-down articulation for repeated notes */
.tnm-piano-keys button{transition:background-color .018s linear,box-shadow .018s linear!important}

/* V2-20 lesson information header */
.tnm-lesson-head-v220{position:relative;display:block;padding-bottom:18px}.tnm-lesson-head-v220 .tnm-lesson-info{width:100%}.tnm-lesson-head-v220 .tnm-lesson-no{display:block;text-align:left;font-size:11px;letter-spacing:.02em;color:#7d8790;margin-bottom:3px}.tnm-lesson-head-v220 h2{text-align:center;font-size:28px;font-weight:800;margin:2px 70px 7px}.tnm-lesson-head-v220 .tnm-lesson-summary{text-align:center;max-width:900px;margin:0 auto;color:#66717b;font-size:14px;line-height:1.55}.tnm-lesson-head-v220 .tnm-progress{position:absolute;right:0;top:0}@media(max-width:600px){.tnm-lesson-head-v220 h2{font-size:23px;margin:6px 0}.tnm-lesson-head-v220 .tnm-lesson-summary{text-align:left}.tnm-lesson-head-v220 .tnm-progress{position:static;text-align:left;margin-top:8px}}


/* =========================================================
   V2-33 — Modul Nội dung bài học
   Transport state colors + compact four-channel mixer.
   ========================================================= */

/* No transport key is permanently colored. The selected action alone lights. */
.tnm-refine-panel .tnm-transport > button,
.tnm-refine-panel .tnm-transport > .play{
  background:#fff!important;
  border-color:#e4e8ed!important;
  color:#26313b!important;
  box-shadow:0 2px 7px rgba(20,32,44,.04)!important;
}
.tnm-refine-panel .tnm-transport > .play .tnm-icon-play{color:#1976f3!important}

/* PLAY stays green only while playback is actually running. */
.tnm-refine-panel .tnm-transport > .play.active{
  background:#19a463!important;
  border-color:#158a53!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(25,164,99,.12),0 6px 14px rgba(25,164,99,.16)!important;
}
.tnm-refine-panel .tnm-transport > .play.active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > .play.active .tnm-icon-play{color:#fff!important}

/* STOP stays red after the learner presses it. */
.tnm-refine-panel .tnm-transport > .stop.active{
  background:#df3441!important;
  border-color:#c62834!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(223,52,65,.11),0 6px 14px rgba(223,52,65,.15)!important;
}
.tnm-refine-panel .tnm-transport > .stop.active .tnm-transport-icon{color:#fff!important}

/* REPLAY flashes red briefly then returns to neutral. */
.tnm-refine-panel .tnm-transport > .restart.active{
  background:#df3441!important;
  border-color:#c62834!important;
  color:#fff!important;
}
.tnm-refine-panel .tnm-transport > .restart.active .tnm-transport-icon{color:#fff!important}

/* Previous / next only flash while clicked. */
.tnm-refine-panel .tnm-transport > .prev.active{
  background:#7a45d6!important;border-color:#6936c0!important;color:#fff!important;
}
.tnm-refine-panel .tnm-transport > .next.active{
  background:#0c9c72!important;border-color:#087e5d!important;color:#fff!important;
}
.tnm-refine-panel .tnm-transport > .prev.active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > .next.active .tnm-transport-icon{color:#fff!important}

/* Mixer sits directly below transport and above the score. */
.tnm-practice-mixer{
  width:100%;
  display:grid;
  grid-template-columns:auto repeat(4,minmax(130px,1fr));
  gap:10px;
  align-items:center;
  padding:9px 12px;
  margin:8px 0 10px;
  border:1px solid #e3e8ed;
  border-radius:13px;
  background:#fbfcfd;
  box-sizing:border-box;
}
.tnm-mixer-title{
  font-weight:800;
  font-size:13px;
  color:#26313b;
  white-space:nowrap;
}
.tnm-practice-mixer label{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(58px,1fr) 38px;
  gap:7px;
  align-items:center;
  font-size:11px;
  color:#55616b;
}
.tnm-practice-mixer label span{white-space:nowrap;font-weight:700}
.tnm-practice-mixer input[type="range"]{
  width:100%;
  min-width:0;
  margin:0;
  accent-color:#1976f3;
}
.tnm-practice-mixer label b{
  text-align:right;
  font-size:10px;
  color:#76808a;
  font-variant-numeric:tabular-nums;
}
.tnm-demo-audio,.tnm-backing{max-width:100%}

@media(max-width:980px){
  .tnm-practice-mixer{
    grid-template-columns:auto repeat(2,minmax(150px,1fr));
  }
  .tnm-practice-mixer .tnm-mixer-title{grid-row:1 / span 2}
}
@media(max-width:620px){
  .tnm-practice-mixer{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:9px;
  }
  .tnm-practice-mixer .tnm-mixer-title{grid-column:1 / -1;grid-row:auto}
  .tnm-practice-mixer label{
    grid-template-columns:1fr 36px;
    gap:4px 6px;
  }
  .tnm-practice-mixer label span{grid-column:1 / -1}
}
@media(prefers-color-scheme:dark){
  .tnm-practice-mixer{background:#20252a;border-color:#363d44}
  .tnm-mixer-title,.tnm-practice-mixer label{color:#e9edf0}
  .tnm-practice-mixer label b{color:#aeb7be}
  .tnm-refine-panel .tnm-transport > button,
  .tnm-refine-panel .tnm-transport > .play{
    background:#292f35!important;border-color:#444c54!important;color:#eef2f5!important;
  }
  .tnm-refine-panel .tnm-transport > .play.active{background:#19a463!important;border-color:#158a53!important}
  .tnm-refine-panel .tnm-transport > .stop.active,
  .tnm-refine-panel .tnm-transport > .restart.active{background:#df3441!important;border-color:#c62834!important}
}


/* V2-34 — final transport state override.  No action button is colored until active. */
#tnm-lesson .tnm-refine-panel .tnm-transport > button.restart,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.play,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.stop,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.prev,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.next{
  background:#fff!important;border-color:#dfe5ea!important;color:#26313b!important;box-shadow:none!important;
}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.play .tnm-transport-icon{color:#1976f3!important}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.restart.active,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.stop.active{
  background:#df3441!important;border-color:#c62834!important;color:#fff!important;
}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.play.active{
  background:#18a566!important;border-color:#148a55!important;color:#fff!important;
}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.prev.active{background:#7444ca!important;border-color:#6235ad!important;color:#fff!important}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.next.active{background:#0c9b72!important;border-color:#087c5c!important;color:#fff!important}
#tnm-lesson .tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon,
#tnm-lesson .tnm-refine-panel .tnm-transport > button.play.active .tnm-transport-icon{color:#fff!important}
@media(prefers-color-scheme:dark){
 #tnm-lesson .tnm-refine-panel .tnm-transport > button.restart,
 #tnm-lesson .tnm-refine-panel .tnm-transport > button.play,
 #tnm-lesson .tnm-refine-panel .tnm-transport > button.stop,
 #tnm-lesson .tnm-refine-panel .tnm-transport > button.prev,
 #tnm-lesson .tnm-refine-panel .tnm-transport > button.next{background:#292f35!important;border-color:#444c54!important;color:#eef2f5!important}
}

/* V2-35 — transport button state colors.
   Important: lesson module root is #mod-lesson (not #tnm-lesson). */
#mod-lesson .tnm-refine-panel .tnm-transport > button.restart,
#mod-lesson .tnm-refine-panel .tnm-transport > button.play,
#mod-lesson .tnm-refine-panel .tnm-transport > button.stop,
#mod-lesson .tnm-refine-panel .tnm-transport > button.prev,
#mod-lesson .tnm-refine-panel .tnm-transport > button.next{
  background:#fff!important;
  border-color:#dfe5ea!important;
  color:#26313b!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.restart .tnm-transport-icon{color:#607d8b!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.play .tnm-transport-icon{color:#1976f3!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.stop .tnm-transport-icon{color:#455a64!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.prev .tnm-transport-icon{color:#7b3fc6!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.next .tnm-transport-icon{color:#1976d2!important}

/* Phát lại: nháy đỏ rồi trở về trắng. Dừng: đỏ khi được bấm. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.restart.active,
#mod-lesson .tnm-refine-panel .tnm-transport > button.stop.active{
  background:#df3441!important;
  border-color:#c62834!important;
  color:#fff!important;
}
/* Phát: xanh trong toàn bộ thời gian đang phát. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.play.active{
  background:#18a566!important;
  border-color:#148a55!important;
  color:#fff!important;
}
/* Lùi/Tiến chỉ nháy màu khi bấm. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.prev.active{
  background:#7444ca!important;border-color:#6235ad!important;color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.next.active{
  background:#1976d2!important;border-color:#125fa9!important;color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon{
  color:#fff!important;
}
/* V2-36 final transport colors; JS also applies inline !important state for stale-cache resilience. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.play:not(.active),
#mod-lesson .tnm-refine-panel .tnm-transport > button.restart:not(.active),
#mod-lesson .tnm-refine-panel .tnm-transport > button.stop:not(.active),
#mod-lesson .tnm-refine-panel .tnm-transport > button.prev:not(.active),
#mod-lesson .tnm-refine-panel .tnm-transport > button.next:not(.active){background:#fff!important;border-color:#dfe5ea!important;color:#26313b!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.play.active{background:#18a566!important;border-color:#148a55!important;color:#fff!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.restart.active,
#mod-lesson .tnm-refine-panel .tnm-transport > button.stop.active{background:#df3441!important;border-color:#c62834!important;color:#fff!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.prev.active,
#mod-lesson .tnm-refine-panel .tnm-transport > button.next.active{background:#f59e0b!important;border-color:#d97706!important;color:#fff!important}

/* V2-37 — hand mode + Beat/Demo selectors */
.tnm-practice-topline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tnm-audio-tabs{display:flex;gap:6px;flex-wrap:wrap}
.tnm-audio-tabs button{border:1px solid #d4dbe1;background:#fff;color:#26313b;border-radius:8px;padding:9px 13px;cursor:pointer;font-weight:700}
.tnm-audio-tabs button.active{background:#f59e0b;border-color:#d97706;color:#fff}
.tnm-refine-panel audio.tnm-demo-audio,.tnm-refine-panel audio.tnm-backing{display:none!important}

/* V2-39 — cursor stays visible through notes and rests, while monkeys only show on sounding staves. */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  opacity:.42!important;
  visibility:visible!important;
  background:rgba(54,205,96,.34)!important;
  pointer-events:none!important;
  z-index:45!important;
}
.tnm-score-monkeys-layer .tnm-score-monkey-live{
  will-change:left,top,transform;
  transition:left .035s linear,top .035s linear!important;
}

/* V2-44 — independent reinforcement players under the virtual piano */
.tnm-independent-players{
  order:5!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:10px;padding:0;
}
.tnm-independent-player{
  border:1px solid #dfe5ea;border-radius:12px;background:#fff;padding:11px 12px;min-width:0;
}
.tnm-independent-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:9px}
.tnm-independent-head strong{font-size:13px}.tnm-independent-head small{font-size:10px;color:#7b858d}
.tnm-independent-controls{display:grid;grid-template-columns:auto auto minmax(110px,1fr) auto auto;gap:7px;align-items:center}
.tnm-independent-controls button{
  border:1px solid #d6dde2;background:#fff;border-radius:8px;height:34px;padding:0 10px;cursor:pointer;font-weight:700;
}
.tnm-independent-controls .tnm-ind-play.playing{background:#18a566;border-color:#148a55;color:#fff}
.tnm-independent-controls .tnm-ind-play.counting{background:#f59e0b;border-color:#d97706;color:#fff}
.tnm-independent-controls .tnm-ind-stop{color:#c62834}
.tnm-ind-progress{width:100%;min-width:90px}
.tnm-ind-time{font-size:11px;white-space:nowrap;color:#53606a;font-variant-numeric:tabular-nums}
.tnm-ind-volume{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap;color:#68737c}
.tnm-ind-volume input{width:72px}
.tnm-independent-audio{display:none!important}
@media(max-width:900px){
 .tnm-independent-players{grid-template-columns:1fr}
}
@media(max-width:620px){
 .tnm-independent-controls{grid-template-columns:auto auto 1fr}
 .tnm-ind-time{grid-column:1/3}
 .tnm-ind-volume{grid-column:3}
 .tnm-independent-head{align-items:flex-start;flex-direction:column}
}

/* V2-45 — cleaner lesson UI, virtual-piano toggle, fullscreen translucent transport */
.tnm-independent-players{
  margin-bottom:calc(30px + env(safe-area-inset-bottom,0px))!important;
}
.tnm-independent-head{margin-bottom:9px!important}
.tnm-independent-head small{display:none!important}

/* Piano icon replaces the old checkbox text. */
.tnm-piano-toggle{
  position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:42px!important;min-width:42px!important;height:42px!important;border:1px solid #d6dde2!important;
  border-radius:9px!important;background:#fff!important;color:#25313b!important;cursor:pointer!important;
  transition:background .12s ease,border-color .12s ease,color .12s ease!important;
}
.tnm-piano-toggle input{
  position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;
}
.tnm-piano-toggle-icon{font-size:20px!important;line-height:1!important}
.tnm-piano-toggle.active{
  background:#1976f3!important;border-color:#155fbf!important;color:#fff!important;
}
.tnm-keyboard-shell.tnm-keyboard-hidden{display:none!important}

/* Fullscreen score keeps the real transport controls; no clone means no duplicated state/listeners. */
.tnm-practice-score:fullscreen,
.tnm-practice-score.tnm-score-pseudo-fullscreen{
  position:fixed!important;inset:0!important;z-index:99999!important;background:#fff!important;
  overflow:auto!important;padding:68px 14px 20px!important;
}
.tnm-practice-score:fullscreen .tnm-fullscreen-transport,
.tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
  position:fixed!important;top:10px!important;left:50%!important;bottom:auto!important;transform:translateX(-50%)!important;
  width:min(980px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;
  min-height:48px!important;margin:0!important;padding:5px 8px!important;z-index:100005!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;flex-wrap:wrap!important;
  background:rgba(255,255,255,.78)!important;border:1px solid rgba(140,150,160,.35)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.12)!important;border-radius:14px!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.2)!important;backdrop-filter:blur(12px) saturate(1.2)!important;
}
.tnm-practice-score:fullscreen .tnm-fullscreen-transport > button,
.tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport > button{
  flex:0 0 58px!important;width:58px!important;min-width:58px!important;height:38px!important;
}
.tnm-practice-score:fullscreen .tnm-fullscreen-transport .tnm-metronome-tools,
.tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport .tnm-metronome-tools{
  display:flex!important;align-items:center!important;gap:5px!important;
}
.tnm-practice-score:fullscreen .tnm-fullscreen-transport .tnm-tempo-control,
.tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport .tnm-tempo-control{
  margin-left:4px!important;
}
.tnm-keyboard-shell.tnm-keyboard-fullscreen{
  display:block!important;position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;
  z-index:100004!important;margin:0!important;padding:8px!important;background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(140,150,160,.32)!important;border-radius:14px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.12)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
}
@media(max-width:700px){
  .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
  .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
    top:6px!important;width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;padding:4px!important;gap:3px!important;
  }
  .tnm-practice-score:fullscreen .tnm-fullscreen-transport > button,
  .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport > button{
    flex:0 0 50px!important;width:50px!important;min-width:50px!important;font-size:9px!important;
  }
  .tnm-practice-score:fullscreen .tnm-fullscreen-transport .tnm-tempo-control,
  .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport .tnm-tempo-control{
    flex:1 1 170px!important;
  }
}


/* V2-46 — clickable measures, compact piano keys, neutral piano toggle */
.tnm-practice-score .tnm-osmd{cursor:pointer!important}

/* Keep the full keyboard width and all 88-key behavior; shorten key length to ~2/3. */
.tnm-keyboard-shell .tnm-piano-keys{height:123px!important}
.tnm-keyboard-shell .tnm-piano-keys:before{height:8px!important}
.tnm-keyboard-shell .tnm-piano-whites,
.tnm-keyboard-shell .tnm-piano-blacks{
  top:8px!important;height:calc(100% - 8px)!important;
}
@media(min-width:1000px){
  .tnm-keyboard-shell .tnm-piano-keys{height:120px!important}
}
@media(max-width:640px){
  .tnm-keyboard-shell .tnm-piano-keys{height:78px!important}
  .tnm-keyboard-shell .tnm-piano-keys:before{height:6px!important}
  .tnm-keyboard-shell .tnm-piano-whites,
  .tnm-keyboard-shell .tnm-piano-blacks{top:6px!important;height:calc(100% - 6px)!important}
}

/* Piano icon: OFF is subdued like the metronome; ON is fully visible, without adding a new color. */
.tnm-piano-toggle{
  width:40px!important;min-width:40px!important;height:40px!important;
  background:transparent!important;border:1px solid transparent!important;
  color:#8b949e!important;opacity:.52!important;box-shadow:none!important;
  filter:grayscale(.72)!important;
}
.tnm-piano-toggle:hover{
  opacity:.78!important;background:#f5f7f9!important;
}
.tnm-piano-toggle.active{
  opacity:1!important;background:transparent!important;border-color:transparent!important;
  color:#25313b!important;box-shadow:none!important;filter:none!important;
}

/* V2-48 — fast per-staff monkey follower.
   Position follows the audio/cursor frame almost immediately; no slow easing. */
.tnm-score-monkeys-layer .tnm-score-monkey-live{
  transition:left .012s linear,top .012s linear!important;
  will-change:left,top,transform;
}

/* =========================================================
   V2-48 MOBILE UI — learner / MusicXML display only
   No learning logic, audio engine or module behavior changed.
   ========================================================= */
@media(max-width:700px){
  /* Course and lesson list: compact, clearer hierarchy. */
  .tnm-course-summary{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;margin:10px 0 12px!important;
  }
  .tnm-course-summary>div{
    min-width:0!important;padding:8px 5px!important;border-radius:10px!important;text-align:center!important;
    background:#fff!important;
  }
  .tnm-course-summary b{font-size:16px!important;line-height:1.05!important}
  .tnm-course-summary small{font-size:9px!important;line-height:1.15!important;margin-top:3px!important}
  .tnm-lessons{gap:7px!important}
  .tnm-lesson-card{
    gap:8px!important;padding:11px 12px!important;border-radius:11px!important;
    border-color:#d9deea!important;border-left:4px solid #8b5cf6!important;
    box-shadow:0 3px 10px rgba(35,45,70,.035)!important;
  }
  .tnm-lesson-card .num{display:none!important}
  .tnm-lesson-card span{min-width:0!important}
  .tnm-lesson-card strong{
    font-size:16px!important;line-height:1.22!important;font-weight:850!important;color:#17202a!important;
  }
  .tnm-lesson-card small{font-size:10px!important;line-height:1.3!important;margin-top:3px!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
  .tnm-lesson-card em{
    flex:0 0 auto!important;font-size:9px!important;font-weight:800!important;color:#6246c7!important;
    background:#f2edff!important;border-radius:999px!important;padding:5px 7px!important;white-space:nowrap!important;
  }

  /* Lesson modal uses the full phone viewport instead of a dark framed window. */
  .tnm-modal{padding:0!important;background:#f6f7fb!important;overscroll-behavior:contain!important}
  .tnm-modal-box{
    width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;
    margin:0!important;border-radius:0!important;padding:10px 8px calc(18px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;background:#f6f7fb!important;
  }
  .tnm-modal-box>#tnm-close{
    position:sticky!important;float:right!important;right:4px!important;top:4px!important;
    width:34px!important;height:34px!important;border-radius:50%!important;background:#fff!important;
    border:1px solid #dfe4e9!important;box-shadow:0 3px 12px rgba(20,30,45,.08)!important;
    font-size:24px!important;line-height:30px!important;z-index:100!important;
  }
  .tnm-lesson-head-v220{padding:3px 42px 9px 2px!important;margin:0 0 7px!important;min-height:0!important}
  .tnm-lesson-head-v220 .tnm-lesson-no{font-size:9px!important;letter-spacing:.04em!important}
  .tnm-lesson-head-v220 h2{font-size:20px!important;line-height:1.18!important;margin:3px 0!important}
  .tnm-lesson-summary{font-size:11px!important;line-height:1.35!important}
  .tnm-progress b{font-size:15px!important}.tnm-progress small{font-size:9px!important}
  .tnm-modal-box section{margin-top:14px!important}
  .tnm-section-title{gap:7px!important;padding:2px 1px 8px!important;margin:0 0 8px!important}
  .tnm-section-title>span{font-size:20px!important;min-width:26px!important}
  .tnm-section-title h3{font-size:17px!important;line-height:1.15!important}
  .tnm-section-title small{font-size:9px!important;margin-top:2px!important}
  .tnm-section-title:after{width:38px!important}

  /* One compact control area above the score. */
  #piano-practice{display:flex!important;flex-direction:column!important;gap:0!important}
  #mod-lesson .tnm-practice-topline{
    order:1!important;display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important;
    margin:0!important;padding:6px!important;background:#fff!important;border:1px solid #dfe5ea!important;
    border-bottom:0!important;border-radius:12px 12px 0 0!important;box-shadow:none!important;
  }
  #mod-lesson .tnm-hand-tabs{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;
    flex:1 1 100%!important;width:100%!important;overflow:visible!important;padding:0!important;
  }
  #mod-lesson .tnm-hand-tabs button{
    width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;
    padding:4px 4px!important;border-radius:8px!important;font-size:10px!important;line-height:1.05!important;white-space:nowrap!important;
  }
  #mod-lesson .tnm-audio-tabs{display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important}
  #mod-lesson .tnm-audio-tabs button{
    height:34px!important;min-height:34px!important;padding:3px 8px!important;border-radius:8px!important;font-size:10px!important;line-height:1!important;
  }
  #mod-lesson .tnm-practice-score-tools{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;
    flex:1 1 auto!important;margin:0!important;min-width:0!important;flex-wrap:nowrap!important;
  }
  #mod-lesson .tnm-transpose-tool{height:34px!important;font-size:9px!important;gap:3px!important}
  #mod-lesson .xml-transpose{height:34px!important;min-width:52px!important;max-width:58px!important;border-radius:8px!important;padding:0 3px!important;font-size:11px!important}
  #mod-lesson .tnm-practice-score-tools .xml-fit{display:none!important}
  #mod-lesson .tnm-practice-score-tools .xml-minus,
  #mod-lesson .tnm-practice-score-tools .xml-plus{
    width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:8px!important;font-size:17px!important;
  }
  #mod-lesson .xml-zoom{min-width:34px!important;width:34px!important;font-size:9px!important;text-align:center!important}

  /* Playback row joins visually with the tabs/tools above it. */
  #mod-lesson .tnm-transport.tnm-transport-top{
    order:2!important;display:grid!important;grid-template-columns:repeat(5,minmax(36px,1fr)) auto!important;
    gap:4px!important;align-items:center!important;min-height:0!important;margin:0!important;padding:6px!important;
    background:#fff!important;border:1px solid #dfe5ea!important;border-top:0!important;border-radius:0 0 12px 12px!important;
    box-shadow:0 5px 14px rgba(24,34,48,.045)!important;overflow:visible!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top>button{
    width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;height:39px!important;min-height:39px!important;
    padding:3px 2px!important;border-radius:8px!important;font-size:8px!important;line-height:1!important;gap:1px!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-transport-icon,
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-transport-icon svg{width:16px!important;height:16px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-tools{display:flex!important;align-items:center!important;gap:2px!important;white-space:nowrap!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-toggle,
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-monkey-toggle,
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-piano-toggle{
    width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:4px!important;border-radius:8px!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-svg,
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-svg svg{width:18px!important;height:18px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-monkey-icon,
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-piano-toggle-icon{font-size:17px!important}
  #mod-lesson .tnm-tempo-control{
    grid-column:1/-1!important;width:100%!important;box-sizing:border-box!important;margin:1px 0 0!important;padding:4px 3px!important;
    display:grid!important;grid-template-columns:auto minmax(80px,1fr) auto!important;align-items:center!important;gap:6px!important;
  }
  #mod-lesson .tnm-tempo-head{font-size:10px!important;margin:0!important}.tnm-tempo-head strong{font-size:10px!important}
  #mod-lesson .tnm-tempo-control .tempo{width:100%!important;min-width:0!important;margin:0!important}
  #mod-lesson .tnm-tempo-control .bpm{font-size:13px!important;min-width:58px!important;text-align:right!important}
  #mod-lesson .tnm-tempo-control small{display:none!important}

  /* Put the score immediately after the compact controls; mixer remains available below it. */
  #mod-lesson .tnm-practice-score{
    order:3!important;position:relative!important;margin:7px 0 0!important;padding:7px 5px 12px!important;
    min-height:300px!important;max-height:68dvh!important;border-radius:12px!important;background:#fff!important;
  }
  #mod-lesson .tnm-mixer-top{order:4!important;margin:7px 0 0!important;padding:7px!important;gap:6px!important;border-radius:11px!important}
  #mod-lesson .tnm-mixer-title{font-size:10px!important}
  #mod-lesson .tnm-practice-mixer label{font-size:9px!important;gap:3px 5px!important}
  #mod-lesson .tnm-practice-mixer label b{font-size:9px!important}
  #mod-lesson .tnm-keyboard-under-score{order:5!important}
  #mod-lesson .tnm-independent-players{order:6!important}

  /* Fullscreen button belongs to the MusicXML canvas, not to the toolbar. */
  #mod-lesson .tnm-score-fullscreen-corner{
    position:absolute!important;top:7px!important;right:7px!important;z-index:95!important;
    width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid #cfd7df!important;
    border-radius:9px!important;background:rgba(255,255,255,.92)!important;color:#17202a!important;
    box-shadow:0 3px 10px rgba(20,30,45,.10)!important;font-size:0!important;line-height:1!important;
    -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  }
  #mod-lesson .tnm-score-fullscreen-corner:before{content:'⛶'!important;font-size:19px!important;line-height:1!important}
  #mod-lesson .tnm-score-fullscreen-corner.is-exit:before{content:'✕'!important;font-size:18px!important}
  #mod-lesson .tnm-fs-menu-toggle{display:none!important}

  /* True/pseudo fullscreen: score gets the viewport; controls can be folded away. */
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;
    inset:0!important;margin:0!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;
    padding:143px 5px 8px!important;background:#fff!important;overflow:auto!important;justify-content:flex-start!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-fullscreen-corner,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-fullscreen-corner{
    position:fixed!important;top:calc(7px + env(safe-area-inset-top,0px))!important;right:8px!important;z-index:100010!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
    position:fixed!important;display:flex!important;align-items:center!important;justify-content:center!important;
    top:calc(7px + env(safe-area-inset-top,0px))!important;left:8px!important;z-index:100010!important;
    width:34px!important;height:34px!important;padding:0!important;border:1px solid #cfd7df!important;border-radius:9px!important;
    background:rgba(255,255,255,.92)!important;color:#17202a!important;box-shadow:0 3px 10px rgba(20,30,45,.10)!important;
    font-size:17px!important;font-weight:800!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline{
    position:fixed!important;top:calc(46px + env(safe-area-inset-top,0px))!important;left:6px!important;right:6px!important;z-index:100006!important;
    width:auto!important;height:42px!important;min-height:42px!important;margin:0!important;padding:4px!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;
    background:rgba(255,255,255,.90)!important;border:1px solid rgba(140,150,160,.32)!important;border-radius:11px 11px 5px 5px!important;
    box-shadow:0 5px 15px rgba(0,0,0,.08)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline .tnm-hand-tabs,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline .tnm-hand-tabs{
    display:flex!important;flex:0 0 auto!important;width:auto!important;gap:3px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline .tnm-hand-tabs button,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline .tnm-hand-tabs button{
    width:auto!important;min-width:56px!important;height:32px!important;min-height:32px!important;padding:3px 6px!important;font-size:9px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline .tnm-audio-tabs,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline .tnm-audio-tabs,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline .tnm-practice-score-tools,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline .tnm-practice-score-tools{flex:0 0 auto!important;flex-wrap:nowrap!important}
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
    position:fixed!important;top:calc(90px + env(safe-area-inset-top,0px))!important;left:6px!important;right:6px!important;bottom:auto!important;
    transform:none!important;width:auto!important;max-width:none!important;height:46px!important;min-height:46px!important;margin:0!important;padding:3px 4px!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;overflow-x:auto!important;overflow-y:hidden!important;
    background:rgba(255,255,255,.90)!important;border:1px solid rgba(140,150,160,.32)!important;border-radius:5px 5px 11px 11px!important;
    box-shadow:0 5px 15px rgba(0,0,0,.08)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;z-index:100006!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>button,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>button{
    flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:36px!important;min-height:36px!important;padding:2px!important;font-size:7px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport .tnm-tempo-control,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport .tnm-tempo-control{
    flex:0 0 160px!important;width:160px!important;min-width:160px!important;display:grid!important;grid-template-columns:auto 1fr auto!important;gap:4px!important;margin:0 0 0 2px!important;padding:2px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden{padding-top:43px!important}
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{display:none!important}
  #mod-lesson .tnm-practice-score:fullscreen .tnm-osmd,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-osmd{width:100%!important;max-width:none!important;overflow:visible!important}
}

/* V2-48 — Play/Pause + A/B loop controls. UI only; engine timing remains score-clock based. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b{
  background:#fff!important;border-color:#dfe5ea!important;color:#26313b!important;box-shadow:none!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b .tnm-transport-icon{
  border:1px solid currentColor;border-radius:5px;font-weight:900;font-size:11px;line-height:1;color:#56616c!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set{
  background:#7b4bd1!important;border-color:#6535ba!important;color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set{
  background:#e48619!important;border-color:#c46f0c!important;color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set .tnm-transport-icon{color:#fff!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.play .tnm-icon-playpause{color:#1976f3!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.play.active .tnm-icon-playpause{color:#fff!important}
#mod-lesson .tnm-refine-panel .tnm-transport > button.play .tnm-icon-playpause svg{width:20px!important;height:17px!important}
.teacher-search-card.selected{border-color:#274b8b!important;box-shadow:0 0 0 2px rgba(39,75,139,.10);background:#f2f7ff!important}
.teacher-current-list{display:grid;gap:8px}.teacher-current-card{display:flex;align-items:center;gap:10px}.teacher-current-card small{color:inherit;opacity:.78}
@media(max-width:700px){
  #mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a,
  #mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b{flex:0 0 48px!important;width:48px!important;min-width:48px!important}
  #mod-lesson .tnm-refine-panel .tnm-transport > button.play{flex-basis:72px!important;width:72px!important;min-width:72px!important}
}

/* V2-48 — precise note selection + independent A/B loop toggle */
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b{
  flex:0 0 42px!important;width:42px!important;min-width:42px!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b .tnm-transport-icon{
  width:24px!important;height:24px!important;flex-basis:24px!important;border-radius:6px!important;font-size:13px!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle{
  background:#fff!important;border-color:#dfe5ea!important;color:#26313b!important;box-shadow:none!important;
  flex:0 0 50px!important;width:50px!important;min-width:50px!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle .tnm-icon-loop-ab{
  color:#087c5c!important;font-weight:900;font-size:18px!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active{
  background:#0c9b72!important;border-color:#087c5c!important;color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active .tnm-icon-loop-ab{color:#fff!important}
#mod-lesson .tnm-practice-score .tnm-osmd{cursor:pointer}
.tnm-loop-score-marker{
  position:absolute;z-index:45;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font:800 11px/1 Arial,sans-serif;color:#fff;
  background:#7444ca;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);pointer-events:none;
  transform:translateZ(0);
}
.tnm-loop-score-marker[data-point="B"]{background:#e48619}
.tnm-score-point-menu{
  position:fixed;z-index:2147483000;width:168px;padding:6px;border-radius:10px;background:#fff;
  border:1px solid #d9e0e8;box-shadow:0 8px 26px rgba(20,31,45,.22);display:grid;gap:5px;
}
.tnm-score-point-menu button{
  width:100%;min-height:34px;padding:7px 9px;border:1px solid #e1e6ec;border-radius:8px;background:#f8fafc;
  color:#26313b;font:700 12px/1.2 Arial,sans-serif;text-align:left;cursor:pointer;
}
.tnm-score-point-menu button:first-child{border-left:4px solid #7444ca}
.tnm-score-point-menu button:last-child{border-left:4px solid #e48619}
@media(max-width:700px){
  #mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a,
  #mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b{flex:0 0 38px!important;width:38px!important;min-width:38px!important}
  #mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle{flex:0 0 46px!important;width:46px!important;min-width:46px!important}
  .tnm-score-point-menu{width:158px}
  .tnm-score-point-menu button{min-height:40px;font-size:13px}
}

/* V2-48 — A/B loop state, hook markers, Tempo standard reset + step feedback */
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active{
  background:#7543c7!important;
  border-color:#6032ad!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(117,67,199,.13)!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active .tnm-transport-icon{
  color:#fff!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-ready:not(.is-active){
  background:#f3edff!important;
  border-color:#b89be8!important;
  color:#6540a9!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-ready:not(.is-active) .tnm-icon-loop-ab{
  color:#7543c7!important;
}

/* A/B are shown as small hook flags attached to the exact selected note position. */
#mod-lesson .tnm-loop-score-marker{
  --tnm-loop-hook:14px;
  position:absolute!important;
  z-index:45!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:22px!important;
  height:18px!important;
  border-radius:5px!important;
  color:#fff!important;
  background:#7543c7!important;
  border:1px solid #6032ad!important;
  box-shadow:0 1px 4px rgba(44,23,77,.22)!important;
  pointer-events:none!important;
  transform:translateZ(0)!important;
  overflow:visible!important;
  font:900 11px/1 Arial,sans-serif!important;
}
#mod-lesson .tnm-loop-score-marker[data-point="B"]{
  background:#7543c7!important;
  border-color:#6032ad!important;
}
#mod-lesson .tnm-loop-score-marker::before{
  content:"";
  position:absolute;
  left:10px;
  top:17px;
  width:2px;
  height:var(--tnm-loop-hook);
  border-radius:2px;
  background:#7543c7;
}
#mod-lesson .tnm-loop-score-marker::after{
  content:"";
  position:absolute;
  top:calc(17px + var(--tnm-loop-hook) - 2px);
  width:8px;
  height:5px;
  border-bottom:2px solid #7543c7;
}
#mod-lesson .tnm-loop-score-marker[data-point="A"]::after{
  left:10px;
  border-right:2px solid #7543c7;
  border-bottom-right-radius:3px;
}
#mod-lesson .tnm-loop-score-marker[data-point="B"]::after{
  right:10px;
  border-left:2px solid #7543c7;
  border-bottom-left-radius:3px;
}
#mod-lesson .tnm-loop-score-marker b{font:inherit;color:inherit}

#mod-lesson .tnm-tempo-standard{
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  border-radius:7px!important;
  padding:3px 6px!important;
  transition:background .12s ease,color .12s ease,transform .10s ease!important;
}
#mod-lesson .tnm-tempo-standard:hover,
#mod-lesson .tnm-tempo-standard:focus-visible{
  background:#f2ecff!important;
  color:#6540a9!important;
  outline:none!important;
}
#mod-lesson .tnm-tempo-standard.tnm-tempo-standard-hit{animation:tnmTempoStandardHit .24s ease}
#mod-lesson .tnm-tempo-control .bpm.tnm-tempo-bump{animation:tnmTempoBump .12s ease}
#mod-lesson .tnm-tempo-control .tempo.tnm-tempo-tick{filter:saturate(1.1)}
@keyframes tnmTempoStandardHit{0%{transform:scale(1)}45%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes tnmTempoBump{0%{transform:translateY(0)}45%{transform:translateY(-1px) scale(1.03)}100%{transform:translateY(0)}}
#mod-lesson .tnm-tempo-control small.tnm-tempo-standard{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
}
@media(max-width:700px){
  #mod-lesson .tnm-tempo-control small.tnm-tempo-standard{
    display:inline-flex!important;
    grid-column:1/-1!important;
    font-size:10px!important;
    line-height:1.15!important;
    margin-top:1px!important;
  }
}

/* V2-50 — subtle A/B/AB selection + fixed-size MusicXML view controls */
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active{
  background:#f0e8ff!important;
  border-color:#c6afea!important;
  color:#6540a9!important;
  box-shadow:0 0 0 1px rgba(117,67,199,.08)!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-a.is-set .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-b.is-set .tnm-transport-icon,
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-active .tnm-transport-icon{
  color:#7543c7!important;
}
/* A+B available is not the same as AB selected. Keep AB visually neutral until enabled. */
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-ready:not(.is-active){
  background:#fff!important;
  border-color:#dfe5ea!important;
  color:#26313b!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-refine-panel .tnm-transport > button.loop-ab-toggle.is-ready:not(.is-active) .tnm-icon-loop-ab{
  color:#56616c!important;
}

/* The view toolbar is a sibling of OSMD, so score zoom never scales these controls. */
#mod-lesson .tnm-practice-score .tnm-score-view-tools{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  z-index:120!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  width:auto!important;
  height:40px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  pointer-events:auto!important;
  will-change:transform!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools > b{
  box-sizing:border-box!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(72,82,94,.28)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.72)!important;
  color:#34404b!important;
  box-shadow:0 1px 5px rgba(20,31,45,.08)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  font:800 15px/1 Arial,sans-serif!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  white-space:normal!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > b.xml-zoom{
  cursor:default!important;
  font-size:10px!important;
  color:#596572!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button.xml-fit{
  font-size:9px!important;
  line-height:1.05!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button.xml-fit span{
  display:block!important;
  line-height:1.05!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button.xml-minus,
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button.xml-plus{
  font-size:21px!important;
  font-weight:700!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button.xml-fullscreen{
  font-size:19px!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button:hover,
#mod-lesson .tnm-practice-score .tnm-score-view-tools > button:focus-visible{
  background:rgba(244,239,255,.92)!important;
  border-color:#bfa9e3!important;
  color:#6540a9!important;
  outline:none!important;
}
/* These dimensions deliberately stay identical on phone/tablet/desktop and in fullscreen. */
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  top:8px!important;
  right:8px!important;
  height:40px!important;
  z-index:2147483001!important;
}

/* V2-51 — clean mobile score + bottom-right fullscreen + glass fullscreen UI */
#mod-lesson .tnm-practice-score .xml-fullscreen.tnm-score-fullscreen-bottom{
  position:absolute!important;
  right:10px!important;
  bottom:10px!important;
  top:auto!important;
  z-index:180!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(79,88,99,.24)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.70)!important;
  color:#34404b!important;
  box-shadow:0 2px 10px rgba(18,29,43,.10)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  backdrop-filter:blur(7px)!important;
  font:800 20px/1 Arial,sans-serif!important;
}

@media (max-width:700px){
  /* The score is deliberately smaller on phone: roughly half the desktop scale. */
  #mod-lesson .tnm-practice-score{
    max-height:72dvh!important;
    min-height:320px!important;
    padding:6px 4px 54px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #mod-lesson .tnm-practice-score .tnm-osmd{
    min-width:0!important;
    width:100%!important;
    overflow:visible!important;
  }
  /* Only Fit / - / zoom / + remain in the upper-right. Fullscreen is at the foot. */
  #mod-lesson .tnm-practice-score .tnm-score-view-tools{
    top:7px!important;
    right:7px!important;
    gap:3px!important;
    height:34px!important;
  }
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
    width:34px!important;min-width:34px!important;max-width:34px!important;
    height:34px!important;min-height:34px!important;max-height:34px!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.66)!important;
    border-color:rgba(80,90,102,.22)!important;
    box-shadow:0 1px 6px rgba(20,31,45,.06)!important;
  }
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-fit{font-size:8px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b.xml-zoom{font-size:9px!important}
  #mod-lesson .tnm-practice-score .xml-fullscreen.tnm-score-fullscreen-bottom{
    right:8px!important;bottom:8px!important;
    width:38px!important;min-width:38px!important;max-width:38px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    background:rgba(255,255,255,.72)!important;
  }

  /* Fullscreen means score-only viewport. Tool rows float over it as glass controls. */
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:54px 4px 58px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    overflow:auto!important;
    z-index:2147482000!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-osmd,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-osmd{
    width:100%!important;max-width:none!important;overflow:visible!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
    position:fixed!important;
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    right:56px!important;
    height:36px!important;
    transform:none!important;
    z-index:2147483005!important;
    background:transparent!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools>b,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools>b{
    width:36px!important;min-width:36px!important;max-width:36px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    background:rgba(255,255,255,.48)!important;
    border:1px solid rgba(55,65,76,.20)!important;
    box-shadow:0 2px 8px rgba(18,29,43,.07)!important;
    -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .xml-fullscreen.tnm-score-fullscreen-bottom,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .xml-fullscreen.tnm-score-fullscreen-bottom{
    position:fixed!important;
    right:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    transform:none!important;
    z-index:2147483010!important;
    background:rgba(255,255,255,.52)!important;
    border-color:rgba(55,65,76,.20)!important;
    -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
    position:fixed!important;
    display:flex!important;
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    left:8px!important;
    width:36px!important;height:36px!important;
    align-items:center!important;justify-content:center!important;
    border:1px solid rgba(55,65,76,.20)!important;border-radius:9px!important;
    background:rgba(255,255,255,.48)!important;color:#283440!important;
    box-shadow:0 2px 8px rgba(18,29,43,.07)!important;
    -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
    z-index:2147483010!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline{
    position:fixed!important;
    top:calc(50px + env(safe-area-inset-top,0px))!important;
    left:8px!important;right:8px!important;
    width:auto!important;height:38px!important;min-height:38px!important;
    margin:0!important;padding:2px!important;
    display:flex!important;flex-wrap:nowrap!important;gap:3px!important;align-items:center!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    background:rgba(255,255,255,.40)!important;
    border:1px solid rgba(55,65,76,.14)!important;
    border-radius:10px!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
    z-index:2147483000!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline button,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline button,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline select,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline select{
    background:rgba(255,255,255,.50)!important;
    border-color:rgba(55,65,76,.16)!important;
    box-shadow:none!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
    position:fixed!important;
    left:8px!important;right:56px!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    width:auto!important;height:42px!important;min-height:42px!important;
    margin:0!important;padding:2px 3px!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:3px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    background:rgba(255,255,255,.42)!important;
    border:1px solid rgba(55,65,76,.14)!important;
    border-radius:10px!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
    z-index:2147483000!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>button,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>button{
    flex:0 0 39px!important;width:39px!important;min-width:39px!important;
    height:36px!important;min-height:36px!important;
    padding:2px!important;border-radius:8px!important;
    background:rgba(255,255,255,.48)!important;
    border-color:rgba(55,65,76,.16)!important;
    box-shadow:none!important;font-size:7px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport .tnm-tempo-control,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport .tnm-tempo-control{
    flex:0 0 142px!important;width:142px!important;min-width:142px!important;
    margin:0!important;padding:1px 3px!important;
    background:rgba(255,255,255,.40)!important;border-radius:8px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden{
    padding-top:4px!important;padding-bottom:4px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-topline,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{
    display:none!important;
  }
}


/* V2-52 — gọn thanh icon, tempo ngắn hơn, cụm hiển thị bản nhạc dồn xuống góc phải dưới */
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:nowrap!important;
  padding:0!important;overflow:visible!important
}
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-hand-tabs{
  display:flex!important;align-items:center!important;gap:8px!important;flex:1 1 auto!important;min-width:0!important;flex-wrap:wrap!important
}
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-audio-tabs{
  display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important
}
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-hand-tabs button,
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-audio-tabs button{
  min-height:38px!important;border-radius:11px!important;font-weight:700!important
}
#mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-practice-score-tools{
  margin-left:auto!important;flex:0 0 auto!important;justify-content:flex-end!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{
  grid-column:auto!important;flex:0 0 min(430px,40vw)!important;width:min(430px,40vw)!important;max-width:100%!important;
  margin-left:auto!important;padding:2px 2px!important;grid-template-columns:auto minmax(110px,1fr) auto!important;gap:8px!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control .tempo{max-width:100%!important}
#mod-lesson .tnm-score-view-tools{
  position:absolute!important;right:12px!important;bottom:12px!important;top:auto!important;left:auto!important;z-index:9!important;
  display:flex!important;align-items:center!important;gap:8px!important;padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important
}
#mod-lesson .tnm-score-view-tools>button,
#mod-lesson .tnm-score-view-tools>b{
  width:42px!important;min-width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  border:1px solid rgba(190,198,210,.9)!important;background:rgba(255,255,255,.94)!important;border-radius:12px!important;
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;color:#24313f!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important
}
#mod-lesson .tnm-score-view-tools>b{font-size:14px!important;font-weight:800!important}
#mod-lesson .tnm-score-view-tools>button.xml-fit{font-size:8px!important;line-height:1.1!important}
#mod-lesson .tnm-score-view-tools>button.xml-fit span{display:block!important}
#mod-lesson .tnm-score-view-tools>.xml-fullscreen{order:5!important}
#mod-lesson .tnm-fs-menu-toggle{
  position:absolute!important;right:12px!important;bottom:62px!important;top:auto!important;left:auto!important;z-index:10!important;
  width:42px!important;min-width:42px!important;height:42px!important;border-radius:12px!important;
  border:1px solid rgba(190,198,210,.9)!important;background:rgba(255,255,255,.94)!important;box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
  backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{bottom:14px!important;right:14px!important}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{display:grid!important;place-items:center!important}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{display:none!important}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-topline,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-topline,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;background:rgba(255,255,255,.70)!important;border:1px solid rgba(255,255,255,.75)!important
}
@media (max-width: 700px){
  #mod-lesson .tnm-practice-topline.tnm-icon-toolbar{gap:6px!important;flex-wrap:wrap!important}
  #mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-hand-tabs{gap:6px!important}
  #mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-hand-tabs button,
  #mod-lesson .tnm-practice-topline.tnm-icon-toolbar .tnm-audio-tabs button{min-height:34px!important;font-size:12px!important;padding:8px 10px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{width:100%!important;flex:1 1 100%!important;grid-column:1/-1!important}
  #mod-lesson .tnm-score-view-tools{right:10px!important;bottom:10px!important;gap:6px!important}
  #mod-lesson .tnm-score-view-tools>button,
  #mod-lesson .tnm-score-view-tools>b,
  #mod-lesson .tnm-fs-menu-toggle{width:40px!important;min-width:40px!important;height:40px!important;border-radius:11px!important}
  #mod-lesson .tnm-fs-menu-toggle{bottom:58px!important}
}


/* V2-53 — một thanh điều khiển duy nhất + cụm view ở đáy phải + fullscreen touch không thoát bằng vuốt */
html.tnm-score-lock-page,html.tnm-score-lock-page body{overflow:hidden!important;overscroll-behavior:none!important;height:100%!important}
#mod-lesson .tnm-practice-topline.tnm-empty-topline{display:none!important}
#mod-lesson .tnm-transport.tnm-transport-top{
  display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important;
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;padding:6px!important;white-space:nowrap!important
}
#mod-lesson .tnm-transport.tnm-transport-top::-webkit-scrollbar{display:none!important}
#mod-lesson .tnm-mode-icon-strip{display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs,
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button,
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button{
  min-height:32px!important;height:32px!important;padding:4px 8px!important;border-radius:8px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool{
  display:flex!important;align-items:center!important;gap:3px!important;min-height:32px!important;height:32px!important;padding:0 4px!important;font-size:10px!important;white-space:nowrap!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool select{height:30px!important;min-height:30px!important;padding:2px 22px 2px 6px!important;font-size:11px!important}
#mod-lesson .tnm-transport.tnm-transport-top>button{
  flex:0 0 46px!important;width:46px!important;min-width:46px!important;height:34px!important;min-height:34px!important;padding:3px!important;border-radius:8px!important;font-size:9px!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-tools{flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{
  flex:0 0 300px!important;width:300px!important;min-width:250px!important;max-width:300px!important;grid-column:auto!important;
  margin:0 0 0 3px!important;padding:0 2px!important;display:grid!important;grid-template-columns:auto minmax(105px,1fr) auto!important;gap:6px!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-head strong{font-size:10px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control .bpm{font-size:12px!important;min-width:54px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control small{display:block!important;grid-column:1/-1!important;font-size:9px!important;margin-top:0!important}

/* View buttons are translucent and are pinned by JS to the visible bottom-right of the score. */
#mod-lesson .tnm-practice-score .tnm-score-view-tools{
  position:absolute!important;right:auto!important;bottom:auto!important;display:flex!important;align-items:center!important;gap:5px!important;
  padding:4px!important;border-radius:12px!important;background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 4px 14px rgba(15,23,42,.07)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;z-index:30!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  width:36px!important;min-width:36px!important;height:36px!important;border-radius:9px!important;
  background:rgba(255,255,255,.38)!important;border:1px solid rgba(61,72,86,.18)!important;color:#24313f!important;
  box-shadow:none!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button:active{background:rgba(124,92,220,.18)!important;border-color:rgba(124,92,220,.38)!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-fit{font-size:7px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{font-size:11px!important}

/* Outside fullscreen the fold button is not needed; fullscreen alone shows it. */
#mod-lesson .tnm-fs-menu-toggle{display:none!important}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
  display:grid!important;place-items:center!important;position:fixed!important;top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;
  width:38px!important;height:38px!important;border-radius:10px!important;background:rgba(255,255,255,.38)!important;border:1px solid rgba(61,72,86,.18)!important;
  backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;z-index:2147483646!important
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
  position:fixed!important;top:54px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;
  background:rgba(255,255,255,.48)!important;border:1px solid rgba(255,255,255,.38)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
  z-index:2147483500!important
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{display:none!important}
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:0!important;
  z-index:2147483000!important;background:#fff!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
}
@media(max-width:700px){
  #mod-lesson .tnm-transport.tnm-transport-top{gap:4px!important;padding:5px!important}
  #mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button,
  #mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button{font-size:10px!important;padding:4px 7px!important;height:30px!important;min-height:30px!important}
  #mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool{height:30px!important;min-height:30px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{flex:0 0 235px!important;width:235px!important;min-width:235px!important;max-width:235px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control small{display:none!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{width:34px!important;min-width:34px!important;height:34px!important}
}


/* V2-54 — cố định thứ tự icon, thu gọn 5 icon học, cụm view luôn ở góc phải dưới */
#mod-lesson .tnm-transport.tnm-transport-top{
  display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important;
  overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:none!important;padding:5px 6px!important
}
#mod-lesson .tnm-transport.tnm-transport-top::-webkit-scrollbar{display:none!important}
#mod-lesson .tnm-transport.tnm-transport-top>button{
  order:0!important;flex:0 0 43px!important;width:43px!important;min-width:43px!important;height:34px!important;min-height:34px!important;
  padding:3px!important;border-radius:8px!important;font-size:8.5px!important;line-height:1.05!important
}
#mod-lesson .tnm-transport.tnm-transport-top .restart{order:1!important}
#mod-lesson .tnm-transport.tnm-transport-top .play{order:2!important}
#mod-lesson .tnm-transport.tnm-transport-top .prev{order:3!important}
#mod-lesson .tnm-transport.tnm-transport-top .next{order:4!important}
#mod-lesson .tnm-transport.tnm-transport-top .loop-a{order:5!important}
#mod-lesson .tnm-transport.tnm-transport-top .loop-b{order:6!important}
#mod-lesson .tnm-transport.tnm-transport-top .loop-ab-toggle{order:7!important;flex-basis:46px!important;width:46px!important;min-width:46px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-tools{order:8!important;display:flex!important;align-items:center!important;gap:2px!important;flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-toggle,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-monkey-toggle,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-piano-toggle{
  width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:3px!important;border-radius:8px!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-icon-strip{
  order:9!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;min-width:max-content!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool{
  order:1!important;display:flex!important;align-items:center!important;gap:2px!important;height:30px!important;min-height:30px!important;
  padding:0 3px!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool select{
  width:58px!important;min-width:58px!important;height:29px!important;min-height:29px!important;padding:2px 18px 2px 5px!important;font-size:10px!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs{order:2!important;display:flex!important;align-items:center!important;gap:3px!important;flex-wrap:nowrap!important}
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs{order:3!important;display:flex!important;align-items:center!important;gap:3px!important;flex-wrap:nowrap!important}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button,
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button{
  height:30px!important;min-height:30px!important;padding:3px 6px!important;border-radius:8px!important;font-size:9px!important;line-height:1!important;
  font-weight:700!important;letter-spacing:-.1px!important;white-space:nowrap!important;min-width:auto!important
}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button[data-mode="both"]{min-width:58px!important}
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button[data-mode="right"],
#mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button[data-mode="left"]{min-width:62px!important}
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button[data-audio="beat"]{min-width:48px!important}
#mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button[data-audio="demo"]{min-width:92px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{
  order:10!important;flex:0 0 255px!important;width:255px!important;min-width:220px!important;max-width:255px!important;
  margin:0 0 0 3px!important;padding:0 2px!important;grid-template-columns:auto minmax(90px,1fr) auto!important;gap:5px!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control .bpm{font-size:11px!important;min-width:50px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control small{font-size:8.5px!important}

/* View controls: luôn trong suốt và luôn ở góc phải dưới của khung MusicXML. */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;right:auto!important;bottom:auto!important;top:auto;display:flex!important;align-items:center!important;gap:4px!important;
  padding:4px!important;border-radius:11px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(80,90,105,.14)!important;
  box-shadow:0 3px 12px rgba(15,23,42,.05)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
  z-index:2147483505!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  width:34px!important;min-width:34px!important;height:34px!important;border-radius:8px!important;background:rgba(255,255,255,.28)!important;
  border:1px solid rgba(61,72,86,.15)!important;color:#263442!important;box-shadow:none!important;backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-fit{font-size:7px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{font-size:10px!important}

/* Khi ẩn icon ở fullscreen: chỉ ẩn thanh điều khiển chính; cụm Vừa trang/Zoom/Thoát fullscreen luôn còn để thoát bằng nút. */
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{display:flex!important}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{display:none!important}

/* Fullscreen cảm ứng là pseudo fullscreen: vuốt chỉ cuộn bản nhạc, không dùng gesture để thoát. */
html.tnm-score-lock-page,html.tnm-score-lock-page body{
  overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important;height:100%!important
}
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
  overflow:auto!important;overscroll-behavior:contain!important;touch-action:pan-x pan-y!important;-webkit-overflow-scrolling:touch!important
}

@media(max-width:700px){
  #mod-lesson .tnm-transport.tnm-transport-top{gap:3px!important;padding:4px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>button{flex-basis:40px!important;width:40px!important;min-width:40px!important;height:32px!important;min-height:32px!important;font-size:8px!important}
  #mod-lesson .tnm-mode-icon-strip .tnm-hand-tabs button,
  #mod-lesson .tnm-mode-icon-strip .tnm-audio-tabs button{height:28px!important;min-height:28px!important;font-size:8.5px!important;padding:3px 5px!important}
  #mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool{height:28px!important;min-height:28px!important;font-size:8.5px!important}
  #mod-lesson .tnm-mode-icon-strip .tnm-transpose-tool select{height:27px!important;min-height:27px!important;width:54px!important;min-width:54px!important;font-size:9px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-tempo-control{flex-basis:220px!important;width:220px!important;min-width:220px!important;max-width:220px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{width:32px!important;min-width:32px!important;height:32px!important}
}


/* V2-55 — một thanh công cụ duy nhất theo đúng thứ tự người dùng chốt */
#mod-lesson .tnm-practice-topline.tnm-empty-topline{display:none!important}
#mod-lesson .tnm-transport.tnm-transport-top{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;
  gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:thin!important;
  padding:6px!important;min-height:46px!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.restart{order:1!important}
#mod-lesson .tnm-transport.tnm-transport-top>.play{order:2!important}
#mod-lesson .tnm-transport.tnm-transport-top>.prev{order:3!important}
#mod-lesson .tnm-transport.tnm-transport-top>.next{order:4!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-a{order:5!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-b{order:6!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-ab-toggle{order:7!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools{order:8!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{
  order:9!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;
  height:32px!important;min-height:32px!important;padding:0 4px!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool select{
  width:58px!important;min-width:58px!important;height:30px!important;min-height:30px!important;padding:2px 18px 2px 5px!important;font-size:10px!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs{
  order:10!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;flex-wrap:nowrap!important;overflow:visible!important;padding:0!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs{
  order:11!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;flex-wrap:nowrap!important;padding:0!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{
  height:32px!important;min-height:32px!important;padding:3px 6px!important;border-radius:8px!important;font-size:9px!important;line-height:1!important;
  font-weight:700!important;letter-spacing:-.15px!important;white-space:nowrap!important;min-width:auto!important;flex:0 0 auto!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode="both"]{min-width:58px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode="right"],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode="left"]{min-width:60px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio="beat"]{min-width:45px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio="demo"]{min-width:86px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{
  order:12!important;flex:0 0 245px!important;width:245px!important;min-width:215px!important;max-width:245px!important;
  margin:0 0 0 3px!important;padding:0 2px!important;grid-template-columns:auto minmax(82px,1fr) auto!important;gap:5px!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control small{font-size:8px!important}

/* V2-55 — Vừa trang / Zoom / Fullscreen luôn ở góc phải DƯỚI của khung MusicXML. */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;right:auto!important;bottom:auto!important;display:flex!important;align-items:center!important;gap:4px!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(70,80,95,.12)!important;border-radius:11px!important;
  padding:4px!important;box-shadow:0 3px 10px rgba(15,23,42,.04)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
  z-index:2147483505!important;pointer-events:auto!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  background:rgba(255,255,255,.24)!important;border:1px solid rgba(55,65,76,.14)!important;color:#273442!important;box-shadow:none!important;
  backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important;pointer-events:auto!important
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{display:flex!important}

@media(max-width:700px){
  #mod-lesson .tnm-transport.tnm-transport-top{gap:3px!important;padding:4px!important;min-height:42px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{height:29px!important;min-height:29px!important;font-size:8.5px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool select{height:28px!important;min-height:28px!important;width:54px!important;min-width:54px!important;font-size:9px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{height:29px!important;min-height:29px!important;font-size:8.25px!important;padding:3px 5px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{flex-basis:215px!important;width:215px!important;min-width:205px!important;max-width:215px!important}
}


/* V2-56 final toolbar layout */
#mod-lesson .tnm-empty-topline{display:none!important;height:0!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important}
#mod-lesson .tnm-transport.tnm-transport-top{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  gap:5px!important;padding:8px 10px!important;background:linear-gradient(90deg,#141c26 0%,#1e2936 100%)!important;border-radius:12px!important;scrollbar-width:none!important
}
#mod-lesson .tnm-transport.tnm-transport-top::-webkit-scrollbar{display:none!important}
#mod-lesson .tnm-transport.tnm-transport-top>button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools{flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top>.restart{order:1!important}
#mod-lesson .tnm-transport.tnm-transport-top>.play{order:2!important}
#mod-lesson .tnm-transport.tnm-transport-top>.prev{order:3!important}
#mod-lesson .tnm-transport.tnm-transport-top>.next{order:4!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-a{order:5!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-b{order:6!important}
#mod-lesson .tnm-transport.tnm-transport-top>.loop-ab-toggle{order:7!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools{order:8!important;display:flex!important;align-items:center!important;gap:3px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{order:11!important;display:flex!important;align-items:center!important;gap:8px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;padding:0 8px!important;height:36px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool select{height:30px!important;min-height:30px!important;width:64px!important;min-width:64px!important;border-radius:8px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs{order:12!important;display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs{order:16!important;display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{
  height:34px!important;min-height:34px!important;border-radius:10px!important;padding:5px 9px!important;font-size:11px!important;font-weight:700!important;white-space:nowrap!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='both']{min-width:72px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='right'],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='left']{min-width:70px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='beat']{min-width:54px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='demo']{min-width:110px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{order:17!important;display:grid!important;grid-template-columns:auto minmax(140px,200px) auto!important;align-items:center!important;gap:8px!important;min-width:310px!important;max-width:310px!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0 2px!important;color:#fff!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control small{display:block!important;grid-column:1/-1!important;font-size:10px!important;color:rgba(255,255,255,.72)!important;margin-top:0!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control .bpm{color:#fff!important;min-width:72px!important;font-size:12px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control .tnm-tempo-head strong{color:#fff!important;font-size:12px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-metronome-toggle,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-monkey-toggle,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-piano-toggle{width:36px!important;min-width:36px!important;height:36px!important;border-radius:10px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;top:auto!important;transform:none!important;
  display:flex!important;align-items:center!important;gap:8px!important;z-index:12!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{width:40px!important;min-width:40px!important;height:40px!important;border-radius:12px!important;background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.68)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;box-shadow:0 8px 20px rgba(15,23,42,.12)!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-fit{font-size:8px!important;line-height:1.05!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b.xml-zoom{font-size:12px!important;font-weight:800!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-plus{margin-right:6px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button.xml-fullscreen{margin-left:2px!important}
#mod-lesson .tnm-fs-menu-toggle{position:absolute!important;right:12px!important;bottom:62px!important;left:auto!important;top:auto!important;transform:none!important}
@media (max-width: 900px){
  #mod-lesson .tnm-transport.tnm-transport-top{padding:6px 8px!important;gap:4px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>button{flex-basis:42px!important;width:42px!important;min-width:42px!important;height:34px!important;min-height:34px!important;font-size:9px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{height:32px!important;padding:0 6px!important;font-size:10px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool select{height:27px!important;min-height:27px!important;width:58px!important;min-width:58px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{height:31px!important;min-height:31px!important;font-size:10px!important;padding:4px 7px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{min-width:260px!important;max-width:260px!important;grid-template-columns:auto minmax(110px,1fr) auto!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{width:38px!important;min-width:38px!important;height:38px!important}
}


/* V2-57 — 5 nút chế độ: icon trên, chữ nhỏ dưới; cụm zoom/fullscreen tách ô rõ ràng */
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:1px!important;height:40px!important;min-height:40px!important;padding:3px 7px!important;line-height:1!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-symbol{
  display:block!important;font-size:15px!important;line-height:15px!important;height:15px!important;margin:0!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-label{
  display:block!important;font-size:8.5px!important;line-height:10px!important;font-weight:700!important;white-space:nowrap!important;margin:0!important
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='both'],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='right'],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='left']{min-width:60px!important;width:60px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='beat']{min-width:48px!important;width:48px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='demo']{min-width:76px!important;width:76px!important}

#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;top:auto!important;transform:none!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;width:auto!important;height:auto!important;
  padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>*{
  position:static!important;inset:auto!important;transform:none!important;float:none!important;flex:0 0 40px!important;
  width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;display:grid!important;place-items:center!important;
  border-radius:12px!important;background:rgba(255,255,255,.52)!important;border:1px solid rgba(176,185,197,.68)!important;
  color:#263441!important;box-shadow:0 6px 16px rgba(15,23,42,.10)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fit{order:1!important;font-size:7px!important;line-height:1.05!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-minus{order:2!important;font-size:20px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-zoom{order:3!important;font-size:11px!important;font-weight:800!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-plus{order:4!important;font-size:20px!important;margin-right:7px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fullscreen{order:5!important;margin-left:7px!important;font-size:18px!important}
@media (max-width:700px){
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{height:38px!important;min-height:38px!important;padding:2px 5px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-symbol{font-size:14px!important;line-height:14px!important;height:14px!important}
  #mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-label{font-size:8px!important;line-height:9px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='both'],
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='right'],
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='left']{min-width:56px!important;width:56px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='beat']{min-width:46px!important;width:46px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='demo']{min-width:70px!important;width:70px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>*{flex-basis:36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-plus{margin-right:5px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fullscreen{margin-left:5px!important}
}


/* V2-58 — khóa thứ tự toolbar và zoom/view controls */
#mod-lesson .tnm-practice-topline.tnm-empty-topline{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}
#mod-lesson .tnm-transport.tnm-transport-top{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;
  overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;gap:5px!important;padding:7px 9px!important;
  scrollbar-width:none!important
}
#mod-lesson .tnm-transport.tnm-transport-top::-webkit-scrollbar{display:none!important}
#mod-lesson .tnm-transport.tnm-transport-top>[data-tnm-toolbar-order]{flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools{display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important;flex:0 0 auto!important;overflow:visible!important;padding:0!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:1px!important;height:38px!important;min-height:38px!important;padding:2px 6px!important;border-radius:9px!important;line-height:1!important
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-symbol{display:block!important;font-size:14px!important;line-height:14px!important;height:14px!important;margin:0!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-label{display:block!important;font-size:8px!important;line-height:9px!important;font-weight:700!important;white-space:nowrap!important;margin:0!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='both'],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='right'],
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button[data-mode='left']{width:56px!important;min-width:56px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='beat']{width:46px!important;min-width:46px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button[data-audio='demo']{width:72px!important;min-width:72px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{flex:0 0 270px!important;width:270px!important;min-width:270px!important;max-width:270px!important;margin:0!important;padding:0 2px!important;grid-template-columns:auto minmax(110px,1fr) auto!important;gap:6px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control small{font-size:8px!important}

/* Luôn ghim đúng góc phải dưới của khung MusicXML. */
#mod-lesson .tnm-practice-score{position:relative!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;top:auto!important;transform:none!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;width:auto!important;height:auto!important;
  padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;z-index:2147483505!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>*{
  position:static!important;inset:auto!important;transform:none!important;float:none!important;flex:0 0 38px!important;
  width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;display:grid!important;place-items:center!important;border-radius:11px!important;
  background:rgba(255,255,255,.48)!important;border:1px solid rgba(168,178,192,.58)!important;color:#263441!important;
  box-shadow:0 6px 16px rgba(15,23,42,.09)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fit{order:1!important;font-size:7px!important;line-height:1.05!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-minus{order:2!important;font-size:20px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-zoom{order:3!important;font-size:10px!important;font-weight:800!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-plus{order:4!important;font-size:20px!important;margin-right:4px!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fullscreen{order:5!important;font-size:18px!important;margin-left:4px!important}
@media(max-width:700px){
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{flex-basis:225px!important;width:225px!important;min-width:225px!important;max-width:225px!important}
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>*{flex-basis:34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;min-height:34px!important;max-height:34px!important}
}


/* V2-59 — thanh công cụ xanh nhẹ, icon cân hàng, fullscreen trên toolbar */
#mod-lesson .tnm-transport.tnm-transport-top{
  background:linear-gradient(90deg,#eaf4ff 0%,#f2f8ff 55%,#e8f3ff 100%)!important;
  border:1px solid #cfe3f7!important;
  box-shadow:0 2px 8px rgba(67,123,170,.08)!important;
  min-height:48px!important;
  padding:6px 8px!important;
  gap:5px!important;
}
#mod-lesson .tnm-transport.tnm-transport-top>button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-metronome-toggle,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-monkey-toggle,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-piano-toggle{
  height:38px!important;
  min-height:38px!important;
  border-radius:9px!important;
  border:1px solid #cbd8e6!important;
  background:#fff!important;
  color:#26384a!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-transport.tnm-transport-top>button{width:auto!important;min-width:44px!important;flex-basis:auto!important;padding:3px 7px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button{
  width:auto!important;min-width:0!important;padding:3px 8px!important;
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-label,
#mod-lesson .tnm-transport.tnm-transport-top>button>span:last-child{
  letter-spacing:.28px!important;
  line-height:1.15!important;
}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-label{font-size:8.5px!important}
#mod-lesson .tnm-transport.tnm-transport-top .tnm-mode-symbol{font-size:14px!important;margin-bottom:2px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool{
  order:11!important;
  color:#26384a!important;
  background:#fff!important;
  padding:0 7px!important;
  gap:5px!important;
  white-space:nowrap!important;
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool select{height:30px!important;min-height:30px!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{
  order:12!important;
  min-width:260px!important;
  max-width:300px!important;
  flex:0 1 300px!important;
  color:#26384a!important;
  background:transparent!important;
}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control .tnm-tempo-head strong,
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control .bpm{color:#26384a!important}
#mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control small{color:#71849a!important}
#mod-lesson .tnm-transport.tnm-transport-top>.xml-fullscreen.tnm-toolbar-fullscreen{
  order:13!important;
  margin-left:auto!important;
  position:sticky!important;
  right:4px!important;
  z-index:25!important;
  width:42px!important;
  min-width:42px!important;
  height:38px!important;
  font-size:19px!important;
  background:#fff!important;
  color:#365b7b!important;
  border:1px solid #b9d2e8!important;
  box-shadow:-8px 0 14px rgba(234,244,255,.95)!important;
}
#mod-lesson .tnm-transport.tnm-transport-top>.xml-fullscreen.tnm-toolbar-fullscreen.is-exit{color:#7c3aed!important;border-color:#bca7ed!important}

/* V2-59: cụm nổi chỉ còn Vừa trang | - | % | + và luôn nằm góc phải dưới của khung nhạc */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:sticky!important;
  float:right!important;
  right:10px!important;
  bottom:10px!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:max-content!important;
  margin-top:-52px!important;
  margin-right:10px!important;
  margin-bottom:10px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  z-index:18!important;
  pointer-events:auto!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-fullscreen{display:none!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>*{
  background:rgba(255,255,255,.50)!important;
  border:1px solid rgba(190,210,226,.75)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  box-shadow:0 4px 12px rgba(29,58,82,.10)!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-plus{margin-right:0!important}

/* Khi fullscreen ẩn/hiện: thanh toolbar bị ẩn nhưng nút mở lại vẫn còn. */
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{display:none!important}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-score-view-tools{display:flex!important}

@media (max-width:900px){
  #mod-lesson .tnm-transport.tnm-transport-top{min-height:44px!important;padding:4px 6px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-transpose-tool,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-hand-tabs button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-audio-tabs button,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-metronome-toggle,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-monkey-toggle,
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-metronome-tools .tnm-piano-toggle{height:34px!important;min-height:34px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.tnm-tempo-control{min-width:220px!important;max-width:240px!important;flex-basis:240px!important}
  #mod-lesson .tnm-transport.tnm-transport-top>.xml-fullscreen.tnm-toolbar-fullscreen{height:34px!important;min-height:34px!important;width:38px!important;min-width:38px!important}
}


/* V2-60: cố định cụm zoom ở góc phải dưới, giữ nút ẩn/hiện toolbar ở góc phải trên,
   và canh bản nhạc cân giữa khung hiển thị. */
#mod-lesson .tnm-practice-score,
#mod-lesson .tnm-practice-score:fullscreen,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
  position:relative!important;
}
#mod-lesson .tnm-practice-score .tnm-osmd,
#mod-lesson .tnm-practice-score:fullscreen .tnm-osmd,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-osmd{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  display:block!important;
  overflow:visible!important;
}
#mod-lesson .tnm-practice-score .tnm-osmd svg,
#mod-lesson .tnm-practice-score .tnm-osmd canvas{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;
  right:14px!important;
  bottom:14px!important;
  left:auto!important;
  top:auto!important;
  float:none!important;
  width:max-content!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  z-index:24!important;
  pointer-events:auto!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  border-radius:12px!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>.xml-plus{margin-right:0!important}
#mod-lesson .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  z-index:26!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport{
  display:flex!important;
}
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{
  display:none!important;
}
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fs-menu-toggle{
  display:flex!important;
}
@media (max-width: 900px){
  #mod-lesson .tnm-practice-score .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
    right:10px!important;
    bottom:10px!important;
    gap:5px!important;
  }
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:11px!important;
  }
}


/* V2-61: cụm zoom trong suốt nhỏ gọn, cố định khi cuộn; toolbar fullscreen hiển thị rõ. */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  top:auto!important;
  margin:0!important;
  padding:4px!important;
  gap:4px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(86,104,138,.14)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  opacity:.34!important;
  transition:opacity .18s ease, background-color .18s ease, border-color .18s ease!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools:hover,
#mod-lesson .tnm-practice-score .tnm-score-view-tools:focus-within,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools:hover,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools:focus-within,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools:hover,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools:focus-within{
  opacity:.96!important;
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(86,104,138,.22)!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-size:11px!important;
  line-height:1.05!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>button{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(86,104,138,.16)!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(86,104,138,.12)!important;
  font-weight:700!important;
  color:#475569!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools .xml-fit span{font-size:9px!important;line-height:1.0!important;letter-spacing:.01em!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools .xml-minus,
#mod-lesson .tnm-practice-score .tnm-score-view-tools .xml-plus{font-size:18px!important;font-weight:700!important}
#mod-lesson .tnm-practice-score .tnm-score-view-tools .xml-zoom{font-size:10px!important}
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
  position:fixed!important;
  left:18px!important;
  right:72px!important;
  top:14px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(86,104,138,.14)!important;
  box-shadow:none!important;
  backdrop-filter:blur(3px)!important;
  z-index:23!important;
}
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport>*{visibility:visible!important;opacity:1!important}
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport>button,
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-metronome-tools,
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-hand-tabs,
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-audio-tabs,
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-transpose-tool,
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-tempo-control{
  visibility:visible!important;
  opacity:1!important;
}
#mod-lesson .tnm-practice-score .tnm-fullscreen-transport .tnm-tempo-control{min-width:220px!important;flex:0 0 260px!important}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{
  display:none!important;
}
@media (max-width: 900px){
  #mod-lesson .tnm-practice-score .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
    padding:3px!important;
    gap:3px!important;
  }
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>button,
  #mod-lesson .tnm-practice-score .tnm-score-view-tools>b{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
    font-size:10px!important;
  }
  #mod-lesson .tnm-practice-score .tnm-score-view-tools .xml-fit span{font-size:8px!important}
  #mod-lesson .tnm-practice-score .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
    left:10px!important;
    right:56px!important;
    top:10px!important;
    gap:6px!important;
    padding:8px 10px!important;
  }
}


/* V2-62 — fixed zoom cluster and guaranteed fullscreen toolbar visibility */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  z-index:2147483005!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:fixed!important;
  left:14px!important;
  right:64px!important;
  top:12px!important;
  z-index:2147483000!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  background:rgba(236,247,255,.88)!important;
  border:1px solid rgba(126,170,205,.38)!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>*,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>*{
  visibility:visible!important;
  opacity:1!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>button,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>button,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>.tnm-hand-tabs,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>.tnm-hand-tabs,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>.tnm-audio-tabs,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>.tnm-audio-tabs,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>.tnm-metronome-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>.tnm-metronome-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>.tnm-transpose-tool,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>.tnm-transpose-tool{
  display:flex!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fullscreen-transport>.tnm-tempo-control,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fullscreen-transport>.tnm-tempo-control{
  display:grid!important;
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fullscreen-transport{
  display:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
  display:flex!important;
  z-index:2147483010!important;
}


/* V2-63 — definitive layout: zoom cluster in MusicXML viewport + responsive fullscreen toolbar */
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:absolute!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  z-index:2147483005!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell{
  display:block!important;
  position:fixed!important;
  left:14px!important;
  right:64px!important;
  top:12px!important;
  z-index:2147483000!important;
  pointer-events:auto!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:46px!important;
  margin:0!important;
  padding:6px 8px!important;
  gap:5px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:rgba(236,247,255,.90)!important;
  border:1px solid rgba(126,170,205,.38)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  z-index:2147483000!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>*{
  visibility:visible!important;
  opacity:1!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-hand-tabs,
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-audio-tabs,
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-metronome-tools{
  display:contents!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
  display:grid!important;
  flex:1 1 260px!important;
  min-width:220px!important;
  max-width:330px!important;
}
#mod-lesson .tnm-practice-score.tnm-fs-controls-hidden>.tnm-fullscreen-toolbar-shell{
  display:none!important;
}
@media(max-width:1180px){
  #mod-lesson .tnm-fullscreen-toolbar-shell{left:8px!important;right:52px!important;top:8px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    padding:5px 6px!important;gap:4px!important;justify-content:center!important
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    flex:1 1 220px!important;min-width:190px!important;max-width:280px!important
  }
}
@media(max-width:700px){
  #mod-lesson .tnm-fullscreen-toolbar-shell{left:6px!important;right:46px!important;top:6px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    padding:4px!important;gap:3px!important;row-gap:4px!important
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs button{
    min-width:38px!important;height:32px!important;min-height:32px!important;padding:2px 5px!important;font-size:8px!important
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    flex:1 1 100%!important;min-width:0!important;max-width:none!important
  }
}


/* V2-64 — PC/Laptop/iPad/iPhone cùng layout fullscreen; zoom luôn góc phải dưới MusicXML */
#mod-lesson .tnm-practice-score:fullscreen,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  background:#fff!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  z-index:2147482000!important;
}
#mod-lesson .tnm-practice-score .tnm-score-view-tools,
#mod-lesson .tnm-practice-score:fullscreen .tnm-score-view-tools,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-score-view-tools{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  z-index:2147483005!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell{
  position:fixed!important;
  z-index:2147483000!important;
  pointer-events:auto!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  overflow:visible!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-metronome-tools,
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-hand-tabs,
#mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-audio-tabs{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  flex:0 0 auto!important;
}
#mod-lesson .tnm-practice-score.tnm-fs-controls-hidden>.tnm-fullscreen-toolbar-shell,
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden>.tnm-fullscreen-toolbar-shell{
  display:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
  display:flex!important;
  position:fixed!important;
  z-index:2147483010!important;
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-controls-hidden .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-controls-hidden .tnm-fs-menu-toggle{
  display:flex!important;
}
@media(max-width:1180px){
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    min-height:70px!important;
    row-gap:4px!important;
  }
}
@media(max-width:700px){
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    min-height:92px!important;
    row-gap:4px!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    flex:1 1 100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs button{
    height:30px!important;
    min-height:30px!important;
    font-size:8px!important;
    padding:2px 4px!important;
  }
}


/* V2-65 — chỉ sửa iPad/iPhone/điện thoại; PC/Laptop giữ nguyên V2-64 */
@media (max-width:900px){
  /* Toolbar thường: 18 mục = 2 hàng x 10 cột, Tempo chiếm 3 cột. */
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:34px!important;
    align-items:stretch!important;
    gap:3px!important;
    row-gap:3px!important;
    overflow:visible!important;
    padding:4px!important;
    min-height:71px!important;
    height:auto!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mobile-display-contents{display:contents!important}
  #mod-lesson .tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button{
    padding:2px 3px!important;
    border-radius:8px!important;
    font-size:7.5px!important;
    line-height:1.05!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mode-symbol,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-transport-icon{font-size:11px!important;margin:0!important}
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mode-label,
  #mod-lesson .tnm-mobile-toolbar-grid>button>span:last-child{font-size:7px!important;line-height:1!important;letter-spacing:.01em!important;white-space:nowrap!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:0!important;
    padding:1px 2px!important;
    font-size:7px!important;
    white-space:nowrap!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool select{
    width:100%!important;
    min-width:0!important;
    height:18px!important;
    min-height:18px!important;
    padding:0 2px!important;
    font-size:8px!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control{
    grid-column:span 3!important;
    display:grid!important;
    grid-template-columns:auto minmax(42px,1fr) auto!important;
    gap:3px!important;
    padding:1px 3px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control .tnm-tempo-head strong{font-size:7px!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control .bpm{font-size:8px!important;min-width:36px!important;white-space:nowrap!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control small{display:none!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control .tempo{min-width:0!important;width:100%!important}
  /* Fullscreen chỉ có một nút: nội dung thật ⛶/✕, bỏ pseudo-icon cũ gây nhân đôi. */
  #mod-lesson .tnm-toolbar-fullscreen::before{content:none!important;display:none!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.xml-fullscreen.tnm-toolbar-fullscreen{
    display:inline-flex!important;
    font-size:16px!important;
    line-height:1!important;
    width:auto!important;
    min-width:0!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    box-shadow:none!important;
  }
  /* Fullscreen mobile/tablet: toolbar 2 hàng sát nhau, đủ icon. */
  #mod-lesson .tnm-fullscreen-toolbar-shell{
    left:4px!important;
    right:44px!important;
    top:4px!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:34px!important;
    gap:3px!important;
    row-gap:3px!important;
    min-height:71px!important;
    height:auto!important;
    padding:4px!important;
    overflow:visible!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-metronome-tools,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-hand-tabs,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-audio-tabs{
    display:contents!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool{
    min-width:0!important;width:auto!important;max-width:none!important;height:34px!important;min-height:34px!important;margin:0!important;padding:2px 3px!important;font-size:7.5px!important;box-sizing:border-box!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool{
    display:flex!important;flex-direction:column!important;justify-content:center!important;gap:0!important;font-size:7px!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool select{width:100%!important;min-width:0!important;height:18px!important;min-height:18px!important;font-size:8px!important;padding:0 2px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    grid-column:span 3!important;
    display:grid!important;
    grid-template-columns:auto minmax(42px,1fr) auto!important;
    gap:3px!important;
    min-width:0!important;max-width:none!important;width:auto!important;height:34px!important;min-height:34px!important;padding:1px 3px!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control small{display:none!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control .tnm-tempo-head strong{font-size:7px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control .bpm{font-size:8px!important;min-width:36px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.xml-fullscreen.tnm-toolbar-fullscreen{
    font-size:16px!important;line-height:1!important;width:auto!important;min-width:0!important;height:34px!important;margin:0!important;padding:0!important;position:static!important;box-shadow:none!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.xml-fullscreen.tnm-toolbar-fullscreen::before{content:none!important;display:none!important}
  /* Score lấp đầy viewport; toolbar chừa đúng 2 hàng. */
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding-top:78px!important;border-radius:0!important;
  }
}
@media (max-width:430px){
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    grid-auto-rows:31px!important;
    gap:2px!important;
    row-gap:2px!important;
    min-height:64px!important;
    padding:3px!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    height:31px!important;min-height:31px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{padding-top:70px!important}
}


/* V2-66 — trạng thái icon bám đúng chức năng: tắt = trung tính, bật = sáng/phủ màu. */
#mod-lesson .tnm-transport.tnm-transport-top > button,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-tools > button,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-metronome-tools > label,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-hand-tabs > button,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-audio-tabs > button,
#mod-lesson .tnm-transport.tnm-transport-top .tnm-transpose-tool,
#mod-lesson .tnm-fullscreen-transport > button,
#mod-lesson .tnm-fullscreen-transport .tnm-metronome-tools > button,
#mod-lesson .tnm-fullscreen-transport .tnm-metronome-tools > label,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs > button,
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs > button,
#mod-lesson .tnm-fullscreen-transport .tnm-transpose-tool{
  background:#fff!important;
  border-color:#d9e3ec!important;
  color:#536273!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-transport .tnm-mode-symbol,
#mod-lesson .tnm-transport .tnm-monkey-icon,
#mod-lesson .tnm-transport .tnm-piano-toggle-icon,
#mod-lesson .tnm-fullscreen-transport .tnm-mode-symbol,
#mod-lesson .tnm-fullscreen-transport .tnm-monkey-icon,
#mod-lesson .tnm-fullscreen-transport .tnm-piano-toggle-icon{
  filter:grayscale(.90) saturate(.20)!important;
  opacity:.62!important;
  transition:filter .15s ease,opacity .15s ease!important;
}
#mod-lesson .tnm-transport .tnm-transport-icon,
#mod-lesson .tnm-fullscreen-transport .tnm-transport-icon{
  color:#657484!important;
}

/* Phát: chỉ xanh khi score thực sự đang chạy. */
#mod-lesson .tnm-transport .play.active,
#mod-lesson .tnm-fullscreen-transport .play.active{
  background:#35a86b!important;border-color:#2b925d!important;color:#fff!important;
}
#mod-lesson .tnm-transport .play.active .tnm-transport-icon,
#mod-lesson .tnm-fullscreen-transport .play.active .tnm-transport-icon{color:#fff!important}

/* Phát lại / Lùi / Tiến chỉ lóe màu lúc thao tác. */
#mod-lesson .tnm-transport .restart.active,
#mod-lesson .tnm-transport .prev.active,
#mod-lesson .tnm-transport .next.active,
#mod-lesson .tnm-fullscreen-transport .restart.active,
#mod-lesson .tnm-fullscreen-transport .prev.active,
#mod-lesson .tnm-fullscreen-transport .next.active{
  background:#eaf3ff!important;border-color:#8eb8ea!important;color:#245e9b!important;
}

/* A / B chỉ tím nhạt khi điểm đã được đặt. */
#mod-lesson .tnm-transport .loop-a.is-set,
#mod-lesson .tnm-transport .loop-b.is-set,
#mod-lesson .tnm-fullscreen-transport .loop-a.is-set,
#mod-lesson .tnm-fullscreen-transport .loop-b.is-set{
  background:#f2ecff!important;border-color:#c8b6ec!important;color:#6841aa!important;
}
#mod-lesson .tnm-transport .loop-a.is-set .tnm-transport-icon,
#mod-lesson .tnm-transport .loop-b.is-set .tnm-transport-icon,
#mod-lesson .tnm-fullscreen-transport .loop-a.is-set .tnm-transport-icon,
#mod-lesson .tnm-fullscreen-transport .loop-b.is-set .tnm-transport-icon{color:#7543c7!important}
/* Có đủ A+B nhưng chưa bật loop thì AB vẫn trung tính. */
#mod-lesson .tnm-transport .loop-ab-toggle.is-ready:not(.is-active),
#mod-lesson .tnm-fullscreen-transport .loop-ab-toggle.is-ready:not(.is-active){
  background:#fff!important;border-color:#d9e3ec!important;color:#536273!important;
}
/* AB chỉ phủ tím khi vòng lặp thật sự đang chạy. */
#mod-lesson .tnm-transport .loop-ab-toggle.is-active,
#mod-lesson .tnm-fullscreen-transport .loop-ab-toggle.is-active{
  background:#7652c8!important;border-color:#6844ba!important;color:#fff!important;
}
#mod-lesson .tnm-transport .loop-ab-toggle.is-active .tnm-transport-icon,
#mod-lesson .tnm-fullscreen-transport .loop-ab-toggle.is-active .tnm-transport-icon{color:#fff!important}

/* Metronome */
#mod-lesson .tnm-metronome-toggle.active{
  background:#fff1dc!important;border-color:#e4a14d!important;color:#b66900!important;
}
#mod-lesson .tnm-metronome-toggle.active .tnm-metronome-svg{color:#c87500!important}

/* Khỉ */
#mod-lesson .tnm-monkey-toggle.active{
  background:#fff3cf!important;border-color:#e4b64f!important;color:#8b5b00!important;
}
#mod-lesson .tnm-monkey-toggle.active .tnm-monkey-icon{filter:none!important;opacity:1!important}

/* Phím ảo */
#mod-lesson .tnm-piano-toggle.active{
  background:#e5f6ff!important;border-color:#69b9df!important;color:#14739d!important;
}
#mod-lesson .tnm-piano-toggle.active .tnm-piano-toggle-icon{filter:none!important;opacity:1!important}

/* Transpose: chỉ sáng khi khác 0. */
#mod-lesson .tnm-transpose-tool.active{
  background:#f0eaff!important;border-color:#aa91df!important;color:#6742a7!important;
}
#mod-lesson .tnm-transpose-tool.active select{border-color:#aa91df!important;color:#6742a7!important;background:#fff!important}

/* Chế độ tay: đúng một chế độ sáng tại một thời điểm. */
#mod-lesson .tnm-hand-tabs > button.active{
  background:#294b69!important;border-color:#294b69!important;color:#fff!important;
}
#mod-lesson .tnm-hand-tabs > button.active .tnm-mode-symbol{filter:none!important;opacity:1!important}
#mod-lesson .tnm-hand-tabs > button.active .tnm-mode-label{color:#fff!important}

/* Beat và Vocal/Melody hoạt động độc lập. */
#mod-lesson .tnm-audio-tabs > button[data-audio="beat"].active{
  background:#e8f3ff!important;border-color:#69a9e6!important;color:#216ba9!important;
}
#mod-lesson .tnm-audio-tabs > button[data-audio="demo"].active{
  background:#f3eaff!important;border-color:#a98bdd!important;color:#6b3eaa!important;
}
#mod-lesson .tnm-audio-tabs > button.active .tnm-mode-symbol{filter:none!important;opacity:1!important}

/* Fullscreen: nút sáng khi đang ở fullscreen và đổi thành X bằng logic hiện có. */
#mod-lesson .xml-fullscreen.tnm-toolbar-fullscreen.active,
#mod-lesson .xml-fullscreen.tnm-toolbar-fullscreen.is-exit{
  background:#eee9ff!important;border-color:#9d82dd!important;color:#6842ac!important;
}

/* Các input/slider không được coi là icon bật/tắt; giữ màu biểu thị giá trị. */
#mod-lesson .tnm-tempo-control,
#mod-lesson .tnm-tempo-control input,
#mod-lesson .tnm-transpose-tool select{filter:none!important;opacity:1!important}


/* V2-67 — trạng thái tay/audio đúng chức năng, không đổi bố cục. */
#mod-lesson .tnm-hand-tabs>button:not(.active),#mod-lesson .tnm-audio-tabs>button:not(.active){background:#fff!important;border-color:#d9e3ec!important;color:#536273!important;box-shadow:none!important}
#mod-lesson .tnm-hand-tabs>button[data-mode="both"].active{background:#294b69!important;border-color:#294b69!important;color:#fff!important}
#mod-lesson .tnm-hand-tabs>button[data-mode="right"].active,#mod-lesson .tnm-hand-tabs>button[data-mode="left"].active{background:#e8f3ff!important;border-color:#69a9e6!important;color:#216ba9!important}
#mod-lesson .tnm-hand-tabs>button.active .tnm-mode-symbol,#mod-lesson .tnm-audio-tabs>button.active .tnm-mode-symbol{filter:none!important;opacity:1!important}
#mod-lesson .tnm-audio-tabs>button[data-audio="beat"].active{background:#e8f3ff!important;border-color:#69a9e6!important;color:#216ba9!important}
#mod-lesson .tnm-audio-tabs>button[data-audio="demo"].active{background:#f3eaff!important;border-color:#a98bdd!important;color:#6b3eaa!important}


/* V2-68 — trạng thái icon tay/audio rõ ràng + chống chồng icon trên iPad/iPhone. */
/* Hai tay là trạng thái mặc định: sáng vàng khi đang chọn. */
#mod-lesson .tnm-hand-tabs>button[data-mode="both"].active,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button[data-mode="both"].active{
  background:#fff7d6!important;
  border-color:#e5c65e!important;
  color:#7a5a00!important;
}
#mod-lesson .tnm-hand-tabs>button[data-mode="both"].active .tnm-mode-symbol,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button[data-mode="both"].active .tnm-mode-symbol{
  filter:none!important;
  opacity:1!important;
}
#mod-lesson .tnm-hand-tabs>button[data-mode="both"].active .tnm-mode-label,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button[data-mode="both"].active .tnm-mode-label{color:#7a5a00!important}
/* Tay phải / Tay trái chỉ sáng khi chính nó được chọn. */
#mod-lesson .tnm-hand-tabs>button[data-mode="right"].active,
#mod-lesson .tnm-hand-tabs>button[data-mode="left"].active,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button[data-mode="right"].active,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button[data-mode="left"].active{
  background:#e8f3ff!important;
  border-color:#69a9e6!important;
  color:#216ba9!important;
}
/* Các chế độ tay chưa chọn trở về trung tính. */
#mod-lesson .tnm-hand-tabs>button:not(.active),
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button:not(.active){
  background:#fff!important;
  border-color:#d9e3ec!important;
  color:#536273!important;
}
#mod-lesson .tnm-hand-tabs>button:not(.active) .tnm-mode-symbol,
#mod-lesson .tnm-fullscreen-transport .tnm-hand-tabs>button:not(.active) .tnm-mode-symbol{
  filter:grayscale(.92) saturate(.15)!important;
  opacity:.48!important;
}
/* Beat/Vocal mặc định tuyệt đối trung tính; chỉ sáng khi class active thực sự được logic bật. */
#mod-lesson .tnm-audio-tabs>button:not(.active),
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs>button:not(.active){
  background:#fff!important;
  border-color:#d9e3ec!important;
  color:#536273!important;
  box-shadow:none!important;
}
#mod-lesson .tnm-audio-tabs>button:not(.active) .tnm-mode-symbol,
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs>button:not(.active) .tnm-mode-symbol{
  filter:grayscale(1) saturate(0)!important;
  opacity:.38!important;
}
#mod-lesson .tnm-audio-tabs>button[data-audio="beat"].active,
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs>button[data-audio="beat"].active{
  background:#e8f3ff!important;border-color:#69a9e6!important;color:#216ba9!important;
}
#mod-lesson .tnm-audio-tabs>button[data-audio="demo"].active,
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs>button[data-audio="demo"].active{
  background:#f3eaff!important;border-color:#a98bdd!important;color:#6b3eaa!important;
}
#mod-lesson .tnm-audio-tabs>button.active .tnm-mode-symbol,
#mod-lesson .tnm-fullscreen-transport .tnm-audio-tabs>button.active .tnm-mode-symbol{filter:none!important;opacity:1!important}

@media (max-width:900px){
  /* Một grid thật, không dùng vị trí tuyệt đối/sticky của các bản desktop. */
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:40px!important;
    gap:4px!important;
    row-gap:4px!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mobile-display-contents,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-metronome-tools,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-hand-tabs,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-audio-tabs{display:contents!important}
  #mod-lesson .tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    position:static!important;
    inset:auto!important;
    float:none!important;
    transform:none!important;
    margin:0!important;
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    z-index:auto!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    padding:2px 2px!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mode-symbol,
  #mod-lesson .tnm-fullscreen-toolbar-shell .tnm-mode-symbol{font-size:12px!important;line-height:1!important;flex:0 0 auto!important}
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mode-label,
  #mod-lesson .tnm-fullscreen-toolbar-shell .tnm-mode-label{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:6.8px!important;
    line-height:1.05!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button[data-audio="demo"] .tnm-mode-label,
  #mod-lesson .tnm-fullscreen-toolbar-shell .tnm-audio-tabs>button[data-audio="demo"] .tnm-mode-label{font-size:6.1px!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;gap:1px!important;padding:2px!important;font-size:6.6px!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool select,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool select{width:100%!important;min-width:0!important;max-width:100%!important;height:20px!important;min-height:20px!important;font-size:8px!important;padding:0 1px!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    grid-column:span 3!important;
    display:grid!important;
    grid-template-columns:auto minmax(28px,1fr) auto!important;
    gap:2px!important;
    padding:2px 3px!important;
  }
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control small,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control small{display:none!important}
  #mod-lesson .tnm-mobile-toolbar-grid>.xml-fullscreen.tnm-toolbar-fullscreen,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.xml-fullscreen.tnm-toolbar-fullscreen{position:static!important;width:100%!important;min-width:0!important;height:40px!important;margin:0!important;transform:none!important;box-shadow:none!important}
}
@media (max-width:430px){
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{grid-auto-rows:36px!important;gap:3px!important;row-gap:3px!important}
  #mod-lesson .tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-mobile-toolbar-grid>.tnm-tempo-control,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{height:36px!important;min-height:36px!important;max-height:36px!important}
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-mode-label,
  #mod-lesson .tnm-fullscreen-toolbar-shell .tnm-mode-label{font-size:6.2px!important}
  #mod-lesson .tnm-mobile-toolbar-grid .tnm-audio-tabs>button[data-audio="demo"] .tnm-mode-label,
  #mod-lesson .tnm-fullscreen-toolbar-shell .tnm-audio-tabs>button[data-audio="demo"] .tnm-mode-label{font-size:5.6px!important}
}


/* V2-69 — iPad/iPhone: toolbar 2 hàng không chồng; fullscreen touch chỉ thoát bằng ✕. */
@media (pointer:coarse) and (max-width:1180px){
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:38px!important;
    gap:4px!important;
    row-gap:4px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:80px!important;
    padding:4px!important;
    overflow:visible!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    box-sizing:border-box!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-mobile-display-contents,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-metronome-tools,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-hand-tabs,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-audio-tabs{display:contents!important}
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-tempo-control{
    position:static!important;
    inset:auto!important;
    float:none!important;
    transform:none!important;
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-tempo-control{
    grid-column:span 3!important;
    display:grid!important;
    grid-template-columns:auto minmax(34px,1fr) auto!important;
    gap:3px!important;
    padding:2px 3px!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-tempo-control small{display:none!important}
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-transpose-tool{
    display:flex!important;flex-direction:column!important;justify-content:center!important;gap:1px!important;padding:2px!important;
  }
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-transpose-tool select{width:100%!important;min-width:0!important;height:20px!important;min-height:20px!important;font-size:8px!important}

  /* Fullscreen touch: 17 mục trong toolbar + Tempo span 3 = đúng 20 ô, 2 hàng x 10. */
  #mod-lesson .tnm-fullscreen-toolbar-shell{left:6px!important;right:54px!important;top:6px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:36px!important;
    gap:4px!important;
    row-gap:4px!important;
    width:100%!important;
    min-height:76px!important;
    height:auto!important;
    padding:4px!important;
    overflow:visible!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    box-sizing:border-box!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-metronome-tools,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-hand-tabs,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-audio-tabs{display:contents!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    position:static!important;inset:auto!important;float:none!important;transform:none!important;margin:0!important;
    width:100%!important;min-width:0!important;max-width:100%!important;height:36px!important;min-height:36px!important;max-height:36px!important;box-sizing:border-box!important;overflow:hidden!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{
    grid-column:span 3!important;display:grid!important;grid-template-columns:auto minmax(30px,1fr) auto!important;gap:3px!important;padding:1px 3px!important;
  }
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control small{display:none!important}

  /* Nút ẩn/hiện ở trên; nút ✕ thoát fullscreen nằm ngay dưới, không nằm trong toolbar. */
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen .tnm-fs-menu-toggle{
    display:flex!important;position:fixed!important;right:8px!important;top:8px!important;left:auto!important;bottom:auto!important;
    width:40px!important;min-width:40px!important;height:40px!important;z-index:2147483640!important;
  }
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.xml-fullscreen.tnm-touch-fs-exit{
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:fixed!important;right:8px!important;top:54px!important;left:auto!important;bottom:auto!important;
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;
    margin:0!important;padding:0!important;border-radius:11px!important;font-size:20px!important;line-height:1!important;
    background:rgba(255,255,255,.92)!important;border:1px solid #c9b7ef!important;color:#7c3aed!important;
    box-shadow:none!important;z-index:2147483641!important;
  }
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.xml-fullscreen.tnm-touch-fs-exit::before{content:none!important;display:none!important}
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    overscroll-behavior:contain!important;
    touch-action:pan-y pinch-zoom!important;
    padding-top:84px!important;
  }
}
@media (pointer:coarse) and (max-width:430px){
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid{grid-auto-rows:34px!important;min-height:72px!important;gap:3px!important;row-gap:3px!important;padding:3px!important}
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-metronome-tools>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-metronome-tools>label,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-hand-tabs>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid .tnm-audio-tabs>button,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-transpose-tool,
  #mod-lesson .tnm-transport.tnm-transport-top.tnm-mobile-toolbar-grid>.tnm-tempo-control{height:34px!important;min-height:34px!important;max-height:34px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport{grid-auto-rows:33px!important;min-height:69px!important;gap:3px!important;row-gap:3px!important;padding:3px!important}
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-metronome-tools>label,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-hand-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport .tnm-audio-tabs>button,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-transpose-tool,
  #mod-lesson .tnm-fullscreen-toolbar-shell>.tnm-fullscreen-transport>.tnm-tempo-control{height:33px!important;min-height:33px!important;max-height:33px!important}
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{padding-top:77px!important}
}


/* V2-70 — Mixer ở cột trái khi fullscreen; giữ bản nhạc/toolbar hiện tại. */
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
  display:flex!important;
  position:fixed!important;
  left:10px!important;
  top:84px!important;
  width:164px!important;
  max-width:164px!important;
  height:auto!important;
  margin:0!important;
  padding:9px 8px!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  border-radius:14px!important;
  background:rgba(245,250,255,.80)!important;
  border:1px solid rgba(110,150,185,.26)!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  z-index:2147482500!important;
  box-sizing:border-box!important;
}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer .tnm-mixer-title,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer .tnm-mixer-title{
  width:100%!important;font-size:11px!important;margin:0!important;
}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label{
  width:100%!important;display:grid!important;grid-template-columns:1fr auto!important;gap:2px 5px!important;margin:0!important;
}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label span,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label span{font-size:9px!important;font-weight:700!important}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label b,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label b{font-size:8px!important}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer input[type="range"],
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer input[type="range"]{grid-column:1/3!important;width:100%!important;min-width:0!important}
@media (pointer:coarse) and (max-width:1180px){
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
    left:6px!important;top:88px!important;width:118px!important;max-width:118px!important;padding:7px 6px!important;gap:5px!important;
  }
}
@media (pointer:coarse) and (max-width:430px){
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
    top:80px!important;width:104px!important;max-width:104px!important;padding:6px 5px!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label span,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer label span{font-size:8px!important}
}
\n\n/* V2-71 — Mixer fullscreen căn giữa theo chiều dọc ở cột trái, có thể ẩn/hiện riêng. */
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
  left:10px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  max-height:calc(100dvh - 150px)!important;
  overflow:auto!important;
}
#mod-lesson .tnm-fs-mixer-toggle{
  display:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen>.tnm-fs-mixer-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-fs-mixer-toggle{
  display:flex!important;
  position:fixed!important;
  left:180px!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:10px!important;
  border:1px solid rgba(90,130,165,.30)!important;
  background:rgba(248,252,255,.76)!important;
  color:#365b7b!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  z-index:2147482600!important;
  cursor:pointer!important;
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-mixer-hidden>.tnm-practice-mixer.tnm-fullscreen-mixer,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-mixer-hidden>.tnm-practice-mixer.tnm-fullscreen-mixer{
  display:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle{
  left:10px!important;
}
@media (pointer:coarse) and (max-width:1180px){
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
    left:6px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    max-height:calc(100dvh - 130px)!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-fs-mixer-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-fs-mixer-toggle{left:130px!important;top:50%!important}
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle{left:6px!important}
}
@media (pointer:coarse) and (max-width:430px){
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{top:50%!important;transform:translateY(-50%)!important}
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-fs-mixer-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-fs-mixer-toggle{left:116px!important}
  #mod-lesson .tnm-practice-score:fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen.tnm-fs-mixer-hidden>.tnm-fs-mixer-toggle{left:6px!important}
}

/* V2-72 — Mixer fullscreen: cả panel nằm đúng giữa chiều cao màn hình ở cột trái. */
#mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{
  position:fixed!important;
  top:50vh!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
@supports(height:100dvh){
  #mod-lesson .tnm-practice-score:fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen>.tnm-practice-mixer.tnm-fullscreen-mixer{top:50dvh!important}
}


/* V2-73 — touch stability for Mixer + true fullscreen preference on supported mobile browsers. */
@media (pointer:coarse){
  html,body{
    max-width:100%!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
  }
  #mod-lesson,
  #mod-lesson #piano-practice{
    max-width:100%!important;
    overflow-x:clip!important;
  }
  #mod-lesson .tnm-practice-mixer,
  #mod-lesson .tnm-practice-mixer *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
  }
  #mod-lesson .tnm-practice-mixer{
    touch-action:none!important;
    overscroll-behavior:contain!important;
  }
  #mod-lesson .tnm-practice-mixer input[type="range"]{
    touch-action:none!important;
    overscroll-behavior:contain!important;
  }
  #mod-lesson .tnm-practice-score{
    overscroll-behavior-x:none!important;
  }
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    width:100vw!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    inset:0!important;
  }
}

/* V2-74: lock V2-69 toolbar order on every viewport and keep touch fullscreen exit
   directly below the show/hide-toolbar control. */
#mod-lesson .tnm-transport.tnm-transport-top > .restart{order:1!important}
#mod-lesson .tnm-transport.tnm-transport-top > .play{order:2!important}
#mod-lesson .tnm-transport.tnm-transport-top > .prev{order:3!important}
#mod-lesson .tnm-transport.tnm-transport-top > .next{order:4!important}
#mod-lesson .tnm-transport.tnm-transport-top > .loop-a{order:5!important}
#mod-lesson .tnm-transport.tnm-transport-top > .loop-b{order:6!important}
#mod-lesson .tnm-transport.tnm-transport-top > .loop-ab-toggle{order:7!important}
#mod-lesson .tnm-transport.tnm-transport-top > .tnm-metronome-tools{order:8!important}
#mod-lesson .tnm-transport.tnm-transport-top > .tnm-transpose-tool{order:9!important}
#mod-lesson .tnm-transport.tnm-transport-top > .tnm-hand-tabs{order:10!important}
#mod-lesson .tnm-transport.tnm-transport-top > .tnm-audio-tabs{order:11!important}
#mod-lesson .tnm-transport.tnm-transport-top > .tnm-tempo-control{order:12!important}
#mod-lesson .tnm-transport.tnm-transport-top > .xml-fullscreen.tnm-toolbar-fullscreen{order:13!important}

@media (pointer:coarse), (max-width:1180px){
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen > .tnm-fs-menu-toggle{
    position:fixed!important;
    right:10px!important;
    top:10px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:2147483645!important;
  }
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen > .xml-fullscreen.tnm-touch-fs-exit{
    display:flex!important;
    position:fixed!important;
    right:10px!important;
    top:54px!important;
    left:auto!important;
    bottom:auto!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    z-index:2147483645!important;
  }
}


/* V2-75 — true fullscreen on every browser/device when the platform allows it. */
html.tnm-score-lock-page,
html.tnm-score-lock-page body{
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#mod-lesson .tnm-practice-score:fullscreen,
#mod-lesson .tnm-practice-score:-webkit-full-screen,
#mod-lesson .tnm-practice-score.tnm-native-fullscreen-overlay,
#mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  z-index:2147483000!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
@supports(height:100dvh){
  #mod-lesson .tnm-practice-score:fullscreen,
  #mod-lesson .tnm-practice-score:-webkit-full-screen,
  #mod-lesson .tnm-practice-score.tnm-native-fullscreen-overlay,
  #mod-lesson .tnm-practice-score.tnm-score-pseudo-fullscreen{
    height:100dvh!important;
    min-height:100dvh!important;
  }
}
/* Keep the V2-69/V2-74 dedicated controls visible in native fullscreen too. */
#mod-lesson .tnm-practice-score:fullscreen > .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score:-webkit-full-screen > .tnm-fs-menu-toggle,
#mod-lesson .tnm-practice-score.tnm-native-fullscreen-overlay > .tnm-fs-menu-toggle{
  display:flex!important;
  position:fixed!important;
  right:10px!important;
  top:10px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:2147483645!important;
}
#mod-lesson .tnm-practice-score:fullscreen > .xml-fullscreen.tnm-touch-fs-exit,
#mod-lesson .tnm-practice-score:-webkit-full-screen > .xml-fullscreen.tnm-touch-fs-exit,
#mod-lesson .tnm-practice-score.tnm-native-fullscreen-overlay > .xml-fullscreen.tnm-touch-fs-exit{
  display:flex!important;
  position:fixed!important;
  right:10px!important;
  top:54px!important;
  left:auto!important;
  bottom:auto!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  z-index:2147483645!important;
}