@charset "UTF-8";
/* =============================================================
 * Popup Câu hỏi thường gặp, mở từ menu tài khoản.
 *
 * Lớp phủ tự viết thay vì dùng modal của Bootstrap: hai bố cục
 * (renew/layout.jsp và adminLayout.jsp) nạp bootstrap.js ở những
 * thời điểm khác nhau, còn share/renew/js/faq.js chỉ cần thêm/bớt
 * lớp .is-open nên chạy giống nhau ở cả hai nơi.
 *
 * Bên trong lớp phủ vẫn dùng đúng bộ lớp .modal-content /
 * .modal-header / .modal-body / .modal-footer / .close / .btn của
 * hộp xác nhận dùng chung (common/confirmPopup.jsp) - đây chỉ là
 * lớp trình bày, không cần bootstrap.js - nhờ đó popup thừa hưởng
 * luôn cả phần ánh xạ chế độ tối đã có sẵn trong dark-mode.css.
 * Phần dưới chỉ lặp lại đúng những tinh chỉnh mà confirmPopup.jsp
 * đang đặt bằng thuộc tính style để hai hộp thoại khớp nhau.
 * ============================================================= */

/* z-index phải vượt 999999 - mức cao nhất đang dùng trong site.min.css -
   nhưng vẫn dưới 88888888 của lớp phủ chờ (progressSpinnerBackdrop). */
.faq-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    background-color: rgba(17, 24, 39, .55);
}

.faq-overlay.is-open {
    display: flex;
}

/* Khoá cuộn nền để bánh xe chuột lăn trong danh sách câu hỏi, không lăn trang phía sau */
body.faq-open {
    overflow: hidden;
}

/* Nền, viền, bo góc và bố cục dọc đã do .modal-content lo; ở đây chỉ
   giới hạn kích thước và cắt phần thừa để bo góc không bị đè. */
.faq-dialog {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

/* --- Đầu và chân hộp thoại: theo đúng confirmPopup.jsp --- */
.faq-dialog .modal-header {
    padding-right: 32px;
    border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
}

.faq-dialog .modal-title {
    font-size: 20px;
    font-weight: bold;
}

.faq-dialog .close {
    padding: 0;
}

.faq-dialog .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}

.faq-dialog .modal-footer .btn {
    height: 40px;
    font-size: 16px;
}

/* --- Danh sách câu hỏi --- */
.faq-dialog .modal-body {
    overflow-y: auto;
    padding: var(--space-2, 8px) 20px;
}

.faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-entry + .faq-entry {
    border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}

/* Cả dòng câu hỏi là một <button> để bấm chỗ nào cũng mở được và
   vẫn dùng được bàn phím; phải xoá nền/viền mặc định của nút. */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: var(--space-4, 16px) 0;
    font-size: var(--font-size-h5, 16px);
    line-height: var(--font-line-h5, 24px);
    font-weight: 600;
    text-align: left;
    color: var(--color-text-primary, #111827);
    background: none;
    border: 0;
    cursor: pointer;
}

.faq-question:hover .faq-question-text {
    color: var(--brand-primary, #B9000E);
}

/* Mũi tên vẽ bằng viền thay vì dùng font icon để không phụ thuộc
   bộ icon nào đang được nạp; xoay 180 độ khi câu hỏi đang mở. */
.faq-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: var(--space-1, 4px);
    border-right: 2px solid var(--color-text-muted, #6B7280);
    border-bottom: 2px solid var(--color-text-muted, #6B7280);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}

.faq-entry.is-open .faq-chevron {
    transform: translateY(2px) rotate(-135deg);
}

/* Đóng/mở bằng max-height để có chuyển động mượt. Giá trị 600px chỉ là
   trần đủ rộng cho câu trả lời dài nhất, không phải chiều cao thật. */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.faq-entry.is-open .faq-answer {
    max-height: 600px;
}

.faq-answer-text {
    margin: 0;
    padding: 0 22px var(--space-4, 16px) 0;
    font-size: var(--font-size-body, 14px);
    line-height: 22px;
    color: var(--color-text-secondary, #4B5563);
}

@media (max-width: 575px) {
    .faq-dialog .modal-header,
    .faq-dialog .modal-body,
    .faq-dialog .modal-footer {
        padding-left: var(--space-4, 16px);
        padding-right: var(--space-4, 16px);
    }
}