/* ================================================================
   NIQ Writing T1 — Shared Stylesheet
   Dùng chung cho: index.html + tasks/*.html
   ================================================================ */

:root {
  /* NIQ accent palette (đỏ - giống Reading) */
  --niq-accent: #a83232;
  --niq-accent-soft: #c66058;
  --niq-accent-bg: #f3e6e1;

  /* File mẫu palette (chart) */
  --niq-navy: #0F1B3C;
  --niq-amber: #F5A623;
  --niq-amber-2: #C8842B;
  --niq-amber-3: #854F0B;

  /* NIQ ink + paper */
  --niq-paper: #FFFFFF;
  --niq-bg: #FAF7F2;
  --niq-bg-2: #F1EFE8;
  --niq-ink: #2C2C2A;
  --niq-ink-soft: #5F5E5A;
  --niq-ink-mute: #888780;
  --niq-line: rgba(0,0,0,0.08);
  --niq-line-soft: rgba(0,0,0,0.05);

  /* States */
  --niq-green-bg: #d8e8c8;
  --niq-green-mid: #a8c474;
  --niq-green-dark: #3B6D11;
  --niq-amber-bg: #f5e2b8;
  --niq-amber-mid: #d8b85f;
  --niq-amber-dark: #854F0B;
  --niq-red-bg: #f5d0cd;
  --niq-red-mid: #d68a85;
  --niq-red-dark: #8a2e29;

  /* Layout */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(15,27,60,0.04), 0 4px 12px rgba(15,27,60,0.06);
  --shadow-md: 0 4px 12px rgba(15,27,60,0.08), 0 12px 32px rgba(15,27,60,0.12);

  /* Fonts */
  --f-display: Georgia, 'Newsreader', serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', 'Menlo', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--f-body);
  background: var(--niq-bg);
  color: var(--niq-ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; font-size: 16px; }
textarea { resize: vertical; }

/* ============ NIQ HEADER (universal) ============ */
.niq-app-header {
  background: var(--niq-navy);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.niq-logo {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1;
}
.niq-logo .ni { color: #FFFFFF; }
.niq-logo .q { color: var(--niq-amber); }
.niq-logo-tag {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.niq-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.niq-back-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); }
.niq-back-btn svg { width: 12px; height: 12px; }

/* ============ TASK CONTAINER ============ */
.niq-task-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px;
}
.niq-task-card {
  background: var(--niq-bg);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  border: 0.5px solid var(--niq-line);
  margin-bottom: 16px;
}
.niq-task-card-head {
  background: var(--niq-navy);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.niq-task-card-body {
  padding: 24px;
}
.niq-task-eyebrow {
  font-size: 10px;
  color: var(--niq-amber-2);
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 4px;
}
.niq-task-title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--niq-navy);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.niq-task-sub {
  font-size: 13px;
  color: var(--niq-ink-soft);
  font-style: italic;
}
.niq-task-prompt {
  background: var(--niq-paper);
  border-left: 3px solid var(--niq-accent);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.65;
  color: var(--niq-ink);
  margin: 16px 0;
}
.niq-task-prompt p { margin: 0 0 6px; }
.niq-task-prompt p:last-child { margin-bottom: 0; }

/* ============ SAMPLE ANSWER + RECALL ============ */
.niq-sample-section {
  background: var(--niq-paper);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  border: 0.5px solid var(--niq-line);
  margin-bottom: 16px;
}
.niq-sample-head {
  background: var(--niq-bg);
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--niq-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.niq-sample-head-title {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--niq-navy);
  font-weight: 600;
}
.niq-sample-head-sub {
  font-size: 11px;
  color: var(--niq-amber-2);
  letter-spacing: 1.5px;
  font-weight: 500;
  text-transform: uppercase;
}
.niq-sample-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.niq-ctrl-btn {
  padding: 6px 12px;
  border: 1px solid var(--niq-line);
  border-radius: var(--r-sm);
  background: var(--niq-paper);
  color: var(--niq-ink-soft);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.niq-ctrl-btn:hover { border-color: var(--niq-accent); color: var(--niq-accent); }
.niq-ctrl-btn.primary { background: var(--niq-accent); color: white; border-color: var(--niq-accent); }
.niq-ctrl-btn.primary:hover { background: #8f2828; color: white; }
.niq-ctrl-btn.success { background: var(--niq-green-dark); color: white; border-color: var(--niq-green-dark); }
.niq-ctrl-btn.success:hover { background: #2c530c; color: white; }

.niq-sample-body { padding: 18px 20px 22px; }

.niq-sample-part {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--niq-line);
  border-radius: var(--r-md);
  background: var(--niq-bg);
}
.niq-sample-part:last-child { margin-bottom: 0; }
.niq-part-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--niq-accent);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.niq-part-title .badge {
  background: var(--niq-accent);
  color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-family: var(--f-mono);
  font-weight: 600;
}

.niq-recall-row {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--niq-line);
}
.niq-recall-row:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.niq-recall-prompt {
  display: block;
  font-size: 13px;
  color: var(--niq-ink-soft);
  margin-bottom: 6px;
  font-style: italic;
}
.niq-recall-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--niq-line);
  border-radius: var(--r-sm);
  background: var(--niq-paper);
  font-size: 14px;
  color: var(--niq-ink);
  line-height: 1.5;
  min-height: 56px;
  transition: border-color 0.15s;
  outline: none;
  font-family: var(--f-body);
}
.niq-recall-input:focus { border-color: var(--niq-accent); }
.niq-recall-input.matched { border-color: var(--niq-green-mid); background: var(--niq-green-bg); }
.niq-recall-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 10px;
}
.niq-recall-percent {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--niq-ink-mute);
}
.niq-recall-percent.high { color: var(--niq-green-dark); }
.niq-recall-percent.mid { color: var(--niq-amber-dark); }
.niq-recall-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--niq-line);
  border-radius: var(--r-sm);
  color: var(--niq-ink-soft);
  background: var(--niq-paper);
  transition: all 0.15s;
  white-space: nowrap;
}
.niq-recall-btn:hover { border-color: var(--niq-accent); color: var(--niq-accent); }
.niq-recall-answer {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--niq-paper);
  border-left: 3px solid var(--niq-green-mid);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--niq-ink);
  display: none;
}
.niq-recall-answer.visible { display: block; }
.niq-recall-answer .vn-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--niq-ink-mute);
  font-style: italic;
  border-top: 1px dashed var(--niq-line);
  padding-top: 6px;
}

/* ============ THINKING GUIDE (collapsible) ============ */
.niq-guide-section {
  background: var(--niq-paper);
  border-radius: var(--r-lg);
  border: 0.5px solid var(--niq-line);
  margin-bottom: 16px;
  overflow: hidden;
}
.niq-guide-head {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--niq-navy) 0%, #1a2a52 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: filter 0.15s;
}
.niq-guide-head:hover { filter: brightness(1.1); }
.niq-guide-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.niq-guide-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--niq-amber);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.niq-guide-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.niq-guide-eyebrow {
  font-size: 9px;
  color: var(--niq-amber);
  letter-spacing: 1.8px;
  font-weight: 600;
  text-transform: uppercase;
}
.niq-guide-title {
  font-family: var(--f-display);
  font-size: 15px;
  color: #FFFFFF;
  font-weight: 500;
  line-height: 1.2;
}
.niq-guide-chevron {
  width: 16px; height: 16px;
  color: rgba(255,255,255,0.7);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.niq-guide-section.open .niq-guide-chevron {
  transform: rotate(180deg);
}
.niq-guide-body {
  display: none;
  padding: 22px 24px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--niq-ink);
}
.niq-guide-section.open .niq-guide-body { display: block; }

/* ============ RICH CONTENT (dùng trong guide-body và bất kỳ chỗ nào) ============ */
.niq-guide-body h3,
.niq-guide-body .niq-h3 {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--niq-navy);
  font-weight: 600;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.niq-guide-body h3:first-child,
.niq-guide-body .niq-h3:first-child { margin-top: 0; }
.niq-guide-body h3 .num,
.niq-guide-body .niq-h3 .num {
  background: var(--niq-accent);
  color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-family: var(--f-mono);
  font-weight: 600;
  flex-shrink: 0;
}

.niq-guide-body h4,
.niq-guide-body .niq-h4 {
  font-size: 13px;
  color: var(--niq-amber-2);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 14px 0 6px;
}

.niq-guide-body p { margin: 0 0 10px; }
.niq-guide-body ul, .niq-guide-body ol { margin: 8px 0 12px; padding-left: 22px; }
.niq-guide-body li { margin-bottom: 6px; }
.niq-guide-body strong { color: var(--niq-navy); font-weight: 600; }
.niq-guide-body em { color: var(--niq-accent); font-style: italic; }
.niq-guide-body code, .niq-guide-body .code {
  font-family: var(--f-mono);
  background: var(--niq-bg);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--niq-accent);
  border: 0.5px solid var(--niq-line);
}

/* CALLOUT BOXES — info / tip / warning / vocab */
.niq-callout {
  padding: 12px 16px;
  border-radius: var(--r-md);
  border-left: 4px solid;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}
.niq-callout-head {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.niq-callout p { margin: 0 0 6px; }
.niq-callout p:last-child { margin-bottom: 0; }

.niq-callout.info {
  background: #e6efff;
  border-color: #4670c8;
}
.niq-callout.info .niq-callout-head { color: #2a4a8c; }

.niq-callout.tip {
  background: var(--niq-green-bg);
  border-color: var(--niq-green-dark);
}
.niq-callout.tip .niq-callout-head { color: var(--niq-green-dark); }

.niq-callout.warn {
  background: var(--niq-amber-bg);
  border-color: var(--niq-amber-dark);
}
.niq-callout.warn .niq-callout-head { color: var(--niq-amber-dark); }

.niq-callout.danger {
  background: var(--niq-red-bg);
  border-color: var(--niq-red-dark);
}
.niq-callout.danger .niq-callout-head { color: var(--niq-red-dark); }

/* VOCAB BOX — gom nhóm từ vựng key */
.niq-vocab-box {
  background: var(--niq-bg);
  border: 1px dashed var(--niq-amber-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 12px 0;
}
.niq-vocab-box-title {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--niq-amber-2);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.niq-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 12px;
}
.niq-vocab-chip {
  font-size: 13px;
  padding: 4px 8px;
  background: var(--niq-paper);
  border: 0.5px solid var(--niq-line);
  border-radius: var(--r-sm);
  color: var(--niq-ink);
}
.niq-vocab-chip b { color: var(--niq-accent); font-weight: 600; }

/* HIGHLIGHT INLINE */
.niq-hl-key {
  background: linear-gradient(180deg, transparent 60%, rgba(245,166,35,0.35) 60%);
  padding: 0 2px;
  font-weight: 500;
}
.niq-hl-warn {
  background: linear-gradient(180deg, transparent 60%, rgba(168,50,50,0.18) 60%);
  padding: 0 2px;
}

/* SIMPLE TABLE */
.niq-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px 0;
  background: var(--niq-paper);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--niq-line);
}
.niq-mini-table th, .niq-mini-table td {
  padding: 8px 12px;
  border: 1px solid var(--niq-line-soft);
  text-align: left;
}
.niq-mini-table th {
  background: var(--niq-bg);
  font-weight: 600;
  font-size: 12px;
  color: var(--niq-navy);
  letter-spacing: 0.3px;
}
.niq-mini-table td:first-child { font-weight: 500; color: var(--niq-navy); }

/* ICON LIST — list with leading icon */
.niq-icon-list { list-style: none; padding-left: 0; margin: 10px 0; }
.niq-icon-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}
.niq-icon-list li::before {
  content: '→';
  position: absolute;
  left: 6px;
  color: var(--niq-accent);
  font-weight: 700;
}
.niq-icon-list.check li::before { content: '✓'; color: var(--niq-green-dark); }
.niq-icon-list.cross li::before { content: '✗'; color: var(--niq-red-dark); }
.niq-icon-list.star li::before { content: '★'; color: var(--niq-amber); }

/* ============ TIMER ============ */
.niq-timer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.niq-timer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: var(--niq-paper);
  border: 1px solid var(--niq-line);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--niq-ink-soft);
  transition: all 0.15s;
}
.niq-timer-toggle:hover { border-color: var(--niq-accent); }
.niq-timer-toggle.running { background: var(--niq-accent); color: white; border-color: var(--niq-accent); }
.niq-timer-toggle.warning { background: var(--niq-amber-mid); color: var(--niq-amber-dark); border-color: var(--niq-amber-dark); }
.niq-timer-toggle svg { width: 12px; height: 12px; }

/* ============ TOAST ============ */
.niq-toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--niq-navy);
  color: white;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 200;
  transition: transform 0.3s;
  max-width: 90vw;
}
.niq-toast.show { transform: translateX(-50%) translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  .niq-task-shell { padding: 10px; }
  .niq-task-card-body { padding: 16px; }
  .niq-task-title { font-size: 18px; }
  .niq-sample-body { padding: 14px 14px 18px; }
  .niq-sample-part { padding: 12px 14px; }
  .niq-app-header { padding: 12px 14px; }
}



  /* ============ INDEX-SPECIFIC ============ */
  .login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--niq-bg);
  }
  .login-card {
    background: var(--niq-paper);
    border: 0.5px solid var(--niq-line);
    border-radius: var(--r-xl);
    padding: 40px 32px;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-md);
    text-align: center;
  }
  .login-logo {
    font-family: var(--f-display);
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
  }
  .login-logo .ni { color: var(--niq-navy); }
  .login-logo .q { color: var(--niq-amber); }
  .login-tag {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2.5px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .login-title {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--niq-navy);
    margin-bottom: 6px;
  }
  .login-sub {
    font-size: 13px;
    color: var(--niq-ink-soft);
    margin-bottom: 24px;
  }
  .login-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--niq-line);
    border-radius: var(--r-md);
    background: var(--niq-bg);
    font-size: 16px;
    color: var(--niq-ink);
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.15s;
  }
  .login-input:focus { border-color: var(--niq-accent); background: var(--niq-paper); }
  .login-btn {
    width: 100%;
    padding: 14px;
    background: var(--niq-accent);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--r-md);
    margin-top: 12px;
    transition: background 0.15s;
  }
  .login-btn:hover { background: #8f2828; }
  .login-error {
    color: var(--niq-red-dark);
    font-size: 13px;
    margin-top: 10px;
    min-height: 18px;
  }
  .login-help {
    margin-top: 20px;
    font-size: 11px;
    color: var(--niq-ink-mute);
  }

  /* App body */
  .app-screen { display: none; }
  .app-screen.active { display: block; }

  .top-stats {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .top-stats .pct { color: var(--niq-amber); font-weight: 600; }
  .top-actions { display: flex; gap: 8px; align-items: center; }

  .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
  }

  /* TRACKER */
  .tracker-section {
    background: var(--niq-paper);
    border: 0.5px solid var(--niq-line);
    border-radius: var(--r-lg);
    padding: 22px 14px 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
  }
  .tracker-title {
    font-size: 11px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
  }
  .tracker-rail {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .tracker-rail::-webkit-scrollbar { height: 4px; }
  .tracker-rail::-webkit-scrollbar-thumb { background: var(--niq-line); border-radius: 2px; }
  .tracker-track {
    display: flex;
    align-items: flex-start;
    min-width: max-content;
    padding: 0 8px;
  }
  .station {
    flex-shrink: 0;
    width: 100px;
    cursor: pointer;
    text-align: center;
    position: relative;
  }
  .station-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--niq-line);
    background: var(--niq-paper);
    margin: 0 auto;
    z-index: 2;
    position: relative;
    transition: transform 0.15s;
  }
  .station:hover .station-dot { transform: scale(1.15); }
  .station.active .station-dot {
    border-color: var(--niq-accent);
    box-shadow: 0 0 0 4px var(--niq-accent-bg);
  }
  .station[data-state="pass"] .station-dot { background: var(--niq-green-mid); border-color: var(--niq-green-dark); }
  .station[data-state="progress"] .station-dot { background: var(--niq-amber-mid); border-color: var(--niq-amber-dark); }
  .station[data-state="none"] .station-dot { background: var(--niq-paper); border-color: var(--niq-line); }
  .station-line {
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: var(--niq-line);
    z-index: 1;
  }
  .station:last-child .station-line { display: none; }
  .station-label {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--niq-ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
    width: 96px;
    margin-left: auto;
    margin-right: auto;
  }
  .station.active .station-label { color: var(--niq-accent); }
  .station-num {
    font-family: var(--f-mono);
    font-size: 9px;
    color: var(--niq-ink-mute);
    margin-top: 2px;
  }
  .station-count {
    margin-top: 2px;
    font-size: 9px;
    color: var(--niq-ink-mute);
    font-family: var(--f-mono);
  }

  /* CHẶNG HEADER */
  .chang-header {
    background: var(--niq-paper);
    border: 0.5px solid var(--niq-line);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: 16px;
  }
  .chang-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .chang-num {
    background: var(--niq-accent);
    color: white;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .chang-title {
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--niq-navy);
    line-height: 1.2;
    margin: 0;
  }
  .chang-tagline {
    font-size: 13px;
    color: var(--niq-ink-soft);
    margin-top: 6px;
    font-style: italic;
  }

  /* TASK LIST */
  .tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }
  .task-card {
    background: var(--niq-paper);
    border: 1.5px solid var(--niq-line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 110px;
    text-decoration: none;
    color: inherit;
  }

/* ---------- 3-TIER TAXONOMY SYSTEM ---------- */
.niq-tier-section {
  margin: 28px 0 0 0;
}
.niq-tier-section:first-child {
  margin-top: 0;
}
.niq-tier-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-left: 4px solid #2E5C8A;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(46,92,138,0.08), transparent);
  border-radius: 0 6px 6px 0;
}
.niq-tier-label {
  font-size: 14px;
  font-weight: 800;
  color: #1F1E1B;
  letter-spacing: -0.2px;
}
.niq-tier-count {
  font-size: 11px;
  color: #888780;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.niq-tier-section.niq-tier-practice .niq-tier-header {
  background: linear-gradient(90deg, rgba(184,115,10,0.08), transparent);
}
.niq-tier-section.niq-tier-challenge .niq-tier-header {
  background: linear-gradient(90deg, rgba(123,45,142,0.08), transparent);
}

.niq-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  margin: 6px 0 0 0;
  text-transform: uppercase;
}
.niq-tier-badge.tier-core {
  background: #E8F0F9;
  color: #2E5C8A;
  border: 1px solid #B8D0E8;
}
.niq-tier-badge.tier-practice {
  background: #FFF4ED;
  color: #B8730A;
  border: 1px solid #F0DDB8;
}
.niq-tier-badge.tier-challenge {
  background: #F4E8F8;
  color: #7B2D8E;
  border: 1px solid #D8B8E0;
}

.niq-task-summary {
  font-size: 11px;
  color: #5F5E5A;
  font-style: italic;
  margin: 6px 0 4px 0;
  line-height: 1.4;
}

.niq-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px 0;
}
.niq-tech-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: #FAFAF7;
  color: #2E5C8A;
  border: 1px solid #E8E4D8;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

  .task-card:hover {
    border-color: var(--niq-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  .task-card[data-state="pass"] {
    background: linear-gradient(180deg, var(--niq-paper), var(--niq-green-bg));
    border-color: var(--niq-green-mid);
  }
  .task-card[data-state="progress"] {
    background: linear-gradient(180deg, var(--niq-paper), var(--niq-amber-bg));
    border-color: var(--niq-amber-mid);
  }
  .task-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .task-num {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--niq-ink-mute);
    font-weight: 600;
  }
  .task-pill {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .task-pill[data-state="pass"] { background: var(--niq-green-bg); color: var(--niq-green-dark); }
  .task-pill[data-state="progress"] { background: var(--niq-amber-bg); color: var(--niq-amber-dark); }
  .task-pill[data-state="none"] { background: var(--niq-bg-2); color: var(--niq-ink-mute); }
  .task-pill.placeholder { background: rgba(168,50,50,0.08); color: var(--niq-accent); }
  .task-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--niq-navy);
    line-height: 1.4;
    flex-grow: 1;
    font-family: var(--f-display);
  }
  .task-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--niq-ink-mute);
  }

  /* VOCAB CHẶNG */
  .vocab-intro {
    background: var(--niq-bg);
    border-left: 3px solid var(--niq-accent);
    padding: 14px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--niq-ink-soft);
    margin-bottom: 16px;
    line-height: 1.6;
  }
  .vocab-group {
    border: 1px solid var(--niq-line);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--niq-paper);
  }
  .vocab-group-head {
    padding: 14px 16px;
    background: var(--niq-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background 0.15s;
  }
  .vocab-group-head:hover { background: var(--niq-bg-2); }
  .vocab-group-title {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--niq-navy);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .vocab-group-title em {
    color: var(--niq-ink-mute);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    font-family: var(--f-body);
  }
  .chevron {
    width: 12px; height: 12px;
    transition: transform 0.2s;
    color: var(--niq-ink-mute);
  }
  .vocab-group.open .chevron { transform: rotate(90deg); }
  .vocab-group-count {
    font-size: 11px;
    color: var(--niq-ink-mute);
    font-family: var(--f-mono);
  }
  .vocab-group-body { display: none; padding: 8px 12px 12px; }
  .vocab-group.open .vocab-group-body { display: block; }
  .vocab-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--niq-line-soft);
    display: grid;
    gap: 6px;
  }
  .vocab-item:last-child { border-bottom: none; }
  .vocab-item-en {
    font-weight: 600;
    color: var(--niq-navy);
    font-size: 14px;
  }
  .vocab-item-vn {
    font-size: 12px;
    color: var(--niq-ink-soft);
    font-style: italic;
  }
  .vocab-item-eg {
    font-size: 13px;
    color: var(--niq-ink-soft);
    line-height: 1.5;
    background: var(--niq-bg);
    padding: 8px 10px;
    border-radius: var(--r-sm);
  }
  .vocab-item-eg b { color: var(--niq-accent); font-weight: 600; }

  .empty-stage {
    text-align: center;
    padding: 40px 20px;
    color: var(--niq-ink-mute);
    background: var(--niq-paper);
    border: 1px dashed var(--niq-line);
    border-radius: var(--r-md);
    font-size: 13px;
  }

  @media (max-width: 640px) {
    .container { padding: 12px; }
    .chang-header { padding: 16px 18px; }
    .chang-title { font-size: 20px; }
    .login-card { padding: 32px 22px; }
    .login-logo { font-size: 44px; }
  }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }
  .chart-sub {
    font-size: 13px;
    color: var(--niq-ink-soft);
    font-style: italic;
  }

  /* Decoration toggle */
  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px;
    background: #FFFFFF; font-size: 12px; color: #2C2C2A; cursor: pointer;
    transition: all 0.2s; font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; pointer-events: none; }

  /* Series toggle - dùng SVG xe */
  .niq-series-toggle {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px;
    background: #FFFFFF; cursor: pointer; transition: all 0.25s; min-width: 88px;
  }
  .niq-series-toggle:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-series-toggle.disabled { opacity: 0.35; background: #F1EFE8; }
  .niq-series-toggle.disabled:hover { transform: none; box-shadow: none; }
  .niq-series-toggle .car-svg { transition: filter 0.25s; }
  .niq-series-toggle.disabled .car-svg { filter: grayscale(1); }
  .niq-series-label { font-size: 11px; color: #2C2C2A; font-weight: 500; }
  .niq-series-toggle.disabled .niq-series-label { text-decoration: line-through; color: #888780; }

  /* DECORATION ANIMATIONS (v3 simplified) */
  .niq-house-bob { animation: niqHouseBob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes niqHouseBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .niq-cloud-drift { animation: niqDrift 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
  }
  .niq-wheel-spin-mini { animation: niqSpin 0.9s linear infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }
  .chart-sub {
    font-size: 13px;
    color: var(--niq-ink-soft);
    font-style: italic;
  }

  /* Decoration toggles */
  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  /* Legend cards */
  .niq-legend-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease; flex: 1; min-width: 130px;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .niq-legend-label { font-size: 13px; font-weight: 500; color: #2C2C2A; }

  /* Decoration animations */
  @keyframes niqSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  .sway { animation: niqSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .cloud-drift { animation: niqDrift 8s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  /* Decoration toggles */
  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  /* Legend cards (4 cards in 2 columns) */
  .niq-legend-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .niq-legend-label { font-size: 13px; font-weight: 500; color: #2C2C2A; }

  /* Decoration animations */
  @keyframes niqSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  .sway { animation: niqSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 28px; height: 28px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 14px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqHouseBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  .house-bob { animation: niqHouseBob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 28px; height: 28px; flex-shrink: 0; }
  .niq-legend-label { font-size: 12px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqTurbine { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes niqLeafSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .sun-rays { animation: niqSunPulse 2.8s ease-in-out infinite reverse; transform-box: fill-box; }
  .turbine-spin { animation: niqTurbine 4s linear infinite; transform-box: fill-box; }
  .leaf-sway { animation: niqLeafSway 3.5s ease-in-out infinite; transform-box: fill-box; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .niq-legend-label { font-size: 13px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSteamRise {
    0% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-6px) scale(1.05); opacity: 0.7; }
    100% { transform: translateY(-12px) scale(1.1); opacity: 0; }
  }
  @keyframes niqLeafSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
  @keyframes niqWaterFlow {
    0% { transform: translateY(0); opacity: 0.7; }
    100% { transform: translateY(8px); opacity: 0; }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .steam-rise { animation: niqSteamRise 3.5s ease-out infinite; transform-box: fill-box; }
  .leaf-sway { animation: niqLeafSway 3.5s ease-in-out infinite; transform-box: fill-box; }
  .water-flow { animation: niqWaterFlow 1.8s ease-in infinite; transform-box: fill-box; }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }
  .chart-sub {
    font-size: 13px;
    color: var(--niq-ink-soft);
    font-style: italic;
  }

  /* Decoration toggles */
  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px;
    background: #FFFFFF; font-size: 12px; color: #2C2C2A; cursor: pointer;
    transition: all 0.2s; font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; pointer-events: none; }

  /* Series toggle - dùng icon thay vì xe */
  .niq-series-toggle {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px;
    background: #FFFFFF; cursor: pointer; transition: all 0.25s; min-width: 88px;
  }
  .niq-series-toggle:hover { border-color: #C8842B; transform: translateY(-2px); }
  .niq-series-toggle.disabled { opacity: 0.35; background: #F1EFE8; }
  .niq-series-toggle.disabled:hover { transform: none; }
  .niq-series-toggle .icon-svg { transition: filter 0.25s; }
  .niq-series-toggle.disabled .icon-svg { filter: grayscale(1); }
  .niq-series-label { font-size: 11px; color: #2C2C2A; font-weight: 500; }
  .niq-series-toggle.disabled .niq-series-label { text-decoration: line-through; color: #888780; }

  /* DECORATION ANIMATIONS */
  .niq-cart-roll { animation: niqCartRoll 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqCartRoll {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(4px) rotate(2deg); }
    75% { transform: translateX(-4px) rotate(-2deg); }
  }
  .niq-coin-spin { animation: niqCoinSpin 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqCoinSpin {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
  }
  .niq-house-bob { animation: niqHouseBob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes niqHouseBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .niq-cloud-drift { animation: niqDrift 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
  }
  .niq-leaf-sway { animation: niqLeafSway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes niqLeafSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(4deg); }
  }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 38px; height: 38px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 14px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqBallBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .ball-bounce { animation: niqBallBounce 1.6s ease-in-out infinite; transform-box: fill-box; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled .niq-swatch { opacity: 0.4; }
  .niq-swatch { width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 14px; font-weight: 500; color: #2C2C2A; }

  /* Multicultural decoration animations */
  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqLanternFlicker {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    25% { transform: scale(1.08); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.75; }
    75% { transform: scale(1.05); opacity: 0.95; }
  }
  @keyframes niqTorchFlame {
    0%, 100% { transform: scale(1, 1) rotate(-2deg); }
    33% { transform: scale(1.1, 1.15) rotate(2deg); }
    66% { transform: scale(0.95, 1.05) rotate(-1deg); }
  }
  @keyframes niqRisingSun {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.12); opacity: 0.75; }
  }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .lantern-flicker { animation: niqLanternFlicker 1.6s ease-in-out infinite; transform-box: fill-box; }
  .torch-flame { animation: niqTorchFlame 0.8s ease-in-out infinite; transform-box: fill-box; }
  .rising-sun { animation: niqRisingSun 3s ease-in-out infinite; transform-box: fill-box; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled .niq-legend-icon { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .niq-legend-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; color: #2C2C2A; letter-spacing: 0.5px; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes niqLeafFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(35px) translateX(8px) rotate(180deg); opacity: 0.5; }
    100% { transform: translateY(70px) translateX(-3px) rotate(360deg); opacity: 0; }
  }
  @keyframes niqStreetlight {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.15); }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .leaf-fall { animation: niqLeafFall 5s ease-in infinite; transform-box: fill-box; }
  .streetlight-pulse { animation: niqStreetlight 2.8s ease-in-out infinite; transform-box: fill-box; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 8px;
    background: #FFFFFF; font-size: 12px; color: #2C2C2A; cursor: pointer;
    transition: all 0.2s; font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; pointer-events: none; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 13px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqShipBob {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50% { transform: translateY(-2px) rotate(0.5deg); }
  }
  @keyframes niqWaveRoll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
  }
  @keyframes niqPlaneFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(20px) translateY(-2px); opacity: 0.7; }
    100% { transform: translateX(40px) translateY(0); opacity: 0; }
  }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .ship-bob { animation: niqShipBob 4s ease-in-out infinite; transform-box: fill-box; }
  .wave-roll { animation: niqWaveRoll 3.5s ease-in-out infinite; transform-box: fill-box; }
  .plane-fly { animation: niqPlaneFly 6s ease-in-out infinite; transform-box: fill-box; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 38px; height: 38px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 14px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes niqLampGlow {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .lamp-glow { animation: niqLampGlow 2.5s ease-in-out infinite; transform-box: fill-box; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 38px; height: 38px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 14px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes niqLampGlow {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .lamp-glow { animation: niqLampGlow 2.5s ease-in-out infinite; transform-box: fill-box; }



  /* CHART CARD */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 34px; height: 34px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 13px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }



  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }

  .niq-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 8px; background: #FFFFFF; font-size: 12px;
    color: #2C2C2A; cursor: pointer; transition: all 0.2s;
    font-family: inherit; white-space: nowrap;
  }
  .niq-toggle-btn:hover { background: #FAF7F2; border-color: #C8842B; }
  .niq-toggle-btn.active { background: #0F1B3C; color: #FFFFFF; border-color: #0F1B3C; }
  .niq-decoration { transition: opacity 0.5s ease; }
  .niq-decoration.hidden { opacity: 0; }

  .niq-legend-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px;
    cursor: pointer; transition: all 0.25s ease;
  }
  .niq-legend-card:hover { border-color: #C8842B; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(200,132,43,0.18); }
  .niq-legend-card.disabled { background: #F1EFE8; opacity: 0.55; }
  .niq-legend-card.disabled .niq-legend-label { text-decoration: line-through; color: #888780; }
  .niq-legend-card.disabled svg { filter: grayscale(1); opacity: 0.5; }
  .niq-legend-icon { width: 30px; height: 30px; flex-shrink: 0; }
  .niq-legend-label { font-family: Georgia, serif; font-size: 12px; font-weight: 500; color: #2C2C2A; }

  @keyframes niqDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  @keyframes niqSunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  @keyframes niqBirdFly {
    0% { transform: translateX(0) translateY(0); opacity: 0.5; }
    50% { transform: translateX(12px) translateY(-3px); opacity: 0.7; }
    100% { transform: translateX(24px) translateY(0); opacity: 0; }
  }
  @keyframes niqTreeSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes niqLeafSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }
  @keyframes niqTorchFlicker {
    0%, 100% { transform: scale(1, 1) rotate(-2deg); opacity: 0.95; }
    33% { transform: scale(1.1, 1.15) rotate(2deg); opacity: 1; }
    66% { transform: scale(0.95, 1.05) rotate(-1deg); opacity: 0.9; }
  }
  @keyframes niqRisingSun {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 0.85; }
  }
  @keyframes niqCherryFlutter {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(15px) translateX(5px) rotate(180deg); opacity: 0.5; }
    100% { transform: translateY(30px) translateX(-3px) rotate(360deg); opacity: 0; }
  }

  .cloud-drift { animation: niqDrift 9s ease-in-out infinite; transform-box: fill-box; }
  .sun-pulse { animation: niqSunPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .bird-fly { animation: niqBirdFly 4s ease-in-out infinite; transform-box: fill-box; }
  .tree-sway { animation: niqTreeSway 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .leaf-sway { animation: niqLeafSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  .torch-flicker { animation: niqTorchFlicker 0.8s ease-in-out infinite; transform-box: fill-box; }
  .rising-sun { animation: niqRisingSun 3s ease-in-out infinite; transform-box: fill-box; }
  .cherry-flutter { animation: niqCherryFlutter 5s ease-in infinite; transform-box: fill-box; }



  /* ============ TASK-SPECIFIC: CHART CARD ============ */
  .chart-card {
    background: var(--niq-bg);
    border-radius: var(--r-lg);
    padding: 0;
    overflow: hidden;
    border: 0.5px solid var(--niq-line);
    margin-bottom: 16px;
  }
  .chart-card-head {
    background: var(--niq-navy);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-card-body { padding: 24px; }

  .chart-eyebrow {
    font-size: 10px;
    color: var(--niq-amber-2);
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .chart-title {
    font-family: var(--f-display);
    font-size: 22px;
    color: var(--niq-navy);
    font-weight: 500;
    line-height: 1.25;
  }
  .chart-sub {
    font-size: 13px;
    color: var(--niq-ink-soft);
    font-style: italic;
  }

  /* ===== Bee diagram styles (giữ nguyên từ file gốc) ===== */
  .niq-stage-node { transition: opacity 0.4s ease; cursor: pointer; }
  .niq-stage-node.dimmed { opacity: 0.4; }
  .niq-stage-active circle.stage-bg { fill: #FAEEDA; stroke-width: 3.5; }
  .niq-stage-active .stage-num-circle { fill: #C8842B; }
  .niq-stage-active .stage-num-text { fill: #FFFFFF; }
  circle.stage-bg { transition: fill 0.3s, stroke-width 0.3s; }
  .stage-num-circle, .stage-num-text { transition: fill 0.3s; }

  .niq-bee-fly { animation: niqFly 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqFly {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, -4px) rotate(-2deg); }
    50% { transform: translate(2px, -6px) rotate(1deg); }
    75% { transform: translate(-1px, -3px) rotate(-1deg); }
  }
  .niq-wing { animation: niqWingFlap 0.12s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes niqWingFlap {
    0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.85; }
    50% { transform: scaleY(0.7) scaleX(0.92); opacity: 0.55; }
  }
  .niq-egg-pulse { animation: niqEggBreath 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqEggBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
  .niq-larva-wiggle { animation: niqLarvaMove 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes niqLarvaMove {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-1px); }
  }
  .niq-pupa-glow { animation: niqPupaGlow 3s ease-in-out infinite; }
  @keyframes niqPupaGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(245,166,35,0)); }
    50% { filter: drop-shadow(0 0 6px rgba(245,166,35,0.7)); }
  }
  .niq-emerge-shimmer { animation: niqShimmer 2.5s ease-in-out infinite; }
  @keyframes niqShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
  }
  .niq-flower-sway { animation: niqSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
  @keyframes niqSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }



@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700;800&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{
  /* NIQ LIGHT THEME — converted from dark vocab */
  --bg:#FAF7F2;          /* page bg */
  --b2:#FFFFFF;          /* section bg */
  --b3:#F4F1EA;          /* card bg */
  --b4:#E8E2D4;          /* highlight bg */
  --b5:#D8CFB8;          /* deeper bg */

  /* Section accents — kept distinct for semantic categorization, all on light */
  --cy:#3B6D11;          /* synonyms — NIQ green */
  --cy2:#2E5510;
  --cyd:#E0EDD0;         /* synonym section bg */

  --gd:#854F0B;          /* vietnamese — NIQ amber dark */
  --gdd:#FAEED2;

  --bl:#0F1B3C;          /* collocations — NIQ navy */
  --bld:#DDE3F0;

  --rd:#a83232;          /* antonyms — NIQ red */
  --rdd:#F5DCD9;

  --pp:#5B3FA3;          /* nominalisation — violet */
  --ppd:#E5DEF5;

  --pk:#C8842B;          /* paraphrase — NIQ amber-2 */
  --pkd:#F8E4C5;

  --or:#A8651A;          /* mnemonic — bolder amber for highlights on light */
  --ord:#F5E2B8;

  --tx:#2C2C2A;          /* body text — ink dark */
  --t2:#5F5E5A;          /* secondary */
  --t3:#888780;          /* tertiary */

  --bd:rgba(0,0,0,0.08);
  --bd2:rgba(0,0,0,0.12);
  --r:10px;

  /* NIQ accent (for header bar etc.) */
  --niq-accent:#a83232;
  --niq-navy:#0F1B3C;
  --niq-amber:#F5A623;
}
.vocab-scope, .vocab-scope *{margin:0;padding:0;box-sizing:border-box}
.vocab-scope{background:var(--bg);color:var(--tx);font-family:'DM Sans',sans-serif;line-height:1.7;font-size:14.5px;min-height:100vh;}
.vocab-scope ::selection{background:var(--niq-amber);color:#000}

/* HEADER (vocab system intro) — light cream gradient with navy accent border */
.hd{background:linear-gradient(180deg,#FAF7F2,#F4F1EA);border-bottom:2px solid var(--niq-navy);padding:1.4rem 1rem .8rem;text-align:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.hd h1{font-family:'Crimson Pro',serif;font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--niq-navy),var(--niq-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hd p{font-size:.72rem;color:var(--t2);margin-top:.15rem}

.chips{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.chip{background:var(--b2);border:1px solid var(--bd);border-radius:14px;padding:.1rem .5rem;font-size:.64rem;color:var(--t2)}
.chip b{font-family:'JetBrains Mono',monospace;color:var(--niq-accent)}

/* TAB NAV */
.nav{display:flex;gap:.3rem;padding:.5rem .7rem;overflow-x:auto;background:var(--b2);border-bottom:1px solid var(--bd);position:sticky;top:50px;z-index:90;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.nav::-webkit-scrollbar{height:2px}
.tb{white-space:nowrap;padding:.3rem .7rem;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer;border:1px solid transparent;color:var(--t3);transition:all .2s;background:transparent}
.tb:hover{background:var(--b3);color:var(--tx)}
.tb.on{background:var(--niq-navy);border-color:var(--niq-navy);color:#FFFFFF}

/* SEARCH BAR */
.sb{padding:.5rem .7rem;background:var(--b2);border-bottom:1px solid var(--bd);display:flex;gap:.4rem;align-items:center}
.sb input{flex:1;padding:.42rem .7rem;background:var(--b3);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);font-size:.83rem;font-family:inherit;outline:none}
.sb input:focus{border-color:var(--niq-accent);background:var(--b2)}
.sb input::placeholder{color:var(--t3)}

/* CORE filter */
.ft{padding:.22rem .55rem;border-radius:5px;font-size:.65rem;cursor:pointer;border:1px solid var(--bd);color:var(--t3);background:var(--b3);font-weight:700}
.ft.on{border-color:var(--niq-amber);color:var(--niq-amber);background:#FFF4DA}

.mn{max-width:960px;margin:0 auto;padding:1rem}

/* CATEGORY TITLE BLOCK */
.th{padding:1rem;background:linear-gradient(135deg,var(--b2),var(--b3));border:1px solid var(--bd);border-radius:var(--r);margin-bottom:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.th h2{font-family:'Crimson Pro',serif;font-size:1.15rem;color:var(--niq-navy)}
.th .d{font-size:.76rem;color:var(--t2);margin-top:.1rem}

/* ENTRY CARD */
.en{background:var(--b2);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:.55rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.en:hover{border-color:var(--niq-accent);box-shadow:0 2px 8px rgba(168,50,50,0.06)}
.en.c{border-left:3px solid var(--niq-amber)}
.en.x{border-left:3px solid var(--bd2)}
.eh{padding:.65rem .85rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}
.eh:hover{background:var(--b3)}

.bg{font-size:.48rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:.1rem .32rem;border-radius:3px;flex-shrink:0;margin-top:.28rem}
.bg.cb{background:#FFEFC8;color:var(--gd)}
.bg.xb{background:var(--b4);color:var(--t3)}

.ei{flex:1;min-width:0}
.wl{font-weight:800;font-size:.92rem}
.wl .kw{color:var(--niq-navy)}
.wl .ip{font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--pp);background:var(--ppd);padding:.05rem .28rem;border-radius:3px;margin-left:.3rem;font-weight:400}
.vm{font-size:.76rem;color:var(--gd);margin-top:.05rem;font-weight:600}

.ar{color:var(--t3);font-size:.85rem;transition:transform .3s;flex-shrink:0;margin-top:.15rem}
.en.op .ar{transform:rotate(180deg)}
.eb{display:none;padding:0 .85rem .85rem;border-top:1px solid var(--bd)}
.en.op .eb{display:block}

/* SECTION (synonyms, antonyms, etc.) */
.sc{margin-top:.65rem}
.sl{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:.3rem;padding:.15rem .45rem;border-radius:3px;display:inline-block}
.sl.s1{background:var(--cyd);color:var(--cy)}    /* synonyms — green */
.sl.s2{background:var(--rdd);color:var(--rd)}    /* antonyms — red */
.sl.s3{background:var(--bld);color:var(--bl)}    /* collocations — navy */
.sl.s4{background:var(--ppd);color:var(--pp)}    /* nominalisation — violet */
.sl.s5{background:var(--pkd);color:var(--pk)}    /* paraphrase — amber-2 */
.sl.s6{background:var(--ord);color:var(--or)}    /* mnemonic — amber */

.si{padding:.42rem .6rem;background:var(--b3);border-radius:5px;margin-bottom:.3rem;border-left:2px solid var(--bd)}
.si.s-s{border-left-color:var(--cy)}
.si.s-a{border-left-color:var(--rd)}
.si.s-c{border-left-color:var(--bl)}
.si.s-n{border-left-color:var(--pp)}
.si.s-p{border-left-color:var(--pk)}

.si .hw{font-weight:700;font-size:.84rem}
.hw .c1{color:var(--cy)}
.hw .c2{color:var(--rd)}
.hw .c3{color:var(--bl)}
.hw .c4{color:var(--pp)}
.hw .c5{color:var(--pk)}

.si .vi{font-size:.74rem;color:var(--gd);font-style:italic;font-weight:500}
.si .ex{margin-top:.2rem;font-size:.8rem;padding-left:.45rem;border-left:2px solid var(--bd2)}
.si .ex .e{font-family:'Source Serif 4',serif;color:var(--tx);line-height:1.55}
.si .ex .e b{color:var(--or);font-weight:700}
.si .ex .v{color:var(--t2);font-style:italic;font-size:.74rem}

/* MNEMONIC BOX */
.mx{margin-top:.55rem;padding:.65rem;background:var(--ord);border-radius:6px;border:1px solid var(--pk)}
.mx .ml{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;color:var(--or);margin-bottom:.2rem}
.mx .me{font-family:'Source Serif 4',serif;font-size:.9rem;line-height:1.6}
.mx .me b{color:var(--or)}
.mx .mv{font-size:.76rem;color:var(--t2);font-style:italic;margin-top:.15rem}

/* WRITING PHRASES */
.wp{background:linear-gradient(135deg,var(--b2),var(--b3));border:2px solid var(--niq-accent);border-radius:var(--r);padding:1rem;margin-bottom:1.2rem;box-shadow:0 2px 8px rgba(168,50,50,0.06)}
.wp h3{font-family:'Crimson Pro',serif;font-size:1rem;color:var(--niq-accent);margin-bottom:.6rem}
.wp-item{padding:.42rem .6rem;background:var(--b2);border-radius:5px;margin-bottom:.3rem;border-left:2px solid var(--niq-accent)}
.wp-en{font-weight:700;font-size:.84rem;color:var(--niq-navy)}
.wp-vi{font-size:.74rem;color:var(--gd);font-style:italic;font-weight:500}
.wp-ex{font-size:.8rem;font-family:'Source Serif 4',serif;color:var(--tx);margin-top:.15rem}
.wp-ex b{color:var(--or);font-weight:700}
.wp-exv{font-size:.74rem;color:var(--t2);font-style:italic}

/* SCROLL TO TOP BUTTON */
.btt{position:fixed;bottom:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:var(--niq-accent);color:#FFFFFF;border:none;font-size:1.1rem;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:200;box-shadow:0 3px 15px rgba(168,50,50,0.3)}
.btt.show{display:flex}

/* INFO BOXES (degree scale, common mistakes, prep cheat) */
.ib{padding:.7rem;border-radius:var(--r);margin-bottom:1rem;border:1px solid var(--bd);background:var(--b2)}
.ib h4{font-family:'Crimson Pro',serif;font-size:.9rem;margin-bottom:.4rem}

.ib-deg{background:linear-gradient(135deg,var(--b2),var(--bld));border-color:var(--bl)}
.ib-deg h4{color:var(--bl)}

.ib-cm{background:linear-gradient(135deg,var(--b2),var(--rdd));border-color:var(--rd)}
.ib-cm h4{color:var(--rd)}

.ib-pp{background:linear-gradient(135deg,var(--b2),var(--cyd));border-color:var(--cy)}
.ib-pp h4{color:var(--cy)}

/* DEGREE SCALE — light theme palette */
.ds{display:flex;align-items:stretch;gap:2px;margin:.4rem 0;flex-wrap:wrap}
.ds-i{flex:1;min-width:60px;text-align:center;padding:.22rem .15rem;border-radius:4px;font-size:.58rem;font-weight:700;line-height:1.3;border:1px solid rgba(0,0,0,.08)}
.ds-1{background:#E0EDD0;color:#2c530c;border-color:var(--cy)}
.ds-2{background:#D8E5F2;color:#1b3a5f;border-color:var(--bl)}
.ds-3{background:#DDE3F0;color:var(--niq-navy);border-color:var(--niq-navy)}
.ds-4{background:#E5DEF5;color:#3d2978;border-color:var(--pp)}
.ds-5{background:#F5DCD9;color:var(--rd);border-color:var(--rd)}
.ds-6{background:#F8E4C5;color:#7a4308;border-color:var(--pk)}

/* COMMON MISTAKES */
.cm-row{padding:.3rem .5rem;background:var(--b2);border-radius:4px;margin-bottom:.25rem;font-size:.76rem;line-height:1.5;border-left:2px solid var(--rd)}
.cm-row .ok{color:var(--cy)}
.cm-row .no{color:var(--rd)}

/* PREPOSITION CHEAT */
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.3rem;margin:.3rem 0}
.pp-i{padding:.3rem .5rem;background:var(--b2);border-radius:4px;font-size:.74rem;line-height:1.4;border-left:2px solid var(--cy)}
.pp-i b{color:var(--cy);font-family:'JetBrains Mono',monospace;font-size:.7rem}

/* CROSS-REFERENCES */
.xref{margin-top:.4rem;padding:.35rem .5rem;background:var(--b3);border-radius:4px;font-size:.68rem;color:var(--t2);border:1px solid var(--bd)}
.xref span{color:var(--bl);cursor:pointer;text-decoration:underline;font-weight:600}
.xref span:hover{color:var(--niq-accent)}

@media(max-width:600px){.hd h1{font-size:1.15rem}.nav{top:46px}.mn{padding:.5rem}.eh{padding:.5rem .6rem}}


#view-vocab { display: none; }

.preview-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #a83232, #c66058);
  color: white; padding: 6px 12px; text-align: center;
  font-size: 11px; letter-spacing: 0.5px; z-index: 9999; font-family: var(--f-mono);
}
.preview-banner b { color: #F5A623; }

/* ---------- TEACHING ROADMAP ---------- */
.niq-rm-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.niq-rm-stat {
  background: #FAFAF7;
  border: 1px solid #E8E4D8;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.niq-rm-stat.tier-core { background: #E8F0F9; border-color: #B8D0E8; }
.niq-rm-stat.tier-practice { background: #FFF4ED; border-color: #F0DDB8; }
.niq-rm-stat.tier-challenge { background: #F4E8F8; border-color: #D8B8E0; }
.niq-rm-stat.tier-placeholder { background: #F0F0EE; border-color: #D8D6CC; }
.niq-rm-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #1F1E1B;
  line-height: 1;
}
.niq-rm-stat-lbl {
  font-size: 11px;
  color: #5F5E5A;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.niq-rm-cat {
  background: #FAFAF7;
  border-left: 4px solid #2E5C8A;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 16px 0;
}
.niq-rm-cat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
.niq-rm-cat-count {
  font-size: 11px;
  color: #888780;
  font-weight: 600;
}
.niq-rm-empty {
  font-size: 12px;
  color: #888780;
  font-style: italic;
}

.niq-rm-coverage {
  background: #F0F4F9;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #2E5C8A;
  margin: 8px 0 14px 0;
  line-height: 1.6;
}
.niq-rm-tech {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #B8D0E8;
  color: #2E5C8A;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px;
}
.niq-rm-tech-mini {
  display: inline-block;
  background: #F4F1E8;
  color: #5F5E5A;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 4px;
}

.niq-rm-tier-block {
  margin: 12px 0;
}
.niq-rm-tier-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #E8F0F9;
  color: #2E5C8A;
}
.niq-rm-tier-head.tier-practice { background: #FFF4ED; color: #B8730A; }
.niq-rm-tier-head.tier-challenge { background: #F4E8F8; color: #7B2D8E; }
.niq-rm-tier-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.niq-rm-task {
  display: flex;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E8E4D8;
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.niq-rm-task:hover {
  border-color: #2E5C8A;
  box-shadow: 0 2px 8px rgba(46,92,138,0.08);
}
.niq-rm-task-num {
  font-size: 13px;
  font-weight: 800;
  color: #2E5C8A;
  background: #E8F0F9;
  padding: 4px 8px;
  border-radius: 4px;
  height: fit-content;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.niq-rm-task-body {
  flex: 1;
  min-width: 0;
}
.niq-rm-task-title {
  font-size: 13px;
  font-weight: 700;
  color: #1F1E1B;
  line-height: 1.4;
}
.niq-rm-task-sum {
  font-size: 11px;
  color: #5F5E5A;
  font-style: italic;
  margin-top: 3px;
}
.niq-rm-task-techs {
  margin-top: 6px;
  font-size: 11px;
}
.niq-rm-vandung, .niq-rm-combine {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.niq-rm-vandung { background: #FFF4ED; color: #B8730A; }
.niq-rm-combine { background: #F4E8F8; color: #7B2D8E; }

.niq-rm-footer {
  background: #F0F4F9;
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #3a3a36;
}
.niq-rm-footer ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.niq-rm-footer code {
  background: #FFFFFF;
  border: 1px solid #E8E4D8;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: #2E5C8A;
}

/* ============== SOFT LOCK / UNLOCK FEATURE (no overlay, no blur) ============== */
/* Lock button styling (always visible at chart-card-head) */
.niq-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid #C8842B;
  border-radius: 14px;
  background: #FFFFFF;
  color: #0F1B3C;
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.niq-lock-btn:hover {
  background: #FFFCF5;
  border-color: #A91510;
  color: #A91510;
}
.niq-lock-btn.unlocked {
  background: #5B8C5A;
  color: #FFFFFF;
  border-color: #5B8C5A;
}
.niq-lock-btn.unlocked:hover {
  background: #4A7649;
  border-color: #4A7649;
  color: #FFFFFF;
}
.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* SOFT LOCK: chỉ hide các "data detail" elements (tooltip, panel, badge, ...). 
   Chart vẫn fully interactive cho visual feedback (highlight, color tint, hover state).
   Anh muốn ẩn thêm element nào thì add selector vào list dưới đây. */

/* === TABLE TASKS: hide tooltip + compare panel khi locked === */
.chart-card.niq-locked .tab001-niq-tooltip,
.chart-card.niq-locked .tab001-niq-compare-panel,
.chart-card.niq-locked .tab002-niq-tooltip,
.chart-card.niq-locked .tab002-niq-compare-panel,
.chart-card.niq-locked .tab003-niq-tooltip,
.chart-card.niq-locked .tab003-niq-compare-panel,
.chart-card.niq-locked .tab004-niq-tooltip,
.chart-card.niq-locked .tab004-niq-compare-panel,
.chart-card.niq-locked .tab005-niq-tooltip,
.chart-card.niq-locked .tab005-niq-compare-panel,
.chart-card.niq-locked .tab006-niq-tooltip,
.chart-card.niq-locked .tab006-niq-compare-panel {
  display: none !important;
}
.chart-card.niq-locked .tab007-niq-tooltip,
.chart-card.niq-locked .tab007-niq-compare-panel { display: none !important; }

/* === LINE/BAR/PIE TASKS: anh chỉ định element cụ thể vào đây === */
/* Placeholder - anh sẽ chỉ định class name cụ thể sau */
/*
.chart-card.niq-locked .niq-series-label,
.chart-card.niq-locked .niq-value-label {
  display: none !important;
}
*/

/* When task is locked (set on main.niq-task-shell), hide sample answer entirely */
.niq-task-shell.niq-task-locked .niq-sample-section {
  display: none !important;
}