/* VƯỜN NGOẠI NGỮ v6.15.332 — REAL FREE AI TRIALS */

:root{
  --v332-ink:#173f35;
  --v332-muted:#6d7f78;
  --v332-line:#d9e6e1;
  --v332-free:#2f7d55;
  --v332-free-soft:#f2faf5;
  --v332-ai:#536bc0;
  --v332-ai-soft:#f5f7ff;
}

/* Real FREE trial surfaces */
body.v332-ui .v332-free-ai-card{
  display:grid!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding:16px!important;
  border:1px solid #cfe1da!important;
  border-left:5px solid var(--v332-free)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#f8fcfa,#fff)!important;
  box-shadow:0 6px 18px rgba(25,83,68,.055)!important;
}
body.v332-ui .v332-free-ai-head span{
  display:block!important;
  color:#2f725d!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
body.v332-ui .v332-free-ai-head strong{
  display:block!important;
  margin-top:3px!important;
  color:var(--v332-ink)!important;
  font-size:17px!important;
  line-height:1.3!important;
}
body.v332-ui .v332-free-ai-head small{
  display:block!important;
  margin-top:3px!important;
  color:var(--v332-muted)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}
body.v332-ui .v332-prompt{
  padding:11px 12px!important;
  border:1px solid #dce7e3!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.v332-ui .v332-prompt small{
  display:block!important;
  color:#70847c!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
}
body.v332-ui .v332-prompt strong{
  display:block!important;
  margin-top:4px!important;
  color:#1e4038!important;
  font-size:15px!important;
  line-height:1.45!important;
}
body.v332-ui .v332-free-ai-card textarea{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:86px!important;
  padding:11px 12px!important;
  border:1px solid #cfded8!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#173f35!important;
  font:inherit!important;
  resize:vertical!important;
}
body.v332-ui .v332-trial-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

/* Results */
body.v332-ui .v332-trial-result{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin-top:10px;
  padding:13px;
  border:1px solid #dbe5ee;
  border-radius:14px;
  background:#fbfcff;
}
body.v332-ui .v332-trial-result[hidden]{display:none!important}
body.v332-ui .v332-score{
  display:grid!important;
  place-items:center!important;
  min-width:72px!important;
  min-height:72px!important;
  padding:8px!important;
  border-radius:14px!important;
  background:#eef2ff!important;
  color:#3c56a5!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
}
body.v332-ui .v332-score small{
  display:block!important;
  margin-top:3px!important;
  font-size:10px!important;
  color:#7080b4!important;
}
body.v332-ui .v332-trial-result p{
  margin:4px 0 7px!important;
  color:#485e57!important;
  font-size:13px!important;
  line-height:1.5!important;
}
body.v332-ui .v332-corrected{
  margin:7px 0!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  background:#fff!important;
  border:1px solid #e0e8e5!important;
  color:#294940!important;
  font-size:13px!important;
  line-height:1.45!important;
}
body.v332-ui .v332-mini-practice{
  margin-top:9px!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  background:#f4f8f7!important;
  color:#34554c!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}
body.v332-ui .v332-mini-practice details{margin-top:5px!important}
body.v332-ui .v332-mini-practice summary{cursor:pointer!important;font-weight:800!important}
body.v332-ui .v332-consumed{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px 10px!important;
  align-items:center!important;
  padding:10px 11px!important;
  border-radius:11px!important;
  background:#f3faf6!important;
  border:1px solid #d2e7da!important;
}
body.v332-ui .v332-consumed strong{
  color:#2c6653!important;
  font-size:12.5px!important;
}
body.v332-ui .v332-consumed span{
  grid-column:1!important;
  color:#718079!important;
  font-size:11.5px!important;
}
body.v332-ui .v332-consumed button{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  min-height:36px!important;
  padding:6px 10px!important;
  white-space:nowrap!important;
}
body.v332-ui .v332-remaining{
  margin-top:8px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  background:#f2faf5!important;
  color:#2f6f59!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* Shadowing / Roleplay real FREE score buttons */
body.v332-ui .v332-free-score-btn{
  border-color:#b9d9cb!important;
  background:#eef8f3!important;
  color:#24654f!important;
}
body.v332-ui .v332-shadow-result,
body.v332-ui .v332-role-result{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start!important;
}
body.v332-ui.v332-free-ai #skill-shadowing #shadowScoreBtn{
  display:none!important;
}
body.v332-ui.v332-free-ai #skill-dubbing.v332-en-role-free #dubScoreBtn{
  display:none!important;
}

/* FREE Writing: one real AI button replaces the locked premium action visually. */
body.v332-ui.v332-free-ai #skill-writing #gradeWriting{
  display:none!important;
}
body.v332-ui .v332-writing-free-btn{
  border-color:#bdd7ca!important;
  background:#f2faf5!important;
  color:#2b6b55!important;
  font-weight:850!important;
}
body.v332-ui .v332-writing-result{
  margin:12px 0 0!important;
}
body.v332-ui.v332-free-ai #skill-writing .v266-writing-lock,
body.v332-ui.v332-free-ai #skill-writing .v266-inline-demo{
  display:none!important;
}

/* FREE Grammar: real trial first, static demo becomes secondary/hidden. */
body.v332-ui.v332-free-ai #skill-grammar #grammarAiLocked .v266-inline-demo{
  display:none!important;
}
body.v332-ui.v332-free-ai #skill-grammar #grammarAiLocked{
  margin-top:10px!important;
  padding:12px!important;
  border-radius:13px!important;
  background:#fbfcfb!important;
}
body.v332-ui.v332-free-ai #skill-grammar #grammarAiLocked>strong{
  font-size:13px!important;
}
body.v332-ui.v332-free-ai #skill-grammar #grammarAiLocked>p{
  margin:3px 0 8px!important;
  font-size:12px!important;
}

/* FREE AI policies should read as trial rules, not as a paid meter card. */
body.v332-ui.v332-free-ai #aiSpeakingCreditRule,
body.v332-ui.v332-free-ai #shadowingCreditRule,
body.v332-ui.v332-free-ai #grammarCreditRule,
body.v332-ui.v332-free-ai #writingCreditRule{
  border-color:#d6e5de!important;
  background:#f8fcfa!important;
}
body.v332-ui.v332-free-ai #aiSpeakingCreditRule .ai-policy-rate,
body.v332-ui.v332-free-ai #shadowingCreditRule .ai-policy-rate,
body.v332-ui.v332-free-ai #grammarCreditRule .ai-policy-rate,
body.v332-ui.v332-free-ai #writingCreditRule .ai-policy-rate{
  color:#2d7058!important;
  background:#eaf6f0!important;
}

/* Keep top FREE/PLUS comparison visually dominant. */
body.v332-ui.v332-free-ai #view-lesson .v331-ai-access-strip{
  margin-bottom:12px!important;
}
body.v332-ui.v332-free-ai #view-lesson .v331-ai-tier.free{
  box-shadow:inset 0 0 0 1px rgba(44,125,84,.05)!important;
}

/* Mobile */
@media(max-width:700px){
  body.v332-ui .v332-trial-result,
  body.v332-ui .v332-shadow-result,
  body.v332-ui .v332-role-result{
    grid-template-columns:1fr!important;
  }
  body.v332-ui .v332-score{
    width:72px!important;
  }
  body.v332-ui .v332-consumed{
    grid-template-columns:1fr!important;
  }
  body.v332-ui .v332-consumed span,
  body.v332-ui .v332-consumed button{
    grid-column:1!important;
    grid-row:auto!important;
  }
  body.v332-ui .v332-consumed button{
    width:100%!important;
  }
  body.v332-ui .v332-trial-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.v332-ui .v332-trial-actions button{
    width:100%!important;
  }
}