/* ══════════════════════════════════════════════════════════════════════════
   cam-xuc-bl.css — (L749 · M.948 §D4) CẢM XÚC TRÊN BÌNH LUẬN.

   🔴 VÌ SAO MỘT TỆP RIÊNG, ⛔ chép khối `.bl-cx-*` vào hai tệp trang:
      khối này chạy ở HAI trang nằm ở hai tệp CSS khác nhau (`doc-chuong.css` và
      `chi-tiet-truyen.css`). Chép là đẻ bản thứ hai — lần sau ai sửa một bên thì bên kia
      trôi (§9 MỘT NGUỒN). Tiền lệ y hệt trong repo: `combo.css` · `review-truyen.css` ·
      `hoa-lenh.css` đều là tệp dùng chung nạp bởi nhiều trang.
   ⛔ đặt vào `nhip.css`: tệp đó CHỈ khai trục DỌC cho mọi trang (xem đầu tệp đó),
      ⛔ phải chỗ chứa kiểu dáng của một thành phần.
   ⛔ `:root` · ⛔ reset · ⛔ padding dọc · ⛔ mã màu tay ngoài hai dải token (§9 kiến trúc CSS).

   🔴 Khối luật TRẦN là bản TỐI — có `:hover` là ĐÚNG chỗ. Bản sáng tự thích ứng qua token
      (nếp `tin-nhan.css` M.668); ⛔ đặt `:hover` trong vùng [data-nen="sang"] (cổng L459).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hàng chip + nút mở khay đứng CHUNG một dòng, xuống dòng được khi hẹp ── */
.bl-cx{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.bl-cx-hang{display:flex;gap:4px;flex-wrap:wrap;align-items:center}

/* ── Chip đếm. `button` khi thả được, `span` khi chỉ xem (§D5) — CÙNG hình dạng ── */
.bl-cx-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;
  border:1px solid var(--n30);border-radius:999px;background:var(--v10);
  font-size:var(--fs-small);line-height:1.7;color:inherit}
button.bl-cx-chip{cursor:pointer}
.bl-cx-chip b{font-weight:600;font-size:var(--fs-small)}
button.bl-cx-chip:hover{background:var(--v15)}
/* 🔴 Chip CỦA MÌNH ⛔ phân biệt bằng MÀU KHÔNG: viền đậm + nền đậm + `aria-pressed` có CHỮ
   trong aria-label (§9 «màu ⛔ đứng một mình»). */
.bl-cx-chip[data-minh="1"]{border-color:var(--v70);background:var(--v20)}

/* Chỉ dấu «còn N loại khác» — nhãn trạng thái, ⛔ nút (⛔ cursor:pointer, ⛔ hover) */
.bl-cx-du{font-size:var(--fs-small);color:var(--n60);padding:1px 4px}

/* ── Nút mở khay + khay 6 emoji ──────────────────────────────────────────
   <details> vì nó mở được bằng BÀN PHÍM và bằng CHẠM mà ⛔ cần JS (§9 ⛔ nút chết).
   Mũi tên mặc định của <summary> gỡ ở CẢ HAI cú pháp: WebKit cần ::-webkit-details-marker. */
.bl-cx-boc{position:relative;display:inline-block;line-height:0}
.bl-cx-mo{display:grid;place-items:center;width:26px;height:26px;cursor:pointer;
  border:1px solid var(--n30);border-radius:50%;background:var(--v10);color:inherit;
  list-style:none;transition:opacity .12s}
.bl-cx-mo::-webkit-details-marker{display:none}
.bl-cx-mo::marker{content:""}
.bl-cx-mo:hover,.bl-cx-boc[open] .bl-cx-mo{background:var(--v20)}

/* 🔴🔴 (L750 · M.951) KHAY ⛔ ĐƯỢC CHE CHÍNH CÂU MÌNH ĐANG ĐỊNH PHẢN HỒI.
   ⚪ ĐÃ CẮN THẬT — keeper soi MẮT 22/09, CC đo lại bằng CDP trên server sống, vai độc giả:
      bản L749 neo mép DƯỚI khay vào mép TRÊN nút ⇒ khay nổi NGƯỢC LÊN; mà cụm cảm xúc nằm
      NGAY DƯỚI dòng chữ ⇒ chỗ nó nổi vào đúng là `.noi`. Đo: 11/11 khay trang đọc và 23/23
      khay trang chi tiết đều chồng chữ, nặng nhất `.noi` 210×21,4px ⇒ bình luận MỘT DÒNG
      bị che gần trọn.
   ⚪ BA hướng còn lại ĐỀU ĐO RỒI LOẠI, ⛔ suy từ cảm tính:
     ① nổi XUỐNG  → đè đúng nút «Trả lời» (4 ca desktop) và đè SANG BÌNH LUẬN KHÁC ở 390px
                    (18-19 ca) — chính cái cổng ④ của lệnh cấm;
     ② lệch NGANG ở MỌI bề rộng → sạch ở desktop nhưng 390px ⛔ đủ chỗ: 11+23 khay vẫn che,
                    2 khay TRÀN và `scrollWidth` nong ra khỏi `clientWidth`;
     ③ ⛔ nổi ở MỌI bề rộng → sạch chữ mọi nơi, NHƯNG desktop mở khay bằng RÊ CHUỘT (luật
                    `@media (hover:hover)` ngay dưới) ⇒ mỗi lần chuột lướt qua mặt cười thì
                    nút «Trả lời» và bình luận kế tụt 32,9px — giật do thao tác VÔ Ý.
   ⇒ Tách theo ĐÚNG hai thứ đẻ ra vấn đề: khả năng `hover` (cái mở khay vô ý) và bề rộng
     (cái quyết định còn chỗ ngang ⛔). MẶC ĐỊNH khay CHIẾM CHỖ THẬT trong luồng — ⛔ che gì
     cả; máy chạm chỉ mở khi CHẠM nên việc nội dung dời xuống là nếp accordion quen thuộc,
     ⛔ phải cú giật vô cớ. Chỗ nổi lên là NGOẠI LỆ, khai ở khối @media bên dưới. */
.bl-cx-khay{display:none;gap:2px;padding:4px 6px;line-height:1;
  border:1px solid var(--n30);border-radius:999px;background:var(--v10);box-shadow:var(--sh-the)}
.bl-cx-boc[open]>.bl-cx-khay{display:flex}
/* §D1 — máy CÓ chuột: rê hoặc focus là khay ra, ⛔ cần bấm. Máy CHẠM ⛔ có hover ⇒ chạm
   vào <summary> mở như thường (hành vi gốc của <details>). */
@media (hover:hover){
  .bl-cx-boc:hover>.bl-cx-khay,.bl-cx-boc:focus-within>.bl-cx-khay{display:flex}
}
/* 🔴 (L750) CHỈ nơi CÓ CHUỘT và CÒN CHỖ NGANG mới cho khay nổi: bung sang PHẢI nút, NGANG
   HÀNG với nó ⇒ ⛔ chạm dòng chữ ở trên lẫn nút «Trả lời» ở dưới, và ⛔ đẩy gì (đo: 0px).
   ⚠️ HAI điều kiện, ⛔ bớt cái nào — mỗi cái chặn một hỏng đã đo được:
      bỏ `hover:hover`  ⇒ máy CHẠM cũng nổi, mà ở đó khay ⛔ có chỗ (đúng hỏng của hướng ②);
      bỏ `min-width`    ⇒ desktop thu hẹp cửa sổ ăn nguyên ca tràn ấy.
   ⚪ Đã đo CA BIÊN 621px (bề rộng HẸP NHẤT còn bung ngang, ⛔ chỉ đo 1280): 0 che · 0 tràn ·
      ⛔ tổ tiên nào cắt khay (34 khay hai trang, 0 ca bị `overflow` xén). */
@media (hover:hover) and (min-width:621px){
  .bl-cx-khay{position:absolute;top:50%;transform:translateY(-50%);left:calc(100% + 6px);z-index:5}
}
.bl-cx-khay button{border:0;background:none;font-size:17px;line-height:1;cursor:pointer;
  padding:3px 5px;border-radius:8px;color:inherit}
.bl-cx-khay button:hover,.bl-cx-khay button:focus-visible{background:var(--v20)}

/* 🔴 §⑭ — KHAY ⛔ ĐƯỢC TRÀN MÉP MÀN. ⚪ ĐÃ CẮN THẬT (đo CDP 390px, L749): bản đầu viết
   `@media (max-width:620px){left:auto;right:0}` theo giả định khối cảm xúc nằm sát mép PHẢI
   — đúng với cụm TIM CŨ (nó ở cột thứ ba của lưới `.dc-bl-mot`), nhưng SAI với khối mới:
   khối nay nằm TRONG `.than`, tức CĂN TRÁI. Neo `right:0` kéo khay 210px ngược sang trái ⇒
   `left` xuống tới **−108px** trên 11/12 khay.
   ⚠️ Vế ⓐ (`scrollWidth > clientWidth`) **⛔ HỀ KÊU** — tràn sang TRÁI trong LTR ⛔ nong
   `scrollWidth`. Chỉ vế ⓑ (mép TỪNG phần tử) mới bắt được. Đúng điều §7d ghi bằng máu.
   ⇒ Neo TRÁI (đúng chỗ nút đứng), và chặn trần bề rộng để khay ⛔ vượt ô nhìn.
   🔴 SỬA L750: câu «neo TRÁI ở MỌI bề rộng» của L749 nay CHỈ còn đúng trong khối nổi-ngang ở
      trên (nơi có chuột + ≥621px). Mặc định khay ⛔ nổi nữa nên ⛔ có mốc neo nào — trần bề
      rộng dưới đây thì VẪN CẦN, vì nó canh cả ca static lẫn ca nổi. */
.bl-cx-khay{max-width:calc(100vw - 24px)}
/* 🔴 Neo TRÁI vẫn tràn PHẢI được khi nút đứng sâu bên phải (trả lời lồng trong panel theo đoạn:
   đo CDP 390px ⇒ 1/12 khay có left=247,6 ⇒ right=457,6 > 390). CSS thuần ⛔ kẹp nổi một phần tử
   `absolute` vào ô nhìn, nên hạ BỀ RỘNG thay vì đổi mốc neo: ≤620px khay xuống LƯỚI 3 CỘT
   (6 emoji thành 2 hàng, rộng ~110px) ⇒ chỗ hẹp nhất vẫn còn dư. ⛔ đổi sang `right:0` — đó
   đúng là cái vừa đẻ ra tràn TRÁI −108px. */
@media (max-width:620px){
  .bl-cx-khay{display:none;grid-template-columns:repeat(3,auto);border-radius:14px}
  /* 🔴 VÁ L750 — phải kể ĐỦ BA đường mở, ⛔ mỗi `[open]`. ⚪ Lỗ của L749: luật rê/focus ở
     `@media (hover:hover)` phía trên đặt `display:flex`, và ⛔ đường nào trong khối hẹp này
     nhận lại hai đường ấy ⇒ desktop THU HẸP CỬA SỔ rồi RÊ CHUỘT thì khay bung một HÀNG 210px
     thay vì lưới 3 cột — trái đúng điều §B dặn giữ. ⛔ lộ ở lượt đo nào vì phép đo luôn bật
     sẵn `[open]` (nhánh `[open]` thì grid đúng), chỉ lộ khi đọc thứ tự luật. */
  .bl-cx-boc[open]>.bl-cx-khay,
  .bl-cx-boc:hover>.bl-cx-khay,
  .bl-cx-boc:focus-within>.bl-cx-khay{display:grid}
}

/* Khối «chỉ xem» (khách) ⛔ cần con trỏ tay và ⛔ cần khoảng cho nút mở khay. */
.bl-cx-xem{cursor:default}
/* §D2 — ⛔ hàng chip rỗng: bọc VẪN dựng (JS cần một đích cố định để thay vào) nhưng ⛔ chiếm chỗ.
   🔴 HAI luật, cố ý: `:empty` ⛔ khớp khi bên trong có dù MỘT ký tự trắng, nên nó chỉ ăn nhờ
   component `cam-xuc-hang` viết DÍNH (xem ghi chú trong tệp đó). `:not(:has(*))` là lưới thứ hai:
   nó đo theo CON LÀ PHẦN TỬ nên ⛔ quan tâm khoảng trắng — ai lỡ nới lề trong component sau này
   thì vẫn còn cái đỡ. ⚪ Đã cắn thật ở L749: bản đầu viết thoáng ⇒ `:empty` thành luật chết. */
.bl-cx-hang:empty,
.bl-cx-hang:not(:has(*)){display:none}