/* Palette & Fonts */
/* --- ANIMATIONS --- */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Class để kích hoạt animation */
.animate-view {
  animation: fadeInSlide 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Hiệu ứng click button tạo cảm giác nhấn thật hơn */
.btn:active, .home-btn:active, .choice-card:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s;
}
:root {
  /* Royal colour palette: warm gold and red hues for the gamified RPG theme */
  --bg: linear-gradient(135deg, #fff8e1 0%, #fff0c8 40%, #fff9e6 100%);
  --panel: #fffaf0;
  --card: #fff7df;
  --text: #5c3c1b; /* dark brown for readability */
  --muted: #987654;
  --accent: #d4af37; /* royal gold used for primary actions */
  --accent2: #b71c1c; /* royal red for secondary highlights */
  --danger: #d32f2f;
  --ok: #d4af37;
  --border: rgba(210, 165, 82, 0.3);
  --shadow-raised: 6px 6px 12px #e9dbc1, -6px -6px 12px #ffffff;
  --shadow-pressed: inset 6px 6px 12px #e9dbc1, inset -6px -6px 12px #ffffff;
  --radius: 20px;
}

/* -------------------------------------------------------------------------
   Sync toast: small pop-up notification for sync status messages
   This element appears fixed near the bottom center of the screen and fades
   out after a short delay. It is shown via the `.show` class in script.js. */
.sync-toast {
  position: fixed;
  bottom: 80px; /* default bottom offset for mobile to stay above bottom nav */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  font-size: 0.9rem;
  line-height: 1.3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sync-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* On larger screens, move the toast closer to the bottom since the bottom nav
   is hidden. This prevents unnecessary empty space below the toast. */
@media (min-width: 769px) {
  .sync-toast {
    bottom: 20px;
  }
}
[data-theme="dark"] {
  --bg: #2c3038;
  --panel: #2c3038;
  --card: #2c3038;
  --text: #d8e2ec;
  --muted: #9aa4b2;
  --accent: #58cc02;
  --accent2: #1cb0f6;
  --danger: #ff4b4b;
  --ok: #58cc02;
  --border: rgba(255, 255, 255, 0.05);
  --shadow-raised: 6px 6px 12px #22252a, -6px -6px 12px #363b46;
  --shadow-pressed: inset 6px 6px 12px #22252a, inset -6px -6px 12px #363b46;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* Use system fonts with good Vietnamese support. Fallbacks include Arial and Helvetica. */
  /* Use the Be Vietnam Pro font throughout the app for a consistent look */
  font-family: 'Be Vietnam Pro', 'Arial', 'Helvetica Neue', 'Helvetica', 'Tahoma', sans-serif;
  font-size: 16.5px;
  -webkit-text-size-adjust:100%;
  transition: background 0.3s, color 0.3s;
}

/* Use the decorative Pangolin font for headings to evoke a calligraphy feel */
h1, .h1, h2, .h2 {
  font-family: 'Pangolin', 'Be Vietnam Pro', cursive;
}

/* Login screen styling */
.login-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: calc(100vh - 80px);
  padding: 20px;
}
.login-screen .panel {
  max-width: 420px;
  width: 100%;
}
.gender-select {
  display: flex;
  gap: 12px;
  margin: 12px 0;
}
.gender-option {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: var(--shadow-raised);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.gender-option:hover, .gender-option.active {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.login-screen input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1rem;
  color: var(--text);
}

/* Style password inputs on the login screen like text inputs */
.login-screen input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1rem;
  color: var(--text);
}

/* Admin table styling */
.admin-table th, .admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 4px;
}
.admin-table tr:nth-child(even) {
  background: var(--bg2);
}

/* Rank card shimmering effect */
.rank-card {
  position: relative;
  overflow: hidden;
}
.rank-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.1) 100%);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* Chip component used in the sentence-building game. These appear as
   pill-shaped buttons for each scrambled word. Disabled chips are
   grayed out to indicate they have been chosen. */
.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 1rem;
}
.chip:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.chip:disabled {
  background: var(--muted);
  color: #fff;
  cursor: default;
}

/* Extra space for bottom navigation on small screens */
@media (max-width: 768px) {
  body { padding-bottom: 70px; }
}

/* Bottom navigation bar styling */
.bottom-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--panel);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 0;
  box-shadow: var(--shadow-raised);
  z-index: 50;
}

/*
 * Admin grid and user card styling
 * Display user accounts in a 3D-like card grid. Each card shows an
 * avatar based on the user's role or gender, their bút danh (or
 * username) and a badge for admin accounts. Selecting a card will
 * outline it, indicating that the admin is editing that user. The
 * edit panel below uses a grid of checkboxes for enabling/disabling
 * sections per user.
 */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.user-card {
  position: relative;
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: perspective(600px) rotateX(8deg) rotateY(-8deg);
  transition: transform 0.3s ease;
}

.user-card:hover {
  transform: perspective(600px) rotateX(0deg) rotateY(0deg);
}

.user-card .avatar {
  font-size: 2rem;
  margin-bottom: 6px;
}

.user-card .username {
  font-weight: 700;
  font-size: 0.85rem;
}

/* Label for admin accounts on user cards */
.user-card .badge-admin {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent2);
  color: var(--bg);
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Highlight the selected user card */
.user-card.selected {
  outline: 2px solid var(--accent2);
}

/* Styling for the section selection checkboxes in admin edit panel */
.section-select-grid label {
  background: var(--bg2);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
}

.section-select-grid input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent2);
}
/* Custom section toggle items for admin edit panel. These replace native
   checkboxes with a clickable pill-like element. When active, the
   background and text colours invert to highlight selection. */
.sec-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.2s, color 0.2s;
}
.sec-item:hover {
  transform: translateY(-2px);
}
.sec-item.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}
.bottom-nav-btn {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 0.8rem;
  cursor: pointer;
}
.bottom-nav-btn .icon {
  font-size: 1.4rem;
  line-height: 1;
}
.bottom-nav-btn .label {
  margin-top: 2px;
  font-size: 0.7rem;
}
/* Hide bottom nav on larger screens */
@media (min-width: 769px) {
  .bottom-nav { display: none; }
}
/* Rank journey panel. Display a grid of 3D squares to represent the
   player's progression through royal ranks. The .rank-grid uses
   auto-fill to wrap cells responsively. */
.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}
.rank-cell {
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px 6px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: perspective(600px) rotateX(8deg) rotateY(-8deg);
  transition: transform 0.3s, background-color 0.3s;
}
.rank-cell:hover {
  transform: perspective(600px) rotateX(0deg) rotateY(0deg);
}
.rank-cell.complete {
  opacity: 0.5;
}
.rank-cell.active {
  outline: 3px solid var(--accent);
  background: var(--panel);
}
.rank-cell .rank-name {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Hide header controls and nav filters on small screens */
@media (max-width: 768px) {
  .header .controls { display: none; }
  /* Hide dropdowns and search inputs by default on small screens */
  .nav-buttons select,
  .nav-buttons .topic-search-wrap,
  #subtopic-filter {
    display: none;
  }
  /* Adjust filter toggle button appearance */
  #btn-toggle-filters {
    font-size: 1.4rem;
    padding: 8px;
  }
}
.container{max-width:1080px;margin:0 auto;padding:14px}
.header{position:sticky;top:0;z-index:20;background:var(--bg);padding:10px 14px;border-bottom: 1px solid var(--border);}
.header .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:12px;background:var(--accent);box-shadow:var(--shadow-raised);}
h1{margin:0;font-size:1.3rem;font-weight: 800;}
.badge{display:inline-block;background:var(--card);box-shadow: var(--shadow-raised);border:1px solid var(--border);padding:6px 12px;border-radius:999px;color:var(--muted);font-size:.9rem;}
.btn{background: var(--card);color: var(--accent);border: 1px solid var(--border);padding: 12px 18px;border-radius: var(--radius);font-weight: 700;font-size: 0.95rem;cursor: pointer;box-shadow: var(--shadow-raised);transition: all 0.2s ease-in-out;}
.btn:hover { transform: translateY(-2px); }
.btn:active { box-shadow: var(--shadow-pressed); transform: translateY(0); }
.btn.ghost { color: var(--text); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.warn { background: var(--danger); color: #fff; border-color: var(--danger); }
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Hide header controls (theme, sync, font) permanently since these options are
   available via the Settings section. */
.header .controls {
  display: none;
}
.panel, .card {background: var(--panel);border: 1px solid var(--border);border-radius: var(--radius);box-shadow: var(--shadow-raised);padding: 20px;}
.card { padding: 16px; }
.small{color:var(--muted);font-size:.92rem}
.kbd{font:600 .85rem ui-monospace,Menlo,Consolas;background: var(--bg);box-shadow: var(--shadow-raised);border:1px solid var(--border);padding:4px 8px;border-radius:8px;color:#b7c0cc;}
.grid{display:grid;gap:16px}
@media(min-width:600px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.home-btn{display:flex;gap:16px;align-items:center;justify-content:flex-start;padding:20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);cursor:pointer;box-shadow: var(--shadow-raised);transition: all 0.2s ease-in-out;}
.home-btn:hover { transform: scale(1.02); box-shadow: 8px 8px 16px #d5d5d5, -8px -8px 16px #ffffff; }
.home-btn[data-theme="dark"]:hover { transform: scale(1.02); box-shadow: 8px 8px 16px #22252a, -8px -8px 16px #363b46; }
.home-btn:active { box-shadow: var(--shadow-pressed); transform: scale(1); }
.home-btn .ico{font-size:1.8rem}
.home-btn .title{font-size:1.15rem;font-weight:800}
.progress{height:10px;background:var(--bg);box-shadow: var(--shadow-pressed);border-radius:999px;overflow:hidden;margin-top:12px}
.progress>span{display:block;height:100%;background:var(--accent)}

/* Enhancements for reading practice (Luyện đọc) */
.speak-card {
  /* Additional padding for mobile friendliness */
  padding: 16px;
}
.speak-ref {
  font-weight: 800;
  font-size: 1.6rem;
}
/* Styling for pronunciation result diff. Display matched, missing and extra words clearly with colors */
#speak-diff {
  font-size: 1.1rem;
  line-height: 1.4;
}
.word-ok {
  background-color: #d4edda;
  color: #155724;
  padding: 2px 4px;
  border-radius: 4px;
}
.word-miss {
  background-color: #f8d7da;
  color: #721c24;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: line-through;
}
.word-extra {
  background-color: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 4px;
}
@media (max-width: 480px) {
  .speak-ref {
    font-size: 1.4rem;
  }
  .choice-card {
    font-size: 1.2rem;
    padding: 14px;
  }
}
input,select,textarea{background: var(--card);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:var(--radius);min-width:0;box-shadow: var(--shadow-pressed);transition: all 0.2s ease-in-out;font-size: 1rem;}
input:focus, select:focus, textarea:focus {outline: none;border-color: var(--accent);box-shadow: var(--shadow-pressed), 0 0 0 3px hsla(145, 98%, 36%, 0.3);}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.h2{margin:0 0 10px;color:var(--accent);font-weight:800;font-size:1.25rem}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{position:sticky;top:0;background:var(--panel);z-index:1;padding:10px;color:var(--accent);font-size:1rem; text-align: left;}
.table tbody tr{background:var(--card);border-radius: 12px;box-shadow: var(--shadow-raised);transition: transform 0.2s;}
.table tbody tr:hover { transform: scale(1.01); }
.table td,.table th{padding:12px;vertical-align:top}
.table td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.table td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.pill{display:inline-block;padding:.25rem .6rem;border-radius:999px;background: var(--bg);box-shadow: var(--shadow-pressed);border:1px solid var(--border);color:var(--muted);font-size:.78rem;margin-left:6px;}
.pill.pill-n { background: #e6f4ea; color: #2e7d32; border-color: #2e7d32; }
.pill.pill-v { background: #fdecea; color: #c62828; border-color: #c62828; }
.pill.pill-adj { background: #fff7e6; color: #b8860b; border-color: #b8860b; }
.pill.pill-adv { background: #f5e6ff; color: #6a1b9a; border-color: #6a1b9a; }

/* Color-coded classes for vocabulary word text. These mirror the colors used in
   the part-of-speech pills so that the English word itself conveys its POS.
   Nouns appear green, verbs red, adjectives yellow and adverbs purple. Any
   unrecognised POS defaults to the existing accent colour. */
.word-n { color: #2e7d32; }
.word-v { color: #c62828; }
.word-adj { color: #b8860b; }
.word-adv { color: #6a1b9a; }

/* ======= Quiz Pro Enhancements ======= */
/* Timer bar above quiz questions */
.quiz-timer {
  width: 100%;
  height: 8px;
  background: var(--bg);
  box-shadow: var(--shadow-pressed);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 12px;
}
.quiz-timer-bar {
  height: 100%;
  background: var(--accent);
  width: 100%;
  transition: width 1s linear;
}

/* Result card styling */
.result-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: 20px;
}
.result-score {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--accent2);
}
.result-remark {
  margin-bottom: 6px;
  font-weight: 600;
}
.result-xp {
  margin-bottom: 12px;
  color: var(--muted);
}
.result-details {
  display: grid;
  gap: 8px;
}
.result-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow-raised);
}
.result-question {
  margin-bottom: 6px;
}
.result-options {
  display: grid;
  gap: 4px;
}
.quiz-opt {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
}
.quiz-opt.opt-correct {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.quiz-opt.opt-wrong {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

/* Explanation text for grammar quiz results */
.result-explanation {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* Quiz Stats card styling */
.dash-card.dash-quiz .dash-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-quiz-grid {
  display: grid;
  gap: 8px;
}
.quiz-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.quiz-stat-row:last-child {
  border-bottom: none;
}
.quiz-stat-label {
  color: var(--muted);
  font-size: .9rem;
}
.quiz-stat-value {
  font-weight: 700;
  color: var(--accent2);
}

/*
  Colour classes specifically for the Motivation section.
  The English quote uses a purple tone to distinguish it from the Vietnamese
  translation, which uses a deep green. Using distinct colours improves
  contrast and visual interest when the two texts appear side by side.
*/
.motivation-en {
  color: #6a1b9a; /* deep purple for English quote */
}
.motivation-vi {
  color: #2e7d32; /* deep green for Vietnamese translation */
}
.ex-vi.hide{display:none}
.match-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.match-grid{grid-template-columns:1fr 1fr}}
.match-col{background:var(--bg);box-shadow: var(--shadow-pressed);border-radius:var(--radius);padding:12px;min-height:220px}
.item{padding:12px;border:1px solid var(--border);border-radius:12px;margin:8px 0;cursor:pointer;box-shadow: var(--shadow-raised);transition: all 0.2s ease-in-out;}
.item:hover { transform: translateY(-2px); }
.item.active{ box-shadow: var(--shadow-pressed); transform: translateY(0); background: var(--accent2); color: white;}
.item.ok{
  background: var(--ok);
  color: white;
  box-shadow: 0 0 20px 4px hsla(145, 98%, 36%, 0.6);
  transition: transform 0.3s, box-shadow 0.3s;
}
.item.err{background: var(--danger); color: white;box-shadow: 0 0 15px hsla(0, 100%, 64%, 0.5);}
.item.hidden-match {
  /* Hide matched items temporarily in the matching game. The height collapse
     ensures remaining items shift up immediately on small screens. */
  opacity: 0;
  visibility: hidden;
  height: 0 !important;
  margin: 0;
  padding: 0;
}

/* Scoring status bar for the matching game. Displays current score and combo */
.match-status{
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:8px;
}
.match-status span{
  background:var(--card);
  padding:4px 12px;
  border-radius:var(--radius);
  box-shadow: var(--shadow-raised);
}

/* Shake animation for incorrect matches */
@keyframes shake{
  0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 50%{transform:translateX(4px);} 75%{transform:translateX(-4px);}
}
.shake{
  animation: shake 0.4s;
}

/* Modal overlay for matching summary */
.match-summary-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.match-summary-card{
  background:var(--bg);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-raised);
  text-align:center;
}
.summary-title{
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:8px;
}
.summary-line{
  margin-top:6px;
  font-size:1.1rem;
}
.match-col .item {
  /* Ensure the English word and its link button sit on one line and space apart */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.match-col .item .link-btn {
  background: none;
  border: none;
  margin-left: 6px;
  font-size: 1.1rem;
  cursor: pointer;
  color: inherit;
}
.match-col .item .link-btn:hover {
  color: var(--accent2);
}

/* Unscramble mini-game styles */
.unscramble-slot {
  min-width: 40px;
  min-height: 44px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border);
}
.unscramble-space {
  width: 20px;
  min-height: 44px;
}
.unscramble-letter-pool {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 44px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  color: #fff;
}
.selected-slot {
  outline: 3px solid var(--accent);
}
.item.hidden{display:none !important;} /* Hide matched items temporarily */

/* Style for clickable hint letters in flashcard review.  Each hint letter
   appears inside a 3D-like rounded square to improve visibility and
   affordance. The larger font size and spacing make it easier to tap on
   mobile devices. */
.hint-letter {
  display: inline-block;
  background-color: var(--card);
  /* Apply a subtle dark gradient to the hint text itself. The text colour
     becomes transparent and the gradient is clipped to the text foreground.
     This makes the letters stand out better against the card background. */
  /* Darker gradient for hint text. Transition from deep indigo to navy.
     This richer gradient improves contrast on the light card background and
     helps learners easily distinguish the hint letters. */
  background-image: linear-gradient(45deg, #3a3f5c, #1e254a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  margin: 4px;
  padding: 8px 12px;
  cursor: pointer;
  /* Increase font size further to improve legibility and tap targets. A larger
     font makes the hints stand out and easier to tap on touch devices. */
  font-size: 1.5rem;
  min-width: 36px;
  text-align: center;
  user-select: none;
  transition: transform 0.1s;
}
.hint-letter:hover {
  transform: translateY(-2px);
}
.hint-letter:active {
  box-shadow: var(--shadow-pressed);
  transform: translateY(0);
}

.sticky-next{position:sticky;bottom:14px;display:flex;justify-content:flex-end;pointer-events:none}
.sticky-next .btn{pointer-events:auto}
footer{margin:20px 0;color:var(--muted);text-align:center}
.hide{display:none}
/* Navigation buttons in the header bar (back and filter toggles) */
.nav-buttons {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Reading passage styling for the enhanced reading mode. Increase font size and apply a
   subtle gradient colour to the text to make the passage stand out. The gradient
   travels horizontally across the text; text fill is transparent so the gradient shows
   through. */
/* Reading passage styling for the enhanced reading mode. */
.reading-passage {
  font-size: 1.08rem;
  line-height: 1.55;
  font-weight: 500;
}

/* Gradient text styling for the reading passage. */
.reading-gradient-text {
  display: inline-block;
  background-image: linear-gradient(90deg, #4facfe 0%, #8e54e9 50%, #ff6f91 100%);
  -webkit-background-clip: text;
  background-clip: text; /* Thêm dòng chuẩn này để hỗ trợ các trình duyệt khác */
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback màu */
  
  /* Apply a gentle drop shadow */
  text-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.15);
}

/* Hide the speaker and microphone icons only within the flip-card view.
   In other contexts (e.g. the standard flashcard view or vocabulary lists),
   the icons remain visible so learners can listen to the pronunciation or
   record themselves. By scoping to .flip-card, we prevent clutter on the
   front/back of the flip flashcards while preserving functionality elsewhere. */
.flip-card .flashcard-speaker,
.flip-card .flashcard-mic {
  display: none !important;
}

/* Display the part of speech next to the vocabulary word on the front of the
   flashcard. We use a slightly smaller font and muted colour to distinguish
   it from the main word. */
.flashcard-word-wrapper .flashcard-pos {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 6px;
}

/* When a vocabulary item has been studied five times, highlight its row in the
   dashboard to indicate completion. The light accent background signals that
   the word has been thoroughly reviewed. */
.completed-study {
  background: rgba(88, 204, 2, 0.12);
}

/* Display a completion label when a vocabulary or phrase has been reviewed
   five times. The text uses the accent colour and slightly larger weight
   to stand out next to the study checkboxes. */
.study-done {
  margin-left: 6px;
  font-weight: 600;
  color: var(--accent);
}

/* Style for the study session checkboxes in the dashboard. Each span acts as a
   square that the learner can click to indicate a completed review. Checked
   boxes are filled with the accent colour. */
/* Style the study session checkboxes in the dashboard. We use native
   input checkboxes for accessibility but remove their default appearance
   so they look like simple squares. When checked, the square is filled
   with the accent colour. */
input.study-check {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 4px;
  cursor: pointer;
}
input.study-check:checked {
  background: var(--accent);
}
/* Flashcard section */
.flashcard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}
.flashcard-word-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Enlarge the word and reduce bottom margin to keep the view compact */
.flashcard-word {
  font-size: clamp(2.5rem, 12vw, 5rem);
  font-weight: 900;
  /* Apply a gradient to the flashcard word for a more polished appearance */
background-image: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text; /* <-- Thêm dòng này (Chuẩn quốc tế) */
  -webkit-text-fill-color: transparent;
  color: transparent; /* <-- Thêm dòng này (Hỗ trợ trình duyệt khác) */
  margin-bottom: 10px;
  word-break: break-word;
}
/* Make the speaker icon more prominent on flashcards */
.flashcard-speaker {
  font-size: 3rem;
  cursor: pointer;
  color: var(--accent2);
  transition: transform 0.2s;
}
.flashcard-speaker:hover {
  transform: scale(1.1);
}

/* Microphone icon for pronunciation testing. Mirrors flashcard-speaker styling for consistency. */
.flashcard-mic {
  font-size: 3rem;
  cursor: pointer;
  color: var(--accent2);
  transition: transform 0.2s;
}
.flashcard-mic:hover {
  transform: scale(1.1);
}
/* Simplify flashcard answer styling: subtle background and no heavy box shadow */
.flashcard-answer {
  background: var(--panel);
  box-shadow: none;
  padding: 20px;
  border-radius: var(--radius);
  margin-top: 10px;
  width: 100%;
  max-width: 600px;
}
.flashcard-answer .pos {
  font-style: italic;
  color: var(--muted);
  margin: 0 0 10px;
}
/* Space out the controls a bit more and give the buttons consistent width on mobile */
.flashcard-controls {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =================================================================== */
/* Custom styling for phrase flashcards (Cụm từ thẻ lật)
 * The phrase flashcards display the English phrase vertically in a bold
 * red colour. The wrapper is arranged in a column so that the vertical
 * text has room. This style does not affect vocabulary flashcards. */
/* Revert phrase flashcard styling to match the default flashcard appearance. */
.phrase-flashcard .flashcard-word-wrapper {
  /* Use row layout like the base flashcard to display the phrase horizontally */
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.phrase-flashcard .flashcard-word {
  /* Restore the gradient used on vocabulary cards */
  background-image: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important; /* <-- Thêm dòng chuẩn này */
  -webkit-text-fill-color: transparent !important;
  color: transparent !important; /* <-- Sửa dòng này để hỗ trợ các trình duyệt khác */
  
  /* Reset writing mode to horizontal */
  writing-mode: horizontal-tb;
  text-orientation: initial;
  white-space: normal;
  margin-bottom: 10px;
}

/* Remove the default card styling from the flashcard container so the card
   blends into the background and learners can focus on the word itself. */
.flashcard-container.card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Vocabulary grid layout for the improved card-style UI */
.vocab-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 600px) {
  .vocab-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .vocab-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Individual vocabulary card */
/*
 * Individual vocabulary card styling
 *
 * The vocabulary cards use a clean white background with a soft border and
 * gentle shadow to stand off the page, similar to the reference design
 * provided by the user. Each card is a flex container so its internal
 * sections (word, translation, example, icons) stack naturally.
 */
.vocab-card {
  background: #fff;
  /* Use a very light border to separate the card from the surrounding grid */
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  /* A subtle shadow for depth without looking heavy */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s;
}
.vocab-card:hover {
  transform: translateY(-3px);
}
/* English word styling inside the card */
.vocab-card .en-word {
  font-weight: 800;
  /* The default colour for words without a specific POS. This will be overridden
     by more specific classes (e.g. .word-n) defined below when present. */
  color: var(--accent2);
  font-size: 1.15rem;
  margin-bottom: 4px;
}

/* Override the word colour on vocabulary cards when the .word-* class is applied.
   The additional selector (.vocab-card .en-word.word-*) ensures higher specificity
   than the base .vocab-card .en-word declaration above. */
.vocab-card .en-word.word-n { color: #2e7d32; }
.vocab-card .en-word.word-v { color: #c62828; }
.vocab-card .en-word.word-adj { color: #b8860b; }
.vocab-card .en-word.word-adv { color: #6a1b9a; }
/* Vietnamese translation styling */
.vocab-card .vi-word {
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 2px;
}
/* Example container: groups the English example and its translation */
.vocab-card .example-container {
  margin-top: 6px;
}
/* English example sentence inside a soft box */
.vocab-card .example-en {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}
/* Vietnamese translation for the example */
.vocab-card .example-vi {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}
/* Icons row at the bottom of the card */
.vocab-card .icons {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/*
  Flip card component used in the "thẻ lật" view.
  These styles define a 3D card that can be flipped by toggling the
  .flipped class on its inner container. The front and back faces are
  positioned absolutely and hidden when rotated. On mobile screens the
  height is reduced via a media query below.
*/
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 600px;
  height: 300px;
  perspective: 1000px;
  margin: auto;
  /* Add a 3D border and subtle shadow around the flip card */
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card-inner.flipped {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--panel);
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* Bold text for flip cards and improve readability on mobile.
   Adding these rules at the end of the stylesheet ensures they override
   the earlier flip-card definitions without altering the original styles. */
.flip-card-front,
.flip-card-back {
  font-weight: 700;
}
/* Ensure long flashcard text wraps and fits within the card boundaries */
.flip-card-front .flashcard-word,
.flip-card-back h2 {
  word-break: break-word;
  overflow-wrap: anywhere;
  width: 100%;
}
@media (max-width: 600px) {
  .flip-card {
    height: 260px;
  }
  .flip-card-front,
  .flip-card-back {
    font-size: clamp(1.5rem, 15vw, 2.8rem);
    padding: 16px;
  }
}

/* Responsive adjustments for very small screens such as phones and smartwatches */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .btn { padding: 10px 14px; font-size: 0.85rem; }
  .nav-buttons select, .nav-buttons button { font-size: 0.8rem; padding: 6px 10px; }
  .flashcard-word { font-size: clamp(2rem, 20vw, 3rem); }
  .home-btn .title { font-size: 1rem; }
  .card { padding: 14px; }
  .header .row { flex-wrap: wrap; }
  .nav-buttons { margin-top: 6px; justify-content: flex-start; }
}

@media (max-width: 320px) {
  .btn { padding: 8px 10px; font-size: 0.75rem; }
  .flashcard-word { font-size: clamp(1.5rem, 24vw, 2.5rem); }
  .nav-buttons select, .nav-buttons button { font-size: 0.7rem; padding: 4px 8px; }
}

    /* NEW: styling for fun quiz answer options. 3D-like cards with padding,
       subtle shadow and hover effect to indicate interactivity. */
    .choice-card {
      cursor: pointer;
      border: 1px solid var(--border-color);
      /* Slightly larger radius and padding for a more tactile 3D look */
      border-radius: 14px;
      padding: 16px;
      background-color: var(--card-bg);
      box-shadow: var(--shadow);
      text-align: left;
      /* Increase font size and weight for better readability */
      font-size: 1.4rem;
      font-weight: bold;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .choice-card:hover {
      transform: translateY(-2px);
      /* Slightly stronger shadow on hover to enhance depth effect */
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    /* NEW: colourful answer options for the Fun Quiz. Each option has a distinct
       vibrant colour and white text for high contrast. */
    .choice-card.choice0 { background-color: #2196F3; color: #fff; }
    .choice-card.choice1 { background-color: #FB8C00; color: #fff; }
    .choice-card.choice2 { background-color: #9C27B0; color: #fff; }
    .choice-card.choice3 { background-color: #009688; color: #fff; }
    /* Slight darker border for coloured cards */
    .choice-card.choice0 { border-color: #1976D2; }
    .choice-card.choice1 { border-color: #EF6C00; }
    .choice-card.choice2 { border-color: #7B1FA2; }
    .choice-card.choice3 { border-color: #00796B; }

    /* Styling for the fun quiz question header and speaker button */
    .fun-question-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 20px;
    }
    .fun-speak {
      font-size: 3rem;
      cursor: pointer;
    }
    .fun-question {
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 1.35;
      text-align: center;
      max-width: 100%;
    }
    .fun-question span.static { color: #FFD54F; }
    .fun-question span.word { color: #4DD0E1; }


/* Topic search dropdown (button next to input) */
.topic-search-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 180px;
}
.topic-dropdown-btn{
  padding: 6px 10px;
  min-width: 32px;
  height: 34px;
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
}
/* --- TOPIC DROPDOWN NÂNG CẤP --- */
.topic-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--card); /* Dùng màu nền card */
  border: 1px solid var(--border);
  border-radius: 16px; /* Bo tròn nhiều hơn */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Bóng đổ mềm mại */
  max-height: 320px; /* Cao hơn chút */
  overflow-y: auto;
  z-index: 2000;
  display: none;
  padding: 8px; /* Khoảng cách lề trong */
  
  /* Scrollbar đẹp */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* Thanh cuộn cho Chrome/Safari */
.topic-dropdown::-webkit-scrollbar { width: 6px; }
.topic-dropdown::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 99px; }

.topic-dropdown.show {
  display: block;
  animation: fadeInSlide 0.2s ease-out; /* Hiệu ứng hiện ra nhẹ nhàng */
}

/* Header nhóm chữ cái (A, B, C...) */
.td-group-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent);
  padding: 8px 12px 4px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--bg); /* Nền nhẹ phân cách */
  border-radius: 6px;
  position: sticky; /* Dính lên đầu khi cuộn */
  top: 0;
  z-index: 1;
}

/* Mục chọn */
.topic-dropdown .td-item {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 500;
  border-radius: 10px; /* Bo góc từng mục */
  border-bottom: none; /* Bỏ gạch chân cũ gây rối */
  transition: all 0.15s ease;
  color: var(--text);
  margin-bottom: 2px;
}

/* Hover effect */
.topic-dropdown .td-item:hover {
  background: var(--accent);
  color: #fff;
  padding-left: 18px; /* Hiệu ứng trượt nhẹ */
}

/* Mục đang được chọn */
.topic-dropdown .td-item.active {
  background: rgba(212, 175, 55, 0.15); /* Màu vàng nhạt (theo theme) */
  color: var(--accent);
  font-weight: 800;
}
[data-theme="dark"] .topic-dropdown .td-item.active {
  background: rgba(255, 255, 255, 0.1);
}

/* =================== Magic Story (Advanced) =================== */
.magic-story-wrap { display:flex; flex-direction:column; gap:14px; }
.magic-story-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.magic-story-tab{
  padding:10px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); box-shadow:var(--shadow-raised); cursor:pointer; font-weight:800;
}
.magic-story-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.ms-counter{font-weight:800;color:var(--accent2);}
.ms-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr));
  gap:10px; margin-top:6px;
}
.ms-tile{
  position:relative; padding:12px 10px; min-height:64px;
  border-radius:14px; border:1px solid var(--border);
  background:var(--card); box-shadow:var(--shadow-raised);
  cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.ms-tile:hover{ transform:translateY(-2px); }
.ms-tile:active{ transform:translateY(0); box-shadow:var(--shadow-pressed); }
.ms-tile .ms-en{
  font-weight:900;
  font-size:clamp(0.9rem, 1vw + 0.5rem, 1.05rem);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  text-align:center;
  word-break:break-word;
}
.ms-tile .ms-vi{
  font-size:.9rem;
  opacity:.95;
  color:#fff;
  text-align:center;
  word-break:break-word;
}
.ms-tile .ms-pos{ position:absolute; right:8px; top:8px; font-size:.72rem; font-weight:800;
  background:rgba(255,255,255,.85); color:#000; padding:2px 6px; border-radius:999px;}
.ms-tile .ms-check{
  position:absolute; left:8px; top:8px; width:20px; height:20px; border-radius:6px;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:900; color:#111; border:2px solid rgba(0,0,0,.25);
}
.ms-tile.selected .ms-check{ background:#111; color:#fff; border-color:#fff; }
.ms-tile.ms-n{ background:linear-gradient(145deg,#4caf50,#2e7d32); }
.ms-tile.ms-v{ background:linear-gradient(145deg,#ff6b6b,#c62828); }
.ms-tile.ms-adj{ background:linear-gradient(145deg,#ffb74d,#f57c00); }
.ms-tile.ms-adv{ background:linear-gradient(145deg,#b388ff,#6a1b9a); }
.ms-tile.ms-other{ background:linear-gradient(145deg,#9aa4b2,#607d8b); }

.ms-pagination{ display:flex; justify-content:center; gap:10px; margin-top:8px; }
.ms-pagination .btn{ padding:8px 12px; }

.ms-output-wrap{ display:flex; flex-direction:column; gap:10px; }
.ms-story-title{ font-size:1.35rem; font-weight:900; color:var(--accent2); }

.ms-split{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media(min-width:900px){ .ms-split{ grid-template-columns:1fr 1fr; } }
.ms-panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-raised); padding:14px; min-height:220px;
}
.ms-panel h3{ margin:0 0 8px; color:var(--accent); font-size:1.05rem; }
.ms-english, .ms-vietnamese{ font-size:1.05rem; line-height:1.6; }

.ms-sentence{
  display:inline; padding:2px 1px; border-radius:6px; cursor:pointer;
}
.ms-sentence:hover{ background:rgba(28,176,246,.12); }

.ms-word{ cursor:pointer; padding:1px 2px; border-radius:4px; }
.ms-word:hover{ background:rgba(88,204,2,.12); }
.ms-word.ms-keyword{ font-weight:900; background:rgba(255,255,255,.55); color:#000; }

.ms-story-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:4px 0 8px;
}
.ms-cloze-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  cursor:pointer;
  user-select:none;
}
.ms-cloze-toggle input{
  transform:scale(0.9);
}
.ms-genre-select{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:.85rem;
}
.ms-genre-select:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.ms-split.ms-cloze-on .ms-word.ms-keyword:not(.ms-revealed){
  color:transparent;
  background:var(--border);
}
.ms-split.ms-cloze-on .ms-word.ms-keyword:not(.ms-revealed)::selection{
  background:transparent;
}
.ms-split.ms-cloze-on .ms-word.ms-keyword.ms-revealed{
  color:#000;
  background:rgba(255,255,255,.55);
}


#ms-tooltip{
  position:fixed; z-index:5000; max-width:240px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-raised);
  padding:10px 12px; font-size:.95rem; line-height:1.4; display:none;
}
#ms-tooltip .ms-tip-close{
  position:absolute; right:6px; top:4px; border:none; background:transparent;
  font-size:18px; font-weight:900; cursor:pointer; color:var(--muted); line-height:1;
}
#ms-tooltip .ms-tip-close:hover{ color:var(--danger); }

#ms-tooltip .ms-tip-en{ font-weight:900; color:var(--accent2); }
#ms-tooltip .ms-tip-vi{ margin-top:4px; }
#ms-tooltip .ms-tip-loading{ color:var(--muted); font-style:italic; }

.ms-saved-list{display:grid; gap:10px;}
.ms-saved-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-raised);
  padding:12px; display:flex; flex-direction:column; gap:6px;
}
.ms-saved-card .meta{ font-size:.85rem; color:var(--muted); }
.ms-saved-card .words{ font-size:.9rem; color:var(--text); }


/* =================== AI Roleplay Pro (Communication) v2 =================== */
.rp-scenarios{display:grid;gap:12px}
@media(min-width:700px){.rp-scenarios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.rp-scenarios{grid-template-columns:repeat(3,1fr)}}
.rp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-raised);padding:14px;display:flex;flex-direction:column;gap:8px}
.rp-card h3{margin:0;font-size:1.1rem;font-weight:900;color:var(--accent2)}
.rp-card .rp-meta{font-size:.9rem;color:var(--muted)}
.rp-card .rp-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}

.rp-chat-wrap{display:flex;flex-direction:column;height:70vh;min-height:420px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow-pressed);overflow:hidden}
.rp-chat-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card);border-bottom:1px solid var(--border)}
.rp-chat-header .rp-title{font-weight:900;color:var(--accent)}
.rp-chat-header .rp-sub{font-size:.9rem;color:var(--muted)}
.rp-level-select{padding:6px 8px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:inherit;font-weight:800}

.rp-chat-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.rp-msg-row{display:flex;gap:8px;align-items:flex-end}
.rp-msg-row.ai{justify-content:flex-start}
.rp-msg-row.user{justify-content:flex-end}
.rp-avatar{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-raised);font-size:18px}
.rp-bubble{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow-raised);border:1px solid var(--border);position:relative}
.rp-bubble.ai{background:var(--card)}
.rp-bubble.user{background:var(--accent);color:#fff;border-color:var(--accent)}
.rp-name{font-size:.82rem;font-weight:800;color:var(--muted);margin-bottom:2px}
.rp-warn{cursor:pointer;margin-left:6px;font-size:1rem;vertical-align:middle}
.rp-trans{cursor:pointer;margin-left:6px;font-size:.95rem;opacity:.8}
.rp-trans:hover{opacity:1}

.rp-translation{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-size:.95rem;color:var(--text)}
.rp-chat-input{display:flex;gap:8px;align-items:center;padding:8px;background:var(--card);border-top:1px solid var(--border)}
.rp-inputbox{flex:1;display:flex;align-items:center;gap:6px}
#rp-input{width:100%;min-height:46px;max-height:120px;resize:none}
.rp-icon-btn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.rp-send{background:var(--accent);color:#fff;border-color:var(--accent)}
.rp-send:active{transform:translateY(1px)}
.rp-hint-btn{font-size:1.2rem}
.rp-typing{font-size:.9rem;color:var(--muted);padding:6px 10px}

#rp-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:6000;display:none;align-items:center;justify-content:center;padding:12px}
#rp-modal .rp-modal-card{width:min(520px,96vw);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-raised);padding:14px;display:flex;flex-direction:column;gap:10px}
#rp-modal .rp-modal-title{font-weight:900;color:var(--accent2);font-size:1.1rem}
#rp-modal .rp-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rp-hint-choice{padding:10px 12px;border-radius:12px;border:1px dashed var(--border);background:var(--bg);cursor:pointer;font-weight:800}
.rp-hint-choice:hover{border-style:solid}

#rp-tip{position:fixed;z-index:6500;max-width:300px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-raised);padding:10px 12px;font-size:.95rem;line-height:1.4;display:none}
#rp-tip .ttl{font-weight:900;color:var(--accent2);margin-bottom:4px}
#rp-tip .old{color:var(--muted);font-style:italic}
#rp-tip .better{margin-top:6px;font-weight:800}


/* =================== Dashboard Pro =================== */
.panel{
  background: var(--panel);
  border-radius: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 22px 55px rgba(15,23,42,.08);
}

.dash-pro{
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(900px circle at 0% 0%, rgba(236,72,153,.12), transparent 55%),
    radial-gradient(900px circle at 100% 0%, rgba(59,130,246,.12), transparent 55%),
    var(--panel);
  box-shadow: 0 22px 55px rgba(15,23,42,.10);
  animation: fadeInUp .35s ease;
}
.dash-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.dash-title{
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:.25px;
}
.dash-sub{
  opacity:.85;
  font-size:.9rem;
}
.dash-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.dash-card{
  background:#ffffff;
  border-radius:20px;
  padding:14px 16px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
  position:relative;
  overflow:hidden;
}
.dash-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.dash-card:hover::before{
  opacity:0.08;
  background:linear-gradient(135deg, #fb7185, #a855f7);
}
.dash-card-title{
  font-weight:700;
  margin-bottom:8px;
  font-size:.98rem;
}
.dash-card-primary{
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color:#f9fafb;
}
.dash-card-primary .dash-card-title{ color:#fefce8; }
.dash-card-primary .dash-ring::after{
  background:rgba(15,23,42,.12);
  box-shadow:none;
}
.dash-card-primary .dash-ring-num{ color:#fefce8; }
.dash-card-primary .dash-ring-label{ color:rgba(249,250,251,.9); }
.dash-card-primary .dash-mini .label,
.dash-card-primary .dash-mini .val{
  color:#fefce8;
}
.dash-card-primary .mini-bar{
  background:rgba(15,23,42,.35);
}
.dash-card-primary .mini-bar span{
  background:#facc15;
}

.dash-card-streak{
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color:#f9fafb;
}
.dash-card-streak .dash-card-title,
.dash-card-master .dash-card-title,
.dash-card-goal .dash-card-title{
  color:#fefce8;
}
.dash-card-streak .dash-streak-num{ color:#fefce8; }
.dash-card-streak .dash-streak-label{ color:rgba(249,250,251,.9); }
.dash-card-streak .heat-cell.lv0{ background:rgba(15,23,42,.28); }
.dash-card-streak .heat-cell.lv1{ background:rgba(129,140,248,.7); }
.dash-card-streak .heat-cell.lv2{ background:rgba(244,114,182,.75); }
.dash-card-streak .heat-cell.lv3{ background:rgba(248,250,252,.9); }
.dash-card-streak .heat-cell.lv4{ background:#f9a8d4; }

.dash-card-master{
  background: linear-gradient(135deg, #fb923c, #ec4899);
  color:#f9fafb;
}
.dash-card-master .dash-legend{ color:rgba(254,249,195,.9); }
.dash-card-master .bar{
  background:linear-gradient(to top, rgba(15,23,42,.02), rgba(248,250,252,.94));
}
.dash-card-master .bar-val,
.dash-card-master .bar-label{
  color:#1f2933;
}

.dash-card-goal{
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  color:#f9fafb;
}
.dash-card-goal .goal-label,
.dash-card-goal .goal-val{
  color:#fefce8;
}
.dash-card-goal .goal-bar{
  background:rgba(15,23,42,.35);
}
.dash-card-goal .goal-bar span{
  background:#bbf7d0;
}

.dash-section{
  margin-top:22px;
}
.dash-section-title{
  font-weight:700;
  margin-bottom:10px;
  font-size:1rem;
}
.dash-mini .label{ font-size:.85rem; opacity:.8;}
.dash-mini .val{ font-weight:700; margin-top:2px;}
.mini-bar{ height:8px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; }
.mini-bar span{ display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .35s ease;}

.dash-streak{ display:flex; align-items:baseline; gap:6px; margin:6px 0 8px;}
.dash-streak-num{ font-size:2rem; font-weight:900; color:var(--primary);}
.dash-streak-label{ opacity:.75;}

.dash-heatmap{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; align-items:end; margin-top:6px;}
.heat-col{ display:flex; flex-direction:column; align-items:center; gap:4px;}
.heat-cell{ width:100%; height:16px; border-radius:6px; background:rgba(0,0,0,.08); transition: transform .2s ease;}
.heat-cell:hover{ transform:translateY(-2px);}
.heat-cell.lv0{ background:rgba(0,0,0,.06);}
.heat-cell.lv1{ background:rgba(76,175,255,.25);}
.heat-cell.lv2{ background:rgba(76,175,255,.45);}
.heat-cell.lv3{ background:rgba(76,175,255,.65);}
.heat-cell.lv4{ background:rgba(76,175,255,.85);}

.dash-bars{
  height:140px; display:flex; align-items:flex-end; gap:8px; padding:4px 2px;
}
.bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;}
.bar{
  width:100%;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(76,175,255,.55) 100%);
  border-radius:8px 8px 4px 4px;
  position:relative;
  min-height:4px;
  transition:height .45s ease;
}
.bar-val{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-size:.8rem; font-weight:700;
}
.bar-label{ font-size:.8rem; opacity:.7;}

.dash-legend{ margin-top:6px; opacity:.8;}
.dash-split{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px;}
.split-card{
  border-radius:12px; padding:8px; text-align:center; background:rgba(0,0,0,.04);
  border:1px dashed var(--border);
}
.split-card .split-num{ font-size:1.4rem; font-weight:800;}
.split-card.inprogress{ background:rgba(255,193,7,.12); }
.split-card.review{ background:rgba(255,87,34,.12); }
.split-card.mastered{ background:rgba(76,175,80,.12); }

.dash-goals{ display:grid; gap:8px;}
.goal-row{ display:grid; grid-template-columns:60px 1fr 90px; gap:8px; align-items:center;}
.goal-label{ font-weight:700;}
.goal-bar{ height:10px; background:rgba(0,0,0,.08); border-radius:99px; overflow:hidden;}
.goal-bar span{ display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .35s ease;}
.goal-val{ font-size:.85rem; opacity:.8; text-align:right;}

.goal-edit input{ border-radius:8px; padding:4px 6px; border:1px solid var(--border); background:var(--card); color:inherit; }

.dash-section{ margin-top:12px;}
.dash-section-title{ font-weight:800; margin:6px 0 8px;}
.dash-items-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
}
.dash-item-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  display:grid;
  gap:6px;
  animation: fadeIn .25s ease;
}
.dash-item-card.mastered{
  background: radial-gradient(600px circle at 0% 0%, rgba(76,175,80,.16), transparent 55%), var(--card);
  border-color: rgba(76,175,80,.55);
}
.dash-item-head{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start;}
.dash-item-title .en{ font-weight:800; font-size:1.05rem;}
.dash-item-title .vi{ font-size:.9rem; opacity:.8; margin-top:2px;}
.dash-item-meta{ display:flex; gap:6px; align-items:center;}
.pill{ font-size:.72rem; padding:2px 7px; border-radius:99px; background:rgba(0,0,0,.06); border:1px solid var(--border);}
.pill.vocab{ background:rgba(76,175,255,.12);}
.pill.phrases{ background:rgba(255,193,7,.12);}
.pill.grammar{ background:rgba(156,39,176,.12);}

.dash-item-progress{ display:flex; gap:8px; align-items:center;}
.dash-progress-track{ flex:1; height:8px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden;}
.dash-progress-fill{ height:100%; background:var(--primary); border-radius:99px; transition:width .35s ease;}
.dash-progress-text{ font-size:.85rem; opacity:.85; white-space:nowrap;}

.dash-checks{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:2px;
}
.dash-check{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.75rem; opacity:.9;
}
.dash-check input{ width:16px; height:16px; cursor:pointer; }
.dash-check span{ opacity:.7; }

@media (max-width:520px){
  .dash-ring-wrap{ grid-template-columns:1fr; justify-items:center;}
  .goal-row{ grid-template-columns:50px 1fr 70px;}
}

/* Vocabulary Inventory table inside dashboard */
.dash-inventory {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.dash-inv-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dash-inv-sub {
  margin-top: 2px;
}

.dash-inv-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-inv-search {
  min-width: 170px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  font-size: 0.85rem;
  box-shadow: var(--shadow-pressed);
}

.dash-inv-search::placeholder {
  color: rgba(148,163,184,0.8);
}

.dash-inv-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-pressed), 0 0 0 2px hsla(145, 98%, 36%, 0.25);
}

.dash-inv-table-wrap {
  margin-top: 6px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.9);
  max-height: 400px;
  overflow: auto;
}

.dash-inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.dash-inv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15,23,42,0.98);
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #c7d2fe;
  border-bottom: 1px solid rgba(55,65,81,0.8);
}

.dash-inv-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(31,41,55,0.8);
  vertical-align: middle;
}

.dash-inv-row:last-child td {
  border-bottom: none;
}

.dash-inv-word-en {
  font-weight: 700;
  font-size: 0.97rem;
  color: #e5e7eb;
}

.dash-inv-meaning {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #cbd5f5;
}

.dash-inv-empty-vi {
  opacity: 0.7;
}

.dash-inv-status {
  white-space: nowrap;
}

.dash-inv-remove {
  text-align: right;
}

.dash-inv-remove .btn {
  padding: 4px 10px;
  font-size: 0.9rem;
}

.dash-inv-row-empty td {
  text-align: center;
  padding: 18px 10px;
}

.inv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-badge.status-new {
  background: rgba(148,163,184,0.2);
  border-color: rgba(148,163,184,0.7);
  color: #e5e7eb;
}

.inv-badge.status-learning {
  background: rgba(250,204,21,0.18);
  border-color: rgba(250,204,21,0.75);
  color: #facc15;
}

.inv-badge.status-done {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.8);
  color: #4ade80;
}

/* POS pill for phrases */
.pill.pill-phrase {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #0284c7;
}

@media (max-width: 720px) {
  .dash-inv-table thead th.col-meaning,
  .dash-inv-table tbody td.col-meaning {
    max-width: 180px;
  }
}



/* =================== Phrase Stories (Truyện chêm cho Cụm từ) =================== */
/*
 * Highlight spans used in phrase stories (VI→EN practice and AI translation).
 * Previously these spans used bright colours that overpowered the regular text colour.
 * To restore the original appearance while still drawing subtle attention,
 * inherit the surrounding colour and emphasise using font weight and underline.
 */
.highlight-mix {
  /* Always inherit colour from surrounding context. The !important flag
     ensures this overrides any inline colour styles that may be present
     inside the AI-generated mix content. */
  color: inherit !important;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  border-bottom: 1px dashed var(--accent2);
}

.highlight-en {
  /* Inherit colour even if inline styles set a different colour */
  color: inherit !important;
  font-weight: 700;
  font-style: italic;
  border-bottom: 1px dashed var(--accent2);
}

/*
 * Single word spans generated for phrase story tokenisation.
 * These spans wrap each English word in the story so that clicking on
 * the word will show a vocabulary tooltip. We avoid forcing any
 * particular colour here and instead rely on a subtle underline to indicate
 * interactivity. The pointer cursor signals that the span is clickable.
 */
.ps-word {
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dotted var(--accent2);
}

/* When viewing the phrase context/story (Ngữ cảnh tab), highlight the phrase tokens
   in red so they stand out from the surrounding text. The selector targets the
   phrase story container specifically so that other contexts (e.g. Magic Story)
   are unaffected. */
#phrase-story-content .ps-word,
#phrase-story-content .highlight-en,
#phrase-story-content .highlight-mix {
  color: var(--danger) !important;
  border-bottom-color: var(--danger);
}
.ps-word:hover {
  background: rgba(59,130,246,0.12);
}

.phrase-story-content {
  font-size: 1.05rem;
  line-height: 1.6;
}

.phrase-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.phrase-story-meta-title {
  font-weight: 700;
}

.phrase-story-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.phrase-story-tabs .btn {
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* ==== Modern Dashboard UI (Gamified) ==================================== */
:root {
  --dash-radius-lg: 20px;
  --dash-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.18);
  --dash-border-subtle: rgba(148, 163, 184, 0.35);
  --dash-grad-purple: linear-gradient(135deg, #a855f7, #ec4899);
  --dash-grad-amber: linear-gradient(135deg, #f97316, #facc15);
  --dash-grad-blue: linear-gradient(135deg, #3b82f6, #06b6d4);
  --dash-grad-surface: radial-gradient(circle at top left, rgba(129,140,248,.20), transparent 55%),
                       radial-gradient(circle at bottom right, rgba(244,114,182,.20), transparent 55%);
}

/* Root wrapper for dashboard screen */
.dash-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

/* Main dashboard panel */
.panel.dash-pro {
  border-radius: var(--dash-radius-lg);
  padding: 20px 18px 22px;
  background: var(--dash-grad-surface), var(--panel);
  box-shadow: var(--dash-shadow-soft);
  border: 1px solid var(--dash-border-subtle);
  position: relative;
  overflow: hidden;
}

/* Header */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-sub {
  color: var(--muted);
  margin-top: 2px;
  font-size: 0.9rem;
}

/* Layout grid */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 14px;
}

.dash-card {
  border-radius: 18px;
  background: rgba(15,23,42,0.72);
  background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 18px 40px rgba(15,23,42,0.65);
  padding: 16px 16px 14px;
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top left, rgba(129,140,248,0.25), transparent 55%);
  opacity: 0.45;
  pointer-events: none;
}

.dash-card-inner {
  position: relative;
  z-index: 1;
}

.dash-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-card-title span.emoji {
  font-size: 1.1rem;
}

/* HERO / LEVEL CARD */
.dash-hero {
  grid-column: 1 / -1;
  background: radial-gradient(circle at top left, rgba(129,140,248,0.60), rgba(244,114,182,0.45)),
              radial-gradient(circle at bottom right, rgba(56,189,248,0.35), rgba(15,23,42,0.95));
}

.dash-hero .dash-card-title {
  color: #fef3c7;
}

.dash-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.dash-level-block {
  min-width: 210px;
}

.dash-level-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(248,250,252,0.80);
  opacity: 0.9;
}

.dash-level-value {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dash-level-value span.level-number {
  color: #fef9c3;
  text-shadow: 0 12px 30px rgba(15,23,42,0.8);
}

.dash-level-value span.level-rank {
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.82);
  border: 1px solid rgba(248,250,252,0.35);
  color: #e0f2fe;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dash-xp-meta {
  margin-top: 4px;
  font-size: 0.95rem;
  color: #e5e7eb;
}

.dash-xp-meta span.num {
  font-weight: 700;
  color: #fef3c7;
}

.dash-hero-progress {
  flex: 1;
  min-width: 220px;
}

.dash-progress-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: #e5e7eb;
}

.dash-progress-label-row strong {
  font-weight: 700;
}

.dash-progress-bar {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(148,163,184,0.65);
  overflow: hidden;
}

.dash-progress-fill {
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  background-image: var(--dash-grad-purple);
  box-shadow: 0 8px 18px rgba(129, 140, 248, 0.65);
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(calc(var(--p, 0) / 100));
  animation: dash-xp-fill 900ms ease-out both;
}

@keyframes dash-xp-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(calc(var(--p, 0) / 100)); }
}

.dash-hero-footer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(226,232,240,0.9);
}

.dash-hero-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.82);
  border: 1px solid rgba(148,163,184,0.65);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* HEATMAP 30 DAYS */
.dash-heat {
  background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(15,23,42,0.88));
}

.dash-heatmap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.heat-cell-30 {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(30,64,175,0.3);
  border: 1px solid rgba(30,64,175,0.45);
}

.heat-cell-30.h0 {
  background: rgba(15,23,42,0.8);
  border-color: rgba(30,64,175,0.4);
}

.heat-cell-30.h1 {
  background: rgba(34,197,94,0.25);
  border-color: rgba(34,197,94,0.65);
}

.heat-cell-30.h2 {
  background: rgba(34,197,94,0.45);
  border-color: rgba(22,163,74,0.85);
}

.heat-cell-30.h3 {
  background: rgba(22,163,74,0.95);
  border-color: rgba(4,120,87,1);
}

.dash-heat-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: rgba(148,163,184,0.9);
}

.dash-heat-legend span.dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.dash-heat-summaries {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #e5e7eb;
}

/* SMART REVIEW */
.dash-smart {
  background: linear-gradient(135deg, rgba(244,114,182,0.15), rgba(59,130,246,0.25)),
              linear-gradient(145deg, #0f172a, #020617);
}

.dash-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.smart-card {
  position: relative;
  padding: 10px 10px 11px;
  border-radius: 14px;
  overflow: hidden;
  color: #0b1120;
  background: #fdf2ff;
  box-shadow: 0 10px 26px rgba(15,23,42,0.35);
}

.smart-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.35;
  pointer-events: none;
}

.smart-card.smart-vocab {
  background-image: var(--dash-grad-purple);
  color: #fdf2ff;
}

.smart-card.smart-phrases {
  background-image: var(--dash-grad-blue);
  color: #e0f2fe;
}

.smart-card.smart-mix {
  background-image: var(--dash-grad-amber);
  color: #0b1120;
}

.smart-card-content {
  position: relative;
  z-index: 1;
}

.smart-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.smart-count {
  font-size: 1.6rem;
  font-weight: 900;
  margin: 2px 0;
}

.smart-sub {
  font-size: 0.85rem;
  opacity: 0.92;
}

.smart-card .btn {
  margin-top: 8px;
  padding-inline: 12px;
  padding-block: 6px;
  font-size: 0.85rem;
  border-radius: 999px;
  border-width: 0;
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  box-shadow: 0 10px 22px rgba(15,23,42,0.55);
}

.smart-card.smart-mix .btn {
  background: #0b1120;
  color: #f9fafb;
}

/* QUICK STATS */
.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.quick-card {
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(148,163,184,0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-label {
  font-size: 0.85rem;
  color: rgba(148,163,184,0.95);
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #e5e7eb;
}

.quick-sub {
  font-size: 0.8rem;
  color: rgba(148,163,184,0.9);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-hero {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-header > .row {
    width: 100%;
    justify-content: flex-start;
  }
  .dash-card {
    padding: 14px 12px 12px;
  }
  .dash-hero-main {
    align-items: flex-start;
  }
  .dash-level-block {
    min-width: 0;
  }
}

/* ================= Gamification additions ================= */
/* Radar chart container */
.skill-radar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.skill-radar svg {
  max-width: 100%;
  height: auto;
}

/* Badge grid layout */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  transition: transform 0.2s ease;
  background: var(--card);
}

/* Style the badge icon and name colours. Achieved badges use accent and text
   colours to stand out, while locked badges remain muted via filter + opacity. */
.badge-item .badge-icon {
  color: var(--accent);
}
.badge-item .badge-name {
  color: var(--text);
}

/* Locked badge items are displayed in grayscale and semi-transparent to
   indicate they are not yet earned. */
.badge-item.locked .badge-icon,
.badge-item.locked .badge-name {
  filter: grayscale(1);
  opacity: 0.6;
}

/* Achieved badges stand out with a colored border and slight glow */
.badge-item.achieved {
  border: 1px solid var(--accent2);
  box-shadow: 0 0 10px rgba(28, 176, 246, 0.4);
}

/* Rare badges have a special golden border and subtle glow to highlight
   their exclusivity. When locked, they still appear muted like other
   badges. */
.badge-item.rare {
  border: 1px solid var(--warning);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.badge-item .badge-icon {
  font-size: 1.8rem;
}
.badge-item .badge-name {
  margin-top: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

/* Progress indicator below badge name for locked badges */
.badge-item .badge-progress {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}
.badge-item.locked {
  filter: grayscale(1);
  opacity: 0.5;
}

/* Level‑up popup overlay */
.levelup-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

/* === Calendar Heatmap Styles === */
/* Container for the calendar heatmap. Positions the month header and grids. */
.calendar-container {
  margin-top: 8px;
}
/* Month header displaying "Tháng X - YYYY" */
.cal-header {
  text-align: center;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--accent2);
}
/* Generic grid for weekdays and day cells */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
/* Weekday labels (T2–CN) */
.cal-weekdays .cal-cell {
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 2px 0;
}
/* Base style for day cells */
.cal-days .cal-cell {
  min-height: 42px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1.1;
  border: 1px solid rgba(71,85,105,0.4);
  /* fallback background; actual colour is set by heat-level classes */
}
/* Day number */
.cal-date {
  font-weight: 600;
  font-size: 0.75rem;
}
/* Activity count displayed below day number */
.cal-count {
  font-size: 0.65rem;
  opacity: 0.85;
  margin-top: 2px;
}
/* Empty cells before the first day of month */
.cal-days .cal-cell.empty {
  background: transparent;
  border: none;
}
/* Highlight the current day with a distinct border */
.cal-days .cal-cell.current-day {
  border: 2px solid var(--accent2);
  box-shadow: 0 0 4px rgba(28, 176, 246, 0.6);
  background-color: rgba(28, 176, 246, 0.2);
}
.levelup-card {
  background: #fff8e1;
  border: 2px solid var(--accent2);
  border-radius: 12px;
  padding: 24px 32px;
  font-size: 1.3rem;
  text-align: center;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* --- ARENA BATTLE STYLES --- */
.arena-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.arena-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 16px;
  border: 2px solid var(--border);
}
.fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  position: relative;
}
.fighter-avatar {
  font-size: 3rem;
  margin-bottom: 4px;
  transition: transform 0.2s;
}
.fighter.hit .fighter-avatar {
  animation: shake 0.5s;
  filter: grayscale(1);
}
.fighter.attack .fighter-avatar {
  transform: scale(1.5);
}
.hp-bar-frame {
  width: 100%;
  height: 16px;
  background: #555;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #333;
}
.hp-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.hp-user { background: linear-gradient(90deg, #4caf50, #8bc34a); }
.hp-bot { background: linear-gradient(90deg, #f44336, #e91e63); }
.arena-vs {
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--accent2);
}
.arena-timer {
  width: 100%;
  height: 6px;
  background: var(--border);
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.arena-timer-fill {
  height: 100%;
  background: var(--accent);
  width: 100%;
  transition: width 1s linear;
}
.arena-question-card {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 20px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
}
.arena-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.arena-opt {
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.1s;
}
.arena-opt:hover { background: var(--panel); transform: translateY(-2px); }
.arena-opt:active { transform: translateY(0); }
.arena-opt.correct { background: #d4edda; border-color: #28a745; color: #155724; }
.arena-opt.wrong { background: #f8d7da; border-color: #dc3545; color: #721c24; opacity: 0.7; }

/* Damage number animation */
.dmg-popup {
  position: absolute;
  top: -20px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--danger);
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
/* --- ARENA UPGRADE STYLES --- */
.arena-wrap { max-width: 600px; margin: 0 auto; position: relative; }

/* Avatar Animation */
.fighter-avatar { font-size: 3.5rem; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.fighter.hit .fighter-avatar { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; filter: grayscale(1) brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(600%) contrast(0.8); } /* Hiệu ứng đỏ khi trúng đòn */
.fighter.attack .fighter-avatar { transform: scale(1.4) translateY(-10px); }

/* Health Bar */
.hp-bar-frame { height: 20px; background: #333; border-radius: 10px; overflow: hidden; border: 2px solid rgba(0,0,0,0.2); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); position: relative; }
.hp-fill { height: 100%; transition: width 0.4s ease-out; position: relative; }
.hp-fill::after { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); }
.hp-user { background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%); }
.hp-bot { background: linear-gradient(90deg, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); }
.hp-text { position: absolute; width: 100%; text-align: center; top: 0; line-height: 18px; font-size: 0.75rem; color: #fff; text-shadow: 0 1px 2px #000; font-weight: bold; }

/* Damage Numbers */
.dmg-popup { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 2rem; font-weight: 900; color: #ff3d00; text-shadow: 2px 2px 0 #fff; pointer-events: none; animation: floatUp 0.8s ease-out forwards; z-index: 100; }
.dmg-popup.crit { font-size: 2.5rem; color: #ffd700; text-shadow: 2px 2px 0 #d32f2f; }
.heal-popup { color: #00e676; text-shadow: 1px 1px 0 #000; }

@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.5); }
  20% { transform: translate(-50%, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}

/* Combo Badge */
.arena-stats-bar { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold; background: rgba(0,0,0,0.05); padding: 8px 12px; border-radius: 12px; }
.combo-badge { color: #ff9800; display: inline-block; transition: transform 0.2s; }
.combo-badge.active { transform: scale(1.2); text-shadow: 0 0 10px gold; }

/* Option Cards */
.arena-opt { transition: all 0.15s; position: relative; overflow: hidden; font-weight: 600; border-bottom: 4px solid rgba(0,0,0,0.1); }
.arena-opt:active { transform: translateY(2px); border-bottom-width: 0; }
.arena-opt.correct { background: #4caf50 !important; color: white !important; border-color: #2e7d32 !important; }
.arena-opt.wrong { background: #f44336 !important; color: white !important; border-color: #b71c1c !important; opacity: 0.6; }
/* --- QUEST POPUP & ENVELOPE STYLES --- */

/* Nút hình bức thư (Envelope) - Đã chỉnh sửa cho gọn */
.quest-envelope-btn {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 45px; /* Nhỏ lại chút cho vừa header */
  height: 45px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
  z-index: 90;
  margin: 0; /* Bỏ canh giữa để đặt vào góc */
}
.quest-envelope-btn:hover { transform: scale(1.1) rotate(-5deg); }
.quest-envelope-btn.shake { animation: shake 1s infinite; }

/* Chấm đỏ thông báo */
.quest-badge {
  position: absolute; top: -3px; right: -3px;
  background: #d32f2f; color: #fff;
  font-size: 10px; font-weight: bold;
  width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Khung Popup (Modal) */
.quest-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: none; /* Mặc định ẩn */
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.quest-modal-overlay.show { display: flex; animation: fadeIn 0.3s; }

/* Nội dung bên trong (hình tờ giấy cuộn) */
.quest-paper {
  background: #fff8e1;
  width: 90%; max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 4px solid #d4af37; /* Viền vàng */
  position: relative;
  padding: 20px;
  transform: translateY(20px);
  transition: transform 0.3s;
}
.quest-modal-overlay.show .quest-paper { transform: translateY(0); }

.quest-header-img {
  text-align: center; font-size: 3rem; margin-top: -50px; text-shadow: 0 4px 0 #fff;
}
.close-quest {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #888;
}
/* --- FIX SETTINGS UI ON MOBILE --- */
@media (max-width: 600px) {
  /* Làm cho các hàng trong cài đặt tự động xuống dòng */
  #view .panel .row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  /* Chỉnh lại các ô chọn Font, Kích cỡ cho to rõ hơn */
  #settings-font-family, 
  #settings-font-size, 
  #settings-font-weight, 
  #settings-tts-rate {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Canh lề label cho đẹp */
  #view .panel label {
    margin-bottom: 4px;
    font-weight: 600;
  }
}
/* --- UX FIXES: DARK MODE & COMPACT UI --- */

/* 1. Fix Popup Dark Mode: Sử dụng biến màu thay vì màu cứng */
.quest-paper, .match-summary-card, .levelup-card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}
/* Riêng phần kết quả Arena cần nền hơi khác chút để nổi bật nhưng vẫn theo theme */
.card[style*="background:#fff8e1"] {
  background: var(--panel) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* 2. Thanh Rank Gọn Gàng (Compact Rank Widget) */
.rank-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
  cursor: pointer; /* Bấm vào để xem full */
  transition: transform 0.2s;
}
.rank-compact:active { transform: scale(0.98); }

.rank-compact-icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.rank-compact-info { flex: 1; }
.rank-compact-title { font-weight: 900; font-size: 1.1rem; color: var(--accent2); }
.rank-compact-xp { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }

/* Thanh Progress nhỏ trong rank compact */
.rank-mini-progress {
  height: 8px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.rank-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width: 0%;
  transition: width 1s ease;
}

/* 3. Active State cho Bottom Nav */
.bottom-nav-btn.active {
  color: var(--accent2);
  font-weight: 700;
}
.bottom-nav-btn.active .icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(28, 176, 246, 0.4));
}
/* --- PHRASE STORY SPLIT UI --- */
.ps-split-container {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 cột */
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 768px) {
  .ps-split-container {
    grid-template-columns: 1fr 1fr; /* PC: 2 cột */
  }
}

.ps-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  line-height: 1.6;
  font-size: 1.05rem;
  position: relative;
  transition: filter 0.3s ease;
}

/* Class để làm mờ nội dung khi check */
.ps-panel.blurred > * {
  filter: blur(5px);
  opacity: 0.3;
  pointer-events: none; /* Không cho click khi đang che */
  user-select: none;
}

.ps-header {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ps-checkbox-label {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.highlight-mix {
  border-bottom: 2px solid var(--accent2);
  cursor: pointer;
  font-weight: 700;
  color: inherit;
  transition: background 0.2s;
}
.highlight-mix:hover {
  background: rgba(255, 255, 0, 0.2);
}
/* Đảm bảo Tooltip luôn nổi lên trên cùng */
#ms-tooltip, #rp-vocab-tip {
  z-index: 99999 !important; /* Số cực lớn để đè lên mọi thứ */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* Bóng đổ đậm hơn cho dễ nhìn */
  border: 2px solid var(--accent);
  background: var(--card);
  color: var(--text);
}
/* --- PHRASE STORY HIGHLIGHT FX --- */

/* Style cho câu đang được đọc (Highlight xanh nhạt giống Magic Story) */
.active-reading {
  background-color: rgba(76, 175, 80, 0.2); /* Màu xanh nhạt */
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.3s;
  padding: 2px 0;
}

/* Fallback: Nếu không bôi được chính xác câu (do dính thẻ HTML phức tạp) thì bôi cả khối */
.active-reading-block {
  background-color: rgba(255, 235, 59, 0.15); /* Màu vàng nhạt */
  border-left: 3px solid var(--accent);
  padding-left: 8px !important;
}
/* --- FIX TOOLTIP Z-INDEX --- */
#ms-tooltip {
  position: fixed;
  z-index: 2147483647 !important; /* Max Z-Index */
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  font-size: 0.95rem;
  max-width: 300px;
  display: none; /* Mặc định ẩn */
}
#ms-tooltip .close-btn {
  position: absolute;
  top: 2px; right: 6px;
  cursor: pointer;
  color: var(--danger);
  font-weight: bold;
}
/* --- CẬP NHẬT STYLE CỤM TỪ LẬT (PHRASE STORY) --- */

.highlight-mix {
  /* 1. Bỏ gạch chân */
  border-bottom: none !important;
  text-decoration: none !important;

  /* 2. Chữ màu đỏ */
  color: #d32f2f !important; /* Màu đỏ tươi dễ nhìn */
  
  /* 3. In đậm & In đứng */
  font-weight: 900 !important; /* Đậm nhất có thể */
  font-style: normal !important; /* Bắt buộc in đứng (khử in nghiêng) */

  /* Tinh chỉnh khác */
  cursor: pointer;
  padding: 0 3px; /* Thêm chút khoảng cách 2 bên cho thoáng */
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Hiệu ứng khi di chuột vào (để người dùng biết là bấm được) */
.highlight-mix:hover {
  background-color: rgba(211, 47, 47, 0.1); /* Nền đỏ nhạt */
  color: #b71c1c !important; /* Đỏ đậm hơn chút */
}

/* --- QUAN TRỌNG: Khử style của các thẻ con bên trong --- */
/* Vì dữ liệu cũ thường bọc trong thẻ <em> (nghiêng) hoặc <strong> (đậm) */
.highlight-mix em, 
.highlight-mix strong, 
.highlight-mix i, 
.highlight-mix b {
  font-style: normal !important; /* Ép về in đứng */
  font-weight: inherit !important; /* Theo font-weight cha */
  color: inherit !important; /* Theo màu cha */
  text-decoration: none !important;
}
/* --- SCRAMBLE PRO UPGRADE --- */

/* Container chính */
.scramble-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin: 10px 0;
  width: 100%;
  position: relative;
}

/* Các viên đá (Tiles) được làm đẹp hơn */
.scramble-tile, .scramble-slot {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy */
  user-select: none;
}

/* Slot trống */
.scramble-slot {
  background: #f0f2f5;
  border: 2px dashed #cbd5e1;
  color: transparent;
}
.scramble-slot.filled {
  background: #fff;
  border: 2px solid #3b82f6; /* Viền xanh khi có chữ */
  color: #3b82f6;
  box-shadow: 0 4px 0 #2563eb;
  transform: translateY(-4px);
}

/* Viên đá trong hồ (Pool) - Màu Gradient */
.scramble-tile {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 0 #94a3b8;
  color: #334155;
  cursor: pointer;
}
.scramble-tile:active {
  transform: translateY(4px);
  box-shadow: none;
}
.scramble-tile.used {
  opacity: 0;
  transform: scale(0);
  width: 0 !important;
  margin: 0 !important;
  padding: 0;
  border: none;
}

/* Nút chức năng (Tròn) */
.sc-action-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-action-btn:hover { transform: scale(1.1); background: #f8fafc; }
.sc-action-btn:active { transform: scale(0.9); }

/* --- THẺ KẾT QUẢ (VICTORY CARD) --- */
.sc-victory-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sc-victory-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.sc-victory-card {
  background: #fff;
  border: 2px solid #22c55e;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.2);
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* --- SENTENCE GAME PRO --- */
.sentence-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* Khu vực hiển thị câu (Dòng kẻ) */
.sentence-line {
  min-height: 80px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  border-radius: 12px 12px 0 0;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  align-content: flex-start;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
  transition: background 0.3s;
}
.sentence-line.correct { background: rgba(34, 197, 94, 0.1); border-bottom-color: var(--ok); }
.sentence-line.wrong { background: rgba(239, 68, 68, 0.1); border-bottom-color: var(--danger); animation: shake 0.4s; }

/* Khu vực ngân hàng từ (Word Bank) */
.sentence-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  min-height: 100px;
}

/* Thẻ từ (Word Card) */
.word-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--border); /* Hiệu ứng 3D */
  padding: 10px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: all 0.1s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.word-card:active {
  transform: translateY(4px);
  border-bottom-width: 1px;
  box-shadow: none;
}

/* Thẻ giả (Placeholder) khi từ đã được chọn lên trên */
.word-placeholder {
  background: rgba(0,0,0,0.05);
  border: 1px dashed var(--border);
  border-radius: 16px;
  pointer-events: none;
}

/* Nút điều khiển âm thanh nhỏ */
.audio-control-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.audio-control-btn:hover { background: var(--accent); color: #fff; }
/* --- GRAMMAR PRO STYLES --- */

/* Lưới chủ đề ngữ pháp */
.grammar-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.grammar-topic-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
}

.grammar-topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  border-color: var(--accent);
}

.grammar-topic-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 5px;
}

.grammar-topic-count {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Thanh tiến độ nhỏ trong card */
.topic-progress-bg {
  height: 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.topic-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

/* Giao diện làm bài Quiz tập trung */
.grammar-quiz-container {
  max-width: 700px;
  margin: 0 auto;
}

.grammar-question-box {
  background: var(--card);
  padding: 25px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
  margin-bottom: 20px;
}

.grammar-q-text {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--accent2);
}

.grammar-opt-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.grammar-opt-btn:hover:not(:disabled) {
  background: var(--panel);
  border-color: var(--accent);
}

.grammar-opt-btn.correct {
  background: #d4edda;
  border-color: #28a745;
  color: #155724;
}

.grammar-opt-btn.wrong {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

.grammar-explanation-box {
  margin-top: 15px;
  padding: 15px;
  background: rgba(255, 243, 205, 0.5);
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  animation: fadeInSlide 0.3s;
}