/* ============================================================
   Giáo Lý Đồng Hành v3 — layout nền (mobile-first, đặc tả §15)
   Màu sắc do skin quyết định qua biến CSS (skins/*.css)
   ============================================================ */

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html[data-fs="sm"] { font-size: 14.5px; }
html[data-fs="lg"] { font-size: 17.5px; }
html[data-fs="xl"] { font-size: 19px; }

body {
  margin: 0;
  font-family: "Noto Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
body.bare { padding-bottom: 0; }

.serif { font-family: "Noto Serif", Georgia, "Times New Roman", serif; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--c-code-bg); padding: .1em .4em; border-radius: 6px; font-size: .92em; }
h1, h2, h3 { line-height: 1.25; }
.muted { color: var(--c-muted); }
.center { text-align: center; }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-primary); color: var(--c-primary-ink);
  padding-top: env(safe-area-inset-top);
  box-shadow: var(--shadow);
}
.topbar-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: 1080px; margin: 0 auto; }
.brand-min { font-size: 20px; color: var(--c-accent); }
.page-title { flex: 1; font-size: 1.12rem; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn:hover { background: rgba(255,255,255,.14); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-accent); color: var(--c-accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; text-decoration: none !important; flex: none;
}

/* ---------- nội dung ---------- */
.content { max-width: 1080px; margin: 0 auto;
  padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }
.page-end { height: 8px; }
/* v3.23.34 — khối chào thành hàng ngang: chữ bên trái, ảnh đại diện lớn (học viên)
   bên phải. Vai khác không có ảnh thì flex một con, nhìn y như cũ. flex-wrap để màn
   quá hẹp thì ảnh xuống hàng thay vì ép nát tên; .hero KHÔNG overflow:hidden nên
   khung nở -11px và vòng lửa xoay không bị xén (bài học v3.23.7). */
.hero { padding: 6px 4px 2px; display: flex; align-items: center;
        justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.hero-chao { min-width: 0; }
/* v3.23.35 — ô bọc chiếm trọn khoảng trống còn lại và căn ảnh vào GIỮA; màn hẹp
   quá thì cả ô xuống hàng riêng, ảnh vẫn giữa. Ảnh hero to 128px — khung ảnh phải
   nở -15px theo tỷ lệ (tầng nền -11px là đo cho cỡ 96px của trang Hồ sơ); chọn
   « .hero .hero-av » ba bậc để thắng luật tầng nền nằm sau trong tệp. */
.hero-av-o { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
/* v3.23.38 — lề đáy cơ sở (máy tính/tab) cũng phải theo phép tính của v3.23.37:
   khung chồm quá đáy ô ảnh 15px, nên 12px là chạm thẻ « Đang mở cho bạn » bên
   dưới (ảnh chụp chủ dự án gửi). 28px = 15px chồm + 13px thở, khớp bản màn hẹp. */
.hero-av { margin: 12px 8px 28px; flex: none; }
.hero .hero-av .ava-prev, .hero .hero-av .ava-chu { width: 128px; height: 128px; }
.hero .hero-av .ava-chu { font-size: 3rem; }
.hero .hero-av.av-anh::after { inset: -15px; }

/* v3.23.36 — BỐ CỤC ĐIỆN THOẠI theo góp ý chủ dự án (ảnh chụp cho thấy khoảng trống
   chết giữa hàng chip vai trò và ảnh khi ô ảnh bị flex-wrap đẩy xuống hàng riêng):
   màn hẹp chuyển khối chào thành CỘT CĂN GIỮA kiểu đầu trang hồ sơ — ảnh to lên ĐẦU,
   rồi ngày, lời chào, vai trò bên dưới. Máy tính giữ nguyên hai cột. Mốc 680px dùng
   chung với phần còn lại của app. */
@media (max-width: 680px) {
  .hero { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
  .hero-av-o { order: -1; margin-top: 16px; }   /* chừa chỗ khung nở -15px lên phía trên */
  /* v3.23.37 — khung nở -15px XUỐNG DƯỚI ô ảnh và các khung rườm rà (Trung Thu,
     Thánh Mẫu) vẽ hoa văn sát tận mép, nên phần vẽ chồm quá đáy ô ảnh đúng 15px;
     lề đáy phải > 15px + khoảng thở kẻo dòng ngày chui vào hoa văn (ảnh chụp
     chủ dự án gửi). 28px = 15px chồm + 13px thở. */
  .hero-av { margin: 4px 8px 28px; }
  .hero-chao { min-width: 100%; }
  .hero-chao p { margin: 4px 0; }
}
.ava-chu { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center;
           justify-content: center; font-size: 2.3rem; font-weight: 700; color: #fff; }
.hero h2 { margin: 2px 0 6px; font-size: 1.45rem; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 0 0 14px;
}
.card > h2 { margin: 0 0 10px; font-size: 1.06rem; color: var(--c-primary); }
.card.soon { padding: 34px 16px; }
.soon-icon { font-size: 40px; margin-bottom: 6px; }

/* ---------- nút và form (chạm ≥ 44px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: .92rem; }

label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .95rem; }
label small { display: block; font-weight: 400; margin-top: 3px; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; margin-top: 4px;
  font: inherit; color: var(--c-text);
  background: var(--c-input-bg);
  border: 1.5px solid var(--c-border, #ccd4e3);
  border-radius: calc(var(--radius) - 4px);
}
textarea { min-height: 84px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--c-muted); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--c-primary); outline-offset: 1px;
  border-color: var(--c-primary);
}
input[type="file"] { padding: 9px; }
form .btn { margin-top: 14px; }
.form-err { color: var(--c-danger); font-weight: 600; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.seg button {
  flex: 1 1 auto; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 4px);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer;
}
.seg button.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }

.ckgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 10px 0; }
.ck { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; min-height: 40px; }
.ck input { width: 20px; height: 20px; min-height: 0; margin: 0; }

/* ---------- chips, kv, stat ---------- */
.chip {
  display: inline-block; padding: 3px 10px; margin: 2px 2px 2px 0;
  border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--c-chip-bg); color: var(--c-primary);
  border: 1px solid var(--c-border);
}
.chip-quan_tri { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.chip-off { background: var(--c-code-bg); color: var(--c-muted); }

/* v3.9.0 — SỬA TRÀN LỀ PHẢI trong khung « nhãn — giá trị ».
   Gốc rễ: .kv span có flex:none nên nhãn KHÔNG co lại được. Khi nhãn dài (tên kỳ thi,
   tên bài giao...) nó đẩy phần bên phải — thường là NÚT BẤM — văng khỏi màn hình; từ bản
   3.6.2 trang không cuộn ngang nữa nên nút bị CẮT MẤT, người dùng không bấm được.
   Nay: nhãn co được và tự xuống dòng; nếu vẫn chật thì cả hàng xuống dòng, nút luôn thấy. */
.kv > div { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px;
            flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--c-border); }
.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--c-muted); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kv b { text-align: right; margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
.kv b .btn { white-space: nowrap; }   /* nút không bị bẻ chữ giữa chừng */

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.stat { background: var(--c-chip-bg); border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 4px); padding: 10px; text-align: center; }
.stat b { display: block; font-size: 1.4rem; color: var(--c-primary); }
.stat span { font-size: .82rem; color: var(--c-muted); }

.todolist, .roadmap { margin: 4px 0; padding-left: 20px; }
.todolist li, .roadmap li { margin: 7px 0; }
.mini-audit { list-style: none; margin: 0; padding: 0; }
.mini-audit li { padding: 6px 0; border-bottom: 1px dashed var(--c-border); }
.mini-audit li:last-child { border-bottom: 0; }
.linkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

/* ---------- danh sách người dùng ---------- */
.ulist { display: grid; gap: 10px; }
.ucard {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px; background: var(--c-surface);
}
.ucard.archived { opacity: .62; }
.ucard-main b { display: block; }
.ucard-main code { font-size: .82rem; }
.ucard-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- bảng → thẻ trên màn hình hẹp ---------- */
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
th { color: var(--c-muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 680px) {
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl thead { display: none; }
  .tbl tr { border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 4px); margin-bottom: 10px; padding: 6px 10px; background: var(--c-surface); }
  .tbl td { border: 0; padding: 4px 0; }
  .tbl td::before { content: attr(data-l) ": "; color: var(--c-muted); font-weight: 600; }
}

/* ---------- sao lưu ---------- */
.bk-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--c-border); }
.bk-row:last-child { border-bottom: 0; }

/* ---------- checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 8px 0; border-bottom: 1px dashed var(--c-border); }
.checklist li:last-child { border-bottom: 0; }
.checklist li span { display: inline-block; width: 22px; font-weight: 700; }
.checklist li.ok span { color: var(--c-ok); }
.checklist li.bad span { color: var(--c-danger); }
.okbox { background: var(--c-ok-bg); color: var(--c-ok); border-radius: 8px; padding: 10px 12px; font-weight: 600; }
.errbox { background: var(--c-danger-bg); color: var(--c-danger); border-radius: 8px; padding: 10px 12px; }

/* ---------- điều hướng đáy (điện thoại) ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.bottomnav a, .bottomnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 6px; min-height: 56px;
  background: none; border: 0; font: inherit; font-size: .68rem; font-weight: 600;
  color: var(--c-muted); text-decoration: none !important; cursor: pointer;
}
.bottomnav svg { width: 23px; height: 23px; }
/* v3.6.1 — mục đang chọn ở thanh dưới: đậm, đổi màu, có vạch chỉ báo phía trên + nền nhạt */
.bottomnav .active { color: var(--c-primary); font-weight: 800; }
.bottomnav .active svg { color: var(--c-primary); transform: translateY(-1px); }
.bottomnav .active::before {
  content: ''; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c-primary);
}
.bottomnav a, .bottomnav button { position: relative; }
.bottomnav .active::after {
  content: ''; position: absolute; inset: 6px 8px 4px; border-radius: 12px;
  background: var(--c-primary); opacity: .10; z-index: -1;
}

/* ---------- sidebar (tablet/desktop) ---------- */
.sidebar { display: none; }
@media (min-width: 900px) {
  .bottomnav { display: none; }
  body { padding-bottom: 20px; }
  .sidebar {
    display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 20;
    background: var(--c-surface); border-right: 1px solid var(--c-border);
    padding: 14px 10px; overflow-y: auto;
  }
  .side-brand { font-weight: 700; color: var(--c-primary); padding: 8px 10px 16px; font-size: 1.02rem; }
  .side-sep { border-top: 1px solid var(--c-border); margin: 10px 6px; }
  .sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 10px; margin: 2px 0;
    color: var(--c-text); font-weight: 600; text-decoration: none !important;
  }
  .sidebar a svg { width: 20px; height: 20px; color: var(--c-muted); }
  .sidebar a:hover { background: var(--c-chip-bg); }
  .sidebar a.active { background: var(--c-primary); color: var(--c-primary-ink); }
  .sidebar a.active svg { color: var(--c-accent); }
  /* v3.6.1 — thêm vạch nhấn bên trái để nhận ra ngay cả khi liếc nhanh */
  .sidebar a.active { position: relative; font-weight: 700; }
  .sidebar a.active::before {
    content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 4px;
    border-radius: 3px; background: var(--c-accent);
  }
  .topbar-in, .content { max-width: none; margin-left: 248px; margin-right: 16px; }
}

/* ---------- sheet "Thêm" ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--c-surface); border-radius: 18px 18px 0 0;
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  /* v3.19.3 — BẢNG « Thêm » PHẢI CUỘN ĐƯỢC.
     Trước đây bảng không có trần chiều cao: menu Quản trị dài hơn màn hình nên phần
     TRÊN bị cắt mất — mà bảng dính đáy màn hình, nên cái bị mất chính là mấy mục đầu
     (Kỳ thi, Duyệt…) và người dùng không hề biết là còn thiếu.
     Thanh bên máy tính vốn đã có overflow-y:auto nên không dính lỗi này.
     100dvh cho điện thoại vì thanh địa chỉ ẩn/hiện làm 100vh tính sai. */
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;        /* cuộn hết bảng thì KHÔNG kéo theo trang nền */
  -webkit-overflow-scrolling: touch;
}
/* thanh nắm dính lại trên cùng: vừa là chỗ nắm kéo, vừa là dấu hiệu « bảng này cuộn được » */
.sheet-grip {
  width: 42px; height: 4px; border-radius: 4px; background: var(--c-border);
  margin: 6px auto 10px; position: sticky; top: 0; z-index: 2;
  box-shadow: 0 0 0 8px var(--c-surface);
}
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 8px; min-height: 50px;
  border: 0; background: none; font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--c-text); text-decoration: none !important; cursor: pointer;
  border-bottom: 1px dashed var(--c-border);
}
.sheet-item:last-child { border-bottom: 0; }
.sheet-item svg { width: 21px; height: 21px; color: var(--c-muted); }
.sheet-item.danger { color: var(--c-danger); }
.sheet-item.danger svg { color: var(--c-danger); }

/* ---------- modal ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
/* thuộc tính hidden luôn thắng mọi display của CSS — chốt chặn toàn cục */
[hidden] { display: none !important; }
.modal-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal {
  position: relative; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--c-surface); border-radius: 18px 18px 0 0; padding: 18px 18px 22px;
}
.modal h3 { margin: 0 0 4px; color: var(--c-primary); }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@media (min-width: 640px) {
  .modal-wrap { align-items: center; padding: 20px; }
  .modal { border-radius: var(--radius); }
}

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 90;
  background: var(--c-text); color: var(--c-bg);
  padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; }
@media (min-width: 900px) { #toast { bottom: 26px; } }

/* ---------- đăng nhập / trang trần ---------- */
/* v3.13.5 — SỬA KHOẢNG TRỐNG DƯỚI TRANG ĐĂNG NHẬP.
   Khung đăng nhập bị ép cao đúng một màn hình (100vh); từ 3.12.3 có thêm dòng ghi chú tác giả
   nằm BÊN DƯỚI, nên tổng chiều cao = một màn hình + dòng ghi chú ⇒ trang dư ra một khoảng
   trống phải cuộn mới thấy hết. Nay xếp cả trang thành cột: phần thân co giãn cho vừa,
   ghi chú nằm sát ngay dưới. Dùng 100dvh cho điện thoại vì thanh địa chỉ trình duyệt
   ẩn/hiện làm 100vh tính sai. */
.login-wrap { display: flex; align-items: center; justify-content: center; padding: 18px; }
body.bare { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.bare .login-wrap { flex: 1 1 auto; min-height: 0; }
body.bare .foot-by { margin: 10px 0 14px; }
.login-card {
  width: 100%; max-width: 420px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 22px;
}
.login-card h1 { text-align: center; margin: 8px 0 2px; font-size: 1.5rem; color: var(--c-primary); }
.login-logo {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 16px;
  background: var(--c-primary); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.login-foot { text-align: center; margin-top: 18px; font-size: .85rem; }
.firstrun {
  margin-top: 18px; padding: 12px; border-radius: 10px;
  background: var(--c-chip-bg); border: 1px dashed var(--c-border); font-size: .92rem;
}
.firstrun-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 10px; margin: 8px 0; }
.firstrun small { color: var(--c-muted); }

/* ============ GĐ2: đọc bài, ngân hàng câu, hồ sơ ============ */
.continue-card { border-left: 5px solid var(--c-accent); }
.continue-title { font-size: 1.15rem; font-weight: 700; margin: 4px 0 12px; }
.pbar { height: 9px; border-radius: 6px; background: var(--c-chip-bg); overflow: hidden; margin: 4px 0 6px; }
.pbar i { display: block; height: 100%; background: var(--c-primary); border-radius: 6px; }
.lesson-list { display: grid; gap: 4px; }
.lesson-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px;
  color: var(--c-text); text-decoration: none !important; border-bottom: 1px dashed var(--c-border); }
.lesson-row:hover { background: var(--c-chip-bg); }
.lesson-row .lr-mark { width: 22px; text-align: center; color: var(--c-muted); flex: none; }
.lesson-row.done .lr-mark { color: var(--c-ok); font-weight: 700; }
.lesson-row.doing .lr-mark { color: var(--c-accent-ink); }
.lesson-row.done .lr-title { color: var(--c-muted); }
.chip-sens { background: var(--c-danger-bg); color: var(--c-danger); border-color: transparent; }
.chip-diff-d1 { background: var(--c-ok-bg); color: var(--c-ok); border-color: transparent; }
.chip-diff-d2 { background: var(--c-chip-bg); }
.chip-diff-d3 { background: var(--c-danger-bg); color: var(--c-danger); border-color: transparent; }
.chip-st-draft { background: var(--c-code-bg); color: var(--c-muted); }
.chip-st-pending { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; }
.chip-st-published { background: var(--c-ok-bg); color: var(--c-ok); border-color: transparent; }
.chip-st-retired { background: var(--c-code-bg); color: var(--c-muted); text-decoration: line-through; }

/* đọc bài */
.lesson { max-width: 760px; margin: 0 auto; }
.lesson-head { padding: 4px 2px 2px; }
.lesson-title { margin: 2px 0 8px; font-size: 1.4rem; }
.lesson-block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 8px; margin-bottom: 14px; line-height: 1.72; font-size: 1.03rem; }
.lesson-block .lb-title { margin: 0 0 10px; color: var(--c-primary); font-size: 1.04rem; letter-spacing: .01em; }
.lesson-block p { margin: 0 0 12px; }
.lesson-block blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 4px solid var(--c-accent);
  background: var(--c-chip-bg); border-radius: 0 8px 8px 0; }
.lesson-block.serif, .lesson-block.serif p, .lesson-block.serif blockquote { font-family: "Noto Serif", Georgia, serif; }
.lesson-block.serif { background: var(--c-chip-bg); font-size: 1.06rem; }
.lesson-img { margin: 0 0 12px; text-align: center; }
.lesson-img img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--c-border); }
.lesson-img figcaption { font-size: .85rem; color: var(--c-muted); margin-top: 4px; }
/* thanh cuối bài: TĨNH (không sticky) — không bao giờ đè lên nội dung */
.lesson-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: stretch; margin-top: 18px; }
/* v3.23.84 — khuôn pager kinh điển MỘT HÀNG BA CỘT ở mọi bề rộng:
   [← Bài trước] · [trục giữa] · [Bài sau →]. Hai cánh co giãn đều (1fr),
   trục giữa (Mục lục / Đánh dấu đã học) ôm đúng nội dung (auto); bài đầu và
   bài cuối có <span> giữ chỗ nên trục giữa không bao giờ lệch tâm. Luật cũ
   cho xuống hàng + đảo chiều nên thành 2+1 và Mục lục nhảy lên trước. */
.lesson-foot > .btn, .lesson-foot > button { width: 100%; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 430px) {
  .lesson-foot { gap: 7px; }
  .lesson-foot > .btn, .lesson-foot > button { padding: 9px 8px; font-size: .9rem; }
}
/* v3.23.84 — bộ order + grid-column 1/-1 cũ (thủ phạm 2+1 và đảo thứ tự) đã nhổ:
   thứ tự nay theo đúng markup trước-giữa-sau, một hàng ba cột. */
.lesson-foot .btn { width: 100%; }

/* ngân hàng câu hỏi */
.qfilter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.qfilter select, .qfilter input { margin-top: 0; }
.qfilter .btn { grid-column: 1 / -1; }
@media (min-width: 900px) { .qfilter { grid-template-columns: 2fr 1.2fr 1fr 1.2fr 1.6fr auto; } .qfilter .btn { grid-column: auto; } }
.qtools { margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qlist { display: grid; gap: 10px; }
.qrow { border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; }
.qrow-chips { margin-bottom: 4px; }
.qrow-text { margin: 2px 0 4px; font-weight: 600; }
.qrow-meta { margin: 0 0 6px; font-size: .85rem; }
.qrow-act { display: flex; gap: 6px; flex-wrap: wrap; }
.qnote { color: var(--c-danger); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }

/* editor */
.qe-opts { display: grid; gap: 8px; margin: 8px 0; }
.qe-opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-border);
  border-radius: 10px; padding: 6px 8px; flex-wrap: wrap; }
.qe-opt > b { width: 18px; text-align: center; color: var(--c-muted); }
.qe-opt input[type="radio"], .qe-opt input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; }
.qe-opt .qe-otext, .qe-opt .qe-left, .qe-opt .qe-right { flex: 1; min-width: 130px; margin-top: 0; min-height: 40px; }
.qe-del, .qe-up { border: 0; background: var(--c-chip-bg); border-radius: 8px; width: 36px; height: 36px;
  cursor: pointer; font-size: .95rem; color: var(--c-muted); flex: none; }
.qe-imgbox { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.qe-imgbox img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-border); }
.qe-imgbox input[type="file"] { min-height: 0; }
.qe-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* phòng thi: tách « Nộp bài » sát mép phải, xa nút chuyển câu để khỏi ấn nhầm */
#ex-submit { margin-left: auto; }
.qpreview, .qprev { border: 1px dashed var(--c-border); border-radius: 10px; padding: 12px; }
.qprev-text { font-weight: 600; }
.qprev-opts { margin: 6px 0; padding-left: 22px; }
.qprev-opts li { margin: 5px 0; }
.qprev-opts li.right { color: var(--c-ok); font-weight: 600; }
.qprev-img { max-width: 140px; max-height: 100px; border-radius: 8px; border: 1px solid var(--c-border);
  display: block; margin-bottom: 4px; }

/* hồ sơ */
.rec-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.rec-head h3 { margin: 2px 0 0; }
.rec-photo { width: 84px; height: 108px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-chip-bg); flex: none; }
.rec-photo-empty { display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--c-muted); text-align: center; }
.rec-kv input { min-height: 40px; max-width: 60%; text-align: right; }
.rec-kv > div { align-items: center; }
.rec-hist { margin-top: 12px; }
.rec-hist summary { cursor: pointer; font-weight: 600; color: var(--c-primary); }

/* ============ GĐ3: lớp học + tuyển sinh ============ */
.class-head { padding: 4px 2px 0; }
.class-head h2 { margin: 2px 0 4px; }
.tabbar { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 12px; -webkit-overflow-scrolling: touch; }
.tabbar a { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); font-weight: 600; font-size: .92rem;
  text-decoration: none !important; }
.tabbar a.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.tab-badge { display: inline-block; min-width: 19px; text-align: center; background: var(--c-danger);
  color: #fff; border-radius: 999px; font-size: .75rem; padding: 1px 5px; }
.mini-photo { width: 30px; height: 38px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--c-border); vertical-align: middle; display: inline-block; background: var(--c-chip-bg); }
.post { padding: 10px 0; border-bottom: 1px dashed var(--c-border); }
.post:last-child { border-bottom: 0; }
.post p { margin: 0 0 4px; }
.att-grid { display: grid; gap: 6px; }
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px dashed var(--c-border); padding: 6px 0; flex-wrap: wrap; }
.att-name { font-weight: 600; }
.att-btns { display: flex; gap: 5px; }
.att-btn { min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-muted); font: inherit; font-weight: 600; cursor: pointer; }
.att-btn.att-co.on { background: var(--c-ok-bg); color: var(--c-ok); border-color: var(--c-ok); }
.att-btn.att-tre.on { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
.att-btn.att-vang.on { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger); }
.ck-scroll { max-height: 240px; overflow-y: auto; border: 1px solid var(--c-border);
  border-radius: 10px; padding: 8px 10px; grid-template-columns: 1fr; }
.apply-card { max-width: 520px; }
.apply-intro { background: var(--c-chip-bg); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.hp { position: absolute; left: -9999px; width: 10px; height: 10px; opacity: 0; }

/* phiếu in */
.print-wrap { max-width: 760px; margin: 0 auto; padding: 16px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.phieu { border: 1.5px dashed var(--c-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
  background: var(--c-surface); page-break-inside: avoid; }
.phieu-head { font-weight: 700; color: var(--c-primary); }
.phieu-class { color: var(--c-muted); margin: 2px 0 6px; font-size: .9rem; }
.phieu h3 { margin: 0 0 6px; }
@media print {
  .no-print, .topbar, .bottomnav, .sidebar, #toast { display: none !important; }
  body { background: #fff; padding: 0; }
  .phieu { border-color: #888; box-shadow: none; }
}

/* ============ GĐ4: luyện tập, trò chơi, RCV, trình chiếu ============ */
.qz-head { margin: 0 0 8px; }
.qz-text { font-size: 1.12rem; font-weight: 700; line-height: 1.55; margin: 0 0 12px; }
.qz-blank { color: var(--c-primary); border-bottom: 2px dashed var(--c-primary); padding: 0 6px; }
.qz-opts { display: grid; gap: 8px; }
.qz-tf { grid-template-columns: 1fr 1fr; }
.qz-opt { text-align: left; border: 1.5px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); border-radius: 12px; padding: 12px 14px; font: inherit; font-weight: 600;
  min-height: 48px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.qz-tf .qz-opt { justify-content: center; text-align: center; }
.qz-opt.sel { border-color: var(--c-primary); background: var(--c-chip-bg); }
.qz-opt.right { border-color: var(--c-ok); background: var(--c-ok-bg); color: var(--c-ok); }
.qz-opt.wrong { border-color: var(--c-danger); background: var(--c-danger-bg); color: var(--c-danger); }
.locked .qz-opt { cursor: default; }
.qz-imgopts { grid-template-columns: 1fr 1fr; }
.qz-imgopts .qz-opt { flex-direction: column; }
.qz-imgopts img { max-width: 100%; max-height: 130px; border-radius: 8px; }
.qz-ord-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qz-ord-ans { margin: 0 0 6px; padding-left: 24px; display: grid; gap: 6px; }
.qz-ord-ans .qz-opt { width: 100%; }
.qz-match { display: grid; gap: 10px; }
.qz-match-row { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--c-border); border-radius: 10px; }
.qz-match-row > span { font-weight: 600; }
.qz-match-row select { margin-top: 0; }
.qz-match-row.row-right { border-color: var(--c-ok); background: var(--c-ok-bg); }
.qz-match-row.row-wrong { border-color: var(--c-danger); background: var(--c-danger-bg); }
.qz-fix { color: var(--c-ok); font-weight: 700; }
.qz-explain { background: var(--c-chip-bg); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.qz-check { margin-top: 14px; width: 100%; }
.qz-check.shake { animation: qzshake .35s; }
@keyframes qzshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qz-final { text-align: center; padding: 18px 0 6px; }
.qz-score { font-size: 2.6rem; font-weight: 800; color: var(--c-primary); }
.qz-review { padding-left: 20px; }
.qz-review li { margin: 6px 0; }
.okbox { background: var(--c-ok-bg); color: var(--c-ok); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.errbox { background: var(--c-danger-bg); color: var(--c-danger); border-radius: 10px; padding: 10px 12px; font-weight: 600; }

/* sảnh trò chơi */
.segbtn { display: inline-block; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--c-border);
  color: var(--c-text); font-weight: 600; text-decoration: none !important; margin: 2px; }
.segbtn.on { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--c-border);
  border-radius: var(--radius); background: var(--c-surface); color: var(--c-text);
  text-decoration: none !important; box-shadow: var(--shadow); }
.game-card:active { transform: scale(.98); }
.game-emoji { font-size: 1.9rem; }

/* sân khấu trò chơi */
.g-scene { position: relative; height: 190px; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 10px; border: 1px solid var(--c-border); }
.g-sky { background: linear-gradient(#0b1440, #1d2b6b); }
.g-aqua { background: linear-gradient(#0a5f8a, #0b83a8); }
.g-eden { background: linear-gradient(#bfe6a0, #6fbf62); }
.g-box { background: linear-gradient(#7c4a12, #b97a2a); }
.g-trail { background: linear-gradient(#dcefff, #bcd8f5); }
.g-item { position: absolute; font-size: 1.7rem; animation: gpop .5s; }
@keyframes gpop { from { transform: scale(0); } to { transform: scale(1); } }
.g-trailrow { position: absolute; bottom: 18px; left: 10px; right: 10px; display: flex;
  align-items: center; justify-content: space-between; font-size: 1.15rem; }
.g-step { color: #6d87a8; } .g-step.on { color: #2e7d32; font-weight: 800; }
.g-step.walker { font-size: 1.6rem; }
.g-goal { position: absolute; top: 12px; right: 14px; font-size: 2rem; }
.g-bar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; }
.g-time { font-size: 1.3rem; } .g-time.warn { color: var(--c-danger); }
.g-boxes .g-boxbtn { font-size: 2rem; justify-content: center; }

/* ghép cặp */
.pair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { .pair-grid { grid-template-columns: repeat(2, 1fr); } }
.pair-card { position: relative; min-height: 84px; border-radius: 12px; border: 1.5px solid var(--c-border);
  background: var(--c-primary); color: var(--c-primary-ink); font: inherit; cursor: pointer; padding: 6px; }
.pair-card .pc-front { font-size: 1.6rem; }
.pair-card .pc-back { display: none; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.pair-card.open, .pair-card.done { background: var(--c-surface); color: var(--c-text); }
.pair-card.open .pc-front, .pair-card.done .pc-front { display: none; }
.pair-card.open .pc-back, .pair-card.done .pc-back { display: block; }
.pair-card.done { border-color: var(--c-ok); background: var(--c-ok-bg); color: var(--c-ok); cursor: default; }

/* RCV */
.rcv-lobby { text-align: center; padding: 16px 0; }
.rcv-bell { font-size: 3.2rem; animation: bell 2.2s infinite; display: inline-block; }
@keyframes bell { 0%,100% { transform: rotate(0); } 6% { transform: rotate(18deg); } 12% { transform: rotate(-14deg); } 18% { transform: rotate(8deg); } 24% { transform: rotate(0); } }
.rcv-q { margin-top: 4px; }

/* trình chiếu */
.pres { position: fixed; inset: 0; background: var(--c-bg); display: flex; flex-direction: column; z-index: 50; }
.pres-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.pres-title { font-weight: 700; }
.pres-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.pres-chip { border: 1px solid var(--c-border); background: var(--c-chip-bg); color: var(--c-muted);
  border-radius: 999px; padding: 5px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.pres-chip.on { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.pres-stage { flex: 1; overflow: hidden; position: relative; }
.pres-slide { display: none; position: absolute; inset: 0; overflow-y: auto; padding: 4vh 6vw; }
.pres-slide.on { display: block; }
.pres-inner { max-width: 900px; margin: 0 auto; font-size: 1.45rem; line-height: 1.8; }
.pres-inner h2 { color: var(--c-primary); font-size: 2rem; margin: 0 0 18px; }
.pres-cover { text-align: center; padding-top: 16vh; }
.pres-cover h1 { font-size: 2.6rem; color: var(--c-primary); }
.pres-kicker { color: var(--c-muted); letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; }
.pres-slide.serif .pres-inner { font-family: "Noto Serif", Georgia, serif; }
.pres-nav { position: absolute; bottom: 14px; right: 16px; display: flex; gap: 10px; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; padding: 6px 12px; z-index: 60; }
.pres-arr { border: 0; background: none; font-size: 1.5rem; color: var(--c-primary); cursor: pointer; padding: 0 6px; }
.pres-tap { position: absolute; top: 20%; bottom: 12%; left: 0; width: 18%; z-index: 55; }
.pres-tap-r { left: auto; right: 0; }
.lesson-practice { margin: 6px 0 12px; text-align: center; }

/* ============ GĐ5: kỳ thi, chứng nhận, chuông ============ */
.bell { position: relative; }
.bell-badge { position: absolute; top: 2px; right: 0; min-width: 17px; text-align: center;
  background: var(--c-danger); color: #fff; border-radius: 999px; font-size: .68rem; padding: 1px 4px; }
.notif { display: block; color: var(--c-text); text-decoration: none !important; }
.notif:hover { background: var(--c-chip-bg); }
.exam-bar { display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--c-bg); padding: 8px 0; z-index: 5; }
.exam-timer { font-size: 1.4rem; font-weight: 800; color: var(--c-primary); }
.exam-timer.warn { color: var(--c-danger); animation: exblink 1s infinite; }
@keyframes exblink { 50% { opacity: .45; } }
.exam-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ex-chip { width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--c-border);
  background: var(--c-surface); color: var(--c-muted); font: inherit; font-weight: 700; cursor: pointer; }
.ex-chip.done { background: var(--c-ok-bg); color: var(--c-ok); border-color: var(--c-ok); }
.ex-chip.cur { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-chip-bg); }
.wrongtxt { color: var(--c-danger); text-decoration: line-through; }
.okcell { color: var(--c-ok); font-weight: 600; }
.badcell { color: var(--c-danger); }
.phong-tbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.phong-tbl th, .phong-tbl td { border: 1px solid #999; padding: 8px 10px; text-align: left; }
.phong-tbl td:last-child { min-width: 110px; }

/* chứng nhận */
.cert { margin: 14px 0; }
.cert-inner { border: 3px double var(--c-accent); border-radius: 14px; padding: 26px 20px;
  text-align: center; background: var(--c-surface); }
.cert-logo { font-size: 2rem; color: var(--c-primary); }
.cert-app { color: var(--c-muted); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 2px 0 10px; }
.cert-inner h2 { color: var(--c-primary); letter-spacing: .05em; margin: 0 0 14px; }
.cert-name { font-family: "Noto Serif", Georgia, serif; font-size: 1.6rem; font-weight: 700; margin: 6px 0; }
.cert-exam { margin: 10px 0; }
.cert-foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px;
  border-top: 1px dashed var(--c-border); font-size: .9rem; color: var(--c-muted); }
@media print { .cert-inner { border-color: #b8860b; } .login-card { box-shadow: none; border: 0; } }

/* v3.1: hộp quản trị trạng thái */
.admin-box { border: 1px dashed var(--c-border); border-radius: 12px; padding: 10px; margin-top: 8px; }


/* ============ Trò chơi v3.4.2: thẻ có tranh + hiệu ứng ============ */
.game-card-art { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.game-art { display: block; position: relative; height: 88px; }
.game-art svg { width: 100%; height: 100%; display: block; }
.game-art .game-emoji {
  position: absolute; left: 10px; bottom: 6px; font-size: 1.7rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.game-card-body { display: block; padding: 10px 14px 14px; }
.game-card-body b { display: block; margin-bottom: 2px; }
.game-card-art { transition: transform .18s ease, box-shadow .18s ease; }
.game-card-art:hover { transform: translateY(-3px); }

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 998; overflow: hidden; }
.fx-conf {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 3px;
  animation-name: fxFall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes fxFall {
  to { transform: translate(var(--dx, 0), 108vh) rotate(680deg); opacity: .85; }
}
.fx-float {
  position: absolute; right: 10px; top: 4px; font-weight: 800; font-size: 1.05rem;
  pointer-events: none; animation: fxFloat .95s ease-out forwards; z-index: 5;
}
.fx-float.fx-good { color: var(--c-ok); }
.fx-float.fx-bad { color: var(--c-danger); }
@keyframes fxFloat {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-44px); }
}
.fx-shake { animation: fxShake .38s ease; }
@keyframes fxShake {
  20% { transform: translateX(-6px); } 45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); } 100% { transform: translateX(0); }
}
.fx-heart { display: inline-block; animation: fxHeart .55s ease; }
@keyframes fxHeart { 35% { transform: scale(1.35); } }
.qz-q { animation: fxIn .24s ease-out; position: relative; }
@keyframes fxIn { from { opacity: 0; transform: translateY(8px); } }
#gfx-snd.gfx-float { /* v3.4.78: kiểu nổi chỉ dành cho trang không có thanh top */
  position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 60; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-border); background: var(--c-surface, #fff);
  font-size: 1.15rem; box-shadow: 0 3px 10px rgba(35, 48, 84, .18); cursor: pointer;
}
@media print { #gfx-snd, #fx-layer { display: none !important; } }
.topbar #gfx-snd { background: transparent; border: 0; padding: 0 2px; font-size: 1.2rem; line-height: 1; cursor: pointer; } /* v3.4.78: hòa vào hàng icon thanh top */


/* ============ Trò chơi v3.4.3: tranh ĐỘNG (SVG + CSS) ============ */
/* Lưu ý kỹ thuật: transform trên phần tử SVG cần transform-box: fill-box */
.game-art svg [class*="an-"], .g-scene .g-item, .g-step.walker, .g-goal {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* 🚶 gốc quay mặt sang trái — lật gương để tiến VỀ PHÍA nhà thờ */
.g-step.walker { display: inline-block; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .an-bob        { animation: gaBob 2.6s ease-in-out infinite alternate; }
  .an-twinkle    { animation: gaTwinkle 1.9s ease-in-out infinite; }
  .an-pulse      { animation: gaPulse 2.4s ease-in-out infinite; }
  .an-drift      { animation: gaDrift 9s ease-in-out infinite alternate; }
  .an-dash       { animation: gaDash 1.6s linear infinite; }
  .an-swim       { animation: gaSwim 5.5s ease-in-out infinite alternate; }
  .an-swim2      { animation: gaSwim2 7s ease-in-out infinite alternate; }
  .an-rise       { animation: gaRise 3.2s linear infinite; }
  .an-sway       { animation: gaSway 3.4s ease-in-out infinite alternate; }
  .an-sway-slow  { animation: gaSway 5.6s ease-in-out infinite alternate; }
  .an-fly        { animation: gaFly 4.5s ease-in-out infinite alternate; }
  .an-flash      { animation: gaFlash 1.7s steps(1) infinite; }
  .an-lines      { animation: gaLines 1.1s ease-in-out infinite alternate; }
  .an-tiltL      { animation: gaTiltL 3.2s ease-in-out infinite alternate; }
  .an-tiltR      { animation: gaTiltR 3.2s ease-in-out infinite alternate; }
  .an-d1 { animation-delay: 0s; }
  .an-d2 { animation-delay: .6s; }
  .an-d3 { animation-delay: 1.2s; }
  .game-card-art .game-emoji { animation: gaBob 2.8s ease-in-out infinite alternate; }

  /* trong trận: vật phẩm rơi vào cảnh nảy nhẹ rồi trôi bồng bềnh */
  .g-scene .g-item { animation: gaPopIn .5s ease, gaFloatItem 3.6s ease-in-out .5s infinite alternate; }
  .g-scene .g-item:nth-child(odd)  { animation-duration: .5s, 4.4s; }
  .g-scene .g-item:nth-child(3n)   { animation-delay: 0s, 1.1s; }
  .g-step.walker { animation: gaWalk .7s ease-in-out infinite alternate; display: inline-block; }
  .g-goal        { animation: gaPulse 2.8s ease-in-out infinite; display: inline-block; }
}
@keyframes gaBob      { to { transform: translateY(-4px); } }
@keyframes gaTwinkle  { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes gaPulse    { 50% { transform: scale(1.14); } }
@keyframes gaDrift    { to { transform: translateX(22px); } }
@keyframes gaDash     { to { stroke-dashoffset: -16; } }
@keyframes gaSwim     { to { transform: translateX(-26px) translateY(-4px); } }
@keyframes gaSwim2    { to { transform: translateX(20px) translateY(3px); } }
@keyframes gaRise     { 0% { transform: translateY(0); opacity: .85; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes gaSway     { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes gaFly      { to { transform: translate(-14px, -7px); } }
@keyframes gaFlash    { 0%, 55%, 100% { opacity: 1; } 45% { opacity: .25; } 50% { opacity: 1; } 48% { opacity: .4; } }
@keyframes gaLines    { to { transform: translateX(10px); opacity: .45; } }
@keyframes gaTiltL    { from { transform: rotate(0deg); } to { transform: rotate(5deg); } }
@keyframes gaTiltR    { from { transform: rotate(0deg); } to { transform: rotate(-5deg); } }
@keyframes gaPopIn    { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.25); } to { transform: scale(1); opacity: 1; } }
@keyframes gaFloatItem{ to { transform: translateY(-7px); } }
@keyframes gaWalk     { to { transform: scaleX(-1) translateY(-3px) rotate(-4deg); } }


/* ============ Aquarium v3.4.8: bể cá thật (GIF + nền + nhạc) ============ */
.g-scene.aq-real {
  background: url(game/aquarium/bg-landscape.jpg) center / cover no-repeat;
}
@media (orientation: portrait) {
  .g-scene.aq-real { background-image: url(game/aquarium/bg-portrait.jpg); }
}
.g-item.g-fish { width: 72px; height: auto; }
.g-scene.aq-real .g-item { filter: drop-shadow(0 2px 5px rgba(0, 20, 40, .45)); }
#aq-hero {
  position: absolute; right: 6px; bottom: 4px; width: 96px; height: auto;
  transition: width .5s ease; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 20, 40, .5));
}
.aq-grow { animation: gaPopIn .55s ease; }


/* ============ v3.4.9: khung cảnh game lấp đầy màn hình hợp lý ============ */
/* Bố cục sân khấu (mọi cỡ màn): bể bám MÉP TRÊN, quiz bám MÉP DƯỚI,
   bể tự co giãn chiếm trọn khoảng giữa — kích thước thuần theo màn hình */
.g-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
}
.g-wrap .g-scene {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  margin-bottom: 12px;
}

/* MÀN NGANG: bể đứng cột giữa (canh trái vùng nội dung),
   quiz đứng cột phải và tận dụng trọn phần trống. Dọc giữ nguyên. */
@media (orientation: landscape) and (min-width: 700px) {
  .g-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 22px;
  }
  .g-wrap .g-scene {
    grid-column: 1;
    grid-row: 1 / 3;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .g-wrap .g-bar { grid-column: 2; grid-row: 1; }
  .g-wrap #g-q { grid-column: 2; grid-row: 2; }
}


/* v3.4.11: thẻ không tiêu đề thì không chừa khoảng đầu */
.card h2:empty { display: none; }

/* v3.4.24 — sổ ghi chú + phiếu tổng kết */
.note-item { border-left: 3px solid var(--c-border, #ccd4e3); padding: 4px 10px; margin: 8px 0; }
.note-item p { margin: 0 0 2px; }
.tk-page { border: 1px solid var(--c-border, #ccd4e3); border-radius: 12px; padding: 18px; margin: 14px 0; }
@media print {
  .tk-page { page-break-after: always; border: 0; border-radius: 0; margin: 0; }
  .tk-page:last-child { page-break-after: auto; }
}

/* v3.4.26 — in đề giấy */
.made-big { font-size: 1.5em; letter-spacing: 3px; font-weight: 800; }
.inde-q { margin: 10px 0; page-break-inside: avoid; break-inside: avoid; }
.inde-opts { padding-left: 18px; }
.inde-opts p { margin: 3px 0; }
.inde-match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 18px; }
.as-grid { width: 100%; border-collapse: collapse; margin: 10px 0; }
.as-grid th, .as-grid td { border: 1px solid #999; padding: 5px 8px; text-align: left; }
.as-grid .as-n { width: 46px; font-weight: 700; text-align: center; }
.as-grid .as-chk-td { width: 52px; text-align: center; }
.as-grid tbody tr:nth-child(even) { background: #efefe9; }
.as-dot { display: inline-block; width: 23px; height: 23px; border: 1.6px solid #333; border-radius: 50%;
          text-align: center; line-height: 20px; font-size: 12.5px; font-weight: 700; margin: 0 4px; }
.as-dot.fill { background: #000; color: #fff; border-color: #000; }
.as-chk { display: inline-block; width: 19px; height: 19px; border: 1.6px solid #999; border-radius: 4px; }
.warnbox { background: #fdf0ef; border: 1px solid #e5b5b0; border-radius: 10px; padding: 8px 12px; }
@media print {
  .as-grid tbody tr:nth-child(even) td { background: #e8e8e2 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .as-dot.fill { background: #000 !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inde-q { page-break-inside: avoid; }
}

/* ---------- v3.4.40: đồ họa Hành trình ngẫu nhiên ---------- */
.g-trail { background: url('game/journey/bg-ngang.jpg') right top / cover no-repeat, linear-gradient(#dcefff, #bcd8f5); }
@media (orientation: portrait) {
  .g-trail { background: url('game/journey/bg-doc.jpg') right top / cover no-repeat, linear-gradient(#dcefff, #bcd8f5); }
}
.g-trailrow { align-items: flex-end; gap: 2px; justify-content: space-between; }
.g-mk { width: clamp(20px, 4.5vw, 34px); min-width: 0; flex: 0 1 auto; height: auto; align-self: flex-end; opacity: .6; }
.g-mk.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(201,162,39,.55)); }
.g-step.walker.pic { transform: none; animation: none; font-size: 0; }
.g-step.walker.pic img { width: clamp(80px, 15.75vw, 150px); height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(29,58,110,.25)); }
.g-finish { width: clamp(74px, 14vw, 156px); min-width: 0; flex: 0 1 auto; height: auto; align-self: flex-end; margin-left: 4px; }

/* ---------- v3.4.49: mốc đá trên con đường (phối cảnh) ---------- */
.g-trail { position: relative; overflow: hidden; }
.g-wk { position: absolute; transform: translate(-50%, -92%); height: auto; }
.g-wk { filter: drop-shadow(0 3px 6px rgba(29,58,110,.3)); }

/* ---------- v3.4.59: điện thoại — tranh tràn sát mép khung thẻ ---------- */
@media (max-width: 600px) {
  .g-trail {
    margin: calc(-1 * 16px) calc(-1 * 16px) 10px;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ---------- v3.4.79: nút ĐỌC TO (text-to-speech) ---------- */
.tts-btn { cursor: pointer; }
.qz-q.has-tts { padding-right: 44px; } /* v3.4.81: chữ né nút loa — không còn đè nội dung */
.qz-q .tts-q {
  position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--c-border);
  background: var(--c-surface); font-size: .8rem; line-height: 1;
  opacity: .85;
}
.qz-q .tts-q:hover, .qz-q .tts-q.on { opacity: 1; }
.qz-explain.has-tts { position: relative; padding-right: 40px; } /* v3.4.91: giải thích chừa chỗ nút đọc */
.qz-explain .tts-e {
  position: absolute; top: 4px; right: 6px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--c-border);
  background: var(--c-surface); font-size: .75rem; line-height: 1; opacity: .85;
}
.qz-explain .tts-e:hover, .qz-explain .tts-e.on { opacity: 1; }
.tts-btn.on { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.tts-lesson { margin: 0 0 10px; }
@media print { .tts-btn { display: none !important; } }

/* ---------- v3.4.95: ẢNH ĐẠI DIỆN ---------- */
.avatar.av-img { padding: 0; overflow: hidden; }
.avatar.av-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.ava-prev { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-border); display: block; }
/* chưa có ảnh: mỗi tài khoản một màu riêng ổn định (đủ tương phản chữ trắng) */
.avatar.av-c0 { background: #1d3a6e; color: #fff; }
.avatar.av-c1 { background: #0e6b63; color: #fff; }
.avatar.av-c2 { background: #7a4a12; color: #fff; }
.avatar.av-c3 { background: #5b4a8a; color: #fff; }
.avatar.av-c4 { background: #3e6b23; color: #fff; }
.avatar.av-c5 { background: #a13333; color: #fff; }
.avatar.av-c6 { background: #435063; color: #fff; }
.avatar.av-c7 { background: #8a5a00; color: #fff; }

/* ---------- v3.4.96: Người hành hương SỐNG ĐỘNG ---------- */
.g-bird {
  position: absolute; left: -8%; z-index: 18; font-size: 15px; opacity: .8;
  pointer-events: none; animation-name: gBirdFly; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes gBirdFly { from { left: -8%; } to { left: 104%; } }
.g-star {
  position: absolute; z-index: 12; color: #e3c766; font-size: 11px; pointer-events: none;
  animation: gTwinkle 3.8s ease-in-out infinite;
}
@keyframes gTwinkle { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }
.g-dust {
  position: absolute; z-index: 24; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(118, 102, 76, .35); pointer-events: none; animation: gDustPuff .72s ease-out forwards;
}
@keyframes gDustPuff { from { transform: scale(.5); opacity: .65; } to { transform: translate(-7px, -4px) scale(1.8); opacity: 0; } }
.g-arrive {
  position: absolute; z-index: 26; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(201, 162, 39, .9); pointer-events: none;
  transform: translate(-50%, -50%); animation: gArrivePing .65s ease-out forwards;
}
@keyframes gArrivePing { from { transform: translate(-50%, -50%) scale(.4); opacity: .95; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .g-bird, .g-star, .g-dust, .g-arrive { display: none !important; } /* tôn trọng người dùng giảm chuyển động */
}

/* ---------- v3.5.9: bảng tin lớp ---------- */
.post { border-bottom: 1px solid var(--c-border); padding: 10px 0; }
.post:last-child { border-bottom: 0; }
.post-glv { border-left: 3px solid var(--c-primary); padding-left: 10px; background: var(--c-surface-2, transparent); }
.post-mine { border-left: 3px solid var(--c-border); padding-left: 10px; }

/* ---------- v3.6.0: cho thấy hàng lớp bấm được + khối tin theo lớp ---------- */
.lr-go { margin-left: auto; flex: none; font-size: .82rem; font-weight: 600; color: var(--c-primary); }
.news-class + .news-class { border-top: 1px solid var(--c-border); margin-top: 12px; padding-top: 12px; }

/* ---------- v3.6.1: mục đang xem trong bảng « Thêm » ---------- */
.sheet-item.active { background: var(--c-chip-bg); font-weight: 700; color: var(--c-primary); }
.sheet-item.active svg { color: var(--c-primary); }
.sheet-here {
  margin-left: auto; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--c-primary); color: var(--c-primary-ink);
}

/* ============================================================
   v3.6.2 — CHỐNG TRÀN LỀ NGANG (sửa tận gốc, áp cho mọi trang)

   NGUYÊN NHÂN GỐC: trong một khung « flex », phần tử con mặc định KHÔNG được
   phép co hẹp hơn nội dung bên trong nó (min-width: auto). Vì vậy một tên bài
   dài như « Bài 6 - Lương tâm công giáo và điều hòa sinh sản » giữ nguyên
   chiều dài, đẩy cả hàng rộng hơn màn hình, và thế là TOÀN TRANG trượt ngang.
   Đây là lý do lỗi xuất hiện đồng loạt ở nhiều trang: mọi trang đều dùng các
   hàng dạng flex ấy. Cách chữa đúng là cho phép con co lại (min-width: 0) và
   cho chữ tự xuống dòng.
   ============================================================ */

/* 1) Cho phép mọi phần tử con trong các hàng flex co lại + chữ tự xuống dòng */
.lesson-row > *, .qrow > *, .post > *, .kv > div > *, .ucard > *, .bk-row > *,
.rec-head > *, .qe-opt > *, .topbar-in > *, .side-brand > *, .news-class > * {
  min-width: 0;
}
.lr-title, .qrow-text, .post p, .kv b, .kv span {
  min-width: 0;
  overflow-wrap: anywhere;      /* tên bài, mã lớp, đường dẫn dài đều xuống dòng được */
}
.lr-title { flex: 1; }

/* 2) Chữ dài không có dấu cách (mã, đường dẫn, địa chỉ thư) không phá khung */
body { overflow-wrap: break-word; }
code, kbd, samp, pre, a[href] { overflow-wrap: anywhere; }

/* 3) Ảnh, video, khung nhúng không bao giờ rộng hơn khung chứa */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* 4) Bảng nhiều cột: tự cuộn ngang TRONG thẻ, thay vì đẩy cả trang */
.card > table, .card > form > table { display: block; width: 100%; overflow-x: auto; }

/* 5) Lưới ô thống kê: co theo bề ngang thật của máy, không tràn */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.statgrid > * { min-width: 0; }

/* 6) Lưới an toàn cuối cùng: nếu còn sót chỗ nào, trang vẫn không trượt ngang.
      Dùng « clip » khi trình duyệt hỗ trợ (giữ được thanh dán dính), lui về « hidden » nếu không. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ---------- v3.7.8: hướng dẫn cài đặt dành cho iPhone/iPad ---------- */
.install-ios {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--c-chip-bg); border: 1px solid var(--c-border); text-align: left;
}
.install-ios p { margin: 0 0 6px; }
.install-ios ol { margin: 0 0 6px; padding-left: 1.25rem; }
.install-ios li { margin: 3px 0; }
.install-ios .muted { font-size: .82rem; margin-bottom: 0; }
.ios-share { font-size: 1.05em; vertical-align: -2px; }

/* ---------- v3.8.9: thẻ « Học tiếp » nhiều giáo trình ---------- */
.cont-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--c-border);
}
.cont-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cont-info { flex: 1; min-width: 0; }
.cont-info > p { margin: 0 0 2px; }
.cont-course { font-size: .82rem; }
.cont-prog { font-size: .78rem; }
.cont-row .btn { flex: none; }

/* v3.9.0 — lưới an toàn cho mọi hàng có nút: nút không bao giờ bị đẩy khuất */
.qrow, .cont-row, .lesson-row { flex-wrap: wrap; }
.qrow .btn, .cont-row .btn, .lesson-row .btn { flex: none; white-space: nowrap; }

/* v3.9.6 — thanh chọn kiểu sắp xếp danh sách người dùng */
.sx-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sx-bar .chip { text-decoration: none; cursor: pointer; }
.sx-bar .chip-on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ucard-main small.muted { display: block; margin-top: 2px; font-size: .78rem; }

/* v3.9.7 — tên trong danh sách Người dùng là liên kết mở hồ sơ */
.ucard-main b a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--c-border); }
.ucard-main b a:hover, .ucard-main b a:focus { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* v3.11.0 — dòng của chính mình trong bảng xếp hạng */
.lb-me { background: var(--c-chip-bg); }
.lb-me td { font-weight: 600; }

/* ---------- v3.11.3: điểm danh bằng mã ---------- */
.ci-box { background: var(--c-chip-bg); border: 1px solid var(--c-border);
          border-radius: calc(var(--radius) - 4px); padding: 10px 12px; margin: 8px 0; }
.ci-box > p { margin: 0 0 6px; }
.ci-box > p:last-child { margin-bottom: 0; }
.ci-code { font-size: 2.2rem; font-weight: 700; letter-spacing: .18em;
           color: var(--c-primary); text-align: center; margin: 6px 0; font-variant-numeric: tabular-nums; }
.ci-late input { width: 5rem; }

/* ---------- v3.12.3: ghi chú tác giả ở chân trang ---------- */
.foot-by { text-align: center; font-size: .74rem; opacity: .6; margin: 18px 0 6px;
           line-height: 1.7; color: var(--c-muted); }
.foot-by a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.foot-by a:hover, .foot-by a:focus { color: var(--c-primary); }
@media print { .foot-by { display: none; } }

/* ---------- v3.13.0: trang Báo cáo kỹ thuật ---------- */
.bckt-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px;
              padding: 8px 0 0; margin: 6px 0 14px; border-bottom: 1px solid var(--c-border); }
.bckt-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
            align-items: center; height: 100%; }
.bckt-col > span { display: block; width: 100%; background: var(--c-primary); opacity: .75;
                   border-radius: 3px 3px 0 0; }
.bckt-col > em { font-size: .62rem; color: var(--c-muted); font-style: normal; margin-top: 3px; }
.bckt-row { display: flex; align-items: center; gap: 10px; padding: 5px 0;
            border-bottom: 1px dashed var(--c-border); }
.bckt-row:last-child { border-bottom: 0; }
.bckt-row > span:first-child { flex: 0 0 40%; min-width: 0; overflow-wrap: anywhere; font-size: .85rem; }
.bckt-row > b { flex: none; font-size: .85rem; }
.bckt-bar { flex: 1; height: 8px; background: var(--c-chip-bg); border-radius: 4px; overflow: hidden; }
.bckt-bar > span { display: block; height: 100%; background: var(--c-primary); opacity: .7; }
.bckt-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.bckt-2col h3 { margin: 14px 0 6px; }
.bckt-log { max-height: 260px; overflow: auto; background: var(--c-chip-bg);
            border-radius: calc(var(--radius) - 6px); padding: 8px 10px; }
.bckt-log > div { padding: 4px 0; border-bottom: 1px dashed var(--c-border); }
.bckt-log > div:last-child { border-bottom: 0; }
.bckt-log code { font-size: .74rem; overflow-wrap: anywhere; }

/* v3.13.6 — phòng thi: dòng « Câu n/N » nhận tiêu điểm khi sang câu mới */
#ex-qhead { outline: none; scroll-margin-top: 72px; }
#ex-qhead:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
.qe-btns .btn[disabled] { opacity: .45; cursor: default; }

/* ---------- v3.14.1: ảnh nhỏ trước tên người nhắn trong bảng tin ---------- */
.post-by { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-av { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover;
           border: 1px solid var(--c-border); background: var(--c-chip-bg); }
.post-av-txt { display: inline-flex; align-items: center; justify-content: center;
               font-size: .78rem; font-weight: 700; color: #fff; border: 0; line-height: 1; }
/* sáu sắc dịu, hợp với mọi bộ giao diện */
.av-c0 { background: #5A7BB5; } .av-c1 { background: #6E9E7A; } .av-c2 { background: #B58A5A; }
.av-c3 { background: #8A6EA8; } .av-c4 { background: #4F9AA6; } .av-c5 { background: #B5686E; }

/* v3.14.3 — biểu mẫu tải ảnh đứng cạnh khung ảnh hồ sơ */
.rec-head { align-items: flex-start; }
.rec-head #photo-form { margin-top: 8px; }
.rec-head #photo-form label { display: block; font-size: .85rem; margin-bottom: 6px; }
.rec-head #photo-form input[type="file"] { max-width: 100%; font-size: .8rem; }
.rec-head #photo-preview { max-width: 96px; margin: 6px 0; }
.rec-photo-note { font-size: .76rem; margin: 4px 0 0; }

/* v3.15.1 — khối sửa buổi học (chỉ Quản trị thấy) */
.ses-edit { margin: 8px 0; border: 1px dashed var(--c-border); border-radius: calc(var(--radius) - 6px); padding: 6px 10px; }
.ses-edit > summary { cursor: pointer; font-size: .88rem; color: var(--c-muted); }
.ses-edit[open] > summary { margin-bottom: 8px; color: var(--c-primary); }
.ses-edit-form label { display: block; margin-bottom: 6px; }

/* ---------- v3.16.0: nhắn tin riêng ---------- */
.dm-thread { max-height: 60vh; overflow-y: auto; padding: 4px 2px 10px; }
.dm-row { display: flex; margin: 6px 0; align-items: flex-end; gap: 7px; }
/* v3.20.0 — ảnh đại diện trước mỗi tin. Dùng lại .post-av nên KHÔNG khai lại kích thước,
   bo tròn hay màu — chỉ lo chỗ đứng của nó trong dòng tin. */
.dm-av, .dm-av-trong { flex: none; width: 26px; }
.dm-av-trong { height: 1px; }              /* tin nối tiếp: chừa đúng chỗ, không vẽ gì */
/* tin của mình thì ảnh nằm BÊN PHẢI bong bóng, nên đảo thứ tự bằng CSS,
   không phải đảo trong PHP — mã dựng giữ nguyên một chiều cho dễ đọc. */
.dm-me .dm-av, .dm-me .dm-av-trong { order: 2; }
.dm-row.dm-me { justify-content: flex-end; }
.dm-bub { max-width: 78%; padding: 8px 11px; border-radius: 14px; background: var(--c-chip-bg);
          border: 1px solid var(--c-border); overflow-wrap: anywhere; }
.dm-me .dm-bub { background: var(--c-primary); color: #fff; border-color: transparent; }
.dm-t { display: block; font-size: .68rem; opacity: .65; margin-top: 4px; }
.dm-list { display: flex; flex-direction: column; }
.dm-item { display: flex; align-items: center; gap: 9px; padding: 9px 4px; text-decoration: none;
           color: inherit; border-bottom: 1px dashed var(--c-border); }
.dm-item:last-child { border-bottom: 0; }
.dm-item:hover { background: var(--c-chip-bg); }
.dm-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dm-unread { flex: none; background: var(--c-primary); color: #fff; font-weight: 700; }
.dm-note { font-size: .76rem; margin-top: 8px; }
.dm-rule { margin: 0; padding-left: 1.1rem; font-size: .86rem; }
.dm-rule li { margin: 4px 0; }

/* v3.17.0 — ô tìm người ở bậc phạm vi rộng nhất */
.dm-search { margin-bottom: 10px; }
.dm-search label { display: block; margin-bottom: 6px; }

/* v3.18.0 — nhắc tên trong bảng tin lớp */
.mention { color: var(--c-primary); font-weight: 600; background: var(--c-chip-bg);
           padding: 0 4px; border-radius: 4px; }
.post-nhac { display: block; margin: 8px 0; }
.post-nhac select { max-width: 22rem; }

/* v3.19.0 — TIÊU ĐỀ NHÓM trong menu « Thêm ».
   Chữ nhỏ, in hoa nhẹ, màu mờ: đủ để mắt bắt được ranh giới mà không tranh chỗ
   với chính các mục menu. Không bấm được nên không ai nhầm là một mục. */
.side-group, .sheet-group {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted); opacity: .85; user-select: none;
}
.side-group { padding: 14px 14px 5px; }
.sheet-group { padding: 14px 18px 6px; grid-column: 1 / -1; }
/* v3.19.1 — vạch mảnh phía trên mỗi nhóm, TRỪ nhóm đầu.
   KHÔNG dùng :first-of-type được: div đầu tiên trong .sidebar là .side-brand và trong
   .sheet là .sheet-grip, nên mọi tiêu đề nhóm đều « không phải div đầu » và đều bị kẻ
   vạch — kể cả nhóm đầu. Dùng lớp .ng-dau do PHP gắn cho nhóm đầu tiên là chắc chắn. */
/* v3.24.90 — var(--c-line) chưa hề được định nghĩa ở đâu (12 skin + tệp này):
   khai báo vô hiệu lúc tính giá trị → 3 viền dùng nó CÂM ở mọi skin từ trước
   tới nay (vạch phân nhóm menu đây, khung .xb và .bv-toi-ngoai bên dưới).
   Dùng --c-border — biến viền chuẩn mọi skin đều có. */
.side-group, .sheet-group { border-top: 1px solid var(--c-border); margin-top: 6px; }
.side-group.ng-dau, .sheet-group.ng-dau { border-top: 0; margin-top: 0; }
/* Đăng xuất tách hẳn ra cuối, không lẫn vào các mục điều hướng */
.sidebar a.nav-out { color: var(--c-danger); }
.sidebar a.nav-out:hover { background: var(--c-danger-bg, rgba(180,40,40,.08)); }

@media print { .side-group, .sheet-group { display: none; } }

/* v3.19.2 — mỗi lỗi máy chủ là một khối riêng, câu báo lỗi nổi lên đầu khối */
.bckt-err { border-left: 3px solid var(--c-danger); padding-left: 9px; margin-bottom: 12px; }
.bckt-err:last-child { margin-bottom: 0; }
.bckt-err-head code { font-weight: 700; color: var(--c-danger); }

/* v3.20.1 — dòng giải thích phạm vi danh bạ nhắn tin */
.dm-vi { margin-top: 10px; font-size: .86rem; }

/* v3.23.0 — nhãn tin gửi chung trong cuộc trò chuyện */
.dm-bub-cast { border-left: 3px solid var(--c-primary); }
.dm-cast { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
           opacity: .8; margin-bottom: 4px; }

/* ============================================================
   v3.23.3 — QUÀ TRANG TRÍ. Vẽ hoàn toàn bằng CSS: 0 byte đường truyền, không cần
   tệp ảnh, không cần duyệt nội dung, và tự đổi theo giao diện sáng/tối.
   Tên lớp khớp cột 'lop' trong decor_catalog() của lib/decor.php.
   ============================================================ */

/* ----- KHUNG ảnh đại diện.
   v3.23.21 — cả 11 khung vẽ box-shadow đã chuyển sang ẢNH THẬT; quy tắc nằm ở
   khối v3.23.21 gần cuối tệp, đi qua tầng nền .av-anh::after của v3.23.6. ----- */

/* ----- BONG BÓNG tin nhắn. Chỉ đổi nền và viền; KHÔNG đụng màu chữ để tin của
   mình (nền đậm, chữ trắng) không bị mất tương phản. ----- */
/* ⚠ v3.23.4 — PHẢI viết .dm-bub.db-x chứ không phải .db-x đơn lẻ.
   Luật có sẵn « .dm-me .dm-bub » nặng ký hơn một tên lớp đơn, nên bản 3.23.3 viết
   .db-vang là bong bóng CỦA CHÍNH MÌNH không hề đổi màu — quà mua vui mà không thấy.
   Viết kèm .dm-bub cho ngang ký, lại đứng sau trong tệp nên thắng.
   Và phải đặt lại màu CHỮ: bong bóng của mình vốn chữ trắng trên nền đậm; đổi sang
   nền sáng mà giữ chữ trắng thì không đọc nổi. */
.dm-bub.db-vang { background: linear-gradient(160deg, rgba(232,193,90,.30), rgba(232,193,90,.10));
                  border-color: rgba(180,140,30,.55); color: var(--c-text); }
.dm-bub.db-la   { background: linear-gradient(160deg, rgba(31,157,118,.26), rgba(31,157,118,.08));
                  border-color: rgba(31,157,118,.55); color: var(--c-text); }
.dm-bub.db-bien { background: linear-gradient(160deg, rgba(47,127,184,.26), rgba(47,127,184,.08));
                  border-color: rgba(47,127,184,.55); color: var(--c-text); }
.dm-bub.db-hoa  { background: linear-gradient(160deg, rgba(212,88,127,.24), rgba(212,88,127,.08));
                  border-color: rgba(212,88,127,.52); color: var(--c-text); }
/* viền kép GIỮ NGUYÊN nền và chữ — dùng currentColor nên hợp cả bong bóng sáng lẫn đậm */
.dm-bub.db-vien { border-width: 2px; border-style: double; border-color: currentColor; }

/* ----- NHÃN cạnh tên trên bảng tin ----- */
.dn { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
      font-size: .74rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
      border: 1px solid currentColor; }
.dn-vang { color: #96700f; }
.dn-ngoc { color: #147054; }
.dn-hong { color: #a83d60; }
.dn-bien { color: #1f5f8d; }
.dn-tim  { color: #6b4b9a; }
[data-mode="dark"] .dn-vang { color: #e3bd5c; }
[data-mode="dark"] .dn-ngoc { color: #5fcfae; }
[data-mode="dark"] .dn-hong { color: #ec89a9; }
[data-mode="dark"] .dn-bien { color: #78bce8; }
[data-mode="dark"] .dn-tim  { color: #b498e0; }

/* Ảnh ở trang Hồ sơ vốn có viền xám sẵn; đeo khung mà giữ viền ấy thì khung bị kẹp
   giữa hai đường, nhìn bẩn. Có khung thì cho viền xám lui. */
.ava-prev[class*="dk-"] { border-color: transparent; }
/* v3.23.7 — với khung DÙNG ẢNH thì lớp nằm trên thẻ BAO chứ không trên thẻ ảnh,
   nên luật trên không trúng. Cho viền xám lui theo thẻ bao. */
.av-box-lon .ava-prev { border-color: transparent; }

/* ô tặng quà trong bảng học viên */
.gift-sel { max-width: 12rem; }

@media print { .dn, .gift-sel { display: none; } }

/* ============================================================
   v3.23.5 — CÁC BỘ QUÀ MỚI. Bốn bộ thường + hai bộ quý + năm bộ theo MÙA PHỤNG VỤ.
   Vẫn vẽ hoàn toàn bằng CSS: 0 byte đường truyền.
   Tông màu lấy theo màu phụng vụ truyền thống, không lấy màu trò chơi:
   Mùa Vọng tím than · Giáng Sinh xanh–đỏ–vàng · Mùa Chay tím trầm và giản dị
   · Phục Sinh trắng vàng rạng đông · Thánh Mẫu xanh thiên thanh.
   ============================================================ */

/* ----- KHUNG bậc quý và đặc biệt: từ v3.23.21 dùng ảnh, xem khối gần cuối tệp.
   Chuyển động « rạng đông thở » của khung Phục Sinh cũ gỡ theo — khung ảnh mới
   không chuyển động, lấp lánh để dành riêng cho huy chương. ----- */

/* ----- BONG BÓNG bậc quý và đặc biệt ----- */
.dm-bub.db-toa { background: linear-gradient(160deg, rgba(232,193,90,.34), rgba(255,255,255,.10));
                 border-color: rgba(200,160,50,.65); color: var(--c-text); }
.dm-bub.db-mv  { background: linear-gradient(160deg, rgba(63,59,122,.20), rgba(232,193,90,.10));
                 border-color: rgba(63,59,122,.55); color: var(--c-text); }
.dm-bub.db-gs  { background: linear-gradient(160deg, rgba(31,107,69,.22), rgba(194,65,58,.14));
                 border-color: rgba(31,107,69,.55); color: var(--c-text); }
.dm-bub.db-mc  { background: linear-gradient(160deg, rgba(107,75,122,.16), rgba(107,75,122,.05));
                 border-color: rgba(107,75,122,.5); color: var(--c-text); }
.dm-bub.db-ps  { background: linear-gradient(160deg, rgba(247,227,166,.45), rgba(255,255,255,.12));
                 border-color: rgba(224,190,100,.7); color: var(--c-text); }
.dm-bub.db-tm  { background: linear-gradient(160deg, rgba(111,168,220,.24), rgba(255,255,255,.14));
                 border-color: rgba(111,168,220,.6); color: var(--c-text); }

/* ----- NHÃN bậc quý và đặc biệt ----- */
.dn-toa { color: #9a7513; }
.dn-mv  { color: #3f3b7a; }
.dn-gs  { color: #1f6b45; }
.dn-mc  { color: #6b4b7a; }
.dn-ps  { color: #a8801a; }
.dn-tm  { color: #2f6fa8; }
[data-mode="dark"] .dn-toa { color: #e8c15a; }
[data-mode="dark"] .dn-mv  { color: #9a95e0; }
[data-mode="dark"] .dn-gs  { color: #5cc48c; }
[data-mode="dark"] .dn-mc  { color: #c2a3d6; }
[data-mode="dark"] .dn-ps  { color: #f0d47a; }
[data-mode="dark"] .dn-tm  { color: #8fc4ee; }

/* ----- Tủ quà: nhãn bậc hiếm và dấu đủ bộ ----- */
.d-bac { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
         font-size: .70rem; font-weight: 700; border: 1px solid currentColor; }
.d-bac-thuong  { color: var(--c-muted); }
.d-bac-quy     { color: #9a7513; }
.d-bac-dacbiet { color: #7a4fa8; }
.d-bac-hiem    { color: #b3541e; }   /* v3.23.29 */
[data-mode="dark"] .d-bac-quy { color: #e8c15a; }
[data-mode="dark"] .d-bac-dacbiet { color: #c2a3d6; }
[data-mode="dark"] .d-bac-hiem { color: #f09a5c; }
.d-dubo { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
          font-size: .72rem; font-weight: 700; color: #fff; background: var(--c-primary); }
.d-bo { margin: 12px 0 4px; font-weight: 700; }

/* v3.23.24 — LƯỚI TỦ QUÀ có hình xem trước. Radio đặt TRƯỚC .dgrid-in nên tô ô đang
   chọn bằng « input:checked + .dgrid-in » — không cần :has(), chạy cả máy cũ.
   « .dgrid .post-av » thắng « .post-av » nhờ hai bậc chọn — phóng lõi lên 38px cho dễ
   nhận, khung ảnh nở thêm inset -5px của tầng nền thành ~48px. */
.dgrid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.dgrid-it { position: relative; cursor: pointer; }
.dgrid-it input { position: absolute; opacity: 0; pointer-events: none; }
.dgrid-in { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
            gap: 6px; width: 104px; min-height: 84px; padding: 12px 6px 8px;
            border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface);
            text-align: center; }
.dgrid-it input:checked + .dgrid-in { border-color: var(--c-primary);
                                      box-shadow: 0 0 0 2px var(--c-primary); }
.dgrid-it input:focus-visible + .dgrid-in { outline: 2px dashed var(--c-muted); outline-offset: 2px; }
.dgrid-prev { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.dgrid .post-av { width: 38px; height: 38px; }
.dgrid .post-av-txt { font-size: 1rem; }
.dgrid .dn { margin-left: 0; }
.dgrid-bub { max-width: none; font-size: .78rem; padding: 5px 9px; }
.dgrid-ten { font-size: .76rem; line-height: 1.25; }

/* ============================================================
   v3.23.6 — QUÀ DÙNG ẢNH. Cơ chế chung, không riêng bộ Trung Thu:
   thêm bộ mới chỉ cần một tệp trong assets/decor/ + một khối CSS như dưới.

   VÌ SAO DÙNG SVG CHỨ KHÔNG GIF/PNG: khung viền phải nét ở cả 26px (bảng tin) lẫn
   96px (trang Hồ sơ) và trên màn hình điện thoại mật độ điểm ảnh gấp 2-3 lần. Ảnh
   GIF/PNG muốn nét ở mọi cỡ phải kèm nhiều bản, cộng lại nặng hơn nhiều; SVG một tệp
   1-2 KB nét ở mọi cỡ. Cơ chế vẫn nhận GIF/PNG — chỉ cần đổi đường dẫn url() bên dưới.

   CHUYỂN ĐỘNG đặt ở CSS chứ không nhúng trong tệp ảnh, để còn tắt được khi máy đặt
   « giảm chuyển động ». Ảnh GIF tự động thì không tắt được — thêm một lý do chọn SVG.
   ============================================================ */
.av-box { position: relative; }
span.av-box { display: inline-block; line-height: 0; vertical-align: middle; }

/* ⚠ v3.23.7 — PHẢI BỎ LUẬT CẮT ở ảnh thanh trên cùng.
   « .avatar.av-img » có sẵn overflow:hidden để bo tròn ảnh. Nhưng lớp hình chồng lên
   nằm ở inset âm, tức NẰM NGOÀI khung thẻ — cắt là mất sạch. Vì thế bản 3.23.6 hiện
   khung trong tin nhắn (không có luật cắt) mà mất ở thanh trên cùng.
   Bỏ cắt vẫn an toàn: chính thẻ ảnh bên trong đã có border-radius 50% riêng,
   nên ảnh vẫn tròn mà không cần thẻ cha cắt hộ. */
.avatar.av-box { overflow: visible; }

/* ----- Bộ TRUNG THU ----- */
/* ════════════════════════════════════════════════════════════
   TẦNG NỀN CHO MỌI PHỤ KIỆN — viết MỘT LẦN, dùng cho mọi bộ về sau.
   Hai lỗi ở 3.23.5 và 3.23.6 cùng một họ: quà mới đụng luật CSS có sẵn của chỗ nó gắn
   vào. Ba luật dưới đây xử lý gốc, nên THÊM MỘT BỘ MỚI CHỈ CÒN LÀ KHAI MÀU VÀ ẢNH.

   Muốn thêm một bộ dùng ảnh, chỉ cần đúng ba dòng:
     .av-anh.dk-<mã>::after { background-image: url(decor/<tệp>); }
     .dm-bub.db-<mã>        { background: …; border-color: …; }
     .dn-<mã>               { color: …; }   (+ background-image nếu nhãn có hình)
   ════════════════════════════════════════════════════════════ */

/* NỀN 1 — KHUNG DẠNG ẢNH. Lo sẵn: vị trí, cỡ theo từng nơi, không chắn chuột.
   Mỗi khung mới chỉ khai background-image. */
.av-anh::after {
  content: ''; position: absolute; inset: -5px; pointer-events: none;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}
.avatar.av-anh::after  { inset: -6px; }    /* thanh trên cùng, ảnh 38px */
.av-box-lon.av-anh::after { inset: -11px; } /* trang Hồ sơ, ảnh 96px */

/* NỀN 2 — BONG BÓNG. Đặt lại màu chữ cho MỌI bong bóng trang trí: tin của chính mình
   vốn chữ trắng trên nền đậm, đổi sang nền sáng mà quên đặt lại là không đọc nổi.
   Dùng bộ chọn ngang ký với « .dm-me .dm-bub » nên luật này luôn thắng — bộ mới
   không phải nhớ chuyện đó nữa. */
.dm-bub[class*="db-"] { color: var(--c-text); }

/* NỀN 3 — NHÃN CÓ HÌNH. Lo sẵn khung hình vuông theo cỡ chữ; nhãn mới chỉ khai ảnh. */
.dn-anh { padding-left: 4px; }
.dn-anh::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 4px;
  vertical-align: -.15em;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}

/* ----- Bộ TRUNG THU: chỉ còn khai màu và ảnh, đúng ba dòng ----- */
/* v3.23.22 — khung Trung Thu đổi sang tranh chủ dự án đưa (PNG trong suốt: vành
   kem, trăng rằm, đoàn múa lân rước đèn, thư pháp « Vui Trung Thu »); bong bóng
   và nhãn của bộ giữ nguyên SVG cũ. */
.av-anh.dk-tt::after { background-image: url(decor/tt-khung.png); }
.dm-bub.db-tt {
  background: linear-gradient(160deg, rgba(247,227,166,.30), rgba(194,65,58,.10)),
              url(decor/tt-bong.svg) right top / 62% auto no-repeat;
  border-color: rgba(217,131,36,.55);
}
.dn-tt { color: #a8531a; }
.dn-tt::before { background-image: url(decor/tt-nhan.svg); }
[data-mode="dark"] .dn-tt { color: #f0b070; }

/* Chuyển động: khai riêng theo từng bộ, vì không phải bộ nào cũng nên động.
   Luôn kèm khối « giảm chuyển động » — đây là thiết lập trợ năng, không phải sở thích. */
/* v3.23.22 — GỠ vòng xoay của khung Trung Thu: tranh mới có HƯỚNG rõ ràng
   (trăng góc trên, đoàn múa lân đứng dưới, dòng thư pháp) — xoay là trẻ con lộn
   ngược đầu và chữ chạy vòng quanh. Vành SVG cũ đối xứng nên xoay được, tranh
   thì không. */

/* ============================================================
   v3.23.9 — BA BỘ HUY CHƯƠNG cho ba người điểm cao nhất thi thử.
   Nhờ tầng nền, mỗi bộ chỉ còn khai màu + ảnh + chuyển động riêng.

   « Lung linh » ở đây làm bằng HAI lớp chồng nhau, không phải ảnh động:
     · vành huy chương (SVG) xoay rất chậm — thấy được mà không chóng mặt;
     · quầng sáng thở đều quanh ảnh, đúng màu kim loại của hạng.
   Làm bằng CSS nên TẮT ĐƯỢC khi máy đặt « giảm chuyển động »; ảnh GIF thì không.
   ============================================================ */

/* ----- ba khung: ảnh + quầng sáng theo màu kim loại ----- */
.av-anh.dk-hcv::after { background-image: url(decor/hcv-khung.svg); }
.av-anh.dk-hcb::after { background-image: url(decor/hcb-khung.svg); }
.av-anh.dk-hcd::after { background-image: url(decor/hcd-khung.svg); }

@keyframes hc-xoay { to { transform: rotate(360deg); } }
@keyframes hc-sang-v { 0%,100% { box-shadow: 0 0 6px 1px rgba(212,160,23,.45); }
                       50%      { box-shadow: 0 0 14px 5px rgba(247,224,138,.75); } }
@keyframes hc-sang-b { 0%,100% { box-shadow: 0 0 6px 1px rgba(154,163,173,.40); }
                       50%      { box-shadow: 0 0 14px 5px rgba(238,242,245,.75); } }
@keyframes hc-sang-d { 0%,100% { box-shadow: 0 0 6px 1px rgba(192,122,58,.40); }
                       50%      { box-shadow: 0 0 14px 5px rgba(234,185,138,.72); } }

.av-anh.dk-hcv::after, .av-anh.dk-hcb::after, .av-anh.dk-hcd::after {
  animation: hc-xoay 30s linear infinite;
}
.av-anh.dk-hcv { border-radius: 50%; animation: hc-sang-v 2.8s ease-in-out infinite; }
.av-anh.dk-hcb { border-radius: 50%; animation: hc-sang-b 2.8s ease-in-out infinite; }
.av-anh.dk-hcd { border-radius: 50%; animation: hc-sang-d 2.8s ease-in-out infinite; }

/* ----- ba kiểu bong bóng: nền kim loại + vệt sáng quét chậm ----- */
@keyframes hc-quet { 0% { background-position: -140% 0, 0 0; }
                     100% { background-position: 240% 0, 0 0; } }
.dm-bub.db-hcv, .dm-bub.db-hcb, .dm-bub.db-hcd {
  background-repeat: no-repeat, no-repeat; background-size: 60% 100%, auto;
  animation: hc-quet 5.5s ease-in-out infinite;
}
.dm-bub.db-hcv {
  background-image: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent),
                    linear-gradient(160deg, rgba(212,160,23,.30), rgba(247,224,138,.12));
  border-color: rgba(180,140,30,.65);
}
.dm-bub.db-hcb {
  background-image: linear-gradient(100deg, transparent, rgba(255,255,255,.60), transparent),
                    linear-gradient(160deg, rgba(154,163,173,.28), rgba(238,242,245,.14));
  border-color: rgba(120,130,140,.6);
}
.dm-bub.db-hcd {
  background-image: linear-gradient(100deg, transparent, rgba(255,255,255,.50), transparent),
                    linear-gradient(160deg, rgba(192,122,58,.28), rgba(234,185,138,.12));
  border-color: rgba(150,95,45,.6);
}

/* ----- ba nhãn ----- */
.dn-hcv { color: #96700f; } .dn-hcv::before { background-image: url(decor/hcv-nhan.svg); }
.dn-hcb { color: #5d666f; } .dn-hcb::before { background-image: url(decor/hcb-nhan.svg); }
.dn-hcd { color: #8a4d1c; } .dn-hcd::before { background-image: url(decor/hcd-nhan.svg); }
[data-mode="dark"] .dn-hcv { color: #f7e08a; }
[data-mode="dark"] .dn-hcb { color: #dfe6ec; }
[data-mode="dark"] .dn-hcd { color: #eab98a; }

/* Trợ năng: tắt TOÀN BỘ chuyển động huy chương khi máy yêu cầu giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .av-anh.dk-hcv::after, .av-anh.dk-hcb::after, .av-anh.dk-hcd::after { animation: none; }
  .av-anh.dk-hcv, .av-anh.dk-hcb, .av-anh.dk-hcd { animation: none; }
  .dm-bub.db-hcv, .dm-bub.db-hcb, .dm-bub.db-hcd { animation: none; background-position: 200% 0, 0 0; }
}

/* ============================================================
   v3.23.21 — 11 KHUNG KHOÁC ẢNH THẬT (PNG trong suốt, chủ dự án cung cấp).
   Đã tách nền, cắt vuông 320px, nén palette 11-22 KB/tệp — đủ nét cho chỗ hiện
   lớn nhất: 96px ở Hồ sơ × màn hình mật độ 3x = 288px.
   VÌ SAO PNG chứ không SVG như ghi chú v3.23.6 khuyên: đây là tranh vẽ nhiều lớp
   màu chuyển, không kẻ lại bằng SVG được; 320px nén palette là điểm cân nét/nhẹ,
   và tầng nền v3.23.6 vốn nhận sẵn PNG. Mã quà + tên lớp GIỮ NGUYÊN.
   Gán theo tông màu và mùa phụng vụ: Vọng/Chay tím · Giáng Sinh sao Bêlem
   · Phục Sinh trắng-vàng · Thánh Mẫu triều thiên lộng lẫy nhất.
   KHÔNG chuyển động — nhiều khung cùng nhấp nháy trên bảng tin thành cái hội chợ.
   ============================================================ */
.av-anh.dk-vang::after { background-image: url(decor/vang-khung.png); }
.av-anh.dk-ngoc::after { background-image: url(decor/ngoc-khung.png); }
.av-anh.dk-hong::after { background-image: url(decor/hong-khung.png); }
.av-anh.dk-bien::after { background-image: url(decor/bien-khung.png); }
.av-anh.dk-sao::after  { background-image: url(decor/sao-khung.png); }
.av-anh.dk-toa::after  { background-image: url(decor/toa-khung.png); }
.av-anh.dk-mv::after   { background-image: url(decor/mv-khung.png); }
.av-anh.dk-gs::after   { background-image: url(decor/gs-khung.png); }
.av-anh.dk-mc::after   { background-image: url(decor/mc-khung.png); }
.av-anh.dk-ps::after   { background-image: url(decor/ps-khung.png); }
.av-anh.dk-tm::after   { background-image: url(decor/tm-khung.png); }

/* ============================================================
   v3.23.28 — BỐN BỘ NHÂN ĐỨC NHÂN BẢN (bốn nhân đức trụ), mỗi bộ đúng khuôn
   ba dòng của tầng nền v3.23.6: khung ảnh PNG, bong bóng = màu bộ + mô-típ SVG
   mờ ở góc phải (đèn dầu · cán cân · khiên đá · chén nước), nhãn có hình nhỏ.
   ============================================================ */
.av-anh.dk-kn::after { background-image: url(decor/kn-khung.png); }
.dm-bub.db-kn { background: linear-gradient(160deg, rgba(122,79,168,.20), rgba(122,79,168,.05)),
                url(decor/kn-bong.svg) right top / 55% auto no-repeat;
                border-color: rgba(122,79,168,.5); }
.dn-kn { color: #7a4fa8; } .dn-kn::before { background-image: url(decor/kn-nhan.svg); }

.av-anh.dk-cb::after { background-image: url(decor/cb-khung.png); }
.dm-bub.db-cb { background: linear-gradient(160deg, rgba(200,144,44,.22), rgba(200,144,44,.06)),
                url(decor/cb-bong.svg) right top / 55% auto no-repeat;
                border-color: rgba(168,114,28,.55); }
.dn-cb { color: #8a5a14; } .dn-cb::before { background-image: url(decor/cb-nhan.svg); }

.av-anh.dk-cd::after { background-image: url(decor/cd-khung.png); }
.dm-bub.db-cd { background: linear-gradient(160deg, rgba(143,152,164,.22), rgba(143,152,164,.06)),
                url(decor/cd-bong.svg) right top / 55% auto no-repeat;
                border-color: rgba(120,128,138,.55); }
.dn-cd { color: #5d666f; } .dn-cd::before { background-image: url(decor/cd-nhan.svg); }

.av-anh.dk-td::after { background-image: url(decor/td-khung.png); }
.dm-bub.db-td { background: linear-gradient(160deg, rgba(63,120,184,.20), rgba(63,120,184,.05)),
                url(decor/td-bong.svg) right top / 55% auto no-repeat;
                border-color: rgba(63,120,184,.5); }
.dn-td { color: #2f5f96; } .dn-td::before { background-image: url(decor/td-nhan.svg); }

[data-mode="dark"] .dn-kn { color: #c2a3d6; }
[data-mode="dark"] .dn-cb { color: #e0b45c; }
[data-mode="dark"] .dn-cd { color: #c9d2da; }
[data-mode="dark"] .dn-td { color: #86b4e6; }

/* ============================================================
   v3.23.29 — TÁM BỘ VÒNG LỬA, bậc HIẾM. Khung là ảnh PNG trong suốt tách từ
   tranh lửa trên nền đen (alpha theo độ sáng nên quầng giữ nguyên độ chuyển).
   « ĐỘNG » LÀM BẰNG CSS chứ không dùng GIF/APNG — đúng nguyên tắc v3.23.6:
   xoay chậm 26 giây, tắt được khi máy đặt « giảm chuyển động »; ảnh động thì
   không tắt được. Vòng lửa gần đối xứng tròn nên xoay thành « lửa đang cháy ».
   Bong bóng và nhãn khai màu theo tông lửa từng vòng, không cần tệp ảnh.
   ============================================================ */
.av-anh.dk-lca::after { background-image: url(decor/lca-khung.png); }
.av-anh.dk-lvl::after { background-image: url(decor/lvl-khung.png); }
.av-anh.dk-lho::after { background-image: url(decor/lho-khung.png); }
.av-anh.dk-lbh::after { background-image: url(decor/lbh-khung.png); }
.av-anh.dk-lti::after { background-image: url(decor/lti-khung.png); }
.av-anh.dk-lhh::after { background-image: url(decor/lhh-khung.png); }
.av-anh.dk-lxb::after { background-image: url(decor/lxb-khung.png); }
.av-anh.dk-ldt::after { background-image: url(decor/ldt-khung.png); }

/* v3.23.31 — đổi chiều quay NGƯỢC kim đồng hồ (phải sang trái) theo ý chủ dự án:
   các lưỡi lửa trong tranh liếm theo chiều ấy, quay thuận chiều liếm mới ra lửa cháy. */
@keyframes lua-xoay { to { transform: rotate(-360deg); } }
.av-anh.dk-lca::after, .av-anh.dk-lvl::after, .av-anh.dk-lho::after, .av-anh.dk-lbh::after,
.av-anh.dk-lti::after, .av-anh.dk-lhh::after, .av-anh.dk-lxb::after, .av-anh.dk-ldt::after {
  animation: lua-xoay 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .av-anh.dk-lca::after, .av-anh.dk-lvl::after, .av-anh.dk-lho::after, .av-anh.dk-lbh::after,
  .av-anh.dk-lti::after, .av-anh.dk-lhh::after, .av-anh.dk-lxb::after, .av-anh.dk-ldt::after { animation: none; }
}

.dm-bub.db-lca { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(230,130,40,.20), rgba(230,130,40,.05));
                 border-color: rgba(200,110,30,.5); }
.dm-bub.db-lvl { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(150,185,30,.20), rgba(150,185,30,.05));
                 border-color: rgba(120,150,25,.5); }
.dm-bub.db-lho { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(220,50,140,.18), rgba(220,50,140,.05));
                 border-color: rgba(190,40,120,.5); }
.dm-bub.db-lbh { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(60,130,230,.18), rgba(240,140,40,.10));
                 border-color: rgba(120,130,180,.5); }
.dm-bub.db-lti { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(150,70,220,.18), rgba(150,70,220,.05));
                 border-color: rgba(130,60,190,.5); }
.dm-bub.db-lhh { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(230,90,40,.20), rgba(40,120,130,.08));
                 border-color: rgba(200,90,40,.5); }
.dm-bub.db-lxb { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(50,140,230,.18), rgba(50,140,230,.05));
                 border-color: rgba(40,120,200,.5); }
/* v3.23.32 — ĐUÔI LỬA CUỐI TIN NHẮN cho cả 8 bộ lửa, theo tranh chủ dự án đưa:
   đã bỏ nền, xóa chữ bằng nội suy theo hàng, chuyển thành bản song sắc trắng-thẫm
   bán trong suốt có mép trái phai — MỘT tệp nằm trên gradient màu nào cũng thành
   lửa màu ấy. Cỡ neo theo em (2.4em) nên tin một dòng hay nhiều dòng đuôi vẫn cân;
   chừa padding-right để chữ không chạm phần lửa đậm. */
.dm-bub.db-ldt { background: url(decor/lua-duoi.png) right center / auto 2.4em no-repeat,
                 linear-gradient(160deg, rgba(220,40,70,.18), rgba(220,40,70,.05));
                 border-color: rgba(190,30,60,.5); }

/* v3.23.30 — 7 NHÃN ƠN CHÚA THÁNH THẦN kiểu CỜ HIỆU, dựng theo mẫu chủ dự án đưa:
   huy hiệu chim bồ câu vàng bên trái (MỘT tệp on-chim.svg — một Thánh Thần, bảy ơn)
   + thanh gradient màu riêng từng Ơn + đuôi lửa TRẮNG bán trong suốt (MỘT tệp
   on-lua.svg — trắng nên đặt lên gradient màu nào cũng thành lửa màu ấy).
   Chip tự co giãn theo chữ nên tên dài ngắn đều không vỡ; chữ trắng có bóng nên
   đọc được trên cả giao diện sáng lẫn tối — không cần luật dark riêng. */
.dn-lca, .dn-lvl, .dn-lho, .dn-lbh, .dn-lti, .dn-lxb, .dn-ldt {
  color: #fff; border-color: transparent; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding-right: 22px;
}
.dn-lca { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #b3450f, #e8862a); }
.dn-lvl { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #5c7a10, #a8be2a); }
.dn-lho { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #a01f68, #d8489c); }
.dn-lbh { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #2f6fb8, #e8862a); }
.dn-lti { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #5f2fa0, #9a5ad0); }
.dn-lxb { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #1d5fa8, #4a9ade); }
.dn-ldt { background: url(decor/on-lua.svg) right center / auto 100% no-repeat,
                      linear-gradient(90deg, #8f1230, #d0304e); }
.dm-bub.db-lca, .dm-bub.db-lvl, .dm-bub.db-lho, .dm-bub.db-lbh,
.dm-bub.db-lti, .dm-bub.db-lhh, .dm-bub.db-lxb, .dm-bub.db-ldt { padding-right: 34px; }

.dn-lca::before, .dn-lvl::before, .dn-lho::before, .dn-lbh::before,
.dn-lti::before, .dn-lxb::before, .dn-ldt::before { background-image: url(decor/on-chim.svg); }

/* vòng Lửa Hoàng Hôn giữ nhãn chữ như cũ */
.dn-lhh { color: #b04018; }
[data-mode="dark"] .dn-lhh { color: #ee9068; }

/* ============================================================
   v3.23.11 — BẢNG VÀNG THEO PHÒNG THI.
   Thẻ phòng thi xếp hai cột: trái là thông tin và nút, phải là bảng vàng — lấp đúng
   khoảng trống vốn bỏ không bên phải thẻ, nên thẻ cân mà không dài thêm dòng nào.
   Màn hình hẹp thì tự xuống dòng, bảng nằm dưới nút.
   ============================================================ */
.ex-2c { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ex-2c-l { flex: 1 1 300px; min-width: 0; }
.ex-2c-r { flex: 0 1 250px; }

.xb { border: 1px solid var(--c-border); border-radius: 12px; padding: 9px 11px; /* v3.24.90 — --c-line câm → --c-border */
      background: var(--c-chip-bg); }
.xb-t { display: block; font-size: .82rem; margin-bottom: 6px; letter-spacing: .01em; }
.xb-r { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: .9rem; }
.xb-h { flex: none; width: 1.2em; text-align: center; }
.xb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xb-p { flex: none; font-variant-numeric: tabular-nums; }
.xb-trong { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }

/* Bản rút gọn ở Trang chủ: nằm cạnh nút « Vào ngay », chữ nhỏ hơn, không viền
   để không tranh chỗ với nút bấm. */
.xb-gon { border: 0; background: transparent; padding: 0 0 0 4px; font-size: .84rem; }
.xb-gon .xb-t { font-size: .76rem; margin-bottom: 2px; }
.xb-gon .xb-r { font-size: .82rem; padding: 0; }
.qrow-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media print { .xb { display: none; } }

/* v3.23.12 — dấu mở bảng vàng đầy đủ + trang bảng vàng */
.xb-more { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 600; }
.xb-gon .xb-more { margin-top: 2px; font-size: .78rem; }
.bv-toi > td { background: var(--c-chip-bg); font-weight: 600; }
.bv-toi-ngoai { margin-top: 10px; padding: 9px 11px; border-radius: 10px;
                background: var(--c-chip-bg); border: 1px dashed var(--c-border); } /* v3.24.90 — --c-line câm → --c-border */

/* v3.23.18 — thẻ « Đang mở cho bạn » xếp HAI CỘT, cùng khuôn với thẻ ở trang Kỳ thi:
   trái là chip + tên + hạn + nút, phải là bảng vàng trong khung riêng. Trước đây bảng
   nằm cạnh nút trong cùng một hàng nên phần phải của thẻ bỏ trống một mảng lớn.

   ⚠ Dùng lớp RIÊNG « .qrow-2c » chứ không sửa thẳng « .qrow »: khối « Bài tập đến hạn »
   cũng dùng .qrow, mà nó KHÔNG có hai cột — đổi luật chung sẽ xé chip, tên, hạn và nút
   của nó ra thành một hàng ngang. */
.qrow-2c { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qrow-2c .qrow-l { flex: 1 1 260px; min-width: 0; }
.qrow-2c .qrow-r { flex: 0 1 230px; }
.qrow-2c .qrow-act { margin-top: 2px; }
/* bảng vàng ở thẻ này nhỏ hơn chút cho cân với cỡ chữ của thẻ */
.qrow-2c .xb { padding: 8px 10px; }
.qrow-2c .xb-r { font-size: .86rem; }

/* v3.23.60 — nhãn ⭐ Lớp trưởng (bộ Phục Vụ): vàng chức vụ, CSS thuần không ảnh */
.av-anh.dk-lt::after { background-image: url(decor/lt-khung.png); }   /* khung ⭐ Lớp trưởng */
.db-lt { background: linear-gradient(135deg, #fdf3d7, #f5e2ad); border-color: #d9b45a; color: #4a3200; }
.dn-lt { background: linear-gradient(135deg, #f7d774, #e4af3d); color: #4a3200;
         border: 1px solid #c99b2e; font-weight: 700; }

/* ═══ v3.23.65 — SÂN KHẤU RUNG CHUÔNG VÀNG (gói trọn trong .rcv-stage) ═══ */
.rcv-stage { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 16px 22px;
  color: #eef2fb; text-align: center;
  background: radial-gradient(120% 70% at 50% -12%, #2c4a8c 0%, #16264d 46%, #0c1430 100%); }
.rcv-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 34% at 50% 0%, rgba(247, 215, 116, .16), transparent 70%); }
.rcv-tochuc { padding: 26px 22px 30px; }                 /* máy chiếu: thoáng hơn */

/* sảnh chờ & màn kết */
.rcv-hero { position: relative; padding: 18px 0 10px; }
.rcv-ring { position: absolute; left: 50%; top: 34px; width: 118px; height: 118px;
  transform: translateX(-50%); border-radius: 50%; border: 2px solid rgba(247, 215, 116, .5);
  animation: rcvLan 2.4s ease-out infinite; }
@keyframes rcvLan { 0% { opacity: .9; scale: .62; } 100% { opacity: 0; scale: 1.5; } }
.rcv-stage .rcv-bell { font-size: 4.4rem; filter: drop-shadow(0 0 18px rgba(247, 205, 90, .55)); }
.rcv-tochuc .rcv-bell { font-size: 6rem; }
.rcv-count { margin: 6px 0 0; font-size: 3.4rem; font-weight: 800; color: #f7d774; line-height: 1.1; }
.rcv-tochuc .rcv-count { font-size: 4.6rem; }
.rcv-sub { margin: 2px 0; color: #b9c6e4; }
.rcv-sang { color: #eef2fb; }

/* đầu pha hỏi */
.rcv-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.rcv-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.rcv-dots span.done { background: #f7d774; box-shadow: 0 0 6px rgba(247, 215, 116, .8); }
.rcv-pill { display: inline-block; margin: 0 0 8px; padding: 4px 14px; border-radius: 999px;
  background: rgba(247, 215, 116, .14); border: 1px solid rgba(247, 215, 116, .55);
  color: #f7d774; font-weight: 800; letter-spacing: .06em; }
.rcv-pill small { color: #b9c6e4; font-weight: 600; letter-spacing: 0; }
.rcv-ansbar { height: 8px; max-width: 420px; margin: 0 auto 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); overflow: hidden; }
.rcv-ansbar i { display: block; height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #f7d774, #ffb84d); transition: width .5s ease; }

/* câu hỏi & phương án trên sân khấu */
.rcv-stage .qz-text { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 700;
  max-width: 860px; margin: 6px auto 14px; line-height: 1.5; }
.rcv-tochuc .qz-text { font-size: clamp(1.5rem, 3.1vw, 2.3rem); }
.rcv-stage .qz-opts { max-width: 860px; margin: 0 auto; text-align: left; display: grid; gap: 10px; }
/* v3.23.69 — LUẬT CỘT CHUNG CHO MỌI VAI (chủ phòng, phụ dẫn, người chơi): CSS
   xét theo BỀ RỘNG MÀN HÌNH, không theo phân quyền. Hẹp (<560px — điện thoại
   dọc): luôn MỘT cột · bốn hàng. Rộng (từ 560px — máy tính bảng, laptop, PC,
   TV, máy chiếu, điện thoại ngang): luôn HAI cột · hai hàng. Ghim cả nhánh câu
   chọn theo hình để luật toàn cục .qz-imgopts{1fr 1fr} không lách được. */
.rcv-stage .qz-opts, .rcv-stage .qz-opts.qz-imgopts { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .rcv-stage .qz-opts, .rcv-stage .qz-opts.qz-imgopts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rcv-stage .qz-opt { width: 100%; }
.rcv-stage .qz-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .2);
  color: #eef2fb; border-radius: 12px; padding: 13px 14px 15px; min-height: 54px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.rcv-stage .qz-opt:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(247, 215, 116, .7); }
.rcv-chu { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; color: #0c1430; }
.rcv-o0 .rcv-chu { background: #7db4ff; } .rcv-o1 .rcv-chu { background: #ff9db0; }
.rcv-o2 .rcv-chu { background: #f7d774; } .rcv-o3 .rcv-chu { background: #7fe0c3; }
.rcv-stage .qz-opt.sel { border-color: #f7d774; background: rgba(247, 215, 116, .16);
  box-shadow: 0 0 0 2px rgba(247, 215, 116, .35); }
.rcv-stage .qz-opt.right { border-color: #45d07e; background: rgba(69, 208, 126, .2);
  box-shadow: 0 0 14px rgba(69, 208, 126, .45); }
.rcv-stage .qz-opt.wrong { border-color: #ff7a7a; background: rgba(255, 90, 90, .16); opacity: .85; }
.rcv-stage .qz-opt:disabled { cursor: default; }
.rcv-phieu { position: absolute; left: 0; bottom: 0; height: 5px; width: 0;
  background: linear-gradient(90deg, #f7d774, #ffb84d); transition: width .6s ease; }
.qz-opt.right .rcv-phieu { background: linear-gradient(90deg, #45d07e, #9fe8bd); }
.rcv-sophieu { position: absolute; right: 10px; bottom: 6px; font-style: normal;
  font-size: .78rem; color: #f7d774; font-weight: 700; }
.rcv-stage .qz-explain { max-width: 860px; margin: 12px auto 0; text-align: left;
  background: rgba(13, 22, 46, .82); color: #eef2fb; line-height: 1.6;
  border: 1px solid rgba(247, 215, 116, .35); border-left: 4px solid #f7d774;
  border-radius: 10px; padding: 12px 14px; }
.rcv-stage .qz-explain b { color: #f7d774; }
.rcv-stage .qz-explain .tts-e { color: #eef2fb; opacity: .75;
  background: rgba(255, 255, 255, .12); border-color: rgba(247, 215, 116, .45); }
.rcv-stage .okbox, .rcv-stage .errbox { max-width: 640px; margin: 10px auto; }

/* chip người trụ lại & người thắng */
.rcv-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 8px 0 2px; }
.rcv-chip { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25); font-size: .92rem; }
.rcv-chip-vang { background: linear-gradient(135deg, #f7d774, #e4af3d); color: #4a3200;
  border-color: #c99b2e; font-weight: 800; font-size: 1.05rem; padding: 7px 16px; }
.rcv-tochuc .rcv-chip-vang { font-size: 1.45rem; padding: 10px 22px; }

/* pháo giấy màn kết — rơi một lượt rồi nằm yên */
.rcv-confetti { position: absolute; inset: 0; pointer-events: none; }
.rcv-confetti i { position: absolute; top: -12px; width: 9px; height: 15px; border-radius: 2px;
  opacity: 0; animation: rcvRoi 2.6s ease-in forwards; }
@keyframes rcvRoi { 0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: .85; transform: translateY(104%) rotate(540deg); } }
.rcv-confetti i:nth-child(4n+1) { background: #f7d774; } .rcv-confetti i:nth-child(4n+2) { background: #7db4ff; }
.rcv-confetti i:nth-child(4n+3) { background: #ff9db0; } .rcv-confetti i:nth-child(4n) { background: #7fe0c3; }
.rcv-confetti i:nth-child(1) { left: 6%; animation-delay: 0s; }  .rcv-confetti i:nth-child(2) { left: 14%; animation-delay: .3s; }
.rcv-confetti i:nth-child(3) { left: 22%; animation-delay: .12s; } .rcv-confetti i:nth-child(4) { left: 30%; animation-delay: .42s; }
.rcv-confetti i:nth-child(5) { left: 38%; animation-delay: .06s; } .rcv-confetti i:nth-child(6) { left: 46%; animation-delay: .5s; }
.rcv-confetti i:nth-child(7) { left: 54%; animation-delay: .2s; }  .rcv-confetti i:nth-child(8) { left: 62%; animation-delay: .36s; }
.rcv-confetti i:nth-child(9) { left: 70%; animation-delay: .1s; }  .rcv-confetti i:nth-child(10) { left: 78%; animation-delay: .46s; }
.rcv-confetti i:nth-child(11) { left: 86%; animation-delay: .24s; } .rcv-confetti i:nth-child(12) { left: 94%; animation-delay: .55s; }
.rcv-confetti i:nth-child(13) { left: 50%; animation-delay: .64s; } .rcv-confetti i:nth-child(14) { left: 10%; animation-delay: .7s; }

/* di động & luật chuyển động (3.23.29) */
@media (max-width: 640px) {
  .rcv-stage { padding: 14px 10px 18px; border-radius: 12px; }
  .rcv-stage .qz-opt { padding: 12px 12px 15px; }
  .rcv-count { font-size: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rcv-ring, .rcv-confetti i { animation: none; }
  .rcv-confetti i { opacity: .85; top: auto; bottom: 8px; }
  .rcv-stage .qz-opt, .rcv-ansbar i, .rcv-phieu { transition: none; }
  .rcv-stage .rcv-bell { animation: none; }
}

/* v3.23.70 — đồng hồ suy nghĩ trên sân khấu RCV: vòng vàng, 5 giây cuối đỏ nhấp */
.rcv-dongho { width: 62px; height: 62px; margin: 4px auto 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; color: #f7d774;
  border: 3px solid rgba(247, 215, 116, .8); background: rgba(247, 215, 116, .1);
  box-shadow: 0 0 14px rgba(247, 215, 116, .35); }
.rcv-tochuc .rcv-dongho { width: 84px; height: 84px; font-size: 2.3rem; }
.rcv-dongho.gap { color: #ff8484; border-color: rgba(255, 122, 122, .9);
  background: rgba(255, 90, 90, .14); box-shadow: 0 0 16px rgba(255, 100, 100, .5);
  animation: rcvGap 1s infinite; }
@keyframes rcvGap { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .rcv-dongho.gap { animation: none; } }

/* v3.23.71 — nhịp KHÓA của RCV: hộp ổ khóa (khoảng đệm hoạt náo trước công bố) */
.rcv-khoa { max-width: 640px; margin: 10px auto; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 190, 90, .14); border: 1px solid rgba(255, 200, 110, .55);
  color: #ffd9a0; font-weight: 600; }

/* v3.23.72 — nút loa của sân khấu RCV (nhớ theo từng máy) */
.rcv-amhang { text-align: right; margin: 6px 2px 0; }
.rcv-am { border: 1px solid var(--c-border); background: var(--c-surface); color: inherit;
  border-radius: 999px; width: 34px; height: 34px; font-size: .95rem; cursor: pointer; opacity: .8; }
.rcv-am:hover { opacity: 1; }

/* v3.23.74 — bảng tổng kết cuối trận RCV */
.rcv-bangkq { max-width: 720px; margin: 14px auto 4px; }
.rcv-bangkq table { width: 100%; border-collapse: collapse; }
.rcv-bangkq th { color: #b9c6e4; font-size: .82rem; font-weight: 600; text-transform: none;
  padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .22); text-align: center; }
.rcv-bangkq th:nth-child(2) { text-align: left; }
.rcv-bangkq td { padding: 8px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rcv-b-hang { width: 44px; font-size: 1.15rem; }
.rcv-b-ten { text-align: left; font-weight: 700; color: #eef2fb; }
.rcv-b-dung { color: #7fe0a8; font-weight: 800; }
.rcv-b-sai { color: #ff9d9d; }
.rcv-b-cuu { color: #ffd9a0; }
.rcv-b-diem { color: #f7d774; font-weight: 800; font-size: 1.05rem; }
.rcv-b-thang td { background: rgba(247, 215, 116, .12); }
.rcv-b-thang .rcv-b-ten { color: #f7d774; }
.rcv-b-thang td:first-child { border-radius: 8px 0 0 8px; }
.rcv-b-thang td:last-child { border-radius: 0 8px 8px 0; }
.rcv-tochuc .rcv-bangkq td, .rcv-tochuc .rcv-bangkq th { font-size: 1.08rem; padding: 10px; }
@media (max-width: 640px) { .rcv-bangkq td, .rcv-bangkq th { padding: 6px 4px; font-size: .88rem; } }

/* v3.23.88 — loa nhỏ trước từng đề mục (đọc từ đề mục tới cuối bài)
   v3.25.7 — .tts-diem: nút tại mốc [[loa]] biên tập viên cắm, cùng kiểu */
.tts-sec, .tts-diem { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 30px; margin-right: 8px; padding: 0;
  border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface);
  font-size: .82rem; cursor: pointer; vertical-align: middle; opacity: .75; }
.tts-sec:hover, .tts-diem:hover { opacity: 1; }
.tts-sec.on, .tts-diem.on { opacity: 1; background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ============================================================
   v3.23.90 — MENU THU GỌN VỀ RAY BIỂU TƯỢNG (khuôn VS Code/Gmail):
   tay kéo dọc .menu-keo đứng sát mép phải menu (cạnh thanh cuộn);
   bấm = body.menu-gon: menu về 64px chỉ còn biểu tượng, nội dung
   nở ra; bấm lại = trở về 232px. Trạng thái lưu localStorage.
   Chỉ tablet/desktop (>=900px) — điện thoại vẫn thanh đáy như cũ.
   ============================================================ */
@media (min-width: 900px) {
  .sidebar { transition: width .22s ease, padding .22s ease; }
  .topbar-in, .content { transition: margin-left .22s ease; }
  body.menu-san-sang .menu-keo { transition: left .22s ease; }
  body.menu-gon .sidebar { width: 64px; padding: 14px 8px; }
  body.menu-gon .sidebar a { justify-content: center; gap: 0; padding: 11px 0; }
  body.menu-gon .sidebar a span { display: none; }
  body.menu-gon .side-brand { text-align: center; padding: 8px 0 16px; }
  body.menu-gon .side-brand span { display: none; }
  body.menu-gon .side-brand img { margin-right: 0 !important; }
  body.menu-gon .side-group { display: none; }
  body.menu-gon .topbar-in, body.menu-gon .content { margin-left: 80px; }

  .menu-keo {
    display: block; position: fixed; top: 0; bottom: 0; left: 232px; width: 16px;
    z-index: 21; border: none; padding: 0; background: transparent; cursor: pointer;
  }
  .menu-keo:hover { background: linear-gradient(90deg, var(--c-chip-bg), transparent); }
  .menu-keo .mk-num {
    position: absolute; top: 50%; left: -3px; transform: translateY(-50%);
    width: 22px; height: 44px; line-height: 42px; text-align: center;
    border: 1px solid var(--c-border); border-radius: 999px;
    background: var(--c-surface); color: var(--c-muted); font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
  .menu-keo:hover .mk-num { color: var(--c-text); }
  body.menu-gon .menu-keo { left: 64px; }
}
@media (max-width: 899px) { .menu-keo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar, .topbar-in, .content, .menu-keo { transition: none !important; }
}

/* ---------- v3.24.27 — thẻ gấp giáo trình (Môn học, Học tập) ---------- */
details.fold > summary.fold-head {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; min-height: 44px;   /* đích chạm ≥ 44px */
  -webkit-tap-highlight-color: transparent;
}
details.fold > summary.fold-head::-webkit-details-marker { display: none; }
details.fold .fold-tua { flex: 1; min-width: 0; }
details.fold .fold-tua h2 { margin: 0; font-size: 1.06rem; color: var(--c-primary); }
details.fold .fold-tua .pbar { margin-top: 8px; }
details.fold .fold-tua p { margin: 4px 0 0; }
.fold-caret {
  flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
details.fold[open] > summary .fold-caret { transform: rotate(-135deg); }
details.fold[open] > summary.fold-head { margin-bottom: 10px; }
details.fold > .fold-body { animation: fold-xuong .22s ease; }
@keyframes fold-xuong { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details.fold > summary.fold-head:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 8px; }

/* v3.24.28 — tiêu đề mục « Đã đóng » trên trang Kỳ thi: cùng giọng với .side-group */
.sec-cach {
  margin: 24px 4px 10px; font-size: .82rem; font-weight: 600;
  color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px;
}

/* v3.24.31 — tủ quà: dải « không dùng » + bảng theo bộ trong mục bậc gấp */
.tq-off { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 14px; }
.tq-off-c .d-bo { margin: 0 0 4px; }
.tq-table td, .tq-table th { vertical-align: middle; }
.tq-table .tq-tenbo { min-width: 130px; }
.tq-table .tq-cell { min-width: 108px; }
.tq-table .dgrid-it { margin: 0; }
details.fold .fold-tua .d-bac { margin-left: 0; }

/* v3.24.32 — trang Người dùng: ô tìm + dòng lớp trên thẻ */
.u-tim { display: flex; gap: 8px; margin: 8px 0 4px; }
.u-tim input { flex: 1; min-height: 44px; }
.u-dem { margin: 6px 0 2px; }
.ucard .u-lop { display: block; margin-top: 3px; }

/* v3.24.34 — gộp tài khoản: thanh chọn, chế-độ-chọn, bảng so sánh, hàng tùy chọn */
.mg-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 8px 14px;
  background: var(--c-primary); color: #fff; font-weight: 600;
  box-shadow: 0 -2px 10px rgba(0,0,0,.18);
}
body.mg-picking .ucard { cursor: pointer; }
body.mg-picking .ucard:hover { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.mg-modal { max-width: 640px; }
.mg-so th { text-align: left; white-space: nowrap; }
.mg-so tr.mg-khac td { font-weight: 600; }
.mg-opt { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.mg-opt > span { min-width: 130px; font-weight: 600; }
.mg-opt label { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; }

/* v3.24.36/40 — cổng tuyển sinh: hộp chọn nộp-bằng-tài-khoản-đang-đăng-nhập.
   Chú ý: .login-card đặt input{width:100%} cho ô chữ — radio phải ghim lại 18px. */
.ts-me { text-align: left; }
.ts-me b { word-break: break-all; }
.ts-me label {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 8px; padding: 11px 12px; min-height: 44px;
  background: var(--c-surface); border: 1.5px solid rgba(0, 0, 0, .14);
  border-radius: 10px; cursor: pointer; font-weight: 500; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-me label input[type="radio"] {
  flex: none; width: 18px; height: 18px; min-height: 0;
  margin: 2px 0 0; accent-color: var(--c-primary);
}
.ts-me label:has(input:checked) {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.ts-me label:focus-within { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* v3.24.41 — quy tắc tên đăng nhập: nghiêng, nhẹ, nằm ngay cạnh nhãn */
.ts-rule { font-style: italic; font-weight: 400; font-size: .85em; color: var(--c-muted); }

/* v3.24.42 — 4 nút ngôn ngữ trên trang đăng nhập */
.login-langs { display: flex; justify-content: center; gap: 10px; margin: 10px 0 2px; }
.lang-sw {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; min-height: 38px; padding: 4px 12px;
  border: 1.5px solid rgba(0, 0, 0, .16); border-radius: 999px;
  font-weight: 600; text-decoration: none; color: var(--c-muted);
  transition: border-color .15s ease, color .15s ease;
}
.lang-sw:hover { border-color: var(--c-primary); color: var(--c-primary); }
.lang-sw.lang-on { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; }

/* v3.24.44 — checkbox trong thẻ cài đặt: ghim 20px cạnh nhãn, hết phình to */
.tts-wake-row, .lock-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 600; margin: 12px 0 4px; min-height: 28px;
}
.tts-wake-row input[type="checkbox"], .lock-row input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; flex: none;
  margin: 2px 0 0; accent-color: var(--c-primary);
}

/* v3.24.46 — lời nhắc « đã có tài khoản thì đừng nộp đơn »: nhấn đỏ theo token */
.ts-already { color: var(--c-danger); }

/* v3.25.5 — nút « Nghe tiếp chỗ dừng » đứng cạnh nút Nghe bài */
.tts-resume { margin-left: .5rem; }