/* VƯỜN NGOẠI NGỮ v6.15.344 — English FREE flow polish */

/* Keep the English FREE Roleplay surface compact and visually separate the two trial modes. */
body.v344-en-role-free #skill-dubbing{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body.v344-en-role-free #skill-dubbing #dubbingCreditRule,
body.v344-en-role-free #skill-dubbing .dubbing-head,
body.v344-en-role-free #skill-dubbing #v271RoleplayTrialPath,
body.v344-en-role-free #skill-dubbing #v271RoleplayVisibleScript,
body.v344-en-role-free #skill-dubbing #v271TrialDecision,
body.v344-en-role-free #skill-dubbing #v289RoleGardenGate,
body.v344-en-role-free #skill-dubbing #v290RoleGardenGate{
  display:none!important;
}
body.v344-en-role-free #skill-dubbing .activity-heading{
  margin-bottom:12px!important;
}
body.v344-en-role-free #skill-dubbing .activity-heading h2{
  font-size:clamp(22px,2.2vw,30px)!important;
  line-height:1.3!important;
}
body.v344-en-role-free #skill-dubbing .activity-heading p{
  font-size:16px!important;
  line-height:1.55!important;
  max-width:820px;
}
body.v344-en-role-free .v344-role-modes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:8px 0 14px;
}
body.v344-en-role-free .v344-role-modes>button{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  width:100%;
  min-height:116px;
  padding:14px;
  border:1px solid #d7e5e2;
  border-radius:18px;
  background:#fff;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
  font:inherit;
}
body.v344-en-role-free .v344-role-modes>button>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:#f1f7f6;
  font-size:13px;
  font-weight:900;
  color:#0f766e;
}
body.v344-en-role-free .v344-role-modes>button b{
  display:block;
  margin-bottom:5px;
  font-size:18px;
  line-height:1.3;
  color:#183f37;
}
body.v344-en-role-free .v344-role-modes>button strong{
  display:inline-flex;
  margin-bottom:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#f0fdf4;
  font-size:13px;
  line-height:1.25;
  color:#166534;
}
body.v344-en-role-free .v344-role-modes>button small{
  display:block;
  font-size:14px;
  line-height:1.5;
  color:#64748b;
}
body.v344-en-role-free .v344-role-modes>button.active{
  border-color:#0f8f83;
  background:#f2fbf9;
  box-shadow:0 0 0 2px rgba(15,143,131,.10);
}
body.v344-en-role-free .v344-role-modes>button.active>span{
  background:#0f8f83;
  color:#fff;
}

body.v344-en-role-free #dubbingShell{
  padding:14px!important;
  border-radius:18px!important;
}
body.v344-en-role-free #dubbingStage{
  margin:0!important;
}
body.v344-en-role-free #dubbingStage :where(
  .dubbing-stage-head strong,
  .dubbing-target-card strong,
  .dubbing-script-line strong
){
  font-family:"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:18px!important;
  line-height:1.55!important;
  font-weight:700!important;
  letter-spacing:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  font-synthesis:auto!important;
}
body.v344-en-role-free #dubbingStage .dubbing-script-line{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:start!important;
  padding:11px 12px!important;
  min-width:0!important;
}
body.v344-en-role-free #dubbingStage .dubbing-script-line>span{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  font-size:12px!important;
  line-height:1!important;
}
body.v344-en-role-free #dubbingStage .dubbing-target-card{
  min-width:0!important;
}
body.v344-en-role-free #dubbingStage .dubbing-target-card>div{
  min-width:0!important;
}
body.v344-en-role-free #dubbingStage .dubbing-speed-control,
body.v344-en-role-free #dubbingStage .dub-full-launch{
  display:none!important;
}
body.v344-en-role-free #skill-dubbing .dubbing-audio-settings{
  margin-top:12px!important;
}

body.v344-en-role-free .v344-role-practice-label{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 8px;
  padding:11px 13px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}
body.v344-en-role-free .v344-role-practice-label span{
  font-size:12px;
  line-height:1.35;
  font-weight:850;
  color:#0f766e;
}
body.v344-en-role-free .v344-role-practice-label strong{
  font-size:15px;
  line-height:1.45;
  color:#334155;
}
body.v344-en-role-free #v344FullRecordBtn{
  width:100%;
  min-height:50px;
  margin:2px 0 8px;
  font-size:16px!important;
  font-weight:800!important;
}
body.v344-en-role-free #skill-dubbing .dubbing-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  margin-top:0!important;
}
body.v344-en-role-free #skill-dubbing .dubbing-actions>button{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  padding:9px 10px!important;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:15px!important;
  line-height:1.35!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
body.v344-en-role-free #skill-dubbing .dubbing-actions .btn-credit-note{
  display:block!important;
  margin-top:3px!important;
  font-size:11px!important;
  line-height:1.25!important;
  white-space:normal!important;
}
body.v344-en-role-free #skill-dubbing #v274RoleplayAiHint{
  grid-column:1 / -1!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  font-size:13px!important;
  line-height:1.45!important;
}

body.v344-en-role-free .v344-role-plus-gate{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  margin-top:14px;
  padding:16px;
  border:1px solid #cfe5df;
  border-radius:18px;
  background:linear-gradient(145deg,#f1faf7,#fffaf0);
}
body.v344-en-role-free .v344-role-plus-gate span{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  font-weight:900;
  color:#0f766e;
}
body.v344-en-role-free .v344-role-plus-gate strong{
  display:block;
  font-size:16px;
  line-height:1.5;
  color:#20463e;
}
body.v344-en-role-free .v344-role-plus-gate small{
  display:block;
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
  color:#64748b;
}
body.v344-en-role-free .v344-role-plus-gate>div:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
body.v344-en-role-free .v344-role-plus-gate button{
  min-height:44px;
  white-space:nowrap;
}

/* Game translation: v343 is the single visible Vietnamese line. */
body.v344-ui #skill-quiz .v333-question-vi,
body.v344-ui #skill-quiz .v334-native-question-vi,
body.v344-ui #skill-quiz .v334-runtime-question-vi{
  display:none!important;
}
body.v344-ui #skill-quiz .v343-game-question-vi{
  display:block!important;
}

/* Shadowing next card: visually explicit handoff to AI Reflex. */
body.v344-ui #skill-shadowing .v344-shadow-next{
  margin-top:16px!important;
}
body.v344-ui #skill-shadowing .v344-shadow-next strong{
  font-size:18px!important;
}

@media(max-width:640px){
  body.v344-en-role-free .v344-role-modes{
    grid-template-columns:1fr;
    gap:9px;
  }
  body.v344-en-role-free .v344-role-modes>button{
    min-height:auto;
    padding:12px;
  }
  body.v344-en-role-free #dubbingStage :where(
    .dubbing-stage-head strong,
    .dubbing-target-card strong,
    .dubbing-script-line strong
  ){
    font-size:16px!important;
    line-height:1.5!important;
  }
  body.v344-en-role-free #skill-dubbing .dubbing-actions{
    grid-template-columns:1fr!important;
  }
  body.v344-en-role-free #skill-dubbing #v274RoleplayAiHint{
    grid-column:1!important;
  }
  body.v344-en-role-free .v344-role-plus-gate{
    grid-template-columns:1fr;
  }
  body.v344-en-role-free .v344-role-plus-gate>div:last-child{
    justify-content:flex-start;
  }
}