/* VƯỜN NGOẠI NGỮ v6.15.329 — LESSON POLISH + PROMO TOP
   Professional Lesson cards + one visible FREE/PLUS strip at top only.
   Presentation layer only. */

:root{
  --v329-ink:#173f35;
  --v329-muted:#6d7d77;
  --v329-line:#dce7e3;
  --v329-soft:#f8fbfa;
  --v329-core:#2f7d69;
  --v329-core-soft:#f2faf7;
  --v329-extended:#a06b24;
  --v329-extended-soft:#fff8ec;
  --v329-test:#6b55a6;
  --v329-test-soft:#f7f3ff;
  --v329-zh:#b9574d;
}

/* =========================================================
   1. ONE PROMO ONLY — TOP OF LESSON
   ========================================================= */
body.v329-ui #view-lesson .v271-tier-legend,
body.v329-ui #view-lesson #v271TierLegend,
body.v329-ui #view-lesson .v329-legacy-tier-hidden{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Keep the new strip compact, premium-looking and immediately below hero. */
body.v329-ui #v328LessonAccessStrip{
  margin:10px 0 12px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-strip{
  grid-template-columns:minmax(160px,.62fr) minmax(250px,1fr) minmax(290px,1.1fr)!important;
  gap:8px!important;
  padding:8px!important;
  border-radius:15px!important;
  box-shadow:0 4px 14px rgba(18,66,56,.035)!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-intro{
  min-height:58px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-intro span{
  font-size:10px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-intro strong{
  font-size:13px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-tier-card{
  min-height:58px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-tier-badge{
  padding:5px 8px!important;
  font-size:11.5px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-tier-copy strong{
  font-size:12.7px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-tier-copy small{
  font-size:11px!important;
}
body.v329-ui #v328LessonAccessStrip .v328-plus-button{
  min-height:32px!important;
  padding:5px 9px!important;
}

/* The selected module subtly colors the strip without adding more ads. */
body.v329-ui #v328LessonAccessStrip .v328-access-strip[data-v329-skill="roleplay"]{
  border-color:#cbdcf1!important;
  background:linear-gradient(135deg,#fbfdff,#fff)!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-strip[data-v329-skill="quiz"]{
  border-color:#d9d0ef!important;
  background:linear-gradient(135deg,#fcf9ff,#fff)!important;
}
body.v329-ui #v328LessonAccessStrip .v328-access-strip[data-v329-skill="speaking"]{
  border-color:#c8dfd8!important;
  background:linear-gradient(135deg,#f6fbf9,#fff)!important;
}

/* =========================================================
   2. COURSE LESSON LIST — PROFESSIONAL CARD SYSTEM
   ========================================================= */
body.v329-ui #view-course #seasonGrid{
  gap:14px!important;
  align-items:stretch!important;
}

body.v329-ui #view-course .v329-season-card{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr) 34px!important;
  grid-template-areas:"badge main arrow"!important;
  align-items:center!important;
  gap:14px!important;
  min-height:132px!important;
  padding:16px 16px 16px 18px!important;
  border:1px solid var(--v329-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(18,66,56,.045)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

body.v329-ui #view-course .v329-season-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:4px!important;
  background:var(--v329-core)!important;
}

body.v329-ui #view-course .v329-season-card:hover{
  transform:translateY(-2px)!important;
  border-color:#bcd7cf!important;
  box-shadow:0 11px 28px rgba(18,66,56,.08)!important;
}

/* Core lessons */
body.v329-ui #view-course .v329-season-card.v329-core{
  background:linear-gradient(135deg,#fff 0%,#fbfdfc 100%)!important;
}
body.v329-ui #view-course .v329-season-card.v329-core::before{
  background:var(--v329-core)!important;
}
body.v329-ui #view-course .v329-season-card.v329-core .season-badge{
  color:#226754!important;
  background:#eaf6f1!important;
  border-color:#cde5dc!important;
}

/* Extended lessons */
body.v329-ui #view-course .v329-season-card.v329-extended{
  background:linear-gradient(135deg,#fffdfa,#fff 100%)!important;
  border-color:#eadfcd!important;
}
body.v329-ui #view-course .v329-season-card.v329-extended::before{
  background:var(--v329-extended)!important;
}
body.v329-ui #view-course .v329-season-card.v329-extended .season-badge{
  color:#82551c!important;
  background:var(--v329-extended-soft)!important;
  border-color:#ead3ab!important;
}

/* Test cards */
body.v329-ui #view-course .v329-season-card.v329-test{
  background:linear-gradient(135deg,#fbf9ff,#fff 100%)!important;
  border-color:#ded5ef!important;
}
body.v329-ui #view-course .v329-season-card.v329-test::before{
  background:var(--v329-test)!important;
}
body.v329-ui #view-course .v329-season-card.v329-test .season-badge{
  color:#5e4891!important;
  background:var(--v329-test-soft)!important;
  border-color:#ded0f3!important;
}

/* Chinese Pinyin special lesson */
body.v329-ui #view-course .v329-season-card.v329-pinyin{
  background:linear-gradient(135deg,#fff8f6,#fff 100%)!important;
  border-color:#edd2cd!important;
}
body.v329-ui #view-course .v329-season-card.v329-pinyin::before{
  background:var(--v329-zh)!important;
}

/* Lesson badge */
body.v329-ui #view-course .v329-season-card .season-badge{
  grid-area:badge!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:9px 10px!important;
  border:1px solid #d8e7e1!important;
  border-radius:12px!important;
  background:#eef7f3!important;
  color:#2b6758!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  text-align:left!important;
  text-transform:uppercase!important;
}

/* Main content */
body.v329-ui #view-course .v329-season-card .season-main{
  grid-area:main!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:3px 10px!important;
  align-items:center!important;
  min-width:0!important;
}

body.v329-ui #view-course .v329-season-card .season-icon{
  grid-row:1 / span 2!important;
  align-self:start!important;
  margin-top:2px!important;
  font-size:28px!important;
  line-height:1!important;
}

body.v329-ui #view-course .v329-season-card .season-main>div{
  min-width:0!important;
}

body.v329-ui #view-course .v329-season-card .season-main h3{
  margin:0 0 4px!important;
  color:var(--v329-ink)!important;
  font-size:18px!important;
  line-height:1.23!important;
  letter-spacing:-.015em!important;
  font-weight:900!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

body.v329-ui #view-course .v329-season-card .season-main p{
  margin:0!important;
  color:var(--v329-muted)!important;
  font-size:12.9px!important;
  line-height:1.45!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

body.v329-ui #view-course .v329-card-meta{
  grid-column:2!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:7px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:#f1f7f5!important;
  color:#397064!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
}

/* Arrow becomes a professional action affordance */
body.v329-ui #view-course .v329-season-card>.arrow{
  grid-area:arrow!important;
  display:grid!important;
  place-items:center!important;
  justify-self:end!important;
  width:32px!important;
  height:32px!important;
  border:1px solid #dce8e3!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#277563!important;
  font-size:18px!important;
  line-height:1!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}
body.v329-ui #view-course .v329-season-card:hover>.arrow{
  transform:translateX(2px)!important;
  background:#eef8f5!important;
  border-color:#bfddd4!important;
}

/* Chinese cards keep same structure, language identity only */
body.v329-ui.track-theme-zh #view-course .v329-season-card.v329-core::before{
  background:var(--v329-zh)!important;
}
body.v329-ui.track-theme-zh #view-course .v329-season-card.v329-core .season-badge{
  color:#8f443b!important;
  background:#fff0ed!important;
  border-color:#efd0cb!important;
}
body.v329-ui.track-theme-zh #view-course .v329-card-meta{
  color:#8d4b42!important;
  background:#fff3f1!important;
}
body.v329-ui.track-theme-zh #view-course .v329-season-card>.arrow{
  color:#a14f45!important;
}

/* Pinyin foundation still spans full width and gets a feature-card feel. */
body.v329-ui #view-course .v329-season-card.v329-pinyin{
  grid-column:1/-1!important;
  min-height:118px!important;
}

/* =========================================================
   3. SECTION HEADER ABOVE LESSON LIST
   ========================================================= */
body.v329-ui #view-course .section-block:has(#seasonGrid){
  padding-top:10px!important;
}
body.v329-ui #view-course .section-block:has(#seasonGrid) .section-title-row{
  margin-bottom:12px!important;
}
body.v329-ui #view-course #courseLessonListTitle{
  margin:3px 0 4px!important;
  font-size:26px!important;
  line-height:1.2!important;
  color:var(--v329-ink)!important;
}
body.v329-ui #view-course #courseLessonListSubtitle{
  max-width:720px!important;
  margin:0!important;
  color:#71817b!important;
  font-size:13.5px!important;
}

/* =========================================================
   4. RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  body.v329-ui #v328LessonAccessStrip .v328-access-strip{
    grid-template-columns:1fr 1fr!important;
  }
  body.v329-ui #v328LessonAccessStrip .v328-access-intro{
    grid-column:1/-1!important;
  }
}

@media(max-width:900px){
  body.v329-ui #view-course .v329-season-card{
    grid-template-columns:104px minmax(0,1fr) 32px!important;
    min-height:126px!important;
  }
}

@media(max-width:700px){
  body.v329-ui #v328LessonAccessStrip .v328-access-strip{
    grid-template-columns:1fr!important;
  }
  body.v329-ui #v328LessonAccessStrip .v328-access-intro{
    grid-column:auto!important;
  }

  body.v329-ui #view-course .v329-season-card{
    grid-template-columns:1fr 32px!important;
    grid-template-areas:
      "badge arrow"
      "main main"!important;
    gap:10px!important;
    min-height:0!important;
    padding:14px!important;
    border-radius:17px!important;
  }

  body.v329-ui #view-course .v329-season-card .season-badge{
    width:max-content!important;
    max-width:calc(100% - 8px)!important;
    padding:7px 9px!important;
  }

  body.v329-ui #view-course .v329-season-card .season-main{
    grid-template-columns:30px minmax(0,1fr)!important;
  }

  body.v329-ui #view-course .v329-season-card .season-main h3{
    font-size:17px!important;
  }

  body.v329-ui #view-course .v329-season-card .season-main p{
    font-size:12.5px!important;
  }

  body.v329-ui #view-course .v329-season-card.v329-pinyin{
    grid-column:auto!important;
  }
}

@media(max-width:420px){
  body.v329-ui #v328LessonAccessStrip .v328-tier-card{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  body.v329-ui #v328LessonAccessStrip .v328-plus-button{
    grid-column:1/-1!important;
    width:100%!important;
  }
}