/* VƯỜN NGOẠI NGỮ v6.15.224 — Mobile Lesson Flow Balance
   Fix overlapping labels on iOS/Android by removing conflicting flex/min-width rules.
   UI only; no lesson data or behavior changes. */

@media (max-width:900px){
  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow{
    position:static!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    padding:8px!important;
    margin:0 0 14px!important;
    box-sizing:border-box!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main]{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:60px!important;
    padding:10px 9px 10px 38px!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    text-align:left!important;
    line-height:1.25!important;
    overflow:visible!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main]::before{
    position:absolute!important;
    left:9px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    flex:none!important;
    font-size:10px!important;
    line-height:1!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main] span:not(.plus-lock){
    display:inline!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    font-size:13.5px!important;
    line-height:1.25!important;
    font-weight:900!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide{
    width:100%!important;
    box-sizing:border-box!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide-copy{
    min-width:0!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide-copy>strong{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

@media (max-width:620px){
  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:7px!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main]{
    min-height:62px!important;
    padding:10px 8px 10px 39px!important;
    gap:5px!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main] span:not(.plus-lock){
    font-size:13.5px!important;
    line-height:1.24!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide{
    padding:11px 12px!important;
    gap:8px!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide-copy>strong{
    font-size:14px!important;
    line-height:1.45!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-current{
    width:auto!important;
    max-width:100%!important;
    min-height:36px!important;
    padding:7px 10px!important;
    white-space:normal!important;
    line-height:1.3!important;
  }
}

@media (max-width:380px){
  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main]{
    min-height:64px!important;
    padding-left:36px!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main]::before{
    left:7px!important;
    width:21px!important;
    height:21px!important;
  }

  body.lesson-view-active #view-lesson #skillTabs.skill-tabs--flow .skill-tab[data-flow-main] span:not(.plus-lock){
    font-size:13px!important;
  }
}