/* =====================================================================
   IZI Class — giao diện mới (phong cách sáng, vui, thẻ bo tròn, tiêu đề lớn đậm)
   Bảng màu: French Puce #540B0E · Auburn #9E2A2B · Hunyadi Yellow #E09F3E · Police Blue #335C67 · Vanilla #FFF3B0
   File này nạp SAU CÙNG nên ghi đè các màu cũ; không đổi chức năng.
   ===================================================================== */
:root {
  --puce: #540b0e; --auburn: #9e2a2b; --gold: #e09f3e; --teal: #335c67; --vanilla: #fff3b0;
  --cream: #fbf5ea; --paper: #fffdf7; --edge: #e8d9bc; --body: #4a2f30; --soft: #8a7468;
  --ink: var(--puce); --muted: var(--soft); --line: var(--edge); --blue: var(--auburn); --blue-dark: #7d1f20;
  --pale: #fff6cf; --canvas: var(--cream); --green: var(--teal); --amber: var(--gold); --red: var(--auburn);
  --shadow: 0 4px 0 rgba(84, 11, 14, .07);
  --head: 'Baloo 2', 'Nunito', sans-serif; --text: 'Nunito', 'DM Sans', sans-serif;
}
body { font-family: var(--text); color: var(--body); background: var(--cream); font-size: 14.5px; }
h1, h2, h3, .page-heading h1, .brand b, .stat-value, .panel-head h2, .panel-inner-head h2, .modal-head h2, .feature-card h3 { font-family: var(--head); color: var(--puce); }
button, input, select, textarea { font-family: var(--text); }

/* ---------- khung chung: thanh bên, thanh trên ---------- */
.sidebar { background: var(--paper); border-right: 2px solid var(--edge); }
.brand-mark { background: var(--auburn); color: var(--vanilla); border-radius: 14px; box-shadow: 0 4px 0 var(--puce); font-family: var(--head); }
.brand b { font-size: 20px; letter-spacing: 0; }
.brand small { color: var(--soft); }
.workspace { border: 2px solid var(--edge); border-radius: 16px; background: #fff; }
.workspace-avatar, .avatar, .mini-avatar { background: var(--vanilla); color: var(--puce); }
.nav-label { color: var(--soft); letter-spacing: 1.2px; }
.nav-item { color: #6f5456; font-weight: 700; font-size: 13px; border-radius: 14px; padding: 11px 12px; }
.nav-item:hover { background: #fff6dc; color: var(--puce); }
.nav-item.active { background: var(--vanilla); color: var(--puce); box-shadow: inset 0 0 0 2px var(--gold); }
.nav-count { background: #f6ead0; color: var(--puce); }
.help-card, .profile { border-color: var(--edge); }
.help-card { background: #fff; border: 2px solid var(--edge); border-radius: 16px; }
.topbar { background: var(--paper); border-bottom: 2px solid var(--edge); }
.crumb b { color: var(--puce); }
.page-heading h1 { font-size: 30px; font-weight: 800; letter-spacing: -.2px; line-height: 1.1; }
.page-heading p { color: var(--soft); font-size: 13.5px; }

/* ---------- nút ---------- */
.btn { border: 2px solid var(--edge); background: #fff; color: var(--puce); border-radius: 14px; font-weight: 800; font-size: 12.5px; padding: 10px 15px; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { border-color: var(--gold); box-shadow: 0 4px 0 rgba(224, 159, 62, .35); transform: translateY(-1px); }
.btn.primary { background: var(--auburn); color: #fff; border-color: var(--puce); box-shadow: 0 4px 0 var(--puce); }
.btn.primary:hover { background: #b03234; transform: translateY(-1px); box-shadow: 0 5px 0 var(--puce); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--puce); }
.btn.soft, .btn.soft-blue { background: var(--vanilla); color: var(--puce); border-color: var(--gold); }
.btn.danger { background: #fff1ef; color: var(--auburn); border-color: #e9b7b1; }
.btn:disabled { opacity: .55; transform: none; box-shadow: none; }
.text-link { color: var(--auburn); font-weight: 800; }

/* ---------- thẻ, bảng, ô nhập ---------- */
.stat-card, .panel, .table-panel, .feature-card, .izi-start, .roadmap-card { background: var(--paper); border: 2px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow); }
.stat-top { color: var(--soft); font-weight: 800; }
.stat-value { font-size: 30px; font-weight: 800; }
.stat-icon.blue { background: #e1ecee; color: var(--teal); } .stat-icon.green { background: #e1ecee; color: var(--teal); }
.stat-icon.amber { background: var(--vanilla); color: #b97a1e; } .stat-icon.purple { background: #f5dcd9; color: var(--auburn); }
.trend { color: var(--teal); } .trend.down { color: var(--auburn); }
th { background: #fbf2e0; color: var(--soft); font-weight: 800; }
td { color: var(--body); border-bottom-color: #f0e6d0; }
.status { background: #e1ecee; color: var(--teal); font-weight: 800; } .status.warning { background: var(--vanilla); color: #9a6410; }
.status.red { background: #f7dedb; color: var(--auburn); } .status.gray { background: #f1e8d6; color: var(--soft); }
.progress, .progress-line { background: #f1e5cb; } .progress i, .progress-line i, .izi-start-bar i { background: var(--gold); }
.izi-start-bar { background: #f1e5cb; } .izi-start-list li.next { background: var(--vanilla); }
.select, .search-box input, .field input, .field select, .field textarea, .stu-range input { border: 2px solid var(--edge); border-radius: 12px; background: #fff; color: var(--puce); }
.search-box input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 159, 62, .25); outline: none; }
.chip { border-color: var(--edge); color: var(--puce); }
.modal { background: var(--paper); border: 2px solid var(--puce); border-radius: 26px; box-shadow: 0 8px 0 rgba(84, 11, 14, .18); }
.modal-backdrop { background: rgba(84, 11, 14, .45); }
.modal-head h2 { font-size: 22px; font-weight: 800; }
.close { color: var(--puce); }
.toast { background: var(--puce); }
.dl-empty { border-color: var(--edge); color: var(--soft); }
.roadmap-intro { background: var(--vanilla); border-color: var(--gold); border-radius: 26px; }
.roadmap-intro h2 { color: var(--puce); font-family: var(--head); font-size: 30px; }
.builder-column-head { background: var(--teal); } .builder-column-head i { color: var(--teal); }
.builder-add { border-color: var(--auburn); color: var(--auburn); }
.exercise-icon, .roadmap-symbol { background: var(--vanilla); color: var(--auburn); }
.day-chip.today { background: var(--vanilla); border-color: var(--gold); color: var(--puce); }
.cal-event { background: #fff6dc; border-left-color: var(--gold); }

/* ---------- học sinh: khung và Tổng quan ---------- */
.stu-page { gap: 22px; color: var(--body); }
.stu-page h2 { font-family: var(--head); font-size: 26px; font-weight: 800; color: var(--puce); }
.stu-panel, .stu-login-card { background: var(--paper); border: 2px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow); }
.stu-panel h3 { font-family: var(--head); font-size: 19px; color: var(--puce); }
.stu-title-row h2 { font-size: 28px; }
.stu-tabs button { border-radius: 999px; font-weight: 800; }
.stu-tabs button.active { background: var(--vanilla); color: var(--puce); border-color: var(--gold); }
.stu-due-card { background: linear-gradient(115deg, var(--vanilla), #ffe9a0); border: 2px solid var(--gold); border-radius: 26px; }
.stu-due-item { background: rgba(255, 255, 255, .92); border: 2px solid #f1dfae; border-radius: 16px; }
.stu-due-item:hover { border-color: var(--auburn); }
.stu-due-lists h3 { font-family: var(--head); font-size: 20px; color: var(--puce); } .stu-due-lists h3.red { color: var(--auburn); }
.stu-sun { background: radial-gradient(circle at 40% 35%, #ffd873, var(--gold) 72%); color: var(--puce); box-shadow: 0 0 0 12px rgba(224, 159, 62, .25), 0 0 0 26px rgba(224, 159, 62, .12); font-family: var(--head); font-size: 19px; }
.stu-card-btn, .stu-more { border-radius: 14px; font-weight: 800; }
.stu-card-btn.green { background: var(--teal); border-color: var(--teal); color: #fff; }
.stu-badge { border-radius: 999px; font-weight: 800; background: #e1ecee; color: var(--teal); }
.stu-badge.ok { background: #dbe9e0; color: #25584a; } .stu-badge.late { background: #f7dedb; color: var(--auburn); }
.fl-chip { border-radius: 999px; font-weight: 800; } .fl-chip.ok { background: #dbe9e0; color: #25584a; } .fl-chip.late { background: #f7dedb; color: var(--auburn); }
.dot.todo { background: var(--teal); } .dot.doing { background: var(--gold); } .dot.fail { background: var(--auburn); } .dot.done { background: #5f9a7d; } .dot.again { background: var(--auburn); } .dot.unsure { background: var(--gold); } .dot.soon { background: var(--teal); } .dot.later { background: #5f9a7d; }
.stu-pr-meter i, .vl-pbar i { background: var(--gold); }

/* thẻ thống kê từ vựng */
.vl-card { background: var(--paper); border: 2px solid var(--edge); border-radius: 24px; box-shadow: var(--shadow); }
.vl-card h3 { font-family: var(--head); font-size: 22px; }
.vl-total b { font-family: var(--head); font-size: 54px; color: var(--puce); }
.vl-barwrap { border-bottom-color: var(--edge); }

/* khối chào + cây từ vựng + chuỗi ngày học (thay khung chào cũ) */
.stu-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; background: var(--paper); border: 2px solid var(--puce); border-radius: 32px; padding: 26px 28px 26px; box-shadow: 0 6px 0 rgba(84, 11, 14, .16); overflow: hidden; }
.stu-hero::before { content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px; background: var(--vanilla); border-radius: 50%; z-index: 0; }
.stu-hero > * { position: relative; z-index: 1; }
.stu-hero-left { display: grid; align-content: space-between; gap: 18px; }
.stu-kicker { display: inline-block; align-self: start; background: var(--puce); color: var(--vanilla); font-weight: 800; font-size: 12px; letter-spacing: .6px; padding: 5px 12px; border-radius: 999px; }
.stu-hero h1 { margin: 6px 0 4px; font-family: var(--head); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1.02; color: var(--puce); letter-spacing: -.5px; }
.stu-hero h1 em { font-style: normal; color: var(--auburn); }
.stu-hero p { margin: 0; color: var(--body); font-size: 16px; max-width: 460px; }
.stu-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; border-top: 2px dashed var(--edge); padding-top: 14px; }
.stu-hero-stats div { display: grid; }
.stu-hero-stats b { font-family: var(--head); font-size: 30px; color: var(--puce); line-height: 1; }
.stu-hero-stats small { color: var(--soft); font-weight: 700; font-size: 12px; }
.stu-hero-art { width: 100%; max-width: 330px; height: auto; }
.stu-grow { background: #fff; border: 2px solid var(--edge); border-radius: 26px; padding: 14px 16px 16px; display: grid; gap: 10px; text-align: center; }
.stu-grow-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.stu-grow-top b { font-family: var(--head); font-size: 20px; color: var(--puce); display: block; line-height: 1.1; }
.stu-grow-top small { color: var(--soft); font-weight: 700; }
.stu-xp { font-family: var(--head); font-weight: 800; background: var(--vanilla); color: var(--puce); border: 2px solid var(--gold); border-radius: 999px; padding: 4px 12px; font-size: 15px; white-space: nowrap; }
.stu-tree { width: 100%; max-width: 230px; height: auto; margin: 0 auto; display: block; }
.stu-xp-bar { height: 12px; background: #f1e5cb; border-radius: 99px; overflow: hidden; border: 2px solid var(--edge); }
.stu-xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--auburn)); border-radius: 99px; transition: width .6s; }
.stu-xp-note { margin: 0; font-size: 12.5px; color: var(--soft); font-weight: 700; }
.stu-stages { display: flex; justify-content: space-between; gap: 4px; list-style: none; margin: 0; padding: 0; }
.stu-stages li { flex: 1; font-size: 10px; font-weight: 800; color: #b9a58c; display: grid; justify-items: center; gap: 3px; }
.stu-stages li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--edge); background: #fff; display: block; }
.stu-stages li.done { color: var(--teal); } .stu-stages li.done i { background: var(--teal); border-color: var(--teal); }
.stu-stages li.now { color: var(--auburn); } .stu-stages li.now i { background: var(--gold); border-color: var(--puce); }
.stu-flame { display: flex; align-items: center; gap: 12px; background: var(--vanilla); border: 2px solid var(--gold); border-radius: 22px; padding: 10px 14px; }
.stu-flame svg { width: 44px; height: 44px; flex: none; }
.stu-flame b { font-family: var(--head); font-size: 26px; color: var(--puce); line-height: 1; display: block; }
.stu-flame small { color: #8a5a10; font-weight: 800; }
.stu-flame .stu-week { margin-left: auto; }
.stu-week li { background: #fff; color: var(--soft); font-weight: 800; border: 2px solid var(--edge); }
.stu-week li.on { background: var(--auburn); color: #fff; border-color: var(--puce); }
.stu-week li.today { outline: 2px solid var(--gold); }

@media (max-width: 900px) { .stu-hero { grid-template-columns: 1fr; padding: 20px; } .stu-flame { flex-wrap: wrap; } .stu-flame .stu-week { margin-left: 0; } .stu-hero::before { width: 180px; height: 180px; } }
@media (max-width: 760px) { .page-heading h1 { font-size: 25px; } .stu-hero h1 { font-size: 34px; } }

/* ---------- quét màu xanh cũ còn sót ---------- */
.activity-icon { background: var(--vanilla); color: var(--auburn); }
.ai-tag { background: #f7dedb; color: var(--auburn); }
.bar { background: var(--teal); } .bar.alt { background: var(--gold); }
.legend-dot { background: var(--teal); } .legend-dot.gold { background: var(--gold); }
.month-metric { background: #fff6dc; border-color: var(--edge); }
.rank-badge.rank-2 { background: #e1ecee; }
.chart { background: repeating-linear-gradient(to bottom, transparent 0 43px, #f0e6d0 44px, #f0e6d0 45px); border-bottom-color: var(--edge); }
.page-heading h1 { font-size: 34px; }
.page-heading { margin-bottom: 26px; }
.stu-hero-left, .stu-grow { min-width: 0; }
.stu-grow { overflow: hidden; }
.stu-flame { flex-wrap: wrap; }
.stu-flame .stu-week { width: 100%; margin-left: 0; justify-content: space-between; gap: 4px; }
.stu-flame .stu-week li { flex: 1; width: auto; min-width: 0; }
.stu-xp-note { word-break: normal; }

/* ---------- các trang còn lại: Chấm điểm, Tài chính, Báo cáo, Kho từ vựng, Lộ trình ---------- */
.gr-page, .fin-page, .hist-wrap { color: var(--body); }
.gr-col { background: #fff9ec; border-color: var(--edge); }
.gr-card { border: 2px solid var(--edge); border-radius: 20px; background: var(--paper); }
.gr-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px var(--vanilla); }
.vocab-tabs .active, .fin-tabs .active, .report-tabs .active, .hist-tabs .active, .tabs .active, [role="tab"][aria-selected="true"] { color: var(--auburn); border-color: var(--auburn); }
.fin-seg .active, .fin-seg button.active { background: var(--auburn); color: #fff; border-color: var(--puce); }
.fin-key.thu { background: var(--teal); } .fin-empty { background: #fff9ec; border-color: var(--edge); }
.fin-panel, .fin-kpi { border: 2px solid var(--edge); border-radius: 22px; background: var(--paper); }
.navy { color: var(--puce); } .blue { color: var(--teal); }
.vocab-create-set { background: var(--vanilla); border-color: var(--gold); color: var(--puce); border-radius: 16px; font-weight: 800; }
.vocab-folder-banner { background-image: linear-gradient(115deg, var(--vanilla), #ffe9a0); border-radius: 22px; border: 2px solid var(--gold); }
.vocab-folder-icon { background: var(--vanilla); color: var(--auburn); border-color: var(--gold); }
.vocab-folder-card { border-radius: 18px; } .vocab-folder-card.system, .vocab-folder-card.selected { border-color: var(--gold); }
.vocab-folder-pane { background: #fff9ec; border-color: var(--edge); } .vocab-search { background: #fff; border: 2px solid var(--edge); }
.vocab-deck-card, .vocab-set-card { border: 2px solid var(--edge); border-radius: 20px; }
.roadmap-illustration { color: var(--auburn); } .roadmap-illustration span { color: var(--auburn); text-shadow: 0 8px var(--vanilla); }
.roadmap-illustration:before { border-color: var(--gold); } .roadmap-illustration i, .roadmap-illustration b { border-color: var(--gold); color: var(--auburn); } .roadmap-illustration small { border-color: var(--teal); color: var(--teal); }
.intro-pills span { border-color: var(--gold); background: #fff; color: var(--puce); }
.empty-state .empty-icon, .empty-icon { color: var(--gold); }
.hist-table th, .hist-table-wrap th { background: #fbf2e0; }
.hist-summary > div, .fl-wrap .hist-summary div { border: 2px solid var(--edge); border-radius: 18px; background: var(--paper); }

/* ---------- Lịch dạy + Tài chính (chỉnh nốt) ---------- */
.schedule-day-head.is-today { color: var(--auburn); }
.schedule-day-head.is-today b { background: var(--auburn); color: #fff; box-shadow: 0 3px 0 var(--puce); }
.schedule-day-head.is-today small { color: var(--auburn); }
.schedule-grid { border-color: var(--edge); border-radius: 22px; background: var(--paper); }
.week-arrow { border-radius: 12px; }
.fin-tabs .active, .fin-tabs button.active { background: var(--auburn); color: #fff; border-color: var(--puce); box-shadow: 0 3px 0 var(--puce); }
.fin-tabs button { border-radius: 14px; font-weight: 800; }
.fin-card-icon { background: var(--vanilla); color: var(--auburn); }
.fin-search, .fin-search input { background: #fff; border-color: var(--edge); }
.fin-seg { background: #fbf2e0; border-color: var(--edge); border-radius: 14px; }
.fin-seg .active, .fin-seg button.active { background: var(--auburn); color: #fff; }
.navy { color: var(--puce); border-color: var(--puce); }
.fin-page td.num, .fin-page .num, .fin-page tfoot td { background-color: transparent; }
.fin-page table th, .fin-table th { background: #fbf2e0; }
.fin-page h1, .fin-page h2, .fin-page h3, .fin-dash-head h1, .fin-panel-head h3 { font-family: var(--head); color: var(--puce); }
.fin-kpi b, .fin-kpi strong { font-family: var(--head); }

/* ---------- tiêu đề song ngữ (học sinh) ---------- */
.stu-en { display: block; font-family: var(--text); font-weight: 700; font-size: .5em; line-height: 1.25; color: var(--soft); letter-spacing: .1px; margin-top: 2px; }
.stu-hero h1 .stu-en { font-size: 22px; color: var(--teal); margin-top: 6px; }
.stu-hero-stats small i.stu-en { font-size: 11px; font-style: normal; }
.stu-panel-head b .stu-en, .vl-card h3 .stu-en { font-size: 12px; }
.stu-page h2 .stu-en { font-size: 14px; } .stu-page h3 .stu-en { font-size: 13px; }
.nav-bi { display: grid; line-height: 1.15; } .nav-bi b { font-weight: 800; font-size: 13px; } .nav-bi small { font-size: 10.5px; color: var(--soft); font-weight: 700; }
.nav-item.active .nav-bi small { color: var(--auburn); }

/* Lớp học (học sinh): tab nhóm bài để không bị trôi Shadowing / Dictation / Flashcard */
.stu-grptabs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;position:sticky;top:0;z-index:5;background:var(--bg,#fffaf0);padding:8px 0}
.stu-grptab{display:flex;align-items:center;gap:8px;border:2px solid #f1e6c8;background:#fff;border-radius:999px;padding:10px 18px;font:800 15px 'Nunito',sans-serif;color:#540B0E;cursor:pointer}
.stu-grptab b{background:#FFF3B0;border-radius:999px;padding:1px 10px}.stu-grptab em{font-style:normal;background:#9E2A2B;color:#fff;border-radius:999px;padding:2px 10px;font-size:12.5px}
.stu-grptab.active{background:#9E2A2B;border-color:#9E2A2B;color:#fff}.stu-grptab.active b{background:#fff;color:#9E2A2B}.stu-grptab.active em{background:#E09F3E;color:#540B0E}