@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=Noto+Serif+TC:wght@500;700&display=swap");

:root {
  --giay: #edefe9;
  --giay-sau: #e2e6df;
  --muc: #1e2328;
  --mo: #59626b;
  --lam: #2a4e73;
  --lam-nhat: #b8c5d1;
  --ke: #cfd5cd;
  --chu-viet: "Literata", "Noto Serif", Georgia, serif;
  --chu-han: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --giay: #161a1e;
    --giay-sau: #1e2328;
    --muc: #e1e4e6;
    --mo: #98a1aa;
    --lam: #92b2d4;
    --lam-nhat: #3b5168;
    --ke: #2c3339;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--chu-viet);
  font-size: 17px;
  line-height: 1.6;
}
[lang|="zh"], .han { font-family: var(--chu-han); }
a { color: var(--lam); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lam); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------ đầu & chân trang */
.dau-trang {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  max-width: 62rem; margin: 0 auto; padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--ke);
}
.ten-site { color: var(--muc); text-decoration: none; font-weight: 600; }
.ten-site span { color: var(--lam); margin-right: 0.35em; }
.dau-trang nav { display: flex; gap: 1.25rem; }
.dau-trang nav a { white-space: nowrap; }
.dau-trang nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.chan-trang {
  max-width: 62rem; margin: 4rem auto 0; padding: 1.5rem 1rem 3rem;
  border-top: 1px solid var(--ke); color: var(--mo); font-size: 0.875rem;
}
.chan-trang p { max-width: 42rem; margin: 0 0 0.5rem; }

/* ------------------------------------------------ trang chủ */
.bia {
  max-width: 62rem; margin: 0 auto; padding: 3.5rem 1rem 2.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.75rem; align-items: start;
}
/* Thẻ đề tên dọc, như nhãn đề trên bìa kinh */
.de-ky {
  display: flex; flex-direction: column; align-items: center; gap: 0.3em;
  font-family: var(--chu-han); font-weight: 700;
  font-size: 2.6rem; line-height: 1;
  color: var(--lam);
  padding: 1rem 0.7rem;
  border: 3px double var(--lam);
  background: var(--giay-sau);
  margin: 0;
}
.bia .de-ky { grid-column: 1; grid-row: 1 / span 3; }
.bia > .tieu-de-bia, .bia > .o-tim, .bia > .so-lieu { grid-column: 2; }
.bia h1 { font-size: 2.6rem; line-height: 1.15; font-weight: 600; margin: 0.2rem 0 0.9rem; letter-spacing: -0.01em; }
.bia .gioi-thieu { font-size: 1.15rem; max-width: 34rem; margin: 0 0 2rem; color: var(--mo); }
.so-lieu { color: var(--mo); font-size: 0.95rem; margin: 0; }
.so-lieu strong { color: var(--muc); font-variant-numeric: tabular-nums; font-weight: 600; }

.o-tim { display: flex; max-width: 34rem; }
.o-tim input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1.05rem; color: var(--muc);
  padding: 0.7rem 0.85rem;
  background: var(--giay); border: 1px solid var(--lam); border-right: 0;
  border-radius: 3px 0 0 3px;
}
.o-tim input::placeholder { color: var(--mo); opacity: 0.85; }
.o-tim button {
  font: inherit; font-weight: 600; padding: 0 1.2rem; cursor: pointer;
  color: var(--giay); background: var(--lam); border: 1px solid var(--lam);
  border-radius: 0 3px 3px 0;
}
.o-tim input:focus-visible { outline-offset: -3px; }

.ba-cot {
  max-width: 62rem; margin: 0 auto; padding: 0 1rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem;
}
.ba-cot h2, .ve h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.75rem; }
.moi-dang { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ke); }
.moi-dang li { border-bottom: 1px solid var(--ke); }
.moi-dang a { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.75rem; padding: 0.6rem 0; text-decoration: none; color: var(--muc); }
.moi-dang a:hover .han { color: var(--lam); }
.moi-dang .ma { color: var(--lam); font-variant-numeric: tabular-nums; font-size: 0.9rem; padding-top: 0.2rem; }
.moi-dang .han { font-size: 1.1rem; }
.moi-dang .hv { display: block; color: var(--mo); font-size: 0.9rem; }
.ds-bo { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.ds-bo li { break-inside: avoid; padding: 0.15rem 0; display: flex; justify-content: space-between; gap: 0.5rem; }
.ds-bo .dem { color: var(--mo); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.ve { max-width: 62rem; margin: 3.5rem auto 0; padding: 0 1rem; }
.ve > div { max-width: 40rem; }
.ve p { margin: 0 0 1rem; }
.lien-ket { list-style: none; padding: 0; margin: 0; }
.lien-ket li { padding: 0.25rem 0; }
.lien-ket span { color: var(--mo); }

/* ------------------------------------------------ mục lục */
.muc-luc { max-width: 62rem; margin: 0 auto; padding: 2rem 1rem 0; }
.muc-luc h1 { font-size: 2rem; font-weight: 600; margin: 0 0 1.25rem; }
.loc {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: end;
  padding-bottom: 1rem;
}
.loc label { display: block; font-size: 0.85rem; color: var(--mo); margin-bottom: 0.25rem; }
.loc input, .loc select {
  font: inherit; color: var(--muc); background: var(--giay);
  border: 1px solid var(--lam-nhat); border-radius: 3px; padding: 0 0.7rem; width: 100%; height: 2.75rem;
}
.loc input:focus, .loc select:focus { border-color: var(--lam); }
.ket-qua { color: var(--mo); font-size: 0.95rem; margin: 0 0 0.5rem; min-height: 1.6em; }

.nhom { margin: 0; }
.nhom h2 {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 0.55rem 0 0.4rem;
  background: var(--giay);
  font-size: 0.95rem; font-weight: 600; color: var(--lam);
  border-bottom: 2px solid var(--lam);
}
.nhom h2 .han { font-weight: 500; margin-left: 0.4em; }
.dong {
  display: grid; grid-template-columns: 6.6rem 1fr auto; gap: 0.35rem 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--ke);
}
.dong .ma { font-variant-numeric: tabular-nums; color: var(--lam); padding-top: 0.25rem; font-size: 0.95rem; }
.dong .ten { min-width: 0; }
.dong .han { font-size: 1.3rem; line-height: 1.35; overflow-wrap: anywhere; }
.dong .hv { color: var(--mo); }
.dong .quyen { color: var(--mo); font-size: 0.9rem; white-space: nowrap; padding-top: 0.3rem; font-variant-numeric: tabular-nums; }
.dong .hanh-dong { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.9rem; }
.dong .ghi-chu { color: var(--mo); font-style: italic; }
.dong.khac { grid-template-columns: 1fr auto; }
.dong.khac .hanh-dong { grid-column: 1 / -1; }
.trong { padding: 2rem 0; color: var(--mo); }
.trong button { font: inherit; color: var(--lam); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------ trang bài lưu */
.bai { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 0; }
.duong-dan { font-size: 0.9rem; color: var(--mo); margin: 0 0 1.25rem; }
.bai h1 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; margin: 0 0 0.5rem; }
.bai h1 .ma { display: block; font-size: 0.95rem; color: var(--lam); font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.bai h1 .han { display: block; font-size: 2.1rem; line-height: 1.3; font-weight: 700; }
.bai h1 .hv { display: block; font-size: 1.15rem; color: var(--mo); font-weight: 400; margin-top: 0.2rem; }
.thong-tin { color: var(--mo); font-size: 0.9rem; margin: 0 0 1.5rem; }
.hop-tai { border: 3px double var(--lam); padding: 0.9rem 1.1rem; margin: 0 0 2rem; background: var(--giay-sau); }
.hop-tai p { margin: 0 0 0.4rem; }
.hop-tai .doi { font-variant-numeric: tabular-nums; }
.ds-file { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ds-file li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-top: 1px solid var(--ke); }
.ds-file a { overflow-wrap: anywhere; }
.ds-file .co { color: var(--mo); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.noi-dung { overflow-wrap: anywhere; }
.noi-dung img { display: block; margin: 1rem auto; border: 1px solid var(--ke); }
.noi-dung table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.noi-dung td, .noi-dung th { border: 1px solid var(--ke); padding: 0.3rem 0.5rem; }
.noi-dung ruby { ruby-position: over; }
.noi-dung rt { font-family: var(--chu-viet); font-size: 0.55em; color: var(--mo); }

/* ------------------------------------------------ từ vựng */
.bang-chu {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0 0 1rem; margin: 0 0 0.75rem; border-bottom: 1px solid var(--ke);
}
.bang-chu a, .bang-chu span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 0.3rem;
  font-weight: 600; border-radius: 3px;
}
.bang-chu a { color: var(--lam); text-decoration: none; border: 1px solid var(--lam-nhat); }
.bang-chu a:hover { border-color: var(--lam); background: var(--giay-sau); }
.bang-chu a.mo { opacity: 0.4; }
.bang-chu .trong-chu { color: var(--mo); opacity: 0.45; font-weight: 400; }
.tu-vung .nhom h2 { font-size: 1.35rem; }
.bia-tu-vung { padding-bottom: 1.25rem; }
.muc-luc.tu-vung { padding-top: 1rem; }
.bia-tu-vung .o-tim input { border-right: 1px solid var(--lam); border-radius: 3px; }
.tu { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--ke); color: var(--muc); text-decoration: none; }
.tu .dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.8rem; }
.tu .han { font-size: 1.35rem; line-height: 1.35; overflow-wrap: anywhere; }
.tu .hv { color: var(--lam); font-size: 0.95rem; }
.tu:hover .han { color: var(--lam); }
.tu .tom-tat {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.2rem; color: var(--mo); font-size: 0.9rem;
}
.tu .ghi-chu { display: block; color: var(--mo); font-size: 0.85rem; font-style: italic; }
.dieu-huong {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ke);
}
.dieu-huong a { display: block; color: var(--muc); text-decoration: none; }
.dieu-huong .sau { text-align: right; }
.dieu-huong .nhan { display: block; color: var(--mo); font-size: 0.8rem; }
.dieu-huong .han { display: block; font-size: 1.15rem; }
.dieu-huong .hv { color: var(--lam); font-size: 0.85rem; }
.dieu-huong a:hover .han { color: var(--lam); }

/* ------------------------------------------------ điện thoại */
@media (max-width: 640px) {
  .dau-trang { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .dau-trang nav { gap: 1rem; }
  body { font-size: 16px; }
  .bia { grid-template-columns: auto 1fr; gap: 1.25rem; padding-top: 2rem; }
  .de-ky { font-size: 1.5rem; padding: 0.7rem 0.45rem; }
  .bia h1 { font-size: 1.8rem; }
  .bia .gioi-thieu { font-size: 1rem; margin-bottom: 1.25rem; }
  .bia .de-ky { grid-row: 1; }
  .bia > .o-tim, .bia > .so-lieu { grid-column: 1 / -1; }
  .ba-cot { grid-template-columns: 1fr; gap: 2.5rem; }
  .loc { grid-template-columns: 1fr 1fr; }
  .loc .o-chu { grid-column: 1 / -1; }
  .dong { grid-template-columns: 1fr auto; }
  .dong .ma { padding-top: 0; }
  .dong .ten { grid-column: 1 / -1; grid-row: 2; }
  .dong .quyen { grid-column: 2; grid-row: 1; padding-top: 0; }
  .dong .hanh-dong { grid-column: 1 / -1; }
  .moi-dang a { grid-template-columns: 5.6rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}
[hidden] { display: none !important; }