/* ═══════════════════════════════════════════════════════════════════
   AISkill — hệ thiết kế "tạp chí số"
   Chữ có chân khổ lớn cho tiêu đề, chữ không chân cho phần vận hành.
   Lưới chặt, đường kẻ mảnh, rất ít màu: màu chỉ dùng để cảnh báo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Nền màu ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --giay: #faf8f5;
  --giay-sau: #f2eee8;
  --the: #ffffff;
  --muc: #17140f;
  --muc-2: #5a5148;
  /* Đo WCAG 31/08: #948a7e chỉ đạt 3,20:1 trên nền giấy — chữ tác giả, số sao,
     số thứ tự và chân trang đều dưới chuẩn AA. Hạ xuống #72695f cho đạt 4,5:1
     kể cả trên nền giấy sâu #f2eee8, chỗ tương phản thấp nhất. */
  --muc-3: #72695f;
  --ke: #e3ddd3;
  --ke-dam: #cfc7ba;

  --nhan: #b03d1e;
  --nhan-nhat: #f7ebe5;
  --duoc: #2d6a4a;
  --duoc-nhat: #e9f2ec;
  --luu: #8a6410;
  --luu-nhat: #f8f0dc;
  --cam: #98302e;
  --cam-nhat: #f9eae8;

  --chan: "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;
  --khong-chan: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --so: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rong: 1240px;
  --nhip: clamp(18px, 3vw, 34px);
}

:root[data-nen="toi"], :root:not([data-nen="sang"]) {
  /* mặc định theo hệ thống, thẻ data-nen ghi đè */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-nen="sang"]) {
    --giay: #100e0c;
    --giay-sau: #17140f;
    --the: #1a1713;
    --muc: #f3eee6;
    --muc-2: #b3a89b;
    --muc-3: #8c8073;
    --ke: #2b2620;
    --ke-dam: #3d362d;
    --nhan: #e5825f;
    --nhan-nhat: #2a1a13;
    --duoc: #7cc09a;
    --duoc-nhat: #14251c;
    --luu: #d5b160;
    --luu-nhat: #251f11;
    --cam: #e08a83;
    --cam-nhat: #281614;
  }
}
:root[data-nen="toi"] {
  --giay: #100e0c;
  --giay-sau: #17140f;
  --the: #1a1713;
  --muc: #f3eee6;
  --muc-2: #b3a89b;
  --muc-3: #8c8073;
  --ke: #2b2620;
  --ke-dam: #3d362d;
  --nhan: #e5825f;
  --nhan-nhat: #2a1a13;
  --duoc: #7cc09a;
  --duoc-nhat: #14251c;
  --luu: #d5b160;
  --luu-nhat: #251f11;
  --cam: #e08a83;
  --cam-nhat: #281614;
}

/* ── Nền tảng ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* Bất kỳ phần tử nào được khai display riêng (flex, grid…) đều làm mất hiệu lực
   thuộc tính hidden của trình duyệt. Đặt luật này một lần cho cả trang, thay vì
   nhớ khai lại ở từng chỗ — đã dính bẫy đó hai lần. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--khong-chan);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--nhan); color: var(--giay); }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 3px; border-radius: 3px; }

.bao { max-width: var(--rong); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

/* Chuyển trang mượt giữa danh mục và trang chi tiết */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Đầu trang ───────────────────────────────────────────────────── */
.dinh {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--giay) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--ke);
  view-transition-name: dinh;
}
.dinh .bao { display: flex; align-items: center; gap: 14px; height: 58px; }
.hieu {
  font-family: var(--chan); font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
/* Logo là chữ M xanh rừng đậm — đặt trên nền tối thì gần như chìm hẳn,
   nên nâng sáng lại khi trang ở chế độ nền tối. */
.hieu .logo { width: 30px; height: 30px; display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-nen="sang"]) .hieu .logo {
    background: #f2eee8; border-radius: 7px; padding: 2px;
    box-sizing: content-box; width: 26px; height: 26px;
  }
}
:root[data-nen="toi"] .hieu .logo {
  background: #f2eee8; border-radius: 7px; padding: 2px;
  box-sizing: content-box; width: 26px; height: 26px;
}
.hieu i { font-style: normal; color: var(--nhan); }
.dinh nav { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-size: 13.5px; color: var(--muc-2); }
.dinh nav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.dinh nav a:hover { color: var(--muc); border-bottom-color: var(--nhan); }
.nut-nen {
  border: 1px solid var(--ke); background: transparent; color: var(--muc-2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center; font-family: inherit;
}
.nut-nen:hover { border-color: var(--nhan); color: var(--nhan); }

/* ── Mở đầu ──────────────────────────────────────────────────────── */
.mo-dau { padding: clamp(40px, 7vw, 84px) 0 0; }
.dong-nho {
  font-family: var(--so); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muc-3); margin: 0 0 clamp(14px, 2vw, 22px);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.dong-nho b { color: var(--nhan); font-weight: 600; }
h1.to {
  font-family: var(--chan); font-weight: 700;
  font-size: clamp(38px, 8.4vw, 104px); line-height: .96; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}
h1.to em { font-style: italic; color: var(--nhan); }
/* Dòng dẫn: tên thư viện ở khổ lớn nói mình là ai, dòng này nói mình đứng đâu */
.dan-dat {
  font-family: var(--chan); font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.3; letter-spacing: -.02em; color: var(--muc-2);
  margin: clamp(14px, 2vw, 22px) 0 0; max-width: 34ch; text-wrap: balance;
}
.dan-dat em { font-style: italic; color: var(--muc); }
.dan {
  display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 42px);
  margin: clamp(24px, 4vw, 44px) 0 0; padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--ke);
}
@media (min-width: 860px) { .dan { grid-template-columns: 1.35fr 1fr; } }
.dan p { margin: 0; font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muc-2); max-width: 62ch; }
.dan p b { color: var(--muc); font-weight: 600; }
.bang-so { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ke); border: 1px solid var(--ke); }
.bang-so div { background: var(--giay); padding: 12px 14px; }
.bang-so span { display: block; font-family: var(--so); font-size: 26px; line-height: 1.1; letter-spacing: -.03em; }
.bang-so small { display: block; font-size: 11.5px; color: var(--muc-3); margin-top: 3px; letter-spacing: .02em; }
.bang-so .canh span { color: var(--cam); }

/* ── Chọn giúp tôi ───────────────────────────────────────────────── */
.khuyen { padding: clamp(26px, 4vw, 44px) 0 clamp(10px, 2vw, 20px); }
.khuyen-hop {
  border: 1px solid var(--ke); background: var(--the);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .khuyen-hop:has(#khuyen-ket:not([hidden])) { grid-template-columns: 1.15fr 1fr; } }
.khuyen-hoi { padding: clamp(20px, 3vw, 30px); }
.khuyen-hoi h2 {
  font-family: var(--chan); font-weight: 700; font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: -.025em; margin: 0 0 4px;
}
.khuyen-hoi > p { margin: 0 0 20px; color: var(--muc-2); font-size: 15px; }
.hoi { border-top: 1px solid var(--ke); padding: 13px 0 0; margin-bottom: 13px; position: relative; }
.hoi b { display: inline-block; font-size: 14.5px; margin-bottom: 9px; font-weight: 600; }
.so-hoi {
  font-family: var(--so); font-size: 10.5px; color: var(--muc-3);
  margin-right: 8px; letter-spacing: .1em;
}
.dap { display: flex; flex-wrap: wrap; gap: 6px; }
.khuyen-ket {
  padding: clamp(20px, 3vw, 30px); background: var(--giay-sau);
  border-top: 1px solid var(--ke);
}
@media (min-width: 900px) { .khuyen-ket { border-top: 0; border-left: 1px solid var(--ke); } }
.khuyen-ket h3 {
  font-family: var(--so); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-3); margin: 0 0 14px; font-weight: 500;
}
.khuyen-the {
  display: block; text-decoration: none; padding: 13px 0;
  border-top: 1px solid var(--ke); position: relative;
}
.khuyen-the:first-of-type { border-top: 0; padding-top: 0; }
.khuyen-the:hover strong { color: var(--nhan); }
.hang-goi { font-family: var(--so); font-size: 11px; color: var(--nhan); }
.khuyen-the strong {
  display: block; font-family: var(--chan); font-weight: 600; font-size: 17px;
  line-height: 1.25; letter-spacing: -.02em; margin: 2px 0 4px;
}
.khuyen-giao { display: block; font-size: 14px; color: var(--muc-2); }
.khuyen-ly { display: block; font-size: 12.5px; color: var(--muc-3); margin-top: 6px; }
.khuyen-trong { margin: 0; font-size: 14.5px; color: var(--muc-2); }
/* Hiện khi bộ lọc hẹp làm ra ít hơn 3 mục — nói thẳng thay vì để người đọc
   tự thắc mắc sao nhan đề một đằng danh sách một nẻo. */
.khuyen-it { margin: 0 0 16px; font-size: 13.5px; color: var(--muc-3); font-style: italic; }

/* ── Bộ lọc ──────────────────────────────────────────────────────── */
.thanh-loc {
  position: sticky; top: 58px; z-index: 30;
  background: color-mix(in srgb, var(--giay) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ke);
  padding: 10px 0;
}
.hang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hang + .hang { margin-top: 7px; }
.hang > .nhan-hang {
  font-family: var(--so); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-3); width: 68px; flex-shrink: 0;
}
.chip {
  appearance: none; border: 1px solid var(--ke); background: transparent; color: var(--muc-2);
  font-family: inherit; font-size: 13.5px; padding: 4px 12px; border-radius: 2px;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s; white-space: nowrap;
}
.chip:hover { border-color: var(--ke-dam); color: var(--muc); }
.chip[aria-pressed="true"] { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.chip sup { font-family: var(--so); font-size: 10px; opacity: .6; margin-left: 5px; vertical-align: super; }
.chip.canh[aria-pressed="true"] { background: var(--cam); border-color: var(--cam); color: #fff; }
.o-tim { position: relative; flex: 1; min-width: 180px; max-width: 300px; }
.o-tim input {
  width: 100%; border: 1px solid var(--ke); background: var(--the); color: var(--muc);
  font-family: inherit; font-size: 13.5px; padding: 5px 34px 5px 11px; border-radius: 2px;
}
.o-tim kbd {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-family: var(--so); font-size: 10px; color: var(--muc-3);
  border: 1px solid var(--ke); border-radius: 3px; padding: 0 4px; pointer-events: none;
}
.o-tim input:not(:placeholder-shown) + kbd { display: none; }
.ngan { flex: 1 0 10px; }
.nhan-hang-2 { width: auto; margin-right: 2px; }

/* ── Lưới bài ────────────────────────────────────────────────────── */
.dem-ket-qua {
  font-family: var(--so); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muc-3); margin-left: auto; white-space: nowrap;
}
.dem-ket-qua b { color: var(--muc); }
@media (max-width: 640px) { .dem-ket-qua { margin-left: 0; width: 100%; } }
/* Đường kẻ giữa các ô là khe lưới chứ không phải viền từng thẻ — như vậy khi
   lọc bớt, lưới không bị hụt hay thừa đường kẻ ở cột ngoài cùng. */
.luoi {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--ke); border-block: 1px solid var(--ke);
  margin-top: 20px;
}
@media (min-width: 700px)  { .luoi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .luoi { grid-template-columns: repeat(3, 1fr); } }

.bai {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 22px 22px 20px; text-decoration: none;
  background: var(--giay);
  content-visibility: auto; contain-intrinsic-size: auto 260px;
  transition: background .2s;
  overflow: hidden;
}
.bai:hover { background: var(--the); }
.bai::after {
  content: ""; position: absolute; inset: 0; border-top: 2px solid var(--nhan);
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.bai:hover::after { transform: scaleX(1); }
/* ── Ảnh bìa ─────────────────────────────────────────────────────── */
.bia {
  margin: 0 0 4px; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--giay-sau); border: 1px solid var(--ke); border-radius: 2px;
}
/* `cover` ở đây KHÔNG cắt mất gì: scripts/dong_khung.py đã đóng mọi ảnh về đúng
   800×500, tức cùng tỉ lệ 16/10 với ô này, phần thừa lấp bằng chính ảnh đó làm
   mờ. Trước đây phải dùng `contain` vì ảnh đủ mọi tỉ lệ, cắt kiểu cover làm mất
   chữ ở mép ("avoid-ai-writing" từng bị cụt chữ đầu) — nay hết lý do đó.
   ⚠ Ba ô ảnh dưới đây phải giữ CÙNG một tỉ lệ 16/10, lệch là cắt mất thật. */
.bia img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.bai:hover .bia img { transform: scale(1.035); }
.bia-tu-ve { background: var(--giay-sau); }
.bia-ve { width: 100%; height: 100%; display: block; }
.bia-luoi     { stroke: var(--ke); stroke-width: 1; }
.bia-luoi-dam { stroke: var(--ke-dam); stroke-width: 1; }
.bia-net      { fill: none; stroke: var(--ke-dam); stroke-width: 1.4; }
.bia-to       { fill: var(--ke-dam); }
.bia-nhan     { fill: none; stroke: var(--nhan); stroke-width: 2; }
.bia-nhan-to  { fill: var(--nhan); }
.bia-nhan-net { stroke: var(--nhan); stroke-width: 2; }
.bia-so       { font-family: var(--so); font-size: 30px; fill: var(--ke-dam); opacity: .75; }
/* Bìa chữ: con số đặc trưng bên trái, mô-típ hình học của nhóm việc bên phải.
   Mô-típ để nhạt vì nó chỉ là vân nền — con số mới là thứ phải đọc trước. */
.bia-so-to    { font-family: var(--chan); font-weight: 700; font-size: 116px; letter-spacing: -.04em; fill: var(--muc); }
.bia-gach     { stroke: var(--nhan); stroke-width: 3; }
.bia-chu      { font-family: var(--khong-chan); font-size: 15px; fill: var(--muc-2); }
.bia-mo-tip   { opacity: .8; }
.bia-vach     { stroke: var(--ke-dam); stroke-width: 1; }

.stt {
  font-family: var(--so); font-size: 11px; letter-spacing: .1em; color: var(--muc-3);
  display: flex; align-items: center; gap: 9px;
}
.stt::after { content: ""; flex: 1; height: 1px; background: var(--ke); }
.bai h2 {
  font-family: var(--chan); font-weight: 600; font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.22; letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.bai .giao { margin: 0; font-size: 14.5px; color: var(--muc-2); }
.bai .day { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bai .ai { font-family: var(--so); font-size: 11px; color: var(--muc-3); margin-left: auto; }

/* ── Nhãn ────────────────────────────────────────────────────────── */
.nh {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.nh::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nh-de      { background: var(--duoc-nhat); color: var(--duoc); }
.nh-vua     { background: var(--luu-nhat);  color: var(--luu); }
.nh-kythuat { background: var(--cam-nhat);  color: var(--cam); }
.nh-nhom    { background: var(--giay-sau);  color: var(--muc-2); }
.nh-nhom::before { display: none; }
.nh-canh    { background: transparent; color: var(--cam); border: 1px solid currentColor; }
.nh-canh::before { display: none; }

.trong { padding: 60px 0; color: var(--muc-3); font-size: 15px; border-bottom: 1px solid var(--ke); }

/* ── Ô bài: thẻ + hai nút phụ ────────────────────────────────────── */
.o-bai { position: relative; display: flex; flex-direction: column; background: var(--giay); }
.o-bai .bai { flex: 1; }
.nut-the {
  display: flex; gap: 6px; padding: 0 22px 18px; background: inherit;
  opacity: 0; transition: opacity .18s;
}
.o-bai:hover .nut-the, .o-bai:focus-within .nut-the { opacity: 1; }
@media (hover: none) { .nut-the { opacity: 1; } }
.nut-nho {
  border: 1px solid var(--ke); background: transparent; color: var(--muc-2);
  font-family: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 2px;
  cursor: pointer; text-decoration: none; transition: .15s;
}
.nut-nho:hover { border-color: var(--nhan); color: var(--nhan); }
.nut-ss[aria-pressed="true"] { background: var(--muc); border-color: var(--muc); color: var(--giay); }

/* ── Thanh đối chiếu nổi ─────────────────────────────────────────── */
.thanh-ss {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--muc); color: var(--giay); border-radius: 3px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28); font-size: 13.5px;
  animation: len .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes len { from { transform: translate(-50%, 14px); opacity: 0; } }
.thanh-ss .nut-nho { border-color: color-mix(in srgb, var(--giay) 35%, transparent); color: var(--giay); }
.thanh-ss .nut-nho:hover { border-color: var(--giay); color: var(--giay); }
.nut-ss-mo {
  background: var(--giay); color: var(--muc); border: 0; font-family: inherit;
  font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 2px; cursor: pointer;
}
.nut-ss-mo:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hộp thoại ───────────────────────────────────────────────────── */
dialog.hop {
  width: min(680px, 92vw); max-height: 88vh; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ke); border-radius: 3px;
  background: var(--giay); color: var(--muc);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .3);
}
dialog.hop-rong { width: min(1080px, 94vw); }
dialog.hop::backdrop { background: rgba(10, 8, 6, .6); backdrop-filter: blur(3px); }
dialog.hop[open] { animation: hien .2s ease both; }
@keyframes hien { from { opacity: 0; transform: translateY(8px); } }
.hop-dong {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 12px; z-index: 2;
  border: 1px solid var(--ke); background: var(--giay); color: var(--muc-2);
  font-family: var(--so); font-size: 11px; padding: 5px 10px; border-radius: 2px; cursor: pointer;
}
.hop-dong:hover { border-color: var(--nhan); color: var(--nhan); }
.hop-ten {
  font-family: var(--chan); font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.14; letter-spacing: -.028em; margin: 8px 0 0; max-width: 24ch;
}
.hop .day-nhan { margin: 14px 0 22px; }
.hop .giao-duoc { margin-bottom: 20px; }
.hop h3 { font-family: var(--chan); font-size: 17px; margin: 26px 0 10px; letter-spacing: -.01em; }
.hop ul { margin: 0; padding: 0; list-style: none; }
.hop li { padding: 7px 0 7px 20px; border-bottom: 1px solid var(--ke); font-size: 14.5px; position: relative; }
.hop li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 6px; height: 1px; background: var(--ke-dam); }
.hop-bia { aspect-ratio: 16/10; margin: 18px 0 0; }
.hop-bia img { width: 100%; height: 100%; object-fit: cover; }
.hop-chan {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ke);
}
.hop-chan .nut-kho { margin: 0; padding: 9px 16px; }
.hop-meta { font-family: var(--so); font-size: 11.5px; color: var(--muc-3); margin-left: auto; }

/* ── Bảng đối chiếu ──────────────────────────────────────────────── */
.ss-cuon { overflow-x: auto; margin-top: 20px; }
.ss-bang { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.ss-bang th, .ss-bang td {
  text-align: left; vertical-align: top; padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--ke);
}
.ss-bang thead th { border-bottom: 2px solid var(--muc); padding-bottom: 10px; }
.ss-bang thead th a {
  font-family: var(--chan); font-weight: 600; font-size: 16px; line-height: 1.24;
  letter-spacing: -.015em; text-decoration: none;
}
.ss-bang thead th a:hover { color: var(--nhan); }
.ss-bang tbody th {
  font-weight: 500; color: var(--muc-3); font-size: 12.5px; width: 150px;
  padding-right: 18px;
}
.ss-bang ul { margin: 0; }
.ss-bang li { padding: 3px 0 3px 14px; border: 0; font-size: 13.5px; }
.ss-bang li::before { top: 12px; left: 0; }
.ss-nho { display: block; font-size: 12px; color: var(--muc-3); margin-top: 4px; }
.ss-cau { font-style: italic; color: var(--muc-2); }

/* ── Khối giải thích cuối trang chủ ──────────────────────────────── */
.giai-thich { padding: clamp(40px, 6vw, 76px) 0; border-bottom: 1px solid var(--ke); }
.giai-thich h2, .chi-tiet h2 {
  font-family: var(--chan); font-weight: 700; font-size: clamp(23px, 3vw, 30px);
  letter-spacing: -.025em; margin: 0 0 18px; line-height: 1.2;
}
.cot-2 { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 820px) { .cot-2 { grid-template-columns: repeat(2, 1fr); } }
.muc-gt { border-top: 1px solid var(--ke); padding-top: 14px; }
.muc-gt h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; }
.muc-gt p { margin: 0; font-size: 14.5px; color: var(--muc-2); }

/* ── Trang chi tiết ──────────────────────────────────────────────── */
.tien-do {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 50;
  background: var(--nhan); transform-origin: left; transform: scaleX(0);
  animation: chay linear both; animation-timeline: scroll(root block);
}
@keyframes chay { to { transform: scaleX(1); } }

.chi-tiet { padding: clamp(26px, 4vw, 46px) 0 clamp(50px, 7vw, 90px); }
.duong-ve {
  font-family: var(--so); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muc-3); text-decoration: none;
}
.duong-ve:hover { color: var(--nhan); }
.tieu-de-bai { border-bottom: 1px solid var(--ke); padding-bottom: clamp(20px, 3vw, 32px); margin-top: 18px; }
.tieu-de-bai h1 {
  font-family: var(--chan); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 58px); line-height: 1.03; letter-spacing: -.032em;
  margin: 10px 0 0; max-width: 22ch; text-wrap: balance;
  view-transition-name: tieu-de;
}
.day-nhan { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 16px; }
.than { display: grid; gap: clamp(24px, 4vw, 52px); padding-top: clamp(24px, 3vw, 38px); }
@media (min-width: 940px) { .than { grid-template-columns: minmax(0, 1fr) 268px; } }

.than .bia { margin-bottom: 8px; aspect-ratio: 16 / 10; }
.nguon-anh { margin: 0 0 24px; font-size: 12px; color: var(--muc-3); font-family: var(--so); }
.nguon-anh a { color: var(--muc-2); }
.giao-duoc { border-left: 2px solid var(--nhan); padding: 2px 0 2px 18px; margin-bottom: 26px; }
.giao-duoc b {
  display: block; font-family: var(--so); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nhan); margin-bottom: 5px;
}
.giao-duoc p { margin: 0; font-family: var(--chan); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; }
.mo-ta { font-size: 17px; color: var(--muc-2); margin: 0 0 6px; }
.than h2 { font-size: clamp(19px, 2vw, 23px); margin: 34px 0 14px; }
.than h2:first-of-type { margin-top: 30px; }
.than ul { margin: 0; padding-left: 0; list-style: none; }
.than li { padding: 8px 0 8px 22px; border-bottom: 1px solid var(--ke); font-size: 15.5px; position: relative; }
.than li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 1px; background: var(--ke-dam);
}

.hop-canh { border: 1px solid currentColor; color: var(--cam); padding: 14px 16px; margin: 22px 0; }
.hop-canh b {
  display: block; font-family: var(--so); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 5px;
}
.hop-canh p { margin: 0; font-size: 14.5px; color: var(--muc-2); }

.cau {
  display: flex; gap: 14px; align-items: flex-start;
  border-bottom: 1px solid var(--ke); padding: 13px 0;
}
.cau:first-of-type { border-top: 1px solid var(--ke); }
.cau .sotu { font-family: var(--so); font-size: 11px; color: var(--muc-3); padding-top: 4px; }
.cau p { margin: 0; flex: 1; font-size: 15.5px; }
.chep {
  border: 1px solid var(--ke); background: transparent; color: var(--muc-3);
  font-family: var(--so); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; cursor: pointer; flex-shrink: 0; border-radius: 2px;
}
.chep:hover { border-color: var(--nhan); color: var(--nhan); }
.chep[data-xong] { border-color: var(--duoc); color: var(--duoc); }

/* Cột phải */
.ben {
  align-self: start; font-size: 14px;
}
@media (min-width: 940px) { .ben { position: sticky; top: 88px; } }
.the-ky { border-top: 2px solid var(--muc); }
.the-ky dl { margin: 0; }
.the-ky div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ke); }
.the-ky dt { color: var(--muc-3); font-size: 12.5px; flex-shrink: 0; }
.the-ky dd { margin: 0; text-align: right; font-size: 13px; }
.the-ky dd.so { font-family: var(--so); }
.nut-kho {
  display: block; text-align: center; margin-top: 16px; padding: 11px 16px;
  background: var(--muc); color: var(--giay); text-decoration: none;
  font-size: 14px; font-weight: 600; border-radius: 2px;
}
.nut-kho:hover { background: var(--nhan); }
.ghi-chu-ben { font-size: 12.5px; color: var(--muc-3); margin: 12px 0 0; }

.cung-loai { border-top: 1px solid var(--ke); margin-top: clamp(34px, 5vw, 56px); padding-top: 22px; }
.cung-loai .luoi-nho { display: grid; gap: 1px; background: var(--ke); border: 1px solid var(--ke); }
@media (min-width: 760px) { .cung-loai .luoi-nho { grid-template-columns: repeat(2, 1fr); } }
.cung-loai a { background: var(--giay); padding: 15px 17px; text-decoration: none; display: block; transition: background .18s; }
.cung-loai a:hover { background: var(--the); }
.cung-loai strong { display: block; font-family: var(--chan); font-weight: 600; font-size: 16px; line-height: 1.28; letter-spacing: -.015em; }
.cung-loai span { display: block; font-family: var(--so); font-size: 10.5px; color: var(--muc-3); margin-top: 6px; }

/* ── Chân trang ──────────────────────────────────────────────────── */
footer { padding: clamp(30px, 4vw, 48px) 0 clamp(40px, 6vw, 64px); }
footer .cot-2 { align-items: start; }
footer p { margin: 0 0 8px; font-size: 13.5px; color: var(--muc-3); max-width: 60ch; }
footer b { color: var(--muc-2); }
footer a { color: var(--muc-2); }
footer code { font-family: var(--so); font-size: 12px; }