/* ═══════════════════════════════════════════════════════════════════════════════════════
   Kiểu dáng dùng chung cho HAI trang hướng dẫn:
     · /huong-dan-hoc-vien      — Areas/Front/Views/Home/HuongDanHocVien.cshtml (công khai)
     · /TMS/HuongDan            — Views/TMS/HuongDan.cshtml (sau khi giáo viên đăng nhập)

   ⚠️ ĐỪNG CHÉP KHỐI NÀY VÀO MỘT VIEW THỨ HAI. Hai bản thì bản nào sửa trước sẽ lệch mà không
   có gì báo: cả hai trang vẫn mở bình thường, chỉ là hai trang hướng dẫn của cùng một hệ thống
   nhìn ra hai kiểu. `HuongDanGiaoVienTests` canh chỗ này.

   ⚠️ KHÔNG cắm mã màu — mọi màu đi qua biến của Sneat để tự đổi theo dải màu của cơ sở (§3.11).
   Chữ phụ dùng --bs-body-color (tương phản 5.19 trên nền trắng), KHÔNG dùng
   --bs-secondary-color (2.29 — hỏng sẵn ngay trên nền trắng, xem §3.4e).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.hd-khung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 992px) { .hd-khung { grid-template-columns: 250px minmax(0, 1fr); } }

.hd-muc-luc { position: sticky; top: 6rem; align-self: start; }
.hd-muc-luc .list-group-item { border: 0; border-left: 3px solid transparent; border-radius: 0; padding: .45rem .9rem; font-weight: 500; color: var(--bs-body-color); }
.hd-muc-luc .list-group-item.active { background: var(--bs-primary-bg-subtle); border-left-color: var(--bs-primary); color: var(--bs-heading-color); }
.hd-muc-luc .list-group-item:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); }
@media (max-width: 991.98px) {
    .hd-muc-luc { position: static; }
    .hd-muc-luc .list-group { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
    .hd-muc-luc .list-group-item { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
}

.hd-phan { scroll-margin-top: 6rem; margin-bottom: 3rem; }
.hd-phan > h2 { font-size: 1.6rem; color: var(--bs-heading-color); margin-bottom: .35rem; display: flex; align-items: center; gap: .6rem; }
.hd-phan > h2 .hd-so { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--bs-border-radius); background: var(--bs-primary); color: #fff; font-size: 1rem; line-height: 1; flex: none; }
.hd-phan > .hd-dan { color: var(--bs-body-color); margin-bottom: 1.25rem; }
.hd-phan p, .hd-phan li { color: var(--bs-body-color); }
.hd-phan h3 { font-size: 1.1rem; color: var(--bs-heading-color); margin: 1.5rem 0 .6rem; }

.hd-buoc { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: buoc; display: grid; gap: .75rem; }
.hd-buoc > li { counter-increment: buoc; position: relative; padding-left: 3rem; min-height: 2.2rem; }
.hd-buoc > li::before { content: counter(buoc); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 700; }

.hd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.hd-the { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 1rem 1.1rem; background: var(--bs-body-bg); }
.hd-the h4 { font-size: 1rem; margin: 0 0 .35rem; color: var(--bs-heading-color); display: flex; align-items: center; gap: .5rem; }
.hd-the h4 i { color: var(--bs-primary); }
.hd-the p { margin: 0; font-size: .92rem; }

.hd-anh { margin: 1.25rem 0; }
.hd-anh a { display: block; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.hd-anh img { display: block; width: 100%; height: auto; }
.hd-anh figcaption { margin-top: .5rem; font-size: .88rem; color: var(--bs-body-color); }
.hd-luu-y { border-radius: var(--bs-border-radius); padding: .85rem 1.1rem; margin: 1rem 0; border: 1px solid var(--bs-warning-border-subtle); background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.hd-luu-y.hd-meo { border-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
/* ⚠️ Bộ chọn CON TRỰC TIẾP (>). Để `.hd-luu-y strong` trần thì MỌI chữ in đậm nằm trong thân
   khối cảnh báo cũng thành block và tự xuống dòng — câu văn bị xé làm ba đoạn, mà không có gì
   báo. Chỉ dòng TIÊU ĐỀ của khối (con trực tiếp) mới được xuống dòng. */
.hd-luu-y > strong { display: block; margin-bottom: .15rem; }
.hd-luu-y p, .hd-luu-y li { color: inherit; margin: 0; }

.hd-bang { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hd-bang th, .hd-bang td { padding: .6rem .8rem; border-bottom: 1px solid var(--bs-border-color); text-align: left; vertical-align: top; }
.hd-bang th { color: var(--bs-heading-color); background: var(--bs-body-bg); white-space: nowrap; }
.hd-cuon { overflow-x: auto; }

kbd.hd-phim { background: var(--bs-heading-color); color: var(--bs-body-bg); border-radius: 4px; padding: .1rem .4rem; font-size: .82rem; }

.hd-doi-menu { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: var(--bs-border-radius); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; font-size: .9em; white-space: nowrap; }

@media print {
    .hd-muc-luc, .hd-in-an { display: none !important; }
    .hd-khung { display: block; }
    .hd-phan { break-inside: avoid-page; }
}
    

/* ── Riêng trang trong khung ứng dụng (khu giáo viên) ────────────────────────────────────
   Khu công khai có navbar cao hơn; trong khung Sneat thì 5rem là vừa mép dưới thanh trên.
   Tiêu đề trang do layout in sẵn (`<h4 class="text-primary">@ViewData["Title"]</h4>`) nên
   trang KHÔNG in lại tên — in nữa là cùng một dòng chữ hiện hai lần cách nhau vài chục pixel
   (§3.12b). */
.hd-trong-app .hd-muc-luc { top: 5rem; }
.hd-trong-app .hd-phan { scroll-margin-top: 5rem; }