/* DeChePro — sửa giao diện TRANG HỌC trên điện thoại.
   Hội đồng agent id 9c004bf448 — 3/3 phiếu APPROVE kèm sửa (2026-09-18).
   Trace-ID: 20260918-1930-dechepro-mobile-css

   LUẬT CỦA TỆP NÀY — đọc trước khi thêm dòng:
   1. MỌI quy tắc phải nằm TRONG `@media (max-width: 640px)`.
      Viết một dòng ra ngoài là làm hỏng bản máy tính đang chạy tốt.
   2. Tệp này nạp SAU CÙNG trong `web/index.html` (sau `dcp-energy.css`),
      nên không cần `!important` — thứ tự nạp đủ để đè.
   3. Không đổi bộ màu, không đổi kích thước chữ trên máy tính,
      không chạm `.dcp-lang-pill` (nâng nó làm vỡ thanh đầu trang).
   4. Trần 150 dòng. Hết chỗ thì tách tệp mới, không nhồi thêm.

   SỐ ĐO TRƯỚC KHI SỬA (Chrome 147 headless, 390×844, tài khoản 0900000111):
   - `.muc-title` chỉ rộng 117,7px  ->  9/9 mục bị cắt cụt thành "Bài giảng — đ…"
     (công thức: 228,0 − 17 − 17 − 40,0 − 8,3 − 2×14 = 117,7)
   - `.exbox .top` thiếu `flex-wrap`  ->  tiêu đề vỡ 4 dòng, nhãn `Chưa làm` chồng chữ
   - `.mod-tab` cao 41px  ->  thiếu 3px so với chuẩn cảm ứng 44px
   - máy tính 1440px: `.muc-title` rộng 1063,7px, 0/9 bị cắt  ->  KHÔNG ĐƯỢC ĐỔI
*/

@media (max-width: 640px) {

  /* ---- Lỗi 1: tên mục bị cắt cụt ----------------------------------------
     Không bỏ hẳn giới hạn (tên dài nhất 61 ký tự sẽ chiếm 4 dòng, nuốt màn hình).
     Cho xuống tối đa 2 dòng: đủ đọc 95% tên mục, thẻ vẫn đều nhịp 64-72px.
     `.muc-head` đã có `align-items:center` và icon/mũi tên đều `flex-shrink:0`
     nên tiêu đề 2 dòng KHÔNG làm lệch trục — đã soi `dechepro.css:300-310`. */
  .muc-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
  }

  /* Cùng bệnh, cùng thuốc: tiêu đề bài ở thẻ đã khoá (`dechepro.css:359`). */
  .bai-card.locked .bai-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
  }

  /* ---- Lỗi 2: hộp "BÀI TẬP" vỡ 4 dòng, nhãn chồng chữ --------------------
     `styles.css:94` xếp ngang `justify-content:space-between` mà thiếu
     `flex-wrap`, nên ở 390px tiêu đề bị ép còn 81px và gãy nát.
     Xếp dọc: tiêu đề một dòng riêng, nhãn trạng thái xuống dưới. */
  .exbox .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .exbox .top b {
    font-size: 14.5px;
    line-height: 1.35;
  }
  .exbox .top .badge {
    align-self: flex-start;
    white-space: nowrap;
  }

  /* Bớt 5 tầng đệm lồng nhau để hộp bài tập có thêm chỗ thở.
     Trước: `.muc-body` 18px mỗi bên (`dechepro.css:311`). */
  .muc-body { padding: 8px 10px 16px; }
  .bai-body { padding: 4px 10px 18px; }

  /* ---- Lỗi 3 + 4: hai nút nổi và chip dự án che nội dung -----------------
     KHÔNG ẩn nút "Hỗ trợ học tập" — đó là phao cứu sinh của học viên
     không quen công nghệ. KHÔNG dịch nút (dễ vỡ logic mở bảng trò chuyện).
     Chỉ nới đáy để nội dung tự nổi lên trên các nút khi cuộn hết trang.
     `:has(.bai-card)` khoá đúng khung trang học — trang bán không có thẻ này,
     nên chân trang bán KHÔNG bị nới. Trình duyệt cũ không hiểu `:has()`
     thì quy tắc tự bỏ qua, không gây lỗi. */
  .wrap-wide:has(.bai-card) { padding-bottom: 96px; }

  /* ---- Nút nhỏ hơn chuẩn cảm ứng 44px -----------------------------------
     Chỉ nâng 2 nút không có rủi ro bố cục. CỐ Ý KHÔNG chạm:
     - `.dcp-lang-pill` (VI/EN/中文, 21px): nâng lên làm phình thanh đầu trang.
     - nút `×` 22px của cửa sổ mời đăng ký: nâng sẽ phá góc bo của thẻ. */
  .mod-tab { min-height: 44px; }
  .tutor-send { min-height: 44px; }

  /* Nút đóng bảng AI Tutor: giữ nguyên cỡ chữ `×`, chỉ nới vùng chạm. */
  .tutor-panel__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}