/* Tùy chỉnh thanh cuộn (Scrollbar) hiện đại */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

@media (min-width: 640px) {
    ::-webkit-scrollbar { 
        width: 8px; 
        height: 8px; 
    }
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* Lớp tiện ích để ẩn thanh cuộn nhưng vẫn cuộn được */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* --------------------------------------------------- */
/* CSS hỗ trợ tính năng Kéo thả (Drag & Drop) câu hỏi  */
/* --------------------------------------------------- */

.q-item-drag {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: pan-y; 
}

.drag-handle {
    touch-action: none;
    /* Đảm bảo touch target đủ lớn theo chuẩn WCAG (44x44px) */
    min-width: 36px;
    min-height: 36px;
}

.dragging-item {
    opacity: 0.4;
    transform: scale(0.98);
    background-color: #eff6ff !important;
    border-style: dashed !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
    z-index: 50;
}

.drag-over-top { 
    border-top: 4px solid #3b82f6 !important; 
}

.drag-over-bottom { 
    border-bottom: 4px solid #3b82f6 !important; 
}

/* --------------------------------------------------- */
/* Ảnh và Bảng responsive trong khung xem trước câu hỏi */
/* --------------------------------------------------- */

/* Ảnh không tràn ra ngoài khung câu hỏi, giữ tỉ lệ gốc */
.q-text img, .option img, .explanation img,
.question img, #qList img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 6px auto;
}

/* Bảng: không giãn toàn chiều ngang, cuộn ngang khi cần */
.q-text table, .explanation table,
.question table, #qList table {
    border-collapse: collapse;
    width: auto !important;
    max-width: 100%;
}

/* Wrapper cuộn ngang cho bảng */
.q-text div[style*="overflow-x"],
.question div[style*="overflow-x"] {
    max-width: 100%;
}

/* Ô bảng: xuống dòng đúng, không kéo giãn hàng */
.q-text td, .q-text th,
.question td, .question th {
    white-space: normal !important;
    overflow-wrap: break-word;
    min-width: 60px;
}

/* --------------------------------------------------- */
/* Chống tràn văn bản và ngắt chữ đúng quy tắc         */
/* --------------------------------------------------- */
.q-text, .explanation, .option, .match-item, .cw-grid, .tf-col-text {
    max-width: 100%;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* --------------------------------------------------- */
/* Xử lý công thức Toán/Hóa học (MathJax) đúng chuẩn   */
/* --------------------------------------------------- */

/* Chỉ áp dụng thanh cuộn ngang cho công thức ĐỨNG ĐỘC LẬP (Block math) khi quá dài */
mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: block !important;
    margin: 15px 0 !important;
    padding: 8px 0 !important;
}

/* Các công thức chèn TRONG DÒNG (Inline math) — để MathJax tự căn chỉnh baseline */
mjx-container:not([display="true"]) {
    display: inline-block !important;
    max-width: 100%;
    overflow: visible !important;
}

/* Mũi tên co giãn (xrightarrow, xleftrightarrow...) không bị ngắn khi có text trên/dưới */
mjx-stretchy-h {
    min-width: 3em;
}

/* Tùy chỉnh thanh cuộn ngang cho công thức block để trông gọn hơn */
mjx-container[display="true"]::-webkit-scrollbar {
    height: 4px;
}
mjx-container[display="true"]::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 10px;
}

/* Ưu tiên các cửa sổ cảnh báo nổi lên trên cùng */
.fixed.inset-0 {
    z-index: 999999 !important;
}

/* Cố định cột Đúng/Sai chống tràn trên Mobile */
.tf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tf-row { display: flex; width: 100%; }
.tf-col-text { flex: 1; min-width: 0; overflow-x: auto; overflow-wrap: break-word; }
.tf-col-radio { width: 50px; min-width: 50px; text-align: center; flex-shrink: 0; z-index: 10; }

/* Đường nối ghép đôi */
.match-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}
.match-item {
    position: relative;
    z-index: 10;
}

/* --------------------------------------------------- */
/* Toolbar buttons: đảm bảo touch target đủ lớn        */
/* --------------------------------------------------- */
#editorToolbar button, #editorToolbarEdit button {
    min-height: 32px;
}
@media (max-width: 639px) {
    #editorToolbar button, #editorToolbarEdit button {
        min-height: 36px;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* --------------------------------------------------- */
/* Modal: padding bottom an toàn cho iPhone Home Bar   */
/* --------------------------------------------------- */
.modal-content {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Căn lề chuẩn in ấn PDF (A4 margin) ngay trên giao diện tạo đề nếu người dùng in trang này */
@media print {
    body { padding: 20mm !important; margin: 0 !important; background: #fff !important; }
    header, .sidebar, #editorToolbar, #tabsContainer, button { display: none !important; }
    .quiz-wrapper { margin: 0; padding: 0; display: block; max-width: 100%; }
    .main-content { width: 100%; display: block; max-width: 100%; }
}