/* VƯỜN NGOẠI NGỮ v6.15.220
   Compact current-plan strip + Lesson interface pass.
   Presentation only: no data, auth, Supabase, Speaking or Shadowing logic changes. */

/* =========================================================
   A. CURRENT PLAN — compact utility strip
   ========================================================= */
body.student-experience #view-home .student-plan-strip{
  min-height:0!important;
  padding:9px 11px!important;
  margin:0!important;
  gap:10px!important;
  border-radius:14px!important;
  background:#f8fbfa!important;
  border:1px solid #dce9e5!important;
  box-shadow:none!important;
}

body.student-experience #view-home .student-plan-strip-copy{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:3px 8px!important;
}

body.student-experience #view-home .student-plan-strip-copy>span{
  font-size:9.5px!important;
  line-height:1.2!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  color:#7a8c87!important;
}

body.student-experience #view-home .student-plan-strip-copy>strong{
  font-size:13px!important;
  line-height:1.2!important;
  color:#185f56!important;
}

body.student-experience #view-home .student-plan-strip-copy>small{
  min-width:0!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  color:#71817c!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body.student-experience #view-home .student-plan-strip-action{
  min-height:34px!important;
  height:34px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1!important;
}

/* =========================================================
   B. LESSON — clearer hierarchy / less card clutter
   ========================================================= */
body.lesson-view-active #view-lesson{
  background:
    linear-gradient(180deg,rgba(231,247,243,.88) 0,rgba(248,251,250,.96) 300px,#f8fbfa 680px)!important;
}

body.lesson-view-active #view-lesson .container{
  max-width:1240px!important;
}

/* breadcrumb becomes a quiet utility row */
body.lesson-view-active #view-lesson .lesson-breadcrumb{
  min-height:44px!important;
  padding:13px 2px 9px!important;
  gap:7px!important;
  color:#71817c!important;
  font-size:12px!important;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
body.lesson-view-active #view-lesson .lesson-breadcrumb::-webkit-scrollbar{display:none}
body.lesson-view-active #view-lesson .lesson-breadcrumb button{
  font-size:12px!important;
  font-weight:800!important;
  color:#176b61!important;
}

/* Hero: compact lesson identity instead of oversized banner */
body.lesson-view-active #view-lesson .lesson-hero{
  min-height:210px!important;
  padding:28px 30px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:24px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.14),transparent 12rem),
    linear-gradient(132deg,#143f39 0%,#0f746a 57%,#0d7185 100%)!important;
  box-shadow:0 16px 36px rgba(15,79,70,.14)!important;
}

body.lesson-view-active #view-lesson .lesson-hero:after{
  right:20px!important;
  bottom:-14px!important;
  font-size:5.8rem!important;
  opacity:.75;
}

body.lesson-view-active #view-lesson .lesson-hero .eyebrow{
  font-size:10.5px!important;
  letter-spacing:.12em!important;
  color:#c7f7ee!important;
}

body.lesson-view-active #view-lesson .lesson-hero h1{
  max-width:820px!important;
  margin:8px 0 10px!important;
  font-size:clamp(2rem,4vw,3.3rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  color:#fff!important;
}

body.lesson-view-active #view-lesson .lesson-hero p{
  max-width:760px!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:#d7ece8!important;
}

body.lesson-view-active #view-lesson .lesson-hero-tools{
  display:flex!important;
  align-items:stretch!important;
  gap:9px!important;
}

body.lesson-view-active #view-lesson .lesson-dictionary-trigger{
  min-height:44px!important;
  height:auto!important;
  padding:0 13px!important;
  border-radius:12px!important;
  align-self:end!important;
}

body.lesson-view-active #view-lesson .lesson-score-card{
  min-width:118px!important;
  padding:11px 14px!important;
  border-radius:16px!important;
  text-align:left!important;
}
body.lesson-view-active #view-lesson .lesson-score-card .big-percent{
  font-size:27px!important;
  line-height:1!important;
  margin-bottom:4px!important;
}
body.lesson-view-active #view-lesson .lesson-score-card>div:last-child{
  font-size:10px!important;
  line-height:1.2!important;
}

/* Flow guide is now a slim progress context, not another hero */
body.lesson-view-active #view-lesson .lesson-flow-guide{
  margin:14px 0 10px!important;
  min-height:60px!important;
  padding:11px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid #dce8e4!important;
  box-shadow:0 5px 16px rgba(18,68,59,.045)!important;
}

body.lesson-view-active #view-lesson .lesson-flow-guide-copy{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:9px!important;
  row-gap:2px!important;
}

body.lesson-view-active #view-lesson .lesson-flow-guide-copy>span{
  grid-row:1/3!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
  padding:6px 8px!important;
  border-radius:999px!important;
  background:#eef8f5!important;
  color:#176f63!important;
}

body.lesson-view-active #view-lesson .lesson-flow-guide-copy>strong{
  font-size:13px!important;
  line-height:1.35!important;
  color:#294b44!important;
}
body.lesson-view-active #view-lesson .lesson-flow-guide-copy>small{
  font-size:10.5px!important;
  line-height:1.3!important;
  color:#7b8a85!important;
}
body.lesson-view-active #view-lesson .lesson-flow-current{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 11px!important;
  font-size:10.5px!important;
  border-radius:999px!important;
  background:#edf8f4!important;
  border:0!important;
}

/* Main lesson nav — readable learning path */
body.lesson-view-active #view-lesson .skill-tabs--flow{
  position:sticky!important;
  top:70px!important;
  z-index:30!important;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(96px,1fr))!important;
  gap:7px!important;
  padding:8px!important;
  margin:0 0 14px!important;
  border-radius:17px!important;
  border:1px solid #dce8e4!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 7px 20px rgba(18,68,59,.06)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body.lesson-view-active #view-lesson .skill-tabs--flow .skill-tab:not([hidden]){
  min-width:0!important;
  min-height:52px!important;
  padding:8px 7px 8px 31px!important;
  border-radius:12px!important;
  font-size:10.5px!important;
  line-height:1.15!important;
  background:#f6f9f8!important;
  color:#5d726c!important;
}

body.lesson-view-active #view-lesson .skill-tabs--flow .skill-tab:not([hidden]):before{
  left:7px!important;
  width:19px!important;
  height:19px!important;
  font-size:9px!important;
}

body.lesson-view-active #view-lesson .skill-tabs--flow .skill-tab.active{
  background:linear-gradient(135deg,#0f7d72,#168d81)!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(15,125,114,.15)!important;
}

/* Workspace */
body.lesson-view-active #view-lesson .skill-panel.active{
  min-height:0!important;
  padding:24px!important;
  margin-bottom:28px!important;
  border-radius:24px!important;
  border:1px solid #dfe9e6!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(18,68,59,.055)!important;
}

body.lesson-view-active #view-lesson .activity-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:16px!important;
  margin:0 0 18px!important;
  padding:0 0 16px!important;
  border-bottom:1px solid #e7eeeb!important;
}

body.lesson-view-active #view-lesson .activity-heading .eyebrow{
  font-size:9.5px!important;
  letter-spacing:.12em!important;
}
body.lesson-view-active #view-lesson .activity-heading h2{
  margin:5px 0 5px!important;
  font-size:clamp(1.55rem,3vw,2rem)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  color:#234b43!important;
}
body.lesson-view-active #view-lesson .activity-heading p{
  max-width:760px!important;
  margin:0!important;
  font-size:12.5px!important;
  line-height:1.5!important;
  color:#72817c!important;
}

body.lesson-view-active #view-lesson .complete-skill{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:11px!important;
  white-space:nowrap!important;
}

/* subnav is compact and secondary */
body.lesson-view-active #view-lesson .flow-subnav{
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 16px!important;
  padding:4px!important;
  display:flex!important;
  gap:4px!important;
  border-radius:12px!important;
  background:#f1f6f4!important;
}
body.lesson-view-active #view-lesson .flow-subnav button{
  min-height:34px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:9px!important;
  font-size:10.5px!important;
}
body.lesson-view-active #view-lesson .flow-subnav button.active{
  background:#fff!important;
  box-shadow:0 2px 7px rgba(20,70,60,.07)!important;
}

/* cards inside lesson: flatter and more consistent */
body.lesson-view-active #view-lesson .vocab-card,
body.lesson-view-active #view-lesson .flash-card,
body.lesson-view-active #view-lesson .practice-card,
body.lesson-view-active #view-lesson .exercise-card,
body.lesson-view-active #view-lesson .reading-card,
body.lesson-view-active #view-lesson .writing-card,
body.lesson-view-active #view-lesson .speaking-card,
body.lesson-view-active #view-lesson .listening-card,
body.lesson-view-active #view-lesson .roleplay-card{
  border-radius:16px!important;
  border-color:#e1eae7!important;
  box-shadow:none!important;
}

/* keep the "next step" useful but visually calm */
body.lesson-view-active #view-lesson .lesson-flow-next{
  margin-top:18px!important;
  padding:13px 14px!important;
  border-radius:16px!important;
  border:1px solid #dce8e4!important;
  background:#f8fbfa!important;
}
body.lesson-view-active #view-lesson .lesson-flow-next strong{font-size:14px!important}
body.lesson-view-active #view-lesson .lesson-flow-next small{font-size:10.5px!important}

/* =========================================================
   C. MOBILE — same structure for iOS + Android
   ========================================================= */
@media(max-width:900px){
  body.student-experience #view-home .student-plan-strip{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    margin:0!important;
    padding:8px 9px!important;
    min-height:52px!important;
  }

  body.student-experience #view-home .student-plan-strip-copy{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:2px 6px!important;
    align-items:center!important;
  }
  body.student-experience #view-home .student-plan-strip-copy>span{
    grid-column:1!important;
    grid-row:1!important;
    font-size:9px!important;
  }
  body.student-experience #view-home .student-plan-strip-copy>strong{
    grid-column:2!important;
    grid-row:1!important;
    font-size:12px!important;
  }
  body.student-experience #view-home .student-plan-strip-copy>small{
    grid-column:1/-1!important;
    grid-row:2!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  body.student-experience #view-home .student-plan-strip-action{
    min-height:34px!important;
    height:34px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }

  body.lesson-view-active #view-lesson .lesson-hero{
    min-height:0!important;
    padding:22px!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:16px!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero h1{
    font-size:clamp(1.9rem,7.2vw,2.6rem)!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero p{
    font-size:12.5px!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero-tools{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
  }
  body.lesson-view-active #view-lesson .lesson-dictionary-trigger{
    width:100%!important;
    justify-content:center!important;
  }
  body.lesson-view-active #view-lesson .lesson-score-card{
    min-width:104px!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.lesson-view-active #view-lesson .lesson-flow-current{
    width:max-content!important;
  }

  body.lesson-view-active #view-lesson .skill-tabs--flow{
    position:sticky!important;
    top:64px!important;
    display:flex!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding:7px!important;
    scrollbar-width:none!important;
  }
  body.lesson-view-active #view-lesson .skill-tabs--flow::-webkit-scrollbar{display:none!important}
  body.lesson-view-active #view-lesson .skill-tabs--flow .skill-tab:not([hidden]){
    flex:0 0 auto!important;
    min-width:118px!important;
    min-height:48px!important;
  }

  body.lesson-view-active #view-lesson .skill-panel.active{
    padding:18px!important;
    border-radius:19px!important;
  }
  body.lesson-view-active #view-lesson .activity-heading{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  body.lesson-view-active #view-lesson .complete-skill{
    width:max-content!important;
    min-height:36px!important;
  }
}

@media(max-width:520px){
  body.student-experience #view-home .student-plan-strip{
    grid-template-columns:1fr!important;
    gap:6px!important;
    min-height:0!important;
  }
  body.student-experience #view-home .student-plan-strip-action{
    width:100%!important;
  }

  body.lesson-view-active #view-lesson .lesson-breadcrumb{
    padding-left:1px!important;
    padding-right:1px!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero{
    padding:18px!important;
    border-radius:21px!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero h1{
    font-size:1.95rem!important;
  }
  body.lesson-view-active #view-lesson .lesson-hero-tools{
    grid-template-columns:1fr!important;
  }
  body.lesson-view-active #view-lesson .lesson-score-card{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body.lesson-view-active #view-lesson .lesson-score-card .big-percent{
    margin:0!important;
  }

  body.lesson-view-active #view-lesson .lesson-flow-guide{
    padding:10px 11px!important;
  }
  body.lesson-view-active #view-lesson .lesson-flow-guide-copy{
    grid-template-columns:1fr!important;
  }
  body.lesson-view-active #view-lesson .lesson-flow-guide-copy>span{
    grid-row:auto!important;
    width:max-content!important;
  }
  body.lesson-view-active #view-lesson .lesson-flow-guide-copy>small{
    display:none!important;
  }

  body.lesson-view-active #view-lesson .skill-panel.active{
    padding:15px!important;
  }
  body.lesson-view-active #view-lesson .activity-heading h2{
    font-size:1.45rem!important;
  }
  body.lesson-view-active #view-lesson .flow-subnav{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.lesson-view-active #view-lesson .flow-subnav button{
    width:100%!important;
  }
}