/* Trang hướng dẫn — theo layout Điều khoản (sidebar + card nội dung) */
.user-guide-page {
    line-height: 1.65;
}

.user-guide-page .user-guide-section-block {
    scroll-margin-top: 88px;
}

.user-guide-page .user-guide-section-block a {
    text-decoration: none;
}

.user-guide-page .user-guide-section-block a:hover {
    text-decoration: underline;
}

.user-guide-page .nav-link {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.user-guide-page .nav-link:hover {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
}

.user-guide-page .table {
    font-size: 14px;
}

.user-guide-page .table th {
    background: var(--bs-light);
    font-weight: 600;
}

.user-guide-page .fs-20 {
    font-size: 1.25rem;
}

@media (max-width: 991.98px) {
    .user-guide-page .sticky-top {
        position: relative !important;
        top: 0 !important;
    }
}


/* ===== Noi dung trang Huong dan (soan bang CKEditor o Trung tam dieu hanh) =====
   Phai tu dinh nghia, khong dua vao mac dinh cua trinh duyet: site Hoc vien dung
   Tailwind - lop reset cua no xoa co danh sach, co tieu de va duong ke bang, nen
   HTML soan ra hien thanh mot khoi chu phang neu khong co day style nay.
   Rieng anh PHAI co max-width: anh chup man hinh rong 2000-2400px, de nguyen thi
   trang bi cuon ngang. (16/09/2026) */
.hd-noi-dung {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #334155;
    overflow-wrap: break-word;
}

.hd-noi-dung h2 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.hd-noi-dung h3 {
    margin: 1.25rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.hd-noi-dung p {
    margin: 0.6rem 0;
}

.hd-noi-dung ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0.6rem 0;
}

.hd-noi-dung ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin: 0.6rem 0;
}

.hd-noi-dung li {
    margin: 0.25rem 0;
}

.hd-noi-dung strong {
    color: #0f172a;
    font-weight: 700;
}

.hd-noi-dung a {
    color: #2563eb;
}

.hd-noi-dung code {
    background: #f1f5f9;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.hd-noi-dung figure {
    margin: 1.1rem 0;
    max-width: 100%;
}

.hd-noi-dung img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.1rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
}

.hd-noi-dung table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.hd-noi-dung th,
.hd-noi-dung td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

.hd-noi-dung th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
}

/* ----- Bo cuc muc: huy hieu so + the tung muc (giu lai tu ban trang tinh cu) ----- */
.hd-so {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.hd-mo-dau p {
    margin: 0.35rem 0;
}

.hd-muc {
    scroll-margin-top: 88px;
}

/* Anh chup man hinh rong 2000-2400px. Chan o 760px va can giua: de tran ca khung thi
   chu quanh no bi day ra, doc mat mach, ma chi tiet trong anh cung khong ro hon.
   Bam vao anh mo ban day du o tab moi - xem ghi chu trong trang huong dan. */
.hd-noi-dung img {
    max-width: min(100%, 760px);
    margin-left: auto;
    margin-right: auto;
    cursor: zoom-in;
}

.hd-noi-dung figure {
    text-align: center;
}

.hd-noi-dung figcaption {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
}

/* ----- Lop phu phong to anh (js/hd-zoom-anh.js) ----- */
.hd-zoom-lop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.92);
    overflow: hidden;
    overscroll-behavior: contain;
}

.hd-zoom-lop.hien {
    display: flex;
}

.hd-zoom-anh {
    max-width: 92vw;
    max-height: 88vh;
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.hd-zoom-lop.dang-keo .hd-zoom-anh {
    cursor: grabbing;
}

.hd-zoom-thanh {
    position: absolute;
    top: 1rem;
    right: 1rem;
    /* Anh duoc scale() nen tao tang xep chong rieng va ve de len phan tu dung truoc no
       trong DOM. Khong khai z-index o day thi phong to len la thanh dieu khien bi anh
       che mat. */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    /* Nen TOI DAC chu khong phai trang mo: anh chup man hinh phan lon la nen trang, phong
       to len la no nam ngay sau thanh nay - nen mo thi cac nut bien mat. */
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hd-zoom-thanh button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.hd-zoom-thanh button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hd-zoom-thanh button[data-hd="goc"] {
    width: auto;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.hd-zoom-muc {
    min-width: 3.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

body.hd-zoom-khoa-cuon {
    overflow: hidden;
}

/* Bao cho nguoi dung biet anh bam duoc */
.hd-noi-dung img:hover {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}