/* ============================================================
   tu-truyen.css — LỚP 4, tiền tố .tt-  (Lệnh 48 · M.22)
   Nạp SAU nen.css → nhip.css → khung.css. ⛔ Không định nghĩa lại token.
   Port từ mockup/css/tu-truyen.css. KHÁC mockup: tab là <a> (liên kết thật,
   server render ?ngan=) nên selector nhắm `.tt-tab a`, KHÔNG `button` (§9 —
   đổi thẻ phải đổi selector, ⛔ lỗi câm). Bỏ .tt-thu (bảng thử chỉ có ở mockup).
   ============================================================ */

/* ══════════ Thông báo kết quả thao tác (§9 — trả lời bằng chữ) ══════════ */
.tt-thongbao{margin-bottom:var(--khe);padding:11px 15px;border-radius:var(--bo);
  border:1px solid var(--v50);background:var(--v20);
  font-size:var(--fs-small);color:var(--v95);line-height:1.5}
.tt-thongbao-loi{border-color:var(--do,#d66);background:rgba(214,102,102,.12);color:var(--do,#e88)}

/* ══════════ Tab (liên kết) ══════════ */
.tt-tab{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--khe)}
.tt-tab a{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;
  text-decoration:none;
  border-radius:var(--bo);border:1px solid var(--n40);background:var(--v05);
  font-family:var(--ff);font-size:var(--fs-small);color:var(--n80);line-height:1}
.tt-tab a:hover{border-color:var(--v50);background:var(--v15);color:var(--n99)}
.tt-tab a[aria-selected="true"]{border-color:var(--v60);background:var(--v40);
  color:var(--v95);font-weight:600}
.tt-tab .dem{padding:1px 8px;border-radius:999px;background:var(--v25);
  font-family:var(--ff-so);font-size:var(--fs-eyebrow);color:var(--v90);line-height:1.7}
.tt-tab a[aria-selected="true"] .dem{background:var(--v20)}

/* ══════════ Thanh mô tả tab ══════════ */
.tt-dau{margin-bottom:var(--khe);padding:12px 16px;
  border:1px solid var(--n30);border-radius:var(--bo);background:var(--v15);
  font-size:var(--fs-small);color:var(--n70);line-height:1.55}
.tt-dau b{color:var(--n95);font-weight:500}

/* ══════════ Danh sách ══════════ */
.tt-ds{border:1px solid var(--n30);border-radius:var(--bo);background:var(--v10);
  overflow:visible}
.tt-dong{display:grid;align-items:center;gap:16px;
  grid-template-columns:56px 1fr 230px 210px;
  padding:14px 16px;border-top:1px solid var(--n30)}
.tt-ds > .tt-dong:first-child{border-top:none}
.tt-dong:hover{background:var(--v15)}
@media (max-width:900px){
  .tt-dong{grid-template-columns:56px 1fr;gap:12px}
  .tt-dong .giua,.tt-dong .phai{grid-column:2}
  .tt-dong .phai{justify-content:flex-start}
}

.tt-dong .tt-bia{display:block}
.tt-dong .bia{display:block;width:56px;aspect-ratio:3/4;border-radius:var(--bo-bia);
  overflow:hidden;background:var(--n30)}
.tt-dong .bia img{width:100%;height:100%;object-fit:cover;display:block}
.tt-dong .ten{display:block;font-size:var(--fs-body);color:var(--n99);line-height:1.45;text-decoration:none}
.tt-dong .ten:hover{color:var(--v80)}
.tt-dong .tg{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--n60);line-height:1.5}
/* 🔴 L688 (M.798 §B2) — dòng «Đang ở» nay mang <b>Chương N</b> y như trang chủ (chị chốt 14/09:
   một câu chữ cho cả web). Khai lại ĐÚNG hai trị số của `.tc-dt-dang b` (trang-chu.css) — ⛔ để
   <b> rơi về bold mặc định 700 trên nền màu nhạt hơn: cùng một câu mà hai chỗ đậm khác nhau. */
.tt-dong .tg b{color:var(--n90);font-weight:500}
.tt-dong .giua{font-size:var(--fs-small);color:var(--n70);line-height:1.55}
.tt-dong .phai{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tt-dong .phai form{margin:0}

/* (L703 · M.826) Nút BỎ khỏi ngăn «Đang đọc dở» — dấu X xám, ⛔ đỏ (ẩn có hoàn tác, ⛔ nguy hiểm).
   Mobile: vùng bấm ≥44×44 (§B). Desktop gọn 32px cho khỏi lấn nút «Đọc tiếp». */
.tt-dong .tt-x{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:1px solid var(--n40);border-radius:var(--bo-nho);
  background:transparent;color:var(--n60);cursor:pointer;line-height:0}
.tt-dong .tt-x:hover{background:var(--v20);color:var(--n90);border-color:var(--n50)}
.tt-dong .tt-x:focus-visible{outline:2px solid var(--v50);outline-offset:2px}
@media (max-width:900px){
  .tt-dong .tt-x{width:44px;height:44px}
}

/* 🔴 (#61) Cách sở hữu — một bộ mua cả lẻ lẫn trọn bộ vẫn là MỘT dòng,
   phần "mua thế nào" gộp lại thành mấy cái thẻ nhỏ trong cùng dòng đó. */
.tt-cach{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tt-cach span{padding:2px 9px;border-radius:999px;border:1px solid var(--n40);
  font-size:var(--fs-eyebrow);color:var(--n80);line-height:1.7;white-space:nowrap}
.tt-cach span[data-loai="tron"]{border-color:var(--v50);background:var(--v25);color:var(--v90)}

/* ══════════ Chọn kiểu theo dõi (#77) — form, hai nút submit ══════════ */
.tt-che-do{display:inline-flex;margin:0;border:1px solid var(--n40);border-radius:var(--bo-nho);
  overflow:hidden;background:var(--v05)}
.tt-che-do button{padding:8px 13px;font-size:var(--fs-eyebrow);letter-spacing:.04em;
  color:var(--n70);line-height:1.5;white-space:nowrap;background:transparent;border:0;cursor:pointer}
.tt-che-do button + button{border-left:1px solid var(--n40)}
.tt-che-do button:hover{background:var(--v20);color:var(--n99)}
.tt-che-do button[aria-pressed="true"]{background:var(--v40);color:var(--v95);font-weight:600}

/* ══════════ Hoàn tác (#76) ══════════ */
.tt-hoan{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--n30);
  background:rgba(232,196,106,.06)}
.tt-hoan span{flex:1;min-width:200px;font-size:var(--fs-small);
  color:var(--vang);line-height:1.55}
.tt-hoan form{margin:0}

/* ══════════ Rỗng ══════════ */
.tt-rong{display:grid;justify-items:center;gap:9px;padding:56px 20px;text-align:center}
.tt-rong .tit{font-size:var(--fs-lead);color:var(--n90);line-height:1.45}
.tt-rong p{margin:0;max-width:48ch;font-size:var(--fs-small);color:var(--n70);line-height:var(--lh-than)}

/* ══════════ Phân trang (Lệnh 88 ③) ══════════ */
.tt-trang{display:flex;justify-content:center;gap:12px;margin-top:20px}

/* ══════════ (L86 · cổng r) NGĂN "ĐÃ MUA" TÁCH HAI NHÓM — tiêu đề nhóm + đếm tổng ══════════ */
.tt-nhom{margin-top:var(--khe-lon)}
.tt-nhom:first-of-type{margin-top:var(--khe)}
.tt-nhom-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.tt-nhom-dau h3{margin:0;font-size:var(--fs-lead)}
.tt-nhom-dau .dem{padding:2px 9px;border-radius:999px;background:var(--v30);
  font-family:var(--ff-so);font-size:var(--fs-small);color:var(--n95)}
.tt-nhom-dau .giai{width:100%;margin:0;color:var(--n70);font-size:var(--fs-small)}

/* ══════════ NGĂN 4 · LIST TRUYỆN CỦA TÔI (M.208 · Lệnh 175) ══════════
   Mỗi list MỘT DÒNG GỌN (⛔ ô lớn — chủ dự án: "tốn diện tích"). Dải bìa, ⛔ khảm vuông. */
.tt-list{display:flex;flex-direction:column;gap:9px}
.tt-list-dong{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:center;padding:12px 14px;border-radius:var(--bo);
  border:1px solid var(--n30);background:var(--v20);transition:border-color .18s,background .18s}
.tt-list-dong:hover{border-color:var(--v50);background:var(--v25)}
.tt-list-dong .phu{position:absolute;inset:0;z-index:1;border-radius:var(--bo)}
/* L198/M.232: con nằm TRÊN lớp phủ (z-index) nhưng KHÔNG bắt click ⇒ bấm bìa/tên xuyên
   xuống <a class="phu">. Card Tủ truyện KHÔNG có phần tử tương tác con nào khác. */
.tt-list-dong>*:not(.phu){position:relative;z-index:2;pointer-events:none}
.tt-list-bia{display:flex;flex-shrink:0}
.tt-list-bia img{width:32px;aspect-ratio:5/7;object-fit:cover;display:block;
  border-radius:3px;border:1px solid var(--n30);background:var(--v25)}
.tt-list-bia img+img{margin-left:-10px}
.tt-list-bia.trong{display:grid;place-items:center;width:32px;aspect-ratio:5/7;
  border:1px dashed var(--n40);border-radius:3px;color:var(--n50)}
.tt-list-bia.trong svg{width:16px;height:16px}
.tt-list-dong .giua{min-width:0}
.tt-list-dong .ten{display:block;font-family:var(--ff-td);font-size:var(--fs-sub);font-weight:600;
  line-height:1.25;color:var(--n99);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-list-dong:hover .ten{color:var(--v90)}
.tt-list-dong .duoi{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px}
.tt-list-dem{font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--n60)}
/* Nhãn phạm vi — §9: LUÔN icon + CHỮ, màu ⛔ đứng một mình */
.tt-nhan{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--n40);font-size:var(--fs-eyebrow);color:var(--n70);line-height:1.7}
.tt-nhan svg{width:12px;height:12px;flex-shrink:0}
.tt-nhan.ck{border-color:var(--v50);color:var(--v80)}
/* Dòng "Tạo list truyện" — nét đứt, cuối danh sách */
.tt-tao-list{margin-top:2px}
.tt-tao-dong{display:flex;align-items:center;gap:10px;padding:12px 14px;width:100%;
  border:1px dashed var(--n40);border-radius:var(--bo);background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-body);color:var(--n80);list-style:none}
.tt-tao-dong::-webkit-details-marker{display:none}
.tt-tao-dong:hover{border-color:var(--v50);background:var(--v15);color:var(--n99)}

/* ══════════ BẢN SÁNG [data-nen="sang"] — M.513 đợt ⑤ (L457) ══════════
   🔴 CHỈ scope [data-nen="sang"]; luật trần = bản TỐI, GIỮ NGUYÊN (gate ⑥). ⛔ đụng :hover.
   ⚠️ Tab đang chọn (.tt-tab a[aria-selected]) + toggle chế độ dùng --v40 (⛔ v15/20/25)
      ⇒ NGOÀI phạm vi lệnh; banner .tt-thongbao / bar .tt-dau / badge đếm là TINT, giữ nguyên. */

/* Mặt thẻ (card nổi) = TRẮNG + bóng: card LIST TRUYỆN CỦA TÔI (ngăn 4) */
[data-nen="sang"] .tt-list-dong{background:var(--n05);box-shadow:var(--sh-the)}

/* ⑦ Chữ đếm --n60 khi card .tt-list-dong hoá TRẮNG: 3,93:1 < 4,5 ⇒ nâng --n70 (5,76:1) CHỈ bản sáng */
[data-nen="sang"] .tt-list-dong .tt-list-dem{color:var(--n70)}


/* ══ BẢN SÁNG [data-nen="sang"] — M.528 §B (L470) — Ⓐ tab + toggle chế độ (mẫu M.512) ══ */
[data-nen="sang"] .tt-tab a[aria-selected="true"]{background:var(--g-nut);border-color:transparent;color:var(--v05);font-weight:600}
[data-nen="sang"] .tt-che-do button[aria-pressed="true"]{background:var(--g-nut);border-color:transparent;color:var(--v05);font-weight:600}