/* VƯỜN NGOẠI NGỮ v6.15.335 — FREE FLOW HARDENING
   iOS-first responsive patch. */

:root{
  --v334-ink:#173f35;
  --v334-muted:#6d7f78;
  --v334-line:#d9e6e1;
  --v334-soft:#f8fbfa;
  --v334-free:#2f7d55;
  --v334-free-soft:#f2faf5;
  --v334-ai:#566fc2;
  --v334-ai-soft:#f4f7ff;
  --v334-deep:#526fb8;
}

/* ---------------------------------------------------------
   1) Garden CTA timing
   --------------------------------------------------------- */
body.v334-free-flow #skill-quiz .v287-gate,
body.v334-free-flow #skill-quiz .v271-garden-gate,
body.v334-free-flow #skill-quiz .v272-garden-gate,
body.v334-free-flow #skill-quiz [data-v272-garden],
body.v334-free-flow #skill-quiz #v294GameGarden,
body.v334-free-flow #skill-quiz #v296GameGarden,
body.v334-free-flow #skill-quiz #v298GameGarden,
body.v334-free-flow #skill-listening .v287-gate,
body.v334-free-flow #skill-listening .v271-garden-gate,
body.v334-free-flow #skill-listening .v272-garden-gate,
body.v334-free-flow #skill-listening [data-v272-garden]{
  display:none!important;
}
body.v334-free-flow #skill-quiz.v334-free-current-done .v287-gate,
body.v334-free-flow #skill-quiz.v334-free-current-done .v271-garden-gate,
body.v334-free-flow #skill-quiz.v334-free-current-done .v272-garden-gate,
body.v334-free-flow #skill-quiz.v334-free-current-done [data-v272-garden],
body.v334-free-flow #skill-quiz.v334-free-current-done #v294GameGarden,
body.v334-free-flow #skill-quiz.v334-free-current-done #v296GameGarden,
body.v334-free-flow #skill-quiz.v334-free-current-done #v298GameGarden,
body.v334-free-flow #skill-listening.v334-free-current-done .v287-gate,
body.v334-free-flow #skill-listening.v334-free-current-done .v271-garden-gate,
body.v334-free-flow #skill-listening.v334-free-current-done .v272-garden-gate,
body.v334-free-flow #skill-listening.v334-free-current-done [data-v272-garden]{
  display:grid!important;
}
body.v334-free-flow #skill-reading.v334-no-garden-upsell .v287-gate,
body.v334-free-flow #skill-reading.v334-no-garden-upsell .v271-garden-gate,
body.v334-free-flow #skill-reading.v334-no-garden-upsell .v272-garden-gate,
body.v334-free-flow #skill-reading.v334-no-garden-upsell [data-v272-garden],
body.v334-free-flow #skill-grammar.v334-no-garden-upsell .v287-gate,
body.v334-free-flow #skill-grammar.v334-no-garden-upsell .v271-garden-gate,
body.v334-free-flow #skill-grammar.v334-no-garden-upsell .v272-garden-gate,
body.v334-free-flow #skill-grammar.v334-no-garden-upsell [data-v272-garden]{
  display:none!important;
}
body.v334-free-flow .v334-commercial-hidden{
  display:none!important;
}

/* ---------------------------------------------------------
   2) Roleplay: visible record/replay/AI controls
   --------------------------------------------------------- */
body.v334-free-flow #skill-dubbing .dubbing-actions{
  display:none!important;
}
body.v334-free-flow #skill-dubbing .dub-full-launch{
  display:none!important;
}
body.v334-free-flow #v334RoleActionBar{
  display:grid!important;
  gap:10px!important;
  margin:12px 0!important;
  padding:12px!important;
  border:1px solid #cfe2da!important;
  border-left:5px solid var(--v334-free)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#f7fcf9,#fff)!important;
  box-shadow:0 5px 15px rgba(18,66,56,.045)!important;
}
body.v334-free-flow #v334RoleActionBar .v334-role-action-head span,
body.v334-free-flow #v334RoleActionBar .v334-role-action-head strong{
  display:block!important;
}
body.v334-free-flow #v334RoleActionBar .v334-role-action-head span{
  color:#2f725d!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
}
body.v334-free-flow #v334RoleActionBar .v334-role-action-head strong{
  margin-top:3px!important;
  color:var(--v334-ink)!important;
  font-size:15px!important;
  line-height:1.35!important;
}
body.v334-free-flow #v334RoleActionBar .v334-role-buttons{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}
body.v334-free-flow #v334RoleActionBar .v334-role-buttons button{
  min-width:0!important;
  min-height:44px!important;
  padding:8px 9px!important;
  border-radius:10px!important;
  white-space:normal!important;
  line-height:1.25!important;
  font-size:12.5px!important;
  font-weight:850!important;
}
body.v334-free-flow #v334RoleActionBar .v334-ai-btn{
  border-color:#cbd5f0!important;
  background:var(--v334-ai-soft)!important;
  color:#435ca6!important;
}
body.v334-free-flow #v334RoleActionBar>[data-v334-role-status]{
  color:var(--v334-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
body.v334-free-flow #skill-dubbing .dubbing-stage-head>b{
  max-width:150px!important;
  white-space:normal!important;
  text-align:right!important;
  line-height:1.25!important;
}

/* ---------------------------------------------------------
   3) Game Vietnamese question support
   --------------------------------------------------------- */
body.v334-free-flow #skill-quiz .v334-runtime-question-vi,
body.v334-free-flow #skill-quiz .v334-native-question-vi{
  display:flex!important;
  gap:7px!important;
  align-items:flex-start!important;
  margin:7px 0 10px!important;
  padding:8px 10px!important;
  border-left:3px solid #72a596!important;
  border-radius:8px!important;
  background:#f6faf8!important;
}
body.v334-free-flow #skill-quiz .v334-runtime-question-vi span,
body.v334-free-flow #skill-quiz .v334-native-question-vi span{
  flex:0 0 auto!important;
}
body.v334-free-flow #skill-quiz .v334-runtime-question-vi strong,
body.v334-free-flow #skill-quiz .v334-native-question-vi strong{
  color:#49645c!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:750!important;
}

/* ---------------------------------------------------------
   4) Deep listening real FREE trial
   --------------------------------------------------------- */
body.v334-free-flow #skill-listening .v334-deep-listening{
  display:grid!important;
  gap:11px!important;
  margin:12px 0 16px!important;
  padding:14px!important;
  border:1px solid #d4deef!important;
  border-left:5px solid var(--v334-deep)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#f6f8ff,#fff)!important;
  box-shadow:0 5px 16px rgba(47,67,124,.045)!important;
}
body.v334-free-flow #skill-listening .v334-deep-listening header span,
body.v334-free-flow #skill-listening .v334-deep-listening header strong,
body.v334-free-flow #skill-listening .v334-deep-listening header small{
  display:block!important;
}
body.v334-free-flow #skill-listening .v334-deep-listening header span{
  color:#50669e!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
}
body.v334-free-flow #skill-listening .v334-deep-listening header strong{
  margin-top:3px!important;
  color:var(--v334-ink)!important;
  font-size:16px!important;
  line-height:1.35!important;
}
body.v334-free-flow #skill-listening .v334-deep-listening header small{
  margin-top:3px!important;
  color:var(--v334-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
body.v334-free-flow #skill-listening .v334-deep-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.v334-free-flow #skill-listening .v334-deep-grid article{
  display:grid!important;
  gap:8px!important;
  min-width:0!important;
  padding:12px!important;
  border:1px solid #e0e6f1!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.v334-free-flow #skill-listening .v334-deep-grid article.done{
  border-color:#badacb!important;
  background:#f5fbf7!important;
}
body.v334-free-flow #skill-listening .v334-deep-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
body.v334-free-flow #skill-listening .v334-deep-title b{
  color:#4f65a0!important;
  font-size:12px!important;
}
body.v334-free-flow #skill-listening .v334-deep-title button{
  flex:0 0 auto!important;
  min-height:36px!important;
  padding:6px 9px!important;
}
body.v334-free-flow #skill-listening .v334-mask{
  color:var(--v334-ink)!important;
  font-size:16px!important;
  line-height:1.45!important;
  font-weight:850!important;
}
body.v334-free-flow #skill-listening .v334-deep-grid article>p{
  margin:0!important;
  color:var(--v334-ink)!important;
  font-size:13.5px!important;
}
body.v334-free-flow #skill-listening .v334-deep-grid article>small{
  color:var(--v334-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
body.v334-free-flow #skill-listening .v334-deep-answer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
}
body.v334-free-flow #skill-listening .v334-deep-answer input,
body.v334-free-flow #skill-listening .v334-deep-grid textarea{
  width:100%!important;
  box-sizing:border-box!important;
  padding:9px 10px!important;
  border:1px solid #d6e0dc!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--v334-ink)!important;
  font:inherit!important;
}
body.v334-free-flow #skill-listening .v334-deep-complete{
  padding:10px 11px!important;
  border:1px solid #cde2d7!important;
  border-radius:11px!important;
  background:#f3faf6!important;
}
body.v334-free-flow #skill-listening .v334-deep-complete strong,
body.v334-free-flow #skill-listening .v334-deep-complete small{
  display:block!important;
}
body.v334-free-flow #skill-listening .v334-deep-complete strong{
  color:#2d6c56!important;
  font-size:13px!important;
}
body.v334-free-flow #skill-listening .v334-deep-complete small{
  margin-top:2px!important;
  color:var(--v334-muted)!important;
  font-size:11.5px!important;
}

/* ---------------------------------------------------------
   5) Reading: one no-audio practice with recording + AI
   --------------------------------------------------------- */
body.v334-free-flow #v334SilentReading{
  display:grid!important;
  gap:11px!important;
  margin:14px 0!important;
  padding:14px!important;
  border:1px solid #d5e4de!important;
  border-left:5px solid #6d8e63!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#fbfdf9,#fff)!important;
}
body.v334-free-flow #v334SilentReading header span,
body.v334-free-flow #v334SilentReading header strong,
body.v334-free-flow #v334SilentReading header small{
  display:block!important;
}
body.v334-free-flow #v334SilentReading header span{
  color:#66834a!important;
  font-size:10.5px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
}
body.v334-free-flow #v334SilentReading header strong{
  margin-top:3px!important;
  color:var(--v334-ink)!important;
  font-size:16px!important;
}
body.v334-free-flow #v334SilentReading header small{
  margin-top:3px!important;
  color:var(--v334-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-script{
  padding:12px!important;
  border:1px solid #e1e8e4!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-script p{
  margin:0!important;
  color:var(--v334-ink)!important;
  font-size:15px!important;
  line-height:1.6!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-script details{
  margin-top:7px!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-actions button{
  min-width:0!important;
  min-height:42px!important;
  padding:8px 9px!important;
  white-space:normal!important;
}
body.v334-free-flow #v334SilentReading .v334-ai-btn{
  border-color:#cbd5f0!important;
  background:var(--v334-ai-soft)!important;
  color:#435ca6!important;
}
body.v334-free-flow #v334SilentReading audio{
  width:100%!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-result{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:10px!important;
  padding:10px!important;
  border:1px solid #dce6e2!important;
  border-radius:11px!important;
  background:#fff!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-result[hidden]{
  display:none!important;
}
body.v334-free-flow #v334SilentReading .v334-score{
  display:grid!important;
  place-items:center!important;
  min-width:68px!important;
  min-height:68px!important;
  padding:8px!important;
  border-radius:12px!important;
  background:#eef3ff!important;
  color:#4b62a6!important;
}
body.v334-free-flow #v334SilentReading .v334-score strong{
  font-size:23px!important;
  line-height:1!important;
}
body.v334-free-flow #v334SilentReading .v334-score small{
  font-size:10px!important;
}
body.v334-free-flow #v334SilentReading .v334-silent-result p{
  margin:4px 0!important;
  color:#4c625b!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}

/* ---------------------------------------------------------
   6) Mobile / iOS
   --------------------------------------------------------- */
@media(max-width:900px){
  body.v334-free-flow #v334RoleActionBar .v334-role-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v334-free-flow #skill-listening .v334-deep-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:700px){
  body.v334-free-flow #v334RoleActionBar{
    margin:10px 0!important;
    padding:10px!important;
  }
  body.v334-free-flow #v334RoleActionBar .v334-role-buttons{
    grid-template-columns:1fr!important;
  }
  body.v334-free-flow #v334RoleActionBar .v334-role-buttons button{
    width:100%!important;
  }
  body.v334-free-flow #skill-dubbing .dubbing-stage-head{
    grid-template-columns:1fr!important;
  }
  body.v334-free-flow #skill-dubbing .dubbing-stage-head>b{
    max-width:none!important;
    text-align:left!important;
  }
  body.v334-free-flow #skill-listening .v334-deep-answer{
    grid-template-columns:1fr!important;
  }
  body.v334-free-flow #skill-listening .v334-deep-answer button{
    width:100%!important;
  }
  body.v334-free-flow #v334SilentReading .v334-silent-actions{
    grid-template-columns:1fr!important;
  }
  body.v334-free-flow #v334SilentReading .v334-silent-actions button{
    width:100%!important;
  }
  body.v334-free-flow #v334SilentReading .v334-silent-result{
    grid-template-columns:1fr!important;
  }
}
@supports(-webkit-touch-callout:none){
  body.v334-free-flow #v334RoleActionBar,
  body.v334-free-flow #v334SilentReading,
  body.v334-free-flow #skill-listening .v334-deep-listening{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    contain:none!important;
  }
  body.v334-free-flow #v334RoleActionBar button,
  body.v334-free-flow #v334SilentReading button,
  body.v334-free-flow #skill-listening .v334-deep-listening button,
  body.v334-free-flow #skill-listening .v334-deep-listening input,
  body.v334-free-flow #skill-listening .v334-deep-listening textarea{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}