:root {
  --bg: #0b1220;
  --bg-soft: #111a2e;
  --surface: #16213a;
  --surface-2: #1c2941;
  --border: #263452;
  --text: #eef2f8;
  --text-dim: #9fb0c9;
  --text-faint: #6b7a99;
  --brand: #14b8a6;
  --brand-2: #10b981;
  --brand-dark: #0d9488;
  --accent: #f59e0b;
  --danger: #f87171;
  --ok: #34d399;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --header-h: 60px;
  --font-scale: 1;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 80% -10%, rgba(20, 184, 166, 0.12), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(16, 185, 129, 0.10), transparent 55%),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: hidden;
  width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 16px;
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.app-header .back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  flex-shrink: 0;
}
.app-header .back-btn:active { background: var(--surface-2); }

.app-header h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header .header-sub {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  display: block;
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 48px;
  overflow-x: hidden;
}

/* ---------- Home ---------- */
.hero {
  padding: 28px 4px 22px;
  text-align: center;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .logo-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero .logo-mark.has-photo {
  border-radius: 50%;
  cursor: zoom-in;
}
.hero .logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 22px 4px 10px;
  /* "display: flow-root" bao trọn phần tử con dùng float (VD nút "Xem với vai trò học sinh của tôi"
     ở #teacherSection) — thiếu dòng này, khi float xuống dòng (chữ dài, màn hẹp), chiều cao khung
     .section-label KHÔNG tính phần đã xuống dòng đó vào, khiến khối .icon-grid ngay sau bị đẩy lên
     đè ngay lên phần chữ float còn đang hiện — đúng lỗi chỉ xảy ra ở "Dành cho giáo viên" (mục duy
     nhất có float) mà "Dành cho học sinh" không có. */
  display: flow-root;
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  min-height: 128px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.tile:active { transform: scale(0.97); }
.tile.is-active { cursor: pointer; }
.tile.is-active:hover { border-color: var(--brand); }
.tile.is-locked { opacity: 0.55; }

.tile .tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(20, 184, 166, 0.14);
  color: var(--brand);
}
.tile .tile-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}
.tile .tile-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: -4px;
}
.tile .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent);
}
.tile .badge.free {
  background: rgba(52, 211, 153, 0.18);
  color: var(--ok);
}
/* .icon-tile: badge KHÔNG đặt position:absolute như .tile — trên ô hẹp (2 cột điện thoại) + cỡ chữ
   phóng to (nút A+ trong app.js), badge tuyệt đối dễ đè thẳng lên icon ở giữa ô, rất xấu và khó đọc
   (đúng lỗi trong ảnh người dùng gửi). Để badge nằm THEO DÒNG BÌNH THƯỜNG, tự đẩy icon/tên xuống
   dưới, không bao giờ chồng lên nhau dù cỡ chữ to nhỏ thế nào.
   Thứ tự "order" đảm bảo badge luôn hiện Ở TRÊN icon bất kể thứ tự trong HTML (icon nhóm học sinh có
   badge số học sinh chờ duyệt đặt SAU icon trong HTML, khác các tile khác đặt badge TRƯỚC). */
.icon-tile .badge {
  position: static;
  align-self: flex-end;
  order: -1;
  margin: -4px -2px 0 0; /* kéo lên/sang phải 1 chút cho gọn, nhưng padding của .icon-tile (18px) vẫn đủ chừa chỗ — không còn ló ra ngoài viền bo tròn như trước */
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: var(--accent);
  white-space: nowrap;
}
.icon-tile .badge.free {
  background: rgba(52, 211, 153, 0.18);
  color: var(--ok);
}

/* Lưới điều hướng chính trang chủ — kiểu màn hình ứng dụng: icon + tên + 1 dòng chú thích NGẮN
   (khác .tile-desc dài dòng trước đây). Mặc định 2 cột (điện thoại) — grid-template-columns: 1fr
   tự co giãn đúng khớp bề rộng màn hình còn lại (không phụ thuộc điện thoại to/nhỏ), nhiều cột hơn
   khi màn rộng ra (tablet/máy tính). */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 420px) {
  .icon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) {
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px) {
  .icon-grid { grid-template-columns: repeat(5, 1fr); }
}

.icon-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 12px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.icon-tile:active { transform: scale(0.95); }
.icon-tile.is-active { cursor: pointer; }
.icon-tile.is-active:hover { border-color: var(--brand); }
.icon-tile.is-locked { opacity: 0.55; }

.icon-tile .icon-tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  background: rgba(20, 184, 166, 0.14);
  color: var(--brand);
}
.icon-tile .icon-tile-title {
  font-size: calc(12.5px * var(--font-scale));
  font-weight: 700;
  line-height: 1.25;
}
.icon-tile .icon-tile-desc {
  font-size: calc(10.5px * var(--font-scale));
  color: var(--text-dim);
  line-height: 1.3;
}

.footer-note {
  margin-top: 30px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ---------- Cards / generic ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.card h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}
.card h2 .icon { margin-right: 6px; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 600;
}
.field .hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 5px;
}

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
textarea { resize: vertical; font-family: inherit; }
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--brand);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.primary {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-2));
  color: #04231d;
  border: none;
}
.btn.block { width: 100%; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Trên điện thoại, nút "block" (rộng hết cỡ) giúp dễ bấm bằng ngón tay — nhưng trên máy tính, cùng 1
   nút kéo dài hết cả khung (có khi rộng cả nghìn px) chỉ để chứa vài chữ ngắn ("Vào nhóm học tập")
   trông rất kỳ, không gọn gàng. Từ 700px trở lên, bỏ chiều rộng ép buộc — nút tự co lại vừa đúng chữ
   (display: inline-flex ở .btn đã tự làm việc này), giữ hành vi cũ cho điện thoại. */
@media (min-width: 700px) {
  .btn.block { width: auto; }
  /* Rất nhiều nơi trong app đặt 2 nút cạnh nhau trong ".btn-row" bằng style="flex:1" INLINE (kiểu
     "chia đều 2 nút cùng 1 hàng") — hợp lý trên điện thoại (2 nút vừa khít màn hẹp), nhưng trên máy
     tính hàng có thể rộng cả nghìn px, mỗi nút bị kéo dài cả trăm px chỉ để chứa vài chữ ("Nộp bài",
     "Đăng xuất"...). style inline có độ ưu tiên cao hơn CSS thường nên phải dùng !important mới ghi
     đè được — cách duy nhất sửa ĐỒNG LOẠT hàng chục chỗ mà không phải sửa từng file JS/HTML riêng lẻ. */
  .btn-row > .btn, .btn-row > a.btn { flex: 0 1 auto !important; }
}

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.result-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(20, 184, 166, 0.10);
  border: 1px solid rgba(20, 184, 166, 0.35);
  font-size: 15px;
  line-height: 1.6;
  display: none;
}
.result-box.show { display: block; }
.result-box .result-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
}
.result-box.error {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

/* ---------- Toast (thông báo nổi, thay cho alert()) ---------- */
#toastContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 200;
  padding: 0 16px;
  pointer-events: none;
}
.toast {
  max-width: 480px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(20, 184, 166, 0.16);
  border: 1px solid rgba(20, 184, 166, 0.45);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: var(--shadow);
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in 0.2s ease;
}
.toast.error {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tabs (calculator) ---------- */
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn.active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 5px;
  background: rgba(255, 255, 255, 0.25);
  vertical-align: middle;
}
.tab-btn .dot.done { background: var(--ok); }
/* ✏️ đổi tên khối lớp — mờ ẩn mặc định, chỉ hiện rõ khi rê chuột vào ĐÚNG tab đó, tránh rối mắt khi
   không cần đổi tên (xem renderTabBar, chapter-overview.js). */
.tab-rename-icon { opacity: 0; margin-left: 5px; transition: opacity 0.15s; }
.tab-btn:hover .tab-rename-icon { opacity: 0.7; }
.tab-rename-icon:hover { opacity: 1 !important; }

/* ---------- Periodic table ---------- */
.pt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.pt-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.pt-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.pt-scroll {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.pt-grid {
  display: grid;
  grid-template-columns: repeat(18, 44px);
  grid-auto-rows: 44px;
  gap: 3px;
  width: max-content;
  margin: 0 auto;
}
.pt-cell {
  position: relative;
  border-radius: 6px;
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.1s ease, outline 0.1s ease;
}
.pt-cell:active { transform: scale(0.93); }
.pt-cell .z { font-size: 8px; opacity: 0.85; line-height: 1; }
.pt-cell .sym { font-size: 14px; font-weight: 800; line-height: 1.15; }
.pt-cell.placeholder { visibility: hidden; pointer-events: none; }
.pt-cell.spacer { visibility: hidden; pointer-events: none; }
.pt-cell.highlight { outline: 2px solid #fff; z-index: 2; }

.pt-search {
  margin-bottom: 14px;
}

/* element detail modal */
.el-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.6);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}
.el-modal-backdrop.show { display: flex; }
@media (min-width: 640px) {
  .el-modal-backdrop { align-items: center; }
}
.el-modal {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding: 20px 20px 28px;
  box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .el-modal { border-radius: 22px; }
}
.el-modal .close-btn {
  float: right;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
}
.el-modal .el-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.el-modal .el-sym-big {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  flex-shrink: 0;
}
.el-modal .el-name {
  font-size: 19px;
  font-weight: 800;
}
.el-modal .el-name-en {
  font-size: 12.5px;
  color: var(--text-dim);
}
.el-modal .el-cat-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.el-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.el-info-grid .info-item {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
}
.el-info-grid .info-item .k {
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.el-info-grid .info-item .v {
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 2px;
}
.el-summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid var(--border);
}

/* ---------- Balancer ---------- */
.equation-io {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.equation-io input { flex: 1; min-width: 200px; }
.balanced-eq {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  word-break: break-word;
  line-height: 1.8;
}
.balanced-eq .coef {
  color: var(--brand);
  font-weight: 800;
}
.example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.example-chips button {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-dim);
  cursor: pointer;
}
.example-chips button:active { background: var(--surface-2); }
.example-chips button.story-chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.formula-card { margin-bottom: 12px; }
.formula-card .cc-order { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.formula-name { margin: 2px 0 8px; font-size: 15px; font-weight: 700; }
.formula-expr {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 10px;
  text-align: center;
  word-break: break-word;
}
.formula-vars { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.formula-note { margin-top: 0; }

/* ---------- Bảng tra cứu (tính tan / dãy hoạt động / điện hoá / nhận biết ion) ---------- */
.solub-table th, .solub-table td { text-align: center; }
.solub-table th:first-child, .solub-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.solub-table th:first-child { background: var(--surface-2); z-index: 1; }
.solub-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.solub-chip.tan { background: rgba(52, 211, 153, 0.18); color: var(--ok); }
.solub-chip.khong-tan { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
.solub-chip.it-tan { background: rgba(245, 158, 11, 0.18); color: var(--accent); }
.solub-chip.none { color: var(--text-faint); }

.activity-series-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.activity-series-row .as-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  min-width: 44px;
}
.activity-series-row .as-chip .as-rank { font-size: 10px; font-weight: 600; color: var(--text-faint); }
.activity-series-row .as-arrow { display: flex; align-items: center; color: var(--text-faint); font-size: 13px; }

/* ---------- Học theo chương: tổng quan ---------- */
.progress-overview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}
.progress-ring {
  position: relative;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 50%;
}
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .ring-bg { stroke: var(--border); }
.progress-ring .ring-fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
.progress-ring .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
.progress-overview .po-text .po-title { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.progress-overview .po-text .po-sub { font-size: 12px; color: var(--text-dim); }

.free-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.free-mode-row .fm-text .fm-title { font-size: 13.5px; font-weight: 700; }
.free-mode-row .fm-text .fm-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch.on { background: rgba(20, 184, 166, 0.3); border-color: var(--brand); }
.switch.on .knob { transform: translateX(20px); background: var(--brand); }
.switch.locked { cursor: not-allowed; opacity: 0.75; }

.chapter-list { display: flex; flex-direction: column; gap: 12px; }
.chapter-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  position: relative;
}
.chapter-card.locked { opacity: 0.5; }
.chapter-card .cc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.chapter-card .cc-body { flex: 1; min-width: 0; }
.chapter-card .cc-order { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.chapter-card .cc-title { font-size: 15px; font-weight: 700; margin: 2px 0 4px; }
.chapter-card .cc-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.chapter-card .cc-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
  margin-bottom: 6px;
}
.chapter-card .cc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-2));
  border-radius: 999px;
}
.chapter-card .cc-progress-label { font-size: 11px; color: var(--text-faint); }
.chapter-card .cc-activity { font-size: 11px; color: var(--brand); margin-top: 5px; font-weight: 600; }
.chapter-card .cc-lock {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 18px;
  color: var(--text-faint);
}
.chapter-card .cc-check {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ok);
  background: rgba(52, 211, 153, 0.14);
  padding: 3px 9px;
  border-radius: 999px;
}
.chapter-card a.cc-link { position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Chi tiết chương ---------- */
.chapter-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 16px;
}
.chapter-hero .ch-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.chapter-hero h2 { margin: 0; font-size: 17px; font-weight: 800; }
.chapter-hero p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }

.step-status {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-left: 4px;
}
.step-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}
.step-status .dot.done { background: var(--ok); }

/* Nền TRẮNG như trang giấy giáo án — thay vì nền tối mặc định của app. Lý do: màu chữ/tô sáng/màu nền
   ô-đoạn văn lấy nguyên từ file Word (xem doc-import.js) đều được người soạn chọn để nhìn TRÊN NỀN
   TRẮNG (VD chữ trắng trên băng xanh, chữ đen thường...) — đặt lên nền tối của app sẽ sai màu/khó đọc.
   Vì vậy toàn khối bài giảng override lại thành "trang giấy trắng chữ đen" bất kể giao diện app đang
   sáng hay tối, và mọi màu chữ mặc định bên trong đổi từ var(--text) (sáng, dành cho nền tối) sang màu
   tối phù hợp nền trắng. */
.lesson-block {
  margin-bottom: 14px;
  background: #ffffff;
  color: #1f2530;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid #dde2ea;
}
.lesson-block h3 { font-size: calc(16.5px * var(--font-scale)); font-weight: 700; margin: 0 0 10px; color: var(--brand); }
.lesson-block h3.lesson-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lesson-toggle-arrow { display: inline-block; width: 0.8em; flex-shrink: 0; }
.lesson-block ul { margin: 0 0 10px; padding-left: 20px; }
.lesson-block li { font-size: calc(15.5px * var(--font-scale)); line-height: 1.7; color: #1f2530; margin-bottom: 9px; }
.lesson-block > .hint { color: var(--text-faint); }
/* Nhãn "xoá trang" của từng trang trong 1 bài giảng nhiều trang — chỉ hiện số trang + biểu tượng sọt
   rác, đặt lệch phải, mờ nhạt để không chen ngang mạch đọc; chữ "Xoá trang này" chỉ hiện khi rê chuột
   tới (title = tooltip trình duyệt) thay vì hiện thường trực, giúp nhìn bài giảng liền mạch hơn. */
.lesson-page-del-row { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.lesson-page-del { font-size: 11.5px; color: var(--text-faint); text-decoration: none; opacity: 0.55; }
.lesson-page-del:hover { opacity: 1; color: var(--danger); }
/* Nút "Tạo bằng AI" — nền sáng nổi bật để báo hiệu đây là tính năng nâng cao (gói Pro), khác hẳn các
   link xám nhạt (Sửa/Xoá) đứng cạnh trong cùng hàng .hint. */
.ai-generate-link {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1200;
  font-weight: 700;
  font-size: calc(12.5px * var(--font-scale));
  text-decoration: none;
}
.ai-generate-link:hover { filter: brightness(1.08); }
/* Bảng nạp từ Word (xem doc-import.js: extractDocxTableRows) — cuộn ngang trên màn hẹp thay vì để chữ
   bị ép nhỏ xíu vừa khung, giống đúng cách .roster-table-wrap đã làm cho bảng danh sách học sinh. */
.lesson-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.lesson-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: calc(14px * var(--font-scale)); }
.lesson-table td { padding: 8px 12px; border: 1px solid #dde2ea; background: #ffffff; color: #1f2530; }

.custom-lesson-block {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.custom-lesson-block h3 { color: var(--accent); }
.custom-lesson-block .hint a { color: var(--danger); text-decoration: underline; }

/* "Bài" (đơn vị con Tự thêm trong chương, xem chapter-detail.js: activeUnitId) — danh sách ở đầu
   trang, mỗi Bài 1 khối gồm tên + 4 nút vào từng phần (Bài giảng/Flashcard/Trắc nghiệm/Tự kiểm tra). */
.unit-row {
  padding: 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.unit-title { font-weight: 700; font-size: calc(16px * var(--font-scale)); margin-bottom: 6px; }
.unit-owner-actions { margin-bottom: 10px; display: flex; gap: 10px; }
.unit-owner-actions a { color: var(--brand); text-decoration: none; }
.unit-owner-actions .unit-delete { color: var(--danger); }
/* Gọn gàng, kiểu thanh biểu tượng nhỏ — LUÔN 4 cột 1 hàng (kể cả màn hẹp) thay vì xếp 2x2 to nặng
   nề, icon xếp TRÊN chữ (flex-direction: column) để mỗi nút hẹp lại, đọc vẫn rõ nhờ vẫn giữ chữ. */
.unit-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.unit-actions .btn {
  width: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}
.unit-actions .btn .unit-btn-icon { font-size: 16px; }
/* Thanh nhỏ báo đang xem TRONG 1 Bài cụ thể (thay vì phần "Chung") — đặt ngay trên 3 tab chính để
   luôn thấy được đang ở phạm vi nào, tránh nạp/xem nhầm nội dung Bài này sang Bài khác. */
.unit-scope-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid var(--brand);
  font-size: calc(14px * var(--font-scale));
}
.unit-scope-bar a { color: var(--brand); font-weight: 700; }

/* Flashcard */
.flash-wrap { text-align: center; }
.flash-progress { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.flash-card {
  min-height: 180px;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 14px;
  user-select: none;
}
.flash-card .fc-hint {
  position: absolute;
  margin-top: 70px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
}
.flash-card.back { background: linear-gradient(155deg, rgba(20,184,166,0.18), var(--surface)); color: var(--brand); font-weight: 600; font-size: calc(16.5px * var(--font-scale)); }
.flash-nav { display: flex; gap: 10px; }
.flash-nav .btn { flex: 1; }

/* Quiz */
.quiz-progress { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
/* Câu hỏi cắt ảnh từ PDF (xem doc-import.js: extractQuizFromPdf) — nền trắng như trang giấy, giống
   khối bài giảng, vì màu/chữ trong ảnh vốn được soạn để nhìn trên nền trắng. */
.quiz-question-image { background: #ffffff; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; border: 1px solid #dde2ea; }
.quiz-question-image img { width: 100%; display: block; }
/* Đề tràn NHIỀU DÒNG (biết chắc từ lúc cắt — doc-import.js gắn sẵn item.stemMultiline, xem
   getQuizVisual/quiz-common.js) có ảnh RẤT RỘNG so với chiều cao (nhiều dòng nối dọc) — ép theo BỀ
   RỘNG khung như đề 1 dòng sẽ làm chiều cao co lại quá nhỏ, chữ vỡ nét nhìn như bị cắt cụt (đã có giáo
   viên phản ánh cụ thể). Đề nhiều dòng hiện ĐÚNG KÍCH THƯỚC GỐC (không ép co) và cho cuộn ngang nếu
   rộng hơn khung — chữ luôn đọc rõ, đánh đổi bằng việc có thể cần vuốt ngang để đọc hết. */
.quiz-question-image.multiline { overflow-x: auto; overflow-y: hidden; }
.quiz-question-image.multiline img { width: auto; max-width: none; height: auto; }
.quiz-question { font-size: calc(16.5px * var(--font-scale)); font-weight: 700; margin-bottom: 14px; line-height: 1.5; }
.quiz-options { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.quiz-option {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: calc(15px * var(--font-scale));
  cursor: pointer;
  text-align: left;
}
.quiz-option:active { background: var(--surface-2); }
.quiz-option.selected { border-color: var(--brand); background: rgba(20, 184, 166, 0.12); }
.quiz-option.correct { border-color: var(--ok); background: rgba(52, 211, 153, 0.15); color: var(--ok); }
.quiz-option.wrong { border-color: var(--danger); background: rgba(248, 113, 113, 0.15); color: #fecaca; }
.quiz-option:disabled { cursor: default; }
/* Câu "Nhập đáp án" — tái dùng nguyên style .quiz-option/.selected/.correct/.wrong cho <input> thay
   vì viết CSS riêng, chỉ cần đổi con trỏ chuột cho đúng ngữ cảnh gõ chữ. */
input.quiz-option { cursor: text; }
/* Nút chọn/sửa đáp án đúng trong danh sách quản lý câu hỏi (renderQuizItemCard, chapter-detail.js) —
   đáp án đang chọn (đã lưu hoặc mới bấm thử, chưa lưu) tô nổi bật để phân biệt với các đáp án khác. */
.quiz-pick-answer.selected { border-color: var(--brand); background: rgba(20, 184, 166, 0.15); font-weight: 700; }
/* Đáp án tách riêng thành ảnh (Tầng 1 — xem getQuizVisual/doc-import.js) — nhãn A/B/C/D TỰ VẼ bằng
   HTML (không phải pixel), luôn đúng vị trí hiện tại dù đề có trộn thứ tự đáp án hay không. Nền TRẮNG
   trùng màu nền ảnh (ảnh cắt từ PDF luôn nền trắng) để liền mạch, không lộ viền tối phía sau ảnh. */
.quiz-option-image { display: flex; align-items: center; gap: 10px; background: #ffffff; }
.quiz-option-image .quiz-option-label { font-weight: 700; flex-shrink: 0; color: var(--brand); }
/* KHÔNG đặt flex:1/width:100% cho ảnh — ảnh đáp án cắt từ PDF thường rất NHỎ (chỉ vài chữ), ép giãn
   theo bề rộng nút bấm sẽ phóng to vượt xa kích thước gốc, vỡ nét/mờ. Chỉ giới hạn KHÔNG được TRÀN
   (max-width/max-height), còn lại hiện ĐÚNG kích thước gốc — nét thật thế nào giữ nguyên thế đó. */
.quiz-option-image img { max-width: 100%; max-height: 120px; display: block; min-width: 0; }
.quiz-explain {
  font-size: calc(13.5px * var(--font-scale));
  color: var(--text-dim);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 14px;
  display: none;
}
.quiz-explain.show { display: block; }
.quiz-result { text-align: center; padding: 10px 0; }
.quiz-result .qr-score { font-size: 40px; font-weight: 800; color: var(--brand); }
.quiz-result .qr-label { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.quiz-review-item {
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  margin-bottom: 8px;
  font-size: calc(14px * var(--font-scale));
}
.quiz-review-item .qi-q { font-weight: 700; margin-bottom: 5px; color: var(--text); }
.quiz-review-item .qi-status { font-size: 11.5px; font-weight: 700; }
/* Chữ mô tả (loại câu/đáp án đúng, "Tự thêm · Sửa · Xoá · Chia sẻ"...) và các đường link thao tác
   trong danh sách quản lý câu hỏi — ĐẶT MÀU RÕ RÀNG (không mờ) để dễ đọc, dễ bấm đúng thao tác. */
.quiz-review-item > .hint { color: var(--text); }
.quiz-review-item > .hint a { color: var(--brand); font-weight: 700; }
.quiz-review-item.ok .qi-status { color: var(--ok); }
.quiz-review-item.bad .qi-status { color: var(--danger); }

sub { font-size: 0.72em; }

::selection { background: rgba(20, 184, 166, 0.35); }

/* Bảng danh sách học sinh (Nhóm học sinh) — GIỚI HẠN chiều cao + tự cuộn dọc RIÊNG bên trong bảng,
   để việc cuộn xem danh sách dài không kéo theo cuộn mất ô tìm kiếm/sắp xếp phía trên (thanh đó nằm
   NGOÀI khung cuộn này nên luôn đứng yên, không phụ thuộc vào sticky nữa). */
.roster-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 60vh; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Lưới nút hành động (Nhóm học sinh...) — chia cột đều (2 cột trên điện thoại, 3 cột màn rộng
   hơn) thay vì 1 hàng ngang dễ vỡ bố cục trên điện thoại. */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.action-grid .btn { width: 100%; white-space: normal; line-height: 1.3; text-align: center; position: relative; }
/* Nút đang "mở" trong lưới nút kiểu accordion (Quản trị, Hồ sơ giáo viên...) — bấm nút nào thì
   nút đó tô viền màu thương hiệu để biết đang xem đúng mục nào. */
.action-grid .btn.has-open { border-color: var(--brand); color: var(--brand); }
.admin-menu-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.roster-box, .results-box, .chapters-edit-box { margin-top: 14px; }

/* Khung chi tiết 1 nhóm học sinh (bấm vào 1 nhóm ở trang "Nhóm học sinh") — trước đây "mượn" tạm
   .chapter-card (vốn làm cho thẻ danh sách chương nhỏ gọn) để dựng cả khung quản lý đầy đủ, chật
   chội trên màn hình rộng vì khung modal .el-modal giới hạn max-width chỉ 480px. Tách riêng bộ class
   .group-detail-* + nới rộng modal (.group-detail-modal) để có chỗ bố trí khoa học: khối tiêu đề,
   khối thống kê nhanh (số học sinh/chương), rồi mới đến lưới nút hành động — thay vì dồn hết vào 1
   dòng mô tả dài như trước. */
.group-detail-modal { max-width: 760px; }
.group-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.group-detail-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.group-detail-head-text { min-width: 0; }
.group-detail-meta { font-size: 11.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.group-detail-title { font-size: 20px; font-weight: 800; margin-top: 2px; }
/* Sửa tên nhóm ngay tại chỗ — bấm ✏️ cạnh tên để hiện ô nhập + Lưu/Huỷ (xem group-manager.js:
   wireGroupNameEdit), thay tên trực tiếp trên khung nhìn thấy ngay kết quả thay vì hộp thoại prompt. */
.group-title-row { display: flex; align-items: center; gap: 8px; }
.group-name-edit-btn {
  background: none; border: none; padding: 2px; margin: 0; cursor: pointer;
  font-size: 15px; opacity: 0.7; line-height: 1; flex-shrink: 0;
}
.group-name-edit-btn:hover { opacity: 1; }
.group-title-edit-row { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.group-name-input { flex: 1 1 160px; min-width: 0; font-size: 15px; font-weight: 700; padding: 6px 10px; }
.group-title-edit-row .btn { padding: 6px 10px; font-size: 12.5px; flex-shrink: 0; }
.group-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.gd-stat { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.gd-stat-num { font-size: 24px; font-weight: 800; color: var(--brand); line-height: 1.2; }
.gd-stat-label { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.group-detail-section-label { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px; }
.group-detail-danger { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); text-align: right; }
.group-detail-danger .btn { color: #dc2626; border-color: rgba(220, 38, 38, 0.35); }
@media (min-width: 640px) {
  .group-detail-stats { grid-template-columns: repeat(2, minmax(0, 220px)); }
}

@media (min-width: 480px) {
  .action-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Nút chọn nhóm trong "Danh sách nhóm" (trang Nhóm học sinh) — trước chỉ 2 dòng chữ cùng cỡ nhỏ
   (tên đậm + "Mã X · N HS" gộp chung 1 hint), giờ tách 3 tầng rõ rệt: tên nhóm to nhất, mã nhóm màu
   thương hiệu ở giữa, số học sinh nhỏ nhạt nhất — dễ quét mắt khi có nhiều nhóm. */
.group-menu-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; }
.group-menu-btn .gmb-name { font-size: 15.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
.group-menu-btn .gmb-code { font-size: 12.5px; font-weight: 700; color: var(--brand); letter-spacing: 0.06em; }
.group-menu-btn .gmb-count { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.group-menu-btn.has-open .gmb-code { color: var(--brand-2); }
/* Nhóm bị khoá (vượt hạn mức miễn phí) — dim nhẹ, vẫn bấm mở được để xem thông báo/nút gia hạn (xem
   group-manager.js: renderGroupPanel) chứ không disable hẳn nút. */
.group-menu-btn.is-locked { opacity: 0.6; }
/* Nhãn "Đang kiểm tra" — nổi bật màu đỏ, hiện ở thẻ nhóm (danh sách) lẫn đầu khung chi tiết nhóm,
   để giáo viên biết ngay nhóm nào đang trong khung giờ làm bài mà không cần mở từng đề ra xem. */
.gmb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #dc2626;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.group-detail-head .gmb-live-badge { margin-left: auto; flex-shrink: 0; align-self: flex-start; }
/* width: max-content (không phải 100%) để bảng được PHÉP rộng hơn khung chứa khi nhiều cột —
   nếu ép 100% thì trình duyệt sẽ ép chữ nhỏ/xít lại vừa khung thay vì cho cuộn ngang, đúng lỗi
   "hiển thị rất nhỏ, không kéo ngang được" trên điện thoại. min-width: 100% để bảng ít cột vẫn
   lấp đầy khung như bình thường trên màn rộng. */
.roster-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: calc(14.5px * var(--font-scale)); white-space: nowrap; }
.roster-table th, .roster-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.roster-table th { background: var(--surface-2); color: var(--text-dim); font-weight: 700; font-size: calc(12px * var(--font-scale)); text-transform: uppercase; letter-spacing: 0.03em; }
.roster-table tbody tr:last-child td { border-bottom: none; }
.roster-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
/* Các nút hành động trong bảng danh sách (Zalo/Cấp mã thay thế/Xếp vào nhóm/Xoá học sinh) — dùng
   .btn thường (to, dễ bấm) sẽ chiếm quá nhiều chỗ khi xếp chồng nhiều nút trong 1 ô hẹp, trông nặng
   nề so với 1 bảng dữ liệu dày đặc. Thu gọn riêng cho đúng ngữ cảnh này. */
.roster-table td .btn { padding: 6px 10px; font-size: calc(12.5px * var(--font-scale)); }
.presence-online, .presence-offline { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.presence-online { color: var(--ok); }
.presence-offline { color: var(--text-faint); }
/* Bấm vào TÊN (học sinh/giáo viên) trong bảng danh sách mới mở ra thông tin + nút hành động — trước
   đây các nút (Zalo, Cấp mã, Xếp vào nhóm, Xoá,...) hiện SẴN hết trong 1 ô, cộng với nhiều cột thông
   tin (Email/Trường/Lớp/Địa chỉ/SĐT) khiến bảng rất rộng, phải cuộn ngang mới thấy hết ("tràn ra
   ngoài"). Gộp các cột đó + nút hành động vào 1 khung ẩn/hiện theo tên, bảng chính chỉ còn vài cột
   cốt lõi. */
.roster-name-toggle { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-align: left; white-space: normal; }
.roster-name-toggle:hover { text-decoration: underline; }
/* Tên nhóm ở cột "Nhóm đang học" (Quản lý học sinh) dẫn thẳng sang đúng nhóm đó ở trang "Nhóm học
   sinh" — reset "a { color: inherit; text-decoration: none; }" ở trên khiến link mặc định trông y
   hệt chữ thường, không ai biết mà bấm vào; tô màu + gạch chân khi rê chuột để rõ là bấm được. */
.group-link { color: var(--brand); font-weight: 600; }
.group-link:hover { text-decoration: underline; }
.roster-detail-row > td { background: var(--surface-2); white-space: normal; }
.roster-detail-panel { max-width: 640px; }
.roster-detail-panel .hint { margin: 0 0 6px; }

/* Khối thống kê nhanh (trang chủ: "Bạn hiện có X lớp...", "Tích cực trong 7 ngày qua"...) — trước
   đây mỗi số liệu là 1 dòng chữ full-width, chữ ngắn nhưng dòng kéo hết chiều ngang thẻ, để lại
   khoảng trắng rất rộng bên phải, nhìn mất cân đối. Đóng mỗi số liệu vào 1 "ô" nhỏ (icon màu nổi bật
   + chữ), xếp 2 cột cho gọn và cân đối — ô nào đứng 1 mình (VD chỉ có 1 kết quả) thêm class "span-2"
   để chiếm trọn hàng, không để trống nửa bên cạnh. */
.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  min-width: 0;
}
.stat-tile.span-2 { grid-column: 1 / -1; }
.stat-tile-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.stat-tile-icon.hue-teal { background: rgba(20, 184, 166, 0.18); }
.stat-tile-icon.hue-amber { background: rgba(245, 158, 11, 0.2); }
.stat-tile-icon.hue-green { background: rgba(52, 211, 153, 0.18); }
.stat-tile-icon.hue-violet { background: rgba(167, 139, 250, 0.2); }
.stat-tile-text { font-size: calc(12px * var(--font-scale)); color: var(--text-dim); line-height: 1.35; min-width: 0; }
.stat-tile-text strong { color: var(--text); }
/* Khung "Xếp vào nhóm này" (chọn nhóm + xác nhận) — XẾP DỌC (không phải ngang) để ô chọn nhóm tự co
   giãn vừa TÊN NHÓM (bỏ width:100% cũ khiến ô kéo dài hết cột, đẩy nút xác nhận ra ngoài màn hình,
   phải cuộn ngang mới bấm được) và nút xác nhận luôn nằm ngay dưới, gần các nút khác trong cùng ô
   (VD "🗑️ Xoá học sinh") thay vì trôi dạt sang bên phải ngoài tầm nhìn. */
.assign-group-form { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.assign-group-select-inline { width: auto; max-width: 100%; }
/* Ô tìm kiếm + sắp xếp CỐ ĐỊNH lại khi cuộn trang xuống xem danh sách dài — chỉ phần bảng cuộn qua
   bên dưới, không phải cuộn lên lại từ đầu mới gõ tìm/đổi cách sắp xếp được. top = đúng chiều cao
   header (đang sticky sẵn) để 2 thanh dính liền nhau, không đè lên nhau. */
.roster-toolbar-sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  background: var(--surface);
  padding-bottom: 8px;
  margin-bottom: -4px;
}

/* Cây hoa hồng giới thiệu (trang quản trị) — mỗi nhánh con thụt vào + có đường nối dọc bên trái để
   thấy rõ quan hệ giới thiệu nhiều tầng (F1 của F1 = F2...) mà không cần bảng. */
.comm-tree-node { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }
.comm-tree-branch { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--border); }
.comm-tree-student { font-size: 13px; color: var(--text-dim); padding: 3px 0; }

/* Banner "có bản cập nhật mới" (xem app.js) — sticky trên đầu trang, màu thương hiệu (khác màu vàng
   cảnh báo của inAppBrowserWarning vì đây là tin tốt, không phải lỗi). */
#updateAvailableBanner {
  position: sticky;
  top: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(20, 184, 166, 0.16);
  border-bottom: 1px solid var(--brand);
  color: var(--text);
  padding: 10px 14px;
  font-size: calc(12.5px * var(--font-scale));
  line-height: 1.5;
}
#updateAvailableBanner button { flex-shrink: 0; }

/* Cảnh báo mở app trong trình duyệt nhúng của app khác (xem app.js) */
#inAppBrowserWarning {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 158, 11, 0.16);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 14px;
  font-size: calc(12.5px * var(--font-scale));
  line-height: 1.5;
}
#inAppBrowserWarning button {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

/* Nút tăng/giảm cỡ chữ nổi (xem app.js) */
#fontSizeControl {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow);
}
#fontSizeControl button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
#fontSizeControl button:active { background: var(--brand-dark); color: #04231d; }
#fontSizeDown { font-size: 12px; }
#fontSizeUp { font-size: 15px; }
#fontSizeLabel { min-width: 36px; text-align: center; font-size: 11px; color: var(--text-dim); }