/* Khung làng cho thân trang bài học, luyện và kết quả.
   Màu lấy từ bản thiết kế làng. Không đụng trang thi (html[data-game-kind=exam]). */
.game-skin,
html[data-game-kind="practice"] {
  --walnut: #16100C;
  --bark: #231912;
  --bark-2: #2E2219;
  --line: rgba(255, 226, 190, .14);
  --paper: #F7EBDC;
  --ink: #16100C;
  --muted: #C4AD93;
  --ember: #FF9A2E;
  --ember-2: #FFC46B;
  --violet: #8577F5;
  --ok: #86D693;
  --lock: #7C6C5E;
  --brand: #FF9A2E;
  --brand-ink: #2a1608;
  --brand-soft: #3a2a1c;
  --bg: #16100C;
  --card: #231912;
  --good: #86D693;
  --bad: #E2574C;
}
.game-skin {
  background:
    radial-gradient(900px 420px at 72% -8%, rgba(255, 154, 46, .16), transparent 58%),
    linear-gradient(180deg, #2a1c14 0%, #16100c 42%, #120e0b 100%);
  color: var(--paper);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
}
.game-skin h1,
.game-skin h2,
.game-skin .done-card .score strong {
  font-family: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
}
.game-skin .masthead,
.game-skin .brand,
.game-skin .back { color: var(--paper); }
.game-skin .brand { color: var(--ember-2); }
.game-skin .eyebrow {
  color: var(--ember);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.game-skin .chip,
.game-skin .teen-chip {
  background: var(--bark-2);
  color: var(--ember-2);
  border: 1px solid var(--line);
}
.game-skin .teen-hero {
  background: linear-gradient(125deg, var(--bark-2), var(--bark));
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.game-skin .teen-hero:after { background: var(--ember); opacity: .28; }
.game-skin .panel,
.game-skin .journey-card,
.game-skin .lesson-card,
.game-skin .done-card,
.game-skin .video-wrap {
  background: var(--bark);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.game-skin .video-wrap { padding: 8px; }
.game-skin .lesson-card .rank,
.game-skin .strategy li:before,
.game-skin .teen-dot {
  background: var(--ember);
  color: #2a1608;
  border-radius: 50%;
}
.game-skin .teen-dot.is-done { background: var(--ok); color: #142016; }
.game-skin .teen-dot.is-current { background: var(--ember); color: #2a1608; }
.game-skin .strategy li,
.game-skin .question,
.game-skin fieldset.question,
.game-skin .option,
.game-skin .task,
.game-skin .listen-form,
.game-skin .cue-card,
.game-skin .speak-turn,
.game-skin textarea,
.game-skin input[type="text"],
.game-skin .word-tone {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
}
.game-skin .strategy li strong,
.game-skin .question legend,
.game-skin .option,
.game-skin .task label,
.game-skin textarea { color: var(--ink); }
.game-skin .strategy a,
.game-skin .question a,
.game-skin .option a { color: #5c3b16; }
.game-skin .panel > a:not(.button) { color: var(--ember-2); }
.game-skin .button,
.game-skin a.button,
.game-skin .teen-button {
  background: linear-gradient(180deg, var(--ember-2), var(--ember));
  color: #2a1608;
  border: 0;
  border-radius: 18px;
  font-weight: 700;
}
.game-skin .button.secondary,
.game-skin .teen-button.secondary {
  background: var(--bark-2);
  color: var(--paper);
  border: 1px solid var(--line);
}
.game-skin .option.is-correct {
  border: 2px solid var(--ok);
  box-shadow: 0 0 0 2px var(--ok);
}
.game-skin .option.is-wrong {
  border: 2px solid #E2574C;
  animation: lang-wrong .4s ease;
}
.game-skin .done-card .score strong {
  display: inline-grid;
  place-items: center;
  min-width: 96px;
  min-height: 96px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ember);
  color: #2a1608;
  font-size: 28px;
}
.game-skin button[id^="rec-"] {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ember);
  color: #2a1608;
}
html[data-game-kind="practice"] {
  background:
    radial-gradient(900px 420px at 72% -8%, rgba(255, 154, 46, .16), transparent 58%),
    linear-gradient(180deg, #2a1c14 0%, #16100c 42%, #120e0b 100%);
}
html[data-game-kind="practice"] body,
html[data-game-kind="practice"] .wrap-content,
html[data-game-kind="practice"] .container {
  background: transparent !important;
  color: var(--paper) !important;
  font-family: "Be Vietnam Pro", system-ui, sans-serif !important;
}
html[data-game-kind="practice"] .card,
html[data-game-kind="practice"] .qb-card,
html[data-game-kind="practice"] .card-writing,
html[data-game-kind="practice"] .bg-white,
html[data-game-kind="practice"] .bg-slate-50,
html[data-game-kind="practice"] .bg-slate-100 {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
}
html[data-game-kind="practice"] .card h1,
html[data-game-kind="practice"] .card h2,
html[data-game-kind="practice"] .card h3,
html[data-game-kind="practice"] .card p,
html[data-game-kind="practice"] .card label,
html[data-game-kind="practice"] .card-writing h1,
html[data-game-kind="practice"] .card-writing h2,
html[data-game-kind="practice"] .card-writing p,
html[data-game-kind="practice"] .card-writing a,
html[data-game-kind="practice"] .qb-card,
html[data-game-kind="practice"] .qb-card * {
  color: var(--ink) !important;
}
html[data-game-kind="practice"] textarea,
html[data-game-kind="practice"] .wrap-content input[type="text"],
html[data-game-kind="practice"] .wrap-content input[type="number"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid #c4ad93 !important;
  border-radius: 18px !important;
}
html[data-game-kind="practice"] .wrap-content button,
html[data-game-kind="practice"] main button,
html[data-game-kind="practice"] .container button {
  min-height: 48px;
  background: var(--bark-2) !important;
  color: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  font-weight: 700;
}
html[data-game-kind="practice"] .wrap-content button[type="submit"],
html[data-game-kind="practice"] .btn-primary,
html[data-game-kind="practice"] .button:not(.secondary) {
  background: var(--ember) !important;
  color: #2a1608 !important;
  border: 0 !important;
}
html[data-game-kind="practice"] .is-correct,
html[data-game-kind="practice"] .correct {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 2px var(--ok);
}
html[data-game-kind="practice"] .is-wrong,
html[data-game-kind="practice"] .wrong {
  animation: lang-wrong .4s ease;
}
html[data-game-kind="practice"] .speaking-record-btn,
html[data-game-kind="practice"] .game-skin button[id^="rec-"] {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: var(--ember) !important;
  color: #2a1608 !important;
}
html[data-game-kind="practice"] .game-summary,
.game-skin .game-summary {
  background: var(--bark) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ember) !important;
  border-radius: 22px !important;
}
html[data-game-kind="practice"] .game-summary a,
html[data-game-kind="practice"] .game-summary button,
.game-skin .game-summary a,
.game-skin .game-summary button {
  background: var(--ember) !important;
  color: #2a1608 !important;
}
html[data-game-kind="practice"] body { background: var(--walnut) !important; }
html[data-game-kind="practice"] .bg-green-600 { background-color: var(--bark-2) !important; }
html[data-game-kind="practice"] .bg-white,
html[data-game-kind="practice"] .bg-green-50,
html[data-game-kind="practice"] .bg-slate-50,
html[data-game-kind="practice"] .bg-gray-50,
html[data-game-kind="practice"] .bg-gray-100 {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
}
html[data-game-kind="practice"] .text-green-700,
html[data-game-kind="practice"] .text-gray-800,
html[data-game-kind="practice"] .text-gray-600,
html[data-game-kind="practice"] .text-slate-800,
html[data-game-kind="practice"] .text-slate-500,
html[data-game-kind="practice"] .text-blue-600 {
  color: #5c3b16 !important;
}
html[data-game-kind="practice"] .bg-green-600,
html[data-game-kind="practice"] .bg-green-600 h1,
html[data-game-kind="practice"] .bg-green-600 p,
html[data-game-kind="practice"] .text-white,
html[data-game-kind="practice"] .text-green-100 {
  color: var(--paper) !important;
}
html[data-game-kind="practice"] header.bg-white { background-color: var(--bark) !important; }
html[data-game-kind="practice"] header.bg-white h1,
html[data-game-kind="practice"] header.bg-white .text-blue-600 { color: var(--ember-2) !important; }
html[data-game-kind="practice"] .bg-blue-600,
html[data-game-kind="practice"] #mainOpenSettingsBtn,
html[data-game-kind="practice"] .bg-blue-100 {
  background-color: var(--ember) !important;
  color: #2a1608 !important;
}
html[data-game-kind="practice"] #writing-practice-shell {
  background: var(--bark) !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
}
html[data-game-kind="practice"] #writing-practice-shell textarea,
html[data-game-kind="practice"] #writing-practice-shell input,
html[data-game-kind="practice"] #writing-practice-shell select {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: 18px !important;
}
@keyframes lang-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
html[data-game-kind="practice"] .journey-card,
.game-skin .journey-card {
  background: #231912 !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .journey-card h2,
html[data-game-kind="practice"] .journey-card .nav-note,
html[data-game-kind="practice"] .journey-card .journey-step,
html[data-game-kind="practice"] .journey-card .journey-step small,
html[data-game-kind="practice"] .journey-card a,
.game-skin .journey-card h2,
.game-skin .journey-card .nav-note,
.game-skin .journey-card .journey-step,
.game-skin .journey-card .journey-step small {
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .writing-five-rail {
  background: #231912 !important;
  color: #F7EBDC !important;
  border-top: 1px solid rgba(255, 226, 190, .2) !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-game-kind="practice"] .writing-five-rail__head span { display: none !important; }
html[data-game-kind="practice"] .writing-five-rail__head {
  background: #231912 !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .writing-five-rail__number {
  width: 36px; height: 36px; border-radius: 50%;
  background: #2E2219 !important; color: #F7EBDC !important;
}
html[data-game-kind="practice"] .writing-five-rail button.is-current .writing-five-rail__number {
  background: #FF9A2E !important; color: #2A1404 !important;
}
html[data-game-kind="practice"] .writing-five-rail button,
html[data-game-kind="practice"] .writing-five-rail__copy strong,
html[data-game-kind="practice"] .writing-five-rail__head strong,
html[data-game-kind="practice"] .writing-five-flow h2 {
  color: #F7EBDC !important;
  background: transparent !important;
}
html[data-game-kind="practice"] .writing-five-rail__copy small,
html[data-game-kind="practice"] .writing-five-rail__head small,
html[data-game-kind="practice"] .writing-five-flow .text-slate-500,
html[data-game-kind="practice"] .writing-five-flow .text-slate-600,
html[data-game-kind="practice"] .writing-five-flow .text-gray-500,
html[data-game-kind="practice"] .writing-five-flow .text-gray-600 {
  color: #E7D3BC !important;
}
html[data-game-kind="practice"] #writing-practice-shell.bg-white {
  background: #16100C !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] #writing-practice-shell .bg-white {
  background: #F7EBDC !important;
  color: #16100C !important;
}
html[data-game-kind="practice"] .writing-five-flow .bg-white h1,
html[data-game-kind="practice"] .writing-five-flow .bg-white h2,
html[data-game-kind="practice"] .writing-five-flow .bg-white p {
  background: transparent !important;
  color: #16100C !important;
}
html[data-game-kind="practice"] #writing-practice-shell > div:first-child,
html[data-game-kind="practice"] #writing-practice-shell .bg-green-600,
html[data-game-kind="practice"] #writing-practice-shell .bg-green-600 h1,
html[data-game-kind="practice"] #writing-practice-shell > div:first-child h1 {
  background: transparent !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] #writing-practice-shell .wt-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
html[data-game-kind="practice"] #writing-practice-shell .wt-minutes {
  margin: 0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #2E2219 !important;
  color: #FFC46B !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
html[data-game-kind="practice"] #writing-practice-shell .wt-steps {
  margin: 0;
}
html[data-game-kind="practice"] .writing-five-flow .bg-green-50,
html[data-game-kind="practice"] .writing-five-flow .bg-green-50 p,
html[data-game-kind="practice"] .writing-five-step5-intro {
  background: transparent !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .teen-hero {
  background: linear-gradient(125deg, #2E2219, #231912) !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .teen-hero h1,
html[data-game-kind="practice"] .teen-hero p {
  background: transparent !important;
  color: #F7EBDC !important;
}
html[data-game-kind="practice"] .teen-hero .eyebrow {
  background: transparent !important;
  color: #FFC46B !important;
}
html[data-game-kind="practice"] .writing-five-flow textarea {
  background: #F7EBDC !important;
  color: #16100C !important;
}
html[data-game-kind="practice"] #study-room-launcher {
  top: 72px !important;
  bottom: auto !important;
  background: #231912 !important;
  color: #F7EBDC !important;
  border-color: rgba(255, 226, 190, .2) !important;
}
@media (prefers-reduced-motion: reduce) {
  .game-skin .option.is-wrong,
  html[data-game-kind="practice"] .is-wrong { animation: none; }
}
@media (max-width: 800px) {
  .game-skin .teen-wrap { padding-left: 16px; padding-right: 16px; }
  .game-skin .panel,
  .game-skin .lesson-card,
  .game-skin .done-card { border-radius: 18px; }
}
/* Tờ giấy sáng cho ruột bài. Viền gỗ giữ ở thanh trên. */
.game-skin .panel,
.game-skin .lesson-main .panel,
.game-skin .done-card {
  background: #FBF6EE !important;
  color: #2A2018 !important;
  border: 1px solid #E6D9C6 !important;
}
.game-skin .panel h2,
.game-skin .panel h3,
.game-skin .panel p,
.game-skin .panel li,
.game-skin .panel legend,
.game-skin .panel label,
.game-skin .panel .notice,
.game-skin .done-card,
.game-skin .done-card h2,
.game-skin .done-card p,
.game-skin .done-card li {
  color: #2A2018 !important;
}
.game-skin .panel .eyebrow,
.game-skin .done-card .eyebrow { color: #9B4A12 !important; }
.game-skin .panel input,
.game-skin .panel select,
.game-skin .panel textarea,
.game-skin .panel .read-text {
  background: #fff !important;
  color: #2A2018 !important;
  border: 1px solid #E6D9C6 !important;
}
.game-skin .kw,
.game-skin .sentence,
html[data-game-kind="practice"] .kw,
html[data-game-kind="practice"] .sentence {
  background: #FBF6EE !important;
  color: #2A2018 !important;
  border: 1px solid #E6D9C6 !important;
  border-radius: 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.game-skin .kw[aria-pressed="true"],
.game-skin .sentence[aria-pressed="true"],
html[data-game-kind="practice"] .kw[aria-pressed="true"],
html[data-game-kind="practice"] .sentence[aria-pressed="true"] {
  background: #FFE08A !important;
  color: #2A2018 !important;
}
.game-skin .kw:focus-visible,
.game-skin .sentence:focus-visible,
html[data-game-kind="practice"] .kw:focus-visible,
html[data-game-kind="practice"] .sentence:focus-visible {
  outline: 3px solid #D9741A !important;
  outline-offset: 2px;
}
.game-skin .feedback {
  background: #FBE4E0 !important;
  color: #9B2C1F !important;
  border-left: 4px solid #C2412F !important;
}
.game-skin .feedback.correct {
  background: #E3F4E8 !important;
  color: #1E6B3F !important;
  border-left: 4px solid #2E8B57 !important;
}
.game-skin .feedback strong,
.game-skin .feedback p { color: inherit !important; }

/* Claude 06/10 14:58: câu hỏi nằm TRÊN khung đáp án, không bị nền giấy đè nửa dòng (Sơn ảnh L-C1-B5) */
.game-skin fieldset.question{background:transparent;border:0;padding:0;border-radius:0}
.game-skin fieldset.question>legend{float:left;width:100%;margin:0 0 14px;padding:0;font-weight:800;font-size:1.12em;line-height:1.5;color:var(--ink)}
.game-skin fieldset.question>legend+*{clear:both}