/* THẺ NHÓM [thenhom] — MẪU 3 "thumbnail + chia ô như Excel" (10/10/2026). HTML dựng ở scripts/the-nhom.cjs.
   Mỗi nhóm: THẺ ẢNH bên trái (ảnh phủ kín, tối dần xuống đáy, nhãn góc trên trái, tên trắng + dòng phụ có ghim),
   bên phải là bảng gọn: hàng tiêu đề có icon, mỗi mục một hàng, các ô chia cột.
   Dùng chung trang thật (base.njk, chỉ bài viết) và khung xem trước Decap (registerPreviewStyle).
   Container query: khung ≤ 560px (điện thoại) thẻ ảnh lên trên, mỗi hàng thành khối có nhãn cột. */
.tn{
  --tn-nen:#FFFFFF; --tn-vien:#E3E8F0; --tn-vach:#EDF1F6; --tn-phu:#5F6368; --tn-chu:#1F2937;
  --tn-trong-nen:#F1F3F6; --tn-trong-vien:#CBD3DE; --tn-trong-icon:#A0AAB8;
  --tn-soc:#F8FAFC; --tn-dau-bang:#F1F5FA;
  --tn-ghim:#1E8E3E; --tn-ghim-nen:#EEF8F1; --tn-nguoi:#C5221F; --tn-nguoi-nen:#FDF0F0;
  --tn-qua:#1A56C4; --tn-qua-nen:#EEF4FE; --tn-khac:#7B4BC4; --tn-khac-nen:#F4EFFC;
  container-type:inline-size;
  display:flex; flex-direction:column; gap:12px; margin:18px 0;
}
html[data-theme="dark"] .tn{
  --tn-nen:#1E2530; --tn-vien:#334155; --tn-vach:#2B3442; --tn-phu:#A9B2BF; --tn-chu:#E4E6EB;
  --tn-trong-nen:#2A3240; --tn-trong-vien:#465266; --tn-trong-icon:#6E7A8C;
  --tn-soc:#222A36; --tn-dau-bang:#263041;
  --tn-ghim:#6FD08C; --tn-ghim-nen:#1F3229; --tn-nguoi:#F28B82; --tn-nguoi-nen:#3A2426;
  --tn-qua:#8AB4F8; --tn-qua-nen:#1F2C42; --tn-khac:#C58AF9; --tn-khac-nen:#2E2540;
}
.tn-nhom{display:grid; grid-template-columns:clamp(124px, 20cqw, 200px) minmax(0,1fr); gap:10px; align-items:start;
  padding:10px; background:var(--tn-nen); border:1px solid var(--tn-vien); border-radius:12px; box-shadow:0 1px 3px rgba(16,24,40,.05);}

/* ---- Thẻ ảnh nhóm (trái) — dính khi cuộn qua nhóm dài ---- */
.tn-dau{position:sticky; top:calc(var(--header-h, 64px) + 12px); height:clamp(150px, 22cqw, 180px); overflow:hidden; border-radius:10px;
  background:#1B2430; color:#fff; isolation:isolate;}
.tn-dau-trong{background:linear-gradient(135deg, #2C5364 0%, #203A43 55%, #0F2027 100%);}
.tn-banner, .article-body img.tn-banner{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; margin:0; border-radius:0; display:block;}
.tn-dau::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.74) 100%);}
.tn-nhan-nhom{position:absolute; z-index:2; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px;
  padding:2px 10px 2px 8px; border-radius:999px; background:rgba(18,40,36,.55); border:1px solid rgba(255,255,255,.65);
  color:#fff; font-size:12px; font-weight:600; line-height:1.6; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.tn-nhan-nhom svg{width:14px; height:14px; flex:none;}
.tn-chu{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:0 12px 11px 14px;}
.tn-ten{font-size:18px; line-height:1.25; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45);}
.tn-mota{display:flex; align-items:center; gap:5px; margin-top:4px; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.5);}
.tn-mota svg{width:13px; height:13px; flex:none;}
.tn-mota svg circle + circle{fill:#1B2430;}

/* ---- Bảng bên phải: mỗi mục MỘT HÀNG, các ô chia cột như Excel ---- */
.tn-bang{--tn-cot:minmax(108px,1.05fr) repeat(var(--tn-n), minmax(0,1fr));
  min-width:0; border:1px solid var(--tn-vien); border-radius:8px; overflow:hidden; font-size:13px; line-height:1.45;}
.tn-hang{display:grid; grid-template-columns:var(--tn-cot); border-top:1px solid var(--tn-vach);}
.tn-hang:first-child{border-top:0;}
.tn-hang:nth-child(odd):not(.tn-hang-dau){background:var(--tn-soc);}
.tn-c{min-width:0; padding:6px 8px; border-left:1px solid var(--tn-vach); overflow-wrap:anywhere; color:var(--tn-chu);}
.tn-c:first-child{border-left:0;}
.tn-hang-dau{background:var(--tn-dau-bang);}
.tn-hang-dau .tn-c{display:flex; align-items:center; gap:5px; padding:6px 9px; font-size:12px; font-weight:700; line-height:1.3;}
.tn-hang-dau .tn-c svg{flex:none; width:14px; height:14px;}
.tn-hang-dau .tn-c-ten{color:var(--tn-chu);}
.tn-hang-dau .tn-ghim{color:var(--tn-ghim);} .tn-hang-dau .tn-nguoi{color:var(--tn-nguoi);}
.tn-hang-dau .tn-qua{color:var(--tn-qua);} .tn-hang-dau .tn-khac{color:var(--tn-khac);}
.tn-hang-dau svg circle + circle, .tn-hang-dau svg rect[fill="#fff"]{fill:var(--tn-dau-bang);}
.tn-c-ten{display:flex; align-items:center; gap:7px;}
/* Cột tên hẹp: ảnh vật phẩm nhỏ lại cho chữ đủ chỗ. */
@container (max-width: 760px){ .article-body img.tn-anh, .tn-anh{width:26px; height:26px;} .tn-anh-trong svg{width:14px; height:14px;} .tn-bang{font-size:12.5px;} }
.article-body img.tn-anh, .tn-anh{flex:none; width:32px; height:32px; object-fit:cover; border-radius:6px; margin:0; display:block; max-width:none;
  border:1px solid var(--tn-vien);}
.tn-anh-trong{display:flex; align-items:center; justify-content:center; background:var(--tn-trong-nen); color:var(--tn-trong-icon); border:1px dashed var(--tn-trong-vien);}
.tn-anh-trong svg{width:17px; height:17px;}
.tn-the-chu{min-width:0;}
.tn-ten-muc{font-weight:700; line-height:1.35;}
.tn-phu{font-size:12px; line-height:1.4; color:var(--tn-phu);}
.tn-trong{color:var(--tn-phu); opacity:.6;}

/* Điện thoại: thẻ ảnh lên trên; mỗi hàng thành một khối, nhãn cột hiện trước từng ô. */
@container (max-width: 560px){
  .tn-nhom{grid-template-columns:1fr; gap:10px; padding:8px;}
  .tn-dau{position:relative; top:auto; height:clamp(120px, 36cqw, 150px);}
  .tn-ten{font-size:18px;}
  .tn-hang.tn-hang-dau{display:none;}
  .tn-hang{display:block; padding:8px 10px; border-top:1px solid var(--tn-vach);}
  .tn-hang-dau + .tn-hang{border-top:0;}
  .tn-c{border-left:0; padding:0;}
  .tn-c-ten{margin-bottom:5px;}
  .tn-c-o{display:grid; grid-template-columns:minmax(96px, 34%) minmax(0,1fr); column-gap:8px; padding:2px 0;}
  .tn-c-o::before{content:attr(data-nhan); font-size:12px; font-weight:700; color:var(--tn-o-mau);}
  .tn-ghim{--tn-o-mau:var(--tn-ghim);} .tn-nguoi{--tn-o-mau:var(--tn-nguoi);}
  .tn-qua{--tn-o-mau:var(--tn-qua);} .tn-khac{--tn-o-mau:var(--tn-khac);}
}
/* ===== THẺ DỌC [thedoc] (10/10/2026): ảnh DỌC bên trái (tỉ lệ 512×730 như ảnh thành tựu trong game),
   bên phải tên cam đậm / mô tả / các dòng thêm có nhãn ("Cách thực hiện"). HTML: dungDoc trong scripts/the-nhom.cjs. */
.td{
  --td-nen:#FFFFFF; --td-vien:#E3E8F0; --td-ten:#C2410C; --td-chu:#1F2937; --td-phu:#5F6368;
  --td-them-nen:#FFF7ED; --td-them-vien:#FDBA74; --td-nhan:#9A3412;
  --td-trong-nen:#F1F3F6; --td-trong-vien:#CBD3DE; --td-trong-icon:#A0AAB8;
  container-type:inline-size; display:flex; flex-direction:column; gap:12px; margin:18px 0;
}
html[data-theme="dark"] .td{
  --td-nen:#1E2530; --td-vien:#334155; --td-ten:#FB923C; --td-chu:#E4E6EB; --td-phu:#A9B2BF;
  --td-them-nen:#2E241C; --td-them-vien:#7C4A24; --td-nhan:#FDBA74;
  --td-trong-nen:#2A3240; --td-trong-vien:#465266; --td-trong-icon:#6E7A8C;
}
.td-the{display:grid; grid-template-columns:clamp(96px, 20cqw, 140px) minmax(0,1fr); gap:14px; align-items:start;
  padding:10px; background:var(--td-nen); border:1px solid var(--td-vien); border-radius:12px; box-shadow:0 1px 3px rgba(16,24,40,.05);}
.td-khung-anh{min-width:0;}
.td-anh, .article-body img.td-anh{display:block; width:100%; max-width:none; height:auto; aspect-ratio:512 / 730; object-fit:cover;
  margin:0; border-radius:8px; border:1px solid var(--td-vien);}
.td-anh-trong{display:flex; align-items:center; justify-content:center; background:var(--td-trong-nen); color:var(--td-trong-icon); border:1px dashed var(--td-trong-vien);}
.td-anh-trong svg{width:30px; height:30px;}
.td-noi{min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px;}
.td-ten{font-size:19px; line-height:1.3; font-weight:700; color:var(--td-ten);}
.td-mota{font-size:14px; line-height:1.55; color:var(--td-chu); overflow-wrap:anywhere;}
.td-them{margin-top:2px; padding:8px 11px; background:var(--td-them-nen); border-left:3px solid var(--td-them-vien); border-radius:0 8px 8px 0;}
.td-nhan{font-size:12.5px; line-height:1.4; font-weight:700; color:var(--td-nhan); margin-bottom:2px;}
.td-gt{font-size:13.5px; line-height:1.55; color:var(--td-chu); overflow-wrap:anywhere;}
@container (max-width: 480px){
  .td-the{gap:11px; padding:8px;}
  .td-ten{font-size:17px;}
  .td-mota{font-size:13.5px;}
}