/* Trang /oracle: lời nhắn hôm nay và album 44 lá. Nạp SAU style.css, trang_chu.css,
   thanh_tren.css, seo.css và co_bai.css; chỉ thêm, không sửa lại thứ có sẵn.

   Lớp mang tiền tố `ov-` (oracle Việt). Trang /chon-tu dùng tiền tố `or-` ở chon_tu.css;
   hai trang không nạp CSS của nhau, nên không mượn lớp qua lại. */

/* Chốt cho `hidden`, phải đứng TRƯỚC mọi rule `display`. Mặc định 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ô tác dụng, không lỗi nào báo. Trang này bật tắt bốn khối lẫn nhau. */
[hidden] { display: none !important; }

/* ⚠️ KHÔNG dùng `padding` viết tắt: `.seo-khung` chừa `padding-top` cho thanh điều hướng
   đang `fixed`, một dòng viết tắt ở đây xoá sạch chỗ chừa đó. */
.ov-khung { max-width: 46rem; margin: 0 auto; padding-bottom: 4rem; }
.ov-khung > h1, .ov-khung > .phu { text-align: center; margin-left: auto; margin-right: auto; }

.ov-hom-nay { text-align: center; margin: 1.6rem 0 0; }
.ov-hom-nay .phu { margin-left: auto; margin-right: auto; }

/* Lá Oracle khổ 2:3 và to hơn lá tarot ở co_bai.css (11:19). Ảnh là thứ khách nhìn
   trước tiên, nên nó lớn. Đặt qua khối bọc chứ không qua lớp trên chính cỗ bài:
   `CoBai.xaoCoc()` ghi đè `className` của cỗ mỗi lần xáo. */
.ov-ban { display: flex; justify-content: center; }
.ov-ban .cb-la, .ov-ban .cb-coc { width: min(18rem, 70vw); aspect-ratio: 2 / 3; }
.ov-ban .cb-san, .ov-ban .cb-coc { margin: 1.2rem auto 1rem; }

/* ── Nghi thức hít thở ── vòng tròn phình rồi thu, ba nhịp. */
.ov-tho { padding: 1.4rem 0 .4rem; }
.ov-vong {
  position: relative; width: 11rem; height: 11rem; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.ov-vong span {
  display: block; width: 5.2rem; height: 5.2rem; border-radius: 50%;
  border: 1px solid var(--vang);
  background: radial-gradient(circle, rgba(216,180,92,.28), rgba(216,180,92,.04) 70%);
  box-shadow: 0 0 40px 4px rgba(216,180,92,.18);
}
.ov-vong.tho span { animation: ov-tho 3.4s ease-in-out 3 both; }
@keyframes ov-tho {
  0%   { transform: scale(1); opacity: .7; }
  47%  { transform: scale(2); opacity: 1; }
  100% { transform: scale(1); opacity: .7; }
}
.ov-tho-chu {
  margin: 0 0 .4rem; font-size: 1.25rem; letter-spacing: .08em; color: var(--giay);
  min-height: 1.6em;
}

/* ── Chữ của lá ── */
.ov-chu { max-width: 34rem; margin: .4rem auto 0; }
.ov-nhan {
  margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vang-toi);
}
/* Hai lớp trong bộ chọn là chủ ý: `.seo-khung h2` ở seo.css nặng hơn một lớp trần, để
   một lớp thì tên lá nhỏ lại và bị đẩy xa khỏi dòng nhóm. */
.ov-chu .ov-ten { margin: 0; font-size: 2rem; line-height: 1.2; color: var(--giay); }
.ov-nhac {
  margin: .25rem 0 1.1rem; font-size: 1.02rem; letter-spacing: .06em; color: var(--vang);
}
.ov-thong-diep {
  margin: 0 auto 1.3rem; font-size: 1.16rem; line-height: 1.75; color: var(--giay);
}
.ov-hoi {
  margin: 0 auto 1.2rem; padding: .9rem 1.1rem; max-width: 30rem; text-align: left;
  border-left: 2px solid var(--vang); background: rgba(216,180,92,.07);
  font-size: 1.02rem; line-height: 1.65; font-style: italic; color: var(--giay);
}
.ov-hoi b {
  display: block; margin-bottom: .25rem; font-style: normal; font-weight: 500;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vang-toi);
}
.ov-bieu-tuong {
  margin: 0 auto 1.2rem; max-width: 30rem; text-align: left; line-height: 1.75;
  color: var(--giay-mo); animation: cb-hien .5s var(--nhip) both;
}
.ov-bieu-tuong p { margin: 0 0 .5rem; }
.ov-bieu-tuong a, .ov-doan a { color: var(--vang); text-underline-offset: .2em; }
.ov-mang-di {
  margin: 1.8rem auto 1.2rem; padding-top: 1.2rem; max-width: 32rem;
  border-top: 1px solid rgba(240,231,212,.12);
}
.ov-mang-di .chan-nut { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── Album ── */
.ov-doan { margin-top: 3rem; }
.ov-doan h2 { margin-top: 2rem; }
.ov-album { margin: 1rem 0 1.2rem; }
.ov-nhom-ten {
  margin: 1.6rem 0 .6rem; font-size: .82rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vang-toi);
}
.ov-luoi {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
}
.ov-o {
  display: block; text-decoration: none; text-align: center; color: var(--giay-mo);
  font-size: .8rem; line-height: 1.3;
}
.ov-o img, .ov-lung {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; margin-bottom: .3rem;
  border: 1px solid rgba(216,180,92,.35); box-sizing: border-box;
}
.ov-o img { object-fit: cover; transition: transform .3s var(--nhip), box-shadow .3s; }
a.ov-o:hover img, a.ov-o:focus-visible img {
  transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(216,180,92,.6);
}
a.ov-o:hover, a.ov-o:focus-visible { color: var(--giay); }
/* Lá chưa gặp: mặt lưng, vẽ bằng gradient, không tải ảnh nào. */
.ov-lung {
  background:
    radial-gradient(circle at 50% 50%, rgba(216,180,92,.22) 0 1px, transparent 1px) 0 0/14px 14px,
    linear-gradient(150deg, #16203a, #0b1020 60%, #131b31);
  border-color: rgba(216,180,92,.18);
}
.ov-o.khoa { color: var(--giay-chim); }

.ov-ba-bo, .ov-nhom-ds { padding-left: 1.2rem; line-height: 1.75; }
.ov-ba-bo li, .ov-nhom-ds li { margin-bottom: .45rem; }
.ov-ba-bo b, .ov-nhom-ds b { color: var(--giay); font-weight: 500; }

@media (max-width: 34rem) {
  .ov-chu .ov-ten { font-size: 1.7rem; }
  .ov-thong-diep { font-size: 1.08rem; }
  .ov-luoi { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
  .ov-o { font-size: .78rem; }
  .ov-vong { width: 9.5rem; height: 9.5rem; }
  .ov-vong span { width: 4.6rem; height: 4.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIAI ĐOẠN 2 VÀ 3 (30/09/2026): mùa, lá tự nhảy ra, nhật ký, kể chuyện rồi rút
   lá (trả phí), gửi lá, trang nhận lá. Khuôn theo mục «Nhờ tôi đọc» của Lenormand
   (lenormand.css), nhưng lớp riêng: trang này không nạp lenormand.css.
   Tiền tố: oh- (hỏi), og- (gửi), on- (nhận).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mùa đang mở ── */
.ov-mua {
  margin: 1.4rem auto 0; padding: 1.1rem 1.2rem 1rem; max-width: 36rem; text-align: center;
  border: 1px solid rgba(216,180,92,.45); border-radius: .9rem;
  background: radial-gradient(ellipse at 50% 0, rgba(216,180,92,.16), rgba(216,180,92,.03) 70%);
}
.ov-mua h2 { margin: .1rem 0 .5rem; }
.ov-mua p { margin-left: auto; margin-right: auto; line-height: 1.65; }
.ov-mua-la { display: flex; justify-content: center; gap: .7rem; margin: .9rem 0 .4rem; }
.ov-mua-la .ov-o { width: 5.4rem; }
.ov-mua .chan-nut { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ov-mua a { color: var(--vang); }

/* ── Lá tự nhảy ra: lá bật khỏi chỗ, loé sáng, rồi hạ về. Chỉ là hoạt ảnh. ── */
.ov-tu-nhay {
  margin: .2rem auto .6rem; font-size: 1.02rem; letter-spacing: .08em; color: var(--vang);
  font-style: italic; animation: cb-hien .6s var(--nhip) both;
}
.ov-nhay-ra .cb-la, .oh-o.oh-nhay-ra .cb-la { animation: ov-bat 1.2s cubic-bezier(.3,.7,.3,1) both; }
@keyframes ov-bat {
  0%   { translate: 0 0; rotate: 0deg; filter: none; }
  35%  { translate: 0 -2.4rem; rotate: -9deg; filter: drop-shadow(0 0 1.4rem rgba(216,180,92,.85)); }
  70%  { translate: 0 -1.2rem; rotate: 4deg; filter: drop-shadow(0 0 .9rem rgba(216,180,92,.6)); }
  100% { translate: 0 0; rotate: 0deg; filter: drop-shadow(0 0 .5rem rgba(216,180,92,.35)); }
}

/* ── Nhật ký dưới câu hỏi tự ngẫm ── */
.ov-nk { margin: 0 auto 1.4rem; max-width: 30rem; text-align: left; }
.ov-nk .ov-nhan { display: block; margin-bottom: .4rem; }
.ov-nk textarea, .oh-form textarea, .oh-hoi-them textarea, .og-form textarea, .og-form input, .og-kq input {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  line-height: 1.5; color: var(--giay); background: rgba(8,11,20,.6);
  border: 1px solid rgba(216,180,92,.3); border-radius: .5rem; padding: .7rem .9rem; resize: vertical;
}
.ov-nk textarea:focus, .oh-form textarea:focus, .oh-hoi-them textarea:focus,
.og-form textarea:focus, .og-form input:focus, .og-kq input:focus {
  outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(216,180,92,.12);
}
.ov-nk .chan-nut { margin: .6rem 0 0; }
.ov-nk .phu { margin: .45rem 0 0; }
.ov-nk-cu { margin-top: .8rem; }
.ov-nk-cu summary { cursor: pointer; color: var(--vang); min-height: 2.75rem; display: flex; align-items: center; }
.ov-nk-cu ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.ov-nk-cu li {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .6rem 0;
  border-top: 1px solid rgba(240,231,212,.1); line-height: 1.55;
}
.ov-nk-cu li b { grid-column: 1; font-weight: 500; font-size: .86rem; color: var(--vang-toi); }
.ov-nk-cu li span { grid-column: 1; color: var(--giay-mo); white-space: pre-line; }
.ov-nk-xoa {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; font: inherit; font-size: .84rem;
  color: var(--giay-chim); background: none; border: 1px solid rgba(255,255,255,.18);
  border-radius: 2rem; padding: .35rem .8rem; min-height: 2.2rem; cursor: pointer;
}
.ov-nk-xoa:hover { color: var(--giay); border-color: rgba(216,180,92,.6); }

/* ── Bán chéo nhẹ sau khi đọc ── */
.ov-ban-cheo {
  margin: 1.6rem auto 0; padding: 1rem 1.1rem; max-width: 32rem; text-align: left;
  border: 1px solid rgba(240,231,212,.12); border-radius: .7rem; line-height: 1.65;
}
.ov-ban-cheo p { margin: 0 0 .4rem; }
.ov-ban-cheo a { color: var(--vang); text-underline-offset: .2em; }

/* ── Kể chuyện của bạn, rút lá ── */
.oh-khoi { padding-top: 1.6rem; border-top: 1px solid rgba(216,180,92,.22); }
.oh-kieu { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .9rem; }
.oh-kieu-nut {
  font: inherit; color: var(--giay); text-align: left; cursor: pointer; padding: .8rem .9rem;
  border-radius: .7rem; border: 1px solid rgba(216,180,92,.3); background: rgba(255,255,255,.03);
  transition: border-color .25s, background .25s, transform .3s var(--nhip);
}
.oh-kieu-nut b { display: block; font-weight: 600; margin-bottom: .15rem; }
.oh-kieu-nut span { display: block; font-size: .8rem; color: var(--giay-chim); line-height: 1.4; }
.oh-kieu-nut .oh-gia { margin-top: .45rem; color: var(--vang); font-size: .82rem; }
.oh-kieu-nut:hover { border-color: rgba(216,180,92,.7); transform: translateY(-2px); }
.oh-kieu-nut.dang { border-color: var(--vang); background: rgba(216,180,92,.1); }
.oh-nhan-mua { grid-column: 1 / -1; margin: .8rem 0 0; }
.oh-form { margin-top: 1.2rem; }
.oh-form .ov-nhan { display: block; margin: 1rem 0 .4rem; }
.oh-mang { display: flex; flex-wrap: wrap; gap: .45rem; }
.oh-cd {
  font: inherit; font-size: .92rem; color: var(--giay-mo); cursor: pointer; padding: .5rem 1rem;
  min-height: 2.75rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,.2); background: none;
  transition: color .25s, border-color .25s, background .25s;
}
.oh-cd:hover { border-color: rgba(216,180,92,.6); }
.oh-cd.dang { color: var(--vang); border-color: var(--vang); background: rgba(216,180,92,.1); }
/* Khoảng cách đặt lên KHỐI BỌC, không lên .cf-turnstile: lớp đó còn dùng ở trang khác. */
.oh-kiem { margin-top: .8rem; }
.oh-form .phu { margin: .45rem 0 0; }
.oh-form .chan-nut { margin: .8rem 0 0; }
.oh-bao {
  margin: .8rem 0 0; padding: .6rem .8rem; border-radius: .45rem; font-size: .94rem; line-height: 1.5;
  color: var(--giay); border-left: 2px solid var(--than); background: rgba(193,85,58,.1);
}
.oh-bao:empty { display: none; }
.oh-bao a { color: var(--vang); }
.oh-hoi-lai {
  margin: 1rem 0 0; padding: .9rem 1rem; border-radius: .6rem;
  border: 1px solid rgba(216,180,92,.35); background: rgba(216,180,92,.06);
}
.oh-hoi-lai p { margin: 0; line-height: 1.55; }
.oh-hoi-lai .chan-nut { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.oh-dung-lai {
  margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border-radius: .7rem; line-height: 1.7;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03);
}
.oh-dung-lai p { margin: 0 0 .8rem; }
.oh-dung-lai p:last-child { margin-bottom: 0; }

.oh-ban { margin-top: 1.4rem; text-align: center; }
.oh-cac-la { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .6rem auto 0; max-width: 36rem; }
.oh-cac-la.mot { grid-template-columns: minmax(0, 15rem); justify-content: center; }
.oh-o {
  display: flex; flex-direction: column; align-items: center; padding: .5rem .3rem .7rem;
  border-radius: .7rem; border: 1px solid transparent; transition: border-color .3s, background .3s;
}
.oh-o.sang { border-color: rgba(216,180,92,.6); background: rgba(216,180,92,.07); }
.oh-o .ov-nhan { margin: 0 0 .2rem; }
.oh-o .cb-san { margin: .3rem auto .5rem; }
.oh-o .cb-la { width: min(10rem, 26vw); aspect-ratio: 2 / 3; }
.oh-cac-la.mot .oh-o .cb-la { width: min(14rem, 60vw); }
.oh-ten { color: var(--giay); font-weight: 500; text-decoration: none; }
.oh-ten:hover { color: var(--vang); }
.oh-nhac { font-size: .82rem; color: var(--vang-toi); letter-spacing: .04em; }
.oh-tu-tim {
  margin-top: .35rem; font-size: .78rem; letter-spacing: .06em; color: var(--vang);
  border: 1px solid rgba(216,180,92,.45); border-radius: 2rem; padding: .1rem .55rem;
}
.oh-nhom { margin: .8rem auto 0; max-width: 34rem; }

.oh-kq { margin: 1.4rem auto 0; max-width: 36rem; }
.oh-kq > .ov-nhan { text-align: center; }
.oh-kq > .oh-cau-khach { margin-bottom: 1.2rem; }
.oh-van p, .oh-tra p { margin: 0 0 .9rem; line-height: 1.8; }
.oh-van p[tabindex], .oh-tra p[tabindex] { cursor: pointer; border-radius: .4rem; transition: background .3s; }
.oh-van p[tabindex]:hover, .oh-van p[tabindex]:focus-visible { background: rgba(216,180,92,.06); }
.oh-van strong, .oh-tra strong { color: var(--vang-sang); font-weight: 600; }
/* .seo-khung h3 (seo.css) nặng hơn một lớp trần, nên kèm .oh-khoi mới thắng. */
.oh-khoi .oh-nhan-doan {
  margin: 1.8rem 0 1rem; padding-top: 1.1rem; border-top: 1px solid rgba(216,180,92,.25);
  font-size: .82rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--vang);
}
.oh-cau-khach {
  margin: 0 0 .5rem; padding-left: .8rem; border-left: 2px solid rgba(255,255,255,.25);
  color: var(--giay-mo); font-style: italic; line-height: 1.55; white-space: pre-line;
}
.oh-hoi-them { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(216,180,92,.25); }
.oh-khoi .oh-hoi-them h3 { margin: 0 0 .8rem; font-weight: 400; }
.oh-hoi-them .ov-nhan { display: block; margin: 0 0 .4rem; }
.oh-hoi-them .chan-nut { margin: .6rem 0 0; }
.oh-luot { margin: 0 0 1.4rem; }

/* ── Gửi một lá ── */
.og-khoi { padding-top: 1.6rem; border-top: 1px solid rgba(216,180,92,.22); }
/* Căn TRÁI, thẳng mép với tiêu đề và đoạn chữ phía trên: căn giữa thì khối lệch hẳn
   sang phải so với chữ ngay trên nó ở màn rộng. */
.og-form, .og-kq { max-width: 30rem; margin: 1rem 0 0; }
.og-form .ov-nhan, .og-kq > .ov-nhan { display: block; margin: 1rem 0 .4rem; }
.og-form .chan-nut { margin: 1rem 0 0; }
.og-kq .chan-nut { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.og-la { display: flex; gap: 1rem; align-items: center; }
.og-la img {
  width: 6.2rem; height: auto; aspect-ratio: 2 / 3; object-fit: cover; flex: none;
  border: 1px solid rgba(216,180,92,.45); border-radius: .35rem;
}
.og-la .ov-nhan { margin: 0 0 .2rem; }
.og-ten { margin: 0; font-size: 1.3rem; color: var(--giay); }
.og-nhac { margin: .1rem 0 0; color: var(--vang); letter-spacing: .04em; }

/* ── Trang nhận lá (/loi-nhan) ── */
.on-khoi h1 { margin: .2rem 0 1rem; }
.on-loi {
  margin: 0 auto 1rem; padding: .9rem 1.1rem; max-width: 30rem; text-align: left;
  border-left: 2px solid var(--vang); background: rgba(216,180,92,.07); border-radius: 0 .5rem .5rem 0;
}
.on-loi .ov-nhan { margin-bottom: .3rem; }
.on-loi-chu { margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--giay); white-space: pre-line; }
.on-moi .chan-nut { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 34rem) {
  .oh-kieu { grid-template-columns: 1fr; }
  .oh-cac-la { gap: .4rem; }
  .oh-o { padding: .4rem .1rem .6rem; }
  .oh-ten { font-size: .9rem; }
  .oh-nhac { font-size: .78rem; }
  .ov-mua-la .ov-o { width: 4.6rem; }
}

/* Phiếu +1 câu hỏi thêm (thưởng chuỗi 7 ngày), hiện khi quẻ đã hết câu. */
.oh-phieu { margin-top: .6rem; }
.oh-phieu .chan-nut { margin: .4rem 0 0; }