/* FONT: Inter (có bộ ký tự tiếng Việt đầy đủ, kể cả ắ ề ộ ữ ị…).
   Trước đây stack bắt đầu bằng 'Segoe UI' → một số máy Windows thiếu/hỏng
   glyph tiếng Việt nên chữ có dấu bị MẤT khi gõ. Tải webfont để không phụ
   thuộc font cài sẵn của máy người dùng (đã fix đúng lỗi này ở Business
   English). display=swap: hiện chữ ngay bằng font hệ thống rồi đổi sang
   Inter khi tải xong — không bao giờ để trang trắng chữ. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #DD0000;
  --primary-dark: #b80000;
  --primary-light: #fde8e8;
  --accent: #0ea5e9;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* [10/10/2026] Trình duyệt KHÔNG cho button/input/select/textarea kế thừa font
   của trang — mặc định chúng dùng font hệ thống. Thấy rõ nhất ở hộp "Bạn muốn
   đếm thời gian không?" của trang đề thi: tiêu đề là Inter, hai nút lại là font
   khác hẳn. File này đã phải vá lẻ font-family:inherit ở 4 chỗ vì đúng lý do
   này; đặt một dòng chung ở đây để hết chỗ nào sót và không tái diễn. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ===== AUTH PAGE ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
}

.auth-container {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}

.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo h1 { font-size: 28px; color: var(--text); font-weight: 800; }
.auth-logo h1 span { color: var(--primary); }
.auth-logo p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

.auth-tabs {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
}

.tab-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow);
  font-weight: 600;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form.hidden { display: none; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-group input {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--primary); }

.btn-primary {
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 4px;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { transform: scale(0.98); }

.error-msg { color: var(--danger); font-size: 13px; text-align: center; min-height: 18px; }

/* ===== DASHBOARD ===== */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  z-index: 100;
}

.sidebar-logo {
  padding: 0 20px 24px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo h2 { font-size: 18px; font-weight: 800; color: var(--text); }
.sidebar-logo h2 span { color: var(--primary); }
.sidebar-logo small { color: var(--text-muted); font-size: 12px; }

.sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-item .icon { font-size: 18px; width: 22px; text-align: center; }

/* Sub-menu (Reading/Listening) */
.nav-group {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.nav-parent { cursor: pointer; display: flex; align-items: center; }
.nav-arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }
.nav-group.open .nav-arrow { transform: rotate(180deg); }
.nav-sub { display: none; padding-left: 20px; }
.nav-group.open .nav-sub {
  display: flex; flex-direction: column; gap: 4px;
}
.nav-sub-item {
  display: block; padding: 8px 12px 8px 28px; font-size: 13px; color: var(--text-muted);
  text-decoration: none; border-radius: 8px; transition: all 0.15s;
}
.nav-sub-item:hover { background: var(--bg); color: var(--text); }
.nav-sub-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* Sidebar section heading */
.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 12px 4px;
  margin-top: 4px;
  opacity: 0.7;
}

/* ===== Admin sidebar nén — hiện gọn trong 1 màn hình, không scroll ===== */
.admin-shell .sidebar { padding: 14px 0 0; }
.admin-shell .sidebar-nav { gap: 1px; padding: 8px 12px; overflow-y: auto; }
.admin-shell .nav-item { padding: 6px 12px; font-size: 13.5px; }
.admin-shell .nav-item .icon { font-size: 16px; width: 20px; }
.admin-shell .nav-sub { padding-left: 10px; }
.admin-shell .nav-sub-item { padding: 5px 12px 5px 24px; font-size: 12.5px; }
.admin-shell .nav-section-title { padding: 7px 12px 1px; margin-top: 1px; font-size: 10.5px; }
.admin-shell .sidebar-logo { padding: 0 20px 12px; }
.admin-shell .sidebar-footer { padding: 10px 12px 0; }
.admin-shell .sidebar-footer .user-info { margin-bottom: 8px; }
.admin-shell .sidebar-footer .avatar { width: 34px; height: 34px; }

.sidebar-footer {
  padding: 16px 12px 0;
  border-top: 1px solid var(--border);
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 8px;
}
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11px; color: var(--text-muted); }

.btn-logout {
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }

/* Main Content */
.main-content {
  margin-left: 240px;
  flex: 1;
  padding: 32px;
}

.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* Dashboard hero */
.dashboard-hero {
  text-align: center;
  padding: 20px 20px 14px;
}
.dashboard-hero h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.hero-subtitle {
  font-size: 14px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.hero-quote {
  max-width: 520px;
  margin: 0 auto;
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
  border-left: 3px solid var(--primary);
  padding: 8px 14px;
  text-align: left;
  background: var(--surface);
  border-radius: 0 10px 10px 0;
}
.quote-vi {
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  color: var(--text);
  opacity: 0.7;
  line-height: 1.5;
}
.hero-quote cite {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--primary);
  text-align: right;
}

/* Dashboard sections */
.dashboard-section {
  margin-bottom: 14px;
}
.dashboard-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.dashboard-section-title::before,
.dashboard-section-title::after {
  content: '';
  flex: 0 0 50px;
  height: 1px;
  background: var(--border);
}

/* Dashboard action cards */
.dashboard-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0 20px;
  flex-wrap: wrap;
}
.dash-action-card {
  width: 128px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: var(--shadow);
  text-align: center;
}
.dash-action-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.dash-action-icon { font-size: 26px; line-height: 1; }
.dash-action-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.stat-card .stat-icon { font-size: 28px; margin-bottom: 8px; }
.stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--primary); }
.stat-card .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Reading list */
.reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.reading-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.reading-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); }

.reading-card .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}
.badge-new { background: #dcfce7; color: #16a34a; }
.badge-read { background: #e0e7ff; color: #4f46e5; }
.badge-done { background: #dbeafe; color: #1d4ed8; }
.badge-inprogress { background: #fef9c3; color: #a16207; }

.reading-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.reading-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.reading-card .card-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== READING PAGE ===== */
.reading-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.reading-topbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-shrink: 0;
}

.back-btn {
  display: flex; align-items: center; gap: 4px;
  color: white; text-decoration: none;
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  background: var(--primary);
  white-space: nowrap;
  transition: all 0.2s;
}
.back-btn:hover { background: var(--primary-dark); color: white; }

.reading-topbar h2 {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Language toggle */
.lang-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lang-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 20px;
  border: 1px solid var(--border);
}
.lang-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

.toggle-switch {
  position: relative;
  width: 44px;
  height: 22px;
  display: inline-block;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 22px;
  transition: 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

.toggle-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  min-width: 20px;
}

/* Split screen */
.reading-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.reading-pane {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.reading-pane:first-child {
  border-right: 2px solid var(--border);
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pane-header h3 { font-size: 14px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.passage-content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}
.passage-content p { margin-bottom: 14px; }

/* Highlight colors */
.hl-green  { background: #bbf7d0; border-radius: 2px; padding: 0 1px; }
.hl-blue   { background: #bae6fd; border-radius: 2px; padding: 0 1px; }
.hl-yellow { background: #fef08a; border-radius: 2px; padding: 0 1px; }
.hl-red    { background: #fecaca; border-radius: 2px; padding: 0 1px; }
.hl-pink   { background: #fbcfe8; border-radius: 2px; padding: 0 1px; }
/* Find reminder popup */
#find-reminder {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: white;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  font-size: 14px;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.reminder-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.reminder-word {
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  max-width: 500px;
  line-height: 1.5;
}
.reminder-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reminder-close:hover { background: rgba(255,255,255,0.3); }

/* Sentence markers [ ] – xoay vòng 4 màu */
.sent-marked {
  border-radius: 3px;
  padding: 2px 0;
}
.sent-marked::before {
  font-weight: 700;
  font-size: 0.9em;
}
.sent-marked::after {
  font-weight: 700;
  font-size: 0.9em;
}

.sent-color-0 { background: rgba(59,130,246,0.10); }
.sent-color-0::before { content: '[ '; color: #3b82f6; }
.sent-color-0::after  { content: ' ]'; color: #3b82f6; }

.sent-color-1 { background: rgba(234,179,8,0.12); }
.sent-color-1::before { content: '[ '; color: #ca8a04; }
.sent-color-1::after  { content: ' ]'; color: #ca8a04; }

.sent-color-2 { background: rgba(16,185,129,0.10); }
.sent-color-2::before { content: '[ '; color: #059669; }
.sent-color-2::after  { content: ' ]'; color: #059669; }

.sent-color-3 { background: rgba(168,85,247,0.10); }
.sent-color-3::before { content: '[ '; color: #9333ea; }
.sent-color-3::after  { content: ' ]'; color: #9333ea; }

.hl-strikethrough { text-decoration: line-through; text-decoration-thickness: 2px; }
.hl-underline-red { text-decoration: underline; text-decoration-color: #ef4444; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hl-strikethrough.hl-underline-red { text-decoration: line-through underline; text-decoration-color: #ef4444; text-decoration-thickness: 2px; }

/* Highlight popup */
/* [11/10/2026] Thu nhỏ: menu có tới 10 mục nên choán gần hết màn hình, che mất
   chính đoạn văn học viên đang đọc. Giảm chữ, giãn dòng và cỡ nút màu. */
#highlight-popup {
  position: fixed;
  z-index: 1000;
  background: var(--text);
  border-radius: 9px;
  padding: 5px;
  display: none;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  min-width: 172px;
  max-height: 70vh;
  overflow-y: auto;
}

.popup-colors {
  display: flex;
  gap: 5px;
  padding: 2px 5px;
  align-items: center;
}
.color-btn {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: transform 0.1s;
}
.color-btn:hover { transform: scale(1.2); border-color: white; }
.color-btn.c-green  { background: #22c55e; }
.color-btn.c-blue   { background: #38bdf8; }
.color-btn.c-yellow { background: #facc15; }
.color-btn.c-red    { background: #f87171; }
.color-btn.c-pink   { background: #f472b6; }

.popup-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 1px 0; }

.popup-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  color: white;
  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.popup-action:hover { background: rgba(255,255,255,0.12); }
.popup-action .icon { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }

/* Synonym input */
.synonym-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.synonym-input-row input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  outline: none;
}
.synonym-input-row input::placeholder { color: rgba(255,255,255,0.45); }
.synonym-input-row input:focus { border-color: var(--accent); }
.synonym-save-btn {
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}

/* Question groups */
.question-group {
  margin-bottom: 24px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.group-header {
  background: linear-gradient(135deg, #fff0f0 0%, #ffe8e8 100%);
  border-bottom: 1.5px solid var(--border);
  padding: 14px 18px;
}
.group-range {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.group-instruction {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
}
.group-options {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  border: 1px solid rgba(221,0,0,0.15);
}
.group-option-item {
  font-size: 13px;
  color: var(--text);
  padding: 3px 0;
  line-height: 1.5;
}
/* 3 ô tích "hiện hết đường nối" trên thanh đầu trang — cố ý nhỏ ngang nút
   HƯỚNG DẪN để không xô các nút sẵn có. */
#rcm-hien-het {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 10px; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
#rcm-hien-het label {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none;
}
#rcm-hien-het input { width: 12px; height: 12px; margin: 0; cursor: pointer; accent-color: #475569; }
#rcm-hien-het .cham { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#rcm-hien-het .c-do    { background: #dc2626; }
#rcm-hien-het .c-la    { background: #16a34a; }
#rcm-hien-het .c-duong { background: #38bdf8; }
/* Màn hẹp: giữ nguyên 3 ô tích (chấm màu + tooltip), chỉ ẩn chữ cho gọn —
   KHÔNG ẩn cả khối, nếu không thì laptop 1024px sẽ mất hẳn chức năng. */
@media (max-width: 1180px) {
  /* Chỉ còn 3 ô tích màu (chính ô tích đã mang màu nhờ accent-color) + tooltip.
     Ẩn chữ và chấm, bóp gap cả thanh, để thanh không phải kéo ngang. */
  #rcm-hien-het { gap: 5px; margin-left: 4px; }
  #rcm-hien-het .nhan, #rcm-hien-het .cham { display: none; }
  #rcm-hien-het label.l-do    input { accent-color: #dc2626; }
  #rcm-hien-het label.l-la    input { accent-color: #16a34a; }
  #rcm-hien-het label.l-duong input { accent-color: #38bdf8; }
  .reading-topbar { gap: 10px; padding: 0 12px; }
}

/* Lựa chọn ĐÃ dùng trong nhóm → mờ + gạch, cho dễ nhìn cái còn lại. Hover thì
   rõ lại để đọc. Nhóm có NB "may use any letter more than once" KHÔNG gạch. */
.group-option-used {
  opacity: 0.4;
  filter: blur(1.1px);
  text-decoration: line-through;
  transition: filter .15s, opacity .15s;
}
.group-option-used:hover { opacity: 0.9; filter: none; }

.group-questions {
  padding: 14px 18px;
}

/* Questions pane */
.question-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.question-item:last-child { margin-bottom: 0; }
.question-item .q-number {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.question-item .q-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.6;
}
.answer-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.answer-box .answer-label {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.answer-box .answer-text {
  font-size: 14px;
  font-weight: 600;
  color: #15803d;
  margin-top: 2px;
}

.why-section { margin-top: 8px; }
.why-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
  padding: 4px 0;
  background: none;
  border: none;
}
.why-toggle:hover { text-decoration: underline; }
.why-content {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--primary-light);
  border-radius: 8px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.6;
  display: none;
}
.why-content.open { display: block; }

/* Synonym inline tag (hiện ngay cạnh từ được bôi trong bài) */
.synonym-inline {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  line-height: 1.6;
  white-space: nowrap;
}

/* Hộp giải thích "Tại sao lại như vậy?" – luôn hiển thị */
.why-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--primary-light);
  border-radius: 8px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.6;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.why-box .why-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }

/* Nút "nằm ở đoạn nào?" */
.find-para-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.find-para-btn:hover {
  background: var(--primary-light);
}

/* Flash animation cho đoạn văn */
@keyframes para-flash {
  0%   { background-color: transparent; }
  15%  { background-color: #fef08a; }
  50%  { background-color: #fde047; }
  85%  { background-color: #fef08a; }
  100% { background-color: transparent; }
}
.para-flash {
  animation: para-flash 1.4s ease;
  border-radius: 6px;
}

/* Vocabulary panel */
.vocab-panel {
  width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.vocab-panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vocab-panel-header h3 { font-size: 14px; font-weight: 700; }

.vocab-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  padding: 0 12px;
}
.vocab-tab {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.vocab-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.vocab-tab:hover { color: var(--text); }
.tab-badge {
  display: inline-block;
  background: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
}
.vocab-tab.active .tab-badge {
  background: var(--primary-light);
  color: var(--primary);
}

.vocab-panel-body { flex: 1; overflow-y: auto; padding: 12px; }

.vocab-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 13px;
}
.vocab-item .vocab-word { font-weight: 700; color: var(--text); }
.vocab-item .vocab-syn { color: var(--text-muted); margin-top: 2px; }
.vocab-item .vocab-syn span { color: var(--primary); font-weight: 500; }
.vocab-delete {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.vocab-delete:hover { color: var(--danger); }

/* Vocab panel: 2/3 list + 1/3 notes */
.vocab-panel-body {
  flex: 2;
  overflow-y: auto;
  padding: 12px;
  min-height: 0; /* bắt buộc để flex shrink hoạt động */
}

/* Export bar (giữa vocab list và notes) */
.vocab-export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.export-trigger-btn {
  padding: 5px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.export-trigger-btn:hover { background: var(--primary-dark); }

/* Notes: 1/3 */
.note-area {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.note-area label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.note-area textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
}
.note-area textarea:focus { border-color: var(--primary); }
.note-save-btn {
  padding: 7px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.note-save-btn:hover { background: var(--primary-dark); }

/* Modal xuất từ vựng */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-close {
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  color: var(--text-muted); line-height: 1;
}
.modal-close:hover { color: var(--text); }

.export-platform-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.platform-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
}
.platform-btn:hover { border-color: var(--primary); color: var(--primary); }
.platform-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.export-instruction {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.export-textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: #f8fafc;
  resize: vertical;
  outline: none;
  cursor: text;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Utility */
.hidden { display: none !important; }
.flex { display: flex; }
.gap-2 { gap: 8px; }

/* Export/Import buttons */
.topbar-btn-outline {
  padding: 8px 14px !important;
  font-size: 13px !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  color: var(--text-muted) !important;
}
.topbar-btn-outline:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Grading mode */
.grading-error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.3);
}

/* Admin action buttons */
.admin-action-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
}
.admin-action-btn:hover { background: var(--bg); color: var(--text); }
.admin-delete-btn:hover { background: #fef2f2; color: var(--danger); border-color: var(--danger); }

/* ===== LISTENING PAGE ===== */

/* Audio Player */
.audio-player-section {
  padding: 18px;
  border-bottom: 1.5px solid var(--border);
  background: linear-gradient(135deg, #fff0f0 0%, #fff8f8 100%);
}
.audio-player {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.player-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.player-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.player-btn:hover { background: var(--primary-dark); }
.player-progress-wrap {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
.player-progress {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  width: 0%;
  transition: width 0.2s linear;
}
.player-time {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}
.player-speed {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.speed-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}
.speed-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.speed-btn:hover { border-color: var(--primary); color: var(--primary); }
.speed-btn.active:hover { color: white; }

/* Fill-in-the-blank Questions */
.listening-questions {
  padding: 18px;
  font-size: 15px;
  line-height: 2;
  color: var(--text);
}
.listening-section {
  margin-bottom: 20px;
}
.listen-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.listen-table th {
  background: var(--primary);
  color: white;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.listen-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.8;
}
.listen-table tr:nth-child(even) td {
  background: #f8fafc;
}
.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.section-content { line-height: 2.2; }
.blank-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px;
  vertical-align: middle;
}
.blank-num {
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--primary);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}
.blank-input {
  width: 140px;
  padding: 4px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.blank-input:focus { border-color: var(--primary); }
.blank-input.blank-correct {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
  font-weight: 600;
}
.blank-input.blank-wrong {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
  text-decoration: line-through;
}
.answer-hint {
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  margin-left: 4px;
  white-space: nowrap;
}

/* Subtitle Panel */
.subtitle-content {
  padding: 12px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.subtitle-line {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
  line-height: 1.6;
}
.subtitle-line:hover { background: var(--bg); }
.subtitle-line.sub-active {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
}
.sub-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  min-width: 40px;
  padding-top: 2px;
  flex-shrink: 0;
}
.sub-text {
  font-size: 14px;
  color: var(--text);
}

/* ===== TRANSLATION PAGE ===== */
.trans-layout {
  display: flex;
  margin-top: 60px;
  min-height: calc(100vh - 60px);
}
.trans-body {
  flex: 1;
  padding: 20px;
  min-width: 0;
}
.trans-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: visible; /* để popup pills (nằm trên chunk) không bị cắt */
}
.trans-section-header {
  background: linear-gradient(135deg, #fff0f0 0%, #fff8f8 100%);
  border-radius: 11px 11px 0 0; /* giữ góc tròn khi section overflow:visible */
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  border-bottom: 1.5px solid var(--border);
}

/* Câu gốc */
.trans-original {
  padding: 20px;
  font-size: 18px;
  line-height: 2;
  color: var(--text);
  user-select: text;
  cursor: text;
}
.orig-word {
  display: inline;
  border-radius: 3px;
  padding: 1px 0;
  transition: background 0.15s;
}
.orig-done {
  opacity: 0.4;
  text-decoration: line-through;
}
.chip-remaining {
  border-style: dashed !important;
  opacity: 0.5;
  border-color: var(--text-muted) !important;
  background: var(--bg) !important;
}
.remaining-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
/* Translation inputs */
.trans-input {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  text-align: center;
  /* textarea tự giãn: không cho kéo tay, ẩn scrollbar, wrap chữ, cao tối thiểu 1 dòng */
  resize: none;
  overflow: hidden;
  line-height: 1.45;
  min-height: 30px;
  box-sizing: border-box;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
.trans-input:focus { border-color: var(--primary); }
.hint-btn {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.hint-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
/* Lớp luyện đề: nút gợi ý khoá lại — xám hẳn và không có hiệu ứng hover, để
   nhìn là biết bấm không được chứ không phải bấm mãi không thấy gì. */
.hint-btn.hint-btn-khoa,
.hint-btn.hint-btn-khoa:hover {
  background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0;
  cursor: not-allowed; opacity: .85;
}

.finalize-btn, .finalize-btn:active {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.finalize-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--success);
  border-radius: 6px;
  background: #f0fdf4;
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.finalize-btn:hover { background: var(--success); color: white; }
.word-divider {
  display: inline-block;
  cursor: pointer;
  color: transparent;
  width: 8px;
  text-align: center;
  position: relative;
  vertical-align: middle;
  transition: all 0.15s;
  border-radius: 2px;
  margin: 0 1px;
}
.word-divider:hover {
  color: var(--primary);
  background: var(--primary-light);
  width: 14px;
  font-weight: 700;
}
.word-divider.divider-cut {
  color: var(--primary);
  background: var(--primary);
  width: 3px;
  margin: 0 3px;
  border-radius: 2px;
}

/* Cut popup */
#cut-popup {
  position: fixed;
  z-index: 1000;
  background: var(--text);
  border-radius: 10px;
  padding: 6px;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#cut-popup .popup-action {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 7px; color: white;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
#cut-popup .popup-action:hover { background: rgba(255,255,255,0.12); }

/* Câu xé – inline horizontal */
.trans-cuts-inline {
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 8px; /* row-gap rộng hơn để 2 hàng chunk cách nhau cho dễ nhìn */
  min-height: 60px;
  align-items: flex-start;
}
.cuts-placeholder {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  width: 100%;
  padding: 12px;
}

/* Mỗi cụm = 1 cột dọc (chip + dropdowns bên dưới) */
.cut-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  position: relative; /* mỏ neo cho popup pills */
}
.cut-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  position: relative;
}
.cut-fn-badge {
  font-size: 10px;
  font-weight: 700;
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1;
}
.cut-remove {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  padding: 0 1px;
}
.cut-remove:hover { opacity: 1; }

/* Dropdown inline dưới mỗi cụm */
.func-select-inline {
  width: 100%;
  padding: 4px 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  background: white;
  color: var(--text);
  text-align: center;
}
.func-select-inline:focus { border-color: var(--primary); }
.func-select-inline.sub {
  border-color: #ddd;
  font-size: 10px;
  color: var(--text-muted);
}
.verb-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  justify-content: center;
}
.verb-checkbox-inline input { cursor: pointer; width: 12px; height: 12px; }
.func-locked {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 3px 6px;
  background: var(--bg);
  border-radius: 4px;
  font-weight: 600;
}

/* Pill chọn chức năng (thay dropdown — giống reading xé câu) */
.tfn-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
}
/* Ép xuống dòng: bước 1 → dòng 1 = S V O, dòng 2 = yĐTC LT Rằng */
.tfn-pill-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

/* PC (có hover): mặc định CHỈ hiện chunk; hover vào chunk mới hiện pills + nút Nội ĐT.
   Thiết bị cảm ứng (hover:none) thì pills luôn hiện để bấm. */
/* Pills nằm trong popup nổi — đè LÊN TRÊN chunk, không stretch vùng câu xé. */
.tfn-pop {
  position: absolute;
  bottom: 100%; /* nằm TRÊN chunk */
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 7px;
  z-index: 200; /* đè lên trên tất cả */
  display: none; /* mặc định ẩn — hiện khi hover (PC) / tap mở (mobile) */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
/* mũi tên nhỏ trỏ XUỐNG chunk */
.tfn-pop::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
}
/* Cầu nối trong suốt lấp khoảng trống chip↔popup → rê chuột lên không mất hover */
.tfn-pop::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  height: 11px;
}

/* PC (có hover): hover vào chunk → hiện popup */
@media (hover: hover) {
  .cut-column:hover .tfn-pop { display: flex; }
}
/* Cảm ứng (hover:none): TAP vào chunk → mở popup */
@media (hover: none) {
  .cut-chip { cursor: pointer; }
  .cut-column.cut-open .tfn-pop { display: flex; }
  .cut-column.cut-open .cut-chip { box-shadow: 0 0 0 2px var(--primary); }
}
.tfn-pill {
  padding: 4px 9px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: filter .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tfn-pill:hover { filter: brightness(0.94); }
.tfn-pill.active { color: #fff; }
.tfn-subpill {
  margin-top: 3px;
  padding: 3px 9px;
  border: 1.5px solid #dc2626;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tfn-subpill.active { background: #dc2626; color: #fff; }

/* Nút "sang bước tiếp theo" đặt ngay sau cụm cuối — cao bằng 1 chunk, không dãn dòng */
.trans-nextstep-col { align-self: flex-start; min-width: auto; }
.trans-nextstep-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.trans-nextstep-btn:hover { filter: brightness(1.06); }
.trans-nextstep-kbd {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
  background: rgba(255,255,255,0.22);
  padding: 1px 7px;
  border-radius: 5px;
}

/* Notification bar (hover, không chắn) */
.notify-bar {
  position: fixed;
  top: 68px;
  right: 20px;
  left: auto;
  transform: none;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--text);
  color: white;
  padding: 16px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  font-size: 14px;
  max-width: 360px;
  min-width: 280px;
  animation: slideDown 0.3s ease;
}
.notify-bar span { line-height: 1.6; }
.notify-bar #notify-actions { align-self: flex-end; }
.notify-close {
  background: rgba(255,255,255,0.15);
  border: none; color: white;
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notify-close:hover { background: rgba(255,255,255,0.3); }
#notify-actions { display: flex; gap: 6px; flex-shrink: 0; }
#notify-actions button {
  padding: 5px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#notify-actions button:hover { background: rgba(255,255,255,0.15); }
#notify-actions button.notify-primary {
  background: var(--primary);
  border-color: var(--primary);
}

/* Theory panel */
.theory-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1.5px solid var(--border);
  overflow-y: auto;
  max-height: calc(100vh - 60px);
}
.theory-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.theory-header h3 { font-size: 14px; font-weight: 700; }
.theory-content { padding: 16px; }
.theory-step {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.theory-step:last-child { border-bottom: none; }
.theory-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.theory-step p { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 8px; }
.theory-box {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.theory-hot { background: #dbeafe; border-left: 3px solid #2563eb; }
.theory-viec { background: #fef3c7; border-left: 3px solid #d97706; }
.theory-dtch { background: #dcfce7; border-left: 3px solid #16a34a; }
.theory-hint { color: var(--text-muted); font-size: 11px; }
.theory-step.theory-flash {
  animation: theoryFlash 2s ease;
  border-radius: 8px;
}
@keyframes theoryFlash {
  0% { background: transparent; }
  10% { background: #fef08a; }
  100% { background: transparent; }
}
.theory-example {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.8;
}
.ex-dtch { color: #16a34a; margin-bottom: 4px; }
.ex-mdqh { color: #2563eb; }

/* ===== SPEAKING ===== */
.speaking-group { border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.speaking-group-header {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  cursor: pointer; border-left: 4px solid var(--primary); background: var(--bg);
  font-size: 15px; font-weight: 600; transition: background 0.15s;
}
.speaking-group-header:hover { background: var(--primary-light); }
.speaking-group-count { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 400; }
.speaking-group-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.speaking-group.open .speaking-group-arrow { transform: rotate(180deg); }
.speaking-group-body { display: none; padding: 12px 18px; }
.speaking-group.open .speaking-group-body { display: block; }
.speaking-topics-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.speaking-topic-card {
  padding: 10px 16px; border: 1.5px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--text); font-size: 14px; font-weight: 500;
  transition: all 0.15s; display: flex; align-items: center; gap: 8px;
}
.speaking-topic-card:hover { border-color: var(--primary); background: var(--primary-light); }
.topic-qcount { font-size: 11px; color: var(--text-muted); }
.topic-done { border-color: #16a34a; background: #f0fdf4; }
.topic-done-badge {
  font-size: 10px; font-weight: 700; color: white; background: #16a34a;
  padding: 1px 6px; border-radius: 4px; text-transform: uppercase;
}
/* Đề đã có bài luyện ngữ điệu Stair-case. Màu tím để không lẫn với Done (xanh) —
   hai nhãn đứng cạnh nhau nên phải phân biệt được ngay từ xa. */
.topic-stair-badge {
  font-size: 10px; font-weight: 700; color: white; background: #7c3aed;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.speak-reset-btn {
  margin-left: auto; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: transparent; font-size: 12px;
  cursor: pointer; color: var(--text-muted); white-space: nowrap;
}
.speak-reset-btn:hover { background: #fef2f2; color: var(--danger); border-color: var(--danger); }

/* Speaking practice page */
.speaking-body { padding: 20px; margin-top: 60px; max-width: 100%; }
.en-hidden { filter: blur(6px); user-select: none; pointer-events: none; transition: filter 0.3s; }
.en-hidden:hover { filter: blur(3px); }
.speaking-section {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  margin-bottom: 24px; overflow: hidden;
}
.speaking-q-header {
  background: linear-gradient(135deg, #fff0f0, #fff8f8);
  padding: 14px 18px; border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.speaking-q-num { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.speaking-q-text { font-size: 15px; font-weight: 600; color: var(--text); }
.speaking-idea-area { padding: 16px 18px; }
.speaking-idea {
  width: 100%; padding: 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; resize: vertical; min-height: 60px; margin-top: 8px; outline: none;
}
.speaking-idea:focus { border-color: var(--primary); }
.speaking-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
.speaking-answer-vi, .speaking-answer-en { padding: 16px 18px; border-top: 1px solid var(--border); }
.speaking-vi-chunks { display: flex; flex-wrap: wrap; gap: 10px; }
.vi-chunk {
  flex: 1; min-width: 150px; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; background: var(--bg);
}
.vi-text { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.en-slot { min-height: 28px; }
.en-filled { font-size: 13px; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; }
.en-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }
.speak-btn, .mic-btn {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; font-size: 11px; cursor: pointer; margin-right: 4px; margin-top: 4px;
}
.speak-btn:hover { background: var(--primary-light); color: var(--primary); }
.mic-btn:hover { background: #fef3c7; color: #d97706; }
.mic-result { font-size: 12px; margin-top: 4px; min-height: 18px; }
.chunk-note-input {
  margin-top: 6px; width: 100%; padding: 4px 8px; border: 1px dashed var(--border);
  border-radius: 6px; font-size: 11px; color: var(--text-muted); background: #fafafa;
  outline: none; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.chunk-note-input:focus { border-color: var(--primary); color: var(--text); background: white; }
/* Non-empty note → yellow highlight so it stands out from blank ones */
.chunk-note-input:not(:placeholder-shown):not(:focus) {
  background: #fef08a;
  border-color: #eab308;
  border-style: solid;
  color: #713f12;
  font-weight: 600;
}
.speak-btn-full {
  padding: 8px 16px; border: 1.5px solid var(--primary); border-radius: 8px;
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; margin-top: 10px;
}
.speak-btn-full:hover { background: var(--primary-light); }
.speaking-active {
  background: #fef2f2 !important; border-color: #dc2626 !important; color: #dc2626 !important;
}

/* ===== SPEECH POPUP ===== */
#speech-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.speech-popup-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.speech-popup-box {
  position: relative; background: white; border-radius: 16px; padding: 24px;
  width: 90%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: speechPopupIn 0.2s ease-out;
}
@keyframes speechPopupIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.speech-popup-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 16px; font-weight: 700; color: #dc2626;
}
.speech-popup-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #dc2626;
  animation: speechDotPulse 1s infinite;
}
@keyframes speechDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
.speech-popup-expected {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.speech-popup-transcript {
  background: #fffbeb; border: 1.5px solid #fbbf24; border-radius: 10px;
  padding: 16px; min-height: 60px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.speech-popup-stop {
  width: 100%; padding: 14px; font-size: 15px; border-radius: 10px;
  background: var(--primary) !important; color: white !important;
}
.speech-popup-stop:hover { opacity: 0.9; }

/* Progressive chunks */
.vi-chunk-next { border: 2px dashed var(--primary) !important; background: #fff5f5 !important; }
.vi-chunk-hidden { display: none !important; }
.en-chunk-done {
  display: inline-block; padding: 4px 10px; background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 6px; font-size: 13px; font-weight: 500; color: #166534;
}

.speaking-en-sentence {
  font-size: 16px; line-height: 2; padding: 8px 0;
}

/* ===== HAMBURGER MENU ===== */
.hamburger {
  display: none;
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 201;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 22px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.sidebar-open .sidebar { transform: translateX(0) !important; }
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 99;
  background: rgba(0,0,0,0.4);
}
.sidebar-open .sidebar-overlay { display: block; }

/* ===== RESPONSIVE ===== */
/* ===== CAMBRIDGE ACCORDION VIEW ===== */
.cam-book {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 16px;
}

.cam-book-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.cam-book-header:hover { background: var(--bg); }

.cam-arrow {
  font-size: 18px;
  color: var(--text-muted);
  transition: transform 0.25s;
}
.cam-book.open .cam-arrow { transform: rotate(180deg); }

.cam-book-body {
  display: none;
  padding: 0 24px 20px;
}
.cam-book.open .cam-book-body { display: block; }

.cam-test {
  margin-bottom: 16px;
}
.cam-test:last-child { margin-bottom: 0; }

.cam-test-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.cam-passages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cam-passage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
  border: 1px solid transparent;
}
.cam-passage-card:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(4px);
}

.cam-passage-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

.cam-passage-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.cam-passage-vi {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
}

.cam-badge-done {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  background: #dcfce7;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.cam-badge-new {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: #e0f2fe;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.cam-badge-ak {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  margin-right: 4px;
}

/* Tag "Đang làm" — hổ phách */
.cam-badge-progress {
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-progress { background: #fef3c7; color: #b45309; }

.cam-passage-card.cam-done {
  opacity: 0.7;
}
.cam-passage-card.cam-done:hover { opacity: 1; }
/* Đang làm: viền trái hổ phách để dễ nhận ra bài đang dở */
.cam-passage-card.cam-progress {
  border-left: 3px solid #f59e0b;
}

@media (max-width: 768px) {
  /* Hamburger visible */
  .hamburger { display: flex; }

  /* Sidebar: slide-in overlay */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
  }

  /* Main content: no margin */
  .main-content { margin-left: 0; padding: 16px; padding-top: 60px; }

  /* Dashboard */
  .page-header { padding-right: 0; }
  .page-header h1 { font-size: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-actions { flex-wrap: wrap; }
  .dashboard-hero h1 { font-size: 24px; }
  .hero-quote { max-width: 100%; font-size: 14px; }

  /* Reading/Listening body: stack */
  .reading-body { flex-direction: column; }
  .reading-pane { min-height: auto; }
  .vocab-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); position: fixed; bottom: 0; left: 0; right: 0; max-height: 50vh; z-index: 150; }

  /* Topbar */
  .reading-topbar {
    flex-wrap: nowrap;
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reading-topbar h2 { font-size: 14px; min-width: 0; }
  .lang-controls { flex-wrap: nowrap; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lang-controls button, .lang-controls label {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .lang-group label, .lang-group span { font-size: 11px; }
  .toggle-switch { transform: scale(0.8); }
  .back-btn { font-size: 12px; }
  .topbar-btn-outline { padding: 5px 8px !important; font-size: 11px !important; }

  /* Passage/Questions */
  .passage-content { font-size: 14px; line-height: 1.7; }
  .question-group { font-size: 13px; }
  .group-header { padding: 10px 12px; }
  .group-questions { padding: 10px 12px; }
  .question-item { padding: 12px; }

  /* Highlight popup */
  #highlight-popup { min-width: 180px; }

  /* Listening */
  .audio-player-section { padding: 12px; }
  .player-time { font-size: 11px; min-width: 60px; }
  .listening-questions { padding: 12px; font-size: 14px; }
  .blank-input { width: 90px; font-size: 12px; }
  .blank-num { font-size: 10px; padding: 1px 5px; }

  /* Translation */
  .trans-layout { flex-direction: column; }
  .trans-body { padding: 12px; }
  .theory-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; position: relative; }
  .trans-original { font-size: 16px; padding: 14px; }
  .trans-cuts-inline { gap: 6px; }
  .cut-column { min-width: 60px; }
  .cut-chip { font-size: 12px; padding: 5px 8px; }
  .func-select-inline { font-size: 10px; padding: 3px 4px; }

  /* Speaking */
  .speaking-body { padding: 12px; margin-top: 80px; }
  .speaking-section { margin-bottom: 16px; }
  .speaking-q-header { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .speaking-q-text { font-size: 14px; }
  .speaking-vi-chunks { flex-direction: column; }
  .vi-chunk { min-width: auto; }
  .speaking-en-sentence { font-size: 14px; }
  .speaking-idea { min-height: 50px; }
  .speak-reset-btn { font-size: 11px; padding: 3px 8px; }
  .word-divider { width: 16px; min-height: 24px; }
  .word-divider:hover { width: 20px; }
  .finalize-btn { padding: 8px 16px; font-size: 13px; }

  /* Speaking list */
  .speaking-topic-card { padding: 8px 12px; font-size: 13px; }

  /* Cards grid */
  .reading-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }

  /* Auth page */
  .auth-card { width: 95%; margin: 20px auto; }

  /* Onboarding */
  #onboarding-overlay > div { padding: 20px; max-width: 95%; }

  /* Find reminder */
  #find-reminder { max-width: 90vw; font-size: 12px; }
  .reminder-word { max-width: 200px; font-size: 13px; }

  /* Notify bar */
  .notify-bar { max-width: 90vw; font-size: 12px; padding: 8px 12px; }

  /* Cambridge accordion mobile */
  .cam-book-header { padding: 14px 16px; }
  .cam-book-header span:first-child { font-size: 16px !important; }
  .cam-book-body { padding: 0 12px 16px; }
  .cam-passage-card { flex-wrap: wrap; gap: 6px; padding: 12px; }
  .cam-passage-num { min-width: auto; font-size: 11px; padding: 3px 8px; }
  .cam-passage-title { font-size: 13px; width: 100%; order: 2; }
  .cam-passage-vi { font-size: 12px; width: 100%; order: 3; }

  /* Part 2 category tabs mobile */
  .p2-category-tabs { gap: 6px; }
  .p2-cat-tab { font-size: 12px; padding: 6px 10px; }
  .p2-cat-icon { display: none; }
}

/* ============================================================
   SPEAKING PART 2 – Category Tabs & Sections
   ============================================================ */
.p2-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.p2-cat-tab {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.p2-cat-tab:hover {
  border-color: var(--primary);
  background: rgba(221, 0, 0, 0.04);
}

.p2-cat-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.p2-cat-tab.active .p2-cat-count {
  background: rgba(255,255,255,0.3);
  color: white;
}

.p2-cat-count {
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.p2-cat-icon {
  font-size: 16px;
}

.p2-category-section {
  margin-bottom: 32px;
}

.p2-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   SPEAKING PART 2 – Practice Page
   ============================================================ */

/* Cue Card */
.p2-cue-card {
  margin-bottom: 20px;
}
.p2-cue-card-inner {
  background: linear-gradient(135deg, #fefce8, #fef3c7);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 24px;
}
.p2-cue-topic {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.p2-cue-topic-vi {
  font-size: 0.9em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.p2-cue-label {
  font-size: 0.85em;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 8px;
}
.p2-cue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.p2-cue-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.95em;
}
.p2-cue-bullet {
  color: #d97706;
  font-weight: 700;
}
.p2-cue-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  margin-left: auto;
}

/* Tip */
.p2-tip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #1e40af;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Question Section */
.p2-question-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.p2-q-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.p2-q-number {
  background: var(--primary);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.p2-q-text {
  font-weight: 600;
  font-size: 1em;
  flex: 1;
}

/* Part 1 Suggestions */
.p2-suggestions {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.p2-suggest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
}
.p2-suggest-header:hover { background: #f1f5f9; }
.p2-suggest-arrow { font-size: 11px; transition: transform 0.2s; }

.p2-suggest-body {
  padding: 0 14px 14px;
  max-height: 400px;
  overflow-y: auto;
}

/* Part 1 Group */
.p2-p1-group {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.p2-p1-match {
  border-color: #f59e0b;
  background: #fffbeb;
}
.p2-p1-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.p2-p1-group-header:hover { background: rgba(0,0,0,0.03); }
.p2-p1-group-body { display: none; padding: 0 12px 8px; }
.p2-p1-group.open .p2-p1-group-body { display: block; }

/* Part 1 Topic */
.p2-p1-topic { margin-bottom: 4px; }
.p2-p1-topic-name {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  cursor: pointer;
  color: var(--primary);
}
.p2-p1-topic-name:hover { text-decoration: underline; }
.p2-p1-topic-questions { display: none; padding-left: 12px; }
.p2-p1-topic.open .p2-p1-topic-questions { display: block; }

/* Part 1 Question (selectable) */
.p2-p1-q {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.p2-p1-q:hover { background: #e2e8f0; }
.p2-p1-q.selected { background: #dbeafe; color: #1d4ed8; font-weight: 500; }
.p2-p1-q-hot { background: #fffbeb; border-left: 2px solid #f59e0b; }
.p2-p1-q-text { flex: 1; }

/* Translate button */
.p2-translate-btn {
  margin-top: 6px;
  padding: 6px 14px;
  font-size: 12px;
  background: #7c3aed;
}

/* Collected Part 1 content cards */
.p2-collected { margin-bottom: 14px; }
.p2-collected-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.p2-collected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.p2-collected-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  padding: 8px;
  background: white;
  border-radius: 6px;
  margin-bottom: 8px;
}
.p2-use-btn {
  padding: 6px 14px;
  font-size: 12px;
  background: #16a34a;
}
.p2-p1-check { font-size: 14px; flex-shrink: 0; }

/* Answer area */
.p2-answer-area { }
.p2-answer-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.p2-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.p2-textarea:focus {
  border-color: var(--primary);
}
.p2-ai-btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* Mobile */
@media (max-width: 768px) {
  .p2-cue-card-inner { padding: 16px; }
  .p2-cue-topic { font-size: 1em; }
  .p2-cue-list li { flex-wrap: wrap; }
  .p2-cue-tag { margin-left: 0; margin-top: 2px; }
  .p2-question-section { padding: 14px; }
  .p2-q-header { flex-wrap: wrap; }
}

/* ============================================================
   VOCAB MODULE — gradient & smooth animations cho flashcards/study
   ============================================================ */

/* ── List page ── */
.vocab-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px;
  padding: 32px 28px;
  color: #fff;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.vocab-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.vocab-hero h2 { font-size: 26px; font-weight: 900; margin-bottom: 6px; position: relative; z-index: 1;}
.vocab-hero p  { font-size: 15px; opacity: 0.95; line-height: 1.6; position: relative; z-index: 1;}
.vocab-hero-actions { display: flex; gap: 10px; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.vocab-hero-btn {
  background: rgba(255,255,255,0.95); color: #4f46e5; border: none;
  padding: 11px 20px; border-radius: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.vocab-hero-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15);}
.vocab-hero-btn.outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.vocab-hero-btn.outline:hover { background: rgba(255,255,255,0.18); }

.vocab-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.vocab-tab {
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border); background: #fff; color: var(--text-muted);
  border-radius: 999px; cursor: pointer; transition: all 0.15s;
}
.vocab-tab.active { background: var(--primary); color: #fff; border-color: var(--primary);}
.vocab-tab:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

.vocab-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vocab-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 0; cursor: pointer; transition: all 0.2s;
  text-decoration: none; color: inherit; display: block; overflow: hidden;
  box-shadow: var(--shadow);
}
.vocab-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: var(--primary);}
.vocab-card-banner {
  height: 70px; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 800; font-size: 22px;
}
.vocab-card-body { padding: 14px 18px 18px; }
.vocab-card-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--text); line-height: 1.35; }
.vocab-card-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; min-height: 32px; line-height: 1.5; }
.vocab-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.vocab-card-pill { background: var(--primary-light); color: var(--primary); padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 11px;}
.vocab-card-progress { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin: 10px 0 0;}
.vocab-card-progress > div { height: 100%; background: linear-gradient(90deg, var(--success), #22c55e); border-radius: 999px; transition: width 0.3s;}

/* ── Create page ── */
.vc-tabs { display: flex; gap: 4px; margin-bottom: 22px; background: #f1f5f9; padding: 5px; border-radius: 12px; }
.vc-tab {
  flex: 1; padding: 11px 14px; font-size: 14px; font-weight: 700;
  border: none; background: transparent; color: var(--text-muted);
  border-radius: 9px; cursor: pointer; transition: all 0.15s;
}
.vc-tab.active { background: #fff; color: var(--primary); box-shadow: var(--shadow); }
.vc-panel { display: none; }
.vc-panel.active { display: block; }

.vc-input, .vc-textarea, .vc-select {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 10px; outline: none; transition: border-color 0.2s;
}
.vc-input:focus, .vc-textarea:focus, .vc-select:focus { border-color: var(--primary); }
.vc-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.vc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .vc-row { grid-template-columns: 1fr; } }

.vc-label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px;}

.vc-icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-icon-pick button {
  width: 40px; height: 40px; border: 1.5px solid var(--border); background: #fff;
  border-radius: 10px; cursor: pointer; font-size: 20px; transition: all 0.15s;
}
.vc-icon-pick button.active, .vc-icon-pick button:hover { border-color: var(--primary); transform: scale(1.05); }

.vc-color-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-color-pick button {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: transform 0.15s;
}
.vc-color-pick button.active { border-color: var(--text); transform: scale(1.12); }

/* Manual editor table (div-based grid) */
.vc-term-table { width: 100%; }
.vc-term-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 8px; }
.vc-term-head {
  display: grid; grid-template-columns: 36px 1fr 1fr 36px; gap: 10px;
  padding: 4px 10px 6px;
}
.vc-term-head > div { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.vc-term-row {
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
  display: grid; grid-template-columns: 36px 1fr 1fr 36px; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px;
}
.vc-term-row input {
  border: none; background: transparent; font-size: 14px; padding: 6px 4px; outline: none;
  width: 100%; border-bottom: 1px solid transparent;
}
.vc-term-row input:focus { border-bottom-color: var(--primary); }
.vc-term-num { font-size: 13px; font-weight: 700; color: var(--text-muted); text-align: center; }
.vc-term-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; transition: color 0.15s; }
.vc-term-del:hover { color: var(--danger); }

/* AI loading */
.vc-ai-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 20px; text-align: center; color: var(--text-muted);
}
.vc-spinner {
  width: 38px; height: 38px;
  border: 4px solid #e2e8f0; border-top-color: var(--primary);
  border-radius: 50%; animation: vc-spin 0.8s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* Preview cards (after AI) */
.vc-preview-grid { display: grid; gap: 8px; }
.vc-preview-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
}
.vc-preview-card .term { font-weight: 800; font-size: 15px; color: var(--text); }
.vc-preview-card .term .pron { font-weight: 500; color: var(--text-muted); font-size: 13px; margin-left: 6px;}
.vc-preview-card .pos { display: inline-block; background: #fffbeb; color: #b45309; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-top: 2px;}
.vc-preview-card .meaning { font-size: 14px; color: var(--text); }
.vc-preview-card .ex { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 4px; line-height: 1.6; font-style: italic;}
.vc-preview-card .syn { grid-column: 1 / -1; font-size: 12px; color: var(--text); padding-top: 4px; line-height: 1.5;}
.vc-preview-card .syn span[contenteditable] { color: #047857; font-weight: 600;}
.vc-preview-card.is-pair { background: linear-gradient(135deg, #ecfdf5 0%, #fff 60%); border-color: #6ee7b7;}
.vc-preview-card.is-pair .syn span[contenteditable] { color: #065f46;}
.vc-pair-badge {
  display: inline-block; margin-top: 4px; margin-left: 6px;
  background: #d1fae5; color: #065f46; font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.2px;
}

/* ============================================================
   STUDY PAGE — Flashcards / Learn / Match / Test
   ============================================================ */
.study-shell {
  max-width: 900px; margin: 0 auto;
}
.study-header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 20px; padding: 18px 22px;
  background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%);
  border-radius: 16px; color: #fff;
}
.study-header h1 { font-size: 20px; font-weight: 900; margin-bottom: 2px;}
.study-header .meta { font-size: 13px; opacity: 0.9;}
.study-header .progress-mini { background: rgba(255,255,255,0.18); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;}

.mode-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.mode-btn {
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  background: #fff; border: 1.5px solid var(--border); color: var(--text-muted);
  border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s;
}
.mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(221,0,0,0.25);}
.mode-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Flashcard */
.fc-stage {
  perspective: 1200px;
  display: flex; flex-direction: column; align-items: center;
}
.fc-card {
  width: 100%; max-width: 600px; min-height: 320px;
  position: relative; transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4,.2,.2,1);
  cursor: pointer;
  user-select: none;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0;
  background: var(--surface); border-radius: 22px;
  border: 1.5px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px;
  backface-visibility: hidden;
  text-align: center;
}
.fc-face.back { transform: rotateY(180deg); background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 100%); }
.fc-term {
  font-size: 36px; font-weight: 900; color: var(--text); margin-bottom: 8px; line-height: 1.25;
  word-break: break-word;
}
.fc-pron { color: var(--text-muted); font-size: 16px; margin-bottom: 8px; font-style: italic; }
.fc-pos {
  display: inline-block; background: #fffbeb; color: #b45309; font-size: 11px; font-weight: 800;
  padding: 3px 12px; border-radius: 999px; margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase;
}
.fc-meaning { font-size: 26px; font-weight: 800; color: var(--primary); margin-bottom: 14px; line-height: 1.4;}
.fc-example { font-size: 14px; color: var(--text-muted); font-style: italic; line-height: 1.65; max-width: 90%; }
.fc-example b { color: var(--text); }
.fc-audio-btn {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-light); border: none; color: var(--primary);
  font-size: 18px; cursor: pointer; transition: all 0.15s;
}
.fc-audio-btn:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
.fc-star {
  position: absolute; top: 18px; left: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none; color: #cbd5e1;
  font-size: 22px; cursor: pointer; transition: all 0.15s;
}
.fc-star.active, .fc-star:hover { color: #f59e0b; transform: scale(1.1); }

.fc-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; flex-wrap: wrap;
}
.fc-nav-btn {
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface);
  border: 1.5px solid var(--border); cursor: pointer; font-size: 20px; color: var(--text-muted); transition: all 0.15s;
}
.fc-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.fc-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fc-counter { font-size: 14px; font-weight: 700; color: var(--text-muted); min-width: 80px; text-align: center;}
.fc-shuffle, .fc-reset {
  padding: 9px 14px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--border);
  background: #fff; color: var(--text-muted); border-radius: 10px; cursor: pointer; transition: all 0.15s;
}
.fc-shuffle:hover, .fc-reset:hover { border-color: var(--primary); color: var(--primary); }

.fc-progress-bar {
  width: 100%; max-width: 600px; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
  margin-top: 14px;
}
.fc-progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), #ff6b6b); transition: width 0.35s; border-radius: 999px;}

/* Learn / Test mode */
.lq-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 32px; max-width: 700px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.lq-prompt-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; margin-bottom: 8px;}
.lq-prompt {
  font-size: 28px; font-weight: 900; color: var(--text); margin-bottom: 8px; line-height: 1.3;
}
.lq-prompt .pron { font-weight: 500; font-size: 17px; color: var(--text-muted); margin-left: 8px; font-style: italic; }
.lq-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.lq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .lq-options { grid-template-columns: 1fr; } }
.lq-option {
  padding: 14px 16px; font-size: 15px; font-weight: 600;
  background: #fff; border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left; transition: all 0.15s;
}
.lq-option:hover:not(.disabled) { border-color: var(--primary); background: #fff5f5;}
.lq-option.correct { background: #dcfce7; border-color: #16a34a; color: #166534; }
.lq-option.incorrect { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.lq-option.disabled { cursor: not-allowed; opacity: 0.7;}

.lq-answer-input {
  width: 100%; padding: 14px 16px; font-size: 18px;
  border: 2px solid var(--border); border-radius: 12px; outline: none; transition: border-color 0.15s;
}
.lq-answer-input:focus { border-color: var(--primary); }
.lq-answer-input.correct { border-color: #16a34a; background: #dcfce7;}
.lq-answer-input.incorrect { border-color: #dc2626; background: #fee2e2;}

.lq-submit {
  margin-top: 14px; padding: 12px 24px; font-size: 14px; font-weight: 700;
  background: var(--primary); color: #fff; border: none; border-radius: 10px; cursor: pointer;
}
.lq-submit:hover { background: var(--primary-dark); }

.lq-feedback { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.lq-feedback.ok { background: #dcfce7; color: #166534;}
.lq-feedback.fail { background: #fef3c7; color: #92400e;}

/* Match game */
.match-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 800px; margin: 0 auto;
}
@media (max-width: 768px) { .match-board { grid-template-columns: repeat(2, 1fr); } }
.match-tile {
  background: #fff; border: 2px solid var(--border); border-radius: 12px;
  padding: 16px 14px; min-height: 80px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: all 0.15s;
  user-select: none;
}
.match-tile:hover:not(.matched):not(.selected) { border-color: var(--primary); background: #fff5f5; }
.match-tile.selected { border-color: var(--primary); background: #fff5f5; transform: scale(1.04); }
.match-tile.matched { opacity: 0.25; cursor: default; pointer-events: none; }
.match-tile.flash-correct { background: #dcfce7 !important; border-color: #16a34a !important; }
.match-tile.flash-wrong { background: #fee2e2 !important; border-color: #dc2626 !important; }

.match-stats {
  display: flex; justify-content: center; gap: 28px; margin-bottom: 16px;
  font-size: 14px; font-weight: 700; color: var(--text-muted);
}
.match-stats span b { color: var(--text); font-weight: 900; }

/* Test result */
.result-card {
  text-align: center; padding: 36px 22px; max-width: 520px; margin: 30px auto;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border: 1.5px solid #86efac; border-radius: 18px;
}
.result-card.fail { background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%); border-color: #fca5a5;}
.result-score { font-size: 56px; font-weight: 900; color: #16a34a; margin: 14px 0;}
.result-card.fail .result-score { color: #dc2626; }
.result-card h2 { font-size: 22px; font-weight: 900; }
.result-card .actions { display: flex; gap: 10px; margin-top: 22px; justify-content: center; flex-wrap: wrap;}
.result-card .btn-primary, .result-card .btn-outline {
  padding: 11px 22px; font-size: 14px; font-weight: 700;
  border-radius: 10px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.result-card .btn-outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }

/* Sticky bottom action bar (study) */
.study-bottom-bar {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  padding: 14px 0;
  flex-wrap: wrap;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .fc-term { font-size: 28px; }
  .fc-meaning { font-size: 22px; }
  .lq-prompt { font-size: 22px; }
  .study-header { flex-direction: column; align-items: flex-start; }
  .study-header h1 { font-size: 18px; }
}

/* ============================================================
   Saved-vocab grouped list (vocabulary.html)
   ============================================================ */
.rd-group {
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: box-shadow 0.18s, border-color 0.18s;
}
.rd-group:hover {
  border-color: var(--primary-light, #fca5a5);
  box-shadow: 0 6px 18px rgba(221, 0, 0, 0.06);
}
.rd-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(221, 0, 0, 0.025), transparent);
}
.rd-group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rd-group-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.rd-group-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.rd-create-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  white-space: nowrap;
}
.rd-create-btn:hover { filter: brightness(1.08); }
.rd-create-btn:active { transform: scale(0.97); }
.rd-kahoot-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  white-space: nowrap;
}
.rd-kahoot-btn:hover { filter: brightness(1.08); }
.rd-kahoot-btn:active { transform: scale(0.97); }
.rd-kahoot-btn:disabled { opacity: 0.6; cursor: default; }
.rd-del-group-btn,
.rd-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rd-del-group-btn:hover {
  background: #fef2f2;
  color: var(--danger, #dc2626);
  border-color: #fca5a5;
}
.rd-toggle:hover {
  background: var(--surface-hover, #f8fafc);
  color: var(--text);
}
.rd-group-body {
  max-height: 1200px;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.rd-group-body.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.rd-item-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
}
.rd-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  transition: background 0.12s;
}
.rd-item:hover { background: rgba(221, 0, 0, 0.025); }
.rd-item-text {
  flex: 1;
  min-width: 0;
}
.rd-item-word {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.rd-item-syn {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.rd-item-del {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.rd-item-del:hover {
  background: #fef2f2;
  color: var(--danger, #dc2626);
}

@media (max-width: 720px) {
  .rd-group-head { flex-wrap: wrap; }
  .rd-group-actions { width: 100%; justify-content: flex-end; }
  .rd-item-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase toggle pill — dùng cho xé câu (translation + writing)
   Cho phép user nhảy về bất kỳ phase nào để redo
   ============================================================ */
.phase-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #f1f5f9;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
  flex-wrap: nowrap;
}
.phase-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.08s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}
.phase-toggle button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.6);
}
.phase-toggle button:active { transform: scale(0.96); }
.phase-toggle button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
/* Forward steps are display-only ("just for show") — no click action */
.phase-toggle button.phase-forward {
  cursor: default;
  opacity: 0.55;
}
.phase-toggle button.phase-forward:hover {
  background: transparent;
  color: var(--text-muted);
  transform: none;
}
.phase-toggle-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 720px) {
  .phase-toggle-hint { display: none; }
}
.phase-toggle .phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.phase-toggle button.active .phase-num {
  background: var(--primary);
}
@media (max-width: 720px) {
  .phase-toggle button { padding: 6px 8px; font-size: 11px; }
  .phase-toggle .phase-label-long { display: none; }
}


/* Bảng của câu table-completion (xé câu) — các câu cùng nhóm dùng cột đều nhau
   để 3 thẻ câu liên tiếp nhìn thẳng hàng như bảng gốc trong đề. */
.xc-qtable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 6px 0;
}
.xc-qtable th,
.xc-qtable td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.7;
}
.xc-qtable th {
  background: var(--surface-2, #f8fafc);
  font-weight: 700;
}


/* Sơ đồ của dạng "Label the diagram" trong xé câu */
.xc-q-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 4px;
}
.xc-q-images img {
  display: block;
  width: 100%;
  max-width: 760px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
}


/* === Top bar trang xé câu: mọi nút cùng cỡ chữ & cùng chiều cao === */
/* reading-topbar-dong-deu — nút 1 dòng và nút 2 dòng (DỊCH / ON) trước đây cao
   thấp khác nhau nên hàng nút bị xô lệch. Ép cùng chiều cao, cùng cỡ chữ, và
   căn giữa nội dung bên trong để mọi nút thẳng hàng. */
.reading-topbar { flex-wrap: nowrap; overflow-x: auto; }
.reading-topbar .topbar-btn-outline,
.reading-topbar #xc-counter-top > * {
  font-size: 12.5px !important;
  font-weight: 700;
  line-height: 1.15;
  min-height: 40px;
  padding: 4px 12px !important;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
}
.reading-topbar #xc-progress { font-size: 12.5px; white-space: nowrap; }

/* ── Phụ đề KARAOKE cho bài nghe (11/10/2026) ────────────────────────────────
   Câu đang đọc tô vàng nhạt + viền trái đỏ, chữ đậm lên một nấc. Cả dòng bấm
   được để nhảy tới đúng giây đó. Dòng giờ cố định bề rộng cho khỏi nhảy chữ. */
.subtitle-line.sub-karaoke {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  border-left: 3px solid transparent; transition: background .15s, border-color .15s;
}
.subtitle-line.sub-karaoke:hover { background: var(--surface-2, #f1f5f9); }
.subtitle-line .sub-time {
  flex: 0 0 auto; min-width: 42px; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--text-muted); user-select: none;
}
.subtitle-line.sub-dang-doc {
  background: #fef9c3; border-left-color: #dc2626;
}
.subtitle-line.sub-dang-doc .sub-text { font-weight: 600; color: #111827; }
@media (prefers-color-scheme: dark) {
  .subtitle-line.sub-dang-doc { background: #3f3a1a; }
  .subtitle-line.sub-dang-doc .sub-text { color: #f8fafc; }
}

/* ── Phụ đề MỜ (12/10/2026) ──────────────────────────────────────────────────
   Phụ đề luôn nằm bên cạnh nhưng mặc định mờ, để học viên nghe trước đã; bí
   chỗ nào thì bấm Unblur. Rê chuột vào một dòng thì RIÊNG dòng đó rõ ra — tra
   một câu mà phải bỏ mờ cả bảng thì mất luôn tác dụng luyện nghe.
   Chặn bôi đen khi đang mờ, không thì chép chữ ra là đọc được hết. */
.subtitle-content.sub-mo .sub-text {
  filter: blur(4.5px);
  user-select: none; -webkit-user-select: none;
  transition: filter .18s ease;
}
/* Chỉ bôi mờ PHẦN CHỮ, không bôi cả dòng: filter đặt ở cha thì con không gỡ
   lại được, mốc giờ sẽ mờ theo và mất luôn chỗ bám để tua. */
.subtitle-content.sub-mo .subtitle-line:hover .sub-text { filter: blur(0); }
.subtitle-content.sub-mo .subtitle-line.sub-dang-doc .sub-text { filter: blur(3px); }
.subtitle-content.sub-mo .subtitle-line.sub-dang-doc:hover .sub-text { filter: blur(0); }

/* ===== 28/10/2026: THANH BÊN HIỆN MỘT LẦN, HOÀN CHỈNH =====
   Thầy: "thanh sidebar cứ hiện từ từ từng cái một trông kém chuyên nghiệp". Các mục được chèn bằng JS
   ở nhiều thời điểm (Cài đặt app, Bật thông báo, Bài còn sót, Bài giảng, Nạp tiền, Lớp học trực tuyến)
   → giấu thanh bên tới khi nav-hoc-vien.js / admin-nav.js gắn body.nv-xong, rồi hiện một lượt (ngay lập tức, không mờ dần).
   Chốt an toàn: quá 1,5 giây (script lỗi / mạng chậm) thì tự hiện. */
body:not(.nv-xong) .sidebar-nav,
body:not(.nv-xong) .sidebar-footer { opacity: 0; animation: nvTuHien 0s linear 1.5s forwards; }
/* không dùng transition: có trình duyệt/khung xem treo hiệu ứng → kẹt mờ. Xong là hiện ngay. */
@keyframes nvTuHien { to { opacity: 1; } }
/* 28/10/2026: menu Flashcards / Lists trong hàng nút chế độ học (vocab-study) */
select.mode-btn.mode-chon { appearance: none; -webkit-appearance: none; padding-right: 30px; font-family: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.mode-btn.mode-chon.active { background-color: var(--primary); }
select.mode-btn.mode-chon option { color: #1e293b; background: #fff; }