/* =======================
   BASE (Light)
   ======================= */
:root{
  --bg:#f7f9fc; --card:#fff; --text:#0f172a; --muted:#6b7280;
  --line:#e5e7eb; --good:#16a34a; --bad:#ef4444; --accent:#3b82f6;
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; color:var(--text); background:var(--bg); font:14px/1.5 system-ui, -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial }
a{ color:inherit }
.container{ max-width:1100px; margin:20px auto; padding:0 16px }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:10px 16px; transition: box-shadow .2s;
}
.topbar.elev{ box-shadow: 0 4px 16px rgba(15,23,42,.06) }
.brand{ display:flex; gap:10px; align-items:center }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent) }
.brand .sub{ color:var(--muted); font-size:12px }
.actions{ display:flex; gap:8px; align-items:center }

/* Controls */
.btn{
  border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer;
  box-shadow:0 2px 8px rgba(9,13,40,.04); transition:transform .15s ease, box-shadow .2s;
}
.btn:hover{ transform: translateY(-1px) }
.btn.accent{ background:var(--accent); color:#fff; border-color:transparent }
.btn.ghost{ background:#fff; color:var(--text); opacity:.9 }
.input{
  border:1px solid var(--line); background:#fff; padding:8px 10px; border-radius:10px; outline:none;
  box-shadow:0 1px 6px rgba(9,13,40,.03);
}
.input:focus{ border-color:#c7d2fe; outline:2px solid #e0e7ff }

/* Table */
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table th{ text-align:left; color:var(--muted); font-weight:600; padding:0 8px 4px }
.table td{ background:#fff; padding:10px 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.table tr td:first-child{ border-left:1px solid var(--line); border-top-left-radius:10px; border-bottom-left-radius:10px }
.table tr td:last-child{ border-right:1px solid var(--line); border-top-right-radius:10px; border-bottom-right-radius:10px }

/* Stats & filters */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 }
.stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center }
.stat-num{ font-size:20px; font-weight:700 }
.stat-label{ color:var(--muted); font-size:12px }
.filters{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap }
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; background:#fff }
.badge.gray{ background:#f3f4f6 }
.badge.green{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.muted{ color:var(--muted) }
.empty{ color:var(--muted); text-align:center; padding:18px 0 }
.example{ margin-top:6px; color:#334155; font-size:12px }

/* Quiz */
.quiz{ margin-top:18px }
.quiz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.progress{ width:220px; height:8px; background:#eef2ff; border-radius:999px; overflow:hidden }
.progress-fill{ height:100%; background:var(--accent); transition: width .2s }
.pill{ background:#eef2ff; color:#3730a3; padding:2px 8px; border-radius:999px; font-size:12px }
.quiz-list{ display:grid; gap:12px }
.q-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:0 2px 10px rgba(9,13,40,.04) }
.q-head{ display:flex; align-items:center; gap:10px }
.q-num{ font-weight:600 }
.q-tag{ color:var(--muted); font-size:12px; border:1px dashed #e5e7eb; padding:2px 8px; border-radius:999px }
.q-prompt{ font-size:20px; margin:8px 0 10px }
.q-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.q-btn{ border:1px solid var(--line); background:#fff; padding:10px; border-radius:10px; cursor:pointer; text-align:left }
.q-btn.selected{ outline:2px solid #60a5fa }
.q-btn.correct{ background:#ecfdf5; border-color:#86efac }
.q-btn.wrong{ background:#fef2f2; border-color:#fecaca }
.q-hint{ margin-top:8px; color:#334155; font-size:13px; background:#f8fafc; border:1px dashed #e5e7eb; padding:8px; border-radius:10px }

/* Icon button (💡) */
.icon-btn{
  border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 8px; cursor:pointer; margin-left:auto;
}
.icon-btn:hover{ transform: translateY(-1px); }

/* Modal / Popup v2 */
.modal{ border:none; padding:0; background:transparent }
.modal::backdrop{ background:rgba(15,23,42,.3) }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px }
.modal-card{ padding:0; overflow:hidden; border-radius:20px }
.modal-header{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#fff,#fafcff) }
.modal-icon{ font-size:24px; line-height:1 }
.modal-title{ margin:0; font-size:18px }
.modal-sub{ margin:2px 0 0; color:var(--muted); font-size:12px }
.modal-body{ padding:16px }
.modal-actions{ display:flex; gap:8px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); background:#fff }
.modal-actions.sticky{ position:sticky; bottom:0 }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grid-2 .span-2{ grid-column:1 / -1 }
.field{ display:block }
.field.req .flabel::after{ content:" *"; color:var(--bad) }
.flabel{ display:block; font-size:12px; color:var(--muted); margin:4px 0 6px }
.affix{ display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 10px; box-shadow:0 2px 8px rgba(9,13,40,.04) }
.affix:focus-within{ outline:2px solid #cbd8ff; border-color:#a9bbff }
.affix .prefix{ flex:0 0 auto; font-size:12px; color:#6a7593; margin-right:8px; padding:6px 0 }
.affix input, .affix select{ border:none; outline:none; width:100%; padding:10px 6px; font-size:14px; background:transparent }
.help{ display:block; margin-top:6px; color:var(--muted); font-size:12px }
.spacer{ flex:1 }

/* Responsive */
@media (max-width:820px){
  .filters{ flex-direction:column; align-items:stretch }
  .grid-2{ grid-template-columns:1fr }
  .q-grid{ grid-template-columns:1fr }
}

/* =======================
   THEME: DECADE NEON LIGHT
   ======================= */
/* Thêm vào <body class="theme-neon-light"> */
.theme-neon-light{
  --bg:#f6f8ff;
  --card:#ffffffcc;
  --text:#0b0d14;
  --muted:#4b5166;
  --line:#dfe6ff;

  --neon-pink:#ff0a82;
  --neon-cyan:#31ffd8;
  --neon-yellow:#ffea63;
  --neon-violet:#8a5cff;

  --good:#00c97d;
  --bad:#ff3d67;

  --glow-strong:0 0 14px rgba(255,10,130,.55), 0 0 28px rgba(49,255,216,.35);
  --glow-soft:0 0 8px rgba(255,10,130,.28), 0 0 18px rgba(49,255,216,.22);

  /* Nền: stripes Decade mảnh, mờ + gradient sáng */
  background:
    repeating-linear-gradient(-60deg, rgba(255,10,130,.08) 0, rgba(255,10,130,.08) 6px, transparent 6px, transparent 30px),
    repeating-linear-gradient( 60deg, rgba(49,255,216,.08) 0, rgba(49,255,216,.08) 6px, transparent 6px, transparent 30px),
    linear-gradient(180deg,#f6f8ff,#ffffff);
  color-scheme: light;
}

/* Topbar & brand */
.theme-neon-light .topbar{
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.theme-neon-light .logo-dot{
  background: radial-gradient(circle at 40% 40%, var(--neon-pink), var(--neon-cyan));
  box-shadow: 0 0 10px var(--neon-pink), 0 0 18px var(--neon-cyan);
}

/* Buttons */
.theme-neon-light .btn{
  border:1px solid var(--line); background:#fff; color:var(--text); position:relative;
}
.theme-neon-light .btn:hover{ box-shadow: var(--glow-soft); transform:translateY(-1px); }
.theme-neon-light .btn.accent{
  background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  color:#fff; border:none; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow: var(--glow-strong);
}
.theme-neon-light .btn.ghost{ background:#fff; border:1px dashed var(--line); color:var(--muted) }

/* Inputs */
.theme-neon-light .input{
  background:#fff; border:1px solid var(--line); color:var(--text);
}
.theme-neon-light .input:focus{
  border-color:var(--neon-pink);
  box-shadow:0 0 0 3px rgba(255,10,130,.22), inset 0 0 8px rgba(49,255,216,.16);
}

/* Cards & stats */
.theme-neon-light .card,
.theme-neon-light .stat,
.theme-neon-light .q-card{
  background: rgba(255,255,255,0.94);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
  border-radius:20px;
  box-shadow: 0 6px 20px rgba(255,10,130,.10),
              0 6px 20px rgba(49,255,216,.10);
}
.theme-neon-light .stat-num{
  color:var(--neon-pink);
  text-shadow:0 0 12px rgba(255,10,130,.25);
}

/* Table */
.theme-neon-light .table td{ background:#fff; border-color:var(--line) }

/* Badges */
.theme-neon-light .badge.gray{ background:#f3f4f6; color:#444 }
.theme-neon-light .badge.green{
  background:#e6fff9; color:#00664c; border-color:#00c97d;
  box-shadow:0 0 10px rgba(0,201,125,.22);
}

/* Progress & pills */
.theme-neon-light .progress{ background:#f3e8ff }
.theme-neon-light .progress-fill{
  background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  box-shadow: var(--glow-soft);
}
.theme-neon-light .pill{
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  color:#fff; box-shadow: var(--glow-soft); border:none;
}

/* Quiz buttons */
.theme-neon-light .q-tag{
  color:#fff; background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  border:none;
}
.theme-neon-light .q-btn{
  background:#fff; border:1px solid var(--line); color:var(--text);
}
.theme-neon-light .q-btn.selected{ outline:2px solid var(--neon-pink); box-shadow: var(--glow-soft) }
.theme-neon-light .q-btn.correct{ background:#e6fff9; border-color:#00c97d; box-shadow:0 0 12px rgba(0,201,125,.25) }
.theme-neon-light .q-btn.wrong{ background:#ffe5ed; border-color:#ff3d67; box-shadow:0 0 12px rgba(255,61,103,.25) }
.theme-neon-light .q-hint{ background:#fdf4ff; border:1px dashed var(--neon-violet); color:#5b21b6 }

/* Icon button */
.theme-neon-light .icon-btn{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(49,255,216,.12);
}
.theme-neon-light .icon-btn:hover{ box-shadow: var(--glow-soft) }

/* Modal & fields */
.theme-neon-light .modal::backdrop{
  background:radial-gradient(80% 50% at 50% -10%,rgba(255,10,130,.18),rgba(49,255,216,.18)),rgba(0,0,0,.08);
}
.theme-neon-light .modal-header{
  background:linear-gradient(90deg,var(--neon-pink) 0%,var(--neon-cyan) 100%);
  color:#fff;
}
.theme-neon-light .affix{ background:#fff; border-color:var(--line) }
.theme-neon-light .affix:focus-within{
  outline: 2px solid var(--neon-cyan);
  border-color: rgba(255,10,130,.45);
  box-shadow: var(--glow-soft);
}
.theme-neon-light .prefix{ color:var(--neon-violet) }