/* Cẩm nang học tarot.

   [hidden] đứng TRƯỚC mọi rule display — không thì `el.hidden = true` thành vô tác
   dụng, và đó là lỗi giao diện câm nhất trong dự án này (đã dính bốn lần). */
[hidden] { display: none !important; }

.khung-hoc {
  display: grid; grid-template-columns: 15rem 1fr; gap: 3rem;
  max-width: 62rem; margin: 0 auto 4rem; padding: 0 1.5rem;
  align-items: start;
}

/* ── Mục lục ───────────────────────────────────────────────────────── */
.muc-luc {
  position: sticky; top: 2rem;
  padding: 1.2rem 1.3rem;
  border-left: 1px solid rgba(216,180,92,.22);
}
.ml-nhan {
  margin: 0 0 .7rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vang);
}
.muc-luc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.muc-luc li { font-size: .9rem; line-height: 1.5; color: var(--giay-chim); }
.muc-luc a { color: var(--giay-chim); text-decoration: none; }
.muc-luc a:hover { color: var(--giay); }
.muc-luc a.dang-doc { color: var(--vang); }

/* ── Thân bài ──────────────────────────────────────────────────────── */
.than-hoc { min-width: 0; }
.than-hoc section { margin-bottom: 3.4rem; scroll-margin-top: 2rem; }
.than-hoc h2 {
  margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.35; color: var(--giay);
  padding-bottom: .6rem; border-bottom: 1px solid rgba(216,180,92,.18);
}
.than-hoc h3 {
  margin: 1.8rem 0 .7rem; font-size: 1.06rem; font-weight: 500; color: var(--vang);
}
.than-hoc p { margin: 0 0 1rem; line-height: 1.85; color: var(--giay-mo); }
.than-hoc b { color: var(--giay); font-weight: 500; }
.than-hoc a { color: var(--vang); }
.than-hoc ul, .than-hoc ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.than-hoc li { margin-bottom: .6rem; line-height: 1.8; color: var(--giay-mo); }

/* Ô nhấn ý chính. Dùng dè: nhấn quá nhiều thì chẳng còn gì được nhấn. */
.khung-y {
  margin: 1.4rem 0 !important;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--vang); background: rgba(216,180,92,.07);
}

.ds-chat li b, .ds-loi li b, .ds-lich li b { color: var(--vang); font-weight: 500; }
.cach-bay li { margin-bottom: .5rem; }

/* Bảng câu hỏi hỏng. Cuộn ngang trong khung riêng chứ không để cả trang cuộn ngang —
   trên điện thoại một bảng hai cột luôn rộng hơn màn hình. */
.bang-hoi {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; margin: 0 0 1.4rem; font-size: .95rem;
}
.bang-hoi th, .bang-hoi td {
  text-align: left; vertical-align: top; padding: .7rem .9rem;
  border-bottom: 1px solid rgba(240,231,212,.1); line-height: 1.7;
}
.bang-hoi th {
  font-weight: 500; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vang); white-space: nowrap;
}
.bang-hoi td { color: var(--giay-mo); min-width: 12rem; }
.bang-hoi td:first-child { color: var(--giay); }

.hang-hoc { justify-content: flex-start; margin: 1.6rem 0 .8rem; }

@media (max-width: 860px) {
  /* Mục lục thành một khối thường nằm trên đầu: dính bên cạnh trên màn hẹp thì nó
     chiếm mất nửa màn hình. */
  .khung-hoc { grid-template-columns: 1fr; gap: 1.6rem; }
  .muc-luc { position: static; border-left: none; border-top: 1px solid rgba(216,180,92,.22); }
}
@media (max-width: 600px) {
  .khung-hoc { padding: 0 1.1rem; }
  .than-hoc h2 { font-size: 1.3rem; }
  .than-hoc section { margin-bottom: 2.6rem; }
}