/* ==========================================================================
   CauHoiManager.css - giao diện soạn / xem câu hỏi của Scripts/PageJav/CauHoiManager.js
   Nạp trong Views/Shared/_Layout.cshtml (JS tự nạp nếu trang dùng layout khác).

   Tiền tố chm-. Markup vẫn giữ class cũ (c-*, itempanel, doanvan-item...) làm móc cho JS / màn khác,
   mọi luật đều nằm dưới .chm-root / .chm-modal... để thắng QLBaiHoc.css, HocOnline.css
   (2 file đó nạp sau, trong view) mà không cần !important.
   ========================================================================== */

.chm-root, .chm-modal, .chm-popup-editor, .chm-fab, .chm-tb {
    --chm-primary: #2563eb;
    --chm-primary-600: #1d4ed8;
    --chm-primary-soft: #eff6ff;
    --chm-primary-line: #bfdbfe;
    --chm-success: #16a34a;
    --chm-success-soft: #dcfce7;
    --chm-success-line: #86efac;
    --chm-danger: #dc2626;
    --chm-danger-soft: #fee2e2;
    --chm-danger-line: #fecaca;
    --chm-warning: #d97706;
    --chm-warning-soft: #fef3c7;
    --chm-violet: #7c3aed;
    --chm-violet-soft: #ede9fe;
    --chm-text: #1e293b;
    --chm-muted: #64748b;
    --chm-faint: #94a3b8;
    --chm-border: #e2e8f0;
    --chm-border-strong: #cbd5e1;
    --chm-bg: #f8fafc;
    --chm-card: #ffffff;
    --chm-radius: 12px;
    --chm-radius-sm: 8px;
    --chm-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .07);
    --chm-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
}

/* Màu theo loại câu (thẻ câu hỏi, nút thêm câu) và mức độ */
.chm-root [data-loai="TN4"] { --chm-loai: #2563eb; --chm-loai-soft: #eff6ff; }
.chm-root [data-loai="TN2"] { --chm-loai: #0891b2; --chm-loai-soft: #ecfeff; }
.chm-root [data-loai="TNDS"] { --chm-loai: #7c3aed; --chm-loai-soft: #f5f3ff; }
.chm-root [data-loai="TNNS"] { --chm-loai: #d97706; --chm-loai-soft: #fffbeb; }
.chm-root [data-loai="TL"] { --chm-loai: #059669; --chm-loai-soft: #ecfdf5; }
.chm-root [data-loai="DV"] { --chm-loai: #b45309; --chm-loai-soft: #fffbeb; }

.chm-root [data-mucdo="0"] { --chm-md: #94a3b8; --chm-md-soft: #f1f5f9; --chm-md-ink: #475569; }
.chm-root [data-mucdo="1"] { --chm-md: #0d9488; --chm-md-soft: #f0fdfa; --chm-md-ink: #0f766e; }
.chm-root [data-mucdo="2"] { --chm-md: #2563eb; --chm-md-soft: #eff6ff; --chm-md-ink: #1d4ed8; }
.chm-root [data-mucdo="3"] { --chm-md: #9333ea; --chm-md-soft: #faf5ff; --chm-md-ink: #7e22ce; }
.chm-root [data-mucdo="4"] { --chm-md: #dc2626; --chm-md-soft: #fef2f2; --chm-md-ink: #b91c1c; }

/* ---------- Khung chứa ---------- */
.chm-root {
    color: var(--chm-text);
    font-size: 14px;
}

    .chm-root .chm-item {
        margin: 0;
    }

/* ---------- Thẻ câu hỏi ---------- */
/* Gọn để hiện được nhiều câu trên màn hình: lề / khoảng cách nhỏ, vạch màu loại câu bên trái mảnh */
.chm-root .chm-cau {
    position: relative;
    margin: 3px 0;
    padding: 6px 10px 6px 12px;
    background: var(--chm-card);
    border: 1px solid var(--chm-border);
    border-radius: 10px;
    box-shadow: var(--chm-shadow);
    align-items: stretch;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .chm-root .chm-cau::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 0 2px 2px 0;
        background: var(--chm-loai, var(--chm-primary));
    }

    .chm-root .chm-cau:hover {
        border: 1px solid var(--chm-border-strong);
    }

    .chm-root .chm-cau:focus-within {
        border: 1px solid var(--chm-primary-line);
        box-shadow: 0 0 0 3px var(--chm-primary-soft), var(--chm-shadow);
    }

    .chm-root .chm-cau.chm-chon {
        border: 1px solid var(--chm-primary);
        background: #f8fbff;
        box-shadow: 0 0 0 2px var(--chm-primary-line);
    }

    .chm-root .chm-cau.chm-nhay {
        animation: chm-nhay 1.6s ease-out;
    }

@keyframes chm-nhay {
    0%, 30% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); }
    100% { box-shadow: var(--chm-shadow); }
}

/* Nội dung không xác định (sau khi nhận dạng đề) */
.chm-root .chm-cau.chm-kxd {
    border-color: var(--chm-danger-line);
    background: #fffafa;
    --chm-loai: var(--chm-danger);
}

/* ---------- Thanh tiêu đề câu / đoạn văn ---------- */
.chm-root .chm-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 5px;
    padding: 0;
    white-space: normal;
    border-radius: var(--chm-radius-sm);
    background: transparent;
    cursor: default;
}

.chm-root.chm-editable .chm-toolbar {
    cursor: move;
}

    .chm-root .chm-toolbar:hover {
        background: transparent;
    }

.chm-root .chm-head {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    height: 26px;
    margin: 0;
    padding: 0 10px 0 1px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: var(--chm-bg);
    box-shadow: none;
    color: var(--chm-text);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .chm-root .chm-head:hover {
        border-color: var(--chm-primary-line);
        background: var(--chm-primary-soft);
    }

    .chm-root .chm-head.c-select {
        border-color: var(--chm-primary);
        background: var(--chm-primary);
        background-image: none;
        color: #fff;
    }

        .chm-root .chm-head.c-select .chm-stt::before {
            content: "\f00c";
            margin-right: 5px;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 11px;
        }

        .chm-root .chm-head.c-select .chm-btn-collapse {
            color: #fff;
        }

.chm-root .chm-stt {
    font-size: 13px;
    white-space: nowrap;
}

.chm-root .chm-head-ic {
    margin: 0 4px 0 2px;
    font-size: 12px;
    opacity: .8;
}

.chm-root .chm-btn-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--chm-muted);
    font-size: 10px;
}

    .chm-root .chm-btn-collapse:hover, .chm-root .chm-btn-collapse:focus {
        border: 0;
        background: rgba(15, 23, 42, .06);
        box-shadow: none;
    }

.chm-root .chm-attrs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 4px 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

    .chm-root .chm-attrs:hover {
        border: 0;
    }

/* ---------- Nút thuộc tính (loại câu, mức độ, điểm...) ---------- */
.chm-root .chm-attr {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    min-width: 0;
    height: 26px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--chm-text);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

    .chm-root .chm-attr:hover {
        border-color: var(--chm-border-strong);
        background: var(--chm-bg);
    }

    .chm-root .chm-attr:focus, .chm-root .chm-attr:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    .chm-root .chm-attr > i, .chm-root .chm-attr-nd > i {
        font-size: 12px;
    }

/* nội dung trong nút: biểu tượng / chấm màu cách chữ */
.chm-root .chm-attr-nd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* tên đầy đủ / tên tắt (sp_HtmlLoai, sp_HtmlMucDo, sp_VeDiem): màn hình hẹp chỉ hiện tên tắt */
.chm-root .chm-ten-tat {
    display: none;
}

.chm-root .chm-caret {
    margin-left: 1px;
    font-size: 9px !important;
    opacity: .55;
}

.chm-root .chm-attr-xem, .chm-root .chm-attr-xem:hover {
    border-color: var(--chm-border);
    background: #fff;
    cursor: default;
}

.chm-root .chm-attr-loai, .chm-root .chm-attr-loai:hover {
    border-color: transparent;
    background: var(--chm-loai-soft, var(--chm-primary-soft));
    color: var(--chm-loai, var(--chm-primary));
    font-weight: 600;
}

    .chm-root .chm-attr-loai:hover {
        border-color: var(--chm-loai, var(--chm-primary));
    }

.chm-root .chm-attr-mucdo, .chm-root .chm-attr-mucdo:hover {
    border-color: transparent;
    background: var(--chm-md-soft);
    color: var(--chm-md-ink);
}

    .chm-root .chm-attr-mucdo:hover {
        border-color: var(--chm-md);
    }

/* câu tự luận không có mức độ */
.chm-root .chm-cau[data-loai="TL"] .chm-attr-mucdo {
    display: none;
}

.chm-root .chm-dot {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chm-md, var(--chm-faint));
}

/* Điểm: [★ 0.25 điểm][v] */
.chm-root .chm-attr-diem {
    gap: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.chm-root .chm-diem-main {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 6px 0 9px;
    border: 0;
    border-radius: 999px 0 0 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .chm-root .chm-diem-main > i {
        color: #f59e0b;
    }

    .chm-root .chm-diem-main b {
        font-weight: 700;
    }

.chm-root .chm-attr-xem .chm-diem-main {
    padding-right: 9px;
    cursor: default;
}

.chm-root .chm-diem-more {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 7px;
    border-left: 1px solid var(--chm-border);
    border-radius: 0 999px 999px 0;
    color: var(--chm-muted);
    font-size: 9px;
    cursor: pointer;
}

    .chm-root .chm-diem-more:hover, .chm-root .chm-diem-main:hover {
        background: rgba(15, 23, 42, .04);
    }

    .chm-root .chm-diem-more:focus {
        outline: none;
    }

.chm-root .chm-attr-huong {
    color: var(--chm-muted);
}

    .chm-root .chm-attr-huong.chm-on, .chm-root .chm-attr-huong.chm-on:hover {
        border-color: #fcd34d;
        background: var(--chm-warning-soft);
        color: #92400e;
    }

.chm-root .chm-attr-chude {
    max-width: 260px;
    color: var(--chm-muted);
}

    .chm-root .chm-attr-chude.chm-on {
        color: var(--chm-text);
    }

        .chm-root .chm-attr-chude.chm-on > i {
            color: var(--chm-primary);
        }

/* Thuộc tính chưa đặt thì chìm, đã đặt thì nổi: không mức độ, 0 điểm, tính điểm bình thường, không chủ đề
   => biểu tượng xám mờ + chữ mờ nhỏ, không viền, không nền; rê chuột mới rõ để biết vẫn nhấn được */
.chm-root .chm-attr-mucdo[data-mucdo="0"],
.chm-root .chm-attr-diem.chm-diem-trong,
.chm-root .chm-attr-huong:not(.chm-on),
.chm-root .chm-attr-chude:not(.chm-on) {
    border-color: transparent;
    background: transparent;
    color: var(--chm-faint);
    font-size: 11px;
    font-weight: 400;
}

    .chm-root .chm-attr-mucdo[data-mucdo="0"] > .chm-attr-nd .chm-dot, .chm-root .chm-attr-xem.chm-attr-mucdo[data-mucdo="0"] > .chm-dot,
    .chm-root .chm-attr-diem.chm-diem-trong .chm-diem-main > i,
    .chm-root .chm-attr-huong:not(.chm-on) .chm-attr-nd > i,
    .chm-root .chm-attr-chude:not(.chm-on) > i {
        color: var(--chm-faint);
        opacity: .6;
    }

    .chm-root .chm-attr-diem.chm-diem-trong .chm-diem-main b {
        font-weight: 400;
    }

    .chm-root .chm-attr-diem.chm-diem-trong .chm-diem-more {
        border-left-color: transparent;
        color: var(--chm-faint);
    }

    .chm-root .chm-attr-mucdo[data-mucdo="0"]:not(.chm-attr-xem):hover,
    .chm-root .chm-attr-diem.chm-diem-trong:not(.chm-attr-xem):hover,
    .chm-root .chm-attr-huong:not(.chm-on):not(.chm-attr-xem):hover,
    .chm-root .chm-attr-chude:not(.chm-on):hover {
        border-color: var(--chm-border);
        background: var(--chm-bg);
        color: var(--chm-muted);
    }

        .chm-root .chm-attr-mucdo[data-mucdo="0"]:hover > .chm-attr-nd .chm-dot,
        .chm-root .chm-attr-diem.chm-diem-trong:hover .chm-diem-main > i,
        .chm-root .chm-attr-huong:not(.chm-on):hover .chm-attr-nd > i,
        .chm-root .chm-attr-chude:not(.chm-on):hover > i {
            opacity: 1;
        }

        .chm-root .chm-attr-diem.chm-diem-trong:not(.chm-attr-xem):hover .chm-diem-more {
            border-left-color: var(--chm-border);
        }

.chm-root .chm-chude-ten {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chm-root .chm-attr-xoa {
    margin-left: auto;
    padding: 0 8px;
    border-color: transparent;
    background: transparent;
    color: var(--chm-faint);
}

    .chm-root .chm-attr-xoa:hover {
        border-color: var(--chm-danger-line);
        background: var(--chm-danger-soft);
        color: var(--chm-danger);
    }

.chm-root .chm-attr-dienkhuyet.chm-on, .chm-root .chm-attr-dienkhuyet.chm-on:hover {
    border-color: transparent;
    background: var(--chm-violet-soft);
    color: var(--chm-violet);
}

.chm-root .chm-attr-socau {
    color: var(--chm-muted);
}

.chm-root .chm-kxd-lydo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--chm-danger-soft);
    color: var(--chm-danger);
    font-size: 12px;
    font-style: italic;
}

.chm-root .chm-head.c-khongxacdinh {
    border-color: var(--chm-danger-line);
    background: var(--chm-danger-soft);
    background-image: none;
    color: var(--chm-danger);
}

/* ---------- Menu thả xuống (mở khi rê chuột hoặc nhấn / Tab vào nút) ---------- */
.chm-root .chm-dd {
    position: relative;
}

.chm-root .chm-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    min-width: 220px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--chm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--chm-shadow-lg);
    color: var(--chm-text);
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

    /* cầu nối để rê chuột từ nút xuống menu không bị đóng */
    .chm-root .chm-menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }

    .chm-root .chm-menu.chm-menu-phai {
        left: auto;
        right: 0;
    }

.chm-root .chm-dd:hover > .chm-menu, .chm-root .chm-dd:focus-within > .chm-menu {
    display: block;
}

.chm-root .chm-dd.chm-dd-tat > .chm-menu {
    display: none;
}

.chm-root .chm-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--chm-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

    .chm-root .chm-menu-item:hover {
        background: var(--chm-primary-soft);
        color: var(--chm-primary-600);
        text-decoration: none;
    }

    .chm-root .chm-menu-item > i {
        width: 16px;
        text-align: center;
        color: var(--chm-muted);
    }

    .chm-root .chm-menu-item:hover > i {
        color: inherit;
    }

    .chm-root .chm-menu-item small {
        margin-left: auto;
        padding-left: 14px;
        color: var(--chm-faint);
        font-size: 11.5px;
        font-weight: 400;
    }

    .chm-root .chm-menu-item kbd {
        margin-left: auto;
        padding: 1px 6px;
        border: 1px solid var(--chm-border);
        border-radius: 5px;
        background: var(--chm-bg);
        box-shadow: none;
        color: var(--chm-muted);
        font-family: inherit;
        font-size: 11px;
    }

    .chm-root .chm-menu-item.chm-menu-xoa, .chm-root .chm-menu-item.chm-menu-xoa > i {
        color: var(--chm-danger);
    }

        .chm-root .chm-menu-item.chm-menu-xoa:hover {
            background: var(--chm-danger-soft);
        }

.chm-root .chm-menu-nhom {
    padding: 7px 10px 3px;
    color: var(--chm-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.chm-root .chm-menu-sep {
    height: 1px;
    margin: 5px 4px;
    background: var(--chm-border);
}

/* ---------- Nội dung câu hỏi ---------- */
.chm-root .chm-body {
    padding-top: 0;
}

/* khung thân câu hỏi làm container để xếp đáp án theo bề rộng thật của câu (@container bên dưới) */
.chm-root .chm-cau > .chm-body {
    container-type: inline-size;
}

/* nền trắng: hình ảnh nền trắng chèn vào không bị lộ khung */
.chm-root .chm-noidung {
    display: block;
    width: 100%;
    min-height: 32px;
    margin: 5px 0 4px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--chm-radius-sm);
    background: #fff;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.chm-root.chm-editable .chm-noidung {
    border-color: var(--chm-border);
    background: #fff;
}

    .chm-root.chm-editable .chm-noidung:hover {
        border: 1px solid var(--chm-border-strong);
    }

    .chm-root.chm-editable .chm-noidung:focus {
        border: 1px solid var(--chm-primary-line);
        background: #fff;
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

.chm-root [data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--chm-faint);
    font-style: italic;
    pointer-events: none;
}

.chm-root .chm-noidung-xem {
    padding: 4px 2px 0;
    line-height: 1.5;
}

/* ---------- Đáp án ---------- */
.chm-root .chm-dapans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    width: 100%;
    margin: 0 0 2px;
}

.chm-root .chm-cau[data-loai="TNNS"] .chm-dapans {
    grid-template-columns: minmax(0, 1fr);
}

/* đáp án ngắn (sp_XetDapAnNgan): 4 đáp án trên 1 hàng khi câu đủ rộng, 2 cột khi hẹp */
@container (min-width: 640px) {
    .chm-root .chm-dapans.chm-dapans-ngan {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* câu hẹp (điện thoại đứng, khung soạn nhỏ): đáp án dài 1 cột */
@container (max-width: 520px) {
    .chm-root .chm-dapans:not(.chm-dapans-ngan) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chm-root .chm-dapan {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 2px 4px;
    border: 1px solid var(--chm-border);
    border-radius: var(--chm-radius-sm);
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .chm-root .chm-dapan:hover {
        border: 1px solid var(--chm-border-strong);
    }

    .chm-root .chm-dapan:focus-within {
        border: 1px solid var(--chm-primary-line);
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    /* đáp án đúng: chỉ viền xanh, giữ nền trắng (hình ảnh nền trắng không bị lộ khung) */
    .chm-root .chm-dapan.chm-dung, .chm-root .chm-dapan.chm-dung:hover {
        border: 1px solid var(--chm-success);
        background: #fff;
    }

    .chm-root .chm-dapan.chm-dung:focus-within {
        border: 1px solid var(--chm-success);
        box-shadow: 0 0 0 3px var(--chm-success-soft);
    }

.chm-root .chm-dapan-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.chm-root .chm-dapan-key {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--chm-border-strong);
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    color: var(--chm-muted);
    font-size: 12px;
    font-weight: 700;
    text-shadow: none;
    transform: none;
    animation: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .chm-root .chm-dapan-key:hover {
        border-color: var(--chm-success);
        box-shadow: none;
        color: var(--chm-success);
        transform: none;
    }

    .chm-root .chm-dapan-key:active {
        box-shadow: none;
        transform: scale(.92);
    }

    .chm-root .chm-dapan-key:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--chm-success-soft);
    }

    .chm-root .chm-dapan-key.c-dapandung {
        border-color: var(--chm-success);
        background: var(--chm-success);
        box-shadow: none;
        color: #fff;
        animation: chm-pop .25s ease;
    }

@keyframes chm-pop {
    0% { transform: scale(.8); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.chm-root:not(.chm-editable) .chm-dapan-key, .chm-root:not(.chm-editable) .chm-dapan-key:hover {
    cursor: default;
}

.chm-root .chm-cau[data-loai="TNNS"] .chm-dapan-key, .chm-root .chm-cau[data-loai="TNNS"] .chm-dapan-key:hover {
    width: auto;
    padding: 0 11px;
    border-color: transparent;
    border-radius: 999px;
    background: var(--chm-warning-soft);
    box-shadow: none;
    color: #92400e;
    cursor: default;
}

.chm-root .chm-dapan-nd {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 24px;
    padding: 1px 4px;
    border-radius: 6px;
    line-height: 1.45;
    outline: none;
    overflow-wrap: anywhere;
}

.chm-root.chm-editable .chm-dapan-nd:focus {
    background: #fff;
}

.chm-root .chm-dapan-lockbtn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chm-faint);
    font-size: 11px;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.chm-root .chm-dapan:hover .chm-dapan-lockbtn, .chm-root .chm-dapan-lockbtn:focus {
    opacity: 1;
}

.chm-root .chm-dapan-lockbtn:hover {
    background: var(--chm-bg);
    color: var(--chm-text);
}

.chm-root .chm-dapan-lockbtn.chm-on, .chm-root .chm-dapan-lockbtn.chm-on:hover {
    background: var(--chm-violet-soft);
    color: var(--chm-violet);
    opacity: 1;
}

.chm-root:not(.chm-editable) .chm-dapan-lockbtn {
    display: none;
}

    .chm-root:not(.chm-editable) .chm-dapan-lockbtn.chm-on {
        display: inline-flex;
        cursor: default;
    }

.chm-root .chm-cau[data-loai="TNNS"] .chm-dapan-lockbtn {
    display: none;
}

.chm-root .chm-ds {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    height: 22px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--chm-danger-line);
    border-radius: 999px;
    background: var(--chm-danger-soft);
    color: var(--chm-danger);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chm-root .chm-cau[data-loai="TNDS"] .chm-ds {
    display: inline-flex;
}

.chm-root .chm-ds.chm-on {
    border-color: var(--chm-success-line);
    background: var(--chm-success-soft);
    color: var(--chm-success);
}

.chm-root:not(.chm-editable) .chm-ds {
    cursor: default;
}

/* ---------- Bài giải ---------- */
.chm-root .chm-baigiai {
    margin-top: 4px;
}

.chm-root .chm-baigiai-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 6px;
    border: 1px dashed #bbf7d0;
    border-radius: var(--chm-radius-sm);
    background: #fff;
}

.chm-root .chm-baigiai-nhan {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    height: 22px;
    margin-top: 1px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--chm-success-soft);
    color: #166534;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.chm-root .chm-baigiai .chm-noidung, .chm-root.chm-editable .chm-baigiai .chm-noidung {
    min-height: 24px;
    margin: 0;
    padding: 1px 4px;
    border-color: transparent;
    background: transparent;
}

    .chm-root.chm-editable .chm-baigiai .chm-noidung:focus {
        background: #fff;
    }

.chm-root .chm-baigiai-xem {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.6;
}

/* ---------- Đoạn văn ---------- */
.chm-root .chm-doan {
    margin: 0;
}

.chm-root .chm-doan-card {
    position: relative;
    margin: 4px 0;
    padding: 6px 10px 6px 12px;
    border: 1px solid #f3e3b3;
    border-radius: 10px;
    background: #fffdf6;
    box-shadow: var(--chm-shadow);
}

    .chm-root .chm-doan-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        border-radius: 0 2px 2px 0;
        background: #f59e0b;
    }

    .chm-root .chm-doan-card:hover {
        border: 1px solid #e9cf86;
    }

    .chm-root .chm-doan-card:focus-within {
        border: 1px solid #e9cf86;
    }

.chm-root .chm-toolbar-doan:hover {
    background: transparent;
}

.chm-root .chm-head-doan {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

    .chm-root .chm-head-doan:hover {
        border-color: #fcd34d;
        background: #fde68a;
    }

.chm-root .chm-doan-noidung {
    display: block;
    width: 100%;
    min-height: 36px;
    margin: 5px 0;
    padding: 6px 10px;
    border: 1px solid #f3e3b3;
    border-radius: var(--chm-radius-sm);
    background: #fff;
    line-height: 1.55;
    outline: none;
}

.chm-root.chm-editable .chm-doan-noidung:hover {
    border: 1px solid #e9cf86;
}

.chm-root.chm-editable .chm-doan-noidung:focus {
    border: 1px solid #fcd34d;
    box-shadow: 0 0 0 3px #fef3c7;
}

.chm-root .chm-doan-caus {
    margin: 0 0 0 2px;
    padding: 0 0 0 8px;
    border-left: 1px dashed #ecd28c;
    border-radius: 0;
}

    .chm-root .chm-doan-caus:hover {
        border-color: #f3e3b3;
    }

/* ---------- Khung thêm câu hỏi / đoạn văn ----------
   Giữa 2 câu là nút "+ Thêm"; NHẤN nút mới mở bảng chọn loại câu (.chm-addslot-mo, sp_MoAddSlot), bảng mở phía dưới nút.
   Trước đây bảng hiện khi rê chuột / chạm, đè lên đúng chỗ vừa chạm nên trên điện thoại chạm 1 lần là thêm luôn câu hỏi. */
.chm-root .chm-addslot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12px;
    margin: 0;
}

    /* đường gạch nối 2 bên nút */
    .chm-root .chm-addslot::before {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        top: 50%;
        border-top: 1px dashed transparent;
        transition: border-color .15s ease;
    }

    .chm-root .chm-addslot:hover::before, .chm-root .chm-addslot.chm-addslot-mo::before {
        border-top-color: var(--chm-primary-line);
    }

    .chm-root .chm-addslot.chm-addslot-mo {
        z-index: 31;
    }

.chm-root .chm-addslot-nut {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 22px;
    min-width: 22px;
    margin: 0;
    padding: 0 9px 0 7px;
    border: 1px solid var(--chm-primary-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .12);
    color: var(--chm-primary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .chm-root .chm-addslot-nut > i {
        font-size: 10px;
        transition: transform .15s ease;
    }

    .chm-root .chm-addslot:hover .chm-addslot-nut, .chm-root .chm-addslot-nut:focus {
        opacity: 1;
    }

    .chm-root .chm-addslot-nut:hover, .chm-root .chm-addslot.chm-addslot-mo .chm-addslot-nut {
        border-color: var(--chm-primary);
        background: var(--chm-primary);
        color: #fff;
        opacity: 1;
    }

    .chm-root .chm-addslot-nut:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    /* đang mở: dấu + xoay thành × */
    .chm-root .chm-addslot.chm-addslot-mo .chm-addslot-nut > i {
        transform: rotate(45deg);
    }

/* bảng chọn loại câu: mở phía dưới nút, có mũi nhọn chỉ lên nút */
.chm-root .chm-addslot-bar {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    z-index: 30;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 8px);
    padding: 8px 10px;
    border: 1px solid var(--chm-primary-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--chm-shadow-lg);
    transform: translateX(-50%);
    animation: chm-addslot-hien .14s ease-out;
}

    .chm-root .chm-addslot-bar::before {
        content: '';
        position: absolute;
        left: 50%;
        top: -6px;
        width: 10px;
        height: 10px;
        border-top: 1px solid var(--chm-primary-line);
        border-left: 1px solid var(--chm-primary-line);
        background: #fff;
        transform: translateX(-50%) rotate(45deg);
    }

.chm-root .chm-addslot.chm-addslot-mo .chm-addslot-bar {
    display: flex;
}

@keyframes chm-addslot-hien {
    from { opacity: 0; margin-top: -4px; }
    to { opacity: 1; margin-top: 0; }
}

.chm-root .chm-addslot-dong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chm-faint);
    cursor: pointer;
}

    .chm-root .chm-addslot-dong:hover {
        background: var(--chm-bg);
        color: var(--chm-text);
    }

/* Khung thêm luôn hiện (cuối danh sách) */
.chm-root .chm-addslot.chm-addslot-luon {
    min-height: 0;
    padding: 8px 0 4px;
}

    .chm-root .chm-addslot.chm-addslot-luon::before {
        display: none;
    }

    .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-nut, .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-dong {
        display: none;
    }

    .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-bar {
        position: static;
        display: flex;
        width: 100%;
        max-width: none;
        padding: 8px 10px;
        border: 1px dashed var(--chm-primary-line);
        border-radius: var(--chm-radius);
        background: #f8fbff;
        box-shadow: none;
        transform: none;
        animation: none;
    }

        .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-bar::before {
            display: none;
        }

/* Khung thêm câu cuối đoạn văn: nút có chữ, luôn hiện; bảng mở phía dưới, canh trái */
.chm-root .chm-addslot.chm-addslot-gon {
    justify-content: flex-start;
    min-height: 30px;
    padding: 2px 0;
}

    .chm-root .chm-addslot.chm-addslot-gon::before {
        display: none;
    }

    .chm-root .chm-addslot.chm-addslot-gon .chm-addslot-nut {
        height: 26px;
        padding: 0 11px 0 9px;
        border-style: dashed;
        box-shadow: none;
        font-size: 12px;
        opacity: 1;
    }

    .chm-root .chm-addslot.chm-addslot-gon.chm-addslot-mo .chm-addslot-nut {
        border-style: solid;
    }

    .chm-root .chm-addslot.chm-addslot-gon .chm-addslot-bar {
        left: 0;
        top: calc(100% + 4px);
        justify-content: flex-start;
        transform: none;
    }

        .chm-root .chm-addslot.chm-addslot-gon .chm-addslot-bar::before {
            left: 22px;
            transform: rotate(45deg);
        }

/* màn hình cảm ứng (không rê chuột được): nút "+" giữa 2 câu luôn hiện, chạm vừa ngón tay */
@media (hover: none) {
    .chm-root .chm-addslot {
        min-height: 26px;
    }

        .chm-root .chm-addslot::before {
            border-top-color: var(--chm-border);
        }

    .chm-root .chm-addslot-nut {
        height: 24px;
        opacity: 1;
    }

    .chm-root .chm-addslot:not(.chm-addslot-gon) .chm-addslot-nhan {
        display: none;
    }

    .chm-root .chm-addslot:not(.chm-addslot-gon) .chm-addslot-nut {
        width: 24px;
        padding: 0;
    }
}

.chm-root .chm-addslot-tieude {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: var(--chm-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.chm-root .chm-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--chm-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .chm-root .chm-add-btn > i {
        color: var(--chm-loai, var(--chm-primary));
    }

    .chm-root .chm-add-btn:hover {
        border-color: var(--chm-loai, var(--chm-primary));
        background: var(--chm-loai-soft, var(--chm-primary-soft));
        color: var(--chm-loai, var(--chm-primary));
    }

    .chm-root .chm-add-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    .chm-root .chm-add-btn.chm-add-main {
        border-color: var(--chm-primary);
        background: var(--chm-primary);
        color: #fff;
        font-weight: 600;
    }

        .chm-root .chm-add-btn.chm-add-main > i {
            color: #fff;
        }

        .chm-root .chm-add-btn.chm-add-main:hover {
            border-color: var(--chm-primary-600);
            background: var(--chm-primary-600);
            color: #fff;
        }

.chm-root .chm-add-sep {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: var(--chm-border);
}

/* ---------- Thanh tổng quan (đầu danh sách) ---------- */
.chm-root .chm-tq {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 6px;
    padding: 5px 10px;
    border: 1px solid var(--chm-border);
    border-radius: var(--chm-radius);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--chm-shadow);
}

.chm-root .chm-tq-tt, .chm-root .chm-tq-chon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.chm-root .chm-tq-chon {
    display: none;
}

.chm-root .chm-tq.chm-tq-dangchon {
    border-color: var(--chm-primary-line);
    background: rgba(239, 246, 255, .98);
}

    .chm-root .chm-tq.chm-tq-dangchon .chm-tq-tt {
        display: none;
    }

    .chm-root .chm-tq.chm-tq-dangchon .chm-tq-chon {
        display: flex;
    }

.chm-root .chm-tq-so {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--chm-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

    .chm-root .chm-tq-so > i {
        align-self: center;
        font-size: 12px;
        opacity: .8;
    }

    .chm-root .chm-tq-so b {
        color: var(--chm-text);
        font-size: 16px;
        font-variant-numeric: tabular-nums;
    }

.chm-root .chm-tq-diem > i {
    color: #f59e0b;
    opacity: 1;
}

.chm-root .chm-tq-canhbao {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chm-root .chm-tq-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    background: var(--chm-warning-soft);
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .chm-root .chm-tq-chip.chm-tq-chip-do {
        border-color: var(--chm-danger-line);
        background: var(--chm-danger-soft);
        color: var(--chm-danger);
    }

    .chm-root .chm-tq-chip:hover {
        filter: brightness(.97);
    }

.chm-root .chm-tq-giua {
    flex: 1 1 auto;
}

.chm-root .chm-tq-btn, .chm-root .chm-tq-btn.chm-attr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--chm-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

    .chm-root .chm-tq-btn:hover {
        border-color: var(--chm-primary-line);
        background: var(--chm-primary-soft);
        color: var(--chm-primary-600);
    }

    .chm-root .chm-tq-btn > i {
        color: var(--chm-muted);
    }

    .chm-root .chm-tq-btn:hover > i {
        color: inherit;
    }

    .chm-root .chm-tq-btn.chm-tq-btn-ic {
        width: 28px;
        padding: 0;
        justify-content: center;
    }

    .chm-root .chm-tq-btn.chm-tq-btn-xoa, .chm-root .chm-tq-btn.chm-tq-btn-xoa > i {
        color: var(--chm-danger);
    }

        .chm-root .chm-tq-btn.chm-tq-btn-xoa:hover {
            border-color: var(--chm-danger-line);
            background: var(--chm-danger-soft);
        }

.chm-root .chm-tq-chon-so {
    color: var(--chm-primary-600);
    font-size: 13px;
    white-space: nowrap;
}

    .chm-root .chm-tq-chon-so b {
        font-size: 16px;
    }

.chm-root .chm-tq-nhom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chm-root .chm-tq-nhan {
    margin-right: 2px;
    color: var(--chm-muted);
    font-size: 12px;
}

.chm-root .chm-tq-md {
    height: 28px;
    min-width: 34px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--chm-md-soft);
    color: var(--chm-md-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .chm-root .chm-tq-md:hover {
        border-color: var(--chm-md);
    }

/* ---------- Trạng thái trống ---------- */
.chm-root .chm-cuoi {
    min-height: 140px;
}

.chm-root .chm-trong {
    max-width: 760px;
    margin: 18px auto 24px;
    padding: 24px 20px;
    border: 1px solid var(--chm-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--chm-shadow);
    text-align: center;
}

.chm-root .chm-trong-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: var(--chm-primary-soft);
    color: var(--chm-primary);
    font-size: 22px;
}

.chm-root .chm-trong-tieude {
    color: var(--chm-text);
    font-size: 17px;
    font-weight: 700;
}

.chm-root .chm-trong-mota {
    max-width: 560px;
    margin: 6px auto 16px;
    color: var(--chm-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.chm-root .chm-trong-nhom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.chm-root .chm-up-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--chm-border);
    border-radius: var(--chm-radius);
    background: #fff;
    color: var(--chm-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .chm-root .chm-up-btn:hover {
        border-color: var(--chm-primary-line);
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    .chm-root .chm-up-btn > i {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--chm-primary-soft);
        color: var(--chm-primary);
        font-size: 16px;
        line-height: 36px;
        text-align: center;
    }

    .chm-root .chm-up-btn b {
        display: block;
        font-size: 13.5px;
    }

    .chm-root .chm-up-btn small {
        display: block;
        margin-top: 2px;
        color: var(--chm-muted);
        font-size: 12px;
        line-height: 1.4;
    }

.chm-root .chm-trong-link {
    margin-top: 14px;
    font-size: 13px;
}

    .chm-root .chm-trong-link a {
        color: var(--chm-primary-600);
        font-weight: 600;
        cursor: pointer;
    }

.chm-root .chm-trong-xem {
    margin: 24px auto;
    padding: 16px;
    border-radius: var(--chm-radius);
    background: var(--chm-bg);
    color: var(--chm-muted);
    text-align: center;
}

/* ---------- Khung soạn thảo nâng cao + nút nổi ---------- */
.chm-popup-editor {
    overflow: hidden;
    border: 1px solid var(--chm-border);
    border-radius: var(--chm-radius);
    background: #fff;
    box-shadow: var(--chm-shadow-lg);
}

.chm-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
}

.chm-fab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--chm-primary);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}

    .chm-fab-btn:hover {
        background: var(--chm-primary-600);
        transform: translateY(-1px);
    }

/* ---------- Thanh công cụ (RenderToolbar, #div_SoanCauHoi_Bar) ----------
   Mỗi con trực tiếp là 1 nhóm nút (.chm-tb-nhomnut): QLBaiHoc_V2.css đặt padding / margin 0 !important cho con trực tiếp. */
.chm-tb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    .chm-tb .chm-tb-nhomnut {
        position: relative;
        display: inline-flex;
        align-items: stretch;
    }

    .chm-tb .chm-tb-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 34px;
        margin: 0;
        padding: 0 13px;
        border: 1px solid var(--chm-border-strong);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
        color: var(--chm-text);
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

        .chm-tb .chm-tb-btn > i {
            color: var(--chm-muted);
            font-size: 13px;
        }

        .chm-tb .chm-tb-btn:hover {
            border-color: var(--chm-faint);
            background: var(--chm-bg);
        }

        .chm-tb .chm-tb-btn:focus {
            position: relative;
            z-index: 1;
            outline: none;
            box-shadow: 0 0 0 3px var(--chm-primary-soft);
        }

        .chm-tb .chm-tb-btn.chm-tb-btn-ic {
            width: 34px;
            padding: 0;
            justify-content: center;
        }

    /* nút liền nhau trong 1 nhóm */
    .chm-tb .chm-tb-nhomnut > .chm-tb-btn + .chm-tb-btn {
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .chm-tb .chm-tb-nhomnut > .chm-tb-btn:not(:last-of-type) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .chm-tb .chm-tb-luu {
        border-color: var(--chm-success);
        background: var(--chm-success);
        color: #fff;
        font-weight: 600;
    }

        .chm-tb .chm-tb-luu > i {
            color: #fff;
        }

        .chm-tb .chm-tb-luu:hover {
            border-color: #15803d;
            background: #15803d;
        }

        /* có thay đổi chưa lưu (df_FlashControl thêm tvflash: chữ đỏ nhấp nháy) => nhịp viền nhẹ */
        .chm-tb .chm-tb-luu.tvflash {
            color: #fff !important;
            animation: chm-nhacluu 1.6s ease-in-out infinite;
        }

@keyframes chm-nhacluu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.chm-tb .chm-tb-thaydoi {
    border-color: #bbf7d0;
    background: var(--chm-success-soft);
    color: #15803d;
    font-weight: 600;
    gap: 4px;
}

    .chm-tb .chm-tb-thaydoi:hover {
        border-color: var(--chm-success-line);
        background: #bbf7d0;
    }

.chm-tb .chm-tb-caret {
    font-size: 9px !important;
    opacity: .6;
}

.chm-tb .chm-tb-menu {
    min-width: 280px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--chm-border);
    border-radius: 12px;
    box-shadow: var(--chm-shadow-lg);
}

.chm-tb .chm-tb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chm-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .chm-tb .chm-tb-item > i {
        width: 16px;
        color: var(--chm-muted);
        text-align: center;
    }

    .chm-tb .chm-tb-item:hover {
        background: var(--chm-primary-soft);
        color: var(--chm-primary-600);
    }

        .chm-tb .chm-tb-item:hover > i {
            color: inherit;
        }

    .chm-tb .chm-tb-item.chm-tb-item-xoa, .chm-tb .chm-tb-item.chm-tb-item-xoa > i {
        color: var(--chm-danger);
    }

        .chm-tb .chm-tb-item.chm-tb-item-xoa:hover {
            background: var(--chm-danger-soft);
        }

.chm-tb .chm-tb-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--chm-border);
}

.chm-tb .chm-tb-nhom {
    align-self: stretch;
    padding: 6px 10px 2px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

/* ---------- Hộp thoại ---------- */
.chm-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: var(--chm-shadow-lg);
    color: var(--chm-text);
}

.chm-modal .modal-header {
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--chm-border);
    background: #fff;
}

.chm-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--chm-text);
    font-size: 16px;
    font-weight: 700;
}

.chm-modal .chm-modal-ic {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--chm-primary-soft);
    color: var(--chm-primary);
    font-size: 14px;
}

.chm-modal .modal-body {
    padding: 16px 18px;
    font-size: 14px;
}

.chm-modal .modal-footer {
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--chm-border);
    background: var(--chm-bg);
}

    .chm-modal .modal-footer > * {
        margin: 0;
    }

.chm-modal.chm-modal-chia .modal-dialog {
    max-width: 560px;
}

.chm-modal.chm-modal-hd .modal-dialog {
    max-width: 940px;
}

.chm-modal .chm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--chm-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--chm-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .chm-modal .chm-btn:hover {
        background: var(--chm-bg);
    }

    .chm-modal .chm-btn.chm-btn-primary {
        border-color: var(--chm-primary);
        background: var(--chm-primary);
        color: #fff;
    }

        .chm-modal .chm-btn.chm-btn-primary:hover {
            border-color: var(--chm-primary-600);
            background: var(--chm-primary-600);
        }

.chm-modal .chm-btn.chm-btn-sm {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12.5px;
}

.chm-modal .chm-label {
    display: block;
    margin: 0 0 6px;
    color: var(--chm-text);
    font-size: 13px;
    font-weight: 600;
}

.chm-modal .chm-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--chm-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--chm-text);
    font-size: 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .chm-modal .chm-input:focus {
        border-color: var(--chm-primary);
        box-shadow: 0 0 0 3px var(--chm-primary-soft);
    }

    .chm-modal .chm-input.chm-input-loi {
        border-color: var(--chm-danger);
        box-shadow: 0 0 0 3px var(--chm-danger-soft);
    }

.chm-modal .chm-input-lg {
    height: 46px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.chm-modal .chm-mota {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--chm-primary-soft);
    color: #1e3a8a;
    font-size: 13px;
}

.chm-modal .chm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.chm-modal .chm-chip {
    flex: 1 1 auto;
    min-width: 48px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--chm-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .chm-modal .chm-chip:hover {
        border-color: var(--chm-primary-line);
        background: var(--chm-primary-soft);
        color: var(--chm-primary-600);
    }

.chm-modal .chm-help {
    margin-top: 12px;
    color: var(--chm-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

    .chm-modal .chm-help > i {
        margin-right: 4px;
        color: #f59e0b;
    }

.chm-modal .chm-loi {
    display: none;
    margin-top: 8px;
    color: var(--chm-danger);
    font-size: 12.5px;
    font-weight: 600;
}

/* Chia điểm */
.chm-modal .chm-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.chm-modal .chm-seg-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1.5px solid var(--chm-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .chm-modal .chm-seg-item input {
        margin-top: 3px;
    }

    .chm-modal .chm-seg-item b {
        display: block;
        font-size: 13.5px;
    }

    .chm-modal .chm-seg-item small {
        display: block;
        color: var(--chm-muted);
        font-size: 12px;
    }

    .chm-modal .chm-seg-item.chm-on {
        border-color: var(--chm-primary);
        background: var(--chm-primary-soft);
    }

.chm-modal .chm-cd-pane {
    display: none;
}

    .chm-modal .chm-cd-pane.chm-on {
        display: block;
    }

.chm-modal .chm-cd-dong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--chm-border);
}

    .chm-modal .chm-cd-dong:last-of-type {
        border-bottom: 0;
    }

.chm-modal .chm-cd-ten {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
}

    .chm-modal .chm-cd-ten small {
        color: var(--chm-muted);
        font-weight: 400;
    }

.chm-modal .chm-cd-kq {
    grid-column: 1 / -1;
    color: var(--chm-muted);
    font-size: 12px;
}

    .chm-modal .chm-cd-kq b {
        color: var(--chm-primary-600);
    }

.chm-modal .chm-cd-tong {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--chm-bg);
    font-size: 13.5px;
}

    .chm-modal .chm-cd-tong b {
        font-size: 16px;
    }

/* Tỷ lệ điểm đúng sai */
.chm-modal .chm-tyso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

    .chm-modal .chm-tyso label {
        margin: 0;
        color: var(--chm-muted);
        font-size: 12px;
        text-align: center;
    }

    .chm-modal .chm-tyso .chm-input {
        margin-top: 4px;
        padding: 0 6px;
        text-align: center;
    }

/* Chủ đề */
.chm-modal .chm-chude-dong {
    display: flex;
    gap: 8px;
}

    .chm-modal .chm-chude-dong > .select2, .chm-modal .chm-chude-dong > select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .chm-modal .chm-chude-dong .chm-btn {
        flex: 0 0 auto;
        height: 38px;
    }

/* Đoạn văn có sẵn: _body là .tvgrid (1 dòng 100%), thêm dòng ghi chú nên phải chia lại dòng và cho lưới chiều cao */
.chm-modal .chm-dvcs {
    grid-template-rows: min-content minmax(0, 1fr);
    height: 62vh;
    min-height: 360px;
}

    .chm-modal .chm-dvcs > [id^="fgDoanVanGrid_"] {
        height: 100%;
        min-height: 0;
        border: 1px solid var(--chm-border);
        border-radius: 10px;
        overflow: hidden;
    }

    .chm-modal .chm-dvcs .wj-cell img {
        max-width: 100%;
        max-height: 160px;
    }

/* Upload đề */
.chm-modal .chm-up-chon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

    .chm-modal .chm-up-chon .btn-updechitiet {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        height: 100%;
        padding: 12px 14px;
        border: 1px solid var(--chm-border);
        border-radius: 12px;
        background: #fff;
        color: var(--chm-text);
        text-align: left;
        white-space: normal;
    }

        .chm-modal .chm-up-chon .btn-updechitiet:hover {
            border-color: var(--chm-primary-line);
            background: var(--chm-primary-soft);
            box-shadow: none;
        }

        .chm-modal .chm-up-chon .btn-updechitiet > i {
            color: var(--chm-primary);
            font-size: 18px;
        }

        .chm-modal .chm-up-chon .btn-updechitiet small {
            color: var(--chm-muted);
            font-size: 12px;
        }

/* Hướng dẫn */
.chm-modal .chm-hd {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    min-height: 440px;
}

.chm-modal .chm-hd-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 12px;
    border-right: 1px solid var(--chm-border);
}

    .chm-modal .chm-hd-nav button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--chm-muted);
        font-size: 13.5px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

        .chm-modal .chm-hd-nav button > i {
            width: 18px;
            text-align: center;
        }

        .chm-modal .chm-hd-nav button:hover {
            background: var(--chm-bg);
            color: var(--chm-text);
        }

        .chm-modal .chm-hd-nav button.chm-on {
            background: var(--chm-primary-soft);
            color: var(--chm-primary-600);
        }

.chm-modal .chm-hd-pane {
    display: none;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
    font-size: 13.5px;
    line-height: 1.65;
}

    .chm-modal .chm-hd-pane.chm-on {
        display: block;
    }

    .chm-modal .chm-hd-pane h6 {
        margin: 0 0 10px;
        color: var(--chm-text);
        font-size: 15px;
        font-weight: 700;
    }

    .chm-modal .chm-hd-pane p {
        margin: 0 0 8px;
    }

    .chm-modal .chm-hd-pane ul {
        margin: 0 0 10px;
        padding-left: 20px;
    }

    .chm-modal .chm-hd-pane li {
        margin-bottom: 4px;
    }

    .chm-modal .chm-hd-pane kbd {
        padding: 1px 6px;
        border: 1px solid var(--chm-border-strong);
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 1px 0 var(--chm-border-strong);
        color: var(--chm-text);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
    }

.chm-modal .chm-hd-buoc {
    counter-reset: chm-buoc;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

    .chm-modal .chm-hd-buoc li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 38px;
    }

        .chm-modal .chm-hd-buoc li::before {
            counter-increment: chm-buoc;
            content: counter(chm-buoc);
            position: absolute;
            left: 0;
            top: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--chm-primary);
            color: #fff;
            font-size: 13px;
            font-weight: 700;
        }

.chm-modal .chm-hd-luuy {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 3px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    background: #fffbeb;
    color: #78350f;
}

.chm-modal .chm-hd-meo {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 3px solid var(--chm-primary);
    border-radius: 0 10px 10px 0;
    background: var(--chm-primary-soft);
    color: #1e3a8a;
}

.chm-modal .chm-hd-bang {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--chm-border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}

    .chm-modal .chm-hd-bang th, .chm-modal .chm-hd-bang td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--chm-border);
        vertical-align: top;
    }

    .chm-modal .chm-hd-bang th {
        background: var(--chm-bg);
        color: var(--chm-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .chm-modal .chm-hd-bang tr:last-child td {
        border-bottom: 0;
    }

.chm-modal .chm-hd-tag {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 1px 9px;
    border: 1px solid var(--chm-border);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-style: italic;
}

.chm-modal .chm-hd-loai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Thống kê câu hỏi (ThongKeCauHoi) ---------- */
.ch-tk { color: #1f2937; font-size: 13px; text-align: left; }
.ch-tk b { font-weight: 700; }
.ch-tk-tong { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ch-tk-tong > div { background: #f3f6fb; border-radius: 10px; padding: 10px 12px; }
.ch-tk-tong span { display: block; font-size: 12px; color: #6b7280; }
.ch-tk-tong b { display: block; font-size: 22px; line-height: 1.3; color: #111827; }
.ch-tk-nhom { border-top: 1px solid #eef0f3; padding-top: 10px; margin-bottom: 12px; }
.ch-tk-tieude { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.ch-tk-tieude small { text-transform: none; font-weight: 400; letter-spacing: 0; }
.ch-tk-loai { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ch-tk-icon { flex: 0 0 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ch-tk-loai-ten { flex: 1 1 auto; min-width: 0; }
.ch-tk-loai-dong { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ch-tk-loai-dong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-tk-thanh { height: 6px; border-radius: 3px; background: #eef0f3; overflow: hidden; }
.ch-tk-thanh > div { height: 100%; border-radius: 3px; }
.ch-tk-pt { flex: 0 0 46px; text-align: right; font-size: 12px; color: #6b7280; }
.ch-tk-rong { opacity: .45; }
.ch-tk-thanh-mucdo { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #eef0f3; margin-bottom: 8px; }
.ch-tk-thanh-rong { flex: 1; font-size: 11px; line-height: 12px; text-align: center; color: #9ca3af; }
.ch-tk-ds-mucdo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; }
.ch-tk-mucdo { display: flex; align-items: center; gap: 6px; }
.ch-tk-mucdo b { margin-left: auto; }
.ch-tk-cham { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.ch-tk-ds-tyso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ch-tk-tyso { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; text-align: center; }
.ch-tk-tyso span { display: block; font-size: 11px; color: #6b7280; }
.ch-tk-tyso b { font-size: 15px; color: #7c3aed; }
.ch-tk-ghichu { font-size: 12px; color: #b45309; background: #fffbeb; border-radius: 8px; padding: 6px 10px; }

/* ---------- Giới hạn độ dài nội dung ---------- */
.c-vuot-gioihan {
    outline: 2px dashed #dc3545 !important;
    outline-offset: 2px;
}

/* ---------- Kéo thả (sp_KeoTha_*) ---------- */
.c-keotha { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 auto; width: 20px; min-height: 26px; margin-right: -2px; border-radius: 8px; color: #b6c0cc; cursor: grab; user-select: none; }
.c-toolbar:hover > .c-keotha { color: #2563eb; background-color: #eff6ff; }
.c-toolbar-doan:hover > .c-keotha { color: #b45309; background-color: #fef3c7; }
.c-keotha-doan:empty { display: flex; align-items: center; justify-content: center; border: 1px dashed #f3e3b3; border-radius: 10px; }
.c-keotha-doan:empty::before { content: 'Chưa có câu hỏi - kéo câu hỏi thả vào đây để đưa vào đoạn văn'; color: #a8916a; font-size: 12px; font-style: italic; }
.c-dang-keo .c-addslot, .c-dang-keo .c-cauhoi > .c-noidung, .c-dang-keo .c-noidung-doanvan, .c-dang-keo .chm-tq { display: none !important; }
.c-dang-keo .c-toolbar-doan + .c-noidung { display: block !important; }
.c-keo-cauhoi .c-keotha-doan { background-color: #eff6ff; box-shadow: inset 3px 0px 0px #2563eb; }
.c-keo-doanvan .c-keotha-doan { opacity: 0.6; }
.c-keotha-placeholder { height: 36px; margin: 4px 0px; border: 2px dashed #2563eb; border-radius: 12px; background-color: #eff6ff; display: flex; align-items: center; justify-content: center; }
.c-keotha-placeholder::after { content: 'Thả vào vị trí này'; color: #2563eb; font-size: 12px; font-weight: 600; }
.c-keotha-doan > .c-keotha-placeholder { background-color: #dbeafe; }
.c-keotha-doan > .c-keotha-placeholder::after { content: 'Thả vào đoạn văn này'; }
.c-keo-doanvan .c-keotha-placeholder { border-color: #d97706; background-color: #fffbeb; }
.c-keo-doanvan .c-keotha-placeholder::after { content: 'Thả đoạn văn vào vị trí này'; color: #b45309; }
body.ch-dang-keo iframe { pointer-events: none !important; }
.c-dang-keo .ui-sortable-helper { background-color: white; border-radius: 12px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); opacity: 0.95; z-index: 1000; }
.c-keotha-vuadoi { animation: ch-keotha-vuadoi 1.5s ease-out; border-radius: 12px; }
@keyframes ch-keotha-vuadoi { 0% { background-color: #c8f0d8; box-shadow: 0px 0px 0px 2px #28a745; } 100% { background-color: transparent; box-shadow: 0px 0px 0px 0px transparent; } }

/* ---------- Màn hình hẹp / điện thoại ----------
   - ≤ 768px (điện thoại đứng, máy tính bảng nhỏ): thẻ câu gọn hơn, nhãn tắt (4 ĐA, NB, ★ 1), đáp án dài 1 cột, đáp án ngắn 2 cột
   - menu thuộc tính hiện dạng tấm dưới đáy màn hình (không tràn ra ngoài cạnh phải)
   - điện thoại xoay ngang (chiều cao ≤ 500px): bỏ thanh dính, hộp thoại vừa chiều cao màn hình */
@media (max-width: 768px) {
    .chm-root .chm-dapans:not(.chm-dapans-ngan) {
        grid-template-columns: minmax(0, 1fr);
    }

    .chm-root .chm-cau, .chm-root .chm-doan-card {
        padding: 5px 6px 5px 9px;
        border-radius: 8px;
    }

    .chm-root .chm-doan-caus {
        margin-left: 0;
        padding-left: 5px;
    }

    .chm-root .chm-an-hep {
        display: none;
    }

    .chm-root .chm-ten-dai {
        display: none;
    }

    .chm-root .chm-ten-tat {
        display: inline;
    }

    .chm-root .chm-attr-chude {
        max-width: 130px;
    }

        /* chưa có chủ đề: nút tròn chỉ có biểu tượng */
        .chm-root .chm-attr-chude:not(.chm-on) {
            justify-content: center;
            width: auto;
            aspect-ratio: 1;
            padding: 0;
        }

    .chm-root .chm-tq {
        position: static;
    }

    .chm-root .chm-addslot-bar {
        max-width: calc(100vw - 32px);
    }

    .chm-root .chm-dapan-lockbtn {
        opacity: 1;
    }

    /* khung thêm cuối danh sách: 1 hàng, vuốt ngang để xem các loại câu khác */
    .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-bar::-webkit-scrollbar {
            display: none;
        }

        .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-bar > * {
            flex: 0 0 auto;
        }

    .chm-root .chm-addslot.chm-addslot-luon .chm-addslot-tieude {
        display: none;
    }

    /* thanh thao tác hàng loạt: 1 hàng vuốt ngang */
    .chm-root .chm-tq-chon {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .chm-root .chm-tq-chon > * {
            flex: 0 0 auto;
        }

    .chm-tb {
        gap: 4px;
    }

        .chm-tb .notmobile {
            display: none;
        }

        .chm-tb .chm-tb-btn {
            height: 32px;
            padding: 0 10px;
        }

            .chm-tb .chm-tb-btn.chm-tb-btn-ic {
                width: 32px;
            }

        .chm-tb .chm-tb-menu {
            max-width: calc(100vw - 24px);
        }

    .chm-fab {
        right: 12px;
        bottom: 12px;
    }

    .chm-fab-btn {
        width: 40px;
        height: 40px;
    }

    .chm-modal .chm-hd {
        grid-template-columns: minmax(0, 1fr);
    }

    .chm-modal .chm-hd-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 0 8px;
        border-right: 0;
        border-bottom: 1px solid var(--chm-border);
    }

        .chm-modal .chm-hd-nav button {
            width: auto;
            white-space: nowrap;
        }

    .chm-modal .chm-seg {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* menu thuộc tính dạng tấm dưới đáy màn hình: điện thoại đứng và xoay ngang */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .chm-root .chm-menu, .chm-root .chm-menu.chm-menu-phai {
        position: fixed;
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        z-index: 1060;
        min-width: 0;
        max-height: 60vh;
        margin: 0;
        overflow-y: auto;
        border-radius: 14px;
        white-space: normal;
    }

        .chm-root .chm-menu::before {
            display: none;
        }

    .chm-root .chm-menu-item {
        padding: 10px 12px;
    }
}

/* màn hình cảm ứng: nút chạm vừa ngón tay nhưng vẫn gọn */
@media (pointer: coarse) {
    .chm-root .chm-attr {
        height: 28px;
    }

    .chm-root .chm-dapan-key {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
    }

    .chm-root .chm-btn-collapse {
        width: 26px;
        height: 26px;
    }
}

/* điện thoại xoay ngang: ít chiều cao, không giữ thanh dính, hộp thoại vừa màn hình */
@media (max-height: 500px) {
    .chm-root .chm-tq {
        position: static;
    }

    .chm-modal .modal-dialog {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .chm-modal .modal-header {
        padding: 8px 14px;
    }

    .chm-modal .modal-footer {
        padding: 6px 14px;
    }

    .chm-modal .modal-body {
        max-height: calc(100vh - 112px);
        overflow-y: auto;
    }

    .chm-modal .chm-dvcs {
        height: calc(100vh - 130px);
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    .chm-root .chm-attr {
        padding: 0 7px;
    }

    .chm-root .chm-head {
        padding-right: 8px;
    }

    .chm-root .chm-noidung {
        padding: 4px 6px;
    }

    .ch-tk-tong b { font-size: 18px; }
    .ch-tk-ds-tyso { grid-template-columns: repeat(2, 1fr); }
    .chm-modal .chm-tyso { grid-template-columns: repeat(2, 1fr); }
}