/* BẢNG XẾP [bangxep] (10/10/2026) — bảng tự gom theo cột đầu, mỗi nhóm một dòng gập/mở (<details>, không cần JS).
   HTML dựng ở scripts/bang-xep.cjs. Dùng chung trang thật (base.njk, chỉ bài viết), khung xem trước Decap
   (registerPreviewStyle). Khung ≤ 560px: mỗi hàng thành khối có nhãn cột. */
.bx{
  --bx-nen:#FFFFFF; --bx-vien:#DDE5F0; --bx-vach:#EDF1F6; --bx-dau:#EAF2FD; --bx-td:#123A73; --bx-chu:#1F2937; --bx-phu:#5F6368;
  --bx-mo-nen:#F6FAF6; --bx-mo-vien:#7CC48A; --bx-icon-nen:#E3EDFD; --bx-icon:#1A56C4; --bx-dem-nen:#E8F0FE; --bx-dem:#1A56C4;
  --bx-soc:#F8FAFC; --bx-hang-dau:#F1F5FA;
  --bx-ghim:#1A73E8; --bx-nguoi:#C5221F; --bx-qua:#7B4BC4; --bx-nguon:#1E8E3E; --bx-so:#B06000; --bx-ten:#123A73; --bx-khac:#5F6368;
  container-type:inline-size; display:flex; flex-direction:column; gap:8px; margin:18px 0;
}
html[data-theme="dark"] .bx{
  --bx-nen:#1E2530; --bx-vien:#334155; --bx-vach:#2B3442; --bx-dau:#223047; --bx-td:#CFE0F5; --bx-chu:#E4E6EB; --bx-phu:#A9B2BF;
  --bx-mo-nen:#1D2A24; --bx-mo-vien:#4E9A5C; --bx-icon-nen:#25385A; --bx-icon:#AFCBFA; --bx-dem-nen:#25385A; --bx-dem:#AFCBFA;
  --bx-soc:#222A36; --bx-hang-dau:#263041;
  --bx-ghim:#8AB4F8; --bx-nguoi:#F28B82; --bx-qua:#C58AF9; --bx-nguon:#6FD08C; --bx-so:#FDD663; --bx-ten:#CFE0F5; --bx-khac:#A9B2BF;
}
.bx-nhom{background:var(--bx-nen); border:1px solid var(--bx-vien); border-radius:10px; overflow:hidden; transition:border-color .15s, box-shadow .15s;}
.bx-nhom[open]{border-color:var(--bx-mo-vien); box-shadow:0 0 0 1px var(--bx-mo-vien), 0 2px 8px rgba(16,24,40,.06); background:var(--bx-mo-nen);}
.bx-dau{display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; cursor:pointer; list-style:none; user-select:none;}
.bx-dau::-webkit-details-marker{display:none;}
.bx-dau::marker{content:"";}
.bx-dau:hover{background:var(--bx-dau);}
.bx-dau:focus-visible{outline:2px solid var(--bx-ghim); outline-offset:-2px;}
.bx-icon{flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px;
  background:var(--bx-icon-nen); color:var(--bx-icon);}
.bx-icon svg{width:19px; height:19px;}
/* Ảnh đại diện nhóm ([anh] trong ô Phân loại): thay icon, cùng ô 34px bo góc, không mở phóng to. */
.bx-icon-anh{background:none; overflow:hidden;}
.bx-avt, .article-body img.bx-avt{display:block; width:100%; height:100%; max-width:none; object-fit:cover; margin:0; border-radius:9px; cursor:pointer;}
.bx-ten{flex:1; min-width:0; font-size:16px; line-height:1.35; font-weight:700; color:var(--bx-td);}
.bx-dem{flex:none; padding:2px 10px; border-radius:999px; background:var(--bx-dem-nen); color:var(--bx-dem); font-size:12px; font-weight:600; white-space:nowrap;}
.bx-mo{flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--bx-soc); color:var(--bx-phu); transition:transform .2s;}
.bx-mo svg{width:16px; height:16px;}
.bx-nhom[open] .bx-mo{transform:rotate(180deg); background:var(--bx-dem-nen); color:var(--bx-dem);}

/* Bảng chi tiết khi mở */
.bx-bang{margin:0 12px 12px; border:1px solid var(--bx-vien); border-radius:8px; overflow:hidden; background:var(--bx-nen); font-size:13.5px; line-height:1.45;}
.bx-hang{display:grid; grid-template-columns:var(--bx-cot); border-top:1px solid var(--bx-vach);}
.bx-hang:first-child{border-top:0;}
.bx-hang:nth-child(odd):not(.bx-hang-dau){background:var(--bx-soc);}
.bx-c{min-width:0; padding:7px 10px; border-left:1px solid var(--bx-vach); overflow-wrap:anywhere; color:var(--bx-chu);}
.bx-c:first-child{border-left:0;}
.bx-c-ten{font-weight:600;}
.bx-c-so{text-align:center; font-variant-numeric:tabular-nums; font-weight:600;}
.bx-hang-dau{background:var(--bx-hang-dau);}
.bx-hang-dau .bx-c{display:flex; align-items:center; gap:5px; padding:7px 10px; font-size:12.5px; font-weight:700; line-height:1.3;}
.bx-hang-dau .bx-c.bx-c-so{justify-content:center;}
.bx-hang-dau svg{flex:none; width:14px; height:14px;}
.bx-hang-dau .bx-ghim{color:var(--bx-ghim);} .bx-hang-dau .bx-nguoi{color:var(--bx-nguoi);} .bx-hang-dau .bx-qua{color:var(--bx-qua);}
.bx-hang-dau .bx-nguon{color:var(--bx-nguon);} .bx-hang-dau .bx-so{color:var(--bx-so);} .bx-hang-dau .bx-ten{color:var(--bx-ten);}
.bx-hang-dau .bx-khac{color:var(--bx-khac);}
.bx-trong{color:var(--bx-phu); opacity:.6;}

@container (max-width: 560px){
  .bx-dau{gap:9px; padding:7px 10px 7px 7px;}
    .bx-icon{width:30px; height:30px;} .bx-avt, .article-body img.bx-avt{border-radius:8px;}
  .bx-ten{font-size:15px;}
  .bx-bang{margin:0 8px 8px;}
  .bx-hang.bx-hang-dau{display:none;}
  .bx-hang{display:block; padding:8px 10px; border-top:1px solid var(--bx-vach);}
  .bx-hang-dau + .bx-hang{border-top:0;}
  .bx-c{border-left:0; padding:1px 0; display:grid; grid-template-columns:minmax(92px,36%) minmax(0,1fr); column-gap:8px; text-align:left;}
  .bx-c::before{content:attr(data-nhan); font-size:12px; font-weight:700; color:var(--bx-phu);}
  .bx-c.bx-c-ten{display:block; font-size:14.5px; margin-bottom:3px;}
  .bx-c.bx-c-ten::before{content:none;}
}
/* Nhiều bảng xếp liền nhau trong một bài (13/10/2026): khe 10px thay 18px để các khung trông thành một cụm. */
.bx + .bx{margin-top:-8px;}
/* CẤP CON trong nhóm (13/10/2026): ô Tên mở đầu "+" = mục con của mục ngay trên. Mục cha là một hàng bấm được
   (details.bx-nhanh > summary.bx-hang-cha, chevron nhỏ đầu ô Tên); hàng con nền nhạt, ô Tên thụt vào có vạch nối. */
.bx-nhanh{border-top:1px solid var(--bx-vach);}
.bx-hang-dau + .bx-nhanh{border-top:0;}
.bx-hang-cha{cursor:pointer; list-style:none; user-select:none;}
.bx-hang-cha::-webkit-details-marker{display:none;} .bx-hang-cha::marker{content:"";}
.bx-hang-cha:hover{background:var(--bx-dau);}
.bx-hang-cha:focus-visible{outline:2px solid var(--bx-ghim); outline-offset:-2px;}
.bx-nhanh[open] > .bx-hang-cha{background:var(--bx-dau);}
.bx-mo.bx-mo-nho{width:20px; height:20px; margin:0 6px 0 0; vertical-align:-4px; display:inline-flex;}
.bx-mo.bx-mo-nho svg{width:12px; height:12px;}
.bx-nhanh[open] > .bx-hang-cha .bx-mo-nho{transform:rotate(180deg); background:var(--bx-dem-nen); color:var(--bx-dem);}
.bx-hang-con{background:var(--bx-soc);}
.bx-hang.bx-hang-con:nth-child(n){background:var(--bx-soc);}
.bx-hang-con .bx-c-ten{position:relative; padding-left:36px; font-weight:500;}
.bx-hang-con .bx-c-ten::after{content:""; position:absolute; left:19px; top:50%; width:10px; height:0; border-top:1.5px solid var(--bx-truc, #C9D5E3);}
@container (max-width: 560px){
  .bx-hang-con{padding-left:26px !important;}
  .bx-hang-con .bx-c-ten{padding-left:0;}
  .bx-hang-con .bx-c-ten::after{left:-16px; top:.8em;}
  .bx-hang-cha .bx-c-rong{display:none;}
}
/* Ảnh đại diện mục cha ([anh] trong ô Tên của mục có cấp con), 26px cạnh tên. */
.bx-icon.bx-icon-nho{width:26px; height:26px; border-radius:7px; margin-right:8px; vertical-align:middle;}
.bx-icon-nho .bx-avt, .article-body .bx-icon-nho img.bx-avt{border-radius:7px;}
.bx-hang-cha .bx-c-ten{display:flex; align-items:center;}
.bx-hang-cha .bx-mo-nho{flex:none;}

/* KIỂU CÂY THƯ MỤC theo demo người dùng (13/10/2026): thanh tiêu đề nền xanh than + sách mở; mở ra là hai khung: CÂY trái
   (gốc = tiêu đề, Cấp Cha = quyển sách, phân loại = trang giấy, đường hướng dẫn nét chấm, mục đang chọn nền xanh nhạt chữ
   xanh) và bên phải khung đường dẫn + khung bảng (đầu khung xanh nhạt: ảnh + tên + "N mục"). Chọn = radio ẩn + label
   (không JS). Khung < 620px: cây trên, bảng dưới. HTML ở scripts/bang-xep.cjs. */
.bx-f{--bxf-c0:#1A56C4; --bxf-sach:#2F6FD0; --bxf-chon:#1A56C4; --bxf-chon-nen:#E7F0FD; --bxf-chon-sl:#D3E3FB; --bxf-cay:220px; --bxf-ke:#C9D4E0;
  --bxf-dau-nen:#263A50; --bxf-dau-chu:#ADE2FF; --bxf-nhat:#F3F7FD;}
html[data-theme="dark"] .bx-f{--bxf-c0:#8AB4F8; --bxf-sach:#8AB4F8; --bxf-chon:#AFCBFA; --bxf-chon-nen:#25385A; --bxf-chon-sl:#2E4A75; --bxf-ke:#3A475C;
  --bxf-dau-nen:#1B2A3B; --bxf-nhat:#1E2836;}
.bxf{border:1px solid var(--bx-vien); border-radius:12px; overflow:hidden; background:var(--bx-nen);}
.bxf svg{flex:none; width:17px; height:17px;}
.bxf ul{list-style:none; margin:0; padding:0;}
.bxf li{margin:0; padding:0;} .bxf li::before, .bxf li::marker{content:none;}
/* Thanh tiêu đề = nút xếp lại / mở cả khối */
.bxf-dau{display:flex; align-items:center; gap:12px; min-height:50px; padding:8px 12px 8px 16px; cursor:pointer; user-select:none; list-style:none;
  background:var(--bxf-dau-nen); color:var(--bxf-dau-chu); font-size:16px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;}
.bxf-dau::-webkit-details-marker{display:none;} .bxf-dau::marker{content:"";}
.bxf-dau:focus-visible{outline:2px solid var(--bxf-dau-chu); outline-offset:-3px;}
.bxf-dau svg{width:24px; height:24px;}
.bxf-dau .bx-mo{margin-left:auto; background:rgba(173,226,255,.14); color:var(--bxf-dau-chu);}
.bxf[open] > .bxf-dau .bx-mo{transform:rotate(180deg);}
/* Thân: hai khung */
.bxf-luoi{display:grid; grid-template-columns:var(--bxf-cay) minmax(0,1fr); gap:12px; padding:12px;}
.bxf-cay{border:1px solid var(--bx-vien); border-radius:10px; padding:8px 6px; min-width:0; align-self:start;}
.bxf-cay ul ul{margin-left:12px; padding-left:8px; border-left:1px dotted var(--bxf-ke);}
.bxf-dong{display:flex; align-items:center; gap:8px; padding:6px 8px; margin:1px 0; border-radius:8px; cursor:pointer; user-select:none; list-style:none; color:var(--bx-chu); font-size:14px; line-height:1.35;}
.bxf-dong::-webkit-details-marker{display:none;} .bxf-dong::marker{content:"";}
.bxf-dong:hover{background:var(--bx-soc);}
.bxf-ten{flex:1; min-width:0; overflow-wrap:anywhere;}
.bxf-sl{flex:none; min-width:24px; text-align:center; font-size:11.5px; font-weight:700; color:var(--bx-phu); background:var(--bx-soc); border-radius:99px; padding:1px 7px;}
.bxf-cv{flex:none; display:inline-flex; width:12px; justify-content:center; color:var(--bx-phu); transition:transform .15s;}
.bxf-cv::before{content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg);}
details[open] > .bxf-dong .bxf-cv{transform:rotate(90deg);}
.bxf-goc > .bxf-dong{font-weight:800; font-size:15px; color:var(--bx-td);}
.bxf-goc > .bxf-dong svg{color:var(--bxf-sach); width:20px; height:20px;}
.bxf-cha > .bxf-dong svg{color:var(--bxf-sach);}
.bxf-cha[open] > .bxf-dong{color:var(--bxf-c0); font-weight:700;}
.bxf-la svg{color:#8FA3BC;}
/* Bên phải */
.bxf-noi{position:relative; min-width:0;}
/* radio ẩn đặt ở ĐẦU cột phải — để ở vị trí tĩnh thì bấm nhãn trình duyệt cuộn tới radio (từng làm trang nhảy xuống cuối) */
.bxf-r{position:absolute; top:0; left:0; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
.bxf-pn{display:none;} .bxf-r:checked + .bxf-pn{display:block;}
.bxf-r:focus-visible + .bxf-pn .bxf-duong{outline:2px solid var(--bx-ghim); outline-offset:2px;}
.bxf-duong{display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:10px 14px; border:1px solid var(--bx-vien); border-radius:10px; font-size:13.5px; color:var(--bx-chu); margin-bottom:12px;}
.bxf-duong i{font-style:normal; color:var(--bx-phu); opacity:.6;} .bxf-duong b{color:var(--bxf-c0); font-weight:700;}
.bxf-nha{display:inline-flex; color:var(--bxf-c0);} .bxf-nha svg{width:17px; height:17px;}
.bxf-khung{border:1px solid var(--bx-vien); border-radius:10px; overflow:hidden;}
.bxf-the{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--bxf-nhat); border-bottom:1px solid var(--bx-vien);}
.bxf-avt{flex:none; display:inline-flex; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; overflow:hidden; background:var(--bxf-chon-nen); color:var(--bxf-c0);}
.bxf-avt svg{width:22px; height:22px;}
.bxf-avt.bx-icon-anh{background:none;}
.bxf-avt .bx-avt, .article-body .bxf-avt img.bx-avt{border-radius:10px;}
.bxf-the-ten{flex:1; min-width:0; font-size:17px; font-weight:800; line-height:1.3; color:var(--bx-td);}
.bxf-the .bxf-sl{background:var(--bxf-chon-sl); color:var(--bxf-chon); font-size:12px; padding:2px 10px;}
.bxf-khung > .bx-bang{margin:12px; }
@container (max-width: 620px){
  .bxf-luoi{grid-template-columns:minmax(0,1fr); padding:10px; gap:10px;}
  .bxf-the-ten{font-size:15.5px;}
  .bxf-avt{width:36px; height:36px;}
  .bxf-khung > .bx-bang{margin:8px;}
}
/* Chặn CSS danh sách của thân bài (bo-cuc.css / khoi-muc.css: chấm đầu dòng, lề 2em, khoảng cách mục) lọt vào cây. */
.article-body .bxf ul, .bxf ul{list-style:none !important; margin:0 !important; padding:0 !important; border:0;}
.article-body .bxf-cay > ul{padding:0 !important;}
.article-body .bxf-cay ul ul, .bxf-cay ul ul{margin:0 0 0 12px !important; padding:0 0 0 8px !important; border-left:1px dotted var(--bxf-ke);}
.article-body .bxf li, .bxf li{display:block; list-style:none !important; margin:0 !important; padding:0 !important;}
.article-body .bxf li::marker, .article-body .bxf li::before, .article-body .bxf li::after{content:none !important; display:none !important;}
/* Chưa chọn phân loại: chỉ hiện CÂY trải hết khung; bấm một mục ở cây thì cột phải mới hiện. */
.bxf-luoi:not(:has(.bxf-r:checked)){grid-template-columns:minmax(0,1fr);}
.bxf-luoi:not(:has(.bxf-r:checked)) > .bxf-noi{display:none;}
/* Ô gộp "Cách nhận / Ghi chú": phần ghi chú (tọa độ) xuống dòng dưới, chữ nhạt. */
.bx-gop{display:block; margin-top:2px; font-size:12.5px; color:var(--bx-phu);}
/* Điện thoại: ô có nhiều phần (chữ + mã màu/ảnh) KHÔNG dùng lưới — lưới biến từng mảnh chữ thành một ô riêng, mảnh sau
   rơi xuống cột nhãn. Nhãn đặt tuyệt đối bên trái, nội dung chảy liền trong cột phải. Nhãn gộp rút gọn "Nhận / Ghi chú". */
@container (max-width: 560px){
  .bx-c{display:block; position:relative; padding:1px 0 1px calc(min(36%, 118px) + 8px);}
  .bx-c::before{position:absolute; left:0; top:2px; width:min(36%, 118px);}
  .bx-c.bx-c-ten{padding-left:0;}
}
/* GỌN HƠN (13/10/2026, người dùng: bảng đã gộp cột mà vẫn hẹp): chữ nhỏ lại, đệm ít lại, cây hẹp 200px; icon ảnh sách /
   cuộn giấy (src/assets/ui/bang-xep/, alpha) thay SVG trong cây. Ảnh trong cây/khung không mở phóng to (base.njk bỏ .bxf-ic). */
.bx-f{--bxf-cay:200px;}
.bxf-dau{min-height:44px; padding:6px 10px 6px 14px; font-size:15px;}
.bxf-dau svg{width:21px; height:21px;}
.bxf-luoi{gap:10px; padding:10px;}
.bxf-cay{padding:6px 4px;}
.bxf-dong{gap:6px; padding:4px 6px; font-size:13px;}
.bxf-goc > .bxf-dong{font-size:13.5px;}
.bxf-sl{font-size:11px; min-width:20px; padding:0 6px;}
.bxf-cay ul ul, .article-body .bxf-cay ul ul{margin-left:10px !important; padding-left:6px !important;}
.bxf-ic, .article-body img.bxf-ic{flex:none; display:block; width:20px; height:20px; margin:0; object-fit:contain; cursor:pointer;}
.bxf-duong{padding:7px 10px; font-size:12.5px; margin-bottom:10px; gap:5px;}
.bxf-nha svg{width:15px; height:15px;}
.bxf-the{padding:7px 10px; gap:10px;}
.bxf-avt{width:34px; height:34px; border-radius:8px;}
.bxf-avt-cuon{background:none;} .bxf-avt-cuon .bxf-ic{width:30px; height:30px;}
.bxf-the-ten{font-size:15px;}
.bxf-the .bxf-sl{font-size:11px; padding:1px 8px;}
.bxf-khung > .bx-bang{margin:8px; font-size:12.5px; line-height:1.4;}
.bx-f .bx-c{padding:5px 8px;}
.bx-f .bx-hang-dau .bx-c{padding:6px 8px; font-size:11.5px;}
.bx-f .bx-c-ten{font-weight:600;}
.bx-f .bx-gop{font-size:11.5px;}
@container (max-width: 620px){ .bxf-luoi{padding:8px; gap:8px;} }
/* Ô cột "Tên" mang lớp bx-ten (loại cột) TRÙNG lớp tên nhóm .bx-ten (16px, màu tiêu đề) — trả về cỡ/màu của bảng. */
.bx .bx-c.bx-ten{font-size:inherit; line-height:inherit; color:var(--bx-chu); flex:initial;}
@container (max-width: 560px){
  .bx-f .bx-c{padding:1px 0 1px calc(min(36%, 110px) + 8px);}
  .bx-f .bx-c::before{width:min(36%, 110px); font-size:11.5px;}
  .bx-f .bx-c.bx-c-ten{padding-left:0; margin-bottom:2px;}
  .bx-f .bx-hang{padding:7px 10px;}
}
/* 13/10/2026 (tối): thanh tiêu đề + gốc cây KHÔNG icon; cây rộng hơn (220px), cột Tên trong bảng hẹp lại (.85fr — dựng ở
   bang-xep.cjs); icon trong cây CAO BẰNG CHỮ (cuộn giấy 1.1em, sách 1.2em) để tên 4 chữ nằm một dòng. Cỡ chữ cây cố định. */
.bx-f{--bxf-cay:220px;}
.bx-f .bxf-dong{font-size:13px; line-height:1.3; gap:5px; padding:4px 6px;}
.bx-f .bxf-goc > .bxf-dong{font-size:13.5px;}
.bx-f .bxf-la .bxf-ic, .article-body .bx-f .bxf-la img.bxf-ic{width:1.1em; height:1.1em;}
.bx-f .bxf-cha .bxf-ic, .article-body .bx-f .bxf-cha > .bxf-dong img.bxf-ic{width:1.25em; height:1.25em;}
.bx-f .bxf-sl{font-size:10.5px; padding:0 5px; min-width:18px;}
/* Tên 4 chữ trong cây nằm một dòng: cây 240px, thụt mỗi cấp chỉ 8px + 5px, chữ 12.5px. */
.bx-f{--bxf-cay:240px;}
.bx-f .bxf-dong{font-size:12.5px;}
.bx-f .bxf-cay ul ul, .article-body .bx-f .bxf-cay ul ul{margin-left:8px !important; padding-left:5px !important;}
/* BẢNG CHUNG + TIÊU ĐỀ PHÂN CHIA (13/10/2026, khuya): không còn thanh tiêu đề xếp lại; cột cây CO THEO TÊN DÀI NHẤT
   (max-content, tên không xuống dòng, tối đa 46% khung); tiêu đề phân chia = ô nhãn nhỏ nền nhạt; mục đang chọn CHỈ đổi
   chữ xanh (không đậm, không nền). Icon sách và cuộn giấy cùng ô 18px; mỗi cấp con lùi đúng bằng (mũi tên 12px + khe 5px)
   nên icon cấp con thẳng hàng icon cấp cha. */
.bx-f .bxf-luoi{grid-template-columns:minmax(0, max-content) minmax(0,1fr); border-top:0;}
.bx-f .bxf-cay{max-width:min(46cqw, 300px); padding:6px;}
.bx-f .bxf-ten{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bxf-muc{margin:2px 0 4px; padding:4px 8px; border-radius:6px; background:var(--bxf-nhat); color:var(--bx-td);
  font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bxf-cay > ul + .bxf-muc{margin-top:10px;}
.bx-f .bxf-ic, .article-body .bx-f img.bxf-ic, .article-body .bx-f .bxf-la img.bxf-ic, .article-body .bx-f .bxf-cha > .bxf-dong img.bxf-ic{width:18px; height:18px;}
.bx-f .bxf-dong{padding:4px 6px; gap:5px;}
.bx-f .bxf-cay ul ul, .article-body .bx-f .bxf-cay ul ul{margin-left:10px !important; padding-left:6px !important;}
.bx-f .bxf-cay > ul > li > .bxf-la{padding-left:23px;}
.bx-f .bxf-dong:hover{background:none; color:var(--bxf-chon);}
@container (max-width: 620px){
  .bx-f .bxf-luoi{grid-template-columns:minmax(0,1fr);}
  .bx-f .bxf-cay{max-width:none;}
}
/* 13/10/2026: đường dẫn KHÔNG khung, không icon nhà; mục đang chọn có khung nền xanh nhạt bo góc (chữ xanh, không đậm). */
.bx-f .bxf-duong{border:0; padding:2px 2px 0; margin-bottom:8px;}
.bx-f .bxf-dong{border-radius:7px;}
/* CỘT CÂY CỐ ĐỊNH + MŨI TÊN NHỎ KIỂU DISCORD (14/10/2026): cây rộng cứng --bxf-cay (không co giãn theo tên), chữ 12px, tên dài
   XUỐNG DÒNG (bỏ nowrap/ellipsis). Mục đang chọn chữ ĐEN đậm màu (--bxf-chon-chu) trên nền xanh nhạt; tên sách đang mở chữ
   đen. Hình học: mũi tên ô 10px, đệm trái 4px -> tâm mũi tên x=9px; đường kẻ dọc của cấp con đặt ĐÚNG x=9 (margin-left
   8.5px + viền 1px); icon con lùi để thẳng icon cha (x=19px). Đổi kích thước thì tính lại các số này. */
.bx-f{--bxf-cay:190px; --bxf-chon-chu:#0F172A;}
html[data-theme="dark"] .bx-f{--bxf-chon-chu:#F1F5F9;}
.bx-f .bxf-luoi{grid-template-columns:var(--bxf-cay) minmax(0,1fr);}
.bx-f .bxf-cay{max-width:none; width:auto;}
.bx-f .bxf-ten{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;}
.bx-f .bxf-dong{font-size:12px; line-height:1.35; padding:4px 4px; gap:5px; align-items:flex-start;}
.bx-f .bxf-dong > :is(.bxf-cv, .bxf-ic){margin-top:1px;}
.bx-f .bxf-ic, .article-body .bx-f img.bxf-ic, .article-body .bx-f .bxf-la img.bxf-ic, .article-body .bx-f .bxf-cha > .bxf-dong img.bxf-ic{width:15px; height:15px;}
.bx-f .bxf-cv{width:10px; height:15px; align-items:center;}
.bx-f .bxf-cv::before{width:4px; height:4px; border-right-width:1.5px; border-bottom-width:1.5px;}
.bx-f .bxf-cha > .bxf-dong{color:var(--bx-chu);}
.bx-f .bxf-cha[open] > .bxf-dong{color:var(--bxf-chon-chu); font-weight:700;}
.bx-f .bxf-dong:hover{color:var(--bxf-chon-chu);}
.bx-f .bxf-cay ul ul, .article-body .bx-f .bxf-cay ul ul{margin-left:8.5px !important; padding-left:5.5px !important; border-left:1px dotted var(--bxf-ke);}
.bx-f .bxf-cay > ul > li > .bxf-la{padding-left:19px;}
.bx-f .bxf-muc{font-size:11px;}
@container (max-width: 620px){ .bx-f .bxf-luoi{grid-template-columns:minmax(0,1fr);} }
/* 14/10/2026: chữ cây 11.5px + đệm khung cây 4px để tên 4 chữ ở cấp sâu nhất (vd "Kiếm Đãng Hồng Trần" dưới Thư Tịch >
   Nhất Đại Tông Sư) vừa một dòng trong cột 190px. */
.bx-f .bxf-dong{font-size:11.5px;}
.bx-f .bxf-cay{padding:6px 4px;}
/* ĐIỆN THOẠI (14/10/2026): cây là KHUNG THẤP tự cuộn bên trong (tối đa 210px), bảng nằm NGAY DƯỚI — bấm tập là thấy bảng
   trong tầm mắt, không phải cuộn trang tìm bảng. Không JS. */
@container (max-width: 620px){
  .bx-f .bxf-cay{max-height:210px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
    box-shadow:inset 0 -10px 8px -8px rgba(15,23,42,.12);}
  .bx-f .bxf-luoi{gap:8px;}
}
/* CANH GIỮA DỌC trong hàng bảng (14/10/2026): ô "Cách nhận / Ghi chú" xuống dòng thì Tên / Điểm nằm giữa hàng. Ô vẫn kéo
   cao hết hàng (giữ vạch ngăn cột), chỉ lớp trong span.bx-c-in được canh. Chỉ khung rộng; điện thoại giữ dạng khối. */
@container (min-width: 561px){
  .bx-hang:not(.bx-hang-dau) > .bx-c{display:flex; align-items:center;}
  .bx-hang:not(.bx-hang-dau) > .bx-c.bx-c-so{justify-content:center;}
  .bx-c-in{display:block; min-width:0;}
}
/* Đầu khung bảng (14/10/2026): tên tập to hơn, dòng dưới là cấp cha (chữ nhỏ, nhạt, thẳng lề). Tiêu đề cột Tên và
   Cách nhận / Ghi chú không icon trong kiểu cây (cột Điểm giữ #). */
.bxf-the-chu{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.bx-f .bxf-the-ten{flex:none; font-size:17px; line-height:1.25;}
.bxf-the-cha{font-size:12px; line-height:1.3; font-weight:500; color:var(--bx-phu);}
.bx-f .bx-hang-dau .bx-c:not(.bx-c-so) svg{display:none;}
@container (max-width: 620px){ .bx-f .bxf-the-ten{font-size:16px;} }
/* ĐƯỜNG CHẤM NGANG kiểu Registry Editor (14/10/2026): mỗi mục con có nhánh chấm ngang từ đường dọc (viền chấm trái của ul
   cấp con, tâm cách mép trái mục 6px) tới sát mũi tên/icon, ở tâm dòng đầu (11.5px). Mục CUỐI của nhánh: che phần đường dọc
   phía dưới nhánh ngang bằng một dải màu nền khung cây -> thành "└". Gắn vào label/summary/details (không gắn vào li — luật
   chặn CSS danh sách đã tắt li::before/::after). Đổi đệm cây (8.5/1/5.5/4px) thì tính lại -6px, 11.5px. */
.bxf-cay ul ul > li > :is(.bxf-la, details > summary){position:relative;}
.bxf-cay ul ul > li > :is(.bxf-la, details > summary)::before{content:""; position:absolute; left:-6px; top:11.5px; width:9px;
  border-top:1px dotted var(--bxf-ke); pointer-events:none;}
.bxf-cay ul ul > li:last-child > :is(.bxf-la, details){position:relative;}
.bxf-cay ul ul > li:last-child > :is(.bxf-la, details)::after{content:""; position:absolute; left:-7px; width:2px; top:12.5px; bottom:-1px;
  background:var(--bx-nen); pointer-events:none;}
/* 14/10/2026: đường hướng dẫn trong cây (dọc + nhánh ngang) ĐẬM hơn — #C9D4E0 chấm 1px gần như vô hình ở màn hình thường
   (người dùng thấy như không có đường từ cha xuống con đầu tiên). */
.bx-f{--bxf-ke:#8E9DB0;}
html[data-theme="dark"] .bx-f{--bxf-ke:#5E6E84;}
/* 14/10/2026: đường chấm tới SÁCH CON (vd Thư Tịch → Nhất Đại Tông Sư, Giang Hồ Phong Yên) DÙNG LẠI như tới tập (người dùng
   bật lại khi Thư Tịch có nhiều sách con; bản tạm bỏ trước đó đã gỡ). Sách con cuối nhánh có "└". */
/* Sửa bộ chọn (14/10/2026): "li > :is(details > summary)" KHÔNG khớp (summary là con của details, không phải li) → nhánh chấm
   tới SÁCH CON không bao giờ vẽ. Viết rõ cho summary của sách con. */
.bxf-cay ul ul > li > details > summary{position:relative;}
.bxf-cay ul ul > li > details > summary::before{content:""; position:absolute; left:-6px; top:11.5px; width:9px;
  border-top:1px dotted var(--bxf-ke); pointer-events:none;}
/* Icon trong bảng xếp KHÔNG kính lúp (14/10/2026): luật chung style.css ".article-body img:not(...){cursor:zoom-in}" mạnh hơn
   — icon sách/cuộn giấy trong cây và ảnh đầu khung bảng lấy con trỏ của dòng chứa nó (cây: bàn tay; đầu khung: thường).
   Các icon này cũng không mở phóng to (base.njk bỏ qua .bx-avt, .bxf-ic). */
.article-body .bx img.bxf-ic.bxf-ic.bxf-ic, .article-body .bx img.bx-avt.bx-avt.bx-avt, .bx img.bxf-ic, .bx img.bx-avt{cursor:inherit;}
.bxf-dong{cursor:pointer;}
.bxf-the{cursor:default;}
/* 14/10/2026: cột Tên rộng hơn (1.35fr, dựng ở bang-xep.cjs) để tên dài một dòng, ghi chú dài thì xuống dòng. Vạch ngăn cột ở
   HÀNG TIÊU ĐỀ đậm hơn — vạch --bx-vach #EDF1F6 trùng màu nền tiêu đề #F1F5FA nên không nhìn thấy. */
.bx-hang-dau .bx-c + .bx-c{border-left-color:var(--bx-vien);}
/* Cột số (Điểm) RỘNG CỐ ĐỊNH 78px (14/10/2026; dựng ở bang-xep.cjs): mỗi hàng là một lưới riêng, rộng "auto" làm hàng tiêu đề
   ("# Điểm") rộng hơn hàng dữ liệu ("3") → vạch ngăn trên/dưới lệch. Chữ tiêu đề không xuống dòng. */
.bx-hang-dau .bx-c span{white-space:nowrap;}
/* Cột Điểm 66px (14/10/2026, người dùng: 78px hơi rộng): ô tiêu đề cột số đệm/icon nhỏ hơn để "# Điểm" vẫn một dòng. */
.bx .bx-hang-dau .bx-c.bx-c-so{padding-left:5px; padding-right:5px; gap:3px;}
.bx .bx-hang-dau .bx-c.bx-c-so svg{width:12px; height:12px;}
/* Ô tiêu đề cột Điểm canh TRÁI với đệm bằng các ô tiêu đề khác (8px trong kiểu cây) — khoảng vạch → "#" bằng vạch → "Cách nhận". */
.bx .bx-hang-dau .bx-c.bx-c-so{justify-content:flex-start; padding-left:10px; padding-right:10px;}
.bx-f .bx-hang-dau .bx-c.bx-c-so{padding-left:8px; padding-right:8px;}
.bx .bx-hang-dau .bx-c.bx-c-so svg{display:none;} /* bỏ "#" (14/10/2026); cột Điểm max-content → vạch cách chữ "Điểm" bằng đệm ô */
/* LƯỚI CHUNG (subgrid, 14/10/2026): cả bảng là MỘT lưới cột (--bx-cot), mọi hàng (kể cả hàng có cấp con trong details.bx-nhanh)
   dùng subgrid → cột Tên co ĐÚNG theo tên dài nhất (fit-content tối đa 55%), vạch Tên|Ghi chú cách chữ cuối của tên dài nhất
   bằng đệm ô (= khoảng vạch → "Cách nhận"). Trình duyệt không có subgrid thì lùi về lưới từng hàng (dòng khai báo trước).
   Điện thoại: bảng và hàng về dạng khối như cũ. */
.bx-bang{display:grid; grid-template-columns:var(--bx-cot);}
.bx-bang > .bx-hang, .bx-bang > .bx-nhanh, .bx-nhanh > .bx-hang{grid-column:1 / -1; display:grid; grid-template-columns:var(--bx-cot); grid-template-columns:subgrid;}
.bx-nhanh::details-content{display:contents;}
@container (max-width: 560px){
  .bx-bang{display:block;}
  .bx-bang > .bx-hang, .bx-bang > .bx-nhanh, .bx-nhanh > .bx-hang{display:block;}
  .bx-bang > .bx-hang.bx-hang-dau{display:none;}
}

/* ĐÃ XONG + SỐ MỤC TRONG CÂY (15/10/2026). Nút ✓ sau tên mỗi hàng (bang-xep.cjs XONG; bấm/lưu ở tien-do.js): mờ khi chưa
   xong, xanh khi xong; luôn chiếm chỗ nên cột Tên (fit-content) đã tính dấu ✓ → vạch ngăn cách ✓ bằng đệm ô như mọi cột.
   Chỉ hiện khi tien-do.js đã chạy (.bx-js) — xem trước Decap không có nút. Cây: "(N)" sau tên tập, có mục xong → "(x/N)" xanh. */
.bx{--bx-xong:#1E8E3E; --bx-xong-mo:#C3CBD6;}
html[data-theme="dark"] .bx{--bx-xong:#57BB6A; --bx-xong-mo:#4A5566;}
.bx .bx-xong{display:none;}
.bx{--bx-o-vien:#AEE090; --bx-o-tich:#5FA86B;}
html[data-theme="dark"] .bx{--bx-o-vien:#4F7A45; --bx-o-tich:#7CCB86;}
/* Ô VUÔNG = ẢNH mẫu người dùng (chua.webp / xong.webp, 15/10/2026) — dấu V vẽ CSS bị chê. Nút rỗng canh theo chân chữ từng bị đội lên ở trình duyệt người dùng → Canh GIỮA dòng
   chữ (vertical-align:middle + nhích .09em lên = giữa chiều cao chữ in hoa) — không phụ thuộc baseline của nút rỗng.
   Hai ảnh cùng tỉ lệ nét (64px, phủ đúng khung .8em) nên bấm không đổi cỡ/vị trí. */
.bx.bx-js .bx-xong{display:inline-block; position:relative; top:-.09em; vertical-align:middle; box-sizing:border-box;
  width:.8em; height:.8em; margin:0 .45em 0 0; padding:0; border:0;   /* ô ĐẦU tên, thẳng cột (15/10/2026) */
  background:url(/assets/ui/bang-xep/chua.webp?v=2) center/100% 100% no-repeat; cursor:pointer;}
/* Đã xong: dùng ĐÚNG ảnh mẫu người dùng (ô + dấu tích, xong.webp 64px) — dấu V vẽ CSS bị chê không đẹp bằng. Ảnh phủ đúng
   khung ô (viền CSS trong suốt) nên vị trí/cỡ không đổi khi bấm. */
.bx .bx-xong[aria-pressed="true"]{background-image:url(/assets/ui/bang-xep/xong.webp?v=2);}
.bx .bx-xong:hover{filter:brightness(.9);}
.bx .bx-xong:focus{outline:none;}
.bx .bx-xong:focus-visible{outline:1px solid var(--bx-xong); outline-offset:1px;}   /* chỉ khi dùng bàn phím, viền mảnh */
.bx .bx-xong > *{display:none !important;}   /* trang dựng bằng code cũ còn <svg> ✓ trong nút → tô đen (15/10/2026) */
.bx .bxf-dem{font-weight:400; color:var(--bx-phu); white-space:nowrap;}
.bx .bxf-dem.co-xong, .bx .bx-dem.co-xong{color:var(--bx-xong);}
/* Sao lưu / Khôi phục ở đầu bảng (tien-do.js chèn .td-sao) */
/* Sao lưu | Khôi phục ở bảng xếp (15/10/2026): KHÔNG khung (người dùng bỏ thẻ khung) — chữ đậm, canh phải ngay trên bảng. */
.bx > .td-sao{display:flex; justify-content:flex-end; width:auto; margin:0 0 -4px;}
/* Số "(N)" sau tên tập làm tên dài rớt số xuống dòng → cây 212px (15/10/2026). */
.bx-f{--bxf-cay:212px;}

/* KHÔNG BO GÓC (15/10/2026, người dùng: toàn trang đã vuông góc): mọi khung, ô, nút, ảnh đại diện, nhãn trong bảng xếp vuông.
   Thẻ Sao lưu | Khôi phục: sát mép PHẢI tấm nền bảng, gọn (đệm nhỏ), vẫn đè 1px lên viền trên để liền khối. */
.bx, .bx *, .bx *::before, .bx *::after{border-radius:0 !important;}

/* CÂY CAO BẰNG TẬP ĐẦU (16/10/2026, người dùng: cây dừng ngang đáy bảng Minh Ngọc Tập, phần dư dùng thanh trượt): tập ĐẦU luôn giữ
   chỗ (ẩn bằng visibility khi chọn tập khác) và chồng cùng ô lưới với tập đang chọn → cột phải cao = max(tập đầu, tập đang xem);
   cây không tự đẩy hàng cao (contain:size), kéo giãn đúng chiều cao đó, phần dư cuộn bên trong. Không JS — chạy cả xem trước Decap.
   Điện thoại (khung < 621px) giữ cây thấp 210px phía trên như cũ. */
@container (min-width: 621px){
  .bx-f .bxf-luoi:has(.bxf-r:checked) > .bxf-cay{align-self:stretch; contain:size; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;}
  .bx-f .bxf-noi{display:grid; align-content:start;}
  .bx-f .bxf-noi > .bxf-pn{grid-area:1 / 1;}
  .bx-f .bxf-noi > .bxf-pn:first-of-type{display:block; visibility:hidden;}
  .bx-f .bxf-noi > .bxf-r:checked + .bxf-pn{visibility:visible;}
}