/* ══════════════════════════════════════════════════════════════════════════
   the-cau-hoi.css — THANH ĐỎ ĐẦU THẺ CÂU HỎI (19/08/2026, Thầy đặt hàng)

   VIỆC NÀY LÀM GÌ
   ───────────────
   Thầy thích kiểu thẻ chữ nhật bên Kho xây dựng (`.kxd-the-cau`): một THANH ĐỎ
   #9A1F3C chạy hết bề ngang, trong thanh là "Câu N", mức độ và nút thao tác;
   phần còn lại nằm dưới. Nay đồng bộ kiểu đó sang hai Ngân hàng (lý thuyết và
   bài tập), CẢ màn giáo viên lẫn màn học sinh.

   Khác Kho xây dựng ĐÚNG MỘT ĐIỂM (Thầy chốt): thân thẻ ở đây giữ NỀN TRẮNG,
   không đổi sang nền hồng #FDEBF1.

   Trong thanh có gì:
     · học sinh  → Câu N · mức độ · nút sao
     · giáo viên → Câu N · mức độ · nút phân dạng · ô chọn câu

   VÌ SAO LÀM BẰNG CSS, KHÔNG ĐỔI CẤU TRÚC HTML
   ─────────────────────────────────────────────
   `.q-title-row-v2` nằm ở hai độ sâu khác nhau tuỳ màn hình:
       giáo viên : .question-card-v2 > .q-header-v2 > div > .q-title-row-v2
       học sinh  : .question-card-v2 > .q-header-v2 > .q-title-row-v2
   và có tới sáu khối `@media` trong style.css/teacher.css đang bám vào đúng
   những tên đó (kể cả `:has(> .q-checkbox-v2)`). Dời DOM là phải rà lại hết.
   Thay vào đó cho hàng tiêu đề TRÀN VIỀN bằng lề âm — cả hai độ sâu đều cho ra
   một kết quả, vì lớp bọc giữa (`div` của màn giáo viên) không có đệm riêng.

   ⚠ ĐỆM THẺ KHÔNG CỐ ĐỊNH 24px. Nó là 15px ở ≤480px, và 12px hai bên với thẻ
     nằm trong chùm ở ≤640px. Nếu ghi cứng -24px thì thanh sẽ thò ra hoặc thụt
     vào ở đúng những khổ đó. Vì vậy đệm được khai báo thành BIẾN (--the-dem /
     --the-dem-x) và các khối @media chỉ việc đặt lại biến.

   ⚠ File này phải nạp SAU style.css và teacher.css: nhiều rule ở đó đặt
     `margin-bottom: 10px !important` cho chính hàng tiêu đề.
   ══════════════════════════════════════════════════════════════════════════ */

.question-card-v2 {
    --the-dem: 24px;    /* đệm trên/dưới của thẻ */
    --the-dem-x: 24px;  /* đệm hai bên  */
    --the-bo: 15px;     /* bo góc trong của thanh (bo thẻ 16px trừ 1px viền) */
}

/* ── THANH ĐỎ ─────────────────────────────────────────────────────────────
   ⚠⚠ PHẢI KÈM HAI BỘ CHỌN `.bank-panel …` VÀ `.content-page …` — SỬA 19/08/2026
   (Thầy báo: "thanh đỏ không chiếm hoàn toàn bề ngang của khung câu hỏi").

   style.css:5904 có sẵn rule:

       .bank-panel   .question-card-v2 .q-title-row-v2,
       .content-page .question-card-v2 .q-title-row-v2 { width: 100% !important; … }

   Ba lớp ⇒ độ cụ thể (0,3,0), CAO HƠN `.question-card-v2 .q-title-row-v2`
   (0,2,0) của ta. Nên `width: 100%` của nó thắng, và đó chính là thứ chặn lề
   âm bên phải: lề âm bên TRÁI chỉ dời hộp sang trái nên vẫn ăn, còn lề âm bên
   PHẢI thì chỉ NỞ hộp ra — mà hộp đã bị ghim cứng ở đúng 100% bề ngang, không
   nở được. Kết quả: thanh lệch hẳn sang trái, thò ra bên trái và thụt vào bên
   phải đúng bằng bề rộng đệm thẻ.

   Vì vậy khối này lặp lại đủ ba bộ chọn để độ cụ thể không thấp hơn, và đặt
   `width: auto` trả quyền quyết định bề ngang lại cho hai lề âm. */
.bank-panel .question-card-v2 .q-title-row-v2,
.content-page .question-card-v2 .q-title-row-v2,
.question-card-v2 .q-title-row-v2 {
    background: #9A1F3C !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    /* Tràn ra sát viền thẻ, rồi chừa 14px trước phần thân */
    width: auto !important;
    margin: calc(-1 * var(--the-dem)) calc(-1 * var(--the-dem-x)) 14px !important;
    padding: 7px 14px !important;
    border-radius: var(--the-bo) var(--the-bo) 0 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    min-height: 34px;
    box-sizing: border-box;
}

/* CÓ THỨ GÌ ĐỨNG TRƯỚC KHỐI TIÊU ĐỀ THÌ THANH KHÔNG CÒN Ở ĐỈNH THẺ.
   Khi ấy phải bỏ lề âm phía trên và bỏ bo góc, nếu không thanh trèo đè lên nó.

   ⚠ Cố ý viết theo `:not(:first-child)` chứ KHÔNG kể tên từng thứ có thể đứng
     trước. Hiện đã có ít nhất hai thứ như vậy — dải "nghi trùng" (App.daiNghiTrung)
     và dải cảnh báo riêng của Kho Access Pass — và danh sách đó chắc chắn còn
     dài ra. Kể tên từng cái là chỉ cần thêm một dải mới ở đâu đó, thanh đỏ lại
     lặng lẽ trèo đè lên nó mà không ai biết.

   Lưu ý: `daiNghiTrung` trả về CHUỖI RỖNG khi câu không nghi trùng, mà chuỗi
   rỗng không tạo phần tử nào — nên thẻ bình thường vẫn có `.q-header-v2` là
   con đầu tiên và vẫn được tràn viền như thường. */
.question-card-v2 > .q-header-v2:not(:first-child) .q-title-row-v2 {
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* "Câu N:" — bỏ gạch chân, đổi sang chữ trắng */
.question-card-v2 .q-title-row-v2 .q-id-v2 {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

/* Huy hiệu mức độ giữ nguyên màu vốn có (xanh/vàng/cam/đỏ) — chúng đủ tương
   phản trên nền đỏ sẫm; chỉ thêm viền sáng cho tách nền. */
.question-card-v2 .q-title-row-v2 .q-difficulty-container { margin: 0 !important; }

.question-card-v2 .q-title-row-v2 .q-difficulty-v2 {
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Bảng chọn mức độ bung xuống từ thanh: nâng chồng lớp để không bị thân thẻ đè */
.question-card-v2 .q-title-row-v2 .difficulty-menu { z-index: 40 !important; }

/* Cụm nút bên phải (phân dạng + ô chọn câu) */
.question-card-v2 .q-title-row-v2 .q-title-tools {
    margin-left: auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.question-card-v2 .q-title-row-v2 .q-checkbox-v2 {
    accent-color: #fff;
    width: 17px;
    height: 17px;
    cursor: pointer;
    /* Bỏ định vị tuyệt đối mà khối @media ≤640px của style.css đặt vào: ô tick
       nay có chỗ đàng hoàng ngay trong thanh, không cần ghim vào góc thẻ nữa. */
    position: static !important;
    margin: 0 !important;
}

/* ── NÚT SAO (màn học sinh) ─────────────────────────────────────────────── */
.question-card-v2 .q-title-row-v2 .the-sao {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.question-card-v2 .q-title-row-v2 .the-sao .material-icons-round {
    font-size: 22px;
}

/* ── THÂN THẺ: GIỮ NỀN TRẮNG ────────────────────────────────────────────── */
/* (Khác Kho xây dựng — bên đó thân nền hồng. Thầy chốt giữ trắng ở đây.) */
.question-card-v2 { background: #fff; }

/* Thẻ nghi trùng vẫn được đổi nền cảnh báo — không đụng tới. */

/* ── DỌN NHỮNG RULE CŨ NAY THÀNH THỪA ───────────────────────────────────── */
@media (max-width: 640px) {
    /* style.css chừa 34px bên phải khối tiêu đề để nhường chỗ cho ô tick ghim
       góc. Ô tick nay nằm trong thanh nên khoảng chừa đó chỉ làm lệch thanh. */
    .question-card-v2 > .q-header-v2 { padding-right: 0 !important; }

    /* Thẻ trong chùm bị bóp đệm hai bên còn 12px */
    .chum-lon .question-card-v2 { --the-dem-x: 12px; --the-bo: 11px; }
}

@media (max-width: 480px) {
    .question-card-v2 {
        --the-dem: 15px;
        --the-dem-x: 15px;
    }

    .question-card-v2 .q-title-row-v2 {
        padding: 6px 11px !important;
        font-size: 14px !important;
        gap: 7px !important;
    }
}