/* Trang /chon-tu — chọn 1 trong 4 tụ bài.

   Lá trong tụ lấy từ bộ Oracle «Lời Nhắn Hồn Việt» (từ 29/09/2026). Trang /oracle có
   file riêng `oracle.css` với tiền tố `ov-`; file này giữ tiền tố `or-` từ thời Góc
   Tranh để khỏi sửa một lượt cả HTML lẫn CSS cho một chuyện chỉ là cái tên.

   ⚠️ Chỉ đụng `padding-bottom`, KHÔNG dùng `padding` viết tắt cho `.or-khung`:
   `.seo-khung` trong seo.css chừa `padding-top` cho thanh điều hướng đang `fixed`, và
   file này nạp SAU nên một dòng viết tắt xoá sạch chỗ chừa đó. */

[hidden] { display: none }` của trình duyệt có độ ưu tiên gần thấp nhất, nên chỉ
   một bộ chọn theo lớp có `display` là `el.hidden = true` thành vô nghĩa, im lặng. */
[hidden] { display: none !important; }

/* ⚠️ KHÔNG dùng `padding` viết tắt ở đây. `.seo-khung` (nạp trước file này) đặt
   padding-top = var(--cao-thanh) + 1.6rem để chừa chỗ cho thanh điều hướng đang
   `position: fixed`. Một dòng `padding: 0 …` xoá đúng chỗ đó và tiêu đề trang chui
   xuống dưới thanh, không lỗi nào báo. Chỉ đụng vào cạnh dưới. */
.or-khung { max-width: 46rem; margin: 0 auto; padding-bottom: 4rem; }

/* ── Lá oracle: một tấm CHỮ, không phải một tấm tranh ─────────────────
   Bộ này không có tranh riêng và sẽ không bao giờ có: cái nó bày ra là một chi tiết
   trong tranh đã có. Nên lá ở đây là một tấm chữ, còn bằng chứng nằm ở ảnh lá nguồn
   bên dưới. Đừng vẽ thêm hình minh hoạ cho nó — hình vẽ thêm là hình bịa. */
.or-la {
  position: relative; border: 1px solid var(--vien, #3a3550);
  border-radius: 1rem; padding: 1.6rem 1.3rem 1.3rem;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  text-align: center;
}
.or-ten {
  font-size: 1.45rem; line-height: 1.25; margin: 0 0 .2rem; letter-spacing: .01em;
}
.or-so { font-size: .78rem; opacity: .55; margin: 0 0 1rem; }
.or-chi-tiet {
  font-size: 1.06rem; line-height: 1.55; margin: 0 auto 1.1rem; max-width: 26rem;
  font-style: italic; opacity: .92;
}
.or-chi-tiet::before, .or-chi-tiet::after { opacity: .5; }
.or-chi-tiet::before { content: "“"; }
.or-chi-tiet::after { content: "”"; }
.or-thong-diep { font-size: 1.08rem; line-height: 1.6; margin: 0 auto; max-width: 28rem; }
.or-viec {
  margin: 1.1rem auto 0; max-width: 28rem; padding-top: .9rem;
  border-top: 1px dashed rgba(255,255,255,.18); font-size: .95rem; line-height: 1.55;
}
.or-viec b { font-weight: 600; opacity: .7; display: block; font-size: .78rem;
             letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }

/* Lá nguồn: bằng chứng, nên nó phải bấm được sang trang lá đó. */
.or-nguon {
  display: flex; gap: .85rem; align-items: center; justify-content: center;
  margin: 1.2rem auto 0; max-width: 28rem; text-align: left;
}
.or-nguon img { width: 3.6rem; border-radius: .3rem; display: block; }
.or-nguon p { margin: 0; font-size: .88rem; line-height: 1.5; opacity: .85; }
.or-nguon a { color: inherit; }

/* ── Bốn tụ ──────────────────────────────────────────────────────── */
.or-tu-hang + .phu { margin-top: 1.2rem; }
.or-tu-hang {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  max-width: 34rem; margin: 1.4rem auto 0;
}
.or-tu {
  aspect-ratio: 100 / 171; border-radius: .55rem; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); color: inherit;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px,
                                        rgba(255,255,255,.01) 6px 12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 600; opacity: .9;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.or-tu:hover:not(:disabled) { transform: translateY(-.4rem); opacity: 1; }
.or-tu:disabled { cursor: default; }
.or-tu.mo { opacity: .35; }
.or-tu.dang-chon { opacity: 1; box-shadow: 0 0 0 2px var(--nhan, #d8b25c); }

/* Chỉ động vào transform và opacity. Và `prefers-reduced-motion` bỏ hết — luật chung
   của style.css đã lo, ở đây chỉ cần không tự dựng animation nằm ngoài nó. */
.or-hien { animation: or-len .5s ease both; }
@keyframes or-len { from { opacity: 0; transform: translateY(.7rem); } }

/* ── Bảng 44 lá ──────────────────────────────────────────────────── */

@media (max-width: 34rem) {
  .or-ds { grid-template-columns: 1fr; }
  .or-tu-hang { grid-template-columns: repeat(2, 1fr); max-width: 20rem; }
  .or-ten { font-size: 1.25rem; }
}

/* Khối chữ giải thích và bảng so sánh. Khai ở ĐÂY chứ không mượn của seo.css: hai
   trang này nạp seo.css thật, nhưng một lớp chỉ đúng khi nào nạp thêm file khác là
   cái bẫy đặt sẵn cho trang tiếp theo. */
.or-doan { margin-top: 2.6rem; }
.or-doan h2 { margin-top: 2rem; }
@media (max-width: 30rem) { .or-bang { font-size: .86rem; } }

/* ── Mặt lá: miếng cắt thật từ bản scan 1909 ──────────────────────────────
   Không đặt `height` cố định. Mỗi chi tiết một hình dạng khác nhau (dải ngang
   cho hai chiếc giày, cột dọc cho con thuyền), ép về một khung là cắt mất
   đúng thứ đang muốn chỉ ra. */

/* Ảnh lá Oracle, khổ 2:3. */
.or-nhac { margin: 0 0 1rem; font-size: 1rem; letter-spacing: .06em; color: var(--vang); }
.or-la .phu a { color: var(--vang); text-underline-offset: .2em; }
.or-hinh {
  display: block;
  width: 100%;
  height: auto;
  max-width: 15rem;
  border: 1px solid rgba(216,180,92,.4);
  margin: 0 auto 1rem;
  border-radius: .7rem;
  aspect-ratio: 2 / 3;
}