/*
 * Tân cổ điển, dựng như một vựng tập bảo tàng: TRANG là giấy ngà ấm, chữ nâu đen, chỉ vàng cổ và
 * son đỏ triều Nguyễn làm điểm nhấn. HIỆN VẬT - tấm khảm và bảng thơ - vẫn là hai mảng sẫm nổi
 * trên giấy, vì 56 chữ xà cừ màu ngà chỉ đọc được trên nền tối.
 *
 * Bộ biến dưới đây là của trang giấy; mục "hai mảng sẫm" bên dưới đặt lại đúng bộ biến ấy cho
 * vùng tối, nên mọi quy tắc nằm trong đó tự đổi tông chứ không phải viết lại lần hai.
 */
:root {
  --bg: #f4ede0;
  --bg-2: #efe5d4;
  --panel: rgba(43, 33, 26, 0.035);
  --panel-2: rgba(43, 33, 26, 0.07);
  --line: rgba(60, 46, 33, 0.18);
  --line-strong: rgba(122, 94, 48, 0.45);
  --royal: #6e1c26;
  /* son đỏ triều Nguyễn - chỉ dùng làm điểm nhấn rất nhỏ, nhiều là thành sặc */
  --gold: #9a7b3f;
  --gold-2: #7a5e2b;
  --gold-soft: rgba(154, 123, 63, 0.12);
  --ink: #2b211a;
  --ink-2: #574837;
  --muted: #8a7a63;
  --sans: "Be Vietnam Pro", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Be Vietnam Pro","Noto Serif", "Times New Roman", Georgia, serif;
  --display: "Be Vietnam Pro", "Playfair Display", "Times New Roman", Georgia, serif;
  --han: "Noto Serif TC", "PMingLiU", "MingLiU", "Songti TC", "Noto Serif CJK TC", serif;
  --pad-wrap: 24px;
  /* lề hai bên trang */
  --pad-board: 26px;
  /* lề trong bảng thơ - công thức tính cỡ ô chữ bên dưới dựa vào hai số này */
  --r-lg: 5px;
  --r-md: 4px;
  --r-sm: 3px;
  --bong: 0 26px 60px rgba(60, 42, 22, 0.16);
  --bong-nho: 0 8px 22px rgba(60, 42, 22, 0.11);
  --g: 46px;
  /* cỡ ô chữ trên bảng thơ */
  --cell: 106px;
  /* cỡ ô sprite (px ảnh gốc) - khớp WHEEL_GEOMETRY.cell */
  --sheet: 848px 742px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* chừa sẵn chỗ thanh cuộn: lúc màn mở đầu tắt, trang không bị xê dịch */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background:
    radial-gradient(1000px 520px at 50% -14%, rgba(110, 28, 38, 0.075) 0%, transparent 62%),
    radial-gradient(1200px 560px at 12% -6%, rgba(154, 123, 63, 0.12) 0%, transparent 64%),
    radial-gradient(900px 620px at 100% 26%, rgba(110, 28, 38, 0.05) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
  background-attachment: fixed;
  color: var(--ink);
  font: 19px var(--serif);
  min-height: 100vh;
}

/* Lớp hạt mịn rất nhẹ cho nền bớt phẳng, giống mặt sơn mài - chỉ nằm dưới nội dung. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

a {
  color: var(--gold-2);
}

::selection {
  background: rgba(154, 123, 63, 0.25);
}

button {
  font: inherit;
}

.han {
  font-family: var(--han);
}

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

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-wrap) 88px;
  transition: opacity 0.5s ease;
}

/* ---------- đầu trang chung: logo + menu (index, xep-hang, tai-khoan) ---------- */
/* Một dải mảnh trên cùng, KHÔNG dính theo khi cuộn: ở chế độ chơi tấm khảm tự trôi xuống sát mép
   trên màn hình, một thanh dính sẽ che mất hàng chữ trên cùng. */
.dau-trang {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 251, 243, 0.7), rgba(255, 251, 243, 0.2));
}

.dau-trang-trong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px var(--pad-wrap);
}

.thuong-hieu {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.thuong-hieu img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 251, 243, 0.9), 0 0 0 4px var(--line-strong), 0 6px 16px rgba(60, 42, 22, 0.14);
}

.thuong-hieu-chu {
  display: grid;
  gap: 4px;
  min-width: 0;
  line-height: 1.15;
}

.thuong-hieu-chu small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.thuong-hieu-chu b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.thuong-hieu:hover .thuong-hieu-chu b {
  color: var(--gold-2);
}

.thuong-hieu:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 99px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu-muc {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.menu-muc:hover {
  color: var(--gold-2);
  background: var(--gold-soft);
}

.menu-muc:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.menu-muc[hidden] {
  display: none;
}

/* mục đang ở: chữ vàng + gạch vàng mảnh bên dưới */
.menu-muc[aria-current] {
  color: var(--gold-2);
}

.menu-muc[aria-current]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* Tài khoản: viên thuốc có ảnh đại diện tròn - chữ cái đầu của tên, chưa đăng nhập thì hình người */
.menu-tk {
  margin-left: 8px;
  padding: 5px 15px 5px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.menu-tk[aria-current] {
  background: var(--gold-soft);
  border-color: var(--gold);
}

.menu-tk[aria-current]::after {
  display: none;
}

.menu-tk-anh {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #2a1e0c;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5e2b' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 19.5c1.3-3.3 4-5 7.2-5s5.9 1.7 7.2 5'/%3E%3C/svg%3E") center / 17px no-repeat;
}

.menu-tk.co-nguoi .menu-tk-anh {
  background: linear-gradient(145deg, #f6e3a8 0%, #c9a24f 55%, #9c7630 100%);
}

.menu-tk-ten {
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Không đủ chỗ cho logo và menu trên một hàng: menu xuống hàng riêng, trải đều bề ngang. */
@media (max-width: 760px) {
  .dau-trang-trong {
    padding: 10px var(--pad-wrap) 8px;
  }

  .menu {
    width: 100%;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .menu-tk {
    margin-left: 0;
  }
}

@media (max-width: 640px) {

  .thuong-hieu {
    gap: 11px;
  }

  .thuong-hieu img {
    width: 42px;
    height: 42px;
  }

  .thuong-hieu-chu small {
    font-size: 10px;               /* 9px trên điện thoại khó đọc */
    letter-spacing: 0.08em;
  }

  .thuong-hieu-chu b {
    font-size: 17px;
  }

  .menu-muc {
    min-height: 40px;              /* đủ cao để bấm bằng ngón tay, bằng viên "Tài khoản" bên cạnh */
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .menu-muc[aria-current]::after {
    left: 10px;
    right: 10px;
  }

  .menu-tk {
    font-size: 12.5px;
  }

  .menu-tk-ten {
    max-width: 9em;
  }
}

/* ---------- nội dung hiện ra khi vào trang ---------- */
@keyframes tho-hien {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes tho-ro {
  from { opacity: 0; }
  to { opacity: 1; }
}

.masthead { animation: tho-hien 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.readings { animation: tho-hien 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* vòng chữ chỉ hiện dần, KHÔNG trượt: trang đo vị trí chữ ngay lúc này, đừng làm nó xê dịch */
.theatre  { animation: tho-ro 0.9s 0.2s ease both; }
.study    { animation: tho-hien 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.foot     { animation: tho-hien 0.9s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .masthead, .readings, .theatre, .study, .foot { animation: none; }
}

/* ---------- đầu trang ---------- */
/* Dựng theo trục giữa như bìa sách cổ điển: nhãn - tên bài - tác giả - hoa văn - dẫn nhập. */
.masthead {
  max-width: 900px;
  margin: 0 auto;
  padding: 54px 0 38px;
  text-align: center;
}

.eyebrow {
  display: block;
  margin: 0 0 22px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}

/* gạch vàng mảnh nằm trên dòng nhãn, canh giữa */
.eyebrow::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

h1 {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
  font-weight: 500;
}

h1 .han {
  margin: 0;
  color: var(--gold);
  font-size: clamp(40px, 7.4vw, 78px);
  line-height: 1;
  letter-spacing: 0.17em;
  text-indent: 0.17em;
}

.h1-vi {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(31px, 4.8vw, 54px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.byline {
  margin: 17px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16x;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
}

/* Hoa văn ngăn: hai nét chỉ và một hạt kim cương ở giữa. */
.orn {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(380px, 78%);
  margin: 30px auto 0;
}

.orn::before,
.orn::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}

.orn::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.orn i {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}

.lede {
  margin: 28px auto 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.85;
  max-width: 62ch;
  text-wrap: pretty;
}

.lede em {
  color: var(--ink);
}

.lede-them {
  display: inline-block;
  margin-top: 18px;
  padding: 4px 2px;
  color: var(--gold-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.lede-them::after {
  content: " ↓";
  letter-spacing: 0;
}

.lede-them:hover {
  border-bottom-color: var(--gold);
}

/* ---------- chọn cách đọc ---------- */
/* Bốn tấm biển bằng nhau, đánh số La Mã - số dựng bằng CSS nên không phải đụng vào app.js. */
/* chế độ Chơi giấu danh sách bài (js/game.js đặt hidden) - display: grid bên dưới sẽ đè mất nếu thiếu dòng này */
.readings[hidden] {
  display: none;
}

/* Danh sách bài ẩn đi thì mất luôn phần đệm của nó, mà khung viền tấm khảm lại lồi ra ngoài 9px
   (outline-offset) - không bù khoảng này thì khung đè lên hàng nút Xem / Chơi. */
.readings[hidden] + .theatre {
  margin-top: 40px;
}

/* Danh sách bài chia hai vùng - thất ngôn, ngũ ngôn - mỗi vùng một khung, tiêu đề có dấu 七 / 五 như
   nút chọn thể ở chế độ Chơi, rồi tới lưới nút của vùng đó (js/app.js dựng). */
.readings {
  display: grid;
  gap: 22px;
  padding: 22px 0 40px;
}

.readings-vung {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 251, 243, 0.4);
}

.readings-dau {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.readings-dau i {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #2a1e0c;
  font-family: var(--han);
  font-size: 23px;
  font-style: normal;
  line-height: 1;
  background: linear-gradient(145deg, #f6e3a8 0%, #c9a24f 55%, #9c7630 100%);
  box-shadow: 0 0 0 1px rgba(154, 123, 63, 0.35), 0 4px 10px rgba(60, 42, 22, 0.15);
}

.readings-dau span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.readings-dau b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
}

.readings-dau small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.readings-dau em {
  margin-left: auto;
  color: var(--gold-2);
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: right;
}

.readings-luoi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.readings-rong {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  font-style: italic;
}

/* nhóm "Bạn đã tìm ra": cách đọc người chơi tự tìm ở chế độ Chơi (ngoài 8 bài) - trải hết các cột */
.readings-tim {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 -2px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.readings-tim::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* lưới thẻ nhỏ cho các cách đọc tự tìm ra: chỉ số và vần, xếp kín hàng (điện thoại 4-5 thẻ một hàng) */
.readings-tim-luoi {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
}

.chip.chip-tim {
  justify-items: center;
  gap: 1px;
  padding: 9px 4px 8px;
  text-align: center;
  border-style: dashed;
  border-color: rgba(201, 160, 82, 0.55);
  border-radius: var(--r-sm, 10px);
}

.chip.chip-tim::before {
  display: none;                  /* không ghi số La Mã: số đã là nội dung chính của thẻ */
}

.chip.chip-tim b {
  font-size: 20px;
  line-height: 1.05;
}

.chip.chip-tim small {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.chip {
  position: relative;
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  padding: 20px 22px 19px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* số La Mã theo đúng số bài (app.js ghi vào data-so), không đếm theo vị trí: bài khoá chưa hiện thì
   các bài đang hiện vẫn mang đúng số của mình - "Bài thơ số 9" là IX chứ không thành III */
.chip::before {
  content: attr(data-so);
  color: var(--gold);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 0.72;
}

.chip b {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.chip small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

.chip:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: var(--bong-nho);
}

.chip:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.chip[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--gold-soft), transparent);
  box-shadow: var(--bong-nho);
}

/* nẹp vàng trên đầu tấm biển đang chọn */
.chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.chip[aria-pressed="true"] b {
  color: var(--gold-2);
}

.chip[aria-pressed="true"]::before {
  color: var(--gold-2);
  opacity: 1;
}

.chip.invite {
  animation: invite 2.4s ease-in-out infinite;
}

@keyframes invite {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(230, 199, 141, 0);
  }

  50% {
    box-shadow: 0 0 0 1px var(--gold), 0 6px 22px rgba(122, 94, 48, 0.3);
  }
}

.chip-more {
  grid-column: 1 / -1;
  padding-top: 6px;
  text-align: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

/* Từ 700px (máy tính bảng dựng đứng trở lên): hai vùng thất ngôn / ngũ ngôn đứng cạnh nhau. Mỗi thể chỉ
   có vài bài (bản có máy chủ mở sẵn một bài mỗi thể) - trải hết bề ngang thì trống cả mảng lớn, đẩy tấm
   khảm xuống thấp. Mỗi vùng: một cột nút khi vùng còn hẹp (700-999px), hai cột từ 1000px. Dòng "Còn ...
   bài đang khoá" (.chip-more) vẫn trải hết hai cột. Dưới 700px hai vùng xếp chồng (xem khối 699px). */
@media (min-width: 700px) {
  .readings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readings-luoi {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1000px) {
  .readings-luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* vùng còn hẹp (700-999px, hai vùng cạnh nhau): dòng đếm "1 bài · còn 3 bài khoá" xuống dưới tiêu đề,
   kẻo tiêu đề và dòng đếm cùng gãy đôi */
@media (min-width: 700px) and (max-width: 999px) {
  .readings-dau {
    flex-wrap: wrap;
  }

  .readings-dau em {
    flex-basis: 100%;
    margin-left: 58px;
    text-align: left;
  }
}

/* ---------- hai mảng sẫm nằm trên giấy ---------- */
/*
 * Bảng thơ và các khung chú giải là "hiện vật": nền sẫm để chữ xà cừ màu ngà đọc được. Đặt lại
 * đúng bộ biến của trang ngay tại đây, mọi quy tắc bên trong tự sang tông tối.
 */
.board,
.tip,
.lac-tip,
.ban-chinh,
.bxh-bang,
.ho-so,
.ma-khoa li,
.phong-to {
  /* Phải khai luôn `color`: chữ nào bên trong không tự đặt màu thì mới thừa hưởng mực ngà của
     vùng sẫm, chứ không lấy mực nâu đen của trang giấy rồi chìm nghỉm. */
  color: var(--ink);
  --panel: rgba(255, 246, 232, 0.04);
  --panel-2: rgba(255, 246, 232, 0.08);
  --line: rgba(233, 214, 181, 0.14);
  --line-strong: rgba(226, 196, 138, 0.46);
  --gold: #e3c48b;
  --gold-2: #f7e6bd;
  --gold-soft: rgba(230, 199, 141, 0.1);
  --ink: #f3ece0;
  --ink-2: #cdc3b2;
  --muted: #988f80;
}

/* ---------- sân khấu: vòng chữ + bảng thơ ---------- */
.theatre {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  scroll-margin-top: 16px;
}

.stage {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 40px) * 1600 / 1256);
  aspect-ratio: 1600 / 1256;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0d0a08;
  /* Bo tranh kiểu cổ: nét mảnh sát mép ảnh, chừa một dải giấy, rồi nét vàng bao ngoài.
     Dùng outline nên dải giấy là nền trang thật, không phải màu tô gần đúng. */
  box-shadow: 0 0 0 1px rgba(60, 46, 33, 0.3), var(--bong);
  outline: 1px solid rgba(122, 94, 48, 0.5);
  outline-offset: 9px;
}

/* Bóng đổ nhẹ vào trong mép ảnh cho tấm khảm chìm vào trang, không bị dán lên như miếng dán. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.stage-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1256px;
  transform-origin: 0 0;
}

.stage-bg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.ghosts {
  position: absolute;
  inset: 0;
}

.ghost {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  background: url(../assets/glyphs.png) 0 0 / var(--sheet) no-repeat;
  opacity: 0;
  transition: opacity 0.6s, filter 0.3s;
  pointer-events: none;
}

.ghost.left {
  opacity: 0.13;
}

.ghost.hl {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 243, 216, 0.95));
  transition-duration: 0.15s;
}

.trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.trace .halo {
  fill: none;
  stroke: rgba(255, 226, 160, 0.2);
  stroke-width: 16;
  stroke-linecap: round;
}

.trace .route {
  fill: none;
  stroke: #f7e6bd;
  stroke-width: 3;
  stroke-linecap: round;
}

.trace .badge circle {
  fill: rgba(18, 13, 8, 0.92);
  stroke: #f7e6bd;
  stroke-width: 2.2;
}

.trace .badge text {
  fill: #f7e6bd;
  font: 600 20px var(--sans);
  text-anchor: middle;
  dominant-baseline: central;
}

.trace g {
  transition: opacity 0.6s;
}

.trace g.dim {
  opacity: 0.5;
}

.trace g.hl {
  opacity: 1;
}

.trace g.fade {
  opacity: 0;
}

/* ---------- lớp chữ bay ---------- */
.flight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.g {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  will-change: transform;
  transform-origin: 50% 50%;
  transition: opacity 0.5s;
}

.g .face {
  position: absolute;
  inset: 0;
  background: url(../assets/glyphs.png) 0 0 / var(--sheet) no-repeat;
  /* Chữ xà cừ vốn màu ngà: lúc bay ngang qua nền giấy mà không có bóng thì mất hút. Trên tấm
     khảm và bảng thơ thì bóng này thành nét chìm, nhìn như chữ được khảm nổi. */
  filter:
    drop-shadow(0 2px 5px rgba(45, 32, 18, 0.5))
    drop-shadow(0 0 1.5px rgba(45, 32, 18, 0.9));
}

.g::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 243, 219, 0.55), rgba(232, 205, 150, 0.16) 62%, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.g.lit::before,
.g.flying::before {
  opacity: 1;
}

.g.landed::before {
  animation: land 0.7s ease-out;
}

@keyframes land {
  0% {
    opacity: 1;
    transform: scale(0.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.g.skipped {
  opacity: 0.28;
}

.g .hit {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  pointer-events: auto;
  cursor: help;
}

.g.hl .face {
  filter: drop-shadow(0 0 6px rgba(255, 244, 214, 0.9));
}

/* ---------- bảng thơ ---------- */
.board {
  container: board / inline-size;
  position: relative;
  background: linear-gradient(180deg, #1c1611 0%, #100c09 100%);
  border: 1px solid rgba(60, 46, 33, 0.3);
  border-radius: var(--r-lg);
  padding: 28px var(--pad-board) 22px;
  box-shadow: var(--bong), inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.board-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.board-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.board-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* Mỗi câu một dòng kẻ chỉ mảnh, như dòng kẻ trong sách in cổ. */
.row {
  display: grid;
  grid-template-columns: 1.4em auto;
  column-gap: 13px;
  align-items: center;
  padding: 7px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(233, 214, 181, 0.07);
  transition: background 0.3s;
}

.row:last-child {
  border-bottom: 0;
}

.row.is-active,
.row:hover {
  background: var(--gold-soft);
}

.row-no {
  color: var(--muted);
  font-family: var(--display);
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slots {
  display: flex;
  gap: 4px;
}

.slot {
  display: grid;
  justify-items: center;
  width: calc(var(--g) + 4px);
}

.box {
  width: var(--g);
  height: var(--g);
  border-radius: 2px;
  background: rgba(255, 246, 232, 0.022);
  box-shadow: inset 0 0 0 1px rgba(230, 199, 141, 0.13);
  transition: box-shadow 0.4s, background 0.4s;
}

.slot.filled .box {
  box-shadow: inset 0 0 0 1px transparent;
  background: transparent;
}

.hv {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s, transform 0.4s;
  min-height: 1.3em;
}

.slot.filled .hv {
  opacity: 1;
  transform: none;
}

.slot.rhyme .hv {
  color: var(--gold);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

.row-tr {
  display: none;
}

/* Ngưỡng tính theo bề ngang TRONG LÒNG bảng (container inline-size bỏ phần lề), nên để thấp
   hơn bề ngang thật một quãng - sát quá thì chỉ cần nới lề là cột dịch thơ tắt mất. */
@container board (min-width: 500px) {
  .row {
    grid-template-columns: 1.3em auto minmax(0, 1fr);
  }

  .row-tr {
    display: block;
    margin: 0 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
    font-style: italic;
    color: var(--ink-2);
    opacity: 0;
    transition: opacity 0.6s 0.15s;
    text-wrap: balance;
  }

  .row.done .row-tr {
    opacity: 1;
  }
}

.board-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  min-height: 40px;
}

.rhyme {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.5s;
}

.rhyme b {
  color: var(--gold);
  font-weight: 600;
}

.board[data-state="done"] .rhyme {
  opacity: 1;
}

.voice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.voice[hidden],
.speed[hidden] {
  display: none;
}

/* dòng ghi giọng và nhịp đang dùng (chỉ một giọng, một nhịp nên không cần ô chọn) */
.voice-ten {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

.voice-ten[hidden] {
  display: none;
}

/* [hidden] mặc định thua display ở trên */
.btn-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-voice .ico {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.7;
}

.btn-voice.on {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
}

.btn-voice.on .ico {
  filter: none;
  opacity: 1;
}

.btn-voice[disabled] {
  opacity: 0.5;
  cursor: default;
}

.btn-voice[disabled]:hover {
  background: transparent;
  border-color: var(--line-strong);
}

.speed {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/*
 * Danh sách xổ ra của <select> do hệ điều hành vẽ, không theo nền của trang. Trước đây ô này
 * mượn nền mờ của bảng thơ nên danh sách ra nền trắng mà chữ vẫn màu ngà - đọc không nổi.
 * Nay để nền đục màu giấy, chữ nâu đen: đọc được cả khi trình duyệt bỏ qua màu đặt cho <option>.
 */
.speed select {
  font-family: var(--sans);
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
  color: #2b211a;
  background: #efe6d6;
  border: 1px solid rgba(122, 94, 48, 0.5);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.speed select:hover {
  background: #f6efe2;
  border-color: rgba(122, 94, 48, 0.8);
}

.speed select option {
  color: #2b211a;
  background: #efe6d6;
}

.speed select option:checked {
  color: #2b211a;
  background: #ddcfb4;
}

.speed select:focus-visible {
  outline: 2px solid #9a7b3f;
  outline-offset: 2px;
}

.speed select {
  max-width: 15em;
  text-overflow: ellipsis;
}

/* Nhãn giọng giờ ghi cả giới tính lẫn vùng miền ("Giọng nữ · miền Nam — Hà Tiểu Mai") nên cần
   rộng hơn, không thì chọn xong chỉ còn thấy nửa cái tên. */
#voiceSel {
  max-width: min(21em, 78vw);
}

/* Màn hẹp: chữ "Giọng" và ô chọn chung một hàng không đủ chỗ - cho ô co lại vừa khít bảng.
   Phải mở khoá co cho CẢ chuỗi bọc ngoài: phần tử flex mặc định không nhỏ hơn bề rộng tự nhiên
   của thứ bên trong, nên chỉ đặt min-width: 0 cho mỗi ô chọn thì nó vẫn đẩy bảng tràn ra. */
@media (max-width: 520px) {
  .voice {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* chữ "Giọng" một dòng, ô chọn xuống dòng dưới dùng trọn bề ngang - đủ chỗ cho cả nhãn dài */
  #voiceSelWrap {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  #voiceSel {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.voice-hint {
  flex-basis: 100%;
  margin: 4px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
}

.voice-hint b {
  color: var(--ink-2);
  font-weight: 600;
}

.voice-hint i {
  font-style: italic;
}

.controls {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn {
  cursor: pointer;
  padding: 10px 19px;
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-2);
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn[data-show] {
  display: none;
}

.board[data-state="playing"] .btn[data-show="playing"],
.board[data-state="done"] .btn[data-show="done"] {
  display: inline-block;
}

/* ---------- chế độ Xem / Chơi ---------- */
.modes {
  scroll-margin-top: 16px;     /* menu "Chơi" cuộn tới đây: chừa chút khoảng trên đầu */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 0;
}

.mode {
  cursor: pointer;
  padding: 9px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mode[aria-pressed="true"] {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-2);
}

.mode:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


.modes-nhac {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

/* ---------- lấy chữ từ: vòng khảm / bản chính ---------- */
/* Hai nút mượn kiểu nút Xem / Chơi (.mode). Bản giao tay giấu hàng Xem / Chơi nên hàng này đứng đầu. */
.nguon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 0;
}

.nguon[hidden] {
  display: none;
}

.nguon-nhan {
  min-width: 13.4em;           /* "Lấy chữ từ" và "Hiệu ứng chữ bay" rộng bằng nhau: nút hai hàng thẳng cột */
  margin-right: 2px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

html[data-khong-choi] .nguon {
  padding-top: 0;
}

/* ---------- hiệu ứng chữ bay ---------- */
.hieu-ung {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 0;
}

.hieu-ung-sel {
  min-width: 15em;
  padding: 8px 12px;
  color: #2b211a;
  background: #efe6d6;
  border: 1px solid rgba(122, 94, 48, 0.5);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.hieu-ung-sel:hover {
  background: #f6efe2;
  border-color: rgba(122, 94, 48, 0.8);
}

.hieu-ung-sel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* tên hiệu ứng đang dùng: dưới tiêu đề bảng thơ (Xem), dưới hàng điểm (Chơi) */
.hieu-ung-dang {
  margin: 8px 0 0;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.hieu-ung-dang::before {
  content: "✦ ";
}

.hieu-ung-dang[hidden] {
  display: none;
}

/* Điện thoại: nhãn "Lấy chữ từ" / "Hiệu ứng chữ bay" lên một dòng riêng (bỏ bề rộng cố định dùng để
   thẳng cột trên màn rộng), hai nút nguồn chữ chia đôi một hàng, ô chọn hiệu ứng rộng hết hàng. */
@media (max-width: 520px) {
  .nguon .nguon-nhan,
  .hieu-ung .nguon-nhan {
    flex-basis: 100%;
    min-width: 0;
  }

  .nguon-nut {
    flex: 1 1 0;
    padding-left: 8px;
    padding-right: 8px;
    letter-spacing: 0.12em;
  }

  .hieu-ung-sel {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Màn cảm ứng (điện thoại, máy tính bảng - kể cả khi xoay ngang) và màn hẹp: các nút chữ nhỏ cao tối
   thiểu 40px cho dễ bấm bằng ngón tay (nút Xem / Chơi, nguồn chữ, mục menu, thẻ Đăng nhập / Tạo tài
   khoản ở trang tài khoản và hộp đăng nhập). */
@media (pointer: coarse), (max-width: 520px) {
  .mode,
  .menu-muc,
  .tk-tab-nut,
  .hieu-ung-sel {
    min-height: 40px;
  }

  /* .btn có cả <a> lẫn <button>: nới đệm trên dưới (thay vì min-height) để chữ vẫn ở giữa nút */
  .btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* giữ trọn một cụm (vd "1807–1847") trên một dòng */
.khong-ngat {
  white-space: nowrap;
}

/* ---------- bản chính ---------- */
/* Bài thơ số 1 bày thành bảng 8 câu x 7 chữ, đứng thay vòng khảm (cùng ô lưới trong .theatre). Chữ thật
   nằm ở lớp bay .flight phía trên; trong ô chỉ có bóng mờ (.bc-bong), hiện ra khi chữ đã bay đi -
   giống bóng chữ trên vòng khảm. --k là tỉ lệ thu sprite về cỡ ô, js/app.js đo rồi đặt. */
.stage[hidden],
.ban-chinh[hidden] {
  display: none;
}

.ban-chinh {
  --k: 0.63;
  position: relative;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  padding: 24px var(--pad-board) 16px;
  background: linear-gradient(180deg, #1c1611 0%, #100c09 100%);
  border: 1px solid rgba(60, 46, 33, 0.3);
  border-radius: var(--r-lg);
  box-shadow: var(--bong), inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.ban-chinh-dau {
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.ban-chinh-nhan {
  margin: 0 0 6px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ban-chinh-dau h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ban-chinh-sub {
  max-width: 46ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.bc-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bc-hang {
  display: grid;
  grid-template-columns: 1.4em auto;
  column-gap: 13px;
  align-items: center;
  padding: 7px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(233, 214, 181, 0.07);
  transition: background 0.3s;
}

.bc-hang:last-child {
  border-bottom: 0;
}

/* câu của bài 1 mà câu đang xếp lấy chữ ra */
.bc-hang.is-active {
  background: var(--gold-soft);
}

.bc-so {
  color: var(--muted);
  font-family: var(--display);
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bc-hang.is-active .bc-so {
  color: var(--gold-2);
}

.bc-cac-o {
  display: flex;
  gap: 4px;
}

.bc-o {
  display: grid;
  justify-items: center;
  width: calc(var(--g) + 4px);
}

.bc-khung {
  position: relative;
  width: var(--g);
  height: var(--g);
}

.bc-bong {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cell);
  height: var(--cell);
  margin: calc(var(--cell) / -2) 0 0 calc(var(--cell) / -2);
  background: url(../assets/glyphs.png) 0 0 / var(--sheet) no-repeat;
  transform: rotate(var(--r, 0deg)) scale(var(--k));
  opacity: 0;
  transition: opacity 0.6s, filter 0.3s;
  pointer-events: none;
}

.bc-o.roi .bc-bong {
  opacity: 0.13;
}

.bc-o.hl .bc-bong {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 243, 216, 0.95));
  transition-duration: 0.15s;
}

.bc-am {
  min-height: 1.3em;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
  transition: opacity 0.4s;
}

.bc-o.roi .bc-am {
  opacity: 0.45;
}

.bc-o.van .bc-am {
  color: var(--gold);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

/* xếp dọc (màn hẹp): bản chính rộng hết cỡ như bảng thơ bên dưới */
@media (max-width: 999px), (max-width: 1200px) and (orientation: portrait) {
  .ban-chinh {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ban-chinh {
    padding: 20px var(--pad-board) 14px;
  }

  .ban-chinh-dau h2 {
    font-size: 21px;
  }

  .bc-am {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-bong,
  .bc-am,
  .bc-hang {
    transition: none !important;
  }
}

/* Chế độ chơi: bảng thơ thành sân xếp chữ, nên giấu phần đầu và phần điều khiển của chế độ Xem. */
body.dang-choi .board-head,
body.dang-choi .board-foot {
  display: none;
}

body.dang-choi .g .hit {
  cursor: pointer;
}

body.dang-choi .slot.filled .box {
  cursor: pointer;
}

/* ô trống trong chế độ chơi rõ hơn một chút cho dễ thấy còn thiếu bao nhiêu */
body.dang-choi .box {
  background: rgba(255, 246, 232, 0.04);
  box-shadow: inset 0 0 0 1px rgba(230, 199, 141, 0.22);
}

@keyframes bang-rung {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

.board.sai {
  animation: bang-rung 0.45s ease;
}

/* ---------- hiệu ứng chấm bài (js/game.js: hieuUng) ----------
   Đúng (.mung): viền bảng bừng vàng, các ô sáng lần lượt từng hàng (--tre-hang), từng chữ nảy lên
   (.g.mung, --tre do PoemStage.dieuChu đặt), ấn son 賞, hoa vàng (canvas .hoa-bung), "+100" bay lên.
   Sai (.sai .tiec): bảng rung, viền ửng đỏ, chữ lắc đầu, ấn mực 試. Đã tìm từ trước (.roi): ánh xanh, ấn 已. */
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.board.mung::after {
  box-shadow:
    0 0 0 2px rgba(243, 215, 116, 0.9),
    0 0 52px rgba(243, 215, 116, 0.5),
    inset 0 0 64px rgba(243, 215, 116, 0.16);
  animation: bang-loe 1.8s ease both;
}

.board.tiec::after {
  box-shadow: 0 0 0 2px rgba(214, 64, 52, 0.85), inset 0 0 54px rgba(214, 64, 52, 0.3);
  animation: bang-loe 1s ease both;
}

.board.roi::after {
  box-shadow: 0 0 0 2px rgba(141, 196, 224, 0.75), inset 0 0 44px rgba(141, 196, 224, 0.18);
  animation: bang-loe 1s ease both;
}

@keyframes bang-loe {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}

.board.mung .slot.filled .box {
  animation: o-mung 0.95s var(--tre-hang, 0ms) ease both;
}

@keyframes o-mung {
  40% {
    background: rgba(243, 215, 116, 0.26);
    box-shadow: inset 0 0 0 1px rgba(243, 215, 116, 0.95), 0 0 16px rgba(243, 215, 116, 0.55);
  }
}

.g.mung .face {
  animation: chu-mung 0.62s var(--tre, 0ms) cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes chu-mung {
  45% {
    transform: translateY(-16%) scale(1.16);
    filter:
      drop-shadow(0 0 7px rgba(255, 220, 130, 0.95))
      drop-shadow(0 0 2px rgba(255, 244, 214, 1))
      brightness(1.22);
  }
}

.g.tiec .face {
  animation: chu-tiec 0.5s var(--tre, 0ms) ease both;
}

@keyframes chu-tiec {
  20% {
    transform: rotate(-10deg);
    filter:
      drop-shadow(0 0 5px rgba(220, 70, 55, 0.95))
      drop-shadow(0 0 1.5px rgba(120, 20, 10, 0.9))
      sepia(0.6) saturate(1.8) hue-rotate(-25deg);
  }
  45% { transform: rotate(8deg); }
  70% { transform: rotate(-4deg); }
}

/* "kính lúp" chọn chữ trên màn cảm ứng (js/app.js moKinhLup): chạm vào vòng chỗ nhiều chữ sát nhau thì
   bảng này bày các chữ quanh chỗ chạm, to, kèm âm đọc - chạm để chọn. Dưới popup (40), trên lớp chữ bay. */
.kinh-lup {
  position: fixed;
  z-index: 35;
  max-width: calc(100vw - 16px);
  padding: 10px 10px 12px;
  background: linear-gradient(180deg, #221a13 0%, #120d09 100%);
  border: 1px solid rgba(230, 199, 141, 0.45);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  animation: kinh-lup-hien 0.16s ease-out both;
}

@keyframes kinh-lup-hien {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
}

.kinh-lup-nhan {
  margin: 0 0 8px;
  color: rgba(230, 199, 141, 0.85);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.kinh-lup-hang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.kinh-lup-nut {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 54px;
  min-height: 62px;
  padding: 6px 8px;
  color: #f6ead2;
  background: rgba(255, 246, 232, 0.06);
  border: 1px solid rgba(230, 199, 141, 0.38);
  border-radius: 10px;
  cursor: pointer;
}

.kinh-lup-nut .han {
  font-family: var(--han);
  font-size: 28px;
  line-height: 1;
}

.kinh-lup-nut small {
  color: rgba(246, 234, 210, 0.78);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
}

.kinh-lup-nut:active,
.kinh-lup-nut:focus-visible {
  background: rgba(243, 215, 116, 0.22);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .kinh-lup { animation: none; }
}

/* ấn triện: nằm trong lớp chữ bay (#flight), sau các chữ, nên đè lên chữ */
.an-trien {
  position: absolute;
  width: clamp(88px, 22vw, 124px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.an-trien span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 5px double rgba(255, 225, 170, 0.85);
  border-radius: 14px;
  font-family: var(--han);
  font-size: clamp(54px, 13vw, 76px);
  line-height: 1;
  animation: an-dong 1.9s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.an-trien.dung span {
  color: #fff1d0;
  background: rgba(176, 32, 28, 0.92);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 44px rgba(243, 215, 116, 0.4);
}

.an-trien.sai span {
  color: rgba(255, 236, 220, 0.95);
  background: rgba(38, 28, 24, 0.9);
  border-color: rgba(214, 64, 52, 0.85);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.an-trien.roi span {
  color: #e9f4fb;
  background: rgba(36, 64, 86, 0.9);
  border-color: rgba(141, 196, 224, 0.8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

@keyframes an-dong {
  0% { opacity: 0; transform: scale(2.2) rotate(-16deg); }
  16% { opacity: 1; transform: scale(0.9) rotate(-7deg); }
  24% { transform: scale(1.05) rotate(-7deg); }
  32%, 74% { opacity: 1; transform: scale(1) rotate(-7deg); }
  100% { opacity: 0; transform: scale(1.06) rotate(-7deg); }
}

.an-trien.sai span {
  animation-name: an-dong-lech;
}

@keyframes an-dong-lech {
  0% { opacity: 0; transform: scale(2) rotate(10deg); }
  16% { opacity: 1; transform: scale(0.92) rotate(-4deg); }
  22% { transform: scale(1) rotate(5deg); }
  30% { transform: rotate(-3deg); }
  38%, 70% { opacity: 1; transform: rotate(4deg); }
  100% { opacity: 0; transform: rotate(4deg); }
}

.hoa-bung {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 39;                  /* dưới popup (40) */
  pointer-events: none;
}

.game-so {
  position: relative;
}

.diem-noi {
  position: absolute;
  left: 50%;
  bottom: 100%;
  color: var(--gold);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(243, 215, 116, 0.6);
  pointer-events: none;
  animation: diem-noi 1.4s ease-out both;
}

@keyframes diem-noi {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(1); }
}

#gameDaMo.nay {
  display: inline-block;
  animation: so-nay 0.6s 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes so-nay {
  40% { transform: scale(1.35); text-shadow: 0 0 12px rgba(243, 215, 116, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .board.mung::after,
  .board.tiec::after,
  .board.roi::after,
  .board.mung .slot.filled .box,
  .g.mung .face,
  .g.tiec .face,
  .diem-noi,
  #gameDaMo.nay {
    animation: none;
  }

  .an-trien span,
  .an-trien.sai span {
    animation: an-tinh 1.6s ease both;
  }

  @keyframes an-tinh {
    0%, 100% { opacity: 0; }
    15%, 75% { opacity: 1; }
  }
}

/* ---------- bảng điều khiển trò chơi ---------- */
.game-bar {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.game-bar[hidden] {
  display: none;
}

/* Hai nút chọn thể thơ: to, có chữ số Hán 七 / 五 để liếc là nhận ra, thay cho ô chọn thả xuống. */
.the-tho {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.the-nhan {
  flex-basis: 100%;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.the-nut {
  flex: 1 1 190px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.the-nut i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--han);
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.the-nut b {
  align-self: end;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.the-nut small {
  align-self: start;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}

.the-nut:hover {
  border-color: var(--gold);
  background: var(--panel-2);
  transform: translateY(-1px);
}

.the-nut:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.the-nut[aria-pressed="true"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(230, 199, 141, 0.17), rgba(230, 199, 141, 0.04));
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 26px rgba(230, 199, 141, 0.12);
}

.the-nut[aria-pressed="true"] i {
  border-color: var(--gold);
  background: var(--gold);
  color: #1a130d;
}

.the-nut[aria-pressed="true"] b {
  color: var(--gold-2);
}

.the-nut[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .the-nut {
    transition: none;
  }
}

.game-hang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.game-so {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.game-so b {
  margin-left: 7px;
  color: var(--gold);
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0;
}

.game-nhac {
  margin: 13px 0 0;
  min-height: 1.5em;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

.game-nhac.dung {
  color: #9fd5a0;
}

.game-nhac.sai {
  color: #e8a08c;
}

.game-nhac.canh {
  color: var(--gold);
}

.game-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.game-nut .btn[disabled] {
  opacity: 0.42;
  cursor: default;
}

.game-nut .btn[disabled]:hover {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--ink);
  transform: none;
}

.btn-gui {
  margin-left: auto;
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

@media (prefers-reduced-motion: reduce) {
  .board.sai {
    animation: none;
  }
}

/* ---------- popup báo kết quả ---------- */
/* Màn thấp (điện thoại xoay ngang) thì hộp cao hơn màn: cho khung phủ cuộn được. Canh giữa
   bằng margin: auto của hộp chứ không bằng place-items - thừa chỗ thì vẫn nằm giữa, thiếu chỗ
   thì hộp bắt đầu từ mép trên và cuộn xuống được, không bị cắt mất đầu. */
.popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.popup[hidden] {
  display: none;
}

.popup-nen {
  position: fixed;
  inset: 0;
  background: rgba(24, 17, 11, 0.62);
  backdrop-filter: blur(3px);
  animation: popup-nen-hien 0.25s ease both;
}

@keyframes popup-nen-hien {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hộp thông báo là một mảng sẫm như hiện vật, nên đặt lại bộ biến giống .board. */
.popup-hop {
  --panel: rgba(255, 246, 232, 0.04);
  --panel-2: rgba(255, 246, 232, 0.08);
  --line: rgba(233, 214, 181, 0.14);
  --line-strong: rgba(226, 196, 138, 0.46);
  --gold: #e3c48b;
  --gold-2: #f7e6bd;
  --gold-soft: rgba(230, 199, 141, 0.1);
  --ink: #f3ece0;
  --ink-2: #cdc3b2;
  --muted: #988f80;
  position: relative;
  width: min(440px, 100%);
  margin: auto 0;
  padding: 34px 32px 28px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(180deg, #221a13 0%, #120d09 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: popup-hien 0.34s cubic-bezier(0.2, 1.25, 0.45, 1) both;
}

@keyframes popup-hien {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* vệt sáng chạy ngang mặt hộp khi đoán đúng */
.popup.dung .popup-hop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 205, 0.16) 50%, transparent 62%);
  animation: popup-loe 1.1s 0.2s ease both;
}

@keyframes popup-loe {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.popup-dau {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--gold-soft);
  font-family: var(--display);
  font-size: 34px;
  line-height: 60px;
  color: var(--gold);
}

.popup.dung .popup-dau {
  border-color: var(--gold);
  box-shadow: 0 0 34px rgba(230, 199, 141, 0.4);
  animation: popup-dau-nay 0.5s 0.12s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes popup-dau-nay {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-hop h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.popup.dung .popup-hop h2 {
  color: var(--gold-2);
}

.popup-loi {
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.popup-diem {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.popup-diem b {
  margin-left: 8px;
  color: var(--gold);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0;
}

.popup-nut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

.popup-nut .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

@media (max-width: 420px) {
  .popup {
    padding: 12px;
  }

  .popup-hop {
    padding: 26px 20px 22px;
  }

  .popup-hop h2 {
    font-size: 25px;
  }

  .popup-nut .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-nen,
  .popup-hop,
  .popup.dung .popup-dau,
  .popup.dung .popup-hop::after {
    animation: none;
  }
}

/* ---------- tài khoản người chơi ---------- */
.game-tk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.game-tk-nhac {
  flex: 1 1 220px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

.game-tk-nhac b {
  color: var(--gold-2);
  font-weight: 600;
}

.game-tk-nhac.sai {
  color: #e8a08c;
}

.game-tk .btn {
  padding: 8px 15px;
}

.game-tk .btn-chinh,
.popup-nut .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

/* ---------- ảnh phóng to (js/phong-to.js) ---------- */
html.dang-phong-to {
  overflow: hidden;
}

.phong-to {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: minmax(0, 1fr);   /* hàng cao đúng bằng màn hình - thiếu dòng này ảnh tràn quá mép dưới */
  padding: 18px 18px 14px;
  color: var(--ink);
  background: rgba(12, 9, 7, 0.96);
  animation: tho-ro 0.22s ease both;
}

.phong-to[hidden] {
  display: none;
}

.phong-to-hop {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
}

/* vừa khung: ảnh co lại cho trọn trong màn hình */
.phong-to-khung {
  display: grid;
  grid-template: 100% / 100%;     /* ô lưới cao đúng bằng khung để max-height: 100% của ảnh có mốc mà tính */
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.phong-to-khung img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
}

/* cỡ thật: ảnh đúng cỡ gốc, kéo cuộn trong khung */
.phong-to.co-that .phong-to-khung {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
}

.phong-to.co-that .phong-to-khung img {
  max-width: none;
  max-height: none;
  margin: 0 auto;
  border-radius: 0;
  cursor: zoom-out;
}

.phong-to-chan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
}

.phong-to-chu {
  flex: 1 1 18em;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
}

.phong-to .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

@media (max-width: 520px) {
  .phong-to {
    padding: 10px 8px 10px;
  }

  .phong-to-chu {
    flex-basis: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phong-to {
    animation: none;
  }
}

/* ---------- bản giao tay: chỉ xem, không có phần chơi ----------
   tools/dist.mjs --may gắn data-khong-choi vào <html>: giấu nút Xem / Chơi, khung chơi và menu (bản này
   không có trang xếp hạng, tài khoản), chữ nói tới "chơi" đổi sang biến thể .chi-xem. */
.chi-xem {
  display: none;
}

html[data-khong-choi] .chi-xem {
  display: inline;
}

html[data-khong-choi] .chi-choi,
html[data-khong-choi] .modes,
html[data-khong-choi] #gamePanel,
html[data-khong-choi] .menu {
  display: none !important;
}

/* ---------- nút lên đầu trang (js/len-dau.js) ----------
   Nút sơn mài tròn, mũi tên vàng: nổi rõ cả trên nền giấy ngà lẫn khi lướt qua bảng thơ sẫm. Nằm dưới
   các hộp popup (z-index 30 < 40, 60). */
.len-dau {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(227, 196, 139, 0.65);
  border-radius: 50%;
  color: #e3c48b;
  background: linear-gradient(180deg, #2a2018 0%, #120d09 100%);
  box-shadow: 0 8px 22px rgba(30, 20, 10, 0.28), inset 0 1px 0 rgba(255, 240, 214, 0.08);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, border-color 0.2s, color 0.2s;
}

.len-dau.hien {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.len-dau:hover {
  border-color: #f3d38f;
  color: #f7e6bd;
  transform: translateY(-2px);
}

.len-dau:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.len-dau svg {
  width: 21px;
  height: 21px;
}

@media (max-width: 520px) {
  .len-dau {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .len-dau,
  .len-dau:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- hộp đăng nhập / tạo tài khoản ---------- */
.tk-hop {
  text-align: left;
  width: min(420px, 100%);
}

.tk-hop h2 {
  text-align: center;
}

.tk-dan {
  text-align: center;
}

.tk-tab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.tk-tab-nut {
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.tk-tab-nut + .tk-tab-nut {
  border-left: 1px solid var(--line-strong);
}

.tk-tab-nut[aria-pressed="true"] {
  background: var(--gold-soft);
  color: var(--gold-2);
}

.tk-tab-nut:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.tk-o {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.tk-o[hidden],
.tk-hop [hidden] {
  display: none;
}

.tk-o > span {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
}

.tk-o small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

/* Ô nhập nền giấy, chữ nâu đen: cùng lối với ô chọn giọng - đọc rõ trên nền sẫm. */
.tk-o input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(122, 94, 48, 0.55);
  border-radius: var(--r-sm);
  background: #efe6d6;
  color: #2b211a;
  font-family: var(--sans);
  font-size: 15px;
}

.tk-o input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  background: #f6efe2;
}

.tk-loi {
  min-height: 1.4em;
  margin: 2px 0 0;
  color: #e8a08c;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.tk-hop .popup-nut {
  margin-top: 10px;
}

.tk-ghi {
  margin: 16px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.55;
}

.tk-hop .btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* ---------- trang bảng xếp hạng (xep-hang.html) ---------- */
/* Cùng đầu trang kiểu bìa sách với trang thơ; bảng là một mảng sơn mài sẫm như bảng thơ, ba
   hạng đầu gắn huy hiệu vàng - bạc - đồng. */
.bxh-dau {
  padding-bottom: 34px;
}

.bxh {
  display: grid;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  animation: tho-hien 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bxh-toi {
  display: flex;
  align-items: center;
  gap: 14px 22px;
  padding: 16px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.bxh-toi[hidden] {
  display: none;
}

.bxh-toi p {
  margin: 0;
}

.bxh-toi-so {
  display: grid;
  justify-items: center;
  min-width: 92px;
  padding-right: 22px;
  border-right: 1px solid var(--line);
}

.bxh-toi-so small {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bxh-toi-so b {
  color: var(--gold);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.bxh-toi-chu {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bxh-toi-ten {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bxh-bang {
  padding: 8px 24px 14px;
  background: linear-gradient(180deg, #1c1611 0%, #100c09 100%);
  border: 1px solid rgba(60, 46, 33, 0.3);
  border-radius: var(--r-lg);
  box-shadow: var(--bong), inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.bxh-ds {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.bxh-ds th {
  padding: 13px 10px 11px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.bxh-ds td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.bxh-ds tbody tr:last-child td {
  border-bottom: 0;
}

.bxh-ds .hang {
  width: 4.2em;
  text-align: center;
}

.bxh-ds .so {
  text-align: right;
  white-space: nowrap;
}

.bxh-ds td.ten {
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.bxh-ds td.diem {
  color: var(--gold);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}

.bxh-hang {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
}

.bxh-ds .hang-1 .bxh-hang {
  color: #2a1e0c;
  background: linear-gradient(145deg, #f6e3a8 0%, #c9a24f 55%, #9c7630 100%);
  box-shadow: 0 0 0 1px rgba(246, 227, 168, 0.35), 0 0 18px rgba(227, 196, 139, 0.35);
}

.bxh-ds .hang-2 .bxh-hang {
  color: #1f1e1b;
  background: linear-gradient(145deg, #f1efe9 0%, #bdb8ad 55%, #8e897e 100%);
}

.bxh-ds .hang-3 .bxh-hang {
  color: #24160b;
  background: linear-gradient(145deg, #eec39a 0%, #b77d4b 55%, #8a552c 100%);
}

.bxh-ds .hang-1 td.ten {
  color: var(--gold-2);
}

.bxh-ds tr.minh td {
  background: var(--gold-soft);
}

.bxh-ds tr.minh td:first-child {
  box-shadow: inset 2px 0 0 var(--gold);
}

.bxh-ban {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.bxh-ds .bxh-cach td {
  padding: 0;
  color: var(--muted);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.3em;
  border-bottom: 1px dashed var(--line-strong);
}

.bxh-rong {
  margin: 20px 0 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.bxh-rong[hidden] {
  display: none;
}

.bxh-chan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bxh-luc {
  flex: 1 1 16em;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
}

.bxh-luc.sai {
  color: var(--royal);
}

.bxh-chan a.btn {
  text-decoration: none;
}

.bxh-chan .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

.bxh-chan .btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 520px) {
  .bxh-bang {
    padding: 4px 10px 10px;
  }

  .bxh-ds {
    font-size: 14px;
  }

  .bxh-ds th,
  .bxh-ds td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .bxh-ds .hang {
    width: 3em;
  }

  .bxh-toi {
    padding: 14px 16px;
  }

  .bxh-toi-so {
    min-width: 76px;
    padding-right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bxh {
    animation: none;
  }
}

/* ---------- trang lỗi (404.html) ---------- */
/* Cùng đầu trang kiểu bìa sách; một đoạn lời và ba nút đi tiếp. */
.loi-dau {
  padding-bottom: 30px;
}

.loi {
  display: grid;
  justify-items: center;
  gap: 26px;
  max-width: 620px;
  margin: 0 auto;
  padding-bottom: 24px;
  text-align: center;
  animation: tho-hien 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loi-loi {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}

.loi-nut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.loi-nut a.btn {
  text-decoration: none;
}

.loi-nut .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

/* ---------- trang tài khoản (tai-khoan.html) ---------- */
.tk-trang {
  display: grid;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  animation: tho-hien 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tk-trang [hidden] {
  display: none;
}

.tk-ho-so {
  display: grid;
  gap: 22px;
}

.tk-trang-loi {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(110, 28, 38, 0.35);
  border-radius: var(--r-sm);
  background: rgba(110, 28, 38, 0.06);
  color: var(--royal);
  font-family: var(--sans);
  font-size: 14px;
}

/* biểu mẫu trên thẻ giấy: báo lỗi màu son, báo xong màu lục trầm (lớp .tk-loi gốc là màu cho nền sẫm) */
.tk-trang .tk-loi {
  color: var(--royal);
}

.tk-trang .tk-loi.xong {
  color: #3f6b3a;
}

.tk-trang .tk-tab {
  margin-top: 0;
}

.tk-trang form {
  max-width: 460px;
}

.tk-gioi-thieu {
  margin: -4px 0 18px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

.tk-hang-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 6px;
}

.tk-trang .btn-chinh {
  border-color: var(--gold);
  color: var(--gold-2);
  background: var(--gold-soft);
}

.tk-trang .btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.tk-trang a.btn {
  text-decoration: none;
}

/* Tấm danh thiếp: mảng sơn mài sẫm như bảng thơ, ảnh đại diện là huy hiệu vàng. */
.ho-so {
  padding: 26px 28px 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #1c1611 0%, #100c09 100%);
  border: 1px solid rgba(60, 46, 33, 0.3);
  border-radius: var(--r-lg);
  box-shadow: var(--bong), inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.ho-so-dau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.ho-so-anh {
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #2a1e0c;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  background: linear-gradient(145deg, #f6e3a8 0%, #c9a24f 55%, #9c7630 100%);
  box-shadow: 0 0 0 1px rgba(246, 227, 168, 0.35), 0 0 22px rgba(227, 196, 139, 0.3);
}

.ho-so-ten {
  flex: 1 1 14em;
  min-width: 0;
}

.ho-so-ten h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ho-so-ten p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ho-so-ten .ho-so-tu {
  color: var(--muted);
  font-size: 12.5px;
}

.ho-so-so {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ho-so-so div {
  text-align: center;
}

.ho-so-so div + div {
  border-left: 1px solid var(--line);
}

.ho-so-so dt {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ho-so-so dd {
  margin: 4px 0 0;
  color: var(--gold);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ho-so-bai {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
}

.ho-so-bai li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ho-so-bai li:last-child {
  border-bottom: 0;
}

.ho-so-bai-chu {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.ho-so-bai-chu b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.ho-so-bai-chu small {
  color: var(--muted);
  font-size: 12.5px;
}

/* cách đọc vừa tìm ra (bắt đầu nhánh nào, đi chiều nào, đọc vào hay ra) */
.ho-so-bai-chu small.ho-so-bai-cach {
  font-style: italic;
  line-height: 1.45;
}

.ho-so-bai .btn {
  padding: 7px 16px;
}

.ho-so-rong {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-style: italic;
}

@media (max-width: 520px) {
  .ho-so {
    padding: 20px 18px 18px;
  }

  .ho-so-anh {
    width: 56px;
    height: 56px;
    font-size: 25px;
  }

  .ho-so-ten h2 {
    font-size: 22px;
  }

  .ho-so-so dd {
    font-size: 21px;
  }

  .ho-so-so dt {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-trang {
    animation: none;
  }
}

/* ---------- văn bản ---------- */
/* Một cột, thu về bề ngang dễ đọc và canh giữa cho hợp trục của trang. Xếp bốn cột hẹp thì câu
   thơ nào cũng bị ngắt làm đôi. */
.study {
  display: grid;
  gap: 18px;
  max-width: 860px;
  margin: 60px auto 0;
  padding-top: 38px;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr;
}

.study[hidden] {
  display: none;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px 26px;
  transition: border-color 0.3s, background 0.3s;
}

.card:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}

/* nhãn thẻ: chữ nhỏ in hoa kèm một gạch vàng ngắn cho ra dáng ấn phẩm */
.card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.card h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.card p {
  margin: 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

.card-how .han {
  color: var(--gold);
}

/* Vẫn là <ol> để trình đọc màn hình biết đây là các câu có thứ tự, chỉ giấu số đi cho sạch mắt. */
.verse {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.72;
}

.verse li {
  padding: 2px 0;
  transition: color 0.3s;
}

.verse li.is-active {
  color: var(--gold);
}

.by {
  margin-top: 14px !important;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted) !important;
}

.card[hidden] {
  display: none;
}

/* ---------- về bài thơ (theo tư liệu của Trung tâm Bảo tồn Di tích Cố đô Huế) ---------- */
.ve-bai {
  max-width: 1000px;
  margin: 24px auto 0;          /* đứng ngay sau đầu bìa */
  scroll-margin-top: 20px;
}

/* tiêu đề khu Xem và chơi: cùng lối tiêu đề "Về bài thơ", tách hẳn phần giới thiệu bên trên */
.khu-xem-dau {
  margin: 104px 0 30px;
  scroll-margin-top: 20px;
}

/* phần 3 "Kết luận": đứng riêng sau phần xem và chơi, trước chân trang - tiêu đề cùng lối hai phần trên */
.ve-bai-ket {
  margin-top: 0;
}

.ket-luan-dau {
  margin-top: 104px;
}

.ve-bai-dau {
  text-align: center;
}

.ve-bai-dau .eyebrow {
  margin-bottom: 16px;
  font-size: 16px;
}

.ve-bai-dau h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ve-bai-dau .orn {
  margin-top: 22px;
}

.ve-bai p {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.8;
  text-wrap: pretty;
}

.vb-mo {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
}

.vb-dan {
  color: var(--ink) !important;
  font-size: 20px !important;
  line-height: 1.75 !important;
}

.vb-dan .han {
  color: var(--gold);
  letter-spacing: 0.08em;
}

/* ảnh tấm cẩn xà cừ ngay sau lời mở đầu: cỡ vừa phải, bấm vào là phóng to (js/phong-to.js); khung chỉ
   vàng lùi ra ngoài 9px như khung tấm khảm ở phần xem và chơi */
.vb-anh-lon {
  max-width: 680px;
  margin: 52px auto 0;
}

.vb-anh-lon a {
  display: block;
  border-radius: var(--r-lg);
  outline: 1px solid rgba(122, 94, 48, 0.5);
  outline-offset: 9px;
  box-shadow: var(--bong);
  cursor: zoom-in;
}

.vb-anh-lon a:focus-visible {
  outline: 2px solid var(--gold);
}

.vb-anh-lon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: #0d0a08;
}

.vb-anh-lon figcaption {
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

.vb-anh-goi {
  margin-left: 6px;
  color: var(--gold-2);
}

.vb-khoi {
  margin-top: 64px;
}

/* tiêu đề khối: chữ in hoa giãn, gạch vàng hai bên - cùng lối với tiêu đề các thẻ văn bản */
.vb-khoi h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vb-khoi h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.vb-ghi {
  color: var(--muted) !important;
  font-family: var(--sans);
  font-size: 13.5px !important;
}

/* mã mở khoá: bốn tấm sơn mài, chữ Hán vàng như chữ khảm */
.ma-khoa {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 24px;
  padding: 0;
  list-style: none;
}

.ma-khoa li {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 22px 14px 18px;
  text-align: center;
  background: linear-gradient(180deg, #1f1812 0%, #110d0a 100%);
  border: 1px solid rgba(60, 46, 33, 0.3);
  border-radius: var(--r-md);
  box-shadow: var(--bong-nho), inset 0 1px 0 rgba(255, 240, 214, 0.06);
}

.ma-khoa .han {
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px rgba(227, 196, 139, 0.25);
}

.ma-khoa b {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ma-khoa small {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

/* bốn vần: mỗi vần một con ấn son đỏ */
.bon-van {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 16px;
  padding: 0;
  list-style: none;
}

.bon-van li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 22px 14px 18px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Ấn son: chữ to và nền chuyển màu đều - chữ nhiều nét ở cỡ nhỏ, nền có đốm sáng
   thì các nét dọc dính thành một mảng sáng, nhìn như sai chữ. */
.an-van {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 4px;
  border-radius: 6px;
  color: #fbeee0;
  font-size: 40px;
  line-height: 1;
  background: linear-gradient(160deg, #86232f 0%, var(--royal) 55%, #5a1620 100%);
  box-shadow: inset 0 0 0 2px rgba(251, 238, 224, 0.75), inset 0 0 0 4px #7a1f2b, 0 6px 14px rgba(110, 28, 38, 0.22);
}

.bon-van b {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
}

.bon-van b small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.van-chu {
  display: grid;
  gap: 2px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
}

.van-chu .han {
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 0.12em;
}

.bon-van i {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

/* Dịch học: bốn ký hiệu nét vàng */
.dich-hoc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.dich-hoc li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 24px 14px 20px;
  text-align: center;
  border-top: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-soft), transparent 70%);
}

.dich-hoc svg {
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  color: var(--gold-2);
}

.dich-hoc .dh-nen {
  fill: var(--bg);
}

.dich-hoc b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
}

.dich-hoc span {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* ảnh tư liệu: ảnh đặt trong khung giấy, chú thích chữ nhỏ */
.tu-lieu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.tu-lieu figure,
.tu-lieu-rong {
  margin: 0;
}

.tu-lieu img,
.tu-lieu-rong img {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px;
  background: #fbf7ef;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--bong-nho);
}

.tu-lieu img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ảnh tư liệu bấm được: phóng to trong popup (js/phong-to.js) */
.tu-lieu a,
.tu-lieu-rong a {
  display: block;
  border-radius: var(--r-sm);
  cursor: zoom-in;
}

.tu-lieu a img,
.tu-lieu-rong a img {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tu-lieu a:hover img,
.tu-lieu-rong a:hover img {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--bong);
}

.tu-lieu a:focus-visible,
.tu-lieu-rong a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tu-lieu a img,
  .tu-lieu-rong a img {
    transition: none;
  }

  .tu-lieu a:hover img,
  .tu-lieu-rong a:hover img {
    transform: none;
  }
}

.tu-lieu figcaption,
.tu-lieu-rong figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

.tu-lieu figcaption b,
.tu-lieu-rong figcaption b {
  color: var(--ink);
  font-weight: 600;
}

.tu-lieu figcaption .han {
  color: var(--gold-2);
}

.tu-lieu-rong {
  margin-top: 24px;
}

.tu-lieu-rong figcaption {
  text-align: center;
}

/* các bài thơ tài liệu giới thiệu: hai nhóm (thất ngôn, ngũ ngôn), mỗi bài một thẻ giấy */
.ds-tu-lieu {
  display: grid;
  gap: 28px;
  margin-top: 24px;
}

.tl-ten {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tl-ds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-ds li {
  display: grid;
}

.tl-the {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16px 16px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}

.tl-the:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: var(--bong-nho);
}

.tl-the:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.tl-so {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tl-nhan {
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}

.tl-han {
  margin-top: 4px;
  color: var(--gold-2);
  font-size: 19px;
  letter-spacing: 0.1em;
}

.tl-pa {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
}

.tl-dich {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.tl-xem {
  margin-top: 6px;
  color: var(--gold-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tl-xem::after {
  content: " →";
  letter-spacing: 0;
}

/* thẻ bài đang khoá (bản có máy chủ): nét đứt, nhạt hơn, không lộ chữ nào của bài */
.tl-the.tl-khoa {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
}

.tl-the.tl-khoa .tl-nhan {
  color: var(--ink-2);
}

.tl-o-khoa {
  justify-self: start;
  margin-top: 6px;
  padding: 2px 10px 2px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--gold-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: no-repeat 8px 50% / 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1' y='6' width='10' height='7.5' rx='1.4' fill='%237a5e2b'/%3E%3Cpath d='M3.3 6V4.2a2.7 2.7 0 0 1 5.4 0V6' fill='none' stroke='%237a5e2b' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .tl-ds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .tl-ds {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-the,
  .tl-the:hover {
    transition: none;
    transform: none;
  }
}

/* lời kết: một trích dẫn canh giữa, gạch son ở đầu */
.vb-ket {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 0 40px 22px;
  text-align: center;
  border-bottom: 1px solid var(--line-strong);
}

.vb-ket p {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.85;
}

.vb-ket p:last-child {
  color: var(--ink);
  font-weight: 500;
}

.rhyme-van {
  color: var(--muted);
}

.rhyme-van .han {
  color: var(--gold);
}

@media (max-width: 900px) {
  .ma-khoa,
  .bon-van,
  .dich-hoc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tu-lieu {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .tu-lieu img {
    aspect-ratio: auto;
  }
}

@media (max-width: 520px) {
  .ve-bai {
    margin-top: 16px;
  }

  .ve-bai-ket {
    margin-top: 0;
  }

  .ket-luan-dau {
    margin-top: 72px;
  }

  .khu-xem-dau {
    margin: 72px 0 22px;
  }

  .vb-mo {
    text-align: left;
  }

  .vb-dan {
    font-size: 18px !important;
  }

  .vb-khoi {
    margin-top: 48px;
  }

  .vb-anh-lon {
    margin-top: 36px;
  }

  .vb-anh-lon a {
    outline-offset: 5px;
  }

  .vb-anh-goi {
    display: block;
    margin-left: 0;
  }

  .vb-khoi h3 {
    font-size: 15px;
    letter-spacing: 0.14em;
  }

  .ma-khoa {
    grid-template-columns: 1fr;
  }

  .ma-khoa .han {
    font-size: 22px;
  }

  .bon-van,
  .dich-hoc {
    gap: 10px;
  }

  .vb-ket {
    padding: 0 4px 16px;
    text-align: left;
  }
}

.foot {
  max-width: 740px;
  margin: 66px auto 0;
  padding-top: 0;
  border-top: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.75;
  text-align: center;
}

.foot .orn {
  margin: 0 auto 30px;
}

.foot p {
  margin: 0 0 10px;
}

.foot .copyright {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* ---------- hai dòng chữ khảm hai bên ---------- */
.lacs {
  position: absolute;
  inset: 0;
}

/* Nằm đúng chỗ hai cột chữ trên ảnh nền; toạ độ tính bằng % nên co giãn theo khung. */
.lac {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Viền gợi ý rất nhạt, chỉ rõ lên khi người xem đưa chuột vào tấm khảm. */
.lac::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px dashed rgba(230, 199, 141, 0.32);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.stage:hover .lac::after {
  opacity: 1;
}

.lac:hover,
.lac:focus-visible {
  outline: none;
  background: rgba(230, 199, 141, 0.07);
  border-color: rgba(230, 199, 141, 0.5);
  box-shadow:
    0 0 26px rgba(230, 199, 141, 0.2),
    inset 0 0 34px rgba(230, 199, 141, 0.09);
}

.lac:hover::after,
.lac:focus-visible::after {
  opacity: 0;
}

/* Ô của từng chữ trong dòng; rê vào là sáng lên đúng chữ ấy trên tấm khảm. */
.lac-o {
  position: absolute;
  border-radius: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}

.lac-o:hover,
.lac-o.on {
  background: rgba(255, 236, 196, 0.16);
  box-shadow: 0 0 20px rgba(255, 236, 196, 0.26);
}

.lac-tip {
  position: fixed;
  z-index: 21;
  left: 0;
  top: 0;
  width: min(330px, calc(100vw - 24px));
  padding: 14px 16px 15px;
  border-radius: var(--r-md);
  background: rgba(20, 15, 11, 0.94);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  font-size: 14px;
  line-height: 1.55;
}

.lac-tip[hidden] {
  display: none;
}

.lac-tip .lac-where {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Chữ Hán xếp dọc, hàng phải trước - đúng như trên tấm khảm. */
.lac-tip .lac-han {
  writing-mode: vertical-rl;
  height: max-content;          /* xếp dọc: `height` là chiều dài cột, để vừa cột dài nhất */
  max-height: 210px;
  margin: 0 0 12px;
  font-family: var(--han);
  font-size: 21px;
  line-height: 1.5;
  color: var(--gold);
}

.lac-tip .lac-han span {
  display: block;
}

.lac-tip .lac-han i {
  font-style: normal;
  transition: color 0.15s, text-shadow 0.15s;
}

.lac-tip .lac-han:has(i.on) i {
  color: rgba(230, 199, 141, 0.42);
}

.lac-tip .lac-han i.on {
  color: #fff6e4;
  text-shadow: 0 0 14px rgba(255, 235, 190, 0.85);
}

/* Nghĩa của riêng chữ đang trỏ. */
.lac-tip .lac-chu {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 11px;
  align-items: baseline;
  margin: 0 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lac-tip .lac-chu i {
  grid-row: span 2;
  font-family: var(--han);
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
}

.lac-tip .lac-chu b {
  color: var(--ink);
  font-size: 16px;
}

.lac-tip .lac-chu em {
  color: var(--ink-2);
  font-style: normal;
  font-size: 13.5px;
}

.lac-tip .lac-han span + span {
  margin-left: 9px;
}

.lac-tip .lac-hv {
  display: block;
  color: var(--ink);
  font-style: italic;
}

.lac-tip .lac-vi {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
}

.lac-tip .lac-note {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12.5px;
  color: #e8c07a;
}

@media (hover: none) {
  .lac::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lac,
  .lac::after,
  .lac-o,
  .lac-tip .lac-han i {
    transition: none;
  }
}

/* ---------- chú giải chữ ---------- */
.tip {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  max-width: 280px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: rgba(20, 15, 11, 0.92);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  font-size: 14px;
  line-height: 1.5;
}

.tip[hidden] {
  display: none;
}

.tip .tip-han {
  font-family: var(--han);
  font-size: 40px;
  line-height: 1.1;
  color: var(--gold);
  grid-row: span 3;
}

.tip b {
  color: var(--ink);
  font-size: 16px;
}

.tip .tip-gloss {
  color: var(--ink-2);
}

.tip .tip-where {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
}

.tip .tip-note {
  grid-column: 1 / -1;
  color: #e8c07a;
  font-size: 12.5px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 2px;
}

/* ---------- đáp ứng ---------- */
/* Xếp hai cột khi đủ rộng cho CẢ tấm khảm lẫn bảng thơ có chỗ để cột dịch thơ. Hẹp hơn thì xếp dọc:
   tấm khảm to hết bề ngang, bảng thơ nằm dưới - vẫn hơn là bóp cả hai cho cụt. Riêng màn nằm ngang
   1000-1200px (máy tính bảng nằm ngang) vẫn hai cột - xem khối "máy tính bảng nằm ngang" bên dưới.
   ĐỔI ĐIỀU KIỆN NÀY thì đổi cả HAI_COT trong js/game.js (tấm khảm trôi theo khi chơi). */
@media (max-width: 999px), (max-width: 1200px) and (orientation: portrait) {
  .theatre {
    grid-template-columns: 1fr;
  }

  .stage {
    margin: 0 auto;
    max-width: min(100%, calc((100vh - 40px) * 1600 / 1256));
  }

  /* 7 ô chữ + 6 khe 4px phải lọt trong: bề ngang màn - lề trang - lề bảng - cột số câu (36px) */
  :root {
    --g: min(46px, calc((100vw - 2 * var(--pad-wrap) - 2 * var(--pad-board) - 36px - 6 * 4px) / 7 - 4px));
  }
}

/* hai vùng xếp chồng (dưới 700px), mỗi vùng rộng hết hàng: hai cột nút (điện thoại ≤520px: một cột) */
@media (max-width: 699px) {
  .readings-luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .masthead {
    padding: 42px 0 30px;
  }
}

/* Cột hẹp thì thôi canh giữa đoạn văn dài: canh giữa 8 dòng liền đọc rất mỏi mắt. */
@media (max-width: 680px) {
  .lede,
  .foot p {
    text-align: left;
  }
}

@media (max-width: 520px) {
  :root {
    --pad-wrap: 16px;
    --pad-board: 14px;
  }

  .masthead {
    padding: 30px 0 24px;
  }

  .readings-luoi {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .readings-vung {
    padding: 14px 12px 14px;
  }

  .readings-dau {
    flex-wrap: wrap;
  }

  .readings-dau em {
    flex-basis: 100%;
    margin-left: 58px;
    text-align: left;
  }

  .chip {
    padding: 15px 18px;
  }

  .chip b {
    font-size: 20px;
  }

  .board {
    padding: 20px var(--pad-board) 16px;
  }

  .board-head h2 {
    font-size: 25px;
  }

  .card {
    padding: 20px 20px 22px;
  }

  .verse {
    font-size: 18px;
  }

  .stage {
    outline-offset: 5px;
  }

  .hv {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip.invite {
    animation: none;
  }

  .g,
  .g::before,
  .ghost,
  .hv,
  .row-tr,
  .trace g {
    transition: none !important;
  }

  .g.landed::before,
  .g.gon::after {
    animation: none;
  }
}

/* Đang bay: độ đậm do từng khung hình đặt (hiệu ứng Mực loang, Giọt mưa) - tắt chuyển tiếp opacity của
   .g kẻo chữ ì ạch đuổi theo. */
.g.flying {
  z-index: 2;
  transition: none;
}

/* Hiệu ứng Giọt mưa: chữ đáp xuống thì loang một vòng gợn sóng */
.g::after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 2px solid rgba(255, 236, 190, 0.75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.g.gon::after {
  animation: gon-song 0.9s ease-out;
}

@keyframes gon-song {
  0% {
    opacity: 0.9;
    transform: scale(0.45);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (min-width: 1201px) {
  :root {
    --g: clamp(32px, calc((100vh - 380px) / 8), 46px);
  }
}

/* Máy tính bảng nằm ngang (1024x768, 1180x820...) và cửa sổ máy tính 1000-1200px nằm ngang: vẫn xếp
   hai cột để thấy cùng lúc tấm khảm và bảng thơ. Xếp dọc thì tấm khảm cao gần kín màn hình, chữ bay
   xuống bảng thơ khuất dưới mép, khi chơi bấm chữ mà không thấy chữ rơi vào ô nào. Bảng thơ hẹp lại
   460px - không còn chỗ cho cột dịch thơ cạnh bảng, bản dịch vẫn ở thẻ "Dịch thơ" bên dưới - và ô chữ
   tính theo chiều cao màn như màn rộng, tối đa 44px cho bản chính (7 ô) vừa cột trái. */
@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
  .theatre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 28px;
  }

  :root {
    --g: clamp(32px, calc((100vh - 380px) / 8), 44px);
  }
}

/* ---------- bản quyền ---------- */
.copyright {
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: 0.02em;
}