/*
 * Module Câu hỏi thường gặp (hoi-dap) — phần CSS riêng của module; các thành phần chung dùng hệ thống mn-* của giao
 * diện (mn.css): mn-pagehead, mn-filter, mn-section, mn-accordion (<details>), mn-prose, mn-badge, mn-btn, mn-notice,
 * mn-meta, mn-files, mn-newslist. Tệp này chỉ chứa bố cục riêng của danh sách câu hỏi, trang riêng của một câu hỏi và
 * block "Câu hỏi thường gặp" (mọi lớp mang tiền tố hoi-dap-).
 */

/* ----- Thanh chuyên mục ----- */
.hoi-dap-cats {
    margin: 0 0 var(--mn-space-4);
}

.hoi-dap-cats__num {
    display: inline-block;
    min-width: 1.75em;
    margin-left: 2px;
    padding: 0 7px;
    border-radius: var(--mn-radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--mn-blue-800);
    font-size: var(--mn-text-xs);
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.hoi-dap-cats .mn-btn--secondary .hoi-dap-cats__num {
    background: var(--mn-blue-50);
}

/* ----- Bộ lọc: ô chọn cơ sở đủ rộng cho tên dài nhất ("Phân hiệu Thanh Bình") ----- */
.hoi-dap-filter__coso {
    flex-basis: 240px;
}

/* ----- Nút mở / thu gọn tất cả ----- */
.hoi-dap-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--mn-space-3);
}

.hoi-dap-tools:empty,
.hoi-dap-tools > [hidden] {
    display: none;
}

/* ----- Nhóm câu hỏi theo chuyên mục ----- */
.hoi-dap-group {
    margin-bottom: var(--mn-space-6);
}

/* ----- Một câu hỏi (details.mn-accordion) ----- */
.hoi-dap-item {
    scroll-margin-top: 16px;
}

.hoi-dap-item__head {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.hoi-dap-item__question {
    overflow-wrap: anywhere;
}

.hoi-dap-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: 400;
}

.hoi-dap-item__badges:empty {
    display: none;
}

/* Câu hỏi được mở từ liên kết neo (#cau-hoi-<id>): viền nhấn để người đọc nhận ra */
.hoi-dap-item:target {
    border-color: var(--mn-blue-600);
    box-shadow: 0 0 0 3px var(--mn-blue-100);
}

.hoi-dap-item__answer {
    max-width: none;
}

.hoi-dap-basis {
    margin: var(--mn-space-3) 0 0;
    padding: 10px 14px;
    border-left: 4px solid var(--mn-yellow-400);
    border-radius: 0 var(--mn-radius-sm) var(--mn-radius-sm) 0;
    background: var(--mn-yellow-50);
    color: var(--mn-ink-700);
    font-size: var(--mn-text-sm);
    overflow-wrap: anywhere;
}

.hoi-dap-item__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: var(--mn-space-4);
    padding-top: var(--mn-space-3);
    border-top: 1px dashed var(--mn-line);
}

.hoi-dap-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0;
    color: var(--mn-ink-600);
    font-size: var(--mn-text-sm);
}

.hoi-dap-item__actions {
    margin: 0;
}

.hoi-dap-block .hoi-dap-item__actions {
    margin-top: var(--mn-space-3);
}

/* ----- Trang riêng của một câu hỏi ----- */

/* Liên kết nằm trong câu thông báo ("Xem bản cập nhật", "Xem bản trước"): vùng chạm cao 44px mà chiều cao dòng không đổi */
.hoi-dap-notices a {
    display: inline-block;
    margin: -11px 0;
    padding: 11px 0;
}

.hoi-dap-answer {
    margin: 0 0 var(--mn-space-5);
}

.hoi-dap-meta {
    margin: 0 0 var(--mn-space-5);
}

.hoi-dap-files-old {
    margin-top: var(--mn-space-4);
}

.hoi-dap-back {
    margin: var(--mn-space-5) 0 0;
}

.hoi-dap-related,
.hoi-dap-contact {
    margin-top: var(--mn-space-6);
}

/* ----- Block "Câu hỏi thường gặp" ----- */
.hoi-dap-block__all {
    margin: var(--mn-space-4) 0 0;
}

@media (max-width: 575.98px) {
    .hoi-dap-item__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Nút không viền: kéo về thẳng lề với chữ khi các nút xếp chồng trên điện thoại */
    .hoi-dap-item__anchor {
        margin-left: -14px;
    }

    .hoi-dap-tools {
        justify-content: flex-start;
    }
}

/* ----- In: mọi câu trả lời đều hiện (hoi-dap.js mở các khối <details> trước khi in) ----- */
@media print {
    .hoi-dap-item__foot {
        border-top: 0;
        padding-top: 0;
    }

    .hoi-dap-cats,
    .hoi-dap-tools {
        display: none !important;
    }

    /* Mũi tên mở/đóng không có nghĩa trên giấy */
    .hoi-dap-item > summary::after {
        display: none;
    }
}