/* MR LEE / Lesson-directory-first V1
 * Only hoc-theo-bai.html. Keep 90 real lesson routes, exercises, audio, scores,
 * authentication and both existing color themes. No marketing banners.
 */
html[data-mrlee-v24="courses"]{
 --ld-bg:#f4f8ff;--ld-card:#ffffff;--ld-border:#d9e6f5;
 --ld-ink:#183958;--ld-muted:#536e85;--ld-accent:#0877c9;
 --ld-head:#ecf5ff;
}
html[data-mrlee-v24="courses"][data-mrlee-theme="future"]{
 --ld-bg:#041329;--ld-card:#0e2442;--ld-border:#295981;
 --ld-ink:#effaff;--ld-muted:#b1cfe3;--ld-accent:#58e4fb;
 --ld-head:#0b2140;
}
html[data-mrlee-v24="courses"] main#mrleeLessonDirectory{
 box-sizing:border-box!important;
 width:min(1440px,calc(100% - 28px))!important;
 max-width:none!important;margin:0 auto!important;
 padding:10px 0 34px!important;
 display:block!important;min-height:0!important;height:auto!important;
 overflow:visible!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-directory-head{
 box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
 gap:12px 22px;flex-wrap:wrap;
 border:1px solid var(--ld-border);border-radius:16px;
 margin:0 0 11px;padding:15px clamp(15px,2vw,25px);
 background:var(--ld-head);color:var(--ld-ink);
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-heading{flex:1 1 305px;min-width:0}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-eyebrow{
 display:block;color:var(--ld-accent);
 font:800 11px/1.3 "Be Vietnam Pro",system-ui,sans-serif;
 letter-spacing:.09em;margin-bottom:4px;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonTitle{
 font:850 clamp(23px,2.15vw,31px)/1.18 "Be Vietnam Pro",system-ui,sans-serif!important;
 color:var(--ld-ink)!important;letter-spacing:-.035em!important;
 margin:0 0 5px!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonIntro{
 color:var(--ld-muted)!important;
 font:500 12px/1.5 "Be Vietnam Pro",system-ui,sans-serif;
 margin:0!important;max-width:75ch!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-levels{
 display:flex;flex-direction:column;align-items:flex-start;gap:5px;
 flex:0 1 auto;min-width:0;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-levels>span{
 color:var(--ld-muted);font-size:11px;font-weight:750;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #levelButtons{
 display:flex!important;flex-wrap:wrap!important;align-items:center;gap:5px!important;
 min-width:0;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #levelButtons a{
 box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;
 width:auto!important;min-width:0!important;min-height:36px!important;
 padding:8px 10px!important;border-radius:9px!important;
 font-size:11px!important;font-weight:800!important;line-height:1.2!important;
 border:1px solid var(--ld-border)!important;
 background:var(--ld-card)!important;color:var(--ld-ink)!important;
 text-decoration:none!important;box-shadow:none!important;margin:0!important;
 white-space:nowrap;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #levelButtons a.primary{
 background:var(--ld-accent)!important;border-color:var(--ld-accent)!important;
 color:#041b2c!important;
}
html[data-mrlee-v24="courses"]:not([data-mrlee-theme="future"])
 #mrleeLessonDirectory #levelButtons a.primary{color:#fff!important}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonCards{
 display:block!important;position:relative;
 box-sizing:border-box;width:100%!important;
 min-height:0!important;height:auto!important;max-height:none!important;
 margin:0!important;padding:0!important;overflow:visible!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonCards.mr-new-hidden{
 display:none!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 align-items:stretch!important;gap:9px!important;
 width:100%!important;min-width:0!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card{
 box-sizing:border-box;display:flex!important;flex-direction:column;
 align-items:flex-start;gap:5px!important;
 min-width:0!important;min-height:136px!important;height:auto!important;
 border:1px solid var(--ld-border)!important;border-radius:13px!important;
 padding:13px 14px!important;margin:0!important;
 background:var(--ld-card)!important;color:var(--ld-ink)!important;
 box-shadow:0 4px 12px rgba(6,26,53,.09)!important;
 text-decoration:none!important;
 transform:none!important;transition:box-shadow .15s,border-color .15s!important;
 overflow:visible!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card:hover,
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card:focus-visible{
 border-color:var(--ld-accent)!important;box-shadow:0 0 0 2px var(--ld-accent)!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card strong{
 color:var(--ld-ink)!important;font-size:14px!important;line-height:1.4!important;
 font-weight:850!important;margin:0!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card span{
 display:block!important;color:var(--ld-muted)!important;
 font-size:11px!important;line-height:1.42!important;
 padding:0!important;margin:0!important;
 overflow-wrap:anywhere;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card span[lang="ko"]{
 color:var(--ld-accent)!important;font-size:12px!important;font-weight:750!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card em{
 margin-top:auto!important;color:var(--ld-accent)!important;
 font-style:normal!important;font-size:10px!important;font-weight:800!important;
 line-height:1.4!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonContent{
 margin:0!important;padding:0!important;
}
html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonContent>.mr-new-panel:first-child{
 margin-top:8px!important;
}
@media(max-width:1160px){
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-levels{flex:1 1 100%}
}
@media(max-width:850px){
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
 }
}
@media(max-width:620px){
 html[data-mrlee-v24="courses"] main#mrleeLessonDirectory{
  width:calc(100% - 20px)!important;padding:7px 0 20px!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory .mr-lesson-directory-head{
  padding:13px!important;gap:11px!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card{
  padding:11px!important;min-height:135px!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card strong{
  font-size:12px!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card em{
  font-size:10px!important;
 }
}
@media(max-width:340px){
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid{
  grid-template-columns:minmax(0,1fr)!important;
 }
 html[data-mrlee-v24="courses"] #mrleeLessonDirectory #lessonGrid>.mr-new-card{
  min-height:0!important;
 }
}