/* Petit Lenormand. Tự mang kiểu dáng của chính nó, không mượn file trang nào khác —
   cùng luật đã ghi ở oracle.css và đã trả giá hai lần.

   ⚠️ Bộ này KHÔNG có tranh, và CSS ở đây phải nói ra điều đó một cách tử tế chứ không
   che giấu. Lá bày bằng SỐ, TÊN và LÁ BÀI TÂY. Lá bài Tây không phải hình trang trí:
   nó là một nửa có thật của một lá Lenormand, và nó là thứ duy nhất ở đây mình vẽ được
   mà không bịa. */

/* Chốt cho `hidden`, phải đứng TRƯỚC mọi rule `display`. */
[hidden] { display: none !important; }

/* ⚠️ KHÔNG dùng `padding` viết tắt — xem ghi chú cùng chỗ ở oracle.css. `.seo-khung`
   chừa sẵn chỗ cho thanh điều hướng `position: fixed`; ghi đè bằng `padding: 0 …`
   là tiêu đề trang nằm dưới thanh. */
.ln-khung { max-width: 48rem; margin: 0 auto; padding-bottom: 4rem; }

/* ── Một lá ──────────────────────────────────────────────────────── */
.ln-la {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15rem; text-align: center;
  aspect-ratio: 100 / 150; padding: .5rem .35rem;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: .5rem;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.ln-so { font-size: .7rem; opacity: .5; letter-spacing: .06em; }
.ln-ten { font-size: .93rem; line-height: 1.2; font-weight: 500; }
.ln-en { font-size: .68rem; opacity: .45; }
.ln-tay { font-size: 1.05rem; margin-top: .2rem; letter-spacing: .02em; }
.ln-tay.do { color: #e0645c; }
.ln-tay.den { color: var(--giay-chim, #a9a2b8); }

.ln-la.loi { box-shadow: 0 0 0 2px var(--vang, #d8b25c); }
.ln-la.sang { box-shadow: 0 0 0 2px rgba(216, 178, 92, .55); }

/* ── Dòng ba lá và hộp chín lá ────────────────────────────────────── */
.ln-hang { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr);
           max-width: 24rem; margin: 1.2rem auto 0; }
.ln-hop { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr);
          max-width: 26rem; margin: 1.2rem auto 0; }

.ln-hien { animation: ln-len .45s ease both; }
@keyframes ln-len { from { opacity: 0; transform: translateY(.6rem); } }

/* ── Phần đọc ────────────────────────────────────────────────────── */
.ln-doc { margin: 1.6rem auto 0; max-width: 34rem; }
.ln-dong { border-top: 1px solid rgba(255, 255, 255, .12); padding: .85rem 0; }
.ln-dong:first-child { border-top: 0; }
.ln-nhan { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
           color: var(--giay-chim); margin: 0 0 .35rem; }
.ln-cau { margin: 0; line-height: 1.6; }
.ln-cap-ds { list-style: none; padding: 0; margin: .5rem 0 0; }
.ln-cap-ds li { font-size: .88rem; line-height: 1.55; color: var(--giay-chim);
                margin-top: .2rem; }
.ln-cap-ds b { color: var(--giay); font-weight: 500; }

.ln-khung-ds { list-style: none; padding: 0; margin: 1.2rem auto 0; max-width: 34rem; }
.ln-khung-ds li { border-left: 2px solid rgba(255,255,255,.18); padding: .15rem 0 .15rem .8rem;
                  margin-bottom: .6rem; }
.ln-khung-ds .ln-nhan { margin-bottom: .1rem; }


.ln-cap-kq { margin-top: 1rem; }
.ln-cap-kq .ln-dong:first-child { border-top: 1px solid rgba(255,255,255,.12); }

/* ── Cả bộ 36 lá ─────────────────────────────────────────────────── */
.ln-bo { list-style: none; padding: 0; margin: 1.2rem 0 0;
         display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.ln-bo li { border: 1px solid rgba(255,255,255,.12); border-radius: .6rem;
            padding: .75rem .85rem; }
.ln-bo h3 { margin: 0 0 .2rem; font-size: 1rem; }
.ln-bo h3 span { font-size: .78rem; opacity: .5; font-weight: 400; margin-left: .3rem; }
.ln-bo p { margin: 0; font-size: .88rem; line-height: 1.5; opacity: .85; }
.ln-bo .ln-bo-ghep { margin-top: .4rem; font-size: .8rem; opacity: .6; }

.ln-doan { margin-top: 2.6rem; }
.ln-doan h2 { margin-top: 2rem; }
.ln-bang { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem;
           font-size: .93rem; }
.ln-bang th, .ln-bang td { text-align: left; vertical-align: top; padding: .55rem .6rem;
                           border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ln-bang thead th { font-weight: 600; opacity: .75; font-size: .82rem;
                    letter-spacing: .06em; text-transform: uppercase; }
.ln-bang td:first-child { opacity: .7; white-space: nowrap; }

@media (max-width: 34rem) {
  .ln-bo { grid-template-columns: 1fr; }
  .ln-hop, .ln-hang { max-width: 20rem; gap: .45rem; }
  .ln-ten { font-size: .82rem; }
  .ln-en { display: none; }
}

/* ── Ảnh lá ─────────────────────────────────────────────────────────────
   36 ảnh 2:3 ở web/lenormand_hinh/ (AI tạo, chủ dự án, 25/09/2026). Ảnh đổ đầy
   bề ngang lá; số, tên và lá bài Tây nằm dưới ảnh. */
.ln-bt {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
  object-fit: cover; border-radius: .35rem; background: #1a1524;
}
.ln-la { justify-content: flex-start; padding: .35rem .35rem .5rem; aspect-ratio: auto; }
.ln-la .ln-bt { margin-bottom: .3rem; }
/* <p> mang lề mặc định 1em: dưới ảnh, số và tên bị đẩy xa nhau bằng cả một dòng trống. */
.ln-la p { margin: 0; }

.ln-bt-ds { width: 4.2rem; height: 6.3rem; float: right; margin: 0 0 .4rem .6rem; }

/* Bảng so sánh bốn cột: trên điện thoại mỗi ô bị bóp còn hai ba chữ một dòng, đọc
   không nổi. Bọc trong `.ln-cuon` cuộn ngang, bảng giữ bề rộng tối thiểu. */
.ln-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.4rem; }
.ln-cuon .ln-bang { margin: 0; }
@media (max-width: 34rem) {
  .ln-bang { min-width: 36rem; }
  .ln-cuon { margin: 1rem -1.1rem 1.4rem; padding: 0 1.1rem; }
}

/* ── Tra cặp: hai ô lá lật 3D + lưới 36 lá ảnh (26/09/2026) ─────────────────
   Trước là lưới chip chữ với ảnh cỡ con tem; chủ dự án bảo xấu, đúng. Nay lá là LÁ:
   ảnh 2:3, lật 3D vào lưới, nghiêng theo chuột (nghieng_la.js), bay vào ô khi bấm.
   Tiền tố `lc-` riêng để không đụng `.ln-la` của dòng ba lá / hộp chín lá. */
.lc-ban {
  position: relative; display: flex; gap: 1.1rem; align-items: flex-start; justify-content: center;
  margin: 1.2rem auto .9rem; perspective: 1200px;
}
.lc-o {
  position: relative; width: 9.5rem; flex: 0 0 auto; font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; perspective: 900px; text-align: center;
}
.lc-o .lc-xoay {
  display: block; position: relative; aspect-ratio: 2 / 3; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, 1.25, .45, 1), rotate .3s var(--nhip);
}
.lc-o.co .lc-xoay { transform: rotateY(180deg); }
.lc-o.lc-tuc .lc-xoay { transition: none; }
.lc-mat {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: .55rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.lc-trong {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  color: var(--giay-chim); font-size: .88rem; letter-spacing: .04em;
  background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(216, 180, 92, .42);
  transition: border-color .3s, box-shadow .3s;
}
.lc-cong { font-size: 2.2rem; line-height: 1; color: var(--vang); opacity: .55; font-weight: 300; }
.lc-o.dang .lc-trong { border-color: var(--vang); color: var(--giay); animation: lc-moi 1.9s ease-in-out infinite; }
@keyframes lc-moi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 180, 92, 0), 0 0 0 rgba(216, 180, 92, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(216, 180, 92, .1), 0 0 26px rgba(216, 180, 92, .38); }
}
.lc-day {
  transform: rotateY(180deg); border: 1px solid rgba(216, 180, 92, .55);
  box-shadow: 0 18px 40px -18px #000; background: #1a1524;
}
.lc-day img, .lc-la img, .lc-bay img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Lá vừa đáp xuống: bừng sáng một nhịp. */
.lc-o.sang .lc-day { animation: lc-sang 1s ease-out; }
@keyframes lc-sang {
  0%  { box-shadow: 0 0 0 0 rgba(255, 240, 200, .9), 0 0 40px 12px rgba(216, 180, 92, .75); }
  100% { box-shadow: 0 0 0 14px rgba(255, 240, 200, 0), 0 18px 40px -18px #000; }
}
.lc-o .lc-ten { display: block; margin-top: .5rem; font-size: .95rem; color: var(--giay); min-height: 1.3em; line-height: 1.3; }
.lc-o .lc-ten small { display: block; font-size: .78rem; opacity: .6; margin-top: .1rem; }
.lc-o.co:hover .lc-day { border-color: rgba(224, 100, 92, .7); }   /* gợi ý: bấm là bỏ ra */

.ln-dao {
  align-self: center; margin-top: 3.2rem; width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--giay-chim);
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  transition: color .25s, border-color .25s, transform .35s var(--nhip), box-shadow .3s;
}
.ln-dao:hover { color: var(--vang); border-color: rgba(216, 178, 92, .6); transform: rotate(180deg); }
.lc-ban.du .ln-dao { color: var(--vang); border-color: rgba(216, 178, 92, .5); box-shadow: 0 0 14px rgba(216, 180, 92, .25); }

/* Sợi chỉ vàng nối hai lá: vẽ ra rồi đứng lại mờ mờ, gỡ khi một lá rời ô. */
.lc-chi { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.lc-chi path {
  fill: none; stroke: var(--vang); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85;
  filter: drop-shadow(0 0 5px rgba(216, 180, 92, .9));
  animation: lc-chi-ve 1s .1s ease-in-out forwards, lc-chi-mo 1.2s 2.4s forwards;
}
.lc-chi circle {
  fill: var(--vang); opacity: 0; filter: drop-shadow(0 0 6px rgba(216, 180, 92, 1));
  animation: lc-cham 1s .1s ease-out forwards, lc-chi-mo 1.2s 2.4s forwards;
}
@keyframes lc-cham { 0% { opacity: 0; r: 0; } 40% { opacity: 1; r: 5; } 100% { opacity: .9; r: 3; } }
@keyframes lc-chi-ve { to { stroke-dashoffset: 0; } }
@keyframes lc-chi-mo { to { opacity: .35; } }

.lc-tim-khung { margin: .9rem 0 0; text-align: center; }
.lc-tim-khung input {
  width: 100%; max-width: 22rem; font: inherit; font-size: .95rem; color: var(--giay);
  background: rgba(8, 11, 20, .6); border: 1px solid rgba(216, 180, 92, .25); border-radius: .5rem;
  padding: .55rem .9rem; transition: border-color .3s, box-shadow .3s;
}
.lc-tim-khung input:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(216, 180, 92, .12); }
.lc-tim-khung input::placeholder { color: var(--giay-chim); }

/* Lưới 36 lá. `perspective` ở lưới để cú lật vào và cú nghiêng có chiều sâu thật. */
.lc-luoi {
  display: grid; gap: .9rem .55rem; margin: 1rem 0 0;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); perspective: 1400px;
}
.lc-la {
  position: relative; font: inherit; color: var(--giay-chim); background: none; border: 0;
  padding: 0; cursor: pointer; text-align: center; transition: opacity .3s, filter .3s;
}
.lc-luoi:not(.hien) .lc-la { opacity: 0; }
.lc-luoi.hien .lc-la { animation: lc-vao .65s var(--nhip) backwards; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes lc-vao {
  from { opacity: 0; transform: translateY(1.6rem) rotateY(-70deg) rotateX(10deg); }
  to   { opacity: 1; transform: none; }
}
.lc-la .lc-xoay {
  display: block; position: relative; aspect-ratio: 2 / 3; border-radius: .45rem; overflow: hidden;
  border: 1px solid rgba(216, 180, 92, .28); box-shadow: 0 10px 24px -14px #000; background: #1a1524;
  transform-style: preserve-3d;
  transition: rotate .3s var(--nhip), transform .35s var(--nhip), box-shadow .35s, border-color .3s;
}
.lc-la .lc-mat { position: relative; display: block; width: 100%; height: 100%; }
/* Vệt sáng đi theo con trỏ (toạ độ do nghieng_la.js đặt vào --gx/--gy). */
.lc-la .lc-mat::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 240, 200, .38), transparent 55%);
  transition: opacity .25s;
}
.lc-la.nghieng .lc-mat::before { opacity: 1; }
.lc-la:hover .lc-xoay {
  transform: translateY(-.4rem) scale(1.05); border-color: rgba(216, 180, 92, .7);
  box-shadow: 0 18px 30px -12px rgba(216, 180, 92, .5);
}
.lc-la:hover { color: var(--giay); }
.lc-so {
  position: absolute; left: .3rem; top: .3rem; z-index: 2; font-style: normal; font-size: .68rem;
  line-height: 1; padding: .2rem .35rem; border-radius: .25rem; color: #2a2118;
  background: rgba(240, 231, 212, .88);
}
.lc-la .lc-ten { display: block; margin-top: .35rem; font-size: .84rem; line-height: 1.25; color: var(--giay); }
.lc-la .lc-tay { display: block; font-size: .78rem; margin-top: .1rem; }
.lc-tay.do { color: #e0645c; }
.lc-tay.den { color: var(--giay-chim); }
/* Lá đang nằm ở ô: mờ đi trong lưới, dấu 1/2 ở giữa, viền vàng. */
.lc-la.chon .lc-xoay { border-color: var(--vang); box-shadow: 0 0 0 2px var(--vang), 0 0 18px rgba(216, 180, 92, .45); }
.lc-la.chon img { opacity: .4; filter: saturate(.6); }
.lc-chon-dau {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--vang); text-shadow: 0 0 12px rgba(0, 0, 0, .8); pointer-events: none;
}
/* Không khớp ô tìm. */
.lc-la.mo { opacity: .22; filter: grayscale(.7); }
.lc-la.mo:hover { opacity: .6; }
/* Bản sao đang bay từ lưới vào ô (hoặc ngược lại). */
.lc-bay {
  position: fixed; z-index: 60; pointer-events: none; border-radius: .5rem; overflow: hidden;
  border: 1px solid rgba(216, 180, 92, .6); box-shadow: 0 24px 50px -16px #000, 0 0 30px rgba(216, 180, 92, .35);
  transform-origin: 0 0; backface-visibility: visible;
}

@media (max-width: 34rem) {
  .lc-ban { gap: .6rem; }
  .lc-o { width: 7.2rem; }
  .lc-o .lc-ten { font-size: .86rem; }
  .ln-dao { margin-top: 2.6rem; width: 2.3rem; height: 2.3rem; }
  .lc-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .4rem; }
  .lc-la .lc-ten { font-size: .78rem; }
  .lc-chon-dau { font-size: 1.4rem; }
  .lc-bay { border-radius: .4rem; }
}

/* ══ Dựng lại 26/09/2026: cặp của ngày · rút bài có nghi thức cắt cỗ · lá lật · đường sáng
   nối cặp · chạm hai lá · học. Ghi đè khối `.ln-la` cũ ở trên (lá nay là LÁ LẬT hai mặt). */

/* ── Lá lật hai mặt ─────────────────────────────────────────────────────── */
.ln-la {
  position: relative; display: block; padding: 0; border: 0; background: none;
  aspect-ratio: auto; text-align: center; cursor: pointer; perspective: 900px;
  transition: filter .3s;
}
.ln-la .ln-xoay {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: .5rem;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.2, .45, 1), rotate .3s var(--nhip);
}
.ln-la.ngua .ln-xoay { transform: rotateY(180deg); }
.ln-la .ln-mat {
  position: absolute; inset: 0; border-radius: .5rem; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid rgba(216, 180, 92, .45); background: #1a1524;
  box-shadow: 0 14px 30px -16px #000;
}
.ln-la .ln-sau { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #221b33, #120e1c 55%, #1d1730); }
.ln-la .ln-hoa {
  width: 62%; aspect-ratio: 2 / 3; border: 1px solid rgba(216, 180, 92, .35); border-radius: .35rem;
  background: repeating-linear-gradient(45deg, rgba(216, 180, 92, .12) 0 3px, transparent 3px 9px);
}
.ln-la .ln-truoc { transform: rotateY(180deg); }
.ln-la .ln-truoc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ln-la .ln-ten { margin: .4rem 0 0; font-size: .86rem; line-height: 1.25; color: var(--giay); }
.ln-la .ln-tay { margin: .1rem 0 0; font-size: .82rem; }
.ln-la .ln-ten, .ln-la .ln-tay { opacity: 0; transition: opacity .4s .5s; }
.ln-la.ngua .ln-ten, .ln-la.ngua .ln-tay { opacity: 1; }
.ln-la.loi .ln-mat { border-color: var(--vang, #d8b25c); box-shadow: 0 0 0 1px rgba(216, 178, 92, .5), 0 14px 30px -16px #000; }
/* Lá của cặp đang đọc: viền sáng, nhấc nhẹ. */
/* ⚠️ KHÔNG đặt `filter` lên .ln-xoay: filter làm phẳng preserve-3d, và lá đang ngửa hiện MẶT LƯNG. Ánh sáng đi vào từng mặt. */
.ln-la.sang .ln-mat { border-color: var(--vang); box-shadow: 0 0 0 2px rgba(216, 180, 92, .8), 0 0 22px rgba(216, 180, 92, .6), 0 14px 30px -16px #000; }
.ln-la.sang { translate: 0 -.3rem; }
.ln-la { transition: translate .35s var(--nhip); }
/* Lá đang chạm để tra cặp: số thứ tự ở giữa. */
.ln-la.chon .ln-mat { border-color: var(--vang); box-shadow: 0 0 0 2px var(--vang), 0 0 18px rgba(216, 180, 92, .45); }
.ln-thu {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 3;
  font-size: 1.9rem; color: var(--vang); text-shadow: 0 0 12px rgba(0, 0, 0, .85); pointer-events: none;
}
/* Nhãn «bạn» / «người kia», và mũi tên hướng nhìn. */
.ln-nguoi {
  position: absolute; left: 50%; top: -.55rem; transform: translateX(-50%); z-index: 3;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem;
  border-radius: 1rem; color: #2a2118; background: var(--vang); white-space: nowrap;
}
.ln-mui {
  position: absolute; top: 38%; z-index: 3; font-size: 1.3rem; line-height: 1; color: var(--vang);
  text-shadow: 0 0 8px rgba(0, 0, 0, .9); opacity: 0; transition: opacity .4s .7s; pointer-events: none;
}
.ln-la.ngua .ln-mui { opacity: .95; }
.ln-mui-phai { right: -.15rem; }
.ln-mui-trai { left: -.15rem; }

.ln-hang { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); max-width: 24rem; margin: 1.2rem auto 0; }
.ln-hop { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); max-width: 26rem; margin: 1.2rem auto 0; }
.ln-bay-khung { position: relative; }
#ln-bay { position: relative; }
/* Đường sáng nối hai lá của cặp đang đọc: vẽ ĐÈ lên lá, mờ dần. */
.ln-noi { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; }
.ln-noi path {
  fill: none; stroke: var(--vang); stroke-width: 2; stroke-linecap: round; opacity: .9;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(216, 180, 92, .95));
  animation: ln-noi-ve .7s ease-out forwards;
}
@keyframes ln-noi-ve { to { stroke-dashoffset: 0; } }
.ln-cham-nhac { text-align: center; font-size: .82rem; color: var(--giay-chim); margin: .8rem 0 0; }
.ln-cap-cham {
  max-width: 34rem; margin: .8rem auto 0; padding: .8rem 1rem; border-radius: .6rem;
  border: 1px solid rgba(216, 180, 92, .35); background: rgba(216, 180, 92, .06);
}
.ln-cap-cham p { margin: 0; line-height: 1.55; }
.ln-cap-cham .ln-cham-nguoc { margin-top: .4rem; font-size: .88rem; color: var(--giay-chim); }
.ln-cap-cham b { color: var(--giay); font-weight: 500; }
.ln-cap-ds li[tabindex] { cursor: pointer; padding: .2rem .4rem; margin-left: -.4rem; border-radius: .35rem;
  transition: background .25s, color .25s; }
.ln-cap-ds li[tabindex]:hover, .ln-cap-ds li.dang { background: rgba(216, 180, 92, .1); color: var(--giay); }

/* ── Cặp của ngày ───────────────────────────────────────────────────────── */
.ln-ngay {
  margin: 1.6rem 0 0; padding: 1rem 1.1rem 1.1rem; border-radius: .8rem;
  border: 1px solid rgba(216, 180, 92, .3); background: rgba(255, 255, 255, .025);
}
.ln-ngay-nhan { margin: 0 0 .6rem; }
.ln-ngay-nhan span { text-transform: none; letter-spacing: 0; opacity: .7; }
.ln-ngay-than { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.ln-ngay-bay { display: grid; grid-template-columns: repeat(2, 5.6rem); gap: .6rem; }
.ln-ngay-cau { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.ln-ngay-chu .phu { margin: .5rem 0 0; }
.ln-ngay-hoi { margin-top: .8rem; }
.ln-ngay-hoi-cau { margin: 0 0 .5rem; color: var(--giay); }
.ln-ngay-nut { display: flex; flex-wrap: wrap; gap: .5rem; }
.ln-ngay-nut .nut-phu { padding: .45rem .9rem; font-size: .9rem; }

/* ── Rút bài ─────────────────────────────────────────────────────────────── */
.ln-rut { margin-top: 2rem; }
.ln-rut-h2 { margin-bottom: .6rem; }
.ln-kieu { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ln-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);
}
.ln-kieu-nut b { display: block; font-weight: 600; margin-bottom: .15rem; }
.ln-kieu-nut span { display: block; font-size: .8rem; color: var(--giay-chim); line-height: 1.35; }
.ln-kieu-nut:hover { border-color: rgba(216, 180, 92, .7); transform: translateY(-2px); }
.ln-kieu-nut.dang { border-color: var(--vang); background: rgba(216, 180, 92, .1); }
.ln-toi { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 0; font-size: .86rem; }
.ln-toi-nhan { color: var(--giay-chim); margin-right: .2rem; }
.ln-toi-nut {
  font: inherit; font-size: .82rem; color: var(--giay-chim); cursor: pointer; padding: .3rem .7rem;
  border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .18); background: none;
  transition: color .25s, border-color .25s;
}
.ln-toi-nut.dang { color: var(--vang); border-color: var(--vang); }
.ln-ck-form { margin: 1rem 0 0; }
.ln-ck-form input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--giay); margin-top: .4rem;
  background: rgba(8, 11, 20, .6); border: 1px solid rgba(216, 180, 92, .3); border-radius: .5rem; padding: .65rem .9rem;
}
.ln-ck-form input:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(216, 180, 92, .12); }
.ln-ck-form .chan-nut { margin: .6rem 0 0; }

/* Nghi thức: cỗ xáo rồi dải bài để kéo tay cắt. */
.ln-nghi-thuc { min-height: 12rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 1.2rem 0 0; }
.ln-cat-khung { width: 100%; text-align: center; }
.ln-cat-nhac { margin: 0 0 .8rem; color: var(--giay); }
.ln-cat {
  position: relative; display: flex; align-items: flex-end; gap: 2px; height: 7.5rem;
  max-width: 26rem; margin: 0 auto; padding: 0 .6rem; cursor: ew-resize; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.ln-cl {
  flex: 1 1 0; height: 6.4rem; border-radius: 3px 3px 2px 2px;
  border: 1px solid rgba(216, 180, 92, .45); border-bottom-width: 3px;
  background: linear-gradient(180deg, #2a2140, #171226);
  transform: translateY(calc(var(--i) * -.04rem)) rotate(calc((var(--i) - 18) * .16deg));
  transform-origin: 50% 100%; transition: margin-left .45s var(--nhip), transform .45s var(--nhip);
}
.ln-cl.cat { margin-left: 1.1rem; }
.ln-cat.keo .ln-cl { border-color: rgba(216, 180, 92, .7); }
.ln-cat-vach {
  position: absolute; top: -.4rem; bottom: -.2rem; left: 50%; width: 2px; pointer-events: none;
  background: var(--vang); box-shadow: 0 0 10px rgba(216, 180, 92, .9); opacity: 0; transition: opacity .2s;
}
.ln-cat.keo .ln-cat-vach { opacity: 1; }
.ln-cat.gom .ln-cl { margin-left: 0; transform: translateY(0) rotate(0) scaleX(.6); opacity: .35; }

/* Có / không: câu trả lời TO, rồi vì sao. */
.ln-ck-kq { text-align: center; margin: 1rem 0 .4rem; }
.ln-khung .ln-ck-chu {
  position: relative; display: inline-block; margin: 0; font-family: var(--chu-tieu-de, inherit);
  font-size: 2.6rem !important; letter-spacing: .12em; text-transform: uppercase; padding: .2rem 1.2rem;
  animation: ln-ck-hien .7s var(--nhip) both;
}
@keyframes ln-ck-hien { from { opacity: 0; transform: scale(.7); } }
.ln-ck-co { color: #c9e6a8; text-shadow: 0 0 22px rgba(160, 220, 120, .55); }
.ln-ck-khong { color: #e0645c; text-shadow: 0 0 22px rgba(224, 100, 92, .5); }
.ln-ck-chua { color: var(--vang); text-shadow: 0 0 22px rgba(216, 180, 92, .5); }
.ln-ck-hoi-lai { margin: .3rem 0 0; color: var(--giay-chim); font-style: italic; }

/* ── Học ─────────────────────────────────────────────────────────────────── */
.ln-hoc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1rem; }
.ln-the-khung, .ln-do-khung { border: 1px solid rgba(255, 255, 255, .12); border-radius: .8rem; padding: 1rem; }
.ln-the {
  display: block; width: 11rem; margin: .4rem auto 0; padding: 0; border: 0; background: none;
  cursor: pointer; perspective: 1000px; font: inherit; color: inherit;
}
.ln-the-xoay { display: block; position: relative; aspect-ratio: 2 / 3; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, 1.2, .45, 1); }
.ln-the.lat .ln-the-xoay { transform: rotateY(180deg); }
.ln-the-mat { position: absolute; inset: 0; border-radius: .6rem; overflow: hidden; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; border: 1px solid rgba(216, 180, 92, .45); background: #1a1524; }
.ln-the-truoc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ln-the-ten { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem; font-size: .85rem;
  background: rgba(8, 11, 20, .78); color: var(--giay); }
.ln-the-sau { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: .8rem .75rem; text-align: left; font-size: .82rem; line-height: 1.45; color: var(--giay);
  background: linear-gradient(160deg, #241c36, #14101f); }
.ln-the-sau b { font-size: .9rem; }
.ln-the-sau p { margin: 0; }
.ln-the-ghep, .ln-the-tk { color: var(--giay-chim); font-size: .78rem; }
.ln-the-nut { margin: .7rem 0 0; }
.ln-do-la { display: grid; grid-template-columns: repeat(2, 5.4rem); gap: .6rem; justify-content: center; margin: .4rem 0 .6rem; }
.ln-do-la .ln-la { cursor: default; }
.ln-do-la .ln-ten, .ln-do-la .ln-tay { transition: none; }
.ln-do-hoi { margin: 0 0 .5rem; text-align: center; color: var(--giay); }
.ln-do-chon { display: grid; gap: .45rem; }
.ln-do-nut {
  font: inherit; font-size: .88rem; line-height: 1.45; color: var(--giay); text-align: left; cursor: pointer;
  padding: .55rem .8rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
  transition: border-color .25s, background .25s;
}
.ln-do-nut:hover:not(:disabled) { border-color: rgba(216, 180, 92, .6); }
.ln-do-nut.dung { border-color: #c9e6a8; background: rgba(160, 220, 120, .12); position: relative; }
.ln-do-nut.sai { border-color: #e0645c; background: rgba(224, 100, 92, .1); opacity: .7; }
.ln-do-giai { margin: .6rem 0 0; font-size: .86rem; color: var(--giay-chim); line-height: 1.5; }

/* Trang lá và trang tổng (trang_seo.py dựng, nạp seo.css chứ không nạp file này —
   nên mấy lớp ln-hub-* / ln-ghep-* nằm ở seo.css). */

@media (max-width: 34rem) {
  .ln-ngay-than { grid-template-columns: 1fr; }
  .ln-ngay-bay { grid-template-columns: repeat(2, 5.2rem); justify-content: center; }
  .ln-kieu { grid-template-columns: 1fr; }
  .ln-hoc { grid-template-columns: 1fr; }
  .ln-hang { max-width: 20rem; gap: .5rem; }
  .ln-hop { max-width: 20rem; gap: .4rem; }
  .ln-la .ln-ten { font-size: .76rem; }
  .ln-khung .ln-ck-chu { font-size: 2rem !important; }
  .ln-cat { height: 6rem; }
  .ln-cl { height: 5rem; }
  .ln-mui { font-size: 1.1rem; }
}

/* ── NHỜ TÔI ĐỌC: bài đọc trả phí (28/09/2026) ─────────────────────────────
   Mọi lớp của mục này mang tiền tố `lb-`. Nghi thức và bàn lá dùng lại đúng các lớp
   `ln-` ở trên: lenormand.js dời hai khối đó sang `#lb-cho` lúc đọc trả phí. */
.lb { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(216, 180, 92, .22); }
.lb-kieu { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .9rem; }
.lb-kieu-nut .lb-gia { margin-top: .45rem; color: var(--vang); font-size: .82rem; }
.lb-form { margin-top: 1.2rem; }
.lb-form .ln-nhan { display: block; margin: 1rem 0 .4rem; }
.lb-chu-de { display: flex; flex-wrap: wrap; gap: .45rem; }
.lb-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;
}
.lb-cd:hover { border-color: rgba(216, 180, 92, .6); }
.lb-cd.dang { color: var(--vang); border-color: var(--vang); background: rgba(216, 180, 92, .1); }
.lb-form textarea, .lb-hoi textarea {
  display: block; width: 100%; 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;
}
.lb-form textarea:focus, .lb-hoi textarea:focus {
  outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(216, 180, 92, .12);
}
.lb-form .phu { margin: .45rem 0 0; }
.lb-toi { margin-top: 1rem; }
/* Khoảng cách đặt lên KHỐI BỌC, không lên `.cf-turnstile`: lớp đó còn dùng ở xem.html và
   cau_hoi.html, hai trang không nạp file này. */
.lb-kiem { margin-top: .8rem; }
.lb-tk { margin: .9rem 0 0; font-size: .9rem; color: var(--giay-mo); }
.lb-form .chan-nut { margin: .8rem 0 0; }
.lb-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);
}
.lb-bao a { color: var(--vang); }
.lb-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);
}
.lb-hoi-lai p { margin: 0; line-height: 1.55; }
.lb-hoi-lai .chan-nut { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.lb-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);
}
.lb-dung-lai p { margin: 0 0 .8rem; }
.lb-dung-lai p:last-child { margin-bottom: 0; }

.lb-dau { margin: 1.4rem 0 0; text-align: center; color: var(--giay-mo); font-style: italic; line-height: 1.5; }
.ln-hang.ln-hang-5 { grid-template-columns: repeat(5, 1fr); max-width: 34rem; gap: .6rem; }
.lb-bai { margin: 1.6rem auto 0; max-width: 36rem; }
.lb-bai p, .lb-tra p { margin: 0 0 .9rem; line-height: 1.75; }
.lb-bai strong, .lb-tra strong { color: var(--vang-sang); font-weight: 600; }
/* `.seo-khung h3` (seo.css) đặt cỡ 1.12rem với độ ưu tiên cao hơn một lớp trần, nên ba tiêu
   đề nhỏ của mục này phải kèm `.ln-khung` mới thắng được. */
.ln-khung .lb-nhan {
  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);
}
.lb-doan { padding: .1rem .7rem; margin: 0 -.7rem; border-radius: .5rem; border-left: 2px solid transparent;
  transition: background .3s, border-color .3s; }
.lb-doan[data-la] { cursor: pointer; }
.lb-doan[data-la]:hover, .lb-doan.dang { background: rgba(216, 180, 92, .07); border-left-color: var(--vang); }
.lb-doan:focus-visible { outline: 1px solid var(--vang); outline-offset: 2px; }
.lb-bai .lb-la-dan, .lb-tra .lb-la-dan {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: .5rem 0 .35rem;
  font-size: .8rem; line-height: 1.3; color: var(--giay-chim);
}
.lb-chip { display: inline-flex; align-items: center; gap: .35rem; color: var(--giay-mo); }
.lb-chip-anh { width: 1.5rem; height: 2.25rem; object-fit: cover; border-radius: .2rem;
  border: 1px solid rgba(216, 180, 92, .45); }
.ln-ky { display: block; margin-top: .25rem; color: var(--giay-mo); }
.ln-ky a { color: var(--vang); }

.lb-hoi { max-width: 36rem; margin: 2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(216, 180, 92, .25); }
.ln-khung .lb-hoi h3 { margin: 0 0 .8rem; font-weight: 400; }
.lb-hoi .ln-nhan { display: block; margin: 0 0 .4rem; }
.lb-hoi .chan-nut { margin: .6rem 0 0; }
.lb-luot { margin: 0 0 1.4rem; }
.lb-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; }
.ln-khung .lb-nhan-dk { max-width: 34rem; margin: 2.2rem auto 0; font-size: .82rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--giay-chim); }
#lb-da-luu { text-align: center; margin-top: 1.4rem; }
#lb-da-luu a { color: var(--vang); }

/* Màn rộng. Hộp chín lá: bàn lá đứng yên bên trái, bài đọc bên phải. Dòng năm lá: bàn
   lá dính trên đầu. Cả hai để đọc tới đoạn nào thì vẫn thấy lá của đoạn đó sáng lên.
   ⚠️ `sticky` phải vừa khung nhìn: hộp chín lá ở cột 17rem cao chừng 30rem, dòng năm lá
   cao chừng 10rem. Cao hơn khung nhìn là nó không ghim được vào đâu, chỉ trôi theo. */
@media (min-width: 62rem) and (min-height: 38rem) {
  #ln-kq.tra-phi.kieu-hop .lb-hai-cot {
    display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2.2rem; align-items: start;
    margin-top: 1.4rem;
  }
  #ln-kq.tra-phi.kieu-hop .ln-bay-khung { position: sticky; top: calc(var(--cao-thanh, 3.4rem) + 1rem); }
  #ln-kq.tra-phi.kieu-hop .ln-hop { margin-top: 0; max-width: none; gap: .45rem; }
  #ln-kq.tra-phi.kieu-hop .ln-la .ln-ten { font-size: .78rem; }
  #ln-kq.tra-phi.kieu-hop .lb-bai { margin-top: 0; }
  #ln-kq.tra-phi.kieu-dong .ln-bay-khung {
    position: sticky; top: var(--cao-thanh, 3.4rem); z-index: 5; padding: .6rem 0 .7rem;
    background: linear-gradient(180deg, var(--dem) 82%, transparent);
  }
  #ln-kq.tra-phi.kieu-dong .ln-hang-5 { max-width: 26rem; margin-top: 0; }
  #ln-kq.tra-phi.kieu-dong .ln-cham-nhac, #ln-kq.tra-phi.kieu-dong .ln-cap-cham { display: none; }
}

/* ══ GRAND TABLEAU (29/09/2026): bàn 4 hàng × 9 cột ═══════════════════════════════
   Lá nhỏ nên KHÔNG in tên, không in lá bài Tây, không in nhãn chữ «bạn»: chín cột trên
   màn 390px thì mỗi lá rộng chừng 37px, chữ nào cũng tràn sang lá bên cạnh. Lá của người
   hỏi nhận ra bằng viền vàng (`.loi`), người kia bằng viền sáng (`.kia`), và chạm một lá
   thì ô dưới bàn nói lá đó là lá gì. */
.ln-ban {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem;
  margin: 1.2rem auto 0;
}
.ln-ban .ln-la .ln-ten, .ln-ban .ln-la .ln-tay, .ln-ban .ln-mui, .ln-ban .ln-nguoi { display: none; }
.ln-ban .ln-la { border-radius: .28rem; box-shadow: inset 0 0 0 1px rgba(216, 180, 92, .13); }
.ln-ban .ln-la .ln-xoay, .ln-ban .ln-la .ln-mat { border-radius: .28rem; }
.ln-ban .ln-la .ln-hoa { border-radius: .15rem; }
.ln-ban .ln-la.loi .ln-mat { box-shadow: 0 0 0 2px var(--vang), 0 0 14px rgba(216, 180, 92, .7); }
.ln-ban .ln-la.kia .ln-mat { border-color: #cfd6ea; box-shadow: 0 0 0 2px rgba(207, 214, 234, .85); }
.ln-ban .ln-la.sang { translate: 0 -.18rem; }
.ln-ban .ln-thu { top: 50%; font-size: 1.15rem; }
/* Lá chưa về bàn: ô trống, chỉ còn viền mờ của ô. */
.ln-ban .ln-la.cho .ln-xoay { opacity: 0; }
/* Bàn đứng yên trên màn trong lúc khách cuộn qua quãng bày bài (lenormand.js đặt
   `min-height` cho `.gt-san` rồi gỡ đi khi đủ 36 lá). Phải là chiều cao THẬT: phần tử
   dính không trượt vào vùng `padding` của khối chứa nó. */
.gt-dinh { position: sticky; top: calc(var(--cao-thanh, 3.4rem) + .3rem); }
.gt-nhac { margin: 1rem 0 0; text-align: center; font-size: .92rem; line-height: 1.5; color: var(--giay-mo); }
.gt-nhac .lien-ket { margin-left: .5rem; }
.gt-dinh .gt-nhac { margin-top: .2rem; }

/* ══ GÓI KẾT HỢP TAROT + LENORMAND ═══════════════════════════════════════════════ */
.kh-tarot, .kh-noi {
  max-width: 36rem; margin: 2.2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(216, 180, 92, .25);
}
.ln-khung .kh-tarot h3, .ln-khung .kh-noi h3 { margin: 0 0 .5rem; font-weight: 400; }
.kh-tarot .phu { margin: 0; }
.kh-ba-la { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 24rem; margin: 1rem auto 0; }
.kh-la { text-align: center; }
.kh-anh {
  display: block; width: 100%; height: auto; border-radius: .4rem;
  border: 1px solid rgba(216, 180, 92, .45); box-shadow: 0 14px 30px -16px #000;
}
.kh-anh.nguoc { transform: rotate(180deg); }
.kh-ten { margin: .45rem 0 0; font-size: .88rem; line-height: 1.25; color: var(--giay); }
.kh-o { margin: .1rem 0 0; font-size: .8rem; line-height: 1.3; color: var(--giay-chim); }
.kh-tarot .lb-bai { margin-top: 1.2rem; }
.kh-noi-van p { margin: 0 0 .9rem; line-height: 1.75; }
.kh-noi-van strong { color: var(--vang-sang); font-weight: 600; }

/* Màn rất rộng, Grand Tableau đã bày xong: bàn đứng yên bên trái, bài đọc bên phải. Khối
   này RỘNG HƠN cột chữ 48rem của trang, nên nó tự nới ra hai bên và tự căn giữa.
   ⚠️ `sticky` phải vừa khung nhìn: bàn ở cột này cao chừng 26rem, cộng ô chạm lá. */
@media (min-width: 78rem) and (min-height: 42rem) {
  #ln-kq.tra-phi.kieu-gt:not(.gt-dang-bay) .lb-hai-cot {
    --rong: min(76rem, 100vw - 3rem);
    width: var(--rong); margin: 1.4rem 0 0 calc((100% - var(--rong)) / 2);
    display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 2.4rem; align-items: start;
  }
  #ln-kq.tra-phi.kieu-gt:not(.gt-dang-bay) .ln-bay-khung {
    position: sticky; top: calc(var(--cao-thanh, 3.4rem) + 1rem);
  }
  #ln-kq.tra-phi.kieu-gt:not(.gt-dang-bay) .gt-dinh { position: static; }
  #ln-kq.tra-phi.kieu-gt:not(.gt-dang-bay) .ln-ban { margin-top: 0; }
  #ln-kq.tra-phi.kieu-gt:not(.gt-dang-bay) .lb-bai { margin-top: 0; max-width: none; }
}

@media (max-width: 34rem) {
  .ln-ban { gap: .16rem; }
  .ln-ban .ln-la, .ln-ban .ln-la .ln-xoay, .ln-ban .ln-la .ln-mat { border-radius: .16rem; }
  .ln-ban .ln-thu { font-size: .95rem; }
  .kh-ba-la { gap: .5rem; }
  .lb-kieu { grid-template-columns: 1fr; }
  .ln-hang.ln-hang-5 { gap: .3rem; max-width: none; }
  .ln-hang-5 .ln-la .ln-ten { font-size: .78rem; overflow-wrap: anywhere; }
  .ln-hang-5 .ln-la .ln-tay { display: none; }
  .ln-hang-5 .ln-nguoi { font-size: .78rem; padding: .1rem .3rem; letter-spacing: 0; }
  .lb-doan { margin: 0 -.4rem; padding: .1rem .4rem; }
}

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