/* Bài giảng ngắn «ví dụ mẫu mờ dần» (22/10/2026) — màn #v-baigiang trong hocsinh.html. Dùng đúng token màu của hocsinh.html.
   Nút cao tối đa 40px (bộ đo giao diện coi > 40px là «nút to»); mọi trạng thái đúng/sai đều có chữ + biểu tượng, không chỉ màu. */
#v-baigiang { --bg-le: var(--k5); }
@media (min-width: 700px) { #v-baigiang { --bg-le: var(--k6); } }

/* Thanh đầu dính: tên bài + bốn bước. Kéo ra sát mép panel để nội dung cuộn qua không lộ phía sau. */
#v-baigiang .bg-dau { position: sticky; top: 0; z-index: 5; background: var(--trang); border-bottom: 1px solid var(--vien);
  margin: 0 calc(var(--bg-le) * -1) var(--k3); padding: var(--k2) var(--bg-le) var(--k2); }
.bg-tieu { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--k2); }
.bg-tieu b { font-size: var(--t-lon); line-height: 1.3; }
.bg-tieu small { color: var(--n-600); font-size: var(--t-nho); }
.bg-buoc-ds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k1); }
button.bg-buoc { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: 40px;
  margin: 0; padding: 2px; background: var(--n-50); color: var(--n-700); border: 1px solid var(--n-300); border-radius: var(--r-nho);
  box-shadow: none; font-size: var(--t-xs); font-weight: 600; line-height: 1.15; }
button.bg-buoc:hover { background: var(--muc-50); }
button.bg-buoc.dang { background: var(--muc-700); color: #fff; border-color: var(--muc-700); }
.bg-so { font-size: var(--t-vua); line-height: 1.1; }
.bg-ten { white-space: nowrap; }
button.bg-bo-qua { display: block; margin: 0 0 var(--k3) auto; white-space: nowrap; }

/* Ý chính */
.bg-y { margin: 0 0 var(--k4); padding-left: 20px; }
.bg-y li { margin-bottom: var(--k3); line-height: 1.75; }
.bg-trong { color: var(--n-600); }

/* Thẻ một bài (ví dụ mẫu / khuyết / tự làm) */
.bg-the { border: 1px solid var(--vien); border-radius: var(--r-vua); padding: var(--k4); margin-bottom: var(--k3); background: var(--trang); }
.bg-the.dung { border-left: 4px solid var(--tot); }
.bg-the-dau { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k1); }
.bg-de { font-weight: 600; font-size: var(--t-vua); }
.bg-nhan-tt { font-size: var(--t-sm); font-weight: 600; color: var(--tot); background: var(--tot-nen); border: 1px solid var(--tot-vien);
  border-radius: var(--r-tron); padding: 1px 10px; }
.bg-buoc-ol { margin: var(--k3) 0 0; padding-left: 22px; }
.bg-buoc-ol li { margin-bottom: var(--k2); }
.bg-loi { display: block; }
.bg-tinh { display: block; width: fit-content; max-width: 100%; margin-top: 2px; padding: 2px 8px; border-radius: var(--r-nho);
  background: var(--n-100); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--t-nho); overflow-wrap: anywhere; }
.bg-che { color: var(--n-600); border: 1px dashed var(--n-300); border-radius: var(--r-nho); padding: 3px 10px; font-size: var(--t-nho); list-style-position: inside; }
.bg-dap-an { margin: var(--k2) 0 0; font-weight: 700; }

/* Khu nhập đáp án */
.bg-lam { margin-top: var(--k3); }
.bg-nhan { display: block; margin: 0 0 var(--k1); font-size: var(--t-nho); color: var(--n-600); font-weight: 600; }
.bg-nhap-dong { display: flex; align-items: center; gap: var(--k2); }
.bg-nhap-dong input { flex: 1; min-width: 0; width: auto; margin-bottom: 0; }
.bg-dv { color: var(--n-600); font-weight: 600; }
.bg-nut { display: flex; flex-wrap: wrap; gap: var(--k2); margin-top: var(--k3); }
.bg-nut button { width: auto; height: 38px; padding: 0 var(--k4); margin: 0; font-size: var(--t-nho); line-height: 1.2; white-space: nowrap; }
.bg-ghi-chu { margin: var(--k2) 0 0; font-size: var(--t-nho); color: var(--n-600); }
.bg-gy-ds { margin: var(--k3) 0 0; padding-left: 20px; font-size: var(--t-nho); }
.bg-gy-ds li { margin-bottom: 6px; }
.bg-ph { margin: var(--k3) 0 0; padding: 8px 12px; border: 1px solid; border-radius: var(--r-nho); font-size: var(--t-nho); }
.bg-ph.dung { background: var(--tot-nen); color: var(--tot); border-color: var(--tot-vien); }
.bg-ph.sai { background: var(--nguy-nen); color: var(--nguy); border-color: var(--nguy-vien); }
.bg-ph.nhac { background: var(--tin-nen); color: var(--tin); border-color: var(--tin-vien); }

button.bg-tiep { display: block; margin: var(--k3) 0 0; white-space: nowrap; }