/* ═══════════════════════════════════════════════════
   EnglishWithDan – Global Mobile & Responsive CSS
   Áp dụng cho toàn bộ trang: dashboard, reading,
   listening, writing, speaking, admin, profile
   ═══════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────
   Neutral tokens (text/border/bg/surface2/shadow/radius) and semantic
   status colors (success/warning/danger) moved to css/tokens.css —
   single source of truth for the token-collision bug (audit UI#1) and
   the inconsistent-green/red findings (audit UI#22/#23). This page
   must load tokens.css before mobile.css.

   This block now only bridges names mobile.css's own rules reference
   under a different name than the canonical token. --primary/--accent
   aliasing to --brand is a deliberate, visible change: it retires the
   pink gradient (previously only seen on profile/inbox/tuition, since
   no page-specific stylesheet there overrode it) in favor of the red
   already used on every other page — the audit's explicit color
   recommendation. See docs/design-system.md "Color" for the full note. */
:root {
  --primary:      var(--brand);
  --primary-dark: var(--brand-dark);
  --accent:       var(--brand);
  --text-light:   var(--text2);
  --card:         var(--surface);
}

/* ── Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Keyboard focus (sitewide) ──────────────────────────
   Applies wherever mobile.css is loaded. Keeps the browser's default
   focus ring off for mouse/touch clicks but visible for keyboard nav. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

body {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--text);
  background: var(--bg);
  transition: background .3s, color .3s;
}

img { max-width: 100%; height: auto; }

/* ── Top Navigation Bar ──────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.top-nav .nav-brand {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  /* The logo <img> has no natural "minimum content size" the way text does,
     so without this the flex row shrinks it first (and hardest) whenever
     .nav-links is hidden and .nav-actions' icon row doesn't fit — on a
     375px phone this measured out to the logo being squeezed to an
     imperceptible 13px wide while the action icons kept their full size. */
  flex-shrink: 0;
}

.top-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin: 0 16px;
}

.top-nav .nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.top-nav .nav-links > a:hover,
.top-nav .nav-links > a.active,
.top-nav .nav-dropdown > a:hover,
.top-nav .nav-dropdown > a.active {
  background: linear-gradient(135deg, rgba(240,147,251,.12), rgba(245,87,108,.12));
  color: var(--primary);
}

/* ── Dropdown nav item ── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 6px;
}
.nav-dd-arrow {
  font-size: 10px;
  opacity: .45;
  transition: transform .25s cubic-bezier(.34,1.3,.64,1), opacity .2s;
  margin-left: 1px;
}
.nav-dropdown.nav-dd-open .nav-dd-arrow {
  transform: rotate(180deg);
  opacity: .8;
}

/* ── Menu panel ── */
.nav-dd-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(.97);
  transform-origin: top center;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
  min-width: 210px;
  padding: 6px;
  z-index: 500;
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.3,.64,1), visibility 0s linear .2s;
}

/* Upward caret pointing to the trigger */
.nav-dd-menu::before,
.nav-dd-menu::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.nav-dd-menu::before {
  top: -8px;
  border-bottom: 8px solid var(--border, #e5e7eb);
}
.nav-dd-menu::after {
  top: -7px;
  border-bottom: 8px solid var(--card, #fff);
}

.nav-dropdown.nav-dd-open .nav-dd-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.3,.64,1), visibility 0s linear 0s;
}

/* ── Menu items ── */
.nav-dd-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text, #374151);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .15s;
}

/* Icon pill */
.nav-dd-menu a i:first-child {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg, rgba(0,0,0,.04));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--primary, #e879a0);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.nav-dd-menu a:hover {
  background: linear-gradient(135deg, rgba(240,147,251,.1), rgba(245,87,108,.1));
  color: var(--primary, #e879a0);
  transform: translateX(3px);
}
.nav-dd-menu a:hover i:first-child {
  background: linear-gradient(135deg, rgba(240,147,251,.2), rgba(245,87,108,.2));
  color: var(--primary, #e879a0);
}

.nav-dd-menu a.active {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: #fff;
  font-weight: 600;
}
.nav-dd-menu a.active i:first-child {
  background: rgba(255,255,255,.22);
  color: #fff;
}

[data-theme="dark"] .nav-dd-menu::after {
  border-bottom-color: var(--card, var(--surface, #0d0d0d));
}
[data-theme="dark"] .nav-dd-menu a i:first-child {
  background: rgba(255,255,255,.07);
}
[data-theme="dark"] .nav-dd-menu a.active {
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

.top-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Dark mode toggle */
.btn-dark-mode {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition);
}
.btn-dark-mode:hover { background: var(--border); }

/* ── Site-wide search (nav.js) ── */
.nav-search-panel{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;top:calc(100% + 10px);right:0;
  transform:translateY(-8px);
  background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  width:340px;max-width:90vw;max-height:60vh;overflow:hidden;display:flex;flex-direction:column;z-index:998;
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.3,.64,1),visibility 0s linear .2s;
}
.nav-search-panel.open{
  visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.3,.64,1),visibility 0s linear 0s;
}
.nav-search-input{
  width:100%;border:none;border-bottom:1px solid var(--border,#e5e7eb);padding:14px 16px;
  font-size:14px;font-family:inherit;background:transparent;color:var(--text);outline:none;flex-shrink:0;
  box-sizing:border-box;
}
.nav-search-results{overflow-y:auto;flex:1}
.nav-search-group-label{padding:8px 16px 4px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.nav-search-item{display:block;padding:8px 16px;font-size:13px;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-search-item:hover{background:var(--surface2,#f8f9fb)}
@media(max-width:480px){
  .nav-search-panel{position:fixed;top:var(--nav-height,64px);right:8px;left:8px;width:auto;max-width:none;max-height:70vh}
}

/* ── Notification bell (nav.js) ── */
.nav-bell-badge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:10px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.nav-bell-panel{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;top:calc(100% + 10px);right:0;
  transform:translateY(-8px);
  background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  width:320px;max-width:90vw;max-height:420px;overflow-y:auto;z-index:998;
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.3,.64,1),visibility 0s linear .2s;
}
.nav-bell-panel.open{
  visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.3,.64,1),visibility 0s linear 0s;
}
.nav-bell-panel-header{padding:12px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border,#e5e7eb);color:var(--text)}
.nav-bell-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border,#e5e7eb);text-decoration:none;color:inherit}
.nav-bell-item:last-child{border-bottom:none}
.nav-bell-item:hover{background:var(--surface2,#f8f9fb)}
.nav-bell-item.unread{background:rgba(229,57,53,.05)}
.nav-bell-icon{font-size:16px;flex-shrink:0;margin-top:2px}
.nav-bell-item-body{min-width:0;flex:1}
.nav-bell-item-subject{display:block;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-bell-item-snippet{display:block;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.nav-bell-item-date{display:block;font-size:11px;color:var(--text3);margin-top:3px}
@media(max-width:480px){
  .nav-bell-panel{position:fixed;top:var(--nav-height,64px);right:8px;left:8px;width:auto;max-width:none}
}

/* User avatar pill */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 50px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.nav-user:hover { background: var(--bg); }
.nav-user img,
.nav-user .avatar-placeholder {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 12px; font-weight: 600;
}
.nav-user .user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: none;
  border-radius: 8px;
  transition: var(--transition);
}
.hamburger:hover { background: var(--bg); }
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-height); left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}
.mobile-nav-inner {
  position: absolute;
  top: 0; left: 0;
  width: min(80vw, 300px);
  height: 100%;
  background: var(--card);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s ease;
  box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.mobile-nav.open { display: block; }
.mobile-nav.open .mobile-nav-inner { transform: translateX(0); }
.mobile-nav .mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: var(--transition);
  margin-bottom: 4px;
}
.mobile-nav .mobile-nav-link i { width: 20px; text-align: center; }
.mobile-nav .mobile-nav-link:hover,
.mobile-nav .mobile-nav-link.active {
  background: linear-gradient(135deg, rgba(240,147,251,.12), rgba(245,87,108,.12));
  color: var(--primary);
}
.mobile-nav-divider { height: 1px; background: var(--border); margin: 12px 0; }
.mobile-nav .mobile-nav-sub {
  padding-left: 44px;
  font-size: 13px;
  opacity: .85;
}

/* ── Page Content Wrapper ────────────────────────────── */
.page-content {
  padding-top: calc(var(--nav-height) + 20px);
  min-height: 100vh;
}

/* ── Cards / Stat Cards / Buttons / Forms / Badges / Toast ────────────
   Moved to css/components.css (single source of truth — audit UI#2,
   #48). This page must also load components.css. */

/* ── Exam / Test Specific ────────────────────────────── */

/* Timer */
.exam-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.exam-timer.warning { color: var(--warning); background: rgba(245,158,11,.08); border-color: var(--warning); }
.exam-timer.danger  { color: var(--danger);  background: rgba(239,68,68,.08);  border-color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* Progress bar */
.exam-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.exam-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 50px;
  overflow: hidden;
}
.exam-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f093fb, #f5576c);
  border-radius: 50px;
  transition: width .4s ease;
}
.exam-progress-text { font-size: 13px; color: var(--text-light); white-space: nowrap; }

/* Question navigator */
.question-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.q-nav-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.q-nav-btn.answered { background: rgba(16,185,129,.12); color: var(--success); border-color: var(--success); }
.q-nav-btn.current  { background: var(--primary); color: white; border-color: var(--primary); }
.q-nav-btn.flagged  { background: rgba(245,158,11,.12); color: var(--warning); border-color: var(--warning); }
.q-nav-btn:hover:not(.current) { border-color: var(--primary); color: var(--primary); }

/* Full-screen exam mode */
.fullscreen-exam {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.fullscreen-exam .exam-topbar {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.fullscreen-exam .exam-body { flex: 1; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* ── Loading Spinner ─────────────────────────────────── */
/* .spinner / .loading-overlay moved to css/components.css — this file's
   own copy was silently shadowing it on all 12 pages (Phase 2 audit). */

/* ── Streak badge ────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,107,53,.3);
}

/* ── Table responsive ─────────────────────────────────
   .table-wrap / table.responsive-table moved to css/components.css. */

/* ══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════ */

/* Tablet & smaller desktop */
@media (max-width: 1024px) {
  .top-nav .nav-links { display: none; }
  .hamburger { display: flex; }
  :root { --sidebar-w: 220px; }

  #kbd-hint-panel {
    display: none !important;
  }

  /* The mobile drawer (js/nav.js's #globalMobileNav) already has its own
     logout button (#mobileLogoutBtn) whenever the hamburger is showing —
     keeping a second logout icon in the already-tight top-bar action row
     only crowds the logo for no benefit. Hide it for the whole range the
     hamburger is the primary nav, not just the narrowest phones. */
  #globalLogoutBtn { display: none; }
}

/* Tablet */
@media (max-width: 768px) {
  :root { --nav-height: 56px; }

  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card .stat-value { font-size: 24px; }

  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-body { padding: 16px; }

  /* Hide non-essential table columns */
  .hide-mobile { display: none !important; }

  /* Stack form rows */
  .form-row { flex-direction: column !important; }
  .form-row .form-group { flex: 1 !important; }

  /* Exam layout: stack passage + questions */
  .exam-split { flex-direction: column !important; }
  .exam-split .passage-panel,
  .exam-split .questions-panel { width: 100% !important; max-width: 100% !important; }

  /* Question nav - smaller buttons */
  .q-nav-btn { width: 32px; height: 32px; font-size: 12px; }

  .fullscreen-exam .exam-topbar { padding: 10px 16px; }
  .fullscreen-exam .exam-body   { padding: 16px; }

  .exam-timer { font-size: 17px; padding: 6px 12px; }
}

/* Mobile */
@media (max-width: 576px) {
  :root { --nav-height: 52px; }

  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 22px; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 16px; }

  .top-nav { padding: 0 14px; gap: 8px; }
  .top-nav .nav-brand { font-size: 17px; }
  /* nav.js sets the logo <img>'s height inline (style="height:38px"), so an
     ordinary rule here can't win the cascade — !important is scoped to just
     this one property, only at this breakpoint, to free up room for the
     7-icon .nav-actions row alongside it (see flex-shrink:0 note above:
     without shrinking the logo down deliberately here, it was flex-shrinking
     itself down to ~13px instead). */
  .top-nav .nav-brand img { height: 30px !important; }
  .top-nav .nav-actions { gap: 6px; }
  .top-nav .nav-actions .btn-dark-mode,
  .top-nav .nav-actions #globalSearchBtn,
  .top-nav .nav-actions #globalBellBtn { width: 34px; height: 34px; font-size: 16px; }
  /* #globalLogoutBtn is already hidden site-wide at <=1024px (see that
     breakpoint above) — no separate rule needed here. */

  .btn { padding: 9px 16px; font-size: 13px; }
  .btn-lg { padding: 12px 24px; font-size: 15px; }

  /* Toast bottom-center on mobile */
  .toast-container { left: 16px; right: 16px; bottom: 16px; max-width: none; }

  /* Full-width cards */
  .card { border-radius: 10px; }

  /* Reading passage font */
  .passage-text { font-size: 15px; line-height: 1.7; }

  /* Question navigator compact */
  .question-nav { gap: 4px; padding: 12px; }
  .q-nav-btn { width: 30px; height: 30px; font-size: 11px; border-radius: 6px; }

  /* Writing editor full height */
  .writing-editor { min-height: 200px !important; }

  /* Hide sidebar on exam pages */
  .exam-sidebar { display: none !important; }

  /* Audio player responsive */
  .audio-player { flex-direction: column; align-items: flex-start; }
}

/* Very small phones */
@media (max-width: 380px) {
  .stat-cards { grid-template-columns: 1fr; }
  .top-nav .nav-brand .brand-sub { display: none; }
}

/* ── Global nav helpers ──────────────────────────────── */
/* The premium-expiry banner (nav.js) is a fixed element stacked below the
   nav — --expiry-banner-height is 0px normally and set to the banner's
   real (possibly two-line, on narrow screens) height while it's showing,
   so it pushes content down instead of covering it. */
.has-global-nav { padding-top: calc(var(--nav-height, 64px) + var(--expiry-banner-height, 0px)); }
/* Sticky inner headers must sit below the fixed global nav */
.has-global-nav .exam-bar   { top: calc(var(--nav-height, 64px) + var(--expiry-banner-height, 0px)); }
.has-global-nav .main-header { top: calc(var(--nav-height, 64px) + var(--expiry-banner-height, 0px)); }
/* Reading/writing/listening call hideTopNav() transiently during fullscreen
   exam mode, which drops has-global-nav — but nothing reserved space for the
   banner. Without this, the page's own sticky header still has to jump down
   by --expiry-banner-height to avoid the fixed banner, but its ORIGINAL
   (unstuck) flow position — and therefore everything that naturally flows
   after it — doesn't move with it, so the header ends up visually
   overlapping its own next sibling by exactly the banner's height. Reserving
   the space at the body level up front means the header's unstuck position
   already matches where it has to stick, so nothing downstream drifts out
   of place. */
body:not(.has-global-nav) { padding-top: var(--expiry-banner-height, 0px); }
/* In native browser fullscreen the global nav is hidden – reset sticky tops */
:fullscreen .exam-bar,    :-webkit-full-screen .exam-bar    { top: 0 !important; }
:fullscreen .main-header, :-webkit-full-screen .main-header { top: 0 !important; }

/* ── Print styles ────────────────────────────────────── */
@media print {
  .top-nav, .hamburger, .mobile-nav, .exam-topbar .btn { display: none !important; }
  .page-content { padding-top: 0; }
  .exam-split { flex-direction: row !important; }
}

/* ── Utility classes ─────────────────────────────────── */
.d-flex  { display: flex; }
.d-grid  { display: grid; }
.d-none  { display: none; }
.d-block { display: block; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.mt-8   { margin-top: 8px;  }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mb-8   { margin-bottom: 8px;  }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.p-16   { padding: 16px; }
.p-20   { padding: 20px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 12px; }
.text-muted  { color: var(--text-light); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.rounded { border-radius: var(--radius); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.pointer { cursor: pointer; }

/* ══════════════════════════════════════════════════════
   DARK MODE – Global overrides for all pages
   (reading/listening/writing/speaking/dashboard/profile)
   All pages include mobile.css so overrides go here.
   ══════════════════════════════════════════════════════ */

/* Body background/color – overrides page-specific CSS */
[data-theme="dark"] body {
  background: var(--bg, #000000) !important;
  color: #f3f4f6 !important;
}

/* ── Inline-styled headers (reading, listening, speaking) ── */
[data-theme="dark"] header {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] header .hdr-btn,
[data-theme="dark"] header .hdr-skill-toggle {
  border-color: #4b5563 !important;
  color: #9ca3af !important;
}

/* ── Writing's .main-header ── */
[data-theme="dark"] .main-header {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .main-header .btn-logout,
[data-theme="dark"] .main-header span {
  color: #9ca3af !important;
  border-color: #4b5563 !important;
}

/* ── Skill nav bar ── */
[data-theme="dark"] .skill-tabs-bar {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .site-nav-link       { color: #9ca3af !important; }
[data-theme="dark"] .site-nav-link:hover { color: #e53935 !important; }
[data-theme="dark"] .site-nav-link.active {
  color: #e53935 !important;
  border-bottom-color: #e53935 !important;
}

/* ── Reading / Listening: list screen ── */
[data-theme="dark"] .filter-btn {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
  color: #9ca3af;
}
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-btn:hover {
  background: #3b1516;
  border-color: #e53935;
  color: #e53935;
}
[data-theme="dark"] .test-group-title { color: #f3f4f6; }
[data-theme="dark"] .list-subtitle    { color: #9ca3af; }
[data-theme="dark"] .progress-bar-mini { background: var(--border2, #333333); }
[data-theme="dark"] .test-card,
[data-theme="dark"] .test-card-skeleton {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
}
[data-theme="dark"] .test-card-name   { color: #f3f4f6; }
[data-theme="dark"] .test-card-meta   { color: #9ca3af; }
[data-theme="dark"] .test-card-last {
  background: var(--border2, #333333);
  color: #d1d5db;
}
[data-theme="dark"] #resume-banner {
  background: #1e3a5f !important;
  border-color: #1d4ed8 !important;
  color: #bfdbfe !important;
}
[data-theme="dark"] #resume-banner strong { color: #bfdbfe; }

/* ── Key entry screen ── */
[data-theme="dark"] .key-card {
  background: var(--surface, #0d0d0d);
  color: #f3f4f6;
}
[data-theme="dark"] .key-desc  { color: #9ca3af; }
[data-theme="dark"] .key-input {
  background: var(--bg, #000000);
  border-color: #4b5563;
  color: #f3f4f6;
}

/* ── Dashboard: use CSS variable overrides (vars defined in dashboard.html <style>) ── */
[data-theme="dark"] .header {
  background: var(--surface, #0d0d0d);
  border-bottom-color: var(--border2, #333333);
}
[data-theme="dark"] .main-nav,
[data-theme="dark"] .vocab-sidebar {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
}
[data-theme="dark"] .nav-list a       { color: #9ca3af; }
[data-theme="dark"] .nav-list a:hover { color: #f3f4f6; }
[data-theme="dark"] .nav-list a.active {
  color: #e53935;
  border-bottom-color: #e53935;
}
[data-theme="dark"] .btn-logout {
  border-color: #4b5563;
  color: #9ca3af;
}
[data-theme="dark"] .btn-logout:hover { background: var(--border2, #333333); }
[data-theme="dark"] .hdr-nav-toggle {
  border-color: #4b5563;
  color: #9ca3af;
}

/* ── Dark toggle button ── */
.dark-toggle-btn {
  background: none;
  border: 1px solid #e5e7eb;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background .15s, border-color .15s;
}
.dark-toggle-btn:hover { background: #f3f4f6; }
[data-theme="dark"] .dark-toggle-btn {
  border-color: #4b5563;
  color: #9ca3af;
}
[data-theme="dark"] .dark-toggle-btn:hover { background: var(--border2, #333333); }

/* ══════════════════════════════════════════════════════
   DARK MODE – EXAM SCREENS (Reading & Listening)
   ══════════════════════════════════════════════════════ */

/* ── Exam top bar & toolbar ── */
[data-theme="dark"] .exam-bar {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .exam-exit-btn  { color: #9ca3af !important; }
[data-theme="dark"] .exam-title-txt { color: #f3f4f6 !important; }
[data-theme="dark"] .exam-timer {
  background: var(--border2, #333333) !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] #exam-progress-pill {
  background: var(--border2, #333333) !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
}
[data-theme="dark"] .btn-icon-sm { color: #9ca3af !important; }
[data-theme="dark"] .exam-toolbar {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .tool-btn {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .tool-btn.active {
  background: rgba(61,139,255,.2) !important;
  border-color: #3d8bff !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .settings-panel {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .settings-row {
  border-bottom-color: var(--border2, #333333) !important;
  color: #f3f4f6 !important;
}

/* ── Reading: passage & questions panels ── */
[data-theme="dark"] .split-passage  { background: var(--surface, #0d0d0d) !important; }
[data-theme="dark"] .split-questions { background: var(--bg, #000000) !important; }
[data-theme="dark"] .split-divider   { background: var(--border2, #333333) !important; }
[data-theme="dark"] .passage-inner,
[data-theme="dark"] .questions-inner { color: #e2e8f0 !important; }
[data-theme="dark"] .passage-title { color: #f3f4f6 !important; }
[data-theme="dark"] .passage-p,
[data-theme="dark"] .passage-inner p { color: #d1d5db !important; }

/* ── Q navigation bar ── */
[data-theme="dark"] .exam-q-nav,
[data-theme="dark"] .q-nav-row {
  background: var(--surface, #0d0d0d) !important;
  border-top-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .q-nav-btn {
  background: var(--border2, #333333) !important;
  border-color: #4b5563 !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .q-nav-btn.answered {
  background: #1e3a5f !important;
  border-color: #3d8bff !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .q-nav-btn.correct  { background: #14532d !important; border-color: #16a34a !important; color: #86efac !important; }
[data-theme="dark"] .q-nav-btn.wrong    { background: #7f1d1d !important; border-color: #dc2626 !important; color: #fca5a5 !important; }
[data-theme="dark"] .q-nav-btn.current  { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.4) !important; }

/* ── Listening: topbar & sidebar ── */
[data-theme="dark"] .exam-topbar {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .exam-title { color: #f3f4f6 !important; }
[data-theme="dark"] .sidebar-panel {
  background: var(--surface, #0d0d0d) !important;
  border-left-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .q-nav-label { color: #6b7280 !important; }

/* ── Question item cards (listening / reading plain) ── */
[data-theme="dark"] .question-item {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .question-item:hover { border-color: #4b5563 !important; }

/* ── Question text, number, instruction ── */
[data-theme="dark"] .q-text,
[data-theme="dark"] .q-num,
[data-theme="dark"] .q-stem,
[data-theme="dark"] .question-text { color: #f3f4f6 !important; }
[data-theme="dark"] .q-instruction,
[data-theme="dark"] .group-instruction {
  background: rgba(30,58,92,.5) !important;
  border-color: #1e3a5f !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .part-header,
[data-theme="dark"] .part-title-bar {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  color: #f3f4f6 !important;
}

/* ── Radio / MC options ── */
[data-theme="dark"] .radio-opt,
[data-theme="dark"] .cb-opt,
[data-theme="dark"] .checkbox-opt {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .radio-opt:hover,
[data-theme="dark"] .cb-opt:hover { border-color: #3d8bff !important; background: rgba(61,139,255,.08) !important; }
[data-theme="dark"] .radio-opt.selected,
[data-theme="dark"] .cb-opt.selected,
[data-theme="dark"] .checkbox-opt.selected {
  border-color: #3d8bff !important;
  background: rgba(61,139,255,.15) !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .radio-opt.correct-ans,
[data-theme="dark"] .cb-opt.correct-ans,
[data-theme="dark"] .checkbox-opt.correct-ans { border-color: #16a34a !important; background: rgba(20,83,45,.4) !important; color: #86efac !important; }
[data-theme="dark"] .radio-opt.wrong-ans,
[data-theme="dark"] .cb-opt.wrong-ans,
[data-theme="dark"] .checkbox-opt.wrong-ans   { border-color: #dc2626 !important; background: rgba(127,29,29,.4) !important; color: #fca5a5 !important; }

/* ── T/F/NG buttons ── */
[data-theme="dark"] .tfng-opt {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .tfng-opt:hover    { border-color: #3d8bff !important; background: rgba(61,139,255,.1) !important; color: #93c5fd !important; }
[data-theme="dark"] .tfng-opt.selected { border-color: #3d8bff !important; background: rgba(61,139,255,.2) !important; color: #93c5fd !important; }
[data-theme="dark"] .tfng-opt.correct-ans { border-color: #16a34a !important; background: rgba(20,83,45,.4) !important; color: #86efac !important; }
[data-theme="dark"] .tfng-opt.wrong-ans   { border-color: #dc2626 !important; background: rgba(127,29,29,.4) !important; color: #fca5a5 !important; }

/* ── Fill-blank inputs ── */
[data-theme="dark"] .fill-input,
[data-theme="dark"] input.fill-input {
  background: var(--border2, #333333) !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .fill-input:focus { border-color: #3d8bff !important; }
[data-theme="dark"] .fill-input.correct { border-color: #16a34a !important; background: rgba(20,83,45,.3) !important; color: #86efac !important; }
[data-theme="dark"] .fill-input.wrong   { border-color: #dc2626 !important; background: rgba(127,29,29,.3) !important; color: #fca5a5 !important; }

/* ── Table groups (reading & listening) ── */
[data-theme="dark"] .rq-table-wrap,
[data-theme="dark"] .group-table-wrap {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .rq-table thead th,
[data-theme="dark"] .group-table thead th {
  background: var(--border2, #333333) !important;
  color: #d1d5db !important;
  border-bottom-color: #4b5563 !important;
}
[data-theme="dark"] .rq-table tbody td,
[data-theme="dark"] .group-table tbody td {
  background: var(--surface, #0d0d0d) !important;
  color: #e2e8f0 !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .rq-table tbody tr:hover td,
[data-theme="dark"] .group-table tbody tr:hover td { background: #2d3748 !important; }

/* ── Note-form & bullet-list groups ── */
[data-theme="dark"] .rq-note-form,
[data-theme="dark"] .group-note-form { border-color: var(--border2, #333333) !important; }
[data-theme="dark"] .rq-note-title,
[data-theme="dark"] .note-form-title {
  background: var(--border2, #333333) !important;
  color: #f3f4f6 !important;
  border-bottom-color: #4b5563 !important;
}
[data-theme="dark"] .rq-note-line,
[data-theme="dark"] .note-line {
  color: #e2e8f0 !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .rq-bullet-list,
[data-theme="dark"] .group-bullet-list { border-color: var(--border2, #333333) !important; }
[data-theme="dark"] .bullet-header,
[data-theme="dark"] .rq-bullet-title {
  background: var(--border2, #333333) !important;
  color: #f3f4f6 !important;
  border-bottom-color: #4b5563 !important;
}
[data-theme="dark"] .bullet-item,
[data-theme="dark"] .rq-bullet-item { color: #e2e8f0 !important; border-bottom-color: var(--border2, #333333) !important; }

/* ── Summary completion ── */
[data-theme="dark"] .rq-summary-text,
[data-theme="dark"] .summary-text {
  background: var(--surface, #0d0d0d) !important;
  color: #e2e8f0 !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .rq-sc-bank,
[data-theme="dark"] .dd-bank-col {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .sc-drop,
[data-theme="dark"] .drop-zone {
  background: rgba(99,102,241,.12) !important;
  border-color: #4c4f7a !important;
  color: #a5b4fc !important;
}
[data-theme="dark"] .sc-drop.filled,
[data-theme="dark"] .drop-zone.filled {
  background: rgba(99,102,241,.22) !important;
  border-color: #818cf8 !important;
  color: #c7d2fe !important;
}
[data-theme="dark"] .sc-drop.dragover {
  background: rgba(124,58,237,.2) !important;
  border-color: #7c3aed !important;
}

/* ── Sentence endings (reading) ── */
[data-theme="dark"] .rq-se-endings {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .se-endings-label { color: #9ca3af !important; }
[data-theme="dark"] .se-ending-item,
[data-theme="dark"] .se-chip { color: #d1d5db !important; }

/* ── Matching-options chips ── */
[data-theme="dark"] .rq-chip-bank,
[data-theme="dark"] .chip-bank {
  background: var(--surface, #0d0d0d) !important;
  border-color: #4c4f7a !important;
}
[data-theme="dark"] .drag-chip {
  background: linear-gradient(135deg, #2d2f5a 0%, #3b2d6b 100%) !important;
  border-color: #5b5ea6 !important;
  color: #c4b5fd !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
[data-theme="dark"] .drag-chip:hover {
  background: linear-gradient(135deg, #3b3d7a 0%, #4c2b8a 100%) !important;
  border-color: #7c3aed !important;
}
[data-theme="dark"] .rq-mo-drop {
  background: rgba(99,102,241,.12) !important;
  border-color: #4c4f7a !important;
  color: #a5b4fc !important;
}
[data-theme="dark"] .rq-mo-drop.filled {
  background: rgba(99,102,241,.22) !important;
  border-color: #818cf8 !important;
  color: #c7d2fe !important;
}
[data-theme="dark"] .match-question-row {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .match-q-text { color: #e2e8f0 !important; }
[data-theme="dark"] .match-answer-badge { background: var(--border2, #333333) !important; color: #d1d5db !important; }
[data-theme="dark"] .match-reuse-note {
  background: rgba(234,179,8,.08) !important;
  border-color: rgba(234,179,8,.3) !important;
  color: #fde68a !important;
}

/* ── Word bank heading/options (matching-headings, sentence endings) ── */
[data-theme="dark"] .rq-heading-bank,
[data-theme="dark"] .word-bank-box {
  background: var(--surface, #0d0d0d) !important;
  border-color: var(--border2, #333333) !important;
  color: #e2e8f0 !important;
}

/* ── Review screen (reading & listening) ── */
[data-theme="dark"] .review-qnav-bar,
[data-theme="dark"] .review-q-panel {
  background: var(--surface, #0d0d0d) !important;
  border-bottom-color: var(--border2, #333333) !important;
}
[data-theme="dark"] .review-section-title { color: #f3f4f6 !important; }
[data-theme="dark"] .transcript-body { background: var(--bg, #000000) !important; color: #e2e8f0 !important; }
[data-theme="dark"] .transcript-header { background: var(--surface, #0d0d0d) !important; border-bottom-color: var(--border2, #333333) !important; color: #f3f4f6 !important; }

/* ── Result screen ── */
[data-theme="dark"] .result-card,
[data-theme="dark"] .result-wrap { background: var(--surface, #0d0d0d) !important; border-color: var(--border2, #333333) !important; }
[data-theme="dark"] .result-label  { color: #9ca3af !important; }
[data-theme="dark"] .result-value  { color: #f3f4f6 !important; }

/* ── Modal overlays (submit, exit) ── */
[data-theme="dark"] .modal-overlay .modal-box {
  background: var(--surface, #0d0d0d) !important;
  border: 1px solid var(--border2, #333333) !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .modal-overlay .modal-title,
[data-theme="dark"] .modal-overlay h3 { color: #f3f4f6 !important; }
[data-theme="dark"] .modal-overlay p  { color: #d1d5db !important; }

/* ── Highlight text — keep dark text on yellow bg in dark mode ── */
[data-theme="dark"] .hl { color: #1a1a2e !important; }

/* ══════════════════════════════════════════════════════
   DARK MODE – SPEAKING PAGE
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] .sp-tabs {
  background: var(--surface, #0d0d0d);
  border-bottom-color: var(--border2, #333333);
}
[data-theme="dark"] .sp-tab { color: #9ca3af; }
[data-theme="dark"] .sp-tab:hover  { color: #e53935; }
[data-theme="dark"] .sp-tab.active { color: #e53935; border-bottom-color: #e53935; }

[data-theme="dark"] .practice-controls label { color: #d1d5db; }
[data-theme="dark"] .sp-select {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
  color: #f3f4f6;
}
[data-theme="dark"] .btn-random {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
  color: #d1d5db;
}
[data-theme="dark"] .btn-random:hover { background: var(--border2, #333333); }

[data-theme="dark"] .question-card {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
}
[data-theme="dark"] .question-card .q-label { color: #6b7280; }
[data-theme="dark"] .question-card .q-text  { color: #f0f4ff; }
[data-theme="dark"] .question-card .q-cue {
  background: var(--bg, #000000);
  color: #d1d5db;
}

[data-theme="dark"] .rec-status        { color: #9ca3af; }
[data-theme="dark"] .rec-status.live   { color: #f87171; }
[data-theme="dark"] .transcript-interim { color: #6b7280; }

[data-theme="dark"] .transcript-box {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
}
[data-theme="dark"] .transcript-box .box-label { color: #6b7280; }
[data-theme="dark"] .transcript-textarea {
  background: var(--bg, #000000);
  border-color: var(--border2, #333333);
  color: #f3f4f6;
}
[data-theme="dark"] .transcript-textarea::placeholder { color: #4b5563; }
[data-theme="dark"] .btn-analyze:disabled {
  background: var(--border2, #333333) !important;
  color: #6b7280 !important;
}

[data-theme="dark"] .feedback-box {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
}
[data-theme="dark"] .feedback-box .box-label { color: #6b7280; }
[data-theme="dark"] .feedback-band {
  background: rgba(92,64,0,.3);
  border-color: #78600a;
  color: #fcd34d;
}
[data-theme="dark"] .feedback-corrected {
  background: rgba(20,83,45,.3);
  border-left-color: #16a34a;
  color: #86efac;
}
[data-theme="dark"] .feedback-errors h4,
[data-theme="dark"] .feedback-tips h4 { color: #d1d5db; }
[data-theme="dark"] .error-item {
  background: rgba(127,29,29,.25);
  border-color: #7f1d1d;
}
[data-theme="dark"] .error-tip  { color: #9ca3af; }
[data-theme="dark"] .tip-item   { color: #d1d5db; }

[data-theme="dark"] .btn-retry {
  background: var(--surface, #0d0d0d);
  border-color: var(--border2, #333333);
  color: #d1d5db;
}
[data-theme="dark"] .btn-retry:hover { background: var(--border2, #333333); }

[data-theme="dark"] .no-speech-warning {
  background: rgba(92,64,0,.25);
  border-color: #78600a;
  color: #fcd34d;
}

/* ══════════════════════════════════════════════
   FACEBOOK FLOATING BUTTON
══════════════════════════════════════════════ */
.fb-float-container { position:fixed; width:40px; height:40px; bottom:180px; left:35px; z-index:9999999; }
.fb-float-container a { display:block; }
.fb-float-container span {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:50%; background:#1877F2; position:relative;
  color:#fff; font-size:20px;
  transition:transform .2s;
}
.fb-float-container a:hover span { transform:scale(1.1); }
.fb-float-ring {
  width:50px; height:50px; top:-5px; right:-5px; position:absolute;
  background-color:transparent; border-radius:100%;
  border:2px solid #1877F2; opacity:.5;
  animation:zoomIn_zalo 1s both infinite;
}
.fb-float-fill {
  width:60px; height:60px; top:-10px; right:-10px; position:absolute;
  border-radius:100%; border:2px solid transparent;
  background-color:rgba(24,119,242,.45); opacity:.75;
  animation:pulse_zalo 1s both infinite;
}

/* ══════════════════════════════════════════════
   ZALO FLOATING BUTTON
══════════════════════════════════════════════ */
.zalo-container { position:fixed; width:40px; height:40px; bottom:120px; left:35px; z-index:9999999; }
.zalo-container a { display:block; }
.zalo-container span {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:50%; overflow:hidden; position:relative;
}
.zalo-container img { width:40px; height:40px; object-fit:cover; display:block; }
.cmoz-alo-circle {
  width:50px; height:50px; top:-5px; right:-5px; position:absolute;
  background-color:transparent; border-radius:100%;
  border:2px solid #0068FF; opacity:.5;
  animation:zoomIn_zalo 1s both infinite;
}
.cmoz-alo-circle-fill {
  width:60px; height:60px; top:-10px; right:-10px; position:absolute;
  border-radius:100%; border:2px solid transparent;
  background-color:rgba(0,104,255,.45); opacity:.75;
  animation:pulse_zalo 1s both infinite;
}
@keyframes zoomIn_zalo {
  from { opacity:0; transform:scale3d(.3,.3,.3); }
  50%  { opacity:1; }
}
@keyframes pulse_zalo {
  from, to { transform:scale3d(1,1,1); }
  50%      { transform:scale3d(1.05,1.05,1.05); }
}

/* ── Luyện viết: quick-nav between Giao tiếp / Task 1 / Task 2 / Task 2 Templates ──
   Shared across writing-practice.html, task1-practice.html, task2-practice.html,
   task2-template.html so it only needs to be defined once. */
.t2-tpl-nav-group{display:flex;align-items:center;gap:5px}
.t2-tpl-nav-link{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-weight:600;color:#374151;text-decoration:none;transition:all .15s;white-space:nowrap;line-height:1;flex-shrink:0}
.t2-tpl-nav-link:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}
[data-theme="dark"] .t2-tpl-nav-link{border-color:var(--border2, #333333);color:#9ca3af}
[data-theme="dark"] .t2-tpl-nav-link:hover{border-color:#818cf8;color:#a5b4fc;background:#1e1b4b}
@media(max-width:540px){.t2-tpl-nav-link span{display:none}.t2-tpl-nav-link{padding:6px 9px}}