/* ═══════════════════════════════════════════════
   ETOPIK SPEAKING — Premium Design
   Royal Blue + Rose, clean, modern
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap');

:root {
  --c-bg:       #f0f7ff;
  --c-surface:  #ffffff;
  --c-primary:  #0ea5e9;
  --c-primary2: #0284c7;
  --c-accent:   #38bdf8;
  --c-accent2:  #7dd3fc;
  --c-green:    #22c55e;
  --c-yellow:   #eab308;
  --c-red:      #ef4444;
  --c-blue:     #0ea5e9;
  --c-text:     #0c1a2e;
  --c-muted:    #64748b;
  --c-border:   #e2e8f0;
  --c-ai-bg:    #f0f9ff;
  --c-usr-bg:   #f8fafc;
  --c-card:     #ffffff;
  --r:          16px;
  --r-sm:       10px;
  --shadow:     0 4px 24px rgba(14,165,233,.08);
  --shadow-lg:  0 8px 32px rgba(14,165,233,.14);
}

* { box-sizing: border-box; }

.esp-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-bottom: 80px;
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
}

/* Desktop: full width, không center, không giới hạn */
@media (min-width: 600px) {
  .esp-wrap {
    max-width: 100%;
    width: 100%;
    box-shadow: none;
  }
  #etopik-speaking-app {
    width: 100%;
    min-height: 100vh;
  }

  /* Journey Map desktop: 2 cột side by side */
  .esp-journey { max-width: 100%; }

  .ez-grid-worlds {
    display: grid;
    grid-template-columns: 1fr;  /* 1 cột — giữ đúng thứ tự Sinh Tồn trước */
    gap: 0;
  }

  /* World sections 2 cột */
  .esp-world-section {
    padding: 32px 40px 16px !important;
  }

  /* Header rộng full */
  .esp-header {
    padding: 12px 32px !important;
  }

  /* Node lớn hơn trên desktop */
  .esp-world-node {
    width: 72px !important;
    height: 72px !important;
  }

  /* World tabs — wrap trên cả desktop */
  .esp-world-tabs {
    padding: 10px 32px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Chat, lesson, shadowing — giới hạn width để dễ đọc */
  .esp-chat-wrap,
  .esp-lesson-wrap,
  .esp-shadowing-wrap,
  .esp-summary-wrap,
  .esp-prep-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 900px) {
  .esp-world-section { padding: 24px 24px 12px !important; }
  .esp-header { padding: 10px 24px !important; }
}

/* Dark wrap cho journey */
.esp-wrap-dark {
  background: #060810;
}

/* ══ HEADER ══════════════════════════════════ */
.esp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 8, 20, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
  min-height: 52px;
}
.esp-back-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px; cursor: pointer;
  color: rgba(255,255,255,.7) !important;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.esp-back-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.esp-header-title {
  flex: 1;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  color: #ffffff !important;
  white-space: nowrap;        /* ← KHÔNG cho xuống dòng */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Fix mọi thẻ con trong header bị theme làm trong suốt */
.esp-header-title *,
.esp-header-title span,
.esp-header-title a {
  color: #ffffff !important;
  white-space: nowrap;
}
.esp-header-right {
  display: flex; gap: 6px; align-items: center;
  flex-shrink: 0;
}
.esp-icon-btn {
  background: none !important; border: none;
  font-size: 17px; cursor: pointer; padding: 5px;
  color: rgba(255,255,255,.6) !important;
  transition: color .2s;
  flex-shrink: 0;
}
.esp-icon-btn:hover { color: #fff !important; }
.esp-end-btn {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
  color: #fff !important; border: none;
  border-radius: 20px; padding: 6px 12px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.esp-end-btn:hover { opacity: .85; }

/* Thanh kết thúc buổi bên trong chat — luôn hiển thị dù header bị ẩn */
.esp-chat-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: rgba(6,8,20,.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 50;
}
.esp-chat-topbar-title {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; margin-right: 10px;
}
.esp-chat-end-btn {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed);
  color: #fff; border: none;
  border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: opacity .2s; font-family: inherit;
}
.esp-chat-end-btn:hover { opacity: .85; }

/* Stats bar — compact trên mobile */
.esp-stats-bar {
  display: flex; gap: 5px;
  font-size: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.esp-stats-bar::-webkit-scrollbar { display: none; }
.esp-stats-bar span {
  background: rgba(14,165,233,.15);
  color: #7dd3fc !important;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══ HERO ══════════════════════════════════ */
.esp-hero {
  background: linear-gradient(135deg, #075985, #0ea5e9, #0284c7);
  color: #fff; padding: 24px 20px; text-align: center;
}
.esp-hero h2 { margin: 0 0 5px; font-size: 19px; font-weight: 800; }
.esp-hero p  { margin: 0; font-size: 13px; opacity: .85; }

/* ══ LEVEL TABS ══════════════════════════════ */
.esp-level-tabs {
  display: flex; gap: 8px;
  padding: 14px 16px 0;
  overflow-x: auto; scrollbar-width: none;
}
.esp-level-tabs::-webkit-scrollbar { display: none; }
.esp-level-tab {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 20px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--c-muted); white-space: nowrap;
  transition: all .2s;
}
.esp-level-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,165,233,.3);
}

/* ══ SCENARIO CARDS ══════════════════════════ */
.esp-scenario-grid {
  display: flex; flex-direction: column;
  gap: 12px; padding: 14px 16px;
}
.esp-scenario-card {
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  gap: 0 12px;
  transition: transform .2s, box-shadow .2s;
}
.esp-scenario-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.esp-card-emoji {
  grid-row: 1/3;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: #dbeafe;
  border-radius: 14px;
}
.esp-card-body { grid-column: 2; }
.esp-card-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.esp-card-ko { font-size: 11px; color: var(--c-muted); margin-bottom: 6px; }
.esp-card-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.esp-level-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.esp-level-beginner     { background: #dbeafe; color: #075985; }
.esp-level-intermediate { background: #dbeafe; color: #075985; }
.esp-level-advanced     { background: #f0f9ff; color: #1e40af; }
.esp-level-all          { background: #f3f4f6; color: #374151; }
.esp-card-goal { font-size: 12px; color: var(--c-muted); }
.esp-btn-start {
  grid-column: 2; margin-top: 10px;
  background: var(--c-primary);
  color: #fff; border: none;
  border-radius: var(--r-sm); padding: 9px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .2s;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.esp-btn-start:hover { opacity: .88; }

/* ══ REFUND WIDGET ══════════════════════════ */
.esp-refund-widget {
  margin: 0 16px 16px;
  background: var(--c-surface);
  border: 1.5px solid #bae6fd;
  border-radius: var(--r); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.esp-refund-header {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.esp-refund-pct { color: var(--c-primary); font-size: 15px; }
.esp-rbar {
  display: flex; align-items: center;
  gap: 8px; font-size: 11px; margin-bottom: 6px;
}
.esp-rbar span:first-child { min-width: 80px; font-weight: 600; }
.esp-bar-track {
  flex: 1; height: 6px;
  background: #dbeafe; border-radius: 3px; overflow: hidden;
}
.esp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: 3px; transition: width .6s ease;
}
.esp-refund-footer {
  margin-top: 8px; font-size: 11px;
  color: var(--c-muted);
  display: flex; justify-content: space-between;
}
.esp-refund-footer a { color: var(--c-primary); font-weight: 600; text-decoration: none; }

/* ══ BUTTONS ══════════════════════════════ */
.esp-btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; border: none;
  border-radius: var(--r); padding: 14px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(14,165,233,.3);
  transition: opacity .2s; width: 100%;
}
.esp-btn-primary:hover { opacity: .88; }
.esp-btn-secondary {
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r); padding: 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--c-text);
  transition: all .2s;
}
.esp-btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); }
.esp-btn-skip {
  background: none;
  border: 1.5px dashed var(--c-border);
  border-radius: 20px; padding: 8px 20px;
  font-size: 12px; cursor: pointer;
  color: var(--c-muted); width: 100%;
  transition: all .2s;
}
.esp-btn-skip:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ══ PREP ══════════════════════════════ */
.esp-prep { display: flex; flex-direction: column; }
.esp-prep-video { background: #0f0f1a; position: relative; }
.esp-video-player {
  width: 100%; max-height: 240px;
  display: block; object-fit: contain;
}
.esp-video-placeholder {
  background: linear-gradient(135deg, #0f2d1a, #075985);
  padding: 48px; text-align: center; color: #fff;
}
.esp-video-placeholder span { font-size: 44px; display: block; margin-bottom: 10px; }
.esp-video-placeholder p { margin: 0; font-size: 13px; opacity: .7; }
.esp-prep-section {
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.esp-prep-title {
  font-size: 13px; font-weight: 700;
  margin-bottom: 12px; color: var(--c-primary);
  display: flex; align-items: center; gap: 6px;
}
.esp-vocab-list { display: flex; flex-direction: column; gap: 8px; }
.esp-vocab-item {
  display: flex; align-items: center;
  justify-content: space-between;
  background: #f0f9ff; border-radius: var(--r-sm);
  padding: 10px 14px;
  border-left: 3px solid var(--c-primary);
  gap: 10px;
}
.esp-vocab-ko { font-size: 16px; font-weight: 700; }
.esp-vocab-tts {
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 50%;
  width: 34px; height: 34px; min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .2s;
  flex-shrink: 0;
}
.esp-vocab-tts svg { display: block; }
.esp-vocab-tts:hover { opacity: .8; }
.esp-pattern-item {
  display: flex; justify-content: space-between;
  align-items: center; padding: 8px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13px;
}
.esp-pattern-ko { font-weight: 700; font-size: 14px; }
.esp-pattern-vi { color: var(--c-muted); font-size: 12px; }
.esp-prep-actions { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-surface); }

/* ══ SHADOWING ══════════════════════════════ */
.esp-shadow-wrap {
  padding: 20px 16px;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  min-height: calc(100vh - 60px);
}
.esp-shadow-info {
  display: flex; justify-content: space-between;
  width: 100%; font-size: 13px;
  font-weight: 600; color: var(--c-primary);
}
.esp-shadow-bar {
  width: 100%; height: 5px;
  background: #bae6fd; border-radius: 3px; overflow: hidden;
}
.esp-shadow-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .4s ease;
}
.esp-shadow-card {
  width: 100%;
  background: var(--c-surface);
  border-radius: var(--r);
  padding: 32px 24px; text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid #bae6fd;
}
.esp-shadow-ko {
  font-size: 22px; font-weight: 700;
  line-height: 1.6; margin-bottom: 8px;
  transition: filter .4s;
  font-family: 'Noto Sans KR', sans-serif;
}
.esp-shadow-vi {
  font-size: 13px; color: var(--c-muted);
  margin-bottom: 12px; font-style: italic;
  display: none;
}
.esp-reveal-btn {
  background: none;
  border: 1.5px dashed var(--c-border);
  border-radius: 20px; padding: 7px 20px;
  font-size: 12px; cursor: pointer;
  color: var(--c-muted); transition: all .2s;
}
.esp-reveal-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.esp-shadow-controls { display: flex; gap: 10px; width: 100%; }
.esp-shadow-play, .esp-shadow-rec {
  flex: 1; padding: 13px;
  border-radius: var(--r); font-size: 13px;
  font-weight: 700; cursor: pointer; border: none;
  transition: all .2s;
}
.esp-shadow-play {
  background: #f0f9ff; color: var(--c-primary);
  border: 1.5px solid #bae6fd;
}
.esp-shadow-play:hover { background: #dbeafe; }
.esp-shadow-rec {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.esp-shadow-rec.esp-recording { animation: pulse-rec .9s ease infinite; }
.esp-shadow-nav { display: flex; gap: 10px; width: 100%; }
.esp-nav-btn {
  flex: 1; padding: 11px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: all .2s;
}
.esp-nav-btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.esp-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.esp-nav-next {
  background: var(--c-primary); color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.esp-nav-next:hover { opacity: .88; }
.esp-shadow-feedback { width: 100%; text-align: center; font-size: 14px; min-height: 40px; }
.esp-shadow-result {
  background: #f0f9ff;
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 14px; color: var(--c-primary);
  border: 1px solid #bae6fd;
}
.esp-shadow-pron-result {
  background: var(--c-surface);
  border-radius: var(--r); padding: 18px 16px;
  border: 1.5px solid var(--c-border);
  box-shadow: var(--shadow); width: 100%;
}
.esp-pron-score-big {
  font-size: 44px; font-weight: 800; line-height: 1;
}
.esp-pron-score-big span { font-size: 16px; opacity: .55; font-weight: 400; }
.esp-pron-label { font-size: 14px; font-weight: 700; margin: 6px 0 4px; }
.esp-pron-tip   { font-size: 12px; color: var(--c-muted); }
.esp-shadow-score { width: 100%; }

/* ══ CHAT ══════════════════════════════ */
.esp-chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - 56px);
  position: relative;
}
.esp-scene-banner {
  background: linear-gradient(90deg, #f0f9ff, #f8fafc);
  border-bottom: 1px solid #bae6fd;
  padding: 8px 16px; font-size: 11px;
  color: var(--c-primary); font-weight: 600;
}
.esp-messages {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.esp-msg-row { display: flex; gap: 8px; align-items: flex-end; }
.esp-msg-assistant { justify-content: flex-start; }
.esp-msg-user      { justify-content: flex-end; }
.esp-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; color: #fff;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.esp-avatar-user {
  background: linear-gradient(135deg, #38bdf8, #ef4444);
}
.esp-bubble {
  max-width: 76%; padding: 10px 14px;
  border-radius: 18px; font-size: 14px; line-height: 1.65;
  position: relative;
}
.esp-bubble-ai {
  background: var(--c-ai-bg);
  border-bottom-left-radius: 4px;
  border: 1px solid #bae6fd;
}
.esp-bubble-user {
  background: linear-gradient(135deg, #f0f9ff, #f8fafc);
  border-bottom-right-radius: 4px;
  border: 1px solid #bae6fd;
}
.esp-msg-ko {
  font-weight: 600; font-size: 14px;
  position: relative;
}
.esp-msg-blurred {
  filter: blur(7px); user-select: none;
  transition: filter .4s;
}

/* hover tooltip */
.esp-vi-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px); left: 0;
  background: #0f2d1a; color: #fff;
  font-size: 11px; font-weight: 400;
  padding: 7px 12px; border-radius: 10px;
  white-space: normal; max-width: 240px;
  z-index: 50; line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.esp-vi-tooltip::after {
  content: '';
  position: absolute; top: 100%; left: 14px;
  border: 5px solid transparent;
  border-top-color: #0f2d1a;
}
.esp-msg-ko:hover .esp-vi-tooltip { display: block; }

.esp-correction {
  font-size: 12px; margin-top: 6px;
  padding: 6px 10px;
  background: #f8fafc; border-radius: 8px;
  border-left: 3px solid var(--c-yellow);
  color: #78350f;
}
.esp-corr-vi { color: #1e40af; font-size: 11px; }
.esp-msg-btns {
  display: flex; gap: 6px;
  margin-top: 6px; align-items: center; flex-wrap: wrap;
}
.esp-tts-btn, .esp-script-btn, .esp-vi-btn {
  background: none;
  border: 1.5px solid var(--c-border);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--c-muted); display: flex; align-items: center; gap: 4px;
  transition: all .15s;
}
.esp-tts-btn:hover, .esp-script-btn:hover, .esp-vi-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: #f0f9ff;
}
.esp-status-wrong   { font-size: 11px; color: var(--c-red);    margin-top: 4px; font-weight: 600; }
.esp-status-partial { font-size: 11px; color: var(--c-yellow); margin-top: 4px; font-weight: 600; }
.esp-typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.esp-typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-primary); opacity: .5;
  animation: bounce .8s ease infinite;
}
.esp-typing-dots span:nth-child(2) { animation-delay: .15s; }
.esp-typing-dots span:nth-child(3) { animation-delay: .3s; }

.esp-hint-bar {
  padding: 8px 14px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.esp-hint-toggle {
  background: none;
  border: 1.5px dashed #bae6fd;
  border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--c-primary); transition: all .2s;
}
.esp-hint-toggle:hover { background: #f0f9ff; }
.esp-hint-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.esp-hint-chip {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 20px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--c-primary); transition: all .2s;
}
.esp-hint-chip:hover { background: var(--c-primary); color: #fff; }
.esp-input-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  position: sticky; bottom: 0;
  box-shadow: 0 -4px 16px rgba(14,165,233,.06);
}
.esp-mic-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: var(--c-primary);
  transition: all .2s;
}
.esp-mic-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.esp-mic-btn.esp-recording {
  background: var(--c-red); color: #fff;
  border-color: var(--c-red);
  animation: pulse-rec .9s ease infinite;
}
.esp-text-input {
  flex: 1; padding: 10px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: 24px; font-size: 13px;
  outline: none; background: var(--c-bg);
  transition: border-color .2s;
}
.esp-text-input:focus { border-color: var(--c-primary); background: #fff; }
.esp-send-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; border: none;
  border-radius: 24px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(14,165,233,.3);
  transition: opacity .2s;
}
.esp-send-btn:hover { opacity: .88; }

/* ══ SUMMARY ══════════════════════════════ */
.esp-summary { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.esp-summary-header {
  background: linear-gradient(135deg, #0f2d1a, #075985, #0ea5e9);
  border-radius: var(--r); padding: 24px;
  text-align: center; color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.esp-summary-header::before {
  content: '';
  position: absolute; top: -50%; right: -20%;
  width: 200px; height: 200px;
  background: rgba(14,165,233,.12);
  border-radius: 50%;
}
.esp-summary-score {
  font-size: 56px; font-weight: 800; line-height: 1;
  position: relative;
}
.esp-summary-score span { font-size: 20px; opacity: .7; font-weight: 400; }
.esp-summary-title { font-size: 14px; opacity: .8; margin: 6px 0 14px; }
.esp-summary-stats-row { display: flex; gap: 8px; justify-content: center; }
.esp-stat {
  background: rgba(255,255,255,.12);
  border-radius: var(--r-sm); padding: 8px 16px; text-align: center;
  backdrop-filter: blur(4px);
}
.esp-stat-n { font-size: 22px; font-weight: 800; }
.esp-stat-l { font-size: 10px; opacity: .75; margin-top: 2px; }

.esp-sum-section {
  background: var(--c-surface);
  border-radius: var(--r); padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--c-border);
}
.esp-sum-section-title {
  font-size: 13px; font-weight: 700;
  margin-bottom: 12px; color: var(--c-primary);
  display: flex; justify-content: space-between; align-items: center;
}
.esp-sum-overall { font-size: 13px; line-height: 1.7; color: var(--c-text); }
.esp-sum-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.esp-tag {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}
.esp-tag-good { background: #dbeafe; color: #075985; }
.esp-tag-bad  { background: #f0f9ff; color: #1e40af; }
.esp-sum-focus {
  font-size: 12px; background: #f0f9ff;
  border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--c-primary); margin-top: 10px;
  border-left: 3px solid var(--c-primary);
}
.esp-sum-loading {
  background: var(--c-surface);
  border-radius: var(--r); padding: 20px;
  text-align: center; font-size: 13px;
  color: var(--c-muted);
  border: 1.5px dashed var(--c-border);
}

/* Transcript toggle */
.esp-transcript-toggle {
  background: none;
  border: 1.5px solid var(--c-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: 11px; cursor: pointer;
  color: var(--c-muted); white-space: nowrap;
  transition: all .15s;
}
.esp-transcript-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }
.esp-transcript-full {
  background: var(--c-bg);
  border-radius: var(--r-sm); padding: 12px;
  margin-bottom: 12px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--c-border);
}
.esp-transcript-row {
  display: flex; gap: 8px; padding: 5px 0;
  font-size: 13px; border-bottom: 1px solid var(--c-border);
}
.esp-transcript-row:last-child { border-bottom: none; }
.esp-tr-user { color: var(--c-text); }
.esp-tr-ai   { color: var(--c-primary); }
.esp-tr-label { font-weight: 700; min-width: 52px; flex-shrink: 0; font-size: 11px; }
.esp-tr-text  { line-height: 1.6; flex: 1; }
.esp-tr-vi { font-size: 11px; color: var(--c-muted); font-style: italic; margin-top: 2px; }
.esp-tr-vi-btn {
  background: none; border: 1px solid var(--c-border);
  border-radius: 10px; padding: 1px 7px;
  font-size: 10px; cursor: pointer; color: var(--c-muted);
  white-space: nowrap; transition: all .15s;
}
.esp-tr-vi-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Turn analysis */
.esp-turn-list { display: flex; flex-direction: column; gap: 10px; }
.esp-turn-item {
  border-radius: var(--r-sm); padding: 12px 14px;
  border-left: 3px solid transparent;
}
.esp-turn-correct { background: #f0f9ff; border-left-color: #22c55e; }
.esp-turn-partial  { background: #f8fafc; border-left-color: #38bdf8; }
.esp-turn-wrong    { background: #f8fafc; border-left-color: #ef4444; }
.esp-turn-header {
  display: flex; gap: 8px;
  align-items: flex-start; margin-bottom: 6px;
}
.esp-turn-status { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.esp-turn-text   { font-size: 14px; font-weight: 700; line-height: 1.5; }
.esp-turn-issue, .esp-turn-correction, .esp-turn-natural, .esp-turn-grammar {
  font-size: 12px; margin-top: 5px;
  padding: 5px 10px; border-radius: 8px; line-height: 1.6;
}
.esp-turn-issue      { background: #fee2e2; color: #991b1b; }
.esp-turn-correction { background: #dbeafe; color: #075985; }
.esp-turn-natural    { background: #dbeafe; color: #075985; }
.esp-turn-grammar    { background: #f8fafc; color: #78350f; }
.esp-turn-label      { font-weight: 700; margin-right: 4px; }

/* Shadowing in summary */
.esp-sum-shadow-list { display: flex; flex-direction: column; gap: 10px; }
.esp-sum-shadow-item {
  background: #f0f9ff; border-radius: var(--r-sm);
  padding: 12px 14px; border: 1px solid #bae6fd;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.esp-sum-shadow-text { font-size: 14px; font-weight: 700; flex: 1; }
.esp-sum-shadow-play {
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: opacity .2s;
}
.esp-sum-shadow-play:hover { opacity: .8; }
.esp-sum-shadow-rec {
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all .2s;
}
.esp-sum-shadow-rec:hover { opacity: .8; }
.esp-ss-score {
  font-size: 12px; margin-top: 5px;
  padding: 4px 8px; background: var(--c-bg);
  border-radius: 20px; display: inline-block;
}

/* Motivate section */
.esp-sum-motivate {
  background: linear-gradient(135deg, #f0f9ff, #f8fafc);
  border-radius: var(--r); padding: 20px;
  text-align: center; border: 1.5px solid #bae6fd;
}
.esp-sum-motivate-icon { font-size: 36px; margin-bottom: 8px; }
.esp-sum-motivate-text { font-size: 14px; font-weight: 600; color: var(--c-primary); margin-bottom: 4px; }
.esp-sum-motivate-sub  { font-size: 12px; color: var(--c-muted); margin-bottom: 16px; }

/* Summary actions */
.esp-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.esp-summary-actions button { flex: 1; min-width: 90px; }

/* Vocab review */
.esp-vocab-review {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.esp-vocab-review-item {
  background: var(--c-bg);
  border-radius: var(--r-sm); padding: 12px;
  text-align: center; border: 1px solid var(--c-border);
}
.esp-vr-ko { font-size: 17px; font-weight: 800; color: var(--c-primary); margin-bottom: 4px; }
.esp-vr-vi { font-size: 12px; color: var(--c-muted); }
.esp-vr-ex { font-size: 11px; color: var(--c-blue); margin-top: 4px; font-style: italic; }

/* ══ HISTORY ══════════════════════════════ */
.esp-history { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.esp-history-tabs { display: flex; gap: 8px; }
.esp-htab {
  flex: 1; padding: 10px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--c-muted); transition: all .2s;
}
.esp-htab.active {
  background: var(--c-primary); color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
#esp-history-content {
  background: var(--c-surface);
  border-radius: var(--r); padding: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--c-border);
}
.esp-score-list { display: flex; flex-direction: column; gap: 8px; }
.esp-score-item {
  padding: 12px 14px;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
}
.esp-score-sc { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.esp-score-row { display: flex; gap: 12px; font-size: 12px; color: var(--c-muted); align-items: center; }
.esp-score-n  { font-size: 20px; font-weight: 800; }
.esp-error-bank { display: flex; flex-direction: column; gap: 10px; }
.esp-eb-item {
  background: var(--c-bg);
  border-radius: var(--r-sm); padding: 12px 14px;
  border: 1px solid var(--c-border);
}
.esp-eb-wrong {
  font-size: 13px; color: var(--c-red);
  margin-bottom: 4px; font-weight: 600;
}
.esp-eb-right {
  font-size: 13px; font-weight: 700;
  color: var(--c-green); margin-bottom: 4px;
}
.esp-eb-vi    { font-size: 11px; color: var(--c-muted); margin-bottom: 8px; }
.esp-eb-meta  {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 11px; color: var(--c-muted);
}
.esp-mastered-btn {
  background: var(--c-green); color: #fff;
  border: none; border-radius: 20px;
  padding: 5px 12px; font-size: 11px;
  font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
.esp-mastered-btn:hover { opacity: .8; }
.esp-mastered-btn:disabled { background: var(--c-muted); }

/* ══ MISC ══════════════════════════════ */
.esp-toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%);
  background: #0f2d1a; color: #fff;
  padding: 10px 22px; border-radius: 24px;
  font-size: 13px; font-weight: 600;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: slideUp .3s ease;
}
.esp-loading-sm { text-align: center; padding: 24px; color: var(--c-muted); font-size: 13px; }
.esp-empty      { text-align: center; padding: 32px; color: var(--c-muted); font-size: 13px; }

/* ══ ANIMATIONS ══════════════════════════════ */
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
@keyframes pulse-rec {
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
}
@keyframes slideUp {
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ══ RESPONSIVE ══════════════════════════════ */
@media(max-width:480px) {
  .esp-bubble   { max-width: 86%; }
  .esp-shadow-ko { font-size: 18px; }
  .esp-summary-score { font-size: 46px; }
}

/* Pronunciation 3 criteria */
.esp-pron-result { padding: 10px 0; }
.esp-pron-total { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.esp-pron-criteria { display: flex; flex-direction: column; gap: 6px; }
.esp-pron-item { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.esp-pron-item span:first-child { min-width: 65px; color: var(--c-muted); }
.esp-pron-item span:last-child  { min-width: 28px; text-align: right; font-weight: 700; }
.esp-pron-bar { flex: 1; height: 5px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.esp-pron-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }

/* ══════════════════════════════════════════════════
   JOURNEY MAP — v2 Dark World Design
══════════════════════════════════════════════════ */
.esp-journey {
  background: #060810;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── World Tabs (sticky) ─────────────────────── */
.esp-world-tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 12px 8px;
  gap: 6px;
  background: rgba(6,8,16,.95);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.esp-world-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 6px 10px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
  font-family: inherit;
}
.esp-world-tab:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.18);
}
.esp-world-tab-active {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #fff !important;
}
.esp-world-tab-badge {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.esp-world-tab-name { font-size: 11px; }
.esp-world-tab-count {
  font-size: 9px; font-weight: 800;
  border-radius: 10px;
  padding: 1px 5px;
  color: #000;
  min-width: 16px;
  text-align: center;
}

/* ── World Section ───────────────────────────── */
.esp-world-section {
  padding: 20px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ── World Header ────────────────────────────── */
.esp-world-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.esp-world-header-left { flex: 1; }
.esp-world-header-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.esp-world-header-badgetext {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .9;
}
.esp-world-header-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}
.esp-world-header-subtitle {
  font-size: 11px;
  margin-bottom: 6px;
}
.esp-world-header-desc {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  margin-bottom: 10px;
}
.esp-world-milestones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.esp-world-milestone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

/* Ring progress */
.esp-world-ring {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.esp-world-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.esp-world-completed {
  width: 56px; height: 56px;
  border: 2.5px solid;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: rotate(-4deg);
}
.esp-world-lock-badge {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

/* Locked overlay */
.esp-world-locked-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.esp-world-lock-msg {
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  width: 100%;
}

/* ── Filter chips (per world) ────────────────── */
.esp-world-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 12px;
  -webkit-overflow-scrolling: touch;
}
.esp-world-filter::-webkit-scrollbar { display: none; }
.esp-world-chip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  font-family: inherit;
}
.esp-world-chip:hover { color: #fff; background: rgba(255,255,255,.1); }
.esp-world-chip-active { color: #000 !important; }

/* ── Path rows ───────────────────────────────── */
.esp-world-path {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 20px;
}
.esp-world-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  padding: 6px 0;
}
.esp-world-node-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  position: relative;
}
.esp-world-line {
  position: absolute;
  left: 0; right: 50%;
  height: 2px;
  border-radius: 1px;
  z-index: 0;
}

/* Nodes */
.esp-world-node {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2.5px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
  font-family: inherit;
}

/* Desktop: node lớn hơn, đẹp hơn */
@media (min-width: 600px) {
  .esp-world-section { padding: 28px 32px 12px; }
  .esp-world-header  { margin-bottom: 24px; }
  .esp-world-header-title { font-size: 24px; }
  .esp-world-header-desc  { font-size: 13px; }
  .esp-world-node {
    width: 70px; height: 70px;
    border-width: 3px;
  }
  .esp-world-node-wrap { min-width: 80px; }
  .esp-world-row { padding: 8px 0; gap: 4px; }
  .esp-world-path { gap: 10px; }
  .esp-world-tabs { padding: 10px 24px 8px; gap: 6px; }
  .esp-world-tab { padding: 5px 10px; font-size: 11px; }
  .esp-world-ring { width: 64px; height: 64px; }
  .esp-world-ring svg { width: 64px; height: 64px; }
  .esp-world-milestones { flex-direction: row; flex-wrap: wrap; gap: 6px; }
}
.esp-world-node.done { }
.esp-world-node:not(.locked):hover {
  transform: scale(1.08);
}
.esp-world-node.current {
  animation: espNodeBreathe 2.5s ease-in-out infinite;
}
@keyframes espNodeBreathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* Pulse ring for current node */
.esp-node-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid;
  animation: espPulseRing 2s ease-out infinite;
  pointer-events: none;
}
@keyframes espPulseRing {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.4); }
}

/* Zigzag arrows */
.esp-world-arrow {
  position: absolute;
  bottom: -18px;
}
.esp-world-arrow.arrow-right { right: 4px; }
.esp-world-arrow.arrow-left  { left: 4px; }

/* ── AI Section ──────────────────────────────── */
.esp-world-ai-section {
  background: #06080f;
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* ── Banner Tạo hội thoại tự do ── */
/* Nút tạo hội thoại tự do đầu trang journey */
.esp-journey-freetalk-top {
  padding: 10px 14px 0;
}
.esp-journey-freetalk-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(14,165,233,.2)) !important;
  border: 1px solid rgba(167,139,250,.3) !important;
  border-radius: 12px; padding: 12px 16px;
  color: #c4b5fd !important; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: all .2s;
}
.esp-journey-freetalk-btn:hover {
  background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(14,165,233,.3)) !important;
  border-color: rgba(167,139,250,.5) !important;
}
.esp-journey-freetalk-btn span:nth-child(2) { flex: 1; }

.esp-free-talk-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(124,58,237,.15));
  border: 1px solid rgba(14,165,233,.25);
  border-radius: 14px; padding: 14px 16px;
  margin-bottom: 12px;
}
.esp-free-talk-left { flex: 1; min-width: 0; }
.esp-free-talk-title {
  font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 3px;
}
.esp-free-talk-sub {
  font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.4;
}
.esp-free-talk-btn {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
  border: none; border-radius: 10px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; color: #fff !important;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: inherit; transition: opacity .2s;
}
.esp-free-talk-btn:hover { opacity: .85; }

/* ── AI generate input tự do ── */
.esp-trans-ai-input {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 12px; font-size: 14px; color: #fff !important;
  font-family: inherit; outline: none; box-sizing: border-box;
  transition: border-color .2s;
}
.esp-trans-ai-input::placeholder { color: rgba(255,255,255,.3); }
.esp-trans-ai-input:focus { border-color: rgba(167,139,250,.6) !important; }
.esp-trans-ai-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.esp-trans-ai-suggestions span {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 4px 10px;
  font-size: 11px; color: rgba(255,255,255,.6);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.esp-trans-ai-suggestions span:hover {
  background: rgba(167,139,250,.2);
  border-color: rgba(167,139,250,.4);
  color: #fff;
}
.esp-ai-quick-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.esp-ai-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 6px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.esp-ai-quick-btn span:first-child { font-size: 20px; }
.esp-ai-quick-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.15);
}
.esp-aigen-header { margin-bottom: 12px; }
.esp-aigen-title { font-size: 15px; font-weight: 800; color: #c4b5fd; margin-bottom: 2px; }
.esp-aigen-sub   { font-size: 11px; color: rgba(196,181,253,.6); }

/* XP pop animation */
@keyframes espXPPop {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
/* ══════════════════════════════════════════════════
   LESSON FLOW
══════════════════════════════════════════════════ */
.esp-lesson-wrap {
  padding: 16px 16px 100px;
}
/* Progress stepper */
.esp-lesson-stepper {
  display: flex; align-items: center;
  padding: 16px 8px; margin-bottom: 16px;
  overflow-x: auto;
}
.esp-step-dot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.esp-step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--c-border);
  color: var(--c-muted);
  border: 2px solid var(--c-border);
  transition: all .3s;
}
.esp-step-active .esp-step-circle {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(14,165,233,.2);
}
.esp-step-done .esp-step-circle {
  background: #22c55e; color: #fff; border-color: #22c55e;
}
.esp-step-label {
  font-size: 9px; color: var(--c-muted);
  white-space: nowrap;
}
.esp-step-active .esp-step-label { color: var(--c-primary); font-weight: 700; }
.esp-step-done  .esp-step-label  { color: #22c55e; }
.esp-step-line {
  flex: 1; height: 2px; background: var(--c-border);
  margin: 0 4px; margin-bottom: 20px;
  transition: background .3s;
}
.esp-step-line-done { background: #22c55e; }

/* Lesson content */
.esp-lesson-content {
  background: var(--c-surface);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  min-height: 200px;
}
.esp-lesson-section-title {
  font-size: 17px; font-weight: 800;
  margin-bottom: 8px; color: var(--c-text);
}
.esp-lesson-hint {
  font-size: 12px; color: var(--c-muted);
  margin: 0 0 16px; font-style: italic;
}

/* Video */
.esp-video-wrap {
  width: 100%; border-radius: 12px;
  overflow: hidden; margin-bottom: 12px;
  background: #000; aspect-ratio: 16/9;
}
.esp-video-player {
  width: 100%; height: 100%; border: none;
}
.esp-video-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg,#0f172a,#1e293b);
  color: #fff; padding: 20px; text-align: center;
}
.esp-lesson-scene-card {
  background: #f8fafc; border-radius: 10px;
  padding: 12px; border-left: 3px solid var(--c-primary);
  margin-top: 10px;
}

/* Vocab grid in lesson */
.esp-vocab-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 4px;
}
.esp-vocab-card {
  background: #f0f9ff;
  border-radius: 12px; padding: 12px;
  border: 1.5px solid var(--c-border);
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.esp-vocab-card-ko {
  font-size: 16px; font-weight: 800;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--c-text);
  padding-right: 30px;
}
.esp-vocab-card-vi {
  font-size: 11px; color: var(--c-muted);
}
.esp-vocab-card-tts {
  position: absolute; top: 8px; right: 8px;
  background: var(--c-primary); border: none;
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.esp-vocab-card-tts:hover { opacity: .8; }

/* Grammar cards */
.esp-grammar-card {
  background: #fffbeb; border-left: 3px solid #f59e0b;
  border-radius: 10px; padding: 12px;
  margin-bottom: 10px;
}
.esp-grammar-pattern {
  font-size: 17px; font-weight: 800;
  font-family: 'Noto Sans KR', sans-serif;
  color: #92400e; margin-bottom: 4px;
}
.esp-grammar-vi {
  font-size: 13px; color: #78350f;
}
.esp-grammar-ex {
  font-size: 11px; color: #a16207;
  margin-top: 4px; font-style: italic;
}
.esp-lesson-grammar-note {
  background: #eff6ff; border-radius: 10px;
  padding: 12px; font-size: 13px; color: #1e40af;
  margin-top: 8px;
}

/* Shadowing preview */
.esp-shadowing-preview {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.esp-shadow-preview-item {
  display: flex; align-items: center; gap: 12px;
  background: #f8fafc; border-radius: 10px; padding: 10px 12px;
  border: 1px solid var(--c-border);
}
.esp-shadow-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* Chat preview tips */
.esp-lesson-tips {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.esp-tip-item {
  background: #f0f9ff; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--c-text);
}

/* Lesson nav */
.esp-lesson-nav {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.esp-lesson-btn-primary {
  background: linear-gradient(135deg, var(--c-primary), #0284c7);
  color: #fff; border: none; border-radius: 14px;
  padding: 14px; font-size: 15px; font-weight: 700;
  cursor: pointer; width: 100%;
  transition: opacity .2s;
}
.esp-lesson-btn-primary:hover { opacity: .9; }
.esp-lesson-btn-big { padding: 18px; font-size: 17px; }
.esp-lesson-btn-secondary {
  background: transparent; color: var(--c-muted);
  border: 1.5px solid var(--c-border); border-radius: 14px;
  padding: 12px; font-size: 13px; cursor: pointer;
  width: 100%; transition: all .2s;
}
.esp-lesson-btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ══════════════════════════════════════════════════
   ACHIEVEMENT
══════════════════════════════════════════════════ */
.esp-achievement-wrap {
  padding-bottom: 80px;
}
.esp-ach-xp-card {
  background: linear-gradient(135deg, #0f172a, #1e3a5f, #0ea5e9);
  padding: 20px; margin: 16px; border-radius: 18px;
  box-shadow: 0 8px 32px rgba(14,165,233,.25);
}
.esp-ach-stat-card {
  background: var(--c-surface);
  border-radius: 14px; padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.esp-badge-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.esp-badge-item {
  background: var(--c-surface);
  border-radius: 14px; padding: 14px 8px;
  text-align: center;
  border: 2px solid var(--c-border);
  transition: all .2s;
}
.esp-badge-earned {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb, #fff);
  box-shadow: 0 2px 12px rgba(251,191,36,.15);
}
.esp-badge-icon {
  font-size: 28px; margin-bottom: 6px;
}
.esp-badge-name {
  font-size: 11px; font-weight: 700; color: var(--c-text);
}
.esp-badge-desc {
  font-size: 9px; color: var(--c-muted); margin-top: 2px;
}

/* Stamp card */
.esp-journey-card-stamp {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; background: var(--c-surface);
  border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow);
}
.esp-stamp {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 6px 2px;
}
.esp-stamp-done { opacity: 1; }
.esp-stamp-empty { opacity: .4; }

/* ══════════════════════════════════════════════════
   RESUME BANNER
══════════════════════════════════════════════════ */
.esp-resume-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #0ea5e9, #7c3aed);
  padding: 14px 16px; margin: 0;
  animation: espSlidein .3s ease;
}
@keyframes espSlidein {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.esp-resume-left { flex: 1; }
.esp-resume-label {
  font-size: 10px; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .8px;
}
.esp-resume-title {
  font-size: 16px; font-weight: 800; color: #fff;
  margin: 2px 0;
}
.esp-resume-meta {
  font-size: 11px; color: rgba(255,255,255,.7);
}
.esp-resume-btn {
  background: rgba(255,255,255,.2);
  color: #fff; border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 20px; padding: 8px 16px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
}
.esp-resume-btn:hover { background: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════════
   REGISTER FILTER BAR
══════════════════════════════════════════════════ */
.esp-register-filter {
  display: flex; gap: 6px;
  padding: 12px 16px 8px;
  overflow-x: auto;
  background: #0f172a;
  -webkit-overflow-scrolling: touch;
}
.esp-register-filter::-webkit-scrollbar { display: none; }
.esp-filter-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 6px 13px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .18s;
  flex-shrink: 0;
}
.esp-filter-chip:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.esp-filter-active {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
}

/* ══════════════════════════════════════════════════
   AI GENERATE CARD
══════════════════════════════════════════════════ */
.esp-aigen-card {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border: 1.5px solid rgba(167,139,250,.3);
  border-radius: 16px; padding: 16px;
  margin-top: 0;
}
.esp-aigen-title {
  font-size: 15px; font-weight: 800; color: #c4b5fd;
  margin-bottom: 4px;
}
.esp-aigen-desc {
  font-size: 11px; color: rgba(196,181,253,.7);
  margin-bottom: 12px;
}
.esp-aigen-controls {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.esp-aigen-select {
  width: 100%;
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 9px 12px;
  font-size: 13px; cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.esp-aigen-select option,
.esp-aigen-select optgroup {
  background: #1e1b4b; color: #e2e8f0;
}
.esp-aigen-btn {
  width: 100%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff; border: none; border-radius: 12px;
  padding: 13px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.esp-aigen-btn:hover { opacity: .9; }
.esp-aigen-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Current node pulse */
.esp-mpath-node-current {
  animation: espNodePulse 2s ease-in-out infinite;
}
.esp-mpath-node-pulse {
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  animation: espDotPulse 1.5s ease-in-out infinite;
}
@keyframes espNodePulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--pulse-color, rgba(245,158,11,.35)), 0 0 20px rgba(245,158,11,.2); }
  50%       { box-shadow: 0 0 0 8px var(--pulse-color, rgba(245,158,11,.15)), 0 0 30px rgba(245,158,11,.3); }
}
@keyframes espDotPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%       { opacity: .4; transform: translateX(-50%) scale(1.5); }
}

/* ══════════════════════════════════════════════════
   NODE TOOLTIP — Desktop popup + Mobile bottom sheet
══════════════════════════════════════════════════ */

/* Desktop tooltip */
.esp-node-tooltip {
  animation: espTooltipIn .18s ease;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
@keyframes espTooltipIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Mobile: bottom sheet */
.esp-node-tooltip--mobile {
  animation: none !important;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  filter: none;
  border-radius: 20px 20px 0 0 !important;
}
.esp-node-tooltip--mobile .esp-tooltip-inner {
  border-radius: 20px 20px 0 0 !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}

/* Backdrop for mobile */
.esp-tooltip-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  opacity: 0;
  transition: opacity .25s ease;
}

.esp-tooltip-inner {
  background: #1a2235;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 16px;
  color: #fff !important;
}
.esp-tooltip-inner * {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* Drag handle — mobile only */
.esp-tooltip-drag-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  margin: 0 auto 14px;
}

.esp-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 10px;
}
.esp-tooltip-titles { flex: 1; }
.esp-tooltip-title {
  font-weight: 800;
  font-size: 16px;
  color: #fff !important;
  line-height: 1.3;
}
.esp-tooltip-title-ko {
  font-size: 12px;
  color: rgba(255,255,255,.55) !important;
  margin-top: 2px;
}
.esp-tooltip-scene {
  font-size: 12px;
  color: rgba(255,255,255,.65) !important;
  margin-bottom: 10px;
  line-height: 1.4;
}
.esp-tooltip-diff {
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.esp-tooltip-diff span { color: rgba(255,255,255,.5) !important; }
.esp-tooltip-goal {
  font-size: 12px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.8) !important;
  line-height: 1.4;
}
.esp-tooltip-btns {
  display: flex;
  gap: 8px;
}
.esp-tooltip-start {
  flex: 1;
  border: none !important;
  border-radius: 12px;
  padding: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.esp-tooltip-start:hover { opacity: .88; }
.esp-tooltip-chat {
  flex: 0 0 auto;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  white-space: nowrap;
}
.esp-tooltip-chat:hover { background: rgba(255,255,255,.16) !important; }
.esp-tooltip-close {
  background: rgba(255,255,255,.08) !important;
  border: none !important;
  color: rgba(255,255,255,.6) !important;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.esp-tooltip-close:hover { background: rgba(255,255,255,.15) !important; }

/* ══════════════════════════════════════════════════
   HINT CHIPS — v2 với nghĩa VN + shadowing
══════════════════════════════════════════════════ */
.esp-hint-list {
  flex-direction: column !important;
  gap: 8px;
  padding: 8px 0;
  width: 100%;
}
.esp-hint-item {
  background: rgba(14,165,233,.06);
  border: 1px solid rgba(14,165,233,.15);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
}
.esp-hint-ko {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}
.esp-hint-vi {
  font-size: 11px;
  color: #0ea5e9;
  font-style: italic;
  margin-bottom: 8px;
}
.esp-hint-actions {
  display: flex;
  gap: 6px;
}
.esp-hint-use {
  flex: 1;
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.esp-hint-use:hover { opacity: .85; }
.esp-hint-shadow {
  background: rgba(14,165,233,.1);
  color: #0ea5e9;
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
.esp-hint-shadow:hover {
  background: rgba(14,165,233,.2);
}

/* ── Shadowing modal nhỏ (hint + feedback) ─────── */
.esp-hint-shadow-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: espFadeIn .2s ease;
}
@keyframes espFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.esp-hint-shadow-inner {
  background: #1e293b;
  border-radius: 20px;
  padding: 24px;
  padding-bottom: 32px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  -webkit-overflow-scrolling: touch;
}
.esp-hint-shadow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 700;
  color: #94a3b8;
  font-size: 13px;
}
.esp-hint-shadow-close {
  background: rgba(255,255,255,.08) !important;
  border: none;
  color: rgba(255,255,255,.6) !important;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.esp-hint-shadow-ko {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.4;
}
.esp-hint-shadow-vi {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 20px;
  font-style: italic;
}
.esp-hint-shadow-btns {
  display: flex;
  gap: 10px;
}
.esp-hint-shadow-play {
  flex: 1;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.esp-hint-shadow-play:hover { background: rgba(255,255,255,.14) !important; }
.esp-hint-shadow-rec {
  flex: 1;
  background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.esp-hint-shadow-rec:hover { opacity: .9; }
.esp-hint-shadow-result {
  margin-top: 14px;
  text-align: center;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  color: #fff;
}

/* ── Feedback shadow buttons (trong summary) ───── */
.esp-feedback-shadow-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  background: rgba(99,102,241,.1);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.esp-feedback-shadow-btn:hover {
  background: rgba(99,102,241,.2);
  color: #a5b4fc;
}
.esp-feedback-shadow-btn--natural {
  background: rgba(34,197,94,.1);
  color: #4ade80;
  border-color: rgba(34,197,94,.2);
}
.esp-feedback-shadow-btn--natural:hover {
  background: rgba(34,197,94,.2);
}

/* ══════════════════════════════════════════════════
   ONBOARDING — Màn hình chào mừng học viên mới
══════════════════════════════════════════════════ */
.esp-onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}
.esp-onboarding-box {
  background: #1a2235;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.esp-onboarding-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  animation: espWave 1s ease-in-out infinite alternate;
}
@keyframes espWave {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(10deg); }
}
.esp-onboarding-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}
.esp-onboarding-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
  line-height: 1.5;
}
.esp-onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}
.esp-onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px;
}
.esp-ob-step-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.esp-ob-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.esp-ob-step-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.esp-ob-step-text span {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}
.esp-onboarding-btn {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #22c55e);
  color: #000;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 10px;
  transition: opacity .15s;
}
.esp-onboarding-btn:hover { opacity: .9; }
.esp-onboarding-skip {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px;
  transition: color .15s;
}
.esp-onboarding-skip:hover { color: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════
   MAIN TAB BAR — Giao Tiếp | Luyện Dịch
══════════════════════════════════════════════════ */
.esp-main-tabs {
  display: flex;
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 16px;
  gap: 0;
}
.esp-main-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  position: relative;
}
.esp-main-tab:hover { color: rgba(255,255,255,.7); }
.esp-main-tab-active {
  color: #fff !important;
  border-bottom-color: #a78bfa !important;
}
.esp-main-tab-badge {
  font-size: 9px;
  background: rgba(167,139,250,.2);
  color: #a78bfa;
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════
   MODULE LUYỆN DỊCH
══════════════════════════════════════════════════ */
.esp-trans-wrap {
  min-height: calc(100vh - 100px);
  background: #060810;
}

/* Hero */
.esp-trans-hero {
  text-align: center;
  padding: 28px 20px 20px;
  background: linear-gradient(180deg, #0d1128 0%, #060810 100%);
}
.esp-trans-hero-icon { font-size: 44px; margin-bottom: 10px; }
.esp-trans-hero-title {
  font-size: 20px; font-weight: 900;
  color: #fff; margin-bottom: 6px;
}
.esp-trans-hero-sub {
  font-size: 12px; color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.esp-trans-recommend {
  margin-top: 12px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #fbbf24;
  text-align: left;
}

/* Section titles */
.esp-trans-section-title {
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.6);
  padding: 16px 16px 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Topic grid */
.esp-trans-topics { padding-bottom: 8px; }
.esp-trans-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
}
@media (min-width: 600px) {
  .esp-trans-topic-grid { grid-template-columns: repeat(4, 1fr); }
}
.esp-trans-topic-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all .18s;
  position: relative;
}
.esp-trans-topic-card:not(.locked):hover {
  background: rgba(255,255,255,.08);
  border-color: var(--tc);
  transform: translateY(-2px);
}
.esp-trans-topic-card.locked {
  opacity: .45;
  cursor: default;
}
.esp-trans-topic-icon { font-size: 24px; margin-bottom: 6px; }
.esp-trans-topic-title {
  font-size: 13px; font-weight: 700;
  color: #fff; margin-bottom: 3px;
}
.esp-trans-topic-sub {
  font-size: 10px; color: rgba(255,255,255,.45);
  line-height: 1.4;
}
.esp-trans-topic-lock {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; color: rgba(255,255,255,.3);
}

/* AI section */
.esp-trans-ai-section {
  padding: 0 0 20px;
  border-top: 1px solid rgba(255,255,255,.04);
  margin-top: 8px;
}
.esp-trans-ai-controls {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px;
}
.esp-trans-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.esp-trans-select option { background: #1e293b; }
.esp-trans-ai-btn {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff; border: none;
  border-radius: 12px; padding: 13px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s;
  width: 100%;
}
.esp-trans-ai-btn:hover { opacity: .9; }
.esp-trans-ai-btn:disabled { opacity: .5; }

/* Lesson header */
.esp-trans-lesson-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border-left: 4px solid;
  background: rgba(255,255,255,.03);
  margin: 0;
}
.esp-trans-lesson-icon { font-size: 28px; }
.esp-trans-lesson-title {
  font-size: 16px; font-weight: 800; color: #fff;
}
.esp-trans-lesson-meta {
  font-size: 11px; color: rgba(255,255,255,.5);
  margin-top: 2px;
}

/* ── Lesson List Cards ──────────────────────────── */
.esp-trans-lesson-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 12px;
}
.esp-trans-list-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 14px 16px;
  cursor: pointer; transition: background .15s;
}
.esp-trans-list-card:hover { background: rgba(255,255,255,.08); }
.esp-trans-list-card-left { flex: 1; min-width: 0; }
.esp-trans-list-card-title {
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 5px;
}
.esp-trans-list-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px;
}
.esp-trans-list-level {
  padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.esp-trans-list-card-right {
  color: rgba(255,255,255,.3); font-size: 14px; flex-shrink: 0;
}

/* Stepper */
.esp-trans-stepper {
  display: flex; align-items: center;
  padding: 14px 16px;
  gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.esp-trans-stepper::-webkit-scrollbar { display: none; }
.esp-trans-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.esp-trans-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
}
.esp-trans-step.done .esp-trans-step-dot {
  background: #22c55e; border-color: #22c55e; color: #fff;
}
.esp-trans-step.active .esp-trans-step-dot {
  background: #a78bfa; border-color: #a78bfa; color: #fff;
}
.esp-trans-step-label {
  font-size: 9px; color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.esp-trans-step.active .esp-trans-step-label { color: #a78bfa; font-weight: 700; }
.esp-trans-step.done .esp-trans-step-label { color: #22c55e; }
.esp-trans-step-line {
  flex: 1; height: 2px; min-width: 12px;
  background: rgba(255,255,255,.1);
  margin: 0 2px; margin-bottom: 20px;
}

/* Script */
.esp-trans-script-intro { padding: 0 16px 8px; }
.esp-trans-script-box {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 16px 16px;
}
.esp-trans-script-line {
  background: rgba(255,255,255,.04);
  border-radius: 12px; padding: 12px;
  border: 1px solid rgba(255,255,255,.06);
}
.esp-trans-script-char {
  font-size: 11px; font-weight: 700;
  margin-bottom: 6px; text-transform: uppercase;
  letter-spacing: .5px;
}
.esp-trans-script-top-row {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;
}
.esp-trans-script-ko {
  font-size: 15px; font-weight: 600; color: #fff;
  line-height: 1.5; flex: 1;
}
.esp-trans-script-actions-row {
  display: flex; gap: 4px; flex-shrink: 0; margin-top: 2px;
}
.esp-trans-tts-btn {
  background: rgba(255,255,255,.08) !important; border: none;
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.6) !important;
  transition: background .15s; flex-shrink: 0;
}
.esp-trans-tts-btn:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.esp-trans-shadow-btn {
  background: rgba(14,165,233,.15) !important; border: none;
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  transition: background .15s; flex-shrink: 0;
}
.esp-trans-shadow-btn:hover { background: rgba(14,165,233,.3) !important; }
.esp-trans-script-vi {
  font-size: 12px; color: #4ade80;
  line-height: 1.4; margin-bottom: 8px;
}
.esp-trans-script-reveal {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.5) !important;
  border-radius: 8px; padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.esp-trans-script-reveal:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* Shadowing inline panel */
.esp-trans-shadow-inline { margin-top: 8px; }
.esp-trans-shadow-panel {
  background: rgba(14,165,233,.08);
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 10px; padding: 12px;
}
.esp-trans-shadow-ko {
  font-size: 15px; font-weight: 700; color: #fff;
  line-height: 1.5; margin-bottom: 4px;
  font-family: 'Noto Sans KR', sans-serif;
}
.esp-trans-shadow-vi {
  font-size: 12px; color: rgba(255,255,255,.5);
  font-style: italic; margin-bottom: 8px;
}
.esp-trans-shadow-play, .esp-trans-shadow-rec {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; border: none; transition: all .15s;
  background: #0ea5e9 !important; color: #fff !important;
}
.esp-trans-shadow-rec--active {
  background: #ef4444 !important;
  animation: pulse-rec .9s ease infinite;
}
.esp-trans-skip-btn {
  width: 100%; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 12px; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.esp-trans-skip-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
}
.esp-trans-shadow-result {
  margin-top: 10px; padding: 8px;
  background: rgba(0,0,0,.2); border-radius: 8px;
  text-align: center;
}

/* Vocab */
.esp-trans-vocab-section, .esp-trans-grammar-section { padding: 0 16px; }
.esp-trans-vocab-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
@media (min-width: 600px) {
  .esp-trans-vocab-grid { grid-template-columns: repeat(3, 1fr); }
}
.esp-trans-vocab-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px;
}
.esp-trans-vocab-ko {
  font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px;
}
.esp-trans-vocab-pron {
  font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 4px;
}
.esp-trans-vocab-vi {
  font-size: 12px; color: #4ade80;
}
.esp-trans-vocab-note {
  font-size: 10px; color: #fbbf24; margin-top: 4px;
}
.esp-trans-grammar-card {
  background: rgba(255,251,235,.05);
  border: 1px solid rgba(251,191,36,.15);
  border-radius: 10px; padding: 12px;
  margin-bottom: 8px;
}
.esp-trans-grammar-pattern {
  font-size: 14px; font-weight: 800; margin-bottom: 4px;
}
.esp-trans-grammar-vi {
  font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 6px;
}
.esp-trans-grammar-ex {
  font-size: 11px; color: #93c5fd;
  background: rgba(147,197,253,.06);
  border-radius: 6px; padding: 6px 8px;
}

/* Shadowing */
.esp-trans-shadow-box {
  margin: 0 16px 16px;
  background: rgba(255,255,255,.04);
  border-radius: 16px; padding: 20px;
  text-align: center;
}
.esp-trans-shadow-char {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 12px;
}
.esp-trans-shadow-ko {
  font-size: 20px; font-weight: 800; color: #fff;
  line-height: 1.4; margin-bottom: 6px;
}
.esp-trans-shadow-controls {
  display: flex; gap: 8px; margin-top: 16px;
}
.esp-trans-shadow-play, .esp-trans-shadow-rec {
  flex: 1; border-radius: 10px; padding: 11px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.esp-trans-shadow-play {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.esp-trans-shadow-rec {
  background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
  border: none !important; color: #fff !important;
}
.esp-trans-shadow-result {
  margin-top: 12px; padding: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 10px; text-align: center;
  color: #fff;
}

/* Practice */
.esp-trans-progress-bar {
  height: 3px; background: rgba(255,255,255,.08);
  margin: 0;
}
.esp-trans-progress-fill {
  height: 100%; border-radius: 2px;
  transition: width .4s ease;
}
.esp-trans-practice-box {
  padding: 16px;
}
.esp-trans-direction-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  margin-bottom: 12px;
}
.esp-trans-source-text {
  font-size: 18px; font-weight: 700; color: #fff;
  line-height: 1.5; margin-bottom: 12px;
  padding: 14px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  border-left: 3px solid #a78bfa;
}
.esp-trans-play-src {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; cursor: pointer;
  font-family: inherit; margin-bottom: 12px;
}
.esp-trans-input-mode {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.esp-trans-mode-btn {
  flex: 1; padding: 8px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.5) !important;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.esp-trans-mode-btn.active {
  background: rgba(167,139,250,.15) !important;
  border-color: #a78bfa !important;
  color: #a78bfa !important;
}
.esp-trans-textarea {
  width: 100%;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 12px; padding: 12px;
  font-size: 14px; font-family: inherit;
  resize: none; outline: none;
  transition: border-color .2s;
}
.esp-trans-textarea:focus {
  border-color: #a78bfa !important;
}
.esp-trans-textarea::placeholder { color: rgba(255,255,255,.3); }
.esp-trans-submit-btn {
  width: 100%; margin-top: 8px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important; border: none;
  border-radius: 12px; padding: 13px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s;
}
.esp-trans-submit-btn:hover { opacity: .9; }
.esp-trans-submit-btn:disabled { opacity: .5; }
.esp-trans-speak-btn {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #0ea5e9, #7c3aed) !important;
  color: #fff !important; border: none;
  border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.esp-trans-speak-text {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 10px; font-size: 13px; color: #fff;
  min-height: 40px;
}

/* Result */
.esp-trans-result {
  margin-top: 12px;
  background: rgba(255,255,255,.04);
  border-radius: 14px; padding: 14px;
}
.esp-trans-checking {
  text-align: center; color: rgba(255,255,255,.5);
  font-size: 13px; padding: 10px;
}
.esp-trans-result-score {
  font-size: 32px; font-weight: 900;
  text-align: center; margin-bottom: 6px;
}
.esp-trans-result-verdict {
  text-align: center; font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.esp-trans-result-section { margin-bottom: 12px; }
.esp-trans-result-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 6px;
}
.esp-trans-result-user {
  font-size: 14px; color: rgba(255,255,255,.8);
  line-height: 1.5;
}
.esp-trans-result-ideal {
  font-size: 14px; color: #4ade80;
  line-height: 1.5; font-weight: 600;
}
.esp-trans-err-word {
  background: rgba(248,113,113,.2);
  color: #f87171; border-radius: 3px;
  padding: 0 3px; text-decoration: underline wavy #f87171;
  cursor: help;
}
.esp-trans-error-item {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-bottom: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 8px; padding: 8px 10px;
}
.esp-trans-err-wrong { color: #f87171; font-size: 13px; }
.esp-trans-err-arrow { color: rgba(255,255,255,.3); }
.esp-trans-err-better { color: #4ade80; font-size: 13px; font-weight: 600; }
.esp-trans-err-reason {
  width: 100%; font-size: 11px;
  color: rgba(255,255,255,.5); margin-top: 2px;
}
.esp-trans-play-ideal {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
  border-radius: 8px; padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  font-family: inherit; margin-top: 6px;
}
.esp-trans-tip {
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 10px; padding: 10px 12px;
  font-size: 12px; color: #c4b5fd;
  margin-top: 8px; line-height: 1.5;
}

/* Result page */
.esp-trans-result-page { padding: 20px 16px; }
.esp-trans-result-big-score {
  font-size: 64px; font-weight: 900;
  text-align: center; line-height: 1.1;
  margin-bottom: 24px;
}
.esp-trans-result-breakdown { display: flex; flex-direction: column; gap: 8px; }
.esp-trans-result-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.esp-trans-result-bar-wrap {
  flex: 1; height: 6px; background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.esp-trans-result-bar {
  height: 100%; border-radius: 3px;
  transition: width .5s ease;
}

/* Nav buttons */
.esp-trans-next-btn {
  width: 100%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important; border: none;
  border-radius: 12px; padding: 13px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s; margin: 0 0 8px;
}
.esp-trans-next-btn:hover { opacity: .9; }
.esp-trans-back-btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
  border-radius: 12px; padding: 13px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.esp-trans-back-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* Locked node tooltip */
.esp-locked-msg { padding: 4px 0; }
.esp-locked-prev-card {
  background: rgba(255,255,255,.05);
  border: 1px solid;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.esp-locked-go-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.esp-locked-go-btn:hover { opacity: .88; }

/* Đảm bảo scroll đến đúng section */
#esp-world-beginner {
  scroll-margin-top: 60px;
}

/* ══ AI Generate redesign ══════════════════════════════ */
.esp-header-aigen-btn {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff; border: none;
  border-radius: 16px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  font-family: inherit; transition: opacity .2s;
}
.esp-header-aigen-btn:hover { opacity: .85; }

.esp-aigen-field {
  display: flex; flex-direction: column; gap: 6px;
}
.esp-aigen-label {
  font-size: 12px; font-weight: 700;
  color: rgba(196,181,253,.8);
  letter-spacing: .2px;
}
.esp-aigen-textarea {
  width: 100%;
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-family: inherit;
  resize: none; outline: none; line-height: 1.5;
  transition: border-color .2s;
}
.esp-aigen-textarea:focus {
  border-color: #a78bfa !important;
  background: rgba(255,255,255,.1) !important;
}
.esp-aigen-textarea::placeholder { color: rgba(255,255,255,.3); }

.esp-aigen-examples {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.esp-aigen-examples > span {
  font-size: 11px; color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.esp-aigen-tag {
  background: rgba(167,139,250,.1);
  border: 1px solid rgba(167,139,250,.2);
  color: rgba(167,139,250,.8);
  border-radius: 20px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: all .15s;
}
.esp-aigen-tag:hover {
  background: rgba(167,139,250,.2);
  color: #c4b5fd;
  border-color: rgba(167,139,250,.4);
}

/* ══ Câu mẫu + AI Phân tích ════════════════════════ */
.esp-sample-lines {
  display: flex; flex-direction: column; gap: 10px;
}
.esp-sample-line {
  background: #f8fafc;
  border-radius: 14px; padding: 14px 16px;
  border: 1.5px solid var(--c-border);
  transition: border-color .2s;
}
.esp-sample-line:hover { border-color: var(--c-primary); }
.esp-sample-line-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.esp-sample-line-ko {
  font-size: 18px; font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--c-text); line-height: 1.4; flex: 1;
}
.esp-sample-tts {
  background: var(--c-primary); color: #fff;
  border: none; border-radius: 50%;
  width: 32px; height: 32px; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: opacity .2s;
}
.esp-sample-tts svg { display: block; pointer-events: none; flex-shrink: 0; }
.esp-sample-tts:hover { opacity: .8; }
.esp-sample-line-vi {
  font-size: 13px; color: var(--c-muted);
  margin: 6px 0 8px; font-style: italic;
}
.esp-sample-line-actions { margin-top: 6px; }
.esp-sample-analyze-btn {
  background: none;
  border: 1.5px solid #bae6fd;
  color: var(--c-primary);
  border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .2s;
}
.esp-sample-analyze-btn:hover {
  background: #f0f9ff;
}
.esp-sample-analyze-btn:disabled { opacity: .6; }

/* Analysis panel */
.esp-sample-analysis {
  margin-top: 10px;
  border-top: 1px dashed var(--c-border);
  padding-top: 10px;
}
.esp-analysis-box { display: flex; flex-direction: column; gap: 8px; }
.esp-analysis-words {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 4px;
}
.esp-analyze-word {
  display: flex; flex-direction: column; align-items: center;
  background: #f0f9ff; border: 1.5px solid #bae6fd;
  border-radius: 10px; padding: 6px 10px;
  min-width: 60px; text-align: center;
}
.esp-aw-ko   { font-size: 15px; font-weight: 800; color: var(--c-text); font-family: 'Noto Sans KR', sans-serif; }
.esp-aw-read { font-size: 10px; color: #0ea5e9; margin-top: 1px; }
.esp-aw-type { font-size: 9px; color: #94a3b8; background: #e2e8f0; border-radius: 4px; padding: 1px 5px; margin-top: 2px; }
.esp-aw-vi   { font-size: 11px; color: #374151; margin-top: 3px; font-weight: 600; }

.esp-analysis-row {
  display: flex; gap: 8px; font-size: 13px;
  align-items: flex-start; line-height: 1.5;
}
.esp-ar-label {
  font-weight: 700; color: var(--c-muted);
  white-space: nowrap; flex-shrink: 0;
}

/* ══ Script view ════════════════════════════════════ */
.esp-script-legend {
  display: inline-block; border-radius: 6px;
  padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.esp-script-legend--learner { background: #dbeafe; color: #1e40af; }
.esp-script-legend--partner { background: #f3f4f6; color: #6b7280; }

.esp-script-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.esp-script-line {
  display: flex; gap: 10px; padding: 12px 14px;
  border-radius: 14px; border: 1.5px solid transparent;
}
/* Learner — highlight xanh, nổi bật */
.esp-script-line--learner {
  background: #eff6ff;
  border-color: #93c5fd;
}
/* Partner — xám nhạt */
.esp-script-line--partner {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.esp-script-line-role {
  font-size: 11px; font-weight: 700;
  color: #6b7280; white-space: nowrap;
  padding-top: 2px; min-width: 44px;
}
.esp-script-line--learner .esp-script-line-role { color: #2563eb; }
.esp-script-line-body { flex: 1; }
.esp-script-line-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 8px;
}
.esp-script-ko {
  font-size: 16px; font-weight: 700;
  font-family: 'Noto Sans KR', sans-serif;
  color: #0f172a; line-height: 1.5; flex: 1;
}
.esp-script-line--learner .esp-script-ko { color: #1e3a8a; }
.esp-script-vi {
  font-size: 12px; color: #6b7280;
  margin-top: 4px; font-style: italic; line-height: 1.4;
}
.esp-script-line--learner .esp-script-vi { color: #3b82f6; font-style: normal; }
.esp-script-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; flex-wrap: wrap;
}
.esp-script-shadow-tag {
  font-size: 11px; color: #7c3aed;
  background: #ede9fe; border-radius: 20px;
  padding: 3px 10px; font-weight: 600;
}
.esp-script-grammar {
  margin-top: 16px;
  background: #fffbeb; border-radius: 14px;
  padding: 14px; border: 1.5px solid #fde68a;
}
.esp-script-grammar-title {
  font-size: 13px; font-weight: 700;
  color: #92400e; margin-bottom: 10px;
}

/* Nút quay lại */
.esp-lesson-btn-back {
  background: transparent;
  border: 1.5px solid var(--c-border);
  border-radius: 12px; padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--c-muted);
  font-family: inherit; transition: all .2s;
  width: 100%;
}
.esp-lesson-btn-back:hover { border-color: var(--c-primary); color: var(--c-primary); }
.esp-lesson-nav-row {
  display: flex; gap: 8px; width: 100%;
}
.esp-lesson-nav-row button { flex: 1; }

/* Pronunciation feedback in summary */
.esp-sum-pron-feedback {
  font-size: 13px; margin-top: 8px; padding: 8px 12px;
  background: #f0f9ff; border-radius: 8px;
  border-left: 3px solid #0ea5e9; color: #0369a1;
  line-height: 1.5;
}
.esp-sum-pron-score {
  font-size: 12px; color: var(--c-muted);
  margin-top: 6px;
}

/* Goal achievement badge */
.esp-summary-goal-badge {
  display: inline-block; margin-top: 8px;
  padding: 5px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
}
.esp-goal-done {
  background: rgba(16,185,129,.2);
  color: #6ee7b7; border: 1px solid rgba(16,185,129,.3);
}
.esp-goal-fail {
  background: rgba(239,68,68,.2);
  color: #fca5a5; border: 1px solid rgba(239,68,68,.3);
}

/* Summary analyzing loading state */
.esp-summary-analyzing {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 20px 0 8px;
}
.esp-summary-analyze-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.1);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: esp-spin 0.8s linear infinite;
}
@keyframes esp-spin { to { transform: rotate(360deg); } }
.esp-summary-analyze-text {
  font-size: 18px; font-weight: 700; color: #fff;
}
.esp-summary-analyze-sub {
  font-size: 12px; color: rgba(255,255,255,.5);
  text-align: center;
}

/* Upgrade suggestion in chat */
.esp-upgrade {
  margin-top: 6px; padding: 6px 10px;
  background: rgba(14,165,233,.1);
  border-left: 3px solid #0ea5e9;
  border-radius: 0 8px 8px 0;
  font-size: 12px; line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.esp-upgrade-label {
  font-weight: 700; color: #0ea5e9; white-space: nowrap;
}
.esp-upgrade-ko {
  font-weight: 700; color: #0f172a;
  font-family: 'Noto Sans KR', sans-serif;
}
.esp-upgrade-vi {
  color: #64748b; font-style: italic; font-size: 11px; width: 100%;
}

/* Natural status */
.esp-status-natural {
  font-size: 11px; font-weight: 700;
  color: #0369a1; margin-top: 5px;
  padding: 3px 8px; background: #e0f2fe;
  border-radius: 6px; display: inline-block;
}

/* Natural turn item in analysis */
.esp-turn-natural-item {
  border-left: 3px solid #0ea5e9 !important;
  background: #f0f9ff !important;
}

/* ═══════════════════════════════════════════════════════════
   ETALKIE V2 STYLES — added by integration
   ═══════════════════════════════════════════════════════════ */

/* ═══ TOPIC GRID (View 1 — Mobile friendly) ═══ */
.esp-topic-grid{padding:16px 12px 24px;max-width:1200px;margin:0 auto}
.esp-topic-grid-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px;text-align:center}
.esp-topic-grid-sub{font-size:13px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:20px}
.esp-topic-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
@media(max-width:600px){.esp-topic-cards{grid-template-columns:1fr 1fr;gap:10px}}
.esp-topic-card{
  background:var(--tc-bg,#0d1220);
  border:1.5px solid rgba(255,255,255,.1);
  border-left:4px solid var(--tc);
  border-radius:14px;
  padding:14px 12px;
  text-align:left;
  cursor:pointer;
  color:#fff;
  font-family:inherit;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:6px;
  min-height:150px;
  position:relative;
  overflow:hidden;
}
.esp-topic-card:hover{transform:translateY(-2px);border-color:var(--tc);box-shadow:0 4px 20px var(--tc,#000)33}
.esp-topic-card-locked{
  opacity:1;
  background:linear-gradient(180deg,var(--tc-bg,#0d1220) 0%,rgba(13,18,32,.95) 100%);
}
.esp-topic-card-locked::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.2) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.3) 100%);
  pointer-events:none;
}
.esp-topic-card-locked:hover{transform:translateY(-2px)}
.esp-topic-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.esp-topic-card-badge{padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.3px;flex-shrink:0}
.esp-topic-card-rooms{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
}
.esp-topic-card-rooms-num{
  font-size:18px;
  font-weight:900;
  color:var(--tc);
  letter-spacing:-.5px;
}
.esp-topic-card-rooms-label{
  font-size:9px;
  color:rgba(255,255,255,.5);
  font-weight:600;
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.esp-topic-card-name{
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  margin-top:2px;
  color:#fff;
}
.esp-topic-card-sub{
  font-size:11.5px;
  color:rgba(255,255,255,.7);
  line-height:1.45;
}
.esp-topic-card-bar{height:4px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:auto}
.esp-topic-card-fill{height:100%;border-radius:3px;transition:width .5s}
.esp-topic-card-cta{
  font-size:12px;
  font-weight:800;
  margin-top:4px;
  letter-spacing:.3px;
}
.esp-topic-card-lock{
  font-size:10.5px;
  color:rgba(255,255,255,.7);
  margin-top:4px;
  line-height:1.4;
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:600;
}
.esp-topic-card-lock::before{
  content:'🔒';
  font-size:11px;
}

/* ═══ BACK BAR (View 2) ═══ */
.esp-world-back-bar{position:sticky;top:0;z-index:50;background:rgba(6,8,16,.95);backdrop-filter:blur(12px);padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.esp-world-back-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.esp-world-back-btn:hover{background:rgba(255,255,255,.14)}


/* ═══ RESUME BANNER — tinh tế, gọn gàng ═══ */
.esp-resume-banner{
  background:rgba(14,165,233,.06)!important;
  border:1px solid rgba(14,165,233,.2)!important;
  border-left:3px solid #0ea5e9!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  margin:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  box-shadow:none!important;
}
.esp-resume-banner .esp-resume-left{flex:1;min-width:0}
.esp-resume-banner .esp-resume-label{
  font-size:10px!important;
  font-weight:700!important;
  color:#38bdf8!important;
  letter-spacing:.8px!important;
  text-transform:uppercase!important;
  margin-bottom:2px!important;
}
.esp-resume-banner .esp-resume-title{
  font-size:14px!important;
  font-weight:700!important;
  color:#fff!important;
  margin-bottom:1px!important;
  line-height:1.3!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.esp-resume-banner .esp-resume-meta{
  font-size:11px!important;
  color:rgba(255,255,255,.4)!important;
}
.esp-resume-banner .esp-resume-btn{
  background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;
  color:#fff!important;
  border:none!important;
  border-radius:999px!important;
  padding:7px 14px!important;
  font-size:12px!important;
  font-weight:700!important;
  cursor:pointer!important;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(14,165,233,.3)!important;
}
.esp-resume-banner .esp-resume-btn:hover{transform:translateY(-1px)}

@media(max-width:480px){
  .esp-resume-banner{padding:8px 12px!important;margin:8px 10px!important;gap:8px!important}
  .esp-resume-banner .esp-resume-title{font-size:13px!important}
  .esp-resume-banner .esp-resume-btn{padding:6px 11px!important;font-size:11px!important}
}

/* ═══ FREE TALK BANNER — gọn hơn ═══ */
.esp-free-talk-banner,.esp-journey-freetalk-top{
  margin:10px 14px!important;
}
.esp-free-talk-banner{
  background:rgba(139,92,246,.06)!important;
  border:1px solid rgba(139,92,246,.2)!important;
  border-left:3px solid #a78bfa!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  box-shadow:none!important;
}
.esp-free-talk-title{font-size:13px!important;color:#fff!important;font-weight:700!important}
.esp-free-talk-sub{font-size:11px!important;color:rgba(255,255,255,.5)!important;margin-top:2px!important}
.esp-free-talk-btn{
  background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;
  padding:7px 14px!important;
  font-size:12px!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.esp-journey-freetalk-btn{
  background:rgba(139,92,246,.08)!important;
  border:1px dashed rgba(139,92,246,.3)!important;
  color:#c4b5fd!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:600!important;
}




/* ═══ NÚT KẾT THÚC BUỔI — luôn ở topbar, làm rõ + dễ bấm ═══ */
.esp-chat-topbar .esp-chat-end-btn{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
  color:#fff!important;
  border:none!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:700!important;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(239,68,68,.3)!important;
  transition:transform .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.esp-chat-topbar .esp-chat-end-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(239,68,68,.45)!important;
}
@media(min-width:769px){
  .esp-chat-topbar .esp-chat-end-btn{
    padding:10px 20px!important;
    font-size:14px!important;
  }
}




/* ═══ FONT OVERRIDE — Inter cho toàn bộ app host ═══ */
#etopik-speaking-app,
#etopik-speaking-app *:not([class*="ko"]):not([class*="Ko"]):not([style*="Noto Sans KR"]){
  font-family:'Inter','Noto Sans KR',system-ui,-apple-system,sans-serif!important;
}
.esp-topic-card *,
.esp-world-section *,
.esp-world-header *,
.esp-resume-banner *,
.esp-header *,
.esp-main-tab *,
.esp-lesson-wrap *,
.esp-chat-wrap *,
.esp-summary *,
.esp-node-tooltip *{
  font-family:'Inter','Noto Sans KR',system-ui,-apple-system,sans-serif!important;
}




/* ═══ MOBILE FIX — force dark theme + đúng layout ═══ */
#etopik-speaking-app{
  background:#060810!important;
  color:#f0f7ff!important;
  width:100%!important;
}
#etopik-speaking-app *{
  box-sizing:border-box;
}

/* TOPIC GRID — force dark + 2 cột mobile */
.esp-topic-grid{
  background:#060810!important;
  padding:14px 10px 24px!important;
  max-width:1200px!important;
  margin:0 auto!important;
}
.esp-topic-grid-title{
  font-size:18px!important;
  font-weight:800!important;
  color:#fff!important;
  text-align:center!important;
  margin-bottom:4px!important;
  background:transparent!important;
}
.esp-topic-grid-sub{
  font-size:12px!important;
  color:rgba(255,255,255,.55)!important;
  text-align:center!important;
  margin-bottom:16px!important;
  background:transparent!important;
}

.esp-topic-cards{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  background:transparent!important;
}
@media(min-width:601px){
  .esp-topic-cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:12px!important}
}

/* CARD — dark bg, chữ trắng, layout dọc đẹp */
.esp-topic-card{
  background:#0d1220!important;
  background:linear-gradient(180deg,rgba(20,27,46,.95) 0%,rgba(13,18,32,.98) 100%)!important;
  border:1.5px solid rgba(255,255,255,.1)!important;
  border-left:4px solid var(--tc,#0ea5e9)!important;
  border-radius:14px!important;
  padding:12px 11px!important;
  text-align:left!important;
  cursor:pointer!important;
  color:#fff!important;
  font-family:'Inter','Noto Sans KR',system-ui,sans-serif!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-height:140px!important;
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}
.esp-topic-card *{
  background:transparent!important;
  font-family:'Inter','Noto Sans KR',system-ui,sans-serif!important;
}

.esp-topic-card-top{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:6px!important;
  margin-bottom:2px!important;
}
.esp-topic-card-badge{
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:700!important;
  flex-shrink:0!important;
  line-height:1!important;
}
.esp-topic-card-rooms{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  line-height:1!important;
  text-align:right!important;
}
.esp-topic-card-rooms-num{
  font-size:17px!important;
  font-weight:900!important;
  color:var(--tc,#0ea5e9)!important;
  letter-spacing:-.5px!important;
  line-height:1!important;
}
.esp-topic-card-rooms-label{
  font-size:8px!important;
  color:rgba(255,255,255,.5)!important;
  font-weight:700!important;
  margin-top:2px!important;
  text-transform:uppercase!important;
  letter-spacing:.4px!important;
  white-space:nowrap!important;
}
.esp-topic-card-name{
  font-size:13.5px!important;
  font-weight:800!important;
  line-height:1.25!important;
  color:#fff!important;
  margin:2px 0 0!important;
}
.esp-topic-card-sub{
  font-size:10.5px!important;
  color:rgba(255,255,255,.6)!important;
  line-height:1.4!important;
  margin:0!important;
}
.esp-topic-card-bar{
  height:3px!important;
  background:rgba(255,255,255,.08)!important;
  border-radius:3px!important;
  overflow:hidden!important;
  margin-top:auto!important;
}
.esp-topic-card-fill{
  height:100%!important;
  border-radius:3px!important;
}
.esp-topic-card-cta{
  font-size:11px!important;
  font-weight:800!important;
  margin-top:4px!important;
  letter-spacing:.2px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:4px!important;
}
.esp-topic-card-cta span{
  font-size:9px!important;
  padding:2px 6px!important;
  border-radius:999px!important;
  letter-spacing:.4px!important;
}
.esp-topic-card-lock{
  font-size:10px!important;
  color:rgba(255,255,255,.65)!important;
  margin-top:4px!important;
  line-height:1.4!important;
  font-weight:600!important;
}

/* BACK BAR */
.esp-world-back-bar{
  background:rgba(6,8,16,.95)!important;
  padding:8px 12px!important;
}
.esp-world-back-btn{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:700!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

/* HEADER — đảm bảo dark */
.esp-header,.esp-main-tabs{
  background:#060810!important;
  color:#fff!important;
}
.esp-main-tab{
  color:rgba(255,255,255,.6)!important;
}
.esp-main-tab.active{
  color:#fff!important;
}

/* WRAP CHÍNH */
.esp-wrap{
  background:#060810!important;
  color:#fff!important;
}


/* ═══ RESUME BANNER — tinh tế, gọn gàng ═══ */
.esp-resume-banner{
  background:rgba(14,165,233,.06)!important;
  border:1px solid rgba(14,165,233,.2)!important;
  border-left:3px solid #0ea5e9!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  margin:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  box-shadow:none!important;
}
.esp-resume-banner .esp-resume-left{flex:1;min-width:0}
.esp-resume-banner .esp-resume-label{
  font-size:10px!important;
  font-weight:700!important;
  color:#38bdf8!important;
  letter-spacing:.8px!important;
  text-transform:uppercase!important;
  margin-bottom:2px!important;
}
.esp-resume-banner .esp-resume-title{
  font-size:14px!important;
  font-weight:700!important;
  color:#fff!important;
  margin-bottom:1px!important;
  line-height:1.3!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.esp-resume-banner .esp-resume-meta{
  font-size:11px!important;
  color:rgba(255,255,255,.4)!important;
}
.esp-resume-banner .esp-resume-btn{
  background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;
  color:#fff!important;
  border:none!important;
  border-radius:999px!important;
  padding:7px 14px!important;
  font-size:12px!important;
  font-weight:700!important;
  cursor:pointer!important;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(14,165,233,.3)!important;
}
.esp-resume-banner .esp-resume-btn:hover{transform:translateY(-1px)}

@media(max-width:480px){
  .esp-resume-banner{padding:8px 12px!important;margin:8px 10px!important;gap:8px!important}
  .esp-resume-banner .esp-resume-title{font-size:13px!important}
  .esp-resume-banner .esp-resume-btn{padding:6px 11px!important;font-size:11px!important}
}



/* ═══ FREE TALK BANNER — gọn hơn ═══ */
.esp-free-talk-banner,.esp-journey-freetalk-top{
  margin:10px 14px!important;
}
.esp-free-talk-banner{
  background:rgba(139,92,246,.06)!important;
  border:1px solid rgba(139,92,246,.2)!important;
  border-left:3px solid #a78bfa!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  box-shadow:none!important;
}
.esp-free-talk-title{font-size:13px!important;color:#fff!important;font-weight:700!important}
.esp-free-talk-sub{font-size:11px!important;color:rgba(255,255,255,.5)!important;margin-top:2px!important}
.esp-free-talk-btn{
  background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;
  padding:7px 14px!important;
  font-size:12px!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.esp-journey-freetalk-btn{
  background:rgba(139,92,246,.08)!important;
  border:1px dashed rgba(139,92,246,.3)!important;
  color:#c4b5fd!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:600!important;
}





/* ═══════════════════════════════════════════════════════════
   FIX: Chữ Hàn trong bubble AI bị mờ/không thấy
   ═══════════════════════════════════════════════════════════ */
.esp-bubble-ai{
  background:#eff6ff!important;
  border:1px solid #bae6fd!important;
  color:#0f172a!important;
}
.esp-bubble-ai .esp-msg-ko{
  color:#0f172a!important;
  font-weight:700!important;
  font-size:15px!important;
}
.esp-bubble-ai .esp-msg-vi,
.esp-bubble-ai > div:not(.esp-msg-ko):not(.esp-msg-actions){
  color:#475569!important;
}

/* Blur nhẹ hơn — vẫn ẩn được nhưng không hoàn toàn */
.esp-msg-blurred{
  filter:blur(5px)!important;
  opacity:.75!important;
  cursor:pointer;
}
.esp-msg-blurred:hover{
  filter:blur(2px)!important;
  opacity:1!important;
}

/* Bubble user — đảm bảo chữ tối */
.esp-bubble-user{
  color:#0f172a!important;
}
.esp-bubble-user .esp-msg-ko{
  color:#0f172a!important;
  font-weight:700!important;
}

/* Chat container — nền tối nhưng bubble vẫn sáng để đọc */
.esp-chat-wrap,
.esp-messages{
  background:#0a0e1a!important;
}
.esp-msg-row{
  color:#fff;
}


/* ═══════════════════════════════════════════════════════════
   FIX: Chữ Hàn trong "Phân tích từng câu" trắng trên trắng
   ═══════════════════════════════════════════════════════════ */
.esp-turn-text,
.esp-turn-item .esp-turn-text{
  color:#0f172a!important;
  font-weight:700!important;
  font-size:15px!important;
}
.esp-turn-correct .esp-turn-text{color:#065f46!important}  /* xanh đậm cho câu đúng */
.esp-turn-partial .esp-turn-text{color:#1e3a8a!important}  /* xanh navy cho câu cần sửa */
.esp-turn-wrong   .esp-turn-text{color:#7f1d1d!important}  /* đỏ đậm cho câu sai */
.esp-turn-natural-item .esp-turn-text{color:#3730a3!important}

/* Header turn — đảm bảo tổng thể đọc được */
.esp-turn-header{
  color:#0f172a!important;
}
.esp-turn-status{
  filter:none!important;
}

/* Toàn bộ summary — force màu chữ tối trên nền sáng */
.esp-summary,
.esp-summary *,
.esp-sum-section,
.esp-sum-section *{
  color:#0f172a;
}
.esp-summary{
  background:#fff!important;
}
.esp-sum-section-title{
  color:#0284c7!important;
  font-weight:800!important;
}
.esp-sum-overall{
  color:#1f2937!important;
}

/* Toàn bộ hội thoại — dropdown */
.esp-transcript-full{
  background:#f8fafc!important;
}
.esp-tr-text{
  color:#0f172a!important;
  font-weight:600!important;
}
.esp-tr-vi{
  color:#475569!important;
}
.esp-tr-label{
  color:#64748b!important;
}

/* "Tiếp theo" hint */
.esp-sum-focus{
  color:#0f172a!important;
}
.esp-sum-focus strong{
  color:#0284c7!important;
}


/* ═══════════════════════════════════════════════════════════
   FIX: Chữ Hàn trong Shadowing preview, Lesson sections
   trắng trên trắng → force màu tối
   ═══════════════════════════════════════════════════════════ */

/* Shadowing preview lines (bước trước Shadowing) */
.esp-shadow-preview-item,
.esp-shadow-preview-item *{
  color:#0f172a!important;
}
.esp-shadow-preview-item > div > div:first-child{
  color:#0f172a!important;
  font-weight:700!important;
}
.esp-shadow-preview-item > div > div:nth-child(2){
  color:#64748b!important;
}

/* Tiêu đề tình huống ở video page */
.esp-lesson-scene-card,
.esp-lesson-scene-card *{
  color:#0f172a!important;
}
.esp-lesson-scene-card > div:nth-child(2){
  color:#0f172a!important;
  font-weight:800!important;
}

/* Bất kỳ lesson section nào — force tối nếu nền sáng */
.esp-lesson-section-title{
  color:#0284c7!important;
}
.esp-lesson-hint{
  color:#475569!important;
}
.esp-tip-item{
  color:#0f172a!important;
  background:#f1f5f9!important;
  padding:8px 12px!important;
  border-radius:8px!important;
}

/* Shadowing chính — câu Hàn to nổi bật */
.esp-shadow-card,
.esp-shadow-card *{
  color:#0f172a!important;
}
.esp-shadow-ko{
  color:#0f172a!important;
  font-weight:800!important;
}
.esp-shadow-vi{
  color:#64748b!important;
}

/* Prep sections — tất cả title + content */
.esp-prep-wrap,
.esp-prep-wrap *{
  color:#0f172a;
}
.esp-prep-section{
  color:#0f172a!important;
}
.esp-prep-title{
  color:#0284c7!important;
  font-weight:800!important;
}

/* Bất kỳ inline style nào dùng font-family Noto Sans KR mà không có color
   → đảm bảo có màu tối */
[style*="Noto Sans KR"]{
  color:#0f172a!important;
}

/* Vocab items, pattern items */
.esp-vocab-item,
.esp-vocab-item *,
.esp-pattern-item,
.esp-pattern-item *{
  color:#0f172a!important;
}
.esp-vocab-ko,
.esp-pattern-ko{
  color:#0f172a!important;
  font-weight:700!important;
}
.esp-vocab-vi,
.esp-pattern-vi{
  color:#64748b!important;
}

/* Scene banner trong chat */
.esp-scene-banner,
.esp-scene-banner *{
  color:#0284c7!important;
  background:rgba(14,165,233,.08)!important;
}
/* FIX: "Cấu trúc / Tự nhiên / Tip" trong panel Phân tích câu */
.esp-sample-analysis,
.esp-sample-analysis * {
  color: #0f172a !important;
}
.esp-ar-label {
  color: #0284c7 !important;
  font-weight: 700 !important;
}
.esp-analysis-row > span:last-child {
  color: #1e293b !important;
}
.esp-analyze-word {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
}
.esp-aw-ko   { color: #0f172a !important; }
.esp-aw-read { color: #0ea5e9 !important; }
.esp-aw-type { color: #64748b !important; background: #e2e8f0 !important; }
.esp-aw-vi   { color: #374151 !important; }