/* ══════════════════════════════════════════════════════════════════════
   HOA LỆNH (Lệnh 699 · M.780) — hộp tặng (§C) + trang «ai đã tặng» (§G).

   🔴 TỆP RIÊNG, ⛔ nhét vào chi-tiet-truyen.css: cổng ⑧ của L699 ép cột XOÁ của tệp ấy = 0
      (chỉ được THÊM, ⛔ sửa thiết kế đang chạy), và hộp tặng còn dùng ở trang §G nữa — để ở
      chi-tiet-truyen.css là buộc trang §G nạp cả bộ kiểu trang chi tiết.
   🔴 Thứ tự nạp: nen.css → nhip.css → tệp này. ⛔ khai :root, ⛔ reset, ⛔ CSS menu/chân trang.
   🔴 ⛔ gõ mã màu tay — chỉ dùng token của hai dải (--v* nền tím, --n* thang xám).
   ⚠️ Dùng lại `.avatar` `.bia` `.nut` `.pg-so` của nen.css — ⛔ vẽ lại cái nào đã có (§9).
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- ① HỘP TẶNG (§C) — thân dùng chung hai nơi ---------- */
.hl-hop{display:block}
.hl-hop-tit{margin:0;font-size:var(--fs-sub);line-height:1.3}
.hl-hop-vi{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  margin-top:12px;padding:10px 12px;border-radius:var(--bo-nho);background:var(--v15);
  border:1px solid var(--n30);font-size:var(--fs-small);color:var(--n90)}
.hl-hop-vi b{font-family:var(--ff-so);color:var(--v80)}
.hl-hop-nhe{font-size:var(--fs-eyebrow);color:var(--n70)}
.hl-hop-rong{margin-top:12px;font-size:var(--fs-small);color:var(--n80)}
/* Câu chốt «⛔ đổi ra tiền / ⛔ lấy lại được» — CHỮ THẬT, ⛔ thu nhỏ cho khuất mắt. Người ta đang
   tiêu một thứ có giá; câu này phải đọc được như mọi câu khác trong hộp. */
.hl-hop-chot{margin-top:12px;font-size:var(--fs-small);color:var(--n80)}
.hl-hop-nut{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}

/* Mức chọn sẵn — radio THẬT bọc trong label (focus được bằng bàn phím); :has(:checked) tô mức
   đang chọn bằng viền + nền + đậm chữ. ⛔ chỉ đổi mỗi màu (§9 màu ⛔ đứng một mình):
   radio vẫn là radio nên trình đọc màn hình đọc đúng «đã chọn». Nếp `.bs-muc` của ban-sung.css. */
.hl-muc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hl-muc label{position:relative;padding:8px 14px;border-radius:999px;border:1px solid var(--n40);
  font-family:var(--ff-so);font-size:var(--fs-small);color:var(--n80);cursor:pointer}
.hl-muc label:has(input:checked){border-color:var(--v70);background:var(--v30);color:var(--n99);font-weight:600}
.hl-muc label:has(input:focus-visible){outline:2px solid var(--v80);outline-offset:2px}
.hl-muc input{position:absolute;opacity:0;width:1px;height:1px}
.hl-muc-khac{font-family:var(--ff)}

.hl-o{display:block;margin-top:14px}
.hl-o-nhan{display:block;margin-bottom:6px;font-size:var(--fs-eyebrow);letter-spacing:.08em;
  text-transform:uppercase;color:var(--n70)}
.hl-o input,.hl-o textarea{width:100%;padding:10px 12px;border-radius:var(--bo-nho);
  border:1px solid var(--n40);background:var(--v15);color:var(--n99);font:inherit}
.hl-o input{font-family:var(--ff-so)}
.hl-o textarea{resize:vertical;min-height:58px}
.hl-o input:focus-visible,.hl-o textarea:focus-visible{outline:2px solid var(--v80);outline-offset:1px}

/* Lời báo sau khi gửi — CHỮ + icon, ⛔ chỉ màu (§9). */
.hl-bao{display:flex;align-items:flex-start;gap:8px;margin-top:var(--nhip);padding:11px 13px;
  border-radius:var(--bo-nho);border:1px solid var(--n40);background:var(--v15);
  font-size:var(--fs-small);color:var(--n90)}
.hl-bao.loi{border-color:var(--v50)}

/* ---------- ② LỚP PHỦ ở trang truyện ---------- */
.hl-lop{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:18px;
  background:var(--nen-man);overflow-y:auto}
.hl-lop[hidden]{display:none}
.hl-lop-hop{position:relative;width:min(100%,460px);padding:20px;border-radius:var(--bo);
  background:var(--v20);border:1px solid var(--n40)}
.hl-dong-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;color:var(--n70)}
.hl-dong-x:hover{background:var(--v30);color:var(--n99)}

/* ---------- ③ TRANG «AI ĐÃ TẶNG» (§G) ---------- */
/* 🔴 Trang này đọc theo DÒNG ⇒ thu về 920px, ⛔ trải hết khung 1240 (đo mockup 16/09: để nguyên
   1240 thì số hoa lệnh văng ra mép phải, mắt phải quét ngang mới nối được tên với số). */
.hl-trong-khung{max-width:920px;margin-inline:auto}
.hl-duong{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--n70)}
.hl-duong a{color:var(--n80)}
.hl-duong a:hover{color:var(--v80)}
.hl-duong .day{color:var(--n99)}
.hl-dau{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;margin-top:var(--khe)}
@media (max-width:520px){.hl-dau{grid-template-columns:72px minmax(0,1fr);gap:14px}}
.hl-dau h1{margin:6px 0 0;font-size:var(--fs-sub);line-height:1.25}
.hl-dau .bia img{width:100%;height:auto;border-radius:var(--bo-nho);display:block}
.hl-tom{margin-top:10px;font-size:var(--fs-small);color:var(--n80)}
.hl-tom b{font-family:var(--ff-so);color:var(--v80)}
.hl-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Kỳ là LIÊN KẾT THẬT (?ky=) — ⛔ nút JS đổi tại chỗ: có vậy người ta mới gửi đường dẫn cho nhau
   được, và máy tìm kiếm mới thấy. Nếp `.xh-bang` của xep-hang.blade. */
.hl-thanh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 18px;margin-top:var(--nhip);padding-bottom:12px;border-bottom:1px solid var(--n30)}
.hl-ky{display:flex;gap:6px}
.hl-ky a{padding:6px 14px;border-radius:999px;border:1px solid transparent;
  font-size:var(--fs-small);color:var(--n70)}
.hl-ky a:hover{color:var(--n99);border-color:var(--n40)}
.hl-ky a[aria-current]{color:var(--v10);background:var(--g-nut);border-color:transparent;font-weight:600}
.hl-tong{font-size:var(--fs-small);color:var(--n70)}
.hl-tong b{font-family:var(--ff-so);color:var(--n99)}

/* Một DÒNG, ⛔ thẻ ô vuông: danh sách này dài (có phân trang) nên đọc theo dòng nhanh hơn lưới thẻ. */
.hl-ds{list-style:none;display:grid;gap:2px;margin-top:var(--khe);padding:0}
.hl-dong{display:grid;grid-template-columns:34px 40px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 12px;border-radius:var(--bo-nho);border:1px solid transparent}
.hl-dong:hover{background:var(--v15);border-color:var(--n30)}
/* 🔴 Điện thoại GIỮ NGUYÊN 4 cột — ⛔ đẩy số xuống dòng riêng (đo mockup 16/09: đẩy xuống thì mỗi
   dòng cao thêm ~22px, 20 dòng thành một cột lê thê). Thay vào đó bỏ chữ «hoa lệnh» (tiêu đề trang
   đã nói) và thu cỡ số — cả dòng vẫn vừa ở 420px. */
@media (max-width:640px){
  .hl-dong{grid-template-columns:24px 34px minmax(0,1fr) auto;gap:9px;padding:10px 6px}
  .hl-dong .so{font-size:var(--fs-small)}
  .hl-dong .so i{display:none}
  .hl-dong q{font-size:var(--fs-eyebrow)}
}
.hl-dong .hang{font-family:var(--ff-so);font-size:var(--fs-body);color:var(--n50);text-align:center;line-height:1}
.hl-dong .avatar{width:40px;height:40px;font-size:15px}
@media (max-width:640px){.hl-dong .avatar{width:36px;height:36px;font-size:14px}}
.hl-than{min-width:0}
.hl-dong .ten{display:block;font-weight:600;color:var(--n99);font-size:var(--fs-small)}
/* Lời nhắn GỘP THẲNG VÀO DÒNG (⛔ cột riêng — §G).
   🔴 L741 (M.931) — HIỆN TRỌN, XUỐNG DÒNG khi dài; ⛔ cắt còn một dòng (chị chốt 21/09 sau khi
      xem trên điện thoại). ⚪ Bản cũ ép một dòng rồi cắt bằng dấu ba chấm; đo CDP 21/09 trên
      server sống (cổng 8014, vai độc giả, lời nhắn dài đúng trần 120 ký tự): nét chữ 711,4px
      nằm trong hộp 192px @390px ⇒ xén mất 519,4px chữ — và @1280px cũng xén 54,9px, tức ⛔ phải
      lỗi riêng của điện thoại. Lời nhắn là CHỮ NGƯỜI TẶNG viết cho tác giả: cắt nửa câu là đọc
      sai nghĩa, cùng họ với luật ⛔ cắt một con số tiền ở `.ql-so b` (L737 · M.922 §C④).
   🔴 `overflow-wrap:anywhere` là phần ⛔ bỏ được: ô này nằm trong cột `minmax(0,1fr)` của lưới
      `.hl-dong`, nên một chuỗi dài ⛔ khoảng trắng (link dán vào, chữ dính liền) sẽ NONG cột ra
      làm tràn cả lưới. `min-width:0` ở `.hl-than` một mình ⛔ đủ — nó cho cột co lại, nhưng chuỗi
      ⛔ có chỗ ngắt thì vẫn đẩy rộng ra. Ca ② của `HoaLenhLoiNhanXuongDongL741Test` ghim điều này.
   ⚠️ Cột phải (số Hoa Lệnh + mốc thời gian) VẪN một dòng — xem `.hl-phai` ngay dưới, ⛔ nới theo. */
.hl-dong q{display:block;margin-top:3px;font-style:italic;color:var(--n80);font-size:var(--fs-small);
  white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.hl-phai{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.hl-dong .so{font-family:var(--ff-so);color:var(--v80);font-size:var(--fs-body)}
.hl-dong .so i{font-style:normal;font-family:var(--ff);font-size:var(--fs-eyebrow);
  color:var(--n70);margin-left:5px;letter-spacing:.06em;text-transform:uppercase}
.hl-dong .luc{font-size:var(--fs-eyebrow);color:var(--n60)}

/* Ba hạng đầu — nhấn NHẸ, ⛔ đổi cỡ dòng (danh sách dài mà to nhỏ lung tung thì gãy nhịp). */
.hl-dong.h1,.hl-dong.h2,.hl-dong.h3{background:var(--v15);border-color:var(--n30)}
.hl-dong.h1{border-color:var(--v50);background-image:var(--g-the)}
.hl-dong.h1 .hang,.hl-dong.h2 .hang,.hl-dong.h3 .hang{color:var(--v80);font-weight:600}

.hl-pg{margin-top:var(--nhip)}
.hl-trong{padding:var(--nhip) 0;text-align:center;color:var(--n70);font-size:var(--fs-small)}

/* ══ BẢN SÁNG [data-nen="sang"] — M.780 (L699) ══
   🔴 CHỈ scope [data-nen="sang"]; luật trần = bản TỐI, GIỮ NGUYÊN. ⛔ đụng :hover, ⛔ mã màu # gõ tay.
   Vai: mockup/BANG_PHAN_VAI_BE_MAT.md — bề mặt nổi hoá TRẮNG, viền đậm lên một nấc cho đủ tương phản. */
[data-nen="sang"] .hl-lop-hop{background:var(--n05);border-color:var(--n30);box-shadow:var(--sh-the)}
[data-nen="sang"] .hl-hop-vi{background:var(--n05);border-color:var(--n40)}
[data-nen="sang"] .hl-o input,[data-nen="sang"] .hl-o textarea{background:var(--n05);border-color:var(--n40)}
[data-nen="sang"] .hl-bao{background:var(--n05);border-color:var(--n40)}
[data-nen="sang"] .hl-dong.h1,[data-nen="sang"] .hl-dong.h2,[data-nen="sang"] .hl-dong.h3{background:var(--n05)}