/* VƯỜN NGOẠI NGỮ v6.15.331 — GUARANTEED AI FREE/PLUS
   Every AI-enabled Lesson function owns a visible top comparison strip. */

:root{
  --v331-ink:#173f35;
  --v331-muted:#6e8079;
  --v331-line:#dbe7e2;
  --v331-free:#2f7d55;
  --v331-free-soft:#f2faf5;
  --v331-plus:#6b45b2;
  --v331-plus-soft:#f7f2ff;
  --v331-en:#4c72c2;
  --v331-zh:#b85a50;
}

/* Never show the generic Lesson strip at the same time as an AI function strip. */
body.v331-ui.v331-ai-function-active #v328LessonAccessStrip{
  display:none!important;
}

/* The AI function's FREE/PLUS strip must be the first visible card. */
body.v331-ui #view-lesson .skill-panel>.v331-ai-access-strip{
  display:grid!important;
  grid-template-columns:minmax(170px,.72fr) minmax(250px,1fr) minmax(290px,1.12fr)!important;
  gap:9px!important;
  align-items:stretch!important;
  width:100%!important;
  margin:0 0 14px!important;
  padding:9px!important;
  border:1px solid #d9e2ef!important;
  border-left:5px solid var(--v331-en)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#fbfcff,#fff)!important;
  box-shadow:0 7px 20px rgba(39,58,105,.055)!important;
  box-sizing:border-box!important;
}
body.v331-ui.track-theme-zh #view-lesson .skill-panel>.v331-ai-access-strip,
body.v331-ui #view-lesson .skill-panel>.v331-ai-access-strip.is-zh{
  border-left-color:var(--v331-zh)!important;
  border-color:#ead7d3!important;
  background:linear-gradient(135deg,#fff9f7,#fff)!important;
}

body.v331-ui .v331-ai-access-head{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:0!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  background:#f7f9fd!important;
}
body.v331-ui .v331-ai-access-head span{
  color:#6675a4!important;
  font-size:10.5px!important;
  line-height:1.3!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
body.v331-ui .v331-ai-access-head strong{
  color:var(--v331-ink)!important;
  font-size:14px!important;
  line-height:1.32!important;
}

body.v331-ui .v331-ai-tier{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:9px!important;
  align-items:center!important;
  min-width:0!important;
  padding:10px 12px!important;
  border:1px solid var(--v331-line)!important;
  border-radius:13px!important;
}
body.v331-ui .v331-ai-tier.free{
  border-color:#cbe4d5!important;
  background:var(--v331-free-soft)!important;
}
body.v331-ui .v331-ai-tier.plus{
  border-color:#dccff0!important;
  background:var(--v331-plus-soft)!important;
}

body.v331-ui .v331-ai-badge{
  padding:6px 9px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
body.v331-ui .v331-ai-tier.free .v331-ai-badge{
  color:#276947!important;
  background:#e3f3e9!important;
}
body.v331-ui .v331-ai-tier.plus .v331-ai-badge{
  color:#6640a7!important;
  background:#ede4fb!important;
}

body.v331-ui .v331-ai-tier>div:nth-child(2){
  min-width:0!important;
}
body.v331-ui .v331-ai-tier strong,
body.v331-ui .v331-ai-tier small{
  display:block!important;
}
body.v331-ui .v331-ai-tier strong{
  color:#24483f!important;
  font-size:13px!important;
  line-height:1.35!important;
}
body.v331-ui .v331-ai-tier small{
  margin-top:2px!important;
  color:#73847d!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}

body.v331-ui .v331-ai-plus-btn{
  min-height:34px!important;
  padding:6px 10px!important;
  border:1px solid #cabbe8!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#6743a4!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

/* Make the transition from promo → function heading visually intentional. */
body.v331-ui #view-lesson .v331-ai-panel>.v330-activity-heading,
body.v331-ui #view-lesson .v331-ai-panel>.activity-heading{
  margin-top:0!important;
}

/* Strong module labels for quick scanning. */
body.v331-ui #view-lesson .v331-ai-panel[data-v331-ai-kind="speaking"]>.v331-ai-access-strip{
  border-left-color:#168b78!important;
}
body.v331-ui #view-lesson .v331-ai-panel[data-v331-ai-kind="shadowing"]>.v331-ai-access-strip{
  border-left-color:#5b78c5!important;
}
body.v331-ui #view-lesson .v331-ai-panel[data-v331-ai-kind="roleplay"]>.v331-ai-access-strip{
  border-left-color:#8660bd!important;
}
body.v331-ui #view-lesson .v331-ai-panel[data-v331-ai-kind="grammar"]>.v331-ai-access-strip{
  border-left-color:#b88635!important;
}
body.v331-ui #view-lesson .v331-ai-panel[data-v331-ai-kind="writing"]>.v331-ai-access-strip{
  border-left-color:#5b8a68!important;
}

@media(max-width:1100px){
  body.v331-ui #view-lesson .skill-panel>.v331-ai-access-strip{
    grid-template-columns:1fr 1fr!important;
  }
  body.v331-ui .v331-ai-access-head{
    grid-column:1/-1!important;
  }
}

@media(max-width:700px){
  body.v331-ui #view-lesson .skill-panel>.v331-ai-access-strip{
    grid-template-columns:1fr!important;
    padding:8px!important;
  }
  body.v331-ui .v331-ai-access-head{
    grid-column:auto!important;
  }
  body.v331-ui .v331-ai-tier{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  body.v331-ui .v331-ai-plus-btn{
    grid-column:1/-1!important;
    width:100%!important;
  }
}