/*
 * Bố cục: như bước vào nhà thờ họ — cổng sơn son thếp vàng (hoành phi, câu đối) mở đầu,
 * các gian giấy xen gian sơn mài, phả đồ là gian giữa rộng nhất.
 */
:root {
  --nen: #F6F1E7;
  --nen-2: #EDE4D2;
  --mat: #FFFCF4;
  --the: #FFF8DA;
  --chu: #2A1A13;
  --chu-phu: #5B473A;
  --chu-mo: #85705F;
  --son: #A3161A;
  --son-tham: #5C0F0D;
  --vang: #B8862C;
  --vang-chu: #8A6114;
  --lam: #233A8B;
  --duong-ke: rgba(42, 26, 19, 0.14);
  --chi-1: #233A8B;
  --chi-2: #A3161A;
  --chi-3: #1F6B5C;
  --chi-4: #A35A12;
  --bong: 0 1px 2px rgba(42, 26, 19, 0.08), 0 8px 24px rgba(42, 26, 19, 0.08);

  /* Sơn mài: đầu trang, chân trang và mục tưởng niệm giữ một màu ở cả hai chế độ. */
  --sm-nen: #2B0B09;
  --sm-nen-2: #1A0706;
  --sm-chu: #F3E3C3;
  --sm-chu-phu: #D7C29C;
  --sm-vang: #E5BE68;
  --sm-son: #8E1512;
  --sm-ke: rgba(229, 190, 104, 0.32);

  --font-tieu-de: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-ten: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-than: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-han: "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  --cao-dau: 4rem;
  --hoi-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 12.5H28M14 12.5V1.5H3.5V9H10V5H7' fill='none' stroke='%23E5BE68' stroke-width='1.3'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #15100D;
    --nen-2: #1C1511;
    --mat: #211915;
    --the: #2A211A;
    --chu: #F2E7D3;
    --chu-phu: #D2C1A6;
    --chu-mo: #9C8A73;
    --son: #E8574A;
    --son-tham: #5E1511;
    --vang: #E2B65A;
    --vang-chu: #E2B65A;
    --lam: #93A8F2;
    --duong-ke: rgba(242, 231, 211, 0.14);
    --chi-1: #93A8F2;
    --chi-2: #F07A6E;
    --chi-3: #5EC4AA;
    --chi-4: #E7A45A;
    --bong: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --nen: #15100D;
  --nen-2: #1C1511;
  --mat: #211915;
  --the: #2A211A;
  --chu: #F2E7D3;
  --chu-phu: #D2C1A6;
  --chu-mo: #9C8A73;
  --son: #E8574A;
  --son-tham: #5E1511;
  --vang: #E2B65A;
  --vang-chu: #E2B65A;
  --lam: #93A8F2;
  --duong-ke: rgba(242, 231, 211, 0.14);
  --chi-1: #93A8F2;
  --chi-2: #F07A6E;
  --chi-3: #5EC4AA;
  --chi-4: #E7A45A;
  --bong: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Nền tảng ---------- */
html {
  font-size: 112.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cao-dau) + env(safe-area-inset-top, 0px) + 12px);
}
html.chu-to { font-size: 131.25%; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font-than);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--sm-nen);
}

[hidden] { display: none !important; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-tieu-de); line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--son); text-underline-offset: 0.18em; }
[lang="zh-Hant"] { font-family: var(--font-han); }
:focus-visible { outline: 3px solid var(--vang); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }

.an-chu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bo-qua {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--mat);
  color: var(--chu);
  padding: 0.6rem 1rem;
  border-radius: 6px;
}
.bo-qua:focus { left: 16px; top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---------- Đầu trang ---------- */
.dau-trang {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--sm-nen);
  color: var(--sm-chu);
  border-bottom: 1px solid var(--sm-ke);
}

.dau-trang__trong {
  max-width: 1320px;
  margin: 0 auto;
  min-height: var(--cao-dau);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
  flex: none;
}

.an-trien {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  background: var(--sm-son);
  color: #FBEBD0;
  font-family: var(--font-han);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(251, 235, 208, 0.6), inset 0 0 0 4px var(--sm-son), inset 0 0 0 5px rgba(251, 235, 208, 0.35);
}
.an-trien--lon { width: 3rem; height: 3rem; font-size: 1.9rem; }

.logo__chu { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nho { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sm-vang); }
.logo__ten { font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.12rem; }

.menu { display: flex; gap: 0.1rem; margin-left: auto; }
.menu a {
  color: var(--sm-chu);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}
.menu a:hover, .menu a[aria-current="true"] { background: rgba(229, 190, 104, 0.14); color: var(--sm-vang); }

.dieu-khien { display: flex; gap: 0.4rem; flex: none; }
.nut-tron {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--sm-ke);
  background: transparent;
  color: var(--sm-chu);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}
.nut-tron small { font-size: 0.7em; }
.nut-tron svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nut-che-do svg path { fill: currentColor; stroke: none; }
.nut-tron:hover { border-color: var(--sm-vang); color: var(--sm-vang); }
.nut-tron[aria-pressed="true"] { background: var(--sm-vang); color: var(--sm-nen); border-color: var(--sm-vang); }
.nut-menu { display: none; }

@media (max-width: 1180px) {
  .nut-menu { display: inline-grid; }
  .dieu-khien { margin-left: auto; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--sm-nen);
    border-bottom: 1px solid var(--sm-ke);
    padding-block: 0.5rem 1rem;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    max-height: calc(100vh - var(--cao-dau));
    overflow-y: auto;
  }
  .menu.mo { display: flex; }
  .menu a { font-size: 1rem; padding: 0.7rem 0.6rem; }
}

/* Màn hình hẹp: đầu trang tính bằng px để không phình ra khi bật "Chữ to". */
@media (max-width: 440px) {
  .dau-trang__trong { gap: 8px; }
  .logo { gap: 7px; flex: 1 1 auto; min-width: 0; }
  .logo__chu { min-width: 0; }
  .an-trien { flex: none; width: 34px; height: 34px; font-size: 21px; }
  .logo__nho { font-size: 10px; }
  .logo__ten { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dieu-khien { gap: 5px; }
  .nut-tron { width: 36px; height: 36px; font-size: 15px; }
  .nut-tron svg { width: 18px; height: 18px; }
}

/* ---------- Cổng: hoành phi, câu đối ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #6E1813 0%, var(--sm-nen) 55%, var(--sm-nen-2) 100%);
  color: var(--sm-chu);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--hoi-van) repeat-x;
  opacity: 0.6;
}

.hero__trong {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(2.2rem, 5vw, 3.5rem) 1.5rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.hero__giua {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hoanh-phi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 2.2rem 0.7rem;
  background: linear-gradient(180deg, #8E1512, #6A0F0D);
  border: 2px solid var(--sm-vang);
  outline: 1px solid rgba(229, 190, 104, 0.55);
  outline-offset: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  max-width: 100%;
}
.hoanh-phi__han {
  font-family: var(--font-han);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.45em;
  margin-right: -0.45em;
  color: var(--sm-vang);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.hoanh-phi__am { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #F0D9A8; }

.hero__nhan {
  margin: 1.6rem 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sm-vang);
}
.hero__ten {
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  font-weight: 700;
  color: #F7E7C2;
}
.hero__mo-ta { margin: 0.8rem 0 0; max-width: 36rem; color: var(--sm-chu-phu); font-size: 1.04rem; }
.hero__ngay {
  margin: 1.1rem 0 0;
  padding: 0.35rem 1rem;
  border-top: 1px solid var(--sm-ke);
  border-bottom: 1px solid var(--sm-ke);
  font-size: 0.92rem;
  color: var(--sm-vang);
  font-variant-numeric: tabular-nums;
}
.hero__nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.4rem; }

.cau-doi { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.cau-doi span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  letter-spacing: 0.32em;
  color: var(--sm-vang);
  background: linear-gradient(90deg, #7A120F, #8E1512 50%, #7A120F);
  padding: 1.1rem 0.55rem 0.6rem;
  border: 2px solid var(--sm-vang);
  outline: 1px solid rgba(229, 190, 104, 0.5);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.hero__dich {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.6rem;
  padding-block: 0 2.4rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: 0.8rem;
  color: #C9AF84;
  text-align: center;
}
.hero__dich em { color: #EBD3A0; }

@media (max-width: 760px) {
  .hero__trong { grid-template-columns: minmax(0, 1fr); }
  .cau-doi { display: none; }
  .hoanh-phi { padding-inline: 1.2rem; }
}

/* ---------- Nút ---------- */
.nut {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-than);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.nut--vang { background: var(--sm-vang); color: var(--sm-nen); }
.nut--vang:hover { background: #F0CD7E; }
.nut--vien { background: transparent; color: var(--sm-chu); border-color: var(--sm-ke); }
.nut--vien:hover { color: var(--sm-vang); border-color: var(--sm-vang); }

/* ---------- Dải báo ---------- */
.dai-bao { background: var(--nen-2); border-bottom: 1px solid var(--duong-ke); }
.dai-bao p {
  max-width: 1180px;
  margin: 0 auto;
  padding-block: 0.75rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: 0.86rem;
  color: var(--chu-phu);
}
.nhan-mau {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--vang-chu);
  vertical-align: 0.12em;
}

/* ---------- Các mục ---------- */
.muc { padding-block: clamp(3rem, 7vw, 5.5rem); }
.muc--dam { background: var(--nen-2); }
.muc--son-mai { background: var(--sm-nen); color: var(--sm-chu); }
.muc--noi { padding-top: 0; }

.muc__trong {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.muc__trong--rong { max-width: 1600px; }

.muc__dau { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.muc__dau h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
.muc__nhan {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vang-chu);
}
.muc--son-mai .muc__nhan { color: var(--sm-vang); }
.muc--son-mai h2 { color: #F7E7C2; }

.dau-an {
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #FBEBD0;
  background: var(--son);
  padding: 0.55rem 0.38rem 0.4rem;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(251, 235, 208, 0.5);
}
.muc--son-mai .dau-an { background: var(--sm-son); }

/* ---------- Chân trang ---------- */
.chan-trang { position: relative; background: var(--sm-nen-2); color: var(--sm-chu); }
.chan-trang::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: var(--hoi-van) repeat-x;
  opacity: 0.45;
}
.chan-trang__trong {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
  padding-block: 3.2rem 2.6rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.chan-trang p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--sm-chu-phu); }
.chan-trang .chan-trang__ten { margin: 0.8rem 0 0.3rem; font-family: var(--font-tieu-de); font-size: 1.35rem; color: #F7E7C2; }
.chan-trang .chan-trang__nhan { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sm-vang); }
.chan-trang a { color: var(--sm-vang); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Phả đồ ---------- */
.pd { position: relative; }
.pd__tab { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--duong-ke); margin-bottom: 1rem; }
.pd__tab [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0.6rem 0.9rem;
  color: var(--chu-phu);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.pd__tab [role="tab"][aria-selected="true"] { color: var(--son); border-bottom-color: var(--son); }
.pd__tab [role="tab"]:hover { color: var(--chu); }

.pd__cong-cu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.pd__tim { position: relative; flex: 1 1 18rem; min-width: 0; }
.pd__tim svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--chu-mo);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.pd__tim input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem 0.7rem 2.5rem;
  border: 1px solid var(--duong-ke);
  border-radius: 999px;
  background: var(--mat);
  color: var(--chu);
  font: inherit;
  font-size: 0.95rem;
}
.pd__tim input:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(184, 134, 44, 0.25); }
.pd__goi-y {
  position: absolute;
  z-index: 15;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--mat);
  border: 1px solid var(--duong-ke);
  border-radius: 12px;
  box-shadow: var(--bong);
  max-height: 22rem;
  overflow-y: auto;
}
.pd__goi-y li { display: flex; flex-direction: column; padding: 0.5rem 0.7rem; border-radius: 8px; cursor: pointer; }
.pd__goi-y li[aria-selected="true"], .pd__goi-y li[data-id]:hover { background: var(--nen-2); }
.gy__ten { font-family: var(--font-ten); font-style: italic; font-weight: 700; }
.gy__phu { font-size: 0.8rem; color: var(--chu-mo); }
.gy__trong { color: var(--chu-mo); font-size: 0.88rem; cursor: default; }

.pd__chi { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pd__chi button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--duong-ke);
  border-radius: 999px;
  background: var(--mat);
  color: var(--chu-phu);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.pd__chi button i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c); }
.pd__chi button[aria-pressed="true"] { background: var(--chu); border-color: var(--chu); color: var(--nen); }

.pd__khung {
  position: relative;
  height: min(76vh, 780px);
  min-height: 420px;
  border: 1px solid var(--duong-ke);
  border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, var(--duong-ke) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--mat);
  overflow: hidden;
}
.pd__svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pd__svg:active { cursor: grabbing; }
.pd__loi { padding: 2rem; color: var(--chu-phu); }

.pd__ke line { stroke: var(--duong-ke); stroke-dasharray: 2 7; }
.pd__day path { fill: none; stroke: var(--chu-mo); stroke-width: 1.3; stroke-opacity: 0.7; }
.pd__day path.day--sang { stroke: var(--son); stroke-width: 2.8; stroke-opacity: 1; }

.the { cursor: pointer; outline: none; }
.the .the__khung { fill: var(--the); stroke: var(--chu-mo); stroke-width: 1.5; }
.the[data-chi="1"] .the__khung { stroke: var(--chi-1); }
.the[data-chi="2"] .the__khung { stroke: var(--chi-2); }
.the[data-chi="3"] .the__khung { stroke: var(--chi-3); }
.the[data-chi="4"] .the__khung { stroke: var(--chi-4); }
.the.the--khuat .the__khung { fill: var(--son-tham); stroke: var(--vang); }
.the__vien { fill: none; stroke: var(--vang); stroke-opacity: 0.45; stroke-width: 0.8; }
.the__ten { font: italic 700 14px var(--font-ten); fill: var(--chu); text-anchor: middle; }
.the__vo { font: 500 11.5px var(--font-than); fill: var(--chu-phu); text-anchor: middle; }
.the__vo--ghi { font-style: italic; }
.the__huy { font: 600 10.5px var(--font-than); fill: var(--son); text-anchor: middle; letter-spacing: 0.02em; }
.the--khuat .the__ten { fill: #F3D58E; }
.the--khuat .the__vo { fill: #E9D2AA; }
.the--khuat .the__huy { fill: #F4B79F; }
.the__nhan-chi { font: 700 12px var(--font-than); letter-spacing: 0.16em; text-anchor: middle; fill: var(--chu-mo); }
.the[data-chi="1"] .the__nhan-chi { fill: var(--chi-1); }
.the[data-chi="2"] .the__nhan-chi { fill: var(--chi-2); }
.the[data-chi="3"] .the__nhan-chi { fill: var(--chi-3); }
.the[data-chi="4"] .the__nhan-chi { fill: var(--chi-4); }
.the--ghi-chu { cursor: default; }
.the--ghi-chu .the__khung { fill: var(--nen); stroke: var(--chu-mo); stroke-dasharray: 5 4; }
.the__ghi-chu { font: italic 600 12.5px var(--font-ten); fill: var(--chu-phu); text-anchor: middle; }
.the:hover .the__khung { stroke-width: 2.4; }
.the--duong .the__khung { stroke: var(--son); stroke-width: 2.4; }
.the.the--chon .the__khung { stroke: var(--son); stroke-width: 3.5; }
.the--khuat.the--chon .the__khung, .the--khuat.the--duong .the__khung { stroke: #FFD27A; }
.the:focus-visible .the__khung { stroke: var(--lam); stroke-width: 3.5; }

.pd__doi { position: absolute; inset: 0 auto 0 0; width: 7rem; pointer-events: none; overflow: hidden; }
.pd__doi > span {
  position: absolute;
  top: 0;
  left: 0.5rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--nen-2);
  border: 1px solid var(--duong-ke);
  color: var(--chu-phu);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.dk-phong {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  max-width: calc(100% - 1.5rem);
}
.dk-phong button {
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.7rem;
  border: 1px solid var(--duong-ke);
  border-radius: 999px;
  background: var(--mat);
  color: var(--chu);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: var(--bong);
}
.dk-phong button:hover { border-color: var(--vang); }
.dk-phong button[aria-pressed="true"] { background: var(--chu); color: var(--nen); }

.pd__huong-dan {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  margin: 0;
  max-width: calc(100% - 1.5rem);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--nen-2);
  color: var(--chu-mo);
  font-size: 0.74rem;
  pointer-events: none;
}

.pd__chu-giai { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--chu-phu); }
.pd__chu-giai li { display: inline-flex; align-items: center; gap: 0.45rem; }
.pd__chu-giai b { color: var(--son); }
.mau { width: 1.4rem; height: 0.95rem; border-radius: 3px; border: 2px solid var(--c, var(--chu-mo)); background: var(--the); }
.mau--khuat { background: var(--son-tham); border-color: var(--vang); border-radius: 5px 5px 2px 2px; }
.mau--ghi-chu { border-style: dashed; background: transparent; }

.pd.toan-man-hinh {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--nen);
  padding-block: calc(env(safe-area-inset-top, 0px) + 0.75rem) calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.pd.toan-man-hinh .pd__pn:not([hidden]) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pd.toan-man-hinh .pd__khung { flex: 1; height: auto; min-height: 0; }
.pd.toan-man-hinh .pd__chu-giai { display: none; }
html.khoa-cuon, html.khoa-cuon body { overflow: hidden; }

/* Biểu đồ gốc */
.bdg { position: relative; }
.bdg__khung {
  position: relative;
  height: min(72vh, 720px);
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--duong-ke);
  border-radius: 14px;
  background: #FFFDF0;
  cursor: grab;
  touch-action: none;
}
.bdg__lop { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.bdg__lop img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.pd__ghi { margin: 0.8rem 0 0; font-size: 0.86rem; color: var(--chu-mo); }
.pd__tai { margin-left: 0.5rem; font-weight: 600; }

/* Danh sách theo đời */
.ds__doi { border-bottom: 1px solid var(--duong-ke); }
.ds__doi summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem;
  cursor: pointer;
  font-family: var(--font-tieu-de);
  font-weight: 700;
  font-size: 1.15rem;
}
.ds__dem { font-family: var(--font-than); font-size: 0.82rem; font-weight: 500; color: var(--chu-mo); }
.ds__muc { margin: 0 0 1rem; padding-left: 1.4rem; columns: 2 26rem; column-gap: 2.5rem; }
.ds__muc li { break-inside: avoid; padding: 0.22rem 0; font-size: 0.93rem; }
.ds__ten { padding: 0; border: 0; background: none; color: var(--chu); font: italic 700 1rem var(--font-ten); cursor: pointer; text-align: left; }
.ds__ten:hover { color: var(--son); text-decoration: underline; }
.ds__ten--khuat { color: var(--son); }
.ds__phu { color: var(--chu-mo); font-size: 0.86rem; }
.ds__ghi-chu { font-style: italic; color: var(--chu-phu); }

/* Hồ sơ một người */
.ho-so {
  position: fixed;
  z-index: 45;
  top: calc(var(--cao-dau) + env(safe-area-inset-top, 0px) + 12px);
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: 12px;
  width: min(25rem, calc(100vw - 24px));
  box-sizing: border-box;
  overflow-y: auto;
  padding: 1.2rem 1.3rem 1.4rem;
  background: var(--mat);
  color: var(--chu);
  border: 1px solid var(--duong-ke);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.ho-so__dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ho-so__vi-tri { margin: 0 0 0.15rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vang-chu); }
.ho-so__ten { font-family: var(--font-ten); font-style: italic; font-size: 1.6rem; }
.ho-so__ten--khuat { color: var(--son); }
.ho-so__huy { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.ho-so__dong {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--duong-ke);
  background: var(--nen);
  color: var(--chu);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.ho-so__anh { display: block; width: 100%; margin-top: 1rem; border-radius: 10px; }
.ho-so__muc { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1rem; margin: 1.1rem 0 0; font-size: 0.93rem; }
.ho-so__muc dt { color: var(--chu-mo); font-size: 0.84rem; padding-top: 0.08rem; }
.ho-so__muc dd { margin: 0; min-width: 0; }
.ho-so__ds-con { margin: 0; padding: 0; list-style: none; }
.ho-so__phu { color: var(--chu-mo); font-size: 0.86rem; }
.ho-so .lk-nguoi {
  display: inline;
  padding: 0;
  margin: 0 0.25rem 0 0;
  border: 0;
  background: none;
  color: var(--son);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.ho-so__duong { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--duong-ke); }
.ho-so__duong p { margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vang-chu); }
.ho-so__duong ol { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.ho-so__duong li { display: flex; gap: 0.6rem; padding: 0.12rem 0; }
.ho-so__duong li span { flex: none; width: 3.6rem; color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.ho-so__nut { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.nut-nho {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--duong-ke);
  border-radius: 999px;
  background: var(--nen);
  color: var(--chu);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}
.nut-nho:hover { border-color: var(--vang); }

.huy {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--duong-ke);
  background: var(--nen-2);
  color: var(--chu-phu);
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 0.3rem;
  vertical-align: 0.1em;
}
.ho-so__huy .huy { margin-left: 0; }
.huy--liet-si { color: #FFF4DC; background: var(--son); border-color: var(--son); }
.huy--soat { color: var(--vang-chu); border-style: dashed; background: transparent; }

@media (max-width: 700px) {
  .pd__khung { height: 66vh; min-height: 360px; }
  .bdg__khung { height: 60vh; min-height: 320px; }
  .pd__huong-dan { display: none; }
  .pd__tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pd__tab::-webkit-scrollbar { display: none; }
  .pd__tab [role="tab"] { flex: none; padding-inline: 0.7rem; font-size: 0.9rem; }
  .dk-phong { top: auto; bottom: 0.6rem; right: 0.6rem; gap: 0.3rem; }
  .dk-phong button { height: 2.1rem; min-width: 2.1rem; padding: 0 0.55rem; font-size: 0.78rem; }
  .ho-so {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    padding-block: 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .ds__muc { columns: 1; padding-left: 1.2rem; }
}

/* ---------- Đồng hồ đếm ngược giỗ Tổ (ở cổng) ---------- */
.dem-nguoc { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.1rem; padding: 0.6rem 1.1rem; border: 1px solid var(--sm-ke); border-radius: 12px; background: rgba(0, 0, 0, 0.18); text-align: left; }
.dem-nguoc__so { font-family: var(--font-tieu-de); font-size: 2.2rem; font-weight: 700; color: var(--sm-vang); line-height: 1; font-variant-numeric: tabular-nums; }
.dem-nguoc__chu { font-size: 0.85rem; color: var(--sm-chu-phu); line-height: 1.45; }

/* ---------- Giới thiệu ---------- */
.gt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); gap: 2rem 3.5rem; align-items: start; }
.gt__chu { max-width: 40rem; font-size: 1.05rem; }
.gt__chu > p:first-child::first-letter { font-family: var(--font-tieu-de); font-weight: 700; font-size: 3.1em; float: left; line-height: 0.9; margin: 0.08em 0.12em 0 0; color: var(--son); }
.gt__bo-sung { margin-top: 1.4rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--duong-ke); border-radius: 10px; color: var(--chu-phu); font-size: 0.92rem; }
.gt__bo-sung p { margin: 0 0 0.3rem; }
.gt__bo-sung ul { margin: 0; padding-left: 1.2rem; }
.gt__so { margin: 0; display: grid; gap: 0.2rem; border-left: 1px solid var(--duong-ke); padding-left: 1.6rem; }
.gt__so div { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.35rem 0; border-bottom: 1px solid var(--duong-ke); }
.gt__so div:last-child { border-bottom: 0; }
.gt__so dd { margin: 0; min-width: 3.2ch; font-family: var(--font-tieu-de); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--son); font-variant-numeric: tabular-nums; }
.gt__so dt { color: var(--chu-phu); font-size: 0.9rem; }
.gt__chi { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.9rem; }
.gt__chi li { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem; border: 1px solid var(--duong-ke); border-radius: 12px; background: var(--mat); }
.gt__chi-so { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.gt__chi-dem { font-size: 0.85rem; color: var(--chu-mo); }
.lk-pha-do { padding: 0; border: 0; background: none; color: var(--son); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.gt__chi .lk-pha-do { font-family: var(--font-ten); font-style: italic; font-weight: 700; font-size: 1.12rem; color: var(--chu); text-decoration: none; }
.gt__chi .lk-pha-do:hover { color: var(--son); text-decoration: underline; }
@media (max-width: 760px) {
  .gt { grid-template-columns: minmax(0, 1fr); }
  .gt__so { border-left: 0; padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
}

/* ---------- Niên biểu ---------- */
.nb { list-style: none; margin: 0; padding: 0; position: relative; }
.nb::before { content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; left: 9.5rem; width: 2px; background: linear-gradient(var(--vang), var(--duong-ke)); }
.nb__muc { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2.2rem; padding: 0.4rem 0 1.6rem; }
.nb__muc::before { content: ""; position: absolute; left: calc(9.5rem - 6px); top: 0.75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--nen-2); border: 2px solid var(--vang); }
.nb__moc { margin: 0; text-align: right; font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.35rem; color: var(--son); font-variant-numeric: tabular-nums; }
.nb__noi-dung h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.nb__noi-dung p { margin: 0; color: var(--chu-phu); max-width: 40rem; }
.nb__muc--mau .nb__moc { color: var(--chu-mo); }
.nb__video { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--son); text-decoration: none; }
.nb__video::before { content: ""; border-style: solid; border-width: 0.4rem 0 0.4rem 0.65rem; border-color: transparent transparent transparent currentColor; }
.nb__video:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .nb::before { left: 0.45rem; }
  .nb__muc { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding-left: 1.8rem; }
  .nb__muc::before { left: 0; }
  .nb__moc { text-align: left; font-size: 1.15rem; }
}

/* ---------- Bộ lọc dạng nút ---------- */
.loc { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.loc button { padding: 0.42rem 0.85rem; border: 1px solid var(--duong-ke); border-radius: 999px; background: var(--mat); color: var(--chu-phu); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.loc button[aria-pressed="true"] { background: var(--chu); border-color: var(--chu); color: var(--nen); }

/* ---------- Sự kiện ---------- */
.sk__loc { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; margin-bottom: 1rem; }
.sk__nam { margin: 0 0 1rem; font-size: 0.9rem; color: var(--chu-mo); }
.sk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.sk__muc { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem; border: 1px solid var(--duong-ke); border-radius: 12px; background: var(--mat); }
.sk__ngay { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 4.4rem; border-radius: 8px; background: var(--son); color: #FBEBD0; line-height: 1.05; }
.sk__so { font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.6rem; }
.sk__thang { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.sk__loai { margin: 0 0 0.15rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vang-chu); }
.sk__noi-dung h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.sk__noi-dung p:last-child { margin: 0; color: var(--chu-phu); font-size: 0.93rem; }

/* ---------- Lịch giỗ ---------- */
.lg__hom-nay { margin: 0 0 1rem; color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.lg__chua { margin-bottom: 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--vang); border-radius: 12px; background: var(--mat); font-size: 0.93rem; color: var(--chu-phu); }
.lg__chua p { margin: 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; padding: 0.05em 0.35em; border-radius: 4px; background: var(--nen-2); color: var(--chu); }
.lg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--duong-ke); }
.lg__muc { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--duong-ke); }
.lg__ngay { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.lg__so { font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.7rem; color: var(--chu); font-variant-numeric: tabular-nums; }
.lg__thang { font-size: 0.72rem; color: var(--chu-mo); }
.lg__ten { margin: 0; font-weight: 600; }
.lg__phu { margin: 0; font-size: 0.86rem; color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.lg__con { margin: 0; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--nen); border: 1px solid var(--duong-ke); font-size: 0.84rem; font-weight: 600; white-space: nowrap; color: var(--chu-phu); }
.lg__muc--gio .lg__so { color: var(--son); }
.lg__muc--gan { background: var(--mat); border-radius: 10px; }
.lg__muc--gan .lg__con { background: var(--son); border-color: var(--son); color: #FBEBD0; }
@media (max-width: 560px) {
  .lg__muc { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .lg__con { grid-column: 2; justify-self: start; }
}

/* ---------- Liệt sĩ, thắp hương (nền sơn mài) ---------- */
.ls__dan { max-width: 40rem; color: var(--sm-chu-phu); }
.ls { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.ls__the { position: relative; padding: 1.3rem 1.2rem 1.1rem; border: 1px solid var(--sm-ke); border-radius: 12px; background: linear-gradient(180deg, rgba(229, 190, 104, 0.1), rgba(229, 190, 104, 0.02)); text-align: center; }
.ls__sao { display: block; font-size: 1.9rem; line-height: 1; color: var(--sm-vang); }
.ls__nhan { margin: 0.5rem 0 0.1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sm-vang); }
.ls__the h3 { font-family: var(--font-ten); font-style: italic; font-size: 1.35rem; color: #F7E7C2; margin-bottom: 0.3rem; }
.ls__phu { margin: 0; font-size: 0.86rem; color: var(--sm-chu-phu); }
.ls__the .lk-pha-do { margin-top: 0.7rem; color: var(--sm-vang); font-size: 0.86rem; }
.ls__ghi { margin: 1.2rem 0 0; font-size: 0.82rem; color: #BFA67E; }

.th { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 2.5rem; }
.th__chu p { max-width: 34rem; color: var(--sm-chu-phu); }
.th__dem { margin: 0.8rem 0 0; font-size: 0.86rem; min-height: 1.3em; }
.th__ban { display: flex; align-items: flex-end; gap: 2rem; padding-top: 7.5rem; }
.th__nen { position: relative; width: 14px; height: 64px; border-radius: 3px; background: linear-gradient(90deg, #E9D3A3, #F7EAC8 45%, #CFAE70); }
.th__nen i { position: absolute; left: 50%; top: -19px; width: 11px; height: 17px; margin-left: -5.5px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 72%, #FFF8D6 0 22%, #FFC25A 45%, rgba(255, 128, 48, 0) 72%); animation: lua 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.th__bat { position: relative; width: 116px; height: 54px; border-radius: 0 0 58px 58px / 0 0 44px 44px; background: linear-gradient(180deg, #C9973A, #7A5512); }
.th__bat::before { content: ""; position: absolute; left: -8px; right: -8px; top: -7px; height: 12px; border-radius: 6px; background: #E5BE68; }
.th__nhang { position: absolute; left: 50%; bottom: 44px; display: flex; gap: 13px; transform: translateX(-50%); }
.th__nhang i { position: relative; display: block; width: 3px; height: 96px; border-radius: 2px; background: linear-gradient(#5E2014 0 3px, #A23A22 3px 82%, #D9B46A 82%); transform-origin: 50% 100%; }
.th__nhang i:nth-child(1) { transform: rotate(-9deg); }
.th__nhang i:nth-child(3) { transform: rotate(9deg); }
.th__nhang i::after { content: ""; position: absolute; left: -7px; top: -12px; width: 16px; height: 16px; border-radius: 50%; background: rgba(243, 227, 195, 0.6); filter: blur(5px); opacity: 0; }
.dang-chay .th__nhang i { background: linear-gradient(#FF8A3D 0 4px, #A23A22 4px 82%, #D9B46A 82%); box-shadow: 0 -2px 8px rgba(255, 138, 61, 0.6); }
.dang-chay .th__nhang i::after { animation: khoi 3.4s ease-out infinite; }
.dang-chay .th__nhang i:nth-child(2)::after { animation-delay: 1.1s; }
.dang-chay .th__nhang i:nth-child(3)::after { animation-delay: 2.2s; }
@keyframes khoi {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 0.75; }
  100% { transform: translate(14px, -110px) scale(2.6); opacity: 0; }
}
@keyframes lua {
  from { transform: scale(1) rotate(-3deg); }
  to { transform: scale(1.1, 1.18) rotate(3deg); }
}
@media (max-width: 640px) {
  .th { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .th__ban { padding-top: 7rem; }
}

/* ---------- Khuyến học ---------- */
.kh__dan { max-width: 42rem; color: var(--chu-phu); }
.kh__bang { position: relative; margin-top: 1.4rem; padding: clamp(1.3rem, 4vw, 2.2rem); background: var(--mat); border: 2px solid var(--vang); outline: 1px solid var(--vang); outline-offset: -8px; border-radius: 4px; }
.kh__bang > .nhan-mau { position: absolute; top: 0.9rem; right: 1rem; }
.kh__dau { margin-bottom: 1.3rem; text-align: center; }
.kh__dau h3 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); }
.kh__tong { margin: 0.35rem 0 0; color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.kh__nhom { padding: 1rem 0 0.5rem; border-top: 1px solid var(--duong-ke); }
.kh__nhom h4 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; margin: 0 0 0.7rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vang-chu); }
.kh__nhom h4 span { font-size: 0.82rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.kh__ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.6rem 1.5rem; }
.kh__ds li { display: flex; flex-direction: column; }
.kh__ten { font-family: var(--font-ten); font-style: italic; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.kh__noi { font-size: 0.82rem; color: var(--chu-mo); }

/* ---------- Gia huấn ---------- */
.gh__mau { color: var(--chu-phu); font-size: 0.92rem; }
.gh { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.2rem 2.5rem; }
.gh li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.6rem; padding: 0.75rem 0; border-bottom: 1px solid var(--duong-ke); }
.gh__so { font-family: var(--font-tieu-de); font-weight: 700; color: var(--son); }
.gh li p { margin: 0; }
.gh__ca-dao { margin: 2.2rem auto 0; max-width: 34rem; text-align: center; }
.gh__ca-dao p { margin: 0; font-family: var(--font-tieu-de); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.5; color: var(--chu); }
.gh__ca-dao cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chu-mo); }

/* ---------- Thư viện ảnh ---------- */
.tv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.2rem; }
.tv__anh, .tv__trong { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.tv__anh { padding: 0; border: 1px solid var(--duong-ke); background: var(--mat); cursor: zoom-in; }
.tv__anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.tv__anh:hover img { transform: scale(1.03); }
.tv__trong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border: 1px dashed var(--duong-ke); background: var(--nen-2); color: var(--chu-mo); font-size: 0.85rem; }
.tv__trong svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.tv__ten { margin: 0.6rem 0 0; font-weight: 600; }
.tv__mo-ta { margin: 0; font-size: 0.86rem; color: var(--chu-mo); }
.tv__video { max-width: 52rem; margin-bottom: 2rem; }
.tv__anh--video { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.tv__phat { position: absolute; left: 50%; top: 50%; width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; border-radius: 50%; background: rgba(163, 22, 26, 0.92); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.tv__phat::after { content: ""; position: absolute; left: 1.7rem; top: 1.3rem; border-style: solid; border-width: 0.9rem 0 0.9rem 1.4rem; border-color: transparent transparent transparent #FBEBD0; }
.tv__anh--video:hover .tv__phat { transform: scale(1.08); }
.tv__album { margin-bottom: 2.2rem; }
.tv__album h3 { font-size: 1.3rem; }
.tv__album > .tv__mo-ta { margin: 0.25rem 0 0.9rem; }
.tv__luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 10.5rem), 1fr)); gap: 0.5rem; }
.tv__luoi .tv__anh { border-radius: 6px; }

.hop-anh { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 3.5rem) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 2rem) max(16px, env(safe-area-inset-left, 0px)); background: rgba(16, 8, 6, 0.92); }
.hop-anh figure { margin: 0; min-width: 0; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.hop-anh img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: 6px; }
.hop-anh figcaption { margin-top: 0.7rem; color: var(--sm-chu); font-size: 0.92rem; text-align: center; }
.hop-anh__video { width: min(calc(100vw - 10rem), 64rem, calc((100vh - 10rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.hop-anh__video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 6px; background: #000; }
/* Điện thoại: nút lật trước, sau xuống dưới để ảnh và video được rộng hết màn hình. */
@media (max-width: 640px) {
  .hop-anh { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); }
  .hop-anh__lui, .hop-anh__toi { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem); }
  .hop-anh__lui { left: max(16px, env(safe-area-inset-left, 0px)); }
  .hop-anh__toi { right: max(16px, env(safe-area-inset-right, 0px)); }
  .hop-anh__video { width: min(calc(100vw - 32px), calc((100vh - 12rem) * 16 / 9)); }
}
.hop-anh__nut { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--sm-ke); background: rgba(0, 0, 0, 0.35); color: var(--sm-chu); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.hop-anh__dong { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.8rem); right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- Liên hệ (chân trang) ---------- */
.lh { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--sm-chu-phu); }
.lh li { display: flex; flex-direction: column; align-items: flex-start; padding: 0.3rem 0; }
.lh__ten { color: var(--sm-chu); font-weight: 600; }
.chan-trang .lh__sdt { padding: 0.15rem 0; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.chan-trang .lh__sdt:hover { text-decoration: underline; }