/* ==========================================================================
   question-colors.css  -  8 MÀU NỀN CARD HỎI-ĐÁP (dùng chung)  [2026-07-22]
   --------------------------------------------------------------------------
   Đúng bảng "questionPalette" của trang chủ (V2Home.aspx). Card Hỏi-Đáp ở
   /cau-hoi dùng CHUNG 8 màu này -> cùng chất liệu với trang chủ.
   Chọn màu theo id bài (id % 8) nên mỗi câu hỏi luôn giữ một màu.

   ⚠ Đây là NGUỒN MÀU cho card Hỏi-Đáp ở khu Cộng đồng.
     Trang chủ hiện vẫn tự khai 8 màu này trong V2Home.aspx (questionPalette).
     Muốn đổi màu: sửa CẢ HAI nơi cho khớp. Gộp về một nguồn để đợt làm
     backend (khi đó V2Home đọc chung file này).

   ⚠ Xưa card Hỏi-Đáp đổi HÌNH (nền ảnh). Nay đổi MÀU (nền solid) - theo
     đúng ý: một câu hỏi = một màu, không phải một tấm ảnh.
   ========================================================================== */

/* Card Hỏi-Đáp: chỉ còn ô màu + câu hỏi, chữ trắng */
.cq-qcard { border-radius: 16px; overflow: hidden; }

/* ⚠ Site.css đặt ".guest-item-idea { margin-bottom:30px }" -> ô màu cách nhau
   theo CHIỀU DỌC 20 (gap lưới) + 30 (margin này) = 50, trong khi CHIỀU NGANG
   chỉ 20. Bỏ margin này -> dọc = ngang = 20, đều bốn phía. */
.cq-qcard .guest-item-idea,
.cq-qcard.guest-item-idea { margin-bottom: 0 !important; }
.cq-qcard .wrap-desc,
.cq-qcard .desc,
.cq-qcard .social-box,
.cq-qcard .control,
.cq-qcard .sep10 { display: none !important; }

/* ⚠ ĐẶC HIỆU: phải mạnh hơn rule ".cq-community-v2__grid .guest-item .img.table"
   (4 class, có !important, đặt padding 14/16 + min-height 0 cho card ảnh thường).
   Nên thêm ".wrap-img" + "a" -> 0,4,1 > 0,4,0, thắng chắc mọi thứ tự nạp. */
.cq-qcard .wrap-img a.img,
.cq-qcard .wrap-img a.img.table {
    display: flex !important;
    flex-direction: column !important;   /* chữ chảy từ trên xuống */
    align-items: flex-start !important;
    justify-content: flex-start !important; /* neo mép trên, không canh giữa */
    min-height: 84px !important;         /* sàn nhẹ cho câu 1 dòng; KHÔNG ép cao -> đáy đều */
    padding: 24px 24px 40px !important;  /* đáy 40px chừa đều nhau mọi card, không dư */
    background-image: none !important;   /* bỏ nền ảnh cũ */
    border-radius: 16px !important;
    text-decoration: none;
}

.cq-qcard .img table,
.cq-qcard .img tr,
.cq-qcard .img td {
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    padding: 0 !important;
    height: auto !important;
}

.cq-qcard .img img { display: none !important; }   /* nếu bài có ảnh -> bỏ, chỉ dùng màu */

/* 8 màu - đúng questionPalette trang chủ.
   ⚠ background-color + !important: luật ".cq-qcard .img.table" (3 class) mạnh
     hơn ".cq-qbg-N" (1 class), nên phải !important thì màu mới áp. Dùng
     background-COLOR (không phải shorthand) để không đụng background-image. */
.cq-qbg-0 { background-color: #5F8C3A !important; }   /* xanh lá (thương hiệu) */
.cq-qbg-1 { background-color: #2F8A76 !important; }   /* xanh ngọc */
.cq-qbg-2 { background-color: #2E7B96 !important; }   /* xanh biển */
.cq-qbg-3 { background-color: #4A5FA5 !important; }   /* chàm */
.cq-qbg-4 { background-color: #7C4C93 !important; }   /* tím */
.cq-qbg-5 { background-color: #A8465F !important; }   /* hồng đất */
.cq-qbg-6 { background-color: #B25A38 !important; }   /* đỏ cam */
.cq-qbg-7 { background-color: #8A7A32 !important; }   /* ô liu */