/* ═══════════════════════════════════════════════════════════════════
   VIN ICT — Trang học tập môn Tin học (public)
   Rút gọn từ khung giaoducstem.com
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy:   #17337E;
  --blue:   #1F4FB0;
  --blue-d: #14276A;
  --red:    #D81F26;
  --green:  #059669;
  --orange: #D97706;
  --dark:   #1a1a1a;
  --text:   #333;
  --muted:  #6b7280;
  --border: #e3e6ea;
  --bg:     #f4f6f8;
  --white:  #fff;
  --gold:   #D9A441;
  --gold-l: #F0C75E;
  --gold-d: #8A6D33;
  --radius: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,.08);
  --font:   'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-y: scroll; }
body { margin: 0; font-family: var(--font); font-size: 16px; color: var(--text);
       background: var(--bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; color: var(--navy); }
p { margin: 0 0 1em; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

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

/* ── Header ───────────────────────────────────────────────────────── */
.vn-header-top { background: var(--white); border-bottom: 1px solid var(--border); }
.vn-header-top-inner { max-width: 1130px; margin: 0 auto; padding: 0 16px; display: flex;
  align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.vn-logo { display: flex; align-items: center; gap: 12px; }
.vn-logo-icon { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 15px; letter-spacing: .5px; }
.vn-logo-text { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.3px;
  color: var(--navy); white-space: nowrap; }
.vn-logo-text span { color: var(--blue); }
.vn-logo-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.vn-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.vn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;
  font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.vn-btn-primary { background: var(--blue); color: #fff; }
.vn-btn-primary:hover { background: var(--blue-d); color: #fff; }
.vn-btn-ghost { border: 1px solid var(--border); color: var(--navy); background: #fff; }
.vn-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.vn-btn-block { width: 100%; padding: 12px 16px; font-size: 15px; }

.vn-user-chip { display: flex; align-items: center; gap: 10px; }
.vn-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.vn-user-name { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.vn-user-meta { font-size: 11.5px; color: var(--muted); }

/* ── Navbar ───────────────────────────────────────────────────────── */
.vn-navbar { background: var(--navy); position: sticky; top: 0; z-index: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.vn-navbar-inner { max-width: 1130px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: stretch; }
.vn-navbar a { padding: 0 16px; height: 44px; display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); white-space: nowrap;
  transition: background .15s, color .15s; }
.vn-navbar a:hover { color: #fff; background: rgba(255,255,255,.1); }
.vn-navbar a.active { color: #fff; background: var(--blue); }
.vn-nav-toggle { display: none; height: 44px; padding: 0 12px; color: #fff;
  font-size: 20px; align-items: center; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.vn-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff;
  padding: 46px 0 52px; }
.vn-hero-inner { max-width: 1130px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 36px; align-items: center; }
.vn-hero h1 { color: #fff; font-size: 33px; line-height: 1.25; margin-bottom: 12px; }
.vn-hero p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 560px; }
.vn-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.vn-tag { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }

/* ── Login card ───────────────────────────────────────────────────── */
.vn-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.vn-login-card { padding: 24px; }
.vn-login-card h2 { font-size: 18px; margin-bottom: 4px; }
.vn-login-card .vn-login-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.vn-form-row { margin-bottom: 14px; }
.vn-form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--navy);
  margin-bottom: 6px; }
.vn-form-row input { width: 100%; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 15px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s; background: #fff; color: var(--text); }
.vn-form-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,79,176,.12); }
.vn-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.vn-alert { padding: 10px 13px; border-radius: 6px; font-size: 13.5px; margin-bottom: 14px; }
.vn-alert-err { background: #fdf2f3; border: 1px solid #f3c2c8; color: #a01020; }
.vn-alert-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; color: #046c4e; }
.vn-alert-info{ background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ── Sections ─────────────────────────────────────────────────────── */
.vn-sec { margin: 34px 0; }
.vn-sec-hd { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--navy); padding-bottom: 8px; margin-bottom: 16px; }
.vn-sec-title { font-size: 19px; display: flex; align-items: center; gap: 9px; }
.vn-sec-title::before { content: ''; width: 4px; height: 20px; background: var(--blue);
  border-radius: 2px; display: block; }
.vn-sec-more { font-size: 13px; color: var(--muted); }

.vn-grid { display: grid; gap: 16px; }
.vn-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vn-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vn-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.vn-tile { padding: 20px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
a.vn-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.vn-tile-icon { width: 44px; height: 44px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px;
  background: #eef4fb; }
.vn-tile h3 { font-size: 16.5px; margin-bottom: 5px; }
.vn-tile p { font-size: 13.5px; color: var(--muted); margin: 0; }

.vn-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px;
  background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius); }
.vn-empty strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }

/* ── Trang trong (đăng nhập / đổi mật khẩu) ───────────────────────── */
.vn-page-narrow { max-width: 440px; margin: 40px auto 60px; padding: 0 16px; }
.vn-page-wide   { max-width: 1130px; margin: 26px auto 60px; padding: 0 16px; }
.vn-page-title { font-size: 24px; margin-bottom: 18px; }

/* ── Footer ───────────────────────────────────────────────────────── */
.vn-footer { background: var(--navy); color: rgba(255,255,255,.8); margin-top: 44px;
  padding: 30px 0 22px; font-size: 14px; }
.vn-footer-inner { max-width: 1130px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.vn-footer h4 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.vn-footer a { color: rgba(255,255,255,.8); }
.vn-footer a:hover { color: #fff; }
.vn-footer ul { list-style: none; padding: 0; margin: 0; }
.vn-footer li { margin-bottom: 6px; font-size: 13.5px; }
.vn-footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 24px;
  padding-top: 14px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.6); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vn-hero-inner { grid-template-columns: 1fr; }
  .vn-hero h1 { font-size: 26px; }
  .vn-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vn-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vn-footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vn-header-top-inner { height: 64px; }
  .vn-logo-text { font-size: 17px; }
  .vn-logo-sub { display: none; }
  .vn-navbar-inner { overflow-x: auto; }
  .vn-grid-2, .vn-grid-3, .vn-grid-4 { grid-template-columns: 1fr; }
  .vn-user-name, .vn-user-meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   AVATAR + SƠ ĐỒ CHỖ NGỒI  (dùng chung admin và trang học sinh)
   ═══════════════════════════════════════════════════════════════════ */
.av { width: var(--av,54px); height: var(--av,54px); border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; overflow: hidden; background: #eef2f6;
  flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av svg { width: 74%; height: 74%; display: block; }
.av-emo { font-size: calc(var(--av,54px) * .55); line-height: 1; }

.seatmap { --seat-w: 96px; }
.seat-bench { border: 1px dashed #b9c6d4; border-radius: 12px; padding: 12px 14px;
  background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px);
  margin-bottom: 18px; transition: border-color .15s, background .15s; }
.seat-bench.is-empty { opacity: .7; }
.seat-bench.drop-on { border-color: #0B6BB5; background: #eaf3fb; }
.seat-bench-label { font-size: 12px; font-weight: 700; color: #5b6b7c; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.seat-bench-label span { background: #17375E; color: #fff; border-radius: 20px;
  padding: 1px 9px; font-size: 11px; letter-spacing: 0; }
.seat-bench-list { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.seat-bench-hint { font-size: 13px; color: #8899aa; align-self: center; }

.seat-board { background: linear-gradient(180deg,#2f4858,#1e3040); color: rgba(255,255,255,.92);
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 1px;
  padding: 9px; border-radius: 10px 10px 4px 4px; margin: 0 auto 22px;
  max-width: 460px; text-transform: uppercase; }

.seat-groups { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.seat-group { position: relative; padding-top: 6px; }
.seat-group-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; color: #8899aa; text-transform: uppercase; letter-spacing: .6px; }
.seat-row { display: grid; grid-template-columns: repeat(var(--gcols,2), var(--seat-w)); gap: 4px;
  margin-bottom: 4px; }
.seat-row.is-front { margin-bottom: 16px; }

.seat { height: 104px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  position: relative; transition: background .15s, box-shadow .15s, transform .1s; }
.seat.is-free { background: #eef2f6; box-shadow: inset 0 0 0 1px #dde5ec; }
.seat.is-taken { background: #d8ede3; box-shadow: inset 0 0 0 1px #b9ddcb; }
.seat.drop-on { background: #cfe6fa; box-shadow: inset 0 0 0 2px #0B6BB5; transform: scale(1.03); }
.seat-num { font-size: 12px; color: #aebac6; font-weight: 600; }

.seat-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%;
  padding: 6px 3px; text-decoration: none; position: relative; }
.seatmap.is-editing .seat-tile { cursor: grab; }
.seatmap.is-editing .seat-tile:active { cursor: grabbing; }
.seat-tile.dragging { opacity: .35; }
.seat-name { font-size: 11.5px; font-weight: 600; color: #2b3a4a; text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.seat-level { position: absolute; top: -3px; right: 12px; min-width: 20px; height: 20px; border-radius: 10px;
  background: #f0b429; color: #4a2f00; font-size: 11px; font-weight: 800; display: none;
  align-items: center; justify-content: center; padding: 0 5px; }
.seat-level[data-level]:not([data-level=""]) { display: flex; }
.seat-tile.is-me .av { box-shadow: 0 0 0 3px #0B6BB5, inset 0 0 0 2px #fff; }
.seat-tile.is-me .seat-name { color: #0B6BB5; }
.seat-tile.is-other { cursor: default; }
.seat-bench-list .seat-tile { width: var(--seat-w); background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); }

@media (max-width: 820px) {
  .seatmap { --seat-w: 78px; }
  .seat { height: 92px; }
  .seat-groups { gap: 16px; }
}

/* ── Trang lớp của học sinh ──────────────────────────────────────── */
.vn-class-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff;
  border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; }
.vn-class-head h1 { color: #fff; font-size: 26px; }
.vn-class-head p { margin: 2px 0 0; color: rgba(255,255,255,.88); font-size: 14px; }
.vn-class-me { margin-left: auto; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 16px; }
.vn-class-me-name { font-size: 14.5px; font-weight: 700; }
.vn-class-me-sub { font-size: 12px; color: rgba(255,255,255,.85); }
.vn-room { background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 20px 28px; box-shadow: var(--shadow); overflow-x: auto; }

/* ── Số hiệu máy ở góc trên bên trái mỗi vị trí ───────────────────── */
.seat-mach { position: absolute; top: 4px; left: 6px; font-size: 10.5px; font-weight: 700;
  color: #7f8c9b; opacity: .65; letter-spacing: .3px; pointer-events: none; z-index: 1; }
.seat.is-taken .seat-mach { color: #4a6b5c; }
.seat-board { display: none; }

/* ── Sơ đồ chỗ ngồi bản gọn (vừa một khung hình) ──────────────────── */
.seatmap { --seat-w: 78px; }
.seat { height: 84px; }
.seat-row { gap: 3px; margin-bottom: 3px; }
.seat-row.is-front { margin-bottom: 10px; }
.seat-groups { gap: 20px; }
.seat-group { padding-top: 4px; }
.seat-group-tag { top: -12px; font-size: 10px; }
.seat-tile { gap: 3px; padding: 4px 3px; }
.seat-name { font-size: 10.5px; line-height: 1.2; }
.seat-mach { top: 3px; left: 5px; font-size: 9.5px; }
.seat-level { top: -2px; right: 8px; min-width: 18px; height: 18px; font-size: 10px; }
.seat-bench { padding: 9px 12px; margin-bottom: 14px; }
.seat-bench-label { margin-bottom: 7px; font-size: 11px; }
.seat-bench-list { gap: 8px; min-height: 34px; }
.seat-bench-list .seat-tile { width: var(--seat-w); }
@media (max-width: 820px) {
  .seatmap { --seat-w: 68px; }
  .seat { height: 78px; }
  .seat-groups { gap: 12px; }
}

/* Sơ đồ chỗ ngồi — cỡ cuối cùng, cân với phần còn lại của trang */
.seatmap { --seat-w: 70px; }
.seat { height: 76px; border-radius: 7px; }
.seat-row { gap: 3px; margin-bottom: 3px; }
.seat-row.is-front { margin-bottom: 9px; }
.seat-groups { gap: 18px; }
.seat-group-tag { top: -11px; font-size: 9.5px; }
.seat-tile { gap: 2px; padding: 4px 2px; }
.seat-name { font-size: 10px; line-height: 1.15; }
.seat-mach { top: 3px; left: 4px; font-size: 9px; }
.seat-bench { padding: 8px 11px; margin-bottom: 12px; border-radius: 9px; }
.seat-bench-label { margin-bottom: 6px; font-size: 10.5px; }
.seat-bench-list { gap: 7px; min-height: 30px; }
.seat-bench-hint { font-size: 12px; }
@media (max-width: 820px) { .seatmap { --seat-w: 64px; } .seat { height: 72px; } .seat-groups { gap: 10px; } }

/* ── Hàng chờ nằm bên phải, sơ đồ to hơn ─────────────────────────── */
.seatmap-body { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.seat-groups { flex: 0 0 auto; }
.seat-bench { width: 172px; flex: 0 0 auto; margin-bottom: 0; align-self: stretch; }
.seat-bench-list { align-content: flex-start; }
.seatmap:not(.has-bench) .seat-bench { display: none; }
.seatmap.is-editing.is-dragging .seat-bench { display: block; }

/* Sơ đồ to lên khi không còn hàng chờ chiếm chỗ */
.seatmap { --seat-w: 84px; }
.seat { height: 88px; border-radius: 8px; }
.seat-row { gap: 4px; margin-bottom: 4px; }
.seat-row.is-front { margin-bottom: 11px; }
.seat-groups { gap: 22px; }
.seat-name { font-size: 11px; line-height: 1.2; }
.seat-mach { top: 4px; left: 6px; font-size: 10px; }
.seat-bench-list .seat-tile { width: 76px; }
@media (max-width: 900px) {
  .seatmap-body { flex-direction: column; align-items: center; }
  .seat-bench { width: 100%; }
  .seatmap { --seat-w: 68px; }
  .seat { height: 76px; }
}

/* ── Thông tin chung (tin tức) ────────────────────────────────────── */
.vn-news { display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.vn-news:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.vn-news-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.vn-news-noimg { display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: linear-gradient(135deg, #eef4fb, #dbe7f5); }
.vn-news-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vn-news-body h3 { font-size: 16px; line-height: 1.35; }
.vn-news-body p { font-size: 13.5px; color: var(--muted); margin: 0; flex: 1; }
.vn-news-date { font-size: 12.5px; color: var(--muted); }
.vn-news-pin { align-self: flex-start; background: #fffbeb; color: #92400e; font-size: 11.5px;
  font-weight: 600; padding: 2px 9px; border-radius: 20px; }

/* ── Trang bài viết ───────────────────────────────────────────────── */
.vn-back { display: inline-block; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.vn-back:hover { color: var(--blue); }
.vn-article-title { font-size: 28px; line-height: 1.3; margin-bottom: 8px; }
.vn-article-meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.vn-article-cover { width: 100%; border-radius: var(--radius); margin-bottom: 18px; }
.vn-article-sum { font-size: 16.5px; font-weight: 500; color: var(--navy);
  border-left: 4px solid var(--blue); padding-left: 14px; margin-bottom: 18px; }
.vn-article { font-size: 16px; line-height: 1.75; }
.vn-article p { margin: 0 0 1em; }
.vn-article h3 { font-size: 19px; margin: 1.4em 0 .5em; }
.vn-article h4 { font-size: 17px; margin: 1.2em 0 .4em; }
.vn-article ul, .vn-article ol { margin: 0 0 1em; padding-left: 22px; }
.vn-article li { margin-bottom: .4em; }
.vn-article a { color: var(--blue); text-decoration: underline; }
.vn-article img { border-radius: var(--radius); margin: 10px 0; }
.vn-article blockquote { border-left: 4px solid var(--border); padding-left: 14px;
  color: var(--muted); margin: 0 0 1em; }

/* ═══════════════════════════════════════════════════════════════════
   NHẬN DIỆN VINICT — logo, chữ và điểm nhấn vàng
   ═══════════════════════════════════════════════════════════════════ */
.vn-logo-img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.vn-logo-text { font-size: 23px; font-weight: 800; letter-spacing: .5px; line-height: 1.1; }
.vn-logo-text .vn-logo-vin { color: var(--red); }
.vn-logo-text .vn-logo-ict { color: var(--navy); }
.vn-logo-sub { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 3px;
  letter-spacing: .2px; }

/* Vạch nhấn của tiêu đề mục dùng màu vàng nguyệt quế */
.vn-sec-title::before { background: var(--gold); }
.vn-sec-hd { border-bottom-color: var(--navy); }

/* Máy đã có người: nền vàng nhạt thay cho xanh lá */
.seat.is-taken { background: #f8eedb; box-shadow: inset 0 0 0 1px #e6d3a8; }
.seat.is-taken .seat-mach { color: var(--gold-d); }
.seat-level { background: var(--gold); color: #4a2f00; }
.vn-news-pin { background: #fdf3dd; color: var(--gold-d); }
.vn-article-sum { border-left-color: var(--gold); }
.vn-tag { background: rgba(255,255,255,.18); border-color: rgba(240,199,94,.55); }

/* ── Khối logo: to hơn, chữ căn giữa, VINICT giãn chữ ─────────────── */
.vn-logo { gap: 14px; }
.vn-logo-img { width: 66px; height: 66px; }
.vn-logo-info, .vn-logo > div { text-align: center; }
.vn-logo-text { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 27px; font-weight: 700; letter-spacing: .17em; margin-right: -.17em; line-height: 1.05; }
.vn-logo-sub { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 4px;
  letter-spacing: .01em; }
.vn-header-top-inner { height: 84px; }
@media (max-width: 640px) {
  .vn-logo-img { width: 52px; height: 52px; }
  .vn-logo-text { font-size: 21px; letter-spacing: .12em; margin-right: -.12em; }
  .vn-header-top-inner { height: 70px; }
}

/* ── Slide Thông tin chung trên banner ────────────────────────────── */
.vn-slider { position: relative; min-height: 250px; display: flex; flex-direction: column; }
.vn-slide { display: none; animation: slidein .35s ease-out; }
.vn-slide.is-active { display: block; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.vn-slide-tag { display: inline-block; background: rgba(240,199,94,.18); color: var(--gold-l);
  border: 1px solid rgba(240,199,94,.45); font-size: 12px; font-weight: 600;
  padding: 3px 12px; border-radius: 20px; letter-spacing: .3px; margin-bottom: 12px; }
.vn-slide h1 { color: #fff; font-size: 31px; line-height: 1.25; margin-bottom: 10px; }
.vn-slide p { color: rgba(255,255,255,.9); font-size: 15.5px; max-width: 560px; margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.vn-btn-gold { background: var(--gold); color: #3d2c07; font-weight: 700; }
.vn-btn-gold:hover { background: var(--gold-l); color: #3d2c07; }

.vn-slide-ctrl { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; }
.vn-slide-nav { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 22px; line-height: 1;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.vn-slide-nav:hover { background: rgba(255,255,255,.3); }
.vn-slide-dots { display: flex; gap: 7px; }
.vn-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35);
  border: none; padding: 0; transition: background .15s, width .15s; }
.vn-dot.is-active { background: var(--gold); width: 22px; border-radius: 5px; }
.vn-slide-all { margin-left: auto; font-size: 13.5px; color: rgba(255,255,255,.85); }
.vn-slide-all:hover { color: #fff; }

@media (max-width: 900px) {
  .vn-slider { min-height: 0; }
  .vn-slide h1 { font-size: 25px; }
}

/* Chữ hiệu VINICT — serif đậm, nét dày đều, theo tinh thần logo Vingroup */
.vn-logo-text { font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 900; font-size: 25px; letter-spacing: .15em; margin-right: -.15em; }
@media (max-width: 640px) { .vn-logo-text { font-size: 19px; letter-spacing: .1em; margin-right: -.1em; } }

/* Chữ hiệu VINICT — Bitter 800, chân vuông bản to */
.vn-logo-text { font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 800; font-size: 26px; letter-spacing: .15em; margin-right: -.15em; }
@media (max-width: 640px) { .vn-logo-text { font-size: 20px; letter-spacing: .1em; margin-right: -.1em; } }

/* ═══════════════════════════════════════════════════════════════════
   NỀN TỐI TRẦM — lấy theo tông chàm của bộ nhận diện Vinschool
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --ink:    #2A2C4E;   /* chàm trầm — nền chính */
  --ink-2:  #363A6B;   /* nhạt hơn, dùng cho chuyển sắc */
  --ink-d:  #22243C;   /* đậm hơn, dùng cho chân trang */
  --gold:   #CBA45F;   /* vàng dịu hơn, bớt chói */
  --gold-l: #E4C489;
  --gold-d: #7E6430;
}
.vn-navbar { background: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.vn-navbar a.active { background: rgba(255,255,255,.10); box-shadow: inset 0 -3px 0 var(--gold); }
.vn-navbar a:hover { background: rgba(255,255,255,.07); }
.vn-hero { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); }
.vn-footer { background: var(--ink-d); }
.vn-btn-primary { background: #2C4394; }
.vn-btn-primary:hover { background: #1F3170; }
.vn-tag { background: rgba(255,255,255,.10); border-color: rgba(228,196,137,.45); }
.vn-slide-tag { background: rgba(228,196,137,.14); color: var(--gold-l);
  border-color: rgba(228,196,137,.4); }
.vn-btn-gold { background: var(--gold); color: #33260a; }
.vn-btn-gold:hover { background: var(--gold-l); color: #33260a; }
.seat.is-taken { background: #f6efe0; box-shadow: inset 0 0 0 1px #e2d3b2; }
.seat.is-taken .seat-mach { color: var(--gold-d); }
.vn-news-pin { background: #f8f0dd; color: var(--gold-d); }

/* Logo lớn hơn cho cân với chữ hiệu Bitter 800 */
.vn-logo { gap: 16px; }
.vn-logo-img { width: 88px; height: 88px; }
.vn-header-top-inner { height: 104px; }
@media (max-width: 640px) {
  .vn-logo { gap: 10px; }
  .vn-logo-img { width: 62px; height: 62px; }
  .vn-header-top-inner { height: 78px; }
}

/* Logo đã cắt sát viền: hình to hơn mà thanh header mỏng lại */
.vn-logo { gap: 14px; }
.vn-logo-img { width: auto; height: 64px; }
.vn-header-top-inner { height: 80px; }
@media (max-width: 640px) {
  .vn-logo { gap: 9px; }
  .vn-logo-img { height: 46px; }
  .vn-header-top-inner { height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BẢNG ĐIỀU KHIỂN LỚP — đồng hồ · trạng thái · chat · chỗ giáo viên
   ═══════════════════════════════════════════════════════════════════ */
.room-wrap { display: flex; gap: 16px; align-items: flex-start; }
.room-main { flex: 1; min-width: 0; }

/* Chỗ của giáo viên — góc trên bên trái sơ đồ */
.seat-teacher { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: #fdf6e6; border: 1px solid #ead9b4; border-radius: 10px; padding: 7px 14px 7px 8px; }
.seat-teacher-name { font-size: 13px; font-weight: 700; color: #6b5320; line-height: 1.2; }
.seat-teacher-role { font-size: 11px; color: #99823f; }

/* Đồng hồ đếm ngược */
.room-timer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #f2f4f8; border: 1px solid #e0e5ec; border-radius: 10px;
  padding: 10px 16px; margin-bottom: 12px; }
.room-timer-face { display: flex; align-items: baseline; gap: 8px; }
.room-timer-val { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 34px;
  line-height: 1; color: #2A2C4E; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.room-timer-cap { font-size: 12px; color: #7c8898; }
.room-timer.is-running .room-timer-val { color: #2C4394; }
.room-timer.is-soon  .room-timer-val { color: #D97706; }
.room-timer.is-over  .room-timer-val { color: #D81F26; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.room-timer-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.room-timer-ctrl input { width: 62px; padding: 5px 8px; text-align: center; font-size: 14px;
  border: 1px solid #dbe1e9; border-radius: 5px; }
.room-timer.is-off, .room-status.is-off, .room-chat.is-off { opacity: .45; }

/* Thanh trạng thái */
.room-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.room-status-label { font-size: 13px; color: #6b7280; font-weight: 600; }
.room-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1.5px solid #e0e5ec; border-radius: 22px; background: #fff; font-size: 13.5px;
  font-weight: 600; color: #46505e; cursor: pointer; transition: all .15s; }
.room-btn:hover:not(:disabled) { border-color: var(--c); color: var(--c); }
.room-btn.is-on { border-color: var(--c); background: var(--c); color: #fff; }
.room-btn:disabled { opacity: .5; cursor: not-allowed; }
.room-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  background: #fff; border: 1px solid #e0e5ec; border-radius: 20px; padding: 4px 12px; color: #46505e; }
.room-chip b { color: var(--c); font-size: 13px; }
.room-lock { font-size: 12px; color: #9aa3ad; }

/* Bảng bật/tắt của giáo viên */
.room-flags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.room-flag { display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid #e0e5ec; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.room-flag select { border: 1px solid #dbe1e9; border-radius: 5px; padding: 4px 6px; font-size: 12.5px; }

/* Huy hiệu trạng thái trên avatar */
.seat-status { position: absolute; top: -4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); display: none;
  align-items: center; justify-content: center; font-size: 12px; z-index: 2; }
.seat-status.is-on { display: flex; animation: pop .25s ease-out; }
.seat-status.s-hand { box-shadow: 0 0 0 2px #f59e0b; }
.seat-status.s-help { box-shadow: 0 0 0 2px #D81F26; }
.seat-status.s-done { box-shadow: 0 0 0 2px #059669; }
.seat-status.s-doing{ box-shadow: 0 0 0 2px #2C4394; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* Khung chat */
.room-chat { width: 296px; flex: 0 0 auto; background: #fff; border: 1px solid #e0e5ec;
  border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.room-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid #eef1f5; font-size: 13px; font-weight: 700; color: #2A2C4E; }
.room-chat-list { height: 330px; overflow-y: auto; padding: 10px 12px; display: flex;
  flex-direction: column; gap: 8px; background: #fafbfd; }
.room-chat-empty { font-size: 12.5px; color: #9aa3ad; text-align: center; margin: auto; }
.room-msg { max-width: 92%; background: #fff; border: 1px solid #e8ecf2; border-radius: 10px;
  padding: 6px 10px; font-size: 13px; line-height: 1.45; }
.room-msg-name { display: block; font-size: 11px; font-weight: 700; color: #7c8898; margin-bottom: 1px; }
.room-msg-text { color: #333; word-break: break-word; }
.room-msg.is-gv { background: #fdf6e6; border-color: #ead9b4; }
.room-msg.is-gv .room-msg-name { color: #9a7a2c; }
.room-msg.is-mine { align-self: flex-end; background: #eaf0fc; border-color: #ccd9f4; }
.room-chat-form { display: flex; gap: 6px; padding: 9px 10px; border-top: 1px solid #eef1f5; }
.room-chat-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #dbe1e9;
  border-radius: 6px; font-size: 13px; font-family: inherit; }
.room-chat-form button { padding: 7px 14px; border-radius: 6px; background: #2C4394; color: #fff;
  font-size: 13px; font-weight: 600; border: none; cursor: pointer; }
.room-chat-form button:disabled, .room-chat-form input:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .room-wrap { flex-direction: column; }
  .room-chat { width: 100%; }
  .room-timer-ctrl { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   CỘT ĐIỀU KHIỂN BÊN PHẢI + HUY HIỆU TRẠNG THÁI TRÊN AVATAR (bản gọn)
   ═══════════════════════════════════════════════════════════════════ */
.room-wrap { display: flex; gap: 14px; align-items: flex-start; }
.room-main { flex: 1; min-width: 0; }
.room-side { width: 282px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* Sơ đồ to nhất có thể mà vẫn trọn khung hình */
.seatmap { --seat-w: 104px; }
.seat { height: 118px; border-radius: 9px; }
.seat-row { gap: 4px; margin-bottom: 4px; }
.seat-row.is-front { margin-bottom: 10px; }
.seat-groups { gap: 20px; }
.seat-tile { gap: 4px; padding: 6px 3px; }
.seat-name { font-size: 12px; line-height: 1.2; }
.seat-mach { top: 4px; left: 6px; font-size: 10px; }
.seat-bench { width: 150px; }
.seat-bench-list .seat-tile { width: 118px; }
@media (max-height: 820px) {
  .seatmap { --seat-w: 92px; }
  .seat { height: 104px; }
  .seat-name { font-size: 11px; }
}

/* Chỗ giáo viên — cùng hàng với hàng ghế đầu, ô vuông như học sinh */
.seatmap-body > .seat-teacher { width: var(--seat-w); flex: 0 0 auto; margin: 4px 16px 0 0;
  background: #fdf4e2; box-shadow: inset 0 0 0 1px #e8d5ac; }
.seat-teacher .seat-name { color: #7a5f1f; font-weight: 700; }

/* Huy hiệu trạng thái phủ lên avatar */
.seat-ava { position: relative; display: inline-flex; }
.seat-status { position: absolute; inset: -3px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  background: rgba(30,32,56,.55); backdrop-filter: blur(1px); z-index: 3;
  box-shadow: 0 0 0 3px var(--sc, #fff); }
.seat-status.is-on { display: flex; animation: pop .22s ease-out; }
.seat-status.s-hand  { --sc: #f59e0b; }
.seat-status.s-doing { --sc: #2C4394; }
.seat-status.s-done  { --sc: #059669; }
.seat-status.s-help  { --sc: #D81F26; }
.seat-tile.has-status .seat-name { margin-top: 4px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }

/* Đồng hồ */
.room-timer { background: #f2f4f8; border: 1px solid #e0e5ec; border-radius: 9px;
  padding: 8px 10px; text-align: center; }
.room-timer-val { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 36px;
  line-height: 1.05; color: #2A2C4E; letter-spacing: 1px; font-variant-numeric: tabular-nums; display: block; }
.room-timer.is-running .room-timer-val { color: #2C4394; }
.room-timer.is-soon    .room-timer-val { color: #D97706; }
.room-timer.is-over    .room-timer-val { color: #D81F26; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.room-timer-ctrl { display: flex; align-items: center; gap: 3px; margin-top: 6px; justify-content: center; }
.room-timer-ctrl input { width: 44px; padding: 3px 4px; text-align: center; font-size: 13px;
  border: 1px solid #dbe1e9; border-radius: 4px; }
.room-timer-ctrl span { color: #9aa3ad; }
.room-timer-ctrl button { padding: 4px 8px; font-size: 12.5px; border: 1px solid #dbe1e9;
  border-radius: 4px; background: #fff; color: #46505e; cursor: pointer; }
.room-timer-ctrl button:hover { border-color: #2C4394; color: #2C4394; }
.room-timer-ctrl button.is-go { background: #2C4394; color: #fff; border-color: #2C4394; }

/* Bốn biểu tượng trạng thái trên một hàng */
.room-status { display: flex; gap: 6px; align-items: center; }
.room-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; border: 1.5px solid #e0e5ec; border-radius: 9px; background: #fff;
  cursor: pointer; transition: all .14s; padding: 0; }
.room-btn-ico { font-size: 19px; line-height: 1; }
.room-btn b { font-size: 12px; color: var(--c); }
.room-btn:hover:not(:disabled) { border-color: var(--c); transform: translateY(-1px); }
.room-btn.is-on { border-color: var(--c); background: var(--c); box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.room-btn.is-on b { color: #fff; }
.room-btn:disabled { opacity: .45; cursor: not-allowed; }
.room-mini { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #e6d0d3;
  background: #fff; color: #D81F26; font-size: 13px; cursor: pointer; flex: 0 0 auto; }
.room-mini:hover { background: #fdf2f3; }
.room-lock { font-size: 13px; }

/* Ba ô bật/tắt */
.room-flags { display: flex; gap: 5px; }
.room-flag { flex: 1; display: flex; align-items: center; gap: 4px; background: #fff;
  border: 1px solid #e0e5ec; border-radius: 7px; padding: 3px 5px; font-size: 13px; }
.room-flag select { flex: 1; min-width: 0; border: none; font-size: 12px; padding: 2px;
  background: transparent; color: #46505e; }

/* Khung thảo luận */
.room-chat { background: #fff; border: 1px solid #e0e5ec; border-radius: 9px;
  display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.room-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid #eef1f5; font-size: 13px; font-weight: 700; color: #2A2C4E; }
.room-chat-list { height: 300px; overflow-y: auto; padding: 9px 10px; display: flex;
  flex-direction: column; gap: 7px; background: #fafbfd; }
.room-chat-empty { font-size: 12.5px; color: #9aa3ad; text-align: center; margin: auto; }
.room-msg { max-width: 94%; background: #fff; border: 1px solid #e8ecf2; border-radius: 9px;
  padding: 5px 9px; font-size: 12.5px; line-height: 1.45; }
.room-msg-name { display: block; font-size: 10.5px; font-weight: 700; color: #7c8898; }
.room-msg-text { color: #333; word-break: break-word; }
.room-msg.is-gv { background: #fdf6e6; border-color: #ead9b4; }
.room-msg.is-gv .room-msg-name { color: #9a7a2c; }
.room-msg.is-mine { align-self: flex-end; background: #eaf0fc; border-color: #ccd9f4; }
.room-chat-form { display: flex; gap: 5px; padding: 7px 8px; border-top: 1px solid #eef1f5; }
.room-chat-form input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid #dbe1e9;
  border-radius: 6px; font-size: 12.5px; font-family: inherit; }
.room-chat-form button { width: 34px; border-radius: 6px; background: #2C4394; color: #fff;
  font-size: 13px; border: none; cursor: pointer; }
.room-chat-form button:disabled, .room-chat-form input:disabled { opacity: .5; cursor: not-allowed; }
.room-timer.is-off, .room-status.is-off, .room-chat.is-off { opacity: .45; }

@media (max-width: 980px) {
  .room-wrap { flex-direction: column; }
  .room-side { width: 100%; }
  .room-chat-list { height: 220px; }
}

/* Sơ đồ tự co theo chiều cao màn hình để luôn trọn khung hình */
@media (max-height: 899px) {
  .seatmap { --seat-w: 94px; }
  .seat { height: 104px; }
  .seat-tile .av { --av: 48px !important; }
  .seat-status { font-size: 26px; }
  .seat-name { font-size: 11.5px; }
  .room-chat-list { height: 232px; }
  .room-timer-val { font-size: 31px; }
}
@media (max-height: 790px) {
  .seatmap { --seat-w: 84px; }
  .seat { height: 90px; }
  .seat-tile .av { --av: 40px !important; }
  .seat-status { font-size: 22px; }
  .seat-name { font-size: 11px; }
  .seat-row { gap: 3px; margin-bottom: 3px; }
  .seat-row.is-front { margin-bottom: 8px; }
  .seat-groups { gap: 16px; }
  .room-chat-list { height: 176px; }
  .room-timer-val { font-size: 27px; }
  .room-btn { height: 34px; }
  .room-btn-ico { font-size: 17px; }
}

/* Huy hiệu trạng thái phải phủ trọn avatar (ghi đè kích thước cũ) */
.seat-ava .seat-status { width: auto !important; height: auto !important;
  top: -3px !important; left: -3px !important; right: -3px; bottom: -3px; }

/* Đồng hồ căn giữa · cột bên phải kết thúc ĐÚNG cạnh dưới sơ đồ lớp.
   Cách làm: xếp lưới hai cột, cho cột phải chiều cao 0 nên nó không kéo dài
   hàng nữa — chiều cao hàng chỉ do sơ đồ lớp quyết định — rồi min-height:100%
   kéo cột phải cao đúng bằng hàng. Tin nhắn nhiều bao nhiêu cũng chỉ cuộn
   bên trong khung Thảo luận. */
.room-timer { display: block; text-align: center; }
.room-timer-val { display: block; text-align: center; }
.room-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 282px; align-items: stretch; }
.room-main { min-width: 0; }
.room-side { width: auto; height: 0; min-height: 100%; }
.room-chat { flex: 1 1 auto; min-height: 120px; }
.room-chat-list { height: auto !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Màn hẹp: hai khối xếp dọc, lúc này khung Thảo luận tự chặn theo màn hình */
@media (max-width: 980px) {
  .room-wrap { grid-template-columns: 1fr; }
  .room-side { height: auto; min-height: 0; }
  .room-chat-list { max-height: 55vh; }
}

/* ═══════════════════════════════════════════════════════════════════
   HIỆU ỨNG HUY HIỆU · HỘP XÁC NHẬN · CHỌN LỚP CHO TÀI KHOẢN GIÁO VIÊN
   ═══════════════════════════════════════════════════════════════════ */
/* Hoàn thành: đứng yên. Ba loại còn lại có hiệu ứng riêng, tốc độ vừa phải. */
.seat-status.is-on          { animation: pop .22s ease-out; }
.seat-status.s-done.is-on   { animation: pop .22s ease-out; }
.seat-status.s-doing.is-on  { animation: pop .22s ease-out, wiggle .75s ease-in-out .22s infinite; }
.seat-status.s-hand.is-on   { animation: pop .22s ease-out, breathe 1.4s ease-in-out .22s infinite; }
.seat-status.s-help.is-on   { animation: pop .22s ease-out, spin 2.6s linear .22s infinite; }
@keyframes wiggle  { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .seat-status.is-on { animation: none !important; }
}

/* Hộp xác nhận */
.room-ask { display: none; position: fixed; inset: 0; z-index: 3000; padding: 20px;
  background: rgba(26,28,48,.5); align-items: center; justify-content: center; }
.room-ask.open { display: flex; }
.room-ask-box { background: #fff; border-radius: 14px; padding: 22px 24px; width: 100%;
  max-width: 360px; box-shadow: 0 18px 50px rgba(0,0,0,.3); text-align: center;
  animation: pop .18s ease-out; }
.room-ask-text { font-size: 16px; font-weight: 600; color: #2A2C4E; margin: 0 0 18px;
  line-height: 1.5; }
.room-ask-btns { display: flex; gap: 10px; }
.room-ask-btns button { flex: 1; padding: 10px; border-radius: 8px; font-size: 14.5px;
  font-weight: 700; font-family: inherit; border: none; cursor: pointer; }
.room-ask-no  { background: #eef1f5; color: #56606e; }
.room-ask-no:hover  { background: #e2e7ee; }
.room-ask-yes { background: #2C4394; color: #fff; }
.room-ask-yes:hover { background: #1F3170; }

/* Thanh chọn lớp của tài khoản giáo viên */
.room-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: #fdf4e2; border: 1px solid #e8d5ac; border-radius: 9px; padding: 8px 14px;
  font-size: 13.5px; color: #6b5320; font-weight: 600; }
.room-pick select { padding: 5px 9px; border: 1px solid #e0cfa4; border-radius: 6px;
  font-size: 13.5px; font-family: inherit; background: #fff; color: #4a3a12; font-weight: 700; }
.room-pick-note { margin-left: auto; font-weight: 400; font-size: 12.5px; color: #99823f; }

/* Bỏ nhãn DÃY 1/2/3 trên sơ đồ */
.seat-group-tag { display: none; }
.seat-group { padding-top: 0; }

/* Chọn lớp của tài khoản giáo viên — nằm gọn bên phải thanh menu */
.vn-nav-pick { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: rgba(255,255,255,.75); }
.vn-nav-pick select { height: 26px; padding: 0 6px; border-radius: 5px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); cursor: pointer; }
.vn-nav-pick select option { color: #333; background: #fff; }
@media (max-width: 640px) { .vn-nav-pick span { display: none; } }

/* ── Chấm xanh đang online ────────────────────────────────────────── */
.seat-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px;
  border-radius: 50%; background: #cbd3dc; border: 2px solid #fff; z-index: 4; display: none; }
.seat-dot.is-on { display: block; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }

/* ── Menu tài khoản học sinh ──────────────────────────────────────── */
.vn-acc { position: relative; }
.vn-user-chip { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border);
  border-radius: 30px; padding: 4px 12px 4px 4px; cursor: pointer; font-family: inherit; }
.vn-user-chip:hover { border-color: var(--blue); }
.vn-user-chip > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.vn-acc-caret { color: var(--muted); font-size: 11px; }
.vn-acc-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 244px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18); z-index: 1200; }
.vn-acc.open .vn-acc-menu { display: block; }
.vn-acc-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.vn-acc-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.vn-acc-sub { font-size: 12px; color: var(--muted); }
.vn-acc-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--text); background: none; border: none; cursor: pointer;
  font-family: inherit; }
.vn-acc-item:hover { background: #f1f5fa; color: var(--blue); }
.vn-acc-item.is-out { color: var(--red); }
.vn-acc-item.is-out:hover { background: #fdf2f3; color: var(--red); }

/* ── Hộp chọn ảnh đại diện của học sinh ───────────────────────────── */
.vn-ava-modal { display: none; position: fixed; inset: 0; background: rgba(26,28,48,.5); z-index: 3000;
  align-items: center; justify-content: center; padding: 20px; }
.vn-ava-modal.open { display: flex; }
.vn-ava-box { background: #fff; border-radius: 14px; padding: 22px 24px; width: 100%; max-width: 420px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.vn-ava-box h3 { font-size: 17px; margin-bottom: 14px; }
.vn-ava-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 14px; }
.vn-ava-opt { font-size: 22px; line-height: 1; padding: 7px 0; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; cursor: pointer; }
.vn-ava-opt:hover { border-color: var(--blue); }
.vn-ava-opt.sel { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,79,176,.18); }
.vn-ava-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.vn-ava-col { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 1px var(--border); }
.vn-ava-col.sel { box-shadow: 0 0 0 3px var(--blue); }
.vn-ava-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Chip tài khoản: bỏ khung viền, giữ nguyên avatar */
.vn-user-chip { background: none; border: none; border-radius: 0; padding: 2px 4px; }
.vn-user-chip:hover { border: none; }
.vn-user-chip:hover .vn-user-name { color: var(--blue); }

/* Chỉ khối chữ mới xếp dọc — avatar giữ nguyên căn giữa */
.vn-user-chip > span.av { display: inline-flex; align-items: center; justify-content: center; }
.vn-user-chip > span:not(.av) { display: flex; flex-direction: column; align-items: flex-start; }
/* Khung trống chờ nội dung */
.vn-empty:empty { min-height: 120px; }

/* ── Ví dung lượng của học sinh ──────────────────────────────────────────── */
.vn-bits { display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
           background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
           border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 800;
           white-space: nowrap; }
.vn-bits:hover { background: #d1fae5; }
.vn-bits.is-debt { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.vn-bits-ico { font-size: 13px; }

.vn-disk { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 18px;
           align-items: stretch; margin-bottom: 16px; }
.vn-disk-main { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0;
                border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column;
                justify-content: center; }
.vn-disk-side { background: var(--card, #fff); border: 1px solid var(--line, #e2e8f0);
                border-radius: 14px; padding: 16px 18px; }
.vn-disk-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .4px; color: #64748b; margin-bottom: 4px; }
.vn-disk-val { font-family: Bitter, serif; font-weight: 800; font-size: 34px;
               line-height: 1.1; color: #047857; }
.vn-disk-val.is-debt { color: #b91c1c; }
.vn-disk-warn { margin-top: 8px; font-size: 12.5px; color: #b91c1c; font-weight: 600; }
.vn-disk-earned { font-family: Bitter, serif; font-weight: 800; font-size: 22px; color: #1e293b; }
.vn-bar { height: 9px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin: 10px 0 6px; }
.vn-bar > span { display: block; height: 100%; border-radius: 999px;
                 background: linear-gradient(90deg, #34d399, #059669); }
.vn-disk-next { font-size: 12.5px; color: #475569; }
.vn-disk-tip { margin-top: 10px; font-size: 11.5px; color: #94a3b8; letter-spacing: .2px; }

.vn-log { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; }
.vn-log-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px;
              font-size: 13.5px; border-bottom: 1px solid var(--line, #e2e8f0); }
.vn-log-row:last-child { border-bottom: 0; }
.vn-log-row:nth-child(odd) { background: #f8fafc; }
.vn-log-when { color: #94a3b8; font-size: 12px; width: 82px; flex: none; }
.vn-log-lb { flex: 1; }
.vn-log-lb em { color: #94a3b8; font-style: normal; }
.vn-log-amt { font-weight: 800; white-space: nowrap; }
.vn-log-amt.is-up { color: #047857; }
.vn-log-amt.is-down { color: #b91c1c; }

@media (max-width: 720px) {
  .vn-disk { grid-template-columns: 1fr; }
  .vn-bits { padding: 4px 9px; font-size: 12px; }
}

/* ── Trang lịch sử dung lượng ────────────────────────────────────────────── */
.vn-crumb { margin-bottom: 8px; font-size: 13.5px; }
.vn-crumb a { color: #64748b; text-decoration: none; }
.vn-crumb a:hover { color: var(--brand, #1e3a8a); }
.vn-sec-more { margin-left: auto; font-size: 13px; font-weight: 600;
               color: var(--brand, #1e3a8a); text-decoration: none; white-space: nowrap; }
.vn-sec-more:hover { text-decoration: underline; }

.vn-disk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 18px; }
.vn-stat { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 13px 15px; }
.vn-stat-lb { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .4px; color: #94a3b8; margin-bottom: 3px; }
.vn-stat-val { font-family: Bitter, serif; font-weight: 800; font-size: 20px; color: #1e293b; }
.vn-stat-val.is-up { color: #047857; }
.vn-stat-val.is-down { color: #b91c1c; }

.vn-log-full .vn-log-row { font-size: 13px; }
.vn-log-row.is-head { background: #f1f5f9; font-weight: 700; font-size: 12px;
                      text-transform: uppercase; letter-spacing: .3px; color: #64748b; }
.vn-log-bal { width: 84px; flex: none; text-align: right; color: #64748b; }
.vn-log-full .vn-log-amt { width: 84px; flex: none; text-align: right; }

.vn-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.vn-pager a { min-width: 32px; text-align: center; padding: 5px 9px; border-radius: 8px;
              border: 1px solid var(--line, #e2e8f0); text-decoration: none;
              color: #334155; font-size: 13px; font-weight: 600; }
.vn-pager a.active { background: var(--brand, #1e3a8a); color: #fff; border-color: var(--brand, #1e3a8a); }

@media (max-width: 720px) {
  .vn-disk-stats { grid-template-columns: repeat(2, 1fr); }
  .vn-log-bal { display: none; }
}

/* ── Thư viện: cửa hàng avatar ───────────────────────────────────────────── */
.vn-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vn-pack { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 14px 16px; }
.vn-pack.is-mine { border-color: #a7f3d0; background: #f0fdf4; }
.vn-pack-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 15px; }
.vn-pack-ico { font-size: 20px; }
.vn-tag-mine { margin-left: auto; font-size: 11px; font-weight: 800; color: #047857;
               background: #d1fae5; border-radius: 999px; padding: 2px 8px; }
.vn-pack-emo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vn-pack-emo span { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
                    background: #f1f5f9; border-radius: 9px; font-size: 17px; }

/* ── Thư viện: danh sách trò chơi ────────────────────────────────────────── */
.vn-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.vn-game { display: flex; gap: 13px; align-items: flex-start; text-decoration: none; color: inherit;
           background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 15px 16px; }
.vn-game:hover { border-color: var(--brand, #1e3a8a); box-shadow: 0 6px 18px rgba(15,23,42,.07); }
.vn-game-ico { font-size: 30px; line-height: 1; }
.vn-game-body { display: flex; flex-direction: column; gap: 4px; }
.vn-game-name { font-size: 15.5px; }
.vn-game-intro { font-size: 13px; color: #64748b; }
.vn-game-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vn-chip { font-size: 11.5px; font-weight: 700; background: #f1f5f9; color: #475569;
           border-radius: 999px; padding: 3px 9px; }
.vn-chip.is-on { background: #ecfdf5; color: #047857; }

/* ── Màn chơi ────────────────────────────────────────────────────────────── */
.g-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.g-stage { background: #0f172a; border-radius: 16px; padding: 10px; display: flex; justify-content: center; }
.g-canvas { width: 288px; max-width: 100%; height: auto; border-radius: 10px;
            touch-action: none; cursor: pointer; display: block; }
.g-stage.is-playing { box-shadow: 0 0 0 3px rgba(34,197,94,.5); }

.g-side { display: flex; flex-direction: column; gap: 12px; }
.g-card { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px; padding: 13px 15px; }
.g-card-title { font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.g-card-title span { font-weight: 500; font-size: 11.5px; margin-left: 4px; }
.g-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
         font-size: 13.5px; padding: 4px 0; }
.g-row span { color: #64748b; }
.g-row strong { font-weight: 800; }

.g-gear { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
          background: #f8fafc; border: 1.5px solid var(--line, #e2e8f0); border-radius: 11px;
          padding: 9px 11px; font: inherit; margin-bottom: 7px; }
.g-gear:hover { border-color: #94a3b8; }
.g-gear.is-on { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 2px rgba(245,158,11,.18); }
.g-gear-ico { font-size: 20px; }
.g-gear-body { flex: 1; display: flex; flex-direction: column; }
.g-gear-body strong { font-size: 13px; }
.g-gear-body span { font-size: 11.5px; color: #64748b; }
.g-gear-price { font-size: 12.5px; font-weight: 800; color: #b45309; white-space: nowrap; }

.g-play { width: 100%; justify-content: center; font-size: 15px; padding: 11px 16px; }
.g-play #gTotal { margin-left: 7px; opacity: .85; font-weight: 700; }
.g-msg { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.g-msg.is-ok  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.g-msg.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ── Bảng xếp hạng ───────────────────────────────────────────────────────── */
.g-rank { width: 46px; flex: none; font-weight: 800; }
.g-cls  { width: 54px; flex: none; color: #64748b; font-size: 12.5px; }
.g-col  { width: 34px; flex: none; text-align: center; font-weight: 700; }
.g-col.is-none { color: #cbd5e1; font-weight: 500; }
.g-sum  { width: 52px; flex: none; text-align: right; font-weight: 800; color: var(--brand, #1e3a8a); }
.vn-log-row.is-me { background: #eff6ff; font-weight: 700; }
.vn-log-row.is-me em { color: var(--brand, #1e3a8a); font-style: normal; }

.vn-tabs-lite { display: flex; gap: 8px; margin-bottom: 14px; }
.vn-tabs-lite a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-size: 13.5px;
                  font-weight: 700; color: #475569; background: #f1f5f9; }
.vn-tabs-lite a.active { background: var(--brand, #1e3a8a); color: #fff; }

@media (max-width: 860px) {
  .g-wrap { grid-template-columns: 1fr; }
  .g-side { order: 2; }
}

/* ── Hào quang avatar: Tinh anh (spark) · Quý (glow) · Huyền thoại (aura) ── */
.av-fx { position: relative; overflow: visible; }
.av-fx::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
                pointer-events: none; }
.av-fx-spark::after { box-shadow: 0 0 0 2px rgba(56,189,248,.9), 0 0 8px 2px rgba(56,189,248,.35); }
.av-fx-glow::after { box-shadow: 0 0 0 2px rgba(251,191,36,.95), 0 0 11px 3px rgba(251,191,36,.5); }
.av-fx-aura::after {
  background: conic-gradient(from 0deg, #f87171, #fbbf24, #4ade80, #60a5fa, #a78bfa, #f87171);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: vn-aura 3s linear infinite; }
.av-fx-aura::before { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  pointer-events: none; box-shadow: 0 0 14px 4px rgba(167,139,250,.5); animation: vn-pulse 2s ease-in-out infinite; }
@keyframes vn-aura  { to { transform: rotate(360deg); } }
@keyframes vn-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .av-fx-aura::after, .av-fx-aura::before { animation: none; }
}

/* ── Cửa hàng avatar: mua lẻ, chia nhóm theo độ quý hiếm ─────────────────── */
.vn-tier { margin-bottom: 18px; }
.vn-tier-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.vn-tier-name { font-size: 15px; font-weight: 800; padding: 2px 12px; border-radius: 999px; }
.vn-tier-thuong { background: #f1f5f9; color: #475569; }
.vn-tier-hiem   { background: #dbeafe; color: #1d4ed8; }
.vn-tier-quy    { background: #fef3c7; color: #b45309; }
.vn-tier-huyen  { background: linear-gradient(90deg,#fce7f3,#ede9fe,#dbeafe); color: #6d28d9; }
.vn-tier-price { font-size: 13px; font-weight: 800; color: #334155; }

.vn-ava-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.vn-ava-buy { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
              background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px;
              padding: 11px 6px 8px; font: inherit; }
.vn-ava-buy:hover:not(:disabled) { border-color: var(--brand, #1e3a8a); transform: translateY(-2px);
                                   box-shadow: 0 6px 16px rgba(15,23,42,.09); }
.vn-ava-buy:disabled { cursor: default; }
.vn-ava-buy.is-mine { background: #f0fdf4; border-color: #a7f3d0; }
.vn-ava-tag { font-size: 11.5px; font-weight: 800; color: #475569; }
.vn-ava-buy.is-mine .vn-ava-tag { color: #047857; }
.vn-ava-none { grid-column: 1 / -1; text-align: center; padding: 18px 10px; color: #64748b; font-size: 13.5px; }
.vn-ava-none a { color: var(--brand, #1e3a8a); font-weight: 700; }

.vn-streak { font-size: 13px; padding: 8px 11px; border-radius: 10px; margin-bottom: 12px;
             background: #f1f5f9; color: #64748b; line-height: 1.45; }
.vn-streak.is-on { background: linear-gradient(90deg,#fff7ed,#ffedd5); color: #b45309;
                   border: 1px solid #fed7aa; }

/* ── Tin học cơ bản: thẻ thử thách ───────────────────────────────────────── */
.vn-basic { display: flex; flex-direction: column; gap: 9px; }
.vn-tt { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px; overflow: hidden; }
.vn-tt[open] { border-color: var(--brand, #1e3a8a); box-shadow: 0 4px 14px rgba(15,23,42,.07); }
.vn-tt > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
                   cursor: pointer; list-style: none; }
.vn-tt > summary::-webkit-details-marker { display: none; }
.vn-tt > summary:hover { background: #f8fafc; }
.vn-tt-ico { font-size: 24px; line-height: 1; flex: none; }
.vn-tt-hd { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vn-tt-hd strong { font-size: 15px; }
.vn-tt-goal { font-size: 12.5px; color: #64748b; }
.vn-tt-min { flex: none; font-size: 12.5px; font-weight: 800; color: #475569;
             background: #f1f5f9; border-radius: 999px; padding: 3px 10px; }
.vn-tt-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
              padding: 4px 16px 16px 52px; border-top: 1px dashed var(--line, #e2e8f0); margin-top: 2px; }
.vn-tt-lb { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
            color: #94a3b8; margin: 12px 0 6px; }
.vn-tt-steps { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.vn-tt-steps li { margin-bottom: 3px; }
.vn-tt-levels { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.vn-tt-levels li { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.vn-lv { flex: none; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.vn-lv-0 { background: #f1f5f9; color: #94a3b8; }
.vn-lv-1 { background: #fef3c7; color: #b45309; }
.vn-lv-2 { background: #dbeafe; color: #1d4ed8; }
.vn-lv-3 { background: #dcfce7; color: #047857; }

@media (max-width: 720px) {
  .vn-tt-body { grid-template-columns: 1fr; padding-left: 16px; }
}

/* ── Nộp bài thử thách ───────────────────────────────────────────────────── */
.vn-tt-check { grid-column: 1 / -1; border-top: 1px dashed var(--line, #e2e8f0);
               padding-top: 12px; margin-top: 6px; }
.vn-tt.is-done { border-color: #a7f3d0; }
.vn-tt-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-weight: 700;
            border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
            display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.vn-tt-ok span { font-weight: 500; color: #64748b; font-size: 12.5px; }
.vn-tt-gv { background: #f1f5f9; border-radius: 10px; padding: 9px 12px;
            font-size: 13px; color: #64748b; }
.vn-q { margin-bottom: 11px; }
.vn-q-t { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.vn-q-c { display: flex; align-items: center; gap: 7px; font-size: 13px;
          padding: 3px 0; cursor: pointer; }
.vn-q-in { display: flex; align-items: center; gap: 7px; }
.vn-q-in input { flex: 1; max-width: 260px; padding: 7px 10px; font: inherit; font-size: 13.5px;
                 border: 1px solid var(--line, #e2e8f0); border-radius: 8px; }
.vn-q-in span { font-size: 13px; font-weight: 700; color: #64748b; }
.vn-tt-msg { margin-top: 9px; font-size: 13.5px; font-weight: 600; border-radius: 9px; padding: 8px 11px; }
.vn-tt-msg.is-ok  { background: #ecfdf5; color: #047857; }
.vn-tt-msg.is-err { background: #fef2f2; color: #b91c1c; }

.vn-tt-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
                  padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px; color: #475569; }
.vn-tt-progress .vn-bar { flex: 1; min-width: 160px; margin: 0; }
.vn-tt-tick { font-size: 15px; }

/* ── Vùng đóng mở được trong Thư viện ────────────────────────────────────── */
.vn-fold > summary { list-style: none; cursor: pointer; user-select: none; }
.vn-fold > summary::-webkit-details-marker { display: none; }
.vn-fold > summary::after { content: '⌃'; margin-left: 12px; font-size: 15px; line-height: 1;
  color: #94a3b8; transform: rotate(180deg); transition: transform .18s ease; flex: none; }
.vn-fold[open] > summary::after { transform: rotate(0deg); }
.vn-fold > summary:hover::after { color: var(--blue, #1f4fb0); }
.vn-fold:not([open]) > summary { border-bottom-color: transparent; }
.vn-fold:not([open]) { margin-bottom: 14px; }

/* Mỗi vùng đóng mở là một thẻ trắng, gập lại vẫn ra hình khối rõ ràng */
.vn-fold { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px;
           padding: 2px 20px 6px; margin: 14px 0; box-shadow: 0 1px 2px rgba(15,23,42,.05);
           transition: box-shadow .15s, border-color .15s; }
.vn-fold:hover { box-shadow: 0 4px 14px rgba(15,23,42,.07); }
.vn-fold[open] { padding-bottom: 20px; }
.vn-fold > summary { padding: 15px 0 13px; margin: 0; border-bottom: 1px solid transparent;
                     transition: border-color .15s; }
.vn-fold[open] > summary { border-bottom-color: var(--line, #e2e8f0); margin-bottom: 16px; }
.vn-fold > summary .vn-sec-title { margin: 0; }
.vn-fold > summary .vn-sec-more { color: #94a3b8; font-weight: 600; }
.vn-fold:hover > summary .vn-sec-more { color: #64748b; }
.vn-fold > summary::after { font-size: 17px; font-weight: 700; }

/* ── Câu kéo thả: xếp thẻ vào hai cột ────────────────────────────────────── */
.vn-sort { margin-top: 4px; }
.vn-sort-pool { display: flex; flex-wrap: wrap; gap: 7px; min-height: 42px;
                background: #f8fafc; border: 1px dashed var(--line, #e2e8f0);
                border-radius: 11px; padding: 9px; margin-bottom: 11px; }
.vn-card { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 9px;
           padding: 8px 12px; font: inherit; font-size: 13px; cursor: grab; text-align: left;
           box-shadow: 0 1px 2px rgba(15,23,42,.06); touch-action: none; }
.vn-card:hover { border-color: var(--brand, #1e3a8a); }
.vn-card.is-picked { border-color: #f59e0b; background: #fffbeb;
                     box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.vn-sort-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.vn-bin { border: 2px dashed var(--line, #e2e8f0); border-radius: 12px; background: #fff; }
.vn-bin.is-target { border-color: #f59e0b; background: #fffbeb; }
.vn-bin-hd { font-size: 12.5px; font-weight: 800; padding: 8px 12px;
             border-bottom: 1px dashed var(--line, #e2e8f0); }
.vn-bin:first-child .vn-bin-hd { color: #047857; }
.vn-bin:last-child  .vn-bin-hd { color: #b91c1c; }
.vn-bin-body { display: flex; flex-direction: column; gap: 6px; padding: 9px; min-height: 56px; }

/* ── Câu nối ─────────────────────────────────────────────────────────────── */
.vn-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.vn-match-col { display: flex; flex-direction: column; gap: 7px; }
.vn-mi { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
         background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
         padding: 9px 11px; font: inherit; font-size: 13px; }
.vn-mi:hover { border-color: var(--brand, #1e3a8a); }
.vn-mi.is-picked { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.vn-mi.is-linked { background: #eff6ff; border-color: #bfdbfe; }
.vn-mi-num { flex: none; width: 21px; height: 21px; border-radius: 50%; font-size: 11.5px;
             font-weight: 800; display: flex; align-items: center; justify-content: center;
             background: #f1f5f9; color: #94a3b8; }
.vn-mi.is-linked .vn-mi-num { background: var(--brand, #1e3a8a); color: #fff; }

@media (max-width: 620px) {
  .vn-sort-bins, .vn-match { grid-template-columns: 1fr; }
}

/* ── Văn bản nội quy trong thử thách ─────────────────────────────────────── */
.vn-rules { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
            padding: 16px 18px; }
.vn-rules p { margin: 0; }
.vn-rule-banner { text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .4px;
                  color: var(--brand, #1e3a8a); padding: 6px 0 12px; }
.vn-rules .vn-rule-banner:last-child { padding: 14px 0 2px; border-top: 1px solid var(--line, #e2e8f0);
                                       margin-top: 12px; color: #b45309; }
.vn-rule-h { display: flex; gap: 9px; align-items: baseline; font-weight: 800; font-size: 13.5px;
             color: #1e293b; margin-top: 12px !important; }
.vn-rule-h > span { flex: none; width: 21px; height: 21px; border-radius: 50%; font-size: 12px;
                    display: flex; align-items: center; justify-content: center;
                    background: var(--brand, #1e3a8a); color: #fff; }
.vn-rule-b { font-size: 13.5px; color: #475569; line-height: 1.55; padding-left: 30px; }
.vn-q-long textarea { width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 9px; resize: vertical; line-height: 1.5; }
.vn-q-long textarea:focus { outline: none; border-color: var(--brand, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(31,79,176,.12); }

/* ── Thẻ thử thách: hai phần Mô tả và Nhiệm vụ tách hẳn nhau ─────────────── */
.vn-tt-body { display: block; padding: 0 16px 18px; border-top: 0; margin-top: 0; }

/* Nền thẻ thử thách đậm hơn để bên trong Mô tả (xám) và Nhiệm vụ (trắng)
   nổi lên như hai tờ giấy đặt trên mặt bàn. */
.vn-tt { background: #e7edf7; border-color: #d3dfef; }
.vn-tt > summary:hover { background: rgba(255,255,255,.45); }
.vn-tt[open] { border-color: #b9cbe6; }
/* Xong rồi chỉ đánh dấu tích, giữ nguyên nền — đổi màu cả thẻ nhìn rối mắt. */
.vn-tt.is-done { background: #e7edf7; border-color: #d3dfef; }

/* Tiêu đề hai phần chỉ là nhãn nhỏ có gạch chân — tên thử thách vẫn phải là
   chữ to nhất, đậm nhất trong thẻ. */
.vn-part-hd { display: flex; align-items: center; gap: 7px;
              margin: 0 0 11px; padding: 0 0 7px; }
.vn-part-hd strong { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
                     letter-spacing: .6px; }
.vn-part-ico { font-size: 13px; line-height: 1; opacity: .65; }

/* PHẦN MÔ TẢ — tờ giấy xám, nằm lùi lại phía sau */
.vn-tt-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
              padding: 13px 16px 15px; background: #f2f5f9;
              border: 1px solid #dde5ee; border-radius: 12px; }
.vn-tt-desc > .vn-part-hd { grid-column: 1 / -1; color: #94a3b8;
                            border-bottom: 1px solid #e2e8f0; }
.vn-tt-desc .vn-tt-lb { margin-top: 0; }

/* PHẦN NHIỆM VỤ — tờ giấy trắng, chỗ con làm bài */
.vn-task { margin-top: 14px; background: #fff; border: 1px solid #dde5ee;
           border-radius: 12px; padding: 13px 16px 15px; }
.vn-task > .vn-part-hd { color: #5b7cc4; border-bottom: 1px solid #e6ecf5; }
.vn-task-pill { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #3358a8;
                background: #eaf1fd; border: 1px solid #d3e0f7;
                border-radius: 999px; padding: 2px 10px; white-space: nowrap;
                text-transform: none; letter-spacing: 0; }

/* trên nền trắng thì từng câu hỏi lại là thẻ xám nhạt cho dễ tách */
.vn-q { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px;
        padding: 11px 13px; margin-bottom: 9px; }
.vn-q:last-of-type { margin-bottom: 12px; }
.vn-q-t { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px;
          font-weight: 600; margin-bottom: 9px; }
.vn-q-no { flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px;
           font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
           background: #e8eefb; color: #3358a8; }

@media (max-width: 720px) { .vn-tt-desc { grid-template-columns: 1fr; gap: 14px; } }

/* ── Leo tháp: khung chơi rộng, bảng câu hỏi, thanh năng lượng ───────────── */
.g-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 14px;
          align-items: start; }
.g-stage { position: relative; }
.g-canvas { width: 100%; max-width: 560px; }
.g-fs { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 9px;
        border: 1px solid rgba(255,255,255,.28); background: rgba(15,23,42,.55); color: #fff;
        font-size: 15px; cursor: pointer; line-height: 1; }
.g-fs:hover { background: rgba(15,23,42,.85); }

/* Toàn màn hình: khung chơi và bảng câu hỏi nằm cạnh nhau, cao hết màn */
.g-full:fullscreen { background: #0b1024; padding: 12px; height: 100%; }
.g-full:fullscreen .g-stage { height: 100%; align-items: center; }
.g-full:fullscreen .g-canvas { max-width: none; width: auto; height: calc(100vh - 44px); }
.g-full:fullscreen .g-extra { height: calc(100vh - 44px); overflow: auto; }
.g-full:fullscreen .lt-panel { background: #141b38; border-color: #2b3568; color: #e8ecff; }
.g-full:fullscreen .lt-q { color: #e8ecff; }
.g-full:fullscreen .lt-opt { background: #1c2450; border-color: #2b3568; color: #e8ecff; }
.g-full:fullscreen .lt-it { background: #1c2450; color: #c7d0f5; }

.lt-panel { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px; padding: 12px 13px; }
.lt-bar { position: relative; height: 26px; border-radius: 8px; background: #eef2f7;
          overflow: hidden; margin-bottom: 10px; }
.lt-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0;
               background: linear-gradient(90deg, #fbbf24, #f59e0b); transition: width .25s; }
.lt-bar-fill.is-low { background: #ef4444; }
.lt-bar-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
              font-size: 12.5px; font-weight: 800; color: #78350f; }
.lt-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lt-it { font-size: 11.5px; font-weight: 700; background: #f1f5f9; color: #475569;
         border-radius: 999px; padding: 3px 9px; }
.lt-it.is-out { opacity: .45; }
.lt-it.is-keep { background: #fef3c7; color: #92400e; }
.lt-q { font-size: 14px; font-weight: 700; line-height: 1.45; margin-bottom: 9px; }
.lt-opts { display: grid; gap: 6px; }
.lt-opt { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; cursor: pointer;
          background: #f8fafc; border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px;
          padding: 9px 10px; font: inherit; font-size: 13.5px; }
.lt-opt:hover:not(:disabled) { border-color: #3358a8; }
.lt-opt:disabled { cursor: default; opacity: .8; }
.lt-opt kbd { background: #e8eefb; border-radius: 5px; padding: 1px 6px;
              font: 800 11px/1.6 'Courier New', monospace; color: #3358a8; }
.lt-opt.is-right { border-color: #22c55e; background: #ecfdf5; }
.lt-opt.is-wrong { border-color: #ef4444; background: #fef2f2; }
.lt-fb { min-height: 18px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.lt-fb.is-ok  { color: #047857; }
.lt-fb.is-err { color: #b91c1c; }
.lt-end { width: 100%; margin-top: 10px; background: transparent; color: #64748b; cursor: pointer;
          border: 1px solid var(--line, #e2e8f0); border-radius: 9px; padding: 8px; font-size: 12.5px; }
.lt-end:hover { color: #b91c1c; border-color: #fecaca; }

/* Nút cảm ứng cho máy bảng */
.lt-pad { position: absolute; inset: auto 18px 18px 18px; display: none;
          justify-content: space-between; pointer-events: none; }
.lt-pad button { width: 58px; height: 58px; border-radius: 50%; pointer-events: auto;
                 border: 1px solid rgba(255,255,255,.25); background: rgba(20,27,56,.55);
                 color: #fff; font-size: 20px; }
.lt-pad button[data-k="r"] { margin-right: auto; margin-left: 10px; }
@media (hover: none) { .lt-pad { display: flex; } }

/* Bộ đếm số lượng vật phẩm */
.g-gear { cursor: default; }
.g-qty { display: flex; align-items: center; gap: 6px; }
.g-qty b { min-width: 14px; text-align: center; font-size: 13.5px; }
.g-qty-btn { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; line-height: 1;
             border: 1px solid var(--line, #e2e8f0); background: #fff; font-size: 15px; color: #334155; }
.g-qty-btn:hover:not(:disabled) { border-color: #3358a8; color: #3358a8; }
.g-qty-btn:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) { .g-full { grid-template-columns: 1fr; } }

/* ── Tư duy lập trình: kéo thả khối lệnh ─────────────────────────────────── */
.cl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cl-score { font-size: 14px; font-weight: 800; color: #b45309; background: #fef3c7;
            border-radius: 999px; padding: 4px 12px; }
.cl-fs { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
         border: 1px solid var(--line, #e2e8f0); background: #fff; font-size: 15px; line-height: 1; }
.cl-fs:hover { border-color: #3358a8; }

/* Ba cột cao bằng nhau, để ô chương trình dài ra hết chiều cao sa bàn —
   con xếp được chương trình dài mà không phải cuộn trong một ô tí xíu. */
.cl-wrap { display: grid; grid-template-columns: 210px 340px minmax(0, 1fr); gap: 12px;
           align-items: stretch; }
.cl-wrap:fullscreen { background: #f4f1ea; padding: 12px; height: 100%; grid-template-rows: 100%; }
.cl-wrap:fullscreen .cl-col { height: 100%; }
.cl-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cl-card { background: #fff; border: 1px solid #e2ddd2; border-radius: 14px; padding: 12px; }
.cl-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cl-lbl { font: 800 11px/1 system-ui; letter-spacing: .12em; color: #6b7391;
          text-transform: uppercase; margin-bottom: 9px; }
.cl-lbl span { float: right; color: #1e2233; letter-spacing: 0; text-transform: none; font-weight: 700; }

.cl-chapter { font: 800 10px system-ui; color: #6b7391; letter-spacing: .08em; margin: 9px 0 4px; }
.cl-chapter:first-child { margin-top: 0; }
.cl-levels { display: flex; gap: 5px; flex-wrap: wrap; }
.cl-lv { width: 31px; border: 1px solid #e2ddd2; background: #fff; border-radius: 8px;
         padding: 4px 2px; cursor: pointer; text-align: center; font: 800 12px system-ui; }
.cl-lv.on { background: #1e2233; color: #fff; border-color: #1e2233; }
.cl-lv.done { border-color: #f2c94c; background: #fffbf0; }
.cl-lv.done.on { background: #1e2233; }
.cl-lv small { display: block; font-size: 8px; color: #f2c94c; height: 9px; letter-spacing: 0; }

.cl-blk { display: flex; flex-direction: column; color: #fff; border-radius: 9px; padding: 7px 8px;
          font: 600 12.5px system-ui; cursor: grab; user-select: none; }
.cl-blk.act { background: #2f80ed; } .cl-blk.act2 { background: #0e9f9f; }
.cl-blk.turn { background: #f2994a; } .cl-blk.loop { background: #9b51e0; }
.cl-blk.cond { background: #eb5757; } .cl-blk.fn { background: #2d9c5a; }
.cl-blk.on { outline: 3px solid #111; outline-offset: 2px; }
#clPalette .cl-blk { cursor: pointer; margin-bottom: 6px; }
.cl-hd { display: flex; align-items: center; gap: 6px; }
.cl-ic { font-size: 14px; min-width: 16px; text-align: center; }
.cl-sp { flex: 1; }
.cl-mini { background: rgba(255,255,255,.22); border: 0; color: #fff; border-radius: 5px;
           width: 19px; height: 19px; font-size: 11px; cursor: pointer; line-height: 1; padding: 0; }
.cl-mini:hover { background: rgba(255,255,255,.45); }
.cl-mini.on { background: rgba(255,255,255,.65); color: #25203a; }
.cl-blk select, .cl-blk input { background: rgba(255,255,255,.92); border: 0; border-radius: 5px;
           padding: 2px 3px; font: 600 11.5px system-ui; color: #25203a; max-width: 135px; }
.cl-blk input { width: 36px; text-align: center; font-weight: 700; }
.cl-slot { font: 800 9px system-ui; opacity: .85; letter-spacing: .08em; margin: 5px 0 2px; }

.cl-stack { min-height: 32px; border: 2px dashed #e2ddd2; border-radius: 10px; padding: 5px;
            display: flex; flex-direction: column; gap: 5px; }
.cl-blk .cl-stack { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.13); }
.cl-stack.active { border-color: #1e2233; border-style: solid; }
.cl-stack.hover { border-color: #2f80ed; background: #eaf2fe; }
#clProg { flex: 1; overflow: auto; min-height: 340px; }
.cl-ph { height: 3px; background: #2f80ed; border-radius: 2px; }
.cl-empty { color: #6b7391; font: 500 12px system-ui; text-align: center; padding: 6px; }

.cl-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cl-b { flex: 1; border: 1px solid #e2ddd2; background: #fff; color: #1e2233; border-radius: 9px;
        padding: 8px 6px; font: 800 12.5px system-ui; cursor: pointer; white-space: nowrap; }
.cl-b:hover { border-color: #1e2233; }
.cl-b.cl-go { background: #27ae60; color: #fff; border-color: #27ae60; }
.cl-seg { display: flex; gap: 4px; margin-top: 8px; }
.cl-seg button { flex: 1; border: 1px solid #e2ddd2; background: #fff; border-radius: 8px; padding: 5px;
                 font: 600 11px system-ui; cursor: pointer; color: #6b7391; }
.cl-seg button.on { background: #1e2233; color: #fff; border-color: #1e2233; }

.cl-board { display: flex; align-items: center; justify-content: center; padding: 8px; }
.cl-board canvas { max-width: 100%; height: auto; border-radius: 12px; background: #fff; }
.cl-wrap:fullscreen .cl-board { flex: 1; min-height: 0; }
.cl-wrap:fullscreen .cl-board canvas { max-height: 100%; width: auto; }
#clName { font: 800 15px system-ui; }
#clDesc { font-size: 12.5px; color: #6b7391; margin-top: 4px; line-height: 1.5; }
.cl-chip { display: inline-block; background: #efeade; border-radius: 999px; padding: 3px 9px;
           font: 800 10.5px system-ui; color: #6b7391; margin: 7px 6px 0 0; }
#clMsg { font: 700 12.5px system-ui; min-height: 17px; margin-top: 6px; color: #6b7391; }
#clMsg.is-ok { color: #047857; } #clMsg.is-err { color: #b91c1c; }
#clHud { display: flex; gap: 8px; font: 600 11.5px system-ui; color: #6b7391; margin-top: 6px; flex-wrap: wrap; }
#clHud b { color: #1e2233; }

.cl-dlg { border: 0; border-radius: 16px; padding: 22px; width: min(470px, 92vw);
          box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.cl-dlg::backdrop { background: rgba(30,34,51,.45); }
.cl-win-hd { font: 800 20px system-ui; }
#clWinStars { font-size: 34px; letter-spacing: 6px; margin: 6px 0 10px; color: #f2c94c; }
#clWinTxt { font: 500 13px/1.6 system-ui; color: #6b7391; }
.cl-pay { display: inline-block; margin-top: 10px; background: #ecfdf5; color: #047857;
          border: 1px solid #a7f3d0; border-radius: 999px; padding: 5px 14px; font: 800 15px system-ui; }
.cl-pay-hint { font: 500 11.5px/1.5 system-ui; color: #6b7391; margin-top: 6px; }
#clPy { background: #1e2233; color: #e8ecff; padding: 14px; border-radius: 10px; overflow: auto;
        font: 12.5px/1.6 'Courier New', monospace; max-height: 320px; }

@media (max-width: 1060px) {
  .cl-wrap { grid-template-columns: 1fr 1fr; }
  #clC3 { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 660px) { .cl-wrap { grid-template-columns: 1fr; } }

/* ── Trình chiếu màn hình: trang điều khiển của thầy ─────────────────────── */
.sc-wrap { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.sc-stage { position: relative; background: #0f172a; border-radius: 14px; overflow: hidden;
            aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.sc-stage video { width: 100%; height: 100%; object-fit: contain; background: #0f172a; }
.sc-idle { position: absolute; color: #94a3b8; font-size: 14px; font-weight: 600; }
.sc-bar { margin-top: 10px; padding: 9px 13px; border-radius: 10px; background: #f1f5f9;
          color: #475569; font-size: 12.5px; font-weight: 700; }
.sc-bar.is-on  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sc-bar.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sc-lb { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
         letter-spacing: .5px; color: #94a3b8; margin-bottom: 5px; }
.sc-side select { width: 100%; padding: 8px 10px; border: 1px solid var(--line,#e2e8f0);
                  border-radius: 9px; font: inherit; font-size: 13.5px; }
.sc-btns { display: flex; gap: 8px; margin-top: 14px; }
.sc-btns .vn-btn { flex: 1; justify-content: center; }
.sc-check { display: flex; align-items: center; gap: 8px; margin-top: 14px;
            font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sc-check input { width: 17px; height: 17px; }
.sc-viewers { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.sc-viewer { display: flex; flex-direction: column; background: #f8fafc; border-radius: 8px;
             padding: 6px 9px; font-size: 12.5px; }
.sc-viewer b { font-size: 13px; }
.sc-viewer span { color: #64748b; font-size: 11.5px; }
@media (max-width: 900px) { .sc-wrap { grid-template-columns: 1fr; } }

/* ── Trình chiếu: lớp phủ trên máy học sinh ──────────────────────────────── */
.sc-live { position: fixed; inset: auto 14px 14px auto; width: min(46vw, 560px); z-index: 9000;
           background: #0f172a; border-radius: 14px; overflow: hidden; display: none;
           box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.sc-live.is-on { display: block; }
.sc-live.is-lock { inset: 0; width: auto; border-radius: 0;
                   display: flex; flex-direction: column; justify-content: center; background: #0b1024; }
.sc-live-hd { display: flex; align-items: center; gap: 7px; padding: 8px 12px;
              background: #1e293b; color: #e8ecff; font-size: 12.5px; }
.sc-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444;
               animation: sc-pulse 1.4s ease-in-out infinite; }
.sc-live-by { color: #94a3b8; }
.sc-live img { display: block; width: 100%; height: auto; background: #0f172a; }
.sc-live.is-lock img { max-height: calc(100vh - 90px); object-fit: contain; }
.sc-live-foot { padding: 8px 12px; color: #a8b4e8; font-size: 12.5px; font-weight: 600; text-align: center; }
@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
body.sc-locked { overflow: hidden; }

/* Ô số lượng vật phẩm: gõ thẳng số được, khỏi bấm mấy chục lần */
.g-qty .js-n { width: 42px; text-align: center; font-size: 13.5px; font-weight: 700;
               border: 1px solid var(--line, #e2e8f0); border-radius: 7px; padding: 3px 2px; }
.g-qty .js-n::-webkit-outer-spin-button,
.g-qty .js-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   THỬ THÁCH GÕ 10 NGÓN  (#tyApp)

   Bê nguyên giao diện bản mẫu của thầy (thu-thach-go-10-ngon.html): một bộ
   bàn phím cơ thật, keycap nổi khối, phím kế tiếp sáng đèn hổ phách; nhãn nhỏ
   dùng font đơn cách như legend in trên keycap. Có hai chế độ sáng / tối.

   Khác bản gốc đúng một chuyện: mọi thứ nhốt trong #tyApp để không đụng phần
   còn lại của trang, và bản gốc chiếm trọn màn hình thì ở đây là một khung có
   chiều cao cố định — bấm ⛶ mới bung ra toàn màn hình.
   ══════════════════════════════════════════════════════════════════════════ */
#tyApp {                      /* ---- CHẾ ĐỘ SÁNG ---- */
  --bg1:#FFFFFF; --bg2:#E4EAF6;
  --panel:#FFFFFF; --edge:rgba(20,30,60,.11);
  --ink:#141C33; --dim:#5E6A85; --todo:#737F9B;
  --amber:#D9820F; --mint:#0E8F5D; --coral:#D6314B; --sky:#1F62CF; --badInk:#FFFFFF;
  --cap:#FFFFFF; --cap2:#E7ECF6; --capEdge:#B8C2D6; --capInk:#1B2436; --capSub:#78849E;
  --kbBg:#EDF1F8; --homeBar:#8E9AB2;
  --f5:#C2504E; --f4:#C97A20; --f3:#A88A12; --f2:#2F8A5C; --f1:#3B5FC0;
  --mono:'Cascadia Mono','JetBrains Mono',Consolas,ui-monospace,monospace;
  --ui:'Segoe UI Variable Display','Segoe UI',Inter,system-ui,sans-serif;
}
#tyApp[data-theme="dark"] {   /* ---- CHẾ ĐỘ TỐI ---- */
  --bg1:#1B2440; --bg2:#0A0E1A;
  --panel:#151C2E; --edge:rgba(255,255,255,.10);
  --ink:#EAF0FA; --dim:#93A1BC; --todo:#8A98B6;
  --amber:#F2A03D; --mint:#6EDCAE; --coral:#FF7A85; --sky:#8FB6F2; --badInk:#2A0D12;
  --cap:#EEF2FA; --cap2:#D3DBEB; --capEdge:#8894AC; --capInk:#1B2436; --capSub:#6B7791;
  --kbBg:#0D1322; --homeBar:#9AA6BC;
  --f5:#E0625F; --f4:#EE9A3A; --f3:#DCBB2E; --f2:#4CBB82; --f1:#6288E0;
}
#tyApp * { margin: 0; padding: 0; box-sizing: border-box; }
#tyApp {
  display: grid; grid-template-columns: 250px 1fr; gap: 14px; padding: 14px;
  /* --ty-top do JS báo về (khung cách đỉnh trang bao nhiêu); chưa có thì tạm
     lấy 168px. Chiều cao luôn nằm trong khoảng cho phép nên không bao giờ tràn. */
  height: clamp(360px, calc(100vh - var(--ty-top, 168px) - 16px), 1000px); min-height: 0;
  border: 1px solid #dbe3f0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -20%, var(--bg1) 0%, var(--bg2) 65%);
  color: var(--ink); font-family: var(--ui);
}
#tyApp:fullscreen { height: 100%; width: 100%; border: 0; border-radius: 0; }
#tyApp .col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#tyApp .card { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 14px; }
#tyApp:not([data-theme="dark"]) .card { box-shadow: 0 2px 10px rgba(30,45,90,.06); }

#tyApp .lbl { font: 600 9.5px/1 var(--mono); letter-spacing: .18em; color: var(--dim);
              text-transform: uppercase; margin-bottom: 11px; }

/* --- tiêu đề + tiến độ --- */
#tyApp .brand { display: flex; align-items: center; gap: 11px; padding: 13px; }
#tyApp .mark { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px;
               background: linear-gradient(180deg, var(--cap), var(--cap2)); color: var(--capInk);
               display: grid; place-items: center; font-size: 19px;
               box-shadow: 0 2px 0 var(--capEdge), 0 4px 10px rgba(0,0,0,.22); }
#tyApp .bt { font: 600 14px/1.2 var(--ui); letter-spacing: -.01em; }
#tyApp .bs { font: 500 10.5px/1.5 var(--mono); color: var(--dim); margin-top: 3px; }
#tyApp .bs b { color: var(--amber); font-weight: 700; }

/* --- danh sách bài --- */
#tyApp #lessons { flex: 1; overflow: auto; margin: -4px -4px 0; padding: 4px; }
#tyApp #lessons::-webkit-scrollbar { width: 5px; }
#tyApp #lessons::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 9px; }
#tyApp .grp { font: 600 9px/1 var(--mono); letter-spacing: .2em; color: var(--dim); opacity: .8;
              text-transform: uppercase; margin: 15px 0 6px; padding-left: 2px; }
#tyApp .grp:first-child { margin-top: 0; }
#tyApp .ls { display: flex; align-items: center; gap: 9px; padding: 7px 9px 7px 8px; border-radius: 9px;
             cursor: pointer; font: 500 12.5px/1.3 var(--ui); color: var(--ink); opacity: .78;
             border-left: 2px solid transparent; transition: background .13s, opacity .13s; }
#tyApp .ls:hover { background: var(--edge); opacity: 1; }
#tyApp .ls.on { background: color-mix(in srgb, var(--amber) 16%, transparent);
                border-left-color: var(--amber); opacity: 1; font-weight: 600; }
#tyApp .ls .no { width: 19px; flex: 0 0 auto; font: 600 10px var(--mono); color: var(--dim); text-align: center; }
#tyApp .ls.on .no { color: var(--amber); }
#tyApp .ls .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tyApp .ls .st { font-size: 9px; color: var(--amber); letter-spacing: -1.5px; }

/* --- dải chỉ số --- */
#tyApp #stats { display: flex; align-items: center; gap: 20px; padding: 12px 18px; }
#tyApp .primary b { font: 250 clamp(26px, min(3.2vw, 5.4vh), 46px)/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
#tyApp .primary span { display: block; font: 600 9px var(--mono); letter-spacing: .17em;
                       text-transform: uppercase; color: var(--dim); margin-top: 2px; }
#tyApp .primary.good b { color: var(--mint); }
#tyApp .secs { display: flex; flex: 1; margin-left: auto; }
#tyApp .secs > div { flex: 1; padding-left: 18px; border-left: 1px solid var(--edge); }
#tyApp .secs b { display: block; font: 350 clamp(14px, min(1.6vw, 2.6vh), 21px)/1.2 var(--ui); font-variant-numeric: tabular-nums; }
#tyApp .secs span { font: 600 8.5px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
#tyApp .secs .good b { color: var(--mint); }
#tyApp .secs .bad b { color: var(--coral); }

/* --- khung gõ --- */
#tyApp #main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px 18px; }
#tyApp .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
#tyApp #lName { font: 600 15.5px/1.3 var(--ui); letter-spacing: -.01em; }
#tyApp #lGoal { font: 500 11px/1.5 var(--mono); color: var(--dim); margin-top: 4px; }
#tyApp #lGoal b { color: var(--ink); font-weight: 700; }

#tyApp #typebox { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; cursor: text; }
#tyApp #text { font: 500 var(--ty-chu, clamp(13px, min(1.95vw, 3.05vh), 26px))/1.85 var(--mono); letter-spacing: .2px;
               height: 5.55em; overflow: hidden; position: relative; padding: 2px; word-break: break-word;
               scrollbar-width: none; scroll-behavior: smooth; }
#tyApp #text::-webkit-scrollbar { display: none; }
#tyApp #text span { border-radius: 3px; padding: 1px 0; }
#tyApp #text .todo { color: var(--todo); }
#tyApp #text .good { color: var(--mint); }
#tyApp #text .bad { color: var(--badInk); background: var(--coral); }
#tyApp #text .typing { color: var(--sky); background: color-mix(in srgb, var(--sky) 16%, transparent); }
#tyApp #text .cur { background: color-mix(in srgb, var(--amber) 26%, transparent);
                    box-shadow: inset 2px 0 0 var(--amber); color: var(--ink);
                    animation: ty-caret 1.1s steps(1,end) infinite; }
@keyframes ty-caret { 50% { box-shadow: inset 2px 0 0 transparent; } }
#tyApp #text .sp { white-space: pre; }
#tyApp #hidden { position: absolute; opacity: 0; pointer-events: none; left: -9999px; }
#tyApp #prog { height: 3px; background: var(--edge); border-radius: 99px; overflow: hidden; margin-top: 14px; }
#tyApp #progIn { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--mint)); transition: width .12s; }
#tyApp #hint { font: 500 11.5px/1.45 var(--ui); color: var(--dim); margin-top: 9px; min-height: 16px; }
#tyApp #hint b { color: var(--ink); font-weight: 600; }

/* --- bàn phím --- */
#tyApp #kbWrap { padding: 16px 14px 13px; background: var(--kbBg); }
#tyApp #kb { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#tyApp .krow { display: flex; gap: 6px; }
#tyApp .key { min-width: clamp(22px, min(2.55vw, 4.4vh), 40px);
              height: clamp(22px, min(2.55vw, 4.4vh), 40px); border-radius: 8px; position: relative;
              background: linear-gradient(180deg, var(--cap), var(--cap2)); color: var(--capInk);
              display: flex; flex-direction: column; align-items: center; justify-content: center;
              font: 600 clamp(8px, min(.85vw, 1.5vh), 12.5px) var(--mono);
              box-shadow: 0 2px 0 var(--capEdge), 0 4px 9px rgba(20,30,60,.18);
              transition: transform .05s, box-shadow .05s; }
#tyApp .key small { font-size: 8.5px; color: var(--capSub); line-height: 1; margin-bottom: 1px; }
#tyApp .key.w15 { min-width: 60px; } #tyApp .key.w17 { min-width: 68px; }
#tyApp .key.w20 { min-width: 84px; } #tyApp .key.w22 { min-width: 92px; }
#tyApp .key.w60 { min-width: 258px; }
#tyApp .key .fdot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
                    width: 17px; height: 3.5px; border-radius: 2px; opacity: .8; }
#tyApp .key.home::after { content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
                          width: 11px; height: 2px; background: var(--homeBar); border-radius: 2px; }
#tyApp .key.next { background: linear-gradient(180deg, #FFCE8A, var(--amber)); color: #3A2408;
                   box-shadow: 0 2px 0 #A9690F, 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent),
                               0 0 26px color-mix(in srgb, var(--amber) 45%, transparent); }
#tyApp .key.next small { color: #7A4E12; }
#tyApp .key.hit { transform: translateY(3px); box-shadow: 0 0 0 var(--capEdge), 0 1px 4px rgba(20,30,60,.25); }
#tyApp .f5 { background: var(--f5); } #tyApp .f4 { background: var(--f4); }
#tyApp .f3 { background: var(--f3); } #tyApp .f2 { background: var(--f2); }
#tyApp .f1 { background: var(--f1); }
#tyApp #legend { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-top: 13px;
                 font: 600 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
#tyApp #legend i { display: inline-block; width: 13px; height: 3.5px; border-radius: 2px;
                   margin-right: 5px; vertical-align: middle; }

/* --- điều khiển --- */
#tyApp .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#tyApp button.b { border: 1px solid var(--edge); background: transparent; color: var(--ink); border-radius: 9px;
                  padding: 8px 13px; font: 600 11.5px var(--mono); letter-spacing: .04em; cursor: pointer;
                  transition: border-color .13s, color .13s; }
#tyApp button.b:hover { border-color: var(--amber); color: var(--amber); }
#tyApp button.b.go { background: var(--amber); color: #241505; border-color: var(--amber); }
#tyApp button.b.go:hover { filter: brightness(1.08); color: #241505; }
#tyApp button.b:focus-visible, #tyApp input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#tyApp #theme, #tyApp #tyFs { padding: 8px 11px; font-size: 14px; line-height: 1; }
#tyApp label.tg { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--ui);
                  color: var(--dim); cursor: pointer; user-select: none; }
#tyApp label.tg:hover { color: var(--ink); }
#tyApp input[type=checkbox] { accent-color: var(--amber); width: 14px; height: 14px; cursor: pointer; }

/* --- hộp kết quả --- */
#tyApp dialog { border: 1px solid var(--edge); border-radius: 18px; padding: 26px; width: min(430px, 92vw);
                background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px rgba(10,16,32,.35); }
#tyApp dialog::backdrop { background: rgba(10,16,32,.6); backdrop-filter: blur(3px); }
#tyApp #dTitle { font: 600 18px var(--ui); text-align: center; letter-spacing: -.01em; }
#tyApp #stars { font-size: 30px; letter-spacing: 8px; text-align: center; margin: 8px 0 16px; color: var(--amber); }
#tyApp .res { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge);
              border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; margin: 14px 0; }
#tyApp .res div { background: var(--panel); padding: 13px 10px; text-align: center; }
#tyApp .res b { display: block; font: 350 24px/1.2 var(--ui); font-variant-numeric: tabular-nums; }
#tyApp .res span { font: 600 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#tyApp .note { font: 500 11.5px/1.65 var(--ui); color: var(--dim); text-align: center; }
#tyApp .note b { color: var(--amber); }

/* dòng tiền thưởng — phần thêm so với bản gốc */
#tyApp .pay { font: 500 12px/1.6 var(--ui); color: var(--dim); text-align: center; margin-bottom: 10px; }
#tyApp .pay.is-on { color: var(--ink); font-weight: 600; }
#tyApp .pay b { font-size: 16px; color: var(--mint); }
#tyApp .pay span { display: block; font-size: 11px; color: var(--dim); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  #tyApp * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1080px) {
  #tyApp { grid-template-columns: 1fr; overflow: auto; height: auto; min-height: 0; }
  #tyApp #kbWrap { display: none; }
  #tyApp #lessons { max-height: 240px; }
}
@media (max-width: 620px) {
  #tyApp #stats { flex-direction: column; align-items: stretch; gap: 12px; }
  #tyApp .secs > div { padding-left: 0; border-left: 0; text-align: center; }
}

/* Màn hình phòng máy phổ biến là 1366×768: trừ thanh tiêu đề + menu của trang
   thì chỉ còn hơn 500px. Thu gọn bàn phím và dải chỉ số cho vừa, giữ nguyên bố
   cục. Bấm ⛶ là bung ra toàn màn hình, lúc đó về đúng cỡ gốc. */
@media (max-height: 820px) {
  #tyApp #stats { padding: clamp(6px, 1.1vh, 12px) 16px; }
  #tyApp #main { padding: clamp(8px, 1.5vh, 16px) 16px; }
  #tyApp #kbWrap { padding: clamp(7px, 1.3vh, 16px) 12px clamp(6px, 1vh, 13px); }
}
#tyApp:fullscreen #stats { padding: 12px 18px; }
#tyApp:fullscreen .primary b { font-size: 46px; }
#tyApp:fullscreen .key { height: 40px; min-width: 40px; }
#tyApp:fullscreen .key.w15 { min-width: 60px; } #tyApp:fullscreen .key.w17 { min-width: 68px; }
#tyApp:fullscreen .key.w20 { min-width: 84px; } #tyApp:fullscreen .key.w22 { min-width: 92px; }
#tyApp:fullscreen .key.w60 { min-width: 258px; }

/* Khung chữ luôn giữ đúng cửa sổ 3 dòng như bản gốc: là ô co giãn trong flex
   nên nếu không khoá lại, màn hình thấp sẽ bóp nó xuống còn 2 dòng và cắt ngang
   chữ. Màn hình thấp thì thu cỡ chữ, chứ không thu số dòng. */
#tyApp #text { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   TRÒ CHUYỆN CHUNG — bong bóng nổi góc dưới bên phải mọi trang học sinh
   ══════════════════════════════════════════════════════════════════════════ */
.tk-nut { position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(160deg, #3358a8, #22439c); color: #fff;
  box-shadow: 0 10px 24px rgba(20, 40, 100, .32);
  display: grid; place-items: center; transition: transform .15s, box-shadow .15s; }
.tk-nut:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 40, 100, .4); }
.tk-nut-ico { font-size: 25px; line-height: 1; }
.tk-nut.dang-mo .tk-nut-ico { font-size: 22px; }
.tk-nut.dang-mo { background: linear-gradient(160deg, #4b5c7e, #33415c); }
.tk-cham { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; background: #e11d48; color: #fff;
  font: 800 12px/22px 'Be Vietnam Pro', system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2.5px #fff; }
.tk-nut.co-moi { animation: tk-rung 1.6s ease-in-out infinite; }
@keyframes tk-rung { 0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-9deg); } 92% { transform: rotate(9deg); } }

.tk-hop { position: fixed; right: 20px; bottom: 86px; z-index: 901;
  width: 370px; max-width: calc(100vw - 32px);
  height: 500px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid #dbe3f0; border-radius: 16px;
  box-shadow: 0 22px 60px rgba(15, 30, 70, .26);
  display: flex; flex-direction: column; overflow: hidden; }

.tk-dau { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 15px;
  background: #f4f7fc; border-bottom: 1px solid #e6ecf5; flex: none; }
.tk-dau strong { font-size: 14.5px; color: #1c2f66; }
.tk-dau-sub { font-size: 11.5px; color: #8894ac; margin-right: auto; }
.tk-dong { margin-left: auto; width: 28px; height: 28px; border: 0; background: transparent;
  color: #8894ac; font-size: 22px; line-height: 1; border-radius: 8px; cursor: pointer; }
.tk-dong:hover { background: #e6ecf5; color: #1c2f66; }

.tk-ghim { flex: none; display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 14px; background: #fff8e6; border-bottom: 1px solid #f2e3bd;
  font-size: 13px; line-height: 1.5; color: #6b4d09; }
.tk-ghim-nhan { font-weight: 800; white-space: nowrap; }

.tk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 12px; }
.tk-list::-webkit-scrollbar { width: 7px; }
.tk-list::-webkit-scrollbar-thumb { background: #cfd8e8; border-radius: 9px; }
.tk-cho { color: #8894ac; font-size: 13px; text-align: center; padding: 20px 0; }

.tk-tin { display: flex; gap: 9px; align-items: flex-start; }
.tk-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #dbeafe;
  display: grid; place-items: center; font-size: 17px; line-height: 1; overflow: hidden; }
.tk-av-chu { font: 800 14px 'Be Vietnam Pro', system-ui, sans-serif; color: #22439c; }
.tk-av.is-gv { background: #fde68a; }
.tk-than { min-width: 0; flex: 1; }
.tk-ten { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.tk-ten b { font-size: 13px; color: #1c2f66; }
.tk-ten span { font-size: 11px; color: #8894ac; background: #eef3fb;
  border-radius: 999px; padding: 1px 7px; }
.tk-ten i { font-size: 11px; color: #a8b2c6; font-style: normal; margin-left: auto; }
.tk-noi { font-size: 13.5px; line-height: 1.55; color: #2b3654;
  background: #f2f5fa; border-radius: 4px 12px 12px 12px; padding: 7px 11px;
  word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.tk-tin.is-me .tk-noi { background: #e7efff; }
.tk-tin.is-gv .tk-ten b { color: #b45309; }
.tk-tin.is-gv .tk-noi { background: #fff4d9; color: #543c05; font-weight: 600; }

.tk-bao { font-size: 12.5px; color: #b42318; background: #fef2f2;
  border: 1px solid #fbd5d5; border-radius: 9px; padding: 7px 10px; text-align: center; }

.tk-khoa { flex: none; padding: 11px 14px; background: #f8fafc; border-top: 1px solid #e6ecf5;
  font-size: 12.5px; color: #64748b; text-align: center; }

.tk-go { flex: none; display: flex; align-items: flex-end; gap: 7px;
  padding: 9px 10px; border-top: 1px solid #e6ecf5; background: #fff; }
.tk-go textarea { flex: 1; min-width: 0; resize: none; border: 1px solid #dbe3f0;
  border-radius: 11px; padding: 8px 11px; font: 400 13.5px/1.45 'Be Vietnam Pro', system-ui, sans-serif;
  color: #2b3654; max-height: 96px; }
.tk-go textarea:focus { outline: none; border-color: #3358a8; }
.tk-ghim-chon { display: flex; align-items: center; gap: 4px; font-size: 11.5px;
  color: #8894ac; white-space: nowrap; cursor: pointer; padding-bottom: 9px; }
.tk-gui { width: 38px; height: 38px; flex: none; border: 0; border-radius: 11px; cursor: pointer;
  background: #22439c; color: #fff; font-size: 16px; line-height: 1; }
.tk-gui:hover { background: #1a3580; }

/* Màn hình hẹp: khung chiếm gần trọn màn, nút nhỏ lại */
@media (max-width: 560px) {
  .tk-hop { right: 8px; left: 8px; bottom: 76px; width: auto;
    height: calc(100vh - 110px); max-height: none; }
  .tk-nut { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}
/* Khi thầy đang chiếu màn hình, khoá mềm phủ kín trang thì giấu luôn bong bóng */
body.sc-locked .tk-nut, body.sc-locked .tk-hop { display: none; }
@media (prefers-reduced-motion: reduce) { .tk-nut.co-moi { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   SƠ ĐỒ CHỖ NGỒI — mọi khoảng cách giữa các hàng bằng nhau

   Trước đây hàng đầu (.is-front) có margin-bottom riêng để đánh dấu "phía bảng",
   nên nhìn vào thấy hàng 1 rời ra còn các hàng sau sát nhau (đo được 10px so với
   4px). Bảng đã vẽ sẵn phía trên rồi nên không cần đánh dấu bằng khoảng trống
   nữa: dùng chung một biến --seat-gap cho cả khe dọc lẫn khe ngang.
   ══════════════════════════════════════════════════════════════════════════ */
.seatmap { --seat-gap: 4px; }
.seat-group { display: flex; flex-direction: column; gap: var(--seat-gap); }
.seat-row { gap: var(--seat-gap); margin-bottom: 0; }
.seat-row.is-front { margin-bottom: 0; }
@media (max-width: 820px) { .seatmap { --seat-gap: 3px; } }
/* Thuộc tính [hidden] của HTML bị các quy tắc display ở trên đè mất, nên khung
   chat / dải ghim / ô nhập lúc nào cũng hiện. Bắt buộc phải trả lại đúng nghĩa. */
.tk-hop[hidden], .tk-ghim[hidden], .tk-go[hidden], .tk-khoa[hidden],
.tk-cham[hidden], .tk-nut[hidden] { display: none !important; }
/* Giáo viên: nút ⋯ và bảng chọn trên từng tin (ghim · xoá · chặn) */
.tk-tin { position: relative; }
.tk-menu-nut { position: absolute; top: 0; right: 0; width: 24px; height: 22px; border: 0;
  border-radius: 7px; background: transparent; color: #a8b2c6; cursor: pointer;
  font-size: 15px; line-height: 1; opacity: 0; transition: opacity .12s; }
.tk-tin:hover .tk-menu-nut, .tk-menu-nut:focus { opacity: 1; }
.tk-menu-nut:hover { background: #e6ecf5; color: #22439c; }
.tk-tin.da-ghim .tk-noi { box-shadow: inset 3px 0 0 #d9820f; }

.tk-menu { position: fixed; z-index: 950; min-width: 208px;
  background: #fff; border: 1px solid #dbe3f0; border-radius: 11px; padding: 5px;
  box-shadow: 0 14px 34px rgba(15, 30, 70, .22); }
.tk-menu hr { border: 0; border-top: 1px solid #eef2f8; margin: 4px 2px; }
.tk-menu-muc { display: flex; align-items: center; gap: 8px; width: 100%; border: 0;
  background: transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer;
  font: 500 13px/1.3 'Be Vietnam Pro', system-ui, sans-serif; color: #2b3654; text-align: left; }
.tk-menu-muc span { width: 17px; flex: none; text-align: center; }
.tk-menu-muc:hover { background: #eef3fb; }
.tk-menu-muc.is-do { color: #b42318; }
.tk-menu-muc.is-do:hover { background: #fef2f2; }
.tk-bao.is-xong { color: #046c4e; background: #ecfdf5; border-color: #a7f3d0; }
/* Nút 🔇 trên tiêu đề và bảng chặn của giáo viên */
.tk-chan-nut { width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: #8894ac; font-size: 15px; line-height: 1; }
.tk-chan-nut:hover { background: #e6ecf5; }

.tk-chan { position: fixed; z-index: 951; width: 246px; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid #dbe3f0; border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(15, 30, 70, .24); }
.tk-chan-lop { width: 232px; }
.tk-chan-dau { font: 700 11px/1 'Be Vietnam Pro', system-ui, sans-serif; color: #8894ac;
  text-transform: uppercase; letter-spacing: .06em; padding: 7px 9px 8px; }
.tk-chan-hang { display: flex; align-items: center; gap: 8px; width: 100%; border: 0;
  background: transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left;
  font: 500 13px/1.35 'Be Vietnam Pro', system-ui, sans-serif; color: #2b3654; }
.tk-chan-hang:hover { background: #eef3fb; }
.tk-chan-ten { flex: 1; min-width: 0; }
.tk-chan-ten i { display: block; font-style: normal; font-size: 11px; color: #a8b2c6; }
.tk-chan-o { width: 19px; height: 19px; flex: none; border: 1.5px solid #cfd8e8; border-radius: 5px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: transparent; }
.tk-chan-hang.is-khoa { color: #9a3412; }
.tk-chan-hang.is-khoa .tk-chan-o { background: #f97316; border-color: #f97316; color: #fff; }
.tk-chan-mo .tk-chan-o { border: 0; color: #8894ac; font-size: 15px; }

.tk-chan-tim { border-top: 1px solid #eef2f8; margin-top: 4px; padding: 8px 9px 4px; }
.tk-chan-nhan { font: 700 11px/1 'Be Vietnam Pro', system-ui, sans-serif; color: #8894ac;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.tk-chan-tim input { width: 100%; border: 1px solid #dbe3f0; border-radius: 8px; padding: 7px 9px;
  font: 400 13px 'Be Vietnam Pro', system-ui, sans-serif; color: #2b3654; }
.tk-chan-tim input:focus { outline: none; border-color: #3358a8; }
.tk-chan-goi { margin-top: 5px; max-height: 168px; overflow-y: auto; }
.tk-chan-cho { font-size: 12.5px; color: #a8b2c6; padding: 8px 9px; }
.tk-chan-ds { max-height: 268px; overflow-y: auto; }
/* Bong bóng thảo luận dịch sang trái, tránh nút của tiện ích trình duyệt
   (Claude / dịch trang…) vẫn nằm sát mép phải màn hình. */
.tk-nut { right: 84px; }
.tk-hop { right: 84px; }
@media (max-width: 560px) {
  /* Điện thoại không có tiện ích ở góc, trả lại sát mép cho rộng chỗ */
  .tk-nut { right: 14px; }
  .tk-hop { right: 8px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   TRÒ CHƠI — ANH HÙNG BÀN PHÍM (bắn phi thuyền bằng cách gõ chữ)

   Mọi kích thước tính theo TỈ LỆ MÀN HÌNH — clamp(nhỏ nhất, min(bề ngang,
   chiều cao), lớn nhất) — để màn hình phòng máy nào cũng vừa, khỏi viết riêng.
   ══════════════════════════════════════════════════════════════════════════ */
.ah { position: absolute; inset: 0; display: flex; flex-direction: column;
  gap: clamp(5px, 1.1vh, 10px); padding: clamp(7px, 1.4vh, 12px);
  background: radial-gradient(120% 90% at 50% 0%, #16204a 0%, #0b1024 70%);
  color: #e8ecff; font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  overflow: hidden; border-radius: 14px;
  /* chống copy từ khóa đem đi dán: cả sân chơi không bôi đen được */
  -webkit-user-select: none; user-select: none; }
.ah-cam { position: absolute; left: 50%; top: 36%; transform: translateX(-50%);
  background: rgba(180, 35, 24, .95); color: #fff; font-weight: 800; font-size: 15px;
  padding: 10px 20px; border-radius: 12px; z-index: 40; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ah .sp { white-space: pre; }
.ah .todo { color: #8b97c4; }
.ah .good { color: #6ee7a8; text-shadow: 0 0 8px rgba(110,231,168,.55); }

/* màn chờ */
.ah-cho { margin: auto; text-align: center; max-width: 560px; padding: 16px; }
.ah-cho-ico { font-size: clamp(28px, 5vh, 44px); }
.ah-cho h3 { font-size: clamp(17px, 2.6vh, 23px); font-weight: 700; color: #fff; margin: 6px 0 4px; }
.ah-cho p { font-size: 13.5px; color: #a8b3dd; margin: 0 0 12px; }
.ah-chang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.ah-chang-o { border: 1px solid #2b3568; border-radius: 12px; padding: 11px 10px; background: #141b38; }
.ah-chang-o b { display: grid; place-items: center; width: 30px; height: 26px; margin: 0 auto 7px;
  border-radius: 8px; background: linear-gradient(180deg,#ffce8a,#d9820f); color: #3a2408;
  font: 700 12px 'Cascadia Mono', monospace; }
.ah-chang-o strong { display: block; font-size: 13px; color: #fff; }
.ah-chang-o span { display: block; font: 600 10px 'Cascadia Mono', monospace; color: #ffce8a; margin-top: 5px; }
.ah-nho { font-size: 11.5px !important; color: #8b97c4 !important; }

/* thanh cấp · màn · điểm */
.ah-thanh { display: flex; gap: 8px; align-items: stretch; flex: none; }
.ah-leg { flex: 1; min-width: 0; border: 1px solid #2b3568; border-radius: 11px; padding: 6px 10px;
  background: #141b38; display: flex; align-items: center; gap: 7px; }
.ah-leg.on { border-color: #d9820f; background: rgba(217,130,15,.16); }
.ah-leg.done { border-color: #2f80ed; background: rgba(47,128,237,.14); }
.ah-leg b { width: 22px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 6px; background: #222c58; font: 700 10px 'Cascadia Mono', monospace; color: #e8ecff; }
.ah-leg.on b { background: linear-gradient(180deg,#ffce8a,#d9820f); color: #3a2408; }
.ah-leg span { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: #e8ecff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-tong { padding-left: 12px; border-left: 1px solid #2b3568; text-align: right; flex: none;
  display: flex; flex-direction: column; justify-content: center; }
.ah-tong b { font: 300 clamp(17px, min(2vw, 3.3vh), 26px)/1 'Be Vietnam Pro', sans-serif;
  font-variant-numeric: tabular-nums; color: #fff; }
.ah-tong span { font: 600 8px 'Cascadia Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #8b97c4; }
.ah-thoat { flex: none; align-self: stretch; padding: 0 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid #6b2740; background: #241129; color: #ff9db1;
  font: 700 11px 'Be Vietnam Pro', sans-serif; }
.ah-thoat:hover { background: #3a1626; border-color: #d6314b; }

/* dải chỉ số + nhiên liệu */
.ah-hud { display: flex; gap: 8px; flex: none; align-items: stretch; }
.ah-o { flex: 1; min-width: 0; border: 1px solid #2b3568; border-radius: 11px; background: #141b38;
  padding: clamp(4px, 1vh, 8px) 12px; }
.ah-o b { display: block; font: 350 clamp(14px, min(1.6vw, 2.6vh), 20px)/1.15 'Be Vietnam Pro', sans-serif;
  font-variant-numeric: tabular-nums; color: #fff; }
.ah-o span { font: 600 8px 'Cascadia Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #8b97c4; }
.ah-o.pri { flex: 1.3; background: rgba(217,130,15,.14); border-color: rgba(217,130,15,.5); }
.ah-o.pri b { font-size: clamp(18px, min(2.2vw, 3.6vh), 28px); }
.ah-o.ok b { color: #6ee7a8; }
.ah-xang { flex: 1.6; min-width: 0; border: 1px solid #2b3568; border-radius: 11px; background: #141b38;
  padding: clamp(4px, 1vh, 8px) 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.ah-xang-thanh { height: 9px; border-radius: 99px; background: #222c58; overflow: hidden; }
.ah-xang-thanh i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #d6314b, #ffce8a, #6ee7a8); transition: width .25s; }
.ah-xang span { font: 600 8px 'Cascadia Mono', monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #8b97c4; }

/* sân chơi — đang bay trong không gian: hai lớp sao trôi xuống với tốc độ khác
   nhau (thị sai: sao xa chậm, sao gần nhanh kèm vệt sáng) */
.ah-san { flex: 1; min-height: 0; position: relative; overflow: hidden; cursor: text;
  border: 1px solid #2b3568; border-radius: 12px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(47,128,237,.14), transparent 70%); }
.ah-san::before, .ah-san::after { content: ''; position: absolute; inset: 0;
  pointer-events: none; background-repeat: repeat; }
.ah-san::before {                                   /* sao nhỏ ở xa, trôi chậm */
  opacity: .75;
  background-image:
    radial-gradient(1.4px 1.4px at 11% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 33% 71%, rgba(210,225,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 38%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 67% 87%, rgba(200,215,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 81% 24%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 93% 59%, rgba(220,230,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 24% 47%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 45% 92%, rgba(255,255,255,.5), transparent 60%);
  background-size: 290px 380px;
  animation: ah-saoxa 26s linear infinite;
}
.ah-san::after {                                    /* sao to ở gần + vệt sáng warp */
  background-image:
    radial-gradient(2.3px 2.3px at 21% 33%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 58% 74%, rgba(190,215,255,.9), transparent 60%),
    radial-gradient(2.4px 2.4px at 84% 51%, rgba(255,240,210,.85), transparent 60%),
    radial-gradient(2px 2px at 39% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 18px at 72% 22%, rgba(160,200,255,.55), transparent 62%),
    radial-gradient(1.5px 22px at 12% 66%, rgba(160,200,255,.45), transparent 62%),
    radial-gradient(1.4px 16px at 49% 88%, rgba(190,220,255,.4), transparent 62%);
  background-size: 360px 520px;
  animation: ah-saogan 8.5s linear infinite;
}
@keyframes ah-saoxa  { to { background-position: 0 380px; } }
@keyframes ah-saogan { to { background-position: 0 520px; } }
@media (prefers-reduced-motion: reduce) {
  .ah-san::before, .ah-san::after { animation: none; }
}
.ah-lanes { position: absolute; inset: 0 0 clamp(104px, 17vh, 152px) 0; overflow: visible; }
.ah-lan { position: absolute; top: 0; padding: 3px 8px; will-change: transform;
  font: 600 clamp(13px, min(1.6vw, 2.6vh), 20px)/1.5 'Cascadia Mono', Consolas, monospace; }
.ah-dich { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ah-dich-ico { font-size: clamp(19px, min(2.3vw, 3.6vh), 30px); line-height: 1;
  filter: drop-shadow(0 0 6px rgba(214,49,75,.55)); }
.ah-dich-tu { padding: 3px 11px; border-radius: 10px; background: rgba(11,16,36,.88);
  border: 2px solid #3a4680; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.ah-cau { left: 50% !important; transform: translateX(-50%) !important; top: 38%;
  max-width: 92%; text-align: center; }
.ah-cau .ah-dich-tu { white-space: normal; display: inline-block; line-height: 1.9; }
.ah-no { animation: ah-no .3s ease-out forwards;
  display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
@keyframes ah-no { to { opacity: 0; transform: translateY(var(--y, 0)) scale(1.7); filter: blur(3px); } }

/* phi thuyền mang avatar của con — lơ lửng như đang bay */
.ah-tau { position: absolute; left: 50%; bottom: clamp(40px, 7vh, 58px); transform: translateX(-50%);
  display: grid; place-items: center; pointer-events: none; }
.ah-tau-av { animation: ah-bay 2.6s ease-in-out infinite; }
@keyframes ah-bay {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-7px) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) { .ah-tau-av { animation: none; } }
.ah-tau-av canvas { width: clamp(80px, min(8.6vw, 13.5vh), 132px); height: auto; display: block;
  filter: drop-shadow(0 8px 16px rgba(47,128,237,.55)); }
.ah-tau::after { content: ''; position: absolute; bottom: -6px; width: 62%; height: 10px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,206,138,.85), transparent); }

/* ô nạp đạn */
.ah-dan { position: absolute; left: 50%; bottom: clamp(8px, 1.6vh, 14px); transform: translateX(-50%);
  width: min(92%, 560px); display: flex; align-items: center; gap: 9px;
  padding: clamp(5px, 1vh, 9px) 12px; border-radius: 12px;
  border: 2px solid #2f80ed; background: rgba(11,16,36,.9);
  box-shadow: 0 0 0 4px rgba(47,128,237,.14); }
.ah-dan-nhan { flex: none; font: 700 8.5px 'Cascadia Mono', monospace; letter-spacing: .16em;
  color: #7fb2ff; }
.ah-dan-chu { flex: 1; min-width: 0; min-height: 1.4em; color: #fff; white-space: pre-wrap;
  word-break: break-word;
  font: 600 clamp(13px, min(1.7vw, 2.7vh), 20px)/1.4 'Cascadia Mono', Consolas, monospace; }
.ah-dan-enter { flex: none; font: 700 9px 'Cascadia Mono', monospace; color: #8b97c4; }
/* Ô nhập thật phủ lên ô nạp đạn: vô hình nhưng con trỏ nằm đúng vị trí trên
   màn hình để bộ gõ tiếng Việt (Unikey…) ghép dấu chuẩn ngay từ phím đầu */
.ah-nhap { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; background: transparent; caret-color: transparent;
  font: inherit; cursor: text; }
.ah-rung { animation: ah-rung .25s; }
@keyframes ah-rung { 25% { transform: translateX(-52%); } 75% { transform: translateX(-48%); } }
.ah-va { animation: ah-va .3s; }
@keyframes ah-va { 30% { box-shadow: inset 0 -40px 60px -20px rgba(214,49,75,.6); } }

/* lớp phủ giữa các màn */
.ah-phu { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  pointer-events: none; }
.ah-phu:empty { display: none; }
.ah-dem, .ah-loi { pointer-events: auto; background: rgba(11,16,36,.95);
  backdrop-filter: blur(6px); border: 1px solid #2b3568; border-radius: 16px;
  padding: 20px 24px; text-align: center; max-width: 460px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.ah-dem-t { font-size: 16px; font-weight: 700; color: #fff; }
.ah-dem-r { font-size: 13px; line-height: 1.7; color: #a8b3dd; margin-top: 8px; }
.ah-dem-r b { color: #fff; }
.ah-dem-n { width: 76px; height: 76px; margin: 14px auto 0; border-radius: 18px;
  display: grid; place-items: center; font: 200 40px/1 'Be Vietnam Pro', sans-serif;
  background: linear-gradient(180deg,#ffce8a,#d9820f); color: #3a2408; }
.ah-diem { font: 300 44px/1 'Be Vietnam Pro', sans-serif; color: #6ee7a8; margin: 8px 0;
  font-variant-numeric: tabular-nums; }
.ah-tiep, .ah-lai { margin-top: 14px; }
.ah-loi { color: #ff9db1; font-size: 13.5px; }
.ah-canh { flex: none; margin: 0 0 6px; padding: 7px 12px; border-radius: 10px;
  background: rgba(214,49,75,.16); border: 1px solid #6b2740; color: #ff9db1;
  font-size: 12.5px; font-weight: 600; }

/* bảng nhắc bật/tắt bộ gõ, có ô gõ thử để xác nhận */
.ah-nhac { max-width: 460px; }
.ah-nhac-ma { width: 46px; height: 34px; margin: 0 auto 10px; border-radius: 9px;
  display: grid; place-items: center; font: 700 14px 'Cascadia Mono', monospace; letter-spacing: .06em;
  background: linear-gradient(180deg,#eef3fb,#c9d6ee); color: #1c2f66; }
.ah-mau { padding: 1px 8px; border-radius: 7px; background: #222c58; color: #ffce8a;
  font-family: 'Cascadia Mono', monospace; }
.ah-thu { width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 11px;
  border: 2px solid #2b3568; background: #0b1024; color: #fff; text-align: center;
  font: 600 17px 'Cascadia Mono', Consolas, monospace; }
.ah-thu:focus { outline: none; border-color: #2f80ed; }
.ah-thu-bao { min-height: 18px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #8b97c4; }
.ah-thu-bao.is-dat { color: #6ee7a8; }
.ah-thu-bao.is-sai { color: #ff9db1; }

/* kết quả */
.ah-cuoi { margin: auto; text-align: center; padding: 16px; }
.ah-huy { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%; font-size: 38px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(217,130,15,.5), transparent 70%);
  border: 2px solid rgba(217,130,15,.6); }
.ah-ten { font-size: 17px; font-weight: 700; color: #fff; }
.ah-tongdiem { font: 300 clamp(34px, 7vh, 58px)/1 'Be Vietnam Pro', sans-serif; color: #ffce8a;
  margin: 6px 0 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .ah-chang { grid-template-columns: 1fr; }
  .ah-leg span { display: none; }
  .ah-hud .ah-o:nth-child(3) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BẢNG XẾP HẠNG NGOÀI TRANG CHỦ — ai cũng xem được, chỉ có thứ hạng
   ══════════════════════════════════════════════════════════════════════════ */
.vn-bxh-tab a { cursor: pointer; }
.vn-bxh-chu { margin: -6px 0 12px; font-size: 13px; }
.vn-bxh { border: 1px solid var(--line, #e2e8f0); border-radius: 14px; overflow: hidden;
          background: #fff; }
.vn-bxh-h, .vn-bxh-d { display: grid; align-items: center; gap: 10px;
          padding: 9px 14px; }
.vn-bxh.la-lop .vn-bxh-h,
.vn-bxh.la-lop .vn-bxh-d { grid-template-columns: 52px 1fr 168px; }
.vn-bxh.la-hs .vn-bxh-h,
.vn-bxh.la-hs .vn-bxh-d { grid-template-columns: 48px 1fr 52px 104px; }
.vn-bxh-h { background: #f1f5f9; font-size: 12px; font-weight: 700; color: #64748b;
            text-transform: uppercase; letter-spacing: .3px; }
.vn-bxh-d { border-top: 1px solid #eef2f7; font-size: 14.5px; }
.vn-bxh-d.is-top { background: rgba(217, 160, 15, .07); }
.vn-bxh-d.is-chua { color: #94a3b8; }
.vn-bxh .c-h { font-weight: 700; font-size: 15px; }
.vn-bxh-d.is-top .c-h { font-size: 18px; }
.vn-bxh .c-t { font-weight: 600; color: #1e293b; }
.vn-bxh-d.is-chua .c-t { font-weight: 500; color: #94a3b8; }
.vn-bxh .c-l, .vn-bxh .c-n { text-align: right; font-variant-numeric: tabular-nums; color: #475569; }
.vn-bxh .c-n { font-weight: 700; }
.vn-btn-ghost { background: #f1f5f9; color: #334155; border: 1px solid var(--line, #e2e8f0); }
.vn-btn-ghost:hover { background: #e2e8f0; }

@media (max-width: 620px) {
  .vn-bxh.la-lop .vn-bxh-h,
  .vn-bxh.la-lop .vn-bxh-d { grid-template-columns: 46px 1fr 132px; }
  .vn-bxh.la-hs .vn-bxh-h,
  .vn-bxh.la-hs .vn-bxh-d { grid-template-columns: 42px 1fr 48px 92px; }
  .vn-bxh-h, .vn-bxh-d { padding: 8px 10px; gap: 6px; font-size: 13.5px; }
}
/* display:grid ở trên đè mất thuộc tính hidden, phải chặn lại kẻo giấu không được */
.vn-bxh[hidden], .vn-bxh-d[hidden], .vn-trang[hidden] { display: none !important; }
/* Nút ⛶ nằm ở góc trên bên phải khung, phải chừa chỗ kẻo đè lên ô Tổng điểm */
/* Anh hùng bàn phím dựng bằng thẻ HTML, không dùng canvas: khung chơi không có
   gì đỡ chiều cao nên phải cấp tay, và bỏ cột bảng phụ để lấy trọn bề ngang.
   Chiều cao theo TỈ LỆ MÀN HÌNH để phòng máy nào cũng vừa. */
.g-full.is-ah { grid-template-columns: minmax(0, 1fr); }
.g-full.is-ah .g-extra { display: none; }
.g-stage.is-ah { height: clamp(300px, 74vh, 640px); min-height: 0; align-items: stretch; }
.g-stage.is-ah .g-canvas { display: none !important; }
.g-stage.is-ah .g-fs { z-index: 8; }
.g-full:fullscreen .g-stage.is-ah { height: 100%; min-height: 0; }
@media (max-width: 760px) { .g-stage.is-ah { height: clamp(280px, 76vh, 620px); } }
.g-stage.is-ah .ah-thanh { margin-right: 42px; }
.g-full:fullscreen .g-stage.is-ah .ah-thanh { margin-right: 46px; }
/* Cột học sinh có avatar đứng cạnh tên */
.vn-bxh.la-hs .c-t { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vn-bxh.la-hs .c-t .av { flex: none; }
.vn-bxh.la-hs .vn-bxh-d { padding-top: 6px; padding-bottom: 6px; }
.vn-bxh-d.is-chua .av { opacity: .55; }
@media (max-width: 620px) {
  .vn-bxh.la-hs .c-t { gap: 6px; }
  .vn-bxh.la-hs .c-t .av { --av: 24px !important; }
}

/* Hai bảng xếp hạng đứng song song cho đỡ trống chỗ; hẹp quá thì xuống hàng */
.vn-bxh-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.vn-bxh-khoi { min-width: 0; }
.vn-bxh-tt { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #1e293b; }
.vn-bxh-khoi .vn-bxh-chu { font-size: 12.5px; line-height: 1.5; }
.vn-bxh-khoi .vn-bxh-h { font-size: 11px; }
.vn-bxh-khoi .vn-bxh-d { font-size: 14px; }
.vn-bxh-khoi .c-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .vn-bxh-cot { grid-template-columns: 1fr; gap: 26px; } }
/* Tên cột số không được xuống hàng, để hàng tiêu đề luôn cao đúng một dòng */
.vn-bxh-h .c-n { white-space: nowrap; }
.vn-bxh-h { align-items: center; }
.vn-bxh-tab { flex-wrap: wrap; }
/* Nút Kết thúc sớm nằm cuối thanh chặng, và nút Chơi lại ở màn kết quả */
.ah-thoat { flex: none; align-self: stretch; padding: 0 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid #e7c9cf; background: #fff; color: #b42318;
  font: 700 11px 'Be Vietnam Pro', sans-serif; letter-spacing: .02em; }
.ah-thoat:hover { background: #fff1f0; border-color: #d6314b; }
.ah-cuoi .ah-lai { margin-top: 14px; }

/* Bảng nhắc bật/tắt bộ gõ trước mỗi phần thi và mỗi bài luyện */
.ah-nhac { max-width: 480px; }
.ah-nhac-ma { width: 46px; height: 34px; margin: 0 auto 10px; border-radius: 9px;
  display: grid; place-items: center; font: 700 14px 'Cascadia Mono', monospace; letter-spacing: .06em;
  background: linear-gradient(180deg,#fff,#e7ecf6); box-shadow: 0 2px 0 #b8c2d6; color: #1c2f66; }
.ah-nhac .ah-dem-r { margin-bottom: 14px; }
.ah-canh { flex: none; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
  background: #fff1f0; border: 1px solid #f3c6c2; color: #b42318;
  font-size: 12.5px; font-weight: 600; }
/* Bảng nhắc bật/tắt bộ gõ trong Thử thách — phủ lên vùng chữ, y như bên trò
   chơi. Đặt dưới đáy thẻ thì bị bàn phím che vì thẻ có chiều cao tính sẵn.
   Giao diện Thử thách có  nên phải khai trong #tyApp. */
#tyApp #typebox { position: relative; }
#tyApp .ty-nhac { position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; background: rgba(247,249,253,.94); backdrop-filter: blur(5px); }
#tyApp .ty-nhac-hop { text-align: center; max-width: 440px; padding: 22px 26px;
  border: 1px solid #dbe3f0; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 44px rgba(15,30,70,.16);
  font: 500 14px/1.6 'Be Vietnam Pro', system-ui, sans-serif; color: #5e6a85; }
#tyApp .ty-ma { width: 42px; height: 30px; margin: 0 auto 10px; display: grid; place-items: center;
  border-radius: 9px; font: 700 12px 'Cascadia Mono', monospace; letter-spacing: .06em;
  background: linear-gradient(180deg,#fff,#e7ecf6); box-shadow: 0 2px 0 #b8c2d6; color: #1c2f66; }
#tyApp .ty-nhac-t { font: 700 17px 'Be Vietnam Pro', system-ui, sans-serif; color: #1c2f66;
  margin-bottom: 6px; }
#tyApp .ty-nhac-r { margin-bottom: 16px; }
#tyApp .ty-nhac-r b { color: #141c33; font-weight: 700; }
#tyApp .ty-phimtat { display: inline-block; margin-top: 4px; color: #8894ac; font-size: 12.5px; }
#tyApp .ty-ok { padding: 10px 22px; border: 0; border-radius: 11px; cursor: pointer;
  background: #22439c; color: #fff; box-shadow: 0 2px 0 #16306f;
  font: 700 14px 'Be Vietnam Pro', system-ui, sans-serif; }
#tyApp .ty-ok:hover { background: #1b3782; }
#tyApp .ty-ok:active { transform: translateY(1px); box-shadow: 0 1px 0 #16306f; }
#tyApp .ty-canh { color: #b42318; font-weight: 700; }
/* Tên chặng phải nằm gọn một dòng, hẹp thì cắt bớt chứ không xuống hàng */
.ah-leg { min-width: 0; }
.ah-leg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-size: 11px; }
.ah-leg b, .ah-leg i, .ah-leg em { flex: none; }
.ah-thanh { flex-wrap: nowrap; }
@media (max-width: 900px) { .ah-leg span { font-size: 10.5px; } }

/* Bảng kỷ lục trong trang trò chơi: khối 6 và khối 7 đứng cạnh nhau */
.g-board-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.g-board-khoi { min-width: 0; }
.g-board-tt { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #1e293b; }
@media (max-width: 1000px) { .g-board-cot { grid-template-columns: 1fr; gap: 24px; } }

/* Thanh chuyển trang của bảng xếp hạng */
.vn-trang { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.vn-trang button { min-width: 34px; height: 32px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--line, #e2e8f0); border-radius: 9px; background: #fff; color: #334155;
  font: 700 15px/1 'Be Vietnam Pro', system-ui, sans-serif; }
.vn-trang button:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.vn-trang button:disabled { opacity: .38; cursor: default; }
.vn-trang-so { min-width: 108px; text-align: center; font-size: 13px; font-weight: 600; color: #475569; }
.vn-bxh-d[hidden], .vn-log-row[hidden] { display: none !important; }

/* Thả cảm xúc lên tin nhắn trong khung Thảo luận chung */
.tk-cx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.tk-cx-nut { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 1px 8px 2px; border-radius: 999px; border: 1px solid #dbe3f0; background: #fff;
  font-size: 12.5px; line-height: 1.5; }
.tk-cx-nut i { font-style: normal; font-weight: 700; font-size: 11.5px; color: #5e6a85; }
.tk-cx-nut:hover { border-color: #b9c6dd; }
.tk-cx-nut.is-toi { border-color: #22439c; background: #eef2fd; }
.tk-cx-nut.is-toi i { color: #22439c; }
.tk-cx-them { width: 24px; height: 22px; padding: 0; cursor: pointer; border-radius: 999px;
  border: 1px dashed #cbd5e1; background: transparent; color: #94a3b8; font-size: 13px; line-height: 1; }
.tk-cx-them:hover { border-style: solid; border-color: #94a3b8; color: #475569; background: #fff; }
.tk-tin.is-me .tk-cx, .tk-tin.is-gv .tk-cx { justify-content: flex-start; }

/* Bảng chọn cảm xúc — nổi trên cùng để khung chat không cắt mất */
.tk-cx-bang { position: fixed; z-index: 1000; display: flex; gap: 2px; padding: 5px 6px;
  border-radius: 999px; border: 1px solid #dbe3f0; background: #fff;
  box-shadow: 0 10px 26px rgba(15, 30, 70, .2); }
.tk-cx-bang button { width: 32px; height: 32px; padding: 0; cursor: pointer; border: 0;
  border-radius: 50%; background: transparent; font-size: 19px; line-height: 1; }
.tk-cx-bang button:hover { background: #eef2f7; transform: scale(1.14); }
.tk-cx-bang button.is-toi { background: #eef2fd; }

/* Trò chơi đang ở chế độ nháp — chỉ giáo viên thấy */
.vn-alert-nhap { margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid #f2e3bd; background: #fff8e6; color: #6b4d09;
  font-size: 13.5px; line-height: 1.6; }


/* ⏳ Đồng hồ cát — nút tạm dừng và bảng nghỉ */
.ah-dung { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 0 13px; cursor: pointer; border-radius: 11px;
  border: 1px solid #7a5a1c; background: rgba(217,130,15,.18); color: #ffce8a; }
.ah-dung:hover { background: rgba(217,130,15,.32); border-color: #d9820f; }
.ah-dung b { font-size: clamp(13px, 2vh, 18px); line-height: 1; }
.ah-dung span { font: 700 9px 'Cascadia Mono', monospace; }
.ah-dung-hop { border-color: #7a5a1c; }
.ah-dung-ico { font-size: 34px; line-height: 1; margin-bottom: 4px; }

/* Tên lửa, vụ nổ, va chạm và cảnh tiếp nhiên liệu */
.ah-tenlua { position: absolute; z-index: 3; pointer-events: none; transform-origin: 50% 50%;
  font-size: clamp(18px, min(2.4vw, 3.8vh), 32px); line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,206,138,.9)); }
.ah-tenlua.la-truot { opacity: .8; }
/* màn nạp kiểu mới: đoạn văn dài, gõ đúng tới đâu tô xanh tới đó */
.ah-doan { position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  width: min(92%, 780px); padding: 16px 20px; border-radius: 14px;
  background: rgba(11, 16, 36, .88); border: 2px solid #3a4680;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.ah-doan-chu { font: 600 clamp(16px, 2.2vw, 22px)/1.9 'Cascadia Mono', Consolas, monospace;
  color: #8b97c4; word-break: break-word; }
.ah-doan-chu .good { color: #6ee7a8; }
.ah-doan-chu .con  { color: #fff; background: rgba(126, 170, 255, .35);
  border-radius: 3px; animation: ah-nhay 1s steps(2) infinite; }
.ah-doan-chu .bad  { color: #ff9db1; background: rgba(214, 49, 75, .4); border-radius: 3px; }
.ah-doan-chu .todo { opacity: .6; }
@keyframes ah-nhay { 50% { background: rgba(126, 170, 255, .08); } }
.ah-doan-nho { margin-top: 8px; font-size: 11.5px; color: #8b97c4; }
.ah-doan-sai { animation: ah-doan-sai .22s; }
@keyframes ah-doan-sai {
  25% { transform: translateX(calc(-50% - 5px)); }
  75% { transform: translateX(calc(-50% + 5px)); }
}

/* viên đạn địch bắn trả phi thuyền */
.ah-viend { position: absolute; z-index: 2; width: 7px; height: 12px; border-radius: 4px;
  margin: -6px 0 0 -3px; pointer-events: none;
  background: linear-gradient(#ffd1da, #d6314b);
  box-shadow: 0 0 8px rgba(214, 49, 75, .9); }

/* viên đạn nhỏ bắn theo từng phím gõ (hiệu ứng vui, không tính điểm) */
.ah-vien { position: absolute; z-index: 2; width: 6px; height: 13px; border-radius: 4px;
  margin: -7px 0 0 -3px; pointer-events: none;
  background: linear-gradient(#fff, #ffce8a);
  box-shadow: 0 0 8px rgba(255, 206, 138, .95); }
.ah-loe { position: absolute; z-index: 3; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,206,138,0));
  animation: ah-loe .25s ease-out forwards; }
@keyframes ah-loe { to { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }

.ah-toano { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%);
  font-size: clamp(28px, min(3.6vw, 5.6vh), 52px); line-height: 1;
  animation: ah-toano .45s ease-out forwards; }
@keyframes ah-toano {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}
.ah-tau-va { animation: ah-tau-va .35s; }
@keyframes ah-tau-va {
  0%, 100% { filter: drop-shadow(0 8px 16px rgba(47,128,237,.55)); }
  40% { filter: drop-shadow(0 0 18px rgba(214,49,75,.95)) brightness(1.5); transform: translateX(-53%); }
}
.ah-tau-nap { animation: ah-tau-nap .5s; }
@keyframes ah-tau-nap {
  40% { filter: drop-shadow(0 0 20px rgba(110,231,168,.95)) brightness(1.25); }
}

/* trạm tiếp nhiên liệu ở màn nạp */
.ah-tram { position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ah-tram-thung { font-size: clamp(26px, min(3.4vw, 5.4vh), 48px); line-height: 1;
  filter: drop-shadow(0 0 10px rgba(110,231,168,.6)); }
.ah-tram-ong { position: relative; width: 12px; height: clamp(46px, 9vh, 96px);
  border-radius: 99px; background: linear-gradient(180deg, #1c2450, #141b38);
  border: 2px solid #2b3568; overflow: hidden; margin-top: 2px; }
.ah-tram-ong i { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: #6ee7a8; transform: translateX(-50%); box-shadow: 0 0 8px rgba(110,231,168,.9);
  animation: ah-giot .85s linear 1 both; }
@keyframes ah-giot { from { top: -8px; } to { top: 100%; } }
.ah-tram.ah-bom .ah-tram-ong { border-color: #6ee7a8; box-shadow: 0 0 14px rgba(110,231,168,.7); }
.ah-tram.ah-bom .ah-tram-thung { transform: scale(1.15); }

/* ── Màn xác nhận bộ gõ: một màn riêng, chỉ có đúng một ô nhập ─────────────
   Trước đây là lớp phủ đè lên sân chơi nên màn hình thấp là tràn, ô nhập bị
   đẩy khuất xuống dưới ô nạp đạn. Giờ nó chiếm trọn khung, không thể chồng. */
.ah-xn { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.ah-xn-hop { width: min(100%, 460px); max-height: 100%; overflow: auto; text-align: center;
  padding: clamp(12px, 3vh, 24px) clamp(14px, 3vw, 26px); border-radius: 16px;
  border: 1px solid #2b3568; background: #141b38; }
.ah-xn-dau { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.ah-xn-t { font: 700 clamp(13px, 2.2vh, 16px) 'Be Vietnam Pro', sans-serif; color: #fff; }
.ah-xn-r { margin-top: 8px; font-size: clamp(12px, 1.9vh, 13.5px); line-height: 1.6; color: #a8b3dd; }
.ah-xn-r b { color: #fff; }
.ah-xn-tat { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 7px;
  background: #222c58; color: #ffce8a; font: 700 11px 'Cascadia Mono', monospace; }
.ah-xn-nhan { margin-top: clamp(8px, 2vh, 14px); font: 600 10.5px 'Cascadia Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #8b97c4; }
.ah-xn .ah-mau { display: inline-block; margin: 5px 0 clamp(8px, 2vh, 14px); padding: 3px 14px;
  border-radius: 9px; background: #222c58; color: #ffce8a;
  font: 700 clamp(16px, 2.8vh, 22px) 'Cascadia Mono', monospace; }
.ah-xn .ah-thu { width: 100%; padding: clamp(8px, 1.8vh, 12px) 14px; border-radius: 11px;
  border: 2px solid #2b3568; background: #0b1024; color: #fff; text-align: center;
  font: 600 clamp(15px, 2.6vh, 20px) 'Cascadia Mono', Consolas, monospace; }
.ah-xn .ah-thu:focus { outline: none; border-color: #2f80ed; box-shadow: 0 0 0 4px rgba(47,128,237,.18); }
.ah-xn .ah-thu-bao { min-height: 17px; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #8b97c4; }

/* Kẻ địch đặc biệt: trùm và thùng nhiên liệu */
.ah-dich.la-trum .ah-dich-ico { font-size: clamp(24px, min(3vw, 4.6vh), 40px);
  filter: drop-shadow(0 0 12px rgba(255,206,138,.95)); }
.ah-dich.la-trum .ah-dich-tu { border-color: #ffce8a; background: rgba(58,36,8,.9);
  box-shadow: 0 0 16px rgba(255,206,138,.5); }
.ah-dich.la-xang .ah-dich-ico { filter: drop-shadow(0 0 10px rgba(110,231,168,.9)); }
.ah-dich.la-xang .ah-dich-tu { border-color: #6ee7a8; background: rgba(6,42,28,.9); }
.ah-nhan { padding: 0 7px; border-radius: 99px; font: 700 9px 'Cascadia Mono', monospace;
  letter-spacing: .06em; margin-bottom: 1px; }
.la-trum .ah-nhan { background: #ffce8a; color: #3a2408; }
.la-xang .ah-nhan { background: #6ee7a8; color: #04281a; }

/* Chữ bị che ở thể thức tàng hình */
.ah-an { color: #4b5891; letter-spacing: .1em; }

/* ══════════════════════════════════════════════════════════════════════════
   NHIỆM VỤ HỌC TẬP — lộ trình các nút, làm trực tiếp trên trang
   ══════════════════════════════════════════════════════════════════════════ */
.nv-duong { display: grid; gap: 0; max-width: none; position: relative; }
/* Vạch nối dọc bên trái đã bỏ (03/09) — thẻ trải toàn trang nên vạch chỉ gây lệch */
.nv-nut { position: relative; background: #fff; border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px; margin: 0 0 14px 0; box-shadow: 0 1px 2px rgba(30,45,90,.05); }
.nv-nut summary { display: flex; align-items: center; gap: 13px; padding: 14px 18px;
  cursor: pointer; list-style: none; }
.nv-nut summary::-webkit-details-marker { display: none; }
.nv-so { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid;
  place-items: center; background: #eef2f9; border: 2px solid var(--line, #e2e8f0);
  font: 800 15px 'Be Vietnam Pro', sans-serif; color: #475569; position: relative; z-index: 1; }
.nv-nut.la-nop   .nv-so { background: #fff7e0; border-color: #eab308; color: #92670a; }
.nv-nut.la-sua   .nv-so { background: #fff1f0; border-color: #d6314b; color: #b42318; }
.nv-nut.la-duyet .nv-so { background: #e4f5ec; border-color: #0e8f5d; color: #0e8f5d; }
.nv-ten { flex: 1; min-width: 0; }
.nv-ten strong { display: block; font-size: 15.5px; color: #1e293b; }
.nv-ten em { display: block; font-style: normal; font-size: 12.5px; color: #64748b; margin-top: 1px; }
.nv-tt { flex: none; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.nv-tt-lam   { background: #eef2f9; color: #475569; }
.nv-tt-nop   { background: #fff7e0; color: #92670a; }
.nv-tt-sua   { background: #fff1f0; color: #b42318; }
.nv-tt-duyet { background: #e4f5ec; color: #0e8f5d; }

.nv-ruot { padding: 2px 18px 18px 65px; display: grid; gap: 13px; }
@media (max-width: 640px) { .nv-ruot { padding-left: 18px; } }
.nv-hd { margin: 0; font-size: 13.5px; color: #475569; }
.nv-form { display: grid; gap: 10px; }
.nv-o span { display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.nv-o input, .nv-o textarea { width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px; font: 400 14px/1.55 inherit;
  color: #1e293b; background: #fff; }
.nv-o input:focus, .nv-o textarea:focus { outline: none; border-color: #22439c;
  box-shadow: 0 0 0 3px rgba(34,67,156,.12); }
.nv-o input:disabled, .nv-o textarea:disabled { background: #f6f8fc; color: #475569; }

.nv-tieuchi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nv-tc-nhan { font: 700 10.5px 'Cascadia Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3b8; margin-right: 2px; }
.nv-tc { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #eef2f9; color: #475569; }
.nv-tc.la-dat  { background: #e4f5ec; color: #0e8f5d; }
.nv-tc.la-chua { background: #fff1f0; color: #b42318; }

.nv-gopy { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.nv-gopy.la-sua   { background: #fff1f0; border: 1px solid #f3c6c2; color: #7f1d1d; }
.nv-gopy.la-duyet { background: #e4f5ec; border: 1px solid #b7e3cd; color: #14532d; }

.nv-hanh { display: flex; align-items: center; gap: 12px; }
.nv-luu { font-size: 12.5px; color: #94a3b8; }

.nv-cuuho { border: 1.5px dashed #d9820f; border-radius: 12px; background: #fff8ec;
  padding: 12px 15px; display: grid; gap: 8px; }
.nv-ch-dau { font-size: 12.5px; font-weight: 800; color: #92670a; }
.nv-goi { display: grid; gap: 5px; }
.nv-goi + .nv-goi { border-top: 1px dashed #f0dcb8; padding-top: 8px; }
.nv-goi-nut { justify-self: start; padding: 6px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid #e5c37e; background: #fff; color: #92670a;
  font: 700 12.5px 'Be Vietnam Pro', sans-serif; }
.nv-goi-nut:hover { background: #fff3d9; border-color: #d9820f; }
.nv-goi-nhan { justify-self: start; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; }
.nv-goi-nhan.la-mua { background: #e4f5ec; color: #0e8f5d; }
.nv-goi-chu { font-size: 13.5px; color: #4b3a12; line-height: 1.6; }

/* Thẻ bài học trong Góc học tập */
.nv-bai { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 16px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(30,45,90,.05); }
.nv-bai h3 { margin: 0 0 6px; font-size: 18px; color: #1e293b; }
.nv-bai > p { margin: 0 0 14px; font-size: 14px; color: #475569; max-width: 78ch; }
.nv-bai-the { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .nv-bai-the { grid-template-columns: 1fr; } }
.nv-the { position: relative; display: block; border: 1px solid var(--line, #e2e8f0);
  border-radius: 13px; padding: 14px 16px; text-decoration: none; color: inherit;
  background: #fbfcfe; }
a.nv-the:hover { border-color: #22439c; box-shadow: 0 4px 14px rgba(34,67,156,.12); }
.nv-the-ico { font-size: 22px; }
.nv-the strong { display: block; font-size: 14.5px; color: #1e293b; margin: 5px 0 3px; }
.nv-the p { margin: 0 0 8px; font-size: 12.5px; color: #64748b; }
.nv-the.la-khoa { opacity: .62; }
.nv-the-khoa { position: absolute; top: 12px; right: 13px; font-size: 11px; font-weight: 700;
  color: #94a3b8; background: #eef2f9; border-radius: 999px; padding: 2px 9px; }
.nv-the-tien { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef2f9; color: #475569; }
.nv-the-tien.la-nop { background: #fff7e0; color: #92670a; }
.nv-the-tien.la-duyet { background: #e4f5ec; color: #0e8f5d; }

/* Dòng chọn nhiệm vụ + huy hiệu tiến độ trên sơ đồ lớp */
.nv-soi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 13px;
  padding: 11px 15px; margin: 0 0 14px; }
.nv-soi-nhan { font-weight: 800; font-size: 13.5px; color: #1e293b; }
.nv-soi select { padding: 8px 12px; border: 1.5px solid var(--line, #e2e8f0); border-radius: 9px;
  font: 500 13.5px 'Be Vietnam Pro', sans-serif; background: #fff; max-width: 320px; }
.nv-soi-chuthich { font-size: 12.5px; color: #64748b; display: inline-flex;
  align-items: center; gap: 6px; flex-wrap: wrap; }
.nv-soi-chuthich .seat-nv { position: static; }
.seat-nv { position: absolute; bottom: -4px; right: -8px; z-index: 3;
  padding: 1px 7px; border-radius: 999px; font: 800 11px 'Be Vietnam Pro', sans-serif;
  background: #e2e8f0; color: #475569; border: 2px solid #fff; white-space: nowrap; }
.seat-nv.la-vang { background: #fbbf24; color: #451a03; }
.seat-nv.la-xanh { background: #22c55e; color: #052e16; }

/* Chip thưởng dung lượng: xám = chưa kiếm (0B) · vàng = kiếm một phần · xanh = kiếm đủ */
.nv-thuong { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 700; background: #eef1f6; color: #64748b; white-space: nowrap; }
.nv-thuong.la-phan { background: #fff3d9; color: #92670a; }
.nv-thuong.la-nhan, .nv-thuong.la-du { background: #e4f5ec; color: #0e8f5d; }

/* ══════════════════════════════════════════════════════════════════════════
   THÁM TỬ BẢNG TÍNH (sl-) + KIẾN TRÚC SƯ THƯ MỤC (fl-) — chung khung cl- với
   Tư duy lập trình
   ══════════════════════════════════════════════════════════════════════════ */
.sl-work { flex: 1; overflow: auto; min-height: 300px; display: flex;
  flex-direction: column; gap: 6px; }
.sl-blk { margin: 0; }
.sl-blk .cl-hd > span:nth-child(2) { white-space: nowrap; }
.sl-slot { display: block; width: 100%; border: 2px dashed #cbd3e3; background: #f7f9fd;
  color: #6b7391; border-radius: 9px; padding: 8px 6px; font: 700 12px system-ui;
  cursor: pointer; text-align: center; }
.sl-slot:hover { border-color: #2f80ed; color: #2f80ed; }
.sl-slot.on { border-color: #1e2233; border-style: solid; background: #fff;
  color: #1e2233; box-shadow: 0 0 0 3px rgba(30,34,51,.12); }
.cl-blk .sl-slot { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55);
  color: #fff; }
.cl-blk .sl-slot.on { background: rgba(255,255,255,.92); color: #1e2233; border-color: #fff; }
.sl-preview { margin-top: 8px; padding: 8px 11px; border-radius: 9px; background: #f4f6fb;
  color: #6b7391; font: 700 13px 'Cascadia Mono', ui-monospace, monospace; min-height: 19px; }
.sl-preview.ok { background: #e9f9f0; color: #14532d; }
.sl-hint { margin: 8px 0 0; font: 500 11.5px system-ui; color: #6b7391; }

.sl-case-hd, .fl-case-hd { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.sl-case-hd canvas, .fl-case-hd canvas { flex: none; }
.sl-role { font: 600 11px system-ui; color: #6b7391; }
#slName strong, #flName strong { font-size: 14.5px; }
#slDesc, #flDesc { font: 400 12.5px/1.55 system-ui; color: #475569; margin: 4px 0 8px; }
.sl-q { background: #fff8e8; border: 1px solid #f2dfae; border-radius: 9px; padding: 8px 11px;
  font: 700 13px system-ui; color: #6b4e0a; margin-bottom: 8px; }
.sl-msg { min-height: 17px; font: 600 12.5px system-ui; margin-top: 8px; }
.sl-msg.err { color: #b42318; }

.sl-tab { border: 1px solid #e2ddd2; background: #fff; border-radius: 7px; padding: 2px 10px;
  margin-left: 5px; font: 700 11px system-ui; cursor: pointer; color: #6b7391;
  text-transform: none; letter-spacing: 0; }
.sl-tab.on { background: #1e2233; color: #fff; border-color: #1e2233; }
.sl-table { width: 100%; border-collapse: collapse; font: 500 13px system-ui; }
.sl-table th { text-align: left; padding: 6px 9px; background: #f4f6fb; color: #475569;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.sl-table td { padding: 6px 9px; border-bottom: 1px solid #eef1f6; color: #1e293b;
  font-variant-numeric: tabular-nums; }
.sl-table tr:nth-child(even) td { background: #fafbfe; }

/* ── Kiến trúc sư thư mục ── */
.fl-wrap { grid-template-columns: 320px minmax(0, 1fr); }
.fl-desk { display: flex; flex-wrap: wrap; gap: 7px; min-height: 64px; }
.fl-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1.5px solid #e2ddd2; background: #fff; border-radius: 9px; padding: 6px 9px;
  cursor: grab; font: 600 12px system-ui; color: #1e293b; }
.fl-file span { font-size: 15px; }
.fl-file em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-file u { text-decoration: none; cursor: pointer; opacity: .75; }
.fl-file u:hover { opacity: 1; }
.fl-file.on { border-color: #1e2233; box-shadow: 0 0 0 3px rgba(30,34,51,.15); background: #fffdf2; }
.fl-file.nho { padding: 3px 7px; font-size: 11px; }
.fl-file.nho span { font-size: 12px; }
.fl-tree { display: grid; gap: 8px; align-content: start; overflow: auto; }
.fl-folder { border: 1.5px solid #e2ddd2; border-radius: 11px; background: #fbfcfe;
  padding: 8px 10px; cursor: pointer; }
.fl-folder:hover { border-color: #2f80ed; }
.fl-folder.keo { border-color: #2f80ed; background: #eaf2fe; }
.fl-folder-hd { display: flex; align-items: center; gap: 7px; font: 700 13px system-ui;
  color: #1e293b; }
.fl-folder-ruot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fl-folder-ruot:empty { margin: 0; }
.fl-mk { margin-left: auto; border: 1px dashed #d9820f; background: #fff8ec; color: #92670a;
  border-radius: 7px; padding: 3px 9px; font: 700 11px system-ui; cursor: pointer; }
.fl-mk:hover { background: #ffefd2; }
.fl-ren-list { display: grid; gap: 7px; min-width: 300px; }
.fl-ren-cu { font: 500 12px system-ui; color: #6b7391; }
.fl-ren-cu em { font-style: normal; font-weight: 700; }
.fl-ren-opt { border: 1.5px solid #e2ddd2; background: #fff; border-radius: 9px;
  padding: 9px 12px; font: 600 13px system-ui; text-align: left; cursor: pointer; }
.fl-ren-opt:hover { border-color: #1e2233; }

@media (max-width: 980px) {
  .cl-wrap.fl-wrap { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BÀI TẬP TƯƠNG TÁC (nhiệm vụ tự soạn) — nối, kéo thả, điền, lật thẻ, sắp xếp
   ══════════════════════════════════════════════════════════════════════════ */
.bt-khu { display: grid; gap: 12px; }
.bt-th { display: grid; gap: 12px; }               /* ô một bối cảnh — giữ nguyên khi đổi tab */
.bt-dan { margin: 0; font-size: 12.5px; color: #94a3b8; }
.bt-chan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bt-kq { font-size: 13.5px; font-weight: 600; }
.bt-kq.la-dung { color: #0e8f5d; }
.bt-kq.la-sai  { color: #b42318; }

.bt-o { padding: 9px 14px; border: 2px solid var(--line, #e2e8f0); border-radius: 11px;
  background: #fff; cursor: pointer; font: 500 clamp(12.5px, 1.6vw, 14.5px) 'Be Vietnam Pro', sans-serif;
  color: #1e293b; text-align: left; transition: border-color .12s; }
.bt-o:hover { border-color: #94a3b8; }
.bt-o.la-chon { border-color: #22439c !important; background: #eef2fb; box-shadow: 0 0 0 3px rgba(34,67,156,.15); }
.bt-o.la-dung { border-color: #0e8f5d !important; color: #0e8f5d !important; background: #e4f5ec; }
.bt-o.la-sai  { border-color: #b42318 !important; color: #b42318 !important; background: #fdecea; }

/* Nối cặp */
.bt-noi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; max-width: 1000px; }
.bt-noi-cot { display: grid; gap: 8px; align-content: start; }

/* Kéo thả vào nhóm */
.bt-kho { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1.5px dashed var(--line, #e2e8f0);
  border-radius: 12px; min-height: 46px; }
.bt-nhom-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.bt-nhom { border: 2px solid var(--line, #e2e8f0); border-radius: 12px; padding: 9px 11px; cursor: pointer;
  min-height: 90px; background: #fbfcfe; }
.bt-nhom:hover { border-color: #22439c; }
.bt-nhom-ten { font-weight: 800; font-size: 13.5px; color: #22439c; margin: 0 0 8px; }
.bt-nhom-ruot { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-muc { padding: 6px 12px; }

/* Trạng thái kéo thả (dùng chung mọi kiểu) */
[draggable="true"] { cursor: grab; }
.la-keo { opacity: .45; cursor: grabbing !important; }
.bt-kho.la-tren, .bt-nhom.la-tren { border-color: #0e8f5d; background: #eefaf4; border-style: solid; }
.bt-o.la-tren, .bt-trong-o.la-tren { border-color: #0e8f5d !important; background: #eefaf4 !important; }
.bt-sx-hang[draggable="true"] { cursor: grab; }

/* Điền chỗ trống */
.bt-doan { font-size: clamp(14px, 1.8vw, 16px); line-height: 2.15; max-width: 76ch; color: #1e293b; }
.bt-trong { width: clamp(90px, 12vw, 150px); padding: 4px 10px; margin: 0 3px;
  border: none; border-bottom: 2px solid #94a3b8; background: #f6f8fc; border-radius: 7px 7px 0 0;
  font: 600 inherit; text-align: center; color: #22439c; }
.bt-trong:focus { outline: none; border-bottom-color: #22439c; }
.bt-trong.la-dung { border-bottom-color: #0e8f5d; background: #e4f5ec; color: #0e8f5d; }
.bt-trong.la-sai  { border-bottom-color: #b42318; background: #fdecea; color: #b42318; }

/* Lật thẻ tìm cặp */
.bt-lat { display: grid; grid-template-columns: repeat(4, minmax(72px, 120px)); gap: 10px; }
@media (max-width: 560px) { .bt-lat { grid-template-columns: repeat(3, 1fr); } }
.bt-the { position: relative; aspect-ratio: 3/4; border: none; background: none; cursor: pointer;
  perspective: 500px; padding: 0; }
.bt-the-mat { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px;
  font: 700 clamp(13px, 2.4vw, 17px) 'Be Vietnam Pro', sans-serif; padding: 6px; text-align: center;
  backface-visibility: hidden; transition: transform .35s; overflow-wrap: anywhere; }
.bt-the-up { background: #22439c; color: #fff; font-size: 24px; }
.bt-the-lo { background: #fff; border: 2px solid #22439c; color: #1e293b; transform: rotateY(180deg); }
.bt-the.la-lat .bt-the-up, .bt-the.la-xong .bt-the-up { transform: rotateY(-180deg); }
.bt-the.la-lat .bt-the-lo { transform: rotateY(0); }
.bt-the.la-xong .bt-the-lo { transform: rotateY(0); border-color: #0e8f5d; background: #e4f5ec; }

/* Sắp xếp thứ tự */
.bt-sx { display: grid; gap: 8px; max-width: 900px; }
.bt-sx-hang { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line, #e2e8f0);
  border-radius: 11px; padding: 8px 12px; background: #fff; }
.bt-sx-hang.la-dung { border-color: #0e8f5d; background: #e4f5ec; }
.bt-sx-hang.la-sai  { border-color: #b42318; background: #fdecea; }
.bt-sx-chu { flex: 1; font-size: clamp(12.5px, 1.6vw, 14.5px); }
.bt-sx-nut { width: 34px; height: 30px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
  background: #f6f8fc; cursor: pointer; font-size: 13px; }
.bt-sx-nut:hover { background: #eef2fb; border-color: #22439c; }

/* ── V2 hai tầng: hoạt động trong mục tiêu, bối cảnh, gợi ý 3 cấp, sản phẩm ── */
.bt-hd { border: 1.5px solid var(--line, #e2e8f0); border-radius: 12px; margin: 0 0 10px; background: #fbfcfe; }
.bt-hd summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  list-style: none; flex-wrap: wrap; }
.bt-hd summary::-webkit-details-marker { display: none; }
.bt-hd.la-xong { border-color: #0e8f5d; background: #f2faf6; }
.bt-hd-ico { font-size: 20px; flex: none; }
.bt-hd-ten { flex: 1; min-width: 180px; }
.bt-hd-ten strong { display: block; font-size: 14px; color: #1e293b; }
.bt-hd-ten em { font-style: normal; font-size: 12px; color: #94a3b8; }
.bt-hd-ruot { padding: 4px 14px 14px; display: grid; gap: 12px; }
.bt-pct { font: 800 12.5px 'Be Vietnam Pro', sans-serif; color: #22439c; background: #eef2fb;
  border-radius: 999px; padding: 2px 10px; }

.bt-boicanh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-bc-nhan { font-size: 12px; font-weight: 800; color: #64748b; }
.bt-bc { padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--line, #e2e8f0);
  background: #fff; cursor: pointer; font: 600 12.5px 'Be Vietnam Pro', sans-serif; color: #475569; }
.bt-bc.on { background: #22439c; border-color: #22439c; color: #fff; }
.bt-bc.la-xong { border-color: #0e8f5d; color: #0e8f5d; }
.bt-bc.la-xong.on { background: #0e8f5d; border-color: #0e8f5d; color: #fff; }
.bt-bc.la-xong::after { content: ' ✓'; font-weight: 800; }

.bt-goi3 { border: 1.5px dashed #d9820f; border-radius: 12px; background: #fff8ec;
  padding: 10px 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-goi-nut { padding: 6px 12px; border-radius: 9px; border: 1px solid #e5c37e; background: #fff;
  color: #92670a; cursor: pointer; font: 700 12px 'Be Vietnam Pro', sans-serif; }
.bt-goi-nut:disabled { opacity: .45; cursor: not-allowed; }
.bt-goi-nut.la-dapan { border-color: #d6314b; color: #b42318; }
.bt-goi-nut.la-mo { background: #fff3d9; }
.bt-goi-chu { flex: 1 0 100%; font-size: 13px; color: #4b3a12; white-space: pre-line; line-height: 1.6; }

.bt-trong-o { border: none; border-bottom: 2px solid #94a3b8; background: #f6f8fc;
  border-radius: 7px 7px 0 0; padding: 3px 12px; margin: 0 3px; cursor: pointer;
  font: 600 inherit; color: #22439c; min-width: 64px; }
.bt-trong-o.la-chon { border-bottom-color: #22439c; background: #eef2fb; }
.bt-trong-o.la-dung { border-bottom-color: #0e8f5d; background: #e4f5ec; color: #0e8f5d; }
.bt-trong-o.la-sai  { border-bottom-color: #b42318; background: #fdecea; color: #b42318; }

.bt-ds { border: 1px solid var(--line, #e2e8f0); border-radius: 11px; padding: 11px 14px;
  display: grid; gap: 8px; background: #fff; }
.bt-ds.la-dung { border-color: #0e8f5d; background: #f2faf6; }
.bt-ds.la-sai  { border-color: #b42318; background: #fef5f4; }
.bt-ds-pb { margin: 0; font-weight: 600; font-size: clamp(13px, 1.7vw, 15px); color: #1e293b; }
.bt-ds-hang { display: flex; gap: 8px; }
.bt-ds-nut { min-width: 84px; text-align: center; font-weight: 800; }
.bt-ds-lydo { display: grid; gap: 6px; }
.bt-tc-nhan { font: 700 10.5px 'Cascadia Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3b8; }
.bt-gt { font-size: 13px; color: #14532d; background: #e4f5ec; border-radius: 8px; padding: 7px 11px; }
.bt-gt:empty { display: none; }

.bt-ht { border: 1px solid var(--line, #e2e8f0); border-radius: 11px; padding: 11px 14px;
  display: grid; gap: 8px; background: #fff; }
.bt-ht.la-dung { border-color: #0e8f5d; } .bt-ht.la-sai { border-color: #d9820f; }
.bt-ht-ai { background: #eef2fb; border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
  color: #1e293b; line-height: 1.55; }

.bt-sim { border: 1px solid var(--line, #e2e8f0); border-radius: 11px; padding: 13px 15px;
  display: grid; gap: 10px; background: #fff; }
.bt-sim-thanh { display: grid; gap: 4px; }
.bt-sim-nhan { font-size: 13px; font-weight: 700; color: #334155; }
.bt-sim input[type=range] { width: min(100%, 380px); accent-color: #22439c; }
.bt-sim-kq { font: 800 clamp(15px, 2.2vw, 19px) 'Be Vietnam Pro', sans-serif; color: #22439c;
  background: #eef2fb; border-radius: 10px; padding: 8px 14px; justify-self: start; }

.bt-cay-goc { font-weight: 800; color: #14532d; }
.bt-cay .bt-nhom { border-top: 3px solid #0e8f5d; }
.bt-nhom-rac { border-style: dashed !important; opacity: .85; }
.bt-nhom-rac .bt-nhom-ten { color: #94a3b8; }

.sp-yeucau { background: #eef2fb; border: 1px solid var(--line, #e2e8f0); border-radius: 11px;
  padding: 12px 15px; font-size: 14px; line-height: 1.6; }
.sp-kq { display: grid; gap: 6px; }
.sp-kq-dong { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  border-bottom: 1px dashed var(--line, #e2e8f0); padding: 5px 2px; font-size: 13.5px; flex-wrap: wrap; }
.sp-muc { padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.sp-muc-1 { background: #fdecea; color: #b42318; }
.sp-muc-2 { background: #fff7e0; color: #92670a; }
.sp-muc-3 { background: #e4f5ec; color: #0e8f5d; }
.sp-muc-4 { background: #ede9fe; color: #6d28d9; }
.sp-form { display: grid; gap: 10px; }

/* Danh sách bài trong một Unit (Góc học tập) — bài mới nhất nằm trên đầu */
.nv-unit-ds { display: grid; gap: 8px; }
.nv-dong { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line, #e2e8f0); border-radius: 11px; padding: 10px 14px;
  text-decoration: none; color: inherit; background: #fbfcfe; }
.nv-dong:hover { border-color: #22439c; box-shadow: 0 3px 10px rgba(34,67,156,.10); }
.nv-dong-ten { flex: 1; min-width: 220px; font-weight: 600; font-size: 14px; color: #1e293b; }
.nv-dong-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nv-dong-vao { color: #22439c; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Bài chưa có hoạt động: hiện để thấy toàn thể chương trình nhưng làm mờ */
.nv-dong.la-mo { opacity: .55; background: #f6f8fc; cursor: default; }
.nv-dong.la-mo:hover { border-color: var(--line, #e2e8f0); box-shadow: none; }
.nv-dong-cho { font-size: 12px; font-weight: 700; color: #94a3b8; background: #eef2f9;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.nv-nut.la-mo { opacity: .55; }
.nv-nut.la-mo summary { cursor: default; }

/* ═══ Ôn tập — phần THỰC HÀNH (hs/on-tap-th.php) ═══════════════════════════ */
.th-thanh { position: sticky; top: 0; z-index: 5; background: var(--bg, #f2f5f9);
  padding: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.th-bai { margin: 20px 0 10px; padding: 9px 16px; background: #e7eef8; border-left: 5px solid #123456;
  border-radius: 0 10px 10px 0; font-weight: 800; color: #123456; }
.th-cau { background: #fff; border: 1px solid #dde5ee; border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; }
.th-cau-hd { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.th-so { background: #123456; color: #fff; font-weight: 800; border-radius: 9px; padding: 3px 10px;
  font-size: 13.5px; white-space: nowrap; }
.th-mtb { font-size: 11.5px; color: #67788e; border: 1px solid #dde5ee; border-radius: 20px; padding: 2px 9px; margin-top: 2px; }
.th-ten { margin: 10px 0 2px; font-size: 16px; color: #123456; }
.th-de { margin: 2px 0 10px; color: #31445a; font-size: 14px; }
.th-nhan { font-weight: 700; font-size: 13px; color: #123456; margin: 12px 0 4px; }
.th-buoc { margin: 16px 0 4px; font-weight: 800; font-size: 13.5px; color: #1a73e8; }
.th-goiy-nut { border: 1.5px solid #b7791f; background: #fdf6e3; color: #b7791f; border-radius: 20px;
  padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-left: auto; }
.th-mau-nut { border: 1.5px solid #1a73e8; background: #eef4fe; color: #1a73e8; border-radius: 20px;
  padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.th-goiy { display: none; background: #fdf6e3; border: 1px dashed #b7791f; border-radius: 10px;
  padding: 10px 14px; margin: 10px 0 4px; font-size: 13.5px; color: #4a3a12; }
.th-goiy.mo { display: block; }
.th-goiy ul { margin: 4px 0 0; padding-left: 20px; }
.th-goiy li { margin: 3px 0; }
.th-trang input[type=text], .th-trang textarea, .th-trang select.th-sel {
  width: 100%; padding: 9px 11px; border: 1.5px solid #dde5ee; border-radius: 9px; font: inherit; background: #fff; color: #1c2b3a; }
.th-trang textarea { min-height: 68px; resize: vertical; }
.th-trang select.th-sel { max-width: 280px; }
.th-trang input[type=text]:focus, .th-trang textarea:focus { outline: none; border-color: #1a73e8; }
.th-trang input:disabled, .th-trang textarea:disabled, .th-trang select:disabled {
  background: #f7fafc; color: #31445a; -webkit-text-fill-color: #31445a; opacity: 1; }
.th-cuon { overflow-x: auto; }
.th-bang { width: 100%; border-collapse: collapse; margin-top: 6px; }
.th-bang th, .th-bang td { border: 1px solid #dde5ee; padding: 6px 8px; text-align: left;
  font-size: 13.5px; vertical-align: top; }
.th-bang th { background: #f7fafc; color: #123456; }
.th-bang td input, .th-bang td select { border: none !important; border-radius: 0 !important;
  padding: 6px 4px !important; width: 100%; background: transparent !important; font: inherit; }
.th-bang td input:focus, .th-bang td select:focus { background: #eef4fe !important; outline: none; }
.th-ma { font-weight: 800; color: #1a73e8; text-align: center; background: #f7fafc; }
.th-xoa-o { text-align: center; width: 34px; }
.th-xoa { border: none; background: none; color: #b42318; font-size: 16px; cursor: pointer; padding: 2px 6px; }
.th-them { border: 1.5px dashed #1a73e8; background: #eef4fe; color: #1a73e8; border-radius: 9px;
  padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.th-dong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.th-dong .th-tu { color: #67788e; font-size: 13.5px; white-space: nowrap; }
.th-dong input { flex: 1 1 140px; min-width: 110px; }
.th-giadinh { background: #eef4fe; border: 1px solid #cfe0fb; border-radius: 10px; padding: 10px 13px;
  margin: 10px 0 6px; font-size: 13.5px; color: #1c2b3a; }
.th-kanban { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.kb-cot { flex: 1 1 210px; min-width: 190px; background: #f7fafc; border: 1.5px dashed #dde5ee;
  border-radius: 12px; padding: 8px; }
.kb-cot.keo { border-color: #1a73e8; background: #eef4fe; }
.kb-cot h4 { margin: 0 0 6px; font-size: 13px; color: #123456; text-align: center; }
.kb-tha { min-height: 78px; display: flex; flex-direction: column; gap: 6px; }
.kb-the { background: #fff; border: 1px solid #dde5ee; border-left: 4px solid #1a73e8; border-radius: 9px;
  padding: 6px 9px; font-size: 12.8px; cursor: grab; color: #1c2b3a; }
.kb-the b { color: #123456; }
.kb-meta { display: block; color: #67788e; font-size: 11.8px; margin-top: 2px; }
.kb-nut { display: flex; gap: 4px; margin-top: 5px; }
.kb-nut button { border: 1px solid #dde5ee; background: #f7fafc; border-radius: 6px; font: inherit;
  font-size: 11px; cursor: pointer; padding: 1px 8px; color: #123456; }
.kb-trong { color: #94a3b8; font-size: 12px; text-align: center; padding: 12px 0; }
.th-nop-khu { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0 30px; }
.th-pop-phu { display: none; position: fixed; inset: 0; background: rgba(10,25,45,.55); z-index: 60;
  align-items: center; justify-content: center; padding: 16px; }
.th-pop-phu.mo { display: flex; }
.th-pop { background: #fff; border-radius: 14px; max-width: 660px; width: 100%; max-height: 85vh;
  overflow: auto; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.3); color: #1c2b3a; }
.th-pop h3 { margin: 0 0 10px; color: #123456; font-size: 17px; }
.th-canh { background: #fdecea; border: 1.5px solid #b42318; color: #7a1c10; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; }
.th-mau-nd { font-size: 14px; }
.th-mau-nd .vd-de { background: #fdf6e3; border-left: 4px solid #b7791f; padding: 8px 12px;
  border-radius: 0 8px 8px 0; margin: 0 0 10px; }
.th-mau-nd ul { padding-left: 20px; margin: 6px 0; }
.th-pop-nut { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.th-pop-nut .th-xn { background: #1a73e8; border: none; color: #fff; font: inherit; font-weight: 700;
  border-radius: 9px; padding: 8px 18px; cursor: pointer; }
.th-pop-nut .th-huy { background: #fff; border: 1.5px solid #dde5ee; color: #67788e; font: inherit;
  font-weight: 700; border-radius: 9px; padding: 8px 18px; cursor: pointer; }
@media (max-width: 640px) { .th-cuon table { min-width: 560px; } }
@media print { .th-goiy-nut, .th-mau-nut, .th-them, .th-thanh, .th-xoa, .kb-nut, .th-nop-khu { display: none !important; } }
/* Dải báo khi bài chưa lưu được lên hệ thống (ôn tập — phần thực hành) */
.th-bao-do{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#b42318;color:#fff;
  padding:12px 16px;font-size:14px;line-height:1.5;box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.th-bao-do a{color:#fff;font-weight:700}
.th-bao-xanh{background:#1e7d43}